Frontend Разработка | JavaScript & Верстка сайтов. HTML, CSS и React. Уроки для Фронтенд Developer. JS, Vue и Web технологии. IT Карьера, Курсы и Coding. в мессенджере MAX — 1 653 подписчиков, аналитика и статистика

Последние публикации канала «Frontend Разработка | JavaScript & Верстка сайтов. HTML, CSS и React. Уроки для Фронтенд Developer. JS, Vue и Web технологии. IT Карьера, Курсы и Coding.»

1. 87 просмотров, 31 июл. 2026 г.

   🔥 useMemo vs. переоптимизация Многие мидлы бездумно оборачивают всё подряд в useMemo, думая, что так улучшают производительность. На деле — часто наоборот: добавляют лишние вычисления и усложняют отладку. 📌 Когда useMemo реально нужен: - 🧠 Тяжёлые вычисления (парсинг, сортировка, фильтрация больших массивов); - 🧱 Объекты/массивы в props, чтобы избежать лишних ререндеров memo-компонентов; - 🖼️ Стабильность зависимостей в useEffect. ❌ Когда НЕ нужен: - 💨 Простые вычисления (арифметика, строковые конкатенации); - 🧹 "на всякий случай" — без профилирования. 📊 Как…

2. 251 просмотров, 30 июл. 2026 г.

   🔥 Vue: тонкий нюанс с v-if и v-for Если используешь v-if и v-for на одном и том же элементе — осторожно! Порядок важен 👇 <!-- ⚠️ Антипаттерн --> <li v-for="item in items" v-if="item.visible"> {{ item.name }} </li> Такой код неэффективен: v-if не влияет на v-for — Vue сначала рендерит все элементы, а потом фильтрует по v-if. ✅ Лучше так: <li v-for="item in visibleItems"> {{ item.name }} </li> А в computed: computed: { visibleItems() { return this.items.filter(item => item.visible); } } 💡 Это улучшит производительность и избавит от неожиданных багов при больших…

3. 297 просмотров, 29 июл. 2026 г.

   🚨 Антипаттерн: усложнённые condition-рендеры Иногда в JSX попадаются вот такие "шедевры": {isLoggedIn && user?.settings?.theme === 'dark' && !isLoading && <DarkDashboard />} 🧠 Да, работает. Но читаемость? Поддержка? Страдает. ✅ Лучше так: const shouldShowDarkDashboard = isLoggedIn && user?.settings?.theme === 'dark' && !isLoading; return ( <> {shouldShowDarkDashboard && <DarkDashboard />} </> ); 📌 Плюсы: - легко отлаживать; - можно переиспользовать; - код "говорит", что делает. 🎯 Правило: выноси сложные условия из JSX — это прокачивает читаемость и облегчает…

