es
Feedback
HTML Academy

HTML Academy

Ir al canal en Telegram

Курсы по веб-разработке: вёрстка, программирование, работа и комьюнити. Наш секретный бот @HTMLAcademyKeksobot. Вопросы по обучению @htmlacademy_sales Ролики на YT https://www.youtube.com/@HTMLAcademyTV Ролики на VK https://vkvideo.ru/@htmlacademy

Mostrar más
9 788
Suscriptores
-124 horas
-147 días
-6930 días
Atraer Suscriptores
junio '26
junio '26
+20
en 0 canales
mayo '26
+35
en 1 canales
Get PRO
abril '26
+49
en 0 canales
Get PRO
marzo '26
+40
en 3 canales
Get PRO
febrero '26
+37
en 0 canales
Get PRO
enero '26
+54
en 0 canales
Get PRO
diciembre '25
+48
en 2 canales
Get PRO
noviembre '25
+44
en 1 canales
Get PRO
octubre '25
+48
en 0 canales
Get PRO
septiembre '25
+52
en 1 canales
Get PRO
agosto '25
+68
en 1 canales
Get PRO
julio '25
+48
en 1 canales
Get PRO
junio '25
+54
en 0 canales
Get PRO
mayo '25
+64
en 1 canales
Get PRO
abril '25
+58
en 0 canales
Get PRO
marzo '25
+81
en 0 canales
Get PRO
febrero '25
+57
en 0 canales
Get PRO
enero '25
+62
en 0 canales
Get PRO
diciembre '24
+58
en 1 canales
Get PRO
noviembre '24
+78
en 1 canales
Get PRO
octubre '24
+95
en 0 canales
Get PRO
septiembre '24
+52
en 1 canales
Get PRO
agosto '24
+41
en 0 canales
Get PRO
julio '24
+25
en 0 canales
Get PRO
junio '24
+46
en 1 canales
Get PRO
mayo '24
+101
en 1 canales
Get PRO
abril '24
+240
en 3 canales
Get PRO
marzo '24
+121
en 2 canales
Get PRO
febrero '24
+138
en 2 canales
Get PRO
enero '24
+182
en 6 canales
Get PRO
diciembre '23
+151
en 1 canales
Get PRO
noviembre '23
+224
en 2 canales
Get PRO
octubre '23
+310
en 1 canales
Get PRO
septiembre '23
+193
en 0 canales
Get PRO
agosto '23
+161
en 0 canales
Get PRO
julio '23
+164
en 0 canales
Get PRO
junio '23
+127
en 0 canales
Get PRO
mayo '23
+127
en 0 canales
Get PRO
abril '23
+128
en 0 canales
Get PRO
marzo '23
+178
en 0 canales
Get PRO
febrero '23
+255
en 0 canales
Get PRO
enero '23
+509
en 0 canales
Get PRO
diciembre '22
+614
en 0 canales
Get PRO
noviembre '22
+491
en 0 canales
Get PRO
octubre '22
+922
en 0 canales
Get PRO
septiembre '22
+748
en 0 canales
Get PRO
agosto '22
+703
en 0 canales
Get PRO
julio '22
+514
en 0 canales
Get PRO
junio '22
+653
en 0 canales
Get PRO
mayo '22
+423
en 0 canales
Get PRO
abril '22
+572
en 0 canales
Get PRO
marzo '22
+819
en 0 canales
Get PRO
febrero '22
+234
en 0 canales
Get PRO
enero '22
+210
en 0 canales
Get PRO
diciembre '21
+301
en 0 canales
Get PRO
noviembre '21
+242
en 0 canales
Get PRO
octubre '21
+259
en 0 canales
Get PRO
septiembre '21
+200
en 0 canales
Get PRO
agosto '21
+244
en 0 canales
Get PRO
julio '21
+298
en 0 canales
Get PRO
junio '21
+328
en 0 canales
Get PRO
mayo '21
+333
en 0 canales
Get PRO
abril '21
+414
en 0 canales
Get PRO
marzo '21
+525
en 0 canales
Get PRO
febrero '21
+521
en 0 canales
Get PRO
enero '21
+471
en 0 canales
Get PRO
diciembre '20
+7 426
en 0 canales
Fecha
Crecimiento de Suscriptores
Menciones
Canales
14 junio+2
13 junio0
12 junio0
11 junio0
10 junio0
09 junio+2
08 junio+2
07 junio+2
06 junio+1
05 junio+1
04 junio+3
03 junio+3
02 junio+4
01 junio0
Publicaciones del Canal
«AI — это ваш личный джун. Обязанность разработчика — хорошо поставить задачу, подумать об архитектуре и пройтись отладчиком по тому, что он нагенерировал»
Максим Самарцев, директор Maxis, — о том, как руководитель IT-компании смотрит на AI в продуктовой разработке. Запись эфира: смотреть на YouTube | смотреть в VK 🔒 Программа обучения

