#HTML

30 posts29 participants2 posts today

Helen Fernanda👩🏽‍💻 CSS | Um pouco mais sobre text-decoration🔗 <a href="https://www.meutedio.com/2025/04/css-um-pouco-mais-sobre-text-decoration.html" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.meutedio.com/2025/04/css-um-pouco-mais-sobre-text-decoration.html</a><a href="https://social.vivaldi.net/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://social.vivaldi.net/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a>

argv minus oneI want a program that looks over an <a href="https://mastodon.sdf.org/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> document and its <a href="https://mastodon.sdf.org/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> stylesheets, and applies the stylesheets' rules as `style` attributes on the HTML elements in the document.Meaning this:<html> <style>p:first-child { margin-top: 0 }</style> First paragraph Second paragraph </html>Translates into this:<html> First paragraph Second paragraph </html>Is that a thing?<a href="https://mastodon.sdf.org/tags/programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#programming</a> <a href="https://mastodon.sdf.org/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a>

Helen Fernanda👩🏽‍💻 CSS | Enfeitando com text-emphasis🔗 <a href="https://www.meutedio.com/2025/04/css-enfeitando-com-text-emphasis.html" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.meutedio.com/2025/04/css-enfeitando-com-text-emphasis.html</a><a href="https://social.vivaldi.net/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://social.vivaldi.net/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://social.vivaldi.net/tags/caractere" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#caractere</a>

CSS by T. Afif :verified:💡 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!<a href="https://css-tip.com/fluid-typography/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://css-tip.com/fluid-typography/</a><a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://front-end.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a>

Helen Fernanda👩🏽‍💻 CSS | Barra de rolagem colorida com scrollbar-color🔗 <a href="https://www.meutedio.com/2025/04/css-barra-rolagem-scrollbar-color.html" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.meutedio.com/2025/04/css-barra-rolagem-scrollbar-color.html</a> <a href="https://social.vivaldi.net/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://social.vivaldi.net/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://social.vivaldi.net/tags/colors" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#colors</a> <a href="https://social.vivaldi.net/tags/cores" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cores</a>

Alvaro MontoroThe HTML standard defines many entities for prime symbols: single prime (′), double prime (″), triple prime (‴), it even has a quadruple prime (⁗)! And reverse primes, too! But I'm still waiting for the most important one of them all: the optimus prime. <a href="https://comicss.art/comics/175/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://comicss.art/comics/175/</a><a href="https://front-end.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://front-end.social/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://front-end.social/tags/cartoon" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cartoon</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>

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. Noen som vet om det er i horisonten? <a href="https://snabelen.no/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://snabelen.no/tags/norsktut" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#norsktut</a> <a href="https://snabelen.no/tags/uu" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#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>

Jon HenshawThe image srcset property is primarily used to serve resized images for responsive layouts. However, it can also serve uniquely different images, significantly improving a visitor's experience and engagement on a web page.<a href="https://coywolf.pro/webdev/why-you-should-do-more-than-resizing-images-with-the-srcset-property/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://coywolf.pro/webdev/why-you-should-do-more-than-resizing-images-with-the-srcset-property/</a><a href="https://henshaw.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDesign</a> <a href="https://henshaw.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://henshaw.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a>

Christian AlderParallax layers 😊 A subtle shift across 13 layers kept within a frame on the page. 🦖 CodePen: <a href="https://codepen.io/HejChristian/full/ZYEqoXd" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/HejChristian/full/ZYEqoXd</a><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/JS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JS</a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a>

