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

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

Simon Мини-игра на Anime.js. 👉 @sWebDev

👀 Мы нашли ЛУЧШИЙ канал по ФРОНТЕНДУ! 👉 Готовый код с codepen.io 👉 Макеты Figma 👉 Тесты и туториалы по веб-разработке Все это можно найти в одном канале! Подпишись на КодВеб и улучши свои навыки веб-разработки.

LLM.js LLM.js - это библиотека JavaScript, которая позволяет использовать большие языковые модели (LLM) в веб-приложениях. 👉 @sWebDev

Как определять направление прокрутки в React Статья рассказывает о том, как определять направление прокрутки в React. У фреймворка нет встроенного способа сделать это, поэтому нужно использовать сторонний пакет. В статье рассматривается пакет scroll-direction, который позволяет определять направление прокрутки с помощью хуков useState и useEffect. 👉 @sWebDev

Ghost Mouse (move your mouse / finger) Анимация приведения привязанная к курсору на Three.js. 👉 @sWebDev

Год не станет новым, если все оставить по старому (Джейсон Стэтхем) Поэтому самое время получить профессию мечты, тем более с новогодней скидкой в 60% Python-разработчик - 3784р Веб-разработчик - 4696р PHP разработчик - 3797р Fullstack разработчик - 3604р Выбирай себе подарок на новый год! 🎄🔥

Открыли набор на курсы по дизайну в январе Зимой в Школе дизайна НИУ ВШЭ стартуют 13 программ дополнительного образования — они помогут усилить резюме, получить новые навыки или освоить профессию с нуля. В 2024-м можно стать дизайнером интерьера, иллюстратором, графическим дизайнером, специалистом по компьютерной 3D-графике или диджеем. А если хотите двигаться по карьерной лестнице, можно научиться управлять брендом одежды, делать интерьеры для кафе или использовать нейросети в творческой работе. Начните новый год в подразделении лучшего вуза России по версии Forbes и HeadHunter. Узнать больше #реклама design.hse.ru О рекламодателе

Angular: редактируемое содержание элементов Директива ng-content-editable позволяет редактировать содержимое элемента. Она добавляет к элементу атрибут contenteditable со значением true, что делает его редактируемым. Директива может принимать следующие свойства: readonly - задает, является ли элемент редактируемым только для чтения. По умолчанию значение равно false. disabled - задает, является ли элемент редактируемым. По умолчанию значение равно false. spellcheck - задает, следует ли проверять текст на наличие орфографических ошибок. По умолчанию значение равно true. Пример использования:

<div ng-content-editable>
  Это содержимое можно редактировать
</div>

👉 @sWebDev

Переведем приложения сайты на 45+ языков. С локализацией Мы специализируемся на: *** Переводе сайтов - мы поможем вам расширить вашу аудиторию, переведя ваш сайт на разные языки мира. Это отличная возможность привлечь новых клиентов и увеличить продажи. *** Переводе приложений - мы сделаем ваше приложение доступным для пользователей из разных стран, переведя его на нужные языки. Это позволит расширить географию использования и повысить узнаваемость бренда. *** Наша компания имеет богатый опыт работы с клиентами из разных отраслей и стран. Мы гарантируем высокое качество перевода, соблюдение сроков и конфиденциальность информации. Перейти на сайт #реклама 16+ kolkogroup.com О рекламодателе

Vue 3: как проверить, является ли слот пустым Статья о том, как проверить, является ли слот в Vue 3 пустым. В Vue 2 это можно было сделать, используя свойство slot.length, но в Vue 3 это свойство больше не существует. Вместо этого можно использовать функцию vNodeIsEmpty(), которая принимает в качестве аргумента объект vnode и возвращает true, если объект пустой. 👉 @sWebDev