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

6 outils pour des tests rapides de sites Web multi-appareils

Lors de la création d'un site Web, il est essentiel de se rappeler que non seulement il doit fonctionner et avoir une belle apparence sur l'appareil sur lequel vous le créez, mais sur tous les autres appareils, il peut également être utilisé. L'optimisation des mobiles et des tablettes est importante non seulement pour le parcours […]

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

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

Liste de contrôle des performances frontales 2021 – Smashing Magazine

La livraison des polices Web est-elle optimisée?La première question qui mérite d'être posée est de savoir si nous pouvons nous en sortir avec l'utilisation des polices système de l'interface utilisateur en premier lieu – nous devons simplement nous assurer de vérifier qu'elles apparaissent correctement sur différentes plates-formes. Si ce n’est pas le cas, il y […]

Catégories
Astuces et Design

Comment concevoir en gardant à l'esprit la confidentialité des utilisateurs (conseils et bonnes pratiques)

En ce qui concerne l'UX, à quelle fréquence le connectez-vous à la confidentialité? C'est une grande partie du processus de conception. Des applications connectées au commerce électronique en passant par les formulaires, la collecte de données a lieu tout le temps. Les utilisateurs y sont habitués et acceptent généralement ces pratiques, sauf si quelque chose […]

Catégories
Astuces et Design

Comment gagner plus d'argent en vendant des applications Shopify en 2021 – Smashing Magazine

A propos de l'auteur Suzanne Scacca est une ancienne implémentatrice, formatrice et responsable d'agence WordPress qui travaille maintenant en tant que rédactrice indépendante. Elle se spécialise dans l'artisanat marketing, web… Plus à propos Suzanne Scacca … Développer une application Shopify et pouvoir la vendre sont deux choses différentes. Bien que vous soyez peut-être un développeur […]

Catégories
Astuces et Design

Styliser le code dans et hors des blocs

Il y a un balise en HTML. Je l'ai littéralement utilisé pour envelopper cette balise dans la phrase précédente – donc méta. C'est un élément en ligne par défaut qui désigne toute sorte de code. Il a des styles par défaut (agent utilisateur) qui appliquent une famille de polices monospace, ce qui ressemble à une […]

Catégories
Astuces et Design

20 modèles de maquette Photoshop PSD pour présenter des applications mobiles en 2021

Après avoir passé des dizaines (voire des centaines) d'heures à travailler sur votre prochaine application mobile, à concevoir soigneusement chaque fonctionnalité et élément, il est important de mettre en valeur la qualité de votre travail lors de votre réunion ou de votre présentation à vos clients. Normalement, les concepteurs d'applications optent pour des captures d'écran […]

Catégories
Astuces et Design

Le Web devrait-il présenter des capacités matérielles? – Magazine Smashing

A propos de l'auteur Noam Rosenthal est un consultant indépendant en plateforme Web, un réviseur WebKit et un contributeur à Chromium et à plusieurs standards Web. Récemment, Noam a… Plus à propos Noam … Je me suis récemment intéressé à la différence d’opinions entre les différents fournisseurs de navigateurs sur l’avenir du Web – en […]

Catégories
Astuces et Design

8 des meilleurs plugins de témoignage WordPress comparés (2021)

Les témoignages sont essentiels pour de nombreux types d'entreprises, que vous vendiez un produit ou un service. Mettre en évidence les avis des clients sur votre site aidera les nouveaux visiteurs à renforcer la confiance dans votre marque grâce au pouvoir de la preuve sociale, et peut augmenter les taux de conversion de montants impressionnants. […]

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

Calendrier des performances Web »Un paramètre d'affichage des polices pour les connexions lentes

Dans cet article, je vais noter quelques réflexions sur une question qui m'intrigue depuis un certain temps. "Quoi font-display devrait être utilisé pour améliorer l'expérience de tous les utilisateurs? ». Avant d’entrer dans le vif du sujet, passons en revue quelques-unes des bases. Typographie sur le web Le World Wide Web est probablement la plus […]

Catégories
Astuces et Design

Des étincelles d'inspiration pour accueillir la nouvelle année (édition de fonds d'écran de janvier 2021) – Smashing Magazine

Quelle meilleure façon pourrait-il y avoir pour commencer la nouvelle année qu'avec une nouvelle inspiration? Notre collection de papiers peints pour janvier 2021 ne manquera pas de mettre un sourire sur votre visage – et peut-être aussi de susciter de nouvelles idées. Peut-être que vous avez déjà commencé en 2021 en lisant ceci, peut-être que […]

Catégories
Astuces et Design

Les règles de l'effondrement des marges

En CSS, les marges adjacentes peuvent parfois se chevaucher. C'est ce qu'on appelle «l'effondrement des marges», et il a la réputation d'être assez ignoble. Voici un exemple typique, impliquant deux paragraphes frères: Au lieu de s'asseoir à 48 pixels l'un de l'autre, leurs marges de 24 pixels fusionnent ensemble, occupant le même espace! Cette idée […]

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

Deal: Le livre ridiculement énorme des combinaisons de polices Google

Google Fonts est l'un des outils les plus utiles dont disposent les concepteurs, avec des centaines de polices étonnantes fournies gratuitement. Mais si vous ne prenez que l'une des dix meilleures suggestions, vous passez à côté d'une grande richesse de joyaux typographiques. Presque toutes les polices de Google Fonts valent la peine d'être essayées, mais […]

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

Aller au-delà des bases – Smashing Magazine

A propos de l'auteur Gert Svaiko est un rédacteur professionnel et travaille principalement avec des entreprises de marketing numérique aux États-Unis et dans l'UE. Plus à propos Gert … Il est prouvé que les applications Web progressives augmentent l'engagement des utilisateurs et réduisent efficacement les coûts. Construire une PWA moderne nécessite plus que la configuration […]

Catégories
Astuces et Design

Création d'une application de notification des prix des actions à l'aide de React, Apollo GraphQL et Hasura – Smashing Magazine

A propos de l'auteur Ingénieur logiciel, essayant de donner un sens à chaque ligne de code qu'elle écrit. Ankita est une passionnée de JavaScript et adore ses parties étranges. Elle est aussi obsédée… Plus à propos Ankita Masand … Dans cet article, nous allons apprendre à créer une application basée sur des événements et à […]