Million.js

Million.js - это минималистичный фреймворк на JavaScript, который эффективно работает с элементами DOM. В отличие от традиционных фреймворков, которые обновляют весь DOM при каждом изменении состояния.

Библиотека использует более детальный подход, обновляя только необходимые части DOM. Million.js также имеет свой компилятор, который автоматически оптимизирует компоненты React на сервере.

👉 @sWebDev

Назначение action в хуке useFormState

Для чего используется атрибут action в хуке useFormState?

👉 @sWebDev

Веб-скрапинг с Bright Data, Node.js и Puppeteer

Статья рассказывает о том, как использовать Bright Data для эффективного сбора данных с веб-сайтов с помощью Node.js. В статье рассматриваются следующие темы: Введение в веб-скрапинг, преимущества Bright Data, настройка Node.js и сбор данных с помощью Bright Data и Puppeteer.

👉 @sWebDev

Бесплатный практический вебинар для всех возрастов: Профессия «Frontend-разработчик».

⏰ Когда: уже 14 марта в 19:00 по мск.

Вы узнаете о типичных рабочих задачах программиста и напишете мини-игру, которая работает прямо в браузере. Под капотом немного HTML+CSS и базовые конструкции JS.

Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular?

🎁 Всем, кто зарегистрировался — Карта компетенций начинающего Frontend-разработчика, а каждому участнику — Гайд «Как заговорить на сленге IT-специалистов».

Оптимизация жизненного цикла компонентов

afterRender и afterNextRender - это два новых хука жизненного цикла, которые были добавлены в Angular 17.

afterRender вызывается один раз после завершения рендеринга компонента.
Подходит для:
1) Доступа к DOM-элементам.
2) Инициализации сторонних библиотек.
3) Выполнения кода, который должен быть выполнен после рендеринга.

afterNextRender вызывается после каждого цикла обнаружения изменений.
Подходит для:
1) Синхронизации состояния компонента с DOM.
2) Обновления отображения в ответ на изменения данных.
3) Реагирования на изменения размеров окна.

afterRender и afterNextRender не вызываются при SSR (Server-Side Rendering).
afterNextRender не гарантирует, что DOM будет стабильным.

Пример:

export class MyComponent {
  constructor() {}

  ngAfterRender() {
    console.log('Component has been rendered');
  }

  ngAfterNextRender() {
    console.log('Component has been rendered and change detection has run');
  }
}

👉 @sWebDev

Refokus 22

Пример анимации страницы на Three.js.

👉 @sWebDev

Мем смешной, а ситуация страшная. Лайк, если работая программистом, следишь за внешним видом и здоровьем.

👉 @sWebDev | #юмор

Packery

Библиотека Packery - это JavaScript-библиотека и jQuery-плагин, который позволяет создавать бесшовные и перетаскиваемые макеты. Она использует алгоритм bin-packing для заполнения пустых пробелов. Макеты Packery могут быть упорядочены интеллектуально или хаотично.

👉 @sWebDev

Mysterious text

Анимация текста на GSAP.js.

👉 @sWebDev

Как использовать forwardRef с generic компонентами

Статья рассказывает о том, как использовать forwardRef с обобщенными компонентами в React и TypeScript. Объясняется, почему стандартная реализация forwardRef приводит к потере вывода типов для обобщенных компонентов, и предлагается решение, которое позволяет восстановить вывод типов с помощью переопределения forwardRef с другим типом

👉 @sWebDev

AnimeJS Player

Пример реализации плеера на Anime.js.

👉 @sWebDev

FP.ts

FP.ts – это библиотека для функционального программирования (FP) на TypeScript. Она позволяет использовать популярные паттерны и абстракции, доступные в большинстве функциональных языков.

👉 @sWebDev

Передача контекста в шаблоны

Как получить доступ к контексту, переданному в шаблон с помощью директивы ngTemplateOutletContext?

👉 @sWebDev

Сканирование и генерация 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