HTML *

Скролл без костылей — что уже умеет CSS

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

Но обычно проблемы начинаются с нескольких базовых свойств. Вот что полезно знать:

• Overflow — основа скроллинга. Если у контейнера ограничена высота, overflow: auto добавит прокрутку только тогда, когда контент перестанет помещаться. Через overflow-x и overflow-y можно отдельно управлять каждой осью. 

• Горизонтальный скролл удобен для карточек. Вместо уменьшения элементов или переноса на новую строку можно оставить фиксированную ширину карточек и разрешить контейнеру прокручиваться по оси X. Особенно полезно на мобильных интерфейсах. 

• Плавные переходы по якорям делаются одной строкой: scroll-behavior: smooth. Но есть нюанс с доступностью: если пользователь включил prefers-reduced-motion, плавную анимацию лучше отключить. 

• Scroll Snap может заменить простой JS-слайдер. scroll-snap-type и scroll-snap-align позволяют фиксировать карточку или секцию после прокрутки, а scroll-snap-stop: always — не перескакивать через элементы при быстром свайпе. 

• Фиксированный header не должен перекрывать якорь. Вместо дополнительных скриптов можно задать scroll-padding-top для страницы или scroll-margin-top для отдельных секций. 

• Вложенный скролл тоже можно контролировать. Если внутри страницы есть модальное окно или боковая панель, overscroll-behavior: contain не даст прокрутке после конца блока автоматически перейти на родительскую страницу. 

Есть и менее очевидные детали. Например, scrollbar-gutter: stable помогает избавиться от горизонтального «прыжка» страницы при появлении полосы прокрутки, а кастомный scrollbar лучше не делать слишком узким или малоконтрастным — это уже влияет на доступность интерфейса.

JavaScript понадобится уже там, где скроллинг запускает дополнительную логику: Infinite Scroll с подгрузкой данных, синхронизацию нескольких областей, аналитику или сложные интерактивные сценарии. А вертикальный и горизонтальный скролл, Scroll Snap, плавные якоря и управление вложенной прокруткой вполне можно оставить браузеру. 

Если хотите посмотреть готовые HTML/CSS-примеры и разобрать типичные ошибки, читайте полное руководство в блоге Рег.облака.

Статический сайт для блогов, создания статей из RSS-каналов

Сайт egaxegax.github.io можно запустить и использовать локально:

• Выгрузить файлы из репозитория

• Запустить веб-сервер HTTP/1.1 с поддержкой Requested Ranges из корневого каталога сайта

    python3 -m http.server 88 (если HTTP/1.1 поддерживается версией Python)
    python3 srv.py 88 (доработанный веб-сервер с HTTP/1.1)
  

  и набрать в браузере localhost:88

Добавить пост в раздел /posts:

• Создать файл с расширением .md с текстовым содержимым, html-, markdown-разметкой в папке с названием подтемы в папке с названием темы или создать новые.

• Первой строкой добавить html-комментарий в формате с датой создания файла, затем добавить текст поста. Комментарий с датой используется для сортировки страниц в индексном файле раздела index.js.

• Перейти в каталог раздела и обновить индексный файл, выполнив скрипт:

    python3 ../update.py
  

Добавление постов в раздел /posts через RSS-каналы:

• Перейти в каталог раздела и запустить скрипт чтения RSS-канала:

    python3 readrss.py <RSSlist-id> (ключ источника из списка RSSlist в скрипте)
    python3 readsites.py <RSSlist-id> (ключ источника из RSSlist)
    python3 readrufeed.py (обновления каналов из Рутуб из списка RSSlist)
    python3 readyfeed.py (обновления каналов из Ютуб из списка RSSlist)
  

Добавить текст в раздел /songs:

• Создать текстовый файл .txt с названием песни с аккордами в markdown-разметке или без в папке с названием музыкального жанра и подпапке с именем исполнителя. Он будет переименован в .md скриптом update.py.

