FrontoWeek: Недельный дайджест [Фронтовик]

2021-04-19 10:02:37 Фронтенд дайджест #214
Лучшее за неделю
Подкаст

[EN] Можно ли создать идеальную спецификацию? Скорее нет, чем да. Вот и авторы спецификации CSS не всегда принимают правильные решения в долгосрочной перспективе.

Например, неконсистентные значения и имена свойств или неправильные селекторы, приводящие к игнорированию всей группы селекторов.
В своей вики они собирают такие решения, которые в итоге оказались не очень удачными.
Но почему бы все это не починить?

К сожалению, уже очень много сайтов используют текущие правила и даже хаки к ним. Исправление правил повлияет на внешний вид этих сайтов, а это недопустимо.

Возможно, помогло бы версионирование CSS, но браузерам всё равно бы пришлось поддерживать и старые версии, а значит это принесло бы ещё больше хаоса.

Разработчики могут аргументировать тот или иной подход лучшими практиками, но они не всегда смогут уверенно рассказать, как именно эти практики им помогают.
Так возникает культ лучших практик, который может нанести вред проекту.

Подобные практики могут появиться, как результат неопытности команды в каких-то вопросах, тогда мнение авторитетного разработчика просто принимается на веру.

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

Для выхода из положения автор статьи предлагает попробовать не следовать случайно выбранной лучшей практике и посмотреть, что будет.
Полученный опыт позволит разобраться в её сути и сформировать свое мнение на этот счёт.

[EN] На примере списка комментариев, автор статьи показывает ключевые моменты вёрстки с заботой о будущем. Или, другими словами, вёрстки, которая не разломается через несколько лет на устройствах, которые мы даже не можем вообразить.

Современный CSS обладает кучей возможностей, которые позволяют адаптировать контент ко всевозможным размерам экрана, объёму содержимого, особенностям интернационализации и доступности.

Например, есть функции min и max, которые позволяют комбинировать процентные и абсолютные значения для более гибкой «отзывчивости» страницы.
Вместо word-break: break-word контент можно сделать более читабельным с помощью свойства hyphens: auto.
Размеры медиа-содержимого можно подгонять под контейнер, используя свойства object-fit и aspect-ratio.
А для адаптации интерфейса под написание справа-налево есть логические свойства CSS, позволяющие устанавливать выравнивание и отступы, относительно заданного направления.

[EN] Несмотря на одни и те же основы «точечной» реактивности, на которых построены такие библиотеки как MobX, Vue и Svelte, сущности, из которых строится эта реактивность, называются у всех по-разному.
Это может вызывать затруднения в понимании концепции реактивности у новичков.

Реактивность можно представить в виде графа, состоящего из нескольких видов примитивов.
Сигналы — это хранилища значений.
Реакции — функции, которые вызываются при изменении значений Сигналов.
Деривативы — это, по сути, Сигналы, которые могут использоваться для хранения промежуточного значения, вычисленного на основе других Сигналов. Всё ж просто!
В статье автор Solid.js на примерах показывает основы реактивности и за счет чего она помогает добиваться предсказуемого состояния. Правда, лучше почитайте статью.

Prototype pollution — это одна из распространённых уязвимостей в JavaScript.
Из-за особенности прототипного наследования, через любой объект можно получить доступ к Object.prototype, переопределить какой-либо базовый метод и, таким образом, добавить в приложение любую функциональность.

В первую очередь, уязвимости подвержены модули приложения, которые клонируют или сливают объекты, обрабатывают GET-параметры, парсят конфигурационные файлы. Чаще всего, на фронтенде эту уязвимость используют для XSS-атак, а на бэкенде — для DDoS или же получения удалённого доступа.

Автор статьи подробно рассмотрел принципы уязвимости, способы её поиска и защиты.
А ещё в статье есть ссылки на другие материалы по теме, полезные инструменты и библиотеки. Открыть/Комментировать

2021-04-13 11:20:17 Фронтенд дайджест #213
Лучшее за неделю
Подкаст

Цифровая типографика унаследовала многие подходы из бумажной и за этим кроется несколько проблем, о которых и рассказал в своей статье Никита Прокопов — создатель шрифта Fira Code.

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

Во-вторых, размер задаёт не высоту шрифта, а кегль символа, который на самом деле не связан ни с одним из его физических параметров.

Что, по мнению автора, могло бы решить проблему, так это соответствие размера шрифта высоте заглавной буквы в пикселях, а размера межстрочного интервала — расстоянию между базовыми линиями строк.
Такой подход позволит отображать разные шрифты более консистентно, независимо от окружения пользователя.
В выпуске 122 я уже писал о свойствах text-edge и leading-trim которые должны будут решить эту проблему. А пока можно использовать Capsize — сервис для расчёта стилей под нужный шрифт.

