Ressources communautaires et publications favorites

Il s'agit de la première mise à jour mensuelle publiée par l'équipe Smashing pour mettre en évidence certains les choses que nous avons aimé lire au cours du dernier mois. Un grand nombre des publications incluses proviennent des liens les plus populaires de notre lettre d'information Smashing. Si vous ne recevez pas encore notre newsletter, alors inscrivez-vous ici pour recevoir des liens soigneusement sélectionnés de l'équipe toutes les deux semaines.

SmashingConf News

Nous venons de terminer notre dernière SmashingConf de l'année à New York. Les vidéos de l'événement arriveront bientôt, mais nous avons déjà publié un article et toutes les vidéos de notre événement de Fribourg en septembre. Vous trouverez tous ceux-ci dans notre article intitulé « SmashingConf Freiburg 2019 »

Nous avons également annoncé les dates de SmashingConf 2020 ! Voulez-vous nous rejoindre à San Francisco, à Fribourg, à New York ou dans notre nouvelle ville d'Austin? Si c'est le cas, achetez vos billets maintenant au prix des tarifs préférentiels et surveillez très bientôt les annonces de programmation.

Lecture recommandée dans le magazine Smashing

Nous publions un nouvel article tous les Si vous n'êtes pas abonné à notre flux RSS ou suivez-nous sur les réseaux sociaux, vous risquez de manquer des articles brillants! Voici quelques-uns que nos lecteurs ont semblé apprécier et recommander plus loin:

• « Comment utiliser la chapelure sur un PWA » de Suzanne Scacca
  Si vous craignez que votre PWA ne disparaisse pour être difficile à naviguer sans quelques conseils, mettez la chapelure au travail. Dans cet article, Suzanne explique comment.
• « Les systèmes de conception sont au sujet des relations » par Ryan DeBeasi
  Les systèmes de conception peuvent améliorer la convivialité, mais ils peuvent également limiter la créativité ou synchroniser avec les produits réels. Explorons comment les concepteurs et les développeurs peuvent créer des systèmes de conception plus robustes en créant une culture de la collaboration.
• « Un guide pour les nouvelles et expérimentales CSS DevTools dans Firefox » par Victoria Wang
  Ever Depuis la publication de Grid Inspector, l’équipe Firefox DevTools s’est inspirée de la création d’une nouvelle suite d’outils pour résoudre les problèmes du Web moderne. Dans cet article, Victoria explique sept outils en détail.
• « Modèles de conception éditoriale avec grille CSS et colonnes nommées » de Rachel Andrew
  En nommant des lignes lors de la configuration de nos mises en page CSS Grid , nous pouvons exploiter certaines fonctionnalités intéressantes et utiles de Grid – des fonctionnalités qui deviennent encore plus puissantes lorsque nous introduisons des sous-réseaux.

Meilleurs choix de notre lettre d'information

Soyons honnêtes: nous avons du mal à conserver le Le bulletin d'information Smashing est publié dans une longueur modérée – il y a tellement de gens talentueux qui travaillent sur des projets brillants! Donc, sans vouloir faire cette mise à jour mensuelle trop longtemps non plus, nous braquons les projecteurs sur les projets suivants:

HTML Email

Puis-je envoyer un courriel…?

Nous connaissons et aimons tous caniuse. com . Malheureusement, si vous vouliez tester la prise en charge des normes Web dans le courrier électronique HTML, ce n’était pas vraiment facile. Jusqu'à maintenant. Inspiré par le concept à succès, Can I Email vous permet de vérifier la prise en charge de plus de 50 fonctionnalités HTML et CSS dans 25 clients de messagerie. Depuis que le site a été lancé le mois dernier, d’autres sont déjà en cours de planification. [19659022] ( Puis-je envoyer un e-mail …? lancé par Rémi Parmentier et l'équipe à Tilt Studio

Made pour et par La communauté des geeks du courrier électronique, les données qui alimentent le projet sont disponibles sur GitHub et tout le monde peut y contribuer. Un détail intéressant: le Tableau de bord du support client inclus dans les rangs. Des clients de messagerie basés sur la manière dont ils gèrent les fonctionnalités sont utiles. Une aide précieuse pour tous les utilisateurs de messagerie HTML.

Email Design Inspiration

Se démarquer du flot de courriers électroniques qui parviennent chaque jour dans nos boîtes de réception est difficile, et pas seulement promotionnelle. mais aussi pour les emails transactionnels et les newsletters. Etes-vous inspiré par la façon dont d’autres réussissent à susciter la curiosité et l’intérêt de sauver leurs courriels et de les empêcher de finir dans le dossier courrier indésirable en tant que victime lors de la quête de la boîte de réception zéro?