4. 375 просмотров, 27 июл. 2026 г.

   🔥 React: useEffect с async-функцией — антипаттерн! Многие пишут так: useEffect(() => { async function fetchData() { const res = await fetch('/api/data') const json = await res.json() setData(json) } fetchData() }, []) 💥 Это работает, но неявно. Возникают проблемы: - нет отмены запроса при анмаунте; - сложно обрабатывать race conditions; - нельзя обрабатывать ошибки на уровне useEffect. ✅ Лучше — использовать AbortController и обычную функцию: useEffect(() => { const controller = new AbortController() fetch('/api/data', { signal: controller.signal }) …

5. 467 просмотров, 22 июл. 2026 г.

   🔎 Как "убить" ненужный console.log в проде — элегантно Многие забывают удалять console.log, warn, error перед продом. Это 💩 и баги безопасности, и просто шум. Есть изящное решение — удаление логов на этапе сборки. Для Vite / Rollup / esbuild / Terser — добавьте: 🔧 Terser (например, в Vite): // vite.config.ts terserOptions: { compress: { drop_console: true, drop_debugger: true, }, } ⚙️ Esbuild: esbuild: { drop: ['console', 'debugger'], } 💡 Совет: Если используете логгер типа logger.info(...), настройте статический анализ через Babel plugin или tree-shaking. Важно: не…

6. 443 просмотров, 22 июл. 2026 г.

   🔥 useDeferredValue: плавный UX без костылей При ререндере сложных компонентов (таблиц, графиков, списков) часто случаются лаги при вводе. useDeferredValue из React решает эту проблему ✨ 🧠 Как это работает? Хук откладывает обновление значения до тех пор, пока браузер не "освободится". Ввод остаётся отзывчивым, а тяжёлые компоненты обновляются асинхронно. const [query, setQuery] = useState(''); const deferredQuery = useDeferredValue(query); const filteredData = useMemo(() => { return heavyList.filter(item => item.includes(deferredQuery)); }, [deferredQuery]); ⚠️ Важно:…

7. 481 просмотров, 21 июл. 2026 г.

   🔥 Трюк с :has() в CSS — как маленький хак улучшает UX Селектор :has() поддерживается во всех современных браузерах. Его часто называют «селектором родителя», но он куда мощнее. Вот пример, как улучшить UX форм без JS 👇 form:has(input:invalid) button[type="submit"] { opacity: 0.5; pointer-events: none; } 📌 Что делает: Если в форме есть невалидный input, сабмит-кнопка становится неактивной. 💡 Применения :has(): - Показывать/прятать элементы в зависимости от вложенности; - Делать UI реактивным без JS; - Улучшать доступность форм и состояний. ✅ Минимализм, UX и современный…

8. 401 просмотров, 20 июл. 2026 г., изображение

   🎥 Вебинар: Выбор между Serverless и Kubernetes для AI-ворклоадов: как определить оптимальную платформу под задачу На открытом уроке рассмотрим: - В чем различаются Serverless-подходы и Kubernetes при работе с AI-ворклоадами; - Какие преимущества и ограничения есть у каждого подхода с точки зрения масштабируемости, стоимости и сложности эксплуатации; - Какие трейдоффы нужно учитывать при выборе платформы: холодный старт, управление состоянием, поддержка GPU; - Как обосновывать выбор архитектуры для разных AI-сценариев на практическом воркшопе. После занятия вы будете знать: - Как сравнивать…

   
9. 459 просмотров, 20 июл. 2026 г.

   🔥 useMemo vs useCallback — не путай! Многие React-разработчики путают useMemo и useCallback. Давай раз и навсегда разберёмся: 🤯 В чём разница? - useMemo(fn, deps) — мемоизирует значение, возвращает результат выполнения fn(). - useCallback(fn, deps) — мемоизирует саму функцию, возвращает fn. 💡 Когда использовать? - useMemo — если ты вычисляешь что-то тяжёлое или зависящее от пропсов/стейта: const filtered = useMemo(() => data.filter(i => i.active), [data]); - useCallback — если передаёшь функцию в дочерний компонент, чтобы избежать лишних ререндеров: const handleClick =…

10. 481 просмотров, 19 июл. 2026 г., изображение

    🔥 Трюк с :has() в CSS: "Родительская магия" Селектор :has() наконец стабильно работает во всех современных браузерах. Это открывает мощные возможности — реакция родителя на состояние потомка без JS! Пример: подсветить div, если внутри есть заполненный input: div:has(input:valid) { border: 2px solid green; } Или показать ошибку, если инпут невалиден: form:has(input:invalid) .error-message { display: block; } 📌 Зачем это нужно: - 💡 Упрощает логику UI без JS - 🚫 Убирает необходимость в лишних классах и хендлерах - 💪 Делает компоненты декларативнее и чище Проверить поддержку:…

    
11. 540 просмотров, 17 июл. 2026 г., видео

    Совет по HTML 💡 Возможно, ты не знал об этой HTML-сущности для вставки мягких переносов слов 🤩 👉 @frontend_1

12. 620 просмотров, 15 июл. 2026 г., изображение

    Совет по JavaScript 💡 Одна строка кода, чтобы определить, есть ли в массиве дубликаты 🤩 👉 @frontend_1

    
13. 645 просмотров, 13 июл. 2026 г., видео

    🧠 KeyUX — это легковесный JavaScript-фреймворк для описания пользовательских интерфейсов через "ключи внимания". Он помогает разработчикам сосредоточиться на UX-логике, а не на структурной разметке UI. 🔹 Минимум кода 🔹 Управление вниманием пользователя через декларативные ключи 🔹 Подходит для сложных интерфейсов без необходимости создавать бесконечные состояния UI Пример кода: import { createApp } from 'keyux' createApp({ keys: { search: { on: 'input', effect: ({ value }) => console.log('Search:', value) } } }) https://github.com/ai/keyux 👉 @frontend_1

14. 599 просмотров, 09 июл. 2026 г., изображение

    🎯 CSS @scope: способ ограничить область действия стилей До сих пор в CSS не было простого и надёжного способа ограничить действие стилей внутри конкретного контейнера. Мы полагались на такие приёмы, как уникальные классы, переопределение селекторов или CSS-in-JS. Но теперь у нас есть @scope. Что такое @scope? @scope — это новая директива в CSS, которая позволяет задать область применения стилей. Она похожа на @media, но вместо условий она ограничивает, где стили будут применяться в DOM. @scope (.card) { h2 { color: red; } } Этот код применит красный цвет только к h2, находящимся…

    
15. 612 просмотров, 08 июл. 2026 г., видео

    Совет по HTML 💡 Обеспечьте лучший пользовательский интерфейс для ввода текста, автоматически выделяя слова, символы или предложения заглавными буквами при вводе данных в текстовые поля 🤩 👉 @frontend_1