HTML Academy

Функции btoa() и atob() — встроенные средства JavaScript для кодирования и декодирования строк в формате base64.

Base64 — это не шифрование и не способ защитить данные, а способ представить бинарную информацию в текстовом виде. В статье разбираем, как это работает в JavaScript: btoa() и atob() кодируют и декодируют строки, но только для байтовых строк (ASCII/Latin-1). При попытке закодировать Unicode-текст браузер бросит ошибку — показываем, как обойти это через TextEncoder и TextDecoder. Это важно, если вы работаете с emoji, кириллицей или API с многоязычными данными. #js #webdev

‼️ Читать статью

Как сделать вогнутые углы без боли, костылей и SVG?
➿➿➿➿➿➿➿➿➿➿➿➿
nebo.css в помощь. Это маленькая, но мощная CSS-библиотека, которая превращает мучения с инвертированными углами в пару строк кода.

❗️ В новом выпуске «CSS Боль»:

✓ Что такое инвертированный угол и почему его так сложно сверстать нативно
✓ Как nebo.css решает задачу буквально одним классом
✓ Как настраивать форму угла через CSS-переменные
✓ Что нового в версии 1.1 — независимые радиусы, эллипсы и параметр
✓ Как добавить сразу несколько углов и добиться сложных форм без единого SVG

Никаких псевдоэлементов, дополнительных div-ов и хака с позиционированием — всё работает даже на градиентах и изображениях. HTML Academy подготовили для вас библиотеку, чтобы боль исчезла.

🐭 Смотреть на YouTube
🐹 Смотреть в VK

👍 Хэллоуин × Колесо Фортуны

С 26 по 31 октября — страшно выгодная неделя в Академии! Заклинания скидок уже наложены: одно вращение колеса — и в вашу корзину падает хэллоуинский подарок.

Не дайте скидкам испариться — они исчезнут, как туман под утро.

Коротко: 1 вращение • 26–31 октября • Ведьмино Колесо Профессий.

🎃 https://htmlacademy.ru

Запись вчерашнего эфира с WAPP — на выходные

400₽/час на старте, пересмотр через 3-6 месяцев, проектная работа. Максим Ермилов рассказал про реальную экономику студии: почему нет постоянной занятости, как растут ставки и зачем нужна «скамейка запасных» из 30 человек.

Плюс — как клиенты продавили переход с Vue.js на React и что такое «собеседование по вайбу».

🐭 Смотреть на YouTube
🐹 Смотреть в VK
⚫️ Программа обучения

Разбираем ограничения при трудоустройстве с ONLY

Предпочитаете работать дома или в офисе? Как вливаться в мир разработки до 18 лет? Марианна Воденицкая, HRBP ONLY, рассказала про удалёнку, возрастные и другие ограничения.

Полный эфир с ONLY — по ссылке:

🐭 Смотреть на YouTube
🐹 Смотреть в VK
⭐️ Программа обучения

Дизайн для фронтендеров

Разработчику важно понимать принципы интерфейсного дизайна и пользовательского опыта — так вы сможете самостоятельно дорабатывать макеты: собирать адаптив, добавлять состояния и править огрехи без потери качества.

Курс учит прикладной «дизайнерской грамотности» разработчика: работе с Figma (стили, компоненты, библиотеки), сетке и вертикальному ритму (включая 8px-подход), типографике и иерархии, цвету и контрастности с учётом доступности, адаптиву без готовых макетов, безопасной UI-анимации и базовым UX-паттернам.

После курса вы умеете применять на практике:

📎 работать в Figma со стилями, компонентами и библиотеками;
📎 строить сетку (8px), держать выравнивание и вертикальный ритм;
📎 собирать резиновую вёрстку и адаптив без готовых макетов, продумывать крайние состояния;
📎 добавлять состояния интерактивных элементов и уместно анимировать UI.

🔵 Записаться на курс

Вместе с WAPP запускаем синдикатный поток совместной программы обучения

Сегодня в 12:00 (MSK) — прямой эфир со студией разработки WAPP. Основатель компании расскажет, как устроен фронтенд в студии, что ждёт выпускников на проектной работе и как пройти путь от обучения до первых заказов.

В финале разыграем бесплатное место на программу!

https://htmlacademy.ru/events/live-wapp

Как понять, что юзер нажал клавишу: события клавиатуры в JavaScript

События keydown и keyup помогают обрабатывать взаимодействие с клавиатурой: когда срабатывают, чем отличаются и где применяются — от горячих клавиш до форм и простых игр. Плюс коротко о безопасности и доступности, чтобы решения были надёжными и удобными для всех.

В статье разбираются сами события, их работа при нажатии и отпускании клавиши, почему keypress считать легаси, и чем отличаются event.key и event.code: первое зависит от раскладки, второе — от физической клавиши. Есть мини-примеры и практические советы. #js #a11y

✅ Читать статью

👍 Напоминаем: завтра в 12:00 (MSK) — прямой эфир HTML Academy × WAPP о синдикатном потоке программы «Обучение под работодателя».

И главное — среди первых 100 регистраций разыграем одно бесплатное место на совместную программу. Это 8,5 месяцев обучения с наставником и возможность проектной работы после выпуска.

Как участвовать:

1️⃣ Зарегистрируйтесь по ссылке ниже.
2️⃣ Подключитесь к трансляции — победителя объявим в финале.

