Your trial period has ended!
For full access to functionality, please pay for a premium subscription
UN
Road to senior frontend dev.
https://t.me/unsleeping706
Channel age
Created
Language
Russian
3.19%
ER (week)
15.08%
ERR (week)

Делюсь мыслями о фронтенде: Next.js, React.js, js - личный опыт, интересные задачи, глубокий анализ технологий, оптимизация, алгоритмы и полезные статьи.

канал про фулстак: @unsleeping_fullstack

Messages Statistics
Reposts and citations
Publication networks
Satellites
Contacts
History
Top categories
Main categories of messages will appear here.
Top mentions
The most frequent mentions of people, organizations and places appear here.
Found 115 results
15
3
409
04/27/2025, 19:12
t.me/unsleeping706/949
1
409
я правильно понял что все роутер либы ликуют от Activity компонента из-за возможности фоном собирать другие страницы (пререндеринг) / instant browser history stuff?
SPA станут еще быстрее?
04/25/2025, 21:25
t.me/unsleeping706/948
2
8
405
Посмотрел я тут на которые завезли в React 19.1 (поддержка браузерных апи) и собираю зубы с пола

не будьте как я, don’t sleep on ViewTransitions

демка кстати в одну строчку делается

https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more
04/25/2025, 21:14
t.me/unsleeping706/947
30
437
вот это я понимаю, даже на прошлые посты вышел негатив, ну вы и накопили ребят…

ps до 21 апреля тоже посты были
04/25/2025, 14:26
t.me/unsleeping706/946
46
448
так, признаемся, есть какой-то шарм, когда ставите неГатИвную реакцию? Ведь так только у меня можно…
04/25/2025, 13:15
t.me/unsleeping706/945
70
456
каждый раз ржу когда вижу “соевое” комьюнити/паблик/группу где тебя ограничивают во всем, в способе выражения эмоции, реакций, нет клоунов/какашек/пальцев вниз, нельзя высказывать свою РЕАЛЬНУЮ позицию

обычно я отписываюсь от такого biased комьюнити, мне всегда важно видеть реальную картину, если я запостил ГОВНО, ну так поставьте говно, я буду видеть, что это моим читателям не нравится, где минусы-то?

соевые админы, очнитесь
04/25/2025, 12:49
t.me/unsleeping706/944
Repost
13
4
416
Edge Runtime / Regional Edge / Edge Functions #1

Впервые про Edge runtime я услышал, когда изучал middleware в next.js, до этого воспринимал все Edge упоминания как Edge Location / CDN. И вот только сейчас появились силы изучить это все детальней.

Собственно, когда мы говорим про Serverless мы представляем некоторые лямбды, у которых есть достаточно большой cold start, которые запускаются изолированно и уже после запуска могут обрабатывать запрос и возвращать некоторый ответ. Что же такое Edge Functions / Edge Runtime. С Edge Runtime вы больше не сталкиваетесь с большим “cold start”, вы можете практически моментально обрабатывать запросы юзеров и отправлять ответ в течении миллисекунд, а не секунд в случае с обычными лямбдами

Что касается стоимости, лямбды дороже, вы платите за время обработки, включая холодные старты. Но как их сравнить с edge functions, которые Vercel тарифицирует за кол-во invocations? Одно могу сказать точно, такой флоу будет дешевле, посмотрите тарифы (первые 100к-1млн вызовов бесплатны зависимо от тарифа), затем 60 центов за 1млн вызовов

Но где тут подвох? Он же должен быть, все уже сняли розовые очки и усвоили что редко, когда есть one size all fit solution?

А подвох в лимитах edge functions:
- 1-4mb size лимит в зависимости от плана (вот тут я рассказывал как я с этим боролся в одном из своих проектов), так что вы ограничены в том, как много js кода вы можете отправлять в edge function
- это не node.js runtime (compatibility), не все api доступны
- нет native runtime layer, в котором мы обычно запускаем cpp/rust код (у Vercel есть полифилы под некоторые api), то есть вы не можете запустить привычную призму, потому что она поднимает rust binaries на “реальной” машине и устанавливает db connection (традиционные sql подключения)
- max duration (25s или надо отдавать стрим)
- max memory (128mb)

вы никогда не задумывались, почему серверы поднимают рядом с бд? Понятно дело из-за лейтенси, но я нашел вам визуализацию (прикреплю в комменты) которая показывает разницу между расположением сервера между юзером и бд

Хорошо, про Edge Functions поговорили, что такое Regional Edge? Это те же самые Edge Functions ограниченные каким-либо регионом. Почему это важно? А вот надо было зайти в комментарии и посмотреть пикчи к прошлому абзацу относящиеся!

Используя Regional Edge Functions вы получаете все бенефиты Edge Functions, которые расположены близко к БД и вы не чувствуете latency между Edge Functions и DB. Да, в этом случае вы теряете бенефит того, что сервис находится близко к юзеру, но этот бенефит для случаев, когда у вас нет водопадов запросов к БД, и этому посвещена вторая секция скринов в комментах, идем смотреть

Хотите сами потыкать разницу между Global Edge / Regional Edge для разных провайдеров? есть демка от Vercel: https://db-latency.vercel.app/
04/24/2025, 21:17
t.me/unsleeping706/943
8
1
451
для своей Next.js аудитории подготовил объяснение что такое Edge Runtime / Vercel Edge Functions, в чем его отличие от Regional Edge, и почему вам стоит посмотреть в сторону Edge Functions вместо привычного serverless c точки зрения оптимизации тех костов и улучшения UX из-за уменьшения времени ответа (если вы уже включили Fluid Compute, возможно вам это уже не так актуально)
04/24/2025, 21:17
t.me/unsleeping706/942
для своей Next.js аудитории подготовил объяснение что такое Edge Runtime / Vercel Edge Functions, в чем его отличие от Regional Edge, и почему вам стоит посмотреть в сторону Edge Functions вместо привычного serverless c точки зрения оптимизации тех костов и улучшения UX из-за уменьшения времени ответа (если вы уже включили Fluid Compute, возможно вам это уже не так актуально)

https://t.me/unsleeping_fullstack/36
04/24/2025, 21:17
t.me/unsleeping706/941
14
1
429
btw прямо сегодня зашел в codesandbox и при редактировании он не кричит тебе попапом: “СПЕРВА ФОРКНИ!!!! нельзя редачить”
он просто сохраняет твой ввод (не блокируя), форкает за тебя и уведомляет небольшим тостом: “мы форкнули эту версию сандбокса и теперь вы можете ее редактировать"

ЖИРНЫЙ лайк, оказывается, софт так умеет, когда думает про UX
04/24/2025, 18:23
t.me/unsleeping706/940
Repost
22
13
441
Единственная мысль при поездке на беспилотном такси: «Молюсь, чтобы в этой штуке не было вайбкода»
04/24/2025, 14:01
t.me/unsleeping706/939
Repost
5
3
406
Видел недавно мем про умный холодильник, который отправляет смс если оставил дверь открытой. Подпись была: «Если ты такой умный, закрой дверь сам».

Мне кажется это много где в софте встречается: вместо того, чтобы сделать, чтобы вещь просто работала всегда, разработчики ставят себе задачу выдрессировать пользователя. «Не закрывайте окно». «Не перезагружайте страницу». «Обновите программу». «Сохраните, прежде чем выйти». «Файл с таким именем уже существует». «Не могу запустить, пока вы не установите зависимости». «Please commit your changes or stash them before you switch branches».

И на каждое неправильное действие отругать, а не обработать.

А надо помогать. «Если ты такой умный, сохрани сам».
04/24/2025, 14:01
t.me/unsleeping706/938
4
1
458
https://x.com/abhagsain/status/1876362355870994538

сразу вспомнил Невероятные чеки за серверлесс
04/23/2025, 15:18
t.me/unsleeping706/937
10
1
418
кто-нибудь проверял насколько лучше получается результат если к промпту в конце добавлять такое 🤡
04/23/2025, 10:58
t.me/unsleeping706/936
3
8
465
Vibe coding tool that knows backend
https://chef.convex.dev/
04/22/2025, 22:49
t.me/unsleeping706/935
4
2
387
Давно мечтал найти время на изучение DDD (Domain Driven Design) (мелькает периодически в чатах, пин ждет прочтения уже больше года). И такой момент настал, жена подарила книгу, теперь я ее читаю и веду заметки во второй канал по ней.

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

https://t.me/unsleeping_fullstack/20
04/21/2025, 09:37
t.me/unsleeping706/934
Repost
24
3
400
Наверняка, многим серьезным программистом преходилось испытать неприязнь, когда они узнавали, что чтобы выложить веб-сайт надо еще изучать джаваскрипт. Все соглашаются (и в интернете я тоже читал) что это очень, очень плохой язык. Это на самом деле глупость и когда я прочитал я долго не мог поверить ходил спрашивал и оказалось не зря. Тепер ьвеб-сайты можно писать на самом популярном в мире языке расте. Это революционный переворот и он происходит прямо на наших глазах. Я был шокирован, как там все организовано, но похоже они все вопросы продумали с самого начала и договорились что это будет очень востребованный проект.Более того, умные перцы из мозиллы которые по утрам продают ваши персональные данные уже работают над тем, чтобы раст работал быстрее С++, потому что он комплируется сразу в результат, минуя стадию вычисления! Вы наверняка заметили это по тому, что файрфокс открывается за 5 секунд, а не 20 как это было в до-интернетную эпоху. Что это если не порыв я не знаю. То есть, если вы напишете свой сайт на rust, он автоматически будет бытсрым и будет масштабироватсья (обрабатывать столько клиентов, сколько пришло, это настоящая проблема в джаваскрипте была и некто не знал как с ней быть). Например, данные между разными запросами беруться взаймы, в том же джаваскрипте это в принципе не возмонжно и засчет этого у раста такая гиганская производительность. Там даже продумано если вы будете работать с другом или кто-то допустим, то я зык специально за счет очень удобной типизации можно писать так что вы всегда будете знать что сломал ваш друг. Это очень удобно потому что позволяет меняь програму в одном месте и вообще не парится о том же друге что там у него програма все равно не скомпилируется.Только представьте! Любой кусок кода можно насать один раз. Также они добавили возможность создавать асинхронные функции и это очень круто, но я пока не понял как ее потом вызвать. Но самое главное, что над растом сейчас работает туча народу просто, они переписывают все что было до них написано на раст и у них получается лучше потому что они сразу заточились на производительность и чтобы было лучше а так же просто использовать. Например нужно сходить в базу данных создал проект на гитхабе сразу набежали форкнули завтра только пуллреквесты принять и можно заливать в продакшн на свой ноутбук. Сообщество очень дружелюбное, если кому-то удается сделать что-то работающее на расте его обязательно хвалят и подбадревают потому что это правда успех. Я пока не понял как допустим считать файл но говорят эт из-за безопасности,там все очень надежно, ведь если к тебе вдруг идет миллион клиентов и вы облажаетесь в 10% случаев ты облажаешься перед 100 000 человек. Поэтому например если где-то произошла ошибка лучше сразу аккуратненько написать ааа паника все сгорело и завершиться чем пазориться перед остальными, тем более если перезапустить сервер то там и память лишняя освободится и бегать начнет пошустрее, да и перезапускается он очнь бытсро. Иногда бывает быстрее перезапустить сервер чем дождаться проверки типов. Ктому же rustc так оптимизирован что никогда не займет больше одного ядра а это значит что базу данных например можно поставить на тот же ноут на другое ядро для экономии ресурсов и надежности (иметь что-то на той же машине всегда надежнее, много ли что, все у кого есть дома интернет вы это итак знаете) и все будет быстро бегать и даже можно во что-нибудь пошпилить или дальше rust book почитать но тогда надо побольше ядер купить. Но в серверы как раз много ядер и ставят и как видите rust прекрасно справляется с этой задачей. Правда что бы писать на расте нужно купить макбук потому что все примеры в интернете написаны на мак буке но я думаю если выделаете высокопроизводительный веб-сервис, вам всеравно прийдется пройти раунд финансирования у родителей чтобы потом его запускать. Вообщем я в восторге хотя немного напрягает что гдето должны быть проблемы но я пока не понял не столкнулся ая уже очнь долго с ним разбираюсь и пока не понял.
04/20/2025, 18:16
t.me/unsleeping706/933
1
5
661
на случай если кому-то нужны были исходники: https://github.com/Unsleeping/redaccess_web_security_task
04/18/2025, 20:10
t.me/unsleeping706/932
4
395
🔥 Эксклюзивная подборка каналов на тему: Искусственный интеллект 🔥

