Ce truc astucieux ramène les visiteurs quand ils se détournent

Combien de fois ouvrez-vous un article, écrivez quelques phrases, puis cliquez pour aller voir un autre onglet? Je suis coupable de cela tous les jours. Ce n'est pas si facile de garder l'attention d'un visiteur et c'est pourquoi le script Do not Go peut être si précieux.

En ajoutant ce script à votre page, vous pouvez automatiquement mettre à jour le favicon et le titre de la page lorsque la page n'est pas en cours d'affichage.

Vous pouvez voir une démo en direct ici et c'est très simple. Il suffit d'ouvrir la page dans votre navigateur, puis passer à un autre onglet. En quelques secondes, la page favicon change, avec le titre .

Tout cela se passe de manière dynamique, en utilisant JavaScript, donc tout change une fois que la page est à nouveau active. Comme vous pouvez l'imaginer, ce script est très simple à configurer .

Il nécessite trois paramètres :

1. Titre - le nouveau titre de la page
2. Favicon - la nouvelle URL de favicon
3. Timeout - délai total (en secondes) après le départ de l'utilisateur avant de passer à l'interrupteur

Notez que la seule valeur requise est le titre. Vous pouvez laisser le favicon le même et vous pouvez choisir d'ignorer complètement le délai d'attente, ainsi la barre de titre change immédiatement.

Voici un exemple de code de l'apparence de l'installation.

 dontGo ({title: 'Texte du titre alternatif ici!', faviconSrc: 'chemin / vers / Alternative / favicon.ico', timeout: 5000 // 5 secondes}); 

Configurer le script Do not Go ne pourrait pas être plus facile. Il est disponible via npm, Bower et Yarn, et il est également hébergé sur le GitHub CDN, tiré directement du dépôt principal.

Ce script amusant peut être un excellent moyen de ramener les lecteurs sur votre site et, finalement, de réduire les taux de rebond . Pour en savoir plus, visitez le dépôt principal GitHub et parcourez la documentation.

Inspecteur CSS détaillé sur chaque site avec CSSPeeper pour Chrome

Le panneau habituel de Chrome DevTools est très puissant. Il permet à quiconque de plonger profondément dans n'importe quelle page pour étudier la mise en page d'un site, CSS, et même les en-têtes HTTP si nécessaire.Vous pouvez faire beaucoup avec l'inspecteur DevTools CSS. Mais il n'a pas de panneau d'interface graphique clair et c'est une chose que tout développeur aimerait.Découvr

(Conseils techniques et de conception)

Kit de démarrage CSS pour les développeurs - Shoelace.css

Les développeurs frontend ont besoin de toutes les meilleures ressources possibles. Habituellement, cela signifie travailler sur un framework tel que Bootstrap car il est livré avec tout ce qui est nécessaire.Cependant, il existe de nombreuses alternatives et Shoelace.css est un exemple avec lequel vous devriez être familier.Ce

(Conseils techniques et de conception)