Стачка прошла. Все было супер, не жалею, что съездил.
Было очень много полезных докладов, мощные спикеры. Познакомился с интересными людьми, понетворкал, узнал что-то новое. В общем всем советую 😄

Теперь нужно возвращаться в рабочие будни и сюда тоже 🙃

Недавно прочитал о Web Locks API — крутом инструменте, который спасает от состояний гонки и беспорядка в асинхронных операциях. Если ваше приложение работает с общими ресурсами (например, IndexedDB, localStorage или даже API-запросами), этот API может очень даже вам помочь.

Когда он может понадобиться?

- Две вкладки вашего приложения одновременно пытаются обновить одни и те же данные в IndexedDB.
- Несколько асинхронных функций борются за доступ к критической секции кода.
- Фоновый синххронизация воркера конфликтует с UI-операциями

Web Locks API позволяет «блокировать» ресурсы на время операции, гарантируя, что только один поток/вкладка имеет к ним доступ. При этом все блокировки асинхронные и не блокируют UI.

В качестве простого примера можно рассмотреть добавление товара в корзину. Если вы добавите его на одной вкладке и запрос на добавление вдруг почему-то идет дольше нужного, а вы уже (зачем-то) перешли на вторую вкладку и тоже там ткнули на товар в корзину, то товар может добавиться два раза. Web Locks API можно применить для блокировки ресурса добавления в корзину, чтобы не произошло дублирования и как итог мы получим один товар в корзине, несмотря на работу в двух вкладках.

Вещь достаточно интересная и специфичная, я пока ее не встречал на проектах, но думаю свое применение она найдет в определенных сферах)

Почитать подробнее с живым примером можете по ссылочке

#полезныессылки

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

Reconciliation в React, обновления виртуального DOM: что это и как работает под капотом простыми словами

#полезныессылки

Каждый из нас хотя бы раз (а чаще всего и не раз) сталкивался с ручным чтением и записью данных в cookie и, думаю, каждый раз приходилось сидеть и в ручную форматировать и структуризировать данные или использовать сторонние библиотеки для этого. Сейчас начинает все больше и больше набирать поддержку браузерами Cookie Store API, которое позволяет использовать для работу с cookie нативные методы, вместо самописных, и при этом изменения происходят асинхронно, то есть проблема с тем, что кука при форматировании попадет в цикл и приложение подвиснет здесь по сути решена.
Более подробно про то, как работает Cookie Store Api можете почитать в статье. В ней же показываются варианты, как сохранить обратную совместимость, что также очень важно, пока не все браузеры нормально поддерживают данное апи.

#полезныессылки

Все больше и больше появляется проектов, которые используют микрофронтенд в своем подходе.

Зачем?
- Масштабирование: Каждая команда работает над своим кусочком.
- Технологическая свобода: React, Vue, Angular — что угодно в одном проекте.
- Изолированный деплой: Обновили корзину — не ломаете весь сайт.

Как это работает?
Каждый микрофронтенд — отдельное приложение. Собираются они в runtime через Module Federation (если коротко: "подтягивай что нужно, когда нужно").

Представьте интернет-магазин:
Команда А делает каталог на React.
Команда B пишет корзину на Vue.
Команда C отвечает за рекомендации на Svelte.

И всё это работает как единое целое 💪

Нашел небольшую статью про микрофронты, где расписано как их использовать, как настроить и какие нововведения предоставляет нам Микрофронтенд 2.0
https://habr.com/ru/companies/bft/articles/898278/

#полезныессылки

Просто оставлю это тут

В феврале 2025 года мир сформировал новую профессию и она называется Vibe Coding. Уже даже таксисты спрашивают заменит ли AI программистов. И на это есть все основания. Поэтому сегодня попытаемся примерить шкуру Vibe кодера и разобраться, как это изменит нашу индустрию -> https://youtu.be/XQa78e8p4ss

