Have you ever wondered how syntactical sugar like styled just magically works? Let’s recreate this functionality using tagged template strings in Javascript. If you used tools like styled-components or graphql, you most likely came across tagged template literals. A new Javascript feature that was introduced with ES6. In styled components…

How to put Cal Newport’s deep work concept to practice? These 3 tips helped me over the last years. In his 2016 book, Cal Newport coined the term Deep Work, which essentially means working on a single task for prolonged periods without getting distracted. A concept that back then could…

Going all-in on one’s beloved side-project? Sounds great! But how do you know it is the right project and time to do so? Let’s take a look at a simple concept. Side projects are increasingly popular. Partly because it has become easier than ever to create and distribute. …

ESM and CommonJS are Javascript’s module systems. Let’s understand how they compare and when to choose which system. ES Modules (or short: ESM) and CommonJS (or short: CJS) are the two module systems in Javascript that are actively being used. Module Systems allow us to share and reuse code easily…

Stiches.dev lets you write performant CSS-in-JS. Let’s see how we can speed up creating variants with your color palette! I recently came across Stitches.dev when I rebuilt my portfolio. …

Next.js 12.2 includes a totally revised component for image optimization. Let’s see what has changed. — Note: Right now, the newer next/image component is still under development and only available using the experimental flag. With Next.js 10 and the then introduced next/image component, serving images became a lot easier. …

Without a doubt, Notion.so is one of my favorite apps when it comes to organizing notes. I love their minimal designed text editor because it focuses your attention on the content — and not on unnecessary UI elements. Yet it provides you a ton of powerful features that lead to…

Get the cursor coordinates and index position to display interactive UI elements! — Yes, I know… there are certainly more exciting topics to write about than dealing with cursors on a web page. But since I struggled a lot with this issue in my latest project, I decided to share my approach — hoping that it might help one or the other. In…

This article should provide a general understanding of how Gatsby works and how it can be used to create a personal website from scratch. If you are new to Gatsby, this article is for you. I recently published the first iteration of my personal website. Since I haven’t had a…