Blog posts

Mar 26, 2022

When you optimise your web app, your goal is to make the experience better for the user: That means usually ‘faster’ by transferring and parsing less data. But caution: The same web app can cause Cumulative Layout Shift (CLS) on slower connections but runs without CLS on faster connection. If you’d like a refresher about Core Web Vitals, I explained them with GIFs in this post. TL;DR: slower connections can result in CLS when lazy loading components that you wouldn’t see on wifi connections.

Feb 17, 2022

The German court has ruled last month that Google Fonts is not in compliance with GDPR. The integration of dynamic web content such as Google Fonts from US web services is illegal without the consent of the visitor. A website operator received a fine of 100€. The Munich court clearly wanted to set an example. They even mentioned the next fine will be 250.000€ for the website operator if they don’t comply.

Jan 18, 2022

In remembrance of my first love. Your LTS came finally to an end. You retired on 31st December 2021. You will always have a special place in my heart. You arrived with great anticipation, Put the web dev world upside down; Model, View and Controller were in separation, Even Javascript beginners didn’t frown. Be it JavaScript, CoffeeScript or SCSS, You handled them all in a snap; Grunt helped you to transpile and compress,

Jan 6, 2022

This can be confusing for anyone working with TypeScript—beginner or seasoned programmer. Both ways can cover similar needs. In this post you’ll quickly see what Typescript feature is possible to implement as Type Alias or Interface. I stayed brief and spicy to give the post an overview character. 👉 TLDR: You don’t care about each difference? What should you use? Use interface until you need type —orta

Nov 10, 2021

Learn why WOFF2, and WOFF as a fallback, is the only font format you need. If you’ve been around as a web developer for some time, you’ve seen these font formats in your CSS. Here’s an example for a self-hosted Raleway font: @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; src: url('../fonts/raleway-v22-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/raleway-v22-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/raleway-v22-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('.

Aug 16, 2021

Are you a developer who is concerned about the size of newly added libraries? Or do you want to find a culprit in a rather big Javascript bundle? If you’re like me, then you answered yes to both questions. In this post I’ll cover a few tools that come in handy for a quick analysis of bundle sizes without changing or ejecting your build architecture. VS Code extension: Import Cost Immediately see the weight of what you import in VS Code.

Aug 4, 2021

Have you ever optimised your website for the Core Web Vitals (CWV)? Did you want to check your changes the next day—but Google’s various tools don’t give you current daily CWV metrics due to the rolling 28-day window? In this post I’ll review Google’s toolset for measuring CWV and explain how to see if your changes had any effect on CWV day by day with Google Analytics (GA). Accurate daily CWV measurements: Create your report 3-step workflow to get your daily accurate CWV report.

Jul 28, 2021

JS frameworks like Vue can give elements a unique key. In a list rendering they might be able to reuse these keyed list items, when the list is changing. The already created DOM nodes don’t need to be recreated. This is a great performance gain. But when a list changes and the nodes merely switch their position, the keyed items can be considered as a shift in the DOM (CLS) by Core Web Vitals on slow connection devices.

Jul 20, 2021

Passing your Core Web Vitals and google will reward you with visibility. With Google’s June 2021 update Core Web Vitals (CWV) will become a factor in SEO ranking. It measures the quality of a site by these three metrics: LCP, FID and CLS. If you pass all of them them, Google will reward you with more visibility. You can check how well you do on these metrics via several ways:

Apr 11, 2021

Keep the books you read in sync with your GitHub profile README In this post I’d like to show you how to use GitHub Actions to automatically sync your Goodreads books you read in your GitHub profile README. I created goodreads-profile-workflow for devs that love to read and like to share what they read. You can customise the input parameters to your liking: list the books you’re currently reading, last 5 books you read and even add your personal ratings, too.