[EN] Бесят сложные регулярки?
Этот плагин для ESLint поможет избежать распространенных ошибок в написании регулярных выражений, оптимизировать классы символов и упростить паттерны.
С полным списком правил можно ознакомиться в репозитории плагина.

[EN] Лия Веру поделилась лайфхаком, который позволит легко добавить поддержку тёмной темы в ваше веб-приложение.

Вместо переопределения каждого цвета, как советуют большинство мануалов по тёмной теме, Лия предлагает задать базовые цвета в формате HSL, где светлоту (L) определить через кастомное CSS-свойство.
Для тёмной же темы каждое такое свойство нужно будет переопределить по формуле 100% - начальное значение.

Однако, у HSL воспринимаемая яркость неоднородна, поэтому достичь лучшего результата, изменяя только светлоту, может быть затруднительно.
Эту проблему решил бы формат LCH, но его поддержка пока есть только в Safari Technology Preview 120+. Для конвертации RGB цветов в HSL и LCH можно воспользоваться онлайн утилитой.

[EN] Современным фронтендерам приходится заботится не только о производительности JavaScript но и о производительности CSS.

Поскольку браузер блокирует рендеринг до тех пор, пока весь CSS не загрузится, распарсится и обработается, самым первым шагом в оптимизации должна быть очистка от неиспользуемых стилей, минификация и сжатие.
Ещё лучше будет загружать критические стили, необходимые для отображения первого экрана, отдельно от остальных. А остальные уже грузить асинхронно.

Также стоит избегать импортов в CSS — они мешают параллельной загрузке
Для оптимизации страницы с анимациями, стоит анимировать только свойства translate, scale, rotation и opacity, чтобы не смещать контент и не вызывать кучу relayout.

С помощью свойства contain можно определить изолированные блоки, не влияющие на остальной контент страницы.
А чтобы кастомные шрифты не отображались при загрузке пустым местом, стоит использовать font-display: swap и уменьшать размер шрифтов, например используя вариативные шрифты.
Но вот о чем стоит беспокоиться в последнюю очередь — так это об оптимизации селекторов.

[EN] Сталкивались ли вы с проблемой, что из JavaScript нельзя выбрать псевдо-элемент (который создаётся через :before и :after), а, соответственно, и нельзя напрямую изменить его стили?

Нельзя, но если очень захотеть, то можно. Например, с помощью CSS-переменных.
Задаём через JS значение переменной и, благодаря каскадности, установленное значение применится на дочерние псевдо-элементы.

[EN] Какой минификатор кода лучше?
В этом репозитории собраны бенчмарки по размеру выходного бандла и по времени сборки для популярных минификаторов:
- babel-minify
- esbuild
- google-closure-compiler
- swc
- terser
- UglifyJS

По размеру бандла лидирует UglifyJS, а сразу за ним — Terser.

По скорости однозначным победителем стал esbuild, написанный на Go. Более-менее сравнимые результаты выдает swc — компилятор для TypeScript и JavaScript, написанный на Rust.

Я ни на что не намекаю, но теперь вы знаете, чем заняться на майских. Открыть/Комментировать

2021-04-05 10:02:13 Фронтенд дайджест #212
Лучшее за неделю
Подкаст

[EN] Еще один всеобъемлющий гайд от Виталия Фридмана — на этот раз по веб-доступности.
В статье собрано более 30 аспектов, на которые стоит обратить внимание фронтенд-разработчику, при создании компонентов.
Автор разобрал, как сделать доступными элементы форм, как сделать доступную навигацию по странице, как правильно работать с фокусом, как сделать доступными модальные окна, слайдеры, таблицы и cookie-баннеры.
По всем темам, конечно же, есть ссылки на более подробные материалы, примеры и чек-листы.

[EN] Разработчики Chrome улучшают систему обнаружения поддержки оффлайн-режима в PWA.
Сейчас проверка этой поддержки производится по наличию обработчика fetch, то есть достаточно даже пустого обработчика, чтобы веб-приложение можно было установить, как PWA.
По мнению разработчиков браузера, оффлайн режим — это один из важных критериев современного веба, поэтому в новом Хроме, который выйдет в августе 2021 года, приложения с пустым fetch уже нельзя будет установить.
И совсем скоро, начиная с 89 версии Chrome, в случае отсутствия полноценного оффлайн режима, в консоль будет выдаваться соответствующее предупреждение.

Как же всё починить? fetch должен будет возвращать статус 200: это может быть как закэшированный ранее результат, так и просто страница с сообщением об оффлайн-режиме.

