Do you know the flex-wrap property? It allows flex items to wrap but it has another "secret" behavior not related to wrapping.

Many are not aware of this hidden functionality but it is never too late to learn about it!

https://css-tip.com/flex-wrap/

SELFHTML wird 30! Das wollen wir feiern!

Am Samstag, den 24.05.2025 gibt es …
12:00 Unconference mit Beiträgen zu RWD, Screenreadern und mehr
17:00 Stadtrundgang Stadt.Wand.Kunst
19:00 Abendessen

https://forum.selfhtml.org/self/2025/apr/11/self-treffen-2025-unconference/1819538#m1819538

My nerdy special-interest-having ass wishes there was #Fediverse software that lets you, no, actually *requires* you to use semantic markup for your posts. I want my <abbr>s and my <dfn>s and even all the #Schema #microformats!

I wanna add semantic info to literally everything on the whole wide web and I am not afraid.

The only depressing thought in the back of my head is that no software will ever do anything cool with all that information...

I got tired of manually updating my CV across different formats, especially PDF.

So I built CVBuilder, a Swift package that keeps everything in code—typed, versioned, and exportable as Markdown, HTML (via Ignite), or plain text.

Here's more info about it:
https://aleahim.com/cvbuilder/

And a GitHub repo:
https://github.com/mihaelamj/cvbuilder

旋宮圖 Hsüan Kung Diagram
https://yongzs1218.github.io/hsuan-kung/
在AI的指導下，我用JavaScript、CSS和HTML架設了一份網頁版「旋宮圖」。該圖可用於旋宮犯調實踐，之調、爲調轉換等場景。

Under the guidance of AI, I developed a web-based “Hsüan Kung Diagram” using JavaScript, CSS, and HTML. This diagram is designed for Hsüan²-kung (Xuán-gōng, 旋宮) and Fan⁴-tiao⁴ (Fàn-diào, 犯調) practices, including scenes such as Chih-tiao⁴ (Zhī-diào, 之調) and Wei²-tiao⁴ (Wéi-diào, 爲調) transformations. 旋宮 and 犯調 are traditional Chinese modulation or transposition concepts, 之調 and 爲調 are traditional Chinese key notation systems.

AIの指導のもと、私はJavaScript、CSS、HTMLを用いてウェブ版「旋宮図（せんきゅうず）」を構築しました。この図は、旋宮犯調（せんきゅうはんちょう）の実践や、之調（しちょう）・爲調（いちょう）の変換などのシナリオに活用できます。

Dưới sự hướng dẫn của AI, tôi đã xây dựng một ”Đồ Huyền Cung (圖旋宮)“ phiên bản web bằng JavaScript, CSS và HTML. Bản đồ này có thể ứng dụng trong thực hành chuyển điệu Huyền Cung Phạm Điệu (旋宮 犯調), cũng như chuyển đổi giữa hệ thống Chi Điệu (之調) và Vi Điệu (爲調).／𨑜事向引𧵑AI，碎㐌𡏦𥩯“圖旋宮”翻版web憑JavaScript，CSS吧HTML。版圖尼固體應用𥪝轉調 旋宮-犯調，拱如轉𢷮𡧲系統之調吧爲調。

AI의 지도 아래, 저는 JavaScript, CSS, HTML을 사용하여 웹 버전 「선궁도(旋宮圖)」를 구축했습니다. 이 도표는 선궁 범조(旋宮 犯調) 실습 및 지조(之調)·위조(爲調) 변환 시나리오에 활용될 수 있습니다.／AI의 指導 아래, 저는 JavaScript, CSS, HTML을 사용하여 웹 版 「旋宮圖(선궁도)」를 構築했습니다. 이 圖表는 旋宮 犯調(선궁 범조) 實習 및 之調(지조)·爲調(위조) 轉換 시나리오에 活用될 수 있습니다.

Is the ordering of attribute values ever semantically or logically important.

For example, is there ever a practical difference between:

`<p class="a b">`
and
`<p class="b a">`

I've had a statuslog section on my now page (https://reillyspitzfaden.com/now/) for a while, and I added it to my homepage as well (https://reillyspitzfaden.com/#homepageStatus).

The especially nice part is that I now have a script (https://github.com/reillypascal/personalsite-ssg/blob/main/status) so I can simply type `./status` in the terminal, write the status text in the resulting .md file that pops open, and then commit/push!

I've seen some IndieWeb people (e.g., @binarydigit) do something similar via one of omg.lol's tools (https://home.omg.lol/info/statuslog) and liked it, but I wanted to see if I could DIY it just for the heck of it. Very happy with how easy the result is!

Unfeasible project idea:

A #web #browser that purposefully sacrifices broad compatibility in favour of providing unique #SemanticWeb features and interactivity for well-written sites.

All the cool #SemanticHTML information we keep adding to our websites like <abbr>, <address>, <article>, <q>, <cite> and so on are awesome but almost no browser makes use of them!

Okay, so all that fancy corpo design and <div> hell won't render, but a well-written semantic website shines.

I got an #HTML #SemanticWeb question.

My website has a 'blog', which is really just a bunch of HTML files each containing a standalone essay.

This screenshot shows the main landing page of the 'blog'. Here you choose which article to read.

Right now, that's just a <ul> element with article links.

Should that be wrapped in a <nav>? It's the main reason for the page to exist and not really an optional navigation bar. I am not sure what's best for a #screenreader either.

Is #XFN obsolete? It looks like only the `rel="me"` survives.

https://gmpg.org/xfn/11

Is it worth keeping it in the `<link rel=profile `?

#Development #Announcements
Default 'h1' styles are changing · What this means for front-end developers https://ilo.im/1639ni

_____
#Headings #UserAgent #Styles #Sections #Rendering #Specification #HTML #Browser #WebDev #Frontend

RSVP | Homebrew Website Club - Americas | April 16, 2025

https://events.indieweb.org/2025/04/homebrew-website-club-americas-xCttvgRnN4Pl
https://reillyspitzfaden.com/interactions/2025/04/rsvp-homebrew-website-club-americas-april-16/

New Kitten feature: Icons!

You can now make use of a subset of the icons in the Phosphor icons set by @minoraxis and @rektdeckard.

https://kitten.small-web.org/reference/#icons

Search through them in your editor by referencing `kitten.icons.categories` and `kitten.icons.tags`.

Add this to a file called index.page.js and run `kitten` to see a large duotone pink cat (because why not?):

export default function () {
return kitten.html`
<${kitten.icons.c.Cat}
size=40%
weight=duotone
colour=deeppink
/>
`
}

(And yes, the set includes icons for the fediverse. This one of the reasons I chose it.) ;)

Enjoy!

"Default styles for h1 elements are changing"

#frontend #webdev #HTML

https://developer.mozilla.org/en-US/blog/h1-element-styles/

slowly building out more of my #nekoweb site!

unsure what I wanna do for displaying buttons/stamps, I'm undecided

so far I've implemented sidebars with overflow scrolling and marquees

I think marquees look neat but as a websurfer it's kind of annoying whenever I have to wait and watch it scroll to see all the images

otoh the overflow boxes don't look as interesting or appealing

I'll include screenshots, plus a screenshot where I just let everything hang out, which looked the worst imo lol

The <q> element: "When creating quotes in #HTML, most people are aware of the <blockquote> element, but for shorter quotes you might want an inline element, and that is where the <q> element comes in." https://html-css-tip-of-the-week.netlify.app/tip/the-q-element/

Today we're making memories, letting our little traveling bot take video clips along its journey, live now on https://www.twitch.tv/noyainrain #Python #HTML #OpenSource