A propos de l'auteur

Jonglant entre trois langues au quotidien, Iris est connue pour son amour de la linguistique, des arts, du web design et de la typographie, ainsi que pour sa mine d'or de…
Plus à propos
Iris

C'est ce temps du mois! Rejoignez-nous alors que nous partageons les dernières nouvelles et mettons en évidence les choses sur lesquelles nous avons travaillé et avons également apprécié la lecture au cours du mois dernier.

C'est agréable d'avoir un aperçu des choses les plus importantes en un seul endroit, mais n'hésitez pas à nous suivre sur Twitter, Facebook, LinkedIn et abonnez-vous à notre flux RSS ainsi qu'à notre newsletter bihebdomadaire. Nous aimons vous aider à rester au courant des choses et à vous rendre la vie au moins un peu plus facile!

Pour toutes les fois où nous avons interrogé les gens sur Smashing, la plupart semblent toujours croire que nous sommes une sorte de grande société d'édition située quelque part aux États-Unis – les deux ont tort. Tout a commencé à Fribourg, en Allemagne, et l'équipe est composée de personnes dispersées dans le monde entier – la plupart d'entre nous ne travaillant pas à temps plein pour Smashing.

C'est vrai, travailler à distance nous est assez familier, et donc avec la situation actuelle avec COVID-19 qui met tout le monde mal à l'aise, nous aimerions tirer le meilleur parti des choses et aider nos amis qui doivent travailler ou diriger équipes à distance pour la première fois. Notre rédactrice en chef, Rachel Andrew, a préparé un bel article pour vous aider à rester connecté et à continuer à apprendre pendant que nous traversons cela ensemble.

Vous avez peut-être déjà entendu que SmashingConf SF a été reporté à novembre en raison des restrictions de voyage malheureuses et de nombreuses autres raisons. Ce fut vraiment une décision difficile à prendre pour l'équipe, mais nous pensons que c'est la meilleure voie à suivre – la sécurité et la santé passent toujours en premier.

Sans plus tarder, voici une courte mise à jour de ce qui se passe chez Smashing et du travail super créatif partagé de et à la communauté!

Bonne lecture – de mon ordinateur au vôtre!

Concevoir en tenant compte de l'éthique

...Après des mois de dur labeur, le «Manuel de conception éthique» est enfin là – et il est expédié! La réponse a déjà été extrêmement positive, et nous sommes ravis de partager vos avis bientôt. Il y a encore pas mal de travail à faire sur le web, mais nous espérons qu'avec ce livre, vous serez équipé de suffisamment d'outils pour faire avancer lentement une entreprise vers une empreinte numérique plus durable et plus saine!

Bien sûr, vous pouvez accéder immédiatement à la table des matières ou télécharger un extrait PDF gratuit pour avoir une première impression du livre – nous sommes sûrs que vous ne serez pas déçus! Lisez notre publication officielle avec tous les détails →

Apprendre toujours de nouvelles choses les uns des autres

Smashing PodcastNous avons tous des horaires chargés, mais il est toujours temps de mettre ces bouchons d'oreille et d'écouter de la musique ou des podcasts qui vous rendent heureux! Nous passons à notre 12e épisode du Smashing Podcast – avec des gens d'horizons différents et tellement de choses à partager! Vous êtes toujours les bienvenus pour vous connecter et partager vos questions et réflexions avec nous à tout moment!

Outre les nouvelles déchirantes sur notre SmashingConf SF reporté, nos SmashingConfs sont connus pour être des événements conviviaux et inclusifs où les développeurs et les concepteurs frontaux se réunissent pour assister à des sessions en direct et à des ateliers pratiques. De la conception en direct au débogage en direct, tous nos intervenants aiment entrer dans les détails et montrer des exemples utiles de leurs propres projets sur grand écran.

Voici quelques conférences que vous aimeriez regarder et apprendre:

Le premier SmashingConf a eu lieu à Fribourg en 2012, il y a donc tellement plus de conférences que vous pouvez regarder. Voir toutes les vidéos de SmashingConf →

Briller les projecteurs sur React, Redux et Electron

Calendriers de l'AventMarquez vos calendriers! La semaine prochaine 19 mars, nous organiserons un webinaire Smashing TV avec Cassidy Williams qui expliquera comment organiser une application React moderne et créer une application Electron (avec React). Rejoignez-nous à 17h00, heure de Londres – nous serions ravis d'entendre vos réflexions et vos expériences avec React dans vos projets!

