Фронтенд Гайд

Что происходит при использовании фазы перехвата (capturing) в обработке событий?

Anonymous Quiz

19%

Событие сначала обрабатывается на целевом элементе

24%

Событие обрабатывается от самого вложенного элемента к родителю

44%

Событие обрабатывается от родителя к целевому элементу до фазы всплытия

14%

Событие обрабатывается только один раз независимо от фазы

80 voters765 views07:00

Фронтенд Гайд

Как устроен event loop в Node.js

Разбирается внутрянка Node.js: что делает libuv, зачем фаз столько и как всё это уживается в одном потоке. После прочтения цикл событий больше не будет магией.

783 views15:00

👍 1 👎 1

🔗 Читать статью

Фронтенд Гайд

Что из перечисленного наиболее точно описывает reflow в контексте браузерного рендеринга?

Anonymous Quiz

19%

Пересчёт и повторный рендеринг только CSS-стилей

21%

Обновление DOM-элементов после сетевого запроса

47%

Пересчёт геометрии и позиций элементов в layout-дереве

13%

Изменение структуры DOM без визуального эффекта

85 voters777 views07:00

Фронтенд Гайд

This media is not supported in your browser

VIEW IN TELEGRAM

Single Keyframe Tricks

Большой набор анимированных кнопок

814 views15:00

This media is not supported in your browser

VIEW IN TELEGRAM

769 views09:00

Фронтенд Гайд

Please open Telegram to view this post

VIEW IN TELEGRAM

833 views09:00

Фронтенд Гайд

Что из перечисленного наиболее точно описывает микрозадачи в JavaScript?

Anonymous Quiz

19%

Это асинхронные задачи, выполняемые после всех событий

Это задачи, выполняемые после каждой отрисовки кадра

70%

Это задачи, которые ставятся в очередь и выполняются сразу после текущего стека вызовов

Это задачи, которые браузер исполняет только при простое

109 voters771 views07:00

Фронтенд Гайд

This media is not supported in your browser

VIEW IN TELEGRAM

Toggle Pill

Набор переключателей с разными стилями анимаций

784 views15:00

👍 4 👎

🔗 Открыть код

Фронтенд Гайд

Что из перечисленного наиболее точно описывает поведение requestAnimationFrame?

Anonymous Quiz

14%

Вызывает функцию каждые 16 мс независимо от загрузки страницы

57%

Гарантирует выполнение функции до следующего кадра браузера

18%

Работает только при наличии CSS-анимаций

11%

Блокирует основной поток до завершения рендеринга

99 voters764 views07:00

Фронтенд Гайд

Настройка location в Angie. Разделение динамических и статических запросов

Объясняю, как работает директива location в Angie и зачем она вообще нужна. Разбираемся, как сервер понимает, что отдавать: статичку, динамику или вообще 404

793 views15:00

👍 2 👎

🔗 Читать статью

Фронтенд Гайд

This media is not supported in your browser

VIEW IN TELEGRAM

3D wave animation

Анимированная галерея с эффектом волны

802 views07:00

775 views15:00

Что из перечисленного наиболее точно описывает критический путь рендеринга (CRP) в браузере?

Anonymous Quiz

Процесс сборки и упаковки JS-файлов для продакшена

58%

Последовательность шагов от загрузки HTML до отображения пикселя на экране

14%

Время между загрузкой JS и началом выполнения

22%

Обход всего DOM-дерева для инициализации всех событий

88 voters772 views07:07

Фронтенд Гайд

Как сделать ужасный для пользователя интерфейс. Коллекция HTML/CSS лайфхаков

Собрал коллекцию HTML и CSS-ужасов для тех, кто вдруг решил саботировать интерфейс. Всё максимально вредно, эффективно и бесит пользователя до искр в глазах

789 views15:10

👍 2 👎

🔗 Читать статью

Фронтенд Гайд

Какое из утверждений наиболее точно описывает проблему layout thrashing?

Anonymous Quiz

11%

Избыточное применение CSS-классов к элементам

12%

Повторный рендер компонента без изменения состояния

62%

Частые чередующиеся чтения и записи layout-свойств, вызывающие множественные reflow