Vous apportant le meilleur de

Eh bien, je suppose que nous pouvons tous convenir que cette année a été quelque chose de très intéressant. Nous avons tous été mis au défi d'une manière ou d'une autre, et la nouvelle norme n'est pas tout à fait l'ancienne. Pourtant, l'accent est toujours mis sur la sécurité et le bien-être de tous, ainsi que sur le partage des pensées et des sentiments sur le bien-être créatif au sein de la communauté.

Malheureusement, les effets du COVID-19 sont toujours aussi vastes -reaching à travers le monde, de sorte que l'équipe Smashing a dû apporter de grands changements à nos plans cette année. Comme l'explique Rachel Andrew, rédactrice en chef du Smashing Magazine:

«La pandémie a rendu la vie imprévisible et effrayante pour de nombreuses personnes. Chez Smashing, nous avons dû trouver très rapidement de nouvelles façons de fournir un excellent contenu – d'une manière qui soutienne l'entreprise, mais aussi nos conférenciers et nos animateurs d'atelier. Nous avons été encouragés par l'enthousiasme de la communauté, les messages de soutien et la volonté d'essayer ces nouveaux formats. »

Sur cette note, nous avons décidé de prendre toutes les dates de 2020 en ligne . Nous espérons vous y voir!

Nous sommes en mesure de faire toutes ces choses merveilleuses grâce à votre soutien, et nous l'apprécions vraiment et sincèrement.

Ateliers interactifs pour vous aider à améliorer vos compétences

Avec en ligne ateliers, nous visons à vous offrir la même expérience et l'accès à des experts que dans un atelier en personne, sans avoir à quitter votre bureau. Ainsi, vous pouvez apprendre à votre rythme, à votre rythme et suivre des exercices interactifs en cours de route.

Nous avons fait de notre mieux pour vous proposer un mélange d'ateliers liés à la conception et à l'interface:

Asseyez-vous, détendez-vous et écoutez!

Le Smashing Podcast est le moyen idéal de prendre un peu de Smashing avec vous le matin faire la navette, lorsque vous vous entraînez à la salle de sport ou simplement laver la vaisselle. Toutes les deux semaines, Drew McLellan discute avec des experts en conception et développement de leur travail sur le Web. Vous pouvez vous abonner dans votre application préférée pour obtenir de nouveaux épisodes dès qu'ils sont prêts.

Y a-t-il un sujet que vous aimeriez entendre et en savoir plus? Ou peut-être que vous ou quelqu'un que vous connaissez aimeriez parler d'un sujet lié au web et au design qui vous tient à cœur? Nous aimerions recevoir de vos nouvelles! N'hésitez pas à nous contacter sur Twitter et nous ferons de notre mieux pour vous répondre dans les plus brefs délais.

Notre plus récent ajout à la bibliothèque Smashing

Nous avons expédié les premiers exemplaires de Cliquez! Comment encourager les clics sans astuces louches il y a quelques semaines, et si vous avez précommandé une copie du livre, vous devez avoir reçu une note personnelle de l'auteur lui-même, Paul Boag. C'était amusant de suivre les réactions des médias sociaux – Ari Stiles a partagé quelques tweets dans son récent post.

Cliquez! arrive à un moment où beaucoup d'entre nous ont besoin un «coup de pouce» créatif. Le livre nous incite à penser différemment nos routines de création de sites et de services en ligne – ce qui fonctionne et ce qui ne fonctionne pas. Vous pouvez sauter à la table des matières ou si vous souhaitez jeter un coup d'œil en premier, vous pouvez télécharger un extrait PDF gratuit tout de suite (17,3 Mo). Bonne lecture!

Sujets tendances sur Smashing Magazine

Comme vous le savez peut-être déjà, notre objectif est de publier un nouvel article chaque jour dédié à divers sujets d'actualité dans l'industrie du Web. En voici quelques-unes que nos lecteurs ont le plus appréciées et qui ont recommandé davantage:

Les meilleurs choix de notre newsletter

Nous allons être honnêtes: toutes les deux semaines, nous avons du mal à garder les Smashing Newsletter numéros à un longueur modérée – il y a juste donc beaucoup de gens talentueux qui travaillent sur des projets brillants! Félicitations à toutes les personnes impliquées!

Intéressé par le parrainage? N'hésitez pas à consulter nos options de partenariat et contactez l'équipe à tout moment – ils seront sûrs de vous recontacter immédiatement.

] PS Un grand merci à Cosima Mielke pour avoir écrit et préparé ces articles!

Polices gratuites avec personnalité

La typographie est un puissant outil de communication, un moyen d'exprimer des idées et un déclencheur de la créativité. Sur la base de cette compréhension, la fonderie de type basée en Argentine Rostype crée des polices qui sont gratuites à utiliser pour tout le monde, dans des projets personnels et commerciaux.

