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

🛠 Управляйте localhost-портами без лишнего lsof Port-Whisperer — CLI для тех случаев, когда на 3000, 5173 или другом порту внезапно уже что-то запущено. 🤩 показывает занятые порты 🤩 определяет процессы и приложения 🤩 помогает завершать ненужные процессы 🤩 умеет мониторить порты в реальном времени Полезная утилита для локальной разработки, особенно когда одновременно работают несколько проектов. 👩💻 GitHub 🐸 Библиотека фронтендера #stack

🔥 — 1 2 3 ❤️ — undefined undefined undefined 🥰 — 3 3 3 🤔 — 0 1 2 🐸 Библиотека фронтендера #code_challenge #js

🦊 Firefox 154: новые возможности CSS 🈶 sibling-index() и sibling-count() — позволяют получить позицию элемента среди соседей и их общее количество. Удобно, например, для динамических эффектов и декоративных раскладок. 🈶 text-box — сокращённый способ управления вертикальными отступами текста через text-box-trim и text-box-edge. Особенно полезно для точного выравнивания текста. Теперь обе возможности доступны во всех основных браузерах. А в экспериментальном режиме Firefox 154 также получил progress() — ещё один интересный шаг в сторону более гибной fluid-типографики. 🔗 Источник 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #release_digest

📐 Делаем fluid-значения в CSS предсказуемыми clamp() отлично подходит для адаптивных размеров, но результат может быть вроде 19.7px или 143.2px. Функция round() позволяет привязать вычисленное значение к нужному шагу: .title { --size: clamp(1rem, 1rem + 2cqw, 2rem); font-size: round(down, var(--size), 4px); } Теперь размер будет двигаться по шагам: 16px → 20px → 24px → 28px → 32px. Можно использовать up, down, nearest или to-zero. Особенно полезно для типографики, spacing и привязки элементов к layout grid. 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #readme #css

💬 Закрепляем скролл чата внизу без JavaScript С помощью overflow-anchor можно обойтись без MutationObserver и scrollTo(): ... #scroller * { overflow-anchor: none; } #anchor { overflow-anchor: auto; height: 1px; } Отключаем scroll anchoring для содержимого и оставляем его только на элементе в конце списка. Браузер использует его как якорь и удерживает скролл у нового контента. 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #readme

🎯 Interest Invoker API — тултипы без единой строчки JS Раньше, чтобы показать поповер по ховеру, нужен был JavaScript. Теперь — достаточно HTML. ➡️ Как работает: interesttarget связывает элемент-триггер и поповер. Браузер сам обрабатывает hover, focus или long-press и показывает подсказку. Можно совмещать с Popover API и Anchor Positioning для точного позиционирования. ⚠️ Поддержка: Пока экспериментальная — работает в Chromium-браузерах (Chrome 135+, Edge 135+). В Firefox и Safari API ещё не реализован, поэтому стоит использовать фолбэк или JS-вариант для совместимости. 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #readme #html

⚡ 35 млн точек в браузере — и около 72 FPS ChartGPU — библиотека для визуализации больших датасетов через WebGPU вместо Canvas2D или WebGL. ⬇️Поддерживает стриминг данных, ⬇️несколько графиковна одном ⬇️GPUDevice, GPU-decimation и ⬇️даже 3D-серии. Авторы ⬇️показывают бенчмарк с 35 ⬇️млн точек примерно при 72 ⬇️FPS. Особенно интересно для дашбордов, мониторинга, финтеха и observability-интерфейсов, где обычный Canvas уже становится узким местом. ❗️ Но есть важное ограничение: fallback на Canvas/WebGL нет, поэтому поддержку WebGPU нужно проверять отдельно. 🔗 Ссылка на GitHub 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #stack

🤔 Вопрос с собеседования Что произойдёт с состоянием компонента, если изменить его key? Допустим, userId меняется с 42 на 43. ❤️ — состояние сохранится, изменятся только props 🔥 — React пересоздаст компонент, и state сбросится 👍 — state сбросится только при использовании React.memo 👇 Правильный ответ (нажми, чтобы прочитать): React связывает состояние с позицией компонента в дереве. key позволяет дополнительно указать его идентичность. Когда key меняется, React воспринимает элемент как другой компонент и создаёт его заново — поэтому локальный state сбрасывается. И да: key нужен не только для списков. Его можно намеренно использовать, например, чтобы очистить форму при переключении на другого пользователя. 💼 Щелкаешь такие задачи как орешки? Найди проект с достойной зарплатой тут 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #career_merge

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