В эфире основатель студии WAPP расскажет, как устроен фронтенд в студии разработки: какие задачи решают новички, как работает формат проектной занятости и что нужно, чтобы пройти путь от выпуска до первых оплачиваемых заказов.

https://htmlacademy.ru/events/live-wapp

Как сверстать карточку с вырезом? Разбираем старый и новый способ.
#css

Голограммы без шейдеров и JavaScript — это вообще реально?
➿➿➿➿➿➿➿➿➿➿➿➿
Да, и в новом выпуске «CSS Боль» мы это доказываем.

Три слоя, конический градиент и два режима смешивания mix-blend-mode — вот и весь секрет переливающегося эффекта. Никакого WebGL, никаких библиотек. Только conic-gradient(), @property и правильное наложение слоёв.

Самое интересное: можно менять цвета, скорость вращения и параметры градиента прямо в интерактивной демке. Один эффект превращается в десятки вариантов — от тёплого свечения до холодного льда.

Разбираем на примере карточки заклинания из «Героев 3». Потому что ностальгия.

🐭 Смотреть на YouTube
🐹 Смотреть в VK

Прямой эфир с основателем студии разработки WAPP

HTML Academy и компания WAPP запускают синдикатный поток обучения под работодателя. Небольшая группа из 10 человек, четыре модуля за 8,5 месяцев и возможность проектной работы после выпуска — обучение адаптировано под потребности работодателя.

Приходите на эфир 23 октября в 12:00 (MSK), чтобы:

1️⃣ Узнать, как устроен фронтенд в студии разработки: какие задачи решают, с какими клиентами работают и что требуется от новичков.
2️⃣ Разобраться в формате проектной работы: как строится взаимодействие, что влияет на рост и когда пересматривается оплата.
3️⃣ Понять путь от обучения к первым заказам: что проверяют на собеседовании и как проходит адаптация.

Бонус: разыграем одно бесплатное место на программу среди первых 100 зарегистрировавшихся. Победителя объявим в конце трансляции.

Регистрируйтесь по ссылке — пришлём напоминание перед началом и расскажем, как попасть на обучение.

https://htmlacademy.ru/events/live-wapp

Зарплата стажёра и джуна на испытательном сроке. Что ждёт выпускников совместной программы обучения с ONLY?

Марианна Воденицкая, HRBP ONLY, рассказала про тестовое задание, интервью и особенности испытательного срока

Полный эфир с ONLY — по ссылке:

🐭 Смотреть на YouTube
🐹 Смотреть в VK
🪻 Программа обучения

Уже совсем скоро на FrontendConf 2025 Александр Першин расскажет «Negative border radius — не больно». Чтобы разобраться ещё глубже и спокойно попробовать приёмы в деле, собрали материалы с интерактивными демонстрациями.

1️⃣ Основная демонстрация
Все этапы из презентации; текстовые пояснения добавим после выступления.

2️⃣ Знакомство с nebo.css — CSS-библиотекой для inverted и negative border radius

Утилитарные CSS-переменные + радиальные градиенты и CSS-маски; работает на неоднородных фонах, без дополнительных обёрток и псевдоэлементов.

3️⃣ Круглый вырез: по-старому vs через mask-image с одним radial-gradient()

Современное решение короче в разы; пример маски: radial-gradient(circle at 0 50%, transparent 74.5px, black 75px) — меньше кода, больше гибкости с фонами.

4️⃣ sibling-index() и sibling-count() — «считаем соседей» без батареи :nth-child(...)

Динамические компоненты с вычислениями в calc().

➿➿➿➿➿➿➿➿

Сохраняйте подборку — пригодится при внедрении паттерна в дизайн-системах и продакшн-вёрстке. А на конференции разберём, почему всё это работает именно так.

AI-ассистенты — рабочий инструмент фронтендера
➿➿➿➿➿➿➿➿➿➿➿➿
Курс про практику разработки с ИИ-агентами в реальных задачах. На сквозном проекте «интернет-магазин с корзиной» (React + Vite, MUI) вы учитесь формулировать промпты под фичи, генерировать и рефакторить код, писать тесты, документировать, подключать внешние API и привлекать ИИ к ревью кода — с разбором ограничений и командных правил.

Инструменты рассматриваем без фанатизма: сравниваем актуальных ассистентов и их сценарии применения; основная ценность — устойчивый навык «coding with AI» в продакшене. Формат — модули в самостоятельном темпе: теория → продуктовые кейсы → практика → тест. #htmlacademy #levelup

Ключевые слова, которые вы встретите: Cursor, GPT, Claude Sonnet, Gemini, GitHub Copilot.

📌 Записаться на курс

👍 Чемпионат по вёрстке глазами жюри

Это взгляд изнутри финала чемпионата по вёрстке. Автор — Артём Леванов, Front Lead в WebRise, партнёре-работодателе HTML Academy: он показывает, как жюри оценивало работы финалистов в «боевых» критериях — от удобства и адаптивности до анимаций и аккуратной работы с SVG. Это разбор конкретных решений, которые повышали или снижали оценку, и почему один лишь pixel-perfect без «живости» интерфейса уже не впечатляет.

Хочу выразить благодарность HTML Academy за доверие и возможность оценить сильные проекты, которые уже приближаются к уровню middle-разработчика. Это был очень позитивный и вдохновляющий опыт. Важно: финалисты не просто следуют макету, а предлагают собственные — порой более удачные — решения и уверенно идут в ногу с современными подходами к вёрстке.

📕 Читать статью