"With the form attribute you are no longer restricted to position your inputs and buttons inside the form element boundaries. This approach enriches the potential for more flexibility and creative form designs."
The more you know! Alexander Muzenhardt shows us how to associate a button outside of its respective form. 🤯 Be aware of potential #accessibility implications, though!
I have a question regarding a semantic HTML construct, and I'd like to know what the current consensus is (if there is one). So here goes:
Should navigation links be placed in an unordered list in a <nav>?
The spec doesn't recommend anything, but examples from MDN (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav#examples) and WHATWG (https://html.spec.whatwg.org/multipage/sections.html#the-nav-element) consistently use lists unless the contents are written in prose. Is this still the preference more broadly?
I have some other questions in this area. Safari removes list semantics if you remove the bullets (with exceptions, such as if the list is a child of "nav"), due to alleged "list-itis". At what point do lists become inappropriate? If I have a list of blog posts, and I format them as cards, with a heading, publish date, summary, and an image, is that too much content for each <li>?
Also, MDN and WHATWG point out not all links should be contained in navs (such as footer links), and "nav" should instead signal major blocks of navigation links. Would my prior example of a list of blog posts count as a major block? Should I enclose my list of blog posts in a nav? Does that extend to all section, category, and tag pages listing pages in that section/category/tag?
Feel free to respond if you have opinions, but keep it civil, and boosts are appreciated.
原來 native 的 loading="lazy"
有 cache 的話
不在畫面的也會直接 load img
(剛還以為自己排版有問題，導致 lazy loading 沒效果 XD)
那就不會 load img
onload event 也不會觸發
My favorite feature of the library HTMX is its “hx-boost” feature which essentially allows you to create a single page application experience through what seems like the crudest of power tools, like a sledgehammer it just drops the innerHTML of the body tag of the page referenced into the current page.
DoorDash is hiring System Engineer Lead
the deeper i delve into the issue, the less necessary it seems to use front-end frameworks for the majority of my web development.
initially, there was htmx - a truly amazing tool that I love using.
then, today, i just discovered that we can have native dialog boxes, as well as native autocomplete, quite easily.
thanks @Kilian for the article.
Hello Fediverse, hello Bits&Baeume,
I’ve moved recently, time for a (re)introduction — and a heartfelt Thank You! to @ben
I am a writer, copywriter, online editor, and I generally write a lot; I design websites with plain HTML/CSS/JS or using WordPress and other CMS; occasionally I work as a speaker, podcast producer, sound designer — to mention the most important bits.
My blog: https://wernerprise.com/blog (mostly German, but I am considering making it bilingual at some point.)
Climate catastrophe is on my mind, degrowth close to my heart; capitalism needs a short leash!
Also, I still take SARS-CoV-2 and COVID-19 very seriously. Thus:
#SARSCoV2 #COVID19 #COVID #NoCOVID #LongCOVID #COVIDIsNotOver #WearAMask #TeamCaution #CleanAir
#NewHere #Intro #ClimateCatastrophe #Capitalism #WealthRedistribution #TaxTheRich #Democracy #AntiAI #AntiFa #StopConsumerism #WeAreThe99Percent
Hallo Fediverse, hallo Bits&Baeume,
ich bin umgezogen und erst seit ein paar Stunden hier auf dem neuen Server, deswegen eine kurze Vorstellung — und ein herzliches Dankeschön an @ben
Ich bin Texter und Online-Redakteur, schreibe auch sonst viel; ich gestalte Websites in HTML, mit WordPress oder anderen CMS, arbeite außerdem gelegentlich als Sprecher, Podcast-Produzent, Sounddesigner – um mal die wesentlichen Dinge genannt zu haben.
Mein Blog: https://wernerprise.com/blog
Mir liegt die Klimakatastrophe auf der Seele und Degrowth (Décroissance) am Herzen; Kapitalismus braucht straffe Zügel!
Außerdem nehme ich nach wie vor SARS-CoV-2 und COVID-19 ernst. Daher:
#SARSCoV2 #COVID19 #COVID #NoCOVID #LongCOVID #COVIDIstNichtVorbei #WearAMask #MaskeAuf #DieMaskeBleibtAuf #TeamVorsicht #CleanAir
#NeuHier #Intro #Klimawandel #KlimaKatastrophe #Kapitalismus #Umverteilung #Reichensteuer #Demokratie #AntiKI #AntiFa #Konsumstop #WirSindDie99Prozent
This is an excellent article by @Kilian
I’m not a big fan of summary/details generally because it’s just too inconsistent, but dialogs are great. And I didn’t actually know about
input type="color" yet.
Well worth a read.
Also really enjoyed your interview at Rustacean Station.🙂 🎧
That's impressive! Please don't get me wrong: of course it matters, whether you are using a full-blown browser for your GUI or going full native like Slint.
"The tricky thing with the web is that once you learn how to build something there is never a reason to have to learn it again. That's the contract we have: the web is backwards compatible."
Yet he's also mentioning that it's not perfect and you should ask yourself if you REALLY need to use JS in a particular case.
This was a great read about introducing HTML semantics as "UX enhancements" that come for free by implementing semantically correct HTML. And THEN you open the door to harder semantics topics when someone gives a sign that they want to go deeper into HTML theory.
This sounds like a much better framing for helping people get started on their web dev journey 🤔
A lil friday share out:
Introducing Stellar, a framework for building reactive HTML Web Components.
I soft launched this in a blog post earlier this week but I wanted to call it out more front and center here!
Stellar is the result of a year playing with #HTML #WebComponents and seeks to improve the ergonomics of building these components by providing a handful of custom attributes called “directives” that implement event handling and a reactivity model.
Really nice progressive enhancement of a good old html table with a web component. It's amazing how easy this stuff has become without the need for clunky libraries and frameworks.
It’s the first of December, and you know what that means… 👀
It’s the first day of blog posts within the #HTMHell Advent Calendar! 📝🎄
24 days, 24 authors and 24 articles on #security, #accessibility, #UX, #HTML, #performance and more. Big thank you to @matuzo and his helping elves who put in all the effort to realise this advent calendar! 🙏🏻
Check it out: https://www.htmhell.dev/adventcalendar/
10 Weird HTML Hacks That Shaped the Internet
"Recently I decided to stop using the word semantics. Instead I talk about the UX of HTML. And all of a sudden my students are not allergic to HTML anymore but really interested. Instead of explaining the meaning of a certain element, I show them what it does."
Ja kyllä, käytän yhä table-tägiä html-sivullani. Sivulla on kuormataulukko, joka on semanttisesti taulukko -> käytän sitä varten tehtyjä html-tägejä. En käytä table:a väärin, eli sivun sijoittelun (layout) toteutukseen, vaan taulukon toteutukseen. Jos osaisin ajatella sivulla olevan taulukon muuna kuin taulukkona, saattaisin harkita muuta toteutusta. #html #table
Pelican 4.9 has been released✨
I wrote an introduction to the new version of the Pelican built-in “Simple” theme with semantic and classless HTML and customizable out-of-the-box. 🦜
TIL #HTML hat ein #Output-Element.
Danke für Eure immer noch aktuellen und tollen Seiten, @selfhtml !
Finally pushed out some small updates for my site after a while. The only major one is getting rid of the old "reviews and guides" page being removed ever since I added the tech deck as the replacement.
Hopefully, I can figure out how to put together an image gallery for my site so I can start popping my photography on there
still blows my mind that in html the tag for a link is `a` and a resource (like css or an icon) is `link`
I've been working on my website for this project again!
It's been on/off for a while now - mostly because I wanted to get around to re-listing my stuff on Etsy first. Now I have, the engine is turning for this project once more!
Plenty left to do on the website, but here is a screenshot of where it's at right now. (Wording will change)
Made with HTML, CSS, and #11ty 💚
Eventually It'll be home to a newsletter, and a tutorial section of some kind too.
But HTML First thinking starts with actual HTML, used according to purpose, accessible to everyone.
That’s the “HTML First” we need.
(I’m cooking a book about that kind of HTML First, but it’s too early to make announcements.)
While the term “HTML Web Components” is fresh out of the oven, the architecture it refers to has been sitting on the counter at room temperature for a while. In this post I offer my insights and musings from a year of working with these components.
Using HTML web components (esp with tools like @astro) has been a deeply refreshing and encouraging method of building interactive UI. I think it really has the potential to change how we build the web.
Fascinating. The aforementioned #FediRender does turn the outbox from the backup into a browsable #HTML file. Curiously, the #JSON is 61MB, the HTML shrunk to “just” 7.8MB —which is still *a lot*, but an order of magnitude less!
Also interesting, the outbox.html crashes w3m but I can dump it in a more text-like format with lynx, which shrinks it even more to a much more reasonable 110KB, a sizable fraction of which is just … links.