🏗 Разбираем Layout Shift
Когда страница загружается, а кнопки и текст смещаются — это не просто раздражает, а напрямую влияет на UX и рейтинг сайта.
В карточках:
— что такое CLS и как его измеряют,
— как находить источник смещения,
— и какие практики помогают сделать интерфейс статичным и предсказуемым.
🐸 Библиотека фронтендера
#career_merge
Когда страница загружается, а кнопки и текст смещаются — это не просто раздражает, а напрямую влияет на UX и рейтинг сайта.
В карточках:
— что такое CLS и как его измеряют,
— как находить источник смещения,
— и какие практики помогают сделать интерфейс статичным и предсказуемым.
#career_merge
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤10
🧩 Задача на понимание устройства JS
В цикле навешиваются обработчики на элементы списка.
Однако при клике на любой пункт в консоль выводится одно и то же число🤔
❓ Как исправить поведение, чтобы при клике выводился правильный индекс элемента:
❤️ — Заменить var i на let i
🔥 — Заменить стрелочную функцию на обычную
⚡️— Перед циклом сделать i = 0;
🐸 Библиотека фронтендера
#code_challenge #js
В цикле навешиваются обработчики на элементы списка.
Однако при клике на любой пункт в консоль выводится одно и то же число
❤️ — Заменить var i на let i
🔥 — Заменить стрелочную функцию на обычную
⚡️— Перед циклом сделать i = 0;
#code_challenge #js
Please open Telegram to view this post
VIEW IN TELEGRAM
❤42⚡1🔥1
Please open Telegram to view this post
VIEW IN TELEGRAM
😁6🌚2
— Не создавайте функции прямо в JSX
— Используйте useCallback при передаче хендлеров в дочерние компоненты
— Особенно критично для списков и больших UI
#hotfix #react
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔5👍4🔥3😁2❤1
Кажется, что это просто поиск элемента на странице — но под капотом браузер делает куда больше.
Он использует готовые структуры DOM и CSSOM, разбирает селектор в токены и выполняет оптимизированный поиск с кешами и хеш-таблицами.
#under_hood #js
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2🥰2