Spacing grid/flexbox items in CSS with the gap property

The gap property for Flexbox about to land in Chromium 85. It allows you to define the size of the gutters between Grid/Flexbox children. CSS Grid brought a delightful spacing feature called grid-gap, which quickly became a popular way to put space into layouts. It was easy to fall in love with because it took […]

Need to Connect to a Local MySQL Server? Use Unix Domain Socket!

The folks at Percona have benchmarked TCP/IP vs. Unix Connections to a local MySQL server. When connecting to a local MySQL instance, you have two commonly used methods: use TCP/IP protocol to connect to local address – localhost or 127.0.0.1 – or use Unix Domain Socket. If you have a choice (if your application supports […]

Use Tailwind classes within any CSS-in-JS library with Twin

To use Tailwind – or any prebuilt CSS library/framework for that matter – in a React app you can simply import its generated CSS file and use the classes it exposes: import ‘../tailwind.generated.css’; // … const Alert = ({ title = '', message }) => ( <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" […]

React Performance Optimization with React.memo()

I know I’ve posted a similar article before but this is a pitfall I commonly see and therefore it can’t be repeated enough. React internally already optimizes the performance quite a bit without having to explicitly optimize for performance. React.memo can help you to optimize the number of renders of your React components even further. […]

Rebuilding our tech stack for the new Facebook.com

The Facebook Engineering Team on how they’ve built the new Facebook.com – a version which I’ve been able to try for nearly two months by now. Throughout the process, we anchored our work around two technical mantras: As little as possible, as early as possible. We should deliver only the resources we need, and we […]

Second-guessing the modern web

An article that’s been making rounds on Twitter today is Second-guessing the modern web: There is a sweet spot of React: in moderately interactive interfaces. Complex forms that require immediate feedback, UIs that need to move around and react instantly. That’s where it excels. But there’s a lot on either side of that sweet spot. […]

How are Docker Layers bundled into Docker Images?

It’s impossible to work with docker containers without docker images. In this post I want to talk about what makes docker images possible: the overlay filesystems. Interesting to know how things work behind the scenes. How are docker images built? A look into the Linux overlay file-systems and the OCI specification →

Alternative text for CSS generated content

Great find by Stefan Judis: Today I learned that the content property supports a way to define alternative text for generated content. You can specify the alternative content after a /: .new::before { content: url(./img/star.png) / "New!"; } Here’s how that works with screen readers: .new-item::before { /* "black star" and element content is read […]