Catégories
Astuces et Design

Une mise à jour mensuelle sur tout ce qui fracasse – 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

Chaque mois, nous présentons un aperçu des choses sur lesquelles l'équipe Smashing a travaillé – le tout au même endroit. Les dernières semaines ont été assez difficiles: la crise COVID-19, #BlackLivesMatter, et tant d'autres problèmes en cours dans le monde entier. Voici ce qui s'est passé de notre côté entre-temps.

Toute l'équipe Smashing a fait de son mieux pour vous offrir des sessions en direct avec de vrais experts – des personnes ayant une expérience pratique qui aiment partager ce qu'elles ont appris tout au long de leur carrière. Nous avons organisé Smashing Meets sur trois jours – des événements ouverts à tous dans la communauté web. Avec des sessions sur la performance, CSS, GraphQL et le courage créatif, nous nous sommes assurés de laisser beaucoup de temps pour les questions-réponses, le réseautage, les concours et les prix.

Nous sommes submergés par les commentaires que nous avons reçus depuis lors; beaucoup d'entre vous semblaient surtout apprécier de passer du temps avec des conférenciers et de poser des questions directement. Un énorme merci encore à tous ceux qui se sont joints à nous – ce fut une expérience incroyable d'avoir partagé avec vous tous!

Une image fixe de l'événement Smashing Meets qui a eu lieu le 9 juin 2020 avec Henri Helvetica, Yiying Lu et Vitaly Friedman
Henri Helvetica, Yiying Lu et Vitaly Friedman en direct à l'écran lors du récent événement Smashing Meets. (Crédit d'image: Yiying Lu)

Aperçu du calendrier Smashing Meets (mai et juin)

Ateliers en ligne fracassants: à venir

Marquez vos calendriers! Nous organiserons encore plus d'événements en ligne au cours des prochaines semaines. Que l'accent soit mis sur le CSS, l'accessibilité, les performances ou l'UX, nous voulons vous aider à améliorer vos compétences et à apprendre des informations pratiques et exploitables par des experts de l'industrie.

Les ateliers précédents ont été incroyablement populaires, beaucoup étant épuisés, alors vérifiez les détails et enregistrez votre place dès que vous le pouvez.

Rester à jour peut être si difficile. C'est une jungle, mais nous avons ce qu'il vous faut!
Voir les événements en ligne →

Une dernière chose. Si vous pensez à deux fois à vous joindre à un atelier Smashing simplement parce que vous pensez que votre manager pourrait avoir besoin d'un peu plus de persuasion, alors nous vous soutenons avec un petit modèle soigné: Convaincre votre patron. Bonne chance!

Notre dernier ajout aux livres fracassants: expédition maintenant

Nous sommes très fiers d’avoir officiellement publié le livre de Paul Boag, "Cliquez sur! Comment encourager les clics sans astuces louches». Il s'agit d'un guide détaillé sur la façon d'augmenter la conversion et de booster les KPI commerciaux sans aliéner les clients en cours de route, et nous sommes sûrs que vous le trouverez extrêmement utile.

Une photographie de la copie papier du dernier Click! livre écrit par Paul Boag
Relié de qualité. Livraison gratuite à travers le monde. Garantie de remboursement de 100 jours. Dites m'en plus →

Smashing Podcast: Branchez-vous!

Smashing PodcastAprès 18 épisodes, le Smashing Podcast a été meilleur que ce à quoi nous nous attendions! Toutes les deux semaines, Drew McLellan parle à des gens d'horizons différents, et il y a toujours tellement de choses à apprendre et à partager! Vous êtes toujours les bienvenus à l'écoute et à partager vos questions et réflexions avec nous à tout moment.

Nous publions chaque jour un nouvel article sur divers sujets d'actualité dans l'industrie du Web. En voici quelques-uns que nos lecteurs ont semblé apprécier le plus et ont recommandé davantage:

Les meilleurs choix de notre newsletter

Soyons honnêtes: toutes les deux semaines, nous avons du mal à garder les numéros de Smashing Newsletter à une longueur modérée – il y a juste donc 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 nos options de partenariat et à contacter l'équipe à tout moment – ils seront sûrs de vous recontacter immédiatement.

P.S. Un grand merci à Cosima Mielke pour avoir écrit et préparé ces articles!

Solutions CSS modernes pour les anciens problèmes CSS

Nous savons tous que le CSS peut parfois être difficile à maîtriser. Pensez à la question classique de savoir comment centrer un div. Dans «Solutions CSS modernes pour les anciens problèmes CSS», Stephanie Eckles explore les solutions aux grands et petits problèmes CSS qu'elle a résolus au cours des 13 dernières années en tant que développeur front-end.

Solutions CSS modernes "border =" 0

En dehors de l'ancien problème de centrage, la série explore des défis tels que la création d'éléments de hauteur égale, la rendre accessible aux menus déroulants, les boutons de style et bien plus encore. N'oubliez pas de vérifier régulièrement car Stephanie continue d'ajouter de nouveaux sujets. Brillant!

Illustrations pour tous

