Compte à rebours des lots de joie fracassante et d'ateliers en 2021

À 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…
En savoir plus sur
Iris
…

Cette année a été toute une aventure – raison de plus d’attendre avec impatience une nouvelle année avec de nouveaux départs, non? Eh bien, nous ne saurons jamais vraiment ce qui nous attend dans les mois à venir, mais ce que je sais, c’est que tout le monde sur cette planète ne peut faire que tant de choses et vraiment de son mieux. Cela a certainement été une année de moins de hauts et de plus bas pour tant de gens à travers le monde, et nous espérons qu'avec tout ce que nous avons fait à Smashing a contribué à rendre la vie au moins un peu plus facile.

Planifiez votre année De l’avance avec les ateliers en ligne

Avez-vous déjà participé à l’un de nos ateliers? L'équipe Smashing Events est ravie à chaque fois qu'elle organise un atelier avec tous les merveilleux participants du monde entier qui se réunissent pour apprendre ensemble. Tant d'idées ont vu le jour grâce aux sessions de conception et de codage en direct et il y a beaucoup de gens qui ont aussi trouvé de nouveaux amis!

Ça va encore mieux: nous avons maintenant des lots d'ateliers parmi lesquels vous pouvez choisir trois cinq ou même dix billets d'atelier pour les ateliers de votre choix – en cours, à venir ou en cours à l'avenir!

Nous espérons que vous trouverez dans la liste ci-dessus au moins un atelier qui correspond à vos projets et à votre cheminement de carrière, et sinon, veuillez nous contacter sur Twitter et nous promettre de faire de notre mieux pour y parvenir. N'hésitez pas non plus à vous abonner ici si vous souhaitez être l'un des premiers à être averti de l'arrivée de nouveaux ateliers, et avoir également accès aux tarifs préférentiels – nous en aurons beaucoup de goodies à venir très bientôt!

Les membres ont accès à des vidéos et plus encore

Nous sommes fiers d'avoir une famille de membres en constante croissance qui aime le bon contenu, apprécie des réductions amicales et faites partie de notre belle communauté Web. Si vous n'êtes pas encore impliqué, nous serions ravis que vous vous joigniez à nous et deveniez membre aussi! Il existe des remises constantes sur les livres imprimés, les offres d'emploi, les billets de conférence et votre soutien nous aide vraiment à payer les factures. ❤️

Smashing Podcast: Connectez-vous et inspirez-vous