Smashing TV est une série de webinaires et de diffusions en direct contenant des conseils pratiques pour les concepteurs et les développeurs. Ce ne sont pas seulement des discussions, mais plutôt des conversations et des sessions «voici comment je travaille». Les membres Smashing peuvent télécharger des enregistrements et également recevoir des remises et de nombreux cadeaux pour que leur adhésion en vaille la peine. Dites m'en plus →

Nous publions chaque jour un nouvel article sur divers sujets d'actualité dans l'industrie du Web. En voici quelques-uns que nos lecteurs ont semblé apprécier le plus et ont recommandé davantage:

  • "Pourquoi parlons-nous de CSS4?"
    par Rachel Andrew
    Sur le Web et au sein du groupe de travail CSS, il y a eu des discussions sur l'opportunité de spécifier une version de CSS – peut-être en la nommant CSS4. Dans cet article, Rachel Andrew résume certains des avantages et des inconvénients de le faire, et vous demande votre avis sur la suggestion.
  • «Le réglage de la hauteur et de la largeur des images est à nouveau important»
    par Barry Pollard
    Grâce à certains changements récents dans les navigateurs, cela vaut maintenant la peine d'être réglé largeur et la taille attributs sur vos images pour éviter les changements de mise en page et améliorer l'expérience des visiteurs de votre site
  • «Configuration de Tailwind CSS dans un projet React»
    par Bénédiction Krofegha
    Cet article présente Tailwind CSS, une bibliothèque CSS qui vous donne tous les blocs de construction dont vous avez besoin pour créer des conceptions sur mesure sans styles d'opinion. Vous apprendrez également à configurer de manière transparente Tailwind CSS dans un projet React.
  • «Présentation d'Alpine.js: un tout petit framework JavaScript»
    par Phil Smith
    Avez-vous déjà construit un site Web et atteint jQuery, Bootstrap, Vue.js ou React pour obtenir une interaction utilisateur de base? Alpine.js est une fraction de la taille de ces frameworks car il n'implique aucune étape de construction et fournit tous les outils dont vous avez besoin pour créer une interface utilisateur de base.
  • «Comment concevoir des applications mobiles pour une utilisation à une main»
    par Maitrik Kataria
    90% des smartphones vendus aujourd'hui ont des écrans> 5 pouces. L'immobilier sur grand écran présente de nouveaux défis et opportunités pour les créateurs et les concepteurs d'applications. Voyons comment la conception d'applications pour une utilisation à une main peut résoudre ces défis.

Les meilleurs choix de notre newsletter

Nous allons être honnêtes: toutes les deux semaines, nous avons du mal à garder les numéros de la newsletter Smashing à une longueur modérée – il y a juste donc beaucoup de gens talentueux qui travaillent sur des projets brillants! Donc, sans vouloir trop prolonger cette mise à jour mensuelle, nous braquons les projecteurs sur les projets suivants:

P.S.: Un grand merci à Cosima Mielke pour avoir écrit et préparé ces articles!

Recherchez et corrigez les erreurs dans vos conceptions

Nous connaissons tous ces moments où nous sommes tellement immergés dans un projet que nous perdons la distance dont nous avons besoin pour attraper de petites incohérences: un rayon de bordure incorrect autour d'une image ou des styles ou du texte manquants, par exemple. Si vous concevez dans Figma, le plugin gratuit et open-source Design Lint facilite la recherche et la correction d'erreurs comme celles-ci afin qu'aucun bug ne se retrouve en production.

Design Lint
Un plugin gratuit et open-source pour Figma conçu pour vous aider à trouver et à corriger les erreurs dans vos conceptions .: Design Lint.

Design Lint recherche les styles de texte, de remplissage, de contour et d'effets manquants et capture les valeurs de rayon de bordure incorrectes sur tous vos calques. Pour ne pas interrompre votre flux de travail, le plugin se met à jour automatiquement lorsque vous corrigez des erreurs. Le dépôt est disponible sur GitHub, alors n'hésitez pas à écrire des règles spécifiques pour adapter le plugin à vos besoins.

Apprenez le positionnement CSS avec… des chats!

