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

00:00:45 Новинки браузеров
00:07:42 PhantomJS 2.1
00:10:16 Переменные в CSS
00:19:43 Sass с PostCSS
00:24:37 Загрузка шрифтов
00:32:36 Спрайты
00:36:25 Адаптивные картинки
00:38:01 HTTPS
00:43:38 Парадоксы HTML и CSS
00:47:18 Коты JS-фреймворки

Выпуск №214: Подкасты, Safari, браузер Flow, эра IE, CSSWG, Yarn или npm, Playwright, JetBrains Mono. Слушайте на Ютубе https://youtu.be/TL_Fh5-xyOw, читайте на Медиуме https://medium.com/p/6af61d9091d5

Можно ли сделать таймер с обратным отсчётом на чистом CSS? Хуэй Цзин Чэнь из академического интереса собирает демо с таймером, попутно объясняя, из чего состоят анимации в CSS — https://www.chenhuijing.com/blog/can-you-make-a-countdown-timer-in-pure-css/

Оптимизируем SVG для веба. Мишель Баркер делится способами уменьшить размер SVG-графики и упростить работу с ней — https://css-irl.info/optimising-svgs-for-the-web/

Представляем Yarn 2! Мэл Нисон рассказывает о ключевых изменениях и новшествах в мажорном обновлении популярного менеджера пакетов — https://dev.to/arcanis/introducing-yarn-2-4eh1

Пишем JavaScript, используя только 6 символов. Эрик Уэндель показывает, как и почему при помощи символов []()!+ можно запрограммировать почти любую операцию в JavaScript — https://javascript.christmas/2019/17

Playwright — библиотека автоматизации браузеров от Microsoft, аналог Puppeteer и от создателей Puppeteer. Поддерживает управление Chromium, WebKit и Firefox — https://github.com/microsoft/playwright

Сегодня конец эпохи Trident. Дер Шеппс вспоминает, какие революционные идеи в своё время были реализованы в ранних версиях Internet Explorer — https://schepp.dev/posts/today-the-trident-era-ends/

«Хорошо» и «плохо» при реализации гамбургер-меню. Майкл Шарналь собирает правильные практики для создания удобного и доступного переключателя навигации — https://justmarkup.com/articles/2019-12-04-hamburger-menu/

Разбираемся в ключевых словах initial, inherit и unset. Элад Шехтер объясняет, как работают эти значения в CSS — https://medium.com/p/2d70b7121695

Магический радужный градиент при помощи CSS Houdini и React-хуков. Джош Комю анимирует радиальный градиент, используя CSS Properties and Values API для задания типа кастомным свойствам — https://www.joshwcomeau.com/posts/rainbow-button/

Каскад в CSS. Амелия Уоттенбергер наглядно объясняет, от чего зависит, какое CSS-свойство применится для элемента — https://wattenberger.com/blog/css-cascade

Apollo GraphQL без JavaScript. Хьюго Жирадель собирает компонент для формы на React, которая работает с выключенным на клиенте JavaScript — https://hugogiraudel.com/2020/01/21/apollo-graphql-without-javascript/

Начинаем вычислять на GPU для веба. Франсуа Бофорт показывает, как перенести тяжёлые вычисления на графическую карту при помощи WebGPU API — https://developers.google.com/web/updates/2019/08/get-started-with-gpu-compute-on-the-web

Angular 9 и Ivy: ленивая загрузка компонентов. Кевин Кройцер настраивает приложение на Angular так, чтобы ресурсы компонентов загружались только при необходимости, в переводе на Хабре — https://habr.com/p/484618/

Из данных в DOM. Джош Дак рассказывает, как и зачем команда разработки сайтов ABC реализовала расширяемый конвейер преобразования данных в компоненты на React, который можно использовать для рендеринга в HTML, AMP и другие форматы — https://developers.digital.abc.net.au/2019/10/23/from-data-to-dom-building-a-text-rendering-pipeline-for-react/

Открылась регистрация на конференцию Я 💛 Фронтенд, которая пройдёт в московском офисе Яндекса в субботу 29 февраля. Программа и подробности — https://ilovefrontend.ru/

Помогаем браузерным оптимизациям с помощью CSS-свойства contain. Рэйчел Эндрю показывает, как различные значения свойства contain влияют на внешний вид элементов и какая от них польза — https://www.smashingmagazine.com/2019/12/browsers-containment-css-contain-property/