Jamming on a 13 year old sketchy-sketch

{
    "type": "entry",
    "published": "2024-08-17T17:42:16-0400",
    "url": "https://martymcgui.re/2024/08/17/jamming-on-a-13-year-old-sketchy-sketch/",
    "category": [
        "codejam",
        "justdraw",
        "glitch",
        "thing-a-day-2011"
    ],
    "name": "Jamming on a 13 year old sketchy-sketch",
    "content": {
        "text": "I just posted Sticky Scribbles to Glitch as a Glitch Jam entry for August 2024. The prompt got me thinking about some old web art projects that have come and gone, so I picked one up, dusted it off, dropped it on the floor, stepped on it, cut myself on the pieces, bought expensive raw goods from the store, and rebuilt a nearly unrecognizable new version that does the same thing.\nI thought I\u2019d post the write-up on my blog, as well.\nSticky Scribbles\nType some text and choose a font.\nMaybe scribble on the sticky note a little.\nCopy-paste the Output SVG into a file of your own choosing.\nOpen it in your pen plotter software and plot it, I guess!\nNeed to erase? A page refresh will clear all scribbling.\nThe fonts are vector strokes suitable for plotting. They\u2019re called Hershey fonts\nand their story is pretty interesting!\nYou can also find the full source and history on GitHub.\nWhy\nInspired by the August 2024 Glitch Jams prompt of \u201c#justdraw\u201d,\nI remembered an old project from 2011.\nBack then I worked for MakerBot Industries and, at the urging of my friend Matt Griffin,\nhad started a descent into madnes- pen plotting. For me, that meant using the\nMakerBot Unicorn a tool for the MakerBot Cupcake CNC that replaced the plastic extruder\nto turn a 3D printer into a loosey-goosey pen plotter.\nAs with most DIY 3D printers of the day, the Cupcake CNC was driven by G-Code - short\ninstructions sent over a serial port to tell it how to move its motors, etc. When I\nstarted playing around, the process for going from some vector artwork to G-Code was\npretty labor intensive and required multiple tools.\nThe work area for the Cupcake CNC is 10cm square, which is just a little bit bigger than\na pad of 3\"x3\" name brand sticky notes. So, these easily becamie a target for my madnes making.\nIn February of that year I particpated in \u201cThing-a-Day\u201d on Posterous (RIP), and worked on\nseveral projects to try and boost the ease of use of this whole ecosystem.\nA timeline you didn\u2019t ask for\nUnicorn G-Code extension for Inkscape\nMashing up some example Python code from the Unicorn release, and the Inkscape driver for\nEvil Mad Scientist Laboratories\u2019 EggBot, this extension\nlet you save (simple) drawings as G-Code that you could plot using a Cupcake CNC + Unicorn.\n\n2011-02-01 - Announced the Unicorn G-Code extension for Inkscape.\n\nGitHub repository (archived 2018)\nThingiverse\n\n2011-02-02 - Added a pen registration step and homing support\n2011-02-03 - Added support for multiple copies and continuous plotting\n2011-02-04 - Added support for pausing to change pens\nWhile I made this Inkscape extension to serve a very niche machine, I ended up continuing to\nimprove it here and there. I was surprised to see it adopted by some DIY CNC projects from\nall over the world!\nUnfortunately, I never made much of a habit out of using my own extension, so when the extension\ninterfaces changed for Inkscape 0.91.x, I ended up marking it read-only.\nThere are over 100 forks, though, so maybe somebody picked it back up!\nHershey fonts\nMatt introduced me to Hershey fonts, a set\nof vector fonts designed for the U.S. government for use on CNC machines for plotting or engraving.\nThese were in a somewhat legible format, so I became a little obsessed with using them for\nplotter projects.\n\n2011-02-06 Announced conversions of the Hershey fonts to SVG\nHershey fonts in SVG on Thingiverse\nWindell of Evil Mad Scientist Laboratories was motivated by this to make an Inkscape extenstion for rendering Hershey text.\nThat extension became part of Inkscape and after time and improvements it\u2019s still there!\n\n\n2011-02-08 - Hershey font rendering as SVG with JavaScript with Rapha\u00ebl.js.\nA little proof of concept that would eventually become this little proof-of-concept.\n2011-02-16 - Live demo using jQuery and Rapha\u00ebl.js\n2011-02-17 - Added line wrapping to the demo\n2011-02-20 - Replaced Rapha\u00ebl.js with canvas\n2011-02-21 - Auto-scale text to fit a box\n2011-02-22 - Added the cursed sticky note backdrop\n2011-02-23 - Replaced canvas with Keith Wood\u2019s jQuery SVG plugin\n2011-02-24 - Sized everything for plotting on a sticky note via Unicorn\n\n2011-02-25 - Added terrible scribbling.\nInsisting on having lines visually line up with the sticky note background but come out correctly\naligned in the resulting SVG was really biting me here.\n\n2011-02-26 - \u201cImproved\u201d the terrible scribbling.\n(Note: this did not fix the alignment issues. Why was I trying to do all the math myself?)\nI\u2019d love to share gratuitous details about rewriting bits of this little tool. Unfortunately, I\nworked on it live on my site that entire time without any version control. \ud83d\ude2d\n(Where was Glitch in 2011?? lol)\nMisc (un)related projects\n2011-02-05 - Graffiti Markup Language to Unicorn G-Code\n2011-02-14 - An SVG template for tweets\nThis version\nWhile you can find the entire history on the sticky-scribbles GitHub,\nI had a good time figuring out how I left this ~13 year old project and choosing ways to \u201cmodernize\u201d\nor at least \u201cmake it less bad to my eyes\u201d.\nFixed the cursed sticky note projection\nThe drawing canvas markup can be summarized like this:\nouter <svg> with background image of the stick note\ninner <g>roup with a painstakingly trial-and-errored transform that made rendered Hershey\ntext look \u201cmostly right\u201d\n\n<g>roup for the actual rendered Hershey text\n\n<g>roup for the scribbles\n\n\nWhen we scribble onto the canvas, the pointer coordinates don\u2019t account for that transform, so\nif we save them as-is, they\u2019ll be skewed from where they appear on the sticky note preview.\nPreviously, I tried to do a bunch of math on my own, which worked out really badly.\nSince then, I realized that if I have an existing transform, I can:\n\nget that transform as a matrix (thx StackOverflow)\ninvert that matrix\napply that matrix to the pointer coordinate\nWhen we add the transformed coordinate to our scribble, it now visually lines up with the preview\non the sticky note! Miracle.\nSVG building\nThe 2011 version of this demo used Jeff Wood\u2019s jQuery SVG plugin\nto rebuild pretty much the entire contents of the <svg> any time something changed.\nHowever, the main structure of the SVG described above doesn\u2019t change at all! So I moved the\n<g>roups that contain the transform to make things line up with the sticky note, and its\ninner <g>roups for the rendered Hershey text and pointer scribbles into the markup on the page.\nThere were still a couple of useful utilities for creating <g>roup and <path> elements in the\njQuery SVG plugin, so I made my own version in a little ES module svg helper\nGoing vanilla\nThere were lots of jQuery-isms that I vanilla-ized and in many cases modernized.\nreplace instances of $('#someid') with a single document.querySelector and a variable\nreplace $(someArray).each(...) with for (const item of someArray)\n\nupdate the hershey.js font parsing and rendering helper as an ES module.\nMade use of async and Promises to get rid of some messy setTimeout calls around font loading.\n\nreplace all var declarations with let and const\n\n\u201cWeb Component\u201d for scribbling\nOne of the biggest changes was extracting the handling of events and (re-)rendering out of a big\nspaghetti ball and into self-contained bits. I did these as web components that don\u2019t actually\nmanage any child HTML. Instead, their attributes tell them which elements on the page they should\nhook into for events or render onto.\nThe <svg-scribbler> component is interesting because I have it lean more into using the DOM as\nnew scribbles are added.\nPreviously: as the user draws a new scribble, they\u2019re pushed into an array, and on every change\nwe basically call a \u201crender\u201d function that throws out the SVG contents and re-creates it.\nThe new component simply creates a new <path> element when the user starts drawing and updates the\nd attribute as the user draws. When they stop drawing, the <path> is already in the page and done.\nWhen the user starts drawing again, we a new <path> element is created without disturbing any\nexisting <path>s from previous scribbles.\nTake a look at js/svg-scribbler.js for details.\n\u201cWeb Component\u201d for Hershey text\nSimilarly, the <svg-hersheytext> component takes care of listening for changes as you type\nin the <textarea> and re-rendering the <path>s for the text contents.\nOne wrinkle here is that we have a <select> dropdown to let you select a different Hershey\nfont. Previously, a jQuery change handler on the <select> for choosing a Hershey font would load\nthe newly selected font and then call what amounted to a top-level \u201crender\u201d function to draw\nall Hershey text and scribbles again.\nThe updated version uses a simpler event handler that emits a custom HersheyFont:updated event.\n<svg-hersheytext> elements listen for that custom events on the window object, and re-renders.\nIf you haven\u2019t used them, I think Chris Ferdinandi does a great job explaining the how and why of custom events.\nMutationObserver for SVG output area\nWrapped up in the previous spaghetti of \u201crender-everything\u201d style calls was a stop to generate\nan SVG string and slap it in a <textarea>.\nNow that the most of the SVG stays around in the page, I\u2019ve replaced that with a MutationObserver\nthat kicks off whenever elements are added or changed down in the SVG tree. I love this!\nKnown Issues\nNaive pointer* events handling does unexpected things on multi-touch devices\nFor example, this two-finger drag makes kind of a zig-zaggy filled-in area instead of two distinct lines:\n\nI think this is fun and weird, actually.\n\ninkscape-unicorn is deprecated!\nYeah so the tool this was designed to make drawings for isn\u2019t really a going thing in 2024.\nUm. Sorry? Enjoy your SVG scribbles anyway!",
        "html": "<p>I just posted <a href=\"https://glitch.com/~sticky-scribbles\">Sticky Scribbles</a> to Glitch as a Glitch Jam entry for August 2024. The prompt got me thinking about some old web art projects that have come and gone, so I picked one up, dusted it off, dropped it on the floor, stepped on it, cut myself on the pieces, bought expensive raw goods from the store, and rebuilt a nearly unrecognizable new version that does the same thing.</p>\n<p>I thought I\u2019d post the write-up on my blog, as well.</p>\n<h2><a href=\"https://sticky-scribbles.glitch.me/\">Sticky Scribbles</a></h2>\n<ol><li>Type some text and choose a font.</li>\n<li>Maybe scribble on the sticky note a little.</li>\n<li>Copy-paste the Output SVG into a file of your own choosing.</li>\n<li>Open it in your pen plotter software and plot it, I guess!</li>\n</ol><p>Need to erase? A page refresh will clear all scribbling.</p>\n<p>The fonts are vector strokes suitable for plotting. They\u2019re called <a href=\"http://emergent.unpythonic.net/software/hershey\">Hershey fonts</a>\nand their story is pretty interesting!</p>\n<p>You can also <a href=\"https://github.com/martymcguire/sticky-scribbles\">find the full source and history on GitHub</a>.</p>\n<h2>Why</h2>\n<p>Inspired by the August 2024 <a href=\"https://glitch.com/jams/\">Glitch Jams</a> prompt of \u201c#justdraw\u201d,\nI remembered an old project from <em>2011</em>.</p>\n<p>Back then I worked for MakerBot Industries and, at the urging of my friend Matt Griffin,\nhad started a descent into <del>madnes-</del> pen plotting. For me, that meant using the\nMakerBot Unicorn a tool for the MakerBot Cupcake CNC that replaced the plastic extruder\nto turn a 3D printer into a loosey-goosey pen plotter.</p>\n<p>As with most DIY 3D printers of the day, the Cupcake CNC was driven by G-Code - short\ninstructions sent over a serial port to tell it how to move its motors, etc. When I\nstarted playing around, the process for going from some vector artwork to G-Code was\npretty labor intensive and required multiple tools.</p>\n<p>The work area for the Cupcake CNC is 10cm square, which is just a little bit bigger than\na pad of 3\"x3\" name brand sticky notes. So, these easily becamie a target for my <del>madnes</del> making.</p>\n<p>In February of that year I particpated in \u201cThing-a-Day\u201d on Posterous (RIP), and worked on\nseveral projects to try and boost the ease of use of this whole ecosystem.</p>\n<h2>A timeline you didn\u2019t ask for</h2>\n<h3>Unicorn G-Code extension for Inkscape</h3>\n<p>Mashing up some example Python code from the Unicorn release, and the Inkscape driver for\nEvil Mad Scientist Laboratories\u2019 <a href=\"https://github.com/evil-mad/EggBot\">EggBot</a>, this extension\nlet you save (simple) drawings as G-Code that you could plot using a Cupcake CNC + Unicorn.</p>\n<ul><li>\n<a href=\"https://martymcgui.re/2011/02/01/thing-a-day-2011-%231-unicorn-pen-plotter-extension-for-inkscape/\">2011-02-01 - Announced the Unicorn G-Code extension for Inkscape</a>.\n<ul><li>\n<a href=\"https://github.com/martymcguire/inkscape-unicorn\">GitHub repository</a> (archived 2018)</li>\n<li><a href=\"http://www.thingiverse.com/thing:5986\">Thingiverse</a></li>\n</ul></li>\n<li><a href=\"https://martymcgui.re/2011/02/02/thing-a-day-2011-%232-new-features-for-inkscape-unicorn-pen-registration-and-homing-support/\">2011-02-02 - Added a pen registration step and homing support</a></li>\n<li><a href=\"https://martymcgui.re/2011/02/03/thing-a-day-2011-%233-copies-and-continuous-plotting-for-inkscape-unicorn/\">2011-02-03 - Added support for multiple copies and continuous plotting</a></li>\n<li><a href=\"https://martymcgui.re/2011/02/04/thing-a-day-2011-%234-pen-changing/\">2011-02-04 - Added support for pausing to change pens</a></li>\n</ul><p>While I made this Inkscape extension to serve a very niche machine, I ended up continuing to\nimprove it here and there. I was surprised to see it adopted by some DIY CNC projects from\nall over the world!</p>\n<p>Unfortunately, I never made much of a habit out of using my own extension, so when the extension\ninterfaces changed for Inkscape 0.91.x, I ended up marking it read-only.</p>\n<p>There are over 100 forks, though, so maybe somebody picked it back up!</p>\n<h3>Hershey fonts</h3>\n<p>Matt introduced me to <a href=\"http://emergent.unpythonic.net/software/hershey\">Hershey fonts</a>, a set\nof vector fonts designed for the U.S. government for use on CNC machines for plotting or engraving.\nThese were in a somewhat legible format, so I became a little obsessed with using them for\nplotter projects.</p>\n<ul><li>\n<a href=\"https://martymcgui.re/2011/02/06/thing-a-day-2011-#6-hershey-fonts-in-svg/\">2011-02-06 Announced conversions of the Hershey fonts to SVG</a>\n<ul><li><a href=\"http://www.thingiverse.com/thing:6168\">Hershey fonts in SVG on Thingiverse</a></li>\n<li>Windell of Evil Mad Scientist Laboratories was <a href=\"https://www.evilmadscientist.com/2011/hershey-text-an-inkscape-extension-for-engraving-fonts/\">motivated by this to make an Inkscape extenstion for rendering Hershey text</a>.\nThat extension became <em>part of Inkscape</em> and after time and improvements it\u2019s still there!</li>\n</ul></li>\n<li>\n<a href=\"https://martymcgui.re/2011/02/08/thing-a-day-2011-%238-hershey-font-rendering-in-javascript-with-rapha%C3%ABl/\">2011-02-08 - Hershey font rendering as SVG with JavaScript with Rapha\u00ebl.js</a>.\nA little proof of concept that would eventually become <em>this</em> little proof-of-concept.</li>\n<li><a href=\"https://martymcgui.re/2011/02/16/thing-a-day-2011-%2316-live-demo-of-hershey-fonts-in-javascript/\">2011-02-16 - Live demo using jQuery and Rapha\u00ebl.js</a></li>\n<li><a href=\"https://martymcgui.re/2011/02/17/thing-a-day-2011-%2317-simple-line-wrapping-for-hershey-js-demo/\">2011-02-17 - Added line wrapping to the demo</a></li>\n<li><a href=\"https://martymcgui.re/2011/02/20/thing-a-day-2011-%2320-hershey-fonts-in-javascript-on-the-canvas/\">2011-02-20 - Replaced Rapha\u00ebl.js with canvas</a></li>\n<li><a href=\"https://martymcgui.re/2011/02/21/thing-a-day-2011-%2321-auto-scaling-hershey-fonts-in-javascript/\">2011-02-21 - Auto-scale text to fit a box</a></li>\n<li><a href=\"https://martymcgui.re/2011/02/22/thing-a-day-2011-%2322-hershey-fonts-in-js-on-a-sticky-note/\">2011-02-22 - Added the cursed sticky note backdrop</a></li>\n<li><a href=\"https://martymcgui.re/2011/02/23/thing-a-day-2011-%2323-svg-output-for-hershey-fonts-in-javascript/\">2011-02-23 - Replaced canvas with Keith Wood\u2019s jQuery SVG plugin</a></li>\n<li><a href=\"https://martymcgui.re/2011/02/24/thing-a-day-2011-%2324-hershey-fonts-in-js-now-sized-for-unicorn-plotting/\">2011-02-24 - Sized everything for plotting on a sticky note via Unicorn</a></li>\n<li>\n<a href=\"https://martymcgui.re/2011/02/25/thing-a-day-2011-%2325-scribbling-in-svg-hershey-font-typing/\">2011-02-25 - Added terrible scribbling</a>.\nInsisting on having lines visually line up with the sticky note background but come out correctly\naligned in the resulting SVG was really biting me here.</li>\n<li>\n<a href=\"https://martymcgui.re/2011/02/26/thing-a-day-2011-%2326-improved-scribbling-in-javascript/\">2011-02-26 - \u201cImproved\u201d the terrible scribbling</a>.\n(Note: this did not fix the alignment issues. Why was I trying to do all the math myself?)</li>\n</ul><p>I\u2019d love to share gratuitous details about rewriting bits of this little tool. Unfortunately, I\nworked on it live on my site that entire time <em>without any version control</em>. \ud83d\ude2d</p>\n<p>(Where was Glitch in 2011?? lol)</p>\n<h3>Misc (un)related projects</h3>\n<ul><li><a href=\"https://martymcgui.re/2011/02/05/thing-a-day-2011-%235-graffiti-markup-language-gml-to-unicorn/\">2011-02-05 - Graffiti Markup Language to Unicorn G-Code</a></li>\n<li><a href=\"https://martymcgui.re/2011/02/14/thing-a-day-2011-%2314-sticky-note-tweet-template-for-unicorn/\">2011-02-14 - An SVG template for tweets</a></li>\n</ul><h2>This version</h2>\n<p>While you can find the entire history <a href=\"https://github.com/martymcguire/sticky-scribbles\">on the <code>sticky-scribbles</code> GitHub</a>,\nI had a good time figuring out how I left this ~13 year old project and choosing ways to \u201cmodernize\u201d\nor at least \u201cmake it less bad to my eyes\u201d.</p>\n<h3>Fixed the cursed sticky note projection</h3>\n<p>The drawing canvas markup can be summarized like this:</p>\n<ul><li>outer <code>&lt;svg&gt;</code> with background image of the stick note\n<ul><li>inner <code>&lt;g&gt;</code>roup with a painstakingly trial-and-errored <code>transform</code> that made rendered Hershey\ntext look \u201cmostly right\u201d\n<ul><li>\n<code>&lt;g&gt;</code>roup for the actual rendered Hershey text</li>\n<li>\n<code>&lt;g&gt;</code>roup for the scribbles</li>\n</ul></li>\n</ul></li>\n</ul><p>When we scribble onto the canvas, the pointer coordinates don\u2019t account for that <code>transform</code>, so\nif we save them as-is, they\u2019ll be skewed from where they appear on the sticky note preview.</p>\n<p>Previously, I tried to <em>do a bunch of math on my own</em>, which worked out really badly.</p>\n<p>Since then, I realized that if I have an existing <code>transform</code>, I can:</p>\n<ol><li>\n<a href=\"https://stackoverflow.com/a/64984121\">get that transform as a matrix</a> (thx StackOverflow)</li>\n<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix\">invert that matrix</a></li>\n<li><a href=\"https://stackoverflow.com/a/33579846\">apply that matrix to the pointer coordinate</a></li>\n</ol><p>When we add the transformed coordinate to our scribble, it now visually lines up with the preview\non the sticky note! Miracle.</p>\n<h3>SVG building</h3>\n<p>The 2011 version of this demo used <a href=\"http://keith-wood.name/svg.html\">Jeff Wood\u2019s jQuery SVG plugin</a>\nto rebuild pretty much the entire contents of the <code>&lt;svg&gt;</code> any time something changed.</p>\n<p>However, the main structure of the SVG described above doesn\u2019t change at all! So I moved the\n<code>&lt;g&gt;</code>roups that contain the <code>transform</code> to make things line up with the sticky note, and its\ninner <code>&lt;g&gt;</code>roups for the rendered Hershey text and pointer scribbles into the markup on the page.</p>\n<p>There were still a couple of useful utilities for creating <code>&lt;g&gt;</code>roup and <code>&lt;path&gt;</code> elements in the\njQuery SVG plugin, so I made my own version in a little <a href=\"https://github.com/martymcguire/sticky-scribbles/blob/main/js/svgHelper.js\">ES module <code>svg</code> helper</a></p>\n<h3>Going vanilla</h3>\n<p>There were lots of jQuery-isms that I vanilla-ized and in many cases modernized.</p>\n<ul><li>replace instances of <code>$('#someid')</code> with a single <code>document.querySelector</code> and a variable</li>\n<li>replace <code>$(someArray).each(...)</code> with <code>for (const item of someArray)</code>\n</li>\n<li>update the <code>hershey.js</code> font parsing and rendering helper as an ES module.\n<ul><li>Made use of <code>async</code> and <code>Promise</code>s to get rid of some messy <code>setTimeout</code> calls around font loading.</li>\n</ul></li>\n<li>replace all <code>var</code> declarations with <code>let</code> and <code>const</code>\n</li>\n</ul><h3>\u201cWeb Component\u201d for scribbling</h3>\n<p>One of the biggest changes was extracting the handling of events and (re-)rendering out of a big\nspaghetti ball and into self-contained bits. I did these as web components that don\u2019t actually\nmanage any <em>child</em> HTML. Instead, their attributes tell them which elements on the page they should\nhook into for events or render onto.</p>\n<p>The <code>&lt;svg-scribbler&gt;</code> component is interesting because I have it lean more into using the DOM as\nnew scribbles are added.</p>\n<p>Previously: as the user draws a new scribble, they\u2019re pushed into an array, and on every change\nwe basically call a \u201crender\u201d function that throws out the SVG contents and re-creates it.</p>\n<p>The new component simply creates a new <code>&lt;path&gt;</code> element when the user starts drawing and updates the\n<code>d</code> attribute as the user draws. When they stop drawing, the <code>&lt;path&gt;</code> is already in the page and done.\nWhen the user starts drawing again, we a new <code>&lt;path&gt;</code> element is created without disturbing any\nexisting <code>&lt;path&gt;</code>s from previous scribbles.</p>\n<p>Take a look at <code>js/svg-scribbler.js</code> for details.</p>\n<h3>\u201cWeb Component\u201d for Hershey text</h3>\n<p>Similarly, the <code>&lt;svg-hersheytext&gt;</code> component takes care of listening for changes as you type\nin the <code>&lt;textarea&gt;</code> and re-rendering the <code>&lt;path&gt;</code>s for the text contents.</p>\n<p>One wrinkle here is that we have a <code>&lt;select&gt;</code> dropdown to let you select a different Hershey\nfont. Previously, a jQuery <code>change</code> handler on the <code>&lt;select&gt;</code> for choosing a Hershey font would load\nthe newly selected font and then call what amounted to a top-level \u201crender\u201d function to draw\nall Hershey text and scribbles again.</p>\n<p>The updated version uses a simpler event handler that emits a custom <code>HersheyFont:updated</code> event.\n<code>&lt;svg-hersheytext&gt;</code> elements listen for that custom events on the <code>window</code> object, and re-renders.</p>\n<p>If you haven\u2019t used them, I think <a href=\"https://gomakethings.com/custom-events-with-vanilla-js/\">Chris Ferdinandi does a great job explaining the how and why of custom events</a>.</p>\n<h3>MutationObserver for SVG output area</h3>\n<p>Wrapped up in the previous spaghetti of \u201crender-everything\u201d style calls was a stop to generate\nan SVG string and slap it in a <code>&lt;textarea&gt;</code>.</p>\n<p>Now that the most of the SVG stays around in the page, I\u2019ve replaced that with a <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver\">MutationObserver</a>\nthat kicks off whenever elements are added or changed down in the SVG tree. I love this!</p>\n<h2>Known Issues</h2>\n<h3>Naive <code>pointer*</code> events handling does unexpected things on multi-touch devices</h3>\n<p>For example, this two-finger drag makes kind of a zig-zaggy filled-in area instead of two distinct lines:</p>\n<p><img src=\"https://media.martymcgui.re/1a/dc/45/10/8e6955226824fa55edc93d75ec5e05f6696caeffa9a3870a50ff208f.jpg\" alt=\"app screenshot showing the effect of a two-finger drag. instead of two distinct lines, we have a zigzag that fills the space between the fingers\" /></p>\n<p>I think this is fun and weird, actually.</p>\n<h3>\n<code>inkscape-unicorn</code> is deprecated!</h3>\n<p>Yeah so the tool this was designed to make drawings for isn\u2019t really a going thing in 2024.</p>\n<p>Um. Sorry? Enjoy your SVG scribbles anyway!</p>"
    },
    "author": {
        "type": "card",
        "name": "Marty McGuire",
        "url": "https://martymcgui.re/",
        "photo": "https://martymcgui.re/images/logo.jpg"
    },
    "post-type": "article",
    "_id": "41958891",
    "_source": "175"
}

