Les outils pour développeurs web

Standard

Outils
Coder c’est bien, mais coder plus vite c’est encore mieux. Il existe des tâches rébarbatives dont on se passerait volontiers et auxquelles on aimerait consacrer moins de temps. De même, il existe des outils qui nous permettent d’optimiser nos performances ou nos manières de travailler toujours dans une logique de produire un travail de haute qualité, optimisé et propre sur un plan technique, le plus rapidement possible.

Dans cet article je vais vous présenter divers outils que j’utilise pour travailler et qui me sont bien utiles au quotidien. J’espère qu’ils le seront pour vous aussi et qu’ils vous permettront d’accroître votre productivité ou simplement de vous faciliter la vie.

Optimiser votre site

La recherche de performance doit être constante : toujours plus rapide à charger, toujours moins de requêtes HTTP à exécuter, toujours moins d’espace disque utilisé… C’est la somme de toutes ces petites choses qui fera de votre site un monstre sur un plan technique.

  • CSS Sprites

Outils
Si vous ne connaissez pas encore cette technique, je vous renvoie à cet excellent tutoriel d’Alsacreations qui vous détaillera ce que sont les CSS Sprites et comment s’en sert t’on.

Le principe général consiste à créer une grande image regroupant plusieurs petites images (des icônes, ou des images qui possèdent une image normale et une image pour le hover par exemple !) et de les afficher en jouant sur la propriété background-position en CSS.

Le site csssprites.com fait presque tout le travail à notre place. Il suffit de lui fournir toutes les images que l’on souhaite mettre dans notre Sprite et le site se charge de “fusionner” toutes ces images en une seule et de générer le CSS qui va de paire.

  • smush.it

Toujours pour les images, smush.it permet de réduire le poids des images sans altérer leur qualité. Une image avec un poids plus faible permet de charger plus rapidement la page, ce qui est très important si votre site comporte de nombreuses images par exemple. punypng.com propose les mêmes services que smush.it.

Si vous créez vos images vous même, pensez bien à choisir “Enregistrer pour le web”. Vous pouvez également réduire le poids d’une image en PNG en la convertissant en JPG, en ouvrant ce JPG et en l’enregistrant à nouveau en PNG.

Merci à @mygbb pour cette astuce.

  • Clean CSS

Votre code CSS n’est jamais très clair ? Vous ne savez pas comment l’organiser ? Il n’est jamais optimisé ? Le site cleancss.com fait le travail à votre place en organisant votre code CSS et en l’optimisant, ainsi, vous aurez une feuille de style rapide à charger et plus facile à modifier par la suite.

Je vous conseille de choisir l’option “Très compact” de compression et je vous laisse cocher ce qui vous convient pour la suite des options. Attention aux propriétés CSS 3 que cleancss ne reconnait pas toujours ! N’hésitez pas à les inclure après la compression par le site.

  • Javascript Compressor

Dans la même logique que Clean CSS, Javascript Compressor compresse votre code JavaScript, de quoi gagner encore un peu de temps au chargement.

Des outils pour vous faciliter la vie

  • Border Radius

Border Radius est selon moi la propriété CSS3 la plus intéressante et la plus utile pour nous autres, développeurs. Créer des bordures arrondies avec seulement quelques lignes de code, quel rêve ! Néanmoins le rêve tourne au cauchemar quand on veut utiliser ces bordures arrondies uniquement sur certains coins. La preuve en code :

/* Utilisation classique aux 4 coins */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

/* Utilisation uniquement sur les coins inférieurs */
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;

Ça se complique hein ? Heureusement border-radius.com se charge de générer le code pour nous : il suffit de rentrer les valeurs désirées en pixels aux 4 coins de la bordure et le site nous montre la forme obtenue et le code nécessaire pour réaliser ceci. Facile, n’est ce pas ?

  • Text Shadow

Comme border-radius, text-shadow est une propriété CSS3. Elle permet de rajouter de l’ombre interne ou externe sur un texte ce qui donne un effet sympathique, sans avoir besoin de créer une image pour un texte ! Encore une facilité pour les développeurs webs ! William Agay (@william_agay) propose un outil pour tester cette propriété en ligne et observer les variations quand on change des valeurs : www.css3dev.williamagay.fr

  • Tabifier

Un code bien indenté est un code beaucoup plus lisible et donc beaucoup plus facile et rapide à modifier. Même si chacun s’efforce de bien indenter son propre code, il est parfois utile de faire appel à de petits utilitaires qui le font à notre place (et qui eux le font bien !).

Tabifier fonctionne avec le HTML, le CSS et le C (dommage pour le PHP !), il vous faudra néanmoins que votre code soit valide car Tabifier se contente d’indenter votre code, et non de le corriger (ce qui est déjà pas mal) !

  • Code couleur

code-couleur.com est un site mettant à votre disposition une palette qui permet d’obtenir le code HTML d’une couleur et d’un autre outil qui vous permet d’obtenir l’aperçu d’une couleur à partir d’un code HTML.

