🔧 Liens techniques

Voici la liste des liens que j'utilise ou qui m'ont aidé.

alsacreations.com

Vive les display:flex !
Pleins de trucs et astuces pour les flexbox, allez voir aussi les liens à la fin de cette page.
Leurs tutos sont très bien détaillés.

davidwalsh.name

Pleins de trucs et astuces en js et autres commandes.
Avec en particulier cette page que j'aime beaucoup.

css-tricks.com

Pleins de trucs et astuces en css et js, plutôt orienté graphique.

Une analyse très didactique et assez sévère (mais juste :-) de votre site web, par une société basée à Rennes.
Les points d'amélioration sont très bien commentés et apportent une grosse valeur ajoutée.

squoosh.app

Pour compresser vos image, super pwa 👍!

www.base64-image.de

Pour convertir une image en base64.

jsonlint

Pour vérifier les json.

mozilla.org

Pour les technos web, c'est là !

lipsum.com

Le Lorem Ipsum des textes.

picsum.photos

Le Lorem Ipsum des images.

favicongenerator.com

Générer des fichiers favicon.ico à partir d'images.

varaa.com

Super bibliothèque javascript pour trier en drag&drop 👍.
Elle me suffit pour 99% des applications, mais il vous faudra vous débrouiller pour le 1% restant, comme par exemple pour un de jeu de solitaire ;-) dans lequel on peut déplacer les cartes de trois façons différentes :

Déplacement des cartes "à l'ancienne" en effectuant un drag&drop.
Déplacement des cartes par un click quand la configuration du jeu le permet.
Le "swipe moderne" des tablettes et smartphones, il suffit de lancer la carte dans la direction choisie ( et ça fonctionne aussi sur ordinateur ).

Remarque, ce "swipe moderne" doit aussi marcher sur des appareils qui fonctionnent avec une souris et qui ont des écrans tactiles. C'est par exemple le cas des Chromebook de Google ou des Surfaces de Microsoft.

keycdn.com

Permet de mesurer le temps de réponse de votre site depuis plusieurs pays dans le monde.
Vous pouvez par exemple indiquer l'url de votre favicon.ico et vous serez quelquefois étonné du résultat.
D'autres liens sur cette page permettent de mesurer d'autres éléments, a vous d'essayer !

github hugues-koolsol

Mon github

vanilla-js

Un site de référence sur le fantastique framework vanilla-js 😉
Éventuellement, allez aussi voir cette page de-jquery-a-vanillajs

svelte.dev

Quitte à choisir un framework js, autant en prendre un bon.
Celui-ci intègre aussi du css, ce qui est notable car avez vous déjà écrit un site web sans css ?
De plus le site svelte.dev lui même est super bien fait avec des exemples pratiques et un bac à sable très utile.
La vidéo de présentation de son concepteur est assez convaincante !
Cela dit, je vous conseille d'essayer de développer les exemples dans des pages toutes simples en vanilla-js, vous verrez que ce n'est pas si compliqué que ça de se passer de framework. De plus, selon moi, un exemple complet devrait contenir au moins une page de login.

developpez.com

Pleins d'articles sur pleins de sujets autour du développement !

lea.verou.me

Des solutions à quelques problèmes de front-end. Assez intello mais ça vous tire vers le haut !
Lea Verrou y parle par exemple d'un outil pratique pour choisir et visualiser des couleurs css.land/lch
Ou bien d'un convertisseur de de svg path d'un chemin absolu ou relatif vers un chemin relatif ou absolu

Rions un peu

Ce que ça fait d'apprendre JavaScript en 2016, mais aussi valable jusqu'à cette année.

📝 Les Articles.

Le symbole "🔧" (clé plate) indique les articles techniques.