• Первой строкой добавить html-комментарий в формате с датой создания файла.

• Создать файл about.md с информацией о группе, исполнителе и картинку <Исполнитель.jpg>. После индексации появится описание группы и кавер-картинка при просмотре списка песен исполнителя.

• Перейти в каталог раздела и обновить индексный файл, выполнив скрипт:

    python3 ../update.py
  

Добавить описание книг в /books:

• Из папки books запустить скрипт

    python books2fb2.py <fb2_dir> [<out_dir>]
  

• Обновить страницу в браузере.

Добавить картинку в раздел /foto:

• Выгрузить файлы из репозитория в папку foto.

• Добавить картинку с расширением .jpg в папку с темой.

• Обновить индекс и превью (в каталоге th) командой из папки foto

    python3 ../update.py
  

• Обновить страницу в браузере.

Редактировать/удалить пост

• Распаковать упакованный файл README.md в .md файлы командой:

    python3 updatelist.py <раздел/папка_темы>
  

• Удалить или отредактировать пост и упаковать архив README.md обратно:

    python3 update.py <раздел>
  

Ссылки:

Основной обновляемый сайт: egax.ru
Сайт репозитория github.com: egaxegax.github.io
Сайт репозитория gitverse.ru: egaxegax.gitverse.site

Представлен открытый ИИ‑инструмент для создания диаграмм Diagram Design. Решение не требует ни этапа сборки, ни JavaScript, ни внешних изображений. В проекте есть 39 типов схем для Claude Code, Codex, Factory Droid, Pi и других платформ, поддерживающих Agent Skills. Автономный код HTML + SVG.

«Никаких теней. Никакой неряшливости, свойственной Mermaid. Семантические паттерны описывают поведение отдельно от компоновки, поэтому такие элементы, как очередь, трассировка политик или граница доверия, могут использовать ближайший существующий тип без необходимости создавать новые. Статичный HTML используется по умолчанию; для последовательных пояснений доступна опциональная анимация. Инструмент также позволяет перерисовывать схемы из форматов draw.io, Mermaid или Excalidraw, задавая нужный формат, размер и уровень детализации. Никакой Figma. Никаких стандартных блоков со скруглёнными углами. Никаких 30-минутных сеансов подбора цветов», — пояснил автор решения.

LiveStreet Yii 3 для вебмастеров: полное описание CMS Практический разбор бесплатной CMS для сообществ и блогов: что умеет ядро, как поставить на обычный хостинг, чем отличается от классического LiveStreet и что учесть перед запуском в прод.

Что это за продукт LiveStreet Yii 3 (также: Livestreet Yii3) — бесплатная CMS для коллективных блогов и онлайн-сообществ. По смыслу это наследник идеи классического LiveStreet: лента топиков, личные и коллективные блоги, комментарии, рейтинг, закрытые разделы, профили, личные сообщения. По коду — новый продукт с нуля на PHP 8.2+ и Yii 3, без движка старого LiveStreet внутри.

Рассчитан на вебмастера shared hosting: SQLite по умолчанию, file cache и sessions, ZIP-деплой без обязательного Composer на сервере, document root в каталоге public/, веб-установщик /install (после установки отдаёт 404).

Лицензия — GPL-2.0-or-later. Обязательное условие использования: на публичном сайте с этим продуктом должна быть как минимум одна рабочая гиперссылка на сайт разработчика https://poluyanov.ru (в подвале по умолчанию название CMS уже ведёт туда).

Кому подходит Вебмастеры на обычном хостинге — нужен живой движок сообщества без обязательного VPS, Docker и отдельного поискового кластера. Владельцы старых LiveStreet 1.0.3 / 2.0 — хотят уйти с уязвимого стека, сохранив пользователей и контент через CLI-миграцию. Команды и агентства — нужен предсказуемый стек PSR-4 / Composer / Yii 3, REST API и админка без «базовых функций за деньги». Редакции и сообщества — блоги, рейтинг, закрытые разделы, жалобы, SEO и уведомления из коробки. Если нужен только одностраничный блог без пользователей и рейтинга — проще взять статику или WordPress. LiveStreet Yii 3 имеет смысл там, где есть сообщество: авторы, комментарии, кармы, модерация, закрытые блоги.

