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

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

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

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

Для преобразования голоса в код, он использует утилиту Talon Voice, которая содержит набор команд для ввода и навигации по коду.
Этот набор можно расширить, с помощью модулей на python. Автор даже создал свой набор команд для React.

С помощью инфракрасного трекера взгляда tobii 5, он управляет положением курсора, щёлкая языком для клика.

Такой способ ввода на 50% менее эффективен, но позволяет ему занимается любимым делом — вести блог и разрабатывать курс по продвинутой вёрстке для JavaScript-разработчиков.

Что может пойти не так, если вам посчастливилось устроиться в стартап?

Даже если стартап не прогорит в первые пару лет, пользы от работы в нем может оказаться не так много, как это преподносят рекрутёры и CTO.

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

Прибавьте к этому:
- Несоблюдение ТК;
- Уловки по растягиванию рабочего времени, вроде бесплатной вечерней пиццы и оплаты такси, если задержался до полуночи;
- Осуждение отгулов, больничных и отпусков: «Ну давай сначала бету зарелизим»;
- Ну и конечно, быстрое выгорание и такое же быстрое увольнение.

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

Олег Громов — фронтенд-инженер из лондонского офиса Facebook — поделился своим опытом подготовки и прохождения собеседований.

В целом, структура и рекомендации те же, что в недавнем посте на канале @winterview:
- Тренируйте четкий рассказ о себе, самых классных проектах и задачах;
- Уделяйте внимание командной работе и проявленным навыкам взаимодействия;
- Решайте задачи Middle+ уровня, проговаривая размышления вслух;
- Изучите, как проходить секцию system design interview и участвуйте в тестовых собеседованиях.

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

Не успела технология Server Push, которая входила в спецификацию протокола HTTP/2, найти широкое применение, как разработчики Хрома заявили о намерении выпилить ее поддержку из своего браузера. Уже даже появились шутки, что Google хочет выпилить HTTP.

По статистике от Google, этой технологией пользуются крайне редко и с прошлого года ситуация не улучшилась. Вместе с тем, поддержка Server Push значительно усложняет код браузера.

В качестве альтернативы, разработчики предлагают использовать атрибут , который вместе с экспериментальным HТTP статусом “103 Early Hints” может показать лучшую производительность.

[EN] Когда вы используете по-настоящему нативное приложение — пишут ребята из Sketch — вы получаете кучу возможностей, которые даёт вам операционная система: окна, файловая структура, бэкапы в Time Machine, кастомные горячие клавиши.

Действительно, Sketch может похвастаться консистентностью пользовательского опыта. Иногда даже складывается впечатление, что Sketch разработали в самом Apple — так хорошо он интегрирован в MacOS.

Автор статьи не устаёт восхищаться, как здорово, когда под рукой оказывается быстрый, знакомый инструмент; как замечательно, когда твои макеты не зависят от наличия интернета.
Чувствуете, куда клонят?

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

Этот пост сигнализирует: Sketch совершенно не собирается меняться, не считая свою модель устаревшей.
А помните, был такой Sketch? Открыть/Комментировать

2020-11-16 10:01:49 Фронтенд дайджест #133
Лучшее за неделю
Подкаст

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

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

Зачем кому-то писать игру на HTML и CSS?
Чтобы показать, что так тоже можно.

Ситуация: руководитель или коллега позвали вас побеседовать, вы проболтали час, но ничего не решили?

Добавьте щепотку конструктива таким встречам:
1. Поставьте чёткую цель: чего вы хотите добиться этой беседой;
2. Заранее определите тему и придерживайтесь её до конца разговора;
3. Соберите факты по теме заранее;
4. Не делайте каких-либо установок или выводов перед беседой. Если всё уже решено — разговор не нужен;
5. Будьте искренними — это поможет сохранить хорошие отношения, даже если цель беседы — увольнение;
6. Во процессе не отвлекайтесь на чтение почты и прочие уведомления;
7. В заключении беседы подведите итог и убедитесь, что вопрос исчерпан.

