Comprendre le virtual DOM
Qu'est-ce exactement que le DOM virtuel, en quoi diffère-t-il du DOM, et comment l'utiliser. Brillante présentation, comme d'habitude, par Ire Aderinokun.
Le DOM, c'est quoi exactement ?
Quand on a besoin d'une réponse claire et détaillée, on demande à Ire Aderinokun. Tout ce que vous avez besoin de savoir sur le DOM, c'est ici.
Optimiser votre front-end pour le navigateur
L'optimisation des sites web est à l'ordre du jour. Si nous voulons améliorer l'expérience utilisateur, en particulier sur les mobiles, nous devons comprendre le fonctionnement des navigateurs. Par Sanjay Purswani.
Introduction aux images responsives 9 : image breakpoints
C'est l'avant-dernière partie de notre série au long cours sur les images responsives, et c'est la plus redoutable. Mais comme toujours avec l'excellent Jason Grigsby, très complète et très claire.
Comment fonctionne z-index
Ça n'est pas évident à première vue, mais les éléments HTML sont générés en 3D. La propriété CSS z-index spécifie le niveau et le contexte d'empilement. Confus? Suivez Ire Aderinokun!
HTML5 : Comprendre les Polyfills, Shivs et Shims
Les dernières fonctionnalités HTML, CSS ou JavaScript ne sont pas toujours supportées par les navigateurs, ou seulement partiellement. Les shims, shivs et polyfills sont une solution, présentée par Dudley Storey.
Bien utiliser l'attribut alt
Le web est plus fort lorsqu'il est divers : plus il est accessible, meilleur il est. Dudley Storey fait le point sur les règles à connaître concernant l'attribut alt d'alternative textuelle.
Introduction aux images responsives 8 : images CSS
Quand on parle d'images responsives, on ne pense généralement pas aux images CSS. Pourtant il existe des solutions spécifiques, dont les nouvelles media queries résolution et image-set(). Par Jason Grigsby.
Introduction aux images responsives 7 : type
Si vous déplorez la limitation des formats d'images, si vous voulez expérimenter sans abandonner vos utilisateurs, vous allez adorer l’attribut type. Un grand moment de détente avec Jason Grigsby!
Introduction aux images responsives 6 : élément picture
Nous nous sommes concentrés jusqu'à présent sur les questions liées au changement de résolution. Il est temps maintenant de passer à l’autre apport des nouveaux standards, la direction artistique.
Introduction aux images responsives 5 : dimensions
Nous avons bien avancé dans notre feuilleton de l'été. Il est temps maintenant de faire connaissance avec le véritable héros de notre histoire, l’attribut `sizes`. Par Jason "Great" Grigsby.
Introduction aux images responsives, 4 : descripteurs de largeur srcset
Les descripteurs de densité d’affichage sont parfaits pour les images de largeur fixe mais insuffisants pour les images flexibles. C'est ici qu'interviennent les descripteurs de largeur! Par Jason Grisgsby.
Introduction aux images responsives, 3 : densité d'affichage srcset
Depuis qu'Apple a lancé son affichage retina sur l'iPhone4, les designers doivent gérer le traitement de l'affichage en haute résolution. C'est ici que `srcset` et ses descripteurs entrent en scène.
Introduction aux images responsives, 2 : img requise
Suite de notre série de l'été consacrée aux images responsives. L'élément img est insuffisant, mais il est indispensable. Améliorons-le progessivement avec les nouveaux standards des images responsives. Par Jason Grigsby.
Introduction aux images responsives, 1 : définitions
Notre série de l'été 2015 est consacrée aux images responsives, présentées par le grand Jason Grigsby. Pour ne plus rien ignorer sur le pourquoi et le comment, suivez le guide!
Astuces CSS avec checkbox
C'est incroyable ce qu'on peut faire avec un élément aussi modeste que les cases à cocher... du moins lorsqu'on s'appelle Will Boyd et qu'on a de la créativité à revendre!
Autocomplétion native en HTML5
Dans ce bref article, nous allons voir comment mettre en oeuvre une zone de saisie avec auto-complétion, sans recourir à jQuery ni à JavaScript, en pur HTML5. Par Steve Pear.
Effets vidéo HTML5 avec CSS Blend Modes
Les effets vidéos sont habituellement appliqués au montage et ne peuvent être manipulés une fois la vidéo exportée. Dudley Storey montre comment utiliser les nouveaux effets CSS dans vos vidéos.
Créer un player audio en HTML5, 3 : microdonnées
Notre prototype de player audio HTML5 est encore assez brut. Nous allons lui donner son look définitif et ajouter quelques microdonnées pour aider les moteurs de recherche. Par Dudley Storey.
Créer un player audio en HTML5, 2 : le prototype
Bon allez, on se lance dans la création de notre player audio personnalisé ! Dudley Storey utilise une approche par petits pas — ou plutôt par petits tests — pour construire un prototype.
Créer un player audio en HTML5, 1 : fonctionnalités et design
Aujourd'hui, nous pouvons créer nos propres player media avec HTML5 et JavaScript, et personnaliser leur apparence avec CSS. Dudley Storey nous entraîne par étapes dans la construction d'un super player.
Amélioration responsive
L'amélioration progressive n'est pas une technologie, c'est une façon de penser. Jeremy Keith montre ici comment cette idée est non seulement respectueuse des utilisateurs mais également incroyablement libératrice de créativité.
Qu'est-ce qu'un élément remplacé ?
Avez-vous déjà entendu parler des éléments HTML remplacés ? Vous les utilisez pourtant tous les jours sans le savoir, et connaître leur nature peut vous éviter quelques soucis. Par Dudley Storey.
Guide des animations SVG (SMIL)
Armez-vous de courage, voi ch'entrate... Voici le fameux guide de Sara Soueidan, pour tout savoir sur les animations SVG avec SMIL. Les animations SMIL permettent des choses impossibles avec CSS.
Créer un background vidéo fullscreen avec HTML5
Il n'est pas possible d'intégrer une vidéo avec les propriétés CSS background ou background-image, mais Dudley Storey nous montre comment forcer l'apparition d'une vidéo responsive fullscreen derrière les éléments HTML.
Les raccourcis HTML5
HTML 5 est moins strict que XHTML en ce qui concerne le respect des règles de balisage et autorise un certain nombre de raccourcis que nous présente rapidement Dudley Storey.
Raccourcis et astuces Emmet
Emmet est un plugin pour éditeurs de textes qui vous aide à créer HTML et CSS à la vitesse de l'éclair. Rappel des raccourcis principaux et quelques fonctionnalités moins connues.
Continuum
Jeremy Keith, dans la continuité du célèbre Tao du Webdesign, défend l'idée du web comme un continuum - un espace ouvert à l'expérimentation, soucieux d'accessibilité au contenu. Engagé, constructif, définitif.
Animer un dégradé SVG
Dans son article précédent, Joni Trythall décrivait les dégradés SVG. Passons maintenant à l'étape suivante, leur animation ! Une bonne introduction aux notions les plus basiques, à partir d'exemples simples.
Les dégradés SVG
Dégradés CSS ou dégradés SVG ? C'est une longue discussion, les deux ont leurs avantages, leurs utilisations particulières. Joni Trythall présente les dégradés SVG, en se concentrant sur leur utilisation pratique.
Ligne animée en SVG
Chris Coyier s'est intéressé aux animations SVG qu'on trouve un peu partout et il a voulu comprendre la base de cette technique. Il nous livre ses observations, c'est évidemment passionnant.
Images responsives : picture et srcset
Charger les images en fonction de la résolution d'écran de l'utilisateur, avoir des images responsives, faire de la direction artistique... la révolution est en marche ! Belle présentation par Eric Portis.
Introduction aux Custom Elements
Vous avez certainement perçu le vacarme qu'on fait autour des composants web et ce qu'ils vont apporter. Peter Gasston présente ici les éléments personnalisés, un petit guide pour mieux comprendre.
Stratégie responsive
On sait assez bien ce qu'est le design responsif, mais comment le mettre en place, surtout lorsque votre site est déjà ancien ? Brad Frost fait le tour des principales stratégies.
Data URI
Saviez-vous que vous n'aviez pas besoin d'utiliser un lien externe vers une image, vous pouvez embarquer les données de l'image directement dans votre document avec le format codé Data URI.
Utiliser SVG
Dans cet article complet et clair, Chris Coyier s'intéresse à la mise en oeuvre concrète de SVG pour votre design. Pas de théorie, cercles, rectangles, non, rien que du concret.
Qu'est-ce que le DOM ?
Un article court et simple pour une première introduction au DOM, le Document Object Model, par Chris Coyier. Ce qu'il est, et ce qu'il n'est pas, dans un langage clair.
Goodbye, Zen Coding. Hello, Emmet!
Emmet, anciennement connu comme Zen Coding, est le plugin d'éditeur de texte qui vous fera gagner le plus de temps. Une introduction claire, illustrée, complète et passionnante par Zeno Rocha.
Design atomique
La création de systèmes de design a été au coeur de nombreux débats passionnés. Brad Frost propose ici sa vision, basée sur une comparaison avec les atomes et les molécules.