DarkModeJS — сверхлегкая и кроссбраузерная библиотека JS, которая поможет вам реализовать темные и светлые темы. Она определяет местное время пользователя и соответствующим образом переключает внешний вид пользовательского интерфейса. Кроме того, она весит всего 2,39 КБ (1,05 КБ в сжатом виде) и написана на чистом JavaScript, без каких-либо плагинов и jQuery.

https://github.com/nickdeny/darkmode-js

Работа с файлами в JavaScript

https://habr.com/ru/post/511742/

Парсинг страниц в JavaScript с помощью node-fetch + cheerio / jsdom

https://qoob.cc/web-scraping/

Объектно-ориентированный JavaScript: немного практики

https://dailycoding.io/article/Y3BBwEabeeLyrr9MQ2fS

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

https://learngitbranching.js.org/

В чем разница между Event Handlers и addEventListener в JS?

https://medium.com/dailyjs/whats-the-difference-between-event-handlers-addeventlistener-in-js-963431f05c34

Погружение в псевдоэлементы ::before и ::after. Уилл Бойд объясняет принципы работы с псевдоэлементами и показывает, что можно с ними делать.

https://codersblock.com/blog/diving-into-the-before-and-after-pseudo-elements/

Как сделать и разместить статический сайт на Gatsby в Yandex.Cloud

https://habr.com/ru/post/547134/

Развёртывание Vue приложения с помощью GitLab CI/CD на Ubuntu 18.04

https://blog.logrocket.com/how-to-auto-deploy-a-vue-application-using-gitlab-ci-cd-on-ubuntu/

Начните использовать Prettier правильно

https://techrocks.ru/2021/02/19/prettier-configuration/

15 полезных однострочных выражений JavaScript

https://medium.com/devschacht/15-%D0%BF%D0%BE%D0%BB%D0%B5%D0%B7%D0%BD%D1%8B%D1%85-%D0%BE%D0%B4%D0%BD%D0%BE%D1%81%D1%82%D1%80%D0%BE%D1%87%D0%BD%D1%8B%D1%85-%D0%B2%D1%8B%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B9-javascript-f25d53eb9482

Масштабируемый Продакшн-реди Телеграм бот на Django

https://habr.com/ru/post/547488/

Генераторы SVG

https://www.smashingmagazine.com/2021/03/svg-generators/

Портреты в виде кляксы: развлекаемся с функцией CSS path()

https://www.sitepoint.com/css-path-function-squeaky-portraits/

1. Оптимизация изображений

Разница в использовании между <img> и стилизацией css через background-image
⁃ доступность (img - да)
⁃ сео( img - да)
⁃ производительность (img - да)

Оптимизации:

1.Ленивая загрузка
Как делали раньше.
Подписывались на scroll, resize, orientationchange и проверяли если ли изображение во viewport

Теперь
IntersectionObserver + атрибут img loading="lazy"


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

srcset = '1x 2x 3x'

и как фолбек src=''

Для css аналогично есть background-image: image-set(url)

Оптимизированные форматы изображений:
- webp,
- avif (плохо поддерживается)

Чтобы сделать универсально можно заюзать такую конструкцию

<picture>
 <source avif> // сначала avif
 <source srcset webp> // если не сработало, то webp
 <img loading='lazy'> // фолбек - img
</picture>

Gif лучше конвертить в mp4 и использовать video

<video>
 <source ...>
</video>

3. Оптимизация на уровне сборщиков
- imagemin-webpack-plugin
- image-webpack-loader
- flexis/srcset-loader

imgproxy для динамических изображений

С чего начать оптимизацию перфоманса? (часть 1)

1. HTML:
- минификация
- потоковая отрисовка (помогает уменьшить TTFB (time to first byte))

Статья про обработку html сервис воркерами: https://philipwalton.com/articles/smaller-html-payloads-with-service-workers/

2. CSS:
- минификация
- критический css:
заинлайнить в html
<head> <style /> </head>
потому что пока не пришел ответ со стилями, браузер не начнет отрисовывать render tree
- загрузка не блокирующая рендер (хак: использовать
<link href... media="print" onload="this.media='all'" - будет грузить стили, но т к медиа - print, не будет блокироваться рендер, а как загрузится, проставляем ему медиа - all (стили начинают применяться к рендеру))

Посмотреть размер неиспользуемого css можно в devtools -> coverage

Полезные плагины для webpack:
- html-critical-webpack-plugin
- critters-webpack-plugin

Статья про блокирующий CSS https://timkadlec.com/remembers/2020-02-13-when-css-blocks/

3. Шрифты

- предзагружаем через link rel=preload
- указываем системный fallback шрифт
- кеширование
- используем font-display (swap или fallback)

4. Картинки
Статья https://evilmartians.com/chronicles/images-done-right-web-graphics-good-to-the-last-byte-optimization-techniques

5. JS
загрузка и исполнение js может блокировать парсинг html
долгое исполнение js делает сайт не отзывчивым

- использовать async или defer аттрибуты
Теперь кстати парсинг html не блокируется при загрузке скриптов https://v8.dev/blog/v8-release-78

Уменьшаем размер
- минификация
- удаление ненужного:
dead-code elimination при помощи terser и env vars
- code splitting
devtools -> coverage посмотреть что нужно сразу после загрузки
https://webpack.js.org/guides/code-splitting/
обратить внимание на дудепликацию зависимостей

После code splitting возможно, что какой то функционал будет подгружаться динамически и где-то это может быть неприемлемо. Для этого нужно делать предзагрузку с preload/prefetch/preconnect/prerender/modulepreload.

С чего начать оптимизацию перфоманса? (часть 2)

6. Runtime
Выполнение скриптов (особенно в начале работы приложения) может занимать много времени (типа 200мс это много), при этом браузер висит и не может обрабатывать пользовательский ввод. Как вариант, обмазать некоторые вещи setTimeout, сделав их асинхронным и дать возможность браузеру прорендерить и тп.
Как минус - суммарное время выполнения будет больше
Как плюс - UX будет значительно лучше
Подробнее - https://philipwalton.com/articles/idle-until-urgent/

7. Render
Рендерим только то, что видит юзер (Lazy Rendering)

8. Data Fetching Flow
По url понимать какие данные нужны и при загрузке js делать сразу загрузку данных и класть куда-нибудь в window (миллениалы изобрели SSR). Отличие от SSR - не нужно полностью вкореживать в архитектуру приложения SSR (не маяться с гидрацией и тп)

9. Сжатие
brotli, gzip
Подробнее: https://tech.oyorooms.com/how-brotli-compression-gave-us-37-latency-improvement-14d41e50fee4

10. Кеширование
Http-cache + инвалидация кеша

11. Не забывать про алгоритмы и структуры данных 🙂

Большая статья про оптимизацию https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/#top

Статья про runtime https://habr.com/ru/company/hh/blog/517594/

Цена абстракций и фреймворков: https://javascript.plainenglish.io/javascript-frameworks-performance-comparison-2020-cd881ac21fce

Для мониторинга runtime можно использовать https://speedcurve.com/
Либо кастомно через https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark

5 способов предотвратить внедрение кода в JavaScript и Node.js

https://snyk.io/blog/5-ways-to-prevent-code-injection-in-javascript-and-node-js/

Полезные консольные Linux утилиты

https://habr.com/ru/post/553000/

Полное руководство по созданию шаблонов HTML-писем

https://www.smashingmagazine.com/2021/04/complete-guide-html-email-templates-tools/

https://webformyself.com/polnoe-rukovodstvo-po-elektronnym-pismam-v-formate-html/