Organisé par Rob Hope, Email Love présente des courriels bien conçus vers lesquels vous pouvez vous tourner pour de nouvelles idées – un regard dans le code de chaque courriel est inclus, bien sûr. Des découvertes passionnantes garanties!

Polices de caractères

Outils permettant de contourner les problèmes de police Web

Les polices Web sont faciles à mettre en œuvre, mais elles peuvent également avoir une incidence importante sur les performances d’un site. Pour vous aider à gagner du temps avant de commencer à peindre, Peter Müller a construit Subfont . L'outil en ligne de commande analyse votre page pour générer les sous-ensembles de polices Web les plus optimaux et les injecter dans votre page. Subfont prend actuellement en charge les polices Google ainsi que les polices locales.

À propos des polices Web: pour éviter que le style de texte non style ne provoque des changements de mise en page, vous pouvez envisager de choisir votre solution de secours. police par rapport aux hauteurs et largeurs x de votre police web. Mieux ils correspondent, moins votre mise en page risque de changer une fois la police Web chargée.

Monica Dinculescu a proposé Font Style Matcher pour vous aider à trouver la police de repli parfaite. Avant d'opter pour une police de secours, vous pouvez également vérifier si elle est prise en charge sur différents systèmes d'exploitation afin de ne pas rencontrer de problèmes. Trois petits mais puissants outils pour contourner les pièges les plus courants des polices Web.

Petit guide sur les polices à couleurs variables

«La technologie est nouvelle, l'aventure est grande!» Si vous regardez les expériences d'Arthur Reinders Folmer de Typearture l'a fait avec des polices de couleur variable, cette citation frappe vraiment la marque. Arthur utilise des polices à couleur variable pour créer des animations qui ne sont pas seulement un régal pour les yeux mais qui explorent également tout le potentiel de la technologie de la police de caractères.

Elles permettent peu de personnalisation par rapport aux SVG, mais les polices à couleurs variables sont plus faciles à mettre en œuvre et offrent beaucoup de place. pour des aventures créatives également – utilisez les entrées du microphone, de la caméra ou du gyroscope pour ajuster les variables et animer les illustrations, par exemple. Cela semble excitant? Arthur a créé un petit guide dans lequel il plonge plus avant dans la technologie derrière ses expériences. Un aperçu fantastique des possibilités offertes par les polices de couleur variable aujourd'hui.

Performances

Automatisation de la compression d'images

La taille de transfert des images demandées a augmenté de 52% sur les ordinateurs de bureau et de 82% sur mobile au cours de la dernière année. la moitié du poids de page médian représentant les images. Ce sont des chiffres qui montrent une nouvelle fois à quel point il est crucial d'optimiser les images avant qu'elles n'atteignent la production. Ne serait-il pas pratique d'automatiser la compression?

Eh bien, les gens de Calibre s'est posé la même question et a créé une action GitHub qui fait exactement cela: il optimise automatiquement les images de votre demande de tirage – sans perte de qualité grâce à mozjpeg et libvips. afin qu'aucune image ne saute accidentellement la compression. Un gain de temps réel.

Accessibilité

Support pour l'accessibilité

Les technologies d'assistance interagissent de différentes manières pour interagir avec les navigateurs et le code. Comme il n’est toujours pas possible d’automatiser complètement les lecteurs d’écran et les logiciels de contrôle vocal, il nous reste à faire des tests manuels. Et c’est là que a11ysupport.io entre en jeu.

Initialement créé par Michael Fairchild, cet Le site Web axé sur la communauté vise à informer les développeurs de ce qui est supporté par l'accessibilité. C’est un projet actif et les contributions sont toujours les bienvenues, alors commencez les tests!

Vérificateur de contraste de boutons

Vos boutons sont-ils suffisamment contrastés? Le vérificateur de contraste de bouton construit par les employés d'Aditus vous aide à le découvrir. Entrez votre domaine et l'outil vérifie si les boutons du site sont conformes à WCAG 2.1.

pour des résultats réalistes, le vérificateur teste non seulement l'état par défaut des boutons, mais prend également en compte les états de survol et de mise au point, ainsi que l'arrière-plan adjacent. Un détail intéressant: chaque fois que vous numérisez une page, les résultats sont stockés dans une URL unique que vous pouvez partager avec votre équipe. Une aide précieuse.

Apprendre à coder

Améliorez vos compétences en codage

Animation CSS, Grid, Flexbox… Le Web évolue à un rythme tel qu’il ya toujours quelque chose de nouveau à apprendre. Et bien, quelle meilleure occasion pourrait-il y avoir pour plonger enfin dans le sujet que vous vouliez aborder aussi longtemps qu'avec un petit jeu amusant?

