ar
Feedback
HTML Academy

HTML Academy

الذهاب إلى القناة على Telegram

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

إظهار المزيد
9 792
المشتركون
-324 ساعات
-157 أيام
-7530 أيام
جذب المشتركين
يونيو '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 قنوات
التاريخ
نمو المشتركين
الإشارات
القنوات
13 يونيو0
12 يونيو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 июня. Только на этих выходных и только на этот курс. 🎤 Подробнее
388
3
Есть задачи, где массив работает — но медленно. Есть места, где Map решает то же самое за O(1). Разница между ними — это скор+2
Есть задачи, где массив работает — но медленно. Есть места, где Map решает то же самое за O(1). Разница между ними — это скорость интерфейса и оценка на ревью. Курс «Алгоритмы и структуры данных» — десять разделов на JavaScript, каждый привязан к реальным задачам фронтенда. Обход DOM-дерева, алгоритм подбора ревьюеров в пулреквест, фильтрация дубликатов на 100 000 позиций, quicksort для «живого» поиска без фризов — примеры, которые встречаются в продакшене. С 12 по 14 июня включительно на курс действует скидка 60% по промокоду ALGO60. Начать можно прямо сейчас и двигаться в своём темпе. #htmlacademy #levelup ☝️ Подробнее о курсе
1
4
Мы провели исследование зарплат фронтендеров. Взяли медианные офферы с рынка, перевели в мойву по текущим ценам — и получили+5
Мы провели исследование зарплат фронтендеров. Взяли медианные офферы с рынка, перевели в мойву по текущим ценам — и получили морскую инфографику. Листайте карточки пятничной рубрики нейрослопа. На последней — сравнение всех грейдов в одном кадре. P.S. Кекс оценил. Сказал, что мидл — это его минимум.
592
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 👾 Читать статью
619
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 В статье это всё на интерактивном примере: нажимаете команду и видите, что происходит. 🔄 Читать статью
615
7
Сегодня последний день скидки на курс «Vite 8». На курсе соберёте проект на Vite с нуля: настройка стилей и препроцессоров, т
Сегодня последний день скидки на курс «Vite 8». На курсе соберёте проект на Vite с нуля: настройка стилей и препроцессоров, тесты в Vitest, деплой через GitHub Actions и готовый рецепт миграции с Gulp и Webpack. Скидка 60% по промокоду VITE60 — до конца дня. С понедельника курс по обычной цене. ⚡ Смотреть программу
598
8
Оффер мечты или что предлагает Maxis выпускникам Максим Самарцев, директор Maxis, рассказал, какая зарплата ждёт выпускников
Оффер мечты или что предлагает Maxis выпускникам Максим Самарцев, директор Maxis, рассказал, какая зарплата ждёт выпускников совместной программы обучения фронтенду. Ответ — в клипе. Запись эфира: смотреть на YouTube | смотреть в VK ⚡ Программа обучения
809
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 — только два дня и только на этот курс. 📎 Смотреть программу
615
10
Пока Кекс сажал редиску, нейросеть придумала объяснять CSS-селекторы через рейтузы. И знаете, заходит. Пояс — это .reituzy__w+5
Пока Кекс сажал редиску, нейросеть придумала объяснять CSS-селекторы через рейтузы. И знаете, заходит. Пояс — это .reituzy__waistband, а :not(.patched) — те рейтузы, до которых заплатка пока не добралась. Чем точнее адрес, тем чище CSS. Кажется, спецификация ещё никогда не выглядела так по-домашнему. Листайте карточки, их шесть. Пятничная рубрика нейрослопа: объясняем HTML и CSS понятно и с юмором. А какой селектор для рейтуз придумали бы вы?
862
11
Переключаться на браузер ради каждой проверки вёрстки, искать путь к файлу вручную, переименовывать парный тег отдельно — мел
Переключаться на браузер ради каждой проверки вёрстки, искать путь к файлу вручную, переименовывать парный тег отдельно — мелкая рутина, которая съедает время. Расширения VS Code её убирают. Три из подборки: 📎 HTML Preview — предпросмотр разметки прямо в редакторе, без переключения на браузер. 📎 Live Server — перезагружает страницу автоматически после правок в HTML, CSS или JavaScript. 📎 CSS Peek — открывает правила CSS из файла HTML через «Перейти к определению». Ещё семь — Prettier, Colorize, Auto Rename Tag и другие — со ссылками на установку в статье. Сохраните, чтобы настроить редактор на выходных. #tools #vscode 👉🏻 Читать статью
802
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 🔴 Читать статью
834
13
В последней строке заголовка остаётся одно слово, и весь блок смотрится неаккуратно. Раньше это правили руками — неразрывные
В последней строке заголовка остаётся одно слово, и весь блок смотрится неаккуратно. Раньше это правили руками — неразрывные пробелы, мягкие переносы. Теперь браузер берёт работу на себя. text-wrap: balance выравнивает строки заголовка по длине — для блоков до шести строк. text-wrap: pretty убирает «висячее» слово в конце параграфа и работает на тексте любой длины. Оба значения — прогрессивное улучшение. balance поддерживается с Chrome 114, Firefox 121 и Safari 17.4; pretty появился позже — в Chrome 117 и Firefox 122. Там, где поддержки нет, текст переносится как раньше. #css #webdev В статье — интерактивный пример: переключаете режимы и сразу видите разницу. 🎥 Читать статью
755
14
Пояснение 👇 :has() — реляционный псевдокласс. Он принимает относительный селектор: тот, что начинается с комбинатора >, +, ~ или пробела (комбинатор потомка по умолчанию). Поэтому :has() смотрит вперёд по дереву — на потомков и следующих соседей. Селектор form:has(input:invalid) подсветит саму форму, если у неё среди потомков есть невалидный <input>. А form input:invalid сработает иначе: выберет сам <input>, а форма останется без выделения. Селектор :contains() использовался в jQuery; в действующей спецификации CSS такого псевдокласса нет. Поддержка :has() стала Baseline Newly Available в декабре 2023 года.
811
15
🤔 Загадка от Кекса №4 Дизайнер просит: формы, в которых есть хоть один невалидный <input>, должны получить красную рамку. Какой селектор справится без помощи JavaScript?
757
16
Иногда HTTP-сервер нужен на пять минут — отдать клиенту статический билд на проверку или открыть вёрстку с мобильного по лока
Иногда HTTP-сервер нужен на пять минут — отдать клиенту статический билд на проверку или открыть вёрстку с мобильного по локальной сети. Поднимать ради этого Vite или Nginx — избыточно: первый рассчитан на полный цикл разработки, второй требует своего конфига. http-server запускается через npx http-server и работает сразу — раздаёт текущую папку на порту 8080. Другой порт, CORS-заголовки, автооткрытие браузера, отключение кеша на время разработки — всё это флаги. Никакого конфигурационного файла или установки в проект ему не нужно. Бонус: сервер доступен и по локальному IP — удобно открывать страницу со смартфона для проверки адаптива. #npm #tools 🎲 Читать статью
804
17
Всю неделю мы разбирали по частям одно и то же. Войти джуном стало сложнее, потому что работу с нейросетями ждут почти везде.
Всю неделю мы разбирали по частям одно и то же. Войти джуном стало сложнее, потому что работу с нейросетями ждут почти везде. Вайбкодинг выручает на типовых задачах и упирается в потолок на нестандартных. А без базы, по которой видно собственные ошибки, ИИ копит их быстрее, чем вы успеваете замечать. Сходится всё в одном: нейросеть усиливает того, кто понимает код, и подводит того, кто на неё только надеется. Поэтому в «Нейрофронтендере» сначала идёт инженерная часть — вёрстка, JavaScript, архитектура, React, — и только пятым разделом работа с ИИ-агентами, поверх уже собранной базы. Сегодня, 31 мая, скидка 67% действует последний день. Напишите в Телеграме или MAX, чтобы зафиксировать скидку. Оплатить успеете позже.
736
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