[EN] Кнопка — один из самых базовых примитивов, используемых в веб-приложениях.
Кто бы мог подумать, сколько нюансов необходимо учесть, при создании такого компонента:
- 6 состояний, которые должны явно отличаться друг от друга;
- 9 стилей кнопок: просто кнопка, кнопка с одной только иконкой, с иконкой и текстом, плавающая кнопка, отображение в группе кнопок и другие варианты;
- Размер самой кнопки и область для клика небольших кнопок;
- Доступность для скринридеров и правильный контраст.

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

[EN] Бесячие сториз теперь и в VSCode. Несите новый редактор!
По словам автора, работает это так: плагин записывает до 30 секунд видео, где вы показываете свой код в редакторе. Затем это всё преобразуется в GIF и отправляется в облако MS Azure.

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

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

[EN] Марк Эриксон — мэйнтейнер Redux — напоминает: если вы не знаете, зачем вам Redux, то, возможно, он вам и не нужен.
Зачастую Redux выбирают, чтобы просто передавать свойства глубоко вложенным компонентам или чтобы закэшировать результаты сетевых запросов.
Для решения первой задачи есть стабильное Context API, которое вместе с useReduсer решает большинство задач управления состоянием приложения.
А для кэширования сетевых запросов, можно взять хук swr,
React Query или Apollo Client, если вдруг у вас GraphQL.
Выбирайте утилиты не по звёздочкам на гитхабе, а под решение конкретных задач.

[EN] Крис Койер, со-основатель CodePen и создатель CSS-Tricks, рефлексирует на тему обязанностей современного фронтендера. Исторически так сложилось — люблю эту фразу — что всё, что касается работы с браузером и JavaScript, выполняют фронтенд-разработчики.
Что должен знать современный фронтендер, кроме умения конвертировать дизайн-макеты в код?

Как минимум, адаптивность, кроссбраузерность, доступность, семантику, производительность и переиспользуемость компонентов.

Каждый пункт — это целая наука, по которой можно получить степень бакалавра. И это мы еще не дошли до JavaScript c его фреймворками и библиотеками.

А что насчет целых стэков вроде LAMP, MEAN, STAR, Jamstack, Serverless? Это все еще фронтенд технологии?
Может, пора уже вводить более узкие термины, характеризующие конкретную специализацию?

Предлагаю подумать над Webpack-архитектором. Что скажете? Открыть/Комментировать

2020-11-09 10:01:54 Фронтенд дайджест #132
Лучшее за неделю
Подкаст

[EN] 23 октября по требованию RIAA (Recording Industry Association of America) заблокирован GitHub-репозиторий самого популярного скрипта для скачивания видео с YouTube.
Поводом для претензии послужил пример использования скрипта на популярных клипах Icona Pop, Justin Timberlake и Taylor Swift.
Выходит, теперь уже достаточно простой ссылки на видео, чтобы вас могли засудить.

Небольшой тест. Отмечайте, если нашли у себя:
- Способность проявить внимание к другому человеку, умение интуитивно распознать, что он сейчас чувствует и выразить свое сочувствие;
- Умение почувствовать, является ли обвинение справедливым, и способность сообщить о своей невиновности;
- Умение убедительно дать отказ, в ситуации, когда тебя не устраивает, что тебе предлагают.

Нет, это не навыки супер-человека, а всего лишь выдержка из 45 социальных компетенций, которыми должны обладать психически здоровые дети 5–7 лет.

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

[EN] Когда, в марте 2020, GitHub покупал npm, исполнительный директор GitHub заявил, что одним из важнейших направлений развития npm, он видит работу с JavaScript-сообществом.
И вот, 30 октября, npm обзавёлся двумя публичными репозиториями:

Один — с роудмапом, где можно посмотреть все фичи и планы их релизов.

Другой — для сбора идей и фидбэка от пользователей. Любой желающий сможет предложить улучшение, а сотрудники npm постараются объяснить, почему они этого делать не будут.
Ну а когда они не смогут найти причину для отказа — перенесут предложение в первый репозиторий и запланируют релиз.

