Ayc0

@ayc0.github.io

Frontend engineer at @datadoghq: https://druids.datadoghq.com Personal website: https://ayc0.github.io/ I try to build good tools for #javascript and #reactjs 😅

77 followers187 following28 stories

Longform Stories

@blocz/react-responsive v5.0

@blocz/react-responsive v5.0 was just released. Let’s go through all the different features and changes added by this new major version

3d ago·1 min read·22 words

@blocz/react-responsive v4

@blocz/react-responsive v4 was just released. Let’s go through all the different features and changes added by this new major version

Jan 1·1 min read·22 words

@blocz/react-responsive v4.0

@blocz/react-responsive v4 was just released. Let’s go through all the different features and changes added by this new major version

Jan 1·1 min read·22 words

Monitoring WebSockets

Tools like Sentry or Datadog provide amazing monitoring tools for a lot of requests, but not for WebSockets. Why is that and can we find a way to still monitor WebSockets?

Dec 23·1 min read·33 words

Intl.Segmenter(): Don't use string.split() nor string.length

UTF is tricky: the length of a string can mean a lot of different things based on whether you want the number of code points, code units, and graphemes. What are the differences, and how can we naviga…

Jul 25·1 min read·48 words

TypeScript 5.0: new mode bundler & ESM

TypeScript 5.0 is out and introduced a new compilation option: `moduleResolution: bundler`, let’s see how we can use it

Apr 11·1 min read·26 words

How does CSS work? The specificity

When writing CSS selectors, they sometimes don’t seem to be following the order of the code. Indeed they don’t: they also follow the specificity of each selectors. But what is the specificity and how …

Jan 30·1 min read·43 words

How to learn CSS with games

A tiny list of websites to learn CSS while playing interactive games

Jan 26·1 min read·18 words

CSS :before vs ::before & :after vs ::after

Is there a difference in CSS between `:before` and `::before`? Which one is valid? What about similar syntaxes like `:hover` and `::first-child`?

Jan 17·1 min read·30 words

Light/dark mode: Corrections

In my previous articles about Light/dark mode, I made a few mistakes, or forgot to mention some elements

Jan 16·1 min read·21 words

Proper cross-fade in CSS

Classical cross-fades in CSS using opacity don’t properly animate the opacity of elements, making them less opaque then needed. This article will show you how to achieve a proper cross-fade in CSS.

Oct 6·1 min read·36 words

TypeScript 4.9: satisfies operator

TypeScript 4.9 is out and introduced a new operator: `satisfies`, let’s see how we can use it

Sep 25·1 min read·21 words

CRA vs Parcel

A comparison between Create-React-App & Parcel when building a React single-page-app

Sep 5·1 min read·14 words

Semver: The unknown buildMetadata

The semver’s spec mentions a group called “buildMetadata”. If you’ve never heard of this before, you’re not alone

Jul 14·1 min read·22 words

Yarn.lock: How to update it

Yarn comes with a lock file `yarn.lock` that isn’t made for human to edit it. But sometimes you need to do a specific edit in it (like dropping a specific package). This article highlights a few diffe…

Sep 5·1 min read·46 words

Yarn.lock: How to read it

Yarn comes with a lock file `yarn.lock` that isn’t made for human to read it. But when using the tool, you sometimes need to go through it to be able to understand it (specially when reviewing PRs)

Jul 27·1 min read·42 words

Light/dark mode: React implementation

After building a few different ways of creating light/dark modes for your websites, either in plain CSS, or with a bit of vanilla CSS, we need to tackle the topic of React websites. While most of the …

Jun 24·1 min read·62 words

Light/dark mode: avoid flickering on reload

When manually handling the theming of your website, you may run into a flicker at the page load from white to black. This is because your JavaScript takes some time to boot and to apply the dark mode.…

Jun 1·1 min read·51 words

Light/dark mode: system mode + user preferences

In all my past articles, I showed either how to create a light/dark mode following your users system without JavaScript, or how to create a light/dark swatch for your website using JavaScript but with…

May 31·1 min read·54 words

Light/dark mode: the simple way

Handling light/dark mode on your websites don’t have to be complex. A few lines of CSS to declare a few CSS variables can be all you need!

May 30·1 min read·32 words

Light/dark mode: user input

In this article, we’ll see how we can implement the logic to switch back & forth between light/dark mode

May 30·1 min read·23 words

Light/dark mode: the lazy way

Let’s see how we can build a dark-mode compatible website, following your user’s system preferences, with 1 line of CSS

May 29·1 min read·25 words

Responsive design in React

This short article focuses on when to use raw CSS vs React bindings when working with responsive designs

May 9·1 min read·22 words

@blocz/react-responsive v3.0

@blocz/react-responsive v3 was just released. Let’s go through all the different features and changes added by this new major version

Mar 12·1 min read·22 words

@blocz/react-responsive v3 is out

@blocz/react-responsive v3 was just released. Let’s go through all the different features and changes added by this new major version

Mar 12·1 min read·24 words

React refs and DOM references

You sometimes needs to have access to the underlying HTML elements in React. This short article is here to help you navigate this problem

Aug 21·1 min read·29 words

Migrating class components to hooks – rules

Migrating class components to hooks can be difficult. There is no official guideline to help you migrate to them. This article will list the major advices you may want to follow during those migration…

Aug 18·1 min read·41 words

Migrating class components to hooks

This article is an applied example of how I migrated the library `react-only` from classes to hooks

May 3·1 min read·22 words