Vous apportant le meilleur de Smashing – Smashing Magazine


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

Quoi de neuf chez Smashing? Quand est le prochain événement? Avez-vous manqué quelque chose? Ne vous inquiétez pas, vous trouverez tout ce qui est rassemblé ici au même endroit, vous n’avez donc pas besoin d’ouvrir une centaine d’onglets. (Oui, ça a été si occupé!)

Eh bien, je suppose que nous pouvons tous convenir que cette année a été quelque chose. 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 normale. Pourtant, l’accent primordial demeure sur la sécurité et le bien-être de tous, ainsi que sur l’importance de partager les pensées et les sentiments sur le bien-être créatif au sein de la communauté.

Malheureusement, les effets de COVID-19 sont toujours aussi étendus à travers le monde, de sorte que l’équipe Smashing a dû apporter de grands changements à nos plans cette année. Comme le dit bien Rachel Andrew, rédactrice en chef de 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 contenu de qualité – d’une manière qui soutienne l’entreprise, mais aussi nos conférenciers et animateurs d’ateliers. 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 2020 en ligne. Nous espérons vous voir là-bas!

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 les ateliers en ligne, 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. Vous pouvez donc 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:

Participer à un événement en ligne Smashing signifie que vous participerez à des sessions en direct, des questions-réponses, des zones de discussion, des défis et bien plus encore! Voir tous les horaires et événements →

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

le Smashing Podcast est le moyen idéal pour emporter un peu de Smashing avec vous lors de vos déplacements matinaux, lorsque vous vous entraînez à la salle de sport ou tout simplement pour faire la vaisselle. Toutes les deux semaines, Drew McLellan discute avec des experts en conception et en développement de leur travail sur le Web. Vous pouvez abonnez-vous à 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! Ne hésitez pas à contactez-nous sur Twitter et nous ferons de notre mieux pour vous répondre dans les plus brefs délais.

Faire le point sur les nouveautés de l’industrie du Web ne signifie pas que vous devez être attaché à une chaise et un bureau! Faites comme Topple the Cat: attrapez vos écouteurs et étirez vos jambes! Vous pouvez vous abonner et régler à tout moment avec l’une de vos applications préférées.

Notre ajout le plus récent à l’étagère Smashing

Nous avons expédié les premiers exemplaires de Cliquez sur! 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 sur les réseaux sociaux – Ari Stiles a partagé quelques tweets dans son récent post.

Cliquez sur! intervient à un moment où beaucoup d’entre nous ont besoin d’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 passer à la table des matières, ou si vous souhaitez d’abord jeter un œil, vous pouvez télécharger un extrait PDF gratuit tout de suite (17,3 Mo). Bonne lecture!

Comme vous le savez peut-être déjà, notre objectif est de publier chaque jour un nouvel article consacré à 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:

Meilleurs choix de notre newsletter

Nous serons honnêtes: toutes les deux semaines, nous avons du mal à garder les numéros de Smashing Newsletter à une durée modérée – il y a juste alors beaucoup de gens talentueux qui travaillent sur des projets brillants! Bravo à toutes les personnes impliquées!

Intéressé par le parrainage? N’hésitez pas à consulter notre options de partenariat et entrer en contact avec l’équipe à tout moment – ils seront sûrs de vous répondre immédiatement.

P.S. Un grand merci à Cosima Mielke pour la rédaction et la préparation de 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 créativité. Sur la base de cette compréhension, la fonderie de type basée en Argentine Rostype crée des polices gratuites pour tous, dans des projets personnels et commerciaux.

Rostype

Il existe actuellement 15 polices disponibles, et chacune d’entre elles 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 y a même une police inspiré par le verrouillage du coronavirus. Un coffre au trésor si vous recherchez une police un peu plus distinctive.

La fabrication 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 sur YouTube, partage maintenant un intéressant étude de cas sur la façon dont lui et son équipe ont créé YouTube Sans, une police sur mesure qui se fait ambassadrice de la marque.