Мы собрали команду экспертов и подготовили ценный контент, который вы сможете внедрить уже завтра. 🤖📈

Что вас ждет:

1. ✅ AI-стратегии для привлечения и удержания клиентов 🎯

2. ✅ Советы по аналитике данных для оптимизации процессов 📊

3. ✅ Идеи для создания персонализированного клиентского опыта 🤝

👉 Подпишитесь, чтобы получить полезные ресурсы для интеграции AI в ваш бизнес! 📚

https://t.me/addlist/Hjm-FsGisLY1YWFi
04/18/2025, 17:01
t.me/unsleeping706/931
3
439
https://frontegg.com/
04/18/2025, 15:36
t.me/unsleeping706/930
4
12
486
в комментариях предложили хороший ресурс от Nx по overview текущих лидеров монореп (Turborepo, Bazel, Lerna, Nx, Lage, Gradle, Moon, Pants, Rush) с фичами или их отсутствием
https://monorepo.tools/
04/17/2025, 20:06
t.me/unsleeping706/928
6
4
486
https://nx.dev/
04/17/2025, 19:29
t.me/unsleeping706/927
5
4
421
Когда отличается Suspense от Loading.tsx в Next.js

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

собрал вам демку с кодом, надо авторизоваться в codesandbox чтобы поглядеть: https://codesandbox.io/p/devbox/p6ltwl

что внутри? есть три роута
/dashboard/first (пока изучим первый)
/dashboard/second
/dashboard/third

есть dashboard/layout.tsx:

export default function DashboardLayout({
children,
}: {
children: React.ReactNode;
}) {
return (



loading through root suspense...
}>
{children}



);
}


Видим, что здесь есть Suspense, который будет оборачивать все страницы внутри /dashboard роута. Предназначение его простое, first/second/third страницы динамические и занимают какое-то время для отрисовки, не хотим блочить юзера и хотим отдавать статику (в данном случае сайдбар с ссылками) сразу, чтобы юзер увидел, что его клик отобразился на интерфейсе мгновенно

Теперь следим за руками:
1) если перейти на /dashboard/first (и обновить страницу) мы видим текст “loading through root suspense...” на время загрузки страницы
2) если уйти с /dashboard/first и вернуться на нее через навигацию, наш саспенз не отрабатывает, мы в целом заблочены и не видим даже что переключение на first вкладку “suspense in root layout” не имеет активных стилей

я вас поздравляю, вы теперь узнали hidden gem, в доке о таком не напишут: для того, чтобы статические части отдавались КАК при начальной отдаче страницы, ТАК и при последующих навигациях, использовать надо loading.tsx

но и тут есть нюансы, я поковырялся глубже, и обнаружил, что если определять suspense boundary во внутренних layout-ах, то он станет идентичен loading.tsx

поэтому
- /dashboard/first - демо потери suspense boundary при навигациях, если в rootLayout стоит Suspense а не loading.tsx
- /dashboard/second и /dashboard/third - демо схожего поведения suspense из /third/layout и loading.tsx из /second

не убивайте UX при навигациях используя RSC/Next.js неправильно, рисуйте статику сразу. так загрузка страницы ощущается быстрее, чем если вы дожидаетесь динамики

и это я еще про PPR не начал говорить, хотя несколько постов о нем уже было (навигация)
04/16/2025, 18:59
t.me/unsleeping706/926
Repost
4
2
301
Конспект книги Team Topologies, часть №1 - team-first mindset

Основные концепции:
Team-first mindset
Команда - самый эффективный способ организации людей для решения проблем. Поэтому важно перестроить сознание на team-first и уметь работать с командами:
- Когда команда - неделимый юнит для реализации любой работы
- Похвала и порицание всегда идут на команду, а не на отдельных людей
- Цели команды важнее собственных

Модель Такмана говорит о том, как рабочая группа превращается в команду:
- Формирование - создается рабочая группа и начинает работать сообща
- Шторминг - возникают конфликты между людьми. На этом этапе часть людей может покинуть группу или группа может распасться полностью.
- Нормализация - выработка единых подходов
- Перформинг - команда выходит на плато высокой продуктивности

Числа Данбара
Антрополог Данбар проанализировал различные сообщества людей и заметил, что есть 4 "круга" социальных связей:
- Очень близкие отношения с 5-7 людьми
- Приятели, хорошие друзья - 15 человек
- Семья, коллеги - 50 человек
- Стая - 150-200 человек

Это не какая-то математическая модель - это результат наблюдений.

Как это перекладывается на IT и организации:
- Идеальный размер команды - 5-7 человек. Но в крайнем случае - до 15, но тогда высок риск что люди внутри сами поделятся на 2 группы
- 50 человек - уровень подразделения
- 200 человек - уровень отдела

В книге приводится кейс компании, которая обходит фазу шторминга в модели Такмана:
- Рекомендованы команды по 7 человек
- Но команды могут расти вместе с ростом задач или продукта, это нормально
- Когда команда достигает 15 человек - её делят на 2 команды

Т.к. команда из 15 человек - уже сработавшаяся, то когда их поделят на 2 команды, они могут пропустить фазу шторминга.

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

Надо минимизировать первые 2 типа нагрузки (через обучение и автоматизацию) и сфокусироваться на 3 типе когнитивной нагрузки, решение которой позволяет делать более крутые фичи

Когнитивная нагрузка применима и к системам. Главное правило: не давать на команду больше когнитивной нагрузки, чем она может переварить. Иначе команда начинает работать как группа индивидуалистов т.к. утопают в сложности своих задач и у них нет времени на командную работу

Главная концепция - Закон Конвея

> Дизайн IT-систем повторяет дизайн коммуникации организации

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

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

Очень важная мысль: архитектура и топология команд очень связаны друг с другом. Задача архитектора - дизайнить и то и другое одновременно.

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

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



#note #TeamTopology #book #конспект #managment
04/16/2025, 15:45
t.me/unsleeping706/923
4
454
🤖 Как компании уже зарабатывают на ИИ в 2025

• Сбербанк автоматизировал 85% процессов — +450 млрд ₽ к прибыли
• Tide сэкономил $65 млн на ТВ-рекламе с ИИ
• MebelVia снизила стоимость клика на 27%, а выручку увеличила на 51%
• P&G увеличил продажи на 10% благодаря ИИ-креативам
• TikTok запускает ИИ-аватары вместо блогеров
• Google и JPMorgan используют ИИ для анализа и прогнозирования в реальном времени

📁 В этой папке:
— топовые инструменты для запуска ИИ в работу за 1 вечер
— способы монетизации для ИИ- и IT-специалистов
— тренды на 2025: что работает, а что устарело

👉 https://t.me/addlist/B8mbsR1E2Uo1ZjZi

💬 Хочешь попасть в следующую подборку? Напиши: @RyabovaM
04/16/2025, 12:03
t.me/unsleeping706/922
5
386
Patching vs Replacing

в эпоху AI стало проще замещать некоторые куски кода или вообще их строить с нуля, но по моим наблюдениям, мы все еще патчим чаще, чем собираем все с нуля

представим ситуацию, что мы поддерживаете некоторый модуль достаточно долго, со временем уже поменялись требования, усложнилась поддержка. вы начинаете задумываться над тем, как бы отрефачить этот модуль так, чтобы он был проще с точки зрения поддержки и имел все те же самые функции. Затем вы приняли решение собрать модуль с нуля, чтобы убрать затуманенный взгляд на вещи, но есть вопрос: “как определить в какой момент вам следует остановиться с удалением кода?”

ответ прост, процитирую:
If you are not adding things back, you have not removed enough!
04/14/2025, 20:45
t.me/unsleeping706/921
11
12
421
Shadcn+Tanstack table with server-side sorting, filtering, and pagination.

https://table.sadmn.com

в целом достаточно стандартный код при использовании Tanstack table, из интересного есть сложный фильтр

исходники: https://github.com/sadmann7/shadcn-table
04/14/2025, 18:06
t.me/unsleeping706/920
3
1
432
Cовременные реалии
Even with larger context windows, more computing power, reasoning models or agents, there will be things that AI won’t be able to do.
Over time, the AI tools will be more and more powerful, sure. But when you receive a Slack message that “the website works fine, but the app is down in production; I tried it locally and there it works fine, nothing in Sentry either”, good luck getting an AI agent to fix this for you. Maybe it can, maybe it can’t. And when an AI agent can’t figure it out, will your reply be “sorry, Cursor doesn’t get it, will prompt more tomorrow”?

креды: https://lucianonooijen.com/blog/why-i-stopped-using-ai-code-editors/
04/14/2025, 16:01
t.me/unsleeping706/919
Repost
4
4
430
Omlet - Uncover React component usage across your dev teams

Еще один инструмент для анализа кода, но на этот раз для дизайн-систем и UI-китов. Омлет собирает аналитику по использованию компонентов в коде: какие компоненты как используются, как быстро отказываются от deprecated компонентов, какие компоненты не из дизайн-системы разработчики часто используют (кандидаты на вынос в дизайн-систему)

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

https://omlet.dev/

#development #uikit #react
04/14/2025, 13:15
t.me/unsleeping706/918
Repost
8
21
462
Playwright: игра в скриншотные тесты

Отличная статья от Okko про реализацию скриншот-тестов в связке playwright + storybook. Она одновременно верхнеуровневая (т.е. автор не погружается прям в самые детали) и одновременно содержит весь самый сок, необходимый для настройки скриншот-тестов в проекте.

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

В статье рассказывается про:
- Как отключить анимации в дополнение к API playwright
- Как получить список всех историй и пройти по ним в цикле для запуска всех скриншот-тестов
- Как работать с загрузкой изображений, шрифтов и других ресурсов
- Как и зачем запускаться в docker
- Как работать с эталонами
- Как настраивать Playwright

В общем, мастхев ссылка если вы занимаетесь скриншот-тестированием или хотите поставить этот процесс

https://habr.com/ru/companies/okko/articles/890438/

#development #javascript #storybook #testing #screenshotTesting #habr #okko
04/13/2025, 22:25
t.me/unsleeping706/917
6
6
511
Нашел интересный тред на тему Self hosted Next + Deployment update, в комментах накидали тьму советов, как сохранить функциональность приложения для юзеров, кто еще использует старые ассеты (на Vercel все уже покрыто Skew Protection)

рекомендуют хранить последние пары ассетов на CDN / проверять версии и делать релоады / PWA + Service worker
04/13/2025, 11:54
t.me/unsleeping706/916
2
3
360
A customizable React component for building node-based editors and interactive diagrams

https://reactflow.dev/
04/10/2025, 09:45
t.me/unsleeping706/915
Repost
11
6
405
Типы кокосовых менеджеров

Задача - сбить с пальмы кокос. Как решают задачу разные менеджеры.

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

Второй тип - кадровый
Подводит инженера к пальме. Тот трясет пальму - кокос не падает. Менеджер говорит: тряси сильнее. Исполнитель трясет сильнее - кокос не падает. Инженер увольняется за андерперформанс, в кадры заводят поиск на позицию Сениор Трасильщика Пальм с опытом работы с кокосами. Менеджер ходит по конференциям и жалуется на нехватку нужных специалистов на рынке труда.

Третий тип - госушный
Собирает рабочую группу по вопросам трясения пальм. В рабочую группу входят начальник склада кокосов, комбайнер и доярки с соседней фермы. Группа раз в 2 недели проводит совещания для тщательной проработки требований к трясению кокосов и для согласования подробной карты бизнес процессов для добычи кокосов. Различные версии этих документов регулярно относятся владельцу острова для утверждения.

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

