Forem: Laurent Raymond

Maitriser l'opérateur de chaînage optionnel en JavaScript

Laurent Raymond — Tue, 27 Feb 2024 14:43:30 +0000

Introduction

Dans le monde numérique en constante évolution d'aujourd'hui, L'opérateur de chaînage optionnel en JavaScript est l'un de ces outils puissants qui peuvent aider à optimiser votre code et à gagner du temps dans le développement de votre site web.

Comprendre l'Opérateur de chaînage Optionnel en JavaScript

L'opérateur de ch optionnel, également connu sous le nom de "optional chaining" en anglais, est une fonctionnalité introduite dans JavaScript ES2020. Cet opérateur offre une manière concise et élégante de traiter les valeurs null ou undefined lors de l'accès à des propriétés d'objets imbriqués.

Comment Fonctionne l'Opérateur de chaînage Optionnel

L'utilisation de l'opérateur de chaînage optionnel est simple et intuitive. Plutôt que d'accéder directement à une propriété d'objet qui pourrait être null ou undefined et provoquer une erreur, vous pouvez utiliser l'opérateur ?. pour accéder à la propriété de manière sécurisée. Si la propriété cible est null ou undefined, l'expression entière renverra undefined au lieu de générer une erreur.

Voici un exemple simple pour illustrer son fonctionnement :

// Sans l'opérateur de chaînage optionnel
const longueur = objet && objet.attribut && objet.attribut.longueur;

// Avec l'opérateur de chaînage optionnel
const longueur = objet?.attribut?.longueur;

Dans cet exemple, si objet ou attribut est null ou undefined, l'expression renverra simplement undefined sans provoquer d'erreur.

Avantages de l'Utilisation de l'Opérateur de chaînage Optionnel

L'opérateur de chaînage optionnel présente plusieurs avantages significatifs pour les développeurs web :

1. Réduction du Risque d'Erreurs

En utilisant l'opérateur de chaînage optionnel, vous pouvez réduire considérablement le risque d'erreurs liées à l'accès à des propriétés d'objets qui pourraient être null ou undefined. Cela rend votre code plus robuste et moins sujet aux exceptions imprévues.

2. Amélioration de la Lisibilité du Code

L'opérateur de chaînage optionnel permet d'écrire un code plus concis et lisible en évitant les structures conditionnelles complexes pour vérifier la nullité ou l'undefined des propriétés d'objets. Cela rend le code plus facile à comprendre et à maintenir pour les développeurs.

3. Optimisation de l'Expérience de développement

En réduisant le risque d'erreurs et en améliorant la lisibilité du code, l'opérateur de chaînage optionnel contribue à une meilleure expérience de développement sur votre projet. Les fonctionnalités s'exécutent de manière plus fluide et les développeurs rencontrent moins de problèmes techniques.

Conclusion

En conclusion, l'opérateur de chaînage optionnel en JavaScript est un outil puissant et précieux pour les développeurs web. En utilisant cet opérateur de manière appropriée, vous pouvez améliorer la robustesse, la lisibilité et l'expérience de développement de votre projet avec JavaScript. N'hésitez pas à l'incorporer dans vos projets pour tirer pleinement parti de ses avantages.

Maîtrisez l'Art du Dark Mode avec une seule ligne de CSS !

Laurent Raymond — Sun, 18 Feb 2024 03:32:08 +0000

Voyons ensemble comment mettre en place facilement un mode sombre avec quelques lignes de CSS inspirées du microframework nightowl. Le fonctionnement est assez similaire à celui de l'extension Dark reader sur Chrome.

Tout ce que vous avez a ajouter a votre feuille de style :

Voici tout ce dont vous avez besoin c'est magique, n'est-ce pas ?
(j'ai pas menti pour les une lignes lisez jusqu'a la fin)

@media (prefers-color-scheme: dark) {
  body {
    filter: invert(100%) hue-rotate(180deg);
  }

  html {
    background-color: #111;
  }

  img, video, iframe {
    filter: invert(100%) hue-rotate(180deg);
  }

  .icon {
    filter: invert(15%) hue-rotate(180deg);
  }

  li::marker {
    color: #666;
  }
}

