WDRL 202

Tabbed Interfaces, Performance Optimization with CSS Grid, FLIF & HEIC

Hi, I’m Anselm Hannemann. Freelance webdesigner, frontend engineer, advisor. Curating WDRL, growing vegetables on a market garden farm.

Profile photo of the author, Anselm Hannemann


Recently I saw a question asking about the most useful change/addition to the web platform in recent years. And it made me thinking quite a lot. Intuitively, I immediately thought about all the ECMAScript stuff, about JavaScript libraries and frameworks like React.js and vue.js. After some thought I realized that this is quite far away from what had the biggest impact on easing my daily work. It’s not npm, it’s not any JavaScript module—it’s CSS Flexbox. If I remember how things were before I was able to use Flexbox widely, writing layouts was much harder. Flexbox takes away a lot of stress, a lot of thinking about hacks to e.g. center an item vertically in an container or distribute objects in a row. It’s one of the things I just use daily but don’t embrace its value enough. And with CSS Grids it’s a bit the same. I still use it rarely but it’s saved me already a lot of time and allowed me to write clean code for complex code. And that’s what this week’s case-study of rewriting the slack.com website with CSS Grids shows. It’s not about using the latest technologies because they’re cool. It’s about using them and discover that after all the code is faster, cleaner, easier to read and maintain and the performance of the website benefits as well. This isn’t about minimizing the impact of ES6,7 and all the amazing JavaScript tools we got in the past years but about reminding that there are other little things that might have the same or even more impact on our work.







Work & Life