<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"><channel><title>Projects by Ayc0</title><description>Various personal projects (finished or not), and all the blog posts I wrote</description><link>https://ayc0.dev</link><item><title>React: how to define a constant variable</title><link>https://ayc0.dev/posts/constants-in-react?utm_source=rss</link><guid isPermaLink="true">https://ayc0.dev/posts/constants-in-react?utm_source=rss</guid><description>When working with components, a use-case comes up often: computing an operation on component initial mount, and having it be fully stable across the entire lifetime of the component</description><pubDate>Tue, 30 Jun 2026 00:00:00 GMT</pubDate><category>react</category></item><item><title>Deploying to standard.site</title><link>https://ayc0.dev/posts/standard-site?utm_source=rss</link><guid isPermaLink="true">https://ayc0.dev/posts/standard-site?utm_source=rss</guid><description>This post is a brief introduction to the AT Protocol, standard.site, and how to connect a website to it</description><pubDate>Fri, 19 Jun 2026 00:00:00 GMT</pubDate></item><item><title>@blocz/react-responsive v5.1</title><link>https://ayc0.dev/posts/blocz-react-responsive-v5-1?utm_source=rss</link><guid isPermaLink="true">https://ayc0.dev/posts/blocz-react-responsive-v5-1?utm_source=rss</guid><description>@blocz/react-responsive v5.1 was just released. Let’s go through all the different features and changes added by this new minor version</description><pubDate>Sat, 06 Jun 2026 00:00:00 GMT</pubDate><category>react</category><category>news</category><enclosure url="https://ayc0.dev/_astro/react-responsive.qLMcESGP.png" length="0" type="image/png"/></item><item><title>@blocz/react-responsive v5.0</title><link>https://ayc0.dev/posts/blocz-react-responsive-v5-0?utm_source=rss</link><guid isPermaLink="true">https://ayc0.dev/posts/blocz-react-responsive-v5-0?utm_source=rss</guid><description>@blocz/react-responsive v5.0 was just released. Let’s go through all the different features and changes added by this new major version</description><pubDate>Mon, 01 Jun 2026 00:00:00 GMT</pubDate><category>react</category><category>news</category><enclosure url="https://ayc0.dev/_astro/react-responsive.qLMcESGP.png" length="0" type="image/png"/></item><item><title>@blocz/react-responsive v4.0</title><link>https://ayc0.dev/posts/blocz-react-responsive-v4-0?utm_source=rss</link><guid isPermaLink="true">https://ayc0.dev/posts/blocz-react-responsive-v4-0?utm_source=rss</guid><description>@blocz/react-responsive v4 was just released. Let’s go through all the different features and changes added by this new major version</description><pubDate>Wed, 01 Jan 2025 00:00:00 GMT</pubDate><category>react</category><category>news</category><enclosure url="https://ayc0.dev/_astro/react-responsive.qLMcESGP.png" length="0" type="image/png"/></item><item><title>Monitoring WebSockets</title><link>https://ayc0.dev/posts/monitoring-websockets?utm_source=rss</link><guid isPermaLink="true">https://ayc0.dev/posts/monitoring-websockets?utm_source=rss</guid><description>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?</description><pubDate>Mon, 23 Dec 2024 00:00:00 GMT</pubDate><category>javascript</category><category>websocket</category><enclosure url="https://ayc0.dev/_astro/monitoring-websockets.HsN2YQgR.png" length="0" type="image/png"/></item><item><title>Intl.Segmenter(): Don&apos;t use string.split() nor string.length</title><link>https://ayc0.dev/posts/intlsegmenter-dont-use-stringsplit-nor-stringlength?utm_source=rss</link><guid isPermaLink="true">https://ayc0.dev/posts/intlsegmenter-dont-use-stringsplit-nor-stringlength?utm_source=rss</guid><description>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 navigate through those using JavaScript?</description><pubDate>Tue, 25 Jul 2023 00:00:00 GMT</pubDate><category>javascript</category><category>unicode</category><enclosure url="https://ayc0.dev/_astro/intl-splash-image.8onXOVps.png" length="0" type="image/png"/></item><item><title>TypeScript 5.0: new mode bundler &amp; ESM</title><link>https://ayc0.dev/posts/typescript-50-new-mode-bundler-esm?utm_source=rss</link><guid isPermaLink="true">https://ayc0.dev/posts/typescript-50-new-mode-bundler-esm?utm_source=rss</guid><description>TypeScript 5.0 is out and introduced a new compilation option: `moduleResolution: bundler`, let’s see how we can use it</description><pubDate>Tue, 11 Apr 2023 00:00:00 GMT</pubDate><category>typescript</category><category>javascript</category><category>news</category><enclosure url="https://ayc0.dev/_astro/a0oo9r9svqltq21xlrpq.DLAxu1FN.png" length="0" type="image/png"/></item><item><title>How does CSS work? The specificity</title><link>https://ayc0.dev/posts/how-does-css-work-the-specificity?utm_source=rss</link><guid isPermaLink="true">https://ayc0.dev/posts/how-does-css-work-the-specificity?utm_source=rss</guid><description>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 does it work?</description><pubDate>Mon, 30 Jan 2023 00:00:00 GMT</pubDate><category>css</category><category>webdev</category><enclosure url="https://ayc0.dev/_astro/specificity.CmPOqIGG.png" length="0" type="image/png"/></item><item><title>How to learn CSS with games</title><link>https://ayc0.dev/posts/how-to-learn-css-with-games?utm_source=rss</link><guid isPermaLink="true">https://ayc0.dev/posts/how-to-learn-css-with-games?utm_source=rss</guid><description>A tiny list of websites to learn CSS while playing interactive games</description><pubDate>Thu, 26 Jan 2023 00:00:00 GMT</pubDate><category>css</category><category>tip</category></item><item><title>CSS :before vs ::before &amp; :after vs ::after</title><link>https://ayc0.dev/posts/css-before-vs-before?utm_source=rss</link><guid isPermaLink="true">https://ayc0.dev/posts/css-before-vs-before?utm_source=rss</guid><description>Is there a difference in CSS between `:before` and `::before`? Which one is valid? What about similar syntaxes like `:hover` and `::first-child`?</description><pubDate>Tue, 17 Jan 2023 00:00:00 GMT</pubDate><category>html</category><category>webdev</category><category>fundamentals</category><category>css</category><enclosure url="https://ayc0.dev/_astro/css-before-after-splash-image.CDWj_8bB.png" length="0" type="image/png"/></item><item><title>Light/dark mode: Corrections</title><link>https://ayc0.dev/posts/light-dark-mode-corrections?utm_source=rss</link><guid isPermaLink="true">https://ayc0.dev/posts/light-dark-mode-corrections?utm_source=rss</guid><description>In my previous articles about Light/dark mode, I made a few mistakes, or forgot to mention some elements</description><pubDate>Mon, 16 Jan 2023 00:00:00 GMT</pubDate><category>webdev</category><category>css</category><category>javascript</category></item><item><title>Proper cross-fade in CSS</title><link>https://ayc0.dev/posts/proper-cross-fade-in-css?utm_source=rss</link><guid isPermaLink="true">https://ayc0.dev/posts/proper-cross-fade-in-css?utm_source=rss</guid><description>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.</description><pubDate>Thu, 06 Oct 2022 00:00:00 GMT</pubDate><category>css</category><category>webdev</category><enclosure url="https://ayc0.dev/_astro/q15yxjoqdarngzcofd9z.dwkAhgW-.png" length="0" type="image/png"/></item><item><title>TypeScript 4.9: satisfies operator</title><link>https://ayc0.dev/posts/typescript-49-satisfies-operator?utm_source=rss</link><guid isPermaLink="true">https://ayc0.dev/posts/typescript-49-satisfies-operator?utm_source=rss</guid><description>TypeScript 4.9 is out and introduced a new operator: `satisfies`, let’s see how we can use it</description><pubDate>Sun, 25 Sep 2022 00:00:00 GMT</pubDate><category>typescript</category><category>news</category></item><item><title>CRA vs Parcel</title><link>https://ayc0.dev/posts/cra-vs-parcel?utm_source=rss</link><guid isPermaLink="true">https://ayc0.dev/posts/cra-vs-parcel?utm_source=rss</guid><description>A comparison between Create-React-App &amp; Parcel when building a React single-page-app</description><pubDate>Mon, 05 Sep 2022 00:00:00 GMT</pubDate><category>javascript</category><category>react</category><category>parcel</category><category>bundler</category></item><item><title>Semver: The unknown buildMetadata</title><link>https://ayc0.dev/posts/semver-the-unknown-parts?utm_source=rss</link><guid isPermaLink="true">https://ayc0.dev/posts/semver-the-unknown-parts?utm_source=rss</guid><description>The semver’s spec mentions a group called “buildMetadata”. If you’ve never heard of this before, you’re not alone</description><pubDate>Thu, 14 Jul 2022 00:00:00 GMT</pubDate><category>npm</category><category>versioning</category></item><item><title>Yarn.lock: How to update it</title><link>https://ayc0.dev/posts/yarn-lock-how-to-update-it?utm_source=rss</link><guid isPermaLink="true">https://ayc0.dev/posts/yarn-lock-how-to-update-it?utm_source=rss</guid><description>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 different ways to do so</description><pubDate>Sun, 05 Sep 2021 00:00:00 GMT</pubDate><category>yarn</category><category>tip</category><enclosure url="https://ayc0.dev/_astro/pkcen3s6x5403jl6usey.DFl-Z8wv.jpeg" length="0" type="image/jpeg"/></item><item><title>Yarn.lock: How to read it</title><link>https://ayc0.dev/posts/yarn-lock-how-to-read-it?utm_source=rss</link><guid isPermaLink="true">https://ayc0.dev/posts/yarn-lock-how-to-read-it?utm_source=rss</guid><description>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)</description><pubDate>Tue, 27 Jul 2021 00:00:00 GMT</pubDate><category>yarn</category><category>tip</category><enclosure url="https://ayc0.dev/_astro/pkcen3s6x5403jl6usey.DFl-Z8wv.jpeg" length="0" type="image/jpeg"/></item><item><title>Light/dark mode: React implementation</title><link>https://ayc0.dev/posts/light-dark-mode-react-implementation?utm_source=rss</link><guid isPermaLink="true">https://ayc0.dev/posts/light-dark-mode-react-implementation?utm_source=rss</guid><description>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 core will be the same as previously seen, React requires a few custom bindings for its particular life-cycles &amp; data flow</description><pubDate>Thu, 24 Jun 2021 00:00:00 GMT</pubDate><category>webdev</category><category>css</category><category>react</category><category>javascript</category><category>deep-dive</category></item><item><title>Light/dark mode: avoid flickering on reload</title><link>https://ayc0.dev/posts/light-dark-mode-avoid-flickering-on-reload?utm_source=rss</link><guid isPermaLink="true">https://ayc0.dev/posts/light-dark-mode-avoid-flickering-on-reload?utm_source=rss</guid><description>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. Let’s see how we can fix that</description><pubDate>Tue, 01 Jun 2021 00:00:00 GMT</pubDate><category>webdev</category><category>css</category><category>javascript</category></item><item><title>Light/dark mode: system mode + user preferences</title><link>https://ayc0.dev/posts/light-dark-mode-system-mode-user-preferences?utm_source=rss</link><guid isPermaLink="true">https://ayc0.dev/posts/light-dark-mode-system-mode-user-preferences?utm_source=rss</guid><description>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 without system mode. It is time to see how to reconcile those 2 approaches</description><pubDate>Mon, 31 May 2021 00:00:00 GMT</pubDate><category>webdev</category><category>css</category><category>javascript</category></item><item><title>Light/dark mode: the simple way</title><link>https://ayc0.dev/posts/light-dark-mode-the-simple-way?utm_source=rss</link><guid isPermaLink="true">https://ayc0.dev/posts/light-dark-mode-the-simple-way?utm_source=rss</guid><description>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!</description><pubDate>Sun, 30 May 2021 00:00:00 GMT</pubDate><category>webdev</category><category>css</category></item><item><title>Light/dark mode: user input</title><link>https://ayc0.dev/posts/light-dark-mode-user-input?utm_source=rss</link><guid isPermaLink="true">https://ayc0.dev/posts/light-dark-mode-user-input?utm_source=rss</guid><description>In this article, we’ll see how we can implement the logic to switch back &amp; forth between light/dark mode</description><pubDate>Sun, 30 May 2021 00:00:00 GMT</pubDate><category>webdev</category><category>css</category><category>javascript</category></item><item><title>Light/dark mode: the lazy way</title><link>https://ayc0.dev/posts/light-dark-mode-the-lazy-way?utm_source=rss</link><guid isPermaLink="true">https://ayc0.dev/posts/light-dark-mode-the-lazy-way?utm_source=rss</guid><description>Let’s see how we can build a dark-mode compatible website, following your user’s system preferences, with 1 line of CSS</description><pubDate>Sat, 29 May 2021 00:00:00 GMT</pubDate><category>webdev</category><category>css</category></item><item><title>Responsive design in React</title><link>https://ayc0.dev/posts/responsive-design-in-react?utm_source=rss</link><guid isPermaLink="true">https://ayc0.dev/posts/responsive-design-in-react?utm_source=rss</guid><description>This short article focuses on when to use raw CSS vs React bindings when working with responsive designs</description><pubDate>Sun, 09 May 2021 00:00:00 GMT</pubDate><category>react</category><category>webdev</category></item><item><title>@blocz/react-responsive v3.0</title><link>https://ayc0.dev/posts/blocz-react-responsive-v3-0?utm_source=rss</link><guid isPermaLink="true">https://ayc0.dev/posts/blocz-react-responsive-v3-0?utm_source=rss</guid><description>@blocz/react-responsive v3 was just released. Let’s go through all the different features and changes added by this new major version</description><pubDate>Fri, 12 Mar 2021 00:00:00 GMT</pubDate><category>react</category><category>news</category><enclosure url="https://ayc0.dev/_astro/react-responsive.qLMcESGP.png" length="0" type="image/png"/></item><item><title>React refs and DOM references</title><link>https://ayc0.dev/posts/react-refs-and-dom-references?utm_source=rss</link><guid isPermaLink="true">https://ayc0.dev/posts/react-refs-and-dom-references?utm_source=rss</guid><description>You sometimes needs to have access to the underlying HTML elements in React. This short article is here to help you navigate this problem</description><pubDate>Fri, 21 Aug 2020 00:00:00 GMT</pubDate><category>react</category><category>dom</category></item><item><title>Migrating class components to hooks – rules</title><link>https://ayc0.dev/posts/migrating-class-components-to-hooks-rules?utm_source=rss</link><guid isPermaLink="true">https://ayc0.dev/posts/migrating-class-components-to-hooks-rules?utm_source=rss</guid><description>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 migrations</description><pubDate>Tue, 18 Aug 2020 00:00:00 GMT</pubDate><category>react</category></item><item><title>Migrating class components to hooks</title><link>https://ayc0.dev/posts/migrating-class-components-to-hooks?utm_source=rss</link><guid isPermaLink="true">https://ayc0.dev/posts/migrating-class-components-to-hooks?utm_source=rss</guid><description>This article is an applied example of how I migrated the library `react-only` from classes to hooks</description><pubDate>Sun, 03 May 2020 00:00:00 GMT</pubDate><category>react</category><enclosure url="https://ayc0.dev/_astro/react-responsive.qLMcESGP.png" length="0" type="image/png"/></item></channel></rss>