1. Gestion de la visibilité avec Page Visibility API

L'API visibilityState permet de déterminer si une application web est activement consultée par l'utilisateur ou si elle se trouve en arrière-plan. Cela s'avère crucial pour optimiser les ressources, comme mettre en pause une vidéo ou arrêter des requêtes de polling inutiles.

document.addEventListener("visibilitychange", () => {
    const isPageActive = document.visibilityState === "visible";
    if (isPageActive) {
        console.log("Reprise des activités...");
    } else {
        console.log("Économie de ressources activée.");
    }
});

2. Sélecteur de frère adjacent en CSS

Le sélecteur + est un outil puissant pour appliquer des styles basés sur la proximité immédiate. Il cible un élément qui suit directement un autre au sein du même parent.

/* Ajoute une marge supérieure uniquement au paragraphe qui suit un titre h2 */
h2 + p {
    margin-top: 1.5rem;
    color: #444;
}

3. Cartographie d'images avec Map et Area

Les balises <map> et <area> permettent de définir des zones cliquables spécifiques sur une image via l'attribut usemap. Chaque zone peut être configurée avec des coordonnées et des formes (cercle, rectangle, polygone).

<img src="plan.jpg" usemap="#plan-interactif" alt="Plan">
<map name="plan-interactif">
    <area shape="rect" coords="10,10,100,100" href="zone1.html" alt="Zone A">
    <area shape="circle" coords="200,200,50" href="zone2.html" alt="Zone B">
</map>

4. Effet Parallaxe via background-attachment

Par défaut, l'attribut background-attachment est défini sur scroll. En utilisant la valeur fixed, l'image de fond reste statique par rapport à la fenêtre d'affichage pendant que le contenu défile, créant ainsi un effet de profondeur visuelle.

.section-hero {
    background-image: url('fond.jpg');
    background-attachment: fixed;
    background-size: cover;
}

5. Interception de la fermeutre de page

Pour prévenir la perte de données non sauvegardées, on peut utiliser l'événement beforeunload. Cela déclenche une boîte de dialogue de confirmation native du navigateur.

window.addEventListener('beforeunload', (event) => {
    event.preventDefault();
    event.returnValue = 'Avez-vous enregistré vos modifications ?';
});

6. Réactivité : Proxy vs Object.defineProperty

Dans l'évolution des frameworks comme Vue, le passage de Object.defineProperty à l'API Proxy a marqué une étape majeure. Alors que defineProperty nécessite de parcourir chaque propriété pour y injecter des getters/setters (et peine avec les tableaux), Proxy intercepte les opérations sur l'objet entier, offrant de meilleures performances et une détection native des ajouts/suppressions.

7. Manipulation d'état asynchrone dans React

Lorsqu'une mise à jour de l'état dépend de la valeur précédente, il est impératif d'utiliser la syntaxe fonctionnelle de setState pour éviter les conditions de concurrence.

// Approche recommandée pour les compteurs ou accumulateurs
this.setState((prevState, props) => ({
    totalPoints: prevState.totalPoints + props.bonus
}));

8. Périmètres de sécurité : Error Boundaries

Les composants "Error Boundary" capturent les erreurs JavaScript n'importe où dans l'arbre des cmoposants enfants et affichent une interface de secours au lieu de faire planter toute l'application.

class FiletDeSecurite extends React.Component {
    constructor(props) {
        super(props);
        this.state = { erreurDetectee: false };
    }

    static getDerivedStateFromError(error) {
        return { erreurDetectee: true };
    }

    componentDidCatch(err, info) {
        console.error("Rapport d'erreur :", err, info);
    }

    render() {
        if (this.state.erreurDetectee) {
            return <div>Désolé, un problème est survenu.</div>;
        }
        return this.props.children;
    }
}

9. Fragments React pour un DOM propre

L'utilisation de React.Fragment permet de regrouper une liste d'enfants sans ajouter de nœud supplémentaire inutile au DOM, ce qui préserve la structure HTML et les styles CSS.

// Syntaxe explicite
const ListeElements = () => (
    <React.Fragment>
        <li>Item 1</li>
        <li>Item 2</li>
    </React.Fragment>
);

// Syntaxe courte
const ListeAlternative = () => (
    <>
        <span>Texte A</span>
        <span>Texte B</span>
    </>
);