#рекомендация дня

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

Есть ребята из компании 53xapps, занимаются созданием сайтов и автоматизацией бизнеса. Ну и вот они решили запилить свой собственный курс по Frontend разработке.

Конкретно: введение в алгоритмы, HTML/CSS, JavaScript и Vue.js.

Разработка курса заняла около полугода. Большое количество видео и практики.

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

Курс довольно плотный, тестовые студенты проходили его по 15-20 часов в неделю 4 месяца, но сейчас есть возможность проходить курс в спокойном собственном темпе. Все для вас 🙂

Освоите JavaScript, HTML/CSS, Vue.js. Познакомитесь с несколькими популярными библиотеками. Для старта во фронте вполне достаточно.

Есть несколько бесплатных уроков, можно попробовать и пощупать.

Итак, цена. 5000 рублей. А подписчикам канала промокод HTMLSHIT даст 1000 рублей скидки.

Программа курса и бесплатные уроки доступны по ссылке.

#frontend #HTML #CSS #JavaScript

#день_рождения дня

Сегодня День рождения не только лишь у меня, но и у HTML тегов!

29 октября 1991 года Тим Бернерс-Ли выкатил документ с названием HTML Tags.

И состоял он из описания 18 первых тегов: <title>, <nextid>, <a>, <isindex>, <plaintext>, <listing>, <p>, <h1>…<h6>, <address>, <hp1>, <hp2>…, <dl>, <dt>, <dd>, <ul>, <li>,<menu> и <dir>.

Архивная версия: https://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html

С Днём рождения, HTML! Ну и я :)

#html

#ссылка дня

Сегодня день такой, про SVG-фильтры.

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

Ну, вниманием они обделены не только со стороны сообщества веб-разработчиков, но и немного со стороны разработчиков браузеров. У WebGL и WebGPU перспективы шире.

Но это не означает, что у SVG-фильтров нет козырей в рукаве! Один из самых важных — их можно применить прямо на HTML-элемент и он как работал, так и будет работать!

Естественно, этим пользуется не только Ана Тюдор (кстати, не пользуется, она не работает как разработчик, только как художник в этом смысле и консультант).

Глядите, какая демка: https://svg-shaders.vercel.app/
И её код: https://github.com/shuding/svg-shaders

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

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

Кстати, прикольный и уместный вариант использования SVG-фильтров на контенте мы с вами уже наблюдали на примере... PornHub: https://xn--r1a.website/htmlshit/1416

#svg #filters #html #shaders

#такое дня

Очень неожиданная информация всплыла в комментариях к одному из предыдущих постов.

Теперь в Chrome дефолтные стили для тегов b и strong не bold, а... bolder!

Пруф: https://github.com/chromium/chromium/commit/0f34660cbc02352d5deabbf135c4b07303979df5

Судя по дате изменения, это как раз улетело в последнюю (135) версию Chromium и Chrome, соответственно.

Казалось бы, какое мелкое изменение, но уже принесло людям проблем :) А главное, посмотрите сколько тестов!

Да-да, тестов там сильно больше, чем в твоём PR, который меняет вообще всё в проекте.

Ладно, а что кроется-то за этим изменением?

А кроется имплементация последних изменений в спеке: https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3

Ведь задача strong и b — выделить текст во что бы то ни стало. А если он уже полужирный? То-то и оно.

Или ещё хуже, глядите, на span стоит font-weight: 100: https://codepen.io/alinaki/pen/XJJrEPo

Видите отличия? Я — нет.

Ладно, кроме шуток, объяснение на MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#meaning_of_relative_weights

Если 700 на родителе — то 800 на strong/b и так далее.

Чудны дела твои, HTML. Упёрлось же кому-то...

Да, кстати, ещё существует lighter :)

P. S. Safari всё ещё использует bold, а Firefox — тоже bolder. Но когда конкретно Firefox внёс это изменение я пока не знаю.

P. P. S. normalize.css тоже всё приводит к bolder.

#html #bolder #bold

#фишка дня

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

Буквально — используя параметры строки запроса (query string parameters).

