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

Все 38 видео с Chrome Dev Summit в одном плейлисте: перфоманс, PWA, приватность, SEO, расширения, DevTools и другие инструменты, интерфейсы, новые возможности и будущее веба.

https://www.youtube.com/playlist?list=PLNYkxOF6rcIDzLmWaDwfHVZJl1Q5RFgOR

Адаптивная вёрстка писем: проблемы и решения. Лайв 16 декабря в 13:00 (GMT+3). Лёша Симоненко и Серёжа Зубов, автор онлайн-курса «Вёрстка email-рассылок», обсудят, зачем рассылки в 2021, проблемы вёрстки, необходимые навыки и программу курса.

https://tml.io/449s9

EStimator посчитает, сколько лишнего JS вы отправляете современным браузерам, которые уже давно умеют всё, что вы полифилите. Хуссейн Джирдех и Джейсон Миллер предлагают разделять бандл при сборке.

Инструмент https://estimator.dev/
Подробности https://web.dev/publish-modern-javascript/

Убираем сдвиги в вёрстке наложением в CSS Grid. Юбер Саблоньер решает проблему сдвигов во время переключения состояний компонентов в интерфейсе. В переводе на CSS-live.

https://css-live.ru/css/ubiraem-sdvigi-v-verstke-nalozheniyem-v-css-grid.html

Запуск Lighthouse внутри GitHub Actions. Барри Поллард показывает, как встроить проверки Lighthouse в процесс тестирования перед влитием пулл-реквестов в основную ветку.

https://calendar.perfplanet.com/2020/running-lighthouse-in-github-actions/

Гудини, как? Библиотека ворклетов для расширения возможностей CSS с помощью Houdini: рамки, уголки, фоновые паттерны. Все примеры имеют кастомные свойства для управления параметрами. Совместимость: все браузеры на Blink, полифилы для Firefox и Safari.

https://houdini.how/

Верстать как в 2008 или как в 2020? Вадим Макеев вспоминает задачу 12-летней давности: сверстать балун для карты для IE6 на таблицах и без border-radius. А потом решает её для современных браузеров с помощью ручного SVG.

2008 https://youtu.be/mE1AvBP08Cs
2020 https://youtu.be/SrjQxSQcjlE

Опубликован «Веб-альманах 2020», подробный отчёт HTTP Archive о состоянии веба по множеству тем, включая HTML, CSS, JS, PWA, SEO, CMS, доступность, приватность, безопасность и другие.

HTML https://almanac.httparchive.org/en/2020/markup
CSS https://almanac.httparchive.org/en/2020/css
JavaScript https://almanac.httparchive.org/en/2020/javascript

Accessibility Club Minsk Meetup #2 пройдёт онлайн 10 декабря в 19:00 (GMT+3). В программе четыре доклада: отдельные доступные версии, доступность SPA, SEO и доступность и ещё один.

Трансляция https://youtu.be/m3EStUvzSAs
Программа https://eventspace-by.timepad.ru/event/1502789/

Обновился оптимизатор растровых картинок Squoosh. Освежился интерфейс и появилась утилита для командной строки, которая поможет работать с графикой пакетно. Настройки для утилиты можно скопировать прямо из интерфейса.

Интерфейс https://squoosh.app/
CLI https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli

Прямая трансляция второго дня Chrome Dev Summit стартует сегодня в 20:30 (GMT+3). В программе 13 докладов про DevTools, CSS Houdini, WebAssembly, PWA, Workbox, SEO и будущее веба.

Трансляция https://youtu.be/ggVsEl7xl9g
Программа https://developer.chrome.com/devsummit/schedule/

CSS Scroll Snap. Ахмад Шадид рассказывает, как работает группа свойств для управления поведением прокрутки и показывает, где и как их полезно применять.

https://ishadeed.com/article/css-scroll-snap/

Alt против figcaption. Элайна Натарио разбирает примеры подписей к контентным и декоративным изображениям, которые помогут доступно их описать: от самых простых атрибутов alt до ARIA.

https://thoughtbot.com/blog/alt-vs-figcaption

Прямая трансляция Chrome Dev Summit стартует сегодня в 20:30 (GMT+3). Первый день с 13 докладами посвящён перфомансу, Core Web Vitals и приватности.

Трансляция https://youtu.be/NkIi7h8NnS4
Программа https://developer.chrome.com/devsummit/schedule/

Утилитарный класс для перекрытия элементов. Мишель Баркер делится разными способами наложить элементы один поверх другого: от знакомого позиционирования до альтернативы на гридах.

https://css-irl.info/a-utility-class-for-covering-elements/

Правила схлопывания маржинов. Джош Камю показывает на интерактивных примерах, как и где работает эта особенность свойства margin в CSS и как её избегать, при необходимости.

https://www.joshwcomeau.com/css/rules-of-margin-collapse/

00:00:48 События
00:02:20 Бета Chrome 88
00:10:03 State of CSS: разнообразие
00:14:41 State of CSS: инструменты
00:17:49 State of CSS: фреймворки
00:25:08 State of CSS: открытия
00:30:29 State of JS
00:34:01 Шрифты для кодинга
00:36:29 Monument Valley на CSS
00:40:02 Верстать как в 2008
00:47:49 Как сверстать сторис
00:52:48 Пуньк и 27 Кб

Выпуск №259. Ольга Алексашенко и Никита Дубко про Chrome 88, State of CSS и JS, шрифты для кодинга, Monument Valley, вёрстку 2008, сторис и пуньк.

Слушайте на Ютубе https://youtu.be/Fjvcge0uxuU
Читайте на Медиуме https://medium.com/p/9325af50606d