Quand on fait du CSS,
il y a des choses que tu ne connais pas avant qu'on t'en parle !

Par exemple c termes :
♦️box-sizing
♦️content-box
♦️border-box
♦️box-model

Mais c’est ton jour de chance car je l’ai expliques ici ❤️

#RT car 💪

👇 #thread
Le box-model se présente comme ça

On peut le comparer à une personne :
le content est le corps de la personne 🚶
le padding est l'espace entre son corps et ses vétement
la border sont les vétement
la margin est l'espace qu'elle a autour d'elle
Maintenant si je dis à une box qu'elle fait 100px de width et de height et qu'en plus elle a une margin de 10px rouge

Quelle est sa taille ?

Alors 100 + 10 (border right) + 10 (border left) = 120px

C'est étrange !

Je lui demande de faire 100px mais en réalité elle en fait 120
Maintenant petit use-case tricky :

Si un enfant est dans son parent et qu'il définit sa width comme 100% avec une border de 10px => boom 💥 on dépasse la taille du parent

Totalement contre intuitif n'est ce pas

La width ici c'est 100% + 10 + 10 🤕
Et si tu es attentif tu as pu voir le petit "box-sizing" dans le code ci-dessus pris de la doc : developer.mozilla.org/fr/docs/Web/CS…

Le box-sizing à deux propriétés :
* content-box
* border-box
En fait, c'est tout simplement pour définir sur quoi le width est calculé

si c'est content-box la width sera calculé uniquement avec le content et la border border et le padding seront « ajouté » à notre élément

Car oui, le padding fait le même effet que la bordure
Alors qu'avec border-box tout est beaucoup plus intuitif

La width et la height vont prendre en compte le padding et la border !

donc pour le même cas qu'avant (width, height = 100 + border 10px)

on sera toujours à 100px de taille
ici ce sera bien le content qui va réduire pour être à 80 afin que le total
content + padding + border
soit égal à 100
Conclusion, il faut toujours utiliser border-box et il est souvent mis par défaut dans les templates de projets !
Fin de ce petit thread !

Follow moi (ici → @melvynxdev ←)

dernier thread :

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Melvyn • Développeur

Melvyn • Développeur Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @melvynxdev

Jul 1
Tout le monde sait ce qu'est `width` en CSS ?

Mais connais-tu ?

width: fit-content
width: min-content
width: max-content

J'ai pris longtemps avant de les connaître moi !

Et, je n'ai pas envie que ce soit ton cas...

#RT ❤️

👇 #thread #css #web Image
0. Comment fonctionne width

Contrairement à la height, la width prend par défaut toute la place disponible !

Alors que la height ne prend que la place minimum !

Pourquoi ? Ce sera le sujet d'un autre Thread

En fait, la valeur par défaut de width est « auto » Image
Donc quelle valeur peut prendre width ?

1. des mesures (100%, 100px, 1rem)
2. Keywords (auto, fit-content, max-content, min-content)

Let's explore the keywords !
Read 8 tweets
Jun 30
React a gagné 👑

Statistiquement, c'est celui à apprendre 🥇

Fin du débat.

Voici MON avis avec mes arguments, stats à l'appui 📈

Ne lis pas ce Thread si tu n'aimes pas React, car tu vas tomber in love ❤️

#RT et partage ton avis et contre-arguments 💪

🧵 #thread #react #web Image
0. Préambule

Je ne dis à aucun moment que les autres frameworks sont mauvais.
J'explique pourquoi j'ai fait le choix de React.
Je ne dirais aucun contre-argument car ce n'est pas le but ici ! C'est à toi de les faire !
Je suis ouvert à toutes les library.
1. La communauté

Et oui… C'est mon argument principal.

Dans le sondage 2021.stateofjs.com/en-US/libraries on voit que React arrive largement devant en nombre d'utilisateurs et en satisfactions !
L'intérêt a baissé certes mais les deux valeurs principales sont au RDV Image
Read 22 tweets
Jun 28
Le temps est précieux pour un développeur !

Je te partage donc 6 outils pour gagner du temps 👇
favicon.io

Les favicons c'est le petit icon à côté de ton onglet sur les navigateurs

Génère tes favicons ultra rapidement avec ce site
Tu auras toutes les versions pour chaque taille d'écran
et il te donne le code snippet à c/c dans head
C'est super chiant à faire
logoipsum.com

Un moyen simple pour trouver des placeholder de tes logos et éviter de perdre du temps pour tes sites web
Read 8 tweets
Jun 27
Le dev mobile est un monde très cool dont on ne parle pas assez sur Twitter !

Ce thread est complexe, donc accroche-toi ❤️

Faire de l'iOS en 2022, c'est un peu comme faire du React

Savoir que ça existe te permettra d'ouvrir des portes !

#RT pour l'#iOS 🍎

🧵 #thread
SwiftUI qu'est-ce que c'est ?

C'est la nouvelle library d'apple pour créer des vues et interagir avec

Elle utilise de la programmation fonctionnelle !

Le concept est que des fonctions en appellent d'autres etc:
Test(Button(Text()))

SwiftUI à aussi des stats qui update la vue!
La programmation fonctionnelle se fait avec JSX en React et donne ceci

Quand tu fais : <MonComposant />

En fait React va appeler `createElement` avec ton composant en params
Puis React va faire MonComposant()
Read 18 tweets
Jun 26
Comment avoir un graphique d'activité GitHub totalement rempli même quand tu es en vacances ?

Et, en plus, rendre votre README interactif ?

Petit tuto❤️ #RT

⬇️ #thread
1. Crée un repository sur Github

Personnellement j'utilise le repo magique qui s'affiche sur ton profil github

(c'est quand tu nommes ton repo comme ton pseudo)
2. Crée un script qui update ton Readme avec une valeur différente tous les jours

Maintenant, il va falloir que tous les jours un text de ton readme change

Pour le script je ne vais pas tout expliquer mais tu peux le voir ici : github.com/Melvynx/Melvyn…
Read 14 tweets
Jun 25
💥 Pourquoi j'aime et j'utilise Copilot 💥 🧑

Voici des arguments clairs de pourquoi je l'utilise ⁉️

3 arguments positifs ✅
2 arguments négatifs ❌

Cet outil est formidable, voici un thread qui t'aidera à savoir s'il l'est aussi pour toi 🤔

#RT ❤️

🧵 #thread #copilot Image
1. Permet d'éviter de faire des recherches Google pour de la syntaxe ✅

Envie de faire un breakpoint en CSS pour les tél mobiles qui font moins de 350 px ?

Perso parfois j'oublie la syntaxe

Donc petit commentaire pour faire une recherche et avoir direct la bonne réponse Image
2ᵉ exemple

Au début, quand je débutais React je galérais avec les .map dans le code, je ne comprenais jamais comment les faire

Donc, je faisais toujours une recherche Google pour copier-coller le premier lien

Une recherche rapide Copilot et c'est bon Image
Read 12 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us on Twitter!

:(