While redesigning my photography website, I've looked into the Open Graph (OG) images, which are displayed when sharing a link on social media or messaging apps. Here's an example from WhatsApp: For each photo that I publish, I create a WebP thumbnail for the gallery. I wanted to … | Continue reading
I'm a frequent user of bookmarklets. As I'm sharing some of them on my blog, I wrote this post to explain what bookmarklets are and how to use them. In short, a bookmarklet is a browser bookmark containing JavaScript code. Clicking the bookmark executes the script in the context … | Continue reading
It can be frustrating to fill out a web form, only to accidentally refresh the page (or click "back") and lose all the hard work. In this blog post, I present a method to retain form data when the page is reloaded, which improves the user experience. Browser behavior Most browser … | Continue reading
In this post, I will summarize some problems and constraints that I've encountered with the Notifications and Push web APIs. Notification settings on macOS Someone who's definitely not me wasted half an hour wondering why triggered notifications would not appear. On macOS, make s … | Continue reading
Browser extensions like Stylish, Stylus or Tampermonkey make it possible to create custom website themes/skins. At the same time, I try to lower the number of add-ons that I use, mostly due to security and performance reasons. Interestingly, the uBlock Origin ad blocker can achie … | Continue reading
As I was preparing the requirements for an accessible web video player, there was some confusion around subtitles, closed captions, audio descriptions and transcripts. In this post, I use interactive examples to show the difference. I also provide related success criteria from th … | Continue reading
Last year, I started a photography hobby. Soon after, I've created a place where I can share some of my work, without any attention-driven algorithms dictating the terms. Here's a technical write-up of my journey. Table of contents: MotivationInspirationDesignImplementationConten … | Continue reading
While building my photography portfolio, I've put much effort into optimizing the picture loading behavior. One technique is to provide a visual fallback as long as the images are still loading. First, a static background color included in the markup is displayed. As soon as a ti … | Continue reading
I've been using "Darek Kay" as my pseudonym since school. My surname was long and difficult to pronounce, so I've been mostly using it in a formal context. Last year, I changed my legal name, which also influenced my online presence. Due to the change, looking up my new name via … | Continue reading
RSS is not dead. It is not mainstream, but it's still a thriving protocol, especially among tech users. However, many people do not know what RSS feeds are or how to use them. Most browsers render RSS as raw XML files, which doesn't help users understand what it's all about: In t … | Continue reading
Recently, I've encountered a peculiar issue with Eleventy. The development server stopped working: eleventy --serve...[11ty] Wrote 92 files in 0.48 seconds (5.2ms each, v1.0.2)[11ty] Watching… There were no errors. Everything seemed fine, except for the dev server not being avail … | Continue reading
React Testing Library (RTL) is arguably superior to Enzyme, due to a shift from testing implementation details to more user-centric unit tests. However, many projects still contain lots of Enzyme tests from the early days, making migration difficult and time-consuming. At my comp … | Continue reading
After migrating a project to Vite, I've moved my Storybook setup into a separate module — a folder next to the actual app: project ├─ app | ├─ src | └─ package.json └─ storybook ├─ .storybook | ├─ main.js | └─ preview.js └─ package.json First, I've moved all Storyboo … | Continue reading
I like the default dark color theme in Firefox, but I prefer to view websites in light mode. This distinction has been working until recently, but with Firefox 95, the browser dark theme will enforce dark mode on websites as well. This sounds like a good default, but I want to se … | Continue reading
Overview of different techniques to implement comments using a static site generator. | Continue reading
Both npm and Yarn support dependency version ranges (e.g. ^4.1.1). However, there are some differences in how package managers resolve dependencies, which might lead to inconsistencies between different environments. In this post I will present the behavior of npm 7.15.1 and Yarn … | Continue reading
Pitfalls with partial unit test assertions | Continue reading
Git's log and diff commands are useful for inspecting your repository changes. Both commands accept ranges of commits in different formats, which can be confusing. In this post, I will shed some light on the differences between a b, a..b and a...b commit ranges. Check out the rep … | Continue reading
Create React App (CRA) provides an all-in-one development toolchain for your React applications. It is great for beginners, as you don't need to care about configuring your toolset. However, I've encountered more and more limitations without "ejecting", mostly due to the project' … | Continue reading
Call me old-fashioned, but despite using streaming services, I like to own the music I listen to. This also means I'm handling album cover images that come in different sizes and ratios. Recently I wrote a script to unify the image size: The base image size should be 500×500 px E … | Continue reading
Recently, Curtis Einsmann posted some stats from their work as a software engineer. This inspired me to check my own impact as an employee: 1002 pull requests shipped 3062 pull requests reviewed 5 years (since migrating to GitHub Enterprise) LOC (lines of code) is a terrible metr … | Continue reading
Let's assume we want to write a Jest config object. Our IDE cannot infer available Jest options: With JSDoc comments, it's possible to document our JavaScript objects and function parameters. While JSDoc is mostly a documentation tool, editors like WebStorm and VSCode make use of … | Continue reading
Since 2019, WebAIM evaluates the accessibility of the top 1,000,000 websites. The results are alarming: 97.4% of home pages had detectable WCAG failures in 2021. I leave the root cause analysis for another blog post, but one common assumption is that big companies don't want to s … | Continue reading
Practical tips for creating, embedding and debugging AVIF images. | Continue reading
An approach for structuring color palettes to prevent contrast ratio issues. | Continue reading
Don't fear history-changing Git commands — embrace them instead. | Continue reading
A skydiver rates parachute emojis. | Continue reading
An accessibility review for popular CSS UI component libraries. | Continue reading