Articles

Le fil des articles se trouve en page d'accueil. Vous trouverez ici une liste d'articles, triés par thèmes, commençant par les articles publiés ici-même puis les articles traduits par d'autres sites francophones, ou écrits directement en français (ainsi que, exceptionnellement, quelques articles ou listes d'articles en anglais).

CSS

BASES CSS :

Positionnement :

• Le positionnement CSS, par Louis Lazaris
• Box-sizing pour les nuls, par Paula Borowska
• Centrer en CSS, un guide complet, par Chris Coyier
• Centrer un bloc div, guide complet, par Steve Pear
• Fixer une div, guide complet, par Steve Pear
• Inline, Block et Inline-Block, par Louis Lazaris
• Des colonnes de même hauteur, par Kezz Bracey
• Comment fonctionne CSS Float, par Ire Aderinokun
• Pourquoi height: 100% ne fonctionne pas, par Maujor
• Comment fonctionne z-index, par Ire Aderinokun

Pseudo-classes & pseudo-éléments :

• Combinateurs et pseudo-classes, par Steven Bradley
• Les pseudo-éléments :before et :after, par Louis Lazaris
• La pseudo-classe de négation, par Shay Howe
• :empty, une pseudo-classe pas si vide, par Dudley Storey
• Toi seul : utiliser only-child de CSS, par Dudley Storey
• Animer des pseudo-éléments, par Donovan Hutchinson
• Des sélecteurs virtuels en CSS3, par Matt Mastracci
• Un surlignage simple en CSS, par Chris Coyier
• CSS :root, le retour aux racines, par Simurai

Animation, Transformation, Transition :

• CSS animation, une introduction, par Rachel Cope
• Des stores vénitiens 3D en CSS, par Dudley Storey
• Subtilités de CSS3 transitions, par Louis Lazaris
• 5 façons d'animer de manière responsable, par Rachel Nabors
• Portal en CSS, par Donovan Hutchinson
• Créer des sphères en CSS, par Donovan Hutchinson
• Animer un SVG avec CSS, par Chris Coyier
• SVG, style et animation avec CSS, par Sara Soueidan
• Tout sur les sprites CSS, par Chris Coyier
• Animer avec les sprites SVG, par Sarah Drasner
• Animer des pseudo-éléments, par Donovan Hutchinson
• Animer des éléments sur un chemin avec CSS, par Dudley Storey
• CSS animation : Star Wars, par Donovan Hutchinson
• Un carrousel responsif en pur CSS, par Dudley Storey
• Background révélé par des images coulissantes en CSS, par Dudley Storey
• Créer un effet Chillwave en SVG, par Varun Vachhar

Flexbox :

• Flexbox, guide complet par Chris Coyier
• Flexbox en un coup de dés, par Landon Schropp
• Utiliser Flexbox, par Sean Fioritto
• Transformer un layout avec Flexbox, par Zoe Gillenwater
• Layout sur 12 colonnes avec Flexbox, par Landon Schropp
• Guide de Flexbox : space-between, l'oublié, par Noah Blon
• Guide de Flexbox : n'oubliez pas flex-shrink, par Noah Blon
• Techniques Flexbox, 1 : Titre aligné et retour à la ligne, par Chris Coyier
• Techniques Flexbox, 2 : Centrer verticalement, par David Walsh
• Techniques Flexbox, 3 : Layout sur 12 colonnes, par David Walsh
• Techniques Flexbox, 4: conception d'une page produits, par Levin Mejia
• Scroll avec background révélé en pur CSS, par Dudley Storey
• Jouons avec Flexbox et les Quantity Queries, par Aaron Gustafson
• Utiliser Grid ou Flexbox ? par Rachel Andrew

En anglais :

• CSS Flexbox, Daily curated collection of articles and resources, par Heydon Pickering
• How Flexbox works — explained with big, colorful, animated gifs, par Scott Domes

Voir la page Ressources pour les outils Flexbox

Voir la page Ressources pour les outils CSS Grid

Autres :

• IDs et Classes, par Louis Lazaris
• Les dégradés CSS, par Chris Coyier
• Comprendre les dégradés linéaires CSS, par Patrick Brosset
• Termes et définitions CSS, par Louis Lazaris
• La première variable CSS : currentColor, par Dudley Storey
• Un CSS concis avec currentColor, par Osvaldas Valutis
• CSS, aider la veuve et l'orphelin, à propos de widows et orphans, par Dudley Storey
• Des sélecteurs virtuels en CSS3, par Matt Mastracci