[EN] Sapper — фреймворк для разработки приложений на Svelte — эволюционировал и на свет появился SvelteKit, который недавно вышел в публичный бета-тест.
Фреймворк был вдохновлен идеями из Next.js и обеспечивает всё, что надо для построения современного приложения на Svelte: SSR, роутинг, code-splitting для JS и CSS и адаптеры для разных serverless-платформ, вроде netlify и vercel.
Для сборки Sapper использует Vite 2 — утилиту от Эвана Ю — создателя Vue.

SvelteKit уже используется для страниц Кроновирус-трекера от New York Times.
А до полноценного релиза первой версии, фреймворку не хватает всего нескольких фич и багфиксов, но команда разработки призывает уже тестировать его и делиться фидбэком.
Мигрировать на SvelteKit с Sapper поможет подробная инструкция.

[EN] Google, Mozilla и Microsoft работают над улучшением совместимости веба.
Рабочая группа проанализировала и выбрала 5 наиболее приоритетных фич, поведение которых пока сильно отличается от браузера к браузеру. Вот они: флексбоксы, гриды, position: sticky, aspect-ratio и трансформации.
За прогрессом этой инициативы можно следить в Твиттере по хэштегу #Compat2021 или на специальном дашборде.

[EN] Анимации на сайте могут причинять сильный дискомфорт пользователям с расстройствами вестибулярного аппарата.
Для таких пользователей, во многих операционных системах, есть настройка Reduce motion, которую можно получить в браузере через медиа-запрос: prefers-reduced-motion.

Автор статьи призывает более аккуратно подходить к анимациям и отключать их по-умолчанию.
Добавлять анимации следует только для пользователей, у которых значение медиа-запроса будет no-preference.

Можно пойти еще дальше и вынести анимации в отдельный файл, загружая его по тому же медиа-запросу.
Для анимаций на JavaScript можно использовать проверку через window.matchMedia.

[EN] Вы наверняка встречали в интернете мемы про JavaScript, основанные на кадрах из старого доклада Wat, где спикер показал, что будет, если сложить пустой массив с «пустым объектом». Будет [object Object]. А если поменять слагаемые местами то 0.
Это не особенность приведения типов, а правило синтаксиса. Если в ASTExplorer проверить выражение {} + \[], можно заметить, что фигурные скобки в начале выражения считаются не объектом, а блоком инструкций.
Справа от него остаётся приведение массива к числу с помощью оператора +. Чтобы явно дать понять интерпретатору, что это объект, надо, как и в случае с возвратом объекта из стрелочной функции, обернуть пустой объект в круглые скобки. Тогда, независимо от последовательности слагаемых, результат сложения будет одинаков. Открыть/Комментировать

2021-03-29 10:02:45 Фронтенд дайджест #211
Лучшее за неделю
Подкаст

[EN] Чтобы ускорить загрузку сайта, можно добавить тэг , который подскажет браузеру, что указанный ресурс необходимо загрузить с более высоким приоритетом. Например, можно начать загружать шрифты, не дожидаясь окончания загрузки CSS-файла.

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

Также стоит следить за тем, чтобы в предзагрузке не было файлов, которые не используются при первом рендере, иначе вы просто замедлите первую отрисовку.

И последний нюанс — CORS режим предзагрузки и последующего запроса должны совпадать, иначе браузер просто загрузит его дважды.

[EN] Команда разработки Wix рассказала, как они постепенно шли к улучшению метрик Web Vitals для сайтов, созданных на их платформе.

Раньше, для сокращения серверных расходов, вся страница генерировалась на стороне клиента. Но несколько лет назад Wix перешли на серверный рендеринг, что позволило улучшить СЕО и производительность, но увеличило нагрузку на сервер, поскольку все страницы генерировались на лету.

Чтобы решить эту проблему, сначала они разработали свое CDN-решение, которое позволило кэшировать статические части страниц и просто добавлять к ним динамические. А затем им удалось и совсем убрать динамические данные из HTML, загружая их с сервера в формате JSON. Это позволило им использовать CDN-провайдеров с большим гео-охватом, а браузерам — кэшировать 13% запросов. Последними улучшениями инфраструктуры были переход на HTTP/2, сжатие Brotli и динамический выбор CDN.

Александр Поломодов — директор отдела разработки цифровой экосистемы банка Тинькофф — поделился списком литературы, которую стоит изучить всем, кто хочет глубже разобраться в проектировании ПО и не хочет ограничиваться только лишь «книгой с кабанчиком».

В списке 16 книг, начиная от основ DDD и распределенных систем до Микросервисов с управлением командами SRE.
По каждой книге дано краткое резюме, а на какие-то автор даже делал более развёрнутые обзоры.

Чтение книг конечно не заменит реального опыта, но с чего то же надо начинать.

