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

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, которые стоит попробовать!

Ссылка

#статьи