DgrmJS — это JavaScript библиотека для создания редактора блок-схем.

Поддерживает десктопные и мобильные устройства. Весит 3,5 КБ в сжатом виде.

По ссылке в репозитории можно глянуть демо!

Ссылка

#инструменты

React Simple Maps - это библиотека для создания SVG карт в React приложениях. Она примечательна своей простотой в освоении, гибкостью, миниатюрностью и расширяемостью. Идеальный вариант для создания простых карт!

Ссылка

#react

Tylify - это инструмент для создания бесшовных паттернов для фона.

Доступна настройка цвета фона и добавление собственных изображений. Результат можно скачать в виде SVG, CSS или PNG.

Ссылка 

#дизайн

Полезные команды npm

В статье приводится несколько команд npm, которые могут вам пригодиться.
 
Например, команда npm docs <имя_пакета> открывает документацию в браузере. И не нужно больше гуглить, достаточно одной команды!

Об этой и остальных командах, читайте в статье.

Ссылка

#статьи

Новые viewport единицы

Всем известны такие единицы измерения в CSS, как:
vw = 1% от ширины области просмотра
vh = 1% от высоты области просмотра

В то время как единицы vw и vh хорошо работают для десктопа, на мобильных устройствах дело обстоит иначе. Там на размер области просмотра влияет наличие или отсутствие динамических панелей инструментов(адресные строки и панели вкладок). 

Поэтому появилась необходимость в ведении новых единиц:
Единицы c префиксом lv(large viewport): lvw, lvh, lvi, lvb, lvmin, lvmax
Единицы c префиксом sv(small viewport): svw, svh, svi, svb, svmin, svmax

На данный момент эти единицы работают в последних версиях браузеров Chrome, Firefox, Safari.

Подробнее о них читайте в статье!

Ссылка

#css

Javascriptmas - это онлайн адвент-календарь с заданиями по JavaScript. Каждый день открывается новое испытание.

Совершенствуйте свои навыки в JavaScript, выполняя ежедневные задачи.

Ссылка

#js

Content Parser Website - это онлайн-инструмент для извлечения текста или разметки с веб-сайта. 

Очень быстрый способ, когда на ресурсе много контента и рекламы, а вы хотите скопировать только текст! Для извлечения нужно ввести URL адрес.

Ссылка

#инструменты

Refine — это React фрэймворк для создания CRUD-приложений. 

По умолчанию он не поставляется с предварительно стилизованными компонентами или пользовательским интерфейсом.
Для дизайна можно использовать свое решение или готовые библотеки: Ant Design, Material UI, Mantine и Chakra UI. 

Refine подключается к любому пользовательскому REST или GraphQL API. Он также включает готовые интеграции для более чем 30 популярных серверных сервисов.

Подробнее о всех его преимуществах читайте на официальном сайте!

Ссылка

#react

uiverse - это галерея готовых UI элементов:
- кнопок с интересными hover эффектами
- лоадеров
- чекбоксов
- переключателей
- инпутов и других.

Можно подсмотреть классные варианты и скопировать готовый HTML и CSS! 

Ссылка

#дизайн

Оптимизация CSS

При написании CSS стилей есть немало нюансов, который стоит учитывать для того, чтобы в будущем сайт работал исправно. 

В этой статье дается 30 ценных советов по оптимизации CSS для улучшения производительности сайта. 

Ссылка

#статьи

columns

Разработчики привыкли во всех случаях в верстке использовать flex и grid.

Но в CSS есть не менее мощное свойство columns и иногда даже удобнее воспользоваться им вместо привычных способов. 

Например, можно сверстать трех-колоночную структуру и сразу адаптивно без медиа-запросов. Полезно знать о таких возможностях.

Наглядный пример показан в статье!

Ссылка

#css

Ripple UI — это коллекция компонентов и утилит, созданная на основе Tailwind CSS.

Вместо того, чтобы писать бесконечные классы, можно использовать готовые компоненты из RippleUI.

Ссылка

#инструменты

Tremor 

Дашборды или информационные панели используются для визуализации данных. Создание такого интерфейса с нуля очень трудоемкий процесс. Круто, когда есть готовые решения!

Tremor - это React библиотека для быстрого создания дашбордов. Она содержит такие компоненты, как диаграммы, макеты, элементы ввода, необходимые для аналитического интерфейса.

Ссылка

#react

Aleph.js — это fullstack фреймворк для создания React приложений на Deno. Он имеет кое-что схожее с Next.js. Например, похож синтаксис для некоторых функций. 

Aleph.js поддерживает рендеринг на стороне сервера, генерацию статических сайтов, создание автономных API, file-based маршрутизацию.

Ссылка

#deno #nodejs

Whimsical web - это ресурс, на котором собраны ссылки на сайты с интересным дизайном, анимацией и необычным функционалом.

Хороший источник для вдохновения! Можно подсмотреть что-то интересное.

Ссылка

#дизайн

Альтернативы для Webpack

Webpack долгое время являлся самым популярным бандлером. Однако за последние годы появилось немало альтернатив. В статье дается обзор на Browserify, ESBuild, Parcel, Rollup.js и Vite.

Ссылка

#статьи

3D слайдер

CSS способен на многое без помощи JavaScript!

И доказательство тому cоздание 3D анимированного слайдера в виде куба на чистом CSS.

Демо можно глянуть в статье, а также там рассказывается, как создать подобный.

Ссылка

#css

Библиотеки диаграмм

В статье представлено 13 вариантов JavaScript библиотек для создания диаграмм.

Берите на заметку!

Ссылка

#js

Reactive Resume — это бесплатный инструмент для создания резюме.

С помощью этого приложения вы можете создавать несколько резюме и делиться ими с рекрутерами через уникальную ссылку или распечатать в формате PDF.

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

Для создания необходимо зарегистрироваться.

Ссылка

#интсрументы

react-beautiful-dnd - это готовый React drag-and-drop компонент в виде списка, внутри которого можно перетаскивать и менять местами элементы.

Из преимуществ стоит отметить хорошую производительность и плавную анимацию при перетаскивании.

Демо можно глянуть по ссылке в репозитории.

Ссылка на репозиторий

#react

PNG в SVG

Векторные картинки и иконки лучше и четче выглядят на сайте, чем растровые.

Но что делать, если необходимое изображение есть только в формате PNG?

Делимся ссылкой на конвертер картинок PNG в векторные изображения!

Простые картинки очень хорошо конвертируются.

Ссылка

#дизайн