Daniel Pietzsch

Posts


Thoughts on lazy loading images

“Lazy loading” images means a web page is being lazy about loading image files: it delays loading them until they are actually required – which means, only when they are viewed or about to be viewed by the visitor.

The benefits of this pattern are to make the page load fully faster and to save data by not sending unnecessary bytes when they are actually never required.

It’s a quite popular feature – especially on photo blogs. In the past, this required Javascript to make it work. But recently, the loading attribute on the img element started to get implemented in browsers – first in Chrome, and now in Firefox – which adds native support via a simple HTML attribute.

This made me try out this pattern for my personal sites.

I didn’t use it in the past, because I do not like to require Javascript for my personal websites. And even though this could have been added with progressive enhancement in mind (making use of the <noscript> element), it never felt worth the hassle. Especially considering that this could not only be seen as a feature, but also as a bug:

Because I think there’s a strong use case where a visitor might want to open a page (in the background) and wait for it to fully load before actually consuming it. For example, when you’re on a slow(er) connection: because you know you very likely need to wait for it to load. Or you might want preload it for a location where you’re going to be offline (think flights, or travel to an area without reception). In these cases, you would do the users a disservice using lazy loading, because this “preloading” would not work.

While I don’t think my sites are so important or widely read that they qualify for these scenarios, I still like to consider them.

However – and nevertheless – what I do like about lazy loading images, are its previously stated features: that pages load quicker and only the required data is being sent. Especially for my photo journal site, where each post can have a large number of images. And when you open a page, but then end up not going through it completely, a large amount of data could be saved.

I think for both the use case where you simply browse a page and/or you are on a metered connection, this will benefit the user by limiting the amount of unnecessarily-sent data. And that’s why I recently enabled it here and on the photo journal. So far, I like it (more Chrome’s than Firefox’s implementation, though).

But I feel native lazy loading would almost warrant its own browser preference, which could give users the option to disable it, because of the aforementioned disadvantages.

And maybe the safest and best usability option would be to use it in conjunction with a service worker and offer a piece of UI on each page to enable the user to “save this page for offline use”. Then I think you could have considered all use cases, have eliminated the drawbacks, and could simply benefit from its upsides.


Photo Journal Design Update

In the last week, I updated my photo journal’s design. There are no more borders around the images, the photos are more aligned to a grid and have varying sizes. It’s all more well-aligned and therefor looks cleaner.

Each post still shows most images fairly large, and so one can still simply scroll through and consume images comfortably that way. No clicking or tapping to make them “full size”. But there are some images larger and some smaller now (while still being large enough). And I think this makes for a nice visual break every once in a while and will give the eye different points to focus on.

In case you were looking at the pages on a phone-sized screen, there’s not much difference to the old layout. But the bigger the screen gets, the more different it looks now. Depending on your screen size, there will be two, three or even four and more images shown side by side. I think this is a much better use of wide screens.

I didn’t want to layout my posts this way by hand, though. And so I used the CSS flexbox feature to do it for me. Getting the flexbox parameters just right took quite a bit of trial and error. And then this had to work in conjunction with responsive images, too. But this is a post for another day.

Have a browse through the new design, if you like!



It turns out, lazy loading does work with responsive images in Firefox 75: for this to work, you currently have to put the loading attribute before srcset in the attribute list of an img tag. This is a bug, and will be fixed in a future release.

So, I changed my markup accordingly – both on this site and the photo journal.

As for Firefox’ implementation itself: I find it currently too lazy. A new image is only downloaded when it’s already inside the viewport. This is going to result in visitors (unnecessarily) having to wait for an image download, especially when the image is larger and/or their internet connection is not the fastest.

Chrome’s implementation on the other hand is more appropriate in my opinion: it starts downloading images marked with loading=lazy well in advance – a few full “screens” before they are actually reached via scrolling.

Anyhow: happy this got implemented in Firefox now, too, despite its implementation needing a bit more refinement in my opinion.




Corona update

In the last two days, we heard that a parent of a friend died because of Covid-19 and one parent of another friend is in intensive care.

And all of a sudden, this whole thing feels a lot more real and threatening.

I’m quite shocked to be honest and feel so sorry for them. 😞


Apart from those terrible news, our own immediate life feels somehow weirdly quite normal. This probably has to do with the fact, that – as mentioned previously – we’re used to working from home, and that we live in a relatively quiet part of town, where you don’t really notice things like traffic being less or all the shops are closed (because there are no shops).

We (still?) go outside regularly – which is generally allowed. And we stick to the rules: just our family/household, and don’t stand/sit/walk close to others. A lot of others do, too. Both the “going outside” bit, as well as the “rule-following”.

We hope this will remain possible, because spending all day inside would be pretty challenging (mainly mentally) – even shorter-term. Zoe needs to go and play outside. And so do we. The weather’s lovely at the moment, and we’re now extra glad we moved to a part of town that is close to the Rhine, and offers a bit of nature. Beaches are close-by, grassy areas, a little piece of forest, and even a couple of rope-swings on trees. That’s all we need to keep everyone happy (as of course, playgrounds and any play-opportunities inside remain closed). And those areas are big enough to easily avoid immediate contact with others.

You do notice a difference for sure, and it’s not like anything got easier – far from it. But we feel we’ve been lucky so far. The main limitations have been that we can’t do all the things we normally enjoy, like meeting friends & family, going to the cinema, visiting playgrounds, going out, having band rehearsal, etc. But that are really very mild limitations.


But yes, “the thing” is constantly on our minds and we worry a bit about our parents.


So far we are healthy – both physically and mentally. 🤞