Пятый тип - технологичный
Уходит с командой инженеров в трехлетний НИОКР по конструированию пальмотрясительной машины. Машина позволит трясти до 10 000 пальм одновременно с возможностью гибкого масштабирования до 1 млн. Требует для работы компактный ядерный реактор на высокообогащенном уране. Полученный опыт (аналогов-нет) докладывается на конференциях.
(Дядя менеджера, по совместительству директор завода реакторов, дарит племяннику новую БМВ)

Какой ваш тип?

С какими типами вы сталкивались?
04/06/2025, 13:05
t.me/unsleeping706/914
4
1
412
https://x.com/s_baskak/status/1907128062992613394
04/02/2025, 22:21
t.me/unsleeping706/913
6
360
Представляем коллекцию каналов на тему AI и IT, и их влияние на нашу жизнь! 🤖

На что нужно обратить внимание‼️

1. Технологические достижения: Будьте в курсе последних прорывов в AI и IT, которые делают технологии доступными для бизнеса и пользователей.

2. Влияние на повседневность: Узнайте, как AI и IT упрощают жизнь — от виртуальных помощников до персонализированных приложений.

3. Оптимизация бизнеса: Исследуйте, как компании используют AI для повышения эффективности и улучшения процессов.

4. Образование: Узнайте, как AI меняет обучение, делая его более доступным и продуктивным.

5. Этические вопросы: Обсудите этические аспекты использования AI и технологий, включая безопасность данных и предвзятость алгоритмов.

6. Будущее IT: Ознакомьтесь с новыми трендами, такими как квантовые вычисления и блокчейн, которые формируют будущее.

Следите за новыми трендами в AI и IT! 🌐

https://t.me/addlist/pAxbrxa1ADxjNjg6
04/01/2025, 17:03
t.me/unsleeping706/912
4
465
сломал комменты, но сейчас починил
03/31/2025, 22:52
t.me/unsleeping706/910
6
9
468
смотрим на реальные юз кейсы “middleware” после CVE

мидлвара в нексте это early return для роутинга (route level helper / optimistic)

- если вы делаете в мидлваре запрос к бд - вы используете мидлвару неправильно
- если вы защищаете данные в мидлваре - вы используете ее неправильно

воспринимайте middleware как route-interceptor

что делать в мидлваре хорошо?
- локализацию, читать регион юзера и направлять его на верную языковую версию роута / дополнять реквест нужными заголовками

кстати, знаете почему middleware в Next.js не поддерживает Node (экспериментально поддерживает на селфхосте)? потому что по задумке она исполняется до момента поднятия инстансов на Node.js

страницы, нуждающиеся в проверках ролей/доступа не могут быть статическими, Static / Cache и Private это антонимы. даже если вы перенесете проверку ролей в layout, все равно можно хайджекнуть page, например пройдя верификацию от юзера 2 в layout, получить доступ к page другого юзера. В доке рассказано про DAL (data access layer), так и надо делать

скоро у нас появится интерсептор запросов, который можно будет создавать на любом уровне вложенности внутри app, вот он поможет нам избежать дублирования проверки доступов на каждой защищенной странице

вот и Next.js доку поправили чтобы не мотивировать людей неправильными примерами

и вообще, я уже закинул в фулстак заметки статью на тему:
Please stop using middleware to protect your routes
03/31/2025, 09:02
t.me/unsleeping706/909
Repost
5
2
341
https://www.youtube.com/watch?v=156FSMbyMPQ
03/29/2025, 11:32
t.me/unsleeping706/908
5
338
Завел канал под фуллстак заметки, если кому-то интересно выглянуть немного за пределы фронта (хотя я считаю что весь цикл разработки все равно надо понимать, чтобы лучше решать свои задачи) - залетайте

решение осознанное, не хочу чисто фронтовичков 💅 пугать страшными вещами из мира бекенда / девопса

поэтому все что связано с этими вещами будет поститься там
03/29/2025, 11:32
t.me/unsleeping706/907
11
6
374
Ну и в целом, очень интересно смотреть на код с точки зрения неконтролируемости, мне недавно показали вот такой фрагмент кода как прокси слой в рантайме:


const hookTable = {}

function hook(name, callback, object = self) {
hookTable[name] = object[name];
object[name] = callback;
}

hook("Uint8Array", function (...args) {
console.log(args);
});

const a = new Uint8Array(2)


и вот, вы уже можете следить за всеми вызовами и делать что угодно (код не тривиальный, я его не сразу осмыслил). Понятно, что Proxy никто не отменял, и есть еще прототипы, но именно интересно думать об этом с другой стороны: сделать что-то до исполнения кода, который ты не контролируешь, но хочешь мониторить

возвращаясь к требованиям задачи, вторая часть имела другой js.js, в котором вызывался Object.freeze(document)

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


const orig_write = HTMLDocument.prototype.write;

Object.defineProperty(HTMLDocument.prototype, "write", {
value: function (s) {
s = s.replace(/classified/gi, "");
orig_write.call(this, s);
},
writable: false,
configurable: false,
});


вот такими нехитрыми (очень хитрыми) манипуляциями, если знать исходных код можно игнорировать Object.defineProperty() / Object.freeze() и обходить ограничения языка для non configurable / non writable / non extensionable полей объекта 😎

третья часть содержала в себе создание айфрейма с закодированным в base64 html вызывающим document.write но уже в документе айфрейма, и тут был интересный момент. Чтобы в последующем коде снивелировать уже создающийся айфрейм от js.js пришлось добавить CSP мета тегов с frame-src ‘self’, а чтобы гарантировать что все последующие айфреймы создающиеся в рантайме через инлайн скрипты/девтулы имели вшитый санитайзер на document(iframe).write, пришлось переопределить createElement свойство через Object.defineProperty, в нем отловить событие загрузки айфрейма, так как до загрузки у нас нет еще iframe document-а, чтобы уже у них санитайзить в рантайме входящую строку:


const cspMeta = document.createElement("meta");
cspMeta.httpEquiv = "Content-Security-Policy";
cspMeta.content = "frame-src 'self';";
document.head.appendChild(cspMeta);

const sanitize = (s) => {
s = s.replace(/classified/gi, "");
return s;
};

const originalCreateElement = document.createElement;

Object.defineProperty(document, "createElement", {
value: function (tagName, ...args) {
if (tagName.toLowerCase() === "iframe") {
const iframe = originalCreateElement.call(
document,
tagName,
...args
);

iframe.addEventListener("load", () => {
const originalWrite = iframe.contentWindow.document.write;

Object.defineProperty(iframe.contentWindow.document, "write", {
value: function (htmlContent) {
const sanitizedContent = sanitize(htmlContent);
originalWrite.call(
iframe.contentWindow.document,
sanitizedContent
);
},
configurable: false,
writable: false,
});
});

return iframe;
}

return originalCreateElement.call(document, tagName, ...args);
},
configurable: false,
writable: false,
});
03/28/2025, 21:13
t.me/unsleeping706/906
9
6
370
Задача оказалась не из легких, в такие тонкости Vanilla JS я еще не вникал, перебрал тонны подходов, играл с прототипами, пробовал модифицировать поля объектов, были очень жесткие solution boundary - я не мог менять порядок вызовов скриптов, не мог менять код, который должен был работать - очень необычный взгляд на вещи, обычно я имею дело (да и вы) с системами, которые вы контролируете, ну и часть third-party решений

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

код клиента был всегда одинаковый, надо было иметь санитайзер document.write, а вот первоначальный скрипт всегда менялся, причем он был минифицирован и разобрать было сложно что так к чему (тут и задебажить, и накрутить какой-то exploit надо)

соответственно, js.js отвечал за внешнее воздействие, в первой задаче он вызывал IIFE (Immediately Invoked Function Expression) и определял в глобальном scope document.write через Object.defineProperty, причем дефолтные значения у такого вызова writable: false, configurable: false


(function() {
const ow = document.write;

Object.defineProperty(document, 'write', {
value: function(...args) {
return ow.apply(this, args);
}
});
})();


и так как мне надо было, чтобы мое переопределение accessor-а document.write = function() {…new implementation…} сработало, требовалось каким-то образом уйти от поинтера на js.js.

Я что только не перепробовал, и с прототипами поигрался, и попробовал найти способ модифицировать/удалить document.write, и пробовал пересоздавать document (но он не перезаписывается), и ставил прокси на document, чтобы подменить вызов document.write своей кастомной имплементацией, в общем даже нашел интересный сайт по веб безопасности, почитал про prototype pollution, посмотрел CVE-2021-21148 CVE-2018-17463 связанные с манипуляцией памяти, чтобы вытащить указатели и переопределить их. Короче все мои пляски заканчивались тем, что document.write ссылается на внешнюю имплементацию и с этим ничего не сделаешь, и тут мне подсказали одну мыслишку, которая сдвинула проблему с мертвого места

Раз уж имплементация document.write js.js неизбежна, надо искать ее exploit-ы! Так я и понял, что надо перехватить Function.prototype.apply чтобы в рантайме санитайзить строку


const originalApply = Function.prototype.apply;

Function.prototype.apply = function (thisArg, args) {
if (!thisArg) {
return originalApply.call(this, thisArg, args);
}

if (
Object.getPrototypeOf(thisArg) === HTMLDocument.prototype &&
args &&
args.length > 0
) {
const sanitizedArgs = Array.from(args).map((arg) => {
if (typeof arg === "string") {
return arg.replace(/classified/gi, "");
}
return arg;
});

return originalApply.call(this, thisArg, sanitizedArgs);
}

return originalApply.call(this, thisArg, args);
};
03/28/2025, 21:02
t.me/unsleeping706/905
6
490
знатоки веб сесурити есть?

1) как обойти Object.defineProperty(document, ‘write’, {value: function(){…}}) из внешнего скрипта, который ставит некоторый метод non-writable / non-configurable до кода, который я контролирую

задача: после исполнения внешнего js, хочу переопределить document.write через:

document.orig_write = document.write;
document.write = (s)=>{
s = s.replace(/classified/gi, "");
document.orig_write(s)
}


document.write всегда ссылается на имплементацию из внешнего скрипта

код из внешнего скрипта:

(function() {
const ow = document.write;

Object.defineProperty(document, 'write', {
value: function(...args) {
return ow.apply(this, args);
}
});
})();


2) теперь меняем Object.defineProperty(document, ‘write’, {value: function(){…}}) на Object.freeze(document), а задача та же

UPD: 1) and 2) solved, в следующих постах расскажу
03/28/2025, 10:50
t.me/unsleeping706/904
2
404
Где искать актуальную и полезную информацию в сфере IT?

Согласно многочисленным опросам, большинство IT-специалистов считают, что непрерывное обучение – ключ к успеху в этой быстро меняющейся области. Но как найти действительно ценные ресурсы в море информации?

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

Что внутри?
➡️Авторские блоги опытных разработчиков и экспертов индустрии.
➡️Советы по построению карьеры в IT.
➡️Инструменты и ресурсы для повышения квалификации и изучения новых технологий.
➡️Материалы по управлению проектами, методологиям разработки и лучшим практикам в IT.
➡️Новости и тренды в мире информационных технологий.

📁В этой подборке только качественные источники, без воды и бесполезного контента. Добавляйте себе и делитесь с коллегами!

Вот ссылка https://t.me/addlist/4pTGlN-zUBoxNjUy

Попасть в папку
03/25/2025, 20:10
t.me/unsleeping706/903
9
16
455
Паттерн User Interaction State

я закликбейтился, и оказалось не зря!

очередной паттерн в копилочку, убрал useEffect driven development для своей RHF формы с подгружаемыми данными, DX стал лучше (говорю не просто с чтения кода, а с учетом накопленных знаний на проекте, 3 месяца форма жила своей жизнью и периодически прилетали баги). При рефакторинге, когда проводил регресс базовых сценариев, поймал баг (дважды не зря, что обратил внимание на гем)

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

креды: https://www.youtube.com/watch?v=bfQ2LZ-rWRg
03/25/2025, 01:16
t.me/unsleeping706/902
Repost
8
1
225
The pit of Failure (or Success)

