useMutableSource: подключаем React к изменяемому источнику данных

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

useMutableSource принимает два аргумента:
1. Config: объект, содержащий функции для чтения и подписки на источник данных.
2. InitialData: начальное значение данных, которое будет использоваться в случае ошибки при чтении источника данных.

Пример useMutableSource:

  const MyComponent = () => {
  const [data, setData] = useState(null);

  const { read, subscribe } = useMutableSource({
    url: "https://example.com/data",
    // ...
  });

  useEffect(() => {
    // Подписываемся на источник данных
    subscribe(data => {
    setData(data);
    });
  }, []);

  return (
    <div>
    {data && <p>Data: {data.count}</p>}
    </div>
  );
  };

👉 @sWebDev

Bboy Evolution

Морфинг анимация картины "Evolution of the B-boy Dancer".

👉 @sWebDev

♥️ Все наши каналы по JS / PHP / Python, подпишись ♥️

@seniorFront - всё про фронтенд, практика, примеры кода, интересные статьи

@frontendInterview - подготовка к собеседованиям по фронтенду

@web_craft - php, Laravel, фронтенд

@python_practics - всё про Python, обучающие материалы, полезные советы и статьи

Добавление WebAuthn в веб-приложение

В статье рассказывается, как добавить WebAuthn в веб-приложения. WebAuthn - это новый метод аутентификации, который обеспечивает более высокий уровень безопасности, чем устаревшие пароли и SMS-подтверждения. Он использует аутентификацию на основе публичных ключей, которая позволяет пользователям входить в систему с помощью устройств, таких как смартфоны или смарт-карты.

👉 @sWebDev

Babel

Babel - это транскомпилятор JavaScript, который преобразует код, написанный на новых версиях JavaScript, в код, который может быть выполнен в старых браузерах или средах.

👉 @sWebDev

Anime.js logo animation

Анимация лого на Anime.js.

👉 @sWebDev

Никаких больше If/Else: Лучшие советы для разработчиков Angular

Структуры if/else или условные операторы хоть и необходимы, но их чрезмерное использование может привести к проблемам. Чтобы решить эти проблемы, необходимо использовать более структурированный и специфичный для Angular подход к обработке условной логики в приложениях.

👉 @sWebDev

Cheerio

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

Преимущества Cheerio:
1. Производительность: очень быстрая библиотека, которая может обрабатывать большие HTML-документы.
2. Легкость в использовании: имеет простой и понятный API, который основан на jQuery.
3. Универсальность: поддерживает как HTML, так и XML.

👉 @sWebDev

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

Canvas Particles w/ GSAP.js

Анимированные пузыри выполненные на Gsap.js.

👉 @sWebDev

Как правильно объявить переменную в <script setup>?

Какой из следующих вариантов является правильным синтаксисом для объявления переменной в компоненте <script setup> ?

Вариант 1: export const count = ref(0);
Вариант 2: var count = ref(0);
Вариант 3: const count = ref(0);
Вариант 4: let count = ref(0);

👉 @sWebDev

TypeScript: разработка WebAssembly-компилятора

В данной статье автор расскажет, как разработать компилятор для WebAssembly на TypeScript через разработку языка программирования для рендеринга множества Мандельброта.

👉 @sWebDev

Использование useState() для создания динамического состояния

Хук useState() используется для создания статического состояния, которое не меняется во время работы компонента. Однако его также можно использовать для создания динамического состояния, которое может изменяться в зависимости от внешних факторов.

Пример:

  function DynamicState() {
  const [state, setState] = useState(0);

  useEffect(() => {
    // Получаем данные из внешнего источника
    const data = fetch("https://example.com/data").then(response => response.json());

    // Обновляем состояние с помощью данных из внешнего источника
    setState(data.state);
  }, []);

  return (
    <div>
    <p>Текущее состояние: {state}</p>
    </div>
  );
  }

В этом примере мы используем хук useEffect() для получения данных из внешнего источника. Затем мы используем эти данные для обновления состояния компонента с помощью хука useState().

👉 @sWebDev

5-Way Gradient Generator

Интерактивный пятисторонний градиент на Vue.js.

👉 @sWebDev

React: разрабатываем кастомный useEffect

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

👉 @sWebDev

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