HTML *

Привет, хабр! Решил поделиться с миром своим проектом, который делался в свободное время и был мне полезен на моей текущей работе. Ссылка на гитхаб https://github.com/simplepersonru/SimpleOntoDoc

Проект - генератор статического сайта документации для онтологической модели данных
Онтологическая модель данных — это способ формального описания предметной области, в основе которого лежат три главные вещи:

1. Классы (типы объектов, «сущности»).
2. Атрибуты (свойства этих классов).
3. Связи (отношения между классами).

Под катом:

+ Мотивация (зачем мне это нужно)
+ Как это выглядит (с опубликованным примером)
+ Как можно применить (зачем Вам это нужно)

AI дисклеймер - при написании статьи активно использовалась нейросеть головного мозга, будьте осторожны

Всем привет! Меня зовут Артем Плаксин, я с рождения практически ничего не вижу.

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

Для своего некоммерческого проекта — экосистемы сервисов для незрячих и слабовидящих TifloHost — я использую платформу серверной виртуализации VMmanager. Так я и познакомился с ребятами, которые делают этот продукт.

В этой статья я хочу поделиться с вами своей историей освоения интернета.

Обратимся к статистике: по данным с https://httparchive.org/ за последние 6 лет средний размер веб-страницы значительно увеличился. Если в декабре 2019 года средний вес десктопной веб-страницы составлял 1,9 МБ, то сейчас он уже 2,9 МБ для десктопа и 2,6 МБ для мобильных устройств. Это рост на 50% за 6 лет, причём изображения составляют до 40% общего веса страницы.

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

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

Я решил провести эксперимент: оптимизировал и переконвертировал изображения в JPEG, WebP и AVIF, сохранив качество на глаз неотличимым от оригинала.

Дизайн-токены — это язык, понятный как дизайнерам, так и разработчикам. Без него продукт получается разрозненным и неповоротливым. Токены и правильный нейминг помогают создавать новые разделы быстрее, а дизайнерам больше думать о сценариях и создавать визуал в рамках продукта, а не заниматься рутиной.

Если в вашем коде и макетах до сих пор живут значения типа #0055FF — вы копите технический долг, ведь если понадобится изменить этот цвет на другой, придется менять и все компоненты, где используется это значение. А про разные темы вообще можете забыть...

В конце статьи будут ссылки на доп. материалы из реальных дизайн-систем, откуда я брал информацию.

Когда говорят про создание сайтов с помощью ИИ, обычно звучат две крайности: либо магия уровня «нажал кнопку — получил готовый продукт», либо скепсис в духе «потом всё равно придется переписывать руками». А что, если проверить?

Привет! Меня зовут Кристина. Я работаю специалистом по автоматизации в Учебном центре IT-компании «Тензор». Недавно заказчик попросил меня сделать рабочий сайт максимально быстро. Четкого ТЗ и готового дизайна не было — только общее видение. Знакомая ситуация? На практике это происходит сплошь и рядом. Здесь как раз важно уметь работать в условиях неопределенности.

Так как старые решения не подходили, я решила пойти ва-банк и довериться искусственному интеллекту. Получится ли собрать рабочий сайт с помощью ИИ, если умеешь работать с кодом и задавать правильные вопросы?

Спойлер: получится. Но не совсем так, как многие представляют.

Многие верстальщики используют Flex на автомате просто потому, что привыкли к нему за долгие годы. Grid часто кажется чем-то избыточным или пугающим из-за своего специфического синтаксиса. На самом деле эти инструменты не заменяют друг друга, а решают принципиально разные задачи.

Разница между ними кроется в самом подходе к пространству. Flex создавался для работы в одном измерении, когда вам нужно выстроить элементы в строку или столбец. Grid же мыслит сразу в двух плоскостях, позволяя контролировать и ряды, и колонки одновременно.

В этой статье мы разберем конкретные ситуации, где один инструмент явно выигрывает у другого, чтобы вы перестали гадать и начали выбирать технологию осознанно. Для наглядности в наших примерах блоки Grid будут красными, а Flex — синие.

Под каждым примером есть полный код, который достаточно скопировать в файл и запустить.

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

Мне нравятся красивые и удобные интерфейсы. С самого начала карьеры я всегда старался делать всё, что мог для комфорта пользователя. Этим я выделялся среди коллег. Большая часть из них не тратили время, продумывая взаимодействие пользователя с интерфейсом.

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

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

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

На днях, я опубликовал новость о выходе новой версии UI-библиотеки Symbiote.js, с обзором ее функций и необычной концепции. Я давно пишу на Хабре (и не только) о веб-компонентах и решениях на их основе, и знаю полный набор стандартных сомнений и возражений аудитории.

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

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

