Веб-стандарты

Простой способ сказать нам «спасибо» и попасть в закрытый чат:

• Boosty
• Patreon

Ведущие: Юля Миоцен, Андрей Мелихов

Темы

00:00:00 Интро
00:01:08 Safari 16
00:12:39 Has сломал jQuery
00:23:41 Adobe Figma CC
00:35:25 Плохой input number
00:45:53 JS и loading=lazy
00:49:58 Медленный SSR
00:58:55 Theatre.js

Safari 16

• WebKit Features in Safari 16.0
• Is animated AVIF support already landed?
• Safari 16.1 Beta Release Notes
• Container queries begin to land in stable browsers

Has сломал jQuery

• Has сломал сайты на jQuery

Adobe Figma CC

• Слух года: Adobe собирается купить Figma
• A new collaboration with Adobe

Плохой input number

• Why the number input is the worst input
• Why the GOV.UK Design System team changed the input type for numbers

JS и loading=lazy

• Disabled JavaScript turns off native lazy loading

Медленный SSR

• How To Avoid SSR Load Issues in Node.js

Theatre.js

• Theatre.js

Читайте новости

• Telegram
• X
• VK
• Facebook
• Mastodon
• Bluesky
• LinkedIn

Простой способ сказать нам «спасибо» и попасть в закрытый чат:

• Boosty
• Patreon

Ведущие: Вадим Макеев, Юля Миоцен, Никита Дубко, Алексей Симоненко

Темы

00:00:00 Интро
00:01:08 Firefox Nightly
00:08:06 Safari TP
00:28:25 Браузер Arc
00:36:23 Сбор SVG-багов
00:41:41 Доступность в Доке
00:50:00 Вложенный радиус
00:57:33 Правильное меню
01:12:53 Доступ к камере из HTML
01:25:38 Clipboard API
01:28:36 Export default

Firefox Nightly

• These Weeks In Firefox: Issue 123

Safari TP

• Release Notes for Safari Technology Preview 153

Браузер Arc

• Arc

Сбор SVG-багов

• SVG Interop 2023

Доступность в Доке

• Дока
• Раздел по доступности в Доке
• Ишью с лейблом a11y

Вложенный радиус

• New border-radius value for perfectly matching nested radii
• Optical correction for rounded corners

Правильное меню

• Building the main navigation for a website
• Stylelint-performance-animation

Доступ к камере из HTML

• You Can Access A User’s Camera with Just HTML

Clipboard API

• Async Clipboard API

Export default

• Default Exports in JavaScript Modules Are Terrible

Читайте новости

• Telegram
• X
• VK
• Facebook
• Mastodon
• Bluesky
• LinkedIn

Простой способ сказать нам «спасибо» и попасть в закрытый чат:

• Boosty
• Patreon

Ведущие: Андрей Мелихов, Вадим Макеев, Алексей Симоненко, Никита Дубко

Темы

00:00:00 Интро
00:04:14 Chrome 105
00:24:01 Картинки в Angular
00:31:10 Firefox 104
00:44:04 Новинки SpiderMonkey
00:56:30 Бета TypeScript 4.9
01:04:03 Стилизация ошибок
01:14:20 Отключение кук

Chrome 105

• New in Chrome 105

Картинки в Angular

• Optimizing Images with the Angular Image Directive

Firefox 104

• Firefox 104
• Oh Snap! Adam Argyle
• Титры для Disney+
• Титры для Washington Post
• WebVTT API
• Файл youtube.js

Новинки SpiderMonkey

• SpiderMonkey Newsletter (Firefox 104-105)
• No more confusing native modules in Node.js

Бета TypeScript 4.9

• TypeScript 4.9 Iteration Plan

Стилизация ошибок

• Meet the CSS highlight pseudos
• Chromium spelling and grammar features
• Chromium spelling and grammar, part 2
• Styles of text selection

Отключение кук

• Things not available when someone blocks all cookies

Читайте новости

• Telegram
• X
• VK
• Facebook
• Mastodon
• Bluesky
• LinkedIn

Простой способ сказать нам «спасибо» и попасть в закрытый чат:

• Boosty
• Patreon

Ведущие: Андрей Мелихов, Вадим Макеев

Темы

