diff --git a/astro.config.mjs b/astro.config.mjs index cdc777f..e68a0f1 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -33,6 +33,8 @@ export default defineConfig({ lastUpdated: true, favicon: "/images/favicon.png", + pagination: false, + social: [ { icon: "github", 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 891a32e..0688040 100644 --- a/src/content/docs/posts/CSS/css-before-vs-before.mdx +++ b/src/content/docs/posts/CSS/css-before-vs-before.mdx @@ -3,8 +3,6 @@ title: "CSS :before vs ::before & :after vs ::after" tags: ["html", "webdev", "fundamentals", "css"] createdAt: 2023-01-17 lastUpdated: 2023-01-23 -sidebar: - order: 2 image: /src/assets/excalidraw/css-before-after-splash-image.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`?" --- 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 9bb036c..fae8c34 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 @@ -3,8 +3,6 @@ title: "How does CSS work? The specificity" tags: ["css", "webdev"] createdAt: 2023-01-30 lastUpdated: 2023-01-30 -sidebar: - order: 4 image: /src/assets/excalidraw/specificity.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?" --- 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 c4488f6..5a5ca66 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 @@ -3,8 +3,6 @@ title: "How to learn CSS with games" tags: ["css", "tip"] createdAt: 2023-01-26 lastUpdated: 2023-01-26 -sidebar: - order: 3 description: "A tiny list of websites to learn CSS while playing interactive 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 0898bf3..014f5a0 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 @@ -3,8 +3,6 @@ title: "Proper cross-fade in CSS" tags: ["css", "webdev"] createdAt: 2022-10-06 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. --- 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 e8608ce..a90d6b5 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 @@ -3,6 +3,8 @@ title: "Light/dark mode: avoid flickering on reload" tags: ["webdev", "css", "javascript"] createdAt: 2021-06-01 lastUpdated: 2023-01-15 +prev: true +next: true 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" 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 cbb105c..6bd1557 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 @@ -3,6 +3,8 @@ title: "Light/dark mode: Corrections" tags: ["webdev", "css", "javascript"] createdAt: 2023-01-16 lastUpdated: 2023-01-16 +prev: true +# next: true # Last article sidebar: order: 7 description: "In my previous articles about Light/dark mode, I made a few mistakes, or forgot to mention some elements" 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 d30f53c..a82df3a 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 @@ -3,6 +3,8 @@ title: "Light/dark mode: React implementation" tags: ["webdev", "css", "react", "javascript", "deep-dive"] createdAt: 2021-06-24 lastUpdated: 2023-01-16 +prev: true +next: true 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" 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 4a3a32e..8456952 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 @@ -3,6 +3,8 @@ title: "Light/dark mode: system mode + user preferences" tags: ["webdev", "css", "javascript"] createdAt: 2021-05-31 lastUpdated: 2023-01-16 +prev: true +next: true 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" 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 2acd2e3..41495dc 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 @@ -3,6 +3,7 @@ title: "Light/dark mode: the lazy way" tags: ["webdev", "css"] createdAt: 2021-05-29 lastUpdated: 2023-01-16 +next: true 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" 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 5969637..c6ff05b 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 @@ -3,6 +3,8 @@ title: "Light/dark mode: the simple way" tags: ["webdev", "css"] createdAt: 2021-05-30 lastUpdated: 2021-06-24 +prev: true +next: true 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!" 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 4d1491d..d5facc3 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 @@ -3,6 +3,8 @@ title: "Light/dark mode: user input" tags: ["webdev", "css", "javascript"] createdAt: 2021-05-30 lastUpdated: 2023-01-15 +prev: true +next: true sidebar: order: 3 description: "In this article, we’ll see how we can implement the logic to switch back & forth between light/dark mode" 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 a7f9893..1e6ef50 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 @@ -3,8 +3,6 @@ title: "Migrating class components to hooks – rules" tags: ["react"] 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" --- 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 58d1627..55387e6 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 @@ -4,8 +4,6 @@ tags: ["react"] createdAt: 2020-05-03 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" --- diff --git a/src/content/docs/posts/React/react-life-cycles-and-timings.mdx b/src/content/docs/posts/React/react-life-cycles-and-timings.mdx index 22d1592..832203a 100644 --- a/src/content/docs/posts/React/react-life-cycles-and-timings.mdx +++ b/src/content/docs/posts/React/react-life-cycles-and-timings.mdx @@ -4,8 +4,6 @@ slug: "posts/drafts/3658a2d9-6ccd-41e5-9972-c37c95ca31e1" tags: ["react", "deep-dive"] createdAt: 2024-11-07 lastUpdated: 2024-11-07 -sidebar: - order: 5 pagefind: false wip: true --- 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 940cbd0..4023117 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 @@ -3,8 +3,6 @@ title: "React refs and DOM references" tags: ["react", "dom"] 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 --- 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 eb7f3ec..b76a899 100644 --- a/src/content/docs/posts/React/responsive-design-in-react.mdx +++ b/src/content/docs/posts/React/responsive-design-in-react.mdx @@ -3,8 +3,6 @@ title: "Responsive design in React" tags: ["react", "webdev"] 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" --- 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 bf9b5d3..9141055 100644 --- a/src/content/docs/posts/TypeScript/typescript-49-satisfies-operator.mdx +++ b/src/content/docs/posts/TypeScript/typescript-49-satisfies-operator.mdx @@ -3,8 +3,6 @@ title: "TypeScript 4.9: satisfies operator" tags: ["typescript", "news"] 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" --- 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 9ced414..f088f85 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 @@ -3,8 +3,6 @@ title: "TypeScript 5.0: new mode bundler & ESM" tags: ["typescript", "javascript", "news"] createdAt: 2023-04-11 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" --- 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 04f6924..0290cf6 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 @@ -3,8 +3,6 @@ title: "Yarn.lock: How to read it" tags: ["yarn", "tip"] createdAt: 2021-07-27 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)" --- 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 da0985b..7065df8 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 @@ -3,8 +3,6 @@ title: "Yarn.lock: How to update it" tags: ["yarn", "tip"] createdAt: 2021-09-05 lastUpdated: 2025-01-24 -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" --- diff --git a/src/content/docs/posts/Yarn/yarn-the-good-parts.mdx b/src/content/docs/posts/Yarn/yarn-the-good-parts.mdx index 0edcebb..d62c75f 100644 --- a/src/content/docs/posts/Yarn/yarn-the-good-parts.mdx +++ b/src/content/docs/posts/Yarn/yarn-the-good-parts.mdx @@ -5,8 +5,6 @@ tags: ["yarn"] createdAt: 2025-08-06 image: /src/assets/pkcen3s6x5403jl6usey.jpeg description: "TODO" -sidebar: - order: 3 pagefind: false wip: true ---