Lexical is a new framework for building rich text editors. Let’s build a simple WYSIWYG editor with it. In April 2022, Meta open-sourced Lexical — “an extensible text editor framework”. Given that it powers some of the most popular web apps in the world, it especially focuses on accessibility and…

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…