6 лучших генераторов фона

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

Одни из таких инструментов - это генераторы фона. В этой статье собраны лучшие по мнению автора!

Ссылка

#дизайн

node api boilerplate - это шаблон для создания масштабируемого API с помощью Node.js и TypeScript. 

Он был реализован в соответствии с идеями многоуровневой и чистой архитектуры и предметно-ориентированного проектирования (DDD - Domain-Driven Design).

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

Ссылка

#nodejs

Largest Contentful Paint (или LCP) — это одна из трех метрик Core Web Vitals. Эти показатели используются Google для оценки качества UX. LCP измеряет время, необходимое браузеру для загрузки основного содержимого в области просмотра.

Основным содержимым для LCP обычно является самый крупный элемент. Этим элементом может быть изображение, видео или просто большой блок текста. 

В статье рассказывается, как оптимизировать этот показатель для изображений!

Ссылка

#статьи

Meta Tags Generator - это онлайн-инструмент для создания полного списка метатегов HTML для сайта.

Результат включает общие метатеги, open graph, schema.org и метатеги социальных сетей.

Ссылка

#html

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 в разметку.

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

Ссылка

#дизайн