[EN] Совокупный сдвиг макета (CLS) — это одна из метрик Web Vitals, показывающая, насколько сдвигается контент страницы после отображения пользователю.
Скоро эта метрика будет использоваться при ранжировании сайтов в поисковой выдаче. Она пока не входит в стандарт W3C и поддерживается только браузерами использующими движок Blink: Chrome, Opera, Edge.
Автор статьи подробно разбирает, из чего складывается эта метрика, как её можно измерить, а также какими сервисами, инструментами и библиотеками для этого пользоваться.

[EN] Все еще вставляете JS-библиотеки со сторонних CDN? Тогда Terence Eden идёт к вам.
Давным давно загрузка скриптов с таких CDN была чем-то естественным, так как экономила время загрузки за счёт кэширования и оптимизированной отдачи статики.

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

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

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

Атрибут экспериментально поддерживается всеми Blink-браузерами, совсем скоро появится в Firefox, а для всех остальных можно использовать полифил, с которым, правда, не всё так гладко.

[EN] В ноябре 2019 года, мейнтейнер популярной библиотеки-сборника полифилов, получил полтора года тюрьмы за наезд на пешехода со смертельным исходом.
И вроде казалось, что про core-js можно забыть, как вдруг, спустя год, в репозитории появился пост: «Я вернулся. Ждите новостей».
Ну теперь-то точно будем ждать. Открыть/Комментировать

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

[EN] Вышел релиз Node.js 15.
Теперь и в ноде можно отменять промисы через AbortController. Прямо как во всех современных браузерах с 2017 года.

В новую ноду завезли поддержку протокола QUIC, на котором работает HTTP/3, Promise.any(), String.prototype.replaceAll() и логические операторы присваивания:  &&=, ||= и ??=.

Из критически важного, изменили поведение при Unhandled Promise Rejection, которое вместо предупреждения теперь будет ронять приложение с соответствующей ошибкой.
Чтобы этого избежать, можно попробовать установить глобальный обработчик ошибок или же запускать приложение с флагом, меняющим режим обратно на предупреждение.
Удачного обновления!

[EN] До новой, пятой версии, Webpack автоматически добавлял в бандл полифилы, поэтому все уже привыкли, что любая библиотека будет работать как в ноде так и в браузере.
С выходом Webpack 5, добавление полифилов ложится на плечи мэйнтейнеров библиотек и разработчиков, использующих эти библиотеки. Если первые не захотят раздувать код полифилами, то вторым придется искать браузер-совместимую замену либо писать их вручную.
К счастью, хотя бы можно посмотреть как полифилы были реализованы ранее в репозитории Webpack.

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

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

Помните, что у кода всего две задачи:
1. Код должен быть читабельным, понятным, единообразным и без избыточных деталей;
2. Он должен справляться со своей задачей, не ухудшая окружающий его код. Следите за масштабируемостью решения, безопасностью, обработками ошибок и тестами, про которые опять забыли.

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

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

[EN] Как ускорить веб-приложение, используя PRPL-паттерн?
Давайте по буквам: Push, Render, Pre-cache и Lazy-load — это набор принципов, которые помогают спроектировать быстрое веб-приложение или PWA и ничего не забыть.

Основные идеи просты:
- Все ресурсы, необходимые для рендеринга первой страницы, должны отдаваться как можно раньше.
- А когда приложение уже загрузилось — кэшируйте страницы, скрипты, стили, картинки, которые скорее всего запросит пользователь.

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

[EN] Семь мифов о доступности сайтов.
Вот парочка из них:
Большинство пользователей не имеют проблем с доступностью.
Проблема в том, что разработчики экстраполируют свою «нормальность» на большую часть аудитории сайта.

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

Остальные 5 мифов о доступности сайтов читайте в полной статье или слушайте в подкасте.

[EN] Миллиард людей по всему миру страдают от нарушения четкости зрения и 300 миллионов — от дальтонизма.

