Frontender Libs - обзор библиотек JS / CSS

Christmas webgl Праздничная анимация на ThreeJS и GSAP. 👉 @sWebDev

Циклическое отображение элементов массива ngForOf - директива Angular, которая позволяет циклически отображать элементы массива. Директива добавляет в DOM один или несколько элементов для каждого элемента массива. Синтаксис:

<ul *ngFor="let item of items">
  <li>{{item}}</li>
</ul>

Параметры: item - переменная, которая будет содержать текущий элемент массива. items - массив, элементы которого будут отображаться. Дополнительные параметры: index - переменная, которая будет содержать индекс текущего элемента массива. first - флаг, который указывает, является ли текущий элемент первым в массиве. last - флаг, который указывает, является ли текущий элемент последним в массиве. 👉 @sWebDev

React.memo на самом деле хорош Статья рассказывает о том, что React.memo - это эффективный инструмент для улучшения производительности React-приложений. Он может использоваться для оптимизации React-приложений, предотвращая повторный рендеринг компонентов, которые не зависят от своих props или имеют небольшое количество props. 👉 @sWebDev

Настройка ссылки, возвращаемой компонентом при использовании хука useRef() Какой из следующих вариантов является правильным описанием того, что делает хук useImperativeHandle()? 👉 @sWebDev

i18n.js i18n-js - это библиотека для локализации приложений на JavaScript. Она предоставляет простой и удобный способ переводить текст, даты, числа и другие элементы интерфейса на разные языки. 👉 @sWebDev

Anime.js Fireworks Анимированный эффект фейерверка на Anime.js. 👉 @sWebDev

Полное руководство по использованию cookies в Next.js Статья о том, как использовать cookies в Next.js. В ней рассматривается как читать, записывать и управлять cookies. 👉 @sWebDev

‼️Всем кодерам посвящается‼️ Code ready — лучшие подборки эффектов, анимаций и многое другое для твоих проектов, сразу с готовым кодом и примером их использования. 🪩 Расставь приоритеты, добавь лёгкости в свою работу и становись лучше с @code_ready

Encrypted Password Reveal Анимированное поле логина на GSAP.js. 👉 @sWebDev

React-magic-motion React-magic-motion - это библиотека для создания анимированных компонентов React. Она основана на библиотеке framer-motion и предоставляет простой и удобный способ создания различных видов анимаций. 👉 @sWebDev

Полиморфизм в React: 2 паттерна, которые вы должны знать Статья рассказывает о полиморфизме в React. Полиморфизм - это способность объекта выполнять действия в зависимости от его типа. В React полиморфизм можно использовать для того, чтобы создавать компоненты, которые могут обрабатывать различные типы данных. 👉 @sWebDev

3D Little Bakery Небольшая трехмерная пекарня, созданная с использованием библиотеки Three.js. 👉 @sWebDev

Группировка элементов без создания нового элемента DOM Директива ng-container в Angular позволяет группировать элементы без создания нового элемента DOM. Это может быть полезно для организации кода или создания более сложных макетов. Директива не имеет атрибутов или свойств. Она просто группирует элементы, расположенные внутри нее. В этом примере два элемента div будут объединены в один контейнер:

<ng-container>
  <div>Это первый элемент</div>
  <div>Это второй элемент</div>
</ng-container>

Пример использования директивы ng-container для создания плавающих элементов:

<div>
  <ng-container [style.float]="float">
    <p>Этот текст будет плавать</p>
  </ng-container>

  <ng-container [style.float]="'right'">
    <p>Этот текст будет плавать справа</p>
  </ng-container>
</div>

👉 @sWebDev

Использование SVG-иконок в React Статья рассказывает о том, как использовать SVG-иконки в приложениях React. SVG-иконки являются векторными изображениями, что означает, что они могут быть масштабированы без потери качества. Они также являются более легкими, чем растровые иконки, что может улучшить производительность вашего приложения. 👉 @sWebDev

Использование useState() для создания динамического состояния Как можно использовать хук useState() для создания динамического состояния, которое может изменяться в зависимости от внешних факторов? 👉 @sWebDev

DeepL.js DeepL.js - это библиотека JavaScript, которая позволяет использовать API машинного перевода DeepL в веб-приложениях. Библиотека предназначена для использования в Node.js. Однако также может быть использована в веб-приложениях, если она подключена в качестве модуля CommonJS. 👉 @sWebDev

Crossy Road with three.js Игра "Crossy Road"" на Three.js. 👉 @sWebDev

React-разработка интерфейса: создание визуализаций в реальном времени с помощью Codux Статья рассказывает о том, как использовать библиотеку Codux для создания интерактивных и динамических визуализаций в приложениях React. Codux предоставляет набор компонентов и функций, которые упрощают создание сложных графиков, диаграмм и других визуальных элементов. 👉 @sWebDev