ESLint пора на пенсию: миграция на Oxlint для скорости и удобства
ESLint в больших репозиториях превращается в узкое горлышко: медленно прогоняет проверки и требует сложной настройки. Oxlint — быстрый линтер на Rust с большим числом правил по умолчанию и поддержкой type-aware linting, так что CI и локальная разработка ускоряются, а порог входа заметно снижается.
https://blog.logrocket.com/retire-eslint-migrate-oxlint/
ESLint в больших репозиториях превращается в узкое горлышко: медленно прогоняет проверки и требует сложной настройки. Oxlint — быстрый линтер на Rust с большим числом правил по умолчанию и поддержкой type-aware linting, так что CI и локальная разработка ускоряются, а порог входа заметно снижается.
https://blog.logrocket.com/retire-eslint-migrate-oxlint/
👍12🔥2👎1
Нативные JSON-модули наконец-то заработали по-настоящему
Теперь JSON можно импортировать как полноценные ES-модули:
Разбор происходит в runtime, включается стандартный кэш ESM и исчезают лишние трансформации/loader’ы — а сборщики становятся опциональными.
https://allthingssmitty.com/2026/03/16/native-json-modules-are-finally-real/
Теперь JSON можно импортировать как полноценные ES-модули:
import config from "./config.json" with { type: "json" }. Разбор происходит в runtime, включается стандартный кэш ESM и исчезают лишние трансформации/loader’ы — а сборщики становятся опциональными.
https://allthingssmitty.com/2026/03/16/native-json-modules-are-finally-real/
🔥8❤2
focusgroup в HTML: декларативная навигация стрелками без роувинг-tabindex
focusgroup — атрибут, который добавляет arrow-key навигацию для составных виджетов (toolbar, tablist, menu и т.д.) без ручной настройки tabindex. В браузере остаются только ваши прикладные состояния, а направление, и восстановление фокуса берёт на себя платформа.
https://developer.chrome.com/blog/focusgroup-rfc
focusgroup — атрибут, который добавляет arrow-key навигацию для составных виджетов (toolbar, tablist, menu и т.д.) без ручной настройки tabindex. В браузере остаются только ваши прикладные состояния, а направление, и восстановление фокуса берёт на себя платформа.
https://developer.chrome.com/blog/focusgroup-rfc
🔥6❤3👍1
Forwarded from Web Stack
Три причины раздувания зависимостей в JavaScript
Разбираем три типовых источника dependency bloat: поддержка древних рантаймов, защита от мутаций глобального окружения и кросс realm значения, из за которых в npm деревьях копятся лишние микропакеты. Узнаем, как начать чистить дерево без поломок.
https://43081j.com/2026/03/three-pillars-of-javascript-bloat
Разбираем три типовых источника dependency bloat: поддержка древних рантаймов, защита от мутаций глобального окружения и кросс realm значения, из за которых в npm деревьях копятся лишние микропакеты. Узнаем, как начать чистить дерево без поломок.
https://43081j.com/2026/03/three-pillars-of-javascript-bloat
👍6⚡1
Ценность z-index: как перестать жить магическими числами
https://css-tricks.com/the-value-of-z-index/
z-index управляет порядком наложения UI-элементов, но в больших командах быстро превращается в хаос: числа растут, конфликты и отладка усложняются. Разбираем, почему это происходит, как связаны значения и stacking context, и как спасти проект через стандартизацию уровней наложения.https://css-tricks.com/the-value-of-z-index/
❤8👍3🤔1
requestAnimationFrame для плавных анимаций
requestAnimationFrame помогает синхронизировать UI-обновления с кадром рендера: меньше дрожания, меньше фризов и стабильнее тайминг. Разберём разницу с setTimeout, момент выполнения в пайплайне браузера (INP/next paint) и где уместны альтернативы вроде scheduler.yield, postTask и requestIdleCallback.
https://www.debugbear.com/blog/requestanimationframe
requestAnimationFrame помогает синхронизировать UI-обновления с кадром рендера: меньше дрожания, меньше фризов и стабильнее тайминг. Разберём разницу с setTimeout, момент выполнения в пайплайне браузера (INP/next paint) и где уместны альтернативы вроде scheduler.yield, postTask и requestIdleCallback.
https://www.debugbear.com/blog/requestanimationframe
👍6❤4❤🔥2
Inspira UI: open-source компоненты для анимированных интерфейсов на Vue и Nuxt
Библиотека готовых компонентов для создания живых UI-эффектов: анимации, примеры и гибкая кастомизация через Tailwind. Отличный старт, чтобы быстрее собрать интерфейс и подстроить его под дизайн-проекты.
https://inspira-ui.com/
Библиотека готовых компонентов для создания живых UI-эффектов: анимации, примеры и гибкая кастомизация через Tailwind. Отличный старт, чтобы быстрее собрать интерфейс и подстроить его под дизайн-проекты.
https://inspira-ui.com/
🔥8❤3👍1
GitHub - privatenumber/minification-benchmarks: 🏃♂️🏃♀️🏃 JS минфикация в цифрах
Сравнение популярных JS-minifier’ов (SWC, oxc-minify, esbuild, terser, uglify-js, SWC и др.) по размеру после minify и скорости работы: что реально даёт меньший bundle и быстрее ли именно на практике. Отличный ориентир перед выбором инструмента для production-сборок.
https://github.com/privatenumber/minification-benchmarks
Сравнение популярных JS-minifier’ов (SWC, oxc-minify, esbuild, terser, uglify-js, SWC и др.) по размеру после minify и скорости работы: что реально даёт меньший bundle и быстрее ли именно на практике. Отличный ориентир перед выбором инструмента для production-сборок.
https://github.com/privatenumber/minification-benchmarks
👍5❤2
Руководство по SVG фильтрам
Познакомимся с SVG фильтрами и посмотрим на их базовые возможности
https://frontendmasters.com/blog/svg-filters-guide-getting-started-with-the-basics/
Познакомимся с SVG фильтрами и посмотрим на их базовые возможности
https://frontendmasters.com/blog/svg-filters-guide-getting-started-with-the-basics/
👍4❤1
Сидеть и работать в корпорации — страшно, жизнь-то мимо проходит. Уходить строить бизнес — страшно, а вдруг прогорит. Один из вариантов — разрабатывать свой пет-проект по вечерам. Многие успешные компании, например, Twitter, создавались именно так. Это не значит, что ваш проект обязательно заработает миллиарды, но заработать больше, чем в найме, и получить ценный опыт — вполне реально.
Перед началом разработки появляется множество вопросов, например:
– Как выбрать идею для пет-проекта?
– Что нужно знать про маркетинг?
– Как запуститься и довести до первых продаж не имея бюджета на рекламу?
В телеграм-канале «Твой пет проект», Михаил Табунов делится своим опытом с разработчиками и менеджерами.
Он рассказывает, где искать идею для нового проекта, что нужно знать о маркетинге, как запустить стартап и привлечь первых 10 клиентов, а также о многих других важных вещах.
Подписывайтесь на «Твой пет проект», получайте пользу от практиков рынка!
Перед началом разработки появляется множество вопросов, например:
– Как выбрать идею для пет-проекта?
– Что нужно знать про маркетинг?
– Как запуститься и довести до первых продаж не имея бюджета на рекламу?
В телеграм-канале «Твой пет проект», Михаил Табунов делится своим опытом с разработчиками и менеджерами.
Он рассказывает, где искать идею для нового проекта, что нужно знать о маркетинге, как запустить стартап и привлечь первых 10 клиентов, а также о многих других важных вещах.
Подписывайтесь на «Твой пет проект», получайте пользу от практиков рынка!
Telegram
Твой пет проект
Канал про то, как создать свой маленький свечной заводик
Пишу про:
- Запуски и как сделать первые 10 продаж
- Прожарка идей
- Кейсы роста и ведения проекта параллельно с работой
Автор - Михаил Табунов - @bossofyourboss #DFY2O
Связь @to_baza_education
Пишу про:
- Запуски и как сделать первые 10 продаж
- Прожарка идей
- Кейсы роста и ведения проекта параллельно с работой
Автор - Михаил Табунов - @bossofyourboss #DFY2O
Связь @to_baza_education
👍4❤1🤡1
Моя коллекция полезных HTML-фич
Набор практичных HTML-атрибутов и приёмов для ускорения загрузки и декодирования изображений, корректной локализации текста для скринридеров и удобного отключения интерактивных элементов без костылей. Подойдёт тем, кто хочет прокачать фронтенд на уровне разметки и легко внедрить улучшения в существующие проекты.
https://habr.com/ru/companies/ruvds/articles/1021090
Набор практичных HTML-атрибутов и приёмов для ускорения загрузки и декодирования изображений, корректной локализации текста для скринридеров и удобного отключения интерактивных элементов без костылей. Подойдёт тем, кто хочет прокачать фронтенд на уровне разметки и легко внедрить улучшения в существующие проекты.
https://habr.com/ru/companies/ruvds/articles/1021090
🔥9👍3❤2
Радио стейт-машина в CSS
Если UI нужно переключать между несколькими визуальными режимами без JS, радио state machine на базе input type radio и селекторов позволяет держать логику прямо рядом с разметкой. Разбираем подход, который заменяет checkbox hack, когда состояний больше двух и важна чистая управляемость интерфейса.
https://css-tricks.com/the-radio-state-machine/
Если UI нужно переключать между несколькими визуальными режимами без JS, радио state machine на базе input type radio и селекторов позволяет держать логику прямо рядом с разметкой. Разбираем подход, который заменяет checkbox hack, когда состояний больше двух и важна чистая управляемость интерфейса.
https://css-tricks.com/the-radio-state-machine/
👍6❤1
Wiretext - инструмент для юникодных wireframe диаграмм
Wiretext рендерит макеты как символы для рисования, поэтому wireframe и схемы можно быстро собирать в тексте и легко шарить без картинок. Поддерживаются слои, боксы и подписи, удобно для прототипов и документации интерфейсов.
https://wiretext.app/
Wiretext рендерит макеты как символы для рисования, поэтому wireframe и схемы можно быстро собирать в тексте и легко шарить без картинок. Поддерживаются слои, боксы и подписи, удобно для прототипов и документации интерфейсов.
https://wiretext.app/
🔥1
9 CSS лайфхаков для более дружелюбного пользовательского опыта
Собрали в одном месте практичные CSS приемы: адаптивные фоновые изображения через image-set, удобная валидация форм с :user-valid и :user-invalid, а также безопасные анимации на transform чтобы не ловить лишние перерисовки. Эти техники помогают сделать интерфейсы заметнее, быстрее и понятнее без привязки к конкретным фреймворкам.
https://habr.com/ru/companies/ruvds/articles/1018112/
Собрали в одном месте практичные CSS приемы: адаптивные фоновые изображения через image-set, удобная валидация форм с :user-valid и :user-invalid, а также безопасные анимации на transform чтобы не ловить лишние перерисовки. Эти техники помогают сделать интерфейсы заметнее, быстрее и понятнее без привязки к конкретным фреймворкам.
https://habr.com/ru/companies/ruvds/articles/1018112/
👍2