🧊 siberiacancode x IT-ХОЗЯЕВА
Kanalga Telegram’da o‘tish
Канал для frontend разработчиков Смотрим самые новые и популярные frontend технологии 🔥 https://boosty.to/siberiacancode https://www.youtube.com/@siberiacancode https://www.twitch.tv/siberiacancode https://github.com/siberiacancode
Ko'proq ko'rsatish3 418
Obunachilar
-124 soatlar
Ma'lumot yo'q7 kunlar
-1630 kunlar
Ma'lumot yuklanmoqda...
O'xshash kanallar
Taglar buluti
Kirish va chiqish esdaliklari
---
---
---
---
---
---
Obunachilarni jalb qilish
Avgust '26
Avgust '26
+57
0 kanalda
Iyul '26
+54
1 kanalda
Get PRO
Iyun '26
+106
1 kanalda
Get PRO
May '26
+107
4 kanalda
Get PRO
Aprel '26
+49
0 kanalda
Get PRO
Mart '26
+122
1 kanalda
Get PRO
Fevral '26
+85
5 kanalda
Get PRO
Yanvar '26
+92
1 kanalda
Get PRO
Dekabr '25
+63
0 kanalda
Get PRO
Noyabr '25
+45
1 kanalda
Get PRO
Oktabr '25
+97
3 kanalda
Get PRO
Sentabr '25
+78
1 kanalda
Get PRO
Avgust '25
+108
3 kanalda
Get PRO
Iyul '25
+99
0 kanalda
Get PRO
Iyun '25
+68
1 kanalda
Get PRO
May '25
+103
1 kanalda
Get PRO
Aprel '25
+145
3 kanalda
Get PRO
Mart '25
+99
2 kanalda
Get PRO
Fevral '25
+120
1 kanalda
Get PRO
Yanvar '25
+184
3 kanalda
Get PRO
Dekabr '24
+151
3 kanalda
Get PRO
Noyabr '24
+129
3 kanalda
Get PRO
Oktabr '24
+97
1 kanalda
Get PRO
Sentabr '24
+97
2 kanalda
Get PRO
Avgust '24
+128
1 kanalda
Get PRO
Iyul '24
+179
1 kanalda
Get PRO
Iyun '24
+186
2 kanalda
Get PRO
May '24
+254
4 kanalda
Get PRO
Aprel '24
+173
1 kanalda
Get PRO
Mart '24
+131
0 kanalda
Get PRO
Fevral '24
+178
1 kanalda
Get PRO
Yanvar '24
+281
1 kanalda
Get PRO
Dekabr '23
+143
4 kanalda
Get PRO
Noyabr '23
+39
0 kanalda
Get PRO
Oktabr '23
+101
0 kanalda
Get PRO
Sentabr '23
+954
0 kanalda
| Sana | Obunachilarni jalb qilish | Esdaliklar | Kanallar | |
| 29 Avgust | +1 | |||
| 28 Avgust | +2 | |||
| 27 Avgust | +3 | |||
| 26 Avgust | +2 | |||
| 25 Avgust | +9 | |||
| 24 Avgust | +3 | |||
| 23 Avgust | +1 | |||
| 22 Avgust | +1 | |||
| 21 Avgust | +1 | |||
| 20 Avgust | +5 | |||
| 19 Avgust | 0 | |||
| 18 Avgust | +1 | |||
| 17 Avgust | +2 | |||
| 16 Avgust | +1 | |||
| 15 Avgust | +3 | |||
| 14 Avgust | +2 | |||
| 13 Avgust | +1 | |||
| 12 Avgust | +2 | |||
| 11 Avgust | 0 | |||
| 10 Avgust | +1 | |||
| 09 Avgust | +3 | |||
| 08 Avgust | +1 | |||
| 07 Avgust | 0 | |||
| 06 Avgust | +1 | |||
| 05 Avgust | +2 | |||
| 04 Avgust | +2 | |||
| 03 Avgust | +2 | |||
| 02 Avgust | +3 | |||
| 01 Avgust | +2 |
Kanal postlari
Семен, ты просто промтить не умеешь, а еще агентов не правильно настроил, также у тебя нет своего лютого оркестратора, который умеет во все от идеи до релиза, например Любава. Ну также качество кода — это не важно, да и ревью вот ты говоришь, что проблема, но это не проблема вовсе. Также ты просто плохо настроил SDD и TDD скиллы.
Короче, рекомендую послушать и посмотреть подкасты Владилена Минина, он уволил весь штат из 50 человек и теперь делает все через ии, пруфов конечно нет его работы, но ты не переживай, он и другие уже лет 15 в айти, чтобы это не значило.
| 2 | Забавно, что на этом HolyJS я как раз буду рассказывать про процессы, автотесты и про то, как адекватно подружить всё это с ИИ — без хайпа, без «ИИ заменит разработчиков и тестирование».
Не забывайте участвовать:
https://t.me/siberiacancode/2778
https://t.me/siberiacancode/2778
https://t.me/siberiacancode/2778 | 870 |
| 3 |  Мысли димы 🎧 про ии
Не зря закрытый канал так называется. На самом деле я всегда был с вами довольно откровенным, и я очень благодарен всем вам. Я реально дошёл до какого-то уровня популярности. Решил просто высказать своё некое мнение, как в старые добрые.
Люди становятся ещё ленивее. Не зря говорят, что лень — двигатель прогресса. Я говорю конкретно про фронтенд, хотя, думаю, это заметно вообще везде. Сейчас, чтобы стать популярным, проще всего делать фастфуд-контент в вертикальном формате. И дело не только в ИИ, но он определённо сильно ускоряет этот процесс.
Людям всё меньше интересно углубляться в тему, и с каждым годом это становится заметнее. Я буквально недавно поймал себя на мысли, что про новый Next.js почти нет действительно роликов. Причём не только у нас, но и на зарубежном YouTube.
Мне правда интересно посмотреть, во что всё это превратится. Вариантов много, но самый вероятный для меня такой: разработчики, которые реально шарят, будут становиться всё дороже. Новичкам при этом будет всё так же тяжело, а нормальная «середина» постепенно начнёт исчезать, потому что мы сами разрушаем мосты и привычки, через которые раньше люди учились и углублялись.
Что будет с каналом? Тут я долго не думал. Я всё ещё хочу рассказывать и показывать вам фронтенд. Сказать, что меня вообще не волнуют цифры, было бы лицемерием, но я очень рад, что от них не завишу. И немного грустно смотреть, как вся индустрия и некоторые блогеры уже буквально обязаны постоянно клепать нейрослоп-контент, потому что именно этого требуют алгоритмы.
И ещё раз огромное вам спасибо. На самом деле именно благодаря каналу я сам стал намного сильнее как разработчик. Я бы даже сказал — стал не просто продуктовым разработчиком, а действительно фронтенд-инженером. Очень многое из того, что я сейчас умею, появилось именно потому, что мне хотелось разобраться глубже, а потом нормально объяснить это вам. | 771 |
| 4 |  💳 НОВОЕ ВИДЕО
🧩 я понял, как работать с кешем в nextjs, nextjs 16.3 | 862 |
| 5 |  holyjs + siberiacancode, мы сделали для вас топовый конкурс 🤟
👍 Разыгрываем 2 билета на HolyJS — одну из главных JavaScript-конференцию! HolyJS — IT-конференция для всех, кто использует JavaScript-технологии и ati для фронтенда и бэкенда.
📅 23–24 октября, Санкт-Петербург + online
*оба билета имеют доступ офлайн и онлайн
Условия участия максимально простые:
1. Подписаться на каналы holyjs + siberiacancode
2. Поставить любую реакцию на этот пост 👌
3. Нажать кнопку "Участвовать" 😎
Конкурс будет длится 3 недели и закончится 13 сентября. Мы хотим, чтобы вы получили максимально крутой опыт от участия в HolyJS — вдохновились докладами, нашли единомышленников и зарядились идеями для своих проектов вместе с нами 💜
Также вы можете использовать мой промокод, чтобы получить скидку на покупку билета 15% процентов — siberiacancodeHoly26
Реклама. ООО «Джуг Ру Груп». ИНН 7801341446. Erid 2RanynXXruh | 1 079 |
| 6 |  Почему ReactUse не мемоизирует методы хуков 💀
В ReactUse методы, возвращаемые хуками, намеренно не оборачиваются в useCallback по умолчанию. Мемоизация — это оптимизация, а библиотека не знает контекста приложения и не может решить, где стабильная ссылка действительно принесёт пользу.
Поэтому ReactUse оставляет контроль разработчику: мемоизировать стоит там, где для этого есть реальная необходимость. Тем более с развитием React Compiler, который постепенно забирает подобные оптимизации на себя. | 920 |
| 7 |  Мы переделали кастомный cache для nextjs 🪐
Ранее мы рассказывали, как сделали собственный cacheHandler для Next.js и начали сохранять не только кеш, но и информацию о ревалидации тегов.
Для этого рядом с кешем хранился отдельный манифест: у каждого тега была отметка времени последней ревалидации. Благодаря этому теги переживали перезапуск приложения, а новый процесс понимал, какие записи уже устарели. Но со временем решение стало сложнее самой проблемы.
Нам приходилось синхронизировать кешированные данные, теги и манифест ревалидации. Любое обновление должно было корректно изменить их состояние, а незавершённая запись или рассинхронизация файлов могли оставить кеш в неконсистентном состоянии. Особенно неприятно это становилось во время сборки и деплоя.
В итоге мы отказались от общего файлового манифеста и изменили принцип формирования ключей кеша.
Next.js позволяет привязывать tags к кешированной записи и инвалидировать её через revalidateTag, но сами теги не являются частью исходного cache key.
Мы начали использовать их ещё и как дополнительные идентификаторы файлов. Например, одним из таких тегов может быть commit id. Дополнительно передаём его в запросе через header, чтобы он участвовал в формировании уникального cache key.
Упрощённо получилось так:
<теги>:<исходный-cache-key>
Например:
<commit-id>:<исходный-cache-key>
То есть commit — не отдельный механизм кеширования, а один из параметров, связывающий кеш с конкретным состоянием контента. Вместо него это может быть версия, revision, hash или любой другой идентификатор. Теперь каждая версия кеша уникальна, а старые записи можно легко найти и удалить по тегам, которые участвуют в имени файла.
При этом мы остались внутри стандартных механизмов Next.js: force-cache, tags и cacheHandler — без дополнительного манифеста и собственной системы ревалидации поверх Next.js.
Цена у подхода есть: старые записи нужно периодически удалять, иначе хранилище будет расти. Но фоновая очистка оказалась намного проще и надёжнее, чем синхронизация изменяемого манифеста во время обработки запросов.
Возможно, вся эта история кажется оверхедом. Но задача появилась из конкретного требования: сохранять кеш между сборками и гарантированно учитывать ревалидацию по тегам после рестартов и деплоев. | 838 |
| 8 |  Подготовка к докладу HolyJS ⭐️ Часть 4
Во время описания интеграционных тестов и самого проекта мы часто говорим про моки. У нас с командой есть свой инструмент для моков, и я надеюсь, что скоро смогу рассказать про него подробнее. Иронично, что первые реальные примеры его использования вы увидите именно в тестовом проекте, который я готовлю для доклада.
Моки можно и нужно разделять на два уровня. Первый — моки для разработки приложения: когда вы реализуете фичу, собираете демо заказчику или отдаёте сценарий на ручное тестирование. Второй — моки непосредственно для автотестов. Это разделение важно: попытки объединить оба сценария обычно приводят только к переусложнению моков.
Сегодня говорим про первый тип. Пример можно посмотреть в репозитории в папке mock. Здесь важно понимать задачу: нам нужен простой и понятный серверный код, достаточно близкий к реальному API, но не его полная реплика. Тратить ресурсы на воспроизведение всего бэкенда просто нет смысла.
export const postOtpsOtp = [
rest.post<{
body: CreateOtpDto;
response: ErrorResponse;
}>(
'/otps/otp',
{
match: {
body: {
phone: '77777777774'
}
},
response: {
success: false,
reason: 'Не удалось отправить код'
}
},
{ status: 400 }
),
rest.post<{
body: CreateOtpDto;
response: CreateOtpResponse;
}>('/otps/otp', {
success: true,
retryDelay: 30_000
})
];
Сам инструмент скоро получит официальный релиз, и тогда с ним можно будет познакомиться подробнее. Но основная идея уже видна: нужные сценарии должны описываться быстро и без большого количества лишнего кода. Подробнее про это расскажу в следующей части.
Отдельная проблема — данные для моков. Их тоже важно раскладывать структурно и не заполнять руками всё подряд. Тут хорошо работает связка автогенерации из apicraft и faker: мы указываем только поля, которые важны для конкретного сценария, а всё остальное генерируется автоматически.
let cards = Array.from({ length: 5 }, () =>
createCardFake({
panMasked: faker.string.numeric(4)
})
);
В итоге мок остаётся коротким, сценарий читается сразу, а изменение API не превращается в ручное переписывание десятков объектов. | 805 |
| 9 |  CSS получит новый селектор по префиксу 👋
В Selectors Level 5 добавили новый селектор .prefix-*, который позволит выбирать сразу все классы с определённым префиксом. Например, .btn-* сможет выбрать .btn-primary, .btn-secondary и .btn-large. Сегодня для этого приходится использовать менее читаемую комбинацию вроде [class^="btn-"] и [class*=" btn-"]. | 1 049 |
| 10 |  Фидбек по докладам с митапа 📰
▪️ «Factory store: масштабирование без компромиссов» — На самом деле доклад про довольно простую инженерную практику — буквально про фабрику на реальном примере. Но тут я бы хотел отметить две вещи. Первое: если вы начинающий спикер, не надо фокусироваться на этом — это очень сильно влияет и на вас самих, и на доклад. Второе: izede написал мне, что во Vue такой проблемы вообще нет, и был прав. Если коротко, понадобилось сделать шаринг глобального стейта с подпиской по id. В React такое нормально не сделать — почти наверняка понадобится external state manager. Ну и всё.
▪️«Две доки, чтоб править всеми» — Я не понял доклад. Во-первых, человек явно не из фронтенд-среды, а во-вторых, половина того, о чём говорил спикер, сегодня заменяется RAG-сервисом. Я не работал с техписателями, поэтому, возможно, просто не понимаю часть их процессов, но то, что было показано в докладе, для меня выглядит как дефолт индустрии, если у вас больше одного микросервиса. При этом сам посыл про документацию правильный.
▪️ «Синхронизация между устройствами: все не так просто, как кажется» — Спикер рассказывает, как синхронизировать корзину продуктов между вебом, мобилкой и бэком. Казалось бы, обычная задача, но в итоге мне понравилось, как доклад развернулся в сторону алгоритмов и решений команды. Чуть-чуть микрофронтендов, чуть-чуть алгоритмов, чуть-чуть собственных решений — хорошо.
▪️ «Вкусы реактивности» — Ну маэстро. Мне очень нравится, когда в докладе есть параллель с чем-то ещё: например, сеансом у психолога, созвездиями или, как здесь, фломастерами. Такие ассоциации реально помогают воспринимать материал. Сам доклад при этом сложный: чтобы его понять, надо нормально погрузиться в реактивность. Но это ещё одна хорошая история про то, что на самом деле происходит в вебе. Единственное — мы со спикером делали стрим на эту тему, и я очень на него обиделся, что он его не вставил и QR-код в презу не добавил.
Огромное спасибо ребятам из MoscowJS, которые позволяют мне стримить и проводят митапы в таком количестве. Если хотите выступить — пишите им сюда. Ребят, знаю лично, помогут подготовиться и выступить, так сказать, получить свой первый опыт. | 1 050 |
| 11 |  Подготовка к докладу HolyJS 🎧 Часть 3
Чтобы доклад был полезным, важно дать практику. Мы уже говорили про unit-тесты, теперь пора немного затронуть интеграционные и их высшую степень — e2e. Но чтобы нормально показать такие автотесты и тест-кейсы, нужно приложение.
Показывать всё на очередном todo-листе глупо, а читать доклад без реальных примеров ещё хуже. Поэтому специально для доклада готовится довольно большой репозиторий с одним из заданий Juniors Bootcamp. Само приложение тоже полностью захостим, чтобы его можно было открыть и руками пройти весь флоу.
Мы с командой bootcamp изначально проектируем задания так, чтобы они были максимально приближены к реальным продуктам: основной пользовательский флоу, UI-стандарты, дизайн-система, layout, авторизация, оплата и другие типичные вещи. В итоге это, во-первых, хороший кодовый пример приложения на react hooks, а во-вторых, уже совсем скоро в репозитории начнут появляться тесты. И за счёт реалистичности проекта на нём можно будет действительно показательно разобрать интеграционные и e2e-тесты, а не тестировать кнопку в вакууме.
Сам проект готов на ~90%, надо поправить некоторые вещи и баги. Но это все мелочи, уже можно стартовать настройки harness для моих тестов (иницилизация, ии скиллы, тесткейсы). | 988 |
| 12 | Подумываю, сменить название канала на siberiacanvibecode 🏝 | 1 079 |
| 13 |  «незаменимые» вы тут? 🍌 | 1 183 |
| 14 | Уже два года прошла, как я простой pr для shadcnui 🫠 | 1 259 |
| 15 | Фидбек по докладам с митапа 📰
▪️ «Factory store: масштабирование без компромиссов» — На самом деле доклад про довольно простую инженерную практику — буквально про фабрику на реальном примере. Но тут я бы хотел отметить две вещи. Первое: если вы начинающий спикер, не надо фокусироваться на этом — это очень сильно влияет и на вас самих, и на доклад. Второе: izede написал мне, что во Vue такой проблемы вообще нет, и был прав. Если коротко, понадобилось сделать шаринг глобального стейта с подпиской по id. В React такое нормально не сделать — почти наверняка понадобится external state manager. Ну и всё.
▪️«Две доки, чтоб править всеми» — Я не понял доклад. Во-первых, человек явно не из фронтенд-среды, а во-вторых, половина того, о чём говорил спикер, сегодня заменяется RAG-сервисом. Я не работал с техписателями, поэтому, возможно, просто не понимаю часть их процессов, но то, что было показано в докладе, для меня выглядит как дефолт индустрии, если у вас больше одного микросервиса. При этом сам посыл про документацию правильный.
▪️ «Синхронизация между устройствами: все не так просто, как кажется» — Спикер рассказывает, как синхронизировать корзину продуктов между вебом, мобилкой и бэком. Казалось бы, обычная задача, но в итоге мне понравилось, как доклад развернулся в сторону алгоритмов и решений команды. Чуть-чуть микрофронтендов, чуть-чуть алгоритмов, чуть-чуть собственных решений — хорошо.
▪️ «Вкусы реактивности» — Ну маэстро. Мне очень нравится, когда в докладе есть параллель с чем-то ещё: например, сеансом у психолога, созвездиями или, как здесь, фломастерами. Такие ассоциации реально помогают воспринимать материал. Сам доклад при этом сложный: чтобы его понять, надо нормально погрузиться в реактивность. Но это ещё одна хорошая история про то, что на самом деле происходит в вебе. Единственное — мы со спикером делали стрим на эту тему, и я очень на него обиделся, что он его не вставил и QR-код в презу не добавил.
Огромное спасибо ребятам из MoscowJS, которые позволяют мне стримить и проводят митапы в таком количестве. Если хотите выступить — пишите им сюда. Ребят, знаю лично, помогут подготовиться и выступить, так сказать, получить свой первый опыт. | 1 |
| 16 | 😎 ВИДЕО
✨ react jsx vs vue template, что победит? | 1 361 |
| 17 |  React Compiler теперь можно проверять через Oxlint 🎤
Oxlint получил нативную реализацию правила react/react-compiler, которое запускает анализ React Compiler прямо во время линтинга. Раньше для этого приходилось использовать JS-плагин и Babel, а теперь проверка работает внутри Rust-инструментария Oxc. На проекте автора это ускорило lint примерно с 29 до 9 секунд, а после удаления оставшихся JS-плагинов — почти до 3 секунд.
Но интереснее даже не скорость. У Oxlint есть опция reportAllBailouts, которая показывает не только ошибки Rules of React, но и места, где React Compiler просто отказался оптимизировать компонент или хук. То есть можно постепенно смотреть, какая часть приложения реально готова к компилятору и почему остальной код не оптимизируется.
Возможно, именно это поможет react compiler стать стабильней и начать массово использоваться. | 1 232 |
| 18 | Matn yo'q... | 1 199 |
| 19 | Недавно делал разбор Vercel React Best Practices — по сути это один из самых популярных наборов правил, которые сейчас скармливают ИИ-агентам для написания React-кода. | 1 |
| 20 |  Чат gpt, топовая модель буквально мне дала 🥶 проверку ssr в use effect, вот так и живем | 1 |
