CodeRoll | Frontend

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

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

Bokeh Effect Bokeh Effect (Боке эффект) — это эффект размытого фона, обычно создающийся в фотографии. Но подобный эффект можно создать и с помощью CSS и JavaScript! 8 примеров создания в статье. Ссылка #дизайн

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

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

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

reduce Метод reduce - мощный и полезный метод массива, с помощью которого можно проделывать множество операций.  10 продвинутых приемов и советов для reduce в этой статье! Ссылка #js

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

ECMAScript 2023 В этом году последняя версия спецификации ECMAScript должна быть запущена в конце июня. Было принято четыре предложения для версии ES14. Одна из новинок - это методы массива findLast и findLastIndex. Они работают так же, как find и findIndex, но выполняют обход в обратном порядке. Подробнее читайте в статье. Ссылка #статьи

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

react-visual-grid - это библиотека для создания сеток изображений и masonry-раскладки ("плиточной верстки") с хорошей производительностью. С помощью react-visual-grid вы можете загружать тысячи изображений без ущерба для производительности браузера. Библиотека поставляется со встроенным модулем виртуализации для быстрой и эффективной загрузки изображений. При виртуализации изображения загружаются только по запросу и только тогда, когда они становятся видимыми в окне просмотра. Ссылка #react

readme-dev - это сервис для создания простого и стильного описания для профиля GitHub. Заполните предлагаемые поля вашими данными, скопируйте Markdown и вставьте в свой профиль в файл README.md. Ссылка #инструменты

Итераторы и генераторы Итераторы и генераторы предоставляют механизм для настройки поведения циклов for-of и других конструкций, перебирающих данные.  Этот функционал сперва не очень понятен многим. Автор статьи изложил назначение итераторов и генераторов и варианты их использования, а также рассказал, как использовать весь их потенциал. Ссылка #js

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

Смотреть, как зарабатывают другие — классно. Может пора и тебе? На канале @novitskiyblog Алексей Новицкий рассказывает, почему финансовый консультант может зарабатывать такие деньги, которые и не снились IT специалистам, бухгалтерам и финансовым директорам. Вот несколько полезных постов: За что клиент платит финансовому консультанту Как ставить финансовые цели и зарабатывать на этом Где брать клиентов финансовому консультанту Почему не все финансовые консультанты зарабатывают много На канале он собрал личный опыт, кейсы клиентов и полезные материалы по продажам для финансовых консультантов и тех, кто хочет им стать. Подписывайтесь - @novitskiyblog  #реклама

WebGPU  Google Chrome выпустил WebGPU для высокопроизводительной 3D-графики и параллельных вычислений данных в вебе. Пока он доступен для ChromeOS, macOS и Windows и поддерживается не всеми браузерами.  Подробности читайте в статье! Ссылка #статьи

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

NextUI - это React библиотека UI компонентов.  Она предоставляет простой способ кастомизации тем по умолчанию. Можно менять цвета, шрифты, брейкпоинты и многое другое. Ссылка #react

Fallback Font Generator - это инструмент для подбора резервного системного шрифта. Подбор похожего резервного шрифта на ваш основной поможет уменьшить смещение макета (CLS - Cumulative Layout Shift) при загрузке страницы. Ссылка #инструменты

Import maps Использование карт импортов (Import maps) стало поддерживаться тремя основными браузерами. Карты импортов задаются с помощью тега script с атрибутом type="importmap" в формате JSON. Такой способ позволяет определить сопоставление имен внешних модулей с соответствующими URL-адресами, что упрощает дальнейшее подключение и использование внешних модулей в коде. Подробнее о данном способе читайте в статье! Ссылка #js