Добро пожаловать в пятый выпуск калейдоскопа Frontenders. Большое спасибо всем, кто аплодировал, делился и выделял предыдущие выпуски.

На этой неделе было полно релизов, так что проверьте их в списке внизу. Есть также несколько отличных статей о производительности, Webpack, доступности и возможностях SVG и CSS. Наслаждаться!

Чтение на выходных

Решено с помощью CSS! Раскрашивание фона SVG

Я нахожусь в процессе замены одного из наших (MDN Web Docs) использования иконочных шрифтов на встроенный SVG. В этом есть множество преимуществ, в первую очередь улучшенный контроль над визуальным стилем значка, качеством отображения и улучшением производительности. Вы можете подробнее прочитать о преимуществах в блоге CloudFour.

Вы теряете некоторые из этих преимуществ, когда SVG не встраивается, а добавляется на страницу каким-то другим способом. Один из распространенных способов использования SVG — это фоновое изображение, установленное с помощью CSS. В этой отличной статье вы узнаете, как обойти некоторые из этих ограничений с помощью CSS-фильтров.

В качестве примечания, отличный инструмент, чтобы узнать больше о силе фильтров CSS, поэкспериментировав с ними, — это cssFilters.co.

Анимированные радиальные индикаторы выполнения SVG

К слову о SVG. В этом уроке от ведущего Shoptalk Дейва Руперта вы узнаете, как использовать немного JavaScript и SVG для создания радиального индикатора выполнения.

Отложенная загрузка изображений и видео

Производительность — это тема, которая постоянно волнует почти всех. Будь то для приложения или общего присутствия в Интернете. Отложенная загрузка не только сокращает время начальной загрузки страницы, но и может быть полезна для пользователей с лимитными тарифными планами.

В этой статье Джереми Вагнер рассказывает о том, что можно и чего нельзя делать при использовании этой техники, а также об API-интерфейсе наблюдателя за пересечением.

Проектирование доступных навигаций

Еще одна тема, над которой мы сейчас работаем в MDN Web Docs, — это улучшение доступности сайта. Мы всегда старались осознавать это. В шапке есть ссылки для пропуска, которые будут активироваться при нажатии клавиши табуляции при загрузке страницы. Однако всегда есть возможности для улучшения.

На UX Planet Николас Крамер опубликовал отличную статью на такие темы, как пропуск ссылок, доступные меню, сочетания клавиш и многое другое.

Обход DOM с помощью JavaScript

jQuery был замечательным инструментом, и многие люди и веб-сайты до сих пор зависят от него. Это также отличный инструмент для обучения новых людей использованию JavaScript. JavaScript и браузеры сильно изменились с тех пор, как впервые был представлен jQuery, и поэтому люди начинают отходить от этой зависимости.

Одним из мощных инструментов jQuery был простой и лаконичный обход DOM. Когда вы затем откажетесь от jQuery, как вы замените эти служебные функции ванильным JavaScript? Эта статья из блога Zell — отличный ресурс, который поможет вам мигрировать.

Повесть о Webpack 4 и о том, как его наконец правильно настроить

Как я уже упоминал ранее, я рассматриваю возможность использования Webpack или Parcel для переосмысления и повторной реализации интерфейсного конвейера в MDN Web Docs. Таким образом, я читал много документации как по Webpack, так и по Parcel, но также искал реальный опыт других.

На Hackernoon Маргарита Образцова написала отличную статью о своем опыте.

В библиотеке

Библиотека тестирования DOM

Отличная библиотека Kent C. Dodds, которая, по его словам, представляет собой: «Простые и полные утилиты для тестирования DOM, которые поощряют хорошие методы тестирования».

В эфире

Air Mozilla ~ Экспертная группа GDPR

Я уверен, что у многих из вас все еще есть масса вопросов относительно GDPR, который вступит в силу 25 мая 2018 года. Посмотрите обсуждение этой группы экспертов и ответьте на вопросы о влиянии GDPR и о том, что вам нужно делать.

Известные релизы

Послушай

JSParty ~ О, куда пойдет JS

Итак, JSParty возвращается! Во втором эпизоде ​​нового воплощения JSParty участники обсуждают такие темы, как Web Bluetooth, Web Torrent и мощь DSL.

Слушайте сейчас

Запрос на коммит ~ Документация и ценность вкладов, не связанных с кодом

В репозитории интерактивных примеров мы воочию убедились в невероятной силе сообщества и важности хорошей документации.

В этом эпизоде ​​ведущие беседуют с Эриком Холшером, соучредителем невероятной Read The Docs, о вкладе, не связанном с кодом, и важности отличной документации в мире открытого исходного кода.

Слушайте сейчас

Вот и все на этой неделе. Надеюсь, вам все понравится. Хороших выходных и предстоящей недели. Прежде всего, продолжайте делать удивительные вещи и оставайтесь любопытными! До следующей недели о/\о