2
На ревью прилетел комментарий: фильтрация дубликатов на 100 000 позиций вешает интерфейс. Виноват вложенный перебор — O(n²),+2
На ревью прилетел комментарий: фильтрация дубликатов на 100 000 позиций вешает интерфейс. Виноват вложенный перебор — O(n²), до 10 миллиардов сравнений. Через хеш-таблицу та же фильтрация укладывается в O(n): каждая проверка уникальности в среднем O(1). Вот этот зазор между «работает» и «работает быстро» и закрывает курс «Алгоритмы и структуры данных». 10 подробных разделов с примерами на JavaScript: O-нотация, поиск, сортировки (пузырёк и quicksort), деревья, хеш-таблицы, жадные алгоритмы, динамическое программирование. Каждый привязан к реальной задаче фронтенда: обход DOM-дерева, подбор ревьюеров в пулреквест, парсинг данных, хранение оповещений. Внутри теория, разбор кейсов, практические задания с эталонным решением и тесты. Темп свой, начать можно сразу. #htmlacademy #levelup Завтра выходной, и скидка 60% по промокоду ALGO60 работает все три дня — с пятницы по воскресенье, 12–14 июня. Только на этих выходных и только на этот курс. 🎤 Подробнее
416
3
Есть задачи, где массив работает — но медленно. Есть места, где Map решает то же самое за O(1). Разница между ними — это скор+2
Есть задачи, где массив работает — но медленно. Есть места, где Map решает то же самое за O(1). Разница между ними — это скорость интерфейса и оценка на ревью. Курс «Алгоритмы и структуры данных» — десять разделов на JavaScript, каждый привязан к реальным задачам фронтенда. Обход DOM-дерева, алгоритм подбора ревьюеров в пулреквест, фильтрация дубликатов на 100 000 позиций, quicksort для «живого» поиска без фризов — примеры, которые встречаются в продакшене. С 12 по 14 июня включительно на курс действует скидка 60% по промокоду ALGO60. Начать можно прямо сейчас и двигаться в своём темпе. #htmlacademy #levelup ☝️ Подробнее о курсе
1
4
Мы провели исследование зарплат фронтендеров. Взяли медианные офферы с рынка, перевели в мойву по текущим ценам — и получили+5
Мы провели исследование зарплат фронтендеров. Взяли медианные офферы с рынка, перевели в мойву по текущим ценам — и получили морскую инфографику. Листайте карточки пятничной рубрики нейрослопа. На последней — сравнение всех грейдов в одном кадре. P.S. Кекс оценил. Сказал, что мидл — это его минимум.
614
5
Правила в CSS можно вкладывать друг в друга — как в Sass, только без компиляции и зависимостей. Псевдоклассы, дочерние селект
Правила в CSS можно вкладывать друг в друга — как в Sass, только без компиляции и зависимостей. Псевдоклассы, дочерние селекторы и медиазапросы лежат рядом с базовыми стилями компонента, а не разбросаны по файлу. Нативно — с 2023 года: Chrome 112+, Firefox 117+, Safari 16.5+. Ключевой символ — &, ссылка на родительский селектор. &:hover превращается в .btn:hover, &.is-active — в .btn.is-active, а .dark & ставит .btn внутрь .dark. Без & вложенный селектор читается как потомок через пробел. Ещё тонкость для отладки: вложенные селекторы по специфичности считаются как внутри :is() — вес берётся от самого тяжёлого аргумента родителя. На простых стилях незаметно, на запутанных стоит помнить. Зато @media, @layer и @container работают прямо внутри правила: брейкпоинты живут рядом с компонентом, а не в хвосте файла. В статье можно покрутить живой пример. #css #baseline 👾 Читать статью
628
6
Поставили инструмент глобально через npm install -g, попользовались — и забыли удалить. За пару лет таких пакетов набираются
Поставили инструмент глобально через npm install -g, попользовались — и забыли удалить. За пару лет таких пакетов набираются десятки, разных версий, и они начинают конфликтовать. npx запускает пакет прямо из реестра npm, ничего не устанавливая глобально. Создать проект на Vite — npx create-vite my-app. Та же история со статическим сервером (npx serve .) или прогоном Prettier по всему проекту (npx prettier --write .): запустили и работаете, в npm -g ничего не осело. Внутри npx идёт по трём адресам: сначала node_modules/.bin в проекте, потом временный кеш, и только затем реестр. Нашёл локально или в кеше — оттуда и запустит, лишнего не качает. Версию можно зафиксировать через @, например npx prettier@2 — пригодится, когда надо воспроизвести чужую ошибку или проверить старый релиз. #npm #tools В статье это всё на интерактивном примере: нажимаете команду и видите, что происходит. 🔄 Читать статью
622
7
Сегодня последний день скидки на курс «Vite 8». На курсе соберёте проект на Vite с нуля: настройка стилей и препроцессоров, т
Сегодня последний день скидки на курс «Vite 8». На курсе соберёте проект на Vite с нуля: настройка стилей и препроцессоров, тесты в Vitest, деплой через GitHub Actions и готовый рецепт миграции с Gulp и Webpack. Скидка 60% по промокоду VITE60 — до конца дня. С понедельника курс по обычной цене. ⚡ Смотреть программу
602
8
Оффер мечты или что предлагает Maxis выпускникам Максим Самарцев, директор Maxis, рассказал, какая зарплата ждёт выпускников
Оффер мечты или что предлагает Maxis выпускникам Максим Самарцев, директор Maxis, рассказал, какая зарплата ждёт выпускников совместной программы обучения фронтенду. Ответ — в клипе. Запись эфира: смотреть на YouTube | смотреть в VK ⚡ Программа обучения
815
9
Vite 8 стартует сервер разработки за секунду, показывает правки на лету и собирает продакшен до 10–30 раз быстрее прошлой вер+2
Vite 8 стартует сервер разработки за секунду, показывает правки на лету и собирает продакшен до 10–30 раз быстрее прошлой версии. На скорость повлияла смена движка: esbuild для разработки и Rollup для сборки заменил Rolldown, единый сборщик на Rust поверх парсера Oxc. Конфиг? Для типового проекта его можно не писать. У Vite разумные значения по умолчанию. Vite — фактический стандарт сборки фронтенда: на нём работают Vue, SvelteKit, Nuxt и Astro. После отказа от Create React App его рекомендует и команда React (первый в списке сборщиков). Курс «Vite 8» это шесть разделов от нулевой конфигурации до деплоя на GitHub Pages через GitHub Actions. Внутри настройка стилей и препроцессоров, оптимизация графики, тесты в Vitest и отдельный раздел про миграцию с Gulp и Webpack. Курс по Vite полностью на русском языке с практикой и эталонными решениями. #htmlacademy #levelup В эти выходные, 6 и 7 июня, курс «Vite 8» можно будет взять со скидкой 60% по промокоду VITE60 — только два дня и только на этот курс. 📎 Смотреть программу
619
10
Пока Кекс сажал редиску, нейросеть придумала объяснять CSS-селекторы через рейтузы. И знаете, заходит. Пояс — это .reituzy__w+5
Пока Кекс сажал редиску, нейросеть придумала объяснять CSS-селекторы через рейтузы. И знаете, заходит. Пояс — это .reituzy__waistband, а :not(.patched) — те рейтузы, до которых заплатка пока не добралась. Чем точнее адрес, тем чище CSS. Кажется, спецификация ещё никогда не выглядела так по-домашнему. Листайте карточки, их шесть. Пятничная рубрика нейрослопа: объясняем HTML и CSS понятно и с юмором. А какой селектор для рейтуз придумали бы вы?
881
11
Переключаться на браузер ради каждой проверки вёрстки, искать путь к файлу вручную, переименовывать парный тег отдельно — мел
Переключаться на браузер ради каждой проверки вёрстки, искать путь к файлу вручную, переименовывать парный тег отдельно — мелкая рутина, которая съедает время. Расширения VS Code её убирают. Три из подборки: 📎 HTML Preview — предпросмотр разметки прямо в редакторе, без переключения на браузер. 📎 Live Server — перезагружает страницу автоматически после правок в HTML, CSS или JavaScript. 📎 CSS Peek — открывает правила CSS из файла HTML через «Перейти к определению». Ещё семь — Prettier, Colorize, Auto Rename Tag и другие — со ссылками на установку в статье. Сохраните, чтобы настроить редактор на выходных. #tools #vscode 👉🏻 Читать статью
807
12
Присваиваете объект через = — и получаете вторую ссылку на тот же объект. Меняете «копию» — меняется оригинал. spread и Objec
Присваиваете объект через = — и получаете вторую ссылку на тот же объект. Меняете «копию» — меняется оригинал. spread и Object.assign() спасают только частично: копируют первый уровень, а вложенные объекты и массивы остаются общими. Долгое время глубокую копию собирали через JSON.parse(JSON.stringify(obj)). Способ рабочий, но теряет данные: Date превращается в строку, функции и undefined исчезают, Map становится пустым объектом. structuredClone() делает полную независимую копию и корректно обрабатывает Date, Map, Set, ArrayBuffer, RegExp и другие встроенные типы. Функции и узлы DOM клонировать не получится — будет DataCloneError. Доступен во всех актуальных браузерах и в Node.js с 17-й версии. В статье — интерактивный пример: нажимаете кнопку и видите, как ведут себя =, spread и structuredClone() на одном объекте. #js #clone 🔴 Читать статью
838
13
В последней строке заголовка остаётся одно слово, и весь блок смотрится неаккуратно. Раньше это правили руками — неразрывные
В последней строке заголовка остаётся одно слово, и весь блок смотрится неаккуратно. Раньше это правили руками — неразрывные пробелы, мягкие переносы. Теперь браузер берёт работу на себя. text-wrap: balance выравнивает строки заголовка по длине — для блоков до шести строк. text-wrap: pretty убирает «висячее» слово в конце параграфа и работает на тексте любой длины. Оба значения — прогрессивное улучшение. balance поддерживается с Chrome 114, Firefox 121 и Safari 17.4; pretty появился позже — в Chrome 117 и Firefox 122. Там, где поддержки нет, текст переносится как раньше. #css #webdev В статье — интерактивный пример: переключаете режимы и сразу видите разницу. 🎥 Читать статью
756
14
Пояснение 👇 :has() — реляционный псевдокласс. Он принимает относительный селектор: тот, что начинается с комбинатора >, +, ~ или пробела (комбинатор потомка по умолчанию). Поэтому :has() смотрит вперёд по дереву — на потомков и следующих соседей. Селектор form:has(input:invalid) подсветит саму форму, если у неё среди потомков есть невалидный <input>. А form input:invalid сработает иначе: выберет сам <input>, а форма останется без выделения. Селектор :contains() использовался в jQuery; в действующей спецификации CSS такого псевдокласса нет. Поддержка :has() стала Baseline Newly Available в декабре 2023 года.
812
15
🤔 Загадка от Кекса №4 Дизайнер просит: формы, в которых есть хоть один невалидный <input>, должны получить красную рамку. Какой селектор справится без помощи JavaScript?
757
16
Иногда HTTP-сервер нужен на пять минут — отдать клиенту статический билд на проверку или открыть вёрстку с мобильного по лока
Иногда HTTP-сервер нужен на пять минут — отдать клиенту статический билд на проверку или открыть вёрстку с мобильного по локальной сети. Поднимать ради этого Vite или Nginx — избыточно: первый рассчитан на полный цикл разработки, второй требует своего конфига. http-server запускается через npx http-server и работает сразу — раздаёт текущую папку на порту 8080. Другой порт, CORS-заголовки, автооткрытие браузера, отключение кеша на время разработки — всё это флаги. Никакого конфигурационного файла или установки в проект ему не нужно. Бонус: сервер доступен и по локальному IP — удобно открывать страницу со смартфона для проверки адаптива. #npm #tools 🎲 Читать статью
806
17
Всю неделю мы разбирали по частям одно и то же. Войти джуном стало сложнее, потому что работу с нейросетями ждут почти везде.
Всю неделю мы разбирали по частям одно и то же. Войти джуном стало сложнее, потому что работу с нейросетями ждут почти везде. Вайбкодинг выручает на типовых задачах и упирается в потолок на нестандартных. А без базы, по которой видно собственные ошибки, ИИ копит их быстрее, чем вы успеваете замечать. Сходится всё в одном: нейросеть усиливает того, кто понимает код, и подводит того, кто на неё только надеется. Поэтому в «Нейрофронтендере» сначала идёт инженерная часть — вёрстка, JavaScript, архитектура, React, — и только пятым разделом работа с ИИ-агентами, поверх уже собранной базы. Сегодня, 31 мая, скидка 67% действует последний день. Напишите в Телеграме или MAX, чтобы зафиксировать скидку. Оплатить успеете позже.
739
18
Исследование: Kruger & Dunning, 1999. «Unskilled and Unaware of It» — Journal of Personality and Social Psychology. В 1999 го
Исследование: Kruger & Dunning, 1999. «Unskilled and Unaware of It» — Journal of Personality and Social Psychology. В 1999 году Джастин Крюгер и Дэвид Даннинг описали закономерность: чтобы трезво оценить свою компетентность, нужна та же компетентность, которой как раз не хватает. Поэтому свои пробелы хуже всего видит тот, у кого их больше. С нейросетью этот разрыв проявляется особенно ярко. Вы пишете промпт, получаете рабочий компонент, чувствуете прогресс. А потом — баг, который модель не чинит с третьей попытки, и выясняется, что объяснить, почему код не работает, нечем. Дальше всё встаёт. Надёжнее всего страхует от этого база, по которой вы видите собственные ошибки. С ней понятно, что предлагает модель, и первый нестандартный баг перестаёт быть тупиком. На этом построена программа «Нейрофронтендера»: инженерный фундамент и практика стоят раньше агентных инструментов. Сегодня предпоследний день скидки 67%, до 31 мая включительно. Записаться в Телеграме Записаться через MAX
757
19
«Если непонятно — красавчик» Так Максим Самарцев, директор Maxis, описывает поведение, за которое готов взять выпускника совм
«Если непонятно — красавчик» Так Максим Самарцев, директор Maxis, описывает поведение, за которое готов взять выпускника совместной программы. Для рынка, где собеседования давно превратились в гонку правильных ответов, это звучит контринтуитивно. В клипе — как у Maxis устроена встреча с кандидатом и почему стандартный сценарий «выглядеть умнее» здесь не работает. Запись эфира: смотреть на YouTube | смотреть в VK 📎 Программа обучения
686
20
Git и GitHub ➿➿➿➿➿➿➿➿➿➿➿➿ add, commit, push, pull — на этих командах держится почти вся ежедневная работа с Git. А rebase, пе+2
Git и GitHub ➿➿➿➿➿➿➿➿➿➿➿➿ add, commit, push, pull — на этих командах держится почти вся ежедневная работа с Git. А rebase, перенос коммитов между ветками или восстановление «потерянного» так и остаются для многих белым пятном. Отсюда и привычки. Конфликты разрешаются наугад, историю правят с опаской, а после неудачного rebase кажется, что всё сломано — хотя на деле чинится в пару команд. Сколько раз вы откладывали rebase на «потом»? Курс «Git и GitHub» закрывает этот разрыв — между «умею коммитить» и «понимаю, что происходит в репозитории, и собираю историю такой, какой задумал». Программа идёт по нарастающей. Сначала ставите и настраиваете Git, поднимаете локальный и удалённый репозитории, связываете их. Дальше ветки: создаёте, переключаете, сливаете, разрешаете конфликты, разбираете модели ветвления. Сравниваете версии и отдельные файлы, откладываете и отменяете изменения. А в конце — rebase и cherry-pick, восстановление коммитов через reflog (та самая команда, что отматывает почти любую операцию, включая слияние), подключение по SSH и подпись коммитов через GPG. #htmlacademy #levelup Первый раздел открыт бесплатно, чтобы оценить подачу и формат. 🎁 Попробовать Git и GitHub
701