6 extraits javascript pour polir votre site

JavaScript est une langue populaire, et il est facile de trouver des extraits généraux qui aident à le compléter. Mais son contexte le plus important est le navigateur Web, et vous pouvez faire beaucoup pour améliorer vos pages Web avec juste un peu de javascript.

Ces extraits sont conçus pour être déposés dans n'importe quel site Web, quel que soit son cadre ou sa structure sous-jacente. Ils sont tous courts – beaucoup sont des doublures et offrent beaucoup de coup pour leur argent.

1

Activer un raccourci clavier pour sauter pour rechercher

Essayez d'ouvrir une page de résultats de recherche Google et d'appuyer sur la touche /. Vous devez remarquer que la zone de recherche se concentre automatiquement, vous permettant de taper rapidement une autre recherche. Ce raccourci est si utile que de nombreux autres sites ont emboîté le pas, de YouTube à MDN.

Vous pouvez obtenir le même effet sur votre propre site avec un minimum d'effort. Prenez une boîte de recherche qui ressemble à ceci:

        <input type="text" id="search" />

    

Avec juste une ligne de JavaScript, vous pouvez ajouter ce raccourci clavier utile:

        document.addEventListener("keyup", function (e) {
    if (e.key === "https://www.howtogeek.com/") {
        document.getElementById("search").focus();
    }
});

    

L'auditeur d'événements vérifie la touche Slash vers l'avant. S'il est enfoncé, il obtient l'élément de la zone de recherche à l'aide de GetElementById (), puis appelle sa méthode focus () pour activer la zone de recherche et placer le curseur à l'intérieur.

Notez que, en utilisant ce code particulier, l'action de mise au point n'est pas destructive. Soyez prudent si vous apportez des modifications! Par exemple, l'utilisation de l'événement Keydown au lieu de Keyup concentrerait l'élément avant que le navigateur ne gère la touche, donc un « https://www.howtogeek.com/ » finirait dans votre zone de recherche.

2

Identificateurs de fragments automatiques

Les identificateurs de fragments sont un moyen utile de lier à un point spécifique sur une page Web. Si un élément a un attribut d'ID avec une valeur « Exemple, » alors un lien terminant « #Example » fait automatiquement défiler vers ce point de la page.

Si vous publiez du contenu en ligne, l'utilisation d'attributs d'identification encouragera les gens à s'y connecter. Il peut être difficile de se rappeler d'inclure des ID, mais les injecter dynamiquement contourne ce problème.

        document.querySelectorAll("h2").forEach(function(el) {
    if (!el.hasAttribute("id")) {
        el.setAttribute("id", el.textContent.replaceAll(/(^a-z)/gi, ''));
    }
});

    

Cet extrait boucle sur chaque élément H2 sur votre page. S'il n'a pas déjà d'attribut d'ID, le code en définit un, basé sur le texte à l'intérieur de l'en-tête. Vous avez peut-être remarqué que c'est le même type de technique que des sites comme Wikipedia utilisent pour les identifiants de tête.

Notez le remplacement de l'expression régulière qui supprime tous les caractères qui ne sont pas des lettres (AZ). Si vous publiez dans une langue autre que l'anglais, ou si vous utilisez des en-têtes qui peuvent se répéter, vous devriez envisager de modifier l'expression régulière.

3

Réécrivez l'URL comme canonique

Avez-vous déjà dû faire face aux URL qui incluent des choses comme ? UTM_Content = BufferCF3B2 & UTM_MEDIUM = SOCIAL ou #: ~: text = recherche? Ces paramètres peuvent être ajoutés par des scripts d'analyse et des moteurs de recherche, même si votre site n'en fait aucun usage. Bien qu'ils ne devraient pas concerner vos visiteurs, ils peuvent rendre votre propre suivi d'analyse plus difficile, et vous ne voulez probablement pas que les gens utilisent ces URL dans des liens.

Voici un petit morceau de javascript qui aidera à nettoyer vos URL:

        window.history.replaceState(null, "",
    document.querySelector("link(rel=canonical)").getAttribute("href")
);

    

L'API d'histoire est un moyen puissant de gérer l'histoire du navigateur, y compris la page actuelle. Il vous permet de manipuler l'URL sans provoquer un rafraîchissement de page.

Dans ce cas, la méthode remplacée () fait le travail. Notez comment nous l'appelons avec des valeurs de faux pour les deux premiers arguments car ce n'est que le troisième dont nous nous soucions; Il représente une URL de remplacement.

Cet extrait suppose que vous avez déjà un élément URL canonique dans votre balisage, comme ceci:

        <link rel="canonical" href="https://example.org/this-is-just/an-example" />

    