Les illustrations sont un excellent moyen d'ajouter une touche personnelle à un design. Cependant, tout le monde n'est pas un illustrateur né et tous les projets n'ont pas le budget pour embaucher quelqu'un qui maîtrise le métier. Pendant le verrouillage, Pablo Stanley et quelques-uns de ses amis ont décidé de changer cela et ont créé un outil qui rend l'art plus accessible et donne à chacun la possibilité d'utiliser des illustrations dans leurs créations. Rencontrez Blush.

Blush "border =" 0

Blush est une collection de 13 bibliothèques d'illustrations mix-and-match créées par des artistes du monde entier. Qu'il s'agisse de personnages, de paysages urbains, de plantes, de nourriture ou d'une œuvre d'art abstrait, vous pouvez choisir votre illustration préférée dans l'un des packs et personnaliser chaque petit détail jusqu'à ce que vous ayez la combinaison dont vous avez besoin pour raconter votre histoire. Comme le dit Pablo, c'est "comme jouer des legos faits de vecteurs". Les illustrations peuvent être téléchargées gratuitement au format PNG de haute qualité. Si vous êtes vous-même illustrateur et que vous souhaitez mettre votre travail à la disposition d'autres créateurs, vous pouvez également postuler pour figurer dans Blush. Un exemple fantastique de partage et de bienveillance.

Apprenez Flexbox avec Code Tidbits

Vous avez toujours voulu apprendre Flexbox, mais l’ensemble de l’entreprise semblait un peu intimidant? Cela ne doit pas l'être. En fait, cela pourrait ne prendre que 30 morceaux de code pour vous mettre sur la voie de la maîtrise de la magie Flexbox. Samantha Ming est là pour vous.

Flexbox30 "border =" 0

Dans son cours gratuit Flexbox30, Samantha vous emmène à travers 30 leçons Flexbox courtes et nettes. Après avoir appris les concepts de base de Flexbox, vous explorerez les tenants et aboutissants des propriétés parent et enfant. Chaque leçon est accompagnée d'une feuille de triche que vous pouvez télécharger, ce qui fait du cours un excellent rappel si vous connaissez déjà Flexbox mais que vous avez du mal avec certaines propriétés.

Profileur de vitesse de site Web mondial

Les outils d'analyse comparative des performances mesurent généralement les performances à partir d'un emplacement unique. Mais comment votre site fonctionne-t-il pour les utilisateurs du monde réel qui ne sont pas basés à cet endroit? Pour obtenir des résultats plus précis pour leur propre marché, les gens derrière le plugin de sécurité WordPress Wordfence ont construit Rapide ou lent, un outil qui mesure les performances réelles de différents endroits du monde.

Rapide ou lent "border =" 0

Rapide ou lent obtient ses données à partir d'un réseau de 13 serveurs dans 13 villes à travers le monde. Chaque serveur a été calibré pour avoir les mêmes performances afin que les mesures de vitesse donnent une véritable indication de ce que le site ressent pour un vrai utilisateur. Le test de performances vous fournit un score global des performances d'un site et décompose les résultats par emplacement géographique, tandis que les audits sur la minification CSS, l'optimisation d'image, la mise en cache, etc. aident à révéler des goulots d'étranglement spécifiques. Rapide ou lent est gratuit à utiliser.

Cadres de navigateur élégants pour vos captures d'écran

Avec les captures d'écran, il y a généralement deux options: vous prenez une capture d'écran de la fenêtre du navigateur entière avec des extensions de navigateur et peut-être même des signets visibles ou, si vous voulez quelque chose de moins distrayant, vous décidez de ne prendre qu'une capture d'écran du site sans aucune bordure . Si vous recherchez une solution plus sophistiquée, Browserframe est peut-être pour vous.

BrowserFrame "border =" 0

Faites simplement glisser et déposez votre capture d'écran dans l'outil, et il l'enveloppe dans un cadre de navigateur soigné. Vous avez le choix entre plusieurs navigateurs, systèmes d'exploitation et thèmes, et vous pouvez ajuster la couleur d'arrière-plan, l'ombre, le remplissage et certains autres détails avant de télécharger l'image. Parfait pour les articles de blog, les médias sociaux, les diapositives ou tout autre endroit où vous souhaitez utiliser une capture d'écran.

Exploration de la syntaxe des données de chemin SVG

Savez-vous ce que signifie réellement la syntaxe des données de chemin SVG? Sinon, vous n’êtes pas seul. Mathieu Dutour travaille avec les SVG depuis un certain temps, mais a toujours eu du mal à comprendre la structure des données de chemin. C’est pourquoi il a construit un visualiseur pour cela.

Visualiseur de chemin SVG "border =" 0

Le visualiseur de chemin SVG visualise les données de chemin SVG que vous entrez et vous permet de découvrir toutes ses différentes commandes. Il existe également plusieurs exemples que vous pouvez explorer pour vous familiariser avec la syntaxe. Un aperçu perspicace du squelette d'un SVG.

L'avenir est là

