480×320, 1024×768 et 1280×720. Ah ah, comme je suis drôle. Cette blague est tellement vieille qu’à l’époque on rêvait avec du 640×480 sur des gros CRT 12″.
Bref, c’est à nouveau ce moment de l’année. Plutôt que de vous parler de statistiques de navigateurs et de vous rappeler à quel point c’est une époque extraordinaire pour être développeur web, j’ai envie de partager avec vous mes trois résolutions d’intégrateur pour l’année 2013.
- Ne plus utiliser jQuery. jQuery fait typiquement partie de ces bonnes pratiques d’hier devenues des mauvaises pratiques aujourd’hui. jQuery a été créé en 2006 pour faciliter le parcours du DOM, faire des requêtes asynchrones et faire des animations, le tout avec une même syntaxe pour différents navigateurs. Sept ans plus tard, les problématiques sont radicalement différentes. Et à l’heure des sites mobiles et du responsive design, ce n’est vraiment plus acceptable d’inclure une bibliothèque JavaScript de 80 Ko. Si je veux parcourir le DOM ou faire des requêtes asynchrones, j’utiliserais du JavaScript vanilla. Si je veux faire des animations, j’utiliserais CSS.
- Utiliser les préfixes correctement. L’année dernière, la mauvaise utilisation et la mauvaise implémentation des préfixes navigateurs avaient fait beaucoup de bruit. Si des efforts ont été faits du côté des navigateurs et du W3C pour accélérer les processus de standardisation et rapidement abandonner les propriétés préfixées en Recommandation Candidate, j’ai le sentiment qu’il y a encore du travail à faire chez nous, les intégrateurs. En particulier, il est important de garder en tête que les propriétés CSS préfixées restent des propriétés expérimentales. En utilisant des propriétés CSS préfixées, vous signez un contrat implicite avec les visiteurs de votre site vous engageant à garantir une bonne utilisation de ces préfixes, et ce au cours du temps. Si la base consiste à utiliser les préfixes de l’ensemble des moteurs de rendu (-o-, -webkit-, -moz-, -ms, etc.), il est aussi indispensable de laisser tomber ces préfixes dès que possible. C’est déjà le cas par exemple pour les propriétés border-radius et box-shadow. Mais c’est aussi le cas de pleins d’autres propriétés (transform, transition, animation, etc.) depuis Firefox 16, Opera 12.5, IE10 et prochainement Chrome. A moins de devoir supporter des vieilleries comme Firefox 3.6 ou Safari 4, vous pouvez commencer à faire un petit ménage dans vos préfixes. En 2013, correctement utiliser les préfixes navigateurs signifie d’également s’occuper de leur suppression dès qu’ils ne sont plus nécessaires.
- Écrire et partager. J’ai lancé ce blog en juillet 2010, mais je me suis vraiment mis à écrire régulièrement à partir d’octobre 2011. En 2012, j’ai écrit 164 articles (contre 108 en 2011 et 17 en 2010). Je n’ai vraiment aucune prétention avec ce blog. Mais ceci est mon blog personnel, et c’est vraiment chouette d’avoir un espace personnel où s’exprimer librement. C’est vraiment très formateur, que ce soit dans la simple gestion d’un site personnel, mais aussi dans l’écriture, la formalisation de mes idées, et la prise de recul sur mon métier.
En 2013, je souhaite continuer à partager mes découvertes, mes anecdotes et mes sautes d’humeur. Mais surtout, j’espère que vous en ferez autant.
On a la chance d’avoir une communauté web francophone assez grande. Malheureusement, celle-ci n’est pas toujours très active. On a de chouettes sites comme Le Train de 13h37, Openweb, Webdesign Friday, Les Intégristes ou encore des blogs personnels que j’aime beaucoup comme ceux de Nicolas Hoffmann, Raphaël Goetter ou Kaelig (qui malheureusement se met à écrire en anglais). Mais ces lectures francophones restent anecdotiques par rapport à la masse d’articles anglophones intéressants mis en avant chaque jour sur Reddit ou Hacker News. En décembre, j’ai lancé 24 jours de web dans le but de rassembler un peu cette communauté web francophone, et ça a plutôt bien marché. J’espère lire plus d’articles en français cette année.
Comme toutes résolutions, je vais peut-être craquer et il y aura sans doute des exceptions. Mais j’espère que celles-ci pourront vous inspirer à définir vos propres résolutions de concepteurs web, et qui sait, peut-être les partager sur votre propre blog. (Vous voyez ce que je viens de faire ?)
manu, le
http://vanilla-js.com/ ? ça à l’air bien ça et … ah je viens de comprendre. :D
Bartdude, le
Pour le point 2, je suis étonné que tu ne mentionnes pas les « vieilles » version d’IE dans la liste des applications à supporter. Le fait est que beaucoup de gens en entreprise n’ont pas vraiment le choix et que les services IT ne sont pas forcément très réactifs parfois avec de très bonnes raisons : on ne met pas à jour du jour au lendemain un parc de plusieurs centaines/milliers de machines devant supporter des applications parfois exotiques. Et comme beaucoup sont encore sur IE 9, voire 8 (certains même le 7… mais bon ca devient marginal), on peut difficilement laisser tomber ce browser au profit des surfeurs « mobiles », à mon sens encore souvent peu nombreux (en fonction de la cible du site évidemment)…
dodo, le
Je ne comprends pas cet élitisme vis à vis de jQuery. On s’offusque de son poids de 32ko (et non 80ko), mais à côté de ça, ça ne choque personne de retinifier un site pour les 2-3 nantis qui ont les machines adéquates, en doublant le poids du site en question.
jQuery est toujours très utile dans beaucoup de situations, et je pense qu’il est bien trop tôt pour le qualifier de « mauvaise pratique ».
Nathan, le
« 480×320, 1024×768 et 1280×720. Ah ah, comme je suis drôle. Cette blague est tellement vieille qu’à l’époque on rêvait avec du 640×480 sur des gros CRT 12″. »
Cette blague n’en est tellement pas une qu’il s’agit de définitions d’écrans :p
Bref, nous ne sommes pas sur Lesintegristes. Mais je profite de cette subtile transition pour te remercier de cette volonté d’unir la communauté d’intégrateurs francophones et accessoirement de me fournir des nouveaux liens à suivre si le contenu me plaît :)
Bonne année ♥
shavounet, le
Malheureusement c’est pas si marginal que ça les entreprises qui tournent encore avec du IE7…
Je sais plus où j’ai lu ça mais apparemment ça va pas aller en s’améliorant puisque IE aura des versions tous les ans mais supportera encore les 7 à 10 versions précédentes (et bien sûr j’imagine avec x modes de compatibilités différents, et on de pourra pas changer de versions sans changer de windows…).
En gros vaut mieux supporter un standard qu’un rendu sur un navigateur spécifique. Et cr*tte IE.
benjamincrozat, le
@dodo :
Il est vrai que les gens avec un MacBook Pro Retina sont rares. Après si tu veux que son site ressorte flou sur tous les appareils mobiles à haute densité de pixels, c’est ton choix. Et là, ce ne sont pas seulement 2-3 gus qui les utilisent. Ça ne comprends pas seulement le matos Apple.
Jean, le
Au sujet des préfixes css3, une bonne pratique me semble d’utiliser le js Prefixfree. Pour quelques ko, plus besoin de se prendre la tête. On peut écrire du code standard, et en cas d’apparition d’un nouveau navigateur (qui sait?) et donc d’un nouveau préfixe, le problème est réglé en autant de temps qu’il n’en faut pour mettre un script à jour.
Pour les sceptiques, notamment sur les performances, Prefixfree ne créé pas de FOUC, et allège drastiquement les css.
Nico, le
Jean : pas convaincu de prefixfree, non pas que ce soit mauvais, mais par l’approche. Autant le faire à la pogne (les générateurs le font bien, ou le copier-coller pour les plus simples), ou avec un pré-processeur si tu aimes bien ces derniers.
Jean, le
@Nico : Il y a une différence enter prefixfree et la méthode manuelle/préprocesseurs/générateurs : la css n’est pas bloatée inutilement, elle comporte simplement la propriété standard. C’est un gain non négligeable.
Frank Taillandier, le
C’est vrai qu’elle est sympa cette communauté francophone, elle a besoin de se fédérer, c’est aussi pour ça qu’on a monté Sud Web :) http://www.pompage.net va reprendre petit à petit un rythme de publication de traductions d’articles de références plus soutenu. N’hésitez pas à nous soumettre des propositions d’articles !
Bonne année 2013 Rémi !
Felipe, le
« ce n’est vraiment plus acceptable d’inclure une bibliothèque JavaScript de 80 Ko » > il n’est en effet pas recommandé de mettre en ligne des fichiers de texte aussi gros sans les GZipper, surtout quand ils sont aussi compressibles et chargés à chaque page ! Comme l’a déjà noté dodo, 32ko une fois gzippé…
J’ai bien l’intention de continuer à m’en servir en 2013 si nécessaire, tout comme pour du JS natif.
Adoré un jour, honni le lendemain : euh pourquoi on l’adorait la veille déjà ?
préfixes > « contrat implicite avec les visiteurs de votre site (…) et ce au cours du temps. »
95% des pages que j’intègre le sont pour des clients et je n’ai pas de contrat de maintenance pour ces sites. Certains sites sont modifiés par leur(s) responsable(s), d’autres ont encore la CSS inchangée que j’ai créée 3 ans plus tard. Si le site ne fonctionne plus avec Firefox quarante-douze, je saurai côté technique pourquoi avant même le retour de cet ancien client mais est-ce que ça vient de mon code ou du sien ? C’est une source de problème, ce qui ne signifie pas qu’il ne sera pas réglé en 1H mais en tout cas il existe.
Les 5% restants c’est alsacreations.fr et alsacreations.com, là pas de souci (enfin ce ne sont pas « mes » sites).
« Kaelig (qui malheureusement se met à écrire en anglais) » > la langue de travail de l’informatique et du web, c’est l’anglais. Compétence professionnelle indispensable. Du coup, qu’un francophone s’exprime en anglais je ne vois pas bien le malheur ? (surtout quand il travaille pour une petite boîte anglaise ^^)
Merci pour l’initiative 24joursdeweb, ceci dit suivre 2,5 calendriers de l’Avent (24ways, celui-ci et un peu webperf) dans un mois qui n’a que 20 jours, c’est dur ! ;)
gimond, le
Se passer de Jquery, c’est discutable, je pourrais m’étendre longtemps sur le sujet.
Si c’est juste le poids qui t’embête, pourquoi ne pas utiliser zepto?
Alex, le
Je pense qu’il fallait faire une nouvelle révolution Web surtout pour Jquery et CSS , non?
Ced, le
En passant, JQuery 2.0 b1 fait 29Kb minified.