Writing the first css of the box sizing cheatsheet

nx-academy · Jul 19, 2024 · 7c76631 · 7c76631
1 parent a79b85c
commit 7c76631
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 11 deletions.
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -12,10 +12,6 @@ import "@fontsource/space-grotesk";
 let { title } = Astro.props
 
 title = title ? `${title} - NX Academy` : "Passez au niveau supérieur en programmation avec NX Academy"
-
-console.log("====")
-console.log(title)
-console.log("====")
 ---
 
 <html lang="FR-fr">

diff --git a/...fiches/decouvrir-la-fonction-css-clamp.md → ...iches/comprendre-la-fonction-css-clamp.md b/...fiches/decouvrir-la-fonction-css-clamp.md → ...iches/comprendre-la-fonction-css-clamp.md
@@ -1,13 +1,13 @@
 ---
 layout: ../../layouts/CheatSheetsLayout.astro
 
-title: Découvrir la propriété CSS Clamp
+title: Comprendre la propriété CSS Clamp
 description: sd
 ---
 
 <article>
 
-# Découvrir la fonction CSS Clamp
+# Comprendre la fonction CSS Clamp
 
 ![Quelqu'un mesurant un salon avec un mètre, pixel art](/homme-mesure-salon.webp)
 
@@ -20,7 +20,7 @@ Au cours de ce projet, je me suis intéressé à la gestion responsive des taill
 
 En parcourant les ressources fournies, je suis tombé [sur une excellente ressource de web.dev](https://web.dev/learn/design/typography). Elle mentionnait la fonction CSS `clamp()`. Pour être parfaitement honnête, je ne connaissais pas cette fonction. J'ai découvert une fonction CSS particulièrement pratique et puissante. L'objectif de cette fiche technique est de vous donner toutes les armes pour être capable de l'intégrer facilement dans vos projets !
 
-Pour votre information, 1 rem sera égal à 16 pixels.
+Pour votre information, **1 rem sera égal à 16 pixels**.
 
 ## Pourquoi la fonction clamp est-elle utile ?
 

diff --git a/.../decouvrir-la-propriete-css-box-sizing.md → ...comprendre-la-propriete-css-box-sizing.md b/.../decouvrir-la-propriete-css-box-sizing.md → ...comprendre-la-propriete-css-box-sizing.md
@@ -1,22 +1,31 @@
 ---
 layout: ../../layouts/CheatSheetsLayout.astro
 
-title: Découvrir la propriété CSS box sizing
+title: Comprendre la propriété CSS box sizing
 description: sd
 ---
 
 <article>
 
-# Découvrir la propriété CSS box sizing
+# Comprendre la propriété CSS box sizing
 
 ![Un enfant rangeant ses jouets dans un carton dans sa chambre, pixel art](/enfant-rangeant-jouets.webp)
 
 ## Problématique | Situation personnelle
 
+J'ai découvert la propriété CSS `box-sizing` il y a plus de 10 ans (ça nous rajeunit pas) grâce à un cours sur Teamtreehouse. A cette époque, j'utilisais énormément les cours de Teamtreehouse pour me former en développement web.
+
+Au fil des années, j'ai constaté une réelle différence entre les ressources anglophones et francophones notamment concernant l'apprentissage de cette propriété. Bien que la propriété `box-sizing` soit couramment enseignée dans les cours anglophones, elle reste encore méconnue pour de nombreux développeurs francophones et notamment les plus juniors. C'est, selon moi, un vrai problème : beaucoup de développeurs en herne ne connaissent pas cette propriété et ne savent pas à quel point elle est utile.
+
+Attention, je ne dis pas qu'elle va litérallement transformer vos intégrations et résoudre tous vos ennuis. Cela dit, elle va vous permettre d'avoir des designs plus prédictibles. Le fait est qu'avoir du code CSS prédictible est l'essence même d'une bonne intégration.
+
+
+
+<!-- 
 - Découverte de la propriété box sizing il y a plus de 10 ans maintenant sur un cours de teamtreehouse.
 - Si la connaissance de cette propriété est répandu dans les ressources anglophones, je suis toujours étonné que les cours francophones n'en parlent que trop peu. En rédigeant cet article, j'ai jeté un oeil aux cours de HTML et CSS d'OpenClassrooms et il n'en est absolument pas question.
 - Il existe tout de même bien des ressources telle que la cascade et alsa creation qui en parlent.
-- Pourtant, cette propriété est essentielle pour réaliser des designs reponsives et maitrisés.
+- Pourtant, cette propriété est essentielle pour réaliser des designs reponsives et maitrisés. -->
 
 ## Définition | Présentation avec des mots simples
 
@@ -43,7 +52,9 @@ La solution de Paul Irish :
 html {
   box-sizing: border-box;
 }
-*, *:before, *:after {
+*,
+*:before,
+*:after {
   box-sizing: inherit;
 }
 ```