Terence Eden’s BlogHow to prevent Payment Pointer fraud<a href="https://shkspr.mobi/blog/2025/03/how-to-prevent-payment-pointer-fraud/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://shkspr.mobi/blog/2025/03/how-to-prevent-payment-pointer-fraud/</a>There's a new Web Standard in town! Meet <a href="https://webmonetization.org" rel="nofollow noopener noreferrer" target="_blank">WebMonetization</a> - it aims to be a low effort way to help users passively pay website owners.The pitch is simple. A website owner places a single new line in their HTML's <code><head></code> - something like this:<pre><code><link rel="monetization" href="https://wallet.example.com/edent" /></code></pre>That address is a "<a href="https://paymentpointers.org/" rel="nofollow noopener noreferrer" target="_blank">Payment Pointer</a>". As a user browses the web, their browser takes note of all the sites they've visited. At the end of the month, the funds in the user's digital wallet are split proportionally between the sites which have enabled WebMonetization. The user's budget is under their control and there are various technical measures to stop websites hijacking funds.This could be revolutionary0.But there are some interesting fraud angles to consider. Let me give you a couple of examples.Pointer HijackingSuppose I hacked into a popular site like BBC.co.uk and surreptitiously included my link in their HTML. Even if I was successful for just a few minutes, I could syphon off a significant amount of money.At the moment, the WebMonetization plugin only looks at the page's HTML to find payment pointers. There's no way to say "This site doesn't use WebMonetization" or an out-of-band way to signal which Payment Pointer is correct. Obviously there are lots of ways to profit from hacking a website - but most of them are ostentatious or require the user to interact. This is subtle and silent.How long would it take you to notice that a single meta element had snuck into some complex markup? When you discover it, what can you do? Money sent to that wallet can be transferred out in an instant. You might be able to get the wallet provider to freeze the funds or suspend the account, but that may not get you any money back.Similarly, a <a href="https://lifehacker.com/tech/honey-influencer-scam-explained" rel="nofollow noopener noreferrer" target="_blank">Web Extension like Honey</a> could re-write the page's source code to remove or change an existing payment pointer.Possible SolutionsPerhaps the username associated with a Payment Pointer should be that of the website it uses? something like <code>href="https://wallet.example.com/shkspr.mobi"</code>That's superficially attractive, but comes with issues. I might have several domains - do I want to create a pointer for each of them?There's also a legitimate use-case for having my pointer on someone else's site. Suppose I write a guest article for someone - their website might contain:<pre><code><link rel="monetization" href="https://wallet.example.com/edent" /><link rel="monetization" href="https://wallet.coin_base.biz/BigSite" /></code></pre>Which would allow us to split the revenue.Similarly, a site like GitHub might let me use my Payment Pointer when people are visiting my specific page.So, perhaps site owners should add a <a href="https://en.wikipedia.org/wiki/Well-known_URI" rel="nofollow noopener noreferrer" target="_blank">.well-known directive</a> which lists acceptable Pointers? Well, if I have the ability to add arbitrary HTML to a site, I might also be able to upload files. So it isn't particularly robust protection.Alright, what are other ways typically used to prove the legitimacy of data? DNS maybe? As <a href="https://knowyourmeme.com/memes/one-more-lane-bro-one-more-lane-will-fix-it" rel="nofollow noopener noreferrer" target="_blank">the popular meme goes</a>:<blockquote> <a href="https://infosec.exchange/@atax1a" class="" rel="nofollow noopener noreferrer" target="_blank"> @atax1a@infosec.exchangemx alex tax1a - 2020 (5) </a><a href="https://infosec.exchange/@atax1a" class="" rel="nofollow noopener noreferrer" target="_blank"></a> <a href="https://mastodon.social/@jwz" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@jwz</a> <a href="https://toad.social/@grumpybozo" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@grumpybozo</a> just one more public key in a TXT record, that'll fix email, just gotta add one more TXT record bro <a href="https://infosec.exchange/@atax1a/114213713873874536" rel="nofollow noopener noreferrer" target="_blank">❤️ 198💬 5🔁 8520:49 - Sun 23 March 2025</a> </blockquote>Someone with the ability to publish on a website is less likely to have access to DNS records. So having (yet another) DNS record could provide some protection. But DNS is tricky to get right, annoying to update, and a pain to repeatedly configure if you're constantly adding and removing legitimate users.Reputation HijackingSuppose the propaganda experts in The People's Republic of Blefuscu decide to launch a fake site for your favourite political cause. It contains all sorts of horrible lies about a political candidate and tarnishes the reputation of something you hold dear. The sneaky tricksters put in a Payment Pointer which is the same as the legitimate site."This must be an official site," people say. "Look! It even funnels money to the same wallet as the other official sites!"There's no way to disclaim money sent to you. Perhaps a political opponent operates an illegal Bonsai Kitten farm - but puts your Payment Pointer on it."I don't squash kittens into jars!" You cry as they drag you away. The police are unconvinced "Then why are you profiting from it?"Possible SolutionsA wallet provider needs to be able to list which sites are your sites.You log in to your wallet provider and fill in a list of websites you want your Payment Pointer to work on. Add your blog, your recipe site, your homemade video forum etc. When a user browses a website, they see the Payment Pointer and ask it for a list of valid sites. If "BonsaiKitten.biz" isn't on there, no payment is sent.Much like OAuth, there is an administrative hassle to this. You may need to regularly update the sites you use, and hope that your forgetfulness doesn't cost you in lost income.Final ThoughtsI'm moderately excited about WebMonetization. If it lives up to its promises, it could unleash a new wave of sustainable creativity across the web. If it is easier to make micropayments or donations to sites you like, without being subject to the invasive tracking of adverts, that would be brilliant.The problems I've identified above are (I hope) minor. Someone sending you money without your consent may be concerning, but there's not much of an economic incentive to enrich your foes.Think I'm wrong? Reckon you've found another fraudulent avenue? Want to argue about whether this is a likely problem? Stick a comment in the box. <ol start="0"><li>To be fair, <a href="https://shkspr.mobi/blog/2020/10/adding-web-monetization-to-your-site-using-coil/" rel="nofollow noopener noreferrer" target="_blank">Coil tried this in 2020</a> and it didn't take off. But the new standard has a lot less cryptocurrency bollocks, so maybe it'll work this time? ↩︎</li></ol> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/cybersecurity/" target="_blank">#CyberSecurity</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/dns/" target="_blank">#dns</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/standards/" target="_blank">#standards</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/webmonitization/" target="_blank">#WebMonitization</a>