Si vous avez toujours voulu conquérir l'espace profond et apprendre les bases de l'animation d'objets en CSS, le cours CSS Animation de HTML Academy comporte des tâches intéressantes. vous à résoudre. Pour aider vos compétences de grilles CSS à s’épanouir et à s’épanouir, il existe un Grid Garden où vous utilisez CSS pour cultiver un jardin à carottes.

Si les zombies vous attendent, essayez Flexbox Zombies . Il vous apportera l’expertise nécessaire pour survivre à la mort, tout cela grâce à vos compétences en matière de codage! Ou essayez de guider une petite grenouille amicale vers son nénuphar avec Flexbox dans Flexbox Froggy pour enfin vous familiariser avec le concept Flexbox. Flexbox Defence est un autre jeu d’apprentissage de Flexbox intéressant à ne pas négliger. Enfin, si vous avez des difficultés avec les sélecteurs CSS, il existe CSS Diner pour vous apprendre à sélectionner des éléments. Maintenant, qui a dit que l’apprentissage ne pouvait pas être amusant?

Comment écrire un meilleur code JavaScript

Le langage JavaScript est l’un des langages de programmation les plus populaires et, même après plus de 20 ans d’existence, il est en constante évolution. Mais comment pouvez-vous vous améliorer?

Ryland Goldstein partage certaines des principales méthodes qu'il utilise pour écrire un meilleur code JavaScript – en utilisant TypeScript pour améliorer la communication en équipe et rendre le refactoring plus facile ou lisser votre code et imposer un style, par exemple. Comme Ryland le fait remarquer, il s'agit d'un processus continu, prenez donc les choses une étape à la fois et, avant de vous en rendre compte, vous serez un as de JavaScript.

Découvrez Regex avec des mots croisés

Si vous avez un bonbon spot pour les énigmes et les énigmes logiques, alors Regex Crossword est pour vous. Regex Crossword est un jeu de mots croisés où les indices sont définis à l'aide d'expressions régulières – qui a dit que les expressions rationnelles ne pouvaient pas être amusantes?

Il existe différents niveaux de difficulté pour vous permettre de commencer à couper les dents avec des mots croisés simples pour apprendre les rudiments ou pour mettre vos compétences à l'épreuve alors que les énigmes s'agrandissent et deviennent plus complexes. . Un générateur de casse-tête est également inclus, donc si vous avez envie de créer vos propres casse-tête pour que les autres résolvent leurs problèmes, rien ne vous retient.

Et, le reste!

Conseils pour maîtriser votre prochain entretien d'embauche technique [19659021] Le processus de recherche d'emploi peut être intimidant, surtout si vous êtes sur le point de commencer votre carrière. Pour vous aider à bien relever le défi, Yangshun Tay a élaboré le Tech Interview Handbook .

. Cette ressource gratuite vous guide tout au long du processus. que vous travailliez sur votre CV ou que vous négociez avec l'employeur une fois l'entretien terminé, les questions pratiques préparées vous mettent en forme pour les questions techniques et comportementales qui pourraient apparaître tout au long du processus. Une bonne lecture, pas seulement pour les futurs professionnels du Web.

Dans les coulisses des équipes de conception

Bien que de nombreuses entreprises soient motivées par les fonctionnalités et la technologie, il n’est pas rare de trouver des débats sur l’importance du design. Cela se reflète dans les études de cas annoncées publiquement, les systèmes de conception, les révisions de conception à grande échelle et, plus récemment, dans les pages dédiées aux équipes de conception – que ce soit Uber Google Spotify Medium Dropbox Slack Amazon ou AirBnB .

Récemment, Intercom a annoncé Intercom.Design une ressource dédiée à ses équipes de concepteurs, produits, processus et études de cas publiques, y compris les recommandations internes de l'interface utilisateur et les attentes de différents niveaux de concepteurs de produits et de contenus. De merveilleuses sources d'inspiration pour améliorer votre équipe de conception et explorer les coulisses de la conception et de la fabrication des produits. (Merci pour le conseil, Kostya Gorskiy!)

Visages générés par une IA libres de droits

100 000 photos de visages de différents âges, sexes et appartenances ethniques. En réalité, si les visages n'existent pas, ce sont des produits de l'intelligence artificielle.

Le projet Generated Photos a fait exactement cela. Avec l'aide de l'IA, une équipe de 20 professionnels de l'IA et de la photographie ont généré ce nombre impressionnant de visages de haute qualité que vous pouvez télécharger et utiliser gratuitement dans vos projets (à des fins non commerciales). Mais les projets vont encore plus loin: l'objectif est de créer une API qui permette à quiconque d'utiliser l'intelligence artificielle pour générer des visages intéressants et diversifiés pour ses projets, maquettes et présentations – sans se soucier des questions de droits d'auteur et de droits de distribution.

