Blog posts

The archive of blog posts

2022

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.