Masthash

#html

Inautilo
5 hours ago

#Development #Retrospectives
Weird HTML hacks · Workarounds that got our web pages through rocky times https://ilo.im/15x8lh

_____
#WebDev #History #Browser #BrowserEngine #Hack #Frontend #HTML

Steve Frenzel
5 hours ago

"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."

https://www.htmhell.dev/adventcalendar/2023/3/

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!

#HTML #HTMHell #WebDev #Frontend #a11y

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.

#HTML #semanticHTML #WebDev #website #accessibility #a11y

Leanpub
14 hours ago

The bundle .NET 5.0 by Dr. Holger Schwichtenberg (MVP) is on sale on Leanpub! Its suggested price is $124.97; get it for $49.50 with this coupon: https://leanpub.com/b/net50/c/LeanpubWeeklySale2023Dec01 #Html #Dotnet #CSharp #Aspnet #Javascript #WebDevelopment #Databases

RplusTW
21 hours ago

哇屋

原來 native 的 loading="lazy"
會判斷有無 cache
有 cache 的話
不在畫面的也會直接 load img
也同時會觸發 img.onload
(剛還以為自己排版有問題,導致 lazy loading 沒效果 XD)

若是沒 cache
又沒在畫面裡
那就不會 load img
onload event 也不會觸發

#html

Steve Faulkner
1 day ago

Unable to navigate nested tables in JAWS 2024

Date time @aardrian Saturday afternoon.

https://github.com/FreedomScientific/standards-support/issues/791

#a11y #screenReader #JAWS #HTML

B. Morgan Murrah
1 day ago

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.

https://htmx.org/attributes/hx-boost/

#htmx #html #webdevelopment #WebDev

1/2

Regis
1 day ago

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.

https://www.htmhell.dev/adventcalendar/2023/2/

#html #js

WERNERPRISE° — Thomas Werner
1 day ago

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
#HTML #CSS #JavaScript #Webdesign #WordPress

WERNERPRISE° — Thomas Werner
1 day ago

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
#HTML #CSS #JavaScript #Webdesign #WordPress

YurkshireLad
1 day ago

This is pretty neat. I’m trending towards wanting to use less #javascript, in my curmudgeonly older age. #html #css

https://www.htmhell.dev/adventcalendar/2023/2/

Michael
1 day ago

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.

https://www.htmhell.dev/adventcalendar/2023/2/

#css #js #JavaScript #html #Frontend #Webdev #Webdevelopment

Jan :rust: :ferris:
2 days ago

@hunger Oh, nice! Love the work you're doing over at #Slint! ❤️

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.

To be clear: in the OP, I'm talking about #HTML and #CSS as a GUI system in general, no browser context at all.

I'm thinking about #taffy and how it is used in #bevy for example:
https://github.com/DioxusLabs/taffy

#Rust

B. Morgan Murrah
2 days ago

I felt awesome that I snagged this URL for free:

https://hypermedia.netlify.app/

Now I am soliciting ideas and URL's for resources to help my next project, which will be hypermedia focused :D . Please consider sharing a good URL to a humble experiment

#htmx #html #webdevelopment #WebDev

Steve Frenzel
2 days ago

"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."

https://www.htmhell.dev/adventcalendar/2023/2/

Interesting showcase by @Kilian how #HTML & #CSS provide tons of functionality without the need of #JavaScript.

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.

Mark Gardner ‍:sdf:
2 days ago

@shvarcs The #CSS snobs killed the #HTML <CENTER> tag and have been reaping the whirlwind ever since

Tobias Zeumer
2 days ago

The UX of HTML - HTMHell

https://htmhell.dev/adventcalendar/2023/1/

"Recently I decided to stop using the word semantics. Instead I talk about the UX of HTML."

#html #ux

Matthew Miller :donor:
2 days ago

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 🤔

https://www.htmhell.dev/adventcalendar/2023/1/

#html #webdev

Jake Beamer
2 days ago

HTML, no CSS. In the Blue Thermic HTML Editor, Windows 98.

#HTML #Windows #Windows98 #Web1 #WebHistory #OldWeb #90s

HTML with no CSS, shown in the Blue Thermic HTML Editor
Hawk Ticehurst
2 days ago

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.

https://github.com/hawkticehurst/stellar

1/5

The Stellar logo placed above a blue and purple gradient background.
Michael Klöpzig
2 days ago

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.

https://www.raymondcamden.com/2023/03/14/progressively-enhancing-a-table-with-a-web-component

#webdev #webcomponents #javascript #frontend #html

Noelle :verified:
2 days ago

I feel myself getting back into learning web design. 😀

I was looking at the HTML code of a Neocities blog and realized I understood what almost all of it meant, so I have made some progress. 😅

Just feels like I haven't because I don't know a lot of CSS. 😖

#WebDev #coding #WebDesign #HTML #CSS

Joe Crawford
2 days ago

I've been deep diving into the capabilities of CSS because of CSS Battle dot dev and now I can quickly do some isometric buttons PDQ:
https://codepen.io/artlung/pen/dyagrwV #CSS #Design #HTML

Daniela Kubesch
2 days ago

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/

What burns any of your trust for a website/web app… for you?

For me, it's when a website opens a pop-up window (actual window "on system level").

#webdesign #html #internet

Paweł Grzybek
2 days ago

“…does it have to be semantic and shit?”

A good start of the HTMHell Advent Calendar by @vasilis

https://www.htmhell.dev/adventcalendar/2023/1/

#html

SELFHTML e.V.
2 days ago

Advent, Advent, das Raumschiff brennt?
Bei der Suche nach Themen für einen Adventskalender sind wir auf das Wirrwarr von Sonderzeichen gestoßen, die bei der Entwicklung von Software verwendet werden.
https://forum.selfhtml.org/advent/2023