{
    "type": "entry",
    "published": "2024-08-17T07:35:45-07:00",
    "url": "https://aaronparecki.com/2024/08/17/3/hot-sauce",
    "category": [
        "hotsauce"
    ],
    "photo": [
        "https://aperture-media.p3k.io/aaronparecki.com/0211319dd98290e2f694082709e6b60a62a9be571172751988739059f83a5fc2.jpg"
    ],
    "content": {
        "text": "More hot sauce! I bought out the entire shelf of habaneros at Whole Foods for this!"
    },
    "author": {
        "type": "card",
        "name": "Aaron Parecki",
        "url": "https://aaronparecki.com/",
        "photo": "https://aperture-media.p3k.io/aaronparecki.com/41061f9de825966faa22e9c42830e1d4a614a321213b4575b9488aa93f89817a.jpg"
    },
    "post-type": "photo",
    "_id": "41955713",
    "_source": "16"
}

Trying out Zed

{
    "type": "entry",
    "published": "2024-08-15T12:13:24-07:00",
    "url": "https://beesbuzz.biz/blog/7060-Trying-out-Zed",
    "name": "Trying out Zed",
    "author": {
        "type": "card",
        "name": "fluffy",
        "url": "https://beesbuzz.biz/",
        "photo": "https://beesbuzz.biz/static/headshot.jpg"
    },
    "post-type": "article",
    "_id": "41939856",
    "_source": "2778"
}