[EN] Какие могут быть причины для завершения Node.js приложения, кроме банальной ошибки? Перехват таких событий может понадобится для более плавной остановки процесса: можно сохранить содержимое памяти на диск или откатить незавершённые изменения.

Что это за события? В первую очередь, они возникают прямо в коде приложения: намеренный вызов process.exit, непойманное исключение (uncaughtException), необработанный реджект из промиса или исключение в асинхронной функции (unhandledPromiseRejection), ну или совсем экзотичный — вызов события error через Event Emitter.

Во-вторую очередь, это Сигналы — специальные коды операционной системы, которыми могут обмениваться программы. Как и события из первой группы, большинство сигналов можно перехватить и предотвратить, с помощью обработчика process.on с соответствующим названием события. Исключениями являются сигналы SIGKILL и SIGSTOP — они настолько мощные, что их не остановить.

[EN] Сейчас редко можно встретить React-компоненты использующие синтаксис классов. А кто нибудь помнит, что было до классов?
Для тех кто не видел «другой React» в этой статье автор рассмотрел, как раньше выглядел синтаксис библиотеки, какие в нем были проблемы и как новый синтаксис решал их.

Например, изначально функциональность между компонентами шарили с помощью миксинов, которые подмешивали пропсы из одного компонента другому и тем самым только усложняли поддержку. Им на смену пришли компоненты высшего порядка — HOC'и — порождая бесконечный уровень вложенности.

Другой проблемой была необходимость явного биндинга методов компонентов для обращения к this внутри них. Сейчас мы можем наблюдать, как обе этих проблемы элегантно решились с помощью хуков. Теперь осталось решить проблемы хуков и тогда точно заживём! Открыть/Комментировать

2021-03-22 10:01:59 Фронтенд дайджест #210
Лучшее за неделю
Подкаст

3 марта Google выпустила Flutter 2, который теперь можно использовать для разработки не только мобильных, но и приложений под любую другую платформу, включая десктопные и веб-приложения.
Пересобрать своё приложение на новую платформу можно без единой строчки платформо-специфичного кода. И самое крутое, что приложения на Flutter 1 можно так же, без единой строчки кода, мигрировать на Flutter 2 и собрать под нужную платформу.

Вместе с Flutter вышла новая минорная и не такая интересная версия языка Dart 2.12. В ней стабилизировали надёжную реализацию null-safety, позволяющую избежать ошибок в рантайме и повышающую производительность. Ещё в апдейт вошли: стабильный Dart FFI — механизм, позволяющий вызывать код написанный на C, и новые утилиты для разработки и дебага, написанные на Flutter.

[EN] В то время, как многие пытаются оптимизировать свои веб-страницы для достижения максимального рейтинга в Lighthouse, автор этой статьи поставил себе челлендж — из идеальной, по версии Lighthouse, страницы сделать самую медленную страницу для пользователя.
В статье автор разобрал метрики, используемые Lighthouse для оценки, и описал, как он итеративно шёл к желаемому результату.
Как замечает сам автор, практической ценности в таком упражнении мало, но в процессе эксперимента он выявил и описал особенности работы Lighthouse, понимание которых может помочь уже в реальных задачах.

[EN] По результатам последнего опроса State of JS 2020, Express.js остается самым используемым «фреймворком» для бэкенда. Автор статьи находит такую популярность неоправданной, начиная с того, что текущая стабильная версия не умеет корректно обрабатывать в middleware исключения из async/await-операций, что может приводить к утечкам памяти. А начиная с node.js 15 и вовсе к падению приложения.

По большому счёту, пишет автор, Express — это обычная библиотека для роутинга с поддержкой middleware. Всю остальную функциональность приходится добавлять из сторонних библиотек.
В итоге, автор призывает рассмотреть более современный и быстрый Fastify или более полноценный фреймворк AdonisJS, в котором из коробки есть всё необходимое для работы c БД, валидации форм и защиты от многих веб-уязвимостей.

[EN] Каким бы оптимизированным ни был веб-шрифт, он добавляет HTTP запрос, замедляет рендеринг страницы и увеличивает потребление энергии.
Когда вы встретите сайт, использующий системные шрифты, знайте, что это не отсутствие вкуса у дизайнера, а «сокращение выбросов CO2», вызванных загрузкой лишних ресурсов по сети.
Автор статьи предлагает более тщательно подходить к выбору шрифта. Например, в качестве шрифта с засечками он предлагает рассмотреть Charter, Palatino, Georgia или Hoefler, а для шрифта без засечек использовать System Font Stack — длинный список системных шрифтов в разных ОС.
С другой стороны, автор напоминает, что вместо шрифтов, в первую очередь, лучше избавиться от лишних скриптов.