00:00:00 Интро
00:01:10 Safari TP 152
00:07:19 Селектор :has
00:27:03 Flipper для отладки
00:37:37 Deno теперь с npm
00:46:33 Console Ninja
00:51:50 Цвета и контраст
01:01:48 Перфоманс и Early Hints
01:20:16 Должен ли фронтендер

Safari TP 152

• Release Notes for Safari Technology Preview 152

Селектор :has

• Using :has() as a CSS Parent Selector and much more

Flipper для отладки

• Flipper and JS: why we added JS support to a mobile debugging platform
• Flipper

Deno теперь с npm

• Deno 1.25 Release Notes

Console Ninja

• Console Ninja

Цвета и контраст

• Color and Contrast.com

Перфоманс и Early Hints

• How to eliminate render blocking resources
• Early Hints update: How Cloudflare, Google, and Shopify are working together to build a faster Internet for everyone
• Faster page loads using server think-time with Early Hints

Должен ли фронтендер

• The web is a harsh manager

Читайте новости

• Telegram
• X
• VK
• Facebook
• Mastodon
• Bluesky
• LinkedIn

Простой способ сказать нам «спасибо» и попасть в закрытый чат:

• Boosty
• Patreon

Ведущие: Никита Дубко, Вадим Макеев

Темы

00:00:00 Интро
00:01:07 Server Push всё
00:09:04 Chrome DevTools
00:26:42 Перфоманс
00:39:24 SPA и SEO
00:50:55 FocusVisible
01:00:58 Приватность WebView
01:13:21 Container Queries

Server Push всё

• Removing HTTP/2 Server Push from Chrome

Chrome DevTools

• What’s New In DevTools (Chrome 105)

Перфоманс

• Can browsers optimize the loading of third-party resources?

SPA и SEO

• Google: Dynamic dendering is a workaround and not a long-term solution

FocusVisible

• The HTML has added a focusVisible option for the focus()
• This :focus-visible to :focus fallback is good enough for Safari 14

Приватность WebView

• iOS Privacy: see what JS commands get injected through an in-app browser

Container Queries

• Use the Right Container Query Syntax
• Container-query-polyfill
• A first look at container-query-polyfill
• CSS Container Queries, или Адаптация по-новому

Читайте новости

• Telegram
• X
• VK
• Facebook
• Mastodon
• Bluesky
• LinkedIn

Простой способ сказать нам «спасибо» и попасть в закрытый чат:

• Boosty
• Patreon

Ведущие: Андрей Мелихов, Юля Миоцен

Темы

00:00:00 Интро
00:00:53 Эмоджи в опенсорсе
00:04:06 Чёрно-белые интерфейсы
00:10:25 TypeScript 4.8 RC
00:13:15 Смешивание цветов
00:20:45 Единицы вьюпорта
00:29:26 Неожиданный рейтинг
00:33:30 Анимация в DevTools
00:41:21 React Query, не зашло
00:51:01 Аннотация типов в JS

Эмоджи в опенсорсе

• Open-source Microsoft Teams emojis

Чёрно-белые интерфейсы

• System.css
• Mono

TypeScript 4.8 RC

• Announcing TypeScript 4.8 RC

Смешивание цветов

• CSS color-mix()

Единицы вьюпорта

• CSS viewport sizes

Неожиданный рейтинг

• On ratings and meters

Анимация в DevTools

• How to inspect animations

React Query, не зашло

• Why we moved away from React Query

Аннотация типов в JS

• Type Annotations in JavaScript
• WAT

Читайте новости

• Telegram
• X
• VK
• Facebook
• Mastodon
• Bluesky
• LinkedIn

Простой способ сказать нам «спасибо» и попасть в закрытый чат:

• Boosty
• Patreon

Ведущие: Никита Дубко, Юля Миоцен, Андрей Мелихов, Алексей Симоненко

Темы

00:00:00 Интро
00:00:46 Chrome DevTools
00:16:12 @container и :has
00:25:17 Random в CSS
00:33:16 CSS в npm
00:43:02 Docusaurus
00:49:44 Стики VS Code
00:57:51 Поля для телефона
01:11:45 Отдельные transform
01:16:15 SPA и MPA

Chrome DevTools

• What’s New In DevTools Chrome 104
• BFCache, или Туда и обратно
• C in 100 Seconds

@container и :has

• @container and :has() landing in Chromium 105
• 2D hover effect using :has()

Random в CSS

• Random() function
• We just resolved to pursue work on random() and random-item() for CSS!

CSS в npm

