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

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

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

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

[EN] Один из наболевших вопросов в React-комьюнити: может ли Context API заменить Redux?
Короткий ответ — НЕТ.

Context API предназначен для упрощения передачи данных дочерним компонентам. При любом изменении данных происходит ререндер всех подписанных на них компонентов. Это отлично подходит для редко обновляемых данных: например, для локализации и темизации приложений.

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

Частично, функциональность Редакса может быть воспроизведена с помощью комбинации хуков useReducer, useMemo и React.memo, но это будет просто «переизобретением колеса». С другой стороны, можно будет не тащить в бандл Редакс.

Статья должна была дать однозначный ответ на главный вопрос современного фронтенда, но принесла ещё больше вопросов.

[EN] Можно ли поддерживать ПО, написанное лет пять назад без существенного обновления стэка? Безусловно, цена поддержки и развития будет расти со временем, но не все заказчики готовы вкладываться в глобальный рефакторинг. Код, написанный сегодня, непременно станет легаси через какое-то время. Что можно сделать, чтобы без проблем поддерживать код в течении многих лет?
1. Избегать сложных структур: использовать чистые функции и узкоспециализированные классы. Избегать смешивания логики и данных в объектах;
2. Не бояться создавать новые, маленькие модули с одним или парой экспортов;
3. Избегать добавления к объектам произвольных полей. Соблюдайте консистентность используемых данных. В этом может помощь TypeScript или JSDoc-аннотации. На худой конец, можно описывать структуру в произвольном формате в комментариях или документации.

[EN] Как сверстать тянущийся прямоугольник с соотношением сторон 16:9?
Если у вас чёрный пояс по вёрстке, то вы знаете, что для этого можно использовать свойство padding-top, которое всегда считается от ширины элемента. Делим высоту на ширину и получаем, что для отношения 16:9, padding-top должен быть 56.25%. Не самое очевидное решение, конечно.

Так было раньше, но так больше не может продолжаться. Встречайте свойство aspect-ratio, которое решает именно эту проблему. Просто задаём aspect-ratio: 16 / 9 и высота посчитается автоматически. Но и тут не обошлось без сюрпризов: если элемент вдруг начнёт превышать высоту контейнера, то он спокойно вылезет за её пределы, наплевав на соотношение сторон.

Свойство дошло до стадии релиза во все основные браузеры: Chromium 88, Firefox 87, и Safari Technology Preview 118.

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

Оказалось, что люди обращают внимание на внешность, пол и расу, даже если считают себя непредвзятыми.
На канале Winterview я уже писал, как сделать нормальную фотку для резюме. Открыть/Комментировать

2021-02-01 10:02:04 Фронтенд дайджест #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 для фона, подключить для него фолбэк, а так же доделать ловушку фокуса, которая бы циклически переключала фокус по интерактивным элементам внутри боковой навигации. Открыть/Комментировать

2021-01-25 13:17:59 Фронтенд дайджест #202
Лучшее за неделю
Подкаст

Ссылки на оригинальные посты теперь в эмоджи с номерами.

Опубликованы результаты ежегодного опроса State of JS за 2020 год.
Angular попал в категорию технологий, которые разочаровали разработчиков. Это тревожный звоночек: если вы знаете только Angular — безопаснее будет уже начать переучиваться.
React и Vue — напротив — оставляют только положительные ощущения. Стабильно растёт интерес к Svelte, но пока только интерес.

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

В тестировании никаких сюрпризов: чаще всего используется Jest, но растёт интерес к новым фреймворкам: Testing Library и Playwright.
В списке сборщиков интересное пополнение в виде Snowpack и esbuild, но самый используемый пока что Webpack.

На этом можно закончить текстовый пересказ графиков — лучше пройти на сайт опроса и посмотреть на них своими глазами.

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

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

Разработчиков становится всё больше, а задачи, над которыми им дают работать, всё более декомпозированными и точечными. Оно и понятно: чем меньше задача, тем точнее можно её оценить, что очень удобно при планировании.
Но не всё так хорошо. Благодаря такому детализированию, у разработчиков становится меньше пространства для проектирования. И когда разработчик попросит повышения до архитектора, ему резонно скажут, что для новой позиции его опыта проектирования недостаточно.
Но откуда же взяться этому опыту, если всё, что разрешено делать — это кодить задачки из Jira?!
Выход тут один: вместо распределения задач необходимо делегировать целые обязанности, вроде полного цикла проектирования и разработки фичи.

