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 в векторные изображения!

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

Ссылка

#дизайн

NoSQL vs. SQL

SQL и NoSQL — это две разные концепции систем баз данных.

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

NoSQL относится к любой базе данных, которая не использует SQL в качестве основного интерфейса. 

Подробнее о концепции NoSQL и сравнение с SQL читайте в статье!

Ссылка

#статьи

CSS Layout Generator - это инструмент для создания верстки страниц или отдельных компонентов.

С помощью него можно строить разнообразные сетки. Нужно выбрать за основу один из шаблонов и настроить его под свои нужды. На выходе готовый HTML и CSS!

Ссылка

#html #css

Метод structuredClone

Оператор spread(...) — это распространенный метод для копирования объектов в JavaScript. Однако, имеет один существенный недостаток — он создает поверхностные копии. Копируются только верхние уровни свойств.

structuredClone() - это функция, которая создает глубокие копии объектов. Имеет достаточно неплохую поддержку. 

Подробнее о данной функции читайте в статье.

Ссылка

#js

siimple — это CSS библиотека с открытым исходным кодом для стилизации. Она предлагает красивый и минималистичный дизайн.

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

На официальном сайте библиотеки предложены примеры стилизованных с помощью нее компонентов. Можно скопировать код и использовать в своем проекте.

Подробнее информацию смотрите на сайте.

Ссылка

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

React Advanced Cropper - это библиотека для создания функционала обрезания картинок.

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

Ссылка

#react

Лучшие на CodePen

По ссылке представлена коллекция лучших пенов на CodePen за 2022 год.

Можно найти интересные анимации и необычный дизайн!

Ссылка

#дизайн

Git-Sim

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

Git-Sim — это инструмент командной строки, который позволяет пользователю Git быстро и легко создавать изображения или видео-анимации, иллюстрирующие влияние команды Git на локальное хранилище.

Например, можно получить схему работы команды git reset HEAD^ или любой другой.

Подробнее о Git-Sim рассказывается в статье!

Ссылка

#статьи

pure.css

Yahoo! является создателем библиотеки pure.css.

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

- Библиотека мало весит и быстро загружается; 
- Она включает адаптивную сетку, которая автоматически подстраивается под разные размеры экрана и устройства; 

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

Ссылка

#css

scrollend - это новое событие в JavaScript.

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

Оно не поддерживается пока всеми браузерами, но его появление уже радует.

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

Ссылка

#js

ScrollyVideo.js - это JavaScript библиотека для воспроизведения и перемотки видео на основе события scroll.

Она совместима с React, Svelte, Vue и нативным JavaScript.

Эффект получается классный! Демо можно глянуть на сайте.

Ссылка

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