Ну то есть что-то вроде https://buy.that?title=Product&action=buy&config=2&amount=3, классические GET-параметры, но управляемые с фронта.

А вот как позволить клиенту обновить страницу, сохранив эти параметры? Желательно, без лишней работы и без использования JS вообще.

А очень просто!

<a href="">Reload</a>

Да, вот так просто! Самое классное, что абсолютно валидно и есть в спеках: https://stackoverflow.com/questions/5637969/is-an-empty-href-valid/43340108#43340108

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

Не пишите лишнего, котаны!

#http #html #trick #бородач

#день_рождения дня

Сегодня День рождения не только лишь у меня, но и у HTML тегов!

29 октября 1991 года Тим Бернерс-Ли выкатил документ с названием HTML Tags.

И состоял он из описания 18 первых тегов: <title>, <nextid>, <a>, <isindex>, <plaintext>, <listing>, <p>, <h1>…<h6>, <address>, <hp1>, <hp2>…, <dl>, <dt>, <dd>, <ul>, <li>,<menu> и <dir>.

Архивная версия: https://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html

С Днём рождения, HTML! Ну и я :)

#html #бородач

#инструмент дня

Ты тоже верстать умеешь лучше, чем рисовать? Say no more!

Библиотека Satori от небезызвестной компании Vercel умеет конвертировать почти любой HTML-макет в SVG: https://github.com/vercel/satori

Зачем это надо?

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

Короче, крутая штука же.

#svg #html #бородач

#новость дня

Если нужно превратить HTML в картинку, приходится пользоваться утилитами разной степени кривизны — ведь нужно имитировать DOM. Cтабильного решения не было вообще (наверное, только Playwright и скриншот).

Теперь начинает появляться что-то вменяемое.

WICG выкатили идею под названием HTML-in-Canvas: холст учат рисовать обычные HTML-элементы: https://github.com/WICG/html-in-canvas

Прямо так, как браузер их и так рисует в DOM — со стилями, размерами, текстом, вложенностями. Только вместо того, чтобы показывать их на странице, он превращает элемент в картинку внутри <canvas>.

На самом деле, выглядит весьма проклято, вот пример с иллюстрации:

