Библиотека фронтендера - JS React

кто… 👨🦳👨🦳 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #pixel_pause

🌸 Вселенная намекает: пора уже начать этот курс С 14 сентября цены в Proglib Academy вырастут на 20% 👀 Так что если курс давно ждёт своего часа — лучше не откладывать ещё на месяц 😏 📍 Выбрать курс

🔥 Debounce на одной строке Когда пользователь вводит текст в поиск или изменяет размер окна — запросы летят десятками. 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 handleSearch(e.target.value)} /> ✅ Когда использовать: — Автокомплит и live-поиск — Обработка resize/scroll событий — Валидация форм при вводе — Любые частые события 💡 Почему это работает: При каждом новом вызове старый таймер сбрасывается и создаётся новый. Функция выполнится только когда пройдёт 300ms без новых событий. 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #readme #js #react

🌞 Готовим вебинар про AI в разработке и хотим сделать его максимально полезным Что реально хочется разобрать? Где чаще всего застреваете? Что пробовали, но так и не получилось нормально внедрить? 🤩 Пишите вопросы в комментариях — самые залайканные разберём на вебинаре в первую очередь. Задавайте всё, что давно хотелось спросить 📍 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера

👩💻 Вышел React 19.3 — и в нём сразу несколько интересных изменений: 🟡 теперь stable. React умеет анимировать появление, удаление, перемещение и изменение элементов через браузерный View Transition API. Можно задавать разные анимации в зависимости от типа перехода через addTransitionType(). 🟡 Fragment Refs позволяют работать сразу с группой DOM-узлов, не добавляя лишний wrapper: Через FragmentInstance можно управлять событиями, фокусом, наблюдением за видимостью и скроллингом. 🟡 use(browser()) — способ явно исключить компонент из SSR, если ему нужны browser-only API вроде localStorage или локального часового пояса. 🟡 Trusted Types — React 19.3 теперь корректнее работает с браузерным Trusted Types API, что важно для защиты от DOM-based XSS. 🟡 В Server Components контекст теперь можно рендерить напрямую через , без отдельного Provider-компонента. React 19.3 выглядит не столько как большой набор новых API, сколько как релиз, который сильно прокачивает работу React с браузерными возможностями, SSR и DOM. 🔗 Источник 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #release_digest

🤩 Библиотеки, которые JavaScript уже умеет заменять Некоторые привычные npm-пакеты сегодня можно не устанавливать — нужная функциональность уже есть в JS и Web API: url-parse → new URL() left-pad → ''.padStart() lodash.last → arr.at(-1) uuid → crypto.randomUUID() deepclone → structuredClone() numeral → Intl.NumberFormat() moment → Intl.DateTimeFormat() lodash.get → obj?.prop?.subprop query-string → URLSearchParams() Перед тем как добавлять зависимость, стоит проверить: возможно, браузер уже умеет всё необходимое. 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #readme

💡 Vue.js: не усложняйте v-bind В Vue часто можно встретить такой код: 🔴 На первый взгляд кажется, что :user="user" и :config="config" избыточны. Но здесь двоеточие — это сокращение для v-bind: 🔴 При этом Vue позволяет сократить запись ещё сильнее, если имя пропса совпадает с именем переменной: То есть Vue сам понимает, что нужно передать значения переменных user и config в одноимённые props. Мелочь, но в компонентах с большим количеством props заметно чище. 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #hotfix

🤔 Вопрос с собеседования Что выведет этот код? ❤️ — 0 1 2 🔥 — 3 3 3 👍 — 0 0 0 👇 Правильный ответ (нажми, чтобы прочитать): 🔘 Будет: 3 3 3 var имеет function scope, поэтому все три callback замыкаются на одну и ту же переменную i. К моменту выполнения setTimeout цикл уже закончился, а i равен 3. 🔘 Если заменить var на let: for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 0); } получим 0 1 2, потому что let создаёт отдельную binding-переменную для каждой итерации. 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #career_merge

🤩 А что, если написать свой текстовый редактор? «VS Code слишком тяжёлый. Сделаю свой редактор!» — примерно так начался эксперимент одного разработчика. 🔘 Первый вариант — всё рисовать через . Курсор, текст, подсветка строки, ввод с клавиатуры — работает. Но почти всё приходится реализовывать самостоятельно: canvas.addEventListener("pointerdown", positionCursor); document.addEventListener("keydown", moveCursor); И быстро выясняется проблема: canvas ничего не знает о тексте. Нет нормального выделения, undo/redo, скроллинга и доступности. 🔘 Тогда появляется идея использовать contenteditable: Браузер сразу берёт на себя выделение текста, историю изменений и часть accessibility. Но на больших текстах производительность становится непредсказуемой. 🔘 Поэтому следующий кандидат — обычный : И неожиданно он оказывается лучшим вариантом для длинных файлов. Правда, синтаксическую подсветку приходится строить отдельным слоем поверх текста. 📍 А потом начинается самое интересное: Unicode. "🍋🟩".length; // 5 [..."🍋🟩"].length; // 3 const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" }); [...segmenter.segment("🍋🟩")].length; // 1 Один визуальный символ может состоять из нескольких UTF-16 code units и нескольких Unicode code points. В итоге автор получил редактор, который выглядит примерно на 90% готовым, но имеет лишь 1% возможностей настоящего редактора. И именно оставшиеся 10% — выделение, виртуализация, подсветка, табуляция, скроллинг, Unicode и accessibility — превращают «простой текстовый редактор» в огромный проект. 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #under_hood