Quoi de plus simple que de nettoyer une chaîne de caractères pour l’utiliser comme URL vers une page, un article ou tout autre contenu publié sur Internet en général ? Et pourtant…
Bien que très simple à mettre en place dans les faits, quand vient l’heure de nettoyer une chaîne de caractères pleine d’accents, de signes de ponctuation et autres caractères spéciaux, c’est la galère. Lire la suite
List.js est une petite libraire Javascript qui permet d’ajouter très rapidement et simplement des fonctionnalités de tri, de filtrage et de recherche à une liste HTML existante, sans en altérer le code.
Voilà comment la librairie fonctionne :
<div id="users">
<input class="search" placeholder="Search" />
<button class="sort" data-sort="name">
Sort by name
</button>
<ul class="list">
<li>
<h3 class="name">Jonny Stromberg</h3>
<p class="born">1986</p>
</li>
<li>
<h3 class="name">Jonas Arnklint</h3>
<p class="born">1985</p>
</li>
<li>
<h3 class="name">Martina Elm</h3>
<p class="born">1986</p>
</li>
<li>
<h3 class="name">Gustaf Lindqvist</h3>
<p class="born">1983</p>
</li>
</ul>
</div>
<script src="http://listjs.com/no-cdn/list.js"></script>
Ensuite un simple appel à la fonction List() et le tour est joué
var options = {
valueNames: [ 'name', 'born' ]
};
var userList = new List('users', options);
Ces dernières semaines, j’ai essentiellement travaillé sur la conception d’un cookie/pixel de suivi et le traitement des informations récupérées, pour en faire des tableaux statistiques et autres graphiques de fréquentation par la suite. Je vous parlerai peut-être de mon expérience avec la librairie JavaScript C3.js dans un prochain article.
L’intérêt d’un tel dispositif est de pouvoir « tracker » ce qu’un visiteur fait lorsqu’il parcours votre site Web, ou encore de savoir si une campagne emailing a bien été ouverte. Lire la suite
A bold navigation that slides in when active, replacing the current content in a 3D space.
Les éléments de navigation sont essentiels lorsqu’on conçoit un site Internet, que ce soit pour la navigation entre les différentes pages d’un site, ou simplement se déplacer vers différentes sections d’une même page. Claudia Romano propose un concept de navigation responsive simple mais avec beaucoup de caractère. Idéal pour la navigation d’un site type portfolio.
Cette semaine je lisais Sass pour les Web designers, de Dan Cederholm et j’ai découvert une petite astuce que je ne connaissait pas : l’imbrication de propriétés composites. Lire la suite
Pour faire suite à un article que j’avais écrit il y a un peu plus de quatre ans maintenant sur la création d’un framework PHP, je vous propose de créer un framework PHP Objet en utilisant les principes MVC. Lire la suite
Il y a déjà quelques mois, j’ai eu la tâche de trouver un moyen de présenter différent aspects d’une application que mes collègues et moi développons chez Ibakus Europe.
L’idée était de faire une sorte de présentation vidéo expliquant les différents menus de l’application et que l’on puisse « naviguer » dans celle-ci, un peu comme une sorte de PowerPoint vidéo. Lire la suite
Dans mon précédent article, je parlais de mon expérience des pré-procésseurs CSS, et l’une des choses bêtes que Sass/Compass m’a permis de faire facilement et en quelques lignes a été de définir ma grille de mise en page.
Ma grille de mise en page consistait en six colonnes et des gouttières de 20 pixels entre chaque et un conteneur de 1000 pixels de large. Afin de toujours me laisser le choix de partir sur un nombre de colonne différent, la largeur de colonne est calculée en fonction des autres variables. Voici ce que ça donne : Lire la suite
text-color en fonction de background avec SassDesigners often choose the text color of an element based on the background color. If the background is dark, light text is chosen. If the background is light, they use dark text. This is because light and dark contrast well with each other and make text easier to read. So how can we use Sass to choose the appropriate text color for a background?
Dans un article de The Sass Way, Sebastian Ekström nous montre comment, avec Sass, garantir la meilleure lisibilité possible à vos textes pour une couleur de fond donnée.
Pour cela, il écrit une fonction Sass qui retournera une couleur différente en fonction de la couleur qui lui sera passée en paramètre. Cette fonction vérifie tout simplement le taux de luminosité de la couleur qu’elle reçoit et retourne une couleur contrastée en conséquence. Si sa luminosité est supérieure à 50%, la fonction retournera une couleur sombre, sinon une couleur claire.
Lisez son article sur The Sass Way, pour voir comment il fait ça. Sa solution est toute simple mais efficace.
Il y a déjà plusieurs mois trois ans (trois ans !!), j’avais écris un billet d’humeur à propos tout le foin que l’on faisait sur les pré-processeurs CSS et leur utilisation que je trouvais abusive.
À l’époque je n’avais testé que LESS, que je trouvais beaucoup plus accessible, moins compliqué à mettre en place en fait. J’avais aussi acheté le bouquin de Kaelig, CSS maintenables, que je n’ai d’ailleurs toujours pas commencé, trop occupé à lire Cinquantes nuances de Grey et autres Walking Dead … Lire la suite