Использование SVG-иконок в React

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

👉 @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

3D Little Bakery

Небольшая трехмерная пекарня, созданная с использованием библиотеки Three.js.

👉 @sWebDev

Полиморфизм в React: 2 паттерна, которые вы должны знать

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

👉 @sWebDev

React-magic-motion

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

👉 @sWebDev

Encrypted Password Reveal

Анимированное поле логина на GSAP.js.

👉 @sWebDev

Полное руководство по использованию cookies в Next.js

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

👉 @sWebDev

Anime.js Fireworks

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

👉 @sWebDev

i18n.js

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

👉 @sWebDev

Настройка ссылки, возвращаемой компонентом при использовании хука useRef()

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

👉 @sWebDev

React.iss.onemo на самом деле хорош

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

👉 @sWebDev

Циклическое отображение элементов массива

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

Синтаксис:

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

Параметры:
item - переменная, которая будет содержать текущий элемент массива.
items - массив, элементы которого будут отображаться.

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

👉 @sWebDev

Christmas webgl

Праздничная анимация на ThreeJS и GSAP.

👉 @sWebDev

Все кто выбрал вариант 1 - молодцы 👍

Остальным рекомендую с этим разобраться в первую очередь!

Это простые и очень мощные инструменты для адаптивных макетов

Например, чтобы расположить элементы как на картинке достаточно добавить 2 свойства для родительского блока:

flex;
align-items: (один из вариантов)


Но это только верхушка айсберга, чтобы понастоящему разобраться - поиграйтесь с этим тренажером

Ребята разложили все по полочкам, а задания можно выполнять прямо в браузере

😼 P.S. выравнивать нужно будет в основном котов

Хостинг, сборка и развертывание проектов Next.js на GitHub Pages

Туториал о том, как развернуть проект Next.js на GitHub Pages. Вы найдете подробные инструкции по установке необходимых инструментов и зависимостей, настройке проекта Next.js для работы с GitHub Pages, сборке проекта и его публикации. Также туториал содержит советы по оптимизации производительности и безопасности проекта Next.js, развернутого на GitHub Pages.

👉 @sWebDev

Snabbdom

Snabbdom - это библиотека виртуального DOM, которая обеспечивает высокую производительность и гибкость. Она использует подход render-as-you-go для создания DOM, что позволяет избежать необходимости повторно создавать весь DOM при каждом изменении данных.

👉 @sWebDev