fosstodon.org is one of the many independent Mastodon servers you can use to participate in the fediverse.
Fosstodon is an invite only Mastodon instance that is open to those who are interested in technology; particularly free & open source software. If you wish to join, contact us for an invite.

Administered by:

Server stats:

9.9K
active users

#html5

4 posts3 participants0 posts today
Claudio Pires<p>Build your own blog today with our amazing Ink Blog WordPress theme - Clean, modern, stylish and minimalist responsive blog template for WordPress <a href="https://visualmodo.com/theme/ink-wordpress-theme/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">visualmodo.com/theme/ink-wordp</span><span class="invisible">ress-theme/</span></a> <br>Build your own blog, write your legacy! 📝✏️🖨️🖊️<br><a href="https://mastodon.social/tags/webdesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webdesign</span></a> <a href="https://mastodon.social/tags/HTML5" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML5</span></a> <a href="https://mastodon.social/tags/CSS3" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS3</span></a> <a href="https://mastodon.social/tags/template" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>template</span></a> <a href="https://mastodon.social/tags/plugins" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>plugins</span></a> <a href="https://mastodon.social/tags/theme" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>theme</span></a> <a href="https://mastodon.social/tags/wordpress" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>wordpress</span></a> <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/magazine" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>magazine</span></a> <a href="https://mastodon.social/tags/responsive" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>responsive</span></a> <a href="https://mastodon.social/tags/news" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>news</span></a> <a href="https://mastodon.social/tags/media" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>media</span></a> <a href="https://mastodon.social/tags/marketing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>marketing</span></a> <a href="https://mastodon.social/tags/SEO" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SEO</span></a> <a href="https://mastodon.social/tags/post" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>post</span></a> <a href="https://mastodon.social/tags/writer" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>writer</span></a> <a href="https://mastodon.social/tags/grid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>grid</span></a></p>
Claudio Pires<p>Food WordPress theme - Restaurant, pub &amp; bar template - Build every restaurant site design without code knowledge - A delicious restaurant, bakery &amp; candy shop theme <a href="https://visualmodo.com/theme/food-wordpress-theme/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">visualmodo.com/theme/food-word</span><span class="invisible">press-theme/</span></a> Build your own food website and grow your brand! 👩‍🍳🍲🍹🍻🍕🍰🍔🍷🍴🍿<br><a href="https://mastodon.social/tags/webdesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webdesign</span></a> <a href="https://mastodon.social/tags/HTML5" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML5</span></a> <a href="https://mastodon.social/tags/CSS3" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS3</span></a> <a href="https://mastodon.social/tags/template" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>template</span></a> <a href="https://mastodon.social/tags/plugins" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>plugins</span></a> <a href="https://mastodon.social/tags/theme" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>theme</span></a> <a href="https://mastodon.social/tags/wordpress" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>wordpress</span></a> <a href="https://mastodon.social/tags/food" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>food</span></a> <a href="https://mastodon.social/tags/responsive" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>responsive</span></a> <a href="https://mastodon.social/tags/restaurant" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>restaurant</span></a> <a href="https://mastodon.social/tags/pub" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>pub</span></a> <a href="https://mastodon.social/tags/bar" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>bar</span></a> <a href="https://mastodon.social/tags/candy" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>candy</span></a> <a href="https://mastodon.social/tags/flexible" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>flexible</span></a> <a href="https://mastodon.social/tags/pizza" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>pizza</span></a> <a href="https://mastodon.social/tags/chef" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>chef</span></a></p>
:rss: Hacker News<p>Defold: cross-platform game engine<br><a href="https://defold.com" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">defold.com</span><span class="invisible"></span></a><br><a href="https://rss-mstdn.studiofreesia.com/tags/ycombinator" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ycombinator</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/defold" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>defold</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/gameengine" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>gameengine</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/game_engine" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>game_engine</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/game_development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>game_development</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/game_dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>game_dev</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/gamedev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>gamedev</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/open_source" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>open_source</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/opensource" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>opensource</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/crossplatform" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>crossplatform</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/cross_platform" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cross_platform</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/free" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>free</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/nintendo_switch" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>nintendo_switch</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/console" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>console</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/html5" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>html5</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/android" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>android</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/ios" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ios</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/desktop" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>desktop</span></a></p>
:rss: Hacker News<p>Free high-performance cross-platform game engine<br><a href="https://defold.com" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">defold.com</span><span class="invisible"></span></a><br><a href="https://rss-mstdn.studiofreesia.com/tags/ycombinator" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ycombinator</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/defold" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>defold</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/gameengine" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>gameengine</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/game_engine" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>game_engine</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/game_development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>game_development</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/game_dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>game_dev</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/gamedev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>gamedev</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/open_source" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>open_source</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/opensource" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>opensource</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/crossplatform" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>crossplatform</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/cross_platform" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cross_platform</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/free" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>free</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/nintendo_switch" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>nintendo_switch</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/console" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>console</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/html5" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>html5</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/android" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>android</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/ios" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ios</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/desktop" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>desktop</span></a></p>
Claudio Pires<p>Architect WordPress theme - Interior design &amp; architecture responsive template. A WordPress theme for interior studio, construction, residential design, interior design, furniture and much more <a href="https://visualmodo.com/theme/architect-wordpress-theme/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">visualmodo.com/theme/architect</span><span class="invisible">-wordpress-theme/</span></a> Build any architecture site design without coding with Visualmodo! 🏦⛪🏫🏚️🏤<br><a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDesign</span></a> <a href="https://mastodon.social/tags/HTML5" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML5</span></a> <a href="https://mastodon.social/tags/CSS3" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS3</span></a> <a href="https://mastodon.social/tags/Template" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Template</span></a> <a href="https://mastodon.social/tags/Plugins" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Plugins</span></a> <a href="https://mastodon.social/tags/Themes" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Themes</span></a> <a href="https://mastodon.social/tags/WordPress" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WordPress</span></a> <a href="https://mastodon.social/tags/Responsive" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Responsive</span></a> <a href="https://mastodon.social/tags/InteriorDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>InteriorDesign</span></a> <a href="https://mastodon.social/tags/Architect" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Architect</span></a> <a href="https://mastodon.social/tags/Urbanism" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Urbanism</span></a> <a href="https://mastodon.social/tags/Architecture" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Architecture</span></a> <a href="https://mastodon.social/tags/Building" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Building</span></a> <a href="https://mastodon.social/tags/Room" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Room</span></a> <a href="https://mastodon.social/tags/Furniture" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Furniture</span></a> <a href="https://mastodon.social/tags/Studios" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Studios</span></a></p>
Michael Nordmeyer<p>Finally, browser vendors are removing the deprecated reduction of heading sizes in sectioning elements. When I discovered this in the spec, I considered this a profound mistake to mess with default sizes depending on context or hierarchy.</p><p>If someone puts multiple &lt;h1&gt; on a page, it’s their fault. If they get those through iframing external content, they have to properly style it.</p><p>Can’t wait to remove those pesky fixes from my CSS.</p><p><a href="https://developer.mozilla.org/en-US/blog/h1-element-styles/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/bl</span><span class="invisible">og/h1-element-styles/</span></a></p><p><a href="https://indieweb.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a> <a href="https://indieweb.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://indieweb.social/tags/HTML5" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML5</span></a></p>
Claudio Pires<p>Wedding WordPress theme - Smart responsive events and celebration WordPress theme. Build any wedding website design without coding with our clean, modern, stylish, landing-page and photography template <a href="https://visualmodo.com/theme/wedding-wordpress-theme/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">visualmodo.com/theme/wedding-w</span><span class="invisible">ordpress-theme/</span></a><br>Build your own wedding website with Visualmodo WordPress themes! 👨‍❤️‍💋‍👨💌📷🎥❤️💍😍<br><a href="https://mastodon.social/tags/webdesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webdesign</span></a> <a href="https://mastodon.social/tags/HTML5" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML5</span></a> <a href="https://mastodon.social/tags/CSS3" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS3</span></a> <a href="https://mastodon.social/tags/template" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>template</span></a> <a href="https://mastodon.social/tags/plugins" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>plugins</span></a> <a href="https://mastodon.social/tags/themes" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>themes</span></a> <a href="https://mastodon.social/tags/WordPress" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WordPress</span></a> <a href="https://mastodon.social/tags/onepage" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>onepage</span></a> <a href="https://mastodon.social/tags/ecommerce" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ecommerce</span></a> <a href="https://mastodon.social/tags/responsive" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>responsive</span></a> <a href="https://mastodon.social/tags/retina" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>retina</span></a> <a href="https://mastodon.social/tags/photography" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>photography</span></a> <a href="https://mastodon.social/tags/wedding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>wedding</span></a> <a href="https://mastodon.social/tags/website" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>website</span></a> <a href="https://mastodon.social/tags/events" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>events</span></a> <a href="https://mastodon.social/tags/married" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>married</span></a> <a href="https://mastodon.social/tags/celebration" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>celebration</span></a></p>
i686-powered lia<p>Unfeasible project idea:</p><p>A <a href="https://mastodon.gamedev.place/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.gamedev.place/tags/browser" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>browser</span></a> that purposefully sacrifices broad compatibility in favour of providing unique <a href="https://mastodon.gamedev.place/tags/SemanticWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SemanticWeb</span></a> features and interactivity for well-written sites.</p><p>All the cool <a href="https://mastodon.gamedev.place/tags/SemanticHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SemanticHTML</span></a> information we keep adding to our websites like &lt;abbr&gt;, &lt;address&gt;, &lt;article&gt;, &lt;q&gt;, &lt;cite&gt; and so on are awesome but almost no browser makes use of them!</p><p>Okay, so all that fancy corpo design and &lt;div&gt; hell won't render, but a well-written semantic website shines.</p><p><a href="https://mastodon.gamedev.place/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.gamedev.place/tags/HTML5" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML5</span></a> <a href="https://mastodon.gamedev.place/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webdev</span></a></p>
i686-powered lia<p>Everything I've seen about the &lt;nav&gt; element makes me feel like it's really only intended for groups of navigation links that navigate you somewhere else from the current page, and that are not really semantically related to the content of the specific page you are on.</p><p>As far as I know, screenreaders usually skip them.</p><p>In my case, the list of blog articles is the main attraction of the page though, not a "home" and "about" style navigation bar.</p><p><a href="https://mastodon.gamedev.place/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.gamedev.place/tags/HTML5" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML5</span></a> <a href="https://mastodon.gamedev.place/tags/Markup" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Markup</span></a> <a href="https://mastodon.gamedev.place/tags/SemanticWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SemanticWeb</span></a> <a href="https://mastodon.gamedev.place/tags/WWW" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WWW</span></a> <a href="https://mastodon.gamedev.place/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a></p>
Claudio Pires<p>Create your own website with our amazing and smart Zenith WordPress theme for every design project style <a href="https://visualmodo.com/theme/zenith-wordpress-theme/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">visualmodo.com/theme/zenith-wo</span><span class="invisible">rdpress-theme/</span></a> Build your responsive site design without coding, choose a tool that works and adds power to your WordPress!<br>Portfolio website builder theme and templates with premium plugins for free 🚀📱💻⌨️<br><a href="https://mastodon.social/tags/WordPress" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WordPress</span></a> <a href="https://mastodon.social/tags/Theme" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Theme</span></a> <a href="https://mastodon.social/tags/PageBuilder" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>PageBuilder</span></a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDesign</span></a> <a href="https://mastodon.social/tags/Responsive" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Responsive</span></a> <a href="https://mastodon.social/tags/Retina" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Retina</span></a> <a href="https://mastodon.social/tags/WebSite" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebSite</span></a> <a href="https://mastodon.social/tags/plugins" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>plugins</span></a> <a href="https://mastodon.social/tags/template" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>template</span></a> <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/portfolio" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>portfolio</span></a> <a href="https://mastodon.social/tags/agency" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>agency</span></a> <a href="https://mastodon.social/tags/Business" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Business</span></a> <a href="https://mastodon.social/tags/Marketing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Marketing</span></a> <a href="https://mastodon.social/tags/SEO" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SEO</span></a> <a href="https://mastodon.social/tags/HTML5" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML5</span></a> <a href="https://mastodon.social/tags/CSS3" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS3</span></a> <a href="https://mastodon.social/tags/SiteBuilder" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SiteBuilder</span></a></p>
Steve Faulkner<p>Was 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">#<span>HTML5</span></a> back in 2014</p><p><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/WebStandards" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebStandards</span></a> <span class="h-card" translate="no"><a href="https://w3c.social/@w3c" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>w3c</span></a></span> </p><p><a href="https://html5doctor.com/the-ride-to-5/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">html5doctor.com/the-ride-to-5/</span><span class="invisible"></span></a></p>
:rss: Hacker News<p>Show HN: Corral – A Visual Logic Puzzle About Enclosing Numbers<br><a href="https://mohammed321.github.io/projects/corral_web/index.html" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">mohammed321.github.io/projects</span><span class="invisible">/corral_web/index.html</span></a><br><a href="https://rss-mstdn.studiofreesia.com/tags/ycombinator" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ycombinator</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>programming</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/examples" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>examples</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/html5" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>html5</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/C" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>C</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/library" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>library</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/learn" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>learn</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/games" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>games</span></a> <a href="https://rss-mstdn.studiofreesia.com/tags/videogames" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>videogames</span></a></p>
Claudio Pires<p>Edge WordPress Theme - Build an amazing site design without coding. Use our awesome drag &amp; drop page builder and the fastest theme on the market <a href="https://visualmodo.com/theme/edge-wordpress-theme/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">visualmodo.com/theme/edge-word</span><span class="invisible">press-theme/</span></a> 👔📈📊💼 <br>Build better websites with Visualmodo and grow your business!<br><a href="https://mastodon.social/tags/webdesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webdesign</span></a> <a href="https://mastodon.social/tags/HTML5" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML5</span></a> <a href="https://mastodon.social/tags/CSS3" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS3</span></a> <a href="https://mastodon.social/tags/template" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>template</span></a> <a href="https://mastodon.social/tags/plugins" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>plugins</span></a> <a href="https://mastodon.social/tags/themes" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>themes</span></a> <a href="https://mastodon.social/tags/WordPress" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WordPress</span></a> <a href="https://mastodon.social/tags/onepage" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>onepage</span></a> <a href="https://mastodon.social/tags/ecommerce" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ecommerce</span></a> <a href="https://mastodon.social/tags/responsive" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>responsive</span></a> <a href="https://mastodon.social/tags/retina" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>retina</span></a> <a href="https://mastodon.social/tags/marketing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>marketing</span></a> <a href="https://mastodon.social/tags/SEO" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SEO</span></a> <a href="https://mastodon.social/tags/website" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>website</span></a> <a href="https://mastodon.social/tags/Bootstrap" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Bootstrap</span></a> <a href="https://mastodon.social/tags/agency" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>agency</span></a> <a href="https://mastodon.social/tags/siteBuilder" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>siteBuilder</span></a> <a href="https://mastodon.social/tags/business" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>business</span></a></p>
Le Bottin des Jeux Linux<p>🛠️ Title: Phaser<br>🦊️ What's: A libre Javascript framework for developing HTML5 games for PCs, mobiles &amp; browsers<br>🏡️ <a href="https://phaser.io/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">phaser.io/</span><span class="invisible"></span></a><br>🐣️ <a href="https://github.com/photonstorm/phaser" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">github.com/photonstorm/phaser</span><span class="invisible"></span></a><br>🔖 <a href="https://floss.social/tags/LinuxGameDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>LinuxGameDev</span></a> <a href="https://floss.social/tags/Programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Programming</span></a> <a href="https://floss.social/tags/Framework" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Framework</span></a> <a href="https://floss.social/tags/HTML5" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML5</span></a><br>📦️ <a href="https://floss.social/tags/Libre" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Libre</span></a> <a href="https://floss.social/tags/SRC" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SRC</span></a> <a href="https://floss.social/tags/Bin" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Bin</span></a> <br>📖 Our entry: <a href="https://lebottinlinux.vps.a-lec.org/LO.html" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">lebottinlinux.vps.a-lec.org/LO</span><span class="invisible">.html</span></a></p><p>🥁️ Update: 4.0.0 RC 1<br>⚗️ Signific. vers. 🦍️<br>📌️ Changes: <a href="https://github.com/phaserjs/phaser/releases" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/phaserjs/phaser/rel</span><span class="invisible">eases</span></a><br>🦣️ From: 🛜️ <a href="https://github.com/photonstorm/phaser/releases.atom" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/photonstorm/phaser/</span><span class="invisible">releases.atom</span></a></p><p>🦉️ <a href="https://www.youtube.com/embed/jHTRu4iNTcA" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="">youtube.com/embed/jHTRu4iNTcA</span><span class="invisible"></span></a><br>🕯️<a href="https://www.youtube.com/embed/0qtg-9M3peI" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="">youtube.com/embed/0qtg-9M3peI</span><span class="invisible"></span></a><br>🕯️[fr] <a href="https://www.youtube.com/embed/sUkcd0Rrpis" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="">youtube.com/embed/sUkcd0Rrpis</span><span class="invisible"></span></a><br>🎮️ <a href="https://www.youtube.com/embed/gnfgwkVg7vc" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="">youtube.com/embed/gnfgwkVg7vc</span><span class="invisible"></span></a></p>
Habr<p>Разработка топ мобильной игры в соло, с нуля, без бюджета, без движка, без знания языка программирования. Начало</p><p>Давно хотел сделать мобильную игру, но руки никак не доходили. А неделю назад решил, что время пришло, поэтому решено - начинаем делать.</p><p><a href="https://habr.com/ru/articles/897632/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">habr.com/ru/articles/897632/</span><span class="invisible"></span></a></p><p><a href="https://zhub.link/tags/%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>разработка</span></a> <a href="https://zhub.link/tags/%D0%B4%D0%B2%D0%B8%D0%B6%D0%BA%D0%B8" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>движки</span></a> <a href="https://zhub.link/tags/html5" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>html5</span></a> <a href="https://zhub.link/tags/%D0%BC%D0%BE%D0%B1%D0%B8%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5_%D0%B8%D0%B3%D1%80%D1%8B" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>мобильные_игры</span></a> <a href="https://zhub.link/tags/canvas" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>canvas</span></a> <a href="https://zhub.link/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>javascript</span></a> <a href="https://zhub.link/tags/%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>программирование</span></a> <a href="https://zhub.link/tags/%D0%BC%D0%BE%D0%B1%D0%B8%D0%BB%D1%8C%D0%BD%D0%B0%D1%8F_%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>мобильная_разработка</span></a> <a href="https://zhub.link/tags/web%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webразработка</span></a> <a href="https://zhub.link/tags/web%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webпрограммирование</span></a></p>
Terence Eden’s Blog<p><strong>An opinionated HTML Serializer for PHP 8.4</strong></p><p><a href="https://shkspr.mobi/blog/2025/04/an-opinionated-html-serializer-for-php-8-4/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">shkspr.mobi/blog/2025/04/an-op</span><span class="invisible">inionated-html-serializer-for-php-8-4/</span></a></p><p>A few days ago, <a href="https://shkspr.mobi/blog/2025/03/pretty-print-html-using-php-8-4s-new-html-dom/" rel="nofollow noopener noreferrer" target="_blank">I wrote a shitty pretty-printer</a> for PHP 8.4's new <a href="https://www.php.net/manual/en/class.dom-htmldocument.php" rel="nofollow noopener noreferrer" target="_blank">Dom\HTMLDocument class</a>.</p><p>I've since re-written it to be faster and more stylistically correct.</p><p>It turns this:</p><pre><code>&lt;html lang="en-GB"&gt;&lt;head&gt;&lt;title id="something"&gt;Test&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;h1 class="top upper"&gt;Testing&lt;/h1&gt;&lt;main&gt;&lt;p&gt;Some &lt;em&gt;HTML&lt;/em&gt; and an &lt;img src="example.png" alt="Alternate Text"&gt;&lt;/p&gt;Text not in an element&lt;ol&gt;&lt;li&gt;List&lt;/li&gt;&lt;li&gt;Another list&lt;/li&gt;&lt;/ol&gt;&lt;/main&gt;&lt;/body&gt;&lt;/html&gt;</code></pre><p>Into this:</p><pre><code>&lt;!doctype html&gt;&lt;html lang=en-GB&gt; &lt;head&gt; &lt;title id=something&gt;Test&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h1 class="top upper"&gt;Testing&lt;/h1&gt; &lt;main&gt; &lt;p&gt; Some &lt;em&gt;HTML&lt;/em&gt; and an &lt;img src=example.png alt="Alternate Text"&gt; &lt;/p&gt; Text not in an element &lt;ol&gt; &lt;li&gt;List&lt;/li&gt; &lt;li&gt;Another list&lt;/li&gt; &lt;/ol&gt; &lt;/main&gt; &lt;/body&gt;&lt;/html&gt;</code></pre><p>I say it is "opinionated" because it does the following:</p><ul><li>Attributes are unquoted unless necessary.</li><li>Every element is logically indented.</li><li>Text content of CSS and JS is unaltered. No pretty-printing, minification, or checking for correctness.</li><li>Text content of elements <em>may</em> have extra newlines and tabs. Browsers will tend to ignore multiple whitespaces unless the CSS tells them otherwise.<ul><li>This fucks up <code>&lt;pre&gt;</code> blocks which contain markup.</li></ul></li></ul><p>It is primarily designed to make the <em>markup</em> easy to read. Because <a href="https://libraries.mit.edu/150books/2011/05/11/1985/" rel="nofollow noopener noreferrer" target="_blank">according to the experts</a>:</p><blockquote><p>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.</p></blockquote><p>I'm <em>fairly</em> sure this all works properly. But feel free to argue in the comments or <a href="https://gitlab.com/edent/pretty-print-html-using-php/" rel="nofollow noopener noreferrer" target="_blank">send me a pull request</a>.</p><p>Here's how it works.</p><p><strong>When is an element not an element? When it is a void!</strong></p><p>Modern HTML has the concept of "<a href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element" rel="nofollow noopener noreferrer" target="_blank">Void Elements</a>". Normally, something like <code>&lt;a&gt;</code> <em>must</em> eventually be followed by a closing <code>&lt;/a&gt;</code>. But Void Elements don't need closing.</p><p>This keeps a list of elements which must not be explicitly closed.</p><pre><code>$void_elements = [ "area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr",];</code></pre><p><strong>Tabs 🆚 Space</strong></p><p>Tabs, obviously. Users can set their tab width to their personal preference and it won't get confused with semantically significant whitespace.</p><pre><code>$indent_character = "\t";</code></pre><p><strong>Setting up the DOM</strong></p><p>The new HTMLDocument should be broadly familiar to anyone who has used the previous one.</p><pre><code>$html = '&lt;html lang="en-GB"&gt;&lt;head&gt;&lt;title id="something"&gt;Test&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;h1 class="top upper"&gt;Testing&lt;/h1&gt;&lt;main&gt;&lt;p&gt;Some &lt;em&gt;HTML&lt;/em&gt; and an &lt;img src="example.png" alt="Alternate Text"&gt;&lt;/p&gt;Text not in an element&lt;ol&gt;&lt;li&gt;List&lt;/li&gt;&lt;li&gt;Another list&lt;/li&gt;&lt;/ol&gt;&lt;/main&gt;&lt;/body&gt;&lt;/html&gt;&gt;'$dom = Dom\HTMLDocument::createFromString( $html, LIBXML_NOERROR, "UTF-8" );</code></pre><p>This automatically adds <code>&lt;head&gt;</code> and <code>&lt;body&gt;</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>:</p><pre><code>$dom = Dom\HTMLDocument::createFromString( $html, LIBXML_NOERROR | LIBXML_HTML_NOIMPLIED, "UTF-8" );</code></pre><p><strong>To Quote or Not To Quote?</strong></p><p>Traditionally, HTML attributes needed quotes:</p><pre><code>&lt;img src="example.png" class="avatar no-border" id="user-123"&gt;</code></pre><p>Modern HTML allows those attributes to be <em>un</em>quoted as long as they don't contain <a href="https://infra.spec.whatwg.org/#ascii-whitespace" rel="nofollow noopener noreferrer" target="_blank">ASCII Whitespace</a> or <a href="https://html.spec.whatwg.org/multipage/syntax.html#unquoted" rel="nofollow noopener noreferrer" target="_blank">certain other characters</a></p><p>For example, the above becomes:</p><pre><code>&lt;img src=example.png class="avatar no-border" id=user-123&gt;</code></pre><p>This function looks for the presence of those characters:</p><pre><code>function value_unquoted( $haystack ){ // Must not contain specific characters $needles = [ // https://infra.spec.whatwg.org/#ascii-whitespace "\t", "\n", "\f", "\n", " ", // https://html.spec.whatwg.org/multipage/syntax.html#unquoted "\"", "'", "=", "&lt;", "&gt;", "`" ]; foreach ( $needles as $needle ) { if ( str_contains( $haystack, $needle ) ) { return false; } } // Must not be null if ( $haystack == null ) { return false; } return true;}</code></pre><p><strong>Re-re-re-recursion</strong></p><p>I've tried to document this as best I can.</p><p>It traverses the DOM tree, printing out correctly indented opening elements and their attributes. If there's text content, that's printed. If an element needs closing, that's printed with the appropriate indentation.</p><pre><code>function serializeHTML( $node, $treeIndex = 0, $output = ""){ global $indent_character, $preserve_internal_whitespace, $void_elements; // Manually add the doctype to start. if ( $output == "" ) { $output .= "&lt;!doctype html&gt;\n"; } if( property_exists( $node, "localName" ) ) { // This is an Element. // Get all the Attributes (id, class, src, &amp;c.). $attributes = ""; if ( property_exists($node, "attributes")) { foreach( $node-&gt;attributes as $attribute ) { $value = $attribute-&gt;nodeValue; // Only add " if the value contains specific characters. $quote = value_unquoted( $value ) ? "" : "\""; $attributes .= " {$attribute-&gt;nodeName}={$quote}{$value}{$quote}"; } } // Print the opening element and all attributes. $output .= "&lt;{$node-&gt;localName}{$attributes}&gt;"; } else if( property_exists( $node, "nodeName" ) &amp;&amp; $node-&gt;nodeName == "#comment" ) { // Comment $output .= "&lt;!-- {$node-&gt;textContent} --&gt;"; } // Increase indent. $treeIndex++; $tabStart = "\n" . str_repeat( $indent_character, $treeIndex ); $tabEnd = "\n" . str_repeat( $indent_character, $treeIndex - 1); // Does this node have children? if( property_exists( $node, "childElementCount" ) &amp;&amp; $node-&gt;childElementCount &gt; 0 ) { // Loop through the children. $i=0; while( $childNode = $node-&gt;childNodes-&gt;item( $i++ ) ) { // Is this a text node? if ($childNode-&gt;nodeType == 3 ) { // Only print output if there's no HTML inside the content. // Ignore Void Elements. if ( !str_contains( $childNode-&gt;textContent, "&lt;" ) &amp;&amp; property_exists( $childNode, "localName" ) &amp;&amp; !in_array( $childNode-&gt;localName, $void_elements ) ) { $output .= $tabStart . $childNode-&gt;textContent; } } else { $output .= $tabStart; } // Recursively indent all children. $output = serializeHTML( $childNode, $treeIndex, $output ); }; // Suffix with a "\n" and a suitable number of "\t"s. $output .= "{$tabEnd}"; } else if ( property_exists( $node, "childElementCount" ) &amp;&amp; property_exists( $node, "innerHTML" ) ) { // If there are no children and the node contains content, print the contents. $output .= $node-&gt;innerHTML; } // Close the element, unless it is a void. if( property_exists( $node, "localName" ) &amp;&amp; !in_array( $node-&gt;localName, $void_elements ) ) { $output .= "&lt;/{$node-&gt;localName}&gt;"; } // Return a string of fully indented HTML. return $output;}</code></pre><p><strong>Print it out</strong></p><p>The serialized string hardcodes the <code>&lt;!doctype html&gt;</code> - which is probably fine. The full HTML is shown with:</p><pre><code>echo serializeHTML( $dom-&gt;documentElement );</code></pre><p><strong>Next Steps</strong></p><p>Please <a href="https://gitlab.com/edent/pretty-print-html-using-php/" rel="nofollow noopener noreferrer" target="_blank">raise any issues on GitLab</a> or leave a comment.</p><p><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/html5/" target="_blank">#HTML5</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/php/" target="_blank">#php</a></p>
Terence Eden<p>🆕 blog! “An opinionated HTML Serializer for PHP 8.4”</p><p>A few days ago, I wrote a shitty pretty-printer for PHP 8.4's new Dom\HTMLDocument class.</p><p>I've since re-written it to be faster and more stylistically correct.</p><p>It turns this:</p><p>&lt;html lang="en-GB"&gt;&lt;head&gt;&lt;title id="something"&gt;Test&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;h1 class="top upper"&gt;Testing&lt;/h1&gt;&lt;main&gt;&lt;p&gt;Some &lt;em&gt;HTML&lt;/em&gt; and an…</p><p>👀 Read more: <a href="https://shkspr.mobi/blog/2025/04/an-opinionated-html-serializer-for-php-8-4/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">shkspr.mobi/blog/2025/04/an-op</span><span class="invisible">inionated-html-serializer-for-php-8-4/</span></a><br>⸻<br><a href="https://mastodon.social/tags/HowTo" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HowTo</span></a> <a href="https://mastodon.social/tags/HTML5" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML5</span></a> <a href="https://mastodon.social/tags/php" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>php</span></a></p>
Claudio Pires<p>Build any site design without coding! You can have a fully equipped website up and running within just a few minutes. Spark WordPress theme is not just a theme, it’s a collection of amazing examples with tons of features.<br><a href="https://visualmodo.com/theme/spark-wordpress-theme/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">visualmodo.com/theme/spark-wor</span><span class="invisible">dpress-theme/</span></a><br>Build your own website with Visualmodo! 🖥️💻📱<br><a href="https://mastodon.social/tags/webdesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webdesign</span></a> <a href="https://mastodon.social/tags/HTML5" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML5</span></a> <a href="https://mastodon.social/tags/CSS3" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS3</span></a> <a href="https://mastodon.social/tags/template" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>template</span></a> <a href="https://mastodon.social/tags/plugins" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>plugins</span></a> <a href="https://mastodon.social/tags/themes" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>themes</span></a> <a href="https://mastodon.social/tags/WordPress" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WordPress</span></a> <a href="https://mastodon.social/tags/ecommerce" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ecommerce</span></a> <a href="https://mastodon.social/tags/responsive" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>responsive</span></a> <a href="https://mastodon.social/tags/retina" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>retina</span></a> <a href="https://mastodon.social/tags/marketing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>marketing</span></a> <a href="https://mastodon.social/tags/SEO" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SEO</span></a> <a href="https://mastodon.social/tags/website" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>website</span></a> <a href="https://mastodon.social/tags/LandingPage" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>LandingPage</span></a> <a href="https://mastodon.social/tags/SiteBuilder" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SiteBuilder</span></a></p>
GG<p>It’s Portfolio Tuesday again for me! 🎮 Here’s Life 3.0, an HTML5 MMO tech demo I worked on. I managed production, coordinated with the art team in Malaysia, and designed modular, reusable assets. 🏗️<br><a href="https://mastodon.gamedev.place/tags/GameDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>GameDev</span></a> <a href="https://mastodon.gamedev.place/tags/MMO" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>MMO</span></a> <a href="https://mastodon.gamedev.place/tags/HTML5" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML5</span></a> <a href="https://mastodon.gamedev.place/tags/LevelDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>LevelDesign</span></a> <a href="https://mastodon.gamedev.place/tags/GameArt" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>GameArt</span></a> <a href="https://mastodon.gamedev.place/tags/IndieDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>IndieDev</span></a></p><p><a href="http://guido.graphics/2025/03/25/life-3-0-later-star-life-demo/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">http://</span><span class="ellipsis">guido.graphics/2025/03/25/life</span><span class="invisible">-3-0-later-star-life-demo/</span></a></p>
Coding Otaku<p>One of the main reason for some inaccessible custom web UI frameworks is that, it is impossible to style some form controls to make them look alike in all platforms and browsers.</p><p>The <a href="https://fosstodon.org/tags/CSSWG" class="mention hashtag" rel="tag">#<span>CSSWG</span></a> folks have created a working draft to make the form control styling possible.</p><p><a href="https://www.w3.org/TR/2025/WD-css-forms-1-20250325/" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://www.</span><span class="ellipsis">w3.org/TR/2025/WD-css-forms-1-</span><span class="invisible">20250325/</span></a></p><p><a href="https://fosstodon.org/tags/accessibility" class="mention hashtag" rel="tag">#<span>accessibility</span></a> <a href="https://fosstodon.org/tags/html5" class="mention hashtag" rel="tag">#<span>html5</span></a> <a href="https://fosstodon.org/tags/CSS" class="mention hashtag" rel="tag">#<span>CSS</span></a> <a href="https://fosstodon.org/tags/FormControls" class="mention hashtag" rel="tag">#<span>FormControls</span></a></p>