Une mise à jour mensuelle sur tout ce qui fracasse

Toute l'équipe de Smashing a fait de son mieux pour vous offrir des sessions en direct avec de vrais experts – des gens ayant une expérience pratique qui aiment partager ce qu'ils 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 séances 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 à – ce fut une expérience incroyable d'avoir partagé avec vous tous!

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

Ateliers en ligne Smashing: Prochainement

Marquez vos calendriers! Nous organiserons encore plus d'événements en ligne dans les 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, donc vérifiez les détails et enregistrez votre place dès que possible.

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é: Convainquez 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! 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 stimuler les KPI commerciaux sans aliéner les clients en cours de route, et nous sommes sûrs que vous le trouverez extrêmement utile.

Smashing Podcast: Tune In!

18 épisodes, le Smashing Podcast a été meilleur que jamais attendu! 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 pour écouter et partager vos questions et réflexions avec nous à tout moment.

Sujets tendances sur Smashing Magazine

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

Les meilleurs choix de notre newsletter

Nous allons être honnêtes: toutes les deux semaines, nous avons du mal à garder le Smashing Newsletter des problèmes de durée modérée – il y a juste donc beaucoup de gens talentueux qui travaillent sur des projets brillants! Félicitations à toutes les personnes impliquées!

Intéressé par le parrainage? N'hésitez pas à consulter nos options de partenariat et contactez l'équipe à tout moment – ils seront sûrs de vous recontacter immédiatement.

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

Solutions CSS modernes pour les vieux problèmes CSS

Nous savons tous que CSS peut parfois être difficile à maîtriser. Pensez simplement à 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.

Mis à part 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 création de menus déroulants accessibles, le stylisme des boutons et bien plus encore. N'oubliez pas de vérifier régulièrement car Stephanie continue d'ajouter de nouveaux sujets.

Des 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. Meet Blush .

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 des codes Tidbits

Vous avez toujours voulu apprendre Flexbox mais l’ensemble de l’entreprise semblait un peu, enfin, 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.

Dans son cours gratuit Flexbox30 Samantha vous présente 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.

Global Website Speed ​​Profiler

Les outils d'analyse comparative des performances mesurent généralement performance forment 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 Fast or Slow un outil qui mesure les performances réelles de différents endroits du monde.

Rapide ou lent obtient ses données à partir d'un réseau de 13 serveurs dans 13 villes du 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. Fast Or Slow 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 pourrait être fait pour vous.

Glissez et déposez simplement 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 pourriez vouloir utiliser une capture d'écran.

Syntaxe des données de chemin SVG explorée

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.

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 peut ressembler à de la science-fiction est déjà possible aujourd'hui.

Le prototype de recherche AR Copy Paste vous permet de copier des éléments de votre environnement et collez-les 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 déclencher un 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 gens de couleur dans une multitude de tâches.

Six packs d'illustrations 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 la 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 Accélérer 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, en pratique, ils peuvent également être assez abstraits à saisir.

Avec Assouplissements Paul Macgregor a construit un outil utile pour visualiser l'effet des courbes d'assouplissement communes a 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é .

L'enquête couvre les professionnels des développeurs et le contexte démographique, 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.

CSS Art In A Single Div

Que pouvez-vous faire dans une seule div ? Lynn Fisher a beaucoup de réponses créatives à cette question, comme le montre son projet de dessin CSS A Single Div .

Chaque dessin est composé de CSS vivant à l'intérieur d'un seul élément div et utilise une combinaison de Pug pour les modèles et de Stylus pour le prétraitement CSS. Du lettrage 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, en faisant du partage, de la collaboration et la transparence la norme. Inspiré de cela, Observable vise à réinventer la science des données pour un monde connecté. Pour le rendre plus accessible, accessible et social.

Décrit comme un "cahier magique pour explorer les données et penser avec du code", Observable vous permet de dessiner en direct Les données. 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.

(cm, vf, ra)