Веб-компоненты и shadowDom достаточно неоднозначная вещь, с которой сталкиваются не так много людей. Но в последнее время я встречаю все больше статей и докладов про то, как их использовать и как некоторые компании заменяют часть компонентов на них.

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

https://habr.com/ru/companies/ruvds/articles/909390/

#полезныессылки

Не нужно думать насчет технологий, решений и тп. Нужно брать и пробовать, а дальше как пойдет 🙃

Немного про оптимизацию. Думаю те, кто уже сталкивался с задачами по оптимизации понимают, что сразу возникает куча тулзов по типу Lighthouse и тп. Один из таких инструментов - Webpack bundle analyser. Он помогает узнать, какие пакеты занимают много места в бандле и тп. Полезная вещь, если еще не работали с ней, то можете почитать обзорную статью, думаю в любом случае будет полезно, даже если просто упомянете про эту вещь на собесе 😄

#полезныессылки

В JSе снова и снова появляются новые вещи, которые должны упростить нам жизнь в некоторых местах (хотя иногда выглядят сомнительно конечно 😅).
В этом видео рассказывается о новых фичах, которые потихоньку должны появиться в JS в 2025 году.
Если кратко, то добавляется Promise.try() для обработки не только асинхронных, но и синхронных ошибок, очень много хелперов для итераторов, новый тип массива чисел с плавающей точкой, автоматическое экранирование символов в регулярках и немного меняется импорт json файлов в модули JS.

#полезныессылки

Всем привет! Мы с ребятами планируем устроить второй митап во Пскове JoyJS. Если кто-то хочет с чем-нибудь выступить, что-то рассказать, то заполняйте форму, будем рады всех рассмотреть и помочь с докладами 💪😁

А вы знали, что в HTML и CSS есть свойства, которые достаточно старые, но мало кем используются, так не так много людей о них помнит в принципе?

1) box-decoration-break: clone — позволяет фоновой подсветке ссылок корректно отображаться при переносе текста

2) hyphens: auto — добавляет настоящие переносы слов, улучшая читаемость

3) <meta name="theme-color"> — задаёт цвет верхней панели браузера на мобильных устройствах

4) quotes — автоматически ставит правильные типографские кавычки («ёлочки») в <q>

5) form novalidate — отключает встроенную валидацию браузера, но псевдоклассы :valid/:invalid продолжают работать

6) user-select: all — позволяет одним кликом выделить весь фрагмент кода или текста

7) resize: vertical — блок <textarea> можно сделать изменяемым только по вертикали

👉 Все эти фичи появились ещё с 2006–2022 гг., но до сих пор помогают в разработке интерфейсов и типографики.

#html #css

Мифы о Frontend: "Выучи React и Залети во Frontend"

1. "React ≠ Frontend"
React — лишь инструмент
Что забывают 90% джунов: Как работает браузер, Vanilla JS, Верстка, HTTP, REST, WebSockets, CORS
Просто не забивайте на верстку и основы фронта без фреймворков

2. "Рынок Завален Juniors, но Голоден до Junior+/Middle/Senior"
На 1 junior-вакансию — 1000+ откликов. 80% — шаблонные резюме с типовым TodoList.
Делайте резюме оригинальнее, пишите хорошие сопроводительные письма

3. "Интервью ≠ Знание React"
Вас разнесут по:
Алгоритмам (как минимум мапы и редьюсы точно очень часто встречаются)
Архитектуре, как минимум как, что и зачем нужно разделять
JS: замыкания, как что работает и тп
Практикуйте простейшние алгосы, смотрите самые используемые паттерны, типо HOC, научитесь писать тесты, смотрите записи собесов

4. "Soft скилы - бОльшая часть успеха"
Без умения общаться с людьми будет очень сложно
Походите по митапам, пообщайтесь с людьми, объясняйте код вслух сами себе, берите максимум из код-ревью

#мысливслух