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.

Ссылка

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

react-visual-grid - это библиотека для создания сеток изображений и masonry-раскладки ("плиточной верстки") с хорошей производительностью.

С помощью react-visual-grid вы можете загружать тысячи изображений без ущерба для производительности браузера.

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

Ссылка

#react

3D заголовок

Делимся ссылкой на крутой Code Pen c реализацией 3D заголовка с параллакс эффектом!

Ссылка

#дизайн

ECMAScript 2023

В этом году последняя версия спецификации ECMAScript должна быть запущена в конце июня. Было принято четыре предложения для версии ES14.

Одна из новинок - это методы массива findLast и findLastIndex. Они работают так же, как find и findIndex, но выполняют обход в обратном порядке.

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

Ссылка

#статьи

Node.js 20

18 апреля была выпущена версия 20 Node.js. 

Одна из новинок этой версии новая модель разрешений.

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

О всех обновлениях читайте в статье.

Ссылка

#nodejs

reduce

Метод reduce - мощный и полезный метод массива, с помощью которого можно проделывать множество операций. 

10 продвинутых приемов и советов для reduce в этой статье!

Ссылка

#js

Web Performance Snippets - это сниппеты кода для получения показателей производительности сайта. Например, таких как Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), Time to First Byte(TTFB), поиск ресурсов блокирующих отрисовку и многие другие.

Ссылка

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

Valtio - это относительно новый менеджер состояния для приложений React. Его отличием является использование Proxy, как обертки для состояния. 

О преимуществах Valtio и как его использовать читайте в статье. 

Ссылка

#react

Мониторинг Node.js приложения

Мониторинг Node.js важен для поддержания стабильности, надежности и производительности приложений.

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

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

Ссылка

#nodejs