Les Ressources du Web #41

En pleine préparation de cours, d’articles, et de talks sur des sujets comme CSS, l’UX, ou du retour d’expérience sur certains projets, j’ai du mal à trouver du temps pour écrire sur ce blog, mais pour vous voici une sélection des dernières ressources CSS, JS, des démo bien sympa et des ressources en design à télécharger ainsi que des guides divers et variés.

Après avoir fait un teasing sur mon occupation, sachez que je relayerai sur ce blog mes interventions prochaines sous forme de transcript ou d’articles. N’hésitez pas à me suivre sur Twitter si vous souhaitez avoir plus rapidement les liens que je partage, plus de fraicheur dans l’actualité du tech et design.

S’il devait n’en rester qu’un

Si je devais sélectionner une ressource parmi celle que je vous propose, je dirais que Beer Slider propose un script bien conçu et facile à prendre en main, avec un design de base élégant.

 JavaScript

Apprenez à deboguer comme un pro dans votre navigateur, à distribuer les bonnes ressources au bon moment en cas de réseau un peu faiblard, à construire des PWA ou créer des transitions fluides entre les pages d’un site AJAX.

• Adaptive Serving using Network Information API – un excellent article d’optimisation de délivraison de media en fonction de la qualité du réseau.
• How to stop using console.log() to debug – comment utiliser l’outil de debug de votre navigateur pour déboguer vos scripts JS.
• Beer Slider – un slider pour afficher un diff. d’images avant/après en vanilla JS.
• Highway.js – une bibliothèque JS pour construire des transitions entre des pages sur une logique AJAX.
• PWA Builder – un assistant en ligne de commande pour créer votre PWA en quelques étapes.

CSS

Devenez maîtres du layout responsive et apprenez-en plus sur les pseudo-class en CSS grâce à cette petite sélection de ressources.

• CSS-Only Floating Label – en utilisant la pseudo-class placeholder-shown.
• CSS Layout Cookbook – MDN propose des exemples de layout de page.
• CSS Transform Origin Demo – de l’importance du point de transformation d’origine.

Démo

Quelques démonstrations pour l’effet wahou, entre animation, capacité de reconnaissance faciale et petites astuces colorimétriques en JS.

• Dragon Snake Animation – une animation WebGL assez impressionnante.
• Random Color Harmonies – des harmonies de couleurs calculées en JS.
• Realtime Face Segmentation – une reconnaissance des parties du visage en live.

Design & Guide & Ressources à télécharger

D’une plateforme Open Source pour la vente de produits numériques, à des conseils et templates pour le design d’e-mail, en passant par des article de fond et des sujets de conférence sur la performance et la psychologie dans le design.

• Design d’email – des templates d’e-mail à télécharger et un guide très bien structuré.
• CCSearch – des images en Creative Commons proposées (indexées) par CreativeCommons.
• Zipsell – une plateforme Open Source pour la vente de produits numériques.
• The Power of « I don’t know » in product design – savoir qu’on ne sait pas en design ouvre le champ des possibles.
• The psychology of design – ou pourquoi les designers devraient ajouter une corde « connaissances en psychologie » à leur arc.
• l’UX au service de la performance – un talk de Stéphanie Walter donné récemment pour We❤️Speed.

Excellente lecture et n’oubliez pas de passer sur Twitter si vous voulez être les premiers à choper ces informations 😀