DEV Community: Mardeg

I tested free subdomain hosting for WebTiles so you don't have to

Mardeg — Fri, 23 Jan 2026 08:43:09 +0000

What are WebTiles?

Miniature 250x250 pixel websites hosted at https://webtiles.kicya.net/ with each one linking to a real website you control. Once you register there you need to add such websites and complete the verification process to confirm you control each one before you can use them to create a webtile. Note that where you place your WebTile doesn't have to be its permanent position, WebTiles can join others in a Clan to attack their way closer to the centre. Leaving your WebTile blank after adding it attracts downvotes.

I won't go into the rules/restrictions on the code used inside the mini-site WebTiles (it isn't just an iframe of your website), read them yourself: Rules, HTML, JS. You can both upload files for your tile and edit the .css and .html files directly. As of the date of this post all image types viewable in a web browser except .avif are permitted.

How do I verify my site?

There are three ways to complete the verification process for your added site:

Register at NekoWeb and upload your site files to a subdomain of your choice there, then connect it as a service to WebTiles. This is the easist method and if you're only looking to have a single WebTile probably the one you should go with and you needn't read this post any further.
Create a TXT DNS record for your domain with the 64 byte code as the content. Since this post is about free subdomains we won't go into this method here.
Edit your site creating a specific subfolder containing a specific file named kicya with the same 64 byte code as its entire content, test that it exists, then click the verify button at kicya.net:

I want multiple WebTiles without spending a cent, how?

With free subdomains you will find various restrictions that either hinder or completely prevent the verificaton process from working. I'll list them after first listing the ones I had no difficulty verifying at all.

Directly editing with no Github account needed

Creating a .well-known subfolder and the kicya file within it works flawlessly on these hosts:

yoursite.NeoCities.org - this successor to GeoCities has been around for over a decade and also has a user-friendly interface allowing a customised subdomain name.
randomstring.on.Drv.tw - for this one you need to link your Google Drive which hosts the site files, but if like me you automatically got one just by having a working Android phone, it comes for free with your Google account. Note that you don't get to pick the name of your subdomain with this, a random one is generated.

Deployment from a Github account required

These hosts all allow custom subdomains, but with an increased difficulty level requiring either knowlege of Github or (more difficult) another Git host. Github does allow you to create/edit files directly in it, as well as uploading files within its interface separately from the usual method of committing a git push.

yoursite.pages.dev - hosted by Cloudflare, follow this guide. Allows multiple subdomains for free.
yoursite.onrender.com - with the demise of glitch.me free sites many users migrated to this, follow this guide. Only a single free subdomain is allowed.
yoursite.vercel.app - as onrender above many migrated here, follow this guide.
yoursite.github.io - for this to work you need to create a repository on Github named exactly yourGithubUsername.github.io where your site files are AND another repository named .well-known just for the kicya file, follow this guide. This subdomain method only works once per github account.

Hinderance: No .well-known subfolder, creative use of the 404 error page required

These hosts allow custom subdomain names but prevent public access to the .well-known subfolder, even if they allow you to create one, but they DO allow a custom 404.html file which if it contains the 64 byte kicya code as the entirety of its content will cause the verification process to succeed:

yoursite.shipstatic.com - allows direct file uploads only, no online editing so upload a new folder/zip file containing your updated index.html and 404.html then in the Domains tab pick your existing subdomain from the dropdown in the dialog you get when you select Deployment from the ⋮ menu of what you just uploaded. You'll then need to remove the previous upload from the Deployments tab.
yoursite.surge.sh - normal usage requires the surge NPM module installed, then to be invoked from the exact folder on your system containing the site files within the commandline terminal, but has multiple alternative deployment guides. Unlimited free subdomains.

Unknown

These hosts are untested and require providing a publicly visible email and knowledge of github pages custom domain usage:

yoursite.js.org
yoursite.029290.xyz
yoursite.is-cool.dev (also has the following available: *.is-a-fullstack.dev, *.is-local.org, *.is-not-a.dev, *.localplayer.dev, *.open-comm.org)

The Blacklist: hosts which prevent free verification

These prevent either creation of or public access to the .well-known subfolder or the extensionless kicya file. Additionally they all use cPanel and require upgrading to the paid version before allowing either a custom 404 error page (even overriding any 404.php or .htaccess file you upload with their default one) or a custom TXT DNS record (for the other verification method):

InfinityFree
ByetHost
AwardSpace
FreeHostingNoAds
biz.nf

Once I saw the same cPanel interface as the pattern for this non-free access, I suspect this is a good indicator of any future "free" hosts doing the same.

Let me know in the comments if you found this post useful, need further clarificaton, or have tested hosts not listed. Good luck!

SVG Spritesheet builder using document fragments

Mardeg — Thu, 11 Sep 2025 01:36:48 +0000

This online tool stemmed from webpage authoring where hosts disable the keep-alive HTTP headers forcing a new connection for each resource. A way to combine many arbitrary images in a single SVG file to reduce network overhead was needed, something that did all the necessary positioning and dimension calculating.

SVG Spritesheet Builder is a simple web app for creating SVG spritesheets from uploaded images, supporting PNG, JPG, SVG, WEBP, and AVIF formats.

With intuitive drag-and-drop uploading and rearranging, you can easily add your images and choose between custom sizing or preserving original dimensions for pixel-perfect results. The app lets you configure spacing, number of columns, and sprite naming, and generates optimized downloadable SVG spritesheets with clean code all processed client-side for privacy and accessibility.

