Les Ressources du Web #27

Une grosse dose d’inspirations accumulées ces dernières semaines pour couvrir plein de points différents vous sera servie dans cet article. Du JavaScript (speech API, animations, outils d’upload, etc.) et des outils bien pratiques pour les indépendants (facturation, template, etc.) sont également présents dans ce nouveau listing.

S’il fallait n’en retenir qu’un

J’ai flashé sur Nicely Done qui est lui même bien fichu graphiquement et dont le contenu est vraiment bien sélectionné. Je vous laisse découvrir.

Inspiration et design

• Stop the overuse of overflow menus – un article sur la sur-utilisation des menus cachés.
• Free UI Kits – quelques kits graphiques gratuits.
• The Relate UI Kit – un très beau kit proposé par Invision.
• Font Pairing – trouvez le bon couple de fontes Titre et corps pour vos compositions.
• Nicely Done – une ressource de sites web bien foutus.
• Forty – un template HTML/CSS pour indépendant.
• Product pages – des idées de mise en page pour présenter un produit sur le web.
• Pricing pages – même principe mais avec des pages de prix cette fois.
• Interview: Benjamin De Cock @ Stripe – une interview très intéressante.
• BAAE Landing Animation – animation très fun, même si difficile à imaginer dans un contexte de production.

JavaSript

• Aquarelle – un effet aquarelle en JS.
• Trumbowyg – un éditeur WYSIWYG léger et extensible Open Source (plugin jQuery).
• Approve.js – un contrôleur « non intrusif » de valeurs dans les champs de formulaire.
• is.js – une bibliothèque de micro-contrôle des valeurs de champs de formulaire.
• Barba.js – une bibliothèque d’animation pour créer des transitions entre les pages.
• Uppy – une bibliothèque d’import d’image depuis votre disque, Drive, Webcam, Instagram, etc. grâce à une API riche.
• AOS – Animate On Scroll, un bibliothèque plutôt bien foutue pour de l’animation au défilement de la page.
• Vocalizer – une idée d’utilisation de Vocalizer dans un cadre social, je vous laisse lire.
• Baffle.js – une micro bibliothèque pour cacher/découvrir du texte dans votre page.
• LightGallery.js – une bibliothèque sans dépendance pour créer des galeries/diaporama de photos, vidéos compatible multi-plateforme.
• Speech Recognition – la reconnaissance vocale en quelques lignes de JS.

CSS

• Full Width image in limited width container – une technique pour avoir une image pleine largeur dans un conteneur limité en largeur.
• Snapper – un carrousel utilisant Snap Points en CSS.
• CSS Only Scroll indicator – une excellente idée de mise en place d’un indicateur de progression dans la page uniquement en CSS.
• Décaler une ancre en CSS – une technique de Siou pour décaler l’ancre dans une page.
• Background Properties – un excellent article de synthèse de cette propriété.

Outils & idées

• Bill Dogg – un outil de facturation parfait pour les freelances.
• How Much To Make – un outil d’estimation à la louche pour créer site web, application ou logo.
• RemoteBase – une base de données par critères des sociétés embauchant sur le principe du travail à distance.
• Find Blog Post Topics – un article regroupant des outils et astuces pour améliorer les sujets abordés sur vos blogs.
• Jason client – transformez n’importe quelles données JSON en application.
• Sketch Focus – ajouter des notes et tâches à vos documents Sketch.

Très bonne lecture à vous !