Tilap.net

Développement web

FrontEnd

L’IHM, c’est simple et beau :)

Intégrer Fontello dans son workflow dev pour gérer facilement ses icones applicatifs

Si vous ne connaissez pas fontello…

Fontello est est générateur de fonticon en ligne. Il permet à travers une interface web de construire un set d’icônes en les choisissant parmi les fonticons open source les plus connues, ou bien en important ses propres SVG.
Il va plus loin, en mettant à disposition de quoi définir le nom de votre font, de préciser pour chaque icône le nom de la classe CSS à utiliser, les codes ASCII de chacun, et de télécharger le tout sous un zip. Un vrai petit bonheur qui simplifie la vie.

Une fois le zip à votre disposition, vous l’intégrez dans votre projet, pointez sur la feuille de style, puis utilisez les classes CSS des fonticones dans votre code. Très facile.

Lire la suite »

Les variables dynamiques avec Less css

La venue des preprocesseurs CSS (SCSS, LESS, etc…) se démocratise, et pourtant leur utilisation courante se limite à :

  • le coté pratique des nested;
  • quelques fonctions de base (sur les couleurs);
  • le calcul de certaines propriétés (addiotion de padding, …);
  • la définition de quelques mixins.

C’est bien dommage, car le pré-processing permet bien plus. Voici un exemple de mise en oeuvre de variables à nom dynamique, très utile lorsque vous construisez des chartes graphiques cohérente et ayant des variantes par exemple.

Lire la suite »

Adaptative design: solutions pour les site web mobiles

Par abus de langage courant, on mélange souvent un site « responsive » à un site « compatibles mobiles » voir « compatible touch devices ». La différence est pourtant majeure, il y a d’ailleurs 2 mots distincts pour les différencier: « Responsive design » et d’ « Adaptative design ».

Si la différence vous échappe, je vous recommande l’excellent article de Viljami Salminen ou sa traduction en français par Stéphanie Walter.

Voici quelques pistes et solutions tirées de mes expériences afin de ne pas se limiter au responsive, mais bien de tendre vers une expérience utilisateur adaptée aux devices mobiles et tactiles.

Je pars du principe que votre site est déjà responsive.

Lire la suite »

Améliorer les clics sur les devices tactiles avec fastclick

Sur les devices tactiles, lorsque vous cliquez sur un lien, vous aurez surement remarqué un lag. En effet, afin de s’assurer que vous avez bien cliqué et que ce n’est pas un début de scroll ou autre interaction, les OS gérant le tactile ajoute une latence de 300ms.

Mais dans la cadre de page web standard, ça apporte généralement une frustration, une impression de latence, c’est désagréable.

Lire la suite »

LessCSS: mixins pour les images en retina

Avec l’émergence du retina, il devient vite fastidieux d’écrire son code css en dupliqué pour gérer les cas retina ou non.

Voici un petit helper en LessCss, qui va vous simplifier la tache.

  • Pour les écran normaux, l’image avec l’url passée sera utilisée en image de fond (background-image).
  • Pour les écran en rétina, le fichier alternatif dont le nom finira par @2x sera utilisé.

La condition de détection de hires peut évidemment s’appliquer à d’autres cas, bien que l’image de fond reste la plus courant.

LessCSS: les imports, options css, less et reference

Voici 3 implémentations less assez peu utilisées d’après ce que j’ai l’occasion de voir. Elles apportent pourtant clarté de code, simplifient la factorisation et améliorent les performances du code css généré (moins de code généré, donc moins lourd).

Comme en css, @import permet d’importer/include un autre fichier less. Mais il y a à ça quelques options bien pratiques :

Import: option « less »

@import (less) 'myfile.css';

L’option « less » vous permet de forcer l’interpretation de l’import comme si le fichier distant était en less, même s’il est en css. L’intérêt ? Au lieu de conserver l’import css standard occasionnant une requête http en plus et vous forçant à rendre le fichier css disponible au navigateur, le code du fichier importé sera inclus directement dans votre fichier css final généré à partir de votre less. Bref, gros gain en perspective.

Lire la suite »

$.browser et jQuery 1.9 : assurer la rétro compatibilité de votre code

