Обновить
128K+

HTML *

Стандартный язык разметки web-страниц

51,33
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Почему мы до сих пор пользуемся Markdown?

Уровень сложностиСредний
Время на прочтение11 мин
Охват и читатели18K

Есть в жизни вещи, которые приносят мне и радость, и печаль одновременно. Например, горький шоколад и markdown. Серьёзно, зачем он нужен? В половине случаев мы даже не используем этот язык целиком!

HTML — лучший язык программирования!

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

Да, наверно, мы правы, но у того, кто так говорит, есть то, чего нет у нас.

Нормальная жизнь.

[Примечание] Когда я говорю о markdown, то имею в виду конкретно CommonMark, если не указано иное. Дело в том, что это неоднозначная спецификация синтаксиса. Я люблю этот проект и ценю усилия разработчиков. Поломана не спецификация, а сам язык.

Читать далее

Новости

Как я хотел две странички для SAMBA и NFS, а сделал полноценную панель управления NAS на 20+ страницах

Время на прочтение4 мин
Охват и читатели15K

Как я хотел две странички для SAMBA и NFS, а сделал полноценную панель управления NAS на 20+ страницах

Читать далее

PLC-Tracer — новый взгляд на Ladder логику

Уровень сложностиПростой
Время на прочтение6 мин
Охват и читатели9.5K

PLC-Tracer новый взгляд на Ladder логику. Это бесплатный браузерный инструмент диагностики для ПЛК Allen-Bradley (ControlLogix, CompactLogix, MicroLogix и PLC-5). Он разбирает и визуализирует лестничную логику как в офлайн-режиме, так и по данным из живого контроллера. Инструмент умеет записывать состояния переменных в реальном времени через прямое подключение к ПЛК и воспроизводить сессии в режиме офлайн.

Читать далее

Фишинг с подменой URI: или как один хитрый редирект может угнать ваши пароли

Уровень сложностиПростой
Время на прочтение3 мин
Охват и читатели8.6K

Всем привет! Хочу поделиться, возможно, не новым, но, на мой взгляд, довольно изощренным видом фишинга. Кто-то уже наверняка сталкивался с таким методом, а для кого-то он окажется в новинку.

Читать далее

Управляемый прокруткой CSS в 2026 году — разработка карусели без JavaScript

Уровень сложностиСредний
Время на прочтение18 мин
Охват и читатели11K

Исторически создание карусели в веб-разработке означало использование какой-либо JS-библиотеки. Slick, Swiper, Flickity, Embla Carousel и другие заполняли пробел платформы. Каждая из них увеличивала размер сборки, имела свои особенности обеспечения доступности и накладные расходы на обработку событий. Полный минифицированный пакет Swiper v11 весит приблизительно 140 КБ; даже модульные импорты составляют 40-60 КБ для ядра и навигации. Умножьте это на бесчисленные маркетинговые страницы, галереи товаров в электронной коммерции и макеты с большим количеством медиаконтента, которые зависят от каруселей, и расходы сильно возрастут: долгое время до интерактивности, блокировка основного потока во время инициализации и большой размер передаваемых данных на каждой странице, где используется слайдер.

Читать далее

Помогаю новичкам найти ошибки в вёрстке ChatGPT

Уровень сложностиСредний
Время на прочтение9 мин
Охват и читатели15K

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

Мне кажется, что сегодня начинающие фронтендеры уже не пишут код сами. Они отдают всё на откуп искусственному интеллекту. Хорошо это или плохо — судить не буду.

Я хочу помочь вам найти плохие решения в вёрстке, которые ChatGPT вам предлагает. Для этого я собрал наиболее популярные примеры, которые очень просто исправить. Я вам всё покажу.

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

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

Читать далее

Claude Code: почему HTML лучше Markdown

Уровень сложностиПростой
Время на прочтение5 мин
Охват и читатели25K

Markdown стал стандартным форматом для общения агентов с разработчиком. Простой, портативный, поддерживает базовое форматирование, легко редактируется. Claude даже научился делать ASCII-диаграммы внутри markdown-файлов.