Автор: Полуянов Сергей Сайт разработчика: https://poluyanov.ru Страница продукта: https://poluyanov.ru/application/livestreet-yii3/ Версия на момент статьи: 1.2.0

У коллег увидел интересный HTML трюк для значений в SELECT, который раньше не встречал.

Задача: сделать мульти-селект. Значения, которые влезут на текущем экране отображаем, а остальные указываем цифрой.

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

Решение коллег:

• Выводим сразу штук 10 значений;

• Каждому значению сразу пишем цифру, сколько элементов осталось после него;

• Делаем всем отрицательный margin-left, чтобы они своим контейнером перекрыли цифру прошлого значения.

Никаких вычислений и перерасчетов при масштабировании и изменении размера экрана.

Открытый скилл Lieflat Charts для ИИ‑агентов позволяет превращать данные в анимированный визуал и красивые диаграммы. Получаются готовые HTML‑диаграммы без визуального шума и с хорошим оформлением. Из коробки работает с Claude Code, Codex и всеми популярными агентами:

• включает три основных семейства диаграмм, Lupi Editorial, Lupi Basics и Glance под все задачи.

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

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

BITCORD - лёгкий Android-мессенджер с собственной криптоэкономикой и мини-приложениями.

Несколько месяцев разрабатываю собственный мессенджер под рабочим названием BITCORD. Ссылка на статью с полным описанием.

Что такое BITCORD (если лень читать статью):

• Нативный Android-клиент весом 3.5 МБ.

• Backend на .NET Core 8, endpoint за Cloudflare Tunnel.

• Вход через Google-аккаунт (без номера телефона, СМС, QR-кода).

• Сеть открытая: любой может зайти и создавать каналы без жёсткой модерации и без ограничений по тематике.

• Исходники закрыты.

Внутри уже есть:

• каналы с поддержкой фото и видео

• чаты (сквозное шифрование);

• видеозвонки WebRTC:

• пользовательские боты;

• базовая поддержка крипто-транзакций (сеть Arbitrum);

• возможность встраивать лёгкие веб-приложения (мини-игры и утилиты).

Цель - сделать мессенджер, в котором можно не только общаться, но и запускать небольшие приложения прямо внутри клиента, без установки дополнительных APK. Конкурентное преимущество - размер приложения всего 3.5 Mb при достойном функционале.

Предложение для разработчиков мини-приложений

Ищу авторов лёгких браузерных игр и утилит, которые готовы разместить свои проекты внутри BITCORD.

Что вы получаете:

• Готовую аудиторию пользователей мессенджера.

• Возможность монетизации через внутреннюю валюту.

• Простую интеграцию: ваше приложение хостится на моём сервере.

Технические требования к мини-приложению

1. Формат

   • Архив .zip с готовым фронтендом.

   • В корне обязателен index.html (php).

   • Все пути относительные.

   • Размер несжатых файлов — до 5 МБ.

2. Стек

   • HTML5 + CSS3 + JS (ES6+).

   • Допустимы лёгкие фреймворки (Phaser, Three.js и т.п.).

   • Никаких внешних WebSocket/API для критической логики. Всё должно работать offline внутри WebView.

   • Прогресс можно сохранять через локальный SQLite (ваша база данных).

3. Финансы и безопасность

   • В коде игры запрещены приватные ключи, прямые вызовы смарт-контрактов и работа с кошельками.

   • Все начисления/списания токенов — только через централизованный API мессенджера.

4. UI/UX

   • Адаптив под вертикальную ориентацию смартфонов.

   • Управление только тач-скрином.

   • Обязательна кнопка отключения звука.

