#html
These are public posts tagged with #html. You can interact with them if you have an account anywhere in the fediverse.
CSS | Um pouco mais sobre text-decoration
This is a nice approach to #responsive #tables in #HTML from the BBC
https://www.bbc.co.uk/sport/football/scottish-championship/table
At wider screen sizes, you see the whole thing. Narrower screen sizes have a 'freeze columns' Excel-type effect.
I haven't tested it with ATs myself, I assume they have ;)
Find out which football teams are leading the pack…
BBC Sport
Y'all look at this. This is some good stuff right here. From @rebane2001
a pure-CSS idle game where you build your own website
lyra.horse
@css@front-end.social
CSS Tip!
Use round() and clamp() to create a fluid typography with discrete values. No more rounding issues and font-size equal to 18.12596px!
After years of thorough research I may finally present…
meiert.comTurns out Netscape 2.02 is too easy, so in this picture is IBM WebExplorer v1.1h running on OS/2 Warp Connect. Using the magic "work area" feature of folders (mark a folder as a work area to have the OS manage objects within it as a kind of unit), I can open several windows at once. True multi-process browsing
#retrocomputing #browsers #floppy #museum #html #BrowserWars
#Development #Techniques
Poisoning well · An effort to dupe nasty AI crawlers with nonsense https://ilo.im/1632tq
_____
#AI #ChatBots #SEO #Content #Protection #RobotsTxt #WebDev #Backend #Frontend #HTML
An experimental strategy for contaminating Large Language…
HeydonWorks
@jfmblinux@mastodon.jfmblinux.frSVG and PNG tech icons
Download, copy and paste tech icons in SVG and PNG format for your projects.
#Html #CSS #SVG #PNG
#Mastodon #Fediverse #Pixelfed #Nextcloud
Recent datepicker experience:
1. Control is presented as three separate spin controls, supporting the Up/Down Arrow keys to increment and decrement the value as well as manual typing. But because they're not text inputs, I can't use the Left/Right Arrow keys to review what each separate one contains, only to move between day, month, and year.
2. I tab to year.
3. I press Down Arrow, and the value is set to 2075. I'm unclear how many use cases require the year to be frequently set to 2075, but I can't imagine it's many so this seems like a fairly ridiculous starting point.
4. I press Up Arrow, and the value gets set to 0001. The number of applications for which 0001 is a valid year is likewise vanishingly small.
5. I delete the 0001, at which point my #screenReader reports that the current value is "0". Also not a valid year.
6. Out of curiosity, I inspect the element to see which third-party component is being used to create this mess... only to find that it's a native `<input>` with `type="date"` and this is just how Google Chrome presents it.
A good reminder that #HTML is not always the most #accessible or user-friendly.
New Kitten update
• 
Kitten HTML templates and kitten.Component render functions can now be async.
This is quite a big one and it took me finally biting the bullet and getting my head around generators in JavaScript to implement properly.
So now you can mix synchronous and asynchronous components as you like and if there are any asynchronous components in your templates they will automatically be awaited (even if you forget to use await) ;)
I’ll write a proper post/tutorial/documentation for it soon but for the time being enjoy the screenshots where a layout template gets the latest three posts from my mock fediverse public timeline service and displays them on the page.
The kitten.Component version also has a refresh button that streams a different three to the page.
For those of you unfamiliar with Kitten, this is all the code in either example. No scaffolding, nothing. Pop either into a file called index.page.js and run kitten in that folder and visit https://localhost to see the example run.
Enjoy!
#Kitten #SmallWeb #async #components #templates #HTML #CSS #JavaScript #NodeJS #generators #web #dev
![const BasicLayoutTemplate = async ({ title, SLOT }) => {
const posts = (await (await fetch('https://streamiverse.small-web.org/public/')).json()).splice(0, 3)
return kitten.html`
<main>
<page css>
<h1>${title}</h1>
${SLOT}
<h2>Fediverse posts</h2>
<ul>
${posts.map(post => kitten.html`
<li><img src='${post.account.avatar}'> ${[post.content]}</li>
`)}
</ul>
<style>
li { display: flex; gap: 1em; margin-bottom: 1em; }
img { width: 5em; height: auto; }
</style>
</main>
`
}
export default async () => await kitten.html`
<${BasicLayoutTemplate} title='Async components are fun!'>
<markdown>
Oh, isn’t this __nice?__
</markdown>
</>
`](https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/114/258/812/670/834/838/original/228733ad125b57f4.png "const BasicLayoutTemplate = async ({ title, SLOT }) => {
const posts = (await (await fetch('https://streamiverse.small-web.org/public/')).json()).splice(0, 3)
return kitten.html`
<main>
<page css>
<h1>${title}</h1>
${SLOT}
<h2>Fediverse posts</h2>
<ul>
${posts.map(post => kitten.html`
<li><img src='${post.account.avatar}'> ${[post.content]}</li>
`)}
</ul>
<style>
li { display: flex; gap: 1em; margin-bottom: 1em; }
img { width: 5em; height: auto; }
</style>
</main>
`
}
export default async () => await kitten.html`
<${BasicLayoutTemplate} title='Async components are fun!'>
<markdown>
Oh, isn’t this __nice?__
</markdown>
</>
`")
![class BasicLayoutTemplate extends kitten.Component {
async html ({title, SLOT}) {
return kitten.html`
<main id='page' morph>
<page css>
<h1>${title}</h1>
${SLOT}
<${FediversePosts.connectedTo(this)} />
</main>
`
}
}
class FediversePosts extends kitten.Component {
async html () {
const posts = (await (await fetch('https://streamiverse.small-web.org/public/')).json()).splice(Math.floor(Math.random()*6), 3)
return kitten.html`
<div id='posts' morph>
<h2>Fediverse posts</h2>
<ul>
${posts.map(post => kitten.html`
<li><img src='${post.account.avatar}'> ${[post.content]}</li>
`)}
</ul>
<button name='refresh' connect>Refresh</button>
<style>
li { display: flex; gap: 1em; margin-bottom: 1em; }
img { width: 5em; height: auto; }
</style>
</div>
`
}
onRefresh () { this.update() }
}
export default class MyPage extends kitten.Page {
async html () {
return kitten.html`
<${BasicLayoutTemplate.connectedTo(this)} title='Async components are fun!'>
<markdown>
Oh, isn’t this __nice?__
</markdown>
</>
`
}
}](https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/114/258/813/076/463/648/original/22f714259e01b4f8.png "class BasicLayoutTemplate extends kitten.Component {
async html ({title, SLOT}) {
return kitten.html`
<main id='page' morph>
<page css>
<h1>${title}</h1>
${SLOT}
<${FediversePosts.connectedTo(this)} />
</main>
`
}
}
class FediversePosts extends kitten.Component {
async html () {
const posts = (await (await fetch('https://streamiverse.small-web.org/public/')).json()).splice(Math.floor(Math.random()*6), 3)
return kitten.html`
<div id='posts' morph>
<h2>Fediverse posts</h2>
<ul>
${posts.map(post => kitten.html`
<li><img src='${post.account.avatar}'> ${[post.content]}</li>
`)}
</ul>
<button name='refresh' connect>Refresh</button>
<style>
li { display: flex; gap: 1em; margin-bottom: 1em; }
img { width: 5em; height: auto; }
</style>
</div>
`
}
onRefresh () { this.update() }
}
export default class MyPage extends kitten.Page {
async html () {
return kitten.html`
<${BasicLayoutTemplate.connectedTo(this)} title='Async components are fun!'>
<markdown>
Oh, isn’t this __nice?__
</markdown>
</>
`
}
}")
LLMs -> Semantic HTML Gets Hot Again?
“Use Semantic HTML and Clear Tagging: Ensure that headings are marked with <h1>, <h2>, ... tags in logical hierarchy, and use <p> for paragraphs, <code> or <pre> for code examples, and lists for step-by-step guides. Meaningful HTML structure helps crawlers (and by extension LLMs that rely on web data) extract the content hierarchy."
So the far too common #HTML <div> soup considered #AI harmful. Great. Better markup helps #a11y but also… 
blog! “Pretty Print HTML using PHP 8.4's new HTML DOM”
Those whom the gods would send mad, they first teach recursion.
PHP 8.4 introduces a new Dom\HTMLDocument class it is a modern HTML5 replacement for the ageing XHTML based DOMDocument. You can read more about how it works - the short version is that it reads and correctly sanitises HTML and turns it into a…
Read more: https://shkspr.mobi/blog/2025/03/pretty-print-html-using-php-8-4s-new-html-dom/
⸻
#HowTo #HTML #php
Those whom the gods would send mad, they first teach…
Terence Eden’s BlogCreating Animated Accordions With the “details” Element and Modern CSS, by @stefan (@builderio.bsky.social):
@tommi@pan.rentLooking for CMS advice
Hey Web devs!
Do you have any suggestions, tips, opinions, dos, don’ts about headless CMSes?
I have a growing list of small/mid non-profits and collectives asking for my help to (re)make their website. I totally want to help, but I don’t have much time, especially considering that they generally have little or no funding—I would most definitely point them to @VillageOneCoop, otherwise.
Therefore, I want a super simple and replicable solution where I can copy-paste most of the code, while providing them with a stable, fast, and modern solution. I had a look at the Headless CMS section in the Jamstack website, but I need opinions from people who actually used some of that software already.
Needs
I want to code and configure everything using @eleventy
Admin interface (#WebApp) for the client to add pages and write posts
Static website in the front-end
Simple and reliable CI/CD
No/minimal maintenance after the first setup
Self-hostable (I was taking this for granted so much that I forgot to write it)
If it requires forge integration, it should support #ForgeJo
#OpenSource
Nice to have
Possibly using #Deno, not #NodeJS
Allowing the client to customize a bit their website through the admin interface, with a GUI
CMS app packaged on @yunohost
No CMS vendor lock-in
I’d love to write as little JavaScript as possible
#FreeSoftware
Absolutely not
Front-end #JavaScript frameworks
Please, boost this and ask around! Links to videos, tutorials, and resources are welcome.
People whose perspective I would really value: @zachleat @harryfk @deno_land @jaredwhite @vanillaweb @stefan @mxbck @WeirdWriter @deadsuperhero (Sorry if I am spamming you!)
#Eleventy #11ty #CMS #HeadlessCMS #Ghost #DecapCMS #CraftCMS #Strapi #Web #WebDev #WebDesign #StaticGen #StaticWebsite #Website #HTML #CSS #YunoHost #SelfHosting #Wordpress
Check out this showcase of some of the best, open source…
Jamstack.orgШахматный советник для тех, кто зевает и не любит читеров
Это новый вариант статьи, уже выложенной на хабре. Та статья писалась на эмоциях, сразу после первых декабрьских версий. Нынешняя — это результат трехмесячных воскресных посиделок в Visual Studio. Тут и параллельные процессы и манипуляции в js и даже примитивный шахматный движок на C#. Погнали
@floehopper@ruby.social> Configuring Zed editor to use HTML Beautifier as a formatter in ERB templates