React змейка

Создание игры - очень хороший вариант для практики!

Сегодня делимся обучающей статьей по созданию игры "Змейка". В разработке используется: React, Redux, Redux Saga.

Такой проект смело можно добавить в портфолио!

Ссылка на статью

#react

Экспорт JSON в Excel

Экспорт JSON в файл Excel может понадобиться для резервного копирования важных данных или их перемещения между двумя разными версиями программ.

Node.js имеет несколько вариантов пакетов для экспорта JSON в формат Excel. Среди них: ExcelJS, Excel-Export, Export-to-Excel и Node-Excel-Export.

Однако, по мнению автора статьи наиболее надежным и распространенным в сообществе Node.js является XLSX.

Из статьи вы узнаете, как с помощью данного пакета легко и просто экспортировать данные.

Ссылка на статью

#nodejs

Loaders

Библиотека лоадеров и спиннеров, которую вы можете подключить через npm и импортировать нужный вариант в React проект.

Или выбрать понравившийся вариант на сайте и скопировать готовый HTML и CSS код.

Ссылка на сайт

#дизайн

ООП

До сих пор не понимаете ООП(Объектно-ориентированное программирование)?

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

Статья сопровождается мемами на тему объектно-ориентированного программирования, что делает чтение интереснее.

Ссылка на статью

#статьи

fetchpriority - HTML атрибут, который позволяет определить приоритет загрузки различных ресурсов. Его можно использовать с тэгами link, img, script и iframe. 

Данный атрибут помогает улучшить производительность сайта, а в частности показатель LCP(Largest Contenful Paint). Основным содержимым для LCP обычно является самый крупный элемент. Этим элементом может быть изображение, видео или просто большой блок текста. И как долго загружается этот контент, влияет на LCP.

Подробно об атрибуте fetchpriority и как его использовать для оптимизации читайте в статье.

Ссылка на статью

#html

Оптимизация скриптов

Чем компактнее и легче ваш код, тем быстрее он будет работать.

Оптимизация JavaScript — это обязательный шаг в оптимизации, если вы хотите обеспечить быструю работу сайта. 

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

Статья содержит советы, как оптимизировать скрипты.

Ссылка на статью

#js

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

На официальном сайте, вы найдете документацию, примеры и туториалы.

Ссылка на официальный сайт

#инструменты

useCallback - React хук, который принимает в качестве аргументов: callback и массив зависимостей, а возвращает уже мемоизированный callback, который будет обновлен, только если одна из зависимостей будет изменена.

UseCallback также, как и useMemo позволяет в значительной степени оптимизировать приложения. Но излишнее использование данного хука может привести к замедлению работы компонента.

Статья на тему, как правильно его использовать. 

Ссылка на статью

#react

Strapi - это бесплатный фреймворк для управления контентом, работающий на Node.js.

CMS можно настраивать и масштабировать с помощью системы плагинов. Здесь предусмотрено множество встроенных возможностей: удобная административная панель, управление аутентификацией и доступами, инструменты для работы с контентом, генератор API и прочее.

Она также поддерживает передачу данных посредством и REST, и GraphQL.

Ссылка на на официальный сайт

#nodejs

Анимация фона

Делимся инструментом для создания фона с движущимися элементами.

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

Ссылка на сайт

#дизайн

Линтер - программа, которая проверяет код на соответствие стандартам и правилам. В случае если находятся какие-то несоответствия, она выводит сообщения об этом, форматирует или исправляет код.

Самый популярный из линтеров - ESLint, но также существуют и альтернативные ему варианты.  

О других линтерах, их преимуществах и недостатках читайте в статье.

Ссылка на статью

#статьи

Отражение

Возможности CSS позволяют создавать различные эффекты. С помощью него можно даже создать реалистичное отражение текста или других объектов.

Статья как раз на эту тему!
В ней вы найдете много примеров с разными вариантами отражения.

Ссылка на статью

#css

TypeScript

Поскольку в JavaScript отсутствует строгая типизация, на помощь приходит TypeScript. Строгая типизация уменьшает количество потенциальных ошибок, которые могли бы возникнуть при разработке на нативном JS. 

Делимся с вами гайдом по изучению TypeScript для начинающих!

Ссылка на гайд

#js

Cleave.js - это JavaScript-библиотека для автоматического форматирования вводимого текстового контента в инпут. Она форматирует номера кредитной карты, номера телефона, даты, числа и другое.

Ссылка на сайт

#инструменты

SuperTokens

Supertokens позволяет добавить безопасную аутентификацию в ваше веб-приложение за считанные минуты с помощью готового пользовательского интерфейса, который вы можете легко настроить. Это гибкая альтернатива Auth0, Firebase и AWS Cognito.

С помощью данной статьи вы научитесь реализовывать аутентификацию пользователей в React приложении с помощью Supertokens.

Ссылка на статью

#react

Микросервисы

Микросервис представляет собой автономную единицу, которая вместе с другими составляет обширное приложение. Архитектура на основе микросервисов позволяет разделить приложение на небольшие блоки. Каждая часть может развертываться и масштабироваться независимо друг от друга. 

В статье рассказывается, как создать микросервисы с помощью Node.js. В примере создается три сервиса, которые имеют отдельные серверы, работающие на разных портах. Эти сервисы взаимодействуют друг с другом через REST API.

Подробнее читайте в статье!

Ссылка на статью

#nodejs

Shuffle - это генератор верстки для сайта. Выберите в настройках понравившийся шаблон и доработайте в визуальном редакторе. Генератор предоставляет готовые шаблоны для десктопа, планшета и мобильного телефона.

В визуальном редакторе, вы можете скопировать готовый HTML код, а стили подтягиваются из библиотеки на ваш выбор: Bootstrap, Tailwind, Bulma. 

Доступна бесплатная и платная версия с расширенными возможностями.

Ссылка на сайт

#дизайн

hash таблица - это структура данных, которая помогает решать различные алгоритмические задачи. Одной из ее сильных сторон является быстрое извлечение данных.

В статье рассказывается подробно о hash таблицах:
- что это такое
- зачем их использовать
- как они работают
- примеры их использования в JavaScript и многое другое.

Ссылка на статью

#статьи

:where - это CSS псевдокласс, который принимает в качестве аргумента список селекторов и применяет заданные стили к любому элементу из него. Он очень полезен для сокращения длинного списка селекторов и не только.

Например, вместо того, чтобы писать:

header p:hover,
main p:hover,
footer p:hover {
 color: red;
 cursor: pointer;
}

Данный псевдокласс позволяет сократить код до:

:where(header, main, footer) p:hover {
 color: red;
 cursor: pointer;
}

Поддержка браузерами уже вполне приличная! Можно посмотреть здесь.

Подробно о :where и случаях его использования читайте в статье.

Ссылка на статью

#css

codingame - это ресурс для изучения JavaScript в игровой форме! 

Вы можете улучшить свои навыки, решая увлекательные задачи по всем актуальным темам программирования. 

Помимо JavaScript доступно еще около 25 языков. 

Ссылка на сайт

#js

popmotion - это JavaScript библиотека для создания анимаций. 

Она поддерживает анимацию ключевых кадров, пружинящие и инерционные анимации. С помощью нее можно анимировать 3D объекты, диаграммы, SVG и другое.

Каждую функцию можно импортировать по отдельности и она весит менее 5 КБ.

Ссылка на официальный сайт

#инструменты