Слайдеры с несколькими ручками: общий случай. Ана Тюдор продолжает стилизовать слайдеры и реализует multi-range с пересекающимися диапазонами — https://css-tricks.com/multi-thumb-sliders-general-case/
Size: a a a
2020 January 13
2020 January 14
Разбираемся с async и await. Сара Дрэснер объясняет на примерах, как работает асинхронный код и чем использование async и await отличается от работы с промисами — https://css-tricks.com/understanding-async-await/
Прячем элементы в вебе. Ахмад Шадид разбирает способы полного, визуального и частичного скрытия HTML-элементов и объясняет, какие между ними отличия — https://ishadeed.com/article/hiding-web/
HTML-атрибуты, которые помогают пользователю с двухфакторной аутентификацией. Фил Нэш улучшает удобство ввода SMS-кода, всего лишь правильно расставляя атрибуты <input> — https://www.twilio.com/blog/html-attributes-two-factor-authentication-autocomplete
Нужно ли хранить шрифты Google у себя? Барри Поллард разбирает, как Google Fonts отдаёт шрифты различным браузерам и почему его использование может замедлять рендеринг страницы — https://www.tunetheweb.com/blog/should-you-self-host-google-fonts/
2020 January 15
17 ошибок, которые испортят любое резюме. Серёжа Попов про опыт поиска фронтендера в Лигу А. — https://htmlacademy.ru/blog/career/employment/resume
Сравнение производительности HTTP/1.1, HTTP/2 и HTTP/2 с серверным пушем. Эверт Пот собирает симулятор для тестирования различных способов доставки контента и анализирует их эффективность — https://evertpot.com/h2-parallelism/
Крошечные помощники. Стефан Джудис собрал коллекцию онлайн-инструментов, каждый из которых решает конкретную задачу в веб-разработке — https://tiny-helpers.dev/
Как анимировать SVG-подпись. Сильвестар Бистрович разбирает иллюстрацию на отрезки, добавляет расчёты на JS и немного CSS-анимации. В переводе Дмитрия Гордиенко — http://odinokun.com/2020-01-14-kak-animirovat-svg-podpis.html
2020 January 16
Underdash — коллекция сниппетов от Александра Сурмы по работе с массивами, каждый имеет три реализации: классическую, с синхронным итератором и асинхронным итератором — https://surma.github.io/underdash/
Microsoft Edge перешёл на движок Chromium с выходом стабильной версии 15 января. Подробнее о релизе и про обновления браузера — https://blogs.windows.com/msedgedev/2020/01/15/upgrading-new-microsoft-edge-79-chromium/
Скачать браузер для Windows 7–10 или macOS https://www.microsoft.com/edge
Подробности для разработчиков https://blogs.windows.com/msedgedev/2019/11/04/edge-chromium-release-candidate-get-ready/
Скачать браузер для Windows 7–10 или macOS https://www.microsoft.com/edge
Подробности для разработчиков https://blogs.windows.com/msedgedev/2019/11/04/edge-chromium-release-candidate-get-ready/
Google планирует унифицировать и заморозить заголовок User Agent и свойство navigator.userAgent в Chrome. Изменения планируется внедрить постепенно с марта по сентябрь 2020. В качестве альтернативы, разработчикам предлагается User Agent Client Hints — https://groups.google.com/a/chromium.org/d/msg/blink-dev/-2JIRNMWJ7s/yHe4tQNLCgAJ
Модуль WebAssembly, секции. Сендил Кумар разбирает внутренности собранного WebAssembly-модуля по байтам, объясняя назначение каждого из них — https://dev.to/sendilkumarn/webassembly-module-sections-44o1
2020 January 17
Тёмный режим: подробное руководство. Часть 1, Цвет. Атхарва Кулкарни объясняет отличия работы с цветом для тёмной темы и показывает, с каких цветовых палитр можно начать разрабатывать свою — https://uxdesign.cc/dark-mode-ui-design-the-definitive-guide-part-1-color-53dcfaea5129
Селекторы цвета: погружение в различия между реализациями в браузерах. Ана Тюдор подробно разбирает, из чего в разных браузерах состоит <input type="color"> и как можно попробовать его стилизовать — https://css-tricks.com/color-inputs-a-deep-dive-into-cross-browser-differences/
Доступный заголовок страницы в SPA на React. Хьюго Жирадель реализует простой компонент, позволяющий ассистивным технологиям работать с <title> страницы в SPA — https://hugogiraudel.com/2020/01/15/accessible-title-in-a-single-page-react-application/
Ужасная правда про оптимизацию прекрасных изображений. Майкл Гудинг разбирает случаи, когда сжатия размера изображений недостаточно для улучшения производительности, а некоторые техники загрузки могут даже навредить — https://calendar.perfplanet.com/2019/the-ugly-truth-about-optimising-beautiful-images/
2020 January 20
Разбираемся в уязвимости доступа к файловой системе в npm. Лиран Тал объясняет суть уязвимостей, которым подвержены пакетные менеджеры npm до v6.13.4, yarn до v1.21.1 и pnpm до v4.5.0 при использовании исполняемых бинарных файлов — https://snyk.io/blog/understanding-filesystem-takeover-vulnerabilities-in-npm-javascript-package-manager/
Доступные ссылки и кнопки на React. Хьюго Жирадель собирает компонент Action, который по переданным свойствам выбирает семантически оптимальный элемент — https://hugogiraudel.com/2020/01/17/accessible-links-and-buttons-with-react/
Появление скрытых элементов. Пол Геберт создаёт доступную анимацию скрытия и показа элементов, убираемых из потока при помощи атрибута hidden или через display: none — https://cloudfour.com/thinks/transitioning-hidden-elements/