'use client' + useEffect + fetch — данные загружаются на клиенте. Медленно, нужны loading states вручную, нет кэша.Server Components — просто
async/await в компоненте. Данные на сервере, кэширование через next: { revalidate }.Что это даёт:
revalidate: 60 = обновление раз в минуту Бонус-паттерны:
const [posts, users] = await Promise.all([
fetch('/api/posts'),
fetch('/api/users')
])
export async function createPost(data) {
'use server'
await db.posts.create(data)
revalidatePath('/posts') // Инвалидация кэша
}
<Suspense fallback={<Skeleton />}>
<Posts />
</Suspense>
⚠️ Fetch больше не кэшируется по умолчанию. Явно указывайте
next: { revalidate } или cache: 'force-cache'.#hotfix #react
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰7🔥4🥱3❤2
Забудьте про Popper.js — браузер теперь умеет привязывать элементы сам. Тултипы, дропдауны, попаверы без единой строки JavaScript.
— как anchor() вычисляет координаты относительно якоря
— механизм автоматического fallback при overflow
— почему это в 10× быстрее JS-библиотек
— живые примеры с кодом
🔹 Курс «Алгоритмы и структуры данных»
🔹 Получить консультацию менеджера
🔹 Сайт Академии 🔹 Сайт Proglib
#under_hood
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6❤3👍2🥰1
У нас есть
:open для элементов вроде <details> в открытом состоянии. Логично, что должен быть и :closed для закрытого, правда?Но вот незадача: можно же просто написать
:not(:open). Зачем плодить сущности?С другой стороны — что проще прочитать:
:closed или :not(:open)? Думаете в отрицаниях — это нормально?CSS Working Group три года спорила об этом вопросе, и финал вас удивит.
История о том, как простое решение может стать философской дилеммой. Читайте, если хотите узнать, почему иногда меньше — это действительно больше
#read_watch
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3🔥2🥰2
Media is too big
VIEW IN TELEGRAM
Крутой гайд о том, что JavaScript календари обычно избыточны.
Лучшие альтернативы:
<input type="date"> — браузер всё сделает самСложные UI = больше ошибок и брошенных форм. Простота побеждает.
🔹 Курс «Алгоритмы и структуры данных»
🔹 Получить консультацию менеджера
🔹 Сайт Академии 🔹 Сайт Proglib
#readme #js
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5😁1
Мемоизация полезна только тогда, когда реально уменьшает количество рендеров. На практике же её часто применяют «по привычке», усложняя код и не решая проблему.
— когда useMemo и useCallback действительно нужны
— почему мемоизация «везде подряд» даёт обратный эффект
— как увидеть лишние рендеры и измерить их в DevTools
— как профилировать приложение, чтобы оптимизировать по фактам
#blueprint
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5🥰2👍1
🔥 На рынке сейчас математика — снова король: AI растёт быстрее, чем вузы успевают обновлять программы. Мы же перестраиваем курс под индустрию мгновенно.
Хочешь наконец разобраться в математике для DS, а не гуглить «что такое градиент» перед собесом?
Новый курс «Математика для разработки AI-моделей» — это 8 недель плотной подготовки, свежая программа и только актуальные темы, которые реально нужны в ML.
Что в курсе:
→ линал, производные, градиенты, вероятности, статистика;
→ практика на Python и 3 большие ДЗ;
→ живые вебинары + разбор ваших вопросов;
→ финальный мини-проект, который можно положить в портфолио;
→ доступ к материалам и чат с экспертами.
Для старта нужны только школьная математика и базовый Python.
🎁 Бонусы ноября:
— скидка 40% до 30 ноября;
— «Базовая математика» в подарок при оплате;
→ бесплатный тест уровня математики.
👉 Записывайся на курс
Хочешь наконец разобраться в математике для DS, а не гуглить «что такое градиент» перед собесом?
Новый курс «Математика для разработки AI-моделей» — это 8 недель плотной подготовки, свежая программа и только актуальные темы, которые реально нужны в ML.
Что в курсе:
→ линал, производные, градиенты, вероятности, статистика;
→ практика на Python и 3 большие ДЗ;
→ живые вебинары + разбор ваших вопросов;
→ финальный мини-проект, который можно положить в портфолио;
→ доступ к материалам и чат с экспертами.
Для старта нужны только школьная математика и базовый Python.
🎁 Бонусы ноября:
— скидка 40% до 30 ноября;
— «Базовая математика» в подарок при оплате;
→ бесплатный тест уровня математики.
👉 Записывайся на курс
🥰4
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6😁2
Когда пользователь вводит текст в поиск или изменяет размер окна — запросы летят десятками. Debounce откладывает выполнение функции до тех пор, пока события не прекратятся.
const debounce = (fn, ms) => {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => fn(...args), ms);
};
};
// Использование
const handleSearch = debounce((value) => {
console.log('Поиск:', value);
}, 300);
// В React
<input onChange={(e) => handleSearch(e.target.value)} />
— Автокомплит и live-поиск
— Обработка resize/scroll событий
— Валидация форм при вводе
— Любые частые события
При каждом новом вызове старый таймер сбрасывается и создаётся новый. Функция выполнится только когда пройдёт 300ms без новых событий.
🔹 Курс «Алгоритмы и структуры данных»
🔹 Получить консультацию менеджера
🔹 Сайт Академии 🔹 Сайт Proglib
#readme #js #react
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8❤3🥰3
📦 Container Queries — респонсив по контейнеру, а не по экрану
Проблема: карточка в гриде, сайдбаре и модалке выглядит по-разному. Media queries не помогут — они смотрят на viewport.
ℹ️ Кейсы:
— Виджеты в дашбордах
— UI-киты с гибкими компонентами
— Карточки в разных местах
🟡 Юниты:
⚙️ Поддержка: Chrome 105+, Safari 16+, Firefox 110+
🐸 Библиотека фронтендера
#hotfix #css
Проблема: карточка в гриде, сайдбаре и модалке выглядит по-разному. Media queries не помогут — они смотрят на viewport.
— Виджеты в дашбордах
— UI-киты с гибкими компонентами
— Карточки в разных местах
cqi, cqw — как vw, но для контейнера#hotfix #css
Please open Telegram to view this post
VIEW IN TELEGRAM
❤4🔥1
🎄 Скоро Новый год, а ты всё ещё не в бигтехе?
Если твой путь лежит в ML, DS или AI, то одна вещь решает всё: математика. Без неё — хоть три проекта сделай, хоть сотню туториалов посмотри — на собесе тебя всё равно вернут на «а что такое градиент?»
🔥 Экспресс-курс «Математика для разработки AI-моделей» — 8 недель, чтобы закрыть базу раз и навсегда.
Что внутри:
🔘 живые вебинары, где можно задавать вопросы экспертам
🔘 записи лекций + доступ к материалам
🔘 практические задания на Python и финальный мини-проект с фидбеком
🔘 программа обновлена в ноябре 2025
🔘 2 месяца только нужного — без воды
🔘 достаточно школьной математики и базового Python
🎁 Бонусы ноября:
→ 40% скидка до 30 ноября
→ при оплате до конца месяца — курс «Базовая математика» в подарок
→ бесплатный тест, чтобы узнать свой уровень математики
👉 Хочу стартовать
Если твой путь лежит в ML, DS или AI, то одна вещь решает всё: математика. Без неё — хоть три проекта сделай, хоть сотню туториалов посмотри — на собесе тебя всё равно вернут на «а что такое градиент?»
🔥 Экспресс-курс «Математика для разработки AI-моделей» — 8 недель, чтобы закрыть базу раз и навсегда.
Что внутри:
🔘 живые вебинары, где можно задавать вопросы экспертам
🔘 записи лекций + доступ к материалам
🔘 практические задания на Python и финальный мини-проект с фидбеком
🔘 программа обновлена в ноябре 2025
🔘 2 месяца только нужного — без воды
🔘 достаточно школьной математики и базового Python
🎁 Бонусы ноября:
→ 40% скидка до 30 ноября
→ при оплате до конца месяца — курс «Базовая математика» в подарок
→ бесплатный тест, чтобы узнать свой уровень математики
👉 Хочу стартовать
🥰1