HTML *

В прошлой статье мы обсуждали, почему меня (дейтинг-аутстаффа) никогда не заменят нейросети. FAQ для погружения в мой лор там тоже есть.

А в этой статье я выкладываю свой интерактивный калькулятор для оценки вашей дейтинг-ликвидности: https://gcodegspot.github.io/dating-calculator-2.0/

Дисклеймер: ваш результат не означает вашу ценность. Это лишь набор цифр, определяющий, насколько вам сложно в онлайн-дейтинге.

Калькулятор создан в увеселительных целях. Реальный дейтинг беспощаден.

После успешного origin trial API HTML-in-Canvas официально вышел в стабильной версии Chrome 157. Он объединяет интерактивность и доступность DOM с производительностью и попиксельным управлением <canvas>. Так возможности браузера можно использовать вместе с графикой canvas, ускоренной на GPU.

Помните игры, где герой с армией бродит по карте, вербует отряды в городах, осаждает замки и собирает по кусочкам карту следующей земли? Мы сделали такую игру заново и запустили её прямо внутри Telegram. Её не нужно ставить и не нужно регистрироваться: нажал кнопку в боте — и через пару секунд ты уже на карте.

Игра называется «Морвейн». Под капотом — один HTML‑файл без фреймворков, отрисовка на canvas, процедурные миры, тактический бой на 80 клетках и сервер на Cloudflare, который пока не стоил нам ни копейки. А всю графику — от травы до драконов — мы сгенерировали нейросетью и научили код собирать её в цельную карту.

В этой статье расскажу, что умеет игра, как она устроена и какие задачи пришлось решать по дороге. Будет про генерацию континентов, сохранения в облаке Telegram с лимитом 4 КБ на значение, честный рейтинг без античита на сервере, вырезание розового фона «по оттенку» и про то, почему преследующий вас слон должен быть опасен.

Я делаю сервис, который пишет статьи и сам публикует их на сайты клиентов. Как устроена публикация в четыре CMS, я уже рассказывал здесь. Сегодня про соседний кусок: редактор в личном кабинете, где человек правит статью перед публикацией.

Как минимум два месяца этот редактор показывал «Сохранено» и не сохранял ни символа. Сама ошибка глупая, на неё хватит одного абзаца. Хуже, что очевидное исправление уничтожило бы статьи. По дороге к правильному нашлись ещё три ловушки. Санитайзер nh3 тратит почти минуту на 320 КБ разметки. Одно правило HTML5 превращает 99 КБ входа в 56 МБ выхода. А SELECT … FOR UPDATE в SQLAlchemy берёт блокировку и при этом отдаёт старые данные.

У каждого HTML-элемента есть всего два псевдоэлемента: before и after — и с помощью них можно сделать крутые элементы.

Разберём, как с помощью обычного CSS превратить два псевдоэлемента в крутые графические штуки. Как создавать сложные формы через clip-path, собирать композиции из нескольких градиентов, работать с масками и режимами смешивания, а также строить анимации и элементы интерфейса без лишней HTML-разметки.

Обычно браузер представляют так: у каждой вкладки свой поток и свой event loop, а промис срабатывает раньше таймера, потому что микрозадачи приоритетнее макрозадач. На практике этого хватает, но в стандарте HTML всё устроено иначе. Вот три примера:

Зависшая вкладка может подвесить соседнюю, например ту, которая открыла её через window.open().

Один и тот же код может выдать разный порядок вывода, и всё зависит от того, кто его вызвал.

Слова «макрозадача», которое звучит на каждом собеседовании, в стандарте нет: то, что им называют, - просто обычная task.

Делал интерактивную открытку на день рождения и хотел, чтобы картинка не просто появлялась, а «рисовалась»: сначала карандашные линии, потом по касанию её заливает акварель, причём с рваным краем, как у краски, которая впитывается в бумагу.

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

Теперь каталог живёт в HTML и CSS: текст, таблицы и схемы лежат в одном проекте и правятся вместе, PDF получается печатью из браузера. CorelDRAW остаётся только на полиграфическую доводку. Насколько это проще, видно по предыдущему каталогу: 35 страниц, текст и таблицы через Word, схемы через Inkscape, макет в CorelDRAW — и каждая правка означала новый экспорт и повторную ручную доводку. Что дал этот странный подход и чем пришлось заплатить.

Если следить за React только по крупным релизам, легко пропустить момент, когда библиотека тихо меняет направление. React 19.3 — как раз такой случай. Сам релиз вышел 9 сентября 2026 года. И я хочу поделиться парой моментов из этого обновления. Рассмотрим пару хуков это ViewTransition и Fragment Refs. Еще, что я могу выделить, это новые возможности для SSR, Server Components и работы с браузерными API.