HTML Academy в очередной раз напоминает о важности семантической верстки. Семантика прописана в спецификации HTML и помогает анализировать содержимое страницы скринридерам и поисковикам.
В статье рассматриваются основные семантические теги, их значение, особенности и типовые ошибки.
Например,

и

2021-03-15 10:02:06 Фронтенд дайджест #209
Лучшее за неделю
Подкаст

Команда CSSSR опубликовала первый выпуск видеосерии «История фронтенда». В нем авторы рассказали о предпосылках появления браузеров и зарождении Всемирной Паутины. 

В 1990 году Тим Бернерс-Ли опубликовал описания HTML, URI и протокола HTTP, на основании которых была создана библиотека libwww, предназначенная для интерпретации веб-страниц. Она вдохновила разработчиков создавать свои браузеры.
Среди прочих, был браузер ViolaWWW, который уже тогда мог на стороне клиента рендерить апплеты, написанные на языке Viola, поддерживал таблицы стилей, аналоги iframe, закладки, историю посещений и быстрый поиск.
Но, в итоге, по популярности его и все другие обошел гораздо менее функциональный, но более простой в установке браузер Mosaic, который привел к интернет-буму девяностых и, в дальнейшем, вошёл в основу того самого Netscape Navigator.

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

[EN] Когда речь заходит о производительности JavaScript, в первую очередь сравнивают размер бандла. Но помимо этого размера, производительность также определяется рядом других метрик, которые не так-то и просто замерять. В статье рассказано о способах и нюансах измерения каждой их них.
Если кратко:
- Парсинг, компиляцию и исполнение можно замерять через вкладку Performance в Chrome DevTools. Можно использовать mark-loader, чтобы декомпозировать результаты по отдельным модулям, а User Timing API - для более точечных измерений.
- Потребление CPU можно измерить в Performance Monitor в Chrome или Energy Impact в Safari.
- Потребление памяти можно изменить, с помощью нового api performance.measureUserAgentSpecificMemory.
- Потребление диска — с помощью утилиты Playwright, указав путь для сохранения нужного кэша и затем замерив его размер.

[EN] Оказывается, можно отслеживать положение курсора мыши на чистом CSS. Достаточно заполнить страницу сеткой из элементов, например, с помощью гридов.
При наведении курсора на элементы сетки, у элемента устанавливаются CSS-переменные, соответствующие позиции в сетке:
.cell:nth-child(1):hover ~ .target {
  --positionX: 1;
   --positionY: 1;
}

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

[EN] В Chrome 89 добавили поддержку “import maps”, которые позволяют импортировать JS-модули в браузере по названию модуля, вместо его относительного пути.
Соответствие имени модуля к пути производится в специальном инлайн-скрипте с типом importmap.
Прямо как paths в конфиге requirejs.

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

[EN] Зачастую, разработка веб-приложения начинается с вёрстки по предоставленному дизайну. Автор статьи считает, что такой подход ведёт к переусложнению и предлагает взглянуть на разработку со стороны создания бизнес-процессов.
А именно — определить, какую информацию пользователи хотят получить и какую информацию они должны для этого предоставить.
Исходя из этого, уже формируется структура состояния приложения и создаются классы, необходимые для взаимодействия.

Показателем правильной реализации такого приложения может служить возможность работы с ним, как если бы это было cli-приложение. Такой подход позволит более четко отделить UI от бизнес-логики и не зависеть от фреймворка, на котором построено приложение. Открыть/Комментировать

2021-03-08 10:01:54 Фронтенд дайджест #208
Лучшее за неделю
Подкаст

[EN] Виталий Фридман из Smashing Magazine подготовил ежегодный чеклист по веб-производительности.
Монструозная статья содержит 77 рекомендаций с подробным разбором всех аспектов. Например, с чего начать заботу о производительности, какие бывают метрики, как подходить к выбору фреймворка, архитектуры и инфраструктуры проекта, как оптимизировать JS/CSS-файлы, изображения, видео и шрифты, а также какими инструментами для этого пользоваться.

В статье очень много ссылок на материалы по каждой теме: результаты исследований, видео выступлений, утилиты и сервисы.

Для самых нетерпеливых в конце есть список из 17 наиболее простых шагов, которые дают ощутимую часть результата.

[EN] Если, а точнее Когда ваше реакт-приложение начнёт тормозить — первая идея, которая у вас возникнет — это обернуть все проблемные компоненты в React.memo. Дэн Абрамов рекомендует не спешить с этим и предлагает рассмотреть две простые техники, которые помогут проще справиться с проблемой перфоманса. 

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

Вторая техника — если стейт не так просто отделить, то тяжёлый контент можно передавать, как children prop. Эта часть дерева не будет перерендериваться. А когда Server Components зарелизится, такой подход еще можно будет использовать, чтобы вообще вынести тяжелые части на сервер.

