CodeRoll | Frontend

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

border Границы в виде пунктирной линии или точек можно создавать не только с помощью свойства border, но и с помощью свойства background-image и градиентов. Второй вариант более гибкий, так как позволяет задать длину штриха пунктира, а также расстояние между. По ссылке представлены примеры создания границ с помощью background-image. Ссылка #css

lordicon - этой ресурс с анимированными иконками. У иконок можно настраивать: цвета, ширину линии и размер. Предоставляется множество форматов для скачивания: GIF, WebP, APNG и другие. Или можно встроить иконку в виде HTML в разметку. На сайте доступны бесплатные варианты, а более расширенный выбор по платной подписке. Ссылка #дизайн

Уязвимости сервера Node.js  В статье рассказывается о распространенных уязвимостях сервера: - Инъекционные атаки - Межсайтовый скриптинг (XSS) - DoS (Denial-of-Service - "отказ в обслуживании") - Неправильная аутентификация и авторизация - Небезопасные прямые ссылки на объекты (IDOR)  Эти уязвимости не уникальны для Node.js, их можно найти в любом языке программирования серверной части. Но в статье дается информация о том, как их предотвратить в Node.js. Ссылка #nodejs

usehooks-ts - это библиотека готовых React хуков, написанных на TypeScript. Ссылка #react

URL Animations А вы знали, что url адреса можно анимировать? Возможно, это не пригодится на практике, но интересна сама возможность этого. URL Animations - это библиотека для анимации url адресов. На сайте можно глянуть демо примеров. Ссылка #инструменты

JavaScript справочник 1loc.dev - это справочник с готовыми сниппетами кода. В нем куча готовых решений! Например таких, как: - проверка, что дата является выходным днем - проверка, что путь является относительным - добавление определенного суффикса к числу и многие другие. Ссылка  #js

Атрибут srcset Атрибут srcset для тэга <img> используется для подключения картинок разного размера на разных разрешениях экрана. Браузер выбирает нужный вариант и отображает его.  Но существует проблема, что браузер иногда подключает не ту картинку, которая ожидается. В чем причина рассказывается в статье! Ссылка #html

Learn Privacy - это руководство по защитите конфиденциальности данных пользователей.  Из материалов вы узнаете о шифровании, fingerprinting и других темах. Кстати, если вы не знали, то fingerprinting — это идентификация конкретного пользователя по характеристикам его настроек.  В разделе best practices представлен список ключевых вещей, которые необходимо учесть при разработке, чтобы сохранить конфиденциальность. В общем полезного материала много! Ссылка  #статьи

unfake.png - это инструмент для удаления фэйкового прозрачного фона у картинок PNG. Часто возникают моменты, когда находишь нужное изображение в формате PNG, но после скачивания оказывается, что у картинки есть фон в виде шахматной доски. Этот инструмент поможет в его удалении! Ссылка  #дизайн

React Custom Scroll - это библиотека для кастомизации полосы прокрутки для React приложений.  С помощью нее полоса прокрутки будет выглядеть одинаково во всех браузерах. Анимация и скорость точно такие же, как и у нативной.  Ссылка  #react

SortableJS - это JavaScript библиотека для создания функционала перетаскивания элементов списка.  - Библиотека поддерживает сенсорные устройства и все современные браузеры. - Можно реализовать функционал перетаскивания из одного списка в другой или в пределах одного списка. - В SortableJS предусмотрены плавные CSS анимации при перемещении элементов. Смотрите демо на сайте. Ссылка  #инструменты

Plotly.js - это библиотека для построения диаграмм. Она поставляется с более чем 40 типами диаграмм, включая трехмерные диаграммы, статистические графики и карты SVG. Plotly.js построена на основе d3.js и stack.gl. Ссылка  #js

Анимация высоты Свойство height со значением auto невозможно плавно анимировать.  Но теперь высоту элемента можно анимировать с помощью grid свойств! Ведь не так давно основные браузеры стали поддерживать анимацию свойств grid-template-rows и grid-template-columns. Пример и подробности в статье. Ссылка #css

Practica.js - это стартовый шаблон Node.js приложения. Он создан с учетом лучших практик Node.js и по утверждению создателей готов к продакшну. Ссылка #nodejs

Анимация фона 20 примеров готовых анимаций на чистом CSS, которые вы можете использовать в своих проектах или просто подчерпнуть вдохновение. Ссылка #дизайн