Les Ressources du Web #40

Une sélection des dernières semaines de l’actualité du web (et quelques vieux articles en rappel de bonnes pratiques) pour faire le tour de l’UX, l’UI, le développement Front-end et quelques actualités diverses et retours d’expérience. Illustration, gradients, couleurs, typographie et tutoriels sont au rendez-vous.

S’il fallait n’en retenir qu’un

UnDraw.co propose une série d’illustrations vectorielles dont une partie de la couleur est éditable pour vous permettre d’ajouter ces illustrations sur votre site à la couleurs de votre charte graphique. Ces illustrations sont d’excellente qualité visuelle mais aussi au niveau du code, facilement éditable via Illustrator ou Sketch. La license MIT vous permet d’en faire presque ce que vous voulez sans citer l’auteure (Katerina Limpitsouni). Le code est fourni par Aggelos Gesoulis.

HTML & CSS

Apprenez HTML/CSS dans un super tutoriel détaillé. CSS Exclusions, Flexbox et Grid n’auront plus de secret pour vous. Vous allez voir que tout cela est complexe mais pas infranchissable. Quelques astuces et expérimentations vous sont aussi proposées dans cette sélection HTML et CSS.

• Interneting is Hard – apprendre le HTML et CSS facilement et progressivement.
• CSS Exclusions with Queen Bey – plongez dans les entrailles de CSS Exclusions.
• Frustration of using CSS Exclusions – un deuxième article expliquant les frustrations d’utiliser CSS Exclusions.
• Auto-margin magic with Flexbox – de l’utilisation des margin: auto; dans Flexbox.
• Double-click with CSS only – une petite technique utilisant 2 élements, un jeu de superposition et une animation pour simuler le double clic en CSS uniquement.
• The complete illustrated Flexbox tutorial – un très bon tutoriel sur Flexbox.
• The lab of Jen Simmons – un lab actuellement exploité pour des expérimentations sur Grid Layout.

JavaScript

Plongez au coeur des performances JS et de nouvelles API, expliquées en détail par des experts dans leur domaine.

• The Clipboard API crashcourse – un excellent article sur l’API Clipboard pour faire des copier/coller.
• The Cost of JavaScript – un article sur la performance et le coût des bibliothèques JavaScript trop riches.
• ApexCharts.js – une bibliothèque JS pour créer de jolies charts.
• The Best Explanation of JavaScript Reactivity

Ressources UX

Quand vient le moment de faire de la qualité sur nos interfaces pour améliorer l’expérience utilisateur, voici une sélection d’articles pour vous y aider.

• UX Quantitative Survey – de la recherche utilisateur à travers des Quantative Surveys de qualité.
• Design Better Forms – un article de 2016, mais un bon rappel, vu qu’on est toujours pas capable de faire des formulaires convenables en 2018 😀
• Toggle Switch Guidelines – Nielsen & Norman Group fait un petit topo sur les Toggle Switches.
• 10 Steps for a better queer user experience – un article sur l’inclusivité et comment l’intégrer à vos projets.

Ressources UI

Cette sélection se trouve entre jolies fontes, choix de couleurs, illustrations et conseils pour la création d’un Design System.

• RedisDead Fontes – de jolies fontes faites main par Laurence Vagner (@hellgy).
• UnDraw.co – des illustrations pour tous les contextes faites en SVG et dont les couleurs sont éditables.
• Six lessons learned by creating a design system at a fast-moving start-up
• Create your design system: Part 1 – Typography
• Pattern variations – les variations de composants dans un design system.
• Color Wheel Generator – un générateur de palette plutôt fun.
• Cool gradients selection – une sélection de dégradés de couleurs vraiment sympa.

Autres ressources en vrac

• Alf.io – un système de réservation de ticket Open Source.
• Firefox re-branding – deux propositions de rebranding de Firefox par Mozilla.
• Pinterest PWA retrospective – une rétrospective d’un an avec une PWA par Pinterest.
• Deux ans plus tard – Marie nous fait un retour sur la « liberté d’expression » sur les réseaux sociaux.
• Am I mansplanning ? – un petit flowchart pour savoir si vous n’êtes pas en train de Mainsplain.
• A 3D Printed Home in less thant 24h – une maison en moins de 24h ça vous dit ?

Bonne lecture à tous !