Что веб грядущий нам готовит

Никита Дубко, Яндекс

Что веб грядущий
нам готовит

Никита Дубко, Яндекс

GDG Minsk Web August Meetup
Handwriting Recognition Explainer
.class
    color #fff
    background #f00
    border-color #fff

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

Зачем смотреть в будущее?

⬆️ Прогрессивное
улучшение

Interact with NFC devices on Chrome for Android
The File System Access API

🔄 Рефакторинг

.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
CSS Container Queries, или Адаптация по-новому: контейнер вместо вьюпорта

🏃‍♂️ Быть впереди

Access modern GPU features with WebGPU
KharkivCSS #4 2018 — Микита Дубко "Houdini — CSS, который JavaScript"
API браузера

🚀 Ускорение разработки

CSS accent-color

✏️ Влияние на веб

ECMAScript proposal: Promise.any + AggregateError

Как смотреть в будущее?

История фронтенда. Браузер, который умел всё
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);

Дискомфорт

Новая фича

Дискомфорт

Обсуждение

Новая фича

Дискомфорт

Обсуждение

Стандарт

🌐 Браузеры

📃 Стандарты

W3C
WHATWG
TC39
WICG

Чего ожидать
очень скоро?

💽 Релизы браузеров

New in Chrome
Managing several displays with the Multi-Screen Window Placement API
New in Chrome 94
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

🐥 Канарейки

Chromium Blog
VirtualKeyboard API

FTP всё ☠️

Firefox Nightly News

🖥 M1

🔐 Fission

@intenttoship

👩‍💻 Деврелы 👨🏻‍💻

t.me/webstandards_ru
t.me/webnya

📬 RSS

Чего ожидать не очень скоро?

📃 Cпецификации W3C

All standards and drafts

Working Draft (WD)

Candidate Recommendation (CR)

W3C Recommendation (REC)

Как организована веб-платформа
CSS Nesting Module
.foo {
    color: blue;
    & > .bar { color: red; }
}

.foo {
    color: red;
    @nest .parent & {
        color: blue;
    }
}
CSS-нестинг — больше, чем сахар

📃 Cпецификации TC39

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

🧪 Эксперименты

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

Чего ожидать
очень не скоро?

🥚 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

Долго?

EyeDropper API
✏️
август 2021

App History API
✏️
февраль 2021

URLPattern
✏️
август 2019

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

Как менять будущее?

😡 Если мне плохо,
я могу...

🗣 Пожаловаться
коллегам

📱 Пожаловаться
в соц. сетях

⚠️ Принести issue

💻 Сделать pull request

World Wide Web Consortium
Ecma TC39
Web Incubator CG

🎩 Эксперты

Как организована веб-платформа
TC39: взгляд изнутри, Сергей Рубанов
ECMAScript proposal: Promise.any + AggregateError
Work with cookies the modern way
Fix and simplify cookie writing example
csswg-drafts
[css-values] Trigonometric functions
Software Engineer, Chrome

🐞 Приносить баги

Bugzilla Mozilla
Bugzilla Webkit
Chromium Bugs
Даже самое маленькое создание может изменить будущее.
Галадриэль, Властелин Колец: Братство кольца

Спасибо!


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