An error occurred

{
    "type": "entry",
    "author": {
        "name": null,
        "url": "https://herestomwiththeweather.com/",
        "photo": null
    },
    "url": "https://herestomwiththeweather.com/2024/08/15/an-error-occurred/",
    "published": "2024-08-15T03:14:26+00:00",
    "content": {
        "html": "<p>Classical pianist <a href=\"https://en.wikipedia.org/wiki/Jayson_Gillham\">Jayson Gillham</a> was pulled from an upcoming performance in Melbourne after dedicating a piece of music to the <a href=\"https://cpj.org/2024/08/journalist-casualties-in-the-israel-gaza-conflict/\">journalists of Gaza</a>.  The Melbourne Symphony Orchestra <a href=\"https://www.abc.net.au/news/2024-08-15/mso-concert-backdown-jayson-gillham-gaza/104227894\">now says the cancellation was due to an error</a> and they appear to be rescheduling the concert.</p>",
        "text": "Classical pianist Jayson Gillham was pulled from an upcoming performance in Melbourne after dedicating a piece of music to the journalists of Gaza.  The Melbourne Symphony Orchestra now says the cancellation was due to an error and they appear to be rescheduling the concert."
    },
    "name": "An error occurred",
    "post-type": "article",
    "_id": "41933427",
    "_source": "246"
}

