Size: a a a

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

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

https://thoughtbot.com/blog/alt-vs-figcaption
источник
Веб-стандарты
CSS Scroll Snap. Ахмад Шадид рассказывает, как работает группа свойств для управления поведением прокрутки и показывает, где и как их полезно применять.

https://ishadeed.com/article/css-scroll-snap/
источник
2020 December 10
Веб-стандарты
Прямая трансляция второго дня 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/
источник
Веб-стандарты
Обновился оптимизатор растровых картинок Squoosh. Освежился интерфейс и появилась утилита для командной строки, которая поможет работать с графикой пакетно. Настройки для утилиты можно скопировать прямо из интерфейса.

Интерфейс https://squoosh.app/
CLI https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli
источник
Веб-стандарты
Accessibility Club Minsk Meetup #2 пройдёт онлайн 10 декабря в 19:00 (GMT+3). В программе четыре доклада: отдельные доступные версии, доступность SPA, SEO и доступность и ещё один.

Трансляция https://youtu.be/m3EStUvzSAs
Программа https://eventspace-by.timepad.ru/event/1502789/
источник
Веб-стандарты
Опубликован «Веб-альманах 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
источник
2020 December 11
Веб-стандарты
Верстать как в 2008 или как в 2020? Вадим Макеев вспоминает задачу 12-летней давности: сверстать балун для карты для IE6 на таблицах и без border-radius. А потом решает её для современных браузеров с помощью ручного SVG.

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

https://houdini.how/
источник
Веб-стандарты
Запуск Lighthouse внутри GitHub Actions. Барри Поллард показывает, как встроить проверки Lighthouse в процесс тестирования перед влитием пулл-реквестов в основную ветку.

https://calendar.perfplanet.com/2020/running-lighthouse-in-github-actions/
источник
2020 December 14
Веб-стандарты
Убираем сдвиги в вёрстке наложением в CSS Grid. Юбер Саблоньер решает проблему сдвигов во время переключения состояний компонентов в интерфейсе. В переводе на CSS-live.

https://css-live.ru/css/ubiraem-sdvigi-v-verstke-nalozheniyem-v-css-grid.html
источник
Веб-стандарты
EStimator посчитает, сколько лишнего JS вы отправляете современным браузерам, которые уже давно умеют всё, что вы полифилите. Хуссейн Джирдех и Джейсон Миллер предлагают разделять бандл при сборке.

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

https://tml.io/449s9
источник
2020 December 15
Веб-стандарты
Все 38 видео с Chrome Dev Summit в одном плейлисте: перфоманс, PWA, приватность, SEO, расширения, DevTools и другие инструменты, интерфейсы, новые возможности и будущее веба.

https://www.youtube.com/playlist?list=PLNYkxOF6rcIDzLmWaDwfHVZJl1Q5RFgOR
источник
Веб-стандарты
Differential Serving — делаем свой код чище и производительнее. Елена Жукова показывает, как отдавать устаревшим и современным браузерам разные версии JS-бандлов для оптимизации производительности.

https://habr.com/p/531404/
источник
Веб-стандарты
Доступные ссылки-иконки. Хьюго Жирадель пишет React-компонент, позволяющий пользователям скринридеров комфортно пользоваться ссылками, которые визуально выглядят как иконки.

https://hugogiraudel.com/2020/12/10/accessible-icon-links/
источник
Веб-стандарты
Выпуск №260. Вадим Макеев, Никита Дубко и Максим Сальников про Веб-альманах 2020, Safari TP, PWA, EStimate, загрузка по заявке, Houdini, Squoosh 2 и CLI.

Слушайте на Ютубе https://youtu.be/3MFBaIwvLXI
Читайте на Медиуме https://medium.com/p/c8078d2a5545
источник
Веб-стандарты
00:02:32 События
00:09:07 Веб-альманах 2020
00:20:09 Safari TP и списки
00:28:23 Новинки PWA
00:42:42 EStimate лишний JS
00:53:23 Загрузка по заявке
01:01:41 Демки для Houdini
01:11:24 Squoosh 2 и CLI
источник
2020 December 16
Веб-стандарты
Анализ метрик производительности Core Web Vitals при помощи сервиса WebPageTest. Патрик Минан на примерах показывает, как пользоваться интерфейсом сервиса.

https://calendar.perfplanet.com/2020/analyzing-web-vitals-with-webpagetest/
источник
Веб-стандарты
Импорт по взаимодействию. Эдди Османи рассказывает о подходе, когда дополнительные модули подгружаются на клиент только при необходимости, и показывает примеры такого подхода на Vanilla JS, React и Vue.

https://addyosmani.com/blog/import-on-interaction/
источник
Веб-стандарты
23 видео с конференции JavaScript fwdays’20 autumn: архитектура, перфоманс, Node.js, креативный кодинг, алгоритмы, регулярные выражения, дискуссии про технологии и другие.

https://www.youtube.com/playlist?list=PLPcgQFk9n9y8WQ3dEeBByarIVaoaZm03W
источник