Block Garden

Wednesday, 31 December 2025

After working on Sprite Garden for a bit, I was curious if experimentation with WebGL using the same overall setup would be possible, and it was surprisingly enough that I’ve forked it, and called it Block Garden.

The same overall “tiles” are available to place, only this time as “blocks” with the player starting in a small area that can be explored and built upon. Any seed block placed will mature into its voxel based counterpart. Additional areas can be navigated to and planted, in addition to the clouds as well!

Check out the project source to learn more, modify, and contribute.

Sprite Garden

Sunday, 19 October 2025

I’ve wanted for some time to build a canvas based JavaScript game after checking out things like the breakout game tutorial on MDN or reading and working through early Raspberry Pi project books, but I never felt like I built something I enjoyed. Iterating through the basics and gradually improving on this piece by piece with generative AI however, has brought this from being barely usable to something I’m having fun with.

So what is Sprite Garden? A 2D sandbox exploration and farming progressive web app where players can explore generated worlds within different biomes, dig for resources, or plant a variety crops to grow.

Procedural World Generation – Each world is unique, generated from a shareable seed
Multiple Biomes – Explore forests, deserts, tundras, and swamps, each with unique characteristics
Farming System – Plant and harvest different crop types with various growth cycles
Resource Mining – Dig for resources like coal, iron, and gold
Cave Systems – Discover underground caves filled with resources and challenges
Building – Use collected materials to place blocks and shape the world
Save & Load – Your progress can be saved on device or as a file to share

The project source is open to reading or contribution and has a foundation on the web platform making it highly modifiable. Drawing with tiles is as easy as using the built in block placement system with collected resources, or by using tools directly with a Map Editor under Settings. This can be made available with the Konami Code bookmarklet or by entering it manually: ↑↑↓↓←→←→ba (or swipe the directions and use tap/tap in place of ba on mobile).

Declarative Shadow DOM

Tuesday, 24 December 2024

The web platform continues to grow, and features continue to land as baseline. One that I have been anticipating being widely supported across the latest browsers has been declarative shadow DOM. In essence, it enables Web Components to be server-side rendered and shown on the client without JavaScript. Check out the example below, where shadow DOM is used both declaratively with HTML and imperatively with JavaScript.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Declarative Shadow DOM</title>
  </head>
  <body>
    <style>
      p {
        color: blue;
        border: dashed 0.0625rem red;
        padding: 1rem;
      }
    </style>
    <x-element>
      <template shadowrootmode="open">
        <style>
          h1 {
            color: red;
            border: dotted 0.0625rem blue;
            padding: 1rem;
          }
        </style>
        <h1>Welcome to x-element!</h1>
        <slot></slot>
      </template>
      <p>Hello slot one!</p>
    </x-element>
    <x-element><p>Hello slot two!</p></x-element>
    <script type="module">
      const tagName = "x-element";
      if (!customElements.get(tagName)) {
        customElements.define(
          tagName,
          class extends HTMLElement {
            constructor() {
              super();

              if (!this.shadowRoot) {
                const shadow = this.attachShadow({ mode: "open" });
                const previousShadowRoot =
                  document.querySelector(tagName)?.shadowRoot;

                if (previousShadowRoot) {
                  shadow.innerHTML = previousShadowRoot.innerHTML;
                }
              }
            }
          }
        );
      }

      const xApp = document.createElement(tagName);
      const paragraph = document.createElement("p");

      paragraph.append("Hello slot three!");
      xApp.append(paragraph);

      document.body.append(xApp);
    </script>
  </body>
</html>