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. (suite…)
-
Astuce Sass : imbrication de propriétés composites
-
Créer son framework PHP Objet
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. (suite…)
-
Une présentation vidéo en HTML, CSS et JS
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. (suite…)
-
Définir une grille de mise en page avec Sass
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 : (suite…)
-
Ajuster
text-coloren fonction debackgroundavec SassDans 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 moistrois 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 … (suite…)
-
Faire un
str_replace()avec MySQLLorsque 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 unpreg_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.
Bookmarked Parsley – The ultimate JavaScript form validation library by .
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
Bookmarked Glyphs | CSS-Tricks by .
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ô !