Ayc0 articles - 24 total
@blocz/react-responsive v4
@blocz/react-responsive v4 was just released with a few removals of deprecated APIs. Those are...
Intl.Segmenter(): Don't use string.split() nor string.length
TL;DR Explanation Definitions UTF-16 String.prototype.length Unicode composition Emoji...
TypeScript 5.0: new mode bundler & ESM
In TypeScript 5.0, 2 new features were released: moduleResolution:...
How does CSS work? The specificity
Introduction Let’s take this piece of code: <style> .red { color: red; } ...
How to learn CSS with games
Learning CSS isn’t the easiest. But the community helped solving that by creating a lot of...
CSS :before vs ::before & :after vs ::after
When reading CSS code, we sometimes see code using :before and other times with ::before (same for...
Light/dark mode: Corrections
In this post, I want to fix some mistakes I made in other posts, and also include new elements I...
Proper cross-fade in CSS
In https://www.youtube.com/watch?v=PYSOnC2CrD8, @surma and @jakearchibald talked about what a proper...
TypeScript 4.9: satisfies operator
In their v4.9, the TypeScript team is releasing a new operator: satisfies (see blog post...
CRA vs Parcel
When working a new React project, there are a lot of frameworks / bundlers that we can...
Semver: The unknown buildMetadata
I was reading semver's spec and I noticed something weird in the regex: This is the 1st time that...
Yarn.lock: How to Update it
Introduction Knowing how to read a yarn.lock file is important: it lists the packages that...
Yarn.lock: How to Read it
Introduction Looking at the yarn.lock file can be a bit overwhelming, but it's actually...
Light/dark mode: React implementation
Introduction In the previous posts, we saw how to: use CSS to handle different...
Light/dark mode: avoid flickering on reload
Presentation of the issue If you already added a dark mode to your website, and if you are...
Light/dark mode: system mode + user preferences
In the previous posts, we saw: how to use CSS variables to adapt the display to user system...
Light/dark mode: user input
In the previous post, we saw how to use CSS variables to adapt the display to user system...
Light/dark mode: the simple way
In the previous post, we've seen how to use the color-scheme html meta tag to benefit from the...
Light/dark mode: the lazy way
Color scheme If you already have a website working, and you haven't used any styles (no...
Responsive design in React
Hi, I'm Ayc0, maintainer of the library @blocz/react-responsive that aims to provide easy utils in...
@blocz/react-responsive v3 is out
The v3 of @blocz/react-responsive was just released with few bug fixes and new names. You can check...
React refs and dom references
Introduction Sometimes you need to have access to a DOM element in React (like for...
Migrating class components to hooks – rules
When transitioning from classes to hooks, there are a few rules: First, a few changes need to be...
Migrating class components to hooks
I've been working with React for some time (more than 3 years now) and when hooks came out, I was...