Если интересно - пишите в мессенджер на @administrator. Готов обсудить условия.

Спасибо за внимание. Буду рад конструктивной критике и вопросам по теме.

Ссылка на скачивание

Официальная страница мессенджера

Представлен открытый редактор презентаций Bento на замену PowerPoint. Презентация в Bento хранит внутри себя слайды, шрифты, картинки, анимации и весь редактор. Базовый файл весит около 560 КБ, открывается в браузере без установки и аккаунта, умеет сам себя сохранять, работает офлайн и даже поддерживает совместное редактирование с шифрованием.

Внутри Bento обычный JSON — поэтому презентацию могут напрямую редактировать ИИ-агенты. Есть графики, комментарии, режим докладчика, PDF-экспорт и анимации между слайдами.

Хай, коллеги!

Около полутора месяцев назад, работая над задачей дообучения локальной модели ИИ, я наткнулся на Modern Web Guidance - сборник руководств (skills - навыков) по современной веб-разработке для агентов ИИ от команды Google Chrome. Ознакомившись со сборником, я понял, что большинство руководств человекам тоже не помешали бы😄 Так появился этот репозиторий. Основная работа над руководствами завершена. Любые исправления, замечания и предложения приветствуются. Пользуйтесь на здоровье и счастливого кодинга!

Вышла бесплатная книга к самому популярному русскоязычному курсу по Markdown.

Всем привет :)

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

Бесплатный курс на Stepik:
https://stepik.org/a/187888

Почему появилась книга

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

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

Что представляет собой книга

Книга полностью соответствует программе курса и постоянно развивается вместе с ним.

Её можно использовать как:

• учебное пособие при прохождении курса;

• удобный справочник по синтаксису Markdown;

• конспект для повторения материала;

• офлайн-версию курса в формате PDF или ePub.

Исходные материалы книги находятся в открытом репозитории GitHub, поэтому все изменения публикуются открыто, а актуальную версию всегда можно скачать бесплатно.

Для кого предназначены курс и книга

Материалы будут полезны:

• начинающим разработчикам;

• техническим писателям;

• студентам IT-направлений;

• авторам документации;

• пользователям GitHub;

• всем, кто работает с README-файлами, документацией, блогами и заметками.

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

Всё распространяется бесплатно

Курс на Stepik

https://stepik.org/a/187888

Репозиторий книги на GitHub

https://github.com/Awilum/markdown

Книга доступна бесплатно в форматах PDF и ePub, а также в виде исходных материалов на GitHub.

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

Проект с открытым исходным кодом

Если книга окажется полезной, буду благодарен за поддержку проекта.

Можно:

• ⭐ поставить Star репозиторию на GitHub;

• 👀 нажать Watch, чтобы получать уведомления о новых версиях;

• отправить Pull Request, если заметите опечатку, неточность или захотите улучшить материалы.

Любой вклад помогает сделать книгу лучше.

Надеюсь, что книга станет полезным дополнением к курсу и поможет сделать изучение Markdown ещё проще, удобнее и приятнее.

Хай, коллеги!

Около месяца назад, работая над задачей дообучения локальной модели ИИ, я наткнулся на Modern Web Guidance - сборник руководств (skills - навыков) по современной веб-разработке для агентов ИИ от команды Google Chrome. Ознакомившись со сборником, я понял, что большинство руководств человекам тоже не помешали бы😄 Так появился этот репозиторий. Большая часть руководств, выбранных мной для перевода и адаптации, уже готова. Любые исправления, замечания и предложения приветствуются. Пользуйтесь на здоровье и счастливого кодинга!

Представлен открытый проект HTML skills for pragmatic visual artifacts для генерации HTML‑файлов за один клик, включая диаграммы, презентации, резюме, отчёты, планы и прочее:

• html — создает любые HTML‑страницы исходя из задачи: от лендингов до портфолио;