Il y a actuellement 15 polices disponibles, et chacune l'un d'eux brille avec une personnalité unique. Certains sont conçus avec un accent particulier sur la lisibilité, d'autres sont les polices d'affichage parfaites, conçues pour se démarquer, certaines sont d'inspiration rétro, d'autres plus futuristes et dynamiques. Il existe même une police de caractères inspirée du verrouillage du coronavirus . Un coffre au trésor si vous recherchez une police de caractère un peu plus distinctive.

La création d'une police de caractères

Il est toujours judicieux de jeter un coup d'œil dans les coulisses de la façon dont les autres équipes de conception travaillent et pensent. Chris Bettig, directeur du design chez YouTube, partage maintenant une étude de cas intéressante sur la façon dont lui et son équipe ont créé YouTube Sans une police sur mesure qui fait également office d'ambassadeur de la marque.

Avant que la nouvelle police ne fasse son apparition, YouTube a utilisé le bouton de lecture emblématique et une version modifiée de Alternate Gothic pour le mot-symbole. Cependant, comme l'explique Chris Bettig, il n'y avait pas de directives typographiques claires. Conçu pour fonctionner sur toute la gamme de produits YouTube et reflétant la vision du monde de la plate-forme ainsi que la communauté des créateurs qui l'utilisent, YouTube Sans a changé cela. Pour plus d'informations sur la façon dont la police a pris vie et les défis rencontrés par l'équipe de conception, assurez-vous de consulter l'étude de cas.

Gérer les incohérences de rendu des polices du navigateur

Nous connaissons tous ces moments où un bogue nous dérange littéralement, mais nous n'arrivons pas à comprendre comment le résoudre. Stephanie Stimac a récemment rencontré un tel problème: lorsqu'elle a ouvert son site Web personnel dans Safari, elle a remarqué à quel point le titre de sa page était radicalement différent par rapport aux autres navigateurs.

Mesures de performances continues simplifiées

Lors du lancement d'un site Web, il est courant d'exécuter des tests de performances pour s'assurer que le site est rapide et respecte les meilleures pratiques. Mais comment pouvons-nous le maintenir rapide dès que les déploiements ont lieu tous les jours? Speedlify est la réponse de Zach Leatherman à cette question.

Speedlify est un site statique publié en tant que référentiel open source qui utilise Lighthouse et Axe pour mesurer en continu les performances et publier les statistiques de performances – à la plupart une fois par heure et automatiquement une fois par jour. Vous pouvez l'exécuter manuellement, localement sur votre ordinateur et archiver les données dans votre référentiel, ou, si vous utilisez Netlify, il peut s'exécuter entièrement de manière autonome.

Pour trouver la raison de ces incohérences de rendu, Stephanie a commencé à disséquer les différences entre la feuille de style de l'agent utilisateur et les propriétés CSS calculées et s'est rapidement retrouvée loin dans le trou du lapin, comparant les comportement déroutant avec Chrome, Firefox et Edge. Il n'y a pas de réponse simple à la question de savoir quel navigateur gère réellement le style correctement, mais après avoir effectué un certain nombre de tests, Stephanie a découvert comment empêcher le navigateur de décider comment mettre en gras les polices: vous devez définir explicitement le poids de la police avec valeurs numériques. Un petit détail qui fait toute la différence.

L'anatomie d'une notification push

Les notifications push ont été introduites pour la première fois sur iOS en 2009, la diffusion Web a suivi cinq ans plus tard. Aujourd'hui, ils sont pris en charge sur de nombreuses plates-formes et navigateurs – d'iOS et Android à Amazon Echo, Windows, Chrome, Safari, Firefox, Edge, etc. Chacune de ces plates-formes est cependant un peu différente, ce qui complique la tâche des concepteurs de savoir ce qui se passe exactement dans une notification push.

A rappel utile vient de Lee Munroe. Il a résumé le nombre de lignes de texte dont vous avez besoin sur quelle plateforme, les exigences pour les images, s'il y a des restrictions de caractères et d'autres détails qui peuvent être difficiles à retenir. L'aperçu est également utile pour évaluer à quoi ressemblera votre notification sur les systèmes d'exploitation auxquels vous n'avez pas accès. Un pour les signets.

Modification des animations d'images clés en direct

Lorsque vous créez des animations, il est toujours utile de voir l'animation en action lorsque vous la modifiez. Malheureusement, cela implique également beaucoup de va-et-vient entre votre éditeur de texte et le navigateur. Mitch Samuels était fatigué de le faire, alors il a construit un outil pour lui faire gagner du temps: Keyframes.app .

