L’outil de la flemme ultime : convertir des pixels en pourcentage

Historiquement, ça s’est passé comme ça : sur un projet où nous travaillons / avons travaillé en étroite collaboration avec Kévin, a été décidé de passer des tableaux avec des width non plus en pixels mais en pourcentage. Ainsi, dès que le container de ce tableau change de taille, le tableau changera lui, ne changera pas de taille à proprement parler mais garder ses proportions qui découlent de l’utilisation du pourcentage. Ainsi, 47% d’un container de 600 pixels sera toujours 47% d’un container de 400 pixels.

Partant de là, je me suis pris 10 petites minutes pour faire cet outil là : une simple règle de trois pour les flemmards de mon genre. On met la valeur du container dans le premier input, la largeur du child (issue de la largeur en pixels du .psd que l’on intègre) et hop, valeur en %.

Mais j’ai voulu aller plus loin et me suis demandé les choses suivantes : Et s’il y a plusieurs childs, pourquoi ne pas faire un aperçu du container et desdits childs ? Pourquoi ne pas en profiter pour prendre un peu de niveau en JavaScript et particulièrement apprendre à utiliser la librairie jQuery ? Pourquoi ne pas me lancer dans un petit projet ? Pourquoi ne pas en profiter pour mettre un peu de cohérence dans mes projets avec notamment, l’utilisation de GitHub.com ? Pourquoi ne pas en profiter pour faire partager ce début d’apprentissage à n’importe qui avec du code sur-commenté ?

Est donc né ce fabuleux convertisseur de pixels en pourcentage avec un aperçu du container et de ses childs.

Convertir des pixels en pourcentage

Pour clone le projet sur GuitHub, c’est par ici que ça se passe. Si vous n’avez pas GitHub, et bien, tant pis.

Un outil qui vient de débuter, encore beaucoup de choses à venir, dont un vrai design, une vraie ergonomie, quelques autres features (notamment la place qui reste sur le container), de l’optimisation (beaucoup), des gifs animés, de la musique impossible à arrêté, du gros Rick Roll des familles et j’en passe !

Edit: « pourquoi jQuery », ai-je oublié de répondre dans cet article : parce que jQuery est facile d’utilisation, pour un premier pas dans ce domaine, j’ai trouvé que c’était le plus cohérent à utiliser. Egalement, c’est ce qu’on (Colorz) utilise comme librairie par défaut pour le dev front-end sur nos Magento, alors pourquoi pas ? J’ai trouvé que c’était deux bonnes raisons pour commencer par jQuery, puis m’orienter vers du javascript pur / Mootools une fois que j’aurai de solides connaissances avec jQuery. Voilà.