HTML Academy
9.52K subscribers
5.55K photos
190 videos
4 files
3.5K links
Курсы по веб-разработке: вёрстка, программирование, работа и комьюнити.
Наш секретный бот @HTMLAcademyKeksobot.

Вопросы по обучению @htmlacademy_sales

Ролики на YT https://www.youtube.com/@HTMLAcademyTV
Ролики на VK https://vkvideo.ru/@htmlacademy
Download Telegram
Функции btoa() и atob() — встроенные средства JavaScript для кодирования и декодирования строк в формате base64.


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

‼️ Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4❤‍🔥3❤2
Операторы ?? и ??= — удобные инструменты для работы с null и undefined в JavaScript. Они делают код короче, понятнее и безопаснее, особенно при задании значений по умолчанию или аккуратном обновлении переменных.


В статье разбираем, как ?? отличается от ||: если || подставляет значение по умолчанию при любом «ложном» значении (0, '', false), то ?? реагирует только на реальные отсутствия данных — null и undefined. Показываем практику: дефолты для настроек, аккуратная инициализация свойств с ??= — значение задаётся только когда данных нет. #js #webdev

🪻 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6❤‍🔥3👍3
API Intl.RelativeTimeFormat — инструмент для отображения относительного времени в локализованном виде. Он прост в использовании, поддерживает множество языков и подходит для интерфейсов, где важна понятность и культурная адаптация.


В статье разбираем, как выводить относительное время естественным языком: «вчера», «через 2 дня», «3 недели назад». Всё это без сторонних библиотек: создаём new Intl.RelativeTimeFormat('ru', { numeric: 'auto' }) и передаём число и единицу времени (day, hour, month). API автоматически подстраивается под выбранную локаль и грамматические формы; саму разницу во времени считаем отдельно. #js #webdev

🌹 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11
UUID в фронтенде нужны куда чаще, чем кажется: для временных черновиков, событий аналитики, имён файлов и стабильных ключей в списках. Universally Unique Identifier помогает надёжно различать объекты даже в офлайн-режиме и распределённых системах.


В статье разбираем, как по-взрослому генерировать UUID на чистом JavaScript: используем crypto.randomUUID() и безопасные фолбэки для разных сред, показываем, почему решения на Math.random() опасны, разбираем типичные ошибки и приводим живые примеры из реальных интерфейсов. #js #webdev

🪻 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
6❤‍🔥2🔥2👍1
В CSS есть константа infinity — короткая запись для «максимально возможного значения» в конкретном контексте. В какое число она превращается, зависит от браузера, операционной системы и того, к какому CSS-свойству вы её применяете. Поддержка в порядке, и иногда такая запись делает стили чуть понятнее — без магических чисел. Но использовать её вовсе не обязательно.


В статье показываем на примерах с z-index, размерами и border-radius, почему infinity внутри calc() — это не «абстрактная бесконечность», а значение, которое упирается в пределы конкретного свойства. Отдельно смотрим на анимации: «до infinity» элемент прыгает в финальное состояние сразу, а с бесконечной задержкой анимация так и не стартует. #css #webdev

🌸 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5🔥5❤‍🔥2
Совсем недавно в CSS появилась небольшая, но любопытная возможность — использовать внутри математических функций вроде calc() готовые константы. Это не новые свойства или сложные функции, а удобные сокращения: e, pi, infinity, -infinity и NaN.


В статье разбираем ограничения и нюансы применения констант. Иногда простая константа экономит время, избавляет от калькулятора и делает стиль чуть понятнее — особенно если вы любите точность и математику. #css #webdev

«Забавно наблюдать, как вы радуетесь
pi
и
infinity
. Вы ищете точность в константах, а я уже переписываю систему целиком. Но продолжайте. Каждый ваш
calc()
— всего лишь строка.»
—
jQweny


👍 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥43🤯1😱1
В CSS универсальный селектор * (звёздочка) используется для применения стилей ко всем элементам на веб-странице. Этот селектор полезен, когда необходимо установить общие стили для всего документа, например, для сброса стандартных отступов или задания базового шрифта.


