Catégories
Astuces et Design

3 approches pour intégrer React avec des éléments personnalisés

Dans mon rôle de développeur Web qui se situe à l'intersection du design et du code, je suis attiré par les composants Web en raison de leur portabilité. Cela a du sens: les éléments personnalisés sont des éléments HTML entièrement fonctionnels qui fonctionnent dans tous les navigateurs modernes, et le shadow DOM encapsule les bons […]

Catégories
Astuces et Design

Créer une application Ethereum avec Redwood.js et Fauna

Avec la récente hausse du prix de Bitcoin de plus de 20k $ USD, et jusqu'à 30k récemment, j'ai pensé qu'il valait la peine de se replonger dans la création d'applications Ethereum. Ethereum, comme vous devriez le savoir maintenant, est une blockchain publique (c'est-à-dire ouverte à tous sans restrictions) qui fonctionne comme un consensus distribué […]

Catégories
Astuces et Design

Fondu dans une page lors du chargement avec CSS et JavaScript

Lorsque je visite une page, je suis ennuyé lorsque j'essaie d'interagir avec des éléments pendant que le site Web est toujours en cours de chargement. Souvent, les choses bougent, les polices ne sont pas tout à fait chargées et cela semble cassé. Je sais qu’aujourd’hui, nous sommes obsédés dans ce secteur par le fait de […]

Catégories
Astuces et Design

Construire des composants flexibles avec transparence

En ajoutant une touche de transparence, nous pouvons concevoir des composants qui s'adaptent automatiquement à leurs arrière-plans. Je conçois souvent des composants qui seront utilisés dans une grande variété de contextes. Plusieurs fois, j'ai conçu un composant sur un fond blanc, puis j'ai rencontré des problèmes en essayant d'utiliser ce même composant sur un arrière-plan […]

Catégories
Astuces et Design

Correction du défilement fluide avec Find-on-Page

À l'époque où nous avons publié la conception v17 (nous sommes maintenant sur la version 18) de ce site. J'ai ajouté html { scroll-behavior: smooth; } au CSS. Tout de suite, j'ai reçu des commentaires comme celui-ci (juste un exemple): … Lorsque vous contrôlez + f ou commande + f et effectuez une recherche sur […]

Catégories
Astuces et Design

Comment ajouter des virgules entre une liste d'éléments dynamiquement avec CSS

Imaginez que vous ayez une liste d'articles. Dites, fruit: banane, pomme, orange, poire, nectarine Nous pourrions mettre ces virgules (,) dans le HTML, mais voyons comment nous pourrions le faire en CSS à la place, ce qui nous donne un niveau de contrôle supplémentaire. Nous nous assurerons que le dernier élément n’a pas de virgule […]

Catégories
Astuces et Design

Animation avec Lottie | Astuces CSS

Je pense que l'animation sur le Web est non seulement amusante, mais aussi engageante de telle sorte qu'elle a converti le site visiteurs dans les clients. Pensez au bouton «J'aime» sur Twitter. Lorsque vous «aimez» un tweet, de minuscules bulles colorées se répandent autour du bouton en forme de cœur alors qu'il semble se transformer […]

Catégories
Astuces et Design

Premiers pas avec le package GetX dans les applications Flutter – Smashing Magazine

A propos de l'auteur Kelvin est un fabricant de logiciels indépendant qui construit actuellement Sailscasts – une plate-forme pour apprendre le JavaScript côté serveur. Il est également rédacteur technique et… Plus à propos Kelvin … GetX est une solution ultra légère pour la gestion de l'état, de la navigation et des dépendances pour les applications […]

Catégories
Astuces et Design

Thème et changement de thème avec React et styled-components

J'ai récemment eu un projet avec une exigence de prise en charge thématisation sur le site Internet. C'était une exigence un peu étrange, car l'application est principalement utilisée par une poignée d'administrateurs. Une surprise encore plus grande était qu'ils voulaient non seulement choisir entre des thèmes pré-créés, mais construire leurs propres thèmes. Je suppose que […]

Catégories
Astuces et Design

Donnez à vos Onzeventy Site Superpowers avec des variables d'environnement

Eleventy gagne en popularité parce qu'il nous permet de créer de jolis sites Web simples, mais aussi parce qu'il est très convivial pour les développeurs. Nous pouvons également construire des projets complexes à grande échelle. Dans ce didacticiel, nous allons démontrer cette capacité étendue en mettant sur pied une solution de variable d'environnement puissante et […]

Catégories
Astuces et Design

Simulation des ombres portées avec l'API CSS Paint

Demandez à une centaine de développeurs front-end, et la plupart, sinon tous, auront utilisé le box-shadow propriété dans leur carrière. Les ombres sont toujours populaires et peuvent ajouter un effet élégant et subtil si elles sont utilisées correctement. Mais les ombres occupent une place étrange dans le modèle de boîte CSS. Ils n’ont aucun effet […]

Catégories
Astuces et Design

Créez un nuage de tags avec du CSS simple et même du JavaScript plus simple

J'ai toujours aimé les nuages ​​de tags. J'aime l'expérience UX de voir quelles balises sont les plus populaires sur un site Web en voyant la taille de police relative des balises, les balises populaires étant plus grandes. Ils semblent ne plus être à la mode, bien que vous en voyiez souvent des versions utilisées dans […]

Catégories
Astuces et Design

Intégration de TypeScript avec Svelte | Astuces CSS

Svelte est l'un des plus récents frameworks JavaScript et sa popularité augmente rapidement. Il s’agit d’un cadre basé sur des modèles, mais qui permet un JavaScript arbitraire dans les liaisons de modèles; il a une superbe histoire de réactivité qui est simple, flexible et efficace; et en tant que framework compilé à l'avance (AOT), il […]

Catégories
Astuces et Design

Analyse continue des performances avec les actions Lighthouse CI et GitHub

Lighthouse est un outil gratuit et open source pour évaluer les performances de votre site Web, l'accessibilité, les mesures progressives des applications Web, le référencement, etc. Le moyen le plus simple de l'utiliser consiste à utiliser le panneau Chrome DevTools. Une fois que vous ouvrez les DevTools, vous verrez un onglet «Phare». Cliquez sur le […]

Catégories
Astuces et Design

Déploiement d'un site Jamstack sans serveur avec RedwoodJS, Fauna et Vercel

Cet article s'adresse à toute personne intéressée par l'écosystème émergent d'outils et de technologies liés à Jamstack et sans serveur. Nous allons utiliser l'API GraphQL de Fauna comme back-end sans serveur pour un frontal Jamstack construit avec le framework Redwood et déployé avec un déploiement en un clic sur Vercel. En d'autres termes, beaucoup à […]

Catégories
Astuces et Design

5 façons de stimuler l'engagement avec l'animation

L'animation est une façon amusante et intéressante de donner vie à un site Web. Utilisé correctement, il peut capter l'attention du public, rendre votre site Web plus attrayant et même améliorer vos chances de générer des conversions pour vos clients. Malheureusement, comme beaucoup de choses dans le monde de la conception Web, il est également […]

Catégories
Astuces et Design

Affichez les dernières actualités sur votre site avec mediastack

Quelle année extraordinaire 2020 a été pour l'actualité! De la crise actuelle des coronavirus, aux élections américaines turbulentes, en passant par la marche implacable de Bitcoin, cette année comme aucune autre, nous avons été collés à nos téléphones en micro-analysant chaque bribe de nouvelles. Ce qui en fait le moment idéal pour mediastack, une API […]

Catégories
Astuces et Design

8 façons d'apporter de la créativité aux hyperliens avec CSS et JavaScript

Depuis le début du World Wide Web, le vénérable lien hypertexte a été une caractéristique cruciale. Vous vous souvenez de la stupéfaction lorsque vous avez découvert qu'un simple clic pouvait vous emmener partout dans le monde? OK, peut-être que ce moment de gee-whiz est passé. Mais les liens sont toujours aussi importants que jamais. Et […]

Catégories
Astuces et Design

Connectez-vous rapidement avec le constructeur de sites Web Duda

Préparez-vous à créer un site Web en deux fois moins de temps pour créer un site WordPress. Sérieusement! le Le constructeur de sites Web Duda est un outil de niveau professionnel qui peut vous aider à vous connecter rapidement, avec toutes les performances et la capacité d'optimisation des moteurs de recherche dont vous avez besoin. […]

Catégories
Astuces et Design

Comment prioriser la vitesse avec une conception mobile d'abord

D'ici la fin de l'année, le nombre d'utilisateurs mondiaux de smartphones devrait atteindre 3,5 milliards. C'est une augmentation significative de 9,3% au cours des 12 derniers mois. Dans un monde où tout le monde est constamment connecté à ses appareils mobiles, il est logique que les développeurs et les concepteurs Web doivent envisager de nouvelles […]