Зачем математика разработчикам, особенно фронтендерам?
Займитесь анимациями, чтобы узнать это.

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

[EN] Если вы думаете, что коммиты в git — это diff'ы содержимого, то вы заблуждаетесь. Гит — это простое key-value хранилище, в котором есть 3 типа записей:
- blob содержит весь контент изменённого файла, но ничего не знает о том, где этот файл находится;
- tree указывает на blob и хранит информацию о самом файле и его положении в структуре папок — вложенные директории тоже описываются с помощью tree;
- сommit связывает родительский коммит и корневой tree, а также содержит мета-информацию об авторе и сообщении;

Таким образом, эти объекты в гите образуют дерево Меркла, по которому можно откатить состояние проекта — ведь у нас есть полные состояния на любой момент времени. Открыть/Комментировать

2021-01-14 23:26:03 Фронтенд дайджест #201
Лучшее за неделю
Подкаст

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

[EN] Для добавления картинки на страницу уже недостаточно просто вставить тег img в HTML. Необходимо подумать и о метриках Web Vitals.
В статье перечислены 8 шагов для максимально оптимизированной вставки изображений.
Вот некоторые из них:
- Добавляйте атрибуты height и width — это уменьшит CLS;
- Используйте хэш от содержимого в имени файла и возвращайте заголовок Cache-control с неограниченным сроком хранения — это ускорит повторное отображение;
- К тегу img добавьте атрибуты loading="lazy" , чтобы активировать lazy loading и decoding="async", чтобы по-максимуму отложить рендеринг изображения;

[EN] Загрузка внешних шрифтов блокирует Critical Rendering Path браузера, негативно сказывается на UX и метриках Lighthouse.
Несколько лет назад, стандартной рекомендацией было использование CDN для загрузки популярных шрифтов: если пользователь уже загружал Roboto на другом сайте, то шрифт просто подтянется из кэша.
Но недавно в современные браузеры начали завозить ограничение на кэширование в рамках одного домена.
Теперь лучше не использовать CDN, а загружать шрифты с того же домена, что и сайт.

Но это не всё. Ещё остается проблема с FOUT (Flash Of Unstyled Text), когда контент страницы может сдвинуться после загрузки шрифта, а вместе с ним поедет метрика CLS и пользовательский опыт.
Чтобы это исправить, можно попробовать подобрать фолбэк-шрифт и его стили так, чтобы он визуально был близок к конечному.
Для этого даже есть специальный сервис Font style matcher.

[EN] Что делать, если Lighthouse снижает оценку из-за используемых на сайте виджетов сторонних сервисов, типа видео-плееров, лайв-чатов и рекламных блоков?

Как правило, такие виджеты начинают грузиться по DOMReady, что может замедлить загрузку других ресурсов на странице.
Если контент таких виджетов не критичен, лучше заменять их на статические «фасады», которые внешне выглядят, как виджет, но не содержат его функциональности.

При наведении курсора на фасад необходимо подготовить соединение с ресурсами виджета через
На Гитхабе уже есть несколько готовых решений для YouTube и Vimeo плееров, некоторых лайв-чатов и iframe'ов. Если готового решения не нашлось, придется подумать над своим — в статье есть ссылка на подробную инструкцию.

[EN] При разработке публичной библиотеки, вам никак не обойтись без документации.
Если проект написан на TypeScript — значит у вас уже есть описания всех полей и методов. Получается, вам придётся дублировать в документации то, что уже описано в коде. Рано или поздно критические изменения в API не попадут в документацию и кому-то будет больно.

Утилита api-extractor умеет искать типовые проблемы в API библиотек, вроде забытых экспортов и выгружать в JSON документацию, на основе типов и TSDoc-комментариев.
Если этот JSON пропустить через api-documenter — получатся Markdown-файлы, которые уже можно положить в репозиторий с библиотекой.

[EN] Команда разработки десктопного приложения Discord добавила полную поддержку навигации с помощью клавиатуры. Но когда дело дошло до отображения фокуса выбранного элемента, команда столкнулась с интересной проблемой: если использовать свойство outline — границы фокуса не скругляются, но даже если использовать box-shadow — граница может быть обрезана родительским элементом с overlow:hidden.