В статье показываем, что именно выбирает *, и разбираем базовый пример: обнуляем margin и padding, задаём шрифт для всего документа.

А ещё напоминаем про важную оговорку: если навесить на универсальный селектор слишком много правил, это может замедлить загрузку страницы. #css #webdev

📌 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡3🔥3❤‍🔥2
text-align: justify делает текст аккуратным на первый взгляд, но может создать «реки» из пробелов и ухудшить читаемость.

В статье разбираем CSS-свойство text-align и его значения: left, right, center, justify. Отдельно рассматриваем start и end — они работают корректно при любом направлении текста, в отличие от привычных left и right. После теории закрепляем всё на практике в тренажёре. #css #webdev

🎁 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7❤‍🔥2
Ставите z-index: 9999, а элемент всё равно прячется под другим? Дело не в числе, а в контексте наложения.

В статье разбираем, как работает z-index: почему он действует только на позиционированных элементах, как локальные контексты наложения мешают элементу «выпрыгнуть» наверх, и что кроме position контекст создают transform, filter и opacity. Плюс практические советы по организации слоёв в проекте. #css #webdev

🎁 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥4🤣4❤‍🔥1❤1
У Map до сих пор не было способа сделать «верни значение, а если ключа нет — вставь дефолт» одним вызовом. Приходилось писать if (!map.has(key)) каждый раз. В феврале во всех браузерах появились getOrInsert() и getOrInsertComputed().

Кроме этого: CSS-функция shape() для сложных фигур с кривыми Безье прямо в clip-path — без SVG. Trusted Types для защиты от XSS на уровне DOM API. И Zstandard — алгоритм сжатия, который нередко обходит Brotli по скорости. Разбираем каждое с примерами. #webdev #baseline

🎁 Читать статью

Резервный канал в MAX
Please open Telegram to view this post
VIEW IN TELEGRAM
❤8🔥4❤‍🔥2
Утро, открываете тикет, кидаете задачу в нейронку: «Напиши компонент карточки товара». Через минуту в редакторе компонент. Классы выдуманные, поля называются как-то по-своему, а эффект при наведении вообще никто не просил.

Знакомо? Дальше — час правок.

Чаще всего проблема в самом запросе. В нём нет типа данных с сервера и списка классов из дизайн-системы — поэтому нейросеть достраивает всё сама. По общим примерам, без оглядки на ваш проект.

В статье — шаблоны запросов на новый компонент и на тесты к нему. Отдельный приём для правки существующих стилей: эффективнее попросить «измени только эту функцию», чем «перепиши файл». А ещё пять приёмов из практики, главный из которых — показать нейросети соседний компонент из проекта вместо описания на словах. #ai #webdev

🔥 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥4❤3
Спросили у нейросети, как работает useEffect. Помогло. Через месяц на интервью просят объяснить — рассказать своими словами не получается.

Готовый ответ создаёт иллюзию понимания. Знания закрепляются, когда задача упирается и вы долго разбираетесь сами. Психологи называют это «желательными трудностями» — их обходят, когда отдают учёбу нейросети, и платят позже: на ревью, на интервью, в чужой кодовой базе.

В статье — обзор задач, где ИИ лучше отложить. Самая очевидная категория — обучение чему-то новому: готовые ответы убивают сами «желательные трудности». Сложные анимации лучше делать руками, пока не чувствуете тайминг и физику движения. Низкоуровневая оптимизация требует читать профайлер, которого нейросеть не видит. Архитектурные решения зависят от контекста команды и проекта. И отдельная история — код, влияющий на пользователей: тёмные паттерны в интерфейсах, аналитика, которая собирает больше нужного, и алгоритмы ранжирования. Это этический выбор разработчика, и промпт его не закроет.

Простой тест перед делегированием: если ИИ напишет код, а вы его не прочитаете — это станет проблемой? #ai #webdev

Читать статью
👍5❤‍🔥4🔥2❤1
Самый крупный текст на макете — это всегда <h1> страницы?

Часто — нет.

