#5 Dev Web – Outils

Je vous présente quelques astuces et bonnes pratiques pour vos développement web surtout la partie front-end. Bien entendu il n’y a pas de « bonnes » ou « mauvaises » façon de faire, mais il y a tout de même quelques règles à ne pas négliger.

Pour le HTML :

On sépare le CSS de son HTML.
On respecte un minimum les validations (W3C)
On pense à l’accessibilité (notamment pour les personnes non voyante).
Les scripts sont à la FIN du body pour éviter de bloquer le rendu de la page.

Pour le CSS :

On utilise les pré-processeurs très recommandée.
On utilise les normes BEM (Block Element Modifier), ou autre, mais on reste constant !
On laisse les identifiants au Javascript ! Les classes sont là pour tout le reste.
On fait du Mobile First ! (Les mobiles représentent 80% de vos visiteurs !)

Pour tout le JS :

On évite au maximum les « repaint » et « reflows », donc on déclare une variable plutôt que de refaire 3 fois le même traitement.
jQuery n’est pas la solution pour tout, si vous avez 2 animations à faire, préférez lui le Javascript.

Quelques outils indispensables :

Google PageSpeed
Validation unifiée W3C
Colourcode
CodePen
GTMetrix
Web Developer Checklist
OverAPI
DareBoost
CanIUse
Critical
TestMySite par Google
Introduction à Gulp

Quelques blogs utiles

FrontEndFront
Codrops
Alsacreations
Grafikart

un peu de lecture :

PHP la bonne manière
JS the right way (Anglais)
Browserdiet

Des ressources gratuites ?

Pexels
Unsplash
Pond5
Fribbble
Behance

plus