На всю голову JS #4

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

Сегодня мы немного поговорим об исследованиях, цифровом минимализме, курсе от MDN, новых изменениях в стандартах EcmaScript и многом другом.

1. Исследования Источник

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

3. Цифровой минимализм для разработчика. Источник

4. Курс от MDN. Источник
Mozilla Developer Network опубликовали свой курс для фронтенд-разработчика, который начинается с самых-самых азов: HTML, CSS, семантики и так далее и заканчивается тестированием, фреймворками и даже немного бэкенд-разработкой. Мне вообще нравится всё, что делает компания Mozilla, и действительно хочется верить, что это не из корыстных побуждений, потому что их вклад в сообщество действительно значимый, я думаю что вы пользуетесь MDN по несколько раз в день, как и я. Они постоянно дополняют этот портал и там можно найти сведения о том, как работают те или иные вещи в HTML, CSS, JS и посмотреть поддержку этих фич в браузере. В общем, всем, кто спрашивал у меня — с чего начать и просил уроки для совсем новичков — оветую идти на MDN и читать этот курс. Ссылка на все источники будет в описании и у меня в телеграм-канале. Предвосхищая вопросы: да, этот курс можно читать на русском, хотя и перевод местами корявый, но он есть.

5. ES2020 — опять нововведения. Источник
BigInt (нужно добавить к числу n, чтобы оно определилось как BigInt), string.MatchAll (метод для работы с регулярными выражениями, возвращает итератор, дающий все подходящие группы в строке), новый export (через export {module}), оператор опициональной последовательности (позволяет получить свойство объекта, если оно существует, в противном случае — озвращает undefined. Использовать можно добавив знак вопроса к свойству, перед точкой), нулевой оператор (позволяет отличить нулевое значение от значения ложного, то есть null, undefined от False), async/await для динамического импорта, promiseAllSettled (позволяет дождаться исполнения всех промисов), GlobalThis (для унификации window из браузера, global из node, self из serviceWorker).

6. target="_blank" — это небезопасно? Источник
Появилась статья от Манжуллы Дуб (надеюсь, правильно произнёс), в которой она рассматривает реальное поведение страницы при открытии ссылке в новой вкладке с использованием атрибута target blank. Казалось бы, что такого страшного может произойти? Это же всего лишь открытие ссылки в новой вкладке. Но без атрибута noopener в новой открытой вкладке появляется возможность делать всякие манипуляции с родительской вкладкой: в том числе, можно просто подменить адрес сайта на любой фишинговый и заставить пользователя ввести реквизиты банковской карты, например. Это только одна из возможных атак. Чтобы этого избежать можно просто использовать атрибут noopener, поэтому не стоит забывать об этом.

7. Что там у сафари? Источник
- Ускорение работы с браузером: переключения между вкладками, открытие уже просмотренных страниц, мгновенное закрытие упавших вкладок.
- Ускорение работы JavaScript: промисы стали производительнее в 2 раза, а операции delete — в 12 раз.
- Появился WebExtensions API, который позволит портировать расширения, предназначенные для Хрома или Firefox.
- Благодаря Resize Observer можно следить за изменениями размеров любых DOM-элементов, а не только экрана.
- Поддержка Face ID и Touch ID для авторизации в веб-приложениях.
- Встроенный переводчик страниц на самые популярные языки.
- Поддержка формата WebP.
Главное, как мне кажется — это поддержка формата webp, потому что теперь можно будет забыть о фоллбэках на JPEG, для браузера safari и использовать везде наш любимый Webp.

8. webp — это маркетинг? Источник
Google говорит, что сжатия у webp сильнее, чем jpeg на 25-34% при том же качестве.
На самом деле, реальный прирост сжатия — всего 10%, и то для картинок менее 1500 пискелей. На больших картинках, уверенно, MozJPEG вырывается вперёд.
В статье ничего не сказано про скорость такого сжатия и расходы по памяти, но MozJPEG на 90% медленнее обычного libjpeg. Из чего можно сделать вывод, что webp пока побыстрее будет, но не так эффективен. Выбор делать вам.