Pourrait-il y avoir une meilleure façon d'apprendre le positionnement CSS comme avec un tas de chats amicaux? C'est probablement ce que pensait Ahmad Shadeed également lorsqu'il a créé son guide interactif sur le fonctionnement du positionnement CSS.

Apprenez le positionnement CSS
Miaou! Ahmad Shadeed a préparé un excellent guide pour vous apprendre tout sur le positionnement CSS!

Le guide vous apprend à utiliser CSS pour positionner trois chats de bande dessinée et leur couverture dans une boîte, et une fois que vous avez compris le concept, vous pouvez commencer à bricoler avec la démo interactive qui visualise comment le résultat change lorsque vous modifiez les valeurs. Maintenant, qui a dit que l'apprentissage ne pouvait pas être amusant?

Intimité, un court poème interactif

Une expérience inspirante vient de Thibaud Giffon, étudiant français en graphisme et design d'interaction: «Intimité». Le court poème interactif utilise des images abstraites, du son et du texte pour explorer l'intimité sous différents angles.

Intimité
Le poème musical «Mixed Up» prend vie (son activé) en déplaçant simplement votre curseur sur les cordes. Essaye le!

Compassion, distance, confusion, toucher – ce sont quatre des huit chapitres qui composent le poème; et chacun d'eux reflète le sujet à sa manière unique: avec des vagues ou des cercles chauds et harmonieux qui se fondent les uns dans les autres, mais aussi avec des cordes dissonantes ou des bulles colorées qui éclatent en se faisant de la place. Magnifique!

Toutes vos icônes SVG en un seul endroit

Avoir un endroit central pour organiser tous vos actifs est toujours une bonne chose, pas seulement pour les équipes – pour garder une trace de ce que vous avez et trouver rapidement ce que vous recherchez. L'application gratuite multiplateforme Iconset est un tel endroit: elle vous aide à collecter, personnaliser, partager et gérer tous vos jeux d'icônes SVG.

Iconset
Organiser les icônes SVG en un seul endroit avec Iconset.

Pour faciliter la recherche de l'icône que vous recherchez, vous pouvez organiser vos icônes en ensembles ou avec des balises et, une fois que vous avez trouvé l'icône dont vous avez besoin, vous pouvez la faire glisser directement dans votre outil préféré. Un vrai gain de temps. Iconset prend en charge les services cloud comme Dropbox ou OneDrive afin que toutes vos icônes soient toujours synchronisées entre les membres de l'équipe. L'application est disponible pour Mac et Windows.

L'aventure WebGL d'un ancien héros

Un héros réticent dans une quête qu'il n'a jamais demandée – c'est l'histoire derrière le jeu vidéo d'aventure sur navigateur Heraclos. Situé dans la Grèce antique, le jeune Heraclos tombe sur une amphore qui appartient à l'un des dieux. Il est déclaré être l'élu et est expulsé pour gravir la montagne secrète et rendre l'amphore à son propriétaire.

Heraclos
Heraclos, un jeu vidéo d'aventure réalisé en WebGL.

