snabelen.no

47 innlegg41 deltakere6 innlegg i dag

Steve FaulknerWas reminded of this historical artefact i penned/collated upon the release of <a href="https://mastodon.social/tags/HTML5" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML5</a> back in 2014<a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/WebStandards" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebStandards</a> <a href="https://w3c.social/@w3c" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@w3c</a> <a href="https://html5doctor.com/the-ride-to-5/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://html5doctor.com/the-ride-to-5/</a>

Blain SmithWe're weeks away from being feature complete and we're still JavaScript free in our app. Even our delete confirmations are just regular server rendered HTML and form POST actions. <a href="https://fosstodon.org/tags/SmolWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmolWeb</a> <a href="https://fosstodon.org/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://fosstodon.org/tags/WebApp" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebApp</a> <a href="https://fosstodon.org/tags/NoJavaScriptNeeded" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#NoJavaScriptNeeded</a>

Patrick LeavyQuestion for you <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> peeps:I've made a site and it's totally in dark mode. How I like it 😊But some people mentioned that I should offer a light mode toggle because "some people are not used to dark mode and won't like it".Do you think that's valid? (Someone else said that there's also potentially an accessibility issue with dark mode - is that true?)<a href="https://mastodon.social/tags/websitedesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#websitedesign</a> <a href="https://mastodon.social/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://mastodon.social/tags/accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#accessibility</a> <a href="https://mastodon.social/tags/darkmode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#darkmode</a> <a href="https://mastodon.social/tags/lightmode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#lightmode</a> <a href="https://mastodon.social/tags/webdesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdesign</a> <a href="https://mastodon.social/tags/mastodev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#mastodev</a>

Marei[1/2] Die zweite Präsentation bleibt beim Thema Barrierefreiheit und Ulrike Fischer zeigt einige unterschiedlichen Varianten um <a href="https://chaos.social/tags/TeXLaTeX" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#TeXLaTeX</a> nach <a href="https://chaos.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> zu wandeln. Ein Ansatz, den ich zum Beispiel für das frühere Backend der <a href="https://chaos.social/@datenschleuder" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@datenschleuder</a> umgesetzt hatte, um epub mitzuliefern.Es wird <a href="https://chaos.social/tags/tex4ht" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tex4ht</a>, <a href="https://chaos.social/tags/Pandoc" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Pandoc</a>, <a href="https://chaos.social/tags/LaTeXML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#LaTeXML</a>, <a href="https://chaos.social/tags/lwarp" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#lwarp</a> und auch der Weg via <a href="https://chaos.social/tags/NGPDF" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#NGPDF</a> (HTML aus den <a href="https://chaos.social/tags/TaggedPDF" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#TaggedPDF</a>) gezeigt und verglichen.<a href="https://chaos.social/tags/DANTE2025" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DANTE2025</a> <a href="https://chaos.social/tags/TeX" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#TeX</a> <a href="https://chaos.social/tags/LaTeX" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#LaTeX</a>

adamghillThis explains an approach I’ve been dabbling with here and there for <a href="https://indieweb.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>. Nice middle ground between “div soup” and the “all utility classes” approaches. <a href="https://jordanbrennan.hashnode.dev/tac-a-new-css-methodology" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://jordanbrennan.hashnode.dev/tac-a-new-css-methodology</a> <a href="https://indieweb.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a>

Reilly Spitzfaden (they/them)I hadn't heard of it before, but it turns out there's a style format called XSLT that allows the browser to translate an XML file into HTML with CSS styling for display purposes. Since my feed is Atom rather than RSS, I had a bit of trouble, but this post was helpful:<a href="https://andrewstiefel.com/style-atom-xsl/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://andrewstiefel.com/style-atom-xsl/</a><a href="https://hachyderm.io/tags/RSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#RSS</a> <a href="https://hachyderm.io/tags/Atom" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Atom</a> <a href="https://hachyderm.io/tags/XML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#XML</a> <a href="https://hachyderm.io/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://hachyderm.io/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://hachyderm.io/tags/XSL" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#XSL</a> <a href="https://hachyderm.io/tags/XSLT" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#XSLT</a> <a href="https://hachyderm.io/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://hachyderm.io/tags/IndieWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#IndieWeb</a> <a href="https://hachyderm.io/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a>