Часто при проектировании API кроме того что нам важно думать не только о фичах и возможностях которые он дает, но и какой импакт этот API несет при использовании. И тут есть 2 противоположных концепта: Falling Into The Pit of Success/Failure или при переводе Упасть В Яму Успеха/Неудачи.

Какие же ключевые принципы разработки за этим скрываются? Если сократить и упростить, то выйдет: Делай так чтобы правильно было использовать легко, а неправильно сложно. Те наша задача мотивировать людей и поощрять правильное использование API и делать так, чтобы некорректное использование всем видом кричало, что тут дела обстоят не так (fall into the pit of success). Обратный пример, когда API словно подталкивает использовать себя грязно, а использовать корректно больше похоже на тернистый путь или полосу испытаний (Я думаю каждый сталкивался с таким ощущением)

Давайте возьмем пару примеров из API и рассмотрим их:
React:

И тут нам интересно API dangerouslySetInnerHTML, видите что оно делает? Да, оно всем своим видом кричит, что вы делаете что-то опасное и нехорошее, а громоздкость с { __html: "Hello" } дополняет картинку. В добавок вам еще будет сложнее точно сходу вспомнить правильное написание и вы пойдете в документацию, где вам еще раз дадут понять: "скорее всего ты делаешь что-то не то". Это прекрасный пример того, как с помощью API вам не дают применить нечто потенциально опасное.

И вот сегодня я увидел обратный пример из мира Svelte:
let double = $derived(count*2);
double = 3.14;
Это сегодняшний анонс долгожданной фичи, чтобы вычислимые значения могли быть временно изменены. Крутая же фича? В целом да, ее запрашивали и ждали, а без нее приходилось использовать костыли. И вроде как надо радоваться? Нам же дали возможность и маловероятно, что оно что-то сломает... Но вот тут как раз всплывает тема того к чему мы подталкиваем дизайном нашего API.

В реактивной системе необходимость делать writable вычислимые поля достаточно редка. Кроме того нам дали возможность делать только прямую запись, а не условный сеттер который бы позволил сделать two way connection, нет, это не тот случай! Те мы можем просто лезть в кэш вычислимого свойства и подменять его до изменения значения. Ну надо же людям эту фичу, в чем проблема? А в том, что в 99% случаев эта фича не нужна, а вот все 100% $derived полей стали вместо read-only теперь writable. И никакой вас TypeScript не спасет от записи в него случайно (например, при рефакторинге) и вы больше видя перед собой $derived не можете быть уверены записывают что-то в него или нет, эта информация лежит где-то в другом месте компонента и пока вы не прочтете код компонента полностью вы больше не можете быть в этом уверены.

Таким образом эта возможность не подталкивает к правильному использованию сигналов, делает так что допускать случайные ошибки стало проще и при этом осталось относительно скудным по возможностям (как и написал это не дает возможность делать two way connection). С другой стороны мы покрыли возможность 1% от случаев. Вот это пример, когда мы видим собой pit of failure, да нас не мотивируют прямым образом использовать этот функционал неправильно, но "заборчик" рядом с ямой куда-то унесли.

Как этого можно было избежать?
Использовать отдельный нейминг
let double = $writableDerived(count*2);
double = 3.14;
Или использовать отдельный параметр
let double = $derived(count*2, { writable: true }); // или любая другая явная модификация
double = 3.14;
Или на худой конец если мы хотим оставить магию в нашем мире, то создать явное API
let double = $derived(count*2);
$modifyDerivedCache(double, 3.14); // мы сделали неудобное, но однозначное API
Это все еще лучше, чем выкинуть забор и дать неявное по смыслу API.

Не думайте что это "написать плохо на чем угодно можно" /"вопрос прямых рук". НЕТ! Вы, как автор API, должны формировать у людей прямые руки, а кривые выпрямлять. Пожалуйста, прикидывайте в голове эти сценарии: "мотивирую ли я делать что-то плохое" и "поощряю ли я правильное использование". Спасибо...
03/23/2025, 14:50
t.me/unsleeping706/901
2
3
417
Как ребята для своей системы no-code (где можно использовать react компоненты) пытались настроить Error Boundary на server/client side
учитывая разные специфики Suspense в разных средах выполнения

https://x.com/iamakulov/status/1901675365996888082
03/22/2025, 14:36
t.me/unsleeping706/900
5
8
463
Next.js Middleware Vulnerability

https://www.cve.org/CVERecord?id=CVE-2025-29927
https://github.com/vercel/next.js/security/advisories/GHSA-f82v-jwr5-mffw

Prior to 14.2.25 and 15.2.3, it is possible to bypass authorization checks within a Next.js application, if the authorization check occurs in middleware. If patching to a safe version is infeasible, it is recommend that you prevent external user requests which contain the x-middleware-subrequest header from reaching your Next.js application. This vulnerability is fixed in 14.2.25 and 15.2.3.

For Next.js 15.x, this issue is fixed in 15.2.3
For Next.js 14.x, this issue is fixed in 14.2.25

https://github.com/vercel/next.js/commit/52a078da3884efe6501613c7834a3d02a91676d2
https://github.com/vercel/next.js/commit/5fd3ae8f8542677c6294f32d18022731eab6fe48
03/22/2025, 12:56
t.me/unsleeping706/899
4
12
401
SSR applications at scale

ну и раз уж недавно поговорили про event loop lag предлагаю прекрасную статью о том, как скейлить SSR, какие возникают проблемы в Node.js и как их решали в tramvai, с выкладками, статьями от @super_oleg_dev

представляет хороший baseline

сама статья, есть на русском если кому-то удобней
03/21/2025, 19:12
t.me/unsleeping706/898
5
10
434
на прошлой неделе много читал отложенных статей, частью решил с вами заделиться, рубрика будет непостоянная

1) если вдруг по какой-то причине вы тащите с собой стейт менеджер просто потому что привыкли, пора оглянуться и задуматься: а точно он вам нужен?

2) как правильная композиция помогает решить проблемы с оптимизацией рендера в React приложениях

я начал перекатываться в Fullstack и наращиваю экспертизу как t-shaped, в планах завести отдельный канал, чтобы не смущать frontend-oriented аудиторию канала, пока у меня мало ресурсов и компетенций чтобы оценивать что-то на степень “годности”, но иногда буду выкладывать что-то такое

3) как Trigger.dev мониторили event loop lag. Найдя проблему во вложенном цикле, сократили алг. сложность с O(n^2) до O(n), все это понизило потребление CPU и починило их краши. В статье помимо проблемы описывается что такое event loop lag, как настроить его мониторинг
03/21/2025, 14:53
t.me/unsleeping706/897
4
2
433
еще важный поинт, который хочется тут упомянуть: вы не чувствуете тесную связь с кодом, который написала за вас нейронка, когда у вас нет чувства этой “собственности”, которая иногда мешает вам взглянуть на вещи шире и не быть прибитым к одной реализации и потом натягивать на нее обвесы, чтобы решить задачу и остаться в той же парадигме (тут помогают код ревью очень, не быть с замыленным сознанием касаемо решения задачи)

если вы не чувствуете такой тесной связи, мы можете смело выкинуть код, вас не терзают сомнения о том, что вы вложили туда кучу сил/времени: “не зря же я это делал столько?”

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

иногда отсутствие “взгляда со стороны” приводит к тому, что код протухает, его становится тяжелее поддерживать
03/21/2025, 13:26
t.me/unsleeping706/896
2
3
408
Поговорим про ценность агентов / AI / LLM

этих помогаторов надо рассматривать как возможность прототипировать в разы быстрее

если раньше мы тратили две недели на создание сложной структуры под задачу, то теперь мы можем ее поднять за сутки. я сейчас не говорю о том,
что мы сделали за меньшее время систему без багов, конечно, если мы что-то спроектировали быстрее, то и багов там, вероятно, будет больше. но используя ЛЛМ мы способны быстрее рефлексировать над решением, которое получилось. мы всегда думаем про код, принимаем решения, представляем какую-то абстракцию и чем раньше мы получаем какое-то решение, чем раньше начинаем его интегрировать/скейлить, тем быстрее мы получаем обратную связь для себя же (aka ретро). это позволяет нам понимать быстрее чего не хватает в текущей имплементации, и как мы будем это расширять/модифицировать

итерации стали в разы быстрее (если есть понимание к чему итерировать), неудачные планы выкидываются раньше, это ли не экономия времени?

типо, мы реально можем проверять гипотезы в гигантских кодовых базах за время, которое ранее было немыслимо представить (я сейчас говорю о реально сложных вещах)

рецепт прост:
- получаем нетривиальную задачу
- запускаем шестеренки и прикидываем один или несколько планов реализации
- прототипируем через агента, накидывая ему инструкцию по тому дизайну что придумали
- ревьюваем, шлефуем ответы агента
- получаем вариант, который нас устраивает, начинаем смотреть как он приживается (гипотеза)
- начинаем интегрировать / смотреть как наша гипотеза сработала (ревьюваем себя)

этап “оценки себя” после итерации сильно сократился: вы просто изложили мысли (да, перед этим подумали какое-то время), затем сделали проекцию своих мыслей в код, и сделали это так, как хотели, сделали это быстрее, так как агент оперирует шустрее нас.

возможность “зафейлится” быстрее позволяет нам раньше приходить к нужной структуре под задачу, и вот агенты это ускоряют
03/21/2025, 13:21
t.me/unsleeping706/895
2
5
476
выбор очевиден (explicit error handling)

gist
03/20/2025, 21:06
t.me/unsleeping706/893
5
474
03/20/2025, 21:06
t.me/unsleeping706/894
2
4
489
продолжаю делиться нишевыми штуками из Tanstack Query

useQuery/useMutation onSuccess cрабатывает once per query/mutation для всех observers!

если ищете сайд эффект чтобы триггернуть что-то единожды (даже при наличии многих подписчиков), используйте onSuccess на mutationCache/queryCache (https://github.com/TanStack/query/pull/2404)

keep in mind that the callbacks will be executed on every background update, and they will also execute once per observer. So if you use the same useQuery hook (or custom hook that wraps useQuery) multiple times, the callbacks will execute multiple times
03/20/2025, 11:56
t.me/unsleeping706/892
то чувство когда даже AI выполняет рутинную работу через кодмоды, пока ты рефакторишь все руками

btw запросил его пройтись по кодовой базе и заменить компоненты все на “улучшенные”
03/19/2025, 21:45
t.me/unsleeping706/891
16
10
547
так, навайбкодил себе визитку/персональный сайт через v0.dev, будет ли конверсия больше?

https://unsleeping.vercel.app/

1 час на промпты, 2 часа на полировку текстов+подбор картинок (10-11 итераций в v0)
03/19/2025, 15:02
t.me/unsleeping706/890
10
4
579
styled-components все?

Самое смешное, что они не разобрались в RSC
The React core team has decided to defacto-deprecate certain APIs like the Context API (not available in RSC with no migration path.)

нельзя построить интерактивное приложение только на серверных компонентах, так что никто не депрекейтит Context API, ну да ладно

P.S. все потому что они не читали мою прекрасную навигацию по RSC
03/19/2025, 11:23
t.me/unsleeping706/889
3
1
558
Другой реальный пример с фильтрацией данных в useQuery используя select. Представим, что нам надо вернуть как оригинальные данные, так и отфильтровать их.

Так, ну select мы уже знаем, давай вернем originalData + filteredData из кастомного хука? А что если потребители кастомного useQuery не всегда хотят ререндериться при изменении originalData/filteredData - у оригинальных данных один сабскрайбер, у отфильтрованных другой. Как тогда быть?

Пользуемся гемом из моего разбора useSelector-like API: заводим два useCustomQuery, к ним привязываем одинаковый queryKey, из-за одинакового ключа при наличии данных в кеше второй запрос не пойдет в сеть за данными, а передача разных селектов (в первом случае не прокидываем селект, в другом через селект фильтруем) получаем возможность получать независимо получать данные до/после фильтрации.

ну и вишенка на торте, если и стабильного референса на селект не хватает, можно взять какой-нибудь reselect или другой велосипед (хоть самописный), который будет кешировать результат селекта (в случае если у вас селект пробегает большую структуру/тяжелые вычисления)
03/19/2025, 09:59
t.me/unsleeping706/888
6
523
Предел терпимости

не знаю, так у всех или только мне так везет (без сарказма)

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

с одной стороны, хорошо бы завести задачку в tech debt, подумать над тем какое апи идеально ложится под актуальные требования, но это же и бизнесу надо донести ценность такой траты времени, да и вдохновение не помешает

и вот, откладываешь, думаешь один, другой баг пофиксим, поживем чутка, а потом, как-нибудь, сделаем красиво

так продолжается какое-то время, пока тебя не задалбливает это настолько, что ты берешь все в свои руки и рефакторишь as-is, потому что, ну, сил нет. предел терпимости? лень - двигатель прогресса?

далее просто снова как по спирали: гордишься рефакторингом, теперь у нас новая структура, которая в N раз лучше и решает все проблемы, пару итераций продукта, снова монструоза, это и есть жизненный цикл кода? где же идеальная середина
03/18/2025, 23:37
t.me/unsleeping706/887
5
2
478
Продолжаем смотреть на интересные примеры использования Tanstack Query (aka React Query)

Нашел интересный пример рендер оптимизации select функций от множества useQuery:

Пример не выдуманный, мотивация: собрать один результат от трех кверей в одно состояние в кастомном хуке

const firstResult = useFirstQuery(params1, { select: data => data.something });

const secondResult = useSecondQuery(params2, { select: data => data.somethingElse });

const thirdResult = useThirdDependantQuery(
params3,
{
enabled: firstResult.isSuccess && secondResult.isSuccess,
select: (data) => selectData(firstResult.data, secondResult.data, data)
}

return thirdResult.data
)

В таком сценарии получаем ререндер в случаях:
1) query1.something поменялся
2) query2.somethingElse поменялся
3) data из query3 поменялась

