CodeRoll | Frontend

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

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

Strapi - это бесплатный фреймворк для управления контентом, работающий на Node.js. CMS можно настраивать и масштабировать с помощью системы плагинов. Здесь предусмотрено множество встроенных возможностей: удобная административная панель, управление аутентификацией и доступами, инструменты для работы с контентом, генератор API и прочее. Она также поддерживает передачу данных посредством и REST, и GraphQL. Ссылка на на официальный сайт #nodejs

useCallback - React хук, который принимает в качестве аргументов: callback и массив зависимостей, а возвращает уже мемоизированный callback, который будет обновлен, только если одна из зависимостей будет изменена. UseCallback также, как и useMemo позволяет в значительной степени оптимизировать приложения. Но излишнее использование данного хука может привести к замедлению работы компонента. Статья на тему, как правильно его использовать.  Ссылка на статью #react

matter.js - это 2D физический движок для веба. Он помогает симулировать различные физические явления в браузере: столкновение, падение объектов и многое другое. Лучше один раз глянуть демо, чтобы понять его предназначение. На официальном сайте, вы найдете документацию, примеры и туториалы. Ссылка на официальный сайт #инструменты

Оптимизация скриптов Чем компактнее и легче ваш код, тем быстрее он будет работать. Оптимизация JavaScript — это обязательный шаг в оптимизации, если вы хотите обеспечить быструю работу сайта.  Медленная работа приводит к плохому UX(user experience), из-за чего пользователь уходит. По словам Google, если вы хотите, чтобы пользователь оставался на вашем сайте дольше, ваша страница должна загружаться менее чем за 3 секунды. Если время загрузки вашей страницы увеличивается с 1 секунды до 3 секунд, вероятность ухода пользователя составляет 32%. Статья содержит советы, как оптимизировать скрипты. Ссылка на статью #js

fetchpriopity - HTML атрибут, который позволяет определить приоритет загрузки различных ресурсов. Его можно использовать с тэгами link, img, script и iframe.  Данный атрибут помогает улучшить производительность сайта, а в частности показатель LCP(Largest Contenful Paint). Основным содержимым для LCP обычно является самый крупный элемент. Этим элементом может быть изображение, видео или просто большой блок текста. И как долго загружается этот контент, влияет на LCP. Подробно об атрибуте fetchpriopity и как его использовать для оптимизации читайте в статье. Ссылка на статью #html

ООП До сих пор не понимаете ООП(Объектно-ориентированное программирование)? Данная статья общий обзор ООП. В ней очень доступным языком объясняются основы: объекты, классы, экземпляры и методы, а так же такие понятия, как: инкапсуляция, абстракция, наследование и полиморфизм. Статья сопровождается мемами на тему объектно-ориентированного программирования, что делает чтение интереснее. Ссылка на статью #статьи

Loaders Библиотека лоадеров и спиннеров, которую вы можете подключить через npm и импортировать нужный вариант в React проект. Или выбрать понравившийся вариант на сайте и скопировать готовый HTML и CSS код. Ссылка на сайт #дизайн

Экспорт JSON в Excel Экспорт JSON в файл Excel может понадобиться для резервного копирования важных данных или их перемещения между двумя разными версиями программ. Node.js имеет несколько вариантов пакетов для экспорта JSON в формат Excel. Среди них: ExcelJS, Excel-Export, Export-to-Excel и Node-Excel-Export. Однако, по мнению автора статьи наиболее надежным и распространенным в сообществе Node.js является XLSX. Из статьи вы узнаете, как с помощью данного пакета легко и просто экспортировать данные. Ссылка на статью #nodejs

React змейка Создание игры - очень хороший вариант для практики! Сегодня делимся обучающей статьей по созданию игры "Змейка". В разработке используется: React, Redux, Redux Saga. Такой проект смело можно добавить в портфолио! Ссылка на статью #react

Array Explorer - полезное приложение для обзора методов массива. Выбираете в настройках, что хотите сделать с массивом (варианты написаны человеческим языком), а приложение выводит код.  Интересный способ для изучения! Ссылка на ресурс #инструменты

Метод groupBy В июне 2021 было предложено добавить метод groupBy в Array API. groupBy, как уже понятно из названия, группирует объекты по какому-то параметру. Работает он также, как map, filter и reduce. Принимает в качестве параметра callback функцию, которая вызывается для каждого элемента и возвращает новый объект сгруппированных данных. Сейчас groupBy проходит 3 стадию рассмотрения и не работает пока полноценно. Для его использования нужен полифилл. Более подробная информация и пример использования в данной статье. Ссылка на статью #js

CSS функции Как много CSS функций вы знаете и сколько из них используете на практике? Самой известной и часто используемой является calc.  Но есть еще и другие не менее полезные: clamp, min и max. Например, c помощью функции min можно задать размер шрифта: font-size: min(25px, 1vw);   Тогда он никогда не будет больше 25px и будет уменьшаться до 1vw в зависимости от размера viewport.   Более подробно о функциях и их применении на практике читайте в статье. Ссылка на статью #css

Отмена последнего коммита Иногда по ошибке можно закоммитить в репозиторий те файлы, которые вы вовсе не хотели, чтобы туда попали. Отмена коммитов может выполняться различными способами в зависимости от того, как бы вы хотели сохранить историю git. В статье представлено 4 способа! Ссылка на статью #статьи

Easy easings - это генератор для создания анимации ключевых кадров (keyframes animation). В данном генераторе очень классный и удобный интерфейс. В редакторе задаются точки, которые представляют собой ключевые кадры, а в панели настроек можно выбрать тип трансформации и задать остальные настройки. На выходе вы получаете готовый CSS код. Ссылка на генератор #дизайн

Deno & MongoDB В одном из постов уже была информация о Deno.  Напомним, что Deno — это современная среда выполнения для JavaScript и TypeScript, аналог Node.js. Забавный факт: Deno — это анаграмма. Переставьте буквы в Node и получится Deno. В сегодняшнем посте делимся ссылкой на обучающую статью по созданию сервера с помощью Deno и MongoDB. Ссылка на статью #nodejs

Книга по React Данная книга охватывает базовые основы React. Больше всего подойдет для новичков. После прочтения у вас будет базовое понимание: - что такое React и почему он так популярен - как его установить - components, state, props - обработки пользовательских событий - событий жизненного цикла в компоненте React Ссылка на книгу #react

typed.js - это JavaScript библиотека для создания эффекта печатной машинки. Максимально проста в использовании! Ссылка на ресурс #инструменты

JavaScript тест Проверьте свои знания по JavaScript, пройдя данный тест! 10 вопросов и для каждого дается подробное объяснение. Ссылка на тест #js