Featured image of post An old-school star field as a W3C WebComponent

An old-school star field as a W3C WebComponent

Creating a retro star field animation using W3C Web Components to demonstrate their portability and framework independence for static websites.

I recently stumbled upon this article Web Components Will Outlive Your JavaScript Framework from Jake Lazaroff.

The author argues that web components built with vanilla JavaScript offer superior longevity because they rely on stable web standards. In the context of statically generated websites like my blog, this approach allows interactive components to be embedded directly as HTML tags within Markdown files, making them completely portable across different site generators.

Unlike framework components that would need to be rewritten when migrating between static site generators, web components function as self-contained units that encapsulate their HTML, CSS, and JavaScript in a single file, ensuring that blog content with interactive elements remains fully functional regardless of the underlying website technology used to render it.

I think this is really neat for including interactive content on my website. I wanted to try it out with a simple example, so so I asked Claude Opus 4.1 to help me build this star field web component.

The starfield is included in the post with two HTML tags: the <script> tag to import the Javascript and the <star-field> tag.

<script src="js/starfield-component.js"></script>

<star-field speed="8" star-count="2000"></star-field>

Pretty neat, isn’t it? It reminds me of those old-school Atari/Amiga demos! 😂

Généré avec Hugo
Thème Stack conçu par Jimmy