#html
#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
"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!
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.
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
哇屋
原來 native 的 loading="lazy"
會判斷有無 cache
有 cache 的話
不在畫面的也會直接 load img
也同時會觸發 img.onload
(剛還以為自己排版有問題，導致 lazy loading 沒效果 XD)
若是沒 cache
又沒在畫面裡
那就不會 load img
onload event 也不會觸發
Unable to navigate nested tables in JAWS 2024
Date time @aardrian Saturday afternoon.
https://github.com/FreedomScientific/standards-support/issues/791
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
DoorDash is hiring System Engineer Lead
🔧 #csharp #python #dotnet #dotnetcore #html #kafka #mysql #sql #techlead
🌎 Atlanta, Georgia; Austin, Texas
⏰ Full-time
🏢 DoorDash
Job details https://jobsfordevelopers.com/jobs/system-engineer-lead-at-doordash-nov-22-2022-1bc54c?utm_source=mastodon.world&ref=mastodon.world
#jobalert #jobsearch #hiring
Weird HTML hacks of the past 🤣
https://tedium.co/2023/11/24/weird-html-hacks-history
#HTML #history #InternetHistory #CSS #Netscape #NetscapeNavigator #InternetExplorer #Web1
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
#HTML #CSS #JavaScript #Webdesign #WordPress
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
This is pretty neat. I’m trending towards wanting to use less #javascript, in my curmudgeonly older age. #html #css
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
@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
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
"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.
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."
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 🤔
HTML, no CSS. In the Blue Thermic HTML Editor, Windows 98.
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
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
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. 😖
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
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").
“…does it have to be semantic and shit?”
A good start of the HTMHell Advent Calendar by @vasilis
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
10 Weird HTML Hacks That Shaped the Internet
Link: https://tedium.co/2023/11/24/weird-html-hacks-history/
Discussion: https://news.ycombinator.com/item?id=38485295
"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.
#Development #Reframings
The UX of HTML · Let’s talk about ‘HTML UX’ instead of ‘semantic HTML!’ https://ilo.im/15xahb
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
#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
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
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 !
![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)](https://assets.toot.cafe/cache/media_attachments/files/111/498/870/271/557/474/small/8d825278e99a47e0.png)
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
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.
#Development #Techniques
Detecting when a Web Component is loaded with CSS · Easily hide a required JS component until instantiated https://ilo.im/15x8lr
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
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 ?
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)!
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.
“#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.)
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.
https://hawkticehurst.com/writing/a-year-working-with-html-web-components/
WTF is #HTMX?
https://www.youtube.com/watch?v=zjHHIqI9lUY
Oh, that's it: it's a #JavaScript within #HTML without admitting it's #JS in HTML!
https://www.youtube.com/watch?v=zjHHIqI9lUY&t=300s
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
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