если и из query3 надо что-то извлечь, то на помощь приходит useMemo, сначала извлекаем из query3, затем уже мемоизируем результат
03/18/2025, 13:56
t.me/unsleeping706/886
Repost
25
458
03/18/2025, 12:12
t.me/unsleeping706/885
Repost
22
25
460
Ожидание от вайб-кодинга:
Создал SaaS-сервис с подпиской без знаний программирования. И да — люди платят за него. ⌨️

Реальность:
Сервис никак не защищен, кто-то взломал подписку и заспамил базу рандомными данными. Провел ночь в попытке всё исправить 😭

@xor_journal
03/18/2025, 12:12
t.me/unsleeping706/884
7
8
478
решил побегать сквозь доку Tanstack Query, оказалось там есть раздел с блогами от TkDodo, и вот что-то я там залип, решил полезным делиться тут (читаю как сам блог, так и бегаю по всем комментам, иногда там спрятаны гемы)

как часто вы оставляете стабильный референс на select в useQuery? (если не оставляете он вызывается на каждый рендер) Иногда бывает важно передать туда стабильный референс (когда там тяжелые вычисления) через трансформ-функцию определенную вне реакта, либо мемоизированный useCallback.

Рассмотрим, почему это может быть важно. На самом деле название API должно вам сразу напоминать про useSelector подобные API из какого-нибудь Zustand/Redux, когда вы делаете подписку на частичное изменение данных, а не на фул скоуп


export const useTodosQuery = (select) =>
useQuery({
queryKey: ['todos'],
queryFn: fetchTodos,
select,
})

// use in component1
export const useTodosCount = () =>
useTodosQuery((data) => data.length)

// use in component2
export const useTodo = (id) =>
useTodosQuery((data) => data.find((todo) => todo.id === id))


Теперь, если мы поменяем данные в каком-нибудь элементе todo, сам массив data изменится и триггернет useTodo (structural сравнение), а вот для useTodosCount useQuery не проинформирует observer о необходимости обновления

Резюмирую: если у нас референс на select стабильный, селект будет вызван только, когда data меняется.
Поэтому даже если у вас есть много компонентов с таким стабильным селектом, он не будет вызван во время ререндера компонента (даже если у вас идет фоном бекграунд рефетч) до тех пор, пока новая дата не будет отличаться (после структурного сравнения)
03/17/2025, 21:20
t.me/unsleeping706/883
14
11
454
Фильтрация и сортировка в React без боли: TanStack Router в деле

Какой же это кайф переносить стейт фильтрации/сортировки из стора (zustand) в урл, особенно когда у тебя Tanstack Router.

Вместо подписок в каждом компоненте на диспатчер/стейт (через селекторы), просто сделал себе апишек для навигации (write search Params), сделал схему для валидации searchParams

Теперь React просто получает отфильтрованные данные из стора, когда мне надо обновить урл, я просто дергаю filterByRegion, filterBySearch с параметрами, а они уже содержат все взаимодействие с роутером. Роутер уже отвечает за все остальное - когда вызвать снова loader из-за обновленных loaderDeps (аналогия с зависимостями useEffect).

Апи шикарное у Tanstack Router: не надо парсить текущий урл, можно просто указать “.”, не надо думать про текущие searchParams, берем prev и формируем на его основе новый, JSON автоматически парсится роутером, за валидацию отвечает zod, а если что-то фейлится - берет дефолтные значения


const setPrioritySort = (field: TableSortField, order: TableSortOrder) => {
router.navigate({
to: '.',
search: (prev) => ({
...prev,
// priority sort field
psf: field,
// priority sort order
pso: order,
}),
})
}


Короче, да. Поотвязывал реакт компонентики от стора, стор стал полегче (храню только данные с сервера), отдал часть сложности Tanstack Router-у

P.S. для тех, кому интересна мотивация рефакторинга:
до этого я получал данные до маунта через loader роутера, затем уже по явным экшенам (фильтрация/сортировка/поиск) перезапрашивал данные с фильтром. Мне не понравилось, что есть какие-то различия между первичным рендером и отфильтрованными/отсортированными значениями, решил сделать SSOT (single source of true) - url и определить единственное место ответственное за перезапрос данных - роутер
03/17/2025, 17:58
t.me/unsleeping706/882
6
6
485
Посмотрел я бегло на Tanstack Form, API очень похож на RHF, очень понравились селекторы (на основе Tanstack Store) и render prop, чтобы не ререндерить компоненты формы на каждый чих. Единственное что показалось странным - все компоненты controlled, скорее всего это вынужденное ограничение, так как они позиционируют себя как Platform Agnostic, чтобы отвязаться от DOM (в uncontrolled инпутах мы обычно из рефа(ноды) в реакте читаем переменные в момент того, когда нам нужно их провалидировать/засабмитить/whatever). Убрали головняк с типизацией, все типы инферятся из декларации, сплит бандла через лези лоадинг компонентов для формы (оч полезно для титанических проектов)

пример SubscribeButton которая будет ререндериться только, когда isSubmitting стейт формы изменился (а не на каждое изменение структуры стейта)

function SubscribeButton({ label }: { label: string }) {
const form = useFormContext()
return (
state.isSubmitting}>
{(isSubmitting) => }

)
}


хочу теперь попробовать ее в деле, как предоставится возможность что-то собрать (сейчас живу в обвязке RHF+zod+shadcn, не без нюансов, но уже приноровился на uncontrolled-ах делать валидации налету)
03/17/2025, 10:26
t.me/unsleeping706/881
22
17
945
разбираем “минусы” Tailwind из лонгрида Disadvantages of Tailwind

Подумал, что вот, наконец-то, пойму что не так в этом нашем ветре, но чел опять все неправильно понял, так что нет… идем разбираться

> Bloated HTML
Мы давно с вами живем в компонентной модели, чтобы не было “bloated html/jsx”, собираем дизайн систему на основе tw+cva (как я и писал раньше), получается что-то похожее на shadcn, когда есть компонент и есть его варианты: size=“sm”, variant=“outlined”, весь дизайн инКапСулироваН в компонент (так же как мы раньше инкапсулировали стили в css), теперь ваш JSX хорошо структурирован и не раздут

> Changing text content
Ну это странный наброс, я привык текст хранить вообще отдельно от html/jsx, и рендерить по ключу. Его тогда и проще переводить на другие языки, и выносить во внешние системы (чтобы не ходить потом по 1941941 компонентам и обновлять название тарифа). у каждой функции/модуля должна быть 1 причина на ее изменение, если мне нужно обновить текст, я пойду в файл с текстом, но никак не в html/jsx, это супер не масштабируемое решение, которое может иметь право на существование в каких-то небольших проектах, которые не планируют существовать долго

> Code duplication
Очень много наброса на него, но компонентный подход с вариантами и тут все решает. Получаем самодостаточную дизайн систему. Все сравнивается с каким-то примитивным CSS, когда у тебя как будто небольшой лендинг и 1 global css файлик, а не сотни их, как это обычно бывает, и в каждом втором есть display:flex какой-нибудь. Говорит, что в курсах какой-то другой чел копипастит код - наделай компонентов и используй

> Missing values
Ну а как собрать дизайн систему идеально подходящую под всех? Не устраивает дефолт - расширяй конфиг или прописывай кастомы инлайном z-[124]

> Leaky abstraction
Берем cn() из shadcn (утилитарка clsx + twMerge) и не переживаем о порядке классов (актуально, когда надо соблюсти open-closed principle (sOlid) и дать возможности над расширением компонента без изменения исходного кода), btw в shadcn она встроена (утилитарка и cn() внутри компонентов).
Иногда выбор правильной отвертки экономит сотни часов в долгосроке:
Exactly this happened to me many times at my job. For some reason, the classes that I needed to add had no effect. Debugging took hours, and eventually, it became clear that in fact, it was because of Tailwind's output order mentioned above

> Class names are useful
Реально? Это лишняя ментальная нагрузка, я не хочу думать как назвать селектор для элемента, который я планирую стилизовать. Вам просто неймить переменные? Нейминг переменных ровняю к неймингу селекторов

> Identification
Компонентный подход, когда ты видишь страницу разбитую на компоненты - тебе легко ориентироваться, в названии уже лежит секция это, меню это, лист это или какой-нибудь тулбар, внутри грамотной композиции ты уже не путаешься в 2-5 элементах что есть что (пять плюс минус два)

> Quality assurance
Мне наоборот нравится, что не надо настраивать дополнительный тулинг, или проверять удалили ли CSS относящийся к какому-то элементу, который убирают в PR, или в принципе думать о том, как разделять стили, как вынести общие стили, как выкинуть неиспользующиеся стили

> Consistent design
Управление стилями компонента через варианты, вот и консистентный дизайн, перенес один раз из макетов, пользуешься. Требуется обновить или добавить новый вариант кнопки? Добавляешь/изменяешь, нет больше никаких неконсистентных величин размазанных по всему дереву компонентов (если есть - не правильно варите tw)

Возможно если брать tw в обычный html и собирать там что-то большое без помощи фреймворков с компонентным подходом - да, проблемы с поддержкой будут у tw, но в React с нормальным выбором инструментов я в упор пока не чувствую всех минусов от использования tw, а вы?

Ладно, вру, нашел достойный минус, для код ревью: Useless diffs
03/16/2025, 10:21
t.me/unsleeping706/880
6
8
424
Preload Pattern Next.js

Как убрать водопад запросов, в случае, когда у вас есть 2 RSC, разделенные Suspense boundary? В RR7 / Tanstack Router проблема решается с помощью loader-паттерна, когда мы все необходимые данные префетчим до маунта, посмотрим как React Cache API позволяет решить эту проблему в Next.js

Паттерн чем-то похож на использование React use c прокидыванием промиса: мы так же вызываем обернутый геттер (getComments) в cache выше по дереву в RSC, не используем await, затем уже ниже по дереву получаем зарезолвленный результат


export default async function PostPage({ params }: { params: Promise<{ postId: string }> }) {
const { postId } = await params;

// Prefetch the comments, but don't await the promise, so it doesn't block rendering
getComments(postId);

return (

Post: {postId}


Loading post...
}>



);
}


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

