Vue 3: как проверить, является ли слот пустым

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

👉 @sWebDev

Angular: редактируемое содержание элементов

Директива ng-content-editable позволяет редактировать содержимое элемента. Она добавляет к элементу атрибут contenteditable со значением true, что делает его редактируемым.

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

Пример использования:

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

👉 @sWebDev

Год не станет новым, если все оставить по старому

(Джейсон Стэтхем)

Поэтому самое время получить профессию мечты, тем более с новогодней скидкой в 60%

Python-разработчик - 3784р
Веб-разработчик - 4696р
PHP разработчик - 3797р
Fullstack разработчик - 3604р

Выбирай себе подарок на новый год! 🎄🔥

Ghost Mouse (move your mouse / finger)

Анимация приведения привязанная к курсору на Three.js.

👉 @sWebDev

Как определять направление прокрутки в React

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

👉 @sWebDev

LLM.js

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

👉 @sWebDev

Simon

Мини-игра на Anime.js.

👉 @sWebDev

React-разработка интерфейса: создание визуализаций в реальном времени с помощью Codux

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

👉 @sWebDev

Crossy Road with three.js

Игра "Crossy Road"" на Three.js.

👉 @sWebDev

DeepL.js

DeepL.js - это библиотека JavaScript, которая позволяет использовать API машинного перевода DeepL в веб-приложениях.

Библиотека предназначена для использования в Node.js. Однако также может быть использована в веб-приложениях, если она подключена в качестве модуля CommonJS.

👉 @sWebDev

Использование useState() для создания динамического состояния

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

👉 @sWebDev

Использование 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