Alors comment Ça Marche ?

Les préliminaires avec la règle @media

@media (prefers-color-scheme: dark) {
   .
   .
   .
}

Ce bloc de code utilise une règle @media pour cibler les appareils qui préfèrent un schéma de couleurs sombre. Lorsque l'utilisateur a activé le mode de couleur sombre sur son appareil ou navigateur, les styles CSS à l'intérieur de cette règle seront appliqués. Cette approche permet d'adapter l'apparence de l'interface utilisateur en fonction des préférences de l'utilisateur en matière de couleur, offrant ainsi une meilleure expérience d'utilisation.

La technique magique

voici lafameuse ligne magique tout s'opère ici dans la première règle :

  body {
    filter: invert(100%) hue-rotate(180deg);
  }

Ce code applique un filtre d'effet sur l'élément

de la page web. Plus spécifiquement, il utilise le filtre invert(100%) pour inverser toutes les couleurs, transformant ainsi les teintes claires en teintes sombres et vice versa. Ensuite, il utilise hue-rotate(180deg) pour faire pivoter la teinte des couleurs de 180 degrés, ce qui a pour effet d'inverser la teinte des couleurs restantes. En combinant ces deux filtres, l'effet final est une inversion totale des couleurs de l'élément , créant ainsi une esthétique visuelle inversée.

Revenons un instant sur la fonction hue-rotate(). Ce filtre permet de modifier subtilement la teinte des couleurs d'un élément spécifique. En appliquant hue-rotate(angle), où l'angle est exprimé en degrés, toutes les nuances de couleur de l'élément se déplacent autour du cercle chromatique en fonction de cet angle.

la roue chromatique:

Si vous voulez en savoir plus cliquez ici

Par exemple, hue-rotate(180deg) fera pivoter toutes les couleurs de 180 degrés autour du cercle chromatique, ce qui signifie que les couleurs complémentaires seront échangées. Les teintes rouges deviendront cyan, les jaunes deviendront bleus, etc...

Le problème de firefox

Vous voyez ce code la :

html {
  background-color: #111;
}

Vous vous demandez peut-être pourquoi j'applique une couleur en dur alors que j'ai un filtre d'inversion ?

La réponse est simple : le navigateur Firefox ne prend pas en charge les filtres pour l'arrière-plan de l'élément racine .

Ainsi, je dois définir manuellement l'arrière-plan de l'élément racine. Dans votre cas, il vous faudra trouver l'inverse de la couleur de votre arrière-plan. Cette méthode fonctionne également sur d'autres navigateurs, même Internet Explorer (bien que tout le monde déteste IE de toute façon).

On a encore un gros problème: les médias (img, vidéos etc..)

Avec le filtre d'inversetion et bah tout est inversé même les médias de notre site et si on veux éviter d'avoir des images bizarre comme ça :

On doit donc rusé en inversant le filtre d'inversion...
C'est plutot simple:

img, video, iframe {
   filter: invert(100%) hue-rotate(180deg);
}

et ça marche du tonnerre !

Les ajustements

les autres règles sont des ajustements optiques pour améliorer le contraste sur quelques éléments comme les icônes et les arrière-plans des blocs de code !

/* Contraste amélioré sur les icônes. */
.icon {
  filter: invert(15%) hue-rotate(180deg);
}

/* Améliorer le contraste sur les marqueurs d'éléments de liste. */
li::marker {
  color: #666;
}

Si vous souhaitez intégrer le mode sombre sur votre site web, les filtres CSS sont vos meilleurs alliés, surtout si vous manquez de temps pour élaborer une feuille de style distincte.

Je rends a césar ce qui est a lui ce post a été FORTEMENT inspiré par Aral Balkan, nightowl et Dark reader un grand merci a eux !

Unraveling the Power of CSS Nesting Selectors: A Comprehensive Introduction

Laurent Raymond — Thu, 08 Feb 2024 21:40:05 +0000

