J’aime mon Koala!

koala

Qu’est-ce que Koala? C’est simplement une application GUI qui compile LESS, SASS, Compass et CoffeeScript afin d’aider les développeurs Web, comme moi, à utiliser ces technologies de façon plus efficace. Koala est disponible sous Windows, Linux et MacOS. En plus, il est gratuit. Des questions?

Pour vous le procurer, visitez le site koala-app et devenez plus efficaces avec votre développement Front-End!

Autres liens utiles:
– LESS : http://lesscss.org/
– SASS : http://sass-lang.com/
– Compass : http://compass-style.org/
– Coffescript : http://coffeescript.org/

PoEdit : ou comment j’ai arrêté de m’en faire et appris à aimer les traductions

Comme certains d’entre vous le savent déjà, je suis en train de construire mon propre thème. Je l’ai commencé petit à petit, faisant mes gaffes par-ci, par-là mais… ça avance mieux que je le souhaitais au départ. Suite à une petite recherche, au moment de commencer à faire les traductions de l’anglais au français, j’ai fait la découverte des types de fichiers qui permettent de faire la traduction dans les thèmes WordPress : les fichiers .mo (ou .po, ou encore .pot).

C’est un fait incontestable qu’avec les bons outils, ça va comme dans du beurre. Grâce à la grande communauté du Libre, j’ai été dirigé vers une solution solide et disponible sur pratiquement toutes les OS dignes de ce nom : le logiciel PoEdit. En effet, des fichiers exécutables sont disponibles pour Windows (XP, 7 et 8), ainsi que pour MacOSX. Étant un adepte de Ubuntu, je n’ai eu qu’à ouvrir ma console et entrer :

sudo apt-get install poedit

… et le tour était joué!

Pour la documentation sur cet outil indispensable pour tout développeur de thème sérieux, dirigez-vous vers leur site au http://poedit.net/ et bonne traduction!

Sublime Text 3 : Mon choix d’éditeur de texte

Comme vous le savez probablement déjà, je suis développeur front-end. J’ai, par le passé, essayé plusieurs éditeurs de texte. Je me confesse avoir utilisé Microsoft Frontpage pendant un très (trop) long moment. Ce dernier a laissé place à Dreamweaver pendant un temps mais c’est seulement depuis deux ans que je peux vraiment dire que j’ai trouvé MON éditeur préféré : j’ai nommé Sublime Text. Maintenant à sa troisième version, ce logiciel a su se démarquer notamment par sa simplicité d’adapatation, par l’efficacité de son interface utilisateur (UI) et par ses « pouvoirs cachés ». Là, je sais que j’ai piqué votre curiosité. Vous êtes en train de vous dire : « Mais de quoi il parle encore, c’te perdu-là… »

En plus d’offrir une vaste panoplie de thèmes out of the box, cet éditeur de texte vous permet d’installer Package Control, c’est-à-dire un gestionnaire de plugins qui se base sur Github pour choisir ses paquets. Pour installer Package Control, allez sur cette page, suivez les directives qui y sont expliquées (en anglais) et voilà! En à peine 30 secondes, vous avez un logiciel des plus efficaces pour un développeur Front-End.

Ces paquages vous permettrons, entre autres choses, de pouvoir choisir une couleur de syntaxe pour SASS, d’avoir un accès rapide au Codex de WordPress, d’auto-compléter vos balises HTML, et j’en passe. Des heures de plaisir et de temps sauvé.

Le logiciel est disponible en version d’essaie (néanmoins complète) indéfiniment : il vous demandera simplement à chaque 20 sauvegardes si vous désirez enregistrer le produit moyennant 70$. Il est compatible pour Windows, Mac OS et Linux Ubuntu.

Et vous, quel est votre éditeur de texte actuel? Pensiez-vous changer pour un autre que Sublime Text et si oui, lequel et pourquoi?

Liens vers le site de Sublime Text 3 : http://www.sublimetext.com/3

Comment rester à jour en tant que développeur Front-End

C’est une question qu’on s’est tous posé au moins une fois dans le métier. Il y a tellement d’idées, de philosophies et d’approches différentes que parfois, on s’y perd.

Ce soir, j’ai vu passer sur G+ (et oui, j’utilise ça, moi) un article vraiment intéressant qui va m’aider (et vous aider, chers lecteurs) à rester à jour dans mes connaissances. Le sujet : qui mènent le show et qu’est-ce qui est trendy en ce moment. En gros, l’article se sépare en 4 catégories :

  • Qui suivre sur les médias sociaux pour avoir de bons filons
  • Que sont les meilleures ressources pour nous aider
  • Quelles conférences valent le détour
  • Quelles pourraient être vos ressources personnelles (différentes et adaptées à chacun)

J’ai été ravi de faire cette découverte et je pense (j’espère) que ça vous interpellera également. Donnez-moi vos impressions dans la section commentaires!

Lien vers l’article (en anglais) : http://uptodate.frontendrescue.org/

Partagez votre contenu WordPress avec Simple Share Buttons

