Фронтенд Гайд

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

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

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

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

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

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

Сделана на SCSS и TypeScript

История о том, как гуманитарий себе сайт навайбкодил. Внутри - примеры промптов, код и размышления на тему RLHF

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

const button = document.querySelector("button");

button.addEventListener("click", () => {
  console.log("Кнопка нажата!");
});

addEventListener() удобно использовать для работы с кликами, вводом текста, прокруткой, ресайзом окна и любыми другими событиями. Он поддерживает множественные обработчики, удаление через removeEventListener() и захват событий, что делает его универсальным инструментом для работы с DOM.

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