<canvas id="canvas" width="638" height="318" layoutsubtree="true">
  <div id="drawElement" style="width: 550px;">
    Hello from <a href="https://github.com/WICG/html-in-canvas">html-in-canvas</a>!
    <br>I'm multi-line, <b>formatted</b>,
    rotated text with emoji (&#128512;), RTL text
    <span dir=rtl>من فارسی صحبت میکنم</span>,
    vertical text,
    <p style="writing-mode: vertical-rl;">
      这是垂直文本
    </p>
    an inline image (<img width="150" src="wolf.jpg">), and
    <svg width="50" height="50">
      <circle cx="25" cy="25" r="20" fill="green" />
      <text x="25" y="30" font-size="15" text-anchor="middle" fill="#fff">
        SVG
      </text>
    </svg>!
  </div>
</canvas>

Почему нельзя просто API для DOM? Потому что там целая плеяда сесурити-специалистов выступает против.

Работает это пока только в Chrome Canary от 138 и выше, и включать надо отдельный флаг. Плюс есть ограничения: рендерятся только те элементы, которые лежат внутри самого канваса, и некоторые штуки браузер сознательно блокирует — типа чужих iframe или странных SVG. Но в целом — оно работает.

Флаг, кстати, такой: --enable-blink-features=CanvasDrawElement.

И выглядит это как первый нормальный шаг к тому, чтобы больше не страдать с ручной отрисовкой текста и HTML внутри канваса. Если всё доедет до обычных браузеров, можно будет наконец-то спокойно выдохнуть.

#html #canvas

#статья дня

Ну что же, пора просыпаться от зимней спячки, котаны! Салаты съедены, сериалы отсмотрены. Плавно готовимся к неизбежному.

В моей предыдущей компании были очень популярны турниры по настольному футболу, aka foosball. Не до драк, конечно, но со своим лором, правилами и даже традициями. Например, проигравший увековечивал своё имя под столом.

Так вот, к чему это я.

Помню, мы использовали какой-то сервис для составления турнирных таблиц. Я какое-то время даже планировал его склонировать, но руки не дошли. А тут наткнулся на интересную реализацию деревьев диаграмм. Ну или блок-схем, если хотите. Как раз похожих на турнирные таблицы.

Как вам такое: отрисовка дерева с помощью... списков!

Вот, глядите: https://codepen.io/alinaki/pen/ZYOOWOL

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

Начало тут: https://fractaledmind.com/2018/03/05/css-tree/

Ну что, будем таки писать такой сервис? Или максимально гибкая отрисовка на холсте наше всё?

#css #html #tree #list

#статья дня

Если вы не читали адвент-календарь HTMHell, то могли и пропустить интересности!

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

Штука гениальная: как только браузер встречает <plaintext>, он прекращает разбор HTML. Всё, что идёт дальше, воспринимается как обычный текст, независимо от того, что там написано.

<body>
  <h1>Заголовок</h1>
  <plaintext>
  <div>Этот div не станет элементом</div>
  <script>alert('xss')</script>
</body>

В браузере и <div>, и <script> будут выведены как текст. DOM на этом месте обрывается, ошибок в консоли нет, с точки зрения браузера всё произошло корректно.

Существенная часть статьи посвящена тому, как <plaintext> ведёт себя при санитайзинге HTML. Разные санитайзеры обрабатывают его по-разному: кто-то удаляет, кто-то экранирует, кто-то оставляет в форме, которая всё равно влияет на парсинг. В результате один и тот же входной HTML после «очистки» может либо работать нормально, либо полностью ломать страницу.

Например, обнулить CSP.

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

#html #sanitize

#статья дня

Команда Chrome предложила довольно необычное API для частичного обновления HTML. В разметке можно оставить специальный маркер:

<div>
  <?marker name="placeholder">
</div>

Браузер игнорирует <?marker>, поэтому такой код уже сейчас работает как обычный HTML.

Позже, когда данные будут готовы, достаточно добавить:

<template for="placeholder">
  Here is some <em>HTML content</em>!
</template>

После этого содержимое шаблона автоматически займёт место маркера.

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

Несколько лет назад стриминг HTML ассоциировался почти только с React. Штош.

Самое приятное, что <?marker> — не какой-то новый синтаксис. Processing instructions существуют ещё со времён XML, а браузеры уже умеют спокойно пропускать их в HTML. Поэтому использовать такую разметку можно хоть сегодня. Для старых браузеров есть полифилл от Google Chrome Labs.

Статья:
https://developer.chrome.com/blog/declarative-partial-updates

Полифилл:
https://github.com/GoogleChromeLabs/template-for-polyfill

#html

#компонент дня

Bramus сделал <hic-pageflip> — натуральное перелистывание страниц с загибами, тенями и всей этой физикой бумажной книжки. Сам эффект давно можно было сделать на Canvas/WebGL, проблема была в другом: содержимое страницы превращалось, по сути, в картинку. Прощай выделение текста, ссылки, accessibility и нормальный DOM.

Вот: https://www.bram.us/2026/09/02/html-in-canvas-pageflip/

Кстати, лет шесть назад уже был пост о подобном эффекте, прелесть той статьи — разложена вся геометрия: https://xn--r1a.website/htmlshit/400

Но там не 3D, там clip-path и динамические тени.

А тут используется экспериментальный HTML-in-Canvas API: браузер умеет отрисовывать настоящий HTML через Canvas/WebGL, при этом исходные элементы остаются живыми DOM-элементами. Поэтому текст можно выделять, ссылки нажимаются, скринридеры продолжают видеть содержимое — а сверху на всё это можно навесить настоящее 3D-деформирование страницы.

Удобно? Не то слово!

Пока, правда, это работает в Chrome за флагом canvas-draw-element, а сам API ещё меняется. Но направление очень интересное. Нет никаких сомнений, что это попрёт за пределы экспериментов.

В лучших традициях Macromedia Flash!

#canvas #html #webgl #webgpu