{
  "$type": "site.standard.document",
  "canonicalUrl": "https://www.jacky.wtf//essays/2024/boxing-things-up",
  "path": "/essays/2024/boxing-things-up",
  "publishedAt": "2024-06-13T00:00:00.000Z",
  "site": "at://did:plc:e2ctbutx6kya6si4if5ngjmm/site.standard.publication/3mniussyp2d2g",
  "tags": "essay",
  "textContent": "I've been working on [Shock][1] as I look for work to both keep my blades sharp and to try out some new\nstacks. Shock's written in Rust and JavaScript (and a _little bit_ of TypeScript) using Tauri to bind a system-provided Web browser\nview to a Rust library that provides IPC to a JavaScript \"frontend\". I had two moments where I could have kept\nthings simple but wanted to experiment.\n\nThe Icons\nShock is - first and foremost - an editor. It needs to know where to put and read things and with a sprinkle of\nSQLite, it's able to do that pretty well. In the flow for setting up a new site, I wanted to give people a way to have\nsome sort of visual identifier for sites. The following [truncated code][2] is how I implemented something for folks to\nselect an icon.\n\nThere's quite a bit going on here but before I explain, I want to show you what it results in.\n\n<figure>\n    <video poster=\"/images/video-screencast-icon-selector.png\" controls loop>\n        <source src=\"/videos/screencast-icon-selector.webm\" />\n    </video>\n</figure>\n\nAs shown, this renders a region of icons. When you select an icon and choose to shuffle, your selection is kept (though\nnot in the same place) while the rest of the surrounding icons are pulled from the imported icon set. After I wrote\nthis, I considered pulling it out into a separate component. An immediately naive answer would have been \"yes!\" since it\n\"provides value\". But currently, this value is isolated to _only_ this part of Shock. This information doesn't even get\nsaved. However, in implementing this, I got to use a few things I hadn't a real chance to use in work\nenvironments.\n\nGenerators\nWhile working with Rust code for education and (in the past) Clojure for work, my appreciation for programming that\ncentered around streaming grew. I'm familiar with the concept of [generators in JavaScript][3] but hadn't implemented\none for something outside of learning until now. The code in reference is the following:\n\nWith these two lines, iconGen has gone from a pure function to a _generative iterator_, which lightly explains\nwhat this allows you to do. I can use this generator to create a list of any number of icons. \nIn an earlier (and buggier) version, I forgot to remove the currently selected icon from the list and so, made the\ngenerator to make the number of icons dynamically but keeping it isolated (to a degree). Fixing that, I can still \nchange the number of icons. I didn't move this into a separate component because at the moment,\nthere's no need to extract something that might require a different presentation implementation elsewhere. What I did\nplan on adjusting was the number of icons and keeping the generator allows me to focus on the presentation layer,\nrefactor the generator out and keeps the functionality in both places - with some help.\n\nThe Table\nAs with most software, some sort of list has to be shown. Shock deals with editing pages, themes and the sort so there's\nlist abound. However, I haven't created a full-on fixture system to emulate dozens of pages so I'm almost always editing\nindex.html. That didn't stop me from extracting the table used to present items. Excluding the styling and the few\nlines of associated JavaScript, here's how they're implemented at the moment:\n\nThis provides a _very thin_ wrapper on listing a set of items in a table. I wanted to avoid too much of [the divitis][4]\nwhile working on this - still a work in progress. This implementation of a sortable table removes a _lot of_ of\nstyling constraints and leans into what I'm expecting to see the future of Web component development to look like out of\nthe box. I'm a very big fan of using slots, in this case, [Svelte's implementation][5], since they allow you to bring\nyour own elements and styles and lean into reactivity to bridge between them. I found that having this out of the box\nhave improved my ability to produce something both friendly to debugging (since it's state we're tracking and replacing) and\nsimpler (since I can isolate things a lot more).\n\nWith that code, I'm able to present the following:\n\n<figure>\n    <img src=\"/images/boxing-things-up/page-listing.png\" alt=\"\"/>\n    <figcaption>A (meager) list of pages associated to my example site. Note the \"New\" button to the top\n    right.</figcaption>\n</figure>\n\n<figure>\n    <img src=\"/images/boxing-things-up/theme-listing.png\" alt=\"\" />\n    <figcaption>A (even more meager) list of themes associated to my example site. Note the two buttons to the top\n    right.</figcaption>\n</figure>\n\nNext Steps\nI see myself keeping this table abstraction and adding more styling to the table itself. Introducing some way to add\nper-row and whole-table behaviors will help for bulk actions. I'm glad that I kept the icons isolated because the way my\nyak has been asking for a fresh cut, it would have been completely tested with no purpose outside of watching some icon\nturn red.\n\nThere's also a chance for me to bring this table interface to the _first_ screen you see when you start Shock, which\ncurrently looks like:\n\n<figure>\n    <img src=\"/images/boxing-things-up/landing.png\" alt=\"\" />\n    <figcaption>A set of testing sites made locally, all trapped in a &lt;select&gt;.</figcaption>\n</figure>\n\nThere's _lots_ of room for improvement, though still in its very early phases.\n\n[1]: https://git.sr.ht/jacky/shock\n[2]: https://git.sr.ht/jacky/shock/tree/6118c3e53f32d931ddb18d71061a0a0bd5318e39/item/editor/shell/src/routes/+page.svelte#L1 \n[3]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator\n[4]: https://alvaromontoro.com/blog/67843/divitis-and-other-itis\n[5]: https://svelte.dev/docs/special-elements\n[6]: https://git.sr.ht/~jacky/shock/tree/6118c3e53f32d931ddb19d71061a0a0bd5318e39/item/editor/shell/src/lib/util.js#L1",
  "title": "Boxing Up Common Parts of an App"
}