🏠 ⚡️ ⚙️ Lanbon L8 touchscreen wall plate with openHASP

{
    "type": "entry",
    "published": "2024-08-14T07:39:35+00:00",
    "url": "https://cleverdevil.io/2024/-lanbon-l8-touchscreen-wall-plate-with-openhasp",
    "photo": [
        "https://cleverdevil.io/file/628224e361733a84d839752e79798b0f/IMG_1813.bmp"
    ],
    "syndication": [
        "https://bsky.app/profile/cleverdevil.io/post/3kznzdzkzfy2g"
    ],
    "name": "\ud83c\udfe0 \u26a1\ufe0f \u2699\ufe0f Lanbon L8 touchscreen wall plate with openHASP",
    "author": {
        "type": "card",
        "name": "Jonathan LaCour",
        "url": "https://cleverdevil.io/profile/cleverdevil",
        "photo": "https://cleverdevil.io/file/e37c3982acf4f0a8421d085b9971cd71/thumb.jpg"
    },
    "post-type": "photo",
    "_id": "41924392",
    "_source": "10"
}

{
    "type": "entry",
    "published": "2024-08-13T21:05:51-07:00",
    "url": "https://aaronparecki.com/2024/08/13/11/oauth",
    "category": [
        "oauth"
    ],
    "photo": [
        "https://aperture-media.p3k.io/aaronparecki.com/78e07eaa6d005f59cc4c11ec01d8e82a6c9da5fc0e97f47c9edba4d2095f8dce.jpg"
    ],
    "content": {
        "text": "Love seeing more US banks adopting OAuth!"
    },
    "author": {
        "type": "card",
        "name": "Aaron Parecki",
        "url": "https://aaronparecki.com/",
        "photo": "https://aperture-media.p3k.io/aaronparecki.com/41061f9de825966faa22e9c42830e1d4a614a321213b4575b9488aa93f89817a.jpg"
    },
    "post-type": "photo",
    "_id": "41921730",
    "_source": "16"
}

