WebDev+ | Веб-разработка

Port-Whisperer — это удобный CLI-инструмент, который показывает, что запущено на твоих портах, и помогает управлять лишними процессами. → вывести список всех активных портов → посмотреть, какое приложение использует каждый порт → завершать процессы на неиспользуемых портах → мониторить порты в реальном времени

Не забывай вовремя отменять fetch-запросы Если этого не делать, вызовы будут висеть в состоянии pending бесконечно (или пока их не завершит что-то извне), и твой UI, скорее всего, зависнет. Для более простого решения используйте AbortSignal.timeout 👍

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

Инструмент, который пошагово визуализирует выполнение JS-кода Пишешь код в редакторе, двигаешь слайдер и смотришь, как движок выполняет каждую инструкцию. Очень полезно, чтобы понять что происходит «под капотом» Пробуем здесь, исходники на GitHub

Визуализатор регулярных выражений для JavaScript Инструмент позволяет наглядно посмотреть и понять сложные регулярные выражения, представляя их в удобочитаемом и графическом формате https://jex.im/regulex/

Идеальный пример использования функции if() в CSS от Arbaoui Mehdi. Функция if() в CSS позволяет внедрять условную логику прямо в стилях

align-content: center теперь работает и с обычными блочными элементами. Без flex и grid. Поддерживается всеми основными браузерами с апреля 2024 года (Chrome 123, Firefox 125, Safari 17.4). С 16 октября доступно практически повсеместно. Раньше для вертикального центрирования одного элемента приходилось превращать контейнер во flex-колонку. Теперь достаточно одной строки.

Собрал полезные инструменты для создания интерфейсов, поиска вдохновения, работы с ИИ и автоматизации разработки. 1. Open Design — open-source пространство для создания и редактирования дизайна с помощью ИИ. 2. VibePrompts — библиотека готовых промптов для генерации UI. Полезно для вайбкодинга и быстрого создания интерфейсов. 3. Git AI — open-source инструмент для работы с Git, ориентированный на ИИ-агентов и автоматизацию разработки. 4. Hairline — коллекция из 33 бесплатных анимированных фигур для React. Подойдёт для современных сайтов и необычных интерфейсов. 5. Oiloil UI — бесплатные инструменты и ресурсы для UI/UX-дизайна с использованием искусственного интеллекта. 6. Webzib — более 2400 идей для веб-дизайна. Отличный источник вдохновения для новых проектов.

Spring Boot API отвечает тайм-аутами, а PostgreSQL выглядит здоровым? CPU в норме, медленных запросов нет. Причина может быть в исчерпании пула соединений HikariCP. Когда все соединения заняты, новые запросы ждут освобождения одного из них. Если время ожидания превышает connectionTimeout, получение соединения завершается ошибкой. Особенно коварны долгие транзакции: приложение может удерживать соединение, пока ждёт внешний API, хотя сама база в этот момент почти не работает. В статье разбираются: • Причины исчерпания пула. • Влияние долгих транзакций. • Диагностика по метрикам HikariCP. • Практические способы устранения проблемы. Читать статью

JavaScript продолжает развиваться! Готовится поддержка объектов со сравнением по значению. Предложение Composites перешло на Stage 2 в TC39. Два объекта с одинаковым содержимым смогут быть равны при сравнении через ===, даже если они созданы отдельно друг от друга. Сравнение по значению также будет работать в Set и при использовании объектов в качестве ключей Map.

Простой способ сделать выпадающие списки более приятными – учитывать точку их появления (origin-aware). Они должны масштабироваться от элемента-триггера. В данном случае – transform-origin: top left По умолчанию используется значение center, и это ощущается неправильно, потому что элемент будто появляется из ниоткуда

Это веб-приложение позволяет создавать полностью кастомные темы для Shadcn практически без усилий. Ты можешь собирать собственные цветовые схемы, смотреть превью в реальном времени и экспортировать всю тему для использования в своих проектах Также есть раздел сообщества, где можно просматривать темы, созданные другими, и ремиксить их под себя.

Свойство shape-outside Определяет форму, вокруг которой должно обтекаться соседнее встроенное содержимое. Обычно это делается для того, чтобы текст мог перерисовываться по такой фигуре, как круг, эллипс или многоугольник

.column--left .shape {
  float: right;
  shape-outside: circle(100px at 100% 50%);
}

Подборка примеров использования этого свойства: тык

Набор полезных пользовательских CSS-функций, который работает на новой нативной директиве @function. Никакой сборки, просто копируете код и используете. Может работать по принципу reset.css Проект ещё в разработке, но уже насчитывает ~43 функции разных категорий, их список тут Демка тоже есть

Атрибут command позволяет вызывать методы DOM-элементов. Работает в Chrome, Edge, Firefox и скоро появится в Safari. Вот так можно открывать/закрывать модалки всего двумя строками HTML.

Гайд по тому, как прокачать навык работы с дейтпикерами в JS Ты найдёшь примеры, понятные объяснения и отличный визуальный формат, который помогает разобраться во всех тонкостях создания дейтпикеров на чистом JavaScript. Читайте здесь

Небольшая коллекция красивых переходов Внутри готовые анимации для карточек, меню, уведомлений, загрузок, переключателей и других элементов интерфейса. Всё можно сразу посмотреть, скопировать и украсть себе в проект. https://transitions.dev/

Blossom — это опенсорс система каруселей с огромным количеством красивых паттернов и готовых примеров. Также в комплекте идут навыки для AI-агентов, а ещё есть поддержка React, Vue, Svelte и Web Components. github.com/jespervos/blossom-carousel