Les bonnes adresses web pour les développeurs

dynamic code

Lors de ma veille je croise régulièrement des outils en ligne utiles et ingénieux, qui permettent de gagner du temps sur des petites tâches quotidiennes. En plus de les conserver précieusement, j’ai décidé de les partager avec vous, pour faire profiter au plus grand nombre de ces outils pratiques. N’hésitez pas à partager les vôtres en commentaires si vous en connaissez ou en avez développé.

Découvrez également les bonnes adresses web pour les graphistes !

À venir prochainement : les bonnes adresses pour les SEO

Les outils en ligne

Quirktools

Quirktools propose différentes choses : l’outil Smaps qui permet de créer des arborescences, Wires pour faire du wireframing, Screenfly pour tester le responsive design sur différents formats, et Retro qui permet de connaître les spécificités de son affichage (résolution, navigateur, etc.). > quirktools.com

Button Optimizer

Grâce à un éditeur WYSIWYG, générez des boutons en quelques clics. Vous pouvez ensuite récupérer le bouton au format .png ainsi qu’en CSS. > buttonoptimizer.com

CSS3 please

Avec CSS3 Please, testez en temps réel sur le site les effets du CSS, plus rapide que F5 ! > css3please.com

Random Color

Ce script JS permet de générer des couleurs aléatoires sur les éléments d’un site, grâce à la fonction randomColor(). Bien sûr on peut y ajouter des paramètres de filtres pour n’avoir qu’une gamme de couleurs par exemple. > llllll.li/randomColor

randomcolor

Nth-test

Si les effets des sélecteurs CSS de type nth-child et nth-of-type peuvent paraître obscurs, grâce à cet outil vous pourrez visualiser en temps réel à quels éléments s’appliquera votre règle. > nth-test.com

Wave

L’outil idéal pour tester le niveau d’accessibilité d’un site web. L’outil signale toutes les erreurs et les avertissements par des couleurs et pictogrammes très compréhensibles, on y trouve de nombreuses explications directement sur l’aperçu de votre site web. Un must have dans vos favoris ! > wave.webaim.org

Les guides pratiques

Les expressions régulières

Véritable bête noire de nombreux développeurs, les expressions régulières sont pourtant très puissantes lorsqu’elles sont maîtrisées. Cet article nous rappelle les caractères principaux et leur signification. > www.canyouseome.com/guide-regex

Dois-je utiliser ?

Présentation de pratiques courantes utilisées sur le web (scroll infini, carrousel d’images, etc.) et une mise en situation accompagnée d’un explicatif original sur l’utilisation ou non de ces techniques souvent peu ergonomiques. > www.doisjeutiliser.fr

doisjeutiliser

Should I prefix

Bien souvent, pour des problèmes de compatibilité entre les navigateurs, on fait appel à des préfixes CSS qui règlent nos soucis. Seulement il n’est pas toujours facile de se rappeler quel préfixe s’utilise avec quelle règle. Ce site les a tous récapitulés. > shouldiprefix.com

CSS Reference

Ce site liste toutes les propriétés CSS existantes par ordre alphabétique. > ref.openweb.io/CSS

HTML5 please

Dans quel mesure peut-on utiliser le HTML5 sur des éléments tels que les balises, les propriétés CSS, etc. avec de nombreuses explications. > html5please.com

Character Code

Plus attrayant qu’une simple liste dans un tableau HTML, ce site nous présente les caractères spéciaux et le code HTML pour les reproduire. > character-code.com

charactercode

The ultimate guide to CSS

Ce guide du CSS pour l’e-mailing nous présente, sous forme de tableau, de nombreuses propriétés CSS ainsi que leur degré de compatibilité en fonction des webmails. > www.campaignmonitor.com/css

Can I use ?

Encore un tableau de compatibilité mais qui concerne cette fois-ci les navigateurs web ! Il présente de nombreux éléments HTML, CSS, SVG et bien d’autres, pour lesquels la compatibilité est souvent douteuse. > caniuse.com

JSDB

Si les bibliothèques sont très utiles en développement, trouver la bonne n’est pas toujours aisé. Oubliez ces désagréments grâce à ce site qui est en fait… une bibliothèque de bibliothèques Javascript ! > www.jsdb.io

Les sites originaux

Magic of CSS

Je tenais à présenter ce site un peu hors catégorie puisqu’il présente le CSS de façon très claire, avec des mises en situations, des images et des schémas simples à comprendre, et même de l’interactivité ! Un site que je recommande vivement aux débutants en CSS ! > adamschwartz.co/magic-of-css

Unheap

Avec sa présentation originale, Unheap présente des plugins javascript, avec possibilité de les filtrer par type (éléments de navigation, UI, médias…). > www.unheap.com

Les jeux

C’est bien connu, on apprend mieux en s’amusant. Quoi de mieux alors pour apprendre certains langages que d’en faire des jeux en ligne ? Découvrez une sélection d’adresses de jeux originaux et bien pensés pour apprendre le développement.

CSS Diner

Ce site permet d’apprendre à utiliser les sélecteurs CSS de façon ludique : a chaque niveau, des assiettes représentées de façon animée, pour lesquelles on dispose du code HTML. Il faudra alors taper le bon sélecteur CSS pour ne sélectionner que les éléments qui bougent sur l’animation. > flukeout.github.io

css-diner

Dungeons and developers

Cet arbre de talent reprend les codes graphiques des arbres du célèbre MMORPG Word of Warcraft, en y incluant des compétences liées au déveoppement. Quelles compétences avez-vous débloqué ? > www.dungeonsanddevelopers.com

Code Combat

Ce jeu en ligne prend la forme d’un véritable jeu de rôle, dans lequel toutes les actions effectuées doivent être codées en javascript, il faut par exemple appeler des fonctions pour les déplacements ou encore lancer des sorts. > codecombat.com

codecombat

Code hunt

Ce jeu permet d’apprendre le JAVA ou C# à travers un jeu de chasse au trésor, où on découvre des fragments de code que l’on doit capturer en résolvant les énigmes posées. Par exemple, il faut écrire la bonne boucle pour faire une suite de nombre proposés. > www.codehunt.com

Code spells

Ce jeu actuellement en développement semble beaucoup plus poussé que les autres et plutôt prometteur, il permet d’apprendre la programmation en développant des sorts magiques pour que votre personnage les lance en jeu.  > codespells.org

© makaule – Fotolia.com

3 commentaires sur “Les bonnes adresses web pour les développeurs

  1. Merci beaucoup pour ton article, vraiment très cool (la section jeux est ludique et intuitive c’est vraiment sympa) !

    J’attend avec impatience(beaucoup) « les bonnes adresses pour le SEO » ! ^^

  2. Pingback: Les bonnes adresses web pour les graphistes

Commenter

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This site uses KeywordLuv. Enter YourName@YourKeywords in the Name field to take advantage.