diff --git a/src/content/docs/posts/CSS/css-before-vs-before.mdx b/src/content/docs/posts/CSS/css-before-vs-before.mdx index 10160aa..efad067 100644 --- a/src/content/docs/posts/CSS/css-before-vs-before.mdx +++ b/src/content/docs/posts/CSS/css-before-vs-before.mdx @@ -6,6 +6,7 @@ lastUpdated: 2023-01-23 sidebar: order: 2 image: /src/assets/8ivvscot8k45jb540grv.png +description: "Is there a difference in CSS between `:before` and `::before`? Which one is valid? What about similar syntaxes like `:hover` and `::first-child`?" --- When reading CSS code, we sometimes see code using `:before` and other times with `::before` (same for `::after`). diff --git a/src/content/docs/posts/CSS/how-does-css-work-the-specificity.mdx b/src/content/docs/posts/CSS/how-does-css-work-the-specificity.mdx index f729adf..c205734 100644 --- a/src/content/docs/posts/CSS/how-does-css-work-the-specificity.mdx +++ b/src/content/docs/posts/CSS/how-does-css-work-the-specificity.mdx @@ -6,6 +6,7 @@ lastUpdated: 2023-01-30 sidebar: order: 4 image: /src/assets/clf2gzevwp3aizl2o323.png +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?" --- import Codepen from "@components/Codepen.astro"; diff --git a/src/content/docs/posts/CSS/how-to-learn-css-with-games.mdx b/src/content/docs/posts/CSS/how-to-learn-css-with-games.mdx index e1c66ee..2acc737 100644 --- a/src/content/docs/posts/CSS/how-to-learn-css-with-games.mdx +++ b/src/content/docs/posts/CSS/how-to-learn-css-with-games.mdx @@ -5,6 +5,7 @@ createdAt: 2023-01-26 lastUpdated: 2023-01-26 sidebar: order: 3 +description: "A tiny list of websites to learn CSS while playing interactive games" --- Learning CSS isn’t the easiest. But the community helped solving that by creating a lot of interactive games online (as the best way to learn is with games). diff --git a/src/content/docs/posts/CSS/proper-cross-fade-in-css.mdx b/src/content/docs/posts/CSS/proper-cross-fade-in-css.mdx index 0d4d4be..5af957e 100644 --- a/src/content/docs/posts/CSS/proper-cross-fade-in-css.mdx +++ b/src/content/docs/posts/CSS/proper-cross-fade-in-css.mdx @@ -6,11 +6,12 @@ lastUpdated: 2022-10-06 sidebar: order: 1 image: /src/assets/q15yxjoqdarngzcofd9z.png +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. --- import Codepen from "@components/Codepen.astro"; -In https://www.youtube.com/watch?v=PYSOnC2CrD8, @surma and @jakearchibald talked about what a proper crossfade is, why it is complicated to do with the current technologies. And at the end of the video, they mentioned that they just proposed this to the CSS working group. +In https://www.youtube.com/watch?v=PYSOnC2CrD8, @surma and @jakearchibald talked about what a proper cross-fade is, why it is complicated to do with the current technologies. And at the end of the video, they mentioned that they just proposed this to the CSS working group. ## What is a proper cross fade? diff --git a/src/content/docs/posts/Dark mode/light-dark-mode-avoid-flickering-on-reload.mdx b/src/content/docs/posts/Dark mode/light-dark-mode-avoid-flickering-on-reload.mdx index a2acc84..dd6a183 100644 --- a/src/content/docs/posts/Dark mode/light-dark-mode-avoid-flickering-on-reload.mdx +++ b/src/content/docs/posts/Dark mode/light-dark-mode-avoid-flickering-on-reload.mdx @@ -5,6 +5,7 @@ createdAt: 2021-06-01 lastUpdated: 2023-01-15 sidebar: order: 5 +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" --- import Codepen from "@components/Codepen.astro"; diff --git a/src/content/docs/posts/Dark mode/light-dark-mode-corrections.mdx b/src/content/docs/posts/Dark mode/light-dark-mode-corrections.mdx index bb61ad3..cbb105c 100644 --- a/src/content/docs/posts/Dark mode/light-dark-mode-corrections.mdx +++ b/src/content/docs/posts/Dark mode/light-dark-mode-corrections.mdx @@ -5,6 +5,7 @@ createdAt: 2023-01-16 lastUpdated: 2023-01-16 sidebar: order: 7 +description: "In my previous articles about Light/dark mode, I made a few mistakes, or forgot to mention some elements" --- import LinkToPost from "@components/LinkToPost.astro"; diff --git a/src/content/docs/posts/Dark mode/light-dark-mode-react-implementation.mdx b/src/content/docs/posts/Dark mode/light-dark-mode-react-implementation.mdx index 3d25d81..e3f82d0 100644 --- a/src/content/docs/posts/Dark mode/light-dark-mode-react-implementation.mdx +++ b/src/content/docs/posts/Dark mode/light-dark-mode-react-implementation.mdx @@ -5,6 +5,7 @@ createdAt: 2021-06-24 lastUpdated: 2023-01-16 sidebar: order: 6 +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 & data flow" --- import CodeSandbox from "@components/CodeSandbox.astro"; diff --git a/src/content/docs/posts/Dark mode/light-dark-mode-system-mode-user-preferences.mdx b/src/content/docs/posts/Dark mode/light-dark-mode-system-mode-user-preferences.mdx index bbdaedc..572f719 100644 --- a/src/content/docs/posts/Dark mode/light-dark-mode-system-mode-user-preferences.mdx +++ b/src/content/docs/posts/Dark mode/light-dark-mode-system-mode-user-preferences.mdx @@ -5,6 +5,7 @@ createdAt: 2021-05-31 lastUpdated: 2023-01-16 sidebar: order: 4 +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" --- import Codepen from "@components/Codepen.astro"; @@ -13,7 +14,7 @@ import LinkToPost from "@components/LinkToPost.astro"; In the previous posts, we saw: - how to use CSS variables to adapt the display to user system preferences, -- how to use JS to toggle between light/dark mode. +- how to use JavaScript to toggle between light/dark mode. But if you want to provide a way for your users to pick light/dark and still provide a way to also follow their native system, you'll need something else. diff --git a/src/content/docs/posts/Dark mode/light-dark-mode-the-lazy-way.mdx b/src/content/docs/posts/Dark mode/light-dark-mode-the-lazy-way.mdx index 9fd0be5..2acd2e3 100644 --- a/src/content/docs/posts/Dark mode/light-dark-mode-the-lazy-way.mdx +++ b/src/content/docs/posts/Dark mode/light-dark-mode-the-lazy-way.mdx @@ -5,6 +5,7 @@ createdAt: 2021-05-29 lastUpdated: 2023-01-16 sidebar: order: 1 +description: "Let’s see how we can build a dark-mode compatible website, following your user’s system preferences, with 1 line of CSS" --- import Codepen from "@components/Codepen.astro"; @@ -31,6 +32,10 @@ You can read more about it here: https://web.dev/color-scheme/. ## System colors +:::caution[Warning] +Edit from 2024: Those don’t really work, I’d suggest you to not use them until they are better handled by browsers +::: + There is also another powerful tool available to us: native system themed colors. In CSS, you can say that a color should follow the system color for multiple semantic elements, like `LinkText`, or `Canvas` (background color): diff --git a/src/content/docs/posts/Dark mode/light-dark-mode-the-simple-way.mdx b/src/content/docs/posts/Dark mode/light-dark-mode-the-simple-way.mdx index 5b2b1b1..5969637 100644 --- a/src/content/docs/posts/Dark mode/light-dark-mode-the-simple-way.mdx +++ b/src/content/docs/posts/Dark mode/light-dark-mode-the-simple-way.mdx @@ -5,6 +5,7 @@ createdAt: 2021-05-30 lastUpdated: 2021-06-24 sidebar: order: 2 +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!" --- import Codepen from "@components/Codepen.astro"; diff --git a/src/content/docs/posts/Dark mode/light-dark-mode-user-input.mdx b/src/content/docs/posts/Dark mode/light-dark-mode-user-input.mdx index e7e03c8..4d1491d 100644 --- a/src/content/docs/posts/Dark mode/light-dark-mode-user-input.mdx +++ b/src/content/docs/posts/Dark mode/light-dark-mode-user-input.mdx @@ -5,6 +5,7 @@ createdAt: 2021-05-30 lastUpdated: 2023-01-15 sidebar: order: 3 +description: "In this article, we’ll see how we can implement the logic to switch back & forth between light/dark mode" --- import Codepen from "@components/Codepen.astro"; @@ -20,7 +21,9 @@ But users of your website cannot change their theme directly from the website, t The easiest is to apply a data attribute to the html light/dark. -> Note: I'd still recommend setting the `:color-scheme` to `light` and `dark` for native inputs. +:::note +I’d still recommend setting the `:color-scheme` to `light` and `dark` for native inputs. +::: The CSS is still fairly simple: @@ -98,6 +101,8 @@ themeToggler.onclick = () => { }; ``` -> Note: if you don't want any blink when users will load the page (seeing an empty white page when reloading the page for instance while they picked a dark mode for your website), it's important that this JS is executed in a blocking way, so that browsers won't render the html/css without having first computed this JS and applied the data attribute on the html. +:::note +if you don't want any blink when users will load the page (seeing an empty white page when reloading the page for instance while they picked a dark mode for your website), it's important that this JS is executed in a blocking way, so that browsers won't render the html/css without having first computed this JS and applied the data attribute on the html. +::: diff --git a/src/content/docs/posts/Others/blocz-react-responsive-v3-is-out.mdx b/src/content/docs/posts/Others/blocz-react-responsive-v3-is-out.mdx index 8f8d4ee..9badd87 100644 --- a/src/content/docs/posts/Others/blocz-react-responsive-v3-is-out.mdx +++ b/src/content/docs/posts/Others/blocz-react-responsive-v3-is-out.mdx @@ -3,6 +3,7 @@ title: "@blocz/react-responsive v3 is out" tags: ["react", "responsive", "package"] createdAt: 2021-03-12 lastUpdated: 2021-03-12 +description: "@blocz/react-responsive v3 was just released. Let’s go through all the different features and changes added by this new major version" --- import LinkToPost from "@components/LinkToPost.astro"; diff --git a/src/content/docs/posts/Others/cra-vs-parcel.mdx b/src/content/docs/posts/Others/cra-vs-parcel.mdx index 00071aa..a20a396 100644 --- a/src/content/docs/posts/Others/cra-vs-parcel.mdx +++ b/src/content/docs/posts/Others/cra-vs-parcel.mdx @@ -3,6 +3,7 @@ title: "CRA vs Parcel" tags: ["javascript", "react", "parcel", "bundler"] createdAt: 2022-09-05 lastUpdated: 2023-01-22 +description: "A comparison between Create-React-App & Parcel when building a React single-page-app" --- When working a new React project, there are a lot of frameworks / bundlers that we can choose: @@ -14,7 +15,7 @@ When working a new React project, there are a lot of frameworks / bundlers that - [astro](https://astro.build/) - and many others. -Here I only want to focus on comparable tools: I'll only look into frameworks to build a React single page app. +Here I only want to focus on comparable tools: I'll only look into frameworks to build a React single-page-app. As I haven't used Vite that much, I'll only compare create-react-app and Parcel. diff --git a/src/content/docs/posts/Others/intlsegmenter-dont-use-stringsplit-nor-stringlength.mdx b/src/content/docs/posts/Others/intlsegmenter-dont-use-stringsplit-nor-stringlength.mdx index a6a9902..b2f4126 100644 --- a/src/content/docs/posts/Others/intlsegmenter-dont-use-stringsplit-nor-stringlength.mdx +++ b/src/content/docs/posts/Others/intlsegmenter-dont-use-stringsplit-nor-stringlength.mdx @@ -4,6 +4,7 @@ tags: ["javascript", "intl", "encoding", "unicode"] createdAt: 2023-07-25 lastUpdated: 2023-10-10 image: /src/assets/fty25unybapraxyaslkr.png +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?" --- 1. [TL;DR](#tldr) diff --git a/src/content/docs/posts/Others/monitoring-websockets.mdx b/src/content/docs/posts/Others/monitoring-websockets.mdx index 7500e84..1c4f24e 100644 --- a/src/content/docs/posts/Others/monitoring-websockets.mdx +++ b/src/content/docs/posts/Others/monitoring-websockets.mdx @@ -4,6 +4,7 @@ tags: ["JavaScript", "Tip", "Monitoring", "WebSocket"] createdAt: 2024-12-23 lastUpdated: 2024-12-23 image: /src/assets/monitoring-websockets.png +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?" --- ## Introduction diff --git a/src/content/docs/posts/Others/semver-the-unknown-parts.mdx b/src/content/docs/posts/Others/semver-the-unknown-parts.mdx index 4f9586c..de01016 100644 --- a/src/content/docs/posts/Others/semver-the-unknown-parts.mdx +++ b/src/content/docs/posts/Others/semver-the-unknown-parts.mdx @@ -3,9 +3,10 @@ title: "Semver: The unknown buildMetadata" tags: ["discuss", "npm", "semver", "versioning"] createdAt: 2022-07-14 lastUpdated: 2022-07-14 +description: "The semver’s spec mentions a group called “buildMetadata”. If you’ve never heard of this before, you’re not alone" --- -I was reading [semver's spec](https://semver.org/) and I noticed something weird in the regex: +I was reading [semver’s spec](https://semver.org/) and I noticed something weird in the regex: ![Screenshot of semver spec saying "And one with numbered capture groups instead (so cg1 = major, cg2 = minor, cg3 = patch, cg4 = prerelease and cg5 = buildmetadata)"](@assets/dyn2hb56xwjex3cyd6hr.png) diff --git a/src/content/docs/posts/React/migrating-class-components-to-hooks-rules.mdx b/src/content/docs/posts/React/migrating-class-components-to-hooks-rules.mdx index 61e2fb6..88741af 100644 --- a/src/content/docs/posts/React/migrating-class-components-to-hooks-rules.mdx +++ b/src/content/docs/posts/React/migrating-class-components-to-hooks-rules.mdx @@ -5,6 +5,7 @@ createdAt: 2020-08-18 lastUpdated: 2020-08-18 sidebar: order: 2 +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" --- import LinkToPost from "@components/LinkToPost.astro"; @@ -22,7 +23,7 @@ First, a few changes need to be done in the class component: | `componentWillReceiveProps` | `componentDidReceiveProps` | | `componentWillUpdate` | `componentDidUpdate` | -I recommend you to check [react's doc](https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops) if you want more informations on the deprecation of these methods. +I recommend you to check [react's doc](https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops) if you want more information on the deprecation of these methods. Then those are the main hooks you will want to use: diff --git a/src/content/docs/posts/React/migrating-class-components-to-hooks.mdx b/src/content/docs/posts/React/migrating-class-components-to-hooks.mdx index cf3b7d0..4a73aea 100644 --- a/src/content/docs/posts/React/migrating-class-components-to-hooks.mdx +++ b/src/content/docs/posts/React/migrating-class-components-to-hooks.mdx @@ -6,6 +6,7 @@ lastUpdated: 2020-05-03 image: /src/assets/react-responsive.png sidebar: order: 1 +description: "This article is an applied example of how I migrated the library `react-only` from classes to hooks" --- I've been working with React for some time (more than 3 years now) and when hooks came out, I was really eager to use it in order to simplify the code I was writing. diff --git a/src/content/docs/posts/React/react-refs-and-dom-references.mdx b/src/content/docs/posts/React/react-refs-and-dom-references.mdx index bf32218..5a1ea80 100644 --- a/src/content/docs/posts/React/react-refs-and-dom-references.mdx +++ b/src/content/docs/posts/React/react-refs-and-dom-references.mdx @@ -5,6 +5,8 @@ createdAt: 2020-08-21 lastUpdated: 2020-08-21 sidebar: order: 3 +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" +# TODO: re-write it with a more modern approach --- ## Introduction diff --git a/src/content/docs/posts/React/responsive-design-in-react.mdx b/src/content/docs/posts/React/responsive-design-in-react.mdx index ea53ba0..74ed2a2 100644 --- a/src/content/docs/posts/React/responsive-design-in-react.mdx +++ b/src/content/docs/posts/React/responsive-design-in-react.mdx @@ -5,6 +5,7 @@ createdAt: 2021-05-09 lastUpdated: 2021-05-09 sidebar: order: 4 +description: "This short article focuses on when to use raw CSS vs React bindings when working with responsive designs" --- import LinkToPost from "@components/LinkToPost.astro"; diff --git a/src/content/docs/posts/TypeScript/typescript-49-satisfies-operator.mdx b/src/content/docs/posts/TypeScript/typescript-49-satisfies-operator.mdx index b9e8657..3e80ca5 100644 --- a/src/content/docs/posts/TypeScript/typescript-49-satisfies-operator.mdx +++ b/src/content/docs/posts/TypeScript/typescript-49-satisfies-operator.mdx @@ -5,6 +5,7 @@ createdAt: 2022-09-25 lastUpdated: 2022-11-21 sidebar: order: 1 +description: "TypeScript 4.9 is out and introduced a new operator: `satisfies`, let’s see how we can use it" --- In their v4.9, the TypeScript team is releasing a new operator: `satisfies` (see blog post https://devblogs.microsoft.com/typescript/announcing-typescript-4-9-beta/#the-satisfies-operator). diff --git a/src/content/docs/posts/TypeScript/typescript-50-new-mode-bundler-esm.mdx b/src/content/docs/posts/TypeScript/typescript-50-new-mode-bundler-esm.mdx index 1bfeb2b..b95792c 100644 --- a/src/content/docs/posts/TypeScript/typescript-50-new-mode-bundler-esm.mdx +++ b/src/content/docs/posts/TypeScript/typescript-50-new-mode-bundler-esm.mdx @@ -6,6 +6,7 @@ lastUpdated: 2023-04-11 sidebar: order: 2 image: /src/assets/a0oo9r9svqltq21xlrpq.png +description: "TypeScript 5.0 is out and introduced a new compilation option: `moduleResolution: bundler`, let’s see how we can use it" --- In TypeScript 5.0, 2 new features were released: diff --git a/src/content/docs/posts/Yarn/yarn-lock-how-to-read-it.mdx b/src/content/docs/posts/Yarn/yarn-lock-how-to-read-it.mdx index 8952dd2..f952aff 100644 --- a/src/content/docs/posts/Yarn/yarn-lock-how-to-read-it.mdx +++ b/src/content/docs/posts/Yarn/yarn-lock-how-to-read-it.mdx @@ -6,6 +6,7 @@ lastUpdated: 2021-09-05 sidebar: order: 1 image: /src/assets/pkcen3s6x5403jl6usey.jpeg +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)" --- import LinkToPost from "@components/LinkToPost.astro"; diff --git a/src/content/docs/posts/Yarn/yarn-lock-how-to-update-it.mdx b/src/content/docs/posts/Yarn/yarn-lock-how-to-update-it.mdx index c03d3b4..b637ec1 100644 --- a/src/content/docs/posts/Yarn/yarn-lock-how-to-update-it.mdx +++ b/src/content/docs/posts/Yarn/yarn-lock-how-to-update-it.mdx @@ -6,6 +6,7 @@ lastUpdated: 2021-09-05 sidebar: order: 2 image: /src/assets/pkcen3s6x5403jl6usey.jpeg +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" --- import LinkToPost from "@components/LinkToPost.astro"; -- 2.51.2 From 77242fc860442f919ffcf13cc9e67052e4530552 Mon Sep 17 00:00:00 2001 From: Ayc0 Date: Fri, 27 Dec 2024 17:16:34 +0100 Subject: [PATCH 2/4] Mark description required for articles --- src/content/config.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/content/config.ts b/src/content/config.ts index 7ccf2ca..468704d 100644 --- a/src/content/config.ts +++ b/src/content/config.ts @@ -7,6 +7,7 @@ export const collections = { extend: z .object({ image: z.string().optional(), + createdAt: z.date().optional(), // only required to make it available on all types (for the RSS) }) .and( // Draft pages don’t have any requirements @@ -33,7 +34,7 @@ export const collections = { pagefind: z.literal(true).optional(), // To avoid matching with the draft createdAt: z.date(), lastUpdated: z.date().optional(), - description: z.string().optional(), // TODO: mark as required + description: z.string(), }), ), ), -- 2.51.2 From d1871853a71b47fe03f453289b4dd1a179cf659d Mon Sep 17 00:00:00 2001 From: Ayc0 Date: Fri, 27 Dec 2024 17:18:00 +0100 Subject: [PATCH 3/4] Pass description to the RSS feed --- src/pages/rss.xml.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/rss.xml.ts b/src/pages/rss.xml.ts index 577d783..1720748 100644 --- a/src/pages/rss.xml.ts +++ b/src/pages/rss.xml.ts @@ -16,8 +16,7 @@ export const GET: APIRoute = async (context) => { title: post.data.title, link: post.slug, pubDate: post.data.createdAt, - // TODO: add description to all posts (and make it required + add it to preview to LinkToPost) - // description: post.data.description, + description: post.data.description, })), }); }; -- 2.51.2 From eecdd492cb94748cf1e099fc33abdb7f7bb427d7 Mon Sep 17 00:00:00 2001 From: Ayc0 Date: Fri, 27 Dec 2024 17:36:18 +0100 Subject: [PATCH 4/4] Pass description to the LinkToPost --- src/components/LinkToPost.astro | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/components/LinkToPost.astro b/src/components/LinkToPost.astro index 1c70269..4e7c81a 100644 --- a/src/components/LinkToPost.astro +++ b/src/components/LinkToPost.astro @@ -24,6 +24,15 @@ let description: string | undefined if (includeDate) { description = getCreatedDate(entry) } + +if (entry.data.description) { + if (!description) { + description = entry.data.description + } else { + description = `

${description}

${entry.data.description}

` + } +} + ---