В Chrome DevTools недавно добавили эмуляцию особенностей зрения, чтобы разработчикам было проще тестировать свои сайты для людей с подобными нарущениями зрения.
Включить эмуляцию можно в menu → More tools → Rendering → Emulate vision deficiencies
Для тестирования доступно 5 режимов: Blurred vision, Protanopia, Deuteranopia, Tritanopia, Achromatopsia.
Кстати, аналогичное API есть и в Puppeteer. Открыть/Комментировать

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

[EN] Вышел Webpack 5.
Ожидаемо, улучшили всё, что смогли улучшить: скорость сборки, tree shaking, размер бандла, убрали лишние полифилы, добавили сборку микрофронтендов.
На ней остановимся чуть подробнее: идея Module Federation в том, чтобы писать разные части приложения, как отдельные части, которые могут быть легко замененены при необходимости: например, выделить приветственный лендинг в отдельный проект, в котором можно подключать любые библиотеки и наводить любую красоту, без ущерба для размера бандла основного приложения.
Подробнее о Module Federation.

[EN] Immutable.JS — популярная библиотека по работе с иммутабельными структурами данных с 3 миллионами скачиваний в неделю. Правда четвёртая версия библиотеки находится в стадии релиз кандидата уже 2 года. Последний коммит был в январе 2020, и на гитхабе куча открытых ишью и пулл-реквестов. Автор библиотеки — Lee Byron — не против передать доступ на запись в репозиторий, но обсуждение затянулось так как он очень редко выходит на связь.

Что делать?
Можно продолжать пользоваться. У библиотеки нет выявленных уязвимостей. А если и обнаружатся, то всегда можно использовать форк сообщества или создать свой.

А можно найти альтернативу в зависимости от темы:
Для защиты данных от случайных изменений:
Используйте встроенные в язык: примитивы, Object.freeze() / Object.seal(), приватные поля и замыкания.

Иммутабельные структуры быстрее обрабатывать
Это справедливо только для узкого набора кейсов: операции вроде concat, push, append будут действительно быстрее, однако тот же map никак не сможет быть быстрее по иммутабельной структуре.

Обеспечить краткость, чистоту функций и отсутствие сайд-эффектов
Это можно сделать без сложных структур данных:
- Используя встроенные методы массивов: просто не меняйте входящие данные;
- Используя внешние функции для обработки массивов из библиотек Ramda или Sanctuary;
- Стримо-подобные обработчики, которые не создают промежуточных массивов, а прогоняют каждый элемент входного массива через конвейер заданных функций, как это делает тот же Lodash;
- Попробовать Immer — библиотеку, которая решает задачу иммутабельности другим образом, который хорошо подходит, например, для React + Redux стэка.

[EN] Вместе с Node.js 15.0.0 на следующей неделе выходит новая версия npm v7, которая содержит долгожданные фичи: 
- Workspaces, как в Lerna;
- Автоматическую установка peer-dependencies;
- Новый формат package-lock файла и поддержку yarn.lock, что обеспечивает детерминированно воспроизводимые сборки.

Новая версия была значительно отрефакторена внутри и содержит следующие обратно несовместимые изменения:
- peerDependencies устанавливаются автоматически;
- Пакеты самого npm используют package.exports поэтому импорт внутренних npm-модулей через require() теперь невозможен;
- npx полностью переписан и будет теперь использовать внутри новую команду npm exec, а как отдельная команда будет теперь deprecated;
- Изменен вывод команды npm audit (вместе с json форматом)
Подробнее обо всех изменениях.

Чтобы случайно ничего не сломать, новая версия npm пока не будет помечена как latest, но ее можно установить вместе с обновлением Node.js до 15 версии, либо явно указав версию npm.

[EN] В начале октября Gitlab, без предупреждения, закрыл доступ к своим сервисам для иранских айпи адресов.
А через несколько дней и вовсе заблокировал аккаунты иранских пользователей.
Гитлаб пояснил, что в связи переездом к новому провайдеру, они обязаны выполнять предписания правительства США о недопущении некоторых стран к их платформе.
На просьбы хотя бы временно открыть доступ, чтобы разработчики могли забрать свои приватные проекты, поддержка ответила, что это не в их силах; пользователи могут расчитывать только на локальные копии.
Напишите в чат, какую платформу для хранения кода вы выберете, когда GitHub, GitLab и Bitbucket забанят вашу страну. Открыть/Комментировать

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