The app provides a real-time preview as you build, making it even easier to fine-tune your spritesheet before downloading.

Rather than using background positioning to display each image, the HTML and CSS code to use shows how to reference each image via a fragment identifier in the img() of background-image or src of img tags. But you can also use it as the src of an iframe, or even as the poster attribute of a video.

Comments with suggestions, and also code contributions are welcome!

GitHub repo

Toggle Dark Mode using DIVLESS Pure CSS

Mardeg — Thu, 31 Oct 2024 09:56:14 +0000

Coming from the perspective of having to write .html documentation within a workplace sharepoint environment which disallows javascript by default, I was tasked with "Oh, and add a button to toggle dark mode, thanks!"

This, on top of "Valid and Accessible Semantic HTML" wording in our policy documents which the boss equates with "Even a single DIV is laziness", made things a bit tricky to say the least.

@media (prefers-color-scheme: dark)

As a counter-point I suggested instead of a toggle we just style the page to match the light/dark system preference of each user with a media query and light-dark(). The response was "Okay start with that, but still put the toggle in." Great, I created more work for myself by trying to create less.

I already noted that I'd need CSS variables and a checkbox input / label method to control Light/Dark mode, but :checked ~ * would still only affect elements coming after the input, making the background style hard to toggle.

My first solution was to use a generic DIV positioned absolutely underneath everything, which worked until the boss spotted it and said to get rid of it. The one point of relief is they're fine with modern HTML/CSS being used as long as the compatibility support coverage is over 90% of browsers.

:has() to the rescue!

When I first saw this CSS syntax proposed for targeting the parent element back before it was implemented I wasn't sure what it'd be useful for. Now coming across it once more while I searched for solutions I thought, "Why not try it on BODY?"

It worked immediately and I kicked myself for not trying it sooner! Here's the relevant CSS I ended up with:

      * { 
        --tcolor: light-dark(#000,#FFF);
        --bgcolor: light-dark(#FFF,#000);
        --sbgcolor: light-dark(rgba(255,255,255,0.75),rgba(0,0,0,0.75));
        --alink:light-dark(blue,lightblue);
        --avisited:light-dark(purple,#8467D7);
        /* LIGHT mode */
        --lcontent: "DARK";
        --bgimage: linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)), url("INSERT_SEASONAL_BACKGROUND");
      }
      body:has(#d:checked), body:has(#d:checked) * { /* DARK mode */
        --tcolor: #FFF;
        --bgcolor: #000;
        --sbgcolor: rgba(0,0,0,0.75);
        --alink: lightblue;
        --avisited: #8467D7;
        --lcontent: "LIGHT";
        --bgimage: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url("INSERT_SEASONAL_BACKGROUND");
      }
@media (prefers-color-scheme: dark) {
      * {
        --lcontent: "LIGHT";
        --bgimage: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url("INSERT_SEASONAL_BACKGROUND");
      }
      body:has(#d:checked), body:has(#d:checked) * { /* LIGHT mode */
        --tcolor: #000;
        --bgcolor: #FFF;
        --sbgcolor: rgba(255,255,255,0.75);
        --alink:blue;
        --avisited:purple;
        --lcontent: "DARK";
        --bgimage: linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)), url("INSERT_SEASONAL_BACKGROUND");
      }
}
      :root {
        color-scheme: light dark;
        background-color:#888;
        font-size:2vh;
        overflow:hidden;
}
      body { /* base element under control of mode */
        color:var(--tcolor); /* match text color to mode */
        background-image:var(--bgimage); /* match opacity overlay to mode */
        background-repeat: no-repeat no-repeat, space no-repeat;
        background-size:auto 100vh;
        margin:-1ex;
      }
      label[for="d"]::after {content: var(--lcontent);} /* DARK or LIGHT text */
      section{ /* main interaction area */
        margin:0 auto;
        background-color:var(--sbgcolor);
        padding:1ex;
        padding-top:0;
        height:fit-content;
        max-height:96.2vh;
        overflow-y:scroll;
        scrollbar-color:rgba(128,128,128,0.5) var(--sbgcolor);
      }
      li:nth-of-type(even){ /* subtle horizontal lines */
        background-color:rgba(128,128,128,0.1);
      }
      summary:hover,summary:focus-visible,a:hover,a:focus-visible { /* match mouseover or     */
        background-color:var(--bgcolor);                            /* keyboard focus to mode */
      }
      a:link {color: var(--alink)}       /* match link     */
      a:visited {color: var(--avisited)} /* colors to mode */
#d {visibility:hidden;position:fixed;top:0;left:0} /* hide checkbox for mode control */

I did one cheat using rgba(128,128,128,0.5) to keep the SECTION scrollbar-color neutral. The HTML starts with:

<body><input id="d" type="checkbox">
<header>
  <label for="d" accesskey="m" title="[Alt][Shift]M toggles mode" aria-label="LIGHT/DARK Mode">&#8203;</label>
</header>

The end result (uninhibited by sharepoint) looks like this.

BONUS: Here's the schema data structure of that page as added manually using attributes, another task I was given sans-javascript.

Now I just need to figure out how to trigger those audio sounds without javascript!😅

Feel free to comment on your own experience working in limited environments, what worked and what didn't!