Navigateurs

2 vidéos sur le fonctionnement du navigateur (Gecko)

L’amélioration des performances d’affichage des sites web est la nouvelle frontière du développement web. La majorité des articles disponible traite du bon usage des sélecteurs, classes ou identifiants de nos feuilles de style. Pourtant, une des clés de l’optimisation des performances web passe par une meilleure compréhension du fonctionnement du navigateur qui reste peu connu des intégrateurs HTML / CSS. Pour y remédier, voici deux vidéos qui devraient vous en apprendre plus sur Gecko, le moteur de rendu de Mozilla Firefox. →

Intégration web

Check your <body> avec le W3C

Suite à l’arrivée W3C mobileOK Checker sur mon écran radar (merci @flashxman), je me suis dit qu’il pourrait être utile de faire une liste des outils proposés par le W3C pour vérifier la conformité de nos sites web par rapport aux standards, aux bonnes pratiques ou aux performances web. D’une manière générale, ces outils œuvrent pour l’amélioration de la qualité web. →

HTML & CSS

SMACSS — Architecture évolutive et modulaire pour CSS

Il n’existe pas de méthode universelle pour faire un site web. Tout au plus peut-on dégager de la pratique quelques principes de conception pour organiser le code HTML et CSS d’un projet à l’autre. Dans cette optique, Jonathan Snook (@snookca) nous fait profiter de son expérience avec SMACSS. Vous l’aurez compris, SMACSS fait la part belle aux règles CSS que l’auteur a divisé en quatre parties : base, maquette (structure), module et état. Cet article est un bref aperçu de la première partie du livre pour vous donner l’eau à la bouche. →

Le petit journal du web

Le petit journal du web : PHP, WordPress, Javascript, CSS, Ruby, Responsive Webdesign

Au menu de ce petit journal du web de Pâques : un mini framework pour gérer les fonctions CRUD en PHP avec un système de pagination en prime, un article pour mieux gérer le chargement des ressources Javascript ou CSS selon le contexte dans WordPress, une série de site sur HTML5 / Javascript / PHP et Ruby à garder sous la souris, un framework HTML / CSS / Javascript qui risque de faire de l’ombre à Bootstrap, from Twitter, un guide stylistique généraliste qui servira en toute occasion, une réflexion sur la navigation dans un contexte mobile avec le Responsive Webdesign, etc. →

HTML & CSS

940.css version fixe — Fusion de 960 Grid System, Blueprint CSS et The Simpler Grid

940.css est un système de grille de mise en page CSS qui résulte de la fusion des frameworks 960 Grid System, Blueprint CSS et The Simpler Grid dont il reprend les meilleures idées. Il est composé de 24 colonnes de 20 pixels séparées par une gouttière de 20 pixels (adaptation de la technique évoquée dans l’article Calculer une grille de mise en page « typo » avec le nombre d’Or). Soit un interlignage de 20 pixels pour une taille de caractère de 13 pixels en utilisant : font-size: 13px; line-height: 1.539. →

Helper CSS

microjs — 200 micro-frameworks Javascript

Microjs.com présente près de 200 frameworks Javascript petits mais costauds. De combien de lignes de code avez-vous besoin pour votre projet de site web : 50K, 100K, 150K ? Ok, nous aimons tous nos bons vieux gros frameworks comme jQuery ou Mootools et nous en tirons souvent le meilleur. Mais combien de fois les avons-nous utilisés à mauvais escient ? Combien de fois avons-nous tenté d’écraser une mouche avec un tank, alors que des solutions bien plus adaptées étaient à notre portée ? →

HTML & CSS

Nouvelle méthode de remplacement de texte par une image

Dans l’article Nouvelle méthode de remplacement d’image en CSS, je vous faisais part d’une nouvelle méthode de remplacement de texte par l’image en CSS proposée par Scott Kellum qui utilise la propriété text-indent avec un décalage en pourcentage. Cette méthode n’étant pas dénuée d’effets de bord (voir dans la suite de l’article), une nouvelle technique a fait son apparition lors de la mise à jour de HTML5 Boilerplate. Je vous propose une traduction de l’article Another CSS image replacement technique écrit par Nicolas Gallagher qui détaille une technique avec font-size : →

HTML & CSS

Foundation — Framework HTML, CSS & jQuery

Foundation est un framework HTML & CSS créé par l’agence web Zurb pour la conception des maquettes fonctionnelles (wireframes, mockups) quelque soit le type de périphériques. Il est composé d’une grille de mise en page, de la gestion des boutons et des formulaires.  S’il a été conçu à l’origine pour faciliter la création des prototypes, Foundation est également prêt à être utilisé en production. →

Documentation

184 vidéos en français pour apprendre jQuery, PHP, HTML & CSS

La chaine Youtube NewDzign propose près de deux cents tutoriels vidéos pour permettre aux débutants d’apprendre les langages du web jQuery et PHP, HTML & CSS. Je ne suis généralment pas très fan des tutoriels vidéos, mais vu le nombre de tutoriels déjà publiés, je ne pouvais pas passer à côté ! →

HTML & CSS

Nouvelle méthode de remplacement d’image en CSS

Pour remplacer du texte par une image avec CSS, il existe au moins neuf méthodes, dont deux ont été largement utilisées par les intégrateurs web. Vous trouverez à la fin de l’article une dixième méthode que je n’ai pas encore testée qui devrait allier performance et accessibilité. Elle nous vient tout droit de chez Jeffrey Zeldman. →