Обновить
128K+

HTML *

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

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

Baseline: апрель 2026

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

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

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

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

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

Новости

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

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

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

Читать далее

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

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

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

Привет. Я фронтенд-разработчик. По мнению тех, кто, по мнению некоторых, перекладывает джейсончики туда-сюда, я крашу кнопочки. Но сам я себя идентифицирую иначе: я тоже перекладываю джейсончики, и у меня всё точно так же, как у них. Даже архитектура. У меня тоже есть контроллеры, сервисы и хранилища, и я также обрабатываю запросы пользователей. Даже больше, я делаю 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 мин
Охват и читатели5.8K

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

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

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

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

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

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

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

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

Читать далее

Сегодня мы построим свою локальную модель на смартфоне. С блэкджеком и WebUI

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

Недавно Apple подтвердила стратегическое партнерство с Google для интеграции ИИ Gemini в свои устройства.  Сегодня мы их опередим и поднимем свою LLM в Android-смартфоне. С блэкджеком и WebUI.

Читать далее

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

От утилитарного Telegram-бота до полноценной PWA-панели управления VPS: эволюция проекта (v1.13.0 — v1.21.1)

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

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

В своих предыдущих статьях (раз, два, три) я рассказывал о зарождении идеи и первых шагах разработки Telegram-бота для управления серверами. То, что начиналось как простенький Python-скрипт для проверки uptime и перезагрузки парочки личных VPS, за последние месяцы обросло «мясом» и превратилось во взрослую экосистему с паттерном Agent-Server, своим WebUI, WAF и PWA.

Сегодня я хочу поделиться опытом, который я получил в процессе масштабного рефакторинга (от версии 1.13.0 до актуальной 1.21.x), рассказать о граблях, на которые я наступил при работе с памятью и сетью, и сравнить свой продукт с тем, что уже есть на рынке.

Сразу оговорюсь: хоть я и числюсь единственным разработчиком, проект создается не в вакууме. Во-первых, для ускорения развития продукта я активно использую инструменты ИИ. Сейчас это модно называть «вайбкодингом» (vibe-coding), но в моем случае это осознанный вайбкодинг. Я не перекладываю на нейросети проект целиком, а использую их для автоматизации рутины, сохраняя при этом полное понимание каждой строчки кода, его структуры и заложенной архитектуры. Во-вторых, у меня есть боевой товарищ — друг-тестировщик, который использует панель для своих повседневных задач, нещадно ломает новые фичи на проде, репортит баги и вносит огромный вклад в развитие. Именно благодаря такой живой обкатке инструмент получается действительно юзабельным. И, забегая вперед, вы тоже можете присоединиться к этому процессу!

Читать далее

Ты не можешь построить жизнеспособную дизайн-систему на Tailwind — Часть 1

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

Tailwind отлично работает для быстрого прототипирования, но становится проблемой когда проект растёт. Разбираю три подхода к построению дизайн-системы на Tailwind — CVA, CSS-переменные и @utility — и объясняю почему каждый из них не решает проблему комбинаторного взрыва вариантов.

Читать далее

Как собрать дашборд для анализа алготрейдинга без программирования: кейс на HTML + LLM

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

400 000 строк в файле Excel, а пропущенный день это дырка в истории и отчёты, которые тормозят даже на мощном ПК — именно с этим столкнулся алготрейдер Дмитрий Овчинников. Но он смог при помощи ИИ ассистента создать дашборд, который упрощает управлением его 100+ стратегиями в алготрейдинге. И это, по его словам, как пересесть с запорожца на вертолёт.

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

Проблемы алготрейдера

Как мы подружили фронтенд с четырьмя платформами и сократили время разработки в два раза

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

Если у вас одна платформа, фронтенд работает стабильно и предсказуемо. Но стоит добавить десктоп, мобильное приложение, PWA — и простая логика превращается в гору if-ов.

Меня зовут Денис Кондратьев, я фронтенд-разработчик Точка Банк. В статье расскажу, как мы интегрировали наш мессенджер на четыре разные платформы (браузер, Electron, Capacitor, PWA) и сократили время адаптации новых фич в три раза.

Читать далее

FocusMind: Возвращение. Как я переосмыслил «легкий Notion» и свои ошибки

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

Всем привет! Около года назад я публиковал здесь свои первые шаги в разработке — прототип редактора заметок. Тогда я получил много фидбека: и позитивного (+7 кармы), и критического. Признаю, второй мой пост был излишне эмоциональным и малоинформативным. Я сделал выводы, подтянул навыки и готов показать, во что вырос мой проект FocusMind.

В чем идея? Я по-прежнему считаю, что современные инструменты вроде Notion перегружены. Моя цель — создать максимально быстрый инструмент для тех, кто ценит фокус. Что уже реализовано в новом прототипе:

Космическо-лунный дизайн: Тёмная тема, которая не давит на глаза при долгой работе.

Скорость: Никаких тяжелых фреймворков, тормозящих загрузку. Приложение стартует мгновенно.

Локальность: База данных на JSON-сервере. Ваши мысли принадлежат вам и доступны даже без интернета (Offline-first).

Адаптивность: Я полностью переработал навигацию. На десктопе — удобное боковое меню, на мобильных и планшетах — отзывчивый «бургер».

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

Что дальше? Мой план — за 5 месяцев довести FocusMind до идеального MVP. Впереди переход на IndexedDB для работы с огромными массивами данных и внедрение PWA.Буду рад, если вы заглянете в обновленный прототип FocusMind и дадите технический совет. Особенно интересует ваше мнение по реализации синхронизации локальных данных.

Читать далее

Что всё таки не так с веб компонентами

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

Господа, продолжаем разбиратся в тонкостях веб компонент. Сделал тут бенч - сравнениe фреймворков ( $mol/lit/symbiot ) по todomcv. Вроде говорим об одном, а бенч о другом, разве не так ? Ан-нет, что бы разобраться с веб компонентами нужны фреймворки которые ставят их во главу угла, те, кто "сделал на них ставку".

Вот что мне удалось понять:

Первое. Память: 124 байта на веб-компонент, и 16 байт на JS object. Разница на порядок, это много, и без виртуализации интерфейс скорее всего будет лагать

Что не так то опять ?)

Что не так с веб-компонентами?

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

Если кратко - да все с ними ТАК. Это замечательный набор современных браузерных технологий, для решения реальных задач веб-разработки. Веб-компоненты позволяют делать очень многое, более просто и элегантно, чем это было бы без них. А главное, они позволяют, с потрясающей гибкостью, решать задачи “со звездочкой” - те, которые немного выходят за рамки и требуют более творческого подхода от разработчика.

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

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