Какое утверждение о микрозадачах (microtasks) и макрозадачах (macrotasks) в JavaScript корректно?
Anonymous Quiz
11%
setTimeout всегда выполняется раньше Promise.then
14%
Promise.then планируется в очередь макрозадач
68%
Очередь микрозадач опустошается перед обработкой следующей макрозадачи
7%
setImmediate гарантированно выполняется раньше requestAnimationFrame
Задолбался формулировать промты ИИ для SQL-оптимизации. Сделал тул, который сразу анализирует запрос и даёт рекомендации — никакого диалога, просто результат. Удобно и по делу.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
В чём основное преимущество использования Virtual DOM в современных фреймворках вроде React?
Anonymous Quiz
4%
Он уменьшает размер JavaScript-бандла
4%
Он полностью устраняет необходимость работать с DOM
87%
Он позволяет быстрее рендерить, сравнивая изменения перед обновлением DOM
5%
Он используется только для серверного рендеринга
Пишу, как dev-ленивость убивает UX: зачем плюсы в email, почему их режут, и как это тупо нарушает стандарты. Спойлер: фиксим одну строку и спасаем карму.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
Какой процесс происходит при каждом изменении layout (reflow) в браузере?
Anonymous Quiz
10%
Пересчёт CSS-стилей всех элементов
22%
Перерисовка только изменённых пикселей на экране
43%
Пересчёт геометрии элементов и их положения на странице
25%
Загрузка и повторный парсинг всего DOM
This media is not supported in your browser
VIEW IN TELEGRAM
Сделан на CSS и JS
Please open Telegram to view this post
VIEW IN TELEGRAM
🤨2
classList
в JavaScript и когда его применять?Свойство
element.classList
предоставляет удобный интерфейс для управления CSS-классами элемента. Это проще и безопаснее, чем ручное управление через className
.const button = document.querySelector("button");
button.addEventListener("click", () => {
button.classList.toggle("active");
});
classList удобно использовать при работе с анимациями, состоянием компонентов, переключателями тем и видимостью элементов. Методы .add(), .remove(), .toggle() и .contains() делают код лаконичным и легко читаемым при управлении стилями
Please open Telegram to view this post
VIEW IN TELEGRAM
Что из перечисленного может привести к «заморозке» UI в браузере?
Anonymous Quiz
5%
Асинхронный запрос с использованием fetch
19%
Много операций в очереди микрозадач
21%
Promise с setTimeout
54%
Длительная синхронная операция в основном потоке
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡1
Какой подход лучше всего использовать для оптимизации рендера большого списка элементов в DOM?
Anonymous Quiz
21%
Использовать setTimeout для отложенного рендера
6%
Отрисовывать список целиком сразу
73%
Использовать виртуализацию (например, react-window, virtual-scroll)
0%
Превратить список в изображение и вставить как img
Показываю, как встроил SVG в рабочий стек, чем он крут, какие трюки уже можно юзать. Статья для тех, кто знает HTML/CSS/JS, но с SVG ещё не на «ты». Всё просто, чётко и без магии.
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Сделан на SVG, SCSS и JS
Please open Telegram to view this post
VIEW IN TELEGRAM
Какое утверждение о поведении переменных в JavaScript корректно?
Anonymous Quiz
9%
let и var поднимаются одинаково
58%
var поднимается и инициализируется значением undefined
26%
const можно переназначить, но нельзя переопределить
6%
Объявления с let доступны до строки объявления
Разобрал реально критичные HTML и CSS-ошибки, которые встречаю у коллег. Не вкусовщина, а баги, ломающие интерфейс. Список субъективный, но аргументированный. Готов поспорить — или согласитесь?
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2
Почему изменение classList у элемента может вызвать перерисовку страницы?
Anonymous Quiz
21%
classList автоматически пересоздаёт весь DOM
67%
Изменение класса может вызвать перерасчёт стилей и layout
3%
classList работает только при перерисовке вручную
9%
classList обновляется только при следующем requestAnimationFrame
This media is not supported in your browser
VIEW IN TELEGRAM
Сделано на SCSS
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3