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

Стилизация обёрток для разметки в CSS. Ахмад Шадид показывает различные способы ограничить контент по ширине, сохранив возможность работать с блоками на всю ширине вьюпорта — https://ishadeed.com/article/styling-wrappers-css/

Прямая трансляция Web.Dev Live начнётся в 19:00 (GMT+3). В программе: инструменты тестирования перфоманса, измерение и отладка метрик Web Vitals, отчёт Chrome UX, анализ JS-бандлов, AMP, SEO.

Программа https://web.dev/live/
Трансляция https://youtu.be/H89hKw06iWs

00:00:24 События и онлайн-доклады
00:11:15 DevTools в Chrome и Edge
00:23:04 Большие новости Safari 14
00:42:00 Date и Temporal
00:48:58 TypeScript 4
00:54:28 Зачем TypeScript

Выпуск №236: Онлайн-доклады, новинки DevTools, новости Safari 14, Date и Temporal, TypeScript 4 и зачем TS. Слушайте на Ютубе https://youtu.be/TicJyAYPEUQ, читайте на Медиуме https://medium.com/p/5919f4f412da

Клиентский мониторинг производительности. Влад Захаров делится опытом Тинькофф по замерам метрик производительности на клиенте и способами их оптимизации — https://habr.com/p/508256/

Стали известны взгляды Apple и Mozilla на некоторые API веб-платформы: как с точки зрения приватности пользователей, так и с точки зрения перспективности.

Tracking Prevention in WebKit https://webkit.org/tracking-prevention/
Mozilla Specification Positions https://mozilla.github.io/standards-positions/

Конференция DevParty пройдёт онлайн 27 июня и продлится 15 часов: стартует утром во Владивостоке и закончится вечером в Калининграде. В потоке «Веб» 15 докладов.

Программа веб-потока https://gdg-devparty.ru/#!/tab/197409116-3
Плейлист с видео https://www.youtube.com/playlist?list=PLGlZ_ld11os-nnB5CG_p6brIUWMGXU5Tr

Список задач с drag & drop. Саша Смыгина с туториалом на ванильном JavaScript — https://htmlacademy.ru/blog/boost/frontend/drag-and-drop?utm_source=tg_web_standarts&utm_medium=special&utm_campaign=drag_and_drop29062020

Возвращение веба из 90-х. Макс Бёк сравнивает современные подходы и тенденции с тем, что было на заре Интернета — https://mxb.dev/blog/the-return-of-the-90s-web/

Оглядываясь назад на пять лет с AMP. Мальте Юбиэл вспоминает, для чего создавался проект AMP, как он менялся под влиянием критики и к чему пришёл в наши дни — https://blog.amp.dev/2020/06/19/looking-back/

FaceID и TouchID для веба. Джиуэн Тен рассказывает о новых возможностях аутентификации пользователей, доступных в Safari 14 — https://developer.apple.com/videos/play/wwdc2020/10670/

Рендеринг шрифта в разных браузерах. Стефани Стимак экспериментально разбирается, как браузеры обрабатывают font-weight: bold, если шрифт с полужирным начертанием не загружается — https://blog.stephaniestimac.com/posts/2020/06/browser-fonts/

Дата и время в JavaScript. Команда Igalia рассказывает о спецификации Temporal API, задача которого значительно облегчить работу со временем и решить проблемы объекта Date — https://blogs.igalia.com/compilers/2020/06/23/dates-and-times-in-javascript/

Сторонние браузеры (Chrome, Firefox, Edge и другие) на iOS и iPadOS можно будет установить по умолчанию и в них заработают сервис-воркеры. При этом, они продолжат работать на встроенном движке WebKit. Обновление мобильных ОС Apple запланировано на сентябрь https://twitter.com/tomayac/status/1275682098570027008

Как опенсорс изменил мою жизнь. Мини-фильм про Макса Стойбера, создателя react-boilerplate и styled-components. История о том, как желание решить общую проблему повлияло на его карьеру — https://youtu.be/ifq3xhik8tE

00:00:27 События
00:06:27 Евангелист Safari
00:11:30 Альфа Bootstrap 5
00:23:09 Content-visibility
00:34:53 Справочник по гридам
00:41:43 Доступные чекбоксы правильно
00:50:14 Атрибут forms
00:56:39 Обзор API для PWA

Выпуск №235: Евангелист Safari, Bootstrap 5, content-visibility, гриды, чекбоксы, forms, API для PWA. Слушайте на Ютубе https://youtu.be/3QExB7SK5bY, читайте на Медиуме https://medium.com/p/7673629b7d01

В поиске баланса между нативным и кастомным селектом. Сандрина Перейра создаёт гибридный компонент с кастомной стилизацией <select> только для курсора и с нативным внешним видом во всех остальных случаях — https://css-tricks.com/striking-a-balance-between-native-and-custom-select-elements/