Depuis un petit moment, j’essaie de trouver le meilleur plugin de partage sur les médias sociaux disponible sur WordPress. Ce matin, entre deux bouchées de toast, j’ai trouvé celui-ci. Simple Share Buttons porte bien son nom. C’est facile à utiliser, ça partage le contenu de la page et c’est des boutons (dah).

Ce qui est vraiment intéressant de ce plugin est qu’il est gratuit, très flexible visuellement et offre quelques thèmes de boutons d’entrée de jeu. De plus, il offre l’option d’afficher ou pas le compteur de partages. Le tout, présenté sur une page de configuration ergonomique et esthétiquement réussie.

C’est un must have, selon moi. Et vous, quelles sont vos attentes face à ce type de plugins?

Site du projet: http://www.simplesharebuttons.com/
Repo sur WP.org : http://wordpress.org/plugins/simple-share-buttons-adder/

Font Awesome, pour des icônes efficaces!

Cette librairie ayant été créée avant tout pour Twitter Bootstrap, j’ai eu le plaisir de l’utiliser sur un site n’ayant pas ce boilerplate. C’est facile à gérer, léger et si joli!

En gros, Font Awesome, c’est de belles icônes faciles à placer sur votre site et qui donnera un petit genre eyecandy à vos menus et boutons.

L’essayer, c’est l’adopter!

Site web du projet : http://fontawesome.io/
Lien GitHub : https://github.com/FortAwesome/Font-Awesome

Retour à la planche à dessins

Bon… j’ai gaffé. Mon design de thème WordPress pour « Dry Mirage » n’était pas parfait. À vrai dire, le problème résidait dans la grille en tant que telle. J’ai commencé ce projet avec une grille de 16 colonnes, ce qui ne me laissait pas beaucoup de possibilités de mises en page. En somme, on joue avec les quarts et les huitièmes. Les tiers étant une option que je n’avais pas pris le temps d’évaluer comme il se devrait… Très très utilisés, les tiers. Pratiques aussi.

Bon… je retourne à la planche à dessin. Mais ce n’est pas plus mal. Le thème en sera juste meilleur.

Histoire à suivre!

PS : Je vais utiliser, entre autres choses, imagesloaded.js et masonry.js dans ce thème. Images à venir bientôt.

WordPress : Ultimate Coming Soon Page

Les plugins pour WordPress sont extrêmement variés. Il arrive parfois qu’un plugin qu’on utilise habituellement ne fonctionne pas sur un projet donné. Par exemple, le plugin underConstruction que j’ai l’habitude d’utiliser sur mes sites lors de leur création m’a fait faux-bond lorsque j’ai commencé mon premier projet WordPress MU (multisites). Quand
je me suis rendu compte que ce plugin ne fonctionnait pas du tout, j’ai fouillé et j’ai trouvé ce petit bijou : Ultimate Coming Soon Page. En plus d’être disponible en français dès son installation, il fait exactement tout ce que j’ai besoin en plus de me proposer une version PRO qui, pour sa part, m’offre plus d’options que j’aurais pu espérer.

Voici un lien vers le site du plugin : http://wordpress.org/plugins/ultimate-coming-soon-page/

Bon développement!

Convertir ses données CSS en SASS

Afin de vous sauver du temps (eh oui! Je suis fin de même, bienvenue), j’ai trouvé sur le web un site qui refait votre vieux code CSS en SASS, ce qui peut vous faire sauver un temps considérable. Si, comme moi, vous êtes soucieux de la propreté de votre code, vous allez capoter ben raide! http://css2sass.heroku.com/

Si vous faites du CSS et que vous ne connaisez pas encore SASS, je vous invite fortement à y jeter un oeil dès maintenant, ça va changer votre vie. http://sass-lang.com/

Comment empêcher votre iPhone de redimmentioner vos fontes.

La semaine dernière, je travaillais sur le site mobile d’un client et je commençais à légèrement m’arracher les cheveux de sur la tête pour une question de fontes qui grossissait dans un caroussel à taille fixe. Pour faire court, le texte grossissait assez pour sortir de l’écran mais seulement sur iPhone et, encore plus bizarre, seulement quand je faisais faire une rotation à l’écran. En plus, ça créait le bug après quelques changements de panneaux dans mon caroussel et surtout, lorsque je mettais mon CSS en mode !important.

J’en ai parlé avec mon grand chum Google et il m’a fait partager sa grande sagesse et son savoir sans limite. Il m’a dit : « Dave, mon homme, déjà, calmes-toi, t’as l’air d’une contrebasse avec les nerfs sortis dans l’cou d’même. En plus d’être laite, c’est pas bon pour ton coeur. » Ensuite, il m’a donné ce bout de code en CSS que l’on peut placer localement sur l’élément problématique ou encore sur l’entièreté du <body> pour avoir un effet mur à mur, une gracieuseté de Chris Coyier, du site http://css-tricks.com/

-webkit-text-size-adjust: none;

Et bam! Magie! Fini les problèmes de redimmentions de textes. Vous avez déjà eu affaire à ce type de bug? Faites-moi part de votre expérience!