Фронтенд дайджест #203 Лучшее за неделю Подкаст [EN] В про | FrontoWeek: Недельный дайджест [Фронтовик]

Фронтенд дайджест #203
Лучшее за неделю
Подкаст

[EN] В прошлом году, среди сборщиков, появился новый игрок — Snowpack. Он там даже в State of JS 2020 занял второе место по удовлетворённости разработчиков.
В середине января вышла уже третья версия.
Вот что изменилось:
- Добавили Streaming import — загрузку, кэширование npm модулей по требованию, без явной установки. Проекты, которым не нужен Node.JS, могут вообще отказаться от npm cli;
- Продакшн билд стал в 100 раз быстрее других бандлеров;
- Появилось новое JavaScript API, которое упрощает подключение вашего фреймворка в Snowpack;
- Добавили возможность использовать билды, как на фронте, так и на сервере.

Если вы еще не пробовали этот сборщик, то теперь то уж точно самое время — зря лайкали что ли?!

Опубликован рабочий черновик спецификации CSS Cascading and Inheritance 5 уровня.
Главное дополнение в нём — директива каскадных слоев @layer. Она позволяет более гибко и явно управлять приоритетом применения стилей.
Например, стили, объявленные с помощью этой директивы, будут иметь меньший приоритет, чем объявленные вне неё, даже если специфичность селекторов будет выше. Это может быть удобно, при определении дефолтных стилей, темизации приложений, внедрении сторонних библиотек, рефакторинге и создании дизайн-систем.

[EN] Новые процессоры от Apple на M1 дают двойной прирост производительности по синтетическим тестам.
Но пока не все приложения поддерживаются нативно, поэтому работают через эмулятор Rosetta 2.
Автор заметки решил проверить, можно ли уже сейчас разрабатывать на новых макбуках и с какими трудностями придётся столкнуться.
Важно, что приложения он устанавливал не с нуля, а воспользовался утилитой для миграции со старой платформы на новую. По задумке, это должно было перенести все приложения и все данные на новый компьютер, будто он всегда был таким.
С небольшими костылями, но ему всё же удалось запустить ARM-версию Node.JS и ускорить время билда Gatsby-проекта на 40%.
2 вывода из этой заметки: уже можно пользоваться новыми макбуками для разработки и лучше настраивать их заново.

Даже с многолетним опытом разработки очень сложно писать читаемый код. И на это есть несколько причин:
- Чистый код — это не основная задача разработки;
- Нет единого общепринятого стиля кода;
- В университетах учат основам алгоритмов и структурам данных, а не тому, как сделать код понятнее;
- Сложно учиться у других, когда чужой код иногда хуже твоего.

Развитие любого кода неизбежно приводит к снижению читаемости и увеличению его сложности. И чтобы хоть как-то управлять этим хаосом, есть несколько проверенных способов:
- Декомпозиция кода, которая может улучшить читаемость ценой увеличения сложности;
- Добавление метаинформации в переменные, функции, классы, чтобы уже из названия, можно было понять, что они делают;
- Добавление комментариев, отвечающих на вопрос «зачем» здесь этот код;
- Добавление типов, как «капканов» для будущих ошибок.

Главная мысль статьи: читать код сложнее, чем писать. Пишите код с заботой о читателе!

[EN] Автор начал готовиться к собеседованиям в Google, Amazon, Facebook и решил собрать в одном месте все материалы, которые ему пригодились.
Получился репозиторий с кучей ссылок на структуры данных, алгоритмы, их усложнения.

[EN] Насколько сложно сделать выезжающую боковую навигацию с нуля? Казалось бы, чё там: пару блоков и хэндлеров. Но как насчёт респонсива? А работы с отключенным JavaScript? А с доступностью как дела?

Ничего необычного или сложного в этом нет: нужно лишь следовать гайду по шагам.
Респонсивность делается через CSS Grids.
Открытие без JS — через псевдокласс :target, который срабатывает, когда текущий URL в браузере совпадает со ссылкой, на которой этот селектор висит.
А доступность совсем просто: семантикой и перемещением фокуса на кнопку закрыть и обратно.

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