Static Site Generators (was: Ping off topic)

[Clifford Ilkay]

Hi Mats,

I played with a few static site generators a couple of years ago. I
modified the starter theme for GatsbyJS, which you can find here:
https://github.com/cilkay/gatsby-starter-hero-blog. I have a demo site
setup here: https://gatsby-starter-hero-blog-modified.cliffordilkay.com/.
The demo site is hosted for free on Netlify. A git push will trigger a
build and automatic deployment.

One of the things that I really liked about this particular theme is the
image handling pipeline. I deliberately picked at 4k resolution images to
demonstrate how this starter template will automatically generate all the
required image sizes as necessary and do that Medium-like image fade-in.
How that is accomplished is by some clever trickery. When a page loads, you
want the rendering engine of the browser to only have to parse the DOM
once. If you have a very high-resolution image, the page will be very slow
to load, especially on lower bandwidth devices, as the image pours onto the
page. In this starter theme, the high-res image is shrunk to 1px and then
resized up to the desired size, 800 px wide if I recall. Of course that
will make the image pixelated. However, when it's blown up so much, the
pixelation looks like a blur. Our brains are very good at approximating
what the image is even from a pixelated, blurry image. What have we
accomplished by doing this?

First, we have reserved 800px of space for the image. The browser will not
have to redraw the page as the blurry pixelated image is replaced with the
real thing later. Second, a 1 px image will load very quickly so the text
in the blog body will be visible much faster than had it been the full-res
image. Finally, while the reader starts reading the text, asynchronously,
we're fetching the full-res image and replacing the pixelated low-res image
without the page having to be redrawn or the page being scrolled so the
user experience is very good.

Regards,

Clifford Ilkay


On Wed, Oct 14, 2020 at 11:18 PM ADJob <mats at adjob.se> wrote:

> Hi,
>
> I have also noticed a silence on the list. I miss Das :-)
>
> So here is a lame attempt to start a off topic discussion about making web
> sites. Not web applications, but they are close.
>
> I have moved my website from a slow web hotel to a separate fast VPS. I
> have played with a tutorial how to do this.
>
> https://gowebstatic.tk
>
> Any feedback appreciated.
>
> /Mats
>
> _____________________________________________________________
> Manage your list subscriptions at http://lists.omnis-dev.com
> Start a new message -> mailto:omnisdev-en at lists.omnis-dev.com
>