Нужно отложить тяжёлый рендер вне экрана, но чтобы место под блок было зарезервировано и не было скачка макета (CLS). Что используешь?
Anonymous Quiz
38%
content-visibility: auto вместе с фиксированной aspect-ratio/высотой контейнера
32%
visibility: hidden
8%
display: none до скролла
22%
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
49%
pageshow с event.persisted === true
3%
load
29%
DOMContentLoaded
19%
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
82%
:has(:focus)
8%
:parent
6%
: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
39%
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
4%
Полностью убрать outline
22%
JS-класс на mousedown
Разбираю феномен «калькуляторов на чистом CSS» — как язык оформления превратился в инструмент логики и почему иногда разработчики делают невозможное просто из любопытства.
Please open Telegram to view this post
VIEW IN TELEGRAM
Нужен единый ввод для мыши/тача/стилуса с поддержкой hover и pressure. Что выбрать?
Anonymous Quiz
29%
Mouse Events
22%
Touch Events
38%
Pointer Events
11%
Wheel Events
Please open Telegram to view this post
VIEW IN TELEGRAM