{
  "type": "entry",
  "title": "Sketches as Web Components",
  "tags": [
    "webcomponents",
    "webdev"
  ],
  "attachments": [],
  "year": "2025",
  "month": "04",
  "day": "25",
  "isDir": false,
  "slug": "sketches-as-web-components",
  "date": "2025-04-25T19:00:00.000Z",
  "postName": "2025-04-25",
  "html": "<p>For years, I've tinkered with game development on the web. But, I haven't finished (m)any games. So, I decided to just focus more on finishing little interesting sketches of graphics and sound. This time around, I'm playing with portals—er, I mean Web Components</p>\n<!--more-->\n\n\n\n<p>What's really neat (to me) is that I took <a href=\"https://lmorchard.github.io/sketches-v01/sketches/2021/vector-avatars/index.html\">a web sketch from a few years ago</a>, then <a href=\"https://github.com/lmorchard/sketches-v03/blob/main/src/sketches/VectorAvatar/VectorAvatar.js\">reshuffled all the code into a web component</a>. Published that <a href=\"https://lmorchard.github.io/sketches-v03/\">to GitHub Pages</a> and now I can use it in other places. Like, in CodePens and blog posts like this one!</p>\n<figure>\n<iframe height=\"300\" style=\"width: 100%;\" scrolling=\"no\" title=\"Untitled\" src=\"https://codepen.io/lmorchard/embed/gbbgLNN?default-tab=html%2Cresult\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https://codepen.io/lmorchard/pen/gbbgLNN\">Testing cross-site inclusion of my web component sketches</a> by Les Orchard (<a href=\"https://codepen.io/lmorchard\">@lmorchard</a>)\n  on <a href=\"https://codepen.io\">CodePen</a>.\n</iframe>\n<figcaption>Someday, I should make my own local codepen component 🤔</figcaption>\n</figure>\n\n<script type=\"module\" src=\"./dist/sketches/VectorAvatar/VectorAvatar.js\"></script>\n\n<style>\nvector-avatar {\n  display: inline-block;\n  width: 100px;\n  height: 100px;\n}\n</style>\n\n<figure>\n<div>\n<vector-avatar></vector-avatar>\n<vector-avatar></vector-avatar>\n<vector-avatar></vector-avatar>\n<vector-avatar></vector-avatar>\n<vector-avatar></vector-avatar>\n</div>\n\n\n<figcaption>If you view source or inspect this page, you can see I used the web component right here!</figcaption>\n</figure>\n\n<p>The other thing I'm trying is splitting the difference on build / no-build: The external dependencies get bundled up into shared reusable modules with code splitting for cache-friendliness. The rest of my code is ES modules loaded straight up by the browser.</p>\n<p>If, on some inevitable day, the build tools fail, I should just be able to take a snapshot of the last good bundles and keep trucking on.</p>\n",
  "body": "\nFor years, I've tinkered with game development on the web. But, I haven't finished (m)any games. So, I decided to just focus more on finishing little interesting sketches of graphics and sound. This time around, I'm playing with portals—er, I mean Web Components\n\n<!--more-->\n\nWhat's really neat (to me) is that I took [a web sketch from a few years ago](https://lmorchard.github.io/sketches-v01/sketches/2021/vector-avatars/index.html), then [reshuffled all the code into a web component](https://github.com/lmorchard/sketches-v03/blob/main/src/sketches/VectorAvatar/VectorAvatar.js). Published that [to GitHub Pages](https://lmorchard.github.io/sketches-v03/) and now I can use it in other places. Like, in CodePens and blog posts like this one!\n\n<figure>\n<iframe height=\"300\" style=\"width: 100%;\" scrolling=\"no\" title=\"Untitled\" src=\"https://codepen.io/lmorchard/embed/gbbgLNN?default-tab=html%2Cresult\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https://codepen.io/lmorchard/pen/gbbgLNN\">Testing cross-site inclusion of my web component sketches</a> by Les Orchard (<a href=\"https://codepen.io/lmorchard\">@lmorchard</a>)\n  on <a href=\"https://codepen.io\">CodePen</a>.\n</iframe>\n<figcaption>Someday, I should make my own local codepen component 🤔</figcaption>\n</figure>\n\n<script type=\"module\" src=\"./dist/sketches/VectorAvatar/VectorAvatar.js\"></script>\n\n<style>\nvector-avatar {\n  display: inline-block;\n  width: 100px;\n  height: 100px;\n}\n</style>\n\n<figure>\n<div>\n<vector-avatar></vector-avatar>\n<vector-avatar></vector-avatar>\n<vector-avatar></vector-avatar>\n<vector-avatar></vector-avatar>\n<vector-avatar></vector-avatar>\n</div>\n<figcaption>If you view source or inspect this page, you can see I used the web component right here!</figcaption>\n</figure>\n\nThe other thing I'm trying is splitting the difference on build / no-build: The external dependencies get bundled up into shared reusable modules with code splitting for cache-friendliness. The rest of my code is ES modules loaded straight up by the browser.\n\nIf, on some inevitable day, the build tools fail, I should just be able to take a snapshot of the last good bundles and keep trucking on.",
  "parentPath": "./content/posts/2025",
  "path": "2025/04/25/sketches-as-web-components",
  "summary": "For years, I've tinkered with game development on the web. But, I haven't finished (m)any games. So, I decided to just focus more on finishing little interesting sketches of graphics and sound. This time around, I'm playing with portals—er, I mean Web Components",
  "needsBuild": true,
  "prevPostPath": "2025/04/25/sketches-as-web-components",
  "prevPostTitle": "Sketches as Web Components",
  "nextPostPath": "2025/04/25/fastmail-pobox-cleanup",
  "nextPostTitle": "Fastmail Pobox Cleanup"
}