APPROFONDISSEMENT CSS :

• Les motifs CSS3, par Lea Verou
• Astuces CSS avec checkbox, par Will Boyd
• Brood X : le principe des cigales en CSS, par Dudley Storey
• Utiliser SVG par Chris Coyier
• Data URI par Chris Coyier
• CSS Shapes, une introduction par Sara Soueidan
• Masquer et détourer en CSS, par Chris Coyier
• Combiner CSS clip-path et Shapes, par Dudley Storey
• Comprendre clip-path, par Drew Minns
• Scroll avec background révélé en pur CSS, par Dudley Storey
• CSS Blend Modes, une introduction, par Chris Coyier
• CSS Blend Modes, un petit guide, par Shwetank Dixit
• Contraste de texte automatique avec CSS Blend Modes, par Dudley Storey
• Effets vidéo avec CSS Blend-Modes, par Dudley Storey
• Créer des sphères en CSS, par Donovan Hutchinson
• Les filtres CSS, par Paula Borowska
• Utiliser HSL pour vos couleurs, par Dudley Storey
• 3 raisons d'utiliser HSL, par Dudley Storey
• Auditer votre CSS, par Susan Robertson
• Découvrir Susy, par Zell Liew
• Utiliser CSS object-fit, par Dudley Storey
• Background révélé par des images coulissantes en CSS, par Dudley Storey
• Diagrammes circulaires flexibles avec CSS et SVG, par Lea Verou
• Effets d'images CSS, par Una Kravets :
  1. Vintage délavé
  2. Lunettes 3D
  3. Vignettes

OUTILS :

• Autoprefixer, un postprocesseur pour les préfixes vendeurs, par Andrey Sitnik
• Emmet, un turbo dans votre CSS, par Josh Medeski
• Raccourcis et astuces Emmet, par Matt McFadyen et Jordan Moore

Publiés ailleurs :

• La cascade CSS, par Laurent Denis
• Grands principes de construction moderne de CSS, par Nicolas Hoffmann
• Introduction au positionnement CSS, par Noah Stokes
• Apprendre les mises en page CSS, par learnlayout.com
• Transitions et animations en CSS3, par Vincent de Oliveira
• Timing des animations et transitions en CSS3, par SBoudrias
• Box-sizing, vidéo par Grafikart
• Inline-block est-il un substitut aux floats ?, par Steven Bradley
• Le point sur les grilles, par Raphael
• Sept approches non tramées de l'icône menu Hamburger
• Les variables CSS sont nos amies, par Thomas Zilliox

AMÉLIORATION PROGRESSIVE, 3 articles d'Aaron Gustafson :

• Comprendre l'amélioration progressive
• Amélioration progressive avec CSS
• Amélioration progressive avec JavaScript

Applications pratiques :

• Amélioration responsive, par Jeremy Keith
• Menu de navigation avec amélioration progressive, par Raphaël Goetter

IMPRESSION PAPIER

On oublie trop souvent que de nombreux utilisateurs impriment les articles du web pour les lire. Combien d'articles sortent illisibles d'un superbe site web, tels le prince charmant métamorphosé en vilain crapaud... Quelques bons articles pour y remédier :

Publiés dans La Cascade :

• CSS, aider la veuve et l'orphelin, à propos de widows et orphans, par Dudley Storey
• CSS : n'oubliez pas l'impression papier! par Manuel Matuzovic

Publiés ailleurs :

• Faites bonne impression avec les CSS, par Eric A. Meyer
• Maîtriser l'impression CSS, par Nicolas Hoffmann

Sass

Sass est une extension de CSS3 qui permet d'étendre ses fonctionnalités et d'écrire un code plus concis et fonctionnel.

Publiés dans La Cascade :

