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

Bokeh Effect

Bokeh Effect (Боке эффект) — это эффект размытого фона, обычно создающийся в фотографии.

Но подобный эффект можно создать и с помощью CSS и JavaScript!

8 примеров создания в статье.

Ссылка

#дизайн

Нашли кое-что действительно интересное для тех, кто хочет создавать тренды в мире технологий. 
⚡️ South HUB — кэмп для руководителей в ИТ, который пройдет с 12 по 16 июня в Сочи. 
400 настоящих и будущих CTO соберутся на Курорте Красная Поляна, чтобы обменяться знаниями, опытом и найти партнеров. Нетворкинг начинается ещё до кэмпа: все CTO уже собрались здесь. 
Кэмп про профессиональное развитие с акцентом на work-life-balance. Программа включает в себя обширную конференц-часть, отдельный день спорта, серию вечеринок и детскую научно-исследовательскую конференцию. 

Где встречаемся?
На высоте 960 всесезонного горного Курорта Красная Поляна⛰
Вся информация тут.

DevTools Tips - ресурс, на котором собраны советы по использованию панели разработчика. 

О некоторых возможностях DevTools вы возможно даже не подозревали! Например, что через нее можно ускорить или замедлить видео со страницы или что можно отлаживать CSS стили для печати, включив эмуляцию print media.

Ссылка

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

5 Headless CMS

Headless CMS - это CMS с готовым к эксплуатации API, это альтернатива WordPress, Drupal, Joomla или Битрикс.

В отличие от классической CMS, в Headless нет механизма отрисовки страниц, нет шаблонов, только инструменты и интерфейс для проектирования данных, работы с данными.

В статье рассказывается про 5 Headless CMS, которые стоит попробовать!

Ссылка

#статьи

CSS HD Gradients - это интерактивный инструмент для создания HD-градиентов, созданных с использованием современных цветовых форматов, таких как oklab, LCH, HSL, sRGB и других.

Ссылка

#css

Валидация URL

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

Ссылка

#js

gridstack.js - это библиотека для создания интерактивных дашбордов с возможностью перетаскивания элементов и изменения их размеров. Она совместима React, Vue, Angular, Knockout.js.

Демо можно глянуть на сайте.

Ссылка

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

react-intersection-observer - это готовое решение для использования Intersection Observer API в React приложении, чтобы отслеживать когда элемент появляется в области просмотра и исчезает из него.

Ссылка

#react

Hapi - это простой и безопасный Node.js фрэймворк с полной готовой функциональностью для создания мощных и масштабируемых приложений. 

Hapi предоставляет набор основных API и расширяемых плагинов для поддержки требований современного сервиса: управление сеансами, безопасность, подключение и тестирование.

Ссылка

#nodejs

tech icons - это ресурс с логотипами популярных библиотек, инструментов, технологий в формате PNG и SVG.

Ссылка

#дизайн

Бесплатные курсы по математике

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

Ссылка

#статьи

dragjs - это JavaScript библиотека, упрощающая реализацию операций перетаскивания элементов на страницах. Она предлагает для использования: перетаскиваемые панели и различные типы ползунков. 

Преимущество данной библиотеки в том, что на базе ее функционала можно создавать свои компоненты.

Ссылка

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

@scope 

Когда-то в HTML существовал атрибут scoped для элемента style, но он устарел. Атрибут указывает, что стили применяются не ко всему документу, а только к родительскому элементу и его дочерним элементам. Элемент <style> при этом размещается не внутри элемента <head>, а внутри того родительского элемента для которого применяются стили. То есть таким образом, можно было ограничивать области видимости стилей. 

Был сделан запрос на возврат данной возможности и тогда был добавлен @scope в CSS. Поддержка браузерами пока ожидается. Но по прогнозам он должен уже появиться в Chrome 117.

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

Ссылка

#css

Strawberry - это фронтенд фреймворк, который создает реактивность. Он делает это с нулевыми зависимостями, без шага сборки и занимает менее 4 КБ в сжатом виде.

Strawberry — это не альтернатива React, Vue и т. д. Это альтернатива Vanilla JS. Он подходит для небольших и простых приложений.

Подробности и примеры использования на официальном сайте!

Ссылка

#js

Rewind UI - это библиотека UI компонентов, созданная специально для использования с React и Tailwind CSS.

Она предлагает ряд доступных, легко настраиваемых компонентов, которые можно интегрировать в любой проект React. Rewind UI поставляется с набором стилей по умолчанию, которые могут настраиваться с помощью классов Tailwind CSS.

Ссылка

#react

iconoir - это библиотека бесплатных SVG иконок. Альтернатива иконкам Noun Project, Flaticon и всем ресурсам Figma. Можно скачать понравившиеся иконки прямо с сайта или установить в качестве пакета для приложений React, React Native, Flutter и Vue.

Ссылка

#дизайн