This media is not supported in your browser
VIEW IN TELEGRAM
Сделана на SCSS и TypeScript
Please open Telegram to view this post
VIEW IN TELEGRAM
Вы на странице A. С высокой вероятностью через пару секунд пользователь перейдёт на страницу товара B. Нужно ускорить первую отрисовку B, не мешая текущему рендеру A и не ломая кеши. Что лучше сделать?
Anonymous Quiz
21%
На A поставить preload всех ресурсов B
19%
На A сразу prefetch всех ресурсов B высокой важности
43%
На A — preconnect; при намерении — точечный prefetch критичных ресурсов B с корректным
17%
Ничего не делать, HTTP/2 сам разрулит при клике
Разбираем, как собрать несколько внешних поисков (люди, ссылки, исходники), скелетоны и обработку ошибок, подключать новые источники без правок UI. Операторы, профит
Please open Telegram to view this post
VIEW IN TELEGRAM
В PWA нужен быстрый онлайновый старт, фоновое обновление и оффлайн-фоллбэк. Какую стратегию выбрать для HTML и статических ассетов (rev-hash в именах)?
Anonymous Quiz
39%
HTML: network-first (+fallback); ассеты: cache-first
16%
HTML: cache-only; ассеты: network-only
23%
HTML: stale-while-revalidate; ассеты: network-first
23%
HTML: cache-first; ассеты: cache-first
This media is not supported in your browser
VIEW IN TELEGRAM
Сделана на CSS и JavaScript
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
dataset в JavaScript и когда его применять?Свойство
dataset позволяет получать и изменять пользовательские атрибуты data-* у HTML-элементов. Это удобный способ хранить дополнительную информацию прямо в разметке, не перегружая код.<button id="btn" data-user-id="42" data-role="admin">Click me</button>
<script>
const btn = document.getElementById("btn");
console.log(btn.dataset.userId); // "42"
console.log(btn.dataset.role); // "admin"
</script>
dataset удобно использовать для передачи параметров в JS без жёсткой привязки к классам или id: идентификаторы пользователей, статусы элементов, флаги состояния. Это делает код более гибким, читаемым и декларативным.
Please open Telegram to view this post
VIEW IN TELEGRAM
Настраиваете CSP. Нужно запретить любой инлайн-JS, но оставить один критичный инлайн-скрипт, который меняется на каждом ответе. Скрипты грузятся с вашего домена и CDN. Что выбрать?
Anonymous Quiz
23%
script-src 'self' cdn.example.com 'unsafe-inline'
25%
script-src 'self' cdn.example.com 'sha256-...' (фикс. хэш)
40%
script-src 'self' cdn.example.com 'nonce-<per-request>'
13%
script-src * 'strict-dynamic'
Please open Telegram to view this post
VIEW IN TELEGRAM
В React-списке с контролируемыми <input> можно удалять элементы из середины. Сейчас key — индекс массива. Пользователи жалуются, что текст «переезжает» в соседние строки после удаления. Что делать?
Anonymous Quiz
15%
Обернуть список во фрагмент <>...</>
77%
Давать стабильные key по id сущности и не переиспользовать ключи
0%
Сделать инпуты неконтролируемыми
8%
Добавить React.memo к элементу списка
Расскажу, как я накатал Python-скрипт (~200 строк), который из трёх скринов сайта (десктоп/планшет/мобила) собирает одну адаптивную HTML-вёрстку на Tailwind; код, демо и подводные камни.
Please open Telegram to view this post
VIEW IN TELEGRAM