Les Ressources du Web #44

Also available in: English

UX / UI, CSS, HTML, JavaScript, Accessibilité et tout plein de pixels et animations dans cette sélection. Apprenez Grid Layout tout en vous amusant, découvrez en plus sur CSS Variables et Font Variable. J’ai aussi une sélection de Digital Artists pour rendre cette sélection un peu moins technique. Amusez-vous bien !

Rester à jour : Toutes ces ressources sont partagées régulièrement tous les jours sur mon compte Twitter. Suivez-moi si vous souhaitez des news régulières.

UX / UI Design

• The spectrum of Design Roles in 2018 – Un article de 2018 qui m’a aidé pour ma refonte de portfolio en cours.
• Userflows.design – Une sélection de Userflows and la vie réelle sur des produits existants.
• Myriam’s SEO, SXO and everything in between – Une sélection de ressources SEO par Myriam.
• Duotone Icons by Font Awesome – J’aime la manière dont ils ont traité la possibilité de personnalisation des couleurs et opacité (CSS Variables).
• 4 reasons why you should design without colors – Un bon rappel de l’importance de la couleur.
• How to build a Sketch plugin – HTML, CSS et JS pour vous aider à construire un plugin Sketch.

CSS, HTML et JS

Les Fontes Variables sont quelque chose aujourd’hui. Elles vous aident à construire des produits plus lisibles avec très peu d’impact sur la performance. Dans cette sélection, CSS Grid et CSS Variables (Custom Properties) sans de la partie également. Enfin, quelques bibliothèques et astuces en JS pour vous aider à construire des interfaces accessibles et responsive.

Sélection CSS & SVG

Apprenez Grid Layout tout en vous amusant, et apprenez-en plus sur les CSS Variables et Fontes Variables grâce à cette sélection.

• Flexbox.ninja on Produchunt – J’ai mis Flexbox.ninja sur Producthunt, venez me soutenir.
• Apprendre le positionnement en s’amusant – Une sélection de ressources pour apprendre Grid Layout par Stéphanie Walter sur ce blog.
• Debugging CSS Grid – avec Firefox dev tools.
• Font Variable Demo – Une page utilisant 1 fonte variable de 84 ko à la place de 18 fichiers de 288 ko.
• CSS Custom Properties, the cascade – Pour ceux qui détestent la cascade, ça ne va pas s’améliorer.
• SVG Crowbar – Un bookmarklet pour Chrome qui extrait les nœuds SVG et les styles l’accompagnant depuis un document HTML pour le télécharger en tant que fichier SVG.

Sélection JavaScript & Accessibility

JavaScript vous aide dans cette sélection avec l’UX, l’accessibilité et la performance.

• Accessibility Object Model – Ajouter du sens sans markup.
• Reduced motion auto-play video – Réflexion sur l’auto-play des vidéos et la préférence de « reduced motion ».
• Time Control Web Accessibility – Les slides de Sergei à propos de l’accessibilité web des éléments qui apparaissent à l’écran.
• Bound.js – Une bibliothèque sans dépendance pour détecter les limites d’un élément. A utiliser pour du lazyloading, des changements d’état ou de l’infinite scroll par exemple. Vraiment léger (1 ko).
  

Quelques outils

2 outils aléatoires sans aucun lien entre eux pour vous aider avec la RGPD (en anglais), et pour partager des vidéos utiles. Aléatoire, je vous le disais.

• Loom – Un nouvel outil pour partager des vidéos, vous pouvez même avoir votre tête sur les vidéos en même temps qu’un partage d’écran.
• GDPR Design by CNIL – Un communauté anglophone pour vous aider à designer avec la RGPD en tête.

Demo, Folio & Inspiration

J’ai eu pas mal d’illustration, d’art, de design de personnage et de démo dans ma sélection du mois. Je les partage sur Twitter.

• Uran Dribbble Portfolio – Un portfolio d’illustrateur que j’ai découvert la semaine dernière.
• MA True Cannabis – Animated website inspiration.
• Musical Particule III – Choisissez une musique et laissez les particules danser pour vous.
• WebGL Fluid Simulation – Une démo fun que vous devez essayer.
• Airi’s arts – Un artiste que j’ai découvert pendant #portfolioday sur Twitter.
• Hunter’s arts – Un charac. designer que j’ai découvert pendant #portfolioday sur Twitter.
• Ronald’s illustrations – Un Digital Artist que j’ai découvert pendant #portfolioday sur Twitter.
• Chun Lo’s drawings – Un artiste que j’ai découvert pendant #portfolioday sur Twitter.
• Slaughterhouse Starlets – Des illustrations sanglantes fun.

Sonnez-moi sur Twitter si vous souhaitez partager votre travail !