1. 150
  1. 29

    It’s still too easy to click a link with this. There needs to be a mode where no matter how long the page has been loaded, it tracks the mouse cursor, and when it looks like the user is about to click something, it loads an advertisement in a way which pushes the link out of the way and makes the user click on the advertisement.

    1. 7

      onclick="load_popup(); click_popup();"

      1. 9

        For a bit more realism, put the popup under the mouse on mousedown instead of on click. That way, the user feels the horror of what’s about to happen for a fraction of a second as they continue their motion and release the mouse button. It makes the user blame themselves for the click: if they had better reaction times they could have dragged the mouse off the popup.

    2. 16

      Missed a trick by not randomly only loading greyed out boxes half the time requiring a refresh.

      I’d love everything about this if it wasn’t so spot on.

      1. 1

        Came to say this… greyed out boxes, so hot right now!

      2. 12

        It looks just like the real thing. I love it. Very well done!

        Especially love how it can’t decide whether to settle on Arial, Georgia, Times New Roman, or Verdana. Classic hard problem for client side rendering.

        1. 11

          It’s not pro, “subscribe to our newsletter” floater is missing.

          1. 13

            But it must be a pop-up that appears when you start to read, otherwise you might learn something

            1. 4

              Clearly. This doesn’t even appear to be monetized.

            2. 11

              I just made this CSS demo (source code) that achieves a similar effect without JavaScript. It does so by using CSS animations. That CSS file fake-client-side-render.css should work on pages other than my demo page.

              One limitation of not using JavaScript is that I can’t randomize the changed properties: the page changes in the same way after every reload.

              1. 7

                You’re a monster.

                1. 7

                  How is it “pro” if there’s no ads fighting an ads blocker and paywall content?

                  Also, I wasn’t even asked about marketing cookies consent! So offended!

                  1. 2

                    Simply add the following code to your website

                    CDNs are perfect for injecting malicious code into vast amounts of websites.

                    1. 9

                      This page doesn’t use it, but SRI fixes this. You’d just need to use this tag instead, then the script either loads with the same code it has now or doesn’t load at all.

                      <script src="https://cdn.jsdelivr.net/npm/hiccupfx@1.1.1/hiccupfx-min.js" integrity="sha256-FXfL4lJZiKypOxYRu83BqEBzLYCaz0ta0RBttX3j9pY=" crossorigin="anonymous"></script>
                      
                      1. 2

                        Just need to make sure that the URL delivers the same version each time (as this one in fact appears to do, given that @1.1.1 portion.) Some CDN URLs will deliver the latest patch version or something.

                      2. 4

                        Two features for the price of one! Such a deal!

                      3. 2

                        I love this, but I’m confused about the lobsters title. Aren’t all web pages client-side rendered?

                        1. 2

                          Yes, I suppose all web pages are client-side rendered, in the sense that it is always the client that converts the HTML and CSS into an image to be drawn on the screen.

                          The title is using “render” in the sense of generating HTML and CSS. With traditional server-side rendering, the server generates the final HTML and CSS and sends it. With client-side rendering, the server sends a stub page with some JavaScript. Then that JavaScript, running on the client side, fetches data about the current page and puts the data into templates that replace most of the HTML and CSS of the page.

                          1. 1

                            Ahhhh, got it. Yes, that makes sense.

                        2. 1

                          Still gets away with an impressive lighthouse score. CLS is not dinged enough to bring it below 86 for me