[EN] Для темизации Реакт-приложений, на базе CSS-in-JS, обычно используют обёртку ThemeProvider, который через Context API передаёт компонентам выбранную тему, а они уже вычисляют те или иные стили.
При изменении темы происходит перерендер всех таких компонентов, что может привести к проблемам с производительностью.

Автор предложил использовать для подобных целей CSS-переменные. Через data-атрибут на body устанавливается выбранная тема, а в стилях присваивают CSS-переменные для тёмной и светлой темы.
Таким образом, достаточно просто изменить data-атрибут, чтобы браузер сам заменил все цвета на странице, а реакту не пришлось ничего перерендеривать.
Кстати, таким же подходом пользуется и Facebook.

[EN] Автор сравнил разные степени сжатия для современных форматов изображений: WebP, AVIF и JPEG, чтобы подобрать наиболее оптимальные сочетания уменьшения размера и потери качества.
Например, при настройках сжатия JPEG в 60%, оптимальной альтернативой будут AVIF со сжатием 50% и 65% для WebP. На выходе вы получите меньший размер файла, относительно JPEG. Насколько меньший? На 36% для AVIF и на 15% для WebP. И это всё без видимой потери качества.

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

[EN] Состоялся релиз TypeScript 4.2. Вот что нового:
- Отображение алиаса юнион-типов, что упрощает дебаггинг в IDE;
- spread-оператор наконец-то может находиться в любой части массива, а не только в конце. Но, к сожалению, всё ещё только один и после него не должно быть опциональных элементов;
- Запрет использования оператора in с примитивами, поскольку это приводит к ошибке в рантайме;
- Добавлен модификатор abstract для сигнатур конструктора, позволяющий типизировать, например, фабрику миксинов;
- cli-флаг --explainFiles, позволяющий вывести все файлы, попавшие в компиляцию;
- Функции без вызова, в выражениях с && и ||, которые так любят использовать в JSX, будут вызывать ошибку со включенной опцией --strictNullChecks.
- Неиспользуемые переменные, при деструктуризации массивов, могут быть явно объявлены с помощью символа подчеркивания для предотвращения ошибки компиляции при включенной опции noUnusedLocals. 
- Опциональные свойства не вызывают ошибки при взаимодействии с сигнатурами строковых индексов — вот такими штуками [propName: string]: any;
- И конечно же, целый ряд breaking changes.

Если вы мало чего поняли — это нормально. Ребята из Microsoft делают очень подробные чендж-логи с примерами кода до и после. Открыть/Комментировать

2021-03-01 10:02:10 Фронтенд дайджест #207
Лучшее за неделю
Подкаст

[EN] Рассказ про ещё одну уязвимость, которую автор назвал Dependency Confusion, с помощью которой хакеры могут добавить вредоносный код в цепочку зависимостей вашего проекта.

Некоторые компании используют приватные пакеты из таких же приватных хранилищ, например JFrog или Artifactory. Однако пакетные менеджеры настроены таким образом, что сначала проверяют наличие пакета в публичном репозитории, и только потом уже в приватном. Некоторые из них сверяют версии пакетов и загружают наивысший.

Узнав имена таких пакетов, автор загрузил в публичный репозиторий одноимённые пакеты с безобидным кодом, который уведомлял автора об успешной «атаке». Таким образом, автору удалось внедрить код в пакеты 35 организаций, таких как Shopify, Apple, PayPal, Netflix, Yelp и Uber.
Microsoft даже выпустила инструкцию, как избежать подобных проблем.

[EN] Видео о том, что конкретно делают разработчики VS Code, чтобы ускорить запуск своего приложения.

После загрузки кода, движок V8 производит его парсинг и преобразование в исполняемый код более низкого уровня. В браузере этот процесс не контролируется, но в NodeJS и Electron-приложениях можно сохранить полученный кэш и в дальнейшем загружать сразу его. Это позволяет получить почти двукратный прирост скорости.

Выполнение всех функций запуска программы привязано к определенным фазам, что позволяет приоритизировать их и отложить второстепенные операции на потом.
Самой критичной считается фаза, когда отображается структура проекта и содержимое первого файла.

Использование Idle Callback — экспериментальной функциональности, которая позволяет откладывать выполнение функции до моментов простоя.

[EN] Один из популярных CSS-фреймворков прошлого года — Tailwind — фреймворк, основанный на утилитарных классах. В статье автор рассказывает, почему ему и вам может не подойти этот фреймворк.

Например, вам может не понравиться итоговый HTML. Это характерно для подобных фреймворков, где на каждое свойство есть свое имя класса. Но в Tailwind, помимо классов с тире, используются ещё и классы с двоеточием. Финальный результат чисто визуально тяжело читать и поддерживать.