Чтобы фокус нигде не обрезался и всегда отображался, как нужно, команда разработала и выложила в публичный доступ 2 компонента-враппера (HOC'а): стилизуемый FocusRing для самого элемента фокуса и FocusRingScope, который абсолютно позиционирует тот самый элемент фокуса над кнопкой или инпутом.

The New York Times обвинили JetBrains в возможном преднамеренном создании бэкдора в продукте TeamCity для «русских хакеров».
JetBrains выпустили официальный ответ, где прояснили, что никакие компании или спецслужбы к ним не обращались, но сами JB готовы к любому сотрудничеству. Открыть/Комментировать

2020-12-30 10:01:01 Фронтенд дайджест #140
Лучшее за неделю
Подкаст

[EN] Команда разработки React и лично Товарищ Дэн Абрамов, представили сообществу демо новой фичи, над которой они сейчас работают — React Server Components.

Серверные компоненты рендерятся только на сервере, а значит в них удобно размещать запросы к серверу или чтение файлов. На демо ребята даже писали SQL прямо в серверных компонентах, с оговоркой, что, конечно же, так делать не нужно.
Ещё один плюс серверных компонентов — их зависимости не попадают в клиентский бандл, а значит в такие компоненты можно вынести тяжёлые библиотеки, которые используются в одном-двух местах.

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

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

Что лучше: Angular или React?
Можете не отвечать, это был риторический вопрос.
А вот наставникам из Яндекс.Практикума приходится отвечать на эти вопросы регулярно. Автор решил написать статью, о том, какой инструмент лучше подойдёт для той или иной задачи, но увлёкся и написал подробную историю развития JS-библиотек и фреймворков.

Всё началось в 2005 году с появления утилитарных библиотек, вроде Dojo Toolkit. Затем вышел знаменитый jQuery, который до сих пор держит 83% сайтов в интернете.
Выход стандарта ES5 в 2009 году дал толчок развитию JavaScript, после чего мир увидел первые полноценные JS-фреймворки.
В статье рассказано о самых известных фреймворках: какие у них особенности, какие задачи они решали, почему одни теряли популярность, а другие её приобретали.

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

[EN] Сколько файлов фавиконки нужно, чтобы все браузеры её отобразили?
Обычный онлайн-сервис генерирует вам 25 иконок во всех необходимых размерах и форматах.

Андрей Ситник — автор PostCSS и Autoprefixer — в блоге Злых Марсиан рассказал, что для покрытия большинства браузеров достаточно всего 5 картинок:

3 в HTML:
- SVG для современных браузеров;
- 180×180 PNG для устройств от Apple;
- 32×32 ICO для совсем старых.

И 2 картинки в manifest.json:
- 192×192 PNG для отображения на главном экране;
- 512×512 PNG, которая будет появляться при запуске PWA.

А в самом конце статьи, Андрей даёт инструкцию, как собрать такой пак иконок.

[EN] Автор Ruby on Rails представил новый подход к разработке веб-приложений, не требующий написания JavaScript. Хорошо, требующий, но совсем чуть-чуть.

В подходе Hotwire объединилось сразу несколько инструментов. Библиотека Turbo позволяет клиенту подписываться на обновления частей страницы через веб-сокеты, получая готовый HTML от бэкенда.
Это уже решает 80% задач, для которых обычно требуется JavaScript.
Остальные 66% могут быть покрыты с помощью фреймворка Stimulus, который чем-то напоминает AngularJS на минималках.

Кстати, именно на этом стеке работает почтовое приложение Hey, в котором главный упор сделан на быстродействие.

В следующем году этот стек дополнит библиотека Strada, которая позволит создавать гибридные мобильные приложения. Пока ничего конкретного, но посмотрим, сможет ли она потеснить позиции React Native.

[EN] Чтобы применить трансформации к элементу в CSS, сейчас нужно перечислять все функции подряд: transform: translate(0,0) scale(1,1) rotate(0). Это создаёт массу проблем, например, с анимациями: приходится копировать всю строку, даже если нужно анимировать одну функцию.

Вслед за Firefox, Chrome Canary, индивидуальные свойства трансформации приходят и в Safari Technology Preview 117. Совсем скоро, лет через 5, можно будет применять трансформации по одной.

Это был последний дайджест 2020 года и конец первого сезона.
Следующий, 201 выпуск, будет доступен патронам с 9 января, а 14 января появится на основном канале.

С Новым годом !
С вами был Фронтовик и мне уже пора. Открыть/Комментировать

2020-12-28 10:01:35 Фронтенд дайджест #139
Лучшее за неделю
Подкаст

[EN] Вышел Web Almanac 2020, в котором авторы собрали в кучу самую разнообразную аналитику.

Какую аналитику? Ну например, что средняя страница содержит 6 внешних CSS-файлов, которые блокируют первую отрисовку.
Что реальная популярность использования разработчиками гридов на мобильных сайтах выросла до 4%, а флексбоксов аж до 61%.
Целых 2% сайтов используют одну из CSS-in-JS библиотек и Styled Components самая популярная среди них.
А лидером среди JS-библиотек всё так же остается jQuery c его 83% сайтов.

Объём работы по составлению такого альманаха просто поражает. Лучше сходите и посмотрите на него сами.

[EN] 90% браузеров уже поддерживают синтаксис ES2017, но, несмотря на это, многие разработчики продолжают компилировать свои библиотеки и утилиты в легаси синтаксис для большей браузерной совместимости. Ну или просто по привычке.
Из-за этого, в бандл попадают полифилы и функции-хэлперы, которые замедляют исполнение кода и увеличивают размер на 20%.

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

Для предварительной оценки эффективности такого перехода, воспользуйтесь специальным сайтом. Например, JS на главной странице Твиттера можно смело уменьшить на целых 2%.

Frontend-команда из Tinkoff поделилась своим «технологическим радаром» — диаграммой, на которой можно увидеть технологии, которыми в компании пользуются активнее всего, а от каких — отказываются.

И отказываются они, например, от JavaScript. Ну вы знаете, типов нет, поддерживать большую кодовую базу с каждым днём становится всё труднее.
Вместо JS, в Тинькове всё активнее используют TypeScript — внутренние опросы показывают, что 94.6% сотрудников предпочитают TS.

А вот всё активнее они внедряют Dependency Injection и Машинное обучение на фронте, которое уже работает в проде и заранее загружает контент для страницы, на которую пользователь перейдёт с большей вероятностью.

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

Автор заметки рассказал о ситуации, когда рендеринг Storybook c кучей кнопок занимал 36 секунд, и как ему удалось сократить это время до 200 мс.

Секрет в использовании data-атрибутов и CSS-переменных, которые устанавливаются только при первом рендере компонента, а дальше обрабатываются браузером, как любые другие CSS-переменные.

В качестве альтернативы такому подходу, автор предлагает рассмотреть генерацию статических CSS-файлов, во время компиляции проекта. Например, используя Compiled или linaria.

[EN] Чтобы на самом деле понять, как работают языки программирования — нужно вовсе не книжки умные читать, а просто написать свой язык.
Чтобы это было действительно просто, вам будет помогать автор Uglify.js.
В его небольшом руководстве разобрано, как на JavaScript можно написать свой парсер, интерпретатор и компилятор языка.
Попутно автор поясняет все базовые нюансы, от построения абстрактного синтаксического дерева до оптимизаций.
А в самом конце руководства, вас ожидают примеры использования написанного языка.

[EN] Многие ещё помнят или хотя бы слышали про Callback-Hell, который преследовал JavaScript-разработчиков до появления промисов и async/await.
С тех пор, код стал чище и понятнее, но автор статьи предлагает не останавливаться на этом.

В статье показано, насколько код станет еще чище, если добавить ложку функциональщины, например, в виде функции pipe или экспериментального оператора |>.
Такой подход, по заверению автора, избавит код от бойлерплейта, оставив только действительно важную функциональность. Открыть/Комментировать

2020-12-21 10:01:51 Фронтенд дайджест #138
Лучшее за неделю
Подкаст

[EN] 10 декабря завершилось мероприятие GitHub Universe 2020, где разработчики рассказали, что появится в их сервисе со дня на день.

Давайте загибать пальцы:
- GitHub Discussions — аналог форума для обсуждений, в который будут посылать всех тех, кто раньше спрашивал что-то в Issues;
- GitHub Codespaces — онлайн окружение для разработки, основанное на VS Code и позволяющее работать с репозиториями с любого устройства прямо в облаке;
- Dependency Review — инструмент, который будет искать известные уязвимости в присылаемых Pull Reqests'ах;
- GitHub Sponsors — прозрачная возможность для компаний спонсировать разработчиков OpenSource-проектов через процессинг GitHub;
- Actions Visualizer — новый UI для GitHub Actions, отображающий состояние пайплана в виде дерева этапов.

Ну и, конечно же, тёмная тема.

Что получится если объединить торренты и блокчейн? Получится Hypercore протокол.
Благодаря этому протоколу, любой участник сети может опубликовать сайт, который будет доступен другим участникам по специальному адресу hyper://[hash].

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

И вот, после двух лет разработки, энтузиасты выпустили браузер Beaker, поддерживающий этот протокол.
В браузер встроено всё необходимое для создания и синхронизации таких p2p сайтов. А на сайте браузера можно найти документацию и шаблоны для сайтов.

[EN] Автор книги TypeScript in 50 Lessons советует не использовать enum в TypeScript, отдавая предпочтение union-типам.

Что не так с enum?
- Enum транспилируется в JS-код который инициализирует соответствующую структуру. Этого можно избежать, если использовать const enum, но тогда использование enum будет ограничено одним модулем;
- Числовые enum’ы не типобезопасны: можно передать в аргумент функции число за пределами enum и это прокатит;
- Строковые enum’ы являются именованными типами, а значит, даже если передаваемая в функцию строка подходит — она не будет соответствовать типу.

Все эти неудобства решает union-тип, когда вы просто перечисляете все возможные варианты значения.

[EN] Когда говорят о CSS-переменных, имеют в виду CSS Custom Properties, и наоборот.

Удивительно, но спецификация разделяет эти два понятия. Custom Properties — это сущность, которая содержит некоторое CSS-значение, определяется так же как и обычные свойства, но с двойным минусом в префиксе имени, и, так же, как многие другие свойства — например color — подчиняется принципам каскадности: родительское значение будет перекрыто значением потомка.

А вот чтобы использовать значение Custom Properties в других CSS-свойствах, необходимо создать переменную.
Переменная создается только с помощью функции var() и ассоциируется со значением переданной ей Custom Property.
Переменная может иметь фоллбэк-значение на случай, если Custom Property не валидно или отсутствует для текущего селектора.

[EN] 4 декабря, JavaScript исполнилось 25 лет.

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

На таймлайне можно найти самые важные события в жизни языка, начиная с его анонсирования в 1995 году: добавление в спецификацию новых фич, появление современных браузеров, релиз Node.js, npm, расцвет одних популярных библиотек и закат других.

Олды, осторожно! Может вызывать приступы ностальгии!

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

Не буду спойлерить окончательно — лучше почитайте статью, как данные о перемещениях норвежского журналиста оказались в ФБР США. Открыть/Комментировать

2020-12-14 10:02:26 Фронтенд дайджест #137
Лучшее за неделю
Подкаст

[EN] Опрос State of CSS подошёл к концу.
11 тысяч человек из 102 стран приняли участие в голосовании за самые важные методологии и инструменты для CSS.

Чем же порадовал CSS в 2020 году?
Разработчики стали заметно чаще использовать гриды и CSS-переменные. Вроде неплохо, но для полного счастья не хватает еще Container Queries, родительских селекторов и вложенности.

Я видел, как на больших проектах пользуются вложенностью в Sass и Less. Очень надеюсь, что вложенность никогда не появится в CSS.

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

А в остальном, мало чего поменялось: по-прежнему большинство используют BEM, PostCSS, Sass, Styled Components и CSS modules. Вёрстку, как и раньше, проверяют в первую очередь, в Chrome. А самым популярным редактором в этом году стал VS Code.

[EN] В 132 выпуске я писал про блокировку репозитория youtube-dl по требованию RIAA. На этом история не закончилась.

15 ноября, Electronic Frontier Foundation направила в GitHub письмо с просьбой разблокировать репозиторий этой популярной утилиты.
В письме пояснялось, что утилита предназначена исключительно для легального использования, и что она не обходит никаких защитных механизмов Youtube.

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

Более того, GitHub организует фонд по защите разработчиков Open-Source проектов от необоснованных претензий.

По мере роста кодовой базы, любой проект на TypeScript сталкивается с замедлением процесса сборки. А это уже негативно сказывается на скорости разработки в целом.

Как всё исправить?
- Разбивайте большую кодовую базу на независимые проекты;
- Исключайте ненужные файлы из конфига. Например тесты;
- Исключайте неиспользуемые типы @type;
- Пропускайте проверку d.ts файлов
- Используйте советы по производительности утилит, таких как ts-loader и awesome-typescript-loader
- Просматривайте отчет запуска TypeScript с флагом --extendedDiagnostics для поиска наиболее времязатратных операций.

Если ничего из этого не помогло — попробуйте обновить версию TypeScript. Так у вас появятся новые заботы, а с оптимизацией придётся повременить.

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

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

М*о*кая части системы или детали их реализации, вы уходите от тестирования реальной системы, тем самым теряя уверенность в ее корректной работе. А чем больше у вас моков — тем больше времени будет уходить на синхронизацию форматов, когда реальные данные изменятся.

Что уместно мокать:
- В юнит тестах — данные, которые зависят от рантайма. Например, время.
- В интеграционных тестах — данные, получаемые из других компонентов. Например, тестируя реакцию компонента на различные статусы HTTP ответов.
- В E2E тестах — м*о*кайте состояние сервисов, находящихся вне вашей ответственности, но, для большей уверенности, лучше обойтись без моков.

Основное правило: если можно обойтись без моков — значит они вам не нужны.

Уже давно идут разговоры, что Apple запретит установку приложений на MacOS не из стора. Если вам это кажется чем-то невозможным или просто маловероятным — посмотрите на iOS: установка приложений там возможна только из стора, а желающих попасть в стор и отдать копеечку Apple с каждым годом становится всё больше.

В статье много спекуляций на тему «А вот они сейчас сделают все приложения платными» и рассуждений о том, как это изменит наш привычный мир. Открыть/Комментировать

2020-12-07 10:02:07 Фронтенд дайджест #136
Лучшее за неделю
Подкаст

При переходе на удалёнку некоторые работодатели решили снизить зарплаты сотрудников. Не, ну а чё, сидишь же дома, расслабляешься.
С 1 января 2021 это официально будет незаконно.

Госдума РФ приняла закон, регулирующий взаимоотношения работодателя и удалённого сотрудника.
В законе описано 3 режима удалёнки: полностью удалённая работа, временная удалённая работа из-за введения всяких карантинов и комбинированная: частично в офисе, частично из дома.

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

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

Не обошлось и без минусов. Напоминаю: раньше уволить удалёнщиков было практически невозможно. Теперь же работник должен быть доступным для связи с работодателем в установленные часы. Два дня игнора подряд будут считаться основанием для увольнения по статье.

12 ноября один пользователь макбука на MacOS BigSur обнаружил, что не может запустить ни одну не-эпловскую программу.
Странно — подумал он, и начал копать.
В процессе поисков вскрылось, что система, при каждом запуске программ, отправляет в Apple их уникальный хэш с местоположением пользователя.

Это очень похоже на механизм проверки статуса отзыва цифрового сертификата приложения, чтобы блокировать явно вредоносные приложения, если они попали в специальную базу. Но ровно этот же механизм даёт Apple возможность контролировать запуск приложений на вашем устройстве и банить «неугодные».
Ну и конечно же, под видом заботы о вашей безопасности, Apple таким образом, скорее всего, собирает статистику о том, что, где и когда вы запускали.

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

До MacOS Catalina, подобные запросы можно было заблокировать с помощью Little Snitch, но в свежайшей BigSur системные процессы получают особые привилегии, на которые не могут повлиять ни блокираторы трафика, ни VPN с фаерволами.

[EN] С выходом новой MacOS BigSur, вышел и новый Safari 14.
В новой версии браузера появилась поддержка веб-расширений. С помощью утилиты safari-web-extension-converter можно преобразовать веб расширение, написанное для другого браузера, в Xcode-проект, сбилдить его и загрузить в AppStore.

В Safari 14 значительно ускорили загрузки страниц, сделали прогрессивную загрузку PDF-файлов, завезли поддержку WebP и добавили автоматический перевод страниц на 7 популярных языков.

В CSS добавили image-orientation, :is(), :where(), line-break: anywhere и image-set().

В JavaScript теперь появилась поддержка BigInt, optional chaining ?. и операторов логического присваивания ?=, &&=, ||=. А ещё немного ускорили работу с IndexedDB, циклами for-of, промисами и операциями delete.

[EN] Вышел TypeScript 4.1
Главная фича — это возможность использовать шаблонные литералы при описании типов: например, можно собрать строку из нескольких других типов и ограничить ею доступные аргументы для функции.
На базе этого нововведения стало возможным переопределять ключи mapped типов. Например, когда вы точно знаете, что все методы должны начинаться с get.

Но если вам и этого мало — теперь прямо в тайпингах можно совершать операции со строками: Uppercase, Lowercase, Capitalize и Uncapitalize. В оригинальном пулреквесте фичи уже есть запрос на преобразование из camelCase в snake_case и обратно.

У меня одного ощущение, что мы в какой-то момент свернули в слишком сильную типизацию, которая превратилась в специальное программирование? Открыть/Комментировать

2020-11-30 10:02:06 Фронтенд дайджест #135
Лучшее за неделю
Подкаст

[EN] Вышла новая, 11 версия Angular.
В ней оказалось достаточно много изменений:
- Добавили автоматическое скачивание и инлайнинг шрифтов для улучшения FCP метрики;
- Улучшили вывод информации о сборке;
- Закончили Test Harnesses, созданный специально для тестирования компонентов Angular Material;
- Обновили Language Service, который делает возможным подсветку и автокомплит в Angular-шаблонах. Новая версия основана на рантайме Ivy и корректно подсвечивает generic-типы;
- Hot Module Replacement (HMR) теперь можно активировать без сложных конфигов, простым параметром при запуске дев сервера: ng serve --hmr
- Благодаря ускорению загрузки зависимостей в компиляторе ngcc и обновлению TypeScript до версии 4.0, вдвое ускорили время билда;
- Добавили экспериментальную поддержку Webpack 5;
- Задепрекейтили TSLint и Codelyzer. Воспользуйтесь специально подготовленными гайдами и скриптами для миграции;
- Исключили IE9, IE10 и IE mobile из списка поддерживаемых браузеров.

Хочу сразу извиниться: Angular — не мой родной фреймворк, поэтому, если где-то допустил ошибку — напишите в комменты и я всё поправлю.

Кто такой программист? Что он должен знать? Нужны ли фронтендеру алгоритмы и структуры данных или знания Реакта уже достаточно?
На эти вопросы, в 190 выпуске подкаста Подлодка, отвечает СЕО Хекслета.

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

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

И сейчас, когда вы уже поставили на себе крест, хочу предположить: скорее всего Кирилл ощутил на себе когнитивное искажение Склонность к подтверждению своей точки зрения, когда человек акцентирует внимание только на тех событиях, которые подтверждают текущую точку зрения, что ещё сильнее укрепляет её.

Если бы все эти знания были реально необходимы — на собеседованиях мы бы решали уравнения.

[EN] Вышел Firefox 83. Что же улучшили?
Благодаря новому оптимизирующему JIT-компилятору Warp в движке SpiderMonkey, на 15% ускорили загрузку страниц и на 8% уменьшили потребление памяти.

В Firefox завезли режим HTTPS-Only, в котором все устанавливаемые соединения по умолчанию будут использовать только HTTPS.
Если установить защищённое соединение не удалось — Firefox покажет пугающую страницу с рекомендацией не посещать такой небезопасный сайт.

Ну и по-мелочи:
- Добавили pinch-to-zoom для тачскринов на Windows-устройствах и тачпадов на MacOS.
- В Инспекторе появился бейдж scroll у элементов с прокруткой и overflow у элементов, приводящих к появлению полос прокрутки.

История о том, как незнание Трудового Кодекса и легкомысленное отношение к условиям, прописанным в договоре, могли привести к увольнению по статье.

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

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

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

Плохо ли поступил работодатель? Однозначно плохо.
Но никакие юристы не помогут, если не знаешь свои права и соглашаешься на их ущемление. Юридическая грамотность — это такая же необходимость, как и базовые знания об устройстве компьютера.
Конфликты, по Закону Мёрфи, рано или поздно произойдут на любом месте работы. Не работайте на доверии и внимательно читайте то, что подписываете! Открыть/Комментировать