Click to Add Flowers

Интерактивный холст на Three.js.

👉 @sWebDev

Satisfying curly cursor

Интерактивный волнистый курсор на JavaScript.

👉 @sWebDev

MathJax

MathJax - это кросс-браузерная библиотека JavaScript, которая отображает математические обозначения в веб-браузерах с использованием разметки MathML, LaTeX и AsciiMathML. MathJax используется различными известными сайтами, включая ArXiv, Stack Overflow, Math Stack Exchange и Wikipedia.

👉 @sWebDev

Группировка элементов без создания нового элемента DOM

Чтобы улучшить производительность, можно использовать директиву Angular, которая позволяет группировать элементы без создания нового элемента DOM. Как называется эта директива?

👉 @sWebDev

Генератор библиографии из закладок браузера: как это работает

Туториал о том, как создать программу, которая преобразует закладки браузера в список библиографических ссылок.

Программа использует простой алгоритм, который извлекает из закладок браузера следующие данные: заголовок закладки, URL закладки и описание закладки. Затем программа создает библиографическую ссылку для каждой закладки и сохраняет ее в файле.

👉 @sWebDev

Реактивные объекты в Vue.js

Функция reactive() в Vue.js позволяет преобразовать обычный объект в реактивный. Реактивный объект - это объект, который отслеживает изменения своих свойств и уведомляет об этих изменениях. Принимает обычный объект в качестве аргумента и возвращает реактивный объект.

Например:

const obj = {
  name: "John Doe",
  age: 30,
};

const reactiveObj = reactive(obj);

Код создаст реактивный объект reactiveObj, который будет отслеживать изменения свойств name и age объекта obj.

reactive() также может принимать массив в качестве аргумента. В этом случае будет создан реактивный массив, который будет отслеживать добавление, удаление и изменение элементов массива. Например:

const arr = [1, 2, 3];

const reactiveArr = reactive(arr);

Получим реактивный массив reactiveArr, который будет отслеживать изменения элементов массива arr.

👉 @sWebDev

Untitled

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

👉 @sWebDev

9 плохих привычек в React, от которых нужно избавиться

Статья о том, как писать более качественный React-код, избегая распространенных ошибок.

👉 @sWebDev

Radix Primitives

Это открытая библиотека компонентов пользовательского интерфейса (UI), написанная на основе React. Библиотека содержит набор низкоуровневых компонентов, которые могут быть использованы для создания высокопроизводительных, доступных и настраиваемых веб-приложений.

👉 @sWebDev

Глитч эффект на Anime.js

Пример анимации глитча Anime.js.

👉 @sWebDev

Создание дизайн-системы с помощью React и Web Components

Статья о том, как использовать React и Web Components для создания набора унифицированных и повторно используемых компонентов пользовательского интерфейса.

👉 @sWebDev

Apple Tear Strip

Интеративная анимация скретч-кода на GSAP.js.

👉 @sWebDev

Fuse.js

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

👉 @sWebDev

Циклическое отображение элементов массива в Angular

Какой синтаксис используется для циклического отображения элементов массива с помощью директивы ngForOf?

👉 @sWebDev

Обнаружение локальных изменений в Angular 17

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

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

👉 @sWebDev

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

Директива ng-template-outlet позволяет вставлять шаблоны в другие шаблоны. Это может быть полезно для создания более сложных макетов.

Директива имеет один атрибут: name - имя шаблона, который будет вставлен.

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

<div>
  <ng-template-outlet name="header"></ng-template-outlet>
  <ng-template-outlet name="content"></ng-template-outlet>
</div>

<ng-template #header>
  <h1>Заголовок</h1>
</ng-template>

<ng-template #content>
  <p>Контент</p>
</ng-template>

В примере ng-template-outlet используется для вставки двух шаблонов в один контейнер. Шаблон с именем header будет вставлен в верхнюю часть контейнера, а шаблон с именем content будет вставлен в нижнюю часть контейнера.

👉 @sWebDev

Diorama - ThreeJS

Пример реализации трехмерной диорамы на Three.js.

👉 @sWebDev

Освоение обработки ошибок в Angular: подробное руководство

В статье автор рассказывает о том, как обрабатывать ошибки в Angular приложениях. Он рассматривает четыре простых и наиболее распространенных стратегии обработки ошибок:

- Обработка исключений в синхронном и асинхронном коде.
- Обработка HTTP ошибок.
- Использование сервисов ошибок.
- Обработка ошибок в компонентах.

👉 @sWebDev