{
    "type": "entry",
    "published": "2024-08-13T19:12:51-07:00",
    "url": "https://aaronparecki.com/2024/08/13/8/hotsauce",
    "category": [
        "hotsauce"
    ],
    "photo": [
        "https://aperture-media.p3k.io/aaronparecki.com/0fa749bb9687fcb77c0ccfba3f4c5f6d56222fc0a00c64a26a1df53df7198055.jpg"
    ],
    "content": {
        "text": "Just turned a pound of farmers market peppers into hot sauce in the instant pot \ud83d\udcaf",
        "html": "Just turned a pound of farmers market peppers into hot sauce in the instant pot <a href=\"https://aaronparecki.com/emoji/%F0%9F%92%AF\">\ud83d\udcaf</a>"
    },
    "author": {
        "type": "card",
        "name": "Aaron Parecki",
        "url": "https://aaronparecki.com/",
        "photo": "https://aperture-media.p3k.io/aaronparecki.com/41061f9de825966faa22e9c42830e1d4a614a321213b4575b9488aa93f89817a.jpg"
    },
    "post-type": "photo",
    "_id": "41921275",
    "_source": "16"
}

{
    "type": "entry",
    "published": "2024-08-11T11:51:00-07:00",
    "url": "https://aaronparecki.com/2024/08/11/18/",
    "syndication": [
        "https://www.swarmapp.com/user/59164/checkin/66b90814e50c3f096d97fd0e"
    ],
    "content": {
        "text": "Post Bridge Pedal"
    },
    "author": {
        "type": "card",
        "name": "Aaron Parecki",
        "url": "https://aaronparecki.com/",
        "photo": "https://aperture-media.p3k.io/aaronparecki.com/41061f9de825966faa22e9c42830e1d4a614a321213b4575b9488aa93f89817a.jpg"
    },
    "checkin": {
        "type": "card",
        "name": "Lazy Days Brewing",
        "latitude": "45.540012",
        "longitude": "-122.66845",
        "url": "https://foursquare.com/v/657f3bd12f20de51ff018835"
    },
    "post-type": "checkin",
    "_id": "41898911",
    "_source": "16"
}