Но по мере того, как агенты становятся мощнее, markdown начинает ощущаться тесным. Файл длиннее ста строк уже трудно читать. Хочется нормальных визуализаций, цвета, диаграмм — и возможности легко поделиться результатом.

К тому же я всё реже редактирую эти файлы руками. Чаще использую их как спецификации, референсы, брейнсторм-артефакты. Когда правки нужны, их вносит Claude — и тогда одно из главных преимуществ markdown исчезает.

Я перешёл на HTML как основной выходной формат. Вот почему.

(примеры можно посмотреть здесь: https://thariqs.github.io/html-effectiveness — возвращайтесь читать дальше)

Читать далее

Зря вы забыли эти HTML- и CSS-фичи

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели19K

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

Мне нравится рассказывать про HTML и CSS. Отдельное удовольствие — находить очень старые фичи языков, о которых редко кто знает. Сегодня я пришёл как раз с ними.

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

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

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

Читать далее

Baseline: апрель 2026

Уровень сложностиПростой
Время на прочтение12 мин
Охват и читатели13K

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

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

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

Узнать, что можно применять в проде

JavaScript. Работа с большими файлами в браузере. Часть 1/2: Чтение файлов

Уровень сложностиПростой
Время на прочтение3 мин
Охват и читатели12K

Онлайн доска DGRM.net хранит данные в PNG-картинках. Вместе с вложениями файлы получаются большие. Рассказываю как сделано хранение данных в PNG-файлах.

Читать далее

Один движок на два рантайма: как мой сайт на Next.js делит формулы с Flutter-приложением

Время на прочтение16 мин
Охват и читатели6.5K

Прошлой зимой я писал тут про «Мастерок» — строительный калькулятор на Flutter для RuStore. Приложение поехало в прод, набрало 4.9 звезды, и в какой-то момент пришло осознание: аудитория смартфонных приложений — это аудитория смартфонных приложений. А человек, который в обед нагуглил «сколько мешков ротбанда на 20 квадратов», в магазин приложений не полезет. Он хочет страницу в браузере. Желательно без куки-баннера на полэкрана, без интерфейса из 2012-го и без того, чтобы перед ответом на вопрос ему предлагали посмотреть пять реклам.

Так появился getmasterok.ru — веб-половина той же экосистемы. Сайт на Next.js 15, шестьдесят один калькулятор, ИИ-прораб, SEO, блог, всё как положено. И с одним неочевидным вызовом, который стал главным сюжетом этой статьи.

А вызов я нашёл не сам. Его нашёл пользователь.

Читать далее

Готовимся к отключению. Эффективные форматы для упаковки и раздачи HTML-страниц

Уровень сложностиПростой
Время на прочтение7 мин
Охват и читатели21K

В 2026 году растёт риск перебоев и ограничений в работе интернета в РФ. В таких условиях имеет смысл заранее продумать, как сохранить привычное окружение при нестабильном доступе к сети.

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

Читать далее

Фронтенд — это REST-сервер

Время на прочтение7 мин
Охват и читатели8.1K

Привет. Я фронтенд-разработчик. По мнению тех, кто, по мнению некоторых, перекладывает джейсончики туда-сюда, я крашу кнопочки. Но сам я себя идентифицирую иначе: я тоже перекладываю джейсончики, и у меня всё точно так же, как у них. Даже архитектура. У меня тоже есть контроллеры, сервисы и хранилища, и я также обрабатываю запросы пользователей. Даже больше, я делаю HATEOAS, «тру» RESTful, если хотите. Давайте расскажу, как я к этому пришел.

Когда-то давно я только верстал. Накидывал разметку, добавлял классы, идентификаторы и стилизовал ЦСС-ом. И было хорошо. Потом от меня потребовали динамичности — пришлось добавить JavaScript. И было очень хорошо.

Технологии развивались, и мне хотелось пробовать новое. Я попробовал AJAX. Это было так волнительно... Я сказал бэкендерам: основную разметку жду от вас, а опции для выпадающего списка, например, отдавайте джейсоном по запросу. Они были не в восторге. «Одному HTML подавай, другому CSV, третьему ещё что-то — безобразие!» Но мы нашли компромис. Бэкэндеры сказали: «Вот вам, мол, джейсон, дальше сами как-нибудь». И назвали это REST API.

Сначала было очень круто! Мы, верстальщики, организовались. Мы стали фронтендерами! Конечно же, мы сразу побежали решать ещё нерешённые сто раз решённые задачи. Мы писали библиотеки и фреймворки — четыре миллиона штук! Да у нас даже есть библиотека с функцией для умножения чисел — lodash.multiply. Мы придумывали свои паттерны и архитектуры, например FSD. Короче, мы стали очень крутые.

Но то уже были «мы», а не я. Мне было сложно. Шутка ли, изучать по одному новому фреймворку в неделю? А ведь еще переписывать всё надо, стек-то устарел... В общем, в какой-то момент я перестал поспевать за модой и справляться со сложностью. Переходишь из одного проекта (на React) в другой (на Vue), а там всё иначе. Берешь нового разработчика в команду с опытом в React, например, а ему нужно время, чтобы вникнуть, потому что в его старой команде был другой «стейт-менеджер». Вавилон, никто друг друга не понимает.

Читать далее

Ближайшие события

LOTIS: Новая парадигма WEB-разработки для бизнес-приложений

Уровень сложностиСредний
Время на прочтение11 мин
Охват и читатели12K

После того как моя статья об LOTIS вызвала интерес, я решил подробнее раскрыть его архитектуру и привести примеры кода.

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

Читать далее

Моя коллекция полезных HTML-фич

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели18K

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

Я часто рассказываю про CSS, потому что очень сильно люблю этот язык. И хочу, чтобы у вас с ним не было проблем. Но я совсем мало внимания уделяю HTML. А он тоже прекрасен и полезен!

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

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

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

Читать далее

Предварительная загрузка изображений с помощью JavaScript

Уровень сложностиПростой
Время на прочтение8 мин
Охват и читатели10K

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

Читать далее

Как я сделал PWA-приложение для заметок и ссылок за вечер (и почему оно работает без интернета)

Уровень сложностиСредний
Время на прочтение3 мин
Охват и читатели6K

У каждого из нас есть «чёрная дыра», куда уходят полезные ссылки. Кто-то сохраняет их в «Избранном» браузера, кто-то пишет сам себе в Telegram, кто-то держит десяток вкладок открытыми «на потом». У меня была та же проблема. Я пробовал Notion, Evernote, Google Keep, Obsidian - всё это мощные инструменты, но для простого «сохранить ссылку и не забыть» они часто избыточны.

Так родилась идея KylikLink - минималистичного PWA-приложения для заметок и ссылок, которое работает без интернета и не требует регистрации.

Читать далее

Компилятор в голове: как я учил HTML без компьютера и интернета, вооружившись листком в клетку

Уровень сложностиСредний
Время на прочтение3 мин
Охват и читатели6.6K

Кто-то посмотрит на заглавную фотографию и увидит просто помятую бумажку с базовыми тегами. Для современного джуна, вооруженного VS Code, Emmet, Copilot и безлимитным доступом к StackOverflow, это выглядит как артефакт из каменного века.

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

Читать далее

Baseline: март 2026 или самый насыщенный выпуск

Уровень сложностиПростой
Время на прочтение20 мин
Охват и читатели8.2K

В этом выпуске 12 фич, которые стали доступы повесеместно с хорошей поддержкой. От трёх фич я в полном воссторге.

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

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

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

Узнать, что можно применять в проде

Расширение для Chrome, которое спасает от рейдов на Twitch

Уровень сложностиПростой
Время на прочтение7 мин
Охват и читатели5K

Рассказываю, как создал расширение для Chrome, которое автоматически отменяет рейды на Twitch. Разбираю архитектуру на Manifest V3, логику обнаружения модальных окон через текстовый анализ и подводные камни при работе с динамическим DOM.

Читать далее
1
23 ...