Поэтому, используем крайне осторожно, когда нужно починить перформанс ишью, а не для всех подряд запросов, тем более что fetch() API Next-а уже закешировано/мемоизированно на рендер

Может показаться, что нам поможет параллельный фетчинг Promise.all([getPost(postId), getComments(postId)]), для которого нам потребуется поднять фетчинг комментов выше по дереву и передавать данные пропом, получив жесткую связь + если получение комментариев занимает больше времени, чем получение информации про пост, мы не отдаем верстку юзеру до полного резолва промиса.
03/15/2025, 19:12
t.me/unsleeping706/879
Repost
5
2
390
Как подключить @tabler/icons-react к React на Vite

1. Подключаешь значит такой @tabler/icons-react к React на Vite
2. Немного погодя замечаешь что чот стало все тормозить
3. Открываешь devtoools наблюдаешь over 100500 запросов на react компоненты @tabler/icons-react
4. WTF?!!!!
5. Находишь на reddit решение https://www.reddit.com/r/reactjs/comments/1g3tsiy/trouble_with_vite_tablericons_5600_requests/
6. Слава Reddit!

#react #vite #phosforicons #приколы
03/14/2025, 17:01
t.me/unsleeping706/878
5
443
Примерно каждая 10 платформа для рекрутинга (внешняя система) кроме linkedin:

- чтобы подать, выходишь во внешнюю систему с необходимостью регистрации (там где парсер CV не может распарсить твои штуки, но тут мб у меня СV кривое, это прощаем)
- внешняя система не умеет в job description > 250 cимволов
- внешняя система предлагает при заполнении профиля пройти assessment на проверку твоих скилов перед завершением формированием профиля
- после регистрации в такой системе, пройдя все тесты на указанные в CV/Профиле навыки, смотришь и все равно не можешь аплайнуть из-за какого-то бага
- пробуешь обратиться в сапорт, а там дискорд, смотришь на джобы на этой платформе (не зря же заполнял час сидел) - вся борда джоб фриланс на парт-тайм/ контракт на пару месяцев, а не продуктовая разработка в долгую
- после подачи на внешней системе остается дикий отскрол, листаешь наверх: “thanks for applying”, интересно понимают ли юзеры что экшн уже завершился и можно скролить выше? (нет никаких индикаторов лоадинга, просто форма сменилась на белый экран отскроленный на высоту формы + описания работы)

все это выглядит как будто просто кидают вакансию чтобы поднять кол-во юзеров в своей системе и впечатлить инвесторов
03/11/2025, 01:13
t.me/unsleeping706/877
примерно любая система вне linkedin би лайк:
03/11/2025, 01:09
t.me/unsleeping706/876
1
2
464
Базовое “Небольшую таску сделайте для проверки ваших навыков” на 1440 минут без прерывания (24ч)
03/11/2025, 01:07
t.me/unsleeping706/875
8
442
🚀 Повысьте эффективность вашего бизнеса с помощью ИИ-маркетинга и IT-решений! 🚀

Знаете ли вы, что компании, использующие ИИ в маркетинге, увеличивают вовлеченность клиентов на 30%? Или что автоматизация процессов может сократить затраты до 25%?

ИИ позволяет создавать персонализированные предложения, которые нравятся вашим клиентам, и помогает принимать более обоснованные решения.

Не упустите шанс вывести свой бизнес на новый уровень! Узнайте больше о том, как ИИ может изменить вашу стратегию маркетинга и IT.

👉 https://t.me/addlist/MdFl2q_MTfg3MzFi
03/10/2025, 12:02
t.me/unsleeping706/874
1
3
398
How to gain code execution on millions of people and hundreds of popular apps (cursor, clickup, linear, notion calender)

История белого хакера на $55 000. После небольшого исследования deployment pipeline (hijack through postinstall script), удалось получить config.prod.json + config.prod.json.encrypted. Что это значит? Что небольшая манипуляция и весь способ шифрования/расшифровки у вас в кармане

После расшифровки обнаружился hardcoded firebase full-scoped admin key

https://kibty.town/blog/todesktop/
03/07/2025, 11:48
t.me/unsleeping706/872
2
379
Я не перестаю удивляться, когда вижу как люди предпочитают читать спеку/доку на русском, вместо оригинала, может быть это им проще, но надо учитывать факт расхождений, все-таки владеть английским это мастхев, как минимум, чтобы следить за тем, какие тенденции в твоей области за бугром. Я уже не помню в какой момент я стал смотреть видео на англ без субтитров на скорости, мы все начинаем учить англ в школе, затем в универе (сколько лет он с нами?), ну а сейчас для меня нет разницы в том, на каком языке смотреть или читать что-то, и это классно

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

Понятно, что тексты на английском мы уже умеем читать. Грамматику даже если плохо знаем - тоже можно самостоятельно подтянуть. Но как в нынешнее время прокачивают разговорный? Давайте разбираться
03/05/2025, 11:12
t.me/unsleeping706/870
22
2
390
Как в нынешнее время можно прокачать разговорный английский?

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

AI к такому не подготовит, а вот в онлайн-школе английского Authentic Pigeon смогут.

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

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

Для тех, кто решит опробовать - переходите по ссылке, чтобы записаться на бесплатное демо-занятие или узнать подробности
03/05/2025, 11:12
t.me/unsleeping706/871
3
2
404
Как я упомянул сегодня, с органикой у телеги сложно, similar channels не всегда советуют нужные каналы, поэтому мы сделали подборку для вас

Что в подборке? IT, программирование и AI.

Актуальные новости из мира технологий, тренды и технологии в сфере IT, советы, интересные статьи и исследования в области ИИ, рекомендации по обучению и саморазвитию

Не упустите возможность стать частью сообщества, где знания всегда под рукой!
https://t.me/addlist/FaFsz0UMmy5mYWEy
03/04/2025, 19:01
t.me/unsleeping706/869
21
113
1.1 k
Собрал вам навигацию по самописному контенту и полезным ссылкам за 2024. Можно использовать как мануал для преодоления барьера новой ментальной модели (если у вас такой все еще есть или еще не снят).

Топики на любой вкус и цвет: RSC, Next js, Vercel Billing Optimization, Server actions(functions), PPR, use cache директива, React js, Other

Лучший способ поддержать меня - поделиться контентом из канала, так как в телеграме отсутствует органика

RSC:
- Почему Next.js, Client-boundary, отличие RSC от привычного и знакомого SSR, Lazy loading VS RSC
- Визуализация слотов, или как совмещать RSC и RCC
- Как жить без контекста в RSC
- Отличие RSC от SSR, что такое Hydration
- Rendering Lifecycle of RSC: внутренняя кухня
- Трактуйте букву S в RSC как static/serialized, и сразу станет жить проще: оказывается и dev машина у вас сервер

Next js related:
- Если вы все еще путаетесь между CSR/SSR/SSG/ISR
- Фишка Next js cache, которую вам хотелось бы узнать пораньше
- Оптимизация страниц в next js с помощью isr (Incremental Full Route Cache on Dynamic Segments)
- Как правильно варить runtime env в next js в модели build once, deploy many
- Why can't i use cookies in next.js page.tsx
- Интересное расследование потери клиентского next-runtime-env конфига при навигациях в Next (первая и единственная пока статья на хабр)
- Стандартные ошибки трактовки новой ментальной модели: RSC и директивы 'use client/server'
- Разворачиваем исходники Next.js локально и пытаемся понять, почему при ревалидации RSC Child, RSC Parent так же ревалидируется

Vercel Billing optimization:
- Как не получить чек на $1000 при деплое Next.js на Vercel или советы по оптимизации расходов на serverless
- Невероятные чеки за серверлесс

Server actions (functions):
- Возвращаем RSC из server-action
- Блокирующая природа сервер экшенов в некст жс

PPR, 'use cache':
- Что такое Prerendering, текущая проблема со static/dynamic rendering в Next.js, как это решается с помощью React Boundaries, как работает PPR и чем он отличается от других видов рендеринга
- Про PPR, dynamic IO, управление статикой (грануляция на уровне компонент), use cache
- Закрытый вебинар про PPR

React js related:
- Виртуализация, RHF + zod + uncontrolled inputs, нормализация данных, псевдородители, useEvent
- Unintuitive behavior of React Hooks
- TDD как способ облегчить себе рефакторинг
- Разделение логики и UI для масштабируемой архитектуры
- Уходим от Сontrolled Inputs
- Про хороший паттерн композиции компонентов
- Антипаттерны React
- Неконсистентный UI (отсюда и пару постов ниже), новые баги, которые мог принести Concurrent rendering от React 18+
- React Taint API
- Оптимизация реакт кода (идиоматическая композиция), (отсюда и пару постов ниже)
- Убираем проп дриллинг с помощью композиции

Other:
- Как небольшой анализ веб приложения дал мне годовой доступ к платформе (360$ worth)
- Используем shadcn cli для создания своих шаблонов (для vite: отдельная ссылка)
- Вы точно этого не знали про devtools
- Как с помощью небольшого бойлерплейта создать примитивы для тестирования гипотез работы кода в сложных сценариях (проваливаемся в комментарии тоже)
- Tailwind + cva для того, чтобы не было лапши из классов, а были варианты (пример кода до/после: отдельная ссылка)
03/04/2025, 11:55
t.me/unsleeping706/868
10
5
295
Перед тем как дропать навигацию (aka 2024 Wrapped), я вас немного прогрею, чтобы была мотивация наростить экспертизу

Поговорим сегодня про React Server Components. React 19 предоставляет возможность для сборщика трактовать компоненты статическими/интерактивными. Да, я хочу сразу их назвать именно так, чтобы не создавать путаницы в этих директивах 'use client' / 'use server'.

Поясню сразу, почему директивы не отражают то, что они делают.

директива 'use client' это про клиентские компоненты. вы можете подумать о том, что они выполняются только в браузере, но это не так, Next.js умеет в пререндеринг клиентских компонентов
Next.js will use React's APIs to render a static HTML preview on the server for both Client and Server Components

Можно ли собирать клиентские компоненты ТОЛЬКО на клиенте? Да, используйте next/dynamic + ssr:false (там же можно указать fallback). next/dynamic - обертка над React.Suspense

'use server', это вообще не про серверные компоненты, это про server actions(functions). Если вы пометили файл как 'use server', это не будет server boundary, все export async functions превратятся в публичные апи роуты. Если вам нужна серверная граница в привычном ее понимании, чтобы серверный код не исполнялся на клиенте, для BFF сокрытий и прочего, используйте для этого import 'server-only'

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

Так же как вы размечаете макеты на UI компоненты в голове, научитесь отличать интерактивные компоненты. Интерактивные компоненты это про взаимодействие юзера, event handler-ы, хуки, эффекты, стейты (ваш привычный реакт код client-side веб приложений)

Все ограничения и бенефиты RSC идут из определения серверных компонентов. Результат работы RSC -> html + RSC Payload. Все что можно сериализовать - можно передать от сервера на клиент. RSC Payload - инструкция для реакта на клиенте для быстрой гидрации, теперь не нужно передавать весь JS бандл, как это делается при стандартном SSR, чтобы затем исполнять его для получения интерактивности (гидрация).

Так как RSC собираются на сервере => они не могут в ререндеры. Нужен ререндер -> идем на сервер, получаем снова нарисованную страницу/компонент.

Нет ререндеров => не работают хуки/стейты.

Почему event handler-ы не передать в RSC? вся проблема в замыканиях, отсюда и невозможность сериализации функций. Нет браузерного окружения, отсюда недоступны все браузерные api

Какие бенефиты у RSC?
1) На клиент уйдет только результат выполнения функции. Получаем хорошую оптимизацию в нетворк пейлоаде

Работает это так, что если у вас есть список альбомов, где тип альбома представлен рядом свойств {cover, title, description, artist, likes, ...}, но при рендеринге всех альбомов внутри серверного компонента вы используется albums.map() и берете, допустим, только title и artist от каждой сущности, то на клиент будет отправлена сериализованная копия альбомов содержащая только данные необходимые для получения хтмл, лишние поля не полетят по сети. Без RSC проблема решается путем подготовки dto под рендер (graphQL или точечный REST api)

