Бесплатный практический вебинар для всех возрастов: Профессия «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

Blob Shader

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

👉 @sWebDev

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

👉 @sWebDev

erid: LjN8JvfNh

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

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

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

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

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

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

Optics.js

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

👉 @sWebDev