• Se lancer dans Sass, par David Demaree
• Initiation à Sass, 1, par Laura Kalbag
• Initiation à Sass, 2 : rythme vertical, par Laura Kalbag
• Initiation à Sass, 3 : mixins et placeholders, par Laura Kalbag
• Sass : Mixin ou Placeholder ?, par Hugo Giraudel
• Sass : Tout sur @extend, par Hugo Giraudel
• Un composant Sass en 10 minutes, par Hugo Giraudel
• Sass et interpolation, par Hugo Giraudel
• L'imbrication des sélecteurs dans Sass, par Hugo Giraudel
• Découvrir Susy, par Zell Liew

Publiés ailleurs :

• CSS & SASS : Augmentez votre productivité dans vos intégrations, par Vincent Ginet
• CSS maintenable avec Sass et Compass, par Grafikart (vidéo)
• Domptez vos CSS avec Sass, par Seemios Blog
• Qu'est-ce que c'est Sass, par pourmonfils.com (exemples donnés avec la syntaxe sass, légèrement différente de scss)
• Sass for beginners, un guide (en anglais) pour installer et utiliser Sass sur Windows
• Valable pour le code en général, L'approche DRY, don't repeat yourself, par Nicolas Hoffmann

Tutoriel vidéo (en anglais):

• Sass tutorials, level up tuts - une série de vidéos courtes sur les caractéristiques essentielles de Sass.

Quelques réalisations intéressantes avec Sass :

...

HTML

Publiés dans La Cascade :

• Design atomique, par Brad Frost
• Utiliser SVG par Chris Coyier
• Data URI par Chris Coyier
• Introduction aux custom elements, par Peter Gasston
• Images responsives : picture et srcset, par Eric Portis
• Images responsives : cas d'utilisation et snippets, par Andreas Bovens
• Les raccourcis HTML5, par Dudley Storey
• Créer un background vidéo fullscreen avec HTML5, par Dudley Storey
• Qu'est-ce qu'un élément remplacé? par Dudley Storey
• Créer un player audio en HTML5, 1 : fonctionnalités et design, par Dudley Storey
• Créer un player audio en HTML5, 2 : le prototype, par Dudley Storey
• Créer un player audio en HTML5, 3 : microdonnées, par Dudley Storey
• Autocomplétion native en HTML5, par Steve Pear
• HTML5 : comprendre les polyfills, shivs et shims, par Dudley Storey

Outils :

• Goodbye Zen Coding, hello Emmet, par Zeno Rocha
• Raccourcis et astuces Emmet, par Matt McFadyen et Jordan Moore

Publiés ailleurs :

• Les formulaires d'inscription doivent disparaître, par Luke Wroblewski

Javascript & jQuery

Publiés dans La Cascade :

• Qu'est-ce que le DOM, par Chris Coyier
• Introduction aux custom elements, par Peter Gasston

Publiés ailleurs :

• La gestion des événements en JavaScript, par Julien Royer
• Amélioration progressive avec JavaScript, par Aaron Gustafson
• Premiers pas dans le DOM, de Gilles Chagnon
• Qu'est-ce que le DOM, par Yoyodesign

Sur jQuery :

• You might not need jQuery . jQuery est pratique et nous préserve de l'enfer des incompatibilités navigateurs. Mais depuis IE 8, gérer les navigateurs n'est plus une si grande affaire. Cet article (en anglais, mais ce sont surtout des exemples de code) montre comment JavaScript peut répondre à la plupart des utilisations habituelles de jQuery, sans les inconvénients de ce dernier.

Responsive Design

Publiés dans La Cascade :

• Stratégie responsive, par Brad Frost
• La chorégraphie du contenu, par Trent Walton
• Images responsives : picture et srcset, par Eric Portis
• Images responsives, cas d'utilisation et snippets, par Andreas Bovens
• Stores vénitiens responsifs 3D en pur CSS, par Dudley Storey
• Découvrir Susy, par Zell Liew
• Rendre un SVG responsif, par Dudley Storey
• Un carrousel responsif en pur CSS, par Dudley Storey
• Introduction aux images responsives, par Jason Grigsby
  
  1. Définitions
  2. Img requise
  3. Densité d’affichage srcset
  4. Descripteurs de largeur srcset
  5. Dimensions
  6. Élément picture
  7. Type
  8. Images responsives CSS
  9. Image breakpoints

Publiés ailleurs :