{
    "type": "entry",
    "published": "2024-08-11T06:09:47-07:00",
    "url": "https://aaronparecki.com/2024/08/11/3/",
    "photo": [
        "https://aperture-media.p3k.io/aaronparecki.com/edbd13fa4d9171149ceb060f33fe9ac49dd6504e04a026e931a6ae7d6f802a49.jpg"
    ],
    "syndication": [
        "https://www.swarmapp.com/user/59164/checkin/66b8b81b152b9d24842603f9"
    ],
    "content": {
        "text": "Start of the Bridge Pedal Ride! \ud83d\udeb2",
        "html": "Start of the Bridge Pedal Ride! <a href=\"https://aaronparecki.com/emoji/%F0%9F%9A%B2\">\ud83d\udeb2</a>"
    },
    "author": {
        "type": "card",
        "name": "Aaron Parecki",
        "url": "https://aaronparecki.com/",
        "photo": "https://aperture-media.p3k.io/aaronparecki.com/a1ea8193320cc8da5d8f2f28a80659e138cc2df12d66d9b70dce0cca228074cd.jpg"
    },
    "checkin": {
        "type": "card",
        "name": "Fremont Bridge",
        "latitude": "45.53822",
        "longitude": "-122.682599",
        "url": "https://foursquare.com/v/4b7eb89af964a52016fb2fe3"
    },
    "post-type": "checkin",
    "_id": "41896796",
    "_source": "16"
}

Upcoming livestream

