ch
Feedback
HTML Academy

HTML Academy

前往频道在 Telegram

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

显示更多
9 795
订阅者
-524 小时
-177
-7630
吸引订阅者
六月 '26
六月 '26
+18
在0个频道中
五月 '26
+35
在1个频道中
Get PRO
四月 '26
+49
在0个频道中
Get PRO
三月 '26
+40
在3个频道中
Get PRO
二月 '26
+37
在0个频道中
Get PRO
一月 '26
+54
在0个频道中
Get PRO
十二月 '25
+48
在2个频道中
Get PRO
十一月 '25
+44
在1个频道中
Get PRO
十月 '25
+48
在0个频道中
Get PRO
九月 '25
+52
在1个频道中
Get PRO
八月 '25
+68
在1个频道中
Get PRO
七月 '25
+48
在1个频道中
Get PRO
六月 '25
+54
在0个频道中
Get PRO
五月 '25
+64
在1个频道中
Get PRO
四月 '25
+58
在0个频道中
Get PRO
三月 '25
+81
在0个频道中
Get PRO
二月 '25
+57
在0个频道中
Get PRO
一月 '25
+62
在0个频道中
Get PRO
十二月 '24
+58
在1个频道中
Get PRO
十一月 '24
+78
在1个频道中
Get PRO
十月 '24
+95
在0个频道中
Get PRO
九月 '24
+52
在1个频道中
Get PRO
八月 '24
+41
在0个频道中
Get PRO
七月 '24
+25
在0个频道中
Get PRO
六月 '24
+46
在1个频道中
Get PRO
五月 '24
+101
在1个频道中
Get PRO
四月 '24
+240
在3个频道中
Get PRO
三月 '24
+121
在2个频道中
Get PRO
二月 '24
+138
在2个频道中
Get PRO
一月 '24
+182
在6个频道中
Get PRO
十二月 '23
+151
在1个频道中
Get PRO
十一月 '23
+224
在2个频道中
Get PRO
十月 '23
+310
在1个频道中
Get PRO
九月 '23
+193
在0个频道中
Get PRO
八月 '23
+161
在0个频道中
Get PRO
七月 '23
+164
在0个频道中
Get PRO
六月 '23
+127
在0个频道中
Get PRO
五月 '23
+127
在0个频道中
Get PRO
四月 '23
+128
在0个频道中
Get PRO
三月 '23
+178
在0个频道中
Get PRO
二月 '23
+255
在0个频道中
Get PRO
一月 '23
+509
在0个频道中
Get PRO
十二月 '22
+614
在0个频道中
Get PRO
十一月 '22
+491
在0个频道中
Get PRO
十月 '22
+922
在0个频道中
Get PRO
九月 '22
+748
在0个频道中
Get PRO
八月 '22
+703
在0个频道中
Get PRO
七月 '22
+514
在0个频道中
Get PRO
六月 '22
+653
在0个频道中
Get PRO
五月 '22
+423
在0个频道中
Get PRO
四月 '22
+572
在0个频道中
Get PRO
三月 '22
+819
在0个频道中
Get PRO
二月 '22
+234
在0个频道中
Get PRO
一月 '22
+210
在0个频道中
Get PRO
十二月 '21
+301
在0个频道中
Get PRO
十一月 '21
+242
在0个频道中
Get PRO
十月 '21
+259
在0个频道中
Get PRO
九月 '21
+200
在0个频道中
Get PRO
八月 '21
+244
在0个频道中
Get PRO
七月 '21
+298
在0个频道中
Get PRO
六月 '21
+328
在0个频道中
Get PRO
五月 '21
+333
在0个频道中
Get PRO
四月 '21
+414
在0个频道中
Get PRO
三月 '21
+525
在0个频道中
Get PRO
二月 '21
+521
在0个频道中
Get PRO
一月 '21
+471
在0个频道中
Get PRO
十二月 '20
+7 426
在0个频道中
日期
订阅者增长
提及
频道
11 六月0
10 六月0
09 六月+2
08 六月+2
07 六月+2
06 六月+1
05 六月+1
04 六月+3
03 六月+3
02 六月+4
01 六月0
频道帖子
«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 июня. Только на этих выходных и только на этот курс. 🎤 Подробнее
316
3
Есть задачи, где массив работает — но медленно. Есть места, где Map решает то же самое за O(1). Разница между ними — это скор+2
Есть задачи, где массив работает — но медленно. Есть места, где Map решает то же самое за O(1). Разница между ними — это скорость интерфейса и оценка на ревью. Курс «Алгоритмы и структуры данных» — десять разделов на JavaScript, каждый привязан к реальным задачам фронтенда. Обход DOM-дерева, алгоритм подбора ревьюеров в пулреквест, фильтрация дубликатов на 100 000 позиций, quicksort для «живого» поиска без фризов — примеры, которые встречаются в продакшене. С 12 по 14 июня включительно на курс действует скидка 60% по промокоду ALGO60. Начать можно прямо сейчас и двигаться в своём темпе. #htmlacademy #levelup ☝️ Подробнее о курсе
1
4
Мы провели исследование зарплат фронтендеров. Взяли медианные офферы с рынка, перевели в мойву по текущим ценам — и получили+5
Мы провели исследование зарплат фронтендеров. Взяли медианные офферы с рынка, перевели в мойву по текущим ценам — и получили морскую инфографику. Листайте карточки пятничной рубрики нейрослопа. На последней — сравнение всех грейдов в одном кадре. P.S. Кекс оценил. Сказал, что мидл — это его минимум.
515
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 👾 Читать статью
589
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 В статье это всё на интерактивном примере: нажимаете команду и видите, что происходит. 🔄 Читать статью
586
7
Сегодня последний день скидки на курс «Vite 8». На курсе соберёте проект на Vite с нуля: настройка стилей и препроцессоров, т
Сегодня последний день скидки на курс «Vite 8». На курсе соберёте проект на Vite с нуля: настройка стилей и препроцессоров, тесты в Vitest, деплой через GitHub Actions и готовый рецепт миграции с Gulp и Webpack. Скидка 60% по промокоду VITE60 — до конца дня. С понедельника курс по обычной цене. ⚡ Смотреть программу
579
8
Оффер мечты или что предлагает Maxis выпускникам Максим Самарцев, директор Maxis, рассказал, какая зарплата ждёт выпускников
Оффер мечты или что предлагает Maxis выпускникам Максим Самарцев, директор Maxis, рассказал, какая зарплата ждёт выпускников совместной программы обучения фронтенду. Ответ — в клипе. Запись эфира: смотреть на YouTube | смотреть в VK ⚡ Программа обучения
790
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 — только два дня и только на этот курс. 📎 Смотреть программу
603
10
Пока Кекс сажал редиску, нейросеть придумала объяснять CSS-селекторы через рейтузы. И знаете, заходит. Пояс — это .reituzy__w+5
Пока Кекс сажал редиску, нейросеть придумала объяснять CSS-селекторы через рейтузы. И знаете, заходит. Пояс — это .reituzy__waistband, а :not(.patched) — те рейтузы, до которых заплатка пока не добралась. Чем точнее адрес, тем чище CSS. Кажется, спецификация ещё никогда не выглядела так по-домашнему. Листайте карточки, их шесть. Пятничная рубрика нейрослопа: объясняем HTML и CSS понятно и с юмором. А какой селектор для рейтуз придумали бы вы?
851
11
Переключаться на браузер ради каждой проверки вёрстки, искать путь к файлу вручную, переименовывать парный тег отдельно — мел
Переключаться на браузер ради каждой проверки вёрстки, искать путь к файлу вручную, переименовывать парный тег отдельно — мелкая рутина, которая съедает время. Расширения VS Code её убирают. Три из подборки: 📎 HTML Preview — предпросмотр разметки прямо в редакторе, без переключения на браузер. 📎 Live Server — перезагружает страницу автоматически после правок в HTML, CSS или JavaScript. 📎 CSS Peek — открывает правила CSS из файла HTML через «Перейти к определению». Ещё семь — Prettier, Colorize, Auto Rename Tag и другие — со ссылками на установку в статье. Сохраните, чтобы настроить редактор на выходных. #tools #vscode 👉🏻 Читать статью
795
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 🔴 Читать статью
826
13
В последней строке заголовка остаётся одно слово, и весь блок смотрится неаккуратно. Раньше это правили руками — неразрывные
В последней строке заголовка остаётся одно слово, и весь блок смотрится неаккуратно. Раньше это правили руками — неразрывные пробелы, мягкие переносы. Теперь браузер берёт работу на себя. text-wrap: balance выравнивает строки заголовка по длине — для блоков до шести строк. text-wrap: pretty убирает «висячее» слово в конце параграфа и работает на тексте любой длины. Оба значения — прогрессивное улучшение. balance поддерживается с Chrome 114, Firefox 121 и Safari 17.4; pretty появился позже — в Chrome 117 и Firefox 122. Там, где поддержки нет, текст переносится как раньше. #css #webdev В статье — интерактивный пример: переключаете режимы и сразу видите разницу. 🎥 Читать статью
745
14
Пояснение 👇 :has() — реляционный псевдокласс. Он принимает относительный селектор: тот, что начинается с комбинатора >, +, ~ или пробела (комбинатор потомка по умолчанию). Поэтому :has() смотрит вперёд по дереву — на потомков и следующих соседей. Селектор form:has(input:invalid) подсветит саму форму, если у неё среди потомков есть невалидный <input>. А form input:invalid сработает иначе: выберет сам <input>, а форма останется без выделения. Селектор :contains() использовался в jQuery; в действующей спецификации CSS такого псевдокласса нет. Поддержка :has() стала Baseline Newly Available в декабре 2023 года.
804
15
🤔 Загадка от Кекса №4 Дизайнер просит: формы, в которых есть хоть один невалидный <input>, должны получить красную рамку. Какой селектор справится без помощи JavaScript?
752
16
Иногда HTTP-сервер нужен на пять минут — отдать клиенту статический билд на проверку или открыть вёрстку с мобильного по лока
Иногда HTTP-сервер нужен на пять минут — отдать клиенту статический билд на проверку или открыть вёрстку с мобильного по локальной сети. Поднимать ради этого Vite или Nginx — избыточно: первый рассчитан на полный цикл разработки, второй требует своего конфига. http-server запускается через npx http-server и работает сразу — раздаёт текущую папку на порту 8080. Другой порт, CORS-заголовки, автооткрытие браузера, отключение кеша на время разработки — всё это флаги. Никакого конфигурационного файла или установки в проект ему не нужно. Бонус: сервер доступен и по локальному IP — удобно открывать страницу со смартфона для проверки адаптива. #npm #tools 🎲 Читать статью
800
17
Всю неделю мы разбирали по частям одно и то же. Войти джуном стало сложнее, потому что работу с нейросетями ждут почти везде.
Всю неделю мы разбирали по частям одно и то же. Войти джуном стало сложнее, потому что работу с нейросетями ждут почти везде. Вайбкодинг выручает на типовых задачах и упирается в потолок на нестандартных. А без базы, по которой видно собственные ошибки, ИИ копит их быстрее, чем вы успеваете замечать. Сходится всё в одном: нейросеть усиливает того, кто понимает код, и подводит того, кто на неё только надеется. Поэтому в «Нейрофронтендере» сначала идёт инженерная часть — вёрстка, JavaScript, архитектура, React, — и только пятым разделом работа с ИИ-агентами, поверх уже собранной базы. Сегодня, 31 мая, скидка 67% действует последний день. Напишите в Телеграме или MAX, чтобы зафиксировать скидку. Оплатить успеете позже.
724
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
731
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