C'est une bonne idée d'inclure un lien canonique car les moteurs de recherche l'utilisent généralement pour formuler leurs résultats. Si vous ne l'utilisez pas toujours, cependant, assurez-vous d'ajouter une vérification conditionnelle à cet extrait.

4

Ouvrez les liens externes dans un nouvel onglet

Il existe plusieurs façons d'ouvrir un lien dans un nouvel onglet dans votre navigateur. En tant qu'éditeur, cependant, vous voudrez peut-être appliquer cela. En particulier, il est recommandé d'ouvrir des ressources comme les PDF dans un onglet séparé, car ils ont un contexte très différent des pages Web normales.

Vous pouvez même aller jusqu'à ouvrir tous les liens externes dans un onglet séparé. La meilleure façon de le faire est de modifier votre HTML et d'ajouter l'attribut cible:

        <a href="https://example.org" target="_blank">
   An example link that will open in a new tab
a>

    

Si vous ne l'avez pas déjà fait, cela peut être beaucoup de travail. Considérez l'approche suivante, qui transforme les liens dynamiquement à l'aide de JavaScript:

        document.querySelectorAll("a").forEach(function(node) {
    var url = new URL(node.getAttribute("href"), window.location);
    if (window.location.origin != url.origin) {
        node.setAttribute("target", "_blank");
    }
});

    

Ce code compare Window.Location.origin – votre domaine de votre site Web – avec URL.origin, qui est le domaine de chaque lien. Cela signifie que l'approche fonctionnera même si vous utilisez des URL absolues complètes lorsque vous vous liez à votre propre site.

Le grand avantage ici est que vous pouvez rapidement mettre à jour tous les liens si vous décidez de modifier ce comportement. Par exemple, vous pouvez supprimer la condition et avoir tous les liens ouverts dans un nouvel onglet. Ou vous pouvez supprimer complètement ce code et conserver tous les liens dans le même onglet.

5

Tabbant lien en douceur

L'un des raccourcis clavier les plus pratiques lors de la navigation sur le Web est la clé de onglet. Appuyez sur ceci et vous passerez au lien suivant dans la page. Maintenez le décalage vers le bas et vous passerez au lien précédent. Avec ce système simple, naviguer dans les pages avec le clavier est beaucoup plus facile.

Il y a un inconvénient, cependant: sauter instantanément dans une autre partie de la page peut être chodique et vous laisser désorienté, surtout lorsque les liens sont éloignés, sur plusieurs écrans. Cet extrait aide à lisser l'expérience.

        document.addEventListener("keyup", function (e) {
    if (e.which === 9) {
        e.target.scrollIntoView({
            behavior: "smooth",
            block: "center",
        });
    }
});

    

Ce gestionnaire d'événements fonctionne lorsqu'une clé a été publiée, vérifiant le lequel Propriété de l'événement pour tester la clé de tabularité. À ce stade, le navigateur aura déjà déplacé Focus vers le lien suivant, donc E.Target représentera le lien vers lequel l'utilisateur vient de naviguer.

La méthode ScrolLinToView fait alors tout le travail. Les options garantissent que les liens sont défilés vers une position verticalement centrale, avec une animation fluide.

6

Progrès du défilement de la page

Étant donné que les navigateurs et les systèmes d'exploitation ont rendu les barres de défilement moins visibles, certains sites ont pris eux-mêmes le fardeau. Une barre de progrès qui montre à quel point vous avez parcouru une page est désormais un spectacle familier. Il faut un peu de travail pour en ajouter un à n'importe quelle page, mais pas beaucoup:

        let p = document.body.appendChild(
        document.createElement("progress"),
    ),
    de = document.documentElement;
p.setAttribute("value", "0");
p.setAttribute(
    "style",
    "position: fixed; top: 10px; left: 10px; right: 10px; width: auto;",
);
document.addEventListener("scroll", function () {
    p.value = de.scrollTop / (de.scrollHeight - de.clientHeight);
});

    

La plupart du travail ici implique la mise en place de l'élément de barre de progression, qui ressemble à ceci:

        <progress
   value="0"
    style="position: fixed; top: 10px; left: 10px; right: 10px; width: auto;"
>progress>

    

Ce style garantit que la barre de progrès est toujours visible, en haut de la fenêtre. Le reste du script gère l'événement de défilement du document et définit la valeur de progression entre 0 et 1, qui est la plage par défaut. Les propriétés Scrolltop, ScrollHeight et ClientHeight mesurent respectivement la position de défilement, la hauteur totale et la hauteur visible.