Reilly Spitzfaden (they/them)I figured out how to get my RSS feed to be human-readable and nice-looking! I'd been wanting to do this to give people who aren't familiar with RSS an easier on-ramp to the stuff I care about. I figure if someone new to RSS clicks on the link and just gets raw XML, they might think something is “broken” and not stick around, but now there's something human-readable and with instructions on how to follow it in a reader.<a href="https://reillyspitzfaden.com/feed.xml" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://reillyspitzfaden.com/feed.xml</a><a href="https://hachyderm.io/tags/RSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#RSS</a> <a href="https://hachyderm.io/tags/Atom" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Atom</a> <a href="https://hachyderm.io/tags/XML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#XML</a> <a href="https://hachyderm.io/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://hachyderm.io/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://hachyderm.io/tags/XSL" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#XSL</a> <a href="https://hachyderm.io/tags/XSLT" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#XSLT</a> <a href="https://hachyderm.io/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://hachyderm.io/tags/IndieWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#IndieWeb</a> <a href="https://hachyderm.io/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a>

David Bisset"Rewriting my site in vanilla web"<a href="https://leanrada.com/notes/vanilla-web-rewrite/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://leanrada.com/notes/vanilla-web-rewrite/</a><a href="https://phpc.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://phpc.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> <a href="https://phpc.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://phpc.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>

Adrian RoselliNew post: “Mainlining Mains” <a href="https://adrianroselli.com/2025/04/mainlining-mains.html" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://adrianroselli.com/2025/04/mainlining-mains.html</a><a href="https://toot.cafe/tags/accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#accessibility</a> <a href="https://toot.cafe/tags/a11y" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#a11y</a> <a href="https://toot.cafe/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://toot.cafe/tags/ARIA" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ARIA</a>

David O'BrienThis is a nice approach to <a href="https://mastodon.scot/tags/responsive" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#responsive</a> <a href="https://mastodon.scot/tags/tables" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tables</a> in <a href="https://mastodon.scot/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> from the BBC<a href="https://www.bbc.co.uk/sport/football/scottish-championship/table" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.bbc.co.uk/sport/football/scottish-championship/table</a>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 ;)<a href="https://mastodon.scot/tags/A11y" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#A11y</a> <a href="https://mastodon.scot/tags/Accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Accessibility</a>

Jack C.Finally got the blog section of my wife's website to a point where I was comfortable putting it online. It's my first fully hand-coded HTML/CSS project and I knew I wanted it to feel fun and not look like bootstrap. I know there's plenty I could improve, but I think this is a good milestone. For instance, who knows what the preview card will look like? <a href="https://mskiersten.com/blog/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://mskiersten.com/blog/</a><a href="https://indieweb.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://indieweb.social/tags/wagtail" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#wagtail</a> <a href="https://indieweb.social/tags/django" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#django</a> <a href="https://indieweb.social/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://indieweb.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://indieweb.social/tags/personalsite" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#personalsite</a> <a href="https://indieweb.social/tags/blog" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blog</a>

LtningTrying to optimise <a href="http://floppy.museum" rel="nofollow noopener noreferrer" target="_blank">http://floppy.museum</a> for (even) older browsers. Some of the issues I'm trying to solve include utf8-to-latin1 translation (the original HTML has some silly double- and triple-byte characters), and variations of JPEG that simply aren't understood. Turns 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 😉 <a href="https://weirdr.net/snac?t=retrocomputing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#retrocomputing</a> <a href="https://weirdr.net/snac?t=browsers" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#browsers</a> <a href="https://weirdr.net/snac?t=floppy" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#floppy</a> <a href="https://weirdr.net/snac?t=museum" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#museum</a> <a href="https://weirdr.net/snac?t=html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://weirdr.net/snac?t=browserwars" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#BrowserWars</a>

jfmblinux :jeditux:SVG and PNG tech iconsDownload, copy and paste tech icons in SVG and PNG format for your projects. <a href="https://mastodon.jfmblinux.fr/tags/Html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Html</a> <a href="https://mastodon.jfmblinux.fr/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.jfmblinux.fr/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://mastodon.jfmblinux.fr/tags/PNG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#PNG</a> <a href="https://mastodon.jfmblinux.fr/tags/Mastodon" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Mastodon</a> <a href="https://mastodon.jfmblinux.fr/tags/Fediverse" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Fediverse</a> <a href="https://mastodon.jfmblinux.fr/tags/Pixelfed" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Pixelfed</a> <a href="https://mastodon.jfmblinux.fr/tags/Nextcloud" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Nextcloud</a> <a href="https://techicons.dev/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://techicons.dev/</a>

James ScholesRecent 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 <a href="https://dragonscave.space/tags/screenReader" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#screenReader</a> 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 <a href="https://dragonscave.space/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> is not always the most <a href="https://dragonscave.space/tags/accessible" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#accessible</a> or user-friendly.<a href="https://dragonscave.space/tags/accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#accessibility</a> <a href="https://dragonscave.space/tags/usability" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#usability</a>

