JavaScript Cookie - это простой и легкий JavaScript API для обработки cookies.

- Работает во всех браузерах
- Принимает любой символ
- Поддерживает ES модули 

Ссылка

#js

LazyBrush - это JavaScript библиотека для рисования плавных кривых и прямых линий с помощью мыши, пальца или любого poniting устройства.

Ссылка

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

react email - это коллекция нестилизованных компонентов для создания электронных писем с использованием React и TypeScript.

Она упрощает кодирование адаптивных электронных писем и поддерживает темный режим. 

Ссылка

#react

Анимация фона

20 примеров готовых анимаций на чистом CSS, которые вы можете использовать в своих проектах или просто подчерпнуть вдохновение.

Ссылка

#дизайн

Practica.js - это стартовый шаблон Node.js приложения. Он создан с учетом лучших практик Node.js и по утверждению создателей готов к продакшну.

Ссылка

#nodejs

Анимация высоты

Свойство height со значением auto невозможно плавно анимировать. 

Но теперь высоту элемента можно анимировать с помощью grid свойств!

Ведь не так давно основные браузеры стали поддерживать анимацию свойств grid-template-rows и grid-template-columns.

Пример и подробности в статье.

Ссылка

#css

Plotly.js - это библиотека для построения диаграмм.

Она поставляется с более чем 40 типами диаграмм, включая трехмерные диаграммы, статистические графики и карты SVG.

Plotly.js построена на основе d3.js и stack.gl.

Ссылка 

#js

SortableJS - это JavaScript библиотека для создания функционала перетаскивания элементов списка. 

- Библиотека поддерживает сенсорные устройства и все современные браузеры.

- Можно реализовать функционал перетаскивания из одного списка в другой или в пределах одного списка.

- В SortableJS предусмотрены плавные CSS анимации при перемещении элементов.

Смотрите демо на сайте.

Ссылка 

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

React Custom Scroll - это библиотека для кастомизации полосы прокрутки для React приложений. 

С помощью нее полоса прокрутки будет выглядеть одинаково во всех браузерах. Анимация и скорость точно такие же, как и у нативной. 

Ссылка 

#react

unfake.png - это инструмент для удаления фэйкового прозрачного фона у картинок PNG.

Часто возникают моменты, когда находишь нужное изображение в формате PNG, но после скачивания оказывается, что у картинки есть фон в виде шахматной доски. Этот инструмент поможет в его удалении!

Ссылка 

#дизайн

Learn Privacy - это руководство по защитите конфиденциальности данных пользователей. 

Из материалов вы узнаете о шифровании, fingerprinting и других темах. Кстати, если вы не знали, то fingerprinting — это идентификация конкретного пользователя по характеристикам его настроек. 

В разделе best practices представлен список ключевых вещей, которые необходимо учесть при разработке, чтобы сохранить конфиденциальность. В общем полезного материала много!

Ссылка 

#статьи

Атрибут srcset

Атрибут srcset для тэга <img> используется для подключения картинок разного размера на разных разрешениях экрана. Браузер выбирает нужный вариант и отображает его. 

Но существует проблема, что браузер иногда подключает не ту картинку, которая ожидается. В чем причина рассказывается в статье!

Ссылка

#html

JavaScript справочник

1loc.dev - это справочник с готовыми сниппетами кода.

В нем куча готовых решений!
Например таких, как:
- проверка, что дата является выходным днем
- проверка, что путь является относительным
- добавление определенного суффикса к числу
и многие другие.

Ссылка 

#js

URL Animations

А вы знали, что url адреса можно анимировать?
Возможно, это не пригодится на практике, но интересна сама возможность этого.

URL Animations - это библиотека для анимации url адресов.

На сайте можно глянуть демо примеров.

Ссылка

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

usehooks-ts - это библиотека готовых React хуков, написанных на TypeScript.

Ссылка

#react

Уязвимости сервера Node.js 

В статье рассказывается о распространенных уязвимостях сервера:

- Инъекционные атаки
- Межсайтовый скриптинг (XSS)
- DoS (Denial-of-Service - "отказ в обслуживании")
- Неправильная аутентификация и авторизация
- Небезопасные прямые ссылки на объекты (IDOR) 

Эти уязвимости не уникальны для Node.js, их можно найти в любом языке программирования серверной части. Но в статье дается информация о том, как их предотвратить в Node.js.

Ссылка

#nodejs

lordicon - этой ресурс с анимированными иконками. У иконок можно настраивать: цвета, ширину линии и размер.

Предоставляется множество форматов для скачивания: GIF, WebP, APNG и другие. Или можно встроить иконку в виде HTML в разметку.

На сайте доступны бесплатные варианты, а более расширенный выбор по платной подписке.

Ссылка

#дизайн

border

Границы в виде пунктирной линии или точек можно создавать не только с помощью свойства border, но и с помощью свойства background-image и градиентов.

Второй вариант более гибкий, так как позволяет задать длину штриха пунктира, а также расстояние между.

По ссылке представлены примеры создания границ с помощью background-image.

Ссылка

#css

Import maps

Использование карт импортов (Import maps) стало поддерживаться тремя основными браузерами. Карты импортов задаются с помощью тега script с атрибутом type="importmap" в формате JSON.

Такой способ позволяет определить сопоставление имен внешних модулей с соответствующими URL-адресами, что упрощает дальнейшее подключение и использование внешних модулей в коде.

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

Ссылка

#js

Fallback Font Generator - это инструмент для подбора резервного системного шрифта.

Подбор похожего резервного шрифта на ваш основной поможет уменьшить смещение макета (CLS - Cumulative Layout Shift) при загрузке страницы.

Ссылка

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

NextUI - это React библиотека UI компонентов. 

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

Ссылка

#react