Frontender Libs - обзор библиотек JS / CSS

Узнали ваши реакции?

👍 - Да.

🤔 - Нет.

👉 @sWebDev | #юмор

👍9🤔7👎1

1.42K views11:00

Строгая типизация в Angular

Флаг strictTemplates в Angular повышает строгость типизации в шаблонах, усиливая статическую проверку кода и предотвращая распространённые ошибки во время разработки. Этот режим требует, чтобы все выражения в шаблонах были строго соответствующими типам, определённым в TypeScript-компонентах.

Пример того, как strictTemplates помогает обнаруживать ошибки типизации в шаблоне:

// В компоненте Angular
export class AppComponent {
  userAge: number;
}

// В шаблоне Angular
<input [value]="userAge.toString()"> // Исправление ошибки компиляции

Здесь, если userAge предполагается использовать как строку в атрибуте value, без strictTemplates TypeScript не выявил бы несоответствие типов до этапа выполнения. С strictTemplates Angular требует, чтобы вы явно преобразовали number в string, что устраняет потенциальные ошибки в рантайме.

👉 @sWebDev

👍4❤1

1.56K views08:11

0:12

Responsive GSAP Slider with Button Wave Effect

Анимированный слайдер на GSAP.

👉 @sWebDev

❤7

1.68K views16:00

0:14

1.58K views07:34

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

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

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

👉 @sWebDev | #юмор

🤔20👍5❤1

1.61K views09:34

Blockdom.js

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

👉 @sWebDev

❤3

1.79K views06:52

Обзор

0:52

Media is too big

Veggie Knight

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

👉 @sWebDev

👍3👎2

1.63K views07:12

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

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

👉 @sWebDev

👍5

1.79K views14:36

Статья

0:14

On-Scroll Fire Transition

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

👉 @sWebDev

👍5👎2❤1

1.66K views08:02

Knockout.js

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

👉 @sWebDev

👍4🤔2👎1

1.77K views07:12

Обзор

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

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

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

13.05.2024

, в котором мы рассматривали этот функционал.

👉 @sWebDev

❤3

1.7K views15:14

Поддерживает кэш компонентов для ускорения их повторного рендеринга.

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

Anonymous Quiz

28%

44%

Кэширует результаты запросов к серверу для предотвращения их дублирования.

21%

Управляет кэшем состояний для оптимизации отклика приложения.

Интегрирует кэш сценариев для улучшения производительности сборки проекта.

👍3

212 voters1.63K views15:14

0:09

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

👉 @sWebDev | #юмор

👍15

1.79K views09:13

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

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

👍4👎2

2.07K views07:43

0:23

Media is too big

Spheres

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

👉 @sWebDev

👍3

1.75K views08:12