Похоже, что Firefox скоро потеряет остатки аудитории и станет нишевым браузером.
10 лет назад Firefox занимал 30% рынка браузеров, а сегодня только 4%. Если посмотреть на динамику, доля Firefox падает почти столь же стремительно, как IE+Edge.

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

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

А что дальше? А дальше ждите линейного падения доли Firefox, новой серии увольнений и всплывающего окна: «Данный браузер не поддерживается».
Если только вдруг не случится самое настоящее чудо.

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

Однако один стопроцентный способ всё же есть: нужно создать окно или iframe через JS. Дело в том, что даже если закрыть окна и удалить iframe, в JavaScript останется ссылка на это окно со всем его содержимым. А раз есть ссылка — значит сборщик мусора не удалит содержимое.

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

Как написать свой Virtual DOM.
Все знают, что в Реакте и Vue используется Virtual DOM. Но что это такое на самом деле? Как именно он работает? Почему элементы не перерисовываются полностью, при каждом изменении стейта?
Это руководство ответит на все вопросы.
Если вдруг вам захочется больше — почитайте ещё одно, на этот раз интерактивное руководство Build your own React.

[EN] Некоторые браузеры могут замедлять requestAnimationFrame.
Например, iOS в режиме энергосбережения принудительно снижает количество кадров в секунду до 30.

Safari замедляет requestAnimationFrame для iframe со сторонних доменов. Чаще всего такие iframe встречаются в баннерах, поэтому снижение FPS помогает экономить батарейку устройства без ощутимого влияния на пользовательский опыт.

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

requestAnimationFrame делает ровно то, что и должен: просто запрашивает следущий кадр. А вот отдавать кадр или нет — каждый браузер решает по-своему.

Объектно-ориентированный JavaScript простыми словами.
Если вы пропустили ES3 и ES5, а пришли в JavaScript, когда в нём уже появились классы — у вас может быть очень много вопросов к реализации наследования через прототипы.
В статье описана разница между вариантами создания экземпляров и наследования, в том числе и без использования прототипов. Открыть/Комментировать

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

Очарованные циферками.
Data-Driven подход отлично зарекомендовал себя, как наиболее эффективный способ приоритезации задач: провели эксперимент → собрали много данных → проанализировали → приняли решение. Да, синяя кнопка действительно приносит больше денег, чем зелёная.

Примечательно, что сайты, усиленно использующие Data-Driven подход к разработке — например, Booking.com — действительно приносят больше денег, только вот пользоваться ими совсем не хочется.

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

[EN] Moment.js умер. Теперь очередь за date-fns.
Даже мои собаки уже знают, что вместо тяжёлого Moment.js нужно применять date-fns, неиспользуемые функции которого отлично вытряхиваются бандлером.
А что если вытряхивать нечего?

Например, одни только функции парсинга и форматирования дат даже в сжатом виде отъедают треть от всего модуля в 18 сжатых килобайт. Достаточно единожды использовать функцию, которая внутри парсит или форматирует дату и вот в бандле поселились несколько невытряхиваемых килобайт. А если потребуется использовать несколько локалей — за каждую придётся заплатить по килобайту.

В то же время, монолитный Luxon — от создателей Moment.js — со всеми функциями, со всеми локалями занимает лишь 20 сжатых килобайт.

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

Математические функции в CSS.
Вы точно слышали о функции calc в CSS: она позволяет складывать разные единицы, динамически изменяя нужное значение: размер элемента или позиционирование могут зависеть от высоты браузерного окна.

Однако, вместе с calc часто хочется иметь в распоряжении 2 другие функции: min и max, чтобы не делать размер элемента слишком уж мелким или кричаще-огромным.

Почему для этого не подходят какие-нибудь min-width и max-width — читайте в полной статье. Кстати, функции min и max уже поддерживаются во всех браузерах чуть свежее IE11.

