Une lib de composants UI. Sous le coude.
Le document de travail de l'équipe de Flutter pour proposer une alternative à la stack HTML + CSS + JS.
En se basant sur des API low level: WASM, WebGPU et ARIA (accessibilité) pour render directement les pages web.
Web pages today are built on 25-year-old technology: a markup language for scientific documents from 1991, a scripting language from 1995 whose first version was implemented "in ten days", a styling and layout model from 1996, and an API from 1997 whose initial design was based on combining the independent inventions of two teams with little regard to the developer experience
Any application that can be written in JavaScript, will eventually be written in JavaScript.
Un historique de l'utilisation de Javascript dans le web. Les SPA n'ont pas les mêmes besoin qu'un site web (blog, e-commerce) et pourtant on se retrouve partout avec la même complexité.
Une version frontend des chiffres de latence à connaitre comme la latence d'une connexion 4G (15-50 ms) ou le temps nécessaire pour parser 1Mo de Javascript (150 ms)
Un article qui résume assez bien tout ce qu'on a autour des Web Performance, ces métriques utilisées (entre autre) par Google pour mesurer la performance des sites web.
A part Google, il existe plusieurs outils en SaaS ou open source pour mesurer ces métriques soit même en vu de les améliorer.
Une lib frontend pour avoir le Largest Content Paint et le First Content Paint des pages d'un site web.
Une lib AWS qui wrap toute la complexité pour déployer une application fullstack sur AWS.
Ça permet d'utiliser les services AWS comme EC2, S3, RDS (Postgres), de l'authentification et pleins d'autre chose simplement en instanciant des classes dans du code.
Un outil open source pour mesurer la performance des applications frontend.
Ça s'intègre même à la CI !
Une série d'articles pour améliorer la vitesse de chargement des pages web.
La sortie de Next.js 4 c'est surtout l'arrivée des Server Actions.
Ils ont presque terminé leur chantier de support de Turbopack plutôt que Webpack donc on peut s'attendre à une prochaine release avec des performances accrues! (Turbopack est en Rust et beaucoup plus performant que Webpack)
Un article sur l'écriture de tests frontend end to end et notamment le choix des sélecteurs.
Les sélecteurs doivent être le plus proche possible de l'interaction réel de l'utilisateur.
Par exemple, si je veux me connecter alors je clique sur un bouton qui contient le texte "Login" donc le sélecteur doit reproduire ce comportement au lieu d'utiliser des attributes HTML comme les classes ou le fameux data-test-id.
C'est d'ailleurs la base des sélecteurs que propose Playwright:
await page.getByRole('button', { name: /login/i }).click();Une lib qui permet de générer une version très dégradée d'une image mais aussi très légère (20 octets!)
ça permet d'afficher un placeholder en attendant que la véritable image charge
Un article qui illustre une architecture hexagonale en frontend (React)
Injection de dépendance en frontend avec React en utilisant des High Order Function ou des contextes React.
Un éditeur WYSIWYG qui reprend le style de Notion
Un boilerplate pour lancer un produit avec tout ce qu'il faut:
- app front (Tailwind) et back avec Next.js et MongoDB
- Stripe déjà configuré pour le paiement
- Mailgun pour les mail
- NextAuth avec Google login ou magic link
- SEO etc
Un article sur l'utilisation de React Context dans une app pour partager facilement des informations entre les composants plutôt que les passer dans les props.
L'utilisation est un peu complexe et s'apparente à de l'injection de dépendances.
On fournit les contextes en encapsulant l'application dans des balises donc attention à l'utilisation de plusieurs contextes qui s'encapsulent entre eux et réintroduisent du couplage.
// ContainerContext a besoin de LangContext
<LangContext.Provider value={translate}>
<ContainerContext.Provider value={findTasks}>
<TodoList/>
</ContainerContext.Provider>
</LangContext.Provider>
Un récapitulatif très complet sur les web component et ce qu'il est possible de faire avec.
Une librairie de composants React près à l'emploi pour faire développer une application.
Le design est très épuré je trouve
Très intéressante comparaison entre Tailwind et Bootstrap.
Tailwind n'est pas un UI kit opinated comme Bootstrap mais plutôt une librairie de styles/widgets pour créer des composants.
Si je devais faire un parallèle avec Vue.js:
- Bootstap => Composant API
- Tailwind => Composition API
Tailwind permet donc d'avoir plus de flexibilité dans le design d'une application même si il demande un effort plus conséquent au démarrage.
(Merci Théo et Seb)