Aral BalkanNew Kitten update• 🥳 Kitten HTML templates and kitten.Component render functions can now be async.<a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org</a>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:💕<a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/async" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#async</a> <a href="https://mastodon.ar.al/tags/components" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#components</a> <a href="https://mastodon.ar.al/tags/templates" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#templates</a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> <a href="https://mastodon.ar.al/tags/NodeJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#NodeJS</a> <a href="https://mastodon.ar.al/tags/generators" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#generators</a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a>

Terence Eden’s BlogPretty Print HTML using PHP 8.4's new HTML DOM<a href="https://shkspr.mobi/blog/2025/03/pretty-print-html-using-php-8-4s-new-html-dom/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://shkspr.mobi/blog/2025/03/pretty-print-html-using-php-8-4s-new-html-dom/</a>Those whom the gods would send mad, they first teach recursion.PHP 8.4 introduces a new <a href="https://www.php.net/manual/en/class.dom-htmldocument.php" rel="nofollow noopener noreferrer" target="_blank">Dom\HTMLDocument class</a> it is a modern HTML5 replacement for the ageing XHTML based DOMDocument. You can <a href="https://wiki.php.net/rfc/domdocument_html5_parser" rel="nofollow noopener noreferrer" target="_blank">read more about how it works</a> - the short version is that it reads and correctly sanitises HTML and turns it into a nested object. Hurrah!The one thing it doesn't do is pretty-printing. When you call <code>$dom->saveHTML()</code> it will output something like:<pre><code><html lang="en-GB"><head><title>Test</title></head><body><h1>Testing</h1><main>Some HTML and an <img src="example.png"><ol><li>List</li><li>Another list</li></ol></main></body></html></code></pre>Perfect for a computer to read, but slightly tricky for humans.As was <a href="https://libraries.mit.edu/150books/2011/05/11/1985/" rel="nofollow noopener noreferrer" target="_blank">written by the sages</a>:<blockquote>A computer language is not just a way of getting a computer to perform operations but rather … it is a novel formal medium for expressing ideas about methodology. Thus, programs must be written for people to read, and only incidentally for machines to execute.</blockquote>HTML is a programming language. Making markup easy to read for humans is a fine and noble goal. The aim is to turn the single line above into something like:<pre><code><html lang="en-GB"> <head> <title>Test</title> </head> <body> <h1>Testing</h1> <main> Some HTML and an <img src="example.png"> <ol> <li>List</li> <li>Another list</li> </ol> </main> </body></html></code></pre>Cor! That's much better!I've cobbled together a script which is broadly accurate. There are a million-and-one edge cases and about twice as many personal preferences. This aims to be quick, simple, and basically fine. I am indebted to <a href="https://topic.alibabacloud.com/a/php-domdocument-recursive-formatting-of-indented-html-documents_4_86_30953142.html" rel="nofollow noopener noreferrer" target="_blank">this random Chinese script</a> and to <a href="https://github.com/wasinger/html-pretty-min" rel="nofollow noopener noreferrer" target="_blank">html-pretty-min</a>.Step By StepI'm going to walk through how everything works. This is as much for my benefit as for yours! This is beta code. It sorta-kinda-works for me. Think of it as a first pass at an attempt to prove that something can be done. Please don't use it in production!Setting up the DOMThe new HTMLDocument should be broadly familiar to anyone who has used the previous one.<pre><code>$html = '<html lang="en-GB"><head><title>Test</title></head><body><h1>Testing</h1><main>Some HTML and an <img src="example.png"><ol><li>List<li>Another list</body></html>'$dom = Dom\HTMLDocument::createFromString( $html, LIBXML_NOERROR, "UTF-8" );</code></pre>This automatically adds <code><head></code> and <code><body></code> elements. If you don't want that, use the <a href="https://www.php.net/manual/en/libxml.constants.php#constant.libxml-html-noimplied" rel="nofollow noopener noreferrer" target="_blank"><code>LIBXML_HTML_NOIMPLIED</code> flag</a>:<pre><code>$dom = Dom\HTMLDocument::createFromString( $html, LIBXML_NOERROR | LIBXML_HTML_NOIMPLIED, "UTF-8" );</code></pre>Where not to indentThere are certain elements whose contents shouldn't be pretty-printed because it might change the meaning or layout of the text. For example, in a paragraph:<pre><code> Some HT M L </code></pre>I've picked these elements from <a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#text-level-semantics" rel="nofollow noopener noreferrer" target="_blank">text-level semantics</a> and a few others which I consider sensible. Feel free to edit this list if you want.<pre><code>$preserve_internal_whitespace = [ "a", "em", "strong", "small", "s", "cite", "q", "dfn", "abbr", "ruby", "rt", "rp", "data", "time", "pre", "code", "var", "samp", "kbd", "sub", "sup", "b", "i", "mark", "u", "bdi", "bdo", "span", "h1", "h2", "h3", "h4", "h5", "h6", "p", "li", "button", "form", "input", "label", "select", "textarea",];</code></pre>The function has an option to force indenting every time it encounters an element.Tabs 🆚 SpaceTabs, obviously. Users can set their tab width to their personal preference and it won't get confused with semantically significant whitespace.<pre><code>$indent_character = "\t";</code></pre>Recursive FunctionThis function reads through each node in the HTML tree. If the node should be indented, the function inserts a new node with the requisite number of tabs before the existing node. It also adds a suffix node to indent the next line appropriately. It then goes through the node's children and recursively repeats the process.This modifies the existing Document.<pre><code>function prettyPrintHTML( $node, $treeIndex = 0, $forceWhitespace = false ){ global $indent_character, $preserve_internal_whitespace; // If this node contains content which shouldn't be separately indented // And if whitespace is not forced if ( property_exists( $node, "localName" ) && in_array( $node->localName, $preserve_internal_whitespace ) && !$forceWhitespace ) { return; } // Does this node have children? if( property_exists( $node, "childElementCount" ) && $node->childElementCount > 0 ) { // Move in a step $treeIndex++; $tabStart = "\n" . str_repeat( $indent_character, $treeIndex ); $tabEnd = "\n" . str_repeat( $indent_character, $treeIndex - 1); // Remove any existing indenting at the start of the line $node->innerHTML = trim($node->innerHTML); // Loop through the children $i=0; while( $childNode = $node->childNodes->item( $i++ ) ) { // Was the *previous* sibling a text-only node? // If so, don't add a previous newline if ( $i > 0 ) { $olderSibling = $node->childNodes->item( $i-1 ); if ( $olderSibling->nodeType == XML_TEXT_NODE && !$forceWhitespace ) { $i++; continue; } $node->insertBefore( $node->ownerDocument->createTextNode( $tabStart ), $childNode ); } $i++; // Recursively indent all children prettyPrintHTML( $childNode, $treeIndex, $forceWhitespace ); }; // Suffix with a node which has "\n" and a suitable number of "\t" $node->appendChild( $node->ownerDocument->createTextNode( $tabEnd ) ); }}</code></pre>Printing it outFirst, call the function. This modifies the existing Document.<pre><code>prettyPrintHTML( $dom->documentElement );</code></pre>Then call <a href="https://www.php.net/manual/en/dom-htmldocument.savehtml.php" rel="nofollow noopener noreferrer" target="_blank">the normal <code>saveHtml()</code> serialiser</a>:<pre><code>echo $dom->saveHTML();</code></pre>Note - this does not print a <code><!doctype html></code> - you'll need to include that manually if you're intending to use the entire document.LicenceI consider the above too trivial to licence - but you may treat it as MIT if that makes you happy.Thoughts? Comments? Next steps?I've not written any formal tests, nor have I measured its speed, there may be subtle-bugs, and catastrophic errors. I know it doesn't work well if the HTML is already indented. It mysteriously prints double newlines for some unfathomable reason.I'd love to know if you find this useful. Please <a href="https://gitlab.com/edent/pretty-print-html-using-php/" rel="nofollow noopener noreferrer" target="_blank">get involved on GitLab</a> or drop a comment here.<a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/howto/" target="_blank">#HowTo</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/html/" target="_blank">#HTML</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/php/" target="_blank">#php</a>

