Fermer

novembre 20, 2020

Quel temps pour être fracassant!


À propos de l'auteur

Jonglant quotidiennement entre trois langues, 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

Avec tant de choses, c'est bien 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, ainsi que des ressources communautaires inspirantes qui ont figuré en tête de nos newsletters!

Pour beaucoup d'entre nous, il n'a pas fallu longtemps pour s'habituer à l'idée de l'Internet conférences et ateliers. 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 superbe stylo créé par Cassie Evans à SmashingConf SF la semaine dernière. Rock on!

Voir le stylo [Smashing SF demo] (https://codepen.io/smashingmag/pen/pobmqyv) par Cassie Evans sur CodePen

Voir le stylo Démo Smashing SF par Cassie Evans sur CodePen

Séances en direct de 2,5 heures avec des exemples pratiques, des enregistrements vidéo et des questions / réponses amicales. En ce qui concerne nos prochaines sessions, nous avons encore un bon nombre de places disponibles pour vous – y compris Smashing Meets 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 aider à rendre la vie au moins un peu. un peu plus facile pour vous. De plus, si vous pensez qu'il manque quelque chose ou que vous aimeriez en voir plus, veuillez nous contacter sur Twitter et nous ferons de notre mieux pour y arriver!

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

 Smashing Meets Happy Holiday Edition Nous faisons une Happy Holiday edition pour que tout le monde puisse participer et écouter des discussions sur des sujets dédié au prototypage, Vue.js et CSS. Rejoignez-nous aux côtés de Adekunle Oduye Ben Hong et Michelle Barker pour de joyeuses sessions de réseautage et de conception interactive. L'événement est gratuit pour nos membres et seulement 10 USD pour tous ceux qui souhaitent y participer. Réservez votre place 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 .

All Things TypeScript, And More!

Comme pour tous les livres Smashing, nous sommes de grands fans de braquer les projecteurs sur les sujets les plus les gens ont du mal avec. 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 in 50 Lessons
Découvrez notre nouveau livre, «TypeScript in 50 Lessons», 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 (3MB) ou obtenir le livre tout de suite.

Smashing Podcast: Tune In And Get Inspired

 The bi-hebdomadaire Smashing Podcast We tous ont des horaires 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 passons bientôt à notre 30e épisode du Smashing Podcast – avec des gens d'horizons différents et tellement 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? N'hésitez pas à nous contacter sur Twitter à tout moment – nous aimerions avoir de vos nouvelles!

Smashing Newsletter: Best Picks

 The hebdomadaire Smashing Newsletter 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 vous serions reconnaissants si vous pouviez nous aider à 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.

Prenez votre Figma Workflow To The Next Level

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

 Awesome Figma Tips "border =" 0

One d'entre 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 plug-in Design System Manager peut ê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.

Breakpoints d'autre part, est un plugin qui apporte des cadres redimensionnables à l'outil de conception pour vous aider à redimensionner rapidement vers un point d'arrêt pour créer des mises en page dynamiques. Enfin, une fois que votre design est prêt et que vous souhaitez le présenter à votre équipe ou à vos parties prenantes, Templatery vous soutient 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.

SVG Squircicle Maker

Il y a des carrés, il y a des cercles, et apparemment, il y a aussi des carrés! Le Squircley de George Francis est un générateur de formes organiques pour tout type de visuel ou d’image 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.

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 vous aider à démarrer, les gens de Maze ont créé le « Ultimate Guide to UX Research ».

 The Ultimate Guide to UX Research "border =" 0 [19659013]</figure data-recalc-dims=

Le guide complet plonge dans les principes fondamentaux de la recherche UX et ses diverses 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 du mode sombre qui explore différentes options et approches pour implémenter 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 . Des conseils pour la gestion des styles d'agent utilisateur avec la balise Meta color-scheme permettent d'é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.

Rationalisation de 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 d'actualité 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 peut 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?

 The Maturity Of UX Writing "border =" 0

D'après le UX Writing Worldwide Report 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.

The State of Developer Ecosystem 2020

Quelle est la programmation la plus populaire langue chez 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 là que quelques-unes des questions auxquelles le État de l'écosystème du développeur 2020 répond.

 L'état de l'écosystème du développeur 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 fait bouger la communauté de 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 le post 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 résultats, il n'y a 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 suggère 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érents formulaires 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 à la performance du Web serveurs – ajoutez la vitesse à laquelle votre site se chargera. 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é quelques 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. Tout comme Measure Lighthouse Metrics 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. Enfin, le rapport de Google PageSpeed ​​Insights sur les performances d'une page sur les appareils mobiles et de bureau est basé 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 réelle. Si vous avez besoin d’aide 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 The Right Way

Apprendre une nouvelle langue peut être assez difficile. défi, en particulier quand 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 Le Right Way "border =" 0

Destiné aussi bien aux développeurs débutants qu'aux développeurs expérimentés qui souhaitent approfondir les meilleures pratiques JavaScript, le guide rassemble des articles, des conseils et des astuces de grands développeurs, couvrant tout du plus les bases du style de code, des outils, des frameworks, des moteurs de jeu, des ressources de lecture, des 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. En se basant sur des années d'expérience pratique de l'utilisation de Tailwind et BEM sur une variété de projets et d'échelles, il a résumé les avantages et les inconvénients de chacun d'eux.

 Tailwind versus Bem "border =" 0 ]

L'approche CSS utilitaire de Tailwind avec des classes pré-écrites rend l'implémentation très similaire entre plusieurs projets et équipes et favorise une meilleure 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 connue pour être l'une des activités d'artisanat les plus amusantes au monde, mais avez-vous vous êtes-vous déjà demandé à quoi cela ressemblerait à l'écran? Eh bien, Amanda Ghassaei a eu exactement cette pensée et a relevé le défi de créer une application qui simule la façon dont un motif de pli Origami se plie.

 Interactive Origami Simulation "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 ces 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 des 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 le débogage de JavaScript

Des bogues surviennent, et quand 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 rédigé un article pratique pour vous aider à trouver la bonne approche de débogage et à relever le défi tout en respectant les meilleures pratiques.

 Débogage JavaScript "border =" 0 [19659013]</figure data-recalc-dims=

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.

Stay Smashing , 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!

 Smashing Editorial (cm, cr, vf, ra)




Source link