In the realm of web development and design, CSS nesting selectors stand as a powerful tool, often underutilized and misunderstood. In this comprehensive guide, we delve into the intricacies of CSS nesting selectors, unraveling their potential and showcasing their role in crafting efficient and maintainable stylesheets.

Understanding CSS Nesting Selectors

CSS nesting selectors allow developers to target elements within other elements, creating a hierarchical structure that mirrors the HTML markup. This enables a more organized and intuitive approach to styling, enhancing readability and scalability of CSS code.

Syntax and Usage

The syntax for CSS nesting selectors involves combining selectors « & » to specify nested elements. This is achieved by utilizing the parent-child relationship between HTML elements. For instance, consider the following example:

Without nesting selector :

.parent {
    /* Styles for parent element */
}

.parent .child {
    /* Styles for child element */
}

With nesting selector :

.parent {
    /* Styles for parent element */

    & .child{
        /* Styles for child element */
    }
}

In this example, the .child selector is nested within the .parent selector, targeting specific elements within the parent container.

Benefits of CSS Nesting

The utilization of CSS nesting selectors offers several benefits to developers:

Modularity and Readability: Nesting selectors allow for a more modular approach to styling, making it easier to understand the structure of the stylesheet.

Efficient Targeting: By targeting nested elements directly, developers can avoid overly specific selectors and streamline their CSS code.

Improved Maintenance: CSS nesting promotes code maintainability by establishing clear relationships between elements, facilitating future updates and modifications.

Best way to use CSS Nesting

While CSS nesting selectors offer significant advantages, it's essential to follow best practices to ensure optimal performance and maintainability of stylesheets.

Limit Nesting Depth
Excessive nesting can lead to overly complex and inefficient CSS code. It's advisable to limit nesting depth to avoid specificity issues and enhance code readability.

Use Descendant Selectors Sparingly
While descendant selectors enable targeting of deeply nested elements, they should be used judiciously. Over-reliance on descendant selectors can result in performance bottlenecks and increased specificity.

Compatibility with CSS BEM Naming Convention
CSS nesting aligns well with the hierarchical structure inherent in the BEM naming convention. By leveraging nesting selectors within BEM, developers can create a logical and intuitive relationship between blocks, elements, and modifiers.

.block {
    /* Styles for the block */

    &__element {
        /* Styles for the element */

         &--modifier{
             /* Styles for the modifier */

         }
    }
}

Is this the end of css preprocessors ? (of course not)

Practical Examples

Let's explore practical examples to illustrate the effectiveness of CSS nesting selectors:

let's with the HTML:

<div class="card">
  <img src="https://www.focolare.org/mariapolivictoria/files/2014/01/Man_18_montagne-685x325.jpg" class="image"></img>
  <h1 class="title">
    Man Region: Ivory Coast's Natural Oasis</h1>
  <p class="description">
    The Man region in Ivory Coast is renowned for its 18 majestic mountains, which define its breathtaking landscape.
  </p>
  <button class="btn">learn more about it &#8594</button>
</div>

so we get this :

Now let's had our style with nesting selector:

.card {
    width: 470px;
    background: #fefefe;
    padding: 1em;
    border-radius: 1.5em;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);

    & .image {
        width: 100%;
        border-radius: 0.8em;
        margin-bottom: 1em;
    }

    & .title {
        font-size: 1.4em;
        color: #111;
    }

    & .description {
        font-size: 1em;
        color: #777;
        font-weight: 500;
    }

    & .btn {
        width: 100%;
        margin-top: 1em;
        padding: 0.6em 3em;
        background: #0090ff;
        border: none;
        border-radius: 0.5em;
        color: #f0f0f0;
        cursor: pointer;
        font-weight: 600;
        font-size: 1em;
        transition: 0.1s ease;

        &:hover {
            background: #0084e9;
        }
    }
}

and finally we will get that :

find this exemple on codepen

Considerations for Browser Compatibility

While CSS nesting selectors offer significant advantages in terms of code organization and maintainability, it's important to exercise caution due to browser compatibility concerns. Visit can i use for more information

For further information

Nesting selector is even more powerful than what I've shown you, this is just an introduction if you want to go further visit the mdn documentation