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

Архитектура современных корпоративных Node.js-приложений. Андрей Мелихов с опытом фронтендера в крупном энтерпрайзе в блоге Яндекса на Хабре — https://habr.com/p/514550/

Design is Frontend. Конференция Affinage на стыке дизайна и вёрстки пройдёт онлайн 20 августа. В программе 6 докладов и круглый стол: неверстабельный дизайн, кликабельные прототипы, анимация интерфейсов, взаимодействие с дизайнером, фронтенд-дизайнер — https://affinage.timepad.ru/event/1385362/?utm_source=telegram&utm_medium=post&utm_campaign=promo_conference_design_is_frontend&utm_content=webstandards_ru&utm_term=webstandards_ru

Новинки WebStorm 2020.2 в обзоре Екатерины Рябухи на Хабре: Prettier вместо встроенного форматтера, лучшая модульность в Sass, расширенные пулреквесты GitHub, поддержка Nuxt.js и другие — https://habr.com/ru/company/JetBrains/blog/511948/

FrontoWeek, новый еженедельный подкаст Павла Франкова с короткими 3-минутными дайджестами новостей — https://anchor.fm/frontoweek

Команда Chrome DevTools продолжает развивать инспектор гридов. Следующее большое обновление интерфейса отладчика уже доступно в Chrome Canary. Подробнее в треде Адама Аргайла — https://twitter.com/argyleink/status/1291137765300555776

Идею для стилизации встроенных браузерных контролов предложила группа авторов из Microsoft, Google и Salesforce. К ранее закрытым для разработчиков <select> или <input type="range"> предлагается дать доступ с помощью слотов из спецификации Shadow DOM — https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ControlUICustomization/explainer.md

Разбираемся со свойством flex. Ахмад Шадид объясняет, какая математика лежит за свойствами flex-grow, flex-shrink и flex-basis, и показывает, как использовать flex, на реальных примерах — https://ishadeed.com/article/css-flex-property/

Анимация рукописной каллиграфии на SVG. Крейг Роблевски при помощи GreenSock, SVG и масок собирает демку с эффектом постепенного появления текста — https://www.motiontricks.com/svg-calligraphy-handwriting-animation/

Смотрим внутрь CSS через CSS OM. Лия Веру показывает, как получить список всех поддерживаемых CSS-свойств на клиенте — https://lea.verou.me/2020/07/introspecting-css-via-the-css-om-getting-supported-properties-shorthands-longhands/

Юна Кравец и Владимир Левин рассказывают о новом свойстве content-visibility, которое позволяет ускорить производительность рендеринга за счёт находящихся вне вьюпорта элементов — https://web.dev/content-visibility/

Бесконечный скролл без сдвигов разметки. Эдди Османи объясняет, как сделать бесконечные списки более удобными и оптимизировать метрику Cumulative Layout Shift — https://addyosmani.com/blog/infinite-scroll-without-layout-shifts/

Drop-shadow — недооценённый CSS-фильтр. Мишель Баркер показывает, в чём отличие drop-shadow от box-shadow и где его полезно применять — https://css-irl.info/drop-shadow-the-underrated-css-filter/

Легковесное решение для Masonry. Ана Тюдор показывает, как самостоятельно реализовать раскладку Masonry на гридах с фолбэком до IE9 — https://css-tricks.com/a-lightweight-masonry-solution/

00:01:37 Сайд-подкасты
00:10:53 Онлайн-события
00:16:57 Новости браузеров
00:30:48 Main вместо master
00:43:21 Поиски эмпатии

Выпуск №241: Сайд-подкасты, онлайн-события, новости браузеров, main вместо master, поиски эмпатии. Слушайте на Ютубе https://youtu.be/t-BIofputoE, читайте на Медиуме https://medium.com/p/e48e7ecc62a0

Генератор 3D-книги на CSS. Себастьян Кастиэль делится инструментом для создания эффектного превью для обложек книг на сайтах — https://3d-book-css.netlify.app/

Альтернативный текст для свойства content. Стефан Джудис показывает, как задать отдельный текст для скринридеров для содержимого псевдоэлементов after и before — https://www.stefanjudis.com/today-i-learned/css-content-accepts-alternative-text/

Захват клавиш. Томас Штайнер рассказывает о Keyboard Lock API, позволяющем обрабатывать нажатия любых клавиш и их комбинаций в полноэкранном режиме приложения — https://web.dev/keyboard-lock/