Explore new web features before everyone else

.class
    color #fff
    background #f00
    border-color #fff

    ::after
        content 'Hello!'

⬆️ Progressive
enhancement

🔄 Refactoring

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.parent {
    display: flex;
    place-items: center;
}

.card__media {
    aspect-ratio: 2 / 3;
    background-image: url("test.jpg");
}
.container {
    contain: layout inline-size;
}

@container (min-width: 480px) {
    .card__media {
        aspect-ratio: 16 / 9;
        background-image: url("test-wide.jpg");
    }
}

.section-title {
    font-size: clamp(1.25rem, 3qw, 2rem);
    margin-bottom: clamp(0.5rem, 1.5qw, 1rem);
}

🏃‍♂️ Be ahead

🚀 Fast development

✏️ Influence

Internet Explorer

<meta http-equiv="Page-Enter"
      content="RevealTrans(Duration=0.600, Transition=6)">

async function navigateToSettingsPage() {
    await document.documentTransition.prepare({
        rootTransition: 'cover-up',
        sharedElements: [element1, element2, element3],
    });

    updateDOMForSettingsPage();

    await document.documentTransition.start({
        sharedElements: [element1, element4, element5],
    });
}

Internet Explorer 4+

filter: progid:DXImageTransform.Microsoft.Matrix(
    M11=0.9659258262890683,
    M12=-0.2588190451025207,
    M21=0.2588190451025207,
    M22=0.9659258262890683,
    SizingMethod='auto expand');

transform: rotate(15deg);

Discomfort
↓
New feature

Discomfort
↓
Discussion
↓
New feature

Discomfort
↓
Discussion
↓
Standard

🌐 Browsers

📃 Standards

💽 Browser releases

var gamepads = {};

function gamepadHandler(event, connecting) {
    var gamepad = event.gamepad;

    if (connecting) {
        gamepads[gamepad.index] = gamepad;
    } else {
        delete gamepads[gamepad.index];
    }
}

window.addEventListener("gamepadconnected", function(e) {
    gamepadHandler(e, true);
}, false);
window.addEventListener("gamepaddisconnected", function(e) {
    gamepadHandler(e, false);
}, false);

font-family: system-ui;

Added support for lab(), lch(), hwb() color syntaxes.

<script type="text/javascript">
    var recognition = new SpeechRecognition();
    recognition.onresult = function(event) {
        if (event.results.length > 0) {
            q.value = event.results[0][0].transcript;
            q.form.submit();
        }
    }
</script>

<form action="https://www.example.com/search">
    <input type="search" id="q" name="q" size=60>
    <input type="button" value="Click to speak" onclick="recognition.start()">
</form>

🐥 Canaries

FTP is dead ☠️

🖥 M1

🔐 Fission

👩‍💻 DevRel 👨🏻‍💻

📬 RSS

📃 W3C Specs

Working Draft (WD)
↓
Candidate Recommendation (CR)
↓
W3C Recommendation (REC)

.foo {
    color: blue;
    & > .bar { color: red; }
}

.foo {
    color: red;
    @nest .parent & {
        color: blue;
    }
}

📃 TC39 Specs

Stage 0
↓
Stage 1
↓
Stage 2
↓
Stage 3
↓
Stage 4

const birthday = Temporal.PlainMonthDay.from('12-15');

const birthdayIn2030 = birthday.toPlainDate({ year: 2030 });
birthdayIn2030.dayOfWeek; // => 7

assert(birthdayIn2030 instanceof Temporal.PlainDate);
assert.equal(birthdayIn2030.toString(), '2030-12-15');

const time = Temporal.PlainTime.from('12:38:28.138818731');

const wholeHour = time.round({
    smallestUnit: 'hour',
    roundingMode: 'floor'
});

assert.equal(wholeHour.toString(), '12:00:00');

🧪 Experiments

Chrome Canary

• Go to chrome://flags/
• Enable “Experimental Web Platform features”.
• Restart the browser.
• Have fun!

Firefox Nightly

• Go to about:config
• Enable “browser.preferences.experimental”.
• Restart the browser.
• Have fun!

{
    "file_handlers": {
        "graph": {
            "extensions": [ "svg" ],
            "include_directories": false,
            "types": [ "image/svg+xml" ],
            "verb": "open_with"
        },
        "raw": {
            "extensions": [ "csv" ],
            "include_directories": false,
            "types": [ "text/csv" ],
            "verb": "open_with"
        }
    }
}

🥚 Stage 1

const array = [1, 2, 3, 4, 5];

// groupBy groups items by arbitrary key.
// In this case, we're grouping by even/odd keys
array.groupBy(i => {
    return i % 2 === 0 ? 'even': 'odd';
});

// =>  { odd: [1, 3, 5], even: [2, 4] }

📝 Explainers

<style>
    .styled-select::part(button) {
        background-color: red;
    }
    .styled-select:open::part(button) {
        background-color: lightgray;
    }
</style>
<select class="styled-select">
    <option>choice 1</option>
    <option>choice 2</option>
</select>

await new EyeDropper().open();
// { sRGBHex: '#ff0000' }

EyeDropper API
✏️
2021, August

App History API
✏️
2021, February

URLPattern
✏️
2019, August

const p = new URLPattern({
    hostname: ':subdomain.example.com',
    pathname: '/*/:image.jpg'
});

const result = p.exec('https://imagecdn1.example.com/foo/cat.jpg');
// result.hostname.groups.subdomain will be 'imagecdn1'
// result.pathname.groups[0] will be 'foo', corresponding to *
// result.pathname.groups.image will be 'cat'

😡 If something is bad,
I can...

🗣 Talk with
colleagues

📱 Complain
on social networks

⚠️ Create an issue

💻 Make a pull request

🎩 Experts

🐞 Bring new bugs

Even the smallest person can change the course of the future.
Galadriel, The Fellowship of the Ring