Terence Eden🆕 blog! “How to prevent Payment Pointer fraud”There's a new Web Standard in town! Meet WebMonetization - it aims to be a low effort way to help users passively pay website owners.The pitch is simple. A website owner places a single new line in their HTML's <head> - something like this:<link rel="monetization"…👀 Read more: <a href="https://shkspr.mobi/blog/2025/03/how-to-prevent-payment-pointer-fraud/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://shkspr.mobi/blog/2025/03/how-to-prevent-payment-pointer-fraud/</a> ⸻ <a href="https://mastodon.social/tags/CyberSecurity" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CyberSecurity</a> <a href="https://mastodon.social/tags/dns" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dns</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/standards" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#standards</a> <a href="https://mastodon.social/tags/WebMonitization" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebMonitization</a>

codeDude :archlinux: :neovim:<a href="https://fosstodon.org/@s31bz" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@s31bz</a> I know <a href="https://fosstodon.org/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> (How to Meet Ladies)

Jonathan LamotheI am in urgent job search mode, so I'm gonna throw this out here and see if anything comes of it.I am a <a href="https://social.jlamothe.net/search?tag=Canadian" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Canadian</a>, fluent in both <a href="https://social.jlamothe.net/search?tag=English" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#English</a> and <a href="https://social.jlamothe.net/search?tag=French" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#French</a>. I have experience with several programming languages. My strongest proficiency is with <a href="https://social.jlamothe.net/search?tag=Haskell" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Haskell</a> and <a href="https://social.jlamothe.net/search?tag=C" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#C</a>. I also have a reasonable grasp of <a href="https://social.jlamothe.net/search?tag=HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a>, <a href="https://social.jlamothe.net/search?tag=JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a>, <a href="https://social.jlamothe.net/search?tag=SQL" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SQL</a>, <a href="https://social.jlamothe.net/search?tag=Python" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Python</a>, <a href="https://social.jlamothe.net/search?tag=Lua" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Lua</a>, <a href="https://social.jlamothe.net/search?tag=Linux" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Linux</a> system administration, <a href="https://social.jlamothe.net/search?tag=bash" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#bash</a> scripting, <a href="https://social.jlamothe.net/search?tag=Perl" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Perl</a>, <a href="https://social.jlamothe.net/search?tag=AWK" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#AWK</a>, some <a href="https://social.jlamothe.net/search?tag=Lisp" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Lisp</a> (common, scheme, and emacs), and probably several others I've forgotten to mention.I am not necessarily looking for something in tech. I just need something stable. I have done everything from software development, to customer support, to factory work, though my current circumstances make in-person work more difficult than remote work. I have been regarded as a hard worker in every job I have ever held.<a href="https://social.jlamothe.net/search?tag=GetFediHired" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#GetFediHired</a>

Marijke LuttekesAs a… person who uses right-click "open in new tab" often,I want… developers to finally learn the difference between a button and a link,So that… I can stop hating on their interface.<a href="https://fosstodon.org/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://fosstodon.org/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://fosstodon.org/tags/UX" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#UX</a>

CSS by T. Afif :verified:Here is another implementation where you can define an array of colors and the number of ranges. The color will automatically adjust based on the progression!✅ 0% JavaScript ✅ 100% "Programming with CSS"Demo: <a href="https://codepen.io/t_afif/pen/LEYJGoQ" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/t_afif/pen/LEYJGoQ</a> via :codepen: <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> Online Version: <a href="https://css-tip.com/custom-progress/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://css-tip.com/custom-progress/</a> <a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://front-end.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a>

Recent searches

Search options

Administered by:

Server stats: