Нужно отложить тяжёлый рендер вне экрана, но чтобы место под блок было зарезервировано и не было скачка макета (CLS). Что используешь?
Anonymous Quiz
39%
content-visibility: auto вместе с фиксированной aspect-ratio/высотой контейнера
32%
visibility: hidden
8%
display: none до скролла
21%
opacity: 0
Полистав различные ресурсы в Интернете и просмотрев множество видео по данной теме, я решил составить наиболее полную картину по данному, не побоюсь этого слова, революционному API, чтобы вы уже сегодня могли начать использовать его в своём проекте!
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Сделано на SCSS и JS
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
Нужно прогреть DNS+TLS к стороннему домену до запроса. Что поставить в <head>?
Anonymous Quiz
28%
dns-prefetch
27%
prefetch
29%
preconnect
15%
preload
Сегодня я решил показать вам несколько проверенных трюков. Выбрал самые лёгкие в освоении, чтобы вы смогли внедрить их уже сегодня, не отвлекаясь на сложности.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2
Как надёжно определить, что страница восстановлена из bfcache (а не заново загружена)?
Anonymous Quiz
50%
pageshow с event.persisted === true
3%
load
28%
DOMContentLoaded
18%
visibilitychange при document.hidden === false
This media is not supported in your browser
VIEW IN TELEGRAM
Сделано на SCSS
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2
append() в JavaScript и когда его применять?Метод
append() добавляет один или несколько элементов или текст в конец указанного DOM-элемента. Это современный и удобный способ динамически изменять содержимое страницы.<ul id="list"></ul>
<script>
const list = document.getElementById("list");
const newItem = document.createElement("li");
newItem.textContent = "Новый элемент";
list.append(newItem);
</script>
append() удобно использовать при генерации списков, карточек, уведомлений и других динамических компонентов. В отличие от appendChild(), он может добавлять сразу несколько узлов или строки текста, что делает его более гибким
Please open Telegram to view this post
VIEW IN TELEGRAM
Нужно подсветить карточку, когда её внутренняя кнопка в фокусе, без JS. Что использовать?
Anonymous Quiz
81%
:has(:focus)
8%
:parent
5%
:matches()
5%
Никак — только JS
This media is not supported in your browser
VIEW IN TELEGRAM
Сделано на SCSS и JavaScript
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2
Из браузера делаете CORS fetch к API; нужно, чтобы куки не отправлялись. Что выбрать?
Anonymous Quiz
18%
credentials: "omit"
13%
SameSite=Strict
38%
Referrer-Policy: no-referrer
30%
Cache-Control: no-store
На основе наблюдений я выделил 5 самых проблемных случая, когда JavaScript блокирует загрузку сайта. В статье вы узнаете, как с ними бороться.
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Сделано на CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
Нужно показывать обводку только при клавиатурной навигации, но не при клике мышью. Что использовать?
Anonymous Quiz
52%
:focus-visible
22%
:focus и outline: none
3%
Полностью убрать outline
22%
JS-класс на mousedown
Разбираю феномен «калькуляторов на чистом CSS» — как язык оформления превратился в инструмент логики и почему иногда разработчики делают невозможное просто из любопытства.
Please open Telegram to view this post
VIEW IN TELEGRAM
Нужен единый ввод для мыши/тача/стилуса с поддержкой hover и pressure. Что выбрать?
Anonymous Quiz
28%
Mouse Events
25%
Touch Events
36%
Pointer Events
10%
Wheel Events
Please open Telegram to view this post
VIEW IN TELEGRAM
👌1