This media is not supported in your browser
VIEW IN TELEGRAM
Сделана на SVG, CSS и JavaScript
Please open Telegram to view this post
VIEW IN TELEGRAM
👏2
Статический CSS отдается с Cache-Control: public, max-age=31536000, immutable. Через неделю вышло изменение. Какой подход — best practice — чтобы пользователи получили новую версию без очистки кеша у себя?
Anonymous Quiz
13%
Поменять только заголовки на сервере, URL не трогать
40%
Добавить к ссылке ?v=2, имя файла оставить прежним
15%
На время релиза отключить кеширование, затем вернуть
32%
Включить content hashing в имя файла (app.3f2a.css) и ссылаться на новый URL
История о том, как гуманитарий себе сайт навайбкодил. Внутри - примеры промптов, код и размышления на тему RLHF
Please open Telegram to view this post
VIEW IN TELEGRAM
😁2
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
20%
На A сразу prefetch всех ресурсов B высокой важности
41%
На 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
17%
HTML: cache-only; ассеты: network-only
22%
HTML: stale-while-revalidate; ассеты: network-first
22%
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
20%
script-src 'self' cdn.example.com 'unsafe-inline'
31%
script-src 'self' cdn.example.com 'sha256-...' (фикс. хэш)
36%
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
19%
Обернуть список во фрагмент <>...</>
72%
Давать стабильные key по id сущности и не переиспользовать ключи
0%
Сделать инпуты неконтролируемыми
9%
Добавить React.memo к элементу списка
Расскажу, как я накатал Python-скрипт (~200 строк), который из трёх скринов сайта (десктоп/планшет/мобила) собирает одну адаптивную HTML-вёрстку на Tailwind; код, демо и подводные камни.
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
В обработчике клика вы вызываете queueMicrotask(A), затем requestAnimationFrame(B), затем setTimeout(C, 0). В каком порядке вызовутся колбэки относительно ближайшего кадра?
Anonymous Quiz
33%
A → B → C
38%
B → A → C
12%
C → A → B
17%
A → C → B
Покажу, как corner-shape приручает углы — не только округлять, а вырезать, заострять и комбинировать. Разберём примеры, нюансы поддержки и как уйти от SVG/картинок. Будут демки.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1