Веб-стандарты. Страница 39

Вашему SPA не нужен роутер. Станислав Черенков рассказывает об основных ошибках при использовании роутеров на клиенте и предлагает способ их избежать — https://forweb.dev/en/blog/drop-the-router/

Что за… «замыкание»? Дэн Абрамов объясняет замыкания в JavaScript на множестве примеров https://whatthefuck.is/closure Не понимаете что-то ещё? Попросите у Дэна объяснить https://github.com/gaearon/whatthefuck.is/issues/

Новинки Chrome 84 в обзоре Пита Лепажа: шорткаты для PWA, улучшения Web Animations API, автоматическое скрытие навязчивых уведомлений, Web Assembly SIMD и другие. Подробнее в статье https://developers.google.com/web/updates/2020/07/nic84
или видео https://youtu.be/1XBUeaqjTA4

Оценка Lighthouse в футере сайта. Зак Лезерман показывает, как подключить компонент для отображения оценок из Lighthouse, чтобы быть честным с пользователями и реагировать на ухудшения производительности — https://www.zachleat.com/web/lighthouse-in-footer/

00:02:08 События в Яндексе
00:09:10 Подкаст про Safari
00:12:50 Планы браузеров
00:22:21 Новый CSS Zen Garden
00:29:53 Кто быстрее: Houdini или CSS
00:38:58 Yandex UI Kit

Выпуск №238: События в Яндексе, Safari, планы браузеров, новый CSS Zen Garden, Houdini vs CSS, Yandex UI Kit. В гостях Владимир Гриненко. Слушайте на Ютубе https://youtu.be/u1OPg7IKMQU, читайте на Медиуме https://medium.com/p/3533ce9bf361

Автотесты и деплой на GitHub Actions. Вадим Макеев настраивает CI для прогона тестов и разворачивания проекта на сервере при коммите в ветку master и в пулл-реквестах — https://youtu.be/hevU4NdIsoU

Бесплатный пятичасовой видеокурс Ли Робинсона по Next.js и React для новичков — https://masteringnextjs.com/

Open Prioritization — новый краудфандинговый проект Igalia, где любой может помочь собрать деньги на внедрение технологий в браузеры. Среди проектов: внедрение :focus-visible, inert и contain в Safari, функции lab() и CSS-свойства d в Firefox и другие — https://www.igalia.com/open-prioritization/

Объяснение debounce. Хуан Вега показывает, как вызывать обработчик повторяющегося события только один раз по завершении таймаута с последнего срабатывания события — https://www.freecodecamp.org/news/debounce-explained-how-to-make-your-javascript-wait-for-your-user-to-finish-typing-2/

Style Stage. Стефани Эклз делится демо-сценой, в которой нужно один и тот же HTML оформлять по-разному современными возможностями CSS на манер CSS Zen Garden — https://stylestage.dev/

Pixel-perfect рендеринг с помощью devicePixelContentBox. Александр Сурма рассказывает о способе получить реальные физические размеры элементов на странице для более точной отрисовки на устройствах с повышенной плотностью пикселей — https://web.dev/device-pixel-content-box/

Yandex UI Kit выходит в опенсорс. Владимир Гриненко рассказывает, какие требования стояли перед разработчиками и как пользоваться библиотекой компонентов для React, которую использует Яндекс.

Запись доклада https://youtu.be/trwdc0JCelA
Репозиторий https://github.com/bem/yandex-ui

Web.Dev Live Russia, обсуждение итогов одноимённой конференции, пройдёт на канале Google Russia 11 июля в 12:30 (GMT+3). Среди участников эксперты по перфомансу, PWA, интерфейсам и доступности.

Программа https://www.meetup.com/GDG-Moscow/events/271352597/
Трансляция https://youtu.be/5Ks7f-GD3r0

Numl — альтернативный язык разметки и стилизации для веб. Андрей Яманов рассказывает, для чего он придумал язык разметки на основе Custom Elements и как такой подход помогает более лаконично решать задачи вёрстки — https://habr.com/p/510026/

FormData() и событие formdata. Михаэль Шарналь рассказывает о способах динамически работать с формами в JavaScript — https://funwithforms.com/posts/formdata/

Схлопывающиеся ряды в CSS-гридах. Эрик Мейер объясняет, как работают min-content и 1fr применительно к рядам в гридах, на примере редизайна своего блога — https://meyerweb.com/eric/thoughts/2020/07/01/accordion-rows-in-css-grid/

Motion Path: введение в современные анимации. Рафаэль Геттер показывает, как при помощи offset-path, offset-distance и offset-rotate разнообразить анимации на сайте, в переводе на Хабре — https://habr.com/p/509880/