L'outil vous permet de créer une animation d'images clés CSS avec une chronologie visuelle éditeur. Vous pouvez ajouter des étapes à une chronologie, utiliser l'interface utilisateur simple pour ajuster les propriétés CSS que vous souhaitez que votre élément cible ait à chaque étape, et l'aperçu animé sera mis à jour en direct. Une fois que vous êtes satisfait du résultat, vous pouvez copier le CSS et l'utiliser immédiatement dans votre projet. Keyframe.app est également disponible en tant qu'extension Chrome . Un véritable gain de temps.

Déterminer le meilleur outil de création pour votre projet

Les outils de création visent à faciliter la vie des développeurs en rationalisant les flux de travail et en codifiant les meilleures pratiques. Cependant, choisir le bon outil de construction pour un projet peut être un défi. Pour vous aider à prendre une décision plus éclairée, des membres de l'équipe des relations avec les développeurs de Google Chrome ont créé Tooling.Report .

Basé sur une suite de tests pour évaluer le respect d'un outil de construction aux meilleures pratiques, Tooling.Report vous donne un aperçu des différents bundlers et des fonctionnalités qu'ils prennent en charge. Ce n'est pas seulement un moyen rapide de déterminer le meilleur outil pour un projet, mais aussi une référence pour incorporer les meilleures pratiques dans les bases de code existantes – dans le but à long terme d'améliorer tous les outils de construction et, ainsi, la santé du Web.

Transformer une image plate en affiche pliée

Certaines expériences de codage laissent même les développeurs les plus expérimentés en admiration. Et même si c'est quelque chose que vous n'utiliserez pas tous les jours, il est toujours inspirant de voir ses collègues développeurs sortir des sentiers battus et explorer ce qui est possible avec les technologies Web. L'effet d'affiche pliée que Lynn Fisher a créé avec du CSS pur est une telle expérience.

Avec un peu de CSS, Lynn fait ressembler votre image moyenne à une affiche pliée. Avec des plis de papier sur l'image horizontalement et verticalement et une ombre d'arrière-plan qui donne à l'affiche un effet 3D. Un petit projet sympa qui montre magnifiquement ce qui peut être réalisé avec CSS.

Trouver un équilibre entre les éléments de sélection natifs et personnalisés

Comment créer un élément de sélection stylisé qui est non seulement stylisé à l'extérieur mais à l'intérieur, aussi? Dans son article « Trouver un équilibre entre les éléments de sélection natifs et personnalisés », Sandrina Pereira partage sa tentative de créer une sélection attrayante et accessible qui bénéficie d'autant de fonctionnalités natives que possible.

L'idée est de rendre la sélection «hybride», ce qui signifie qu'il s'agit à la fois d'une sélection native et d'une sélection alternative de style dans un même motif. Les utilisateurs de la technologie d'assistance obtiendront un élément natif mais lorsqu'une souris est utilisée, l'approche s'appuie sur une version stylisée conçue pour fonctionner comme un élément de sélection.

Positionnement hybride avec des variables CSS et max ()

Certaines idées vous obligent à sortir des sentiers battus et à explorer de nouvelles voies pour les réaliser. Imaginez cet exemple: vous voulez avoir une navigation sur la page sur le côté, juste sous l'en-tête lorsqu'elle défile jusqu'en haut. Il est censé défiler avec la page lorsque l'en-tête n'est pas visible et rester en haut pour le reste du défilement. C'est exactement ce que Lea Verou voulait réaliser dans un projet récent.

On pourrait dire que c'est un cas de position: collant mais il existe une approche plus fine pour faire le travail, comme le montre Lea. Sans JavaScript. Sa solution repose sur des variables CSS et la nouvelle fonction max () qui vous permet d'appliquer des contraintes min / max aux propriétés CSS. Une solution de rechange est utile dans les navigateurs qui ne prennent pas encore en charge max () .

Histoires du côté obscur du Web

Pirates informatiques, violations de données, activités gouvernementales fantômes, cybercriminalité, hacktivisme – il se passe beaucoup de choses du côté obscur du Web. Mais qui sont les personnes derrière ces activités? Et quelle est leur «mission»? Jack Rhysider a dédié un podcast aux histoires qui se produisent sur les parties cachées du réseau: Darknet Diaries .

Peu importe si c'est l'histoire d'un joueur qui trouve un bug dans un machine de vidéo poker qui lui permet de gagner des sommes d'argent excessives, l'histoire d'un testeur de pénétration pénétrant dans des bâtiments ou un État-nation piratant une entreprise au sein d'une autre nation, le Darknet Diaries regorge d'informations captivantes sur un monde secret. Le podcast adhère aux normes journalistiques en vérifiant les faits et en fournissant des informations éthiques, et bien que tout cela soit un grand divertissement, il vise également à expliquer la culture autour de la cybersécurité pour rendre les auditeurs plus sensibles et informés des citoyens de leur vie numérique. Soyez à l'écoute.

(cm, vf, ra)