Ajuster text-color en fonction de background avec Sass

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.

Pré-processeur CSS : nos feuilles de styles faciles

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 DeadContinuer la lecture de Pré-processeur CSS : nos feuilles de styles faciles

Faire un str_replace() avec MySQL

Lorsque je conçois les sites Web de nos clients, une fois mon travail terminé, je le met en ligne sur un domaine temporaire afin que le client puisse voir, utiliser et surtout alimenter le site Web en contenu avant de l’installer sur son domaine définitif.

Une fois le client satisfait, il nous donne le « Go » pour la mise en ligne, nous transférons alors les fichiers et la base de données sur le domaine final. Parfois, les URLs générées dans le contenu des pages sont erronées suite au transfert sur le domaine définitif, et bien entendu les liens foirent… En PHP, on pourrait faire un bête str_replace(), ou un preg_match_all(). Mais en MySQL ? C’est là que la requête qui suit va nous sauver :

UPDATE pages SET contenu = REPLACE(contenu, 'http://ancienne.url', 'http://nouvelle.url') WHERE contenu LIKE '%ancienne.url%';

C’est bidon, mais j’ai toujours du mal à m’en souvenir. Le publier ici me permettra de retrouver ça facilement. Après tout, ce blog est avant tout pour moi et si ça peut aider quelqu’un d’autre… 🙂

Je n’utilise plus de framework CSS

Il y a maintenant presque 3 ans, j’entrais dans la vie active, j’avais un peu « d’expérience » en intégration HTML/CSS et pour gagner du temps j’utilisais le fameux framework CSS 960.gs. Pourquoi était-ce une mauvaise idée ?

Utiliser un framework ne fait absolument pas gagner de temps. En tout cas, de mon point de vue. J’ai passé beaucoup trop de temps à me battre avec les classes prédéfinies lorsque mes designs ne « rentraient » pas dans le moule des 960 pixels.

Franchement, j’ai été con de ne pas avoir le déclic plus tôt. D’autant qu’on commençait à parler de Responsive Web Design à l’époque, j’aurai du voir venir le truc.

C’est vrai, je ne suis pas encore trop rodé en RWD, mais quitter ce framework a fait le plus grand bien à mes CSS, surtout après être tombé sur la grille de mise en page d’Elliot Jay Stocks. Depuis, j’ai adapté sa dizaine de lignes à ma façon de travailler. Je m’autorise même parfois à ne pas du tout utiliser de grille de mise en page.

En tout cas, ces 12 derniers mois m’ont permis de m’améliorer en CSS.

Parsley.js – Validez vos formulaires en JavaScript. Simplement.

Je faisais ma veille tranquillement ce matin, quand je suis tombé sur Parsley.js, totalement par hasard. Parsely.js est un petit plugin JavaScript qui permet de laisser un peu de côté ce qu’on adore détester : la validation de formulaire côté client. L’intérêt du plugin réside dans le fait qu’il ne nécessite aucune ligne de JavaScript, tout se passe au sein du code HTML5 grâce à l’attribut data-*. Enjoy !

Instafeed – vos photos Instagram. Partout

Aujourd’hui, je suis tombé sur Instafeed.js, un plugin JavaScript permettant d’afficher des flux de photos Instagram n’importe où.

L’intérêt de ce plugin réside dans le fait que l’on peu récupérer des flux de photos selon un tag particulier, un lieu, un utilisateur ou simplement les photos les plus populaires.

Du coup, je me suis empressé de le mettre en place ici sur mon blog.

Glyphs HTML

Cela fait un bout de temps que j’ai ce petit lien dans mes cartons : une ressource qui répertorie les différentes façon d’écrire un caractère spécial au format ISO pour l’inclure dans nos CSS et notamment  avec la propriété content, mais aussi en hexadécimal, etc. Une ressource incontournable donc. Merci Chris Coyier.

Le changement, c’est maintenant. Ou pas.

Lorsque j’ai acheté le domaine chierchia.fr pour y transférer le blog il y a trois mois, je m’étais dit que ça serait une bonne occasion de repartir à zéro et d’écrire plus. Pas forcement des billets longs ou même très techniques, mais toujours en suivant un peu l’actualité, les nouveautés du Web. Faire ma veille, quoi.

Le fait est que ces trois derniers mois, j’ai pour ainsi dire étais totalement déconnecté. Entre l’emménagement dans mon nouvel appartement (et tout ce que cela implique : peintures, tapisseries, pas de connexion Internet, etc.), un projet qui a pris une énorme partie de mon temps au boulot ces derniers mois, quelques histoires de coeur compliquées  et un ras-le-bol général qui dure déjà depuis quelques mois, j’ai eu très peu de moments à consacrer à ma veille Web et mon blog (sur lequel il reste finalement pas mal de travail à faire…).

En 2012, j’avais dans l’idée de proposer des templates HTML5/CSS3 gratuits. C’était en février dernier. Je n’en ai fait qu’un seul, que je n’ai même pas distribué… Pour 2013, je ne ferai donc aucune promesse. Vous ne verrez pas ces templates gratuits disponibles en téléchargement cette année. Je n’écrirai pas un billet par semaine sur ce blog. Je ne me marierai pas avec Olivia Wilde. Sauf si un miracle survient.

Malgré ça, je vous souhaite une belle première année après la fin du monde.

Oui, il parait qu’on peut souhaiter la bonne année tout le mois de janvier. Ce que je trouve vraiment con, au passage.

Tchô !

Migration vers GitHub ?

Ayant récemment changé de domaine et l’architecture de mes URLs, il y a encore pas mal de soucis, notamment les images qui ne s’affichent plus, les liens morts vers les démos des tutos… Bref, encore pas mal de boulot avant que la migration vers chierchia.fr soit totale. Et puis je me disais que peut-être serait-il temps de me mettre à GitHub et autres outils de « social coding », genre CodePen, JSFiddle, etc. Et puis, en cas de nouvelle migration/changement d’URLs, ceux-ci ne seraient pas impacté au final.

Les boutons de login sociaux, on en parle ?

Avant-hier je suis tombé sur un article d’Aarron Walter sur le blog de MailChimp expliquant comment ils avaient réussi à réduire significativement le taux d’échec  lors de la connexion de leurs utilisateurs. Aaron explique que même en ayant ajouté des boutons de connexion via Twitter et Facebook, le taux d’échec à la connexion n’avait pas vraiment bougé. C’est lorsqu’ils ont retravaillé leur messages d’erreurs (mauvais login/mauvais mot de passe) qu’il on vu une nette amélioration.

Il conclu en nous disant, en gros, qu’intégrer des boutons de connexion social c’est un peu le mal, parce que le service que l’on propose à nos utilisateurs et finalement dépendant de Facebook ou Twitter et que le mieux est de fournir un formulaire de connexion maison en béton. Continuer la lecture de Les boutons de login sociaux, on en parle ?