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

Свойство 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

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

Ссылка

#дизайн

WebGPU 

Google Chrome выпустил WebGPU для высокопроизводительной 3D-графики и параллельных вычислений данных в вебе.

Пока он доступен для ChromeOS, macOS и Windows и поддерживается не всеми браузерами. 

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

Ссылка

#статьи

CSS Nesting

CSS Nesting позволяет вкладывать одно правило стиля в другое, такую возможность раньше предоставляли только препроцессоры CSS. Но теперь это доступно и в самом CSS. Пока что выпущена только первая версия и поддерживается последними версиями браузеров Chrome и Safari .

Но очень радует, что такая возможность появилась! Подробнее о синтаксисе CSS Nesting читайте в статье.

Ссылка

#css

Итераторы и генераторы

Итераторы и генераторы предоставляют механизм для настройки поведения циклов for-of и других конструкций, перебирающих данные. 

Этот функционал сперва не очень понятен многим. Автор статьи изложил назначение итераторов и генераторов и варианты их использования, а также рассказал, как использовать весь их потенциал.

Ссылка

#js

readme-dev - это сервис для создания простого и стильного описания для профиля GitHub.

Заполните предлагаемые поля вашими данными, скопируйте Markdown и вставьте в свой профиль в файл README.md.

Ссылка

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