• html‑diagram — создает схемы, планы и диаграммы с фокусом на SVG;

• html‑plan — выкатит вам дорожные карты, планы, стратегии, расписания и многое другое.

Кто такой UX/UI разработчик на практике?

Чем он занимается в реальной приземленной разработке?

P.S. делаю программу для завода и глазам больно от интерфейса

Всем привет! Я хочу представить вам сайт по типу фигмы только бесплатный и с множеством фич которых нет в фигме или они платные

Давайте же разберем наш Designer(название сайта)!

1. шаблоны они конечно есть и в фигме но у нас есть и заданные шаблоны

2. Презентация, помимо статических баннеров вы можете создать и презентацию

3. Анимации:в сайте присутствуют инструменты для анимаций с разными скоростями эффектами

4. Экспорт: вы можете экспортировать в пнг веб сайт итд также можете и загрузить html/css код и посмотреть как он будет выглядеть

5. Все абсолютно бесплатно

На этом все мне всего лишь 15 лет надеюсь вы поддержите мой проект и перейдете в него если хотите расскажите о нем друзьям вот ссылка на сайт:https://designerweb.base44.app/

И наш тик ток:designer web

Спасибо за внимание ,также приложил скриншот

Представлен открытый проект keynot — это навык для Claude Code, который превращает любой запрос в отработанную ИИ, самодостаточную HTML‑презентацию — навигация с помощью клавиатуры, свайп, полноэкранный режим, анимированные эффекты, дизайн, соответствующий фирменному стилю (онлайн‑пример навыка).

«Один файл. Открывается где угодно. Не имеет зависимостей во время выполнения. Создано для тех моментов, когда вам нужно что‑то представить, а вы не хотите открывать PowerPoint. Прочитайте описание: Перестаньте тянуться к PowerPoint», — пояснил автор решения.

Кто-то просит вас «подготовить несколько слайдов», и ваша рука автоматически, по мышечной памяти, тянется к значку PowerPoint. Затем следуют двадцать минут борьбы с шаблоном, который вы не выбирали, попытки сдвинуть текстовое поле на три пикселя влево и обнаружение того, что фирменные цвета вашего бренда не соответствуют теме. Ничто из этого не является презентацией. Ничто из этого не является идеей. Это налог, который вы платите за использование инструмента, созданного в 1987 году.

Всем хабровчанам удачной недели!

Хотел поинтересоваться такой темой как школа «Result/University». Кто обучался, как быстро удалось найти работу? Какова оценка по 5 шкале?

Смогут ли ребята ввести в данную тему с минимальными рисками?

Делаем работу фронтенд-приложений прозрачнее

С новым релизом для детального анализа запросов в App Platform.

Логи доступа (access logs) — это записи о каждом запросе к приложению. В логах вы найдете: IP-адрес клиента, дату и время запроса, запрашиваемый ресурс (HTML, CSS, JS, изображения), статус ответа, размер данных при передаче и др.

Например, вы настроили лимит по количеству запросов → приложение достигло порога и временно заблокировалось → скачали логи → нашли источник перегрузки.

Подробнее о функциях:

1️⃣ Аналитика трафика

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

2️⃣ Безопасность

Логи помогают заметить подозрительные паттерны, например, массовые запросы к одному эндпоинту или сканирование URL.

3️⃣ Поиск ошибок

Если в проекте возникли сбои или простой, вы можете проверить коды ответов и быстро найти источник 404 или 500.

Важно: Логи хранятся 24 часа + для выгрузки доступно до 10 000 файлов.

Начать мониторинг своих логов →

Игра на джем "Rush lvl 8"

Ребята всем привет, опубликовал на джем игру простую, но довольно интересную.

Мне посоветовали её на гитхаб pages выложить, что я и сделал.

Если хотите - зацените геймплей и если хотите непосредственно попробовать то вот ссылка

https://prikalel.github.io/they-grow/