Sont également présentes sur le site diverses palettes de couleurs qui vous seront bien utiles lors d’une recherche de tons pour votre site !

Youtube lance son nouveau design : Cosmic Panda

Standard

Cosmic PandaYoutube vient de dévoiler un tout nouveau design expérimental sous le nom de code de Cosmic Panda. Derrière ce nom se cache un design beaucoup plus propre, sombre et épuré qui suit l’impulsion donnée par la sortie de Google + dans la refonte graphique des produits Google (moteur de recherche, Gmail, Google Calendar…).

Parmi les nouveautés on retiendra un lecteur plus sombre et un design plus travaillé avec un fond d’écran plus foncé qui met bien en valeur la vidéo même sans être en plein écran, les playlists sont présentées avec une barre horizontale de défilement très claire et intuitive juste sous la vidéo que vous regardez. Les pages des chaînes sont aussi plus jolies avec des images plus grandes et plus claires.

La refonte graphique s’accompagne également d’une interface plus facile à utiliser et plus agréable à naviguer avec l’utilisation de la technologie AJAX, rendant fluide les déplacements entre les vidéos, les chaines et les playlists pour l’utilisateur.

A noter sur le lecteur que vous avez maintenant 4 tailles de vidéo différentes ce qui est plutôt sympatique quand on veut regarder une vidéo en grand mais sans pour autant passer au plein écran. Les commentaires restent en dessous de la vidéo, les avatars des utilisateurs sont désormais affichés et les suggestions de vidéos passent désormais à droite. Une remise au gout du jour nécessaire pour le site de streaming le plus utilisé au monde qui possédait encore un design qui se faisait vieillissant il y a peu !

Je vous invite à le tester par vous même juste ici. Ne vous en faites pas si vous n’aimez pas vous pouvez revenir à l’ancienne interface à tout moment en revenant sur la même page.

Facebook dévoile le chat vidéo et le chat en groupe

Standard


Alors que Mark Zuckerberg vient d’annoncer que Facebook vient de dépasser les 750 millions d’utilisateur et que la sortie récente de Google + a beaucoup remis en question Facebook, le plus célèbre des réseaux sociaux a dévoilé ce mercredi 2 nouveautés annoncées depuis longtemps : le chat vidéo avec Skype et le chat en groupe.

Le chat vidéo

“Il y a quelques mois, nous avons commencé à travailler avec Skype pour incorporer le chat vidéo à Facebook” a annoncé Facebook sur son blog “Nous l’avons mis en place directement dans le chat, de cette façon toutes les conversations se déroulent ici. Pour appeler un ami, vous devez juster cliquer sur le bouton d’appel en haut de votre fenêtre de chat.”

Pour profiter de ce nouvel outil, vous devez vous rendre à l’adresse https://www.facebook.com/videocalling où vous devrez télécharger un petit plugin pour pouvoir profiter des appels vidéos dans Facebook. Cette petite mise à jour modifiera légèrement votre interface de chat, il vous faudra surement un petit peu de temps pour vous y habituer !

En instaurant cette fonctionnalité, Facebook espère attirer des utilisateurs qui ont besoin de voir leurs interlocuteurs (généralement de la famille ou des amis, qui habitent loin !). On imagine aisément alors la joie de la grand mère qui peut voir sa petite fille directement sur Facebook !

Le chat en groupe


Le chat en groupe, déjà présent dans les groupes Facebook, n’était pas encore disponible comme il peut l’être par exemple sur MSN où l’on peut facilement inviter un ami connecté à prendre part à une conversation.

Avec cette mise à jour, cette fonctionnalité très demandée par les utilisateurs, est désormais disponible et l’on peut ajouter des amis à une conversation directement depuis la fenêtre de chat.

What’s next ?

Avec ces ajouts réguliers, on est en droit de demander quelles seront les nouveautés à venir dans les prochains mois chez Facebook. On peut penser à un nouveau système de News Feed que teste actuellement Facebook ou à des reprises de fonctions de son aspirant concurrent, Google +.

Retrouvez mes codes source sur GitHub

Standard


Il peut être parfois intéressant de jeter un coup d’oeil au code source d’autres développeurs afin de découvrir de nouvelles fonctionnalités, des logiques d’organisation, de nouvelles méthodes ou juste pour la curiosité, savoir “comment fonctionne” ce projet.

C’est pourquoi je mets à votre disposition mon GitHub où vous pourrez retrouver l’intégralité du code source de mes projets. N’hésitez donc pas à jeter un oeil, à fouiner où l’envie vous chante et surtout de me poser des questions si vous ne comprenez pas quelque chose ! C’est toujours un plaisir d’échanger avec d’autres développeurs et de s’enrichir mutuellement.

J’essaie de mettre à jour assez régulièrement les projets sur lesquels je travaille actuellement (en particulier Teen Quotes, P-W.fr et ClockFace) en faisant des push tous les 2 jours environ. Si vous êtes intéressés par d’autres code source qui ne sont pas disponibles sur mon GitHub, n’hésitez pas à me contacter.