• Le Web Design Responsif, par Ethan Marcotte : article fondateur par le créateur du concept de RWD (Responsive Web Design)
• Les grilles fluides, par Ethan Marcotte.
• Adaptive vs Responsive Design : quelle est la différence ? par Viljami Salminen
• Responsive Webdesign – présent et futur de l’adaptation mobile, par Stéphanie Walter

SVG

Publiés dans La Cascade :

• Utiliser SVG par Chris Coyier
• Les bases de SVG : Cercles et Ellipses, par Dudley Storey
• Les bases de SVG : Rectangles et Carrés, par Dudley Storey
• Les bases de SVG : Polygones, par Dudley Storey
• Les bases de SVG : lignes simples et multiples, par Dudley Storey
• Les bases de SVG : groupes, par Dudley Storey
• Les bases de SVG : propriétés de style, par Dudley Storey
• Diagonales et motifs SVG en background, par Dudley Storey
• Backgrounds SVG : les rayures, par Dudley Storey
• Motifs japonais en SVG, par Dudley Storey
• Motifs maoris en SVG, par Dudley Storey
• Guide des animations SVG (SMIL), par Sara Soueidan
• Animer un SVG avec CSS, par Chris Coyier
• Ligne animée en SVG, par Chris Coyier
• SVG, style et animation avec CSS, par Sara Soueidan
• Le morphing en SVG, par Chris Coyier
• L'effet gluant avec SVG, par Lucas Bebber
• Les dégradés SVG, par Joni Trythall
• Animer un dégradé SVG, par Joni Trythall
• Rendre un SVG responsif, par Dudley Storey
• 5 façons d'animer de manière responsable, par Rachel Nabors
• Animer avec les sprites SVG, par Sarah Drasner
• 5 règles pour rendre vos SVG accessibles, par Dudley Storey
• Image révélée au grattage avec SVG et CSS Blend Modes, par Dudley Storey
• Diagrammes circulaires flexibles avec CSS et SVG, par Lea Verou
• Créer de superbes diagrammes avec SVG et Blend Modes, par Dudley Storey
• Backgrounds Pop-Art avec SVG et Blend Modes, par Dudley Storey
• Comprendre SVG viewBox et viewport, par Joni Trythall
• Comprendre SVG preserveAspectRatio, par Joni Trythall
• Créer un effet Chillwave en SVG, par Varun Vachhar

Publiés ailleurs :

• SVG, le dessin vectoriel pour le web, par Gili
• Le format SVG, vidéo par Grafikart
• Six impossible things with SVG, slidedeck par Dudley Storey (en anglais) : 6 choses impossibles ou compliquées en CSS, que SVG rend possibles ou simples.

Design

Publiés dans La Cascade :

• Style vs Design, par Jeffrey Zeldman
• Design atomique, par Brad Frost
• Créer un guide de style, par Susan Robertson
• Théorie des couleurs, 1 : Signification des couleurs, par Cameron Chapman
• Théorie des couleurs, 2 : Concepts et terminologie, par Cameron Chapman
• Théorie des couleurs, 3 : Créer votre palette, par Cameron Chapman
• Découvrir Susy, par Zell Liew
• Utiliser les collections des musées, par Dudley Storey
• L'ajustement optique, par Luke Jones

Publiés ailleurs :

• Le Tao du design web, par John Allsop
• Désacraliser le design, par Jeff Gothelf
• Le singe baigneur est nu, et autres considérations sur la distinction entre stylisme et design, par Adam Greenfield
• Les pixels, voilà l'ennemi, par Dave Ruppert
• Les dix principes du bon design, par Dieter Rams, c/o Geoffroy Dorne

Sketch

Publiés dans La Cascade :

• Sketch 3, tutoriel par Sébastien Gabriel
• Créer une interface de login avec Sketch, par Armando Sotoca
• Maîtriser les courbes de Bézier, par Peter Nowell
• Créer une icône flat avec Sketch, par Abhijeet Wankhade
• Sketch et les vecteurs, par Peter Nowell
• 11 astuces de prototypage avec Sketch, par Andy Orsow
• Sketch 3 : l'outil Scissors, par Peter Nowell
• Créer un logo avec Sketch 3, par Jeremy Osborn

Publiés ailleurs :

• Learn Sketch 3, par Meng To (en anglais)
• Comprendre les options d'exportation de Sketch 3, par Armando Sotoca

Typographie

Publiés dans La Cascade :

