stevepiron

/**
 * Serving WebP images drastically reduces the weight of a web page,
 * however their implementation is rather complex to manage as it involves
 * picture elements with multiple sources to make sure browsers that do not
 * yet support them are not left out without any image at all.
 *
 * Imgix generates images on the fly as they are requested. This snippet
 * leverages this amazing capability to simplify the delivery of WebP images
 * in browsers that support them.
 *

stevepiron

<noscript>
    <img src="image.jpg">
</noscript>
<img data-src="image.jpg" loading="lazy">

<script>
    if ('loading' in HTMLImageElement.prototype) {
        const lazy = document.querySelectorAll('[data-src]');
        lazy.forEach(el => {
            // Turn `data-src` into `src`

stevepiron

if ('loading' in HTMLImageElement.prototype) {
    // Native lazy loading is supported
} else {
    // Offer another lazy loading solution
}

stevepiron

<img src="image.jpg" loading="lazy">

stevepiron

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js');
}

stevepiron

/* =========================================================================  */
/* Colors */
/* =========================================================================  */

$neutral-1: #767676;
$neutral-2: #E6E6E6;
$neutral-3: #F5F5F5;

$neutral-text: $neutral-1;
$neutral-border: $neutral-2;

stevepiron

<nav class="o-lang-switcher">
   <h2 class="u-screenreader-only">{{ 'Available translations of the current page'|translate }}</h2>
   <ul class="o-lang-switcher__list">
       {% for locale in craft.i18n.getSiteLocales() %}
            {% if entry is defined %}
               {% set localisedPage = craft.entries.id(entry.id).locale(locale.id).first() %}
            {% elseif category is defined %}
               {% set localisedPage = craft.categories.id(category.id).locale(locale.id).first() %}
            {% endif %}
            {% set linkUrl = localisedPage is defined ? localisedPage.getUrl() : craft.config.siteUrl[locale.id] %}