L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Restez calme et lisez
C'est agréable d'avoir un aperçu des choses les plus importantes en un seul endroit, mais n'hésitez pas pour nous suivre sur Twitter Facebook LinkedIn et abonnez-vous à notre flux RSS . Nous aimons vous aider à rester au courant des choses et à vous faciliter la vie un peu!
Pendant toutes les fois où nous avons interrogé les gens sur Smashing, la plupart semblent toujours croire que nous sommes une sorte de grande société d'édition située quelque part dans le États-Unis – qui ont tous deux tort. Tout a commencé à Fribourg, en Allemagne, et l'équipe est composée de personnes dispersées dans le monde entier – la plupart d'entre nous ne travaillant pas à plein temps pour Smashing.
C'est vrai, le travail à distance nous est assez familier, et donc avec la situation actuelle en continuant avec COVID-19 qui met tout le monde mal à l'aise, nous aimerions tirer le meilleur parti des choses et aider nos amis qui doivent travailler ou diriger des équipes à distance pour la première fois. Notre rédactrice en chef, Rachel Andrew, a préparé un joli billet pour vous aider à rester connecté et à continuer à apprendre pendant que nous traversons cela ensemble.
Vous avez peut-être déjà entendu cela SmashingConf SF a été reporté à novembre en raison des restrictions de voyage malheureuses et de nombreuses autres raisons. C'était vraiment une décision difficile à prendre pour l'équipe, mais nous pensons que c'est la meilleure voie à suivre – la sécurité et la santé passent toujours en premier .
Sans plus tarder, voici une brève mise à jour des choses qui se passent à Smashing et un travail très créatif partagé de et à la communauté!
Bonne lecture – de mon ordinateur au vôtre!
Concevoir avec l'éthique en tête [19659010] … « /> Après des mois de dur labeur, le « Manuel de conception éthique » est enfin là – et il est expédié! La réponse a déjà été extrêmement positive, et nous sommes ravis de partager des critiques avec vous bientôt . Il y a encore beaucoup de travail à faire sur le Web, mais nous espérons qu'avec ce livre, vous serez équipé de suffisamment d'outils pour faire avancer lentement une entreprise vers une empreinte numérique plus durable et plus saine!
Bien sûr, vous pouvez accéder directement à la table des matières ou télécharger un extrait PDF gratuit pour avoir une première impression du livre – nous sommes sûrs que vous ne serez pas déçus! Lisez notre publication officielle avec tous les détails →
Toujours apprendre de nouvelles choses les uns des autres
Nous avons tous des horaires chargés, mais il y a toujours du temps pour insérer ces bouchons d'oreille et en écouter certains de la musique ou des podcasts qui vous rendent heureux! Nous passons à notre 12 e épisode du Smashing Podcast – avec des gens d'horizons différents et tellement de choses à partager! Vous êtes toujours les bienvenus pour écouter et partager vos questions et pensées avec nous à tout moment!Mis à part les nouvelles déchirantes concernant notre SmashingConf SF reporté, nos SmashingConf s sont connus pour être des événements conviviaux et inclusifs où les développeurs et les concepteurs frontaux se réunissent pour assister à des sessions en direct et à des ateliers pratiques. De la conception en direct au débogage en direct, tous nos conférenciers aiment entrer dans les détails et montrer des exemples utiles de leurs propres projets sur grand écran.
Voici quelques exposés que vous aimeriez regarder et apprendre:
Le premier SmashingConf a eu lieu à Fribourg en 2012, il y a donc tellement plus de conférences que vous pouvez regarder. Voir toutes les vidéos de SmashingConf →
Briller les projecteurs sur React, Redux et Electron
Marquez vos calendriers! La semaine prochaine, le 19 mars nous organiserons un webinaire Smashing TV avec Cassidy Williams qui expliquera comment organiser une application React moderne et créer une application Electron (avec React ). Rejoignez-nous à 17h00, heure de Londres – nous serions ravis d'entendre vos pensées et vos expériences avec React dans vos projets!
Smashing TV est une série de webinaires et de flux en direct remplis de conseils pratiques pour les concepteurs et les développeurs. Ce ne sont pas seulement des discussions, mais plutôt des conversations et des sessions «voici comment je travaille». Les membres de Smashing peuvent télécharger des enregistrements et également recevoir des remises et de nombreux cadeaux pour que leur adhésion en vaille la peine. Pour en savoir plus →
Sujets tendances sur SmashingMag
Nous publions chaque jour un nouvel article sur divers sujets d'actualité dans l'industrie du Web. En voici quelques-unes que nos lecteurs ont semblé apprécier le plus et ont recommandé davantage:
- « Pourquoi parlons-nous de CSS4? »
par Rachel Andrew
Autour du Web et au sein du groupe de travail CSS, il y a eu des discussions sur l'opportunité de spécifier une version de CSS – peut-être en la nommant CSS4. Dans cet article, Rachel Andrew résume certains des avantages et des inconvénients de le faire, et vous demande votre avis sur la suggestion. - « Le réglage de la hauteur et de la largeur des images est à nouveau important »
par Barry Pollard
Grâce à certains changements récents dans les navigateurs, il vaut maintenant la peine de définir les attributswidthetheightsur vos images pour éviter les changements de mise en page et améliorer l'expérience de - « Configuration de Tailwind CSS dans un projet React »
par Blessing Krofegha
Cet article présente Tailwind CSS, une bibliothèque CSS qui vous donne tous les blocs de construction dont vous avez besoin pour créer des conceptions sur mesure sans styles d'opinion. Vous apprendrez également à configurer en toute transparence Tailwind CSS dans un projet React. - " Présentation d'Alpine.js: un minuscule framework JavaScript "
par Phil Smith
Ever construit un site Web et atteint jQuery, Bootstrap, Vue.js ou React pour obtenir une interaction utilisateur de base? Alpine.js est une fraction de la taille de ces frameworks car il n'implique aucune étape de construction et fournit tous les outils dont vous avez besoin pour créer une interface utilisateur de base. - “ Comment concevoir des applications mobiles pour une utilisation à une main »
par Maitrik Kataria
90% des smartphones vendus aujourd'hui ont des écrans> 5 pouces. L'immobilier sur grand écran présente de nouveaux défis et opportunités pour les créateurs et les concepteurs d'applications. Voyons comment la conception d'applications pour une utilisation à une main peut résoudre ces défis.
Les meilleurs choix de notre newsletter
Nous allons être honnêtes: toutes les deux semaines, nous avons du mal à garder la 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! Donc, sans vouloir trop prolonger cette mise à jour mensuelle, nous braquons les projecteurs sur les projets suivants:
PS : Un immense merci à Cosima Mielke pour avoir écrit et préparé ces articles!
Trouvez et corrigez les erreurs dans vos conceptions
Nous connaissons tous ces moments où nous sommes tellement plongés dans un projet que nous perdons la distance dont nous avons besoin pour être en mesure de détecter de petites incohérences: un rayon de bordure incorrect autour d'une image ou styles ou texte manquants, par exemple. Si vous concevez dans Figma, le plugin gratuit et open-source Design Lint facilite la recherche et la correction d'erreurs comme celles-ci afin qu'aucun bug ne se produise.
Design Lint vérifie les styles de texte, de remplissage, de contour et d'effets manquants, et capture des valeurs de rayon de bordure incorrectes sur tous vos calques. Pour ne pas interrompre votre flux de travail, le plugin se met à jour automatiquement lorsque vous corrigez des erreurs. Le dépôt est disponible sur GitHub, alors n'hésitez pas à écrire des règles spécifiques pour adapter le plugin à vos besoins.
Apprenez le positionnement CSS avec… des chats!
Pourrait-il y avoir une meilleure façon d'apprendre le positionnement CSS comme avec un tas de chats amicaux? C’est probablement ce que pensait Ahmad Shadeed quand il a créé son guide interactif sur le fonctionnement du positionnement CSS .
Le guide vous apprend à utiliser CSS pour positionner trois chats de bande dessinée et leur couverture à l'intérieur d'une boîte, et une fois que vous avez saisi le concept, vous pouvez commencer à bricoler avec la démo interactive qui visualise comment le résultat change lorsque vous modifiez les valeurs. Maintenant, qui a dit que l'apprentissage ne pouvait pas être amusant?
Intimité, un court poème interactif
Une expérience inspirante vient de l'étudiant français en design graphique et d'interaction Thibaud Giffon: " Intimité ". Le poème court interactif utilise des images abstraites, du son et du texte pour explorer l'intimité sous différents angles.
Compassion, distance, confusion, toucher – ce sont quatre des huit chapitres qui composent le poème; et chacun d'eux reflète le sujet à sa manière unique: avec des vagues ou des cercles chauds et harmonieux qui se fondent les uns dans les autres, mais aussi avec des cordes dissonantes ou des bulles colorées qui éclatent en se faisant de la place.
Toutes vos icônes SVG en un seul endroit
Avoir un emplacement central pour organiser tous vos actifs est toujours une bonne chose, pas seulement pour les équipes – pour garder une trace de ce que vous avez et trouver rapidement ce que vous êtes à la recherche de. L'application multiplateforme gratuite Iconset est un tel endroit: elle vous aide à collecter, personnaliser, partager et gérer tous vos jeux d'icônes SVG.
Pour faciliter la recherche de l'icône que vous recherchez, vous pouvez organiser vos icônes en ensembles ou avec des balises et, une fois que vous avez trouvé l'icône dont vous avez besoin , vous pouvez le faire glisser directement dans votre outil préféré. Un vrai gain de temps. Iconset prend en charge les services cloud comme Dropbox ou OneDrive afin que toutes vos icônes soient toujours synchronisées entre les membres de l'équipe. L'application est disponible pour Mac et Windows.
L'aventure WebGL d'un ancien héros
Un héros réticent dans une quête qu'il n'a jamais demandée – c'est l'histoire derrière le jeu vidéo d'aventure sur navigateur Heraclos . Situé dans la Grèce antique, le jeune Heraclos tombe sur une amphore qui appartient à l'un des dieux. Il est déclaré être l'élu et est envoyé pour gravir la montagne secrète et rendre l'amphore à son propriétaire.
Ce qui rend le jeu si remarquable, c'est la tournure amusante de l'interaction entre le héros et le dieu (une parodie d'histoires héroïques communes) mais aussi le contexte technique: Heraclos a été conçu en seulement trois mois par un groupe d'étudiants de l'école des images des Gobelins à Paris – avec WebGL et Cannon.js. Un excellent exemple de ce qui est possible sur le Web.
Un enregistreur d'écran open-source construit avec la technologie Web
Avez-vous déjà entendu parler de Kap ? L'enregistreur d'écran open-source vaut vraiment la peine d'être vérifié si vous faites fréquemment des enregistrements d'écran.
Construit avec les technologies Web, Kap produit des enregistrements de haute qualité aux formats GIF, MP4, WebM ou APNG. Vous pouvez inclure l'audio (même depuis votre microphone), mettre en surbrillance les clics et découper les enregistrements. En bonus, il existe également des options pour partager vos GIF enregistrés sur Giphy, les déployer avec ZEIT maintenant ou les télécharger sur Streamable. Idéal pour les démonstrations techniques.
Open Peeps, une bibliothèque d'illustrations dessinées à la main gratuite
584 688 combinaisons possibles. C'est le nombre de personnages différents que vous pourriez créer avec la bibliothèque d'illustrations dessinées à la main de Pablo Stanley Open Peeps .
Open Peeps vous permet de mélanger et d'associer différents éléments vectoriels pour créer des personnalités diverses: combiner vêtements et coiffures, changer d'émotion avec des expressions faciales, mettre en scène des poses différentes – les possibilités sont infinies . Et si vous êtes pressé, Pablo a également préparé des Peeps prêts à télécharger que vous pouvez utiliser immédiatement. Open Peeps est publié sous une licence CC0, vous êtes donc libre d'utiliser les illustrations dans des projets personnels et commerciaux. Une excellente façon d'ajouter une touche artisanale à votre conception.
Comment rendre les entrées plus accessibles
En 2019, WebAim a analysé l'accessibilité du million de meilleurs sites Web, avec une conclusion choquante: le pourcentage de pages sans erreur a été estimé à moins d'un pour cent. Pour rendre nos sites inclusifs et utilisables pour les personnes qui s'appuient sur la technologie d'assistance, nous devons obtenir les bases du HTML sémantique. Avec son credo de commencer petit, de partager et de travailler ensemble, l'article d'Oscar Braunert sur les intrants inclusifs est un excellent point de départ pour le faire.
Commençant par les bases de WAI, ARIA et WCAG, l'article explore comment rendre les entrées plus accessibles. Les conseils peuvent être mis en œuvre sans changer l'interface utilisateur et, comme le dit Oscar: «En cas de doute, faites-le. Personne ne le remarquera. Sauf certains de vos utilisateurs. Et ils vous en remercieront. »
Une police open source pour les développeurs
Haute lisibilité, numérisation rapide du texte, pas de distraction – ce ne sont que quelques-unes des exigences des développeurs sur une police de caractères. Eh bien, les polices de caractères libres et open source JetBrains Mono les rencontrent à merveille. détails. Rendu en petites tailles, le texte semble plus net.
Pour ce faire, Jet Brains Mono tire parti de quelques détails petits mais puissants: par rapport aux autres polices monospaces, la hauteur de JetBrains Mono est augmentée tandis que les caractères restent standard en largeur pour garder les lignes de code à la longueur attendue par les développeurs. Pour améliorer encore la lisibilité, 138 ligatures spécifiques au code réduisent le bruit de sorte que vos yeux doivent traiter moins et que les blancs deviennent plus équilibrés. Intelligent! JetBrains Mono est disponible en quatre poids et prend en charge 145 langues.
Le guide ultime des iframes
Avec de nombreux articles les déconseillant, les iframes n'ont pas la meilleure réputation. Le développeur JavaScript Nada Rifki voit les choses différemment: elle suggère de ne pas laisser sa réputation vous empêcher de vous fier aux iframes. Après tout, ils ont de nombreux cas d'utilisation légitimes.
Pour vous aider à vous faire votre propre opinion sur cet élément controversé, Nada a écrit un guide ultime des iframes qui explore les caractéristiques des iframes et comment les utiliser; situations délicates où les iframes peuvent être utiles; Enfin et surtout, comment sécuriser votre iframe contre les vulnérabilités potentielles. Une excellente occasion de voir les choses sous un angle différent.
Guide des commandes de console
Les capacités de la console de débogage du développeur ont considérablement évolué au cours des dernières années – du moyen de signaler les erreurs à la journalisation automatique d'informations telles que les requêtes réseau. et les erreurs ou avertissements de sécurité. Il existe également un moyen pour JavaScript d'un site Web de déclencher diverses commandes qui sortent vers la console à des fins de débogage. Et bien que ces fonctionnalités soient principalement cohérentes entre les navigateurs, il existe également quelques différences fonctionnelles.
Si vous recherchez un aperçu de ce que les commandes de la console sont capables de faire, Travis Almand a élaboré un guide utile . Il couvre Firefox et Chrome et examine diverses commandes qui peuvent être utilisées dans la sortie de la console du navigateur ou avec JavaScript. Un résumé pratique.
(cm, vf, ra, il) Source link