• De la Typographie Web, par Jason Santa Maria
• Do's et Dont's de la typographie, par Sam Jones
• Le web, 95% de typographie, par Oliver Reichenstein
• Les free fonts aujourd'hui, par Jeremiah Shoaf
• Créer un guide de style, par Susan Robertson
• Mécanique des polices de caractères, 1, par Tobias Frere-Jones
• Mécanique des polices de caractères, 2, par Tobias Frere-Jones
• Typographie du site Advertising Age, par Jeremiah Shoaf
• L'ajustement optique, par Luke Jones

Publiés ailleurs :

• De la vraie typographie pour le Web, par Tim Brown
• Pour une typographie qui a du sens, par Tim Brown
• Dimensionner ses fontes avec rem, par Jonathan Snook
• Améliorer l’accessibilité par la typographie, par Joe Dolson
• Comment choisir une fonte, par Laurent Demontiers

UX, Expérience utilisateur

Publiés dans La Cascade :

• L'approche humaine, par Trent Walton

Publiés ailleurs :

• Qu'est-ce que l'expérience utilisateur ? par UX-FR
• Qu'est-ce que l'expérience utilisateur ? par Jean-François Marti
• Les 10 commandements de l'expérience utilisateur, par Frédéric Cozic
• L'authenticité est mère de confiance, par Stephen Hay
• Fenêtres sur le Web, par Karen McGrane
• Mettre en place l’expérience utilisateur : une étude de cas, par Simon White

Contenu

Publiés ailleurs :

• La discipline de la stratégie du contenu, par Kristina Halvorson
• Fenêtres sur le Web, par Karen McGrane

API

La série d'articles de Brian Cooksey sur les API, une excellente introduction, claire, amusante et sans jargon.

• API, une introduction
• API, les protocoles
• API, formats de données
• API, authentification
• Concevoir une API
• API, communication en temps réel

Accessibilité

Publiés dans La Cascade :

• 5 règles pour rendre vos SVG accessibles, par Dudley Storey
• Bien utiliser l'attribut alt, par Dudley Storey

Publiés ailleurs :

• Évaluer l’accessibilité d’un site web, première partie : Les préliminaires, par Roger Johansson
• Évaluer l’accessibilité d’un site web, deuxième partie : Les premiers points à vérifier, par Roger Johansson
• Évaluer l’accessibilité des sites web 3ème partie, Aller plus loin, par Roger Johansson
• Introduction à WAI ARIA, par Gez Lemon
• ARIA, il serait temps de s'y mettre, par Aurélien Lévy
• De l'accessibilité dans HTML5, par Philippe Le Mesle
• Améliorer l’accessibilité par la typographie, par Joe Dolson

Outils de développement

Publiés dans La Cascade :

• Grunt pour ceux qui pensent que Grunt est compliqué, par Chris Coyier
• Gulp pour les débutants, par Zell Liew
• Goodbye Zen Coding, hello Emmet, par Zeno Rocha
• Emmet, un turbo dans votre CSS, par Josh Medeski
• La console, une introduction pour les web designers, par John Long
• CodeKit 2.0, par Bryan Jones et Chris Coyier
• Le $PATH vers la lumière, par Olivier Lacan

Publiés ailleurs :

• Premiers pas avec Grunt, par kud
• Découverte de Grunt, par Grafikart
• Tutoriel vidéo sur Emmet, par Grafikart
• Un autre tutoriel vidéo sur Emmet, par Weblife

Web sémantique

Publiés dans La Cascade :

• Introduction à RDFa, par Mark Birbeck
• Qu'est-ce que la recherche sémantique ? par David Amerland
• Twitter et la recherche sémantique, par David Amerland
• L'avenir du streaming, par Khoi Vinh

Publiés ailleurs :

• Note d'introduction à RDFa, par le W3C
• Introduction à RDFa, par developpez.com
• À propos des microdonnées, petite intro à Schema.org par Google
• Métadonnées : Twitter cards et Open Graph, par Grafikart

Santé et Psychologie

Publiés dans La Cascade :

• Burnout par Scott Boms. Connaître le syndrome d'épuisement professionnel, l'éviter ou le soigner.
• Dompter votre critique intérieur, par Denise Jacobs. Cette voix interne négative peut être dressée à des fins utiles.