stephen koch

software engineer

Artistic Elements

https://www.npmjs.com/package/artistic-elements

An npm package of Web Components of simple elements with which to create digital art.

Artistic Elements - four-up - React

Stemming from Swissted as well as the desire to learn more about Web Components, I began converting the original Emotion (styled) components to web components which then led to Lit.dev. I've always thought about publishing something on npm but haven't had the opportunity or the right "project" to do so however when I started down this path a little light went off in my head ... I should release this on npm!

The result is a library of Web Components that create very simple elements (circles, rectangles, triangles, etc.) which one can use to create digital art. This is nothing new! However the exercise for me was a learning one: for me to understand what the process is to publish to npm (dead simple) as well as all the things that go along with that.

Namely:

  • documentation
  • release process - versioning
  • build process, and the differences between:
    • during development
    • for production
  • building badges via Badge
  • jsDeliver and Skypack
  • building wrappers for React
  • revisiting current tooling ecosystem

Beginning

Instead of coding something for myself and then maybe putting something out there and doing nothing with it I thought to myself, screw it ... just put it out there!

So that's what I did. First version went out mid October. That was at 0.1.0. There was no documentation, these were only available as simple web components, these were not ready for production. But I started it and that meant I was going to finish it.

Looking at my git history, version 1.0.0 landed 9 days after the initial pre-release. My initial goal was to have documentation and clear examples on how to use the components.

Once that was done, I needed to incorporate the components into Swissted with the final step to understand what needed to be done to create a React wrapper for the components.

This proved to be more work than I'd anticipated! I relied on Shoelace for inspiration which led me to @custom-elements-manifest/analyzer as well as completely rewriting the build process by abandoning Rollup and moving to esbuild.

One thing I wasn't aware of is that when publishing to npm, you get jsDeliver for free. Simply include the url in your HTML and you are off the the races!

Once I was able to get the React wrappers working I also wanted to have examples in the repository however that meant I would have to bloat the dependencies to include React and its friends. Codepen to the rescue! I'd never heard of Skypack but when I started creating the pen, when I wanted to add the package to the pen, I was given a prompt that would change things from a standard import to use the Skypack url. So nice!

Finally, I took some of the examples I'd created during development to add to my art project. This was also an opportunity to use them in a React app since I'm using Gatsby for that project.

Artistic Elements - clarity - React