Использование встроенных директив, вроде @apply, в ваших CSS-файлах заставляет внедрять Tailwind в пайплайн сборки проекта. А так же проектов, построенных на вашем.

Конфигурация размеров и отступов задаётся через JavaScript, в то время, как в 2021 году можно было использовать нативные CSS-переменные. А значит, вместо динамически изменяемых размеров, придётся подключать JavaScript. Прямо как в Bootstrap, которому уже почти 10 лет.

Автор приходит к выводу, что Tailwind пока не в силах претендовать на лидерство среди CSS-фреймворков.

[EN] 21 спорная привычка, от которой стоит отказаться фронтендеру в 2021 году. Вот самые интересные из них:
- Жаловаться на CSS. В CSS завели фичи, которые решают вопрос верстки, центрирования и даже соотношения сторон;
- Жаловаться на JavaScript. Уже есть подходы и фреймворки, позволяющие улучшить доступность, сократить бандл до минимума и удовлетворить потребностям SEO;
- Откладывать изучение TypeScript. Он показал наибольший прирост популярности в 2020 году;
- Бояться CSS-гридов. Попробуйте, они уже решают много проблем;
- Игнорировать доступность. Это может стать хорошей целью для развития навыков;
- Думать что контент всегда идет слева направо. В мире много языков которые пишутся справа налево;
- Не вести блог. Расскажите что нибудь конструктивное вместо дебатов в твиттере. Хоть в личном блоге на Gatsby/Next/Eleventy, хоть на dev.to;
- Писать длинные посты со списками. Открыть/Комментировать

2021-02-22 10:01:43 Фронтенд дайджест #206
Лучшее за неделю
Подкаст

[EN] Исследователи из Иллинойсского университета в Чикаго обнаружили, как обычная фавиконка может использоваться для трекинга пользователей. 94% браузеров, при первом открытии URL, кэшируют его favicon в F-Cache. При последующих открытиях, иконка берётся из кэша и повторный запрос не отправляется.

Суть уязвимости:
В режиме записи ключа, для каждого уникального пользователя генерируется такой же уникальный id, который переводится в бинарный вид. С помощью серии редиректов, браузер пользователя прогоняется по каждому URL, отвечающему за свой бит. Ссылки, соответствующие битам пользователя, возвращают фавиконки, которые браузер закэширует в F-Cache. Для остальных ссылок, сервер вернёт 404 и ничего в кэш не попадёт.

Прогоняя пользователя по тем же ссылкам, мы можем точно узнать, какие из них были закэшированы, а какие запрашиваются. А значит мы точно знаем уникальный id в бинарном представлении, несмотря на выключенные куки, режим инкогнито или VPN.

Достаточно всего 32 редиректа, которые выполнятся за 3 секунды, чтобы покрыть всех пользователей интернета. Если интересно — посмотрите репозиторий с демонстрацией уязвимости.

[EN] Кент Доддс — автор курсов по Реакту и его тестированию — рассказал, за что он так любит именно Реакт.
Например, за явное обновление состояния. По сравнению с двунаправленным биндингом данных, как в том же Angular, автор находит подход Реакта более простым, гибким, мощным и поддерживаемым.

JSX позволяет использовать все возможности JavaScript прямо в шаблонах, вместо борьбы с ограничениями кастомного синтаксиса шаблонизатора.

Хуки позволяют легко шарить функциональность между компонентами.

С помощью Реакта можно строить, как большие, так и маленькие проекты. И не только веб, но и мобильные, VR и даже консольные утилиты.

React — самый популярный инструмент в мире (после jQuery, разумеется). А чем больше людей им пользуется, чем больше инструментов они создают, тем больше проблем уже решено за вас и тем проще найти подходящего сотрудника.

[EN] Статья о том, как устроены дефолтные стили и в каком порядке они применяются.
Все стили, накладываемые на элемент, можно разделить на 6 уровней:

Уровень 1 — это дефолтные значения всех CSS-свойств.

Уровень 2 — это стили, которые браузер добавляет конкретным HTML-элементам. Эти стили определяются стандартом W3C, но у браузеров могут быть свои особенности.

Уровень 3 — чтобы уравнять особенности браузеров, придумали нормализацию стилей, например normalize.css. Она переопределяет стили из предыдущего уровня, чтобы элементы выглядели одинаково в разных браузерах.

Уровень 4 — сброс ненужных стилей. Например, reset.css Эрика Мейера приводит элементы к нейтральному виду: убирает отступы у заголовков и списков, проставляет общие свойства для размера текста и высоты строки.

Уровень 5 — сброс любого свойства, используя ключевые слова: inherit, initial, unset, revert.

Уровень 6 — чтобы сбросить все свойства элемента разом, можно использовать свойство all с необходимым значением.

