CodeRoll | Frontend

Largest Contentful Paint (или LCP) — это одна из трех метрик Core Web Vitals. Эти показатели используются Google для оценки качества UX. LCP измеряет время, необходимое браузеру для загрузки основного содержимого в области просмотра. Основным содержимым для LCP обычно является самый крупный элемент. Этим элементом может быть изображение, видео или просто большой блок текста.  В статье рассказывается, как оптимизировать этот показатель для изображений! Ссылка #статьи

Разрабатываете или интегрируете CRM, но продаете только по сарафану, да? Кроме этого еще сами продаете и сами внедряете. Ведь низкий чек не дает делегировать ни процесс продаж, ни процесс производства.  Удивительно, когда в самой актуальной и прибыльной нише IT нет системного потока трафика. Я сам вошел в ТОП 15 за 10 мес. по рейтингу Битрикс24 и увеличил чек до 300т.р за год на базовом внедрении CRM. А 5 моих подопечных из ниши IT вышли на млн+ 14 февраля в 16:00 мск я проведу вебинар на тему “Как системно генерировать трафик целевых клиентов разработчикам и интеграторам CRM, 1C, BI power с выручкой от 1,5 млн./мес”.  Зарегистрироваться можно в этом боте: @crm100_web_bot Бонус при регистрации 🎁 Связка получения лидов по 80 руб в нише CRM и контакт подрядчика

node api boilerplate - это шаблон для создания масштабируемого API с помощью Node.js и TypeScript.  Он был реализован в соответствии с идеями многоуровневой и чистой архитектуры и предметно-ориентированного проектирования (DDD - Domain-Driven Design). При его создании были учтены возможность расширения и гибкость, поэтому его можно изменять и адаптировать в соответствии с вашими потребностями и предпочтениями. Ссылка #nodejs

6 лучших генераторов фона Чтобы не тратить много времени на придумывание дизайна для своего сайта, существует много крутых вспомогательных инструментов и генераторов для создания каких-то отдельных элементов. Одни из таких инструментов - это генераторы фона. В этой статье собраны лучшие по мнению автора! Ссылка #дизайн

Victory — это библиотека для визуализации данных для React и React Native приложений. Она была создана с использованием React и D3. Victory предоставляет выбор разнообразных диаграмм, которые полностью настраиваются. Ссылка #react

ScrollyVideo.js - это JavaScript библиотека для воспроизведения и перемотки видео на основе события scroll. Она совместима с React, Svelte, Vue и нативным JavaScript. Эффект получается классный! Демо можно глянуть на сайте. Ссылка #инструменты

scrollend - это новое событие в JavaScript. До scrollend не было надежного способа определить, завершена ли прокрутка. Это означало, что события могут срабатывать поздно или пока палец пользователя все еще находится на экране. Для решения придумывали разные способы. И вот наконец-то для этого появилось специальное событие. Оно не поддерживается пока всеми браузерами, но его появление уже радует. Подробнее o нем читайте в статье! Ссылка #js

pure.css Yahoo! является создателем библиотеки pure.css. Pure.css - это библиотека для создания интерфейса веб-приложений. Она включает шаблоны оформления для форм, кнопок, таблиц, блоков навигации и прочих UI компонентов. - Библиотека мало весит и быстро загружается;  - Она включает адаптивную сетку, которая автоматически подстраивается под разные размеры экрана и устройства;  Подробнее о ней читайте в статье! Ссылка #css

iOS теперь в телеграм! У Apple появился русскоязычный канал для разработчиков. Это гораздо лучше платных курсов и непонятных уроков. Будет полезно как новичку, так и уже опытному программисту. Стоит подписаться!

Git-Sim Git на первый взгляд кажется запутанным и сложным инструментом, особенно для новичка. Git-Sim — это инструмент командной строки, который позволяет пользователю Git быстро и легко создавать изображения или видео-анимации, иллюстрирующие влияние команды Git на локальное хранилище. Например, можно получить схему работы команды git reset HEAD^ или любой другой. Подробнее о Git-Sim рассказывается в статье! Ссылка #статьи

Лучшие на CodePen По ссылке представлена коллекция лучших пенов на CodePen за 2022 год. Можно найти интересные анимации и необычный дизайн! Ссылка #дизайн

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

siimple — это CSS библиотека с открытым исходным кодом для стилизации. Она предлагает красивый и минималистичный дизайн. Она полностью настраиваемая. С помощью конфигурации меняются цвета, шрифты, размеры, тени и многое другое! Дополнительно можно подключить коллекцию иконок. На официальном сайте библиотеки предложены примеры стилизованных с помощью нее компонентов. Можно скопировать код и использовать в своем проекте. Подробнее информацию смотрите на сайте. Ссылка #инструменты

📌 Бесплатно освойте профессию дизайнера с нуля. Вместе сделаем вам портфолио из 4+ работ с личной поддержкой от наставника. Что вы получите? — Фидбэк (мощный разбор всех ДЗ от куратора)  — Тусовка (личный кабинет с уроками + живой чат) — Портфолио и экзамен (упакуем по урокам и проверим) — Мастер-класс "как заработать на дизайне" и найти клиента 🔥 Будем делать: веб-дизайн, графический дизайн, анимацию интерфейсов. → Начать обучение бесплатно  Программа бесплатного курса:  — Обучение по Figma с нуля и 4+ дз с личным разбором — Изучение основ дизайна (контент, сетки, композиция т.д.)  — Создание анимации интерфейса  — Все о профессии и доходе дизайнера (как найти клиентов и сколько можно заработать) 👉 Первый урок уже сегодня, кликайте сюда и забирайте все бонусы #реклама

Метод structuredClone Оператор spread(...) — это распространенный метод для копирования объектов в JavaScript. Однако, имеет один существенный недостаток — он создает поверхностные копии. Копируются только верхние уровни свойств. structuredClone() - это функция, которая создает глубокие копии объектов. Имеет достаточно неплохую поддержку.  Подробнее о данной функции читайте в статье. Ссылка #js

CSS Layout Generator - это инструмент для создания верстки страниц или отдельных компонентов. С помощью него можно строить разнообразные сетки. Нужно выбрать за основу один из шаблонов и настроить его под свои нужды. На выходе готовый HTML и CSS! Ссылка #html #css

SQL теперь в телеграм! SQL — главный язык программирования баз данных. Базы данных есть везде: от маленького интернет-магазина до социальной сети. Знание SQL очень важно для любого программиста! Его будет легко выучить, если подписаться на русскоязычный канал. Это первоисточник всего, что появляется в платных курсах и остальных ресурсах. Стоит подписаться!

NoSQL vs. SQL SQL и NoSQL — это две разные концепции систем баз данных. SQL — это язык, используемый в качестве стандарта для запросов и изменения систем баз данных, используемых большинством веб-сайтов и приложений. NoSQL относится к любой базе данных, которая не использует SQL в качестве основного интерфейса.  Подробнее о концепции NoSQL и сравнение с SQL читайте в статье! Ссылка #статьи

PNG в SVG Векторные картинки и иконки лучше и четче выглядят на сайте, чем растровые. Но что делать, если необходимое изображение есть только в формате PNG? Делимся ссылкой на конвертер картинок PNG в векторные изображения! Простые картинки очень хорошо конвертируются. Ссылка #дизайн

react-beautiful-dnd - это готовый React drag-and-drop компонент в виде списка, внутри которого можно перетаскивать и менять местами элементы. Из преимуществ стоит отметить хорошую производительность и плавную анимацию при перетаскивании. Демо можно глянуть по ссылке в репозитории. Ссылка на репозиторий #react