В шестой версии SuperSet появилась возможность прописывать HTML код в метриках  и измерениях сводных таблиц, что значительно расширило  приемы для BI-разработчиков по форматированию  таблиц.  Покажу как в SuperSet можно реализовать сводную таблицу со сменой периодов и выводом красивой дельты.

Привет, Хабр!

Я интересуюсь вёрсткой с момента появления первых версий браузера Google Chrome. Конечно, современному фронтендеру тяжело понять то, что я испытывал с коллегами. Мы именно те разработчики, которые знали кучу рецептов, как починить определённый баг в конкретном браузере.

Но тогда были не только плохие моменты. В этом легаси осталось много хороших возможностей. Только они затерялись с течением времени. Мне же от этого грустно.

По этой причине сегодня пришёл к вам исправлять эту ситуацию. Мы рассмотрим старые возможности HTML и CSS, которые сегодня всё так же полезны.

Давайте посмотрим, что я подготовил.

Небольшое приложение про «давай ебть английский», где ты не сидишь с учебником, а каждый день коротко отбиваешься от языка: карточки, мемы, озвучка, диалоги с ботом и стрик, который больно бьёт по самолюбию.

Я собирался написать статью про Markdown. В процессе внутри документа оказался Doom.

Разбираемся, почему два пробела меняют перенос строки, обратные кавычки не всегда спасают таблицу, а один .md по-разному выглядит на Хабре и GitHub. Прямо в статье можно менять разметку в лаборатории, решать задания и проверять результат. Есть GIF, вложенные спойлеры, маленький квест и разбор того, как упаковать ресурсы Doom в Markdown — и что на самом деле запускает игру.

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

Хабр, привет.

Многие люди с интересом относятся к истории. Читают книги, рассматривают архитектуру городов, смотрят фильмы времени наших родителей. Мне кажется, веб достиг периода, когда мы можем с интересом поговорить о прошлом HTML и CSS.

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

Давайте посмотрим, что я вам подготовил.

Внутреннее обучение без бюджета, без серверов и без "запишитесь на вебинар". Один html-файл на ~118 Кб, который открывается двойным кликом, работает без интернета, помнит прогресс и выдает сертификат. Внутри: 7 модулей, 15 интерактивных схем, 21 вопрос, полезный чек-лист, игровые баллы, глоссарий и сертификат на выходе. Без библиотек, сборщиков и бэкенда. Открывается двойным кликом, прогресс хранится в браузере. Разберу архитектуру и дам промпт, чтобы собрать такой же под свою тему. Готовый рецепт, который сэкономит время, если вдруг возникла такая задача.

Привет, Хабр!

Я часто вам рассказываю, как HTML и CSS помогают улучшить пользовательский опыт в наших веб-интерфейсах. Мне это наскучило. Сегодня я хочу поговорить с вами о практиках, которые заставляют пользователей очень сильно ругать разработчиков.

Мы рассмотрим примеры, когда только использование HTML и CSS может привести к замешательству людей. Многие же думают, что эти технологии безопасны и не могут принести вреда. Вот и проверим это.

Давайте посмотрим, что я вам подготовил.

Хочу рассказать о своей npm‑библиотеке — это мой второй и самый сложный npm‑проект на момент написания статьи.
Библиотека решает ряд проблем и ограничений связанных с дефолтным поведением браузерного элемента скролл.

Глубоко в код погружаться не буду — поделюсь историей создания и мотивацией.✨

React 19.3 уже доступен в npm!

В прошлом году мы представили View Transitions и Fragment Refs как новые экспериментальные API, которые готовились к появлению в React. Теперь оба API получили стабильный статус в React 19.3.

В этой статье разберём, как они работают, а также рассмотрим другие заметные изменения в этом релизе.

Привет, Хабр!

Я говорю о семантической вёрстке уже десять лет. Только как-то так получилось, что в последнее время я ничего не писал на эту тему. Надо исправляться!

В современных веб-интерфейсах я часто встречаю определённый набор семантических элементов. Это header, main, nav, footer. Даже элемент button встречается. Реже, чем другие, но всё же есть.

Не будем на этом останавливаться! Сегодня мы с вами рассмотрим ещё несколько элементов, которые почему-то редко используются. Хотя с ними ваша вёрстка станет ещё более семантичной, а значит, и интерфейсы станут ещё лучше.

Давайте посмотрим, что я вам подготовил.