mastodon.xyz is one of the many independent Mastodon servers you can use to participate in the fediverse.
A Mastodon instance, open to everyone, but mainly English and French speaking.

Administered by:

Server stats:

745
active users

#html

46 posts42 participants2 posts today
Frontend Dogma<p>A Progressive Complexity Manifesto, by @cheddybop.bsky.social:</p><p><a href="https://www.lorenstew.art/blog/progressive-complexity-manifesto" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">lorenstew.art/blog/progressive</span><span class="invisible">-complexity-manifesto</span></a></p><p><a href="https://mas.to/tags/manifestos" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>manifestos</span></a> <a href="https://mas.to/tags/complexity" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>complexity</span></a> <a href="https://mas.to/tags/webapps" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webapps</span></a> <a href="https://mas.to/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>html</span></a> <a href="https://mas.to/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>htmx</span></a> <a href="https://mas.to/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>javascript</span></a> <a href="https://mas.to/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webcomponents</span></a> <a href="https://mas.to/tags/frameworks" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>frameworks</span></a> <a href="https://mas.to/tags/principles" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>principles</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Development</span></a> <br>What to know about modern CSS in 2025 · There is more this year than there was last <a href="https://ilo.im/16711o" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/16711o</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/ModernCSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ModernCSS</span></a> <a href="https://mastodon.social/tags/BrowserSupport" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>BrowserSupport</span></a> <a href="https://mastodon.social/tags/ProgressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProgressiveEnhancement</span></a> <a href="https://mastodon.social/tags/Polyfill" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Polyfill</span></a> <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Browser</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a></p>
Frontend Dogma<p>The “picture” Element, by <span class="h-card" translate="no"><a href="https://front-end.social/@kevinpowell" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>kevinpowell</span></a></span>:</p><p><a href="https://html-css-tip-of-the-week.netlify.app/tip/the-picture-element/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">html-css-tip-of-the-week.netli</span><span class="invisible">fy.app/tip/the-picture-element/</span></a></p><p><a href="https://mas.to/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>html</span></a></p>
Otto Rask<p>What is the deal with people using Tailwind CSS or comparable and not being able to add any other class names or IDs to HTML elements other than what the tool offers?</p><p>I really hate writing browser user styles for Tailwind sites (to fix readability or other issues) because I don't get to use something like `main .aside-left &gt; .meta` to apply styles. Instead I have to build some intricate `main .lg-pad-2.fg-color-3.foobar-md-16 &gt; .bg-color-1.lg-pad-4` to get it done.</p><p><a href="https://piipitin.fi/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://piipitin.fi/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://piipitin.fi/tags/TailwindCSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>TailwindCSS</span></a></p>
Terence Eden’s Blog<p><strong>Class Warfare! Can I eliminate CSS classes from my HTML?</strong></p><p><a href="https://shkspr.mobi/blog/2025/09/class-warfare-can-i-eliminate-css-classes-from-my-html/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">shkspr.mobi/blog/2025/09/class</span><span class="invisible">-warfare-can-i-eliminate-css-classes-from-my-html/</span></a></p><p></p><p>I recently read a brilliantly provocative blog post called "<a href="https://aaadaaam.com/notes/no-class/" rel="nofollow noopener noreferrer" target="_blank">This website has no class</a>". In it, Adam Stoddard makes the case that you might not need CSS classes on a modern website:</p><blockquote><p>I think constraints lead to interesting, creative solutions […]. Instead of relying on built in elements a bit more, I decided to banish classes from my website completely.</p></blockquote><p>Long time readers will know that I'm a big fan of using semantic HTML where possible. If you peek beneath the curtain of this website you'll only see a handful of <code>&lt;div&gt;</code> elements (mostly because WordPress hardcodes them) - all the other blocks are fully semantic. Regrettably, there are rather too many <code>&lt;span&gt;</code> elements for my liking - normally for accessibility or for supplementing the metadata.</p><p>Overall, my CSS contained about 134 rules which selected based on class. Is that a lot? It <em>feels</em> like a lot.</p><p>On the one hand, classes are an easy way of splitting and grouping elements. Some <code>&lt;img&gt;</code>s should be displayed one way, the rest another. There's no semantic way to say "This is a hero image and should take up the full width, but this is an icon and should float discretely to the right."</p><p>But, on the other hand, <em>why</em> do we need classes? Keith Cirkel's excellent post "<a href="https://www.keithcirkel.co.uk/css-classes-considered-harmful/" rel="nofollow noopener noreferrer" target="_blank">CSS Classes considered harmful</a>" goes through their history and brings together some proposed solutions for replacing them. I think his idea of using <code>data-</code> attributes is a neat hack - but ultimately isn't much different from using classes. It's still a scrap of metadata to be tied into a style-sheet.</p><p>Classes are great for when you <em>reuse</em> something. I have multiple <code>&lt;section&gt;</code> elements but most don't share anything in common with the others. So they probably oughtn't have classes.</p><p>Removing classes has some advantages. It makes the HTML fractionally smaller, sure, but it also forces the author to think about the logical structure of their page and the semantics behind it.</p><p>Looking through my HTML, lots of classes exist because of laziness. If I want to position all the <code>&lt;time&gt;</code> elements which are within a comment, I don't <em>need</em> to write <code>&lt;time class="whatever"&gt;</code> and to pair it with <code>.whatever { … }</code>. Instead, I can use modern CSS selectors and say <code>#comments time { … }</code>.</p><p>But this leads me on to another existential question.</p><p><strong>Are IDs necessary in modern HTML?</strong></p><p>Mayyyyybe? I only have one <code>&lt;main&gt;</code> element, so an ID on there is unnecessary. <code>&lt;input&gt;</code> elements need IDs in order to be properly targetted by <code>&lt;label&gt;</code>s - but the label can wrap around the input. I have multiple <code>&lt;aside&gt;</code> elements because there's no semantic <code>&lt;widget&gt;</code> element, so they need unique IDs.</p><p>In theory, as suggested by Adam above, I could use an <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements" rel="nofollow noopener noreferrer" target="_blank">autonomous custom element</a> like <code>&lt;my-widget&gt;</code> - but that has none of the semantics and, frankly, feels like a bit of a cheat.</p><p><strong>Trimming the fat</strong></p><p>Any day where I can delete some code is a good day. This was an excellent exercise in going through (years) of HTML and CSS to see what cruft had built up.</p><p>The first CSS rule I changed was, as mentioned above:</p><pre><code>time.commentmetadata { float: right;}</code></pre><p>Which became:</p><pre><code>#comments time { float: right;}</code></pre><p>Classless and slightly more brief. Is it more readable? Having the fact it was about the metadata in a class could have been slightly useful - but if I thought it would be confusing, I could stick a <code>/* comment */</code> in there.</p><p>Next, I found <code>&lt;nav class="navigation posts-navigation"&gt;</code> - what a tautology! I have multiple <code>&lt;nav&gt;</code> elements, it is true. But none of them have the same style. So this swiftly became <code>&lt;nav id="posts-navigation"&gt;</code> with an accompanying CSS rewrite.</p><p>My theme switcher had a bunch of <code>&lt;label class=button&gt;</code>s. They were all within a container with a unique ID, so could they be changed? Yes. But seeing the class name in the HTML is a good reminder to the author of <em>how</em> they are meant to display. Does that co-mingle content and presentation too much?</p><p>Some of the WordPress default classes are ridiculous. The <code>body_class()</code> function injected this into every <code>&lt;body&gt;</code></p><p><code>"wp-singular post-template-default single single-post postid-62959 single-format-standard wp-theme-edent-wordpress-theme"</code></p><p>Most of that is redundant - what's the difference between single and single-post? For my purposes, nothing! So they were all yeeted into the sun.</p><p>Rather than targetting IDs or classes, I targetted the presence or absence of Schema.org microdata.</p><p>For example:</p><pre><code>main[itemprop="blogPost"] { … }main:not([itemprop="blogPost"]) { … }</code></pre><p>This can go to the extreme. I have lots of comments, each one has an author, the author's details are wrapped in <code>&lt;div class="authordetails"&gt;…&lt;/div&gt;</code></p><p>That can be replaced with:</p><pre><code>/* Comment Author */li[itemtype="https://schema.org/Comment"] &gt; article &gt; div[itemprop="https://schema.org/author"] { margin-bottom: 0;}</code></pre><p>Is that <em>sensible</em>? It is more semantic, but feels a bit brittle.</p><p>Parent selector are also now a thing. If I want a paragraph to have centred text but <em>only</em> when there's a submit button inside it:</p><pre><code>p:has(input#submit) { text-align: center;}</code></pre><p>Again, am I sure that my button will always be inside a paragraph?</p><p>Similarly, <a href="https://css-tricks.com/child-and-sibling-selectors/" rel="nofollow noopener noreferrer" target="_blank">sibling selectors</a> are sometimes superior - but they do suppose that your layout never changes.</p><p><strong>What remains?</strong></p><p>There are some bits of this site which are reusable and do need classes. The code-highlighting you see above requires text to be wrapped in spans with specific classes.</p><p>Image alignment was also heavily class based.</p><p>There are some accessibility things which are either hidden or exposed using classes.</p><p>A bunch of WordPress defaults use classes and, even if they are redundant, it's hard to exorcise them.</p><p>As much as I would have liked to get rid of all my IDs, many needed to stay for linking as well as CSS targetting.</p><p>All told, the changes I made were:</p><ul><li>134 class selectors down to about 65.</li><li>35 ID selectors up to about 50.</li><li>5 attribute selectors up to to about 20.</li><li>Deleted or combined a lot of redundant CSS and tidied up my markup considerably.</li></ul><p>I have around 250 CSS rules, so now the majority target semantics rather than classes or IDs.</p><p><strong>Is this really necessary?</strong></p><p>No, of course not. This is an exercise in minimalism, creativity, and constraint. Feel free to litter your HTML with whatever attributes you want!</p><p>As I went through, it increasingly became apparent that I was fitting my CSS to my HTML's logical structure rather than to its <em>conceptual</em> structure.</p><p>Previously, my comments were targetted with a class. Now they have the slightly more tangled targetting of "divs with this schema attribute whose parent is an article and whose grandparent has this ID".</p><p>It is a delightful meditative exercise to go through your code and deeply consider whether something is unique, reusable, or obsolete.</p><p></p><p><a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/blog/" target="_blank">#blog</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/css/" target="_blank">#css</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/schema-org/" target="_blank">#schemaOrg</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/semantic-web/" target="_blank">#semanticWeb</a></p>
Terence Eden<p>🆕 blog! “Class Warfare! Can I eliminate CSS classes from my HTML?”</p><p>I recently read a brilliantly provocative blog post called "This website has no class". In it, Adam Stoddard makes the case that you might not need CSS classes on a modern website:</p><p>I think constraints lead to interesting, creative solutions […]. Instead of relying on b…</p><p>👀 Read more: <a href="https://shkspr.mobi/blog/2025/09/class-warfare-can-i-eliminate-css-classes-from-my-html/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">shkspr.mobi/blog/2025/09/class</span><span class="invisible">-warfare-can-i-eliminate-css-classes-from-my-html/</span></a><br>⸻<br><a href="https://mastodon.social/tags/blog" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>blog</span></a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>css</span></a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.social/tags/schema" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>schema</span></a>.org <a href="https://mastodon.social/tags/semanticweb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>semanticweb</span></a></p>
CSS by T. Afif :verified:<p>💫 CSS Loaders!</p><p>Adding 10 new loaders to the collection</p><p><a href="https://css-loaders.com/growing/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">css-loaders.com/growing/</span><span class="invisible"></span></a></p><p>That makes the total 700 single-element loaders! 👀🥳</p><p><a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://front-end.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a></p>
Matthias Ott<p>🤔 Is there a tool that lets you check the HTML heading levels of a whole website (with all pages) and outputs a list of all pages with problems. Similar to pa11y, but limited to heading levels…? <a href="https://mastodon.social/tags/a11y" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>a11y</span></a> <a href="https://mastodon.social/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>html</span></a></p>
Frontend Dogma<p>Just Use HTML, by <span class="h-card" translate="no"><a href="https://mastodon.social/@cferdinandi" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>cferdinandi</span></a></span>:</p><p><a href="https://gomakethings.com/just-use-html/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">gomakethings.com/just-use-html/</span><span class="invisible"></span></a></p><p><a href="https://mas.to/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>html</span></a> <a href="https://mas.to/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>javascript</span></a></p>
HackerNoon<p>Discover the critical HTML mistakes causing layout bugs, broken characters, and failed social previews. <a href="https://hackernoon.com/6-html-pitfalls-and-gotchas-every-developer-should-avoid" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">hackernoon.com/6-html-pitfalls</span><span class="invisible">-and-gotchas-every-developer-should-avoid</span></a> <a href="https://mas.to/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>html</span></a></p>
ratfactor<p>HTML WARDen's history view and version diffing feature is probably as complete as it needs to be. (And I'm still under 1k lines, woo!)</p><p>The, "it's a static website AND live wiki at the same time!" thing I mentioned in the previous toot is next.</p><p><a href="https://mastodon.art/tags/php" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>php</span></a> <a href="https://mastodon.art/tags/wiki" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>wiki</span></a> <a href="https://mastodon.art/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>html</span></a></p>
Adrian Roselli<p>Very quick, very dirty testing of voice control with visibly unlabeled fields:<br><a href="https://cdpn.io/aardrian/debug/MYadEmB" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">cdpn.io/aardrian/debug/MYadEmB</span><span class="invisible"></span></a></p><p>The pen itself:<br><a href="https://codepen.io/aardrian/pen/MYadEmB" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">codepen.io/aardrian/pen/MYadEmB</span><span class="invisible"></span></a></p><p>It seems hiding visible labels is a great way to be mean to voice control users.</p><p><a href="https://toot.cafe/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://toot.cafe/tags/accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>accessibility</span></a> <a href="https://toot.cafe/tags/a11y" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>a11y</span></a></p>
That HTML Blog<p>I cannot sing the praises of fetch loudly enough. As a <a href="https://intuitivefuture.com/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a> <a href="https://intuitivefuture.com/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a>, having ready access to this native web API where you can pull down <a href="https://intuitivefuture.com/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> fragments or <a href="https://intuitivefuture.com/tags/JSON" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JSON</span></a> data with a line or two of code is simply brilliant.</p><p>But when shipping robust production code, how do you handle unpredictable network scenarios gracefully and provide a good user experience?</p><p>One solution: a tiny 2.3KB wrapper around “fetch” called “ffetch”. Here are some of its features:</p><p><a href="https://thathtml.blog/2025/09/give-fetch-a-bit-more-oomph/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">thathtml.blog/2025/09/give-fet</span><span class="invisible">ch-a-bit-more-oomph/</span></a></p>
Artyom Bologov<p>What’s worrying me as an <a href="https://merveilles.town/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> extremist is the inevitability of either <a href="https://merveilles.town/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a> or backend:</p><p>- I can craft beautiful apps that’d work client-side and bring value. But these will require <a href="https://merveilles.town/tags/JS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JS</span></a> and will inevitably exclude a fraction of people with JS off or on non-mainstream browsers.</p><p>- But the alternative to that is having a backend doing the work and sending pre-rendered pages to the user. Which means I have to rent a server somewhere, which to me, a Digital Bum (<a href="https://aartaka.me/digital-bum" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">aartaka.me/digital-bum</span><span class="invisible"></span></a>) is too much of an investment (not monetary, but ideological.)</p><p>For now, I’m leaning towards client-side JS. Because it means self-contained mini-apps rendered client-side. But it also means progressive enhancement will suffer — no way to utilize HTML forms and backend processing.</p><p>Chat, anyone aware of a service for (declarative?) mini-backends? No, <a href="https://merveilles.town/tags/CGI" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CGI</span></a> is not an option, because it’s simply dangerous and recless to expose unstructured scripts to the <a href="https://merveilles.town/tags/Web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Web</span></a> and I don’t want to inadvertently <a href="https://merveilles.town/tags/DDoS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>DDoS</span></a> my backend provider 😰</p>
Elena. (she/ her)<p><span>Why not start a blog? Or any other kind of website off of social media? Especially if the social media you're using is not yours (like your own fedi server). <br><br>Do save your pages/ files/ texts on your computer too, not just on the server your site/ blog lives on, so they don't vanish should the host server vanish.<br><br>Don't be afraid of shouting into the void at first. Enjoy the process of finding out what you would like to do with your site. People will find you if you want that!<br>Not ready to publish to the world? Play with the site on your computer first. There is no need to ever publish your site anywhere.<br><br>Use a service that offers pre-existing designs or try your hand at HTML and maybe even CSS yourself.<br>Resources for the latter could be<br></span><a href="https://www.htmlforpeople.com/" rel="nofollow noopener noreferrer" target="_blank">HTML for people</a> by <a href="https://social.lol/@bw" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@bw@social.lol</a><span> <br></span><a href="https://neocities.org" rel="nofollow noopener noreferrer" target="_blank">NeoCities</a><span><br>those you can find on </span><a href="https://theresmiling.eu/links#htmlcss" rel="nofollow noopener noreferrer" target="_blank">my site's links collection</a><span><br>and many more.<br><br>Don't worry about a schedule. Post stuff whenever you want. 5 times a day, once every 6 months, or something else entirly - it's your site and your rules.<br><br>Most of all: Have fun creating, have fun learning, have fun expressing yourself!<br><br></span><a href="https://ibe.social/tags/personalWebsite" rel="nofollow noopener noreferrer" target="_blank">#personalWebsite</a> <a href="https://ibe.social/tags/personalBlog" rel="nofollow noopener noreferrer" target="_blank">#personalBlog</a> <a href="https://ibe.social/tags/html" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://ibe.social/tags/personalWeb" rel="nofollow noopener noreferrer" target="_blank">#personalWeb</a> <a href="https://ibe.social/tags/indieWeb" rel="nofollow noopener noreferrer" target="_blank">#indieWeb</a> <a href="https://ibe.social/tags/smallWeb" rel="nofollow noopener noreferrer" target="_blank">#smallWeb</a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Guidelines" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Guidelines</span></a><br>CSS to speech · When and how to use alt text for CSS content <a href="https://ilo.im/166yim" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/166yim</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/AltText" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>AltText</span></a> <a href="https://mastodon.social/tags/Content" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Content</span></a> <a href="https://mastodon.social/tags/Images" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Images</span></a> <a href="https://mastodon.social/tags/Accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Accessibility</span></a> <a href="https://mastodon.social/tags/ScreenReader" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ScreenReader</span></a> <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Browser</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a></p>
Rena :gay_and_pir:「Angelus Project」<p>Consejos HTML: No subas imágenes de prueba a tu repositorio porque acabará hasta arriba de roña, utiliza <a href="https://picsum.photos/200/300" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">picsum.photos/200/300</span><span class="invisible"></span></a> </p><p>Cambias el 200 por el ancho y el 300 por el alto, y listo.</p><p><a href="https://masto.es/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://masto.es/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>frontend</span></a> <a href="https://masto.es/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDev</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Previews" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Previews</span></a><br>CSS :heading and :heading() · Styling headings is about to get much easier <a href="https://ilo.im/166xa6" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/166xa6</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/ModernCSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ModernCSS</span></a> <a href="https://mastodon.social/tags/Styling" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Styling</span></a> <a href="https://mastodon.social/tags/Headings" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Headings</span></a> <a href="https://mastodon.social/tags/Firefox" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Firefox</span></a> <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Browser</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a></p>
FreeSchool=Co-Op+Friendship🔁?<p><span class="h-card"><a href="https://phpc.social/@davidbisset" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>davidbisset</span></a></span> <br><a href="https://qoto.org/tags/Mastodon" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Mastodon</span></a> <a href="https://qoto.org/tags/Backup" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Backup</span></a> <a href="https://qoto.org/tags/Archive" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Archive</span></a> <a href="https://qoto.org/tags/Viewer" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Viewer</span></a> <a href="https://qoto.org/tags/Converter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Converter</span></a> <a href="https://qoto.org/tags/Search" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Search</span></a> <a href="https://qoto.org/tags/Posts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Posts</span></a> <a href="https://qoto.org/tags/Offline" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Offline</span></a> <a href="https://qoto.org/tags/Export" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Export</span></a> <a href="https://qoto.org/tags/Archives" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Archives</span></a> <a href="https://qoto.org/tags/Static" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Static</span></a> <a href="https://qoto.org/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> </p><p>Has anyone tested this further ? </p><p>☑️ :blackcat: I've tested <a href="https://qoto.org/tags/MeowViewer" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>MeowViewer</span></a> which works very well by <span class="h-card"><a href="https://toot.cafe/@meowViewer" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>meowViewer</span></a></span> who is developing it ⭐ </p><p><a href="https://qoto.org/tags/MeowViewer" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>MeowViewer</span></a> = Fast, local, can view offline (needs online to start) </p><p>Would be great if it could be run as standalone offline version - but after online upload you can even search you own posts which can hit hit and miss standard search bar or sometimes doesn't work to find much!)</p>
Terence Eden<p>A little accessibility question, if you have the time, inclination, and experience to answer.</p><p>Informative images should have alt text.</p><p>Decorative images should have null alt text.</p><p>Null text is usually written as: alt=""</p><p>But attributes don't *need* values.</p><p>So, do screen readers treat these two images in the same way?</p><p>&lt;img alt="" src="example.jpg"&gt;<br>&lt;img alt src="example.jpg"&gt;</p><p>That is, can I leave out the ="" on my alt attribute for decorative images?</p><p><a href="https://mastodon.social/tags/A11y" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>A11y</span></a> <a href="https://mastodon.social/tags/Accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Accessibility</span></a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a></p>