Пользуемся инструментами тестирования?

👍 - Пользуемся.

🤔 - Надо еще и тестировать было?

👉 @sWebDev | #юмор

Blockdom.js

Blockdom - это экспериментальная библиотека JavaScript, предназначенная для оптимизации работы с виртуальным DOM. Она предлагает уникальный подход к рендерингу виртуального DOM. В отличие от традиционных библиотек виртуального DOM, которые представляют элементы по отдельности, Blockdom использует блоки. Они представляют собой элементы с его статическим содержимым и специальными тегами для динамических частей. Этот подход позволяет использовать cloneNode(true) для блоков, что значительно ускоряет процесс сравнения (diffing) из-за меньшего размера дерева виртуального DOM.

👉 @sWebDev

Veggie Knight

Пример реализации игры "Fruit Ninja" на GSAP.

👉 @sWebDev

Ускоренный запуск системы “Аутентификации + база данных” (React.js и Firebase)

В статье рассказывается о настройке приложения React.js с Firebase для аутентификации и базы данных NoSQL Firestore. В ней обсуждаются преимущества использования этого подхода для разработчиков полного цикла. В статье описаны шаги по настройке проекта, включая создание компонентов React, инициализацию Firebase и настройку файла .env. В ней также подробно описано, как использовать консоль Firebase для настройки аутентификации и базы данных.

👉 @sWebDev

On-Scroll Fire Transition

Переход с анимацией тлеющего листа на GSAP.

👉 @sWebDev

Knockout.js

Knockout.js — это JavaScript библиотека, которая помогает строить динамичные, интерактивные веб-приложения, используя паттерн Model-View-ViewModel (MVVM). Она позволяет связывать HTML элементы с данными модели через декларативные привязки. Особенностью Knockout является автоматическое обновление пользовательского интерфейса при изменении данных модели, что делает разработку интерфейса более интуитивно понятной и менее подверженной ошибкам.

👉 @sWebDev

Назначение React.cache()

Что делает функция React.cache()?

Если забыли, то вернитесь к посту от 13.05.2024, в котором мы рассматривали этот функционал.

👉 @sWebDev

За версией 3.0. в магистратуру.

👉 @sWebDev | #юмор

Оптимизация обработки событий

useEffectEvent — это хук в React, который разработан для более эффективной обработки побочных эффектов, вызываемых событиями, чем традиционный хук useEffect.

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

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

import { useEffectEvent } from 'react'; // Гипотетический импорт

function MyComponent() {
  const handleClick = useEffectEvent(() => {
    console.log('Button clicked');
  });

  return <button onClick={handleClick}>Click me</button>;
}

В этом примере handleClick, созданный с использованием useEffectEvent, обеспечивает оптимизированное выполнение логики при каждом клике на кнопку. Это улучшает предсказуемость выполнения побочных эффектов и упрощает отладку и поддержку кода, одновременно повышая производительность за счет снижения количества лишних перерендеров.

👉 @sWebDev

Spheres

Анимация шара с эффектом гравитации на Three.js.

👉 @sWebDev

Tidy.js

Tidy.js — это библиотека для работы с данными в JavaScript, созданная для упрощения манипуляций с данными в ваших JavaScript приложениях.

Основные возможности Tidy.js включают:

- Преобразование и агрегирование данных.
- Сортировка и фильтрация данных.
- Выполнение различных статистических функций.

👉 @sWebDev

Simple campfire

Анимация костра на Anime.js.

👉 @sWebDev

Миграция на React 19 с помощью ast-grep

Статья рассказывает о миграции на React 19 с помощью инструмента ast-grep, который позволяет идентифицировать и модифицировать определённые шаблоны в коде, что упрощает обновление крупных кодовых баз. В статье подробно описаны три основные модификации: использование <Context> в качестве провайдера, удаление неявного возврата из колбэка ref и использование ref как пропса с удалением forwardRef.

👉 @sWebDev

Альтернативная математика или математика собеседований

Статья обсуждает особенности математических задач, с которыми сталкиваются кандидаты на собеседованиях, особенно в секторах ИТ. Основное внимание уделяется переходу от традиционных академических задач к практическим, нестандартным проблемам, которые проверяют способность кандидатов к решению задач в непривычных условиях.

👉 @sWebDev | #собес

Draggabilly

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

👉 @sWebDev

Отличие ViewChildren от ContentChildren

Какое ключевое отличие декоратора @ViewChildren от @ContentChildren?

Если забыли, то вернитесь к посту от 20.05.2024.

👉 @sWebDev