• Npm Query
• Introducing the new npm Dependency Selector Syntax
• Npm ships a new query command to inspect dependencies

Docusaurus

• Announcing Docusaurus 2.0

Стики VS Code

• VS Code comes with an experimental sticky mode

Поля для телефона

• Phone inputs and you: the designer’s essential UI guide

Отдельные transform

• Finer grained control over CSS transforms with individual transform properties

SPA и MPA

• In Defence of the Single Page Application
• The balance has shifted away from SPAs
• SPAs: theory versus practice

Читайте новости

• Telegram
• X
• VK
• Facebook
• Mastodon
• Bluesky
• LinkedIn

Простой способ сказать нам «спасибо» и попасть в закрытый чат:

• Boosty
• Patreon

Ведущие: Андрей Мелихов, Алексей Симоненко, Никита Дубко

Темы

00:00:00 Интро
00:00:52 State of CSS
00:11:50 CSS Nesting
00:28:07 Firefox 103
00:37:46 Безопасность npm
00:48:41 Адаптивный манифест
01:00:38 SVG не только картинка
01:08:23 Лоадеры в Node.js
01:15:59 CSS-селекторы будущего
01:23:27 Сторонние куки

State of CSS

• Help design the State of CSS Survey 2022!

CSS Nesting

• Help pick a syntax for CSS nesting

Firefox 103

• Firefox 103 (En)
• Firefox 103 (Ru)

Безопасность npm

• Introducing even more security enhancements to npm

Адаптивный манифест

• Web Manifest Overrides

SVG не только картинка

• SVG images aren’t just images
• Svg-hush

Лоадеры в Node.js

• Experimental ESM Loader
• Experimental ESM Loader Hooks API

CSS-селекторы будущего

• Solving “The Dangler” Conundrum with Container Queries and :has()

Сторонние куки

• New Recipes for “Cookies”
• Expanding testing for the Privacy Sandbox for the Web

Читайте новости

• Telegram
• X
• VK
• Facebook
• Mastodon
• Bluesky
• LinkedIn

Простой способ сказать нам «спасибо» и попасть в закрытый чат:

• Boosty
• Patreon

Ведущие: Алексей Симоненко, Вадим Макеев, Юля Миоцен

Темы

00:00:00 Интро
00:00:44 Twitter Spaces
00:09:43 Safari 15.6
00:16:50 Новые люди в Apple
00:28:38 Графика или CSS?
00:39:24 ARIA в CSS-селекторах
00:49:34 Эмоции в интерфейсах
01:06:30 Курс по доступности

Twitter Spaces

• Connect with us on Twitter Spaces

Safari 15.6

• New WebKit Features in Safari 15.6

Новые люди в Apple

• I have joined the WebKit team at Apple

Графика или CSS?

• Yes, it’s a CSS
• Тайна третьей планеты

ARIA в CSS-селекторах

• Style with Stateful, Semantic Selectors

Эмоции в интерфейсах

• Where’s the fun in accessibility?

Курс по доступности

• Testing Accessibility
• Thrilled to announce my self-paced a11y workshop series

Читайте новости

• Telegram
• X
• VK
• Facebook
• Mastodon
• Bluesky
• LinkedIn

Простой способ сказать нам «спасибо» и попасть в закрытый чат:

• Boosty
• Patreon

Ведущие: Никита Дубко, Андрей Мелихов, Вадим Макеев

Темы

00:00:00 Интро
00:00:34 Chrome Dev Insider
00:19:52 Safari TP
00:27:24 Библиотека React-компонентов
00:47:32 Кнопки, но не радио
00:56:30 Переменные единицы
01:10:01 Aspect-ratio

Chrome Dev Insider

• Chrome Dev Insider: The CSS and UI edition

Safari TP

• Safari Technology Preview 149

Библиотека React-компонентов

• Notes on maintaining an internal React component library

Кнопки, но не радио

• What is the best way to mark up an exclusive button group?
• Perceived affordances and the functionality mismatch
• Переключатель цветовой схемы

Переменные единицы

• Как и зачем типизировать CSS-переменные?
• Вы уже слышали о вариативных юнитах?
• Обсуждение термина variable units в словаре

Aspect-ratio

• Avoiding img layout shifts: aspect-ratio vs width & height attributes

Читайте новости

• Telegram
• X
• VK
• Facebook
• Mastodon
• Bluesky
• LinkedIn