{
    "type": "entry",
    "published": "2024-08-10T22:30:17-07:00",
    "url": "https://beesbuzz.biz/blog/14674-Upcoming-livestream",
    "name": "Upcoming livestream",
    "author": {
        "type": "card",
        "name": "fluffy",
        "url": "https://beesbuzz.biz/",
        "photo": "https://beesbuzz.biz/static/headshot.jpg"
    },
    "post-type": "article",
    "_id": "41894844",
    "_source": "2778"
}

{
    "type": "entry",
    "published": "2024-08-10T13:46:03-0400",
    "summary": "\ud83d\udcd7 Want to read The Dead Cat Tail Assassins by P. Dj\u00e8l\u00ed Clark ISBN: 9781250767042",
    "url": "https://martymcgui.re/2024/08/10/134603/",
    "category": [
        "books"
    ],
    "author": {
        "type": "card",
        "name": "Marty McGuire",
        "url": "https://martymcgui.re/",
        "photo": "https://martymcgui.re/images/logo.jpg"
    },
    "post-type": "note",
    "_id": "41893122",
    "_source": "175"
}

{
    "type": "entry",
    "published": "2024-08-10T09:57:01-07:00",
    "url": "https://aaronparecki.com/2024/08/10/6/",
    "syndication": [
        "https://www.swarmapp.com/user/59164/checkin/66b79bdd39ac7f185d39a924"
    ],
    "content": {
        "text": "Bridge Pedal pickup"
    },
    "author": {
        "type": "card",
        "name": "Aaron Parecki",
        "url": "https://aaronparecki.com/",
        "photo": "https://aperture-media.p3k.io/aaronparecki.com/41061f9de825966faa22e9c42830e1d4a614a321213b4575b9488aa93f89817a.jpg"
    },
    "checkin": {
        "type": "card",
        "name": "Providence Office Park",
        "latitude": "45.532205",
        "longitude": "-122.616424",
        "url": "https://foursquare.com/v/4c72ddb657b6a14379aac6cc"
    },
    "post-type": "checkin",
    "_id": "41891147",
    "_source": "16"
}

{
    "type": "entry",
    "published": "2024-08-08T19:03:43-07:00",
    "url": "https://aaronparecki.com/2024/08/08/13/line-crossing",
    "category": [
        "homeautomation",
        "security",
        "homeassistant",
        "unifi"
    ],
    "syndication": [
        "https://bsky.app/profile/aaronpk.com/post/3kzauayohu227",
        "https://bsky.app/profile/aaronpk.com/post/3kzaubavjt22z"
    ],
    "content": {
        "text": "Someone broke through the chain link fence last week, in broad daylight, while I was home, and didn't notice at the time. \n\nI started thinking about what I could do about it, and it turns out the EA Unifi cameras have a new webhook feature. So now my cameras send a webhook to Home Assistant when someone crosses a virtual line, and it will trigger the siren. Since this is a line crossing event, not generic person detection, I can leave it armed 24/7, since nobody should be in that area at all.",
        "html": "Someone broke through the chain link fence last week, in broad daylight, while I was home, and didn't notice at the time. <br /><br />I started thinking about what I could do about it, and it turns out the EA Unifi cameras have a new webhook feature. So now my cameras send a webhook to Home Assistant when someone crosses a virtual line, and it will trigger the siren. Since this is a line crossing event, not generic person detection, I can leave it armed 24/7, since nobody should be in that area at all."
    },
    "author": {
        "type": "card",
        "name": "Aaron Parecki",
        "url": "https://aaronparecki.com/",
        "photo": "https://aperture-media.p3k.io/aaronparecki.com/41061f9de825966faa22e9c42830e1d4a614a321213b4575b9488aa93f89817a.jpg"
    },
    "post-type": "note",
    "_id": "41876157",
    "_source": "16"
}

{
    "type": "entry",
    "published": "2024-08-08T10:06:25-07:00",
    "url": "https://aaronparecki.com/2024/08/08/9/",
    "syndication": [
        "https://bsky.app/profile/aaronpk.com/post/3kz7wa5vjtx26"
    ],
    "content": {
        "text": "why am I always either drowning in lens wipes or can never find one??"
    },
    "author": {
        "type": "card",
        "name": "Aaron Parecki",
        "url": "https://aaronparecki.com/",
        "photo": "https://aperture-media.p3k.io/aaronparecki.com/41061f9de825966faa22e9c42830e1d4a614a321213b4575b9488aa93f89817a.jpg"
    },
    "post-type": "note",
    "_id": "41872112",
    "_source": "16"
}

{
    "type": "entry",
    "published": "2024-08-07T21:09:51-0400",
    "url": "https://martymcgui.re/2024/08/07/210951/",
    "category": [
        "Caturday"
    ],
    "video": [
        "https://res.cloudinary.com/schmarty/video/upload/vc_h264/mmmgre/99/3e/4d/24/7db70d253f711fc0ccf9d8980587d2629510f6eba93b2a6abec67709.mov"
    ],
    "content": {
        "text": "Are you waiting for something during eternal Caturday?",
        "html": "<p>Are you waiting for something during eternal Caturday?</p>"
    },
    "author": {
        "type": "card",
        "name": "Marty McGuire",
        "url": "https://martymcgui.re/",
        "photo": "https://martymcgui.re/images/logo.jpg"
    },
    "post-type": "video",
    "_id": "41866433",
    "_source": "175"
}

fuck email

