WebAssembly: короткий обзор ассемблера для фронтенда

В последнее время фронтенд все больше и больше обрастает новыми технологиями, одна из них — WebAssembly. На ней можно написать полноценное web‑приложение и почти все на что способна ваша фантазия. В статье мы рассмотрим, что такое WebAssembly, как работает и с чем её едят.

👉 @sWebDev

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

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

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

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

function FancyButton(props, ref) {
  const buttonRef = useRef();

  useImperativeHandle(ref, () => ({
    focus() {
      buttonRef.current.focus();
    },
  }));

  return (
    <button ref={ref}>
      Fancy Button
    </button>
  );
}

👉 @sWebDev

Happy New Year 2023

Анимированная новогодняя открытка на Anime.js.

👉 @sWebDev

Современный подход к созданию Angular-приложений

Статья о современном подходе к разработке на Angular с использованием Bit.io, что позволяет разработчикам централизованно хранить компоненты и в следствии упрощает их совместное использование и разработку.

👉 @sWebDev

Spectral.js

Spectral.js — это библиотека смешивания цветов, которая учитывает свойства света.

Если вы смешиваете два цвета с помощью простых значений RGB, вы можете получить некрасивые промежуточные цвета.

👉 @sWebDev

Confetti Cannon

Анимация движения и падения конфетти на Greensock.js.

👉 @sWebDev

Частично управляемые компоненты React: шаблон проектирования для предоставления пользователю контроля над состоянием компонента

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

👉 @sWebDev

Anime.js V3 logo animation

Анимация логотипа на Anime.js.

👉 @sWebDev

AutoLayout.js

AutoLayout.js - это библиотека для автоматического размещения элементов на странице в JavaScript. Она основана на системе Auto Layout, используемой в iOS и macOS.

👉 @sWebDev

Назначение useMutableSource в React

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

👉 @sWebDev

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