YouTube Sans

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 l’ensemble de 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 est née et les défis auxquels l’équipe de conception a été confrontée en cours de route, 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 ne parvenons pas à trouver 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. Il est apparu beaucoup plus audacieux que prévu.

Incohérences de rendu des polices du navigateur

Mesures de performance en continu 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

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 – au plus 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. Un excellent moyen de garder les performances toujours en vue.

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 terrier du lapin, comparant le 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 correctement le style, mais après avoir exécuté un certain nombre de tests, Stephanie a découvert comment empêcher le navigateur de décider comment mettre en gras les poids de police: vous devez définir explicitement le poids de la police avec valeurs numériques. Un petit détail qui fait une différence significative.

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 pour savoir ce qui se passe exactement dans une notification push.

Conception et anatomie d'une notification push 2020

UNE rappel utile vient de Lee Munroe. Il a résumé le nombre de lignes de texte dont vous avez besoin sur quelle plate-forme, les exigences pour les images, s’il y a des restrictions de caractères et d’autres détails qui peuvent être difficiles à retenir. Cet 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 d’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 en avait assez de faire ça, alors il a construit un outil pour lui faire gagner du temps: Keyframes.app.

Keyframes.app

L’outil vous permet de créer une animation d’images clés CSS avec un éditeur de chronologie visuel. 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 que Extension Chrome. Un vrai gain de temps.

Déterminer le meilleur outil de construction 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éé Rapport d’outillage.

Rapport d'outillage

Sur la base d’une suite de tests pour évaluer dans quelle mesure un outil de construction adhère aux meilleures pratiques, Rapport d’outillage vous donne un aperçu des différents bundlers et des fonctionnalités qu’ils prennent en charge. Il s’agit non seulement d’un moyen rapide de déterminer le meilleur outil pour un projet, mais également d’une référence pour intégrer les meilleures pratiques dans les bases de code existantes – dans le but à long terme d’améliorer tous les outils de construction et, par conséquent, la santé du Web.

Transformer une image plate en une affiche pliée

Certaines expériences de codage émerveillent même les développeurs les plus expérimentés. Et même si c’est quelque chose que vous n’utiliserez pas tous les jours, il est toujours inspirant de voir d’autres développeurs sortir des sentiers battus et explorer les possibilités des technologies Web. le effet affiche pliée que Lynn Fisher a créé avec du CSS pur est une telle expérience.

Effet d'affiche pliée CSS

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 aussi à l’intérieur? 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.

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

L’idée est de rendre la sélection “hybride”, ce qui signifie qu’elle est à la fois native élément, mais lorsqu’une souris est utilisée, l’approche repose sur une version stylisée conçue pour fonctionner comme un élément de sélection. Intelligent!

Positionnement hybride avec des variables CSS et max()

Certaines idées vous obligent à sortir des sentiers battus et à explorer de nouvelles voies pour les concrétiser. Imaginez cet exemple: vous voulez avoir une page de navigation sur le côté, juste sous l’en-tête quand elle défile jusqu’en haut. Il est censé défiler avec la page lorsque l’en-tête est hors de vue 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.

Positionnement hybride avec variables CSS et max ()

Vous pourriez dire, c’est un cas de position: sticky, 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 max() fonction qui vous permet d’appliquer des contraintes min / max aux propriétés CSS. Une solution de secours aide les navigateurs qui ne prennent pas en charge max() encore. Intelligent!

Histoires du côté obscur du Web

Pirates informatiques, violations de données, activités du gouvernement fantôme, 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.

Journaux Darknet

Qu’il s’agisse de l’histoire d’un joueur qui découvre un bogue dans une machine de vidéo poker qui lui permet de gagner des sommes excessives, de l’histoire d’un testeur de pénétration par effraction dans des bâtiments ou d’un État-nation piratant une entreprise d’un autre pays, le Darknet Diaries regorge d’idées 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 sûrs de rester connecté.

Smashing Editorial
(cm, vf, ra)



Close Menu