9. Тильда — это зло? Источник
Таким вопрос задаётся автор статьи на хабре от компании ruvds. Сильная боль автора заключается в том, что когда она пришла в большой проект на тильде, главная продающая страница сайта весила 78 мегабайт. Представляете? Никакой нормальный браузер не справится с тем, чтобы загрузить это быстро. И основная проблема — разумеется — картинки в неправильных разрешениях, использование неэффективных форматов. У меня кстати была подобная проблема на одном из заказов на фрилансе. Сайт на тильде получал рекордно низкие 10 баллов в Lighthouse, из-за огромного количества инлайнового css, картинок которые использовались вместо надписей в 50% случаев. Неэффективное сжатие и всё остальное, разумеется, тоже присутствовали, но весило это всё, конечно, не 78 мегабайт. Вообще, тильда под каждый новый блок, даже если он очень похож на предыдущий лепит новый класс и делает для него новые стили, из-за чего css раздувается до огромных размеров в 15 тысяч строк кода для обычного лендинга и как это оптимизировать руками — совершенно неясно, отчего мне тильда сразу и не понравилась. Хотя, это просто прекрасный визуальный редактор, но к сожалению, для чего-то более менее серьёзного он не подходит. Автор примерно такой же опыт и описывает и в конце статьи напоминает, что лучше разделять обязанности, не пытаясь сэкономить на совмещении дизайнера и фронтендера в тильде, потому что она совсем не соответствует стандартам современной веб-разработки.

10. Некоторые мобильные сайты — это тихий ужас
Хотелось бы поговорить ещё о двух вещах касательно мобильных сайтов. Первое — в последнее время всё чаще замечаю, что многие мобильные сайты — о тихий ужас, ими просто невозможно пользоваться в мобильной версии. Это преимущественно относится к сайтам всяких интернет-магазинов. Почему люди до сих пор не научились всё это дело нормально оптимизировать. Мне как пользователю — невероятно сложно с этим нормально взаимодействовать. Получается только через боль. Приходится открывать половину сайтов с компьютера, несмотря на то, что мобильная версия у них есть. Жалко, что это происходит так. Ну вас уже избавили от IE, ну сделайте вы нормальные мобильные версии сайтов. А если не можете сделать нормально — не делайте воообще.

11. Меню быстрых действий для мобильных PWA. Источник
И вот вторая тема, которая тоже касается моибльных сайтов — появилась возможность сделать меню быстрых действия для мобильных PWA (и не только мобильных), она сейчас активно тестируется и уже доступна на некоторых Android-смартфонов, но разумеется пока за флагом. Задавать эти действия очень просто — через стандартный манифест нужно создать массив shortcut'ов и указать, что эти shortcut'ы должны делать. Меня очень радуют все позитивные новости про PWA, потому что я очень жду того момента, когда они смогут составить нормальную конкуренцию нативным приложениям. Я достаточно далёк от разработки под мобильные платформы, но эта тенденция с развитием PWA позволит мне быть к этому причастным. Думаю, совсем скоро PWA уже можно будет адекватно использовать и я постараюсь доделать свой старый проектик, если хотите, чтобы это появилось у меня на канале, то напишите об этом в комментариях. Разберём тогда полное создание PWA и его адаптацию под использование на мобильных устройствах и компьютерах.

12. Релиз Angular 10. Источник
Вышел мажорный релиз фреймворка Angular — 10.0.0, что же в нём нового? Много чего, давайте рассмотрим это поближе: новый компонент для выбора диапазон дат в библиотеке комонент Angular-material. Мне кажется, этого много кому не хватало, а теперь это есть в Angular прямо из коробки и он всё больше и больше привлекает меня. Всё больше и больше хочется его попробовать. Так же ангуляр теперь будет сообщать разработчику при использовании CommonJS модулей, вместо EcmaSript модулей, поскольку CommonJS модули раздувают бандл и могут негативно сказаться на производительности приложения. Strict-режим теперь тоже есть в ангуляре, он включает в себя:
- Включается строгий режим в TypeScript.
- Включается строгий режим при проверке типов в шаблонах.
- Стандартные ограничения размеров различных частей бандла становятся примерно на 75% строже.
- Включается использование правил линтинга, предотвращающих объявление сущностей типа any.
- Приложение настраивается так, чтобы его код был бы лишён побочных эффектов, что позволяет эффективнее применять механизм tree-shaking.

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

13. Усталось от JavaScript и React. Источник
Крис Виберт написал статью об усталости от JS и React, рассказывая о своём опыте и попытке постоянно угнаться за постоянно развивающейся экосистемой JS и React. Мне кажется, это близко к выгоранию, от которого следует лечиться просто переключением своего внимания на другие сферы, это Крис Виберт и хочет сделать: вернуться и дописать все свои черновики в блоге, позаниматься экспериментами с архитектурой в AWS, изучить Rust или Flutter. В целом, я могу его понять, мне всегда не хватает только одного какого-то хорошо проверенного инструмента и я постоянно смотрю в сторону чего-то нового, так например моё изучение Golang, которым я занимаюсь уже с месяц (с переменным успехом, ведь времени не было), доработка всех старых pet-projects, повышение уровня в написании bash-скриптов, конфигурирование nginx, да и в целом я шёл на работу фронтендером, а в итоге занимаюсь 50% времени работой по ДевОпс и бэкендом, что даёт мне просто вагон новых знаний и я очень этому рад.