A la release de jQuery 1.9, je n’ai pas fait attention mais la propriété $.browser a été supprimée (entre autres choses). C’est bien dommage, car certains de mes plugins en dépendaient fortement. Pour le coup, j’en ai réécrit la plupart. Néanmoins pour certains – par manque d’intérêt et un peu par flemme – j’ai utilisé une solution bien plus rapide : réimplémenter simplement la propriété manquante.

Il vous suffit d’ajouter le fichier javascript jQuery.browser.js (478) juste après jQuery.

Pour tous les autres changements de la version 1.9 de jQuery, rendez vous sur le site officiel.

Les typographies et fonts « web safe » pour les sites ayant du caractère

Pour les typographies sur le web, vous pouvez utiliser les typographies que vos visiteurs possèdent sur leur ordinateur, ou bien des polices de caractères que vous embarquez vous même via des services externes comme Google fonts et autre.

L’avantage des typos déjà existantes sur le poste client : aucun chargement additionnel (c’est déjà sur le poste). Les inconvéneits : en fonction de l’OS (windows, linux, mac…), vous ne les aurez pas forcément toutes.

Si néanmoins vous souhaitez faire appel à ces typographies et ne pas avoir recours à des services externes (par exemple pour des sites Intranet coupés du web extérieur, ou simplement pour des questions de rapidité / simplicité, ou bien encore si vous avez réussi à tuer votre designer), voici 6 familles de typographies qui sont considérées « web safe« . C’est à dire que ces typographies pourront être utilisées sans trop de risque et avoir un rendu assez similaire sur la majorité des OS et navigateurs récents.

Je vous les regroupe en 3 familles, pour vous simplifier la tache : sans-serif, serif et monospace.
Chaque famille comporte en dernier recours la typo qui pourra se trouver par défaut sur l’OS en question et qui correspondra à votre besoin.

Lire la suite »

Des CSS pour trouver les erreurs HTML en toute simplicité

Les CSS, ça sert pour de la mise en forme. Oui, mais ça peut aussi servir pour trouver les marqueurs HTML manquant, les éléments vides, ou le DOM Html déprécié.
Une façon simple pour le développeur d’identifier visuellement et très rapidement là où le code HTML n’est pas correct.

Trouver les élément HTML vides

Ceci affichera vos éléments div, span, li et p vide avec une bordure jaune poitillée.

div:empty, span:empty, li:empty, p:empty{ padding: 20px; border: 5px dotted yellow !important; }

Trouver les éléments sans attribut

Pour un bon référencement et une bonne accessibilité, il faut que vos images aient une balise alt non vide et un titre, tout comme vos liens doivent comporter un title et une destination. Ceci les mettra en évidence :

img[alt=""], a[title=""], img[title=""], a[href=""] { border: 5px solid yellow !important; }

Lire la suite »

13 optimisations du temps de chargement d’une page web à connaitre absolument

Le temps de chargement d’une page web est essentiel aussi bien sur un aspect ergonomique, qu’en terme de référencement.
Pour l’aspect ergonomique, parce que les internautes passent peu de temps sur chaque page web, et qu’au delà de 4 secondes, vous avez perdu 97% de vos visiteurs si la page n’est pas chargée.
Pour ce qui est du référencement, Google prend ce temps de chargement en compte(1) dans son algorithme de calcul depuis 2010 pour l’ordre d’affichage des résultats.

Je vous liste ici les points d’optimisation essentiels que devrait maîtriser tout développeur web. J’occulte volontairement l’optimisation sur la distribution des serveurs par réplication ou l’optimisation de la génération coté serveur propre au langage utilisé.

Lire la suite »

LessCSS pour la production avec node.js et npm

LessCSS est un framework simplifiant le travail au niveau CSS, en permettant l’utilisation de variables et fonctions grâce à une compilation javascript.
Très pratique, il fait gagner en lisibilité et en rapidité de développement.

Néanmoins, si pour le développement c’est un réel gain, en production ça l’est beaucoup moins : la feuille de style est interprétée en javascript à chaque affichage de page.

Je vous propose donc ici l’installation et l’utilisation d’un compilateur, permettant une fois vos développements achevés, de compiler vos fichiers less en un css unique, avec en bonus la compression pour un maximum de performances.

Lire la suite »

X