Les Ressources Du Web #39

A défaut de vous proposer un article de fond (qui devrait bientôt arriver), voici une sélection des dernières ressources du web issues de ma veille quotidienne. Du Layout CSS, de quoi améliorer vos images et leur chargement, des ressources graphiques à gogo et des bibliothèques bien utiles.

Retrouvez une liste de ressources Sketch, Photoshop, d’articles d’inspiration sur du design, de codes CSS, HTML ou JS et tutoriels dans cette sélection d’outils et liens utiles des dernières semaines. Si vous voulez être tenus informés plus fréquemment des ressources que je dégotte sur la toile, suivez-moi sur Twitter : @geoffrey_crofte

CSS & HTML

Explorez les Web Components, amléiorez le chargement de vos images et leur aspect responsive, et rentrez dans les profondeurs des Layouts CSS.

• ScrollyTelling with Sticky – un très bon article sur la position: sticky;
• Making Web Components Work – créer des web component fonctionnels, un article de fond.
• Image Inconsistencies – un article précis sur les incohérences dans le chargement des images en fonction des navigateurs.
• Building a Responsive Image – comment construire une image SVG responsible avec des symboles réutilisables.
• Getting started with CSS Layout – les layouts CSS dans cette grosse overview (30 min de lecture)

JS

jQuery vous manque ? Vous souhaitez en savoir plus sur les ServiceWorkers ? Construire des maps interactives grâce à une API JS ? Lisez donc tout cela 🙂

• Polly.js – un outil d’enregistrement et de replay des interactions HTTP distribué par Netflix.
• MapKit JS – une API JS distribuée par Apple pour intégrer des cartes interactives.
• ServiceWorkers Cookbook – un livre de recette pour ServiceWorkers fait par Mozilla.
• NanoJS – une bibliothèque light de manipulation de DOM à la jQuery.

Tools and Dev

Du debug de vos applications mobiles, à une meilleure visualisation de vos projets JS en passant par une vraie interrogation sur la complexité des developpements front-end. Cette sélection devrait vous offrir quelques outils utiles.

• Sonar – un outil de debug pour vos applications mobiles distribué par Facebook.
• JSUI – un outil pour maintenir vos projets JS de manière visuelle.
• Why is Front-End Dev so instable? – un article qui interroge sur l’instabilité des devs front d’aujourd’hui.
• HSL()/HSLa() is great for programmatic color control – passez tous à HSL ! 😀
• Hadron – une application pour coder et voir le résultat rapidement. Est censée faire le lien entre designer et développeur, mais une bonne base HTML et CSS est nécessaire pour le designer.

Design & Inspiration

Des fontes, de la ressource Sketch App, un peu d’inspiration sur du design, de l’UX portfolio et de l’animation. Have fun!

• Kotori Rose Font – une fonte géométrique sans-serif délicieuse.
• Planguru UI Kit – un PSD/Sketch d’un kit pour de l’event planning.
• Flowchart 2.0 – un fichier Sketch pour du flowchart.
• Stéphanie’s UX Portfolio – le portfolio « UX Designer » de Stéphanie vient de sortir (MVP), allez y faire un tour pour votre inspiration. Content d’avoir pris en charge le développement.
• Card Animation with Principle – un tutoriel pas à pas pour créer une animation de card avec Principle.
• Oceanic Overlay AnImation Demo – une belle démo d’animation par @keyframers.

Tech, Fun and Misc

Curieux sur ce qui se fait à droite à gauche ? PWA pour du jeu vidéo, un OS libre pour une SmartWatch. C’est par ici.

• AsteroidOS – un OS pour SmartWatch, Open Source s’il vous plait.
• Progressive Web Games – un petite expérimentation de Mozilla Hack sur une PWA pour un jeu.
• Dynamic Bezier Curves explained – un excellent article sur la construction des courbes de Bezier.
• Flopstarter – un kickstarter bien bien fun 😀

Bonne lecture !