Catégories
Plugin et site web

Quel temps pour être fracassant! – Magazine Smashing

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

Avec tant de choses, il est agréable d'avoir un aperçu des nouveautés de Smashing – le tout en un seul endroit. Poursuivez votre lecture pour découvrir ce qui a occupé l'équipe aux côtés de ressources communautaires inspirantes qui se sont hissées en tête de nos newsletters!

Pour beaucoup d’entre nous, il n’a pas fallu longtemps pour s’habituer à l’idée de conférences et d’ateliers en ligne. Elles ne sont peut-être pas aussi enrichissantes que les expériences en personne (et le seront toujours), mais elles ont aussi leurs avantages. En ligne, tout le monde peut y assister sans quitter le confort de son bureau, apprendre et réseauter à son rythme. Il est également plus abordable et rend les voyages facultatifs, ce qui rend les événements accessibles aux jeunes familles et aux personnes qui préfèrent ne pas voyager.

Nous organisons des ateliers en ligne depuis avril de cette année, et chacun d'entre eux a été une expérience incroyable. Avec de merveilleux participants du monde entier se réunissant pour apprendre ensemble, tant d'idées ont vu le jour, en particulier dans les sessions de conception et de codage en direct. Découvrez ce stylo génial créé par Cassie Evans à SmashingConf SF la semaine dernière. Rock On!

