Please open Telegram to view this post
VIEW IN TELEGRAM
😁7🌚2
— Не создавайте функции прямо в JSX
— Используйте useCallback при передаче хендлеров в дочерние компоненты
— Особенно критично для списков и больших UI
#hotfix #react
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔6👍5🔥3😁2❤1
Кажется, что это просто поиск элемента на странице — но под капотом браузер делает куда больше.
Он использует готовые структуры DOM и CSSOM, разбирает селектор в токены и выполняет оптимизированный поиск с кешами и хеш-таблицами.
#under_hood #js
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥3🥰3❤2👍1
Пошаговое руководство по симуляции солнца, дождя, снега и грозы в интерактивном трехмерном приложении для прогноза погоды.
Автор показывает, что за красивым синтаксисом скрываются подводные камни специфичности и неожиданные баги, из-за которых старые добрые keyframes по-прежнему оказываются надёжнее.
#read_watch #react #js #ts
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3🔥1
Палиндром — это слово или фраза, которые читаются одинаково в обе стороны:
level, madam, А роза упала на лапу Азора.
const isPalindrome = str =>
(s = str.toLowerCase().replace(/[^a-zа-яё0-9]/gi, '')) === [...s].reverse().join('');
• toLowerCase()
— приводит строку к одному регистру.• replace(/[^a-zа-яё0-9]/gi, '')
— убирает все символы, кроме букв и цифр.• [...s].reverse().join('')
— переворачивает строку.• Сравниваем оригинал и перевёрнутую версию.
function isPalindrome(str) {
const s = str.toLowerCase().replace(/[^a-zа-яё0-9]/gi, '');
for (let i = 0, j = s.length - 1; i < j; i++, j--) {
if (s[i] !== s[j]) return false;
}
return true;
}
#readme #js
Please open Telegram to view this post
VIEW IN TELEGRAM
❤4🥱2👍1🔥1
💥 Весь октябрь -40% на курсы для разработчиков в proglib.academy
Бери знания под свой стек:
Python | алгоритмы | математика для Data Science | архитектура кода.
⚡️ Пока скидка действует, апдейтни свои навыки
Бери знания под свой стек:
Python | алгоритмы | математика для Data Science | архитектура кода.
Пока одни ждут «идеальный момент», другие просто учатся.
А потом берут ваши офферы.
⚡️ Пока скидка действует, апдейтни свои навыки
❤3
🏗️ Plugin Architecture во фронтенде
Обычно приложения растут вширь — и рано или поздно перестают помещаться в одну кодовую базу.
Плагинная архитектура решает эту проблему иначе: ядро остаётся стабильным, всё остальное — расширения.
⏬ Как это работает:
Есть core — минимальная часть с бизнес-правилами, безопасностью, логированием и общими утилитами.
А вокруг — плагины, которые подключаются через публичный API или события. Ядро не знает о них ничего — только о контракте.
⏬ Зачем это нужно:
— модульность и независимые релизы
— возможность кастомизации под клиента или регион
— развитие без трогания основного кода
🔆 VS Code, Figma, Obsidian, Grafana — все построены на этой идее.
⏯ Когда не подойдёт:
— если нет строгого API
— если плагины тесно зависят от общей логики
— если команда одна и продукт небольшой
🐸 Библиотека фронтендера
#blueprint
Обычно приложения растут вширь — и рано или поздно перестают помещаться в одну кодовую базу.
Плагинная архитектура решает эту проблему иначе: ядро остаётся стабильным, всё остальное — расширения.
Есть core — минимальная часть с бизнес-правилами, безопасностью, логированием и общими утилитами.
А вокруг — плагины, которые подключаются через публичный API или события. Ядро не знает о них ничего — только о контракте.
— модульность и независимые релизы
— возможность кастомизации под клиента или регион
— развитие без трогания основного кода
— если нет строгого API
— если плагины тесно зависят от общей логики
— если команда одна и продукт небольшой
#blueprint
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5🔥1
Когда-то он был “про view”. Теперь — серверные компоненты, Suspense, компилятор, серверные экшены. Это уже не инструмент, а целая среда. React стал фреймворком.
Только делает вид, что нет.
#code_battle
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔5😁3
Иногда одна мелочь рушит весь интерфейс. Компонент внезапно сбрасывает состояние и анимации — а виноват всего один key. Раньше использовался
Math.random()
, и React каждый раз считал, что элементы новые.В итоге он пересоздавал их с нуля — с потерей состояния и лагами.
Как решить проблему:
item.id
. Теперь React спокойно обновляет только то, что реально изменилось.#hotfix #react
Please open Telegram to view this post
VIEW IN TELEGRAM
😁9🥱5👍1🤔1
This media is not supported in your browser
VIEW IN TELEGRAM
Изящная форма с мягкими микровзаимодействиями и реалистичной анимацией переворота при вводе CVV.
#readme #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8❤1🥱1
😁4❤2
Please open Telegram to view this post
VIEW IN TELEGRAM
😁7💯1