En 2 ans le web à totalement changer.

Les techs d'hier ont totalement été remplacés par des nouveaux outils.

Voici les énormes trends de 2024 👇 1️⃣ JavaScript est mort ⚰️

Il est en train de se faire remplacer par TypeScript.

Petit à petit, mais le changement est visible :

Comprendre comment Copilot fonctionne va te rendre 5 fois plus performant avec cet outil 📈

Sérieusement, ça a totalement changé ma manière de l'utiliser. Voici tous les secrets de notre meilleur Copilot 👇 1️⃣ Objectif

Copilot a deux objectifs :

💡 Fournir des réponses pertinentes
⚡️ Fournir des réponses avant même que tu le codes (sinon c'est inutile)

Il faut donc allier rapidité et efficacité.

Tous les GURU qui te montrent "comment ils utilisent ChatGPT" ne te montrent que rarement des CAS CONCRETS ❌

Que tu peux utiliser MAINTENANT dans TA vie !

J'ai scroller mes +2000 conversations avec ChatGPT pour te trouver 7 cas concrets pour le développement : 1️⃣ Trouver des bugs dans du SQL

Le SQL, ce n'est pas si simple et les erreurs qu'il te donne sont vraiment nulles.

Tu copies/colles ton code SQL, tu lui envoies l'erreur et tu as 90% de chances qu'il trouve exactement le problème :

Tu dois créer une landing page mais tu ne sais pas du tout comment t'y prendre ?

Rien de plus simple.

Je viens de te contacter 4 sites web qui vont faire de toi un PRO de la landing page ✅ 1️⃣ Landing Pages Explained • ()

Ils te proposent de nombreuses landing pages avec une sorte de "screenshot" qui contient du texte et des flèches, et qui te montre exactement les éléments importants à mettre en place sur TA page.landingpagesexplained.com
landingpagesexplained.com

Sur les 100 portfolios qui m'ont été envoyés, seulement 3 % avaient compris l'utilité d'un portfolio ✅

La majorité fait de GROSSES erreurs 🔴

Dans ce post, je te propose de te donner les clés pour créer un portfolio utile et efficace 👇 1️⃣ Pourquoi faire un portfolio ?

C'est la première question à se poser !

Il y a 3 raisons :

• Pour avoir TON espace PRIVÉ sur le web 🔑
• Pour mettre tes projets en avant 🏗️
• Pour mettre tes liens en avant 🌴 (comme un linktree)

Mettre des SVG dans ton Code JSX est une mauvaise pratique !

C'est devenu à la mode, mais tu rends tes performances et la gestion de la mémoire moins bonnes pour... des icônes !

Je t'explique 👇 Mettre du code SVG dans du JSX (donc du JS) est un anti-pattern pour deux gros problèmes.

J'ai testé des dizaines de librairies d'icons pour mes projets...

J'ai enfin trouvé une librairie de ouf ❤️

Elle réponds à tous mes besoins :

• customizsation ✨
• performance 🚅
• canon 🥹

👇 Au début j'utilisais React Icons :


L'avantage de cette librairie, c'est qu'elle possède "10 autres" librairies d'icônes à l'intérieur d'elle.

Le problème, c'est que tu finis avec un design qui n'a aucun sens. https://t.co/zhWub1Bittreact-icons.github.io/react-icons/

L'envoie des mails est une étape obligatoire quand tu crées une application 🧱

J'ai trouvé 2 outils qui sont gratuits 💸 et qui te permettent d'utiliser React dans tes emails 🤯

Je te présente ReactEmail et Resend : 1. ReactEmail

J'ai jamais voulu tester... et je regrette.

ReactEmail est un moyen super simple, beau et moderne pour créer et envoyer des emails et surtout : l'intégration est magique !

Quand tu payes un domaine, tu te retrouves toujours devant cette interface de "DNS" et là, c'est la panique 😳

Ce n'est bientôt plus le cas ❌

Les DNS sont plus simples que ce que l'on croit, un thread 👇 Imagine-toi dans une ville pleines de maisons, chaque maison a une adresse unique. (représentée par une IP)

3 concepts de clean code en React !

Je vois souvent mes élèves ou d'autres développeurs faire ce genre d'erreur, ce thread et cette vidéo sont pour vous !



les 3 concepts 👇 1. Separation of concern

Alors, je le rabâche souvent, mais c'est essentiel.

Les composants, les hooks et les fonctions permettent de séparer votre code, donc faites-le !

4 ans que j'utilise un gestionnaire de password...

Franchement, je ne peux plus m'en passer !

J'en ai assez de voir certaines personnes galérer et pas forcément comprendre la puissance des gestionnaires 💪

Voici les 6 meilleurs features qui ont révolutionné mon quotidien 👇 1. Remplissage auto des informations perso

À chaque création de compte ou de commande sur internet, il faut remplir les champs "adresse", "zip code", "email" etc...

Avec mon gestionnaire (1password en l'occurrence) il auto-rempli tous les champs... en 1 click !

Faire des fetch dans les useEffect c'est interdit ⚠️

@hazae41 a créé une librairie qui permet de faire des ✨ fetch ✨

Ceci d'une manière simple... et originale !

Laisse-moi te le présenter 👇 3... 2... 1...

Voici un code simple pour faire des fetch !

C'est quoi qui change par rapport aux autres librairies ?

Utiliser Axios est une ERREUR.

Avant venir pleurer sous le tweet... lis la suite pour comprendre *pourquoi* !

Je vais répondre à vos arguments... dans ce thread
👇 Pour chaque package que tu installes tu devrais te demander :

POURQUOI ?

À quel problème répond cette librairie.

La réponse pour axios est 3 choses :

• API simplifiée
• compatibilité avec les anciens navigateurs
• avoir une instance globale
• gère les headers

5 ressources pour trouver LE loader parfait pour ton site web 🔋

Tu as juste à copier/coller et à l'ajouter dans ton code 🤩

C'est une vraie galère à trouver... garde ce thread au chaud 🔥

Small thread 👇 tobiasahlin.com/spinkit/

Simple et efficace, avec du choix.

Ce génie à révolutionné le web !

Il à créé Vercel, qui vaut 2.5 milliards de dollars et NextJS téléchargé 3.6 millions de fois

Il a été à l'origine de socketio et mongoose

Il a écrit un livre sur JavaScript !

Tout ça, sans aucun diplôme et sans avoir terminé l'école... 👇 Ce développeur, c'est Guillermo Rauch !

Son père était malin et il a senti que l'informatique ça allait être du lourd 🤑

Il a pris un max d'argent pour payer un ordi à son fils.

Guillermo à direct accroché ! (à 7 ans)

Le Guide des promises qui va te rendre 100% efficaces avec les fameuses promesses JavaScript !

Elles sont utilisées constamment et il est possible de se perdre.

Si c'est ton cas, ce thread est pour toi 👇 Une `promise` en JavaScript est présente pour exécuter du code de façon asynchrone.

Faut bien le voir comme un object, qui va représenté une promesse !

C'est pour cette raison qu'il y a une classe "Promise"

Les servers components en React avec NextJS 13 !

C'est un sujet qui est fascinant et je pense que c'est le futur du web (takes du jour)

Si tu ne les as pas compris et en quoi c'est dingue...

C'est le thread qu'il te faut !👇 1. C'est quoi les servers components ?

C'est un concept assez simple. De base les composants React sont executés coté client, on prend le JSX qu'il retourne et on l'affiche dans la page web...

Un jour un gars à eu une idée :

Sais-tu pourquoi utiliser des margins pour espacer tes composants risque de te créer 48 bugs 🐛 ?

Je te présente ton sauveur : le component <Spacer />

Derrière ce composant, il y a des concepts très intéressants...

Je te raconte tout 🐍👇 #thread Un composant Spacer est juste un composant qui va prendre une taille donnée dans ton layout.

Si tu veux séparer tes éléments de 16 px verticalement, tu peux utiliser :

<Spacer axis="vertical" size={16} />

Notion c'est bof bof... passez à Obsidian 💣

Ils ont fait une mise à jour, et franchement, on est sur un outil de dingue !

Reprends la main sur tes notes et tes données avec Obsidian !

Des fichiers markdown qui t'appartiennent + OpenSource

#thread des nouveautés Obsidian est un outil de prise de notes qui est juste une interface à tes fichiers MarkDown.

Il est OpenSource et possède de nombreux plugin communautaires!

Il permet une prise de note rapide et de qualité.

Leur nouvelle interface rend le tout beaucoup plus fluide et agréable!

Tester c'est essentiel 🧪 peu importe le langage, le framework etc...

Mais quoi ?

Intéressons-nous à un site web avec React ou Svelte par exemple...

Tu vas vite savoir quoi tester sur une application web ✅

Thread 👇🧑‍🔬 1. La librairie de composant

Si dans ton application, tu n'utilises pas Chakra-UI ou mui.com, il est important de tester tes composants.

Le JavaScript à savoir pour commencer React !

React c'est du JavaScript, donc il vaut mieux bien le comprendre avant d'en faire !

Pour t'aider, j'ai écrit un article : codelynx.dev/posts/javascri…

Thread : ressources gratuites pour apprendre 👇 1. JavaScript.info

C'est en français : fr.javascript.info

Il y a tout ce qu'il faut pour connaître JavaScript