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

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

86 voters679 views07:00

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

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

705 views15:00

👍 2 👎

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

3D wave animation

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

703 views07:00

682 views15:00

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

Anonymous Quiz

59%

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

15%

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

19%

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

79 voters675 views07:07

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

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

680 views15:10

👍 2 👎

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

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

Anonymous Quiz

11%

15%

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

58%

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

16%

Утечка памяти при использовании большого количества DOM-элементов

74 voters681 views07:00

CSS-only Custom range slider

Интересный слайдер с динамичным отображением

666 views15:46

600 views09:22

Please open Telegram to view this post

VIEW IN TELEGRAM

585 views09:31

Механизм, при котором обработчик событий создаётся с помощью setTimeout

Что из перечисленного наиболее точно описывает событийную делегацию (event delegation) в JavaScript?

Anonymous Quiz

74%

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

15%

Автоматическая передача события между двумя независимыми DOM-элементами

Метод прямой подписки на события всех дочерних элементов вручную

72 voters547 views07:00

Hover Glyph Button

Кнопка с анимированным эффектом при наведении

536 views15:27

👍 1 👎

🔗 Открыть код

Какое утверждение наиболее точно описывает цель использования Shadow DOM в веб-разработке?

Anonymous Quiz

Это механизм кэширования компонентов в браузере

58%

Это способ изоляции стилей и структуры компонента от остального DOM

Это система глобальных событий внутри веб-компонентов

23%

Это часть виртуального DOM в React

77 voters518 views07:00

Перенаправления в Angie: return, rewrite и примеры их применения

В этой статье мы разберём все основные методы перенаправлений: от простых до сложных. Начнём с общего принципа обработки директив в модуле rewrite.

473 views15:00

Collapsible Timeline

Таймлайн с возможностью раскрывать пункты

464 views07:14

447 views15:00

Какое поведение наиболее точно описывает влияние атрибута contenteditable на элемент?

Anonymous Quiz

Превращает элемент в input

71%

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

Автоматически сохраняет изменения в localStorage

Делает текст элемента доступным только для копирования

58 voters423 views07:00

Где хибара деревянная, а где град каменный: сказ о сайтах простых и сложных

Когда стоит задача «нужен сайт», то есть три пути: шаблон, конструктор и разработка с нуля. Разбираемся, когда не стоит экономить, а когда лучше вообще не начинать.

404 views15:00

👍 1 👎