Если тебе кажется, что используемые градиенты выглядят тусклыми или "грязными", попробуй вместо этого использовать цвета в пространстве 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

Классный стильный toast-компонент для React. По ощущениям он немного напоминает iOS Dynamic Island для уведомлений: плавный, цепляет внимание и выглядит чисто "из коробки"

https://github.com/hiaaryan/sileo

➡️ @FrontendPortal

А вы знали, что в Chrome DevTools есть Live Expressions?

В консоли нажмите на иконку «👁», чтобы создать Live Expression. Она автоматически пересчитывает ваше JavaScript-выражение примерно каждые ~250 мс.

Суперудобно, чтобы отслеживать:

- изменения переменных
- состояние DOM
- таймеры
- позицию скролла
- метрики FPS

➡️ @FrontendPortal

Вышла тулза React Doctor, которая проверяет ваш React-код на наличие анти-паттернов:

- Лишние useEffect
- Проблемы с доступностью
- Prop drilling вместо context / композиции

Запускается как CLI или как агент-скилл. Повторяйте запуск, пока всё не пройдет проверки. Полностью опенсорс

Запустите в терминале, чтобы попробовать:

npx -y react-doctor@latest

➡️ @FrontendPortal

Когда они это добавили?

Теперь в Chrome DevTools отображаются вычисленные пошаговые значения для css calc() + переменных.

Отладка стала в 100 раз проще

➡️ @FrontendPortal

Быстрый способ улучшить поведение текста в приложении — использовать text-wrap: balance. Это свойство равномерно распределяет текст по строкам, избегая "висячих" слов

Поддержка ограничена небольшим количеством строк (примерно <6–10 в зависимости от браузера), поэтому лучше всего применять его для заголовков или коротких абзацев

➡️ @FrontendPortal

Денис из комьюнити @its_capitan запустил собственную детективную игру в одиночку: каждый персонаж — это реальный Telegram-аккаунт, AI отвечает за героев, улики (сайты, карты) — всё настоящее.

Что в итоге:
🔘 3 месяца на подготовку + 3 месяца на разработку
🔘 40+ покупок за полтора месяца
🔘 выручка — $1500+
🔘 чек — $40
🔘 стек: Python, Telegram API, OpenAI + Anthropic

Без команды и инвестиций, но с классной идеей и проработанным сценарием — проект уже зарабатывает деньги.

Таких запусков в канале десятки. Ребята честно рассказывают про успехи, провалы и продвижение. Без теорий — только фактические цифры и запуск в реальном времени.

➡️ @its_capitan

Подписывайтесь, если интересно, как делать маленькие IT-проекты с доходом и без иллюзий.

Реклама: ИП Зуев Игорь Владимирович, ИНН: 360408359441, Erid: 2VtzquWmhY8

Это значительно упрощает отладку веб-анимаций

Slowmo — это небольшая утилита для разработчиков, которая позволяет замедлять анимации на веб-странице, чтобы можно было детально посмотреть, что именно происходит.

Особенно полезно для:
- Отладки CSS-анимаций
- Тонкой настройки таймингов transition’ов
- Изучения качественно проработанной UI-анимации
- Поиска и исправления странных багов и глитчей в анимации

https://slowmo.dev/

➡️ @FrontendPortal