Voir le stylo (démo Smashing SF) (https://codepen.io/smashingmag/pen/pobmqyv) de Cassie Evans sur CodePen

Voir la démo Pen Smashing SF de Cassie Evans sur CodePen

Séances en direct de 2,5 heures avec des exemples pratiques, des enregistrements vidéo et une session de questions-réponses amicale. Quant à nos prochaines sessions, nous avons encore un bon nombre de places disponibles pour vous – y compris Smashing rencontre, un événement communautaire pour célébrer la saison des fêtes de cette année intéressante avec quelques heures de plaisir Smashing (plus à ce sujet ci-dessous)!

Nous espérons que vous trouverez au moins un atelier dans la liste ci-dessous qui correspond à vos projets et à votre cheminement de carrière, et nous permet également de vous faciliter la vie au moins un peu. De plus, s'il y a quelque chose qui vous manque ou que vous souhaitez voir plus, veuillez le faire contactez-nous sur Twitter et nous ferons de notre mieux pour y arriver!

Smashing Meets: 17 décembre (14 h 00-17 h 00 GMT)

Smashing Meets Happy Holiday EditionNous organisons une édition Happy Holiday pour que tout le monde participe et écoute des conférences sur des sujets dédiés au prototypage, Vue.js et CSS. Rejoignez-nous aux côtés Adekunle Oduye, Ben Hong et Michelle Barker pour des sessions de réseautage et de conception interactives. L'événement est gratuit pour nos membres et uniquement 10 USD pour tous ceux qui souhaitent participer. Enregistrez votre place dès aujourd'hui!

Pssst. Vous pouvez devenir membre et obtenir un ticket pour Smashing Meets gratuitement. De plus, vous pouvez accéder à tous les livres numériques Smashing, aux webinaires et aux réductions amicales. Un abonnement commence à seulement 3 USD par mois.

Tout TypeScript, et plus encore!

Comme pour tous les livres Smashing, nous sommes de grands fans de braquer les projecteurs sur des sujets avec lesquels la plupart des gens ont du mal. De plus, les livres de programmation ont tendance à devenir très rapidement obsolètes, nous visons donc à publier des livres intemporels. «TypeScript in 50 Lessons» en est un autre. Il fournit aux développeurs JavaScript des conseils simples, structurés et pragmatiques vers TypeScript, et explique comment donner un sens à tout cela, étape par étape.

Conçu par Rob Draper et écrit par Stefan Baumgartner, le livre est divisé en 7 chapitres sur 464 pages. Il existe de nombreux exemples de code, et pour suivre le cours, Stefan a mis en place des projets sur Code Sandbox et le terrain de jeu TypeScript, où vous pouvez jouer seul et voir comment le système de types de TypeScript se comporte. Alors qu'est-ce que tu attends? 😉

La couverture du nouveau Smashing Book, TypeScript en 50 leçons
Découvrez notre nouveau livre, «TypeScript en 50 leçons», une plongée approfondie pour comprendre ce qu'est TypeScript, comment il fonctionne et comment vous pouvez le faire fonctionner pour vous. Vous pouvez accéder à la table des matières, consulter l'aperçu PDF (3 Mo) ou obtenir le livre tout de suite.

Smashing Podcast: connectez-vous et laissez-vous inspirer

Le podcast Smashing bimensuelNous avons tous des emplois du temps 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 allons bientôt passer à notre 30e épisode du podcast Smashing – avec des gens d'horizons différents et donc beaucoup à partager!

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? Ne hésitez pas à contactez-nous sur Twitter à tout moment – nous aimerions avoir de vos nouvelles!

Newsletter Smashing: Meilleurs choix

La newsletter hebdomadaire SmashingAvec notre newsletter hebdomadaire, nous visons à vous apporter un 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!

De plus, 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é par le parrainage? N'hésitez pas à consulter nos options de partenariat et à entrer en contact avec l'équipe à tout moment – ils ne manqueront pas de vous répondre dans les plus brefs délais.

Faites passer votre flux de travail Figma au niveau supérieur

La popularité de Figma augmente et, avec sa popularité, le nombre de plugins, de modèles et de conseils et astuces généraux qui facilitent encore plus le travail avec l'outil de conception basé sur un navigateur augmente également. Si vous êtes vous-même un utilisateur Figma (ou prévoyez de le devenir), nous avons trouvé des ressources utiles qui valent la peine d'être vérifiées.

Astuces Figma impressionnantes "border =" 0

L'un d'eux est «Awesome Figma Tips», une collection de petits mais puissants conseils pour travailler plus rapidement dans Figma, compilé par Trong Nguyen. Si la conception sur laquelle vous travaillez est basée sur un système de conception, le Gestionnaire du système de conception plugin pourrait être utile. Il vous permet de définir ou de mettre à jour les jetons de conception dans un seul panneau, directement depuis Figma, et vous verrez immédiatement les modifications en cascade dans votre conception Figma.

Points d'arrêt, d'autre part, est un plugin qui apporte des cadres redimensionnables à l'outil de conception pour vous aider à redimensionner rapidement en un point d'arrêt pour créer des mises en page dynamiques. Last but not least, une fois que votre design est prêt et que vous souhaitez le présenter à votre équipe ou à vos parties prenantes, Templature a votre dos avec des modèles gratuits que vous pouvez utiliser pour vos présentations Figma. De petits gains de temps qui font passer votre flux de travail au niveau supérieur.

Créateur de Squircicle SVG

Il y a des carrés, il y a des cercles, et apparemment, il y a aussi des carrés! Squircley de George Francis est un générateur de formes organiques pour tout type de visuels ou d'images d'arrière-plan. Vous choisissez la rotation, l'échelle, la «courbure» et la couleur de remplissage, et l'outil s'occupe du reste.

SVG Squircicle Maker "border =" 0

Le générateur exporte des SVG qu'ils peuvent être déposés directement dans votre code HTML / CSS, ou utilisés dans votre application de conception. Juste une petite application amusante à utiliser. Si cela ne suffit pas, vous pouvez également utiliser GetWaves pour générer des ondes SVG ou Blobmaker pour générer des blobs sophistiqués. Bonne expérience!

Le guide ultime de la recherche UX

La recherche sur l'expérience utilisateur est un élément crucial du processus de conception centré sur l'humain. Mais comment aborder la tâche et intégrer un processus de recherche UX dans le flux de travail de votre équipe? Pour que vous soyez opérationnel, les gens de Labyrinthe a élaboré le «Guide ultime de la recherche UX».

Le guide ultime de la recherche UX "border =" 0

Le guide complet plonge dans les principes fondamentaux de la recherche UX et ses différentes méthodes. Il commence par examiner de plus près ce qu'est la recherche UX et pourquoi elle est l'épine dorsale de la création de bons produits, dissèque différentes méthodes et outils de recherche, et partage des conseils pour créer un plan de recherche et établir un processus de recherche UX. Une excellente lecture pour les concepteurs UX et les chefs de produit.

Un guide complet du mode sombre sur le Web

Le mode sombre devient rapidement une préférence des utilisateurs avec Apple, Windows et Google qui l'ont implémenté dans leurs systèmes d'exploitation. Mais qu'en est-il du mode sombre sur le Web? Adhuham a écrit un guide complet sur le mode sombre qui explore différentes options et approches pour mettre en œuvre une conception en mode sombre sur le Web.

Mode clair et sombre sur DuckDuckGo "border =" 0

Pour commencer, le guide examine les considérations techniques que la mise en œuvre d'un mode sombre implique, couvrant différentes approches pour basculer les thèmes et comment stocker les préférences d'un utilisateur afin qu'elles soient appliquées de manière cohérente sur tout le site et lors des visites ultérieures. Conseils pour gérer les styles d'agent utilisateur avec color-scheme Les balises meta aident à éviter les situations potentielles FOIT. Les considérations de conception sont également abordées, bien sûr, avec de précieux conseils pour préparer les images, les ombres, la typographie, les icônes et les couleurs pour le mode sombre.

Rationaliser l'expérience de paiement

56. C'est le nombre d'actions qu'un client doit effectuer pour acheter un billet American Airlines. Regardons les choses en face, les formulaires de paiement sont souvent trop longs et compliqués à remplir. Dans le pire des cas, les clients pourraient même abandonner le processus. Pour nous aider à faire mieux, UX Planet a publié une série d'articles en quatre parties sur la rationalisation de l'expérience de paiement en 2017, qui est toujours en or pour tous ceux qui travaillent sur un flux de paiement aujourd'hui.

Expérience de paiement simplifiée "border =" 0

La première partie de la série examine des exemples où l'expérience de paiement a mal tourné et pourquoi. La deuxième partie décrit les éléments les plus importants qui aideront à améliorer toute expérience de formulaire de paiement en 16 conseils faciles à suivre. La troisième partie est consacrée à la validation des formulaires et à la manière de minimiser le nombre d'erreurs qu'un client pourrait commettre, tout en examinant de plus près les différences entre les marchés B2C et B2B qui entraînent des différences de conception. Enfin, la quatrième partie est consacrée aux détails de la carte bancaire, vous apprenant à détecter et à valider un numéro de carte et à gérer les autres champs du formulaire de paiement. Une lecture longue mais intéressante.

La maturité de l'écriture UX

Au cours des cinq dernières années, les organisations et les designers se sont concentrés sur l'importance de l'écriture. Ils ont réalisé que le contenu peut effectivement aider à concevoir des expériences claires et significatives. Mais qu'est-ce que UX Writing et pourquoi est-ce si important?

La maturité de l'écriture UX "border =" 0

Selon le rapport mondial UX Writing, UX Writing se concentre sur les utilisateurs et aide à créer des expériences adaptées à leurs besoins. Les résultats de l'enquête sont assez intéressants et utiles car ils peuvent aider à mieux comprendre le rôle de l'UX Writer dans les entreprises du monde entier.

L'état de l'écosystème des développeurs 2020

Quel est le langage de programmation le plus populaire parmi les développeurs? Dans quelles langues les développeurs envisagent-ils de migrer? Et quelle est la langue la plus étudiée? Ce ne sont que quelques-unes des questions auxquelles le rapport sur l'état de l'écosystème des développeurs 2020 répond.

L'état de l'écosystème des développeurs 2020 "border =" 0

Au début de cette année, JetBrains a interrogé près de 19 700 développeurs pour identifier les dernières tendances en matière d'outils, de technologies, de langages de programmation et d'autres facettes du monde du développement. Quelques points à retenir: Java est le langage de programmation principal le plus populaire, JavaScript le langage de programmation global le plus utilisé, et lorsqu'il s'agit d'adopter un nouveau langage, Go, Kotlin et Python figurent en tête des listes des développeurs. Outre des faits comme ceux-ci, l'enquête examine également de plus près les contributions open source, les outils d'équipe, les habitudes de vie et la recherche d'informations. Des informations précieuses sur ce qui anime la communauté du développement.

Conception de l'expérience de validation de formulaire en ligne

Parfois, vous tombez sur un article qui a déjà quelques années mais qui s'avère encore être de l'or. Comme l'article de Mihael Konjević sur la validation en ligne. Pour découvrir quelle est la meilleure expérience utilisateur par défaut en ce qui concerne l'affichage des erreurs de validation en ligne, Mihael a analysé différents sites. Comme le montrent ses conclusions, il n’ya pas de consensus sur la gestion de la validation, mais poser les bonnes questions peut vous aider à concevoir une expérience sans bogue et conviviale.

Validation en ligne sous la forme "border =" 0

Mihael propose une approche hybride «récompenser tôt, punir tard»: si l'utilisateur entre des données dans le champ qui était dans un état valide, effectuez la validation après la saisie des données. Si l'utilisateur entre les données dans le champ qui était dans un état non valide, effectuez la validation lors de la saisie des données. Différentes formes auront des besoins différents, bien sûr, alors assurez-vous d'ajuster l'approche en conséquence.

Outils pour améliorer les performances de votre site

Presque toutes les étapes de la conception et du développement Web – de votre choix d'images aux performances des serveurs Web – s'ajoutent à la rapidité de chargement de votre site. Les métriques vous aident à découvrir les goulots d'étranglement qui peuvent rester inaperçus lorsque vous ne testez le site que sur votre configuration locale. Nous avons rassemblé des outils pratiques qui facilitent la collecte et l'interprétation de ces données.

Mesure "border =" 0

Pour vous aider à évaluer les performances de votre site, Mesure par web.dev vérifie les performances, les meilleures pratiques, le référencement et l'accessibilité et vous donne des conseils pour améliorer l'expérience utilisateur. Les tests sont exécutés à l'aide d'un appareil mobile simulé, limité à un réseau 3G rapide et 4x ralentissement du processeur. Juste comme Mesure, Mesures de phare est également optimisé par Lighthouse pour vous donner des informations sur les performances globales et vous montrer les performances de votre site dans six régions différentes. Dernier point mais non le moindre, Google PageSpeed ​​Insights rapports sur les performances d'une page sur les appareils mobiles et de bureau basés sur des données de laboratoire qui sont collectées dans un environnement contrôlé et des données de terrain pour capturer l'expérience utilisateur du monde réel. Si vous avez besoin d'une assistance supplémentaire pour améliorer les performances, notre nouveau guide des performances avec des listes de contrôle, des articles et des exposés est là pour vous.

JavaScript de la bonne manière

Apprendre un nouveau langage peut être un défi, en particulier lorsqu'il existe autant d'outils et de frameworks pour en tirer le meilleur parti, comme dans le cas de JavaScript. Pour vous éviter de vous perdre dans toutes les possibilités et vous aider à apprendre les meilleures pratiques à partir de zéro, William Oliveira et Allan Esquina ont élaboré le guide «JavaScript The Right Way».

JavaScript dans le bon sens "border =" 0

Destiné à la fois aux développeurs débutants et expérimentés qui souhaitent approfondir les meilleures pratiques JavaScript, le guide rassemble des articles, des conseils et des astuces des meilleurs développeurs, couvrant tout, des bases au style de code, aux outils, aux frameworks, aux moteurs de jeu, à la lecture. ressources, captures d'écran et bien plus encore pour faciliter la vie d'un développeur. Le guide est disponible en huit langues. Une mine d'or pleine de sagesse JavaScript.

Tailwind contre BEM

Tailwind et BEM sont deux approches pour écrire et maintenir CSS. Mais quand utiliser lequel? Les comparer, c'est un peu comme comparer des pommes et des oranges, comme le souligne Eric Bailey. Sur la base d'années d'expérience pratique dans l'utilisation de Tailwind et de BEM sur une variété de projets et d'échelles, il a résumé les avantages et les inconvénients de chacun d'entre eux.

Vent arrière contre Bem "border =" 0

L'approche CSS utilitaire de Tailwind avec des classes pré-écrites rend la mise en œuvre très similaire entre plusieurs projets et équipes et facilite la familiarité entre les projets. Cependant, il ne décrit pas toutes les fonctionnalités de CSS, en particulier les nouvelles fonctionnalités. BEM, d'autre part, vous permet de décrire n'importe quel composant d'interface utilisateur auquel vous pouvez penser de manière flexible, modulaire et extensible, ce qui en fait un excellent choix pour les pièces hautement orientées vers l'art. Les forces des deux approches résident dans différents domaines, mais la liste d’Eric vous aide à trouver celle qui vous permettra de maîtriser les défis que votre projet apporte. Au fait, avez-vous déjà entendu parler de CUBE CSS? La méthodologie tire parti de la force des deux approches et mérite également d'être examinée de plus près.

Simulation interactive d'origami

Depuis des années, Origami est connu pour être l'une des activités d'artisanat les plus amusantes au monde, mais vous êtes-vous déjà demandé à quoi cela ressemblerait à l'écran? Eh bien, Amanda Ghassaei avait exactement cette pensée et a relevé le défi de créer une application qui simule la façon dont tout motif de pli Origami se plie.

Simulation Origami interactive "border =" 0

Avec l'aide d'un certain nombre de bibliothèques externes telles que Three.js et jQuery, Origami Simulator a vu le jour. Cette application calcule la géométrie de l'origami plié (ou partiellement plié) à l'aide d'un solveur dynamique accéléré par GPU et illustre les propriétés physiques du matériau plié. Il prend également en charge un mode VR interactif immersif à l'aide de WebVR. Impressionnant!

Amélioration de l'expérience utilisateur avec les animations CSS

Les animations sont devenues un moyen populaire d'améliorer l'expérience utilisateur au cours des dernières années. Mais comment pouvons-nous nous assurer que nos animations et transitions CSS seront significatives pour les utilisateurs et pas seulement pour les yeux décoratifs? Stéphanie Walter a donné une conférence sur l'amélioration de l'UX avec des animations CSS lors de la conférence virtuelle Shift Remote en août. Au cas où vous l'auriez manqué, elle a résumé tout ce que vous devez savoir dans un article de blog accompagnant la conférence.

Amélioration de l'expérience utilisateur avec les animations CSS "border =" 0

En commençant par un rappel de la syntaxe CSS pour construire des transitions et des animations, Stéphanie explore pourquoi certaines animations fonctionnent mieux que d'autres. Elle partage des conseils pour trouver le moment et la durée corrects pour que les animations de l'interface utilisateur se sentent bien et explique pourquoi et comment les animations contribuent à améliorer l'expérience utilisateur. Et comme les grandes puissances entraînent de grandes responsabilités, elle examine également de plus près comment vous pouvez vous assurer que vos animations ne déclenchent pas le mal des transports. Un excellent guide de référence.

Un petit jeu pour améliorer vos compétences en stylet

Dans quelle mesure maîtrisez-vous l'outil Plume? Si cela vous cause des maux de tête lorsque vous travaillez avec Photoshop, Illustrator, XD ou d'autres outils, le jeu de Bézier vous aide à faire passer vos compétences au niveau supérieur, de manière rapide et amusante.

Le jeu de Bézier "border =" 0

Après avoir terminé l'étape du didacticiel assez explicite, le défi commence: au premier niveau, une petite forme de voiture sans prétention (mais assez délicate) vous attend pour la redessiner en utilisant le moins de nœuds possible. Chaque nœud et chaque courbe qui se met en place révèle un petit morceau du chemin de couleur arc-en-ciel et vous rapproche de devenir un maître de l'outil Plume. Ne désespérez pas si vous ne pouvez pas réussir du premier coup. Comme pour tout, la pratique rend parfait.

Trucs et astuces pour déboguer JavaScript

Des bogues surviennent et, lorsqu'ils surviennent, il est bon de savoir comment les résoudre de manière intelligente. Si vous avez besoin de déboguer du code JavaScript, Sean Higgings a écrit un article pratique pour vous aider à trouver la bonne approche de débogage et à maîtriser le défi tout en respectant les meilleures pratiques.

Débogage JavaScript "border =" 0

Parfois, vous souhaiterez peut-être enregistrer des événements sur la console lors du débogage d'événements JavaScript. Pour ces occasions, Matthias Kupperschmidt partage une astuce astucieuse qui empêche l'envoi et le suivi des événements du navigateur plusieurs fois – parfait lorsque vous voulez voir combien d'événements de soumission un formulaire envoie, par exemple.

Restez fracassant et à la prochaine fois!

Rock On!J’espère que vous avez trouvé la mise à jour mensuelle d’aujourd’hui utile. Alors que la nouvelle année approche de nous avec de nouveaux défis, nous sommes convaincus que de nombreux autres bons moments nous attendent. Merci de rester et de votre soutien continu – nous l'apprécions sincèrement! Allons-y ensemble!

Éditorial fracassant(cm, cr, vf, ra)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *