Сканирование и генерация QR-кода с помощью ZXing и Angular

Статья рассказывает о том, как использовать QR-коды в приложениях на Angular с помощью библиотеки ZXing.

👉 @sWebDev

Async Transitions: обновление без блокировки

Transition API в React позволяет плавно обновлять состояние без блокировки UI.

Как использовать:

1. Импортируйте useTransition.
2. Создайте хук useTransition.
3. Оберните изменение состояния в startTransition.

Что происходит:

1. startTransition вызывает функцию асинхронно, позволяя отменить изменение.
2. Пока функция выполняется, isPending = true.
3. Когда функция завершается, isPending = false.

Пример:

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }

  return (
    <div>
      <p>Current tab: {tab}</p>
      <button onClick={() => selectTab('home')}>Home</button>
      <button onClick={() => selectTab('about')}>About</button>
      {isPending && <p>Loading...</p>}
    </div>
  );
}

👉 @sWebDev

Blob Shader

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

👉 @sWebDev

Надеемся, что вы любите языки, на которых пишите.

👉 @sWebDev

erid: LjN8JvfNh

Верстаешь сайты, но не понимаешь JavaScript? 👀

Хочешь стать Frontend-разработчиком?

Но как ты сделаешь это, если не знаешь:
— С чего начать изучение JavaScript?
— Как прогрессировать в освоении языка?
— Как достигать результата в веб-разработке?

Я Андрей Шопинский — Frontend-разработчик из крупного Российского банка.

⚠️ 22 марта в 18:30 по МСК я проведу бесплатный эфир в своём Telegram-канале про Frontend-разработку, где отвечу на эти вопросы и расскажу как я лично изучал JavaScript и стал программистом.

Подписывайся на канал, чтобы не пропустить!

Optics.js

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

👉 @sWebDev

Over-Engineered Buttons: Download the Matrix

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

👉 @sWebDev

Отправка электронных писем из вашего приложения React

В статье подробно описаны два популярных решения для отправки email-ов из React-приложения: Formspree и EmailJS.

Formspree - это простой вариант, не требующий сервера. EmailJS - более гибкое решение, которое позволяет использовать различные SMTP-серверы.

👉 @sWebDev

Анимация капли

Пример анимации капли с эффектом вибрации на Three.js.

👉 @sWebDev

Brain.js

Brain.js — это библиотека JavaScript, которая позволяет создавать и тренировать нейронные сети в браузере или среде Node.js.

👉 @sWebDev

Параметр обновления модели ngModelOptions

Какой параметр ngModelOptions определяет, когда происходит обновление модели?

👉 @sWebDev

Обработка ошибок в Angular с помощью оператора повтора

Статья рассматривает обработку ошибок в Angular с использованием оператора retry. Он автоматически повторно подписывается на неудачный Observable определенное количество раз. Это позволяет повторно отправить HTTP-запрос, если он завершился неудачей. Автор также обсуждает использование интерцепторов для обработки ошибок аутентификации и повторной попытки запросов после повторной аутентификации.

👉 @sWebDev

Хук useSWR для удаленной выборки данных

useSWR – это хук React, который помогает управлять данными, полученными с сервера. Он основан на паттерне "stale-while-revalidate" (SWR).

Как это работает:

SWR возвращает данные из кэша, если они есть (даже если они устарели). Далее отправляет запрос на сервер, чтобы получить свежие данные. Наконец, обновляет данные в компоненте, когда они будут получены.

Пример:

import useSWR from 'swr';

function MyComponent() {
  const { data, error } = useSWR('/api/users');

  if (error) return <div>Error loading users</div>;

  return (
    <ul>
      {data.users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

В этом примере useSWR используется для получения данных с сервера по адресу /api/users, data содержит объект с данными, полученными с сервера., а error содержит сообщение об ошибке, если запрос на сервер не удался.

👉 @sWebDev

Text animation with anime.js

Интерактивный пример анимации текста на Anime.js.

👉 @sWebDev

Надеемся, что это не ваши поисковые запросы.

👉 @sWebDev | #юмор

jBox

jBox – это библиотека JavaScript, которая позволяет создавать различные типы всплывающих окон.

👉 @sWebDev

CartaSV

Интерактивная анимация открытки с персонализированным содержимым на GSAP.js.

👉 @sWebDev

Создание Angular-приложения на базе искусственного интеллекта с помощью Google Gemini

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

👉 @sWebDev