GraphQL.js

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

👉 @sWebDev

Реклама. ООО "Яндекс" ИНН 7736207543 Erid LdtCKfwJx

🔥 Разыгрываем Станцию Дуо Макс! Это первая колонка Яндекса с камерой и сенсорным экраном — флагман новой линейки устройств.

Что делать? Подпишитесь на телеграм-каналы @yandex и @techno_yandex, а потом нажмите кнопку «Участвовать» под этим постом. 15 декабря в 13:00 бот рандомно выберет победителя из числа участников.

▶️ А как производят и тестируют умные устройства Яндекса на заводе в Гуанчжоу, смотрите в мини-сериале YaC 2023 — на Кинопоиске и YouTube.

GSAP ScrollTrigger

Анимации на основе положения прокрутки на GSAP.js.

👉 @sWebDev

Улучшение DX с помощью новой трансформации значений входных свойств @Input в Angular

Статья рассказывает о новой функции Angular 17, которая позволяет трансформировать значения входных свойств компонентов.

В Angular 16 и более ранних версиях значения входных свойств компонентов просто копируются из шаблона в компонент. Это может привести к проблемам, если значение свойства необходимо преобразовать перед использованием. Например, если входное свойство должно быть строкой, но пользователь вводит число, то значение будет преобразовано в строку автоматически, но может быть неверным.

Angular 17 добавляет возможность преобразования значений входных свойств с помощью декоратора @Input(). Для этого необходимо передать декоратору функцию, которая будет выполнять преобразование.

👉 @sWebDev

Haunted.js

Haunted.js - библиотека JavaScript, которая предоставляет API для создания интерактивных пользовательских интерфейсов (UI) с использованием Web Components. Она основана на API React Hooks, что делает ее простой в использовании и эффективной.

👉 @sWebDev

Text scroll and hover effect with GSAP and clip

Анимированный скролл на GSAP.JS.

👉 @sWebDev

React: реализация якорей

Какой из следующих методов можно использовать для реализации якоря в React?

👉 @sWebDev

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