Explore new web features before everyone else


Nikita Dubko, Yandex

Explore new
web features
before
everyone else

Nikita Dubko, Yandex

We Are Developers: JS Congress 2021
Handwriting Recognition Explainer
.class
    color #fff
    background #f00
    border-color #fff

    ::after
        content 'Hello!'
CSS Parser API
Issue 897315: macOS Touch Bar API

Why do I need it?

โฌ†๏ธ Progressive
enhancement

Interact with NFC devices on Chrome for Android
The File System Access API
Photoshop's journey to the web

๐Ÿ”„ 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");
    }
}
Component-level art direction with CSS Container Queries
.section-title {
    font-size: clamp(1.25rem, 3qw, 2rem);
    margin-bottom: clamp(0.5rem, 1.5qw, 1rem);
}
CSS Container Query Units

๐Ÿƒโ€โ™‚๏ธ Be ahead

Access modern GPU features with WebGPU
KharkivCSS #4 2018 โ€” ะœะธะบะธั‚ะฐ ะ”ัƒะฑะบะพ "Houdini โ€” CSS, ะบะพั‚ะพั€ั‹ะน JavaScript"
Browser APIs

๐Ÿš€ Fast development

CSS accent-color

โœ๏ธ Influence

ECMAScript proposal: Promise.any + AggregateError

How to look
to the future?

Today, the Trident Era Ends

Internet Explorer

<meta http-equiv="Page-Enter"
      content="RevealTrans(Duration=0.600, Transition=6)">
Hands-on with Portals: seamless navigation on the web
async function navigateToSettingsPage() {
    await document.documentTransition.prepare({
        rootTransition: 'cover-up',
        sharedElements: [element1, element2, element3],
    });

    updateDOMForSettingsPage();

    await document.documentTransition.start({
        sharedElements: [element1, element4, element5],
    });
}
Smooth and simple page transitions with the shared element transition API

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

W3C
WHATWG
TC39
WICG

What to expect
very soon?

๐Ÿ’ฝ Browser releases

New in Chrome
Managing several displays with the Multi-Screen Window Placement API
Firefox Releases Articles
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);
Using the Gamepad API
font-family: system-ui;
Webkit Blog
The <model> element
Safari Release Notes
Added support for lab(), lch(), hwb() color syntaxes.
Safari 15 Beta Release Notes
Release notes for Microsoft Edge Stable Channel
<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>
Web Speech API
Electron Stable Releases

๐Ÿฅ Canaries

Chromium Blog
VirtualKeyboard API

FTP is dead โ˜ ๏ธ

Firefox Nightly News

๐Ÿ–ฅ M1

๐Ÿ” Fission

@intenttoship

๐Ÿ‘ฉโ€๐Ÿ’ป DevRel ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป

t.me/webstandards_ru
@webstandards_en
UI Dev Newsletter

๐Ÿ“ฌ RSS

What to expect
not so soon?

๐Ÿ“ƒ W3C Specs

All standards and drafts

Working Draft (WD)
โ†“
Candidate Recommendation (CR)
โ†“
W3C Recommendation (REC)

W3C Process Document
CSS Nesting Module
.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

The TC39 Process
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');
Temporal
const time = Temporal.PlainTime.from('12:38:28.138818731');

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

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

๐Ÿงช Experiments

Chrome Canary

Firefox Nightly

Fugu API Tracker
{
    "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"
        }
    }
}
File Handling API Explainer

What to expect
someday?

๐Ÿฅš 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] }
proposal-array-grouping
Cryptographically Secure Pseudo-Random Number Generation (CSPRNG) for ECMAScript

๐Ÿ“ Explainers

WebKit Explainers
Explainer: IsLoggedIn
Microsoft Edge 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>
Enabling Custom Control UI
EyeDropper API
await new EyeDropper().open();
// { sRGBHex: '#ff0000' }
Web Platform Primitives for Enlightened Experiences on Foldable Devices
Web Incubator CG
Lock Screen API Explainer
HTML Sanitizer API

How long?

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'
URLPattern brings routing to the web platform

How to change
the future?

๐Ÿ˜ก If something is bad,
I can...

๐Ÿ—ฃ Talk with
colleagues

๐Ÿ“ฑ Complain
on social networks

โš ๏ธ Create an issue

๐Ÿ’ป Make a pull request

World Wide Web Consortium
Ecma TC39
Web Incubator CG

๐ŸŽฉ Experts

Work with cookies the modern way
Fix and simplify cookie writing example
csswg-drafts
[css-values] Trigonometric functions
Software Engineer, Chrome
Mozilla Careers

๐Ÿž Bring new bugs

Bugzilla Mozilla
Bugzilla Webkit
Chromium Bugs
Even the smallest person can change the course of the future.
Galadriel, The Fellowship of the Ring

Thank you!


https://mefody.dev/talks/web-future/js-congress.html
@dark_mefody