CodeRoll | Frontend

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, которые вы можете использовать в своих проектах или просто подчерпнуть вдохновение. Ссылка #дизайн

react email - это коллекция нестилизованных компонентов для создания электронных писем с использованием React и TypeScript. Она упрощает кодирование адаптивных электронных писем и поддерживает темный режим.  Ссылка #react

Профессия «UX/UI Дизайнер» от ProductStar — структурированные знания, практика на реальных кейсах и гарантия трудоустройства.  Лекции от лучших специалистов рынка: AmazonЯндекс, SplitMetrics, SkyEng, Devtodev, Ozon — проводится практика на кейсах реальных компаний. Во время прохождения курса к студенту прикрепляется карьерный ментор, который ведет от составления резюме до трудоустройства (как в России, так и зарубежом), а компания-работодатель возвращает от 50 до 100% стоимости обучения. ProductStar включает: — Гибкую программу обучения; — Гарантию трудоустройства в международные компании и сертификат с государственной аккредитацией; — Рассрочку, оплату курса через Яндекс.Сплит; — Возможность налогового вычета за обучение; Сейчас на курс действует скидка 46% + дополнительный промокод КОД10 для наших подписчиков на скидку 10 000 руб Бонус — курс "Удаленка" и "Work-life balance" в подарок Больше о курсе: https://go.productstar.ru/DKWLW9

LazyBrush - это JavaScript библиотека для рисования плавных кривых и прямых линий с помощью мыши, пальца или любого poniting устройства. Ссылка #инструменты

JavaScript Cookie - это простой и легкий JavaScript API для обработки cookies. - Работает во всех браузерах - Принимает любой символ - Поддерживает ES модули  Ссылка #js

Meta Tags Generator - это онлайн-инструмент для создания полного списка метатегов HTML для сайта. Результат включает общие метатеги, open graph, schema.org и метатеги социальных сетей. Ссылка #html