Несбывшиеся надежды веб-компонентов.
Лиа Веру — бывший член W3C — раздосадована отсутствием приемлемых веб-компонентов, которое бы создало сообщество.

С тех пор, как каждый разработчик может создавать свои компоненты, подобно

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

[EN] Вышел PostCSS 8.0 — инструмент для модификации вашего CSS-кода. Например, Autoprefixer, расставляющий нужные префиксы для указанных браузеров, написан как раз с использованием PostCSS.
Что же изменилось?
- Отказ от поддержки работы в Node.js 6, 8, 11 и 13.
- NPM-пакет теперь поставляется только в ES6+ синтаксисе и без Babel может не запуститься в браузере. Но кто ж сейчас фронт на чистом ES5 пишет?!
- Из-за редкого использования, удалили postcss.vendor API
- У плагинов появился доступ к общему CSS-дереву для каждого файла. Благодаря этому, обработка ускорилась на 20%.
- И, самое главное, в новом API root.walk* функции помечены устаревшими. Вместо них — простые и понятные Declaration, Rule, AtRule и Comment.
Вместе с новой версией вышло и руководство по миграции со старых версий.
Нужно ли бросаться и переписывать все плагины под PostCSS 8? Нет, не нужно. Но новые плагины лучше сразу писать под новую версию.

[EN] Сталкивались ли с проблемой, когда нужно отправить много запросов разом, например при инициализации приложения?
Кажется, что это идеальный кандидат на использование Promise.all, да?

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

Автор заметки предлагает использовать Promise-пулы, т.е. ограничивать количество одновременных запросов. Чтобы не писать такое самому, автор рекомендует библиотеку PromisePool, а я рекомендую PQueue — у неё звёздочек больше.

Вы думали, что цензура бывает только на уровне государства? А вот нет! Значительно более распространённая цензура — корпоративная. Это нельзя говорить, это порочит нашу репутацию, а этот пост лучше вообще удалить...если, конечно, хочешь остаться здесь работать.

Автор поста два года брал интервью у разработчиков и публиковал их на Хабре. Часто, когда текст разговора был написан и статья уже готовилась к публикации, приходила просьба от пиар-службы компании на дополнительную вычитку. Разумеется, вовсе не для того, чтобы проверить орфографию или сделать текст более живым.

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

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

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

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

[EN] Почти 10 лет потребовалось создателям библиотеки для работы с датами Moment.js, чтобы принять волевое решение и отказаться от дальнейшей разработки. Оказалось, проще написать Moment с нуля, чем исправить ключевые проблемы с мутабельностью и Tree Shaking, не отломав попутно обратную совместимость.

Разработчики библиотеки сконцентрируются на стабилизации текущего API и полностью откажутся от разработки новых фич.

Вы можете смело продолжать использовать Moment.js в своих проектах, но когда будете начинать новый — присмотритесь к рекомендуемым альтернативам: Luxon, Day.js, date-fns или js-Joda.
Присмотритесь внимательнее: может, одной библиотеки, как в случае с Moment.js, будет недостаточно.

[EN] Неожиданно вышел релиз Vue.js 3.0 с поддержкой TypeScript, улучшенной производительностью и Composition API. Последнее особенно интересно, поскольку позволяет вообще не привязываться к Vue.js и описывать логику приложения на чистом JavaScript.

По сравнению, со второй версией, Vue.js 3.0 потребляет на 54% меньше памяти, на 41% меньше весит, на 55% быстрее, при начальной загрузке и на 133% — при обновлениях.

Разумеется, всё, что сообщество разработало для второй версии, непригодно для использования в третьей. Однако, автор библиотеки обещает уже в ближайшее время разработать инструменты для миграции. Судя по формулировке (Migration build), возможно даже автоматизированные.

Это большое событие, которое наконец-то сможет пошатнуть гегемонию Реакта.
Осталось только запилить поддержку IE 11, мигрировать популярные компоненты, библиотеки и фреймворки на базе Vue, ну и, конечно, баги пофиксить.