Если хотите поддержать то оставьте комментарий под постом или зайдите на страницу джема и поставьте лайк мне будет очень приятно)

Lex Kravetski в ФБ написал оду Микрософт Ворду, с которым у меня плохие отношения еще с конца 1980-х, когда он был под DOS-ом в графическом режиме. Причем тогда Ворд был еще более-менее, хотя бОльшая часть его функциональности лично мне не была нужна, для форматированных текстов хватало Лексикона от Eugene Veselov из ВЦ Академии Наук, затем уехавшим в Микрософт и ныне ставшим очень политизированным.

Главные проблемы с Вордом для меня начались после 2000 года, когда у него стало прыгать форматирование невпопад, особенно в текстах с комбинацией списков, таблиц и картинок. Lex такую проблему упоминает с позиции своих оппонентов: "блин, даже пробел в нём как-то странно работает, по коей причине даже простое форматирование сделать тяжело."

Из-за этого прыгания я сейчас для редактирования форматированных текстов как правило использую простой текстовый редактор joe (который имитирует редактор в TurboC 1988 года, но с квадратными блоками), а в нем - .md Markdown, который потом конвертирую в .pdf с помощью программы pandoc.

Также использую Google Doc, в нем форматирование не прыгает, как в Microsoft Word и в Libre Office, а сделано по человечески.

Раньше еще писал в текстовом редакторе на HTML, но Markdown удобнее, так как читабильнее в голом виде. Если вы еще не выучили Markdown и мучаетесь Вордом - просто нагуглите его в википедии, он учится за 15 минут.

Массовая замена HTML-разметки в Sublime Text с помощью RegExp

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

В моём случае это были заглушки вида:

<p>Image 1</p>
<p>Image 2</p>
<p>Image 3</p>

Нужно было превратить их в теги изображений, сохранив номера файлов изображений.

Почему не руками

Ручная правка подходит только для пары строк. Когда элементов больше 10–20, возрастает риск:

• ошибиться в номере изображения

• забыть закрыть тег

• нарушить единообразие разметки

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

Решение через Sublime Text и RegExp

В Sublime Text есть мощный поиск и замена с поддержкой регулярных выражений. Этого более чем достаточно для задачи.

Открываем HTML-файл и вызываем панель замены:

• Ctrl + H (Windows / Linux)

• Cmd + Alt + F (macOS)

Обязательно включаем режим Regular Expression (иконка .*).

Шаблон поиска

<p>Image (\d+)</p>

Разберём выражение:

• <p>Image — фиксированная часть

• (\d+) — группа захвата, которая находит любое число

• </p> — закрывающий тег

Число внутри скобок сохраняется как первая группа.

Шаблон замены

<img src="images/\1.jpg">

Здесь \1 — ссылка на первую группу захвата из шаблона поиска. На её место подставляется найденное число.

В результате:

• Image 1 → images/1.jpg

• Image 12 → images/12.jpg

Проверка и замена

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

После этого можно смело использовать Replace All — Sublime Text заменит все подходящие строки за один шаг.

Подводные камни

Несколько моментов, о которых легко забыть:

• если не включить RegExp, \1 подставлен не будет

• в Sublime используется именно \1, а не $1

• шаблон чувствителен к пробелам и регистру

Альтернативы

Для подобных задач подойдут и другие инструменты:

• sed в терминале

• массовая генерация HTML через bash-циклы

• аналогичная замена в VS Code

Но если файл уже открыт в Sublime Text, RegExp — самый быстрый вариант.

Вывод

Регулярные выражения в Sublime Text позволяют эффективно автоматизировать рутинные правки HTML без дополнительных скриптов и плагинов. Даже простые приёмы вроде групп захвата экономят время и снижают количество ошибок.

Дополнительно

Более подробная пошаговая инструкция с ориентацией на новичков опубликована в моём блоге:

https://kodprog.ru/kak-bystro-zamenit-tekst-na-tegi-img-v-sublime-text