HTML *

Браузеры — это очень странный мир. Хотя WebAssembly добился успеха, в том числе и на серверах, клиент по-прежнему ощущается примерно таким же, как и десять лет назад.

Энтузиасты будут говорить вам, что доступ к нативным веб-API через WASM — это решённая задача, достаточно лишь минимального клея JS.

Но никто не задаёт вопрос, зачем нам вообще нужно получать доступ к DOM. Это лишь один из вариантов. В этой статье мне бы хотелось объяснить, почему уже настало время отправить DOM и всевозможные API на радугу, а также поделиться некоторыми идеями о том, как это сделать.

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

В перспективе отключения глобального интернета в РФ актуальным становятся разные способы сохранять информацию в офлайне для последующего потребления: архивы кинофильмов, музыки, книг, копии сайтов — своя мини-версия Архива интернета.

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

Один из вариантов — генерация локальных мини-сайтов с перекрёстными гиперссылками. В таком виде информация воспринимается очень комфортно.

Вы добавили в настройки интерфейса строчку ru‑RU и решили, что локализация завершена, пользователи довольны. Поздравляем: вы официально вступили в ряды тех, кто ещё не видел, как выглядит языковой тег «во всей своей красе».

Когда пользователь открывает страницу в браузере, тот отправляет на сервер данные о языковых предпочтениях посетителя, и это далеко не всегда что‑то простое. Здесь мы рассмотрим, как именно указывается конкретный язык. Стандарт, в соответствии которым это происходит (RFC 5646), — ворота в языковой мультивселенную, где sl‑rozaj‑biske-1994 звучит как заклинание, а x‑private‑foo может означать что угодно — от диалекта вашей бабушки до внутреннего сленга команды маркетологов.

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

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

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

За один клик из сводного дашборда — на «дочерний» с уже выставленными фильтрами. Разберём, как в Apache Superset прокидывать выбранные значения через URL-параметр native_filters в формате Rison и собирать ссылку Jinja-макросами.

Telegram Music Hub (TMH) — это open-source решение, которое превращает ваш Telegram-канал в единое цифровое пространство для музыки, блога и сообщества.
И всё это — на самом обычном виртуальном хостинге, без баз данных, без сложных зависимостей, без дорогих серверов.

👉 github.com/tcse/php-TMH

Недавно я провёл небольшой эксперимент: проверил, как разные модели от OpenAI справляются с одной и той же задачей — создать красивую симуляцию «жидкостей в стакане» с помощью HTML5 Canvas и JavaScript.

На словах всё звучит просто, но на деле это проверка и кода, и физики, и UX.

Результаты получились очень показательные, а кое-где даже удивительные. Делюсь наблюдениями и видео 👇

https://youtu.be/yvL5P03oUuk

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

Общаясь с фронтендерами, я заметил, что многие не знают новые классные возможности HTML и CSS. Мне от этого грустно. Надо это исправлять!

Я подумал и составил список, состоящий из наиболее рекомендуемых мной новых фишек. Они поддерживаются в большинстве современных браузеров. Решают старые проблемы. Упрощают разработчикам жизнь. В общем суперполезные!

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

Больше не буду тянуть. Давайте посмотрим, что я вам подготовил.

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

Если вы когда-либо работали с проектами на стеке Vite + Pug + SCSS + TypeScript, то наверняка сталкивались с хаосом в файловой структуре и рутиной, мешающей сосредоточиться на главном — решении задач бизнеса и создании удобного интерфейса для пользователя.

В этом материале мы поделимся тем, как столкнувшись с проблемой, создали решение, которое сделало процесс разработки более эффективным, а структуру проекта — интуитивно понятной. А ещё расскажем, как это решение родилось внутри команды и стало частью нашего вклада в open source.

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

За последний год HTML получил деталь, которая меняет привычные «аккордеоны». У <details> появился атрибут name, и этим всё сказано: теперь эксклюзивные аккордеоны можно сделать без строчек JavaScript, а стили и поведение дочистить через :has(). Поддержка стала широкой, а старые практики на дивчиках и ролях можно оставить для случаев, когда действительно нужна сложная логика.

В HTML у нас давно есть пара <details>/<summary>. Браузер сам рисует disclosure-виджет, умеет разворачивать содержимое, бережно обращается с фокусом и клавиатурой. Сейчас поверх этого добавился name, который превращает набор из нескольких <details> в группу, открываешь одно и закрываются остальные из той же группы. Если в группе вы отметили несколько элементов open в исходнике, браузер оставит открытым первый по порядку.

