Glo Academy

🧰 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

🎨 Переключение состояний на сайте без JS Переключение вкладок или шагов онбординга часто тянет за собой JS-обработчик клика и стейт в компоненте. А ведь это чисто визуальная переменная — можно обойтись CSS

input[name="state"] {
  appearance: none;
  position: fixed;
  pointer-events: none;
  opacity: 0;

  &:checked {
    position: relative;
    pointer-events: all;
    opacity: 1;
  }
}

Берём группу radio-кнопок с одинаковым name — каждая представляет своё состояние. Через <code>:checked</code> показываем нужный контент, остальные прячем opacity и pointer-events. Клик по любой кнопке автоматически переключает состояние, браузер делает это бесплатно Не забудь про aria-label на каждой кнопке и видимый outline на фокусе — иначе клавиатурная навигация станет невидимой 🔥 — если было полезно @glo_academy | #css_day

📢 Реклама в этом канале Аудитория в Telegram живее, чем кажется. Прежде чем принять решение о размещении — проверьте сами: индекс читаемости показывает динамику охватов по неделям в разных тематиках. Видно, где аудитория читает стабильно, а где активность просела. ФАС в 2026 году официально подтвердил: реклама в Telegram разрешена. Заказать рекламу в этом канале — через Telega.in, это займёт несколько минут. Форматы и цены — по ссылке.

Micron.js JavaScript-библиотека для создания микроинтеракций с CSS-анимациями под JS-контролем. Будет полезна для быстрого добавления клик-эффектов и bind-интеракций через data-атрибуты. Пригодится для создания живых UI без сложного кода. Перейти - https://webkul.github.io/micron/ ​ #анимация #ui #css

[Начните отсюда] С 17 по 23 мая стартуем интенсив для фронтендеров. В этот раз — напишем фронтенд для магазина на JavaScript и Nuxt Можно участвовать бесплтано 👩‍💻Первый урок 17 мая в 10:00 мск Как работаем: — чтобы участвовтаь, нужно зарегистрироваться по ссылке ниже 🔥 каждый урок доступен 48 часов после выхода, не успел сделать часть проекта — вылет 😰 — домашку сдаём в комменты под урок — среди всех, кто сдаст домашки, проведу розыгрыш, больше домашек — выше шанс выиграть Помимо уроков буду отвечать на вопросы, разберём план старта во фронтенде с нуля, способы поиска заказчиков, ИИ, джунов и другие Итак, ещё раз: — 17-23 мая — фронтенд для WB — есть дедлайны — подойдёт и новичкам, и с тем, кто опытом https://telegram.me/gloacademy_bot?start=intensive-nuxt-may-2

[Начните отсюда] С 17 по 23 мая стартуем интенсив для фронтендеров. В этот раз — напишем фронтенд для магазина на JavaScript и Nuxt Можно участвовать бесплтано 👩‍💻Первый урок 17 мая в 10:00 мск Как работаем: — чтобы участвовтаь, нужно зарегистрироваться по ссылке ниже 🔥 каждый урок доступен 48 часов после выхода, не успел сделать часть проекта — вылет 😰 — домашку сдаём в комменты под урок — среди всех, кто сдаст домашки, проведу розыгрыш, больше домашек — выше шанс выиграть Помимо уроков буду отвечать на вопросы, разберём план старта во фронтенде с нуля, способы поиска заказчиков, ИИ, джунов и другие Итак, ещё раз: — 17-23 мая — фронтенд для WB — есть дедлайны — подойдёт и новичкам, и с тем, кто опытом

AAronn - макет лендинга портфолио веб-дизайнера. Уровень сложности: лёгкий. Ссылка на макет - https://www.figma.com/design/fX7GF1DjwR26N5IovTvdoP/Aaronn P.S. Вы можете дублировать файл Figma себе, нажав на Duplicate. #figma #макеты #портфолио #вебдизайн

Бесплатный интенсив по вёрстке🔥 С 14 по 17 мая пройдёт интенсив по основам фронтенда — будем верстать сайт кинотеатра на HTML/CSS и добавлять интерактив на JS Если вы только начинаете путь в этой сфере или хотите попробовать себя — интенсив вам подойдёт, если уже есть какой-то опыт — для вас тоже будут интересные элементы За 4 урока узнаете основы разработки сайтов: как они создаются, что такое дизайн-макет, как с ним работать. В итоге — создадите полноценный сайт и опубликуете его в интернете  👩‍💻Первый урок 14 мая в 10:00 мск Как работаем: — чтобы участвовтаь, нужно зарегистрироваться по ссылке ниже 🔥 каждый урок доступен 48 часов после выхода, не успел сделать часть проекта — вылет 😰 — домашку сдаём в комменты Помимо уроков в канале выйдут посты с ответами на вопросы, а на следующей неделе встретимся на стриме Итак, ещё раз: — 14-17 мая — сайт кинотеатра на HTML/CSS + JS — есть дедлайны

Transition.css JavaScript-библиотека для создания плавных анимаций переходов без CSS. Будет полезна для быстрого прототипирования UI, добавления динамичных эффектов в React/Vue-проекты. Пригодится для оптимизации hover-эффектов и микровзаимодействий без лишнего кода. Перейти - https://www.transition.style/ ​ #transition #Frontend #анимация

Всё сделал чётко по тз, значит вырастет - будет программистом. #юмор

Maral Realty - макет лендинга агентства недвижимости. Уровень сложности: средний. Ссылка на макет - https://www.figma.com/design/Wof5tJQtywlz2QcKOStHUb/Maral-Realty P.S. Вы можете дублировать файл Figma себе, нажав на Duplicate. #figma #макеты #недвижимость

Dreamina Инструмент для генерации изображений и коротких видео по тексту. Будет полезен для быстрой визуализации идей, анимации макетов и подготовки материалов для соцсетей. Перейти - https://dreamina.capcut.com/ #ии #нейросеть #генерация #видео #изображения