How to start using your browser’s debugger

Solid introduction – with a real use case – on how to use the browsers’s built-in debugger: In this post, I will cover using breakpoints, stepping through your code, setting watch expressions, and applying your fixes in Chrome Developer Tools. How to stop using console.log() and start using your browser’s debugger → ☝️ Do not […]

Mercator – It’s a flat, flat world!

In the 16th century, Gerardus Mercator, a Flemish cartographer devised a new way of depicting the world on a flat plane. We set off to explore his map in order to illustrate his biggest blunders, unearth curious facts and explain the advantages that make this representation of the globe still relevant today. I especially like […]

Thinking in React Hooks

React introduced hooks one year ago, and they’ve been a game-changer for a lot of developers. There are tons of how-to introduction resources out there, but I want to talk about the fundamental mindset change when switching from React class components to function components + hooks. The code-flow visualisations between the class component and function […]

Flexbox Holy Albatross with CSS Grid

In succession to The Flebox Holy Albatross, Jonathan Snook wondered if he could recreate it using CSS Grid. ℹ️ To recap, with the Flexbox Holy Albatros a layout goes from either all items stacked next to each other (e.g. all horizontal) to all items stack on top of each other (e.g. all vertical): There’s no […]

An HTML attribute potentially worth $4.4M to Chipotle

Jason Grigsby: I recently found myself racing to fill out Chipotle’s online order form before my mother could find her credit card. In the process, I discovered a bug that could cost Chipotle $4.4 million annually. The form didn’t play nice with autocomplete and therefore would not get sent … The culprit? A JS library […]

Use React.memo() wisely

To improve user interface performance, React offers a higher-order component React.memo(). By memoizing the rendered output, React skips unnecessary re-rendering. This post helps you distinguish the situations when React.memo() improves the performance, and, not less important, understand when its usage is useless Use React.memo() wisely →

Find the cost of adding a npm package to your bundle with BundlePhobia

Ever wondered what the (size) impact of adding an NPM package to your project is? BundlePhobia is a tool that does not only that, it also recommends you other similar packages that have a lesser load. This thing lets you understand the performance cost of npm install‘ing a new npm package before actually adding it […]