2) так как код исполняется на сервере, мы можем ходить в бд, читать env (про runtime env рассказываю тут, его не так просто настроить в парадигме “build once deploy many”)
03/03/2025, 11:58
t.me/unsleeping706/867
16
316
нас спалили нарисовали, расходимся
03/01/2025, 13:45
t.me/unsleeping706/866
5
339
Можно ли пользоваться LLM/ai агентом, если экспертизы у вас недостаточно? Ответ: и да и нет.

Понятно, что какие-то небольшие проекты можно написать с нуля вообще без экспертизы через тесты и промптинг, но как оценить результат?

Конечно, мы можем рассматривать результат с точки зрения полученной функциональности, и нас это вполне устроит на уровне MVP/PoC. Но что если работа на этом не закончится? Что если фичи придется пилить дальше, хватит ли вам контекстного окна текущих моделей чтобы умещать всю кодовую базу, надолго ли? вы точно научились пользоваться правилами и включать лишь нужные файлы? Вы сами то разобрались во всех зависимостях между модулями?

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

Понятно, что у каждого из нас есть некоторый бекграунд, и мы понимаем, как не сделать плохо или как улучшить структуру кода, разбить на модули/функции, повысить читаемость. Понятно, что мы можем через промпты так же причесать и качество кода до того уровня, который нам самим известен (можем, потому что у нас есть в этом ЭКСПЕРТИЗА). Но что делать, если экспертизы у вас нет?

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

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

Безусловно, и для младших ребят ai агент может оказаться полезным, научить базовым сценариям, показать как надо (если вчитываться в код), но все это при наличии эксперта сверху, кто не положит болт на code-review и подсветит проблемы.

Но что делать с обучением? Можно ли с ai агентами учиться быстрее? Можно, но не пренебрегайте документацией, которая написана людьми (но обработана роботами), чтобы лучше понимать мотивацию api дизайна и выбранные решения, которые за вас уже написала нейронка
03/01/2025, 12:33
t.me/unsleeping706/865
6
15
425
Умельцы упаковали React Scan в браузерное расширение

React Scan + Cursor can help optimize React renders and performance with AI

креды: https://x.com/aidenybai/status/1894781722119532702 + попугай
02/28/2025, 11:48
t.me/unsleeping706/864
13
6
411
Cursor умеет возмущаться 🤡?

Пассивная агрессия..
02/27/2025, 19:25
t.me/unsleeping706/863
6
364
Разделение логики и UI для масштабируемой архитектуры

Недавно писал про TDD во фронтенде как средство облегчения рефакторинга (ч1, ч2)

Данный подход спасал меня во время небольших фиксов логики/UI, но как я и писал раньше, сейчас мы подключаем фронт к беку в новом продукте, и, конечно же, апи ожидает немного другой формат данных, а мой снова не подходит.

Проблема нетривиальная - мои вложенные структуры снова требуют рефакторинга, и что-то мне перестала нравится логика намешанная в UI, хоть и у меня были е2е для регреса рефакторинга. Вложенную структуру требовалось обновить так, чтобы можно было хранить референсы родителя. Вдобавок, у меня уже накопился небольшой технический долг: хотелось нормализованной структуры данных для более эффективного traverse через древовидную структуру, хотелось разделить логику от UI, логику упаковать в класс или композицию классов (prefer composition over inheritance), вынесенную логику можно тестировать проще через vitest unit тестирование и забыть про бесконечный поиск playwright locator-ов, так же это поможет достичь separation of concerns (SoC) + single responsibility, помните, что у домена должна быть 1 причина для его изменения? Нужно изменить UI - меняем UI, обновились требования по БЛ - меняем модуль инкапсулирующий БЛ в себе

Расчехлил Cursor, за 3ч в режиме ментора удалось спроецировать свое видение в код. Можно было бы и быстрее, но на старте я еще и сам не понимал, чего я хочу. Надо перестраивать свое мышление на промпт инженерское и излагать свои мысли лучше (но это же надо про это думать наперед! я обычно живу в режиме agile - гибко меняю код на ходу, ну не привык я думать слишком наперед). Думаю сам бы делал сильно дольше, если AI агенту потребовалось с десяток итераций, их бы и я прошел сам у себя (а вы проверяете себя через процесс таски?), но только заняло бы это сильно больше времени

На выходе я сформировал три класса, давайте посмотрим на них с точки зрения их возможностей:

NestingNormalizer:
- Focused solely on tree structure management
- Handles normalization of hierarchical data
- Provides clean API for tree traversal (`getItem`, getChildren, `getParent`)
- Benefits: Reusable across different tree structures, easier testing, encapsulated complexity

NestedSelectionManager:
- Uses composition with NestingNormalizer
- Manages selection state independently
- Benefits: Flexible architecture, easier to modify behavior, clear dependencies

NestingUIAdapter:
- Abstracts UI state management using Zustand store
- Provides reactive hooks (`useStore`, `useSize`)
- Bridges business logic with UI
- Benefits: Clean separation of concerns, reactive UI updates, encapsulated state management

Что это означает на практике?
- Каждый класс имеет явные границы (а отсюда и явную зону ответственности) => проще поддерживать
- Зависимости классов можно мокать, БЛ отделен от UI => можно тестировать изолированно
- O(1) вместо O(n) как бенефит от нормализацизованной структуры данных => эффективное взаимодействие со структурой данных: получение/обновление
02/27/2025, 18:23
t.me/unsleeping706/862
Repost
4
6
316
Знаете, что потеряли современные программы? Доверие.

Раньше же было как? Нажал кнопку «Сделать Х» — программа идет и делает Х. Не спрашивает, не уточняет, не ломается, не делает что-то другое, не просит залогиниться, не продает другие фичи, не обучает. Просто идет и делает.

А сейчас как? Хочу я, например, поменять обои на рабочем столе. Я иду и меняю. А потом через неделю обнаруживаю, что опять почему-то включились сраные живые обои и опять жрут два гига оперативки. Хотя они мне не нужны примерно никогда и я не включал их никогда. Кто же тогда включил?

Или на сайте есть галка «запомнить меня». Я нажимаю галку. Что я обнаруживаю на следующий день? Меня снова просят залогиниться. Ну и какое тут доверие?

Или поиск. Мы уже привыкли, кажется, что если ты что-то ищещь, то тебе вместо результатов будут показывать какое-то говно. Типа, «пользователи также искали».

ПОЧЕМУ НЕЛЬЗЯ ПРОСТО СДЕЛАТЬ ЧТО ПРОСИЛИ??? Не умничать, не гадать, не улучшать. Просто пойти и сделать.

Или сегодня например я пытался (вы будете смеяться, да) папку передвинуть на рабочем столе. Не смог (но лулзов много собрал).

Или вот у меня 1Password, они иногда разблокируется, а иногда не разблокируется. Иногда требует пароль, а иногда Face ID достаточно. Иногда синхронизирует пароли, а иногда нет. Почему? Что там за магия? И, главное, как я могу на такое положиться?

Или тот факт, что любой (да, любой, вообще любой) видеозвонок начинается с «меня слышно»? А почему может быть не слышно-то? Железо одно и то же, колонки одни и те же, микрофон один и тот же. Зачем вообще существует состояние, когда программа может не принимать или не передавать звук? Чтобы что? Или почему, скажем, нельзя один раз все настроить? Почему это меняется от ситуации к ситуации?

Ну, про блютус я вообще молчу. Кто из нас не жал кнопку «Коннект» и не сидел как дурак в ожидании чуда.

Неудивительно, что простые люди боятся технологий. Потому что мы больше не пользуемся технологиями. Мы пытаемся выживать в мире технологий, которые в свою очередь или не работают, или пытаются нас наебать. Потерялась эта вот логическая связь «Если я нажму Х, произойдет Х». Вместо этого надо теперь думать, а что имелось в виду, что за компания ее делала, какие у нее цели, на каких технологиях, и что у них за ограничения. Это огромный контекст, который, конечно, никак не передается, а технологии становятся непостижимыми.

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

Правило хорошего интерфейса: нажимаешь на кнопку — работает. Вот так вот просто, да. Никто не умеет почти.
02/26/2025, 20:27
t.me/unsleeping706/861
15
5
385
02/26/2025, 15:34
t.me/unsleeping706/860
4
1
334
Как обновленные лимиты на payload serverless func (Vercel) скрасили мой вечер

Был у меня небольшой проект, который больше полугода лежит и ждет свою аудиторию, проект про генерацию метаданных для подкаста из, собственно, небольшого медиа файла (до 25мб). Все сделал, сдал, работает. Вчера пришла бага, что 13мб файл не грузится, стал изучать. Сам проект по сути ai-proxy (3х уровневый) над клиентом, деплой на Vercel (проще развернуть там для первичной оценки востребованности). Поэтому это никакой не selfhosted, сервера нет, есть только serverless, через которые я хожу в ai через ai-sdk (gpt-4o-mini, whisper-1, dall-e-3)

Поймал serverless func payload too large (>4.5mb), раньше либо все работало, либо не тестировали на средних аудио (10мин), уже не вспомню, начал разбираться, как можно это обойти, использовать внешний стор не хотелось по причине опять же, не self-hosted решения, бекенд я уже умею на nest.js писать, но с деплоями не разбирался (да и не хочется пока), решил попробовать сжатие. Благо Cursor я уже расчехлил, он настроил мне агрессивное сжатие для аудио через OfflineAudioContext (моно-канал, low sample rate 8000Hz, 8bit вместо 16), если и с таким сжатием не канает, взял pako, выбрал уровень сжатия 9 🤯.

serverless func payload победил, но теперь из-за того что я отправляю файл в compressed формате, надо бы и заголовки кастомные добавить (как минимум для сохранения типа файла, как максимум для названия), потом еще дописать decode логику на сервере, логика вокруг ai ждет от меня File, окей, все еще несложно, но теперь я уперся в serverless func max time invocation (max 60s на hobby). Decoding стал занимать некоторое время, из-за чего на всю ai-цепочку оставалось меньше времени. Все предельно ясно, надо разбить одну serverless func на несколько.

Этим я и занялся, сначала вынес декодинг в отдельный енд поинт: api/decode, тут я получал сжатый payload, получал X-Custom-Headers, собирал из этого исходный файл. Но как теперь пошарить результат api/decode с api/generate-metadata? Вернуть тяжелый файл и кинуть его снова с клиента - бессмысленно, упремся снова в large payload. Сделаем simple cache!

Написал мапу, в нее добавлял файлы и expiredAt (а-ля свой редис), написал cleanup-ы, которые дергал во время инвокейшенов serverless func, но если их нет, как чистить кеш? Таймауты не сработают, если серверлесс функция уже завершилась. Можно удалять файл после процессинга, подумал я.

Стал проверять, обнаружил интересный баг, каждую сессию первая загрузка не может найти файл в мапе(cache), последующие отрабатывают. Cold start? Нет, дело в том, что serverless func инвокаются в изолированных контекстах, поэтому пошерить стейт между ними нельзя (мой simple redis cache представлял из себя export const map, который не всегда шерился между разными серверлесс функциями).

Штош, посмотрим на @vercel/kv, которые, оказывается уже переезжают на маркетплейс. Нашел там redis + upstash redis. На первом лимит стора на фри тарифе 30мб, что дает мне предел в 6 пользователей, как-то вяло, да? 🤡 На втором лимит 10к запросов к инстансу в день, выглядит что надо, развернул (2секи), подключаю, тестирую, payload too large (free tier 1mb).

Окей, раз нельзя пошерить мапу(кеш), начнем сохранять файлы в /tmp. Для этого я начал после api/decode выдавать подписанный секретом токен, в токене была информация о пути к файлу, токен можно было верифицировать при получении на api/generate-metadata и избегать ушлых хакеров, которые решат получить транскрибции моих внутренних файлов сервера(или серверлесса? 🤡)

