Nathan Long partage cinq articles qui ont marqué des tournants dans sa carrière. Il évoque notamment l’impact de l’article d’Ethan Marcotte sur le responsive design, qui l’a aidé à comprendre la conception pour des écrans de tailles variables et à décrocher son premier emploi dans le web. Il mentionne aussi l’influence de l’OOCSS de Nicole Sullivan pour une CSS plus durable, son initiation à Vim grâce à un article provocateur, et l’adoption de flexbox via les tutoriels de Chris Coyier. Enfin, il souligne comment les avancées d’ES6 ont transformé sa façon d’écrire du JavaScript. L’article se conclut par un appel à partager ses propres découvertes, rappelant que chaque publication, même modeste, peut inspirer d’autres développeurs. Une belle réflexion sur la transmission et l’évolution collective du métier.
Tout est dans le titre
La liste :
- React Bits
- Vue.js Complete API Cheat Sheet
- CSS Grid Cheat Sheet
- Flexbox Cheatsheet
- Inclusive Components
- A11y Style Guide
- Front-end tooling recipes
- ES6 Features
- A Complete Guide to CSS Grid
- HTML Reference
- The HTML5 Robot
- CSS Triggers
- CSS property syntax cheatsheet
- HTML5 Pattern
- 2016 JavaScript Rising Stars
- What Web Can Do Today
- Moving to HTTPS Guide
- WAI-ARIA Authoring Practices 1.1
- Grid “fallbacks” and overrides
- Flexible Boxes
Tout est dans le titre (via https://www.smashingmagazine.com/2016/10/web-development-reading-list-155/ )
Une explication des nouveautés apportées par ES6
La fonction ES6 Symbol() retourne une sorte de UUID. Vous pouvez vous en servir pour générer des constantes de classe ou de modules en étant sûrs de ne pas avoir de collision de noms. De même, les propriétés d'objet définies via Symbol() ne sont pas sérialisées et n'apparaissent pas dans Object.keys(), Object.getOwnPropertyNames() et JSON.stringify().
Tout est dans le titre
Les proxies JavaScript permettent de modifier le comportement d'un objet, par exemple en interceptant l'appel à une de ses méthodes. L'auteur donne 2 exemples d'utilisation :
- le profiling d'un objet : compter le nombre d'accès à une de ses propriétés
- le 2 way data binding
Seul inconvénient : il n'existe pas de polyfill pour les vieux navigateurs
À travers l'implémentation d'un Tetris, l'auteur démontre l'utilisation de fonctionnalités ES6 comme :
- Classes
- Arrow Functions
- Destructuring
- Let and const
- Proxy
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre...
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre (via https://www.smashingmagazine.com/2018/09/monthly-web-development-update-9-2018/ )
Une explication très claire de l'utilisation de let et const en ES6 pour maîtriser la portée des variables