UAParser.js

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

👉 @sWebDev

Pop-out Scrollers w/ GSAP

Пример реализации слайдера на GSAP.js.

👉 @sWebDev

Создание асинхронных операций для сигналов в Angular

Эта статья о том, как построить computedAsync для сигналов в Angular. Сигналы - это новая функция Angular, которая позволяет коду сообщать шаблонам (и другому коду), что данные изменились. Это улучшает обнаружение изменений в Angular, а также повышает производительность и реактивность кода. Автор статьи объясняет, как использовать сигналы, как создавать вычисляемые сигналы с помощью computed и computedAsync, и как работать с асинхронными операциями с помощью computedAsync.

👉 @sWebDev

Sad Walk

Пиксельная анимация на Three.js.

👉 @sWebDev

Joint.js

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

👉 @sWebDev

Cоздание сложных макетов в Angular

Какой атрибут директивы ng-template-outlet определяет имя шаблона, который будет вставлен?

👉 @sWebDev

Реализация технологии lazy loading в Angular

Статья рассказывает о том, как реализовать технологию lazy loading в Angular приложениях.

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

👉 @sWebDev

Хук для работы с action

useFormState – новый хук в React 19, помогающий работать с action у формы. Он принимает функцию action и дефолтный стейт формы, возвращая два значения:
Текущий стейт формы: обновляется при каждом вызове action.
Новый action: используется в форме для передачи данных в action.

Пример:

import { useFormState } from 'react-dom';
import { action } from './action';

function MyComponent() {
  const [state, formAction] = useFormState(action, null);
  // ...

  return (
    <form action={formAction}>
      {/* ... */}
    </form>
  );
}

👉 @sWebDev

AnimeJS Animation Effects

Пример анимации сетки на Anime.js.

👉 @sWebDev

Как писать чистые компоненты Vue

Эта статья о том, как писать чистые компоненты Vue. Автор статьи предлагает использовать паттерны Функциональное ядро и императивный интерфейс.

Функциональное ядро: "чистая" часть кода, где живет бизнес-логика. Она не зависит от Vue и легко тестируется.

Императивный интерфейс: часть кода, которая взаимодействует с Vue. Здесь вы управляете state, событиями и другими Vue-специфическими вещами.

👉 @sWebDev

React Icons

Библиотека предоставляет набор из более чем 1 000 иконок. Иконки можно кастомизировать, настроить под себя, изменив их размер и цвет.

Работать с иконками просто благодаря API. Кроме того, разработчик может создавать пользовательские наборы значков либо же переопределять стили отдельных значков по умолчанию, если это нужно для конкретного проекта.

👉 @sWebDev

Metrognome

Пример реализации метронома на anime.js.

👉 @sWebDev

Передозировка useMemo

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

👉 @sWebDev

Basic animations via Anime.js

Примеры реализации базовых анимаций на Anime.js.

👉 @sWebDev

Dnd Kit

Библиотека для создания элементов drag and drop в React. Соответственно, разработчик может без проблем добавлять эти функции в свои приложения, давая возможность пользователям управлять контентом при помощи визуальных инструментов.
Важная особенность Dnd Kit — бесшовная работа с HTML5 drag-and-drop API.

👉 @sWebDev

Объединение рефов в React

Какая функция позволяет объединить два или более рефов в один?

👉 @sWebDev

Генератор HTML-таблиц в React

В этой статье автор рассказывает о том, как создать генератор HTML-таблиц с помощью React.

Генератор HTML-таблиц — это инструмент, который позволяет динамически создавать HTML-таблицы. Это может быть полезно в различных случаях, например, когда вам нужно отображать данные из базы данных или API.

👉 @sWebDev

Передача контекста в шаблоны

Директива ngTemplateOutletContext позволяет передавать контекст шаблону, вставляемому с помощью ngTemplateOutlet. Директива имеет один атрибут: context.

<div>
  <ng-template-outlet name="myTemplate" [ngTemplateOutletContext]="context"></ng-template-outlet>
</div>

<ng-template #myTemplate let-data>
  <p>{{data.name}}</p>
</ng-template>

<button (click)="changeContext()">Изменить контекст</button>


import { Component } from '@angular/core';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {

  context = {
    name: 'John Doe'
  };

  changeContext() {
    this.context = {
      name: 'Jane Doe'
    };
  }

}

В этом примере ngTemplateOutletContext используется для передачи объекта context в шаблон myTemplate, который использует переменную let-data для доступа к значению свойства name объекта context.

👉 @sWebDev

Anime.js

Анимация линий на Anime.js.

👉 @sWebDev