Но и это оказалось не финишной прямой, тяжелый файл - более долгая обработка, пришлось и ai-слои раздробить на api/transcribe, api/generate-metadata, api/generate-prompt, api/generate-image. Но теперь UX сильно лучше, разбив на более явные процессы (среди которых, напомню, если сжатие на клиенте), я смог отображать прогресс более четко

пять с половиной часов пролетели за секунду
02/26/2025, 11:56
t.me/unsleeping706/859
23
4
358
Факапы надо уметь признавать и расти на них.

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

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

Опьяненный новыми возможностями, прочитав тз и посмотрев на мокапы, стек я определил: Tanstack экосистема (Query, Router, Table), shadcn + tw для быстрого шлепанья UI. Развернул React+Vite, взял шаблон админки, нашлепал вьюшек по мокапам, хотелось бы и функциональность написать. По причинам загруженности и капасити команды, bottleneck у нас на бекенде. Нет бекенда, но есть моки, что может пойти не так?

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

Я взял свои яйца в руки и пошел к продакту, сказал все как есть: “да, мой факап. Вот <….>, что я не учел”. Тут можно было бы не брать на себя вину за это, притянуть сюда то, что большая часть встреч по обсуждению продукта происходила без моего участия (не звали), но я не стал

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

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

Чувство вины включило турбо-мод, давно я так не перформил: изменил структуру проекта, ушел от кеша tanstack query в сторону zustand стора, посмотрел как в tanstack router грузятся данные перед маунтом компонента, чтобы уйти от use effect driven development, сбрил всю логику с tanstack table, плацдарм готов

Мечтай по-крупному и позволяй себе ошибаться
02/25/2025, 19:59
t.me/unsleeping706/858
5
1
384
https://www.anthropic.com/news/claude-3-7-sonnet
02/25/2025, 12:51
t.me/unsleeping706/857
14
330
Готовлю для вас пушку

Решил дропать не просто навигацию, а пересобрать некоторые посты, где-то экспертизы больше стало, где-то акцент был на другом, soon…

p.s. тайтлы могут измениться WIP 🚧
02/24/2025, 15:42
t.me/unsleeping706/856
Repost
7
7
228
Оптимизатор Оптимизатора

Дамы и господа! Вашему вниманию предоставляется уникальная возможность воспользоваться новой утилитой для экономии денежек при развёртывании NextJS!

Встречайте: элегантный и миниатюрный скрипт по очистке кэша изображений модуля Image Optimizer, который вы можете запустить в отдельном контейнере вашего кубернетис (и не только) кластера, чтобы избавить ваш мониторинг ресурсов от неверных показателей!

💣 next-image-cache-cleaner 💣

Часть расследования «а зачем вообще потребовалось данное решение?» я описывал в предыдущих постах. И сейчас самое время подытожить, куда же *течёт на самом деле память фреймвока NextJS?

Барабанная дробь… ответ: «никуда» 🥱 .

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

Как оказалось, при создании новых файлов/директорий ОС Linux в дополнение к файлу также создаётся index node (Inode - это метаданные о файле: права доступа, владелец, размеры, временные метки и прочее, подробнее на kernel.org)

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

И этот буфер памяти будет поглощать место под кэш настолько много, насколько это возможно. Видите ли, таким образом достигаются оптимизации по чтению и записи (чтобы не дрочить ваш физический накопитель каждый раз, когда вы совершаете множество CRUD операций в файловой системе 😐 ).

В обычном «домашнем» использовании, когда запущены десятки программ и сервисов, мы не ощущаем этого эффекта накопления на персональных компьютерах, потому что на оперативную память всегда оказывается конкурентное давление других процессов.

А в кластере у нас чаще всего приложение изолировано и ничего не мешает ему раздуваться, картину портит ещё то, что контейнер видит всю память кластера, а не ту, которую вы указали в лимитах пода.
Ну и представьте — что такое лишние 500-1000 Мб оперативы, когда в запасе ещё 100+ Гб?

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

Подробнее про использование RAM в Линус можете прочитать в статье "Help! Linux ate my ram!"

Дело закрыто! 🧑‍⚖️

Если эта информация вам было полезна, то расчехлите свою звёздочку на GitHub в моём репозитории со скриптом (если будут вопросы, как оно работает, приходите в комментарии, всё расскажу)

Давайте продвинем эту тему и поможем бедолагам, которые столкнулись с такой же проблемой 🚀
02/24/2025, 14:38
t.me/unsleeping706/855
7
290
Недавно я рассказывал, что начал “Build your own X” на платформе codecrafters

Так вот, достаточно быстро получилось разобраться с Http server на go, он оказался не таким уж и сложным (на самом деле сложные в этих челленджах только расширения от базового курса, я так с shell terminal застрял и пока что-то лень возвращаться дальше)

В планах было потрогать rust, но я js soyboy, так что вернулся на го в новом курсе по созданию редис, базовая часть прошла прекрасно, я написал парсер протокола редиса, а вот дальше в расширениях курса снова началась какая-то дичь, в общем - рекомендую
02/21/2025, 19:42
t.me/unsleeping706/854
1
303
Я тут недавно осознал вещь, что React Compiler - это не только про оптимизацию вашего React кода. Это еще и потенциальная возможность менять апи дизайн при компиляции.

Устали от миграций очередных breaking changes? Вернулись к проекту спустя пару лет, обновили пакет и все апи deprecated?
Таких проблем можно избежать, если разрабы решат этот вопрос на уровне компилятора. Мы с вами продолжим писать привычный нам код. LLM продолжит нам помогать примерами из типичного для React экосистемы кода (на котором она обучена), все это не перестанет быть актуальным, но откроет потенциальную возможность переработать движок (в данном случае реакта)

Для визуализации представим, что кор тиме реакта понадобилось изменить апи дизайн из в (инлайним пропсы). Можно ли это сделать и без компайлера? да, но тогда вам придется мигрировать кучу кода в новую парадигму. Если эти проблемы будут решаться на уровне Compiler, это перестанет быть проблемами разработчика, мы перестанем мигрировать и подстраиваться под новые требования обновившегося пакета, мы просто продолжим решать свои задачи за сложной абстракцией черного ящика, которому мы сможем доверять

многие хаяли и не верили в React Compiler, воспринимая его как способ оптимизации реакт кода, но что если… это расчитано на дистанцию, сделать инструмент, который решает сильно больше обычной оптимизации 🤫
02/21/2025, 18:49
t.me/unsleeping706/853
5
3
325
Introducing Native Mobile App support on Bolt

You can now go from idea to App Store just by prompting Bolt, no coding necessary

https://x.com/boltdotnew/status/1889706307613073508
02/21/2025, 15:58
t.me/unsleeping706/852
https://x.com/boltdotnew/status/1889706307613073508
02/21/2025, 15:57
t.me/unsleeping706/851
2
16
307
You are using Cursor AI incorrectly

советы для тех, кто пользуется Cursor, но все еще не открыл для себя stdlib

https://ghuntley.com/stdlib/
02/19/2025, 17:00
t.me/unsleeping706/850
1
355
пока все другие выбирают альтернативы claude 3.5 из-за дорогих запросов, мой tabnine сломался с декабря, а claude 3.5 там неограничен 🤡

кто сколько за нейронку отваливает?
02/17/2025, 21:47
t.me/unsleeping706/849
Repost
14
2
228
Люблю вкидывать в обсуждение абсурдные, на первый взгляд, лозунги и смотреть как люди с ними спорят.

Последний раз это было "команду нельзя загружать на 100%", когда мне предложили утилизировать ресурсы свободной команды.

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

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

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

Дядюшка Боб говорит, что любая система должна постоянно переписываться для того что бы ее проще было поддерживать. Когда рефакторить, если у тебя ресурсы утилизированы на 100%?

Получается, что чем больше команда загружена, тем быстрее проект загнется.

Теория очередей
В книге "Проект Феникс" есть формула времени ожидания задачи. Это упрощенный вариант формулы ожидания в системе и выглядит так:

% занятого времени / % свободного времени = единица ожидания времени

Если команда загружена на 90%, то 90/10 = 9 "часов" ожидания в очереди для каждой задачи. При этом в команде без перегруза 50/50=1 "час" в ожидании. Получается, что чем сильнее загружена команда, тем дольше задача просто ждет в очереди.

И это логично: если у тебя расписан весь день, а в него пихнули ещё одну задачу, то ты не скоро до неё доберёшься.

Мотивация
Тут нет никаких пруфов, только личный опыт. Но если я знаю, что моя загрузка 100% и не будет снижаться, то резона спешить с выполнением задач у меня нет - все равно сверху ещё насыпят. Если у вас те же мысли, значит я прав и команда с постоянной загрузкой очень быстро выгорает и уходит, оставляя за собой недоделанные задачи.

В общем, если у вас появилась идея "занять чем нибудь ребят", то лучше сходите погуляйте. Или книжку почитайте. Всяко полезнее.
02/16/2025, 14:42
t.me/unsleeping706/848
Repost
5
3
245
Тут свежайшая статья в Nature, и там офигенная история про то, как сейчас исследуют мозг мыша.

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

На первом видео — стрим мыша.

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

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

Короче, две похожие, но чуть различающиеся задачи, для которых надо не только запоминать, но и анализировать, что происходит.

Мышей обучили оптимальной стратегии, чтобы они лизали трубку только около правильной зоны награды. Когда мыши стали опытными игроками в "Бегущего в лабиринте", выяснилось, что у них прямо в гиппокампе сформировались разные конечные автомататы для двух разных коридоров.

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

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

Дальше при изменениях задачи мыши быстро достраивали или перестраивали свои конечные автоматы в гиппокампе.

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

В общем, выяснилось, что мыши используют Wetware-Defined-Networks в гиппокампе очень активно. Ну и Дум можно запустить на мышах.

Мыша принёс Денис из рок-группы Клей.

--
Вступайте в ряды Фурье! Не пускайте людей в свою шизофрению, они сопрут крокодила!
02/15/2025, 11:38
t.me/unsleeping706/846
Repost
3
262
02/15/2025, 11:38
t.me/unsleeping706/847
Repost
13
2
275
Экстренный выпуск! Я знаю, что обещал писать только про хорошее, и это еще будет, но пока есть очень важная тема:

Вы любите работу?

Очень часто люди говорят, что да, и советуют мне поискать другую, когда я им говорю, что не люблю.

Мне кажется, наше непонимание тут прячется в языке. «Я люблю работу» обычно значит, что, ну, мне окей, я готов это терпеть. И в этом смысле я понимаю и принимаю, что да, так мир устроен, и все мы, кому не повезло родиться в богатой семье, вынуждены 45-50 лет работать, пока не умрем, с перерывами раз в год на пляж. Что ж поделаешь. Родился, покоммитил 50 лет в монорепу, умер. Надо научиться как-то получать удовольствие.

Но мне кажется, здесь нельзя использовать слово «люблю». Люблю — значит, что делаю это добровольно, и что это самое лучшее, что я могу себе представить. И под это определение, мне кажется, работа очень редко попадает.

Вот представьте — вам не нужны деньги, и работа не дает вам денег. И что, вы, вот лично вы, будете после этого продолжать добровольно ходить в офис, встречаться с теми же людьми, собираться на те же самые созвоны, те же задачки в жире закрывать? Правда? Честно? Типа вот есть человек, который такой: «Знаете, если бы мне не платили, я бы все равно ходил и коммитил фиксы в AWS, мне это нравится и я бы посвятил этому жизнь»?

Не, если так, то я конечно очень за вас рад. Напишите, если это про вас, и кем вы работаете и где. Мне бы не помешали положительные примеры.

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

Я люблю программирование — само по себе — и да, я бы им занимался, если бы даже мне за него не платили (и я занимался, то есть это проверенный факт). Но вот ходить и работать именно работу — ну хз, как это можно любить. Обидно тратить жизнь на достижение чужих целей.
02/15/2025, 09:57
t.me/unsleeping706/845
Search results are limited to 100 messages.
Some features are available to premium users only.
You need to buy subscription to use them.
Filter
Message type
Similar message chronology:
Newest first
Similar messages not found
Messages
Find similar avatars
Channels 0
High
Title
Subscribers
No results match your search criteria