Разбираем, как собрать несколько внешних поисков (люди, ссылки, исходники), скелетоны и обработку ошибок, подключать новые источники без правок UI. Операторы, профит

Сделана на CSS и JavaScript

<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: идентификаторы пользователей, статусы элементов, флаги состояния. Это делает код более гибким, читаемым и декларативным.

Сделана на SVG и CSS

Расскажу, как я накатал Python-скрипт (~200 строк), который из трёх скринов сайта (десктоп/планшет/мобила) собирает одну адаптивную HTML-вёрстку на Tailwind; код, демо и подводные камни.

Сделана на чистом CSS

Покажу, как corner-shape приручает углы — не только округлять, а вырезать, заострять и комбинировать. Разберём примеры, нюансы поддержки и как уйти от SVG/картинок. Будут демки.

Сделана на CSS, SVG и JavaScript

<div id="message"></div>
<script>
  const box = document.getElementById("message");
  box.innerHTML = "<strong>Добро пожаловать!</strong>";
</script>

innerHTML удобно использовать для обновления текста, вставки шаблонов и генерации списков. Однако важно помнить о безопасности: при работе с пользовательскими данными лучше использовать textContent, чтобы избежать XSS-уязвимостей