Всем привет!

Хочу поделиться историей создания проекта, над которым я работал последние несколько лет — foxBase (https://fox-base.ru).

Как часто вам приходилось переключаться между десятком приложений для управления разными аспектами вашей работы и жизни? Блокнот для заметок, Excel для финансов, Trello для задач, отдельные инструменты для хранения кода и документации... Знакомая ситуация?

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

Что это такое?

foxBase — это веб-приложение для создания универсальных баз знаний и данных. Его ключевая особенность — невероятная гибкость. Это не жёсткий конструктор, а скорее «цифровой конструктор ЛЕГО», где вы сами решаете, как структурировать информацию.

Для кого это?

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

А Claude Code, как передовой инструмент AI-программирования, не только полностью совместим с рабочими процессами Git, но и благодаря глубокой интеграции предоставляет разработчикам беспрецедентную автоматизацию и удобство.

Из этой статьи вы получите следующее:

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

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

Я начинал изучать вёрстку в 2010 году. Я не знал английский, поэтому у меня был ограниченный набор материала. Кто помнит видеоуроки Попова?

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

Я собрал несколько советов. По моей задумке, если вы обратите внимание на эти аспекты, то ваш код будет лучше.

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

GSAP – одна из самых популярных JavaScript-библиотек для создания анимаций. Её используют как новички, так и опытные front-end-разработчики. В этой статье я хочу рассмотреть несколько примеров ее применения – от самых простых до менее очевидных.

С ростом популярности в 1997 году технологий Flash и CSS возникло три философии веб-дизайна. Дэвид Сигел продвигал «хаки», Джейкоб Нильсен стремился к простоте, а Джеффри Зельдман комбинировал элегантность с удобством пользования.

Как и многие из первой волны веб-дизайнеров, Джеффри Зельдман, которому в начале 1997 года исполнилось 42 года, начинал свою карьеру в совершенно другой профессии. Изначально он был автором художественных книг, недолго поработал журналистом, пробовал себя в качестве разъездного музыканта, а потом десять лет посвятил рекламному бизнесу. «Сочинение текстов билбордов с цепляющей графикой — хорошая практика для веба, потому что в нём нужно доносить информацию мгновенно», — рассказывал он позже в интервью.

Творческих людей наподобие Зельдмана привлекло в веб развитие мультимедиа; сам он создал свой первый веб-сайт в 1995 году. «Благодаря гипертексту появился веб, благодаря графике он стал игровой площадкой для потребителей», — писал он на своём личном веб-сайте в конце 1996 года.

Не помню уже с какой версии, но весьма давно, в Visual Studio пропали типы проектов, создающие шаблон простого html/js/css сайта. Появилось много новых: в разных видах ASP.NET Core, Blazor, Vue, Angular, React etc. А вот шаблона простого классического сайта нет. Но это можно исправить.

У меня периодически возникает необходимость сделать такой сайт, и я для себя сделал шаблон проекта простого html сайта. Этим проектом и методикой его создания хочу с вами поделиться.

Я знаю, что существует 100 500 способов перекинуть картинку в готовую вёрстку.
Но когда у меня дошло до дела, результат оказался так себе.
То ли я криворукий, то ли все эти инструменты ещё далеки от совершенства.
В итоге понял, что мне проще накидать свой собственный велосипед — скрипт на Python (~200 строк).

Решил выложить, может, кому‑то пригодится.

Скрипту можно скормить три скриншота сайта:

1) Десктоп‑версия

2) Планшет

3) Мобильная версия

На выходе получим одну HTML‑адаптивную вёрстку (десктоп, планшет, мобила) с использованием Tailwind CSS.

Меня зовут Дима. Я Frontend разработчик в компании fuse8. В одном из проектов мы столкнулись с необходимостью упростить процесс верстки и тестирования HTML-писем. В итоге решили вынести шаблоны в отдельный репозиторий и собирать их с помощью MJML.

В статье разберём два ключевых этапа: сначала создадим репозиторий для верстки писем, а затем настроим локальную тестовую отправку через SMTP.

Экспорт HTML-таблиц в Excel — это распространенная задача в обработке данных, отчетности и автоматизации. Независимо от того, работаете ли вы с данными, полученными с веб-страниц, панелями управления или отчетами на основе HTML, преобразование таблиц в формат Excel может облегчить анализ данных и их обмен.

В этом блоге мы рассмотрим...