Blog posts

The archive of blog posts

2022

How to use multiple GitHub accounts on one machine

Quick tutorial on how to use multiple GitHub accounts on one machine with SSH keys

How to ban imports with ESLint

Sometimes you don't want to use some modules from a library or other part of your code. Or you want to prevent your colleagues from using them. This post gives you a ready-to-use solution for banning imports with ESLint.

Can SVG Symbols affect web performance?

When it comes to repeatable SVGs, most people would create a component and reuse it anywhere they want. There's a high chance, that you would be missing some performance freebies. If you're striving for that bang-for-the-buck kind of performance, this article might be interesting for you.

Simple, pragmatic and performant i18n solution for JavaScript applications

A copy-paste snippet for pragmatic i18n implementation for any modern JavaScript application. Supports dotted paths & TypeScript.

How to assign ref in forwardRef component

How to assign multiple refs to a react component wrapped with forwardRef. Copy-paste solution.

How to implement horizontal media scroller component in React with CSS only

A copy-paste snippet for implementing a swipeable carousel or so called media scroller component. Built with almost no-JS.

One rule for optimizing images on the web

The only rule you need to serve well-optimized images on the web

How to use wildcard domains with Next.js Image component

A guide on how to use next/image component with wildcard subdomains. Useful when integrating with external providers, like Facebook or Instagram.

2021

Auto-fixable import sorting rules for ESLint

ESLint config snippet for sorting imports automatically on file save. Works well with Next.js

Reusing SVG elements in HTML without copy-pasting it

Snippet for reusing SVG elements in HTML without copy-pasting it. Example made in React.js

Creating accessible and non-flickering dark mode with Next.js

A tutorial on how to create accessible and non-flickering dark mode with Next.js for both SSR and SSG.

Creating scalable sitemaps with Next.js

A go-to solution for creating scalable sitemaps using Next.js with minimal effort and costs

NextJS custom image loader with WebP support and polyfill

Using next/image component with custom loader that supports both webp and jpeg polyfill in Safari. Three possible solutions and example with Contentful API.