Yesterday I went grocery-shopping with a mask for the first time. It was simply a piece of black cloth I wrapped around my neck and lower part of my face (I read that any mask is better than no mask, so I simply took a fitting piece I found in the closet). We wondered whether people would think I might rob the supermarket. But since roughly 50% of shoppers wore some type of mask, it quickly felt (almost) normal.

There’s now almost always a queue in front, since they limit the number of people that can enter at once.

I did take a camera but didn’t photograph anyone or anything. I didn’t have the courage and also felt it was inappropriate – at least for now. I’d like to eventually get some pictures of what daily life looked like during these times, though.


I watched this video of the maiLab channel assessing the situation and laying out how and when we might get back to some relatively “normal” life. If you understand German, I recommend it.


That’s it. Stay safe!




This site now uses lazy-loading for the Youtube video embeds. Meaning, a preview image is loaded, and only when you click that is the actual video embed requested.

After posting a few Youtube videos to this site recently, I noticed this was loading a whole lot of quite large third-party resources. And this was happening without even playing a video – very likely resulting in visitors having to download a non-trivial amount of megabytes of no use. The site was slow to load. My Lighthouse score went way down.

So I fixed it.

To lazy load the videos I wrote a Jekyll plugin for a custom Liquid tag, that will take a Youtube video URL as parameter and spit out an iframe tag that uses its srcdoc attribute to at first only load the video’s preview image and display a “Play” button.



Grmpf. I just noticed my “Fuck you, Instagram!” bookmarklet became useless. Instagram won’t let you click and open an image from a person’s index page. They now immediately prompt you to log in. And while the bookmarklet currently still removes the log in modal, any further attempts on clicking an image are ignored. So, this current version does not work any longer. 😠

At least, one can still right-click and hit “Open Link in New Tab” (in Safari that is). But that’s pretty tedious.

I wish more people simply had a website or blog without this sort of nonsense.


Spent the evening working on this site a little bit:

  • Added article teaser images to index pages.
  • Made the “Read More” links more prominent.
  • Added OpenGraph og:image and og:type meta tags.
  • Adding loading="lazy" to the Youtube iframes.
  • Making the Youtube embeds grayscale on index pages unless you hover over the article.

So, here’s a drumcam video of Danny Carey playing “Pneuma” off the latest Tool album:

Seeing a drummer play songs live always makes you appreciate the skill even more than simply hearing it. Even with someone like him, where by merely listening it’s already immediately obvious that most people – including me – probably wouldn’t even be able to count this song correctly let alone play drums to it and keep a band playing together.

I also think it’s a first, I’ve seen that type of high-quality video of Danny Carey.

And great song by the way. My current favourite from “Fear Inoculum”.


Corona Virus

This feels serious now.

Not very long ago, it didn’t – at least not to me1. But now that the city and government have called for pretty drastic measures to prohibit person-to-person contact as much as possible – cancelling concerts, closing schools, museums, bars, and reducing public transport etc. – I’ve changed my mind.

As far as I read, taking these actions is necessary. You only have to look to areas where the virus was or is getting out of control. The people there certainly wished they reacted earlier.

We definitely hope we didn’t catch and transmit it (we don’t show any symptoms). And we also hope, that the whole situation will remain relatively under control. 🤞😬

Our current plan

Work-wise this hasn’t been too big a change for us so far. We both have been working from home most of the time anyway. However, I stopped commuting to my one client’s office two weeks ago, and went less to cafés, too. (And from this week, almost everyone in the company is working from home, too, anyway.) However, now that Zoe will no longer be looked after at the playgroup three mornings per week, we still might have to adjust a little.

We hope it’ll still be allowed to simply go outside and play with her in non-crowded areas – as playgrounds are going to be closed soon, too (our main playground already is). Because staying inside with a small kid for weeks at a time could become a little challenging.

Grocery-shopping-wise we plan to only go once per week – simply do reduce the number of times we go to the supermarket. Today we did our first such trip.2

We also plan to only meet with friends or family when necessary.

Stay safe everyone!

  1. Mainly because I’m not in the directly threatened risk group I think. That’s not to say I was ignorant of the people that are – close to me or not. But I think I simply underestimated how quickly the infection could and would spread. And how this in turn could bring the health system to its limits; which then would result in many more problems down the line and also in many more – possibly otherwise preventable – deaths. 

  2. And we even got lucky and were able to buy some flour and toilet paper – something that was hard to get during the last two weeks. 



My first ever pedalboard is taking shape:

My looper, phaser, fuzz, and octaver pedals on a pedalboard. An expression pedal on its right. And my feet at the bottom of the frame, featuring socks with cheeseburgers pattern.

In addition to the looper, the phaser, and the Little Big Muff fuzz I mentioned before, I now also got an EHX Pitch Fork and an expression pedal.

It’s all attached to the pretty much smallest pre-build board I could find: a Fame Spaceboard 50S.

And I think I now want to buy a single dedicated power supply, which can power all those pedals. Because it’s currently a little annoying having to power the pedals all individually.

Anyhow: happy progress!


Webmentions

This site can now receive Webmentions. Either directly or via Twitter (with Bridgy’s help).

Webmentions are a standard and open way to send and receive common social-media reactions like “comments”, “likes” or “replies” via and on any site.

For this site here, I’m using Aaron Parecki’s webmention.io service to collect incoming reactions and Aaron Gustafson’s Jekyll plugin to cache and display them on this site. Thank you very much, Aarons!

For now, I’m only displaying new Webmentions whenever this site is re-build. That only happens irregularly and is far from real-time, but it is good enough as a first step. Though I still plan to utilise the plugin’s JS additions to display any Webmentions that queued up after the last rebuilt. Also, I currently only display “likes” and “replies”, simply because I didn’t get around to styling the other types, yet. So: still some things to do.

But for now: can someone please send a Webmention already!?