Ce qui rend le jeu si remarquable, c'est la touche amusante dans l'interaction entre le héros et le dieu (une parodie d'histoires héroïques communes) mais aussi le contexte technique: Heraclos a été conçu en seulement trois mois par un groupe d'élèves de l'école des Gobelins de images à Paris – avec WebGL et Cannon.js. Un excellent exemple de ce qui est possible sur le Web.

Un enregistreur d'écran open-source construit avec la technologie Web

Avez-vous déjà entendu parler de Kap? L'enregistreur d'écran open-source mérite vraiment d'être vérifié si vous effectuez fréquemment des enregistrements d'écran.

Kap
Kap, un enregistreur d'écran open source construit avec la technologie Web.

Construit avec les technologies Web, Kap produit des enregistrements de haute qualité aux formats GIF, MP4, WebM ou APNG. Vous pouvez inclure l'audio (même à partir de votre microphone), mettre en surbrillance les clics et découper les enregistrements. En bonus, il existe également des options pour partager vos GIF enregistrés sur Giphy, les déployer avec ZEIT maintenant ou les télécharger sur Streamable. Parfait pour les démos techniques.

Open Peeps, une bibliothèque d'illustrations dessinée à la main gratuite

584 688 combinaisons possibles. C'est le nombre de personnages différents que vous pourriez créer avec la bibliothèque d'illustrations dessinées à la main de Pablo Stanley, Open Peeps.

Open Peeps
«Open Peeps», une bibliothèque d'illustrations dessinée à la main créée par Pablo Stanley.

Open Peeps vous permet de mélanger et d'associer différents éléments vectoriels pour créer des personnalités diverses: combiner vêtements et coiffures, changer d'émotion avec des expressions faciales, mettre en scène des poses différentes – les possibilités sont infinies. Et si vous êtes pressé, Pablo a également préparé des Peeps prêts à télécharger que vous pouvez utiliser immédiatement. Open Peeps est publié sous une licence CC0, vous êtes donc libre d'utiliser les illustrations dans des projets personnels et commerciaux. Une excellente façon d'ajouter une touche artisanale à votre design.

Comment rendre les entrées plus accessibles

En 2019, WebAim a analysé l'accessibilité du premier million de sites Web, avec une conclusion choquante: le pourcentage de pages sans erreur était estimé à moins d'un pour cent. Pour rendre nos sites inclusifs et utilisables pour les personnes qui s'appuient sur la technologie d'assistance, nous devons obtenir les bases du HTML sémantique. Avec son credo de commencer petit, de partager et de travailler ensemble, l'article d'Oscar Braunert sur les contributions inclusives est un excellent point de départ pour le faire.

Commençant par les bases de WAI, ARIA et WCAG, l'article explore comment rendre les entrées plus accessibles. Les conseils peuvent être mis en œuvre sans changer l'interface utilisateur et, comme le dit Oscar: «En cas de doute, faites-le. Personne ne le remarquera. Sauf certains de vos utilisateurs. Et ils vous en remercieront. »

Une police open source pour les développeurs

Haute lisibilité, numérisation rapide du texte, aucune distraction – ce ne sont que quelques-unes des exigences des développeurs sur une police de caractères. Eh bien, la police de caractères libre et open-source JetBrains Mono répond à tous magnifiquement.

JetBrains Mono
Les formulaires de police de caractères de JetBrains Mono sont simples et exempts de détails inutiles. Rendu en petites tailles, le texte semble plus net.

Pour ce faire, Jet Brains Mono tire parti de quelques détails petits mais puissants: par rapport aux autres polices monospace, la hauteur de JetBrains Mono est augmentée tandis que les caractères restent standard en largeur pour garder les lignes de code à la longueur attendue par les développeurs. Pour améliorer encore la lisibilité, 138 ligatures spécifiques au code réduisent le bruit de sorte que vos yeux doivent traiter moins et que les blancs deviennent plus équilibrés. Intelligent! JetBrains Mono est disponible en quatre poids et prend en charge 145 langues.

Le guide ultime des iframes

Avec de nombreux articles les déconseillant, les iframes n'ont pas la meilleure réputation. Le développeur JavaScript Nada Rifki voit les choses différemment: elle suggère de ne pas laisser sa réputation vous empêcher de vous fier aux iframes. Après tout, ils ont de nombreux cas d'utilisation légitimes.

Le guide ultime des iframes
Le guide ultime des iframes écrits par Nada Rifki.

Pour vous aider à vous faire votre propre opinion sur cet élément controversé, Nada a écrit un guide ultime des iframes qui explore les fonctionnalités des iframes et comment les utiliser; situations délicates où les iframes peuvent être utiles; Enfin et surtout, comment sécuriser votre iframe contre les vulnérabilités potentielles. Une excellente occasion de voir les choses sous un angle différent.

Guide des commandes de console

Les capacités de la console de débogage du développeur ont considérablement évolué au cours des dernières années – du moyen de signaler les erreurs à la journalisation automatique d'informations telles que les requêtes réseau et les erreurs ou avertissements de sécurité. Il existe également un moyen pour JavaScript d'un site Web de déclencher diverses commandes qui sortent vers la console à des fins de débogage. Et bien que ces fonctionnalités soient principalement cohérentes entre les navigateurs, il existe également des différences fonctionnelles.

Guide des commandes de console
«Un guide des commandes de console» par Travis Almand

Si vous cherchez un aperçu des fonctionnalités de la console, Travis Almand a élaboré un guide utile. Il couvre Firefox et Chrome et examine diverses commandes qui peuvent être utilisées dans la sortie de la console du navigateur ou avec JavaScript. Un résumé pratique.

Smashing Editorial(cm, vf, ra, il)