Меня зовут Алекс, и я мейнтейнер Symbiote.js - библиотеки для создания UI-компонентов и изоморфных приложений на самых современных веб-стандартах. Сегодня я расскажу про наше важное мажорное обновление - версию 3.x.

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

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

Конечно, я подумал о кроссбраузерности. Поэтому все фичи хорошо поддерживаются во всех современных браузерах с 2023 года. Я специально проверил их в «Can I use».

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

Это перевод статьи Брайана Тимана (Brian Teeman) о переопределении макета материала Joomla, с разделением блока вводного текста и полного текста материала. С примером возможного оформления.

Небольшая статья о том как я под впечатлением статьи с Хабра "Возможно, самый гениальный код на python на сегодня: разбираем 200-строчный microgpt от Андрея Карпаты" решил проверить все это на практике, и перенес код при помощи нейросети в онлайн формат.

Сайт Словарус 2.0 – это вторая улучшенная версия сайта с русской заменой иностранных слов, который я ранее делал по заказу Love Media и лично господина Маркелова.

Задача. Восстановить сайт из веб-архива и сделать его лучше.

словарус.рф

Давно хотели «потрогать» IT своими руками, но боялись утонуть в сложных терминах, математике и алгоритмах? Давайте начнем с самого простого.
В этой статье мы без скучной теории и академичного снобизма разберем, как работает HTML — фундамент любого сайта в интернете. Спойлер: это не язык программирования, и здесь невозможно ничего сломать! А главное — всего за 20 минут мы с абсолютного нуля напишем вашу первую настоящую веб-страницу (сайт-визитку). Если вы искали идеальную песочницу для старта в веб-разработке — добро пожаловать под кат.

Обзор на браузерные API, которые стали Widely available в феврале 2026. Раз в месяц я буду вам напоминать, что вы уже можете использовать в проде. В этом месяце всё довольно скучно и одиноко.

Каждый месяц выходят новые CSS-свойства, HTML-атрибуты, JavaScript-методы и WebAPI, но применять в проде мы их конечно же не будем. 2.5 года назад также каждый месяц выходили новые фичи в браузере, а вот их уже пора начинать применять.

Синхронизация атрибутов элемента с DOM-свойствами

Очевидно, что нашему компоненту потребуются атрибуты, через которые пользователь сможет контролировать его поведение. Наш компонент должен вести себя как стандартный элемент ввода типа «input», поэтому обязательно должен поддерживать такие атрибуты как disabled и required – и это самый минимум. Поэтому важно разобраться (ну или вспомнить) что такое «content vs IDL attributes», и как с этим работать.

Документация по веб-компонентам мало говорит об атрибутах, разве что рекомендует использовать attributeChangedCallback() для наблюдения за ними, но этого недостаточно. Хотя это полезное API, нам оно не подходит, потому что оно уведомляет нас о уже совершенном действии (изменении атрибута), а нам нужно контролировать этот процесс, то есть – синхронизировать атрибуты и свойства с нормализацией значений.

Так как наш компонент наследует базовый класс HTMLElement, а в нем уже реализовано большое количество разных методов, то мы можем переопределить некоторые из них чтобы получить нужный нам результат. Для начала определим наши свойства в виде пар get/set и значения в приватном поле:

Привет, друзья!

В этой небольшой статье я расскажу вам о новом свойстве события toggle - source, а также о новом атрибуте HTML-элемента dialog - closedby.

Свойство source позволяет определять источник переключения видимости поповера (popover), а атрибут closedby позволяет декларативно управлять логикой закрытия dialog, но обо всем по порядку.

Добрый день!

Хочу привести пример небольшой оптимизации интерфейса (frontend) мобильного приложения, сделанного на 1С.

Разницу вы сами можете проверить, скачав приложение и переключив флаг в настройках «Оформление HTML».

Вкладки браузера разрастались до 5 ГБ. Причина — эффекты в реактивной системе, которые продолжали жить после удаления компонентов из DOM: подписки на сигналы не очищались, замыкания удерживали ссылки на мёртвые узлы, а каждый переход по SPA множил «призрачные» обновления. Разбираем, как иерархия parent-child эффектов, привязка к disconnectedCallback через effectSet и WeakRef полностью решили проблему — без ручного управления подписками

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

Вопросы по HTML и CSS всё реже встречаются на собеседованиях для фронтендеров. Но в основном это касается позиций middle и выше. А вот для начинающих специалистов они всё ещё есть.

Поскольку новичкам всегда сложнее проходить собеседования, я захотел помочь. Я поискал вопросы с собеседований, которые были в 2025 году, и составил список наиболее часто встречающихся вопросов.

А главное, отвечать на них будет ChatGPT. Я же буду его дополнять, если потребуется. Многие же используют его для подготовки. Вот и посмотрим, как он справится.

Сразу скажу, что буду душнить. Так что вы сами рассудите, кто из нас лучше отвечает.

Давайте начнём!