Выпуск №306: Алексей Симоненко, Андрей Мелихов, Вадим Макеев про новинки Safari TP, API и тихий релиз Safari 15.1, Photoshop в браузере, Node.js и веб-платформу.

Слушайте на Ютубе https://youtu.be/Q42u5_kSNi4
Ссылки на сайте https://web-standards.ru/podcast/306/

00:01:08 События
00:06:36 Большой Safari TP
00:14:11 Safari 15.1 и API
00:34:12 Photoshop в браузере
00:52:11 Node.js и веб-платформа

Создание 3D-персонажей в Three.js. Мишель Баркер объясняет базовые принципы работы с Three.js на примере анимированных генеративных фигурок.

https://tympanus.net/codrops/2021/10/04/creating-3d-characters-in-three-js/

Прямая трансляция киноута Chrome Dev Summit начнётся в 19:00 (GMT+3). В течение часа инженеры Google и разработчики крупных сервисов расскажут о новинках Chrome и будущем веб-платформы.

https://youtu.be/lNecNY6vDek

Доступные подписи для контента и контролов. Первая часть серии Скотта Охары про принципы и техники описания элементов: от содержимого до ARIA-атрибутов.

https://www.scottohara.me/blog/2021/11/02/names-and-labels.html

Реальный компонент на примере сообщения из Facebook Messenger. Ахмад Шадид собирает компонент, готовый ко всему: изменению контента, направления письма и всевозможным сочетаниям цвета и фона.

https://ishadeed.com/article/facebook-messenger-chat-component/

DOM Treemap, расширение для Chrome DevTools Кристиана Шафера, которое визуализирует распределение DOM-элементов в дереве, чтобы помочь найти проблемные места и улучшить перфоманс.

https://chrome.google.com/webstore/detail/dom-treemap/albnoggfgnooeefdjpncieecohhblonh

Новинки Firefox 94 в обзоре Марата Таналина: экспериментальная поддержка каскадных слоёв в CSS, изоляция сайтов, свойство ShadowRoot.delegatesFocus, оптимизации быстродействия и потребления памяти и другие.

https://tanalin.com/blog/2021/11/firefox-94/

Метрика плавности анимации. Команда Chrome рассказывает, как браузер рассчитывает и отрисовывает кадры анимации и показывает, как включить в DevTools отображение замеров количества потерянных кадров.

https://web.dev/smoothness/

Разбираемся в сортах реактивности. Дмитрий Карловский сравнивает различные подходы к реактивному программированию на примерах популярных фреймворков и библиотек.

https://habr.com/p/586450/

Как появился процесс сборки веб-приложений и как можно переиспользовать подход к настройке параметров ML-модели, чтобы её улучшить. Лекция «Сборка» Антона Кастрицкого и Никиты Сидорова из Школы разработки интерфейсов Яндекса.

https://youtu.be/E6oaEO2FHNI

В защиту диалога. Сэм Торогуд рассказывает про элемент <dialog> и показывает, как с ним можно работать.

https://whistlr.info/2021/in-defence-of-dialog/

Выпуск №307: Андрей Мелихов, Сергей Бережной, Вадим Макеев, Никита Дубко про Firefox 94, Chrome Dev Summit, Web.​Dev, Next.js, Yarn, TypeScript, вёрстку чата и взлом npm-пакета.

Слушайте на Ютубе https://youtu.be/QH30wmmFpVU
Ссылки на сайте https://web-standards.ru/podcast/307/

00:02:58 События
00:10:36 Firefox 94
00:19:22 Chrome Dev Summit
00:27:32 Learn на Web.Dev
00:29:29 Next.js 12
00:33:06 Yarn 3.1
00:35:12 TypeScript 4.5 RC
00:36:57 Вёрстка чата
00:45:23 Взлом пакета

Доступные переключатели. Мишель Баркер делает доступной кнопку выключения анимаций на экране.

https://css-irl.info/accessible-toggles/

Новый раздел «Learn Forms» на web.​dev с исчерпывающим справочником Михаэля Шарналя по формам: основы разметки, возможности форм, интерфейсные паттерны, доступность, безопасность, автозаполнение, тестирование, форматы данных, стилизация и скрипты.

https://web.dev/learn/forms/

Пути в кастомных свойствах. История одного бага. Сергей Артёмов разбирается в интересной особенности путей в кастомных свойствах и ошибке в Safari.

https://web-standards.ru/articles/url-and-custom-properties/

Next.js. Видеокурс Евгения Ковальчука: базовые концепции, роутинг, создание страниц, вёрстка и стили, серверный рендеринг, статическая генерация, создание API и другие темы.

https://youtube.com/playlist?list=PLNkWIWHIRwMHjz7hM5o10BNc6dq0OMd2U

Chrome DevTools: хитрости при отладке. Степан Зубашев делится приёмами работы с инструментами разработчика в Chrome, позволяющими экономить время при отладке кода.

https://habr.com/p/587146/

Эффект глассморфизма для иконок на CSS. Ана Тюдор разбирается, как кроссбраузерно реализовать эффект глассморфизма для иконок-эмодзи, не применяя SVG.

https://css-tricks.com/icon-glassmorphism-effect-in-css/