Cette année, nous avons publié un nouvel épisode Smashing Podcast toutes les deux semaines, et les retours ont été géniaux ! Avec plus de 56k téléchargements (un peu plus d'un millier par semaine, et de plus en plus!), Nous avons eu 34 invités sur le podcast avec des antécédents différents et donc beaucoup à partager!

Si vous ne voyez pas un sujet que vous aimeriez entendre et en savoir plus, n'hésitez pas à contacter l'hôte Drew McLellan ou contactez-nous via Twitter à tout moment – nous serions ravis de

Restez à l'écoute pour le prochain épisode à paraître très bientôt!

Smashing Newsletter: Best Picks

Avec notre newsletter hebdomadaire nous visons à vous apporter du contenu utile et à partager toutes les choses intéressantes sur lesquelles les gens travaillent dans l'industrie du Web. Il y a donc beaucoup de gens talentueux qui travaillent sur des projets brillants, et nous apprécierions que vous nous aidiez à faire passer le mot et à leur donner le crédit qu'ils méritent!

Aussi, en vous abonnant il n'y a pas d'envois de tiers ni de publicité cachée impliqués, et votre soutien nous aide vraiment à payer les factures. ❤️

Intéressé à parrainer? N'hésitez pas à consulter nos options de partenariat et contactez l'équipe à tout moment – ils ne manqueront pas de vous répondre dès qu'ils le pourront.

Preventing Layout Changements avec CSS Grid

Ce n'est pas une nouvelle que CSS Grid est un outil fantastique pour créer des mises en page complexes. Mais saviez-vous que cela peut également vous aider à éviter les changements de disposition? Quand Hubert Sablonnière découvrit un problème de décalage de mise en page avec un état de basculement sur un composant d'interface utilisateur sur lequel il travaillait, il trouva une solution: la « Technique d'empilement de grille anti-décalage de mise en page ».

Par rapport à la résolution du décalage de mise en page avec un positionnement absolu, la technique basée sur la grille de Hubert prend en charge des situations complexes qui nécessitent plus de deux panneaux. Autre avantage: vous n’avez pas besoin de supposer quel panneau doit guider la taille de l’ensemble du composant. Si vous voulez approfondir, Hubert a écrit tout ce que vous devez savoir pour éviter les changements verticaux et horizontaux dans un article de blog pratique . (cm)

Fixation des en-têtes et des liens de saut

Les liens de saut en combinaison avec des en-têtes fixes peuvent causer une certaine frustration. Vous avez peut-être déjà rencontré le même problème: lorsque vous cliquez dessus, votre lien de saut vous amène à l'élément souhaité, mais un en-tête fixe le cache. Dans le passé, des hacks sauvages étaient nécessaires pour résoudre le problème. Heureusement, il existe maintenant une solution CSS simple et bien prise en charge .

The trick: scroll-margin -top . Attribuez-le à vos en-têtes, et la position : l’en-tête fixe ne les gênera plus lorsque vous y accédez avec un lien de saut. Une courte ligne de code qui fait une énorme différence. (cm)

Fluid Typography With clamp ()

En ce qui concerne la mise à l'échelle des fluides, CSS présente de nouvelles fonctionnalités intéressantes: clamp () ] min () et max () . Ils plafonnent et mettent à l'échelle les valeurs à mesure que le navigateur se développe et se réduit. min () et max () renvoient les valeurs minimales et maximales respectives à tout moment, tandis que clamp vous permet de passer à la fois un minimum et un maximum plus un taille préférée pour le navigateur à utiliser.

Comme le souligne Trys Mudford, clamp () est particulièrement pratique lorsque vous voulez une grande fluidité typographie sans être précis à 100% sur la relation entre les différentes tailles. Dans son article approfondi sur la nouvelle fonctionnalité, il partage de précieux conseils pratiques pour utiliser efficacement clamp () . (cm)

Enregistreur d'écran et outil d'annotation Open Source

Si vous cherchez un outil gratuit et facile à utiliser pour enregistrer votre écran, il peut être difficile de trouver quelque chose de plus puissant que l'enregistreur d'écran open source d'Alyssa X Screenity .

Peu importe si vous souhaitez donner un retour contextuel sur un projet, fournissez des explications détaillées , ou présenter votre produit à des clients potentiels, Screenity offre un certain nombre de fonctionnalités pratiques pour capturer, annoter et éditer vos enregistrements – sans limite de temps. Vous pouvez dessiner sur l'écran et ajouter du texte et des flèches, par exemple, mettre en évidence les clics et vous concentrer sur la souris, pousser pour parler, et bien plus encore. Screenity est disponible pour Chrome . (cm)

Un sélecteur de dates convivial

Les sélecteurs de dates peuvent être difficiles à obtenir. Un bel exemple de sélecteur de date convivial et entièrement accessible vient de Tommy Feldt.

Grâce à Chrono.js, il prend en charge les entrées en langage naturel, de sorte qu'un utilisateur peut taper quelque chose comme «demain» , «2 décembre» ou «dans 5 jours» pour sélectionner une date. Les boutons de raccourci permettent également de sélectionner les dates les plus courantes. Le sélecteur de date est entièrement accessible avec le clavier et les lecteurs d'écran (il existe même une fonction d'aide à la demande pour les utilisateurs de lecteurs d'écran et de clavier) et se dégrade gracieusement lorsque JavaScript ou CSS ne sont pas disponibles. Une preuve de concept très inspirante. (cm)

Devenez un explorateur Jamstack

Le Jamstack est encore un territoire inexploré pour vous? Jamstack Explorers aide à changer cela. Sa mission: vous apprendre à créer pour le Web avec des outils et des techniques modernes.

Vous pouvez choisir parmi trois cours, suivre vos progrès et gagner des récompenses comme vous parcourez l'univers Jamstack. Tara Z. Manicsic vous guide à travers les étendues sauvages d'Angular, Phil Hawksworth vous apprend à servir et à suivre plusieurs versions de votre site avec Netlify, et Cassidy Williams vous guide à travers tous les éléments essentiels de Next.js. Une fois les trois missions terminées, non seulement un certificat vous attend, mais vous pouvez vous appeler un Jamstack Explorer prêt à utiliser les derniers outils pour créer des expériences robustes, performantes et sécurisées. (cm)

Faire fonctionner la conception à distance

Révisions de conception, sprints, commentaires – la conception est un effort de collaboration qui apporte de nombreux défis lorsque vous le faites à distance. Les employés d'InVision ont rassemblé une collection de ressources utiles pour vous aider, vous et votre équipe, à relever ces défis.

Le Le contenu couvre trois des aspects les plus délicats du travail à distance: favoriser la créativité, favoriser la collaboration et rester concentré. Pour plus de bonnes pratiques pour gérer une équipe de conception à distance, InVision a également publié un eBook gratuit tiré de leur propre expérience de travail à distance avec 700 employés répartis dans 30 pays et aucun bureau. (cm)

Compte à rebours plein écran pour rester sur la bonne voie

Il peut être difficile de respecter le calendrier lorsque vous exécutez un long appel vidéo ou donnez une conférence ou un atelier. Pour vous aider à vous assurer que la session reste sur la bonne voie, Koos Looijesteijn a construit Big Timer .

Le compte à rebours audacieux mais minimaliste minutes restantes directement dans la fenêtre de votre navigateur – et même si vous fermez accidentellement l'onglet du navigateur ou que vous devez redémarrer votre appareil, cela prendra en compte la perturbation. Les raccourcis clavier facilitent le réglage de la durée et la mise en pause ou l'arrêt du compte à rebours. Un pour les signets. (cm)

Des sons et de la musique pour vous aider à vous concentrer

Êtes-vous le genre de personne qui n'arrive pas à se concentrer quand il est calme autour d'eux? Ensuite, l'un des outils suivants peut vous aider à devenir plus productif. Si vous manquez les sons familiers du bureau lorsque vous travaillez à la maison, I Miss The Office apporte une atmosphère de bureau dans votre bureau à domicile – avec des collègues virtuels qui produisent des sons typiques comme la frappe, le grincement des chaises ou le bouillonnement occasionnel du refroidisseur d'eau.

Les sons du bureau vous ont toujours plus distraits que vous avez aidés à vous concentrer? Alors Noizio pourrait être pour vous. L'application vous permet de mélanger les sons de la nature et de la ville pour créer votre son ambiant personnel. Une autre approche pour augmenter la concentration avec le son vient de Brain.fm . Leur équipe de scientifiques, de musiciens et de développeurs conçoit une musique fonctionnelle qui affecte le cerveau pour atteindre l'état mental souhaité. Enfin, Focus @ Will est également basé sur les neurosciences et contribue à accroître la concentration en modifiant les caractéristiques de la musique aux bons intervalles de temps. Des alternatives prometteuses à votre playlist habituelle. (cm)

The Web Almanac 2020

En regardant en 2020, quel est l'état du Web cette année? Le Web Almanac annuel donne des réponses approfondies à cette question, combinant les statistiques brutes et les tendances de l'archive HTTP avec l'expertise de la communauté Web. Les résultats sont étayés par des données réelles provenant de plus de 7,5 millions de sites Web et d’experts du Web de confiance.

22 chapitres composent l’almanach de cette année. Ils sont divisés en quatre parties – contenu, expérience, publication, distribution – et chacune d'elles est explorée sous différents angles. Un regard perspicace sur l'état de des performances est également inclus, bien sûr. (cm)

Générez une demande de carte de votre site

D'où proviennent tous les octets transmis sur votre site? Analyser en détail les composants tiers est une tâche fastidieuse, mais c'est déjà un bon début pour savoir quels tiers se trouvent sur votre site – et comment ils y sont arrivés.

L'outil générateur de carte de requête de Simon Hearne visualise une carte de nœuds de toutes les requêtes sur une page pour une URL donnée. La taille des nœuds sur la carte est proportionnelle au pourcentage du total des octets et, lorsque vous survolez un nœud, vous obtenez des informations sur sa taille, sa réponse et ses temps de chargement. Fini les mauvaises surprises. (cm)

Modifions nos ensembles JavaScript!

Il y a de fortes chances qu'avec votre code JavaScript existant depuis un certain temps, vos ensembles JavaScript soient un peu obsolètes. Vous avez peut-être des polyfills obsolètes ou vous utilisez peut-être une syntaxe JavaScript légèrement obsolète. Mais maintenant, il existe un petit outil qui vous aide à identifier ces goulots d'étranglement et à les résoudre définitivement.

EStimator calcule la taille et l'amélioration des performances qu'un site pourrait obtenir en passant à la syntaxe JavaScript moderne. Il montre quels bundles pourraient être améliorés et quel impact cette modification aurait sur vos performances globales. Le code source est également disponible sur GitHub . (vf)

(cm, vf, ra)