[EN] Сразу после презентации Apple, вышел iOS 14 и iPadOS 14, а вместе с ними и новый Safari.
Что нового в них для веб-разработчика?
Главное нововведение — поддержка сторонних браузеров, которые будут открываться по умолчанию, при нажатии на ссылку из других приложений. Раньше всегда открывался Safari.
Интересно, что сторонние браузеры даже в новых мобильных ОС могут использовать только движок Safari, что делает их лишь интерфейсными оболочками над единственным возможным браузером.

Это лишь первые 5% статьи, где по пунктам изложены все самые важные изменения в новых Safari.

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

На самом же деле, это когнитивное искажение «Ошибка выжившего». Люди, которые не нашли работу в IT, не становятся разработчиками.
Существует множество других когнитивных искажений, о которых просто неплохо бы знать. Ребята провели невероятную работу и составили список из 105 искажений, с примерами и уклоном в разработку интерфейсов.

К сожалению, доступно только с десктопа.

[EN] Твиттер, VMware и другие IT-компании Кремниевой долины сокращают зарплаты удалённым сотрудникам, покинувшим Долину.
Например, при переезде в Денвер, зарплата сотрудников снижалась на 18%. Звучит, конечно, ужасно, но общие расходы в Денвере, включая аренду и стоимость услуг, примерно на 35% ниже, чем в Кремниевой долине.
Интересно, насколько бы уменьшилась зарплата разработчиков из Долины, если бы они переехали в Москву? Открыть/Комментировать

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

[EN] В Хроме 85 появилась поддержка AVIF — нового формата изображений.
В нём всё классно:
- Меньший размер при том же качестве,
- Прогрессивный рендеринг, который размывает, неважные детали,
- Появится в Safari не через 10 лет, как WebP, а в самое ближайшее время.

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

Фронтенд — это когда ты не успел ещё переехать на WebP, а уже пора переезжать на AVIF.

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

SMM Сбербанка подтвердили: действительно, логин и пароль не чувствительны к регистру, чтобы пользователям было удобнее.
«Не переживайте, это безопасно.» — закончил SMM'щик.

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

Этот твит поднял интересную дискуссию: а так ли важна устойчивость паролей к перебору в вакууме?
Важно понимать, что современные сервисы и в особенности банки, используют несколько степеней защиты: пароль, ограничения на подбор пароля, 2FA, подтверждение транзакций, антифрод.
Сервисы, вроде Facebook, пошли ещё дальше — они допускают небольшие ошибки при вводе пароля, если остальные проверки прошли успешно.

Может нам уже не нужны пароли?

[EN] Flareact — это новый React-фреймворк, впитавший в себя лучшие практики из Next.js. Ключевой особенностью Flareact является запуск Server Side Rendering на Cloudflare Workers — что-то типа AWS Lambda или Google Cloud Functions.

Давайте я повторю ещё раз: вам не нужен бэкенд для SSR: Flareact будет деплоить, а Cloudflare сам будет генерировать, кэшировать и оптимизировать ваш серверный рендеринг.

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

Помните недавний пост про хранимые процедуры в базе данных LinguaLeo?
Если вы, как и я, так и не поняли, почему использование хранимых процедур спровоцировало такое волнение — прочитайте этот пост о вреде хранимых процедур.

Что же с ними не так?
- Хранимые процедуры не версионируются, а значит нельзя откатиться на предыдущее состояние: придётся каждый раз писать миграции вручную.
- Отладка кода в БД — даже близко не то же самое, что отладка кода в PHP. Какие там точки остановки, я вас умоляю.
- А что насчёт логирования, сбора метрик, тестирования и рефакторинга? Везде прочерк.

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

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

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

Вы считаете, что получили работу только потому, что на собеседовании вас оценили лучше, чем есть на самом деле? А может, вы не умеете реагировать на комплименты, занижая достижения?
Добро пожаловать в мир самозванцев!

Синдром самозванца — это не диагноз, но состояние, которое мешает жить и испытывать счастье. Ещё и снижает вашу зарплату.

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