Des palettes de couleurs monochromes simplifiées

Si vous avez déjà essayé de générer une palette de couleurs monochromatique cohérente, sachez que cela peut être une tâche fastidieuse. Après avoir de nouveau manipulé des commandes infinies de copier-coller pour créer une belle palette, Dimitris Raptis a décidé de changer cela. Sa solution: CopyPalette .

CopyPalette vous permet de créer facilement des palettes SVG. Tout ce que vous avez à faire est de sélectionner une couleur de base, le rapport de contraste des nuances et le nombre de variations de couleur souhaitées. L’outil génère une palette de couleurs parfaitement équilibrée que vous pouvez copier et coller dans vos couleurs préférées. outil de conception. Un véritable gain de temps.

The Art Of Symbols

Depuis plus de 40 000 ans, les humains utilisent des symboles pour communiquer des idées complexes. Et en tant que concepteurs, nous le faisons encore aujourd'hui.

Art of Symbols un projet de 100 jours mené par l'équipe de conception d'Emotive Brand, avait pour objectif d'explorer la manière dont les symboles antiques informent le design de marque contemporain. Après tout, bon nombre de ces symboles qui font partie de notre vocabulaire en tant que concepteurs d’aujourd’hui existaient déjà il y a longtemps, même dans les peintures rupestres et les gravures. Si vous êtes curieux d’en savoir plus sur leurs origines et leur signification et si vous êtes intéressé par de jolis yeux, ce projet vous occupera un bon bout de temps.

Des modèles plus intelligents pour concevoir avec une intelligence artificielle

Le pouvoir de l’intelligence artificielle est énorme, mais cela entraîne aussi des défis éthiques et beaucoup de responsabilités. Responsabilité de l'utilisateur qui risque d'être confus et effrayé par l'intelligence artificielle si un concept clair fait défaut, qui peut vouloir choisir la quantité d'IA avec laquelle il interagit et qui doit être protégé contre les pratiques préjudiciables.

Smarter Patterns de Myplanet

S'appuyant sur ses recherches sur l'utilisation et la compréhension de l'intelligence artificielle aujourd'hui, le studio de logiciels Myplanet a mis en place Smarter Patterns une bibliothèque pour démarrer discuter de ces sujets et aider les concepteurs à relever les défis de l’intelligence artificielle dans la conception des interfaces. La ressource comporte actuellement 28 modèles qui permettent aux concepteurs de créer des expériences d'IA significatives.

Accès instantané hors ligne avec Dash

Si vous êtes un de ceux qui ne peuvent tout simplement pas dormir dans un avion et qui souhaitent un super-productif Pour effectuer certains travaux à la place, vous êtes probablement toujours à la recherche d’outils qui vous permettront de traverser ces vols, même avec un WiFi inégal. Ne cherchez plus, nous sommes tombés sur un site très utile!

Au cas où vous n'en auriez jamais entendu parler Pourtant, Dash est un navigateur de documentation API gratuit et à code source ouvert qui donne à votre iPad et à votre iPhone un accès hors ligne instantané à plus de 200 ensembles de documentation API et plus de 100 feuilles de mise à jour. Des personnes telles que Sarah Drasner l'utilisent surtout la veille d'un long voyage; tout ce que vous avez à faire est de télécharger tous les documents dont vous avez besoin, et vous êtes prêt! Vous pouvez même générer vos propres jeux de documents ou demander leur inclusion.

Une collection de sites personnels

Internet étant ancré dans notre quotidien, quel est le meilleur moyen d’exprimer vos idées, vos pensées et vos sentiments? Un site personnel, bien sûr! Et comme ils sont nombreux, Andy Bell a décidé de conserver une collection afin que les gens puissent découvrir le travail de chacun et même recevoir les mises à jour provenant de leurs flux RSS.

Si vous souhaitez que votre site rejoigne la collection, vous trouverez des instructions simples sur GitHub apparaissent dans la liste une fois votre demande approuvée. Quelle belle façon de trouver des gens qui partagent vos intérêts et apprennent de nouvelles façons de développer et de concevoir des sites Web!

De Smashing With Love

Un mois peut être long à rester au courant, alors s'il vous plaît abonnez-vous à notre newsletter bi-hebdomadaire si vous ne l'avez pas encore fait. Chaque numéro est écrit et édité avec amour et soin.

Vous pouvez également nous suivre sur Twitter Facebook et LinkedIn – n'hésitez pas à contacter et partagez vos projets avec nous! Nous aimons avoir de vos nouvelles!

Continuez votre excellent travail, tout le monde! Vous écrasez!

(vf, ra, cm, il)