История о том, как Netflix придумали свою систему найма и мотивации сотрудников.
Netflix нанимают исключительно талантливых, высокопроизводительных разработчиков. «Середняки» только снижают интеллектуальный уровень команды и требуют больше внимания руководства. А вот работа в коллективе «звёзд» — это сама по себе уже большая награда для сотрудников.

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

Сборник из 15 полезных однострочных выражений в JavaScript вызвал бурную реакцию нашего сообщества.
Сами по себе, эти однострочники скорее вредят, чем помогают: например, функция isArray = (arr) => Array.isArray(arr) явно дублирует встроенный метод. Любой опытный разработчик заставит переписывать такой код, если увидит нечто подобное на Code Review.
Почитайте историю драмы, но, пожалуйста, не применяйте эти однострочники в реальной жизни. Открыть/Комментировать

2021-02-15 10:02:31 Фронтенд дайджест #205
Лучшее за неделю
Подкаст

Статья о том, почему Реакт может стать не лучшим выбором для большого долгосрочного проекта.
Автору пришлось столкнуться с проблемой широкого выбора инструментов в мире Реакта: чем больше вариантов, тем больше мнений о том, как правильнее было построить приложение. Особенно, если твои новые коллеги — бывшие .NET'чики.

Очень сложно объяснить разработчикам с других платформ, почему в React нет Dependency Injection; зачем нужны функциональные компоненты, когда есть прекрасные классы; ну и можно бесконечно долго спорить о том, как называть файлы и работать с сетью. Всё это требует обсуждений, поиска плюсов и минусов и, конечно же, принятия ответственности за выбранное решение.

Когда приложение разрослось, когда количество зависимостей перевалило за тысячу, а горячая сборка стала занимать 15 минут — тогда технический директор предъявил автору за неправильные и необдуманные решения. И автору пришлось потрудиться, чтобы доказать, что выбранный стек вокруг Реакта был наилучшим из возможных.

[EN] Джейк Арчибальд предупреждает: не передавайте функции в качестве колбеков, если они не предназначены специально для этого. Например, ['-10', '0', '10', '20', '30'].map(parseInt) неожиданно вернет не массив преобразованных чисел из строк, а [-10, NaN, 2, 6, 12]. Так происходит, потому что переданная в map функция вызывается со всеми аргументами, а parseInt вторым аргументом принимает систему счисления.

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

[EN] Что изменилось в мире Реакта с 2016 года? По большому счёту, ничего кардинального. Разве что вместо классовых компонентов сейчас всё чаще предпочитают хуки. React Router всё ещё самый популярный роутер, а Redux  чаще других используют для управления состоянием.

Но вот что изменилось за 5 лет, так это работа с данными от сервера. Сейчас всё реже можно встретить работу с данными прямо внутри Redux и всё чаще — с использованием библиотек react-query и swr. Они берут на себя обработку ошибок, обновление данных в фоне, пэйджинацию, кэширование и инвалидацию кэша.

Самыми ожидаемыми фичами в 2021 году можно считать Suspense, анонсированный 3 года назад и совсем свежие Server Components.

[EN] Видели новую главную страницу GitHub? Не ту, которая с вашими репозиториями и серой плиткой, а лендинг github.com, на который можно попасть, если вы не авторизованы?

Обратите внимание, что страница загружается быстро и работает плавно, хотя там и анимации и 3D и видео. После таких лендингов обычно приходится класть ноутбук в морозилку, а тут — ничего.
Команда GitHub рассказала о том, как им это удалось.

Как и следовало ожидать, какого-то одного секрета нет, а такая производительность обусловлена целым рядом мелких улучшений:
- Анимируются только элементы, видимые на экране прямо сейчас. Для этого используется IntersectionObserver API;
- Через transition анимируются только нужные свойства;
- Большую полупрозрачную иллюстрацию в футере сохранили в формате WebP, а для старых браузеров использовали SVG с двумя JPG файлами: один — сама иллюстрация, второй — маска, по которой SVG обрезает картинку.

[EN] Когда нужно задеприкейтить функцию, можно просто пометить её @deprecated в комментарии JSDoc и указать новое название функции. Редактор кода увидит, что функция устарела, перечеркнёт все её вызовы и покажет комментарий с новым названием.
Но что если вам нужна не новая функция, а новые аргументы: раньше они передавались списком, а теперь одним объектом?

Для этого можно воспользоваться перегрузкой функций в TypeScript.
Указываем в интерфейсе сигнатуру старой и новой функции, помечаем старую как @deprecated, и (тут могло быть совсем красиво, но нет) разруливаем поведение функции, в зависимости от typeof переданных аргументов.

Решение спорное — почти всегда будет лучше создавать новые функции и депрекейтить старые. Открыть/Комментировать