Imaginez que vous travaillez sur un projet et que vous souhaitez y ajouter une image d'un livre. Vous avez le livre juste à côté de vous sur votre bureau, donc vous sortez votre téléphone, prenez une photo du livre, envoyez la photo à votre ordinateur, ouvrez-la dans Photoshop, supprimez l'arrière-plan et, enfin, incluez l'image dans votre fichier. Eh bien, maintenant, si vous pouviez copier et coller le livre de la réalité sur votre écran, exactement où vous voulez qu'il soit? Ce qui pourrait ressembler à de la science-fiction est déjà possible aujourd'hui.

Copie AR Coller "border =" 0

Le prototype de recherche AR Copy Paste vous permet de copier des éléments de votre environnement et de les coller dans un logiciel de retouche d'image. Trois modules indépendants y parviennent: une application mobile, un serveur local qui sert d'interface entre l'application et Photoshop et trouve la bonne position sur votre écran, et, enfin et surtout, un service de détection d'objection / suppression d'arrière-plan pour couper le l'image en forme. Un aperçu impressionnant de l'avenir de la RA.

Illustrations noires

Les Noirs et les personnes de couleur sont souvent sous-représentés dans les illustrations et les visuels. Pour provoquer le changement dans le paysage numérique, l'équipe de 5four a créé Illustrations noires, des packs d'illustrations qui brossent un tableau plus diversifié et montrent des Noirs et des personnes de couleur dans une myriade de tâches.

Illustrations noires "border =" 0

Il existe six packs d'illustrations qui peuvent être utilisés sur des sites Web, des diaporamas, des infographies ou n'importe où. Deux des decks sont téléchargeables gratuitement: «The Office Hustle» montre des gens dans un environnement de bureau, travaillant à domicile et ayant des conversations, ainsi que dans un cadre de soins de santé, tandis que «The Movement Pack» attire l'attention sur #BlackLivesMatter et le lutte contre les inégalités raciales. D'autres packs incluent des images sur le thème de l'éducation et du style de vie. De beaux designs avec un message puissant.

Voir Assouplir les courbes en action

Le mouvement dans le monde réel est quelque chose de fluide, pas de démarrages ou d'arrêts brusques ou instantanés, pas de vitesse constante. L'assouplissement des courbes nous aide à apporter cette sensation naturelle au mouvement sur le Web. Cependant, dans la pratique, ils peuvent également être assez abstraits à saisir.

Assouplissements "border =" 0

Avec Assouplissements, Paul Macgregor a construit un outil utile pour visualiser l'effet des courbes d'assouplissement courantes sur une gamme d'interfaces – d'un carrousel de galerie à un menu latéral, une prise de défilement et un modal. Choisissez simplement une courbe d'assouplissement dans la collection pour la voir en action ou entrez-en une personnalisée. Un pour les signets.

Aperçu du fonctionnement actuel des développeurs

Depuis près d'une décennie, l'enquête annuelle des développeurs menée par Stack Overflow est la plus grande enquête auprès des personnes qui codent. Cette année, ils l'ont rendu plus représentatif de la diversité des programmeurs, en demandant à 65 000 développeurs du monde entier comment ils apprennent, quels outils ils utilisent et ce qu'ils veulent. L'enquête a été menée en février et les résultats offrent un aperçu complet de la communauté.

Enquête développeur 2020 "border =" 0

L'enquête couvre les antécédents professionnels et démographiques des développeurs, examine les outils et leur popularité, à quoi ressemblent les environnements de développement des répondants et comment ils apprennent et résolvent les problèmes, tout comme leurs valeurs de carrière, leurs priorités professionnelles et leurs conditions de travail. Perspectives intéressantes garanties.

Art CSS dans une seule division

Que pouvez-vous faire en un seul div? Lynn Fisher a beaucoup de réponses créatives à cette question, comme son projet de dessin CSS Une seule div montre.

Une seule div "border =" 0

Chaque dessin est composé de CSS vivant dans un seul div et utilise une combinaison de Pug pour les modèles et de Stylus pour le prétraitement CSS. Des lettres et des motifs géométriques aux objets aléatoires et aux petits personnages, chaque tuile colorée est un merveilleux exemple de ce qui peut être accompli avec CSS.

Un cahier magique pour explorer les données

L'open source a transformé le développement de logiciels, faisant du partage, de la collaboration et de la transparence la norme. Inspiré par cela, Observable vise à réinventer la science des données pour un monde connecté. Pour le rendre plus accessible, accessible et social.

"Border =" 0 observable

Décrit comme un «cahier magique pour explorer les données et penser avec du code», Observable vous permet d'esquisser avec des données en direct. Vous pouvez prototyper des visualisations, vous connecter aux API Web et voir votre «bloc-notes» se mettre à jour instantanément lorsque des modifications sont apportées. Apprendre les uns des autres, partager et réutiliser des composants avec une communauté de collègues auteurs est un élément clé du concept, les équipes peuvent même éditer un bloc-notes ensemble en temps réel. Maintenant, qu'en faire? Rapports, visualisations explicatives, prototypes d'interface utilisateur, documentation, projets artistiques, conceptions visuelles – seule votre imagination est la limite.

Smashing Editorial(cm, vf, ra)

Laisser un commentaire

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