{
    "type": "entry",
    "published": "2024-08-07T18:16:51-07:00",
    "url": "https://beesbuzz.biz/blog/21-fuck-email",
    "name": "fuck email",
    "content": {
        "text": "Today something fucked up with my mail server and I\u2019m sick of dealing with it, so I migrated my mail to Purely Mail, which is great, and there\u2019s still a bunch of shit broken on my site as a result of things fucking up but whatever, at least now I can receive mail again and I don\u2019t have to spend frantic hours to receive email when I\u2019m already in the middle of a fucking crisis\n\nit\u2019s like $10/year and works great, and I\u2019ll probably also drop mailgun for my outgoing because it handles that just fine too",
        "html": "<p>Today something fucked up with my mail server and I\u2019m sick of dealing with it, so I migrated my mail to <a href=\"https://purelymail.com/\">Purely Mail</a>, which is great, and there\u2019s still a bunch of shit broken on my site as a result of things fucking up but whatever, at least now I can receive mail again and I don\u2019t have to spend frantic hours to receive email when I\u2019m already in the middle of a fucking crisis</p><p>it\u2019s like $10/year and works great, and I\u2019ll probably also drop mailgun for my outgoing because it handles that just fine too</p>"
    },
    "author": {
        "type": "card",
        "name": "fluffy",
        "url": "https://beesbuzz.biz/",
        "photo": "https://beesbuzz.biz/static/headshot.jpg"
    },
    "post-type": "article",
    "_id": "41866239",
    "_source": "2778"
}

Home(Owner) Again

{
    "type": "entry",
    "published": "2024-08-06T19:32:43-07:00",
    "url": "https://nadreck.me/2024/08/homeowner-again/",
    "category": [
        "life",
        "vermont"
    ],
    "name": "Home(Owner) Again",
    "content": {
        "text": "I wasn\u2019t really mentioning this publicly, but now that the papers are all signed, I\u2019m happy to announce we just bought a house! It\u2019s a very, very, very fine house in a quiet neighborhood in Rutland, Vermont. Which means, yep, I\u2019ll be a Vermont resident again. It feels like a nice culmination to spending the last year exploring the country (almost exactly a year \u2013 we left August 17th, and here it is, August 6th). We\u2019re still planning to travel when we can, but it\u2019ll be nice to have a home base again. Looking forward to it!",
        "html": "<p>I wasn\u2019t really mentioning this publicly, but now that the papers are all signed, I\u2019m happy to announce we just bought a house! It\u2019s a very, very, very fine house in a quiet neighborhood in Rutland, Vermont. Which means, yep, I\u2019ll be a Vermont resident again. It feels like a nice culmination to spending the last year exploring the country (almost exactly a year \u2013 we left August 17th, and here it is, August 6th). We\u2019re still planning to travel when we can, but it\u2019ll be nice to have a home base again. Looking forward to it!</p>"
    },
    "author": {
        "type": "card",
        "name": "Nadreck",
        "url": "http://nadreck.me",
        "photo": null
    },
    "post-type": "article",
    "_id": "41856932",
    "_source": "2935"
}

{
    "type": "entry",
    "published": "2024-08-06T17:03:20-07:00",
    "url": "https://aaronparecki.com/2024/08/06/10/crash",
    "category": [
        "stock",
        "market"
    ],
    "photo": [
        "https://aperture-media.p3k.io/aaronparecki.com/e2baec17a9fa1e0476181c5ad88fbfd6919d48cc4a903ff2f5a917e7c7a0f8f0.png"
    ],
    "content": {
        "text": "This screenshot from my Vanguard portfolio is why I am not worried about the current \"crash\""
    },
    "author": {
        "type": "card",
        "name": "Aaron Parecki",
        "url": "https://aaronparecki.com/",
        "photo": "https://aperture-media.p3k.io/aaronparecki.com/41061f9de825966faa22e9c42830e1d4a614a321213b4575b9488aa93f89817a.jpg"
    },
    "post-type": "photo",
    "_id": "41856223",
    "_source": "16"
}

{
    "type": "entry",
    "published": "2024-08-06 12:59-0700",
    "url": "https://gregorlove.com/2024/07/i-am-upset-but/",
    "syndication": [
        "https://fed.brid.gy/"
    ],
    "content": {
        "text": "I am upset but not surprised that Nassau County passed a public mask ban. Misdemeanor with a $1,000 fine and vague exemptions for health or religious reasons \u2014 left up to police to decide, of course. \ud83d\ude21",
        "html": "<p>I am upset but not surprised that Nassau County passed a public mask ban. Misdemeanor with a $1,000 fine and vague exemptions for health or religious reasons \u2014 left up to police to decide, of course. \ud83d\ude21</p>"
    },
    "author": {
        "type": "card",
        "name": "gRegor Morrill",
        "url": "https://gregorlove.com/",
        "photo": "https://gregorlove.com/site/assets/files/6268/profile-2021-square.300x0.jpg"
    },
    "post-type": "note",
    "_id": "41854653",
    "_source": "95"
}

{
    "type": "entry",
    "published": "2024-08-06T08:32:50-07:00",
    "url": "https://aaronparecki.com/2024/08/06/4/100days",
    "category": [
        "100daysofmusic"
    ],
    "syndication": [
        "https://bsky.app/profile/aaronpk.com/post/3kz2q33zft22a"
    ],
    "content": {
        "text": "Just posted another video of me working through my 100 songs to make them full length! This one involves cats \ud83d\udc08 \n\nhttps://www.youtube.com/watch?v=J_Awoj6C7Lg",
        "html": "Just posted another video of me working through my 100 songs to make them full length! This one involves cats <a href=\"https://aaronparecki.com/emoji/%F0%9F%90%88\">\ud83d\udc08</a> <br /><br /><a href=\"https://www.youtube.com/watch?v=J_Awoj6C7Lg\"><span>https://</span>www.youtube.com/watch?v=J_Awoj6C7Lg</a>"
    },
    "author": {
        "type": "card",
        "name": "Aaron Parecki",
        "url": "https://aaronparecki.com/",
        "photo": "https://aperture-media.p3k.io/aaronparecki.com/41061f9de825966faa22e9c42830e1d4a614a321213b4575b9488aa93f89817a.jpg"
    },
    "post-type": "note",
    "_id": "41852086",
    "_source": "16"
}