background preloader

Code Guide by @mdo

Code Guide by @mdo

http://codeguide.co/

Related:  Sites de FORMATION, TUTORIELSTUTORIELSBONNES PRATIQUESWeb DeveloperCOURS, TUTORIELS et Co

Comment indiquer la langue d’un contenu en HTML? Il est important sur une page web d’indiquer clairement la langue du contenu. Les informations données sur la ou les langues du contenu seront utiles pour les outils d’indexation (moteurs de recherche), les outils de traduction automatique ou encore ceux de synthèse vocale. Par exemple, un lecteur d’écran a besoin de connaitre la langue du contenu pour pouvoir le lire correctement, quand cette langue diffère de ses paramètres par défaut. Indiquer la langue de traitement On commencera par veiller à ce que chaque page HTML ait un attribut lang sur l’élément racine, qui indique la langue principale de la page. Specificity - SitePoint Specificity is a mechanism within the CSS cascade that aids conflict resolution. The concept of specificity states that when two or more declarations that apply to the same element, and set the same property, have the same importance and origin, the declaration with the most specific selector will take precedence. Consider this example:

Auditer votre CSS Auditer votre CSS vous aide à organiser votre code, à le rendre plus lisible, à éliminer les répétitions, mais aussi à améliorer les performances de votre site. Par Susan Robertson. Par Susan Robertson La perspective de procéder à un audit de CSS ne soulève généralement pas l'enthousiasme, et pourtant c'est devenu un de mes genres de projets préférés. Insisting on Core Development Principles The web community talks a lot about best practices in design and development: methodologies that are key to reaching and retaining users, considerate design habits, and areas that we as a community should focus on. Article Continues Below But let’s be honest—there are a lot of areas to focus on. We need to put users first, content first, and mobile first. We need to design for accessibility, performance, and empathy. We need to tune and test our work across many devices and browsers.

Quick Tip: Don’t Forget the Viewport Meta Tag I remember my maiden voyage into responsive web design; I'd used a classic grid, wrestled with a flexible layout, and tackled media queries for the first time. Stretching and shrinking the browser window resulted in the satisfying sight of my design responding to its surroundings. Then I tested it on a mobile. It didn't work - I was looking at a shrunken down version of the full-screen design. Spécifier la langue d'un document (X)HTML De nombreuses sources encouragent les auteurs à préciser la langue de leur document : les directives d'accessibilité, les bonnes pratiques qualités, les spécifications (X)HTML , les conseils pour l'internationalisation, l'optimisation du reférencement, etc. Le plus souvent, cette démarche semble d'autant plus simple que le document est rédigé dans une langue unique, ou comporte tout au plus quelques citations dans une autre langue. Cependant, même dans ces cas simples, ce sont en fait deux notions bien distinctes qui sont à l'oeuvre : les langues primaires de la ressource et les langues de traitement de son contenu. Toutes deux répondent à des problématiques opérationnelles différentes, que nous allons analyser ici.

CSS Cascading Style Sheets (CSS) est un langage de feuille de style utilisé afin de décrire la présentation d'un document écrit en HTML ou en XML (on inclut ici les langages basés sur XML comme SVG ou XHTML). CSS décrit la façon dont les éléments doivent être affichés, à l'écran, sur du papier ou sur autre support. CSS est l'un des langages principaux du Web et a été standardisé par le W3C. Ce standard évolue sous forme de niveaux (levels), CSS1 est désormais considéré comme obsolète, CSS2.1 correspond à la recommandation et CSS3, qui est découpé en modules plus petits est en voie de standardisation. La référence CSS Une référence exhaustive destinée aux développeurs web expérimenté et qui décrit chaque propriété et concept de CSS.

Utilisation optimisée de Framework CSS comme Bootstrap avec Less J'ai déjà abordé le sujet des Frameworks CSS qui surchargeaient le DOM HTML inutilement et allait à l'encontre de la philosophie du W3C (séparation du fond et de la forme) dans un précédent article où j'expliquais pourquoi, par exemple, Bootstrap est une régression pour un développement Front-end de qualité. J'ai également expliqué comment reproduire l'équivalent de fonctionnalités utiles dans un Framework en respectant l'approche CSS-driven dans Grille CSS Responsive et Sémantique sans Framework. Je vais ici vous démontrer que cette méthode CSS-driven peut non seulement être grandement simplifiée avec l'utilisation des préprocesseurs CSS comme Less, Sass ou Stylus, mais qu'elle permet également d'exploiter les Frameworks tel que Bootstrap de manière propre et conforme à la philosophie de séparation de la sémantique et du design. Les approches HTML-driven et CSS-driven pour habiller une page Web La différence est simple : HTML-driven où l'habillage rapide et désolant

20 Useful Docs and Guides for Front-End Developers I come across so many interesting info-apps and documents in my daily research, so I thought I’d provide a list of those here. True, not everyone likes the “list post” or roundup, but hey, we can’t please everyone. And we don’t do these types of posts too often anyhow.

Related:  Bootstrap