Вместо тонны JS-кода можно писать интерактив прямо в атрибутах:
hx-get, hx-post, hx-swap, hx-trigger.— Минимум кода, максимум динамики
— Быстрый старт без фреймворка
— Удобно и для пет-проектов, и для прототипов
<button hx-get="/api/articles" hx-target="#list" hx-swap="innerHTML">
Загрузить статью
</button>
<div id="list"></div>
Запрос уходит на сервер → HTML-фрагмент прилетает и рендерится в
#list.#stack #html
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🤔4❤3
html_cheat_sheet.png
596.5 KB
Всё от базовой структуры до таблиц, форм, списков и современных тегов разметки.
#readme #html
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5❤2😁2
Раньше, чтобы показать поповер по ховеру, нужен был JavaScript. Теперь — достаточно HTML.
interesttarget связывает элемент-триггер и поповер. Браузер сам обрабатывает hover, focus или long-press и показывает подсказку.
Можно совмещать с Popover API и Anchor Positioning для точного позиционирования.
Пока экспериментальная — работает в Chromium-браузерах (Chrome 135+, Edge 135+). В Firefox и Safari API ещё не реализован, поэтому стоит использовать фолбэк или JS-вариант для совместимости.
#readme #html
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9❤2🥰2
Примеры кода для создания интерактивной доски задач в стиле Trello.
— HTML-разметка колонок и карточек задач
— CSS-стилизация с кастомными цветовыми тегами
— Drag & Drop через библиотеку SortableJS
— Профили задач с аватарами и датами
Готовый код для изучения и использования в проектах.
🔹 Курс «Алгоритмы и структуры данных»
🔹 Получить консультацию менеджера
🔹 Сайт Академии 🔹 Сайт Proglib
#readme #css #html #js
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3🥰2👏2