#html #selfhtml #webdesign #adventskalender

Hacker News 50
2 days ago
Steve Frenzel
2 days ago

"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."

https://www.htmhell.dev/adventcalendar/2023/1/

The first door of the #HTMHell calendar has been opened and @vasilis approach really resonates with me. I'm a visual learner, and I also like to do stuff instead of reading about it.

#html #css #ux

Inautilo
3 days ago

#Development #Reframings
The UX of HTML · Let’s talk about ‘HTML UX’ instead of ‘semantic HTML!’ https://ilo.im/15xahb

_____
#WebDev #Frontend #HTML #SemanticHTML #HtmlUX

Juha
3 days ago

Lyhyt trippi #colgroup/​#col-tägeihin, yritin korostaa taulukon aktiivisen sarakkeen. Ei onnistunut, kun soluilla on jo background.

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

Inautilo
3 days ago

#Development #Trends
A year working with HTML Web Components · How they could shape the future of web development.
https://ilo.im/15x9rt

_____
#WebDev #WebComponent #HtmlWebComponent #ProgressiveEnhancement #Frontend #HTML #JavaScript #Astro #Stellar

Just starting to play with the soon-to-be-supported HTML “popover” attribute and mess with demos.

Am I missing something, or is it currently not possible to position a popover without the future CSS Anchor Positioning feature?

#css #html

The #hamburg #html meetup happened at Whiskey Tango Foxtrot in Bahrenfeld this time. It was a super cozy and nice atmosphere. So good to mingle and network with other people working at the front of the frontend 💜 ☺️

Paolo Melchiorre
3 days ago

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. 🦜

https://www.paulox.net/2023/11/30/pelican-4.9-classless-simple-theme/

#Pelican #Python #Static #HTML #Semantic #Classless

CC @justin

I hacked together a lightning talk on @eleventy for the #hamburg #html meetup today in no time.

https://lea11ty.netlify.app/

Vincent Valentin
3 days ago

Avec le nouveau jeu d’attributs popover*, auras t-on toujours besoin de préciser l’état avec aria-expanded sur l’actionneur ?

Réponse personnelle après test : à priori non.

#a11y #html

Markus Osterhoff
3 days ago

TIL #HTML hat ein #Output-Element.
https://wiki.selfhtml.org/wiki/HTML/Elemente/output

Danke für Eure immer noch aktuellen und tollen Seiten, @selfhtml !

dtanzer
4 days ago

Look! I'm editing #html with #regex !

Screenshot of an editor showing the code:

const result = withoutEmptyLines(html(marmdown))
				const expectedContent = withoutEmptyLines(expected)
	.replaceAll(/<li>([^\r\n])/g, '<li>\n<p>$1')
	.replaceAll(/([^\r\n])<\/li>/g, '$1</p>\n</li>')
				expect(result).toEqual(expectedContent)
Sinclair-Speccy
4 days ago

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

#WebDev #Website #HTML

SELFHTML e.V.
4 days ago

Heute, am 30.11., ist wieder Blue Beanie Day; ein Aktionstag, um auf die Wichtigkeit von Webstandards aufmerksam zu machen. Er wird seit 2007 jährlich am 30. November begangen und wurde von Douglas Vos ins Leben gerufen.

https://wiki.selfhtml.org/wiki/Webstandards

#html #webdesign #barrierefreiheit

SELF-Logo mit Blue Beanie
Inautilo
4 days ago

#Development #Techniques
Detecting when a Web Component is loaded with CSS · Easily hide a required JS component until instantiated https://ilo.im/15x8lr

_____
#WebDev #WebComponent #Frontend #HTML #CSS #JavaScript

Joe Lanman
4 days ago

still blows my mind that in html the tag for a link is `a` and a resource (like css or an icon) is `link`
#html

Benoit Hetru
4 days ago

Je viens de découvrir la balise
<meta http-equiv="X-Clacks-Overhead" content="GNU Terry Pratchett" />
et... WOW ! Comment j'ai pu vivre aussi longtemps sans intégrer ça dans mes sites web ?

http://www.gnuterrypratchett.com/

#TerryPrachett #html

Stephanie Eckles
4 days ago

Excited for the 12 Days of Web articles to hit my inbox for scheduling 🤩

Don't forget to subscribe to updates or get the RSS (/feed)!

#CSS #HTML #JS

https://12daysofweb.dev

DennisL
5 days ago

Failure of the day—this attribute on an anchor element:

hidefocus="on"

Found in the wild...seriously.
#webdev #a11y #html #fail

ALDR Design 🎨
5 days ago

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.

#WebDev #HTML #CSS #SVG

Screenshot of my website in development for ALDR Design. The main text says 

"Designs you can craft with"

"Intricate templates for you to craft with, ideal for paper and more. Every design has been test cut and comes with detailed instructions on how to use it" 

There are a couple of buttons to shop my Shadowbox and SVG collection, with a dragonfly design to the right. Below the heading area is a featured block, showing my Owl, Stag Beetle, and Deer Skull design. This is all set on top of a grey'ish background with gridlines.

#HTMLFirst” is a fantastic mindset, but https://html-first.com is a disappointment and a distraction.

Not once does that website suggest that #HTML should be #valid (to even constitute HTML), #semantic, or #accessible.

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.)

Hawk Ticehurst
6 days ago

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.

#HTML #WebComponents

https://hawkticehurst.com/writing/a-year-working-with-html-web-components/

Leanpub
6 days ago

Taming Thymeleaf by Wim Deblauwe is on sale on Leanpub! Its suggested price is $24.99; get it for $22.49 with this coupon: https://leanpub.com/sh/iTKsDtJr #Java #Html #WebDevelopment #Software

Oblomov
6 days ago

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.

18/n