HTML-совет

Не используй input type="number" для важных числовых полей — типа почтового индекса, номера карты и т.п.

Почему?
- На десктопе появляется ненужный спиннер.
- Значение может случайно измениться при прокрутке мыши или нажатии клавиш вверх/вниз.

Вместо этого — используй inputmode="numeric" + pattern

✅ Показывает цифровую клавиатуру на мобильных устройствах — лучше UX.
✅ Добавляет валидацию на цифры.

➡️ @FrontendPortal | #tip by Shripal Soni

Как структурировать масштабируемый React-проект:

app/ → pages/ → features/ → shared/

➡️ @FrontendPortal

Полезный совет по DevTools для доступности

Хром умеет эмулировать дальтонизм и размытие зрения. Быстрый способ проверить, насколько ваш UI дружелюбен к тем, кто видит мир иначе

DevTools → Rendering → Emulate vision deficiencies

➡️ @FrontendPortal | #tip

Если тебе кажется, что используемые градиенты выглядят тусклыми или "грязными", попробуй вместо этого использовать цвета в пространстве OKLCH

В OKLCH оттенок задаётся как угол, а значит цвета, через которые проходит градиент, отличаются от тех, что получаются в sRGB

Можно подробнее почитать об этом здесь

➡️ @FrontendPortal

Годная JS-либа для реализации drag-and-drop списков — Sortable

Живёт уже не первый год, проверена временем и продом. Поддерживает перетаскивание элементов как внутри одного списка, так и между несколькими. Работает на нативном Drag and Drop API

Простой и читаемый API, никаких зависимостей. Поддерживает анимацию при перетаскивании, работает на десктопах и тач-устройствах. Совместима с большинством фреймворков

➡️ @FrontendPortal | #resourse

Оочень крутая штука для изучения типов в TypeScript: Visual Types

Сайт сделан максимально приятно: всё интерактивное, с клавиатурной навигацией (и даже со звуковыми эффектами). Материал подаётся через 149 примеров с прогрессом и ачивками, получается почти как мини-курс в формате playground’а

Забираем тут ✌️

➡️ @FrontendPortal | #TypeScript

Современный способ просматривать npm-пакеты

“NPMX” — это новый браузер для реестра npm, ориентированный на скорость и удобство для разработчиков

Никакого лишнего UI. Никаких тормозящих страниц. Только мгновенная информация о пакете, когда она действительно нужна 👌

https://npmx.dev/

➡️ @FrontendPortal | #resourse

Вышел TypeScript 6.0 Beta! 🥳

- Temporal
- Map#getOrInsert
- RegExp.escape
- префикс #/ для package imports

Новые значения по умолчанию!
- target: ES2025
- --strict

Депрекейты!
🗑 baseUrl, outFile
🗑 import assertions
🗑 namespace module
🗑 moduleResolution: node
🗑 target: ES5

https://devblogs.microsoft.com/typescript/announcing-typescript-6-0-beta/

➡️ @FrontendPortal

Нужны чистые и минималистичные иконки для UI и дизайн-задач? 🐇

Griddy Icons — это бесплатное опенсорс семейство иконок с чётким, утилитарным стилем. В наборе более 1100 иконок, толщина обводки 1.5px и сетка 24×24px. Всё выдержано в единой системе и сразу готово к использованию в U

Забираем здесь

➡️ @FrontendPortal | #resourse

#Проекты_подписчиков

Слово автору @he150

mlut (читается как "млат") - это CSS-фреймворк для кастомных сайтов и креативов. Он помогает верстать проекты с индивидуальным и нешаблонным дизайном, где не подходят фреймворки старой школы и плохо справляются LLM. mlut похож на Tailwind, поскольку основан на подходе Atomic CSS, но по некоторым параметрам превосходит все популярные аналоги.

Atomic CSS - это методология верстки, в которой мы используем маленькие атомарные классы, каждый из которых делает одно действие. Эти классы называют утилитами. Обычно они применяет одно CSS-свойство (например, цвет текста), но не обязательно одно. Выглядят они примерно так: D-ib, Bgc-blue_h.

Преимущества такого подхода

1. Тратим меньше мыслетоплива: не думаем о нейминге сущностей, структуре каталогов
2. Меньше CSS на клиенте: реиспользуем одни и те же утилиты, а новые стили почти перестают добавляться
3. Быстрее пишем стили: короткие классы, нет переключения файлов
4. Можно применять на любом стеке: JS SPA, PHP, Clojure, etc

Ключевые особенности mlut

1. Краткий и строгий нейминг. Сокращения основаны на популярности свойств CSS и составлены по единому алгоритму. Если вы знаете CSS, то вы почти знаете mlut
2. Богатый и нативный синтаксис. Это как Vim для CSS. Удобно создавать сложные стили с помощью мощного синтаксиса, концептуально близкого к CSS
3. Написан на Sass. Используйте всю мощь препроцессора для связи рукописного CSS и утилит

Что реализовано на сегодня

- генератор утилит почти любой сложности
- JIT-движок, который умеет генерировать утилиты из HTML/JSX/etc
- CLI с минификацией и автопрефиксером
- плагины для сборщиков фронтенда: Webpack, Vite и Rollup
- онлайн-песочница

Также есть обширная документация. Совместно с HTML Academy готовится интерактивный мини-курс по инструменту. Первый урок уже вышел.

Это open source проект - результат глубокого ресерча и 1200+ часов труда. Больше технических деталей есть в расшифровке доклада с HolyJS.

Планы по развитию

- добавить еще возможностей CSS для сложной верстки: множественные градиенты, псевдоселекторы с аргументами, типа :has(), etc
- сделать интеграции для вайб-кодинга
- сделать плагины к IDE для автокомплита и подсказок

А недавно мы запустили проект на ProductRadar. Бодаемся там со стартапами за топ-3 продуктов этой недели. Будем благодарны за поддержку лайком на этой площадке и любой фидбек. Давайте покажем всем, что open source инструмент тоже может быть продуктом!

➡️ @FrontendPortal