#HTML/CSS

Ciao WordPress, Hello JAMstack

Pour ceux qui l’ignorent, JAMstack est l’acronyme de JavaScript, APIs et Markup. Cela veut dire que contrairement à un CMS comme WordPress, le serveur web ne fait que livrer des fichiers statiques pré-compilés. Cependant, cela ne veut pas forcement dire que le site est statique, il y a du JavaScript et ce dernier est en mesure d’interagir avec des API (donc récupérer des données etc). Voyons les raisons de mon choix et le dessous des cartes techniques !

L'après jQuery: API DOM native et alternatives

Ça ne vous a surement pas échappé, on utilise aujourd’hui de moins en moins jQuery dans les nouveaux projets. Les navigateurs récents supportent en effet très bien les nouvelles API du DOM. Il est ainsi possible d’avoir un code qui fonctionne pour tous les navigateurs en se conformant aux standards. On se libère d’une dépendance mais on hérite d’une API native pas toujours super sexy… Voyons ce que l’on peut faire.

Guide ultime des images responsives & retina ready

La “technologie” Retina, si on peut l’appeler ainsi, consiste en une densité de pixels assez élevée pour que l’œil (d’où le nom de retina) ne puisse discerner les pixels sur l’écran. Cependant, avec une telle densité, pour ne pas que tout paraisse minuscule, la valeur en pixel de chaque élément est démultipliée. Concrètement, cela signifie que dans votre feuille CSS, tout élément que vous définissez, par exemple, avec une width: 100px; fera en réalité 200px. Tout est multiplié par deux.

À de telles résolutions, autant dire que vos images peuvent vite paraître pour le moins pixelisées. Il faut donc penser aux différentes tailles d’écrans, mais aussi aux différentes densités d’écans. Un 22” HD (1920x1080) n’aura pas besoin de la même qualité d’image qu’un 22” en 4k (4096x2016). Voyons comment penser nos images pour qu’elles soient éclatantes en toute situation.

Guide ultime de la typographie pour le web

Le web et les polices, ou fontes, c’est une histoire passionnelle. Avant le CSS3 et son @font-face, il n’était pas possible d’embarquer une police sur le web. On devait donc se contenter des polices sytème… Autant dire que le choix était limité, d’autant plus que tous les systèmes n’embarquent pas les mêmes jeux de polices.

Bref, ça, c’était avant. Aujourd’hui, deux questions se posent : quelle(s) police(s) choisir pour une expérience cohérente ? et comment garantir une expérience performante sur tous les devices ?

Utilisation des pseudo-classes CSS :valid et :invalid

Le HTML5 a permis d’assortir ses formulaires de contraintes. Elles permettent de valider le contenu directement en HTML, sans avoir forcement recourt au JavaScript. C’est supporté par la majorité des navigateurs depuis un bon moment.

Dans le même temps, deux nouvelles pseudo-classes CSS ont fait leur apparition. Elles offrent la possibilité d’appliquer des styles en fonction de la validation (ou non validation) du champ de formulaire. Voyons comment tout cela fonctionne !

Centrer une div à width variable

Ah le centrage en CSS, toute une histoire ! Quand la largeur d’une div est fixe – par exemple width: 400px – aucun problème, un petit coup de margin: auto et le tour est joué ; mais quand la div prend la largeur de son contenu, c’est une toute autre histoire… Chers amis, ne désespérez pas, à tout problème une (des ?!) solutions. Allez, à l’aventure !

Customiser le template de commentaires de WordPress

WordPress est souvent utilisé comme base pour des solutions sur mesure. La création de thème est dans l’ensemble bien documentée. Cependant, lorsque l’on développe un thème de A à Z, il n’est pas toujours évident de personnaliser les commentaires. Voyons comment arriver à nos fins.

101 balises HTML5 + exemples

Le HTML5 c’est plein de bonnes choses, des APIs Javascript, du CSS3, mais aussi et surtout des balises HTML ! Cette version du langage met en avant la sémantique, ainsi, de nombreuses balises permettent de remplacer les balises génériques div et span. Du layout à la citation, faisons le tour de tout ça, exemples à l’appui voulez-vous ?

CSS : div qui prend la taille de son contenu

J’ai récemment été confronté à un problème de CSS, lequel m’a mine de rien pris un petit bout de temps à résoudre. Comment faire prendre à un élément de type bloc la taille de son contenu (lequel pouvant varier). Il y a plusieurs solutions à cela, mais pour corser un peu le défis, j’utilisais Bootstrap, et certaines solutions n’étaient pas compatibles avec ce que je voulais. Bref, passons tout ça en revue.

3 outils HTML5 qui vous feront oublier powerpoint

On a toujours besoin, à un moment ou à un autre, de faire une présentation : un exposé, un brief, une conférence, bref à tous les niveaux et a tous les âges. Pour cela, on pense immédiatement à PowerPoint, les adeptes de la firme à la pomme utiliserons parfois Keynote et certains d’entre vous connaissent peut être Prezi.

Il existe cependant bien d’autres solutions, disponibles gratuitement, en open source et full HTML5. Alors pourquoi se priver et continuer à payer des licences pour des logiciels qui, au final, brident quelque peu notre créativité ?