Glo Academy

⚡ Редактирование контента без форм Делаешь доску задач — и упираешься в переименование карточки. Первое решение: модалка с кнопкой «Сохранить». На каждую правку — открыть окно, напечатать, закрыть.

<div class="card" contenteditable="plaintext-only">Сверстать шапку</div>

card.addEventListener('blur', () => save(card.textContent));

Второй заход: положить input прямо в карточку — и вылезает вёрстка. Своя рамка, фон и шрифт, их приходится сбрасывать, а высота фиксированная: длинное название уезжает за край. contenteditable оставляет карточку карточкой. Ставишь атрибут на тот же div — стили остаются, блок тянется по содержимому, а курсор, выделение и Ctrl+Z браузер берёт на себя. Текст лежит в textContent, забираешь его по blur: кликнул мимо — дописал. Браузер даёт только поле для ввода. Хранение — твоя работа: правки живут в DOM до перезагрузки, поэтому по тому же blur шлёшь текст на сервер. И ставь plaintext-only, иначе вставка из ворда притащит чужой HTML со стилями. 🔥 — если полезно @glo_academy | #js_day

🧰 tegaki Хочешь эффект «текст сам себя пишет» без танцев с SVG path animation вручную? Tegaki превращает любой шрифт в анимацию рукописного письма — берёт контуры букв и рисует их штрих за штрихом с естественным таймингом Есть готовые компоненты под React, Vue, Svelte, SolidJS, Astro и просто vanilla, плюс CLI, который генерит самостоятельно рисующийся SVG прямо из терминала — даже ничего не устанавливая https://github.com/gkurt/tegaki 🔥 — если было полезно @glo_academy | #инструменты

😂😂😂 @glo_academy

✂️ Аккордеон без JS на паре HTML-тегов Раскрывающийся блок обычно собирают так: вешаем клик, дёргаем класс, в CSS играем с max-height. Потом выясняется, что контент выше заданной высоты, и появляется костыль с пересчётом.

<details>
  <summary>Доставка и оплата</summary>
  <p>Отправляем в день заказа.</p>
</details>

<details open>
  <summary>Гарантия</summary>
  <p>Год на всё, кроме расходников.</p>
</details>

Браузер умеет это сам: details — контейнер, summary — заголовок, по которому кликают. Открытие и закрытие, фокус с клавиатуры и работа со скринридером идут в комплекте. Стрелку-маркер можно убрать через summary { list-style: none }, а атрибут open в разметке открывает блок сразу. ❤️ — если понравился пост @glo_academy | #snippets

🎨 Анимируем цвет без серого перехода Анимируешь background-color с одного цвета на другой — и на середине перехода плашка сереет. Так устроено само свойство: браузер тянет каналы RGB по отдельности, и на полпути красный, зелёный и синий сходятся к одному числу — а три равных канала это и есть серый. Чтобы переход шёл живым цветом, используй свойство filter со значением hue-rotate():

@keyframes hueRotate {
  to {
    filter: hue-rotate(720deg);
  }
}

.particle {
  animation: hueRotate 1000ms;
}

На гифке оба варианта. Сверху background-color — смотри, как плашка сереет на середине. Снизу тот же цвет через hue-rotate: оттенок идёт по цветовому кругу и не выцветает нигде. Цвета идут по кругу: красный, жёлтый, зелёный, голубой, синий и снова красный — полный оборот 360 градусов. deg — это degrees, градусы: число в hue-rotate говорит, сколько их цвет пройдёт по кругу за анимацию. 720deg за секунду — два оборота, резковато; спокойнее 180–540 или те же 720, но за 3 секунды. 🔥 — если было полезно @glo_academy | #css_day

Макет для вёрстки — цветочный магазин, многостраничный сайт Сложный макет на русском языке с адаптивом @glo_academy | #макеты

⚡ Копируем HTML-таблицу сразу в CSV Дизайнер или менеджер просит «скинь табличку с сайта в эксель», а у тебя просто HTML-таблица на странице. Копировать руками — боль

table.querySelectorAll('tr').forEach(r => {
  let row = [];
  r.querySelectorAll('th, td').forEach(d => row.push(d.innerText));
  data.push(row);
});

// data → CSV
const csv = data.map(row => row.join(',')).join('\n');
await navigator.clipboard.writeText(csv);

Вместо ручного выделения — кнопка, которая сама достаёт данные из таблицы и кладёт в буфер обмена уже в нужном формате Сначала проходишь по строкам таблицы и собираешь обычный двумерный массив: строка — это массив ячеек. Дальше массив превращается в CSV склейкой через запятую и перенос строки, а navigator.clipboard.writeText кладёт результат в буфер — вставляется прямо в Google Таблицы или Excel Тем же массивом легко собрать и Markdown-таблицу для доки — меняется только функция форматирования, данные те же 🔥 — если полезно @glo_academy | #js_day

DOMPurify — самая быстрая библиотека для санитизации На сайте есть поля, куда текст пишет посетитель: комментарий под статьёй, отзыв о товаре, описание в профиле, сообщение в чате. Вместе с текстом туда можно вписать код — браузер не разбирает, кто автор строки. Он видит HTML, который надо выполнить, и выполняет: и жирный шрифт, и тег script из чужого комментария Удаляет опасные теги и атрибуты, но сохраняет валидную разметку. Работает в браузере и Node.js, настраивается под любые нужды — от комментариев до rich-text редакторов Must-have для любого проекта, где пользователи могут вставлять HTML github.com/cure53/DOMPurify 🔥 — если было полезно @glo_academy | #инструменты

😁😁😁 @glo_academy

✂️ Размер шрифта для разных экранов без медиазапросов Ради заголовка, который не разъезжается на мобильном и не теряется на большом экране, обычно пишут три медиазапроса. Каждый со своим font-size, и все три надо помнить при правках.

.title {
  font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
}

/* минимум 24px, максимум 48px,
   между ними — плавно по ширине экрана */

clamp принимает три значения: минимум, желаемое и максимум. Среднее считается от ширины экрана, крайние работают ограничителями — шрифт плавно едет между ними и никогда не выходит за границы. В среднем значении держи rem рядом с vw: от чистых vw текст перестаёт слушаться системного масштаба, а это ломает доступность. ❤️ — если понравился пост @glo_academy | #snippets