Terence Eden🆕 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: <a href="https://shkspr.mobi/blog/2025/03/pretty-print-html-using-php-8-4s-new-html-dom/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://shkspr.mobi/blog/2025/03/pretty-print-html-using-php-8-4s-new-html-dom/</a> ⸻ <a href="https://mastodon.social/tags/HowTo" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HowTo</a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/php" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#php</a>

Mia HolteVi er i 2025, og det finnes fortsatt ikke en html tag for ingress. Feks <preamble>. Noen som vet om det er i horisonten? <a href="https://snabelen.no/tags/html" class="mention hashtag" rel="tag">#html</a> <a href="https://snabelen.no/tags/norsktut" class="mention hashtag" rel="tag">#norsktut</a> <a href="https://snabelen.no/tags/uu" class="mention hashtag" rel="tag">#uu</a>

Tommi 🤯Looking for CMS adviceHey 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 <a href="https://toot.village.one/@VillageOneCoop" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@VillageOneCoop</a>, 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 <a href="https://jamstack.org/headless-cms/" rel="nofollow noopener noreferrer" target="_blank">Headless CMS section in the Jamstack website</a>, but I need opinions from people who actually used some of that software already.Needs<ul><li>I want to code and configure everything using <a href="https://fosstodon.org/@eleventy" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@eleventy</a></li><li>Admin interface (<a href="https://pan.rent/tags/WebApp" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebApp</a>) for the client to add pages and write posts</li><li>Static website in the front-end</li><li>Simple and reliable CI/CD</li><li>No/minimal maintenance after the first setup</li><li>Self-hostable (I was taking this for granted so much that I forgot to write it)</li><li>If it requires forge integration, it should support <a href="https://pan.rent/tags/ForgeJo" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ForgeJo</a></li><li><a href="https://pan.rent/tags/OpenSource" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#OpenSource</a></li></ul>Nice to have<ul><li>Possibly using <a href="https://pan.rent/tags/Deno" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Deno</a>, not <a href="https://pan.rent/tags/NodeJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#NodeJS</a></li><li>Allowing the client to customize a bit their website through the admin interface, with a GUI</li><li>CMS app packaged on <a href="https://toot.aquilenet.fr/@yunohost" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@yunohost</a></li><li>No CMS vendor lock-in</li><li>I’d love to write as little JavaScript as possible</li><li><a href="https://pan.rent/tags/FreeSoftware" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FreeSoftware</a></li></ul>Absolutely not<ul><li>Front-end <a href="https://pan.rent/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> frameworks</li></ul>Please, boost this and ask around! Links to videos, tutorials, and resources are welcome.People whose perspective I would really value: <a href="https://fediverse.zachleat.com/@zachleat" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@zachleat</a> <a href="https://mastodon.social/@harryfk" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@harryfk</a> <a href="https://fosstodon.org/@deno_land" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@deno_land</a> <a href="https://indieweb.social/@jaredwhite" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@jaredwhite</a> <a href="https://intuitivefuture.com/@vanillaweb" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@vanillaweb</a> <a href="https://stefanbohacek.online/@stefan" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@stefan</a> <a href="https://front-end.social/@mxbck" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@mxbck</a> <a href="https://caneandable.social/@WeirdWriter" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@WeirdWriter</a> <a href="https://social.wedistribute.org/users/deadsuperhero" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@deadsuperhero</a> (Sorry if I am spamming you!)<a href="https://pan.rent/tags/Eleventy" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Eleventy</a> <a href="https://pan.rent/tags/11ty" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#11ty</a> <a href="https://pan.rent/tags/CMS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CMS</a> <a href="https://pan.rent/tags/HeadlessCMS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HeadlessCMS</a> <a href="https://pan.rent/tags/Ghost" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Ghost</a> <a href="https://pan.rent/tags/DecapCMS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DecapCMS</a> <a href="https://pan.rent/tags/CraftCMS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CraftCMS</a> <a href="https://pan.rent/tags/Strapi" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Strapi</a> <a href="https://pan.rent/tags/Web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Web</a> <a href="https://pan.rent/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://pan.rent/tags/WebDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDesign</a> <a href="https://pan.rent/tags/StaticGen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#StaticGen</a> <a href="https://pan.rent/tags/StaticWebsite" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#StaticWebsite</a> <a href="https://pan.rent/tags/Website" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Website</a> <a href="https://pan.rent/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://pan.rent/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://pan.rent/tags/YunoHost" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#YunoHost</a> <a href="https://pan.rent/tags/SelfHosting" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SelfHosting</a> <a href="https://pan.rent/tags/Wordpress" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Wordpress</a>

James :ruby:> Configuring Zed editor to use HTML Beautifier as a formatter in ERB templates<a href="https://jamesmead.org/blog/2025-03-30-configuring-zed-editor-to-use-htmlbeautifier-as-formatter-in-erb-template" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://jamesmead.org/blog/2025-03-30-configuring-zed-editor-to-use-htmlbeautifier-as-formatter-in-erb-template</a><a href="https://ruby.social/tags/zed" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#zed</a> <a href="https://ruby.social/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://ruby.social/tags/erb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#erb</a> <a href="https://ruby.social/tags/ruby" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ruby</a>

Nylige søk

Alternativer for søk

Administrert av:

Serverstatistikk:

#html