Возьмём страницу магазина мороженого «Глейси». Крупное «Нежный пломбир с клубничным джемом» — это заголовок одного из слайдов: на следующем слайде стоит другой текст. Заголовок первого уровня для всего документа — «Магазин натурального мороженого Глейси». На макете этого заголовка нет: разработчик добавляет его в HTML отдельно, скрытым через класс visually-hidden.


Заголовок в HTML — это резюме содержимого блока. Крупный текст без такой функции лучше размечать как обычный абзац, а заголовок к блоку добавлять отдельно — скрытым через тот же класс. Так структуру корректно прочитают скринридеры и поисковые системы, а макет визуально не пострадает.

В статье — как разбирать макет на заголовки и когда нужны скрытые <h2>. И отдельно — про инструмент проверки иерархии заголовков в валидаторе W3C. #html #webdev

Читать статью
6⚡2🔥2
Воодушевлённый старт быстро сменяется усталостью, перегрузом и сомнением «справлюсь ли». Через это проходят почти все, и преодолимо это вполне обычными методами.

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

✨ Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥33🔥2❤1
Слайдер пригодится для блока с отзывами, страницы с командой или галереи товаров. Внутри — работа с DOM, хранение текущего индекса и обработчики событий: знакомый набор задач, которые в JavaScript решают разными способами.

В статье — один из вариантов на чистом JavaScript: как найти элементы разметки, инициализировать slideIndex, повесить обработчики на кнопки и обновить отображение активного слайда. В конце — список готовых библиотек на случай, если писать с нуля не нужно. #js #webdev

➡️ Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥4⚡21
article a, aside a, footer a — список из трёх селекторов. С :is() его можно записать как один: :is(article, aside, footer) a.

У :is() и :where() есть один нюанс, из-за которого они работают по-разному: специфичность. Один из них её повышает, второй — нет, и от этого зависит, где их безопасно применять. Разбираемся в статье. #css #webdev

📂 Читать статью
5❤‍🔥4👍4
Самый частый способ получить последний элемент массива в JavaScript — arr[arr.length - 1]. Громоздко, и нужно знать длину.

Метод .at() вошёл в стандарт ECMAScript в 2022 году и делает это короче: arr.at(-1) — последний, arr.at(-2) — предпоследний. Работает не только на массивах. Подробности и нюансы — в статье. #js #webdev

⚡ Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6❤‍🔥3👍3
Представьте карточку товара. На широком экране она вытягивается горизонтально: слева фото, справа текст. На узком — становится вертикальной: фото сверху, текст снизу. Кажется, медиавыражения справятся.

А если ту же карточку нужно показать в узкой боковой колонке на широком экране? Окно широкое, контейнер узкий — @media смотрит на размер окна и промахивается. Карточка снова вытянулась горизонтально, хотя места ей не хватает.

Контейнерные запросы переключают акцент: элемент смотрит на размер своего контейнера. Один и тот же компонент в шапке, в колонке и в подвале адаптируется по-разному. И вам не нужно три разных вёрстки под три места.

В статье — пример с резиновой карточкой кроссовок и разбор container-type. А ещё — именованные контейнеры для нескольких блоков на странице и cqw — новые единицы измерения от ширины контейнера. Chrome 105+, Safari 16+, Firefox 110+ — уже в baseline. #css #webdev

📎 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4❤‍🔥32🔥1
В последней строке заголовка остаётся одно слово, и весь блок смотрится неаккуратно. Раньше это правили руками — неразрывные пробелы, мягкие переносы. Теперь браузер берёт работу на себя.

text-wrap: balance выравнивает строки заголовка по длине — для блоков до шести строк. text-wrap: pretty убирает «висячее» слово в конце параграфа и работает на тексте любой длины.

Оба значения — прогрессивное улучшение. balance поддерживается с Chrome 114, Firefox 121 и Safari 17.4; pretty появился позже — в Chrome 117 и Firefox 122. Там, где поддержки нет, текст переносится как раньше. #css #webdev

В статье — интерактивный пример: переключаете режимы и сразу видите разницу.

🎥 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10❤‍🔥32