dW dW is the blog/portfolio of Dustin Wilson, a designer, illustrator, & developer with a great affinity for the Web. Here he rambles on seemingly aimlessly about whatever interests him at any given moment. urn:uuid:6b912d40-8e9a-5d81-a708-316096b8aac6 2023-09-09T14:42:54+00:00 Dustin Wilson https://dustinwilson.com urn:uuid:cc3935aa-4441-5c2f-a14b-a854d7ad978b Gene's Bayou 2023-09-09T06:52:10+00:00 Dustin Wilson https://dustinwilson.com <figure><a href="https://dustinwilson.com/images/blog/genes_bayou/genes_bayou-l@2.jpg"><img src="https://dustinwilson.com/images/blog/genes_bayou/genes_bayou-l.jpg" width="1262" height="631" alt="A view of a sunset on a Louisiana bayou; an egret is perching on a cypress knee next to a cypress tree looking toward a well-maintained fishing shack that has three pirogues docked at it; a bug zapper is visible hanging by the front door on a porch that is lit by lights strung around the tops of the wooden pillars holding it up"></a></figure> <p>Wow. It's been just slightly over a year since I last posted anything here. I've been really busy but at the same time not really feeling like writing about anything. It's my fault. There is something I've wanted to write about but not wanted to write about at the same time if that makes any sense at all. It probably doesn't.</p> <p>Earlier this year I was commissioned by Greg from <a href="https://dustinwilson.com/blog/gene_cox_grocery" title="dW: Gene Cox Grocery">Gene Cox Grocery</a> to design a logo for a restaurant he was starting and to also paint a large digital painting to put on the wall near the front entrance. I haven't done a commission in quite some time, and I haven't really wanted to. But, since it was Greg I agreed. The restaurant was to serve steaks, catfish, and shrimp -- typical Louisiana cuisine. I was given little direction as to what to do with the painting other than it should be a bayou scene. Above is what I painted. It is 6 <abbr title="Feet">ft.</abbr> × 3 <abbr title="Feet">ft.</abbr> (1.8288 <abbr title="Meter">m.</abbr> × 0.9144 <abbr title="Meter">m.</abbr>), and is by far the largest thing I've ever done. It's painted digitally to that size at 300 <abbr title="Dots Per Inch">d.p.i.</abbr> (118.11 <abbr title="Dots Per Centimeter">d.p.cm</abbr>). The painting took me about 2.5 months to complete after the initial sketches and color study were approved. I had to send it off to be specialty printed at the quality required, and Greg had to use the carpenter he used for remodeling the restaurant to build the frame for it.</p> <p>I wanted to get a picture of it, but while it was hanging in the restaurant I was in Canada. Greg received and accepted an offer to purchase his entire restaurant and attached grocery. He immediately took down the painting, not wanting it included in the purchase. I'll eventually get a picture of its hanging. Sadly I didn't get to see its hanging in the restaurant itself.</p> urn:uuid:e2220e25-8a73-5660-aa06-78ee3574f83a Home 2022-08-02T13:25:45+00:00 Dustin Wilson https://dustinwilson.com <figure><a href="https://dustinwilson.com/images/blog/home/home-l@2.jpg"><img src="https://dustinwilson.com/images/blog/home/home-l.jpg" width="1262" height="1578" alt="A view of a gigantic turtle with a rocky island on its shell swimming through the ocean; an extremely long school of sardines as far as the eye can see is swimming straight toward the camera; a small settlement can be seen on the island with windmills and terraced farming"></a></figure> <p>It's been a few months since my last ramble on here. I have a good reason, but I want to write about that in another post a bit later <small>(if I remember)</small>. I have this big picture up above to write about right now. It's a turtle -- a really, really big one. Okay; that's it. Enjoy.</p> <hr> <p>Oh. Still here? Well, I started on this last year in December. I haven't worked on it all the time since then, just when I had time and felt like it. The inspiration for this was from conversations I've had with Kate where she explained myths from her people which depicts the known world of eons ago (North and Central America) as a giant turtle. I started getting images in my head of this world of islands on the backs of giant sea turtles. Seasons would come about due to the migratory patterns of these turtles. The island I ended up depicting was to be windswept due to constant migration by its host. For most of the painting process I had no idea whether I wanted to make the island seem more inhabited or leave it mostly devoid of development. I came to the conclusion it just simply looked better when the viewer had to look carefully for signs of civilization rather than the island's being one massive city or something of the sort.</p> <p>The turtle is mostly just a giant hawksbill turtle but with a different, "older" looking face. I chose a hawksbill because they're really interesting looking and because they're endangered. When I intially conceived of this idea in my mind the turtle was to be covered in barnacles and stuff hanging off it in a way to depict visually a methuselistic age, but when drawing it the sheer scale of the thing made showing stuff hanging off it to be a tall order as they would be microscopic in size. When I first started painting in detail on the creature, the texture I painted in to represent barnacles and such ended up just making the turtle look filthy. That would in turn make it appear monstrous. It's not a monster but an animal, likely magical because nothing that size could exist. Seriously, look at the shape immediately under its right shoulder; that's a blue whale, the largest creature ever known to have existed -- bigger than any dinosaur we've ever dug up. I, in the end, added a few barnacle-looking things on its body thinking if there's mountainous turtles there'd be giant barnacles, too. I still dispensed with the texture, though. On the bottom there is a miles/kilometers/whatever long school of sardines. This was the most difficult thing I've drawn in living memory. It took forever to figure out how to get the scale right on them and to draw the ones closest to the camera; they're the most detailed.</p> <p>I struggled with the title since I first started on it. I never could figure anything out that fit, and truth be told I'm not entirely sure about the title still. I'm going to run with it anyway. I felt like it should be something simple, even one word. What I have chosen works even if I'm incapable of thinking of a better title. For the imaginary people who live on the turtle island it would be their home.</p> urn:uuid:09b678fe-ab99-575f-b84c-ac3c498ddfb8 Photoshop Clear Mode Toggling 2022-03-08T18:29:08+00:00 Dustin Wilson https://dustinwilson.com <p>Usually when listing grievances concerning <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a> or any Adobe product the typical complaint is about the subscription model. Believe me, <a href="https://dustinwilson.com/blog/passing_on_1password#renting-software" title="dW: Passing on 1Password – Renting Software">I'm not a fan</a>. This post isn't about that; but first I do want to air some grievances.</p> <p>I have a soft spot for Adobe Photoshop because it is how I truly began digital painting. Photoshop is a venerable program, having been released to the public since 1990. I've used it since 2.0 in 1991 on the <a href="http://lowendmac.com/1987/mac-ii/" title="“Macintosh II” on Low End Mac">Macintosh II</a>. I was just a kid. There were no layers, only one undo, and no custom brushes; but it was <em>magic</em>. I would spend hours upon hours drawing random things in it with a mouse and later scanning my drawings in to manipulate them. I would use it for what it was designed for -- to manipulate photographs -- but the truth is that what I wanted to do was draw on a computer, and that wasn't feasible for at least half a decade or more from then when I bought the first model <a href="https://www.wacom.com">Wacom</a> Intuos tablet. I could finally draw on my computer.</p> <p>Back in the day we used Photoshop because we had to. It was the only name in town for that sort of thing that was worth using. <a href="https://www.painterartist.com" title="Corel Painter 2022">Painter</a> is an application that is nearly as old as Photoshop is which is designed to more accurately mimic natural media and is geared more toward digital painting. Unfortunately, it is janky and incredibly slow; in fact it always has been despite decades of development and changing hands between companies. <a href="https://en.wikipedia.org/wiki/Deluxe_Paint" title="Deluxe Paint on Wikipedia">Deluxe Paint</a> predated Photoshop which is something <a href="https://en.wikipedia.org/wiki/Amiga" title="Amiga on Wikipedia">Amiga</a> fans love to point out, but it was a bitmap pixel editor meant largely for low color 8-bit <abbr title="Two Dimensions">2D</abbr> 1980's video game graphics; it was even developed by <a href="https://www.ea.com">Electronic Arts</a>. This is not a knock at pixel artists, but I'm talking about painting here. All of the other alternatives back then are not worth mentioning. Today, <a href="https://krita.org" title="Krita">there</a> <a href="https://www.clipstudio.net" title="Clip Studio Paint">are</a> <a href="https://www.artrage.com" title="Artrage Vitae">numerous</a> <a href="https://www.escapemotions.com/products/rebelle/about" title="Rebelle 5">good</a> <a href="https://affinity.serif.com/en-us/photo/" title="Affinity Photo">alternatives</a> for <a href="https://procreate.art" title="Procreate">painting</a>. Adobe even has <a href="https://www.adobe.com/products/fresco.html" title="Adobe Fresco">another application</a> which is purely meant for digital painting, but it's only available on <span>iOS</span> and also Windows -- if the Windows computer has a built-in pen display. Professionals who have paid upwards of $3000 for Cintiq pen displays are shit out of luck.</p> <p>Photoshop has always been marketed and treated by Adobe mostly for photo manipulation. Digital painting, despite being important for two of the biggest entertainment industries in the world, has largely been treated as the equivalent of a red-headed stepchild. Bones were thrown at digital artists as far back as Photoshop 6 when what we think of the Photoshop brush engine today had its beginnings. Since then we've gotten arbitrary canvas rotation in <abbr title="Creative Studio">CS</abbr>4, the nearly useless mixer brush in <abbr title="Creative Studio">CS</abbr>5, <em>finally</em> a color wheel in Photoshop <abbr title="Creative Cloud">CC</abbr> 2018, and sometime since then a <em>clear</em> blending mode for brushes.</p> <h2>Why Use Photoshop, Then?</h2> <p>A lot of the applications linked to above have surpassed Photoshop when it comes to digital painting, but I personally often find myself gravitating towards Photoshop because of its familiarity but also because manipulation tools are just as important when digitally painting as it is when manupulating photographs; they are either awkward to use, slow, or nonexistent in applications meant for digital painting. Also, if I'm starting something and Photoshop is already open I will often just use Photoshop; sometimes it truly is a whimsical choice. Out of the listed applications above I use <a href="https://krita.org" title="Krita">Krita</a> the most of all because its brush engine is more customizable than anything else I've seen. It is fast when painting even with large canvas sizes, but adjustments like levels, curves, and gradient maps need a lot of work. Krita contains a lot of quality of life improvements when it comes to user experience that I miss when using Photoshop. Krita doesn't have a separate tool for erasing. You use a brush and set eraser mode when needing to erase; it's an eraser button on the top horizontal bar. There is also an <em>erase</em> blending mode. To make things extra useful eraser mode can be toggled by simply pressing <kbd><kbd>b</kbd></kbd>. Recently in Photoshop a <em>clear</em> blending mode was added to do exactly this, but Adobe didn't deign it worthwhile to assign a shortcut for it or to even make it possible to do so. Deep in <a href="https://helpx.adobe.com/photoshop/using/whats-new/2020.html#NewShortcuts" title="Adobe Photoshop 2020 New Features -- New Shortcuts">Adobe Photoshop <abbr title="Creative Cloud">CC</abbr> 2020's release notes</a> it states that <kbd><kbd>~</kbd></kbd> should toggle between brush and eraser mode using the same brush, but as far as I can tell that has never worked. I wanted a way to toggle this. I figured something out and thought I should share it.</p> <h2>AppleScript to the Rescue</h2> <p>AppleScript is a <span>macOS</span> feature that has existed as far back as I can remember, and it (sadly as will be seen in a bit) is probably my first introduction to programming, writing scripts to prank my dad on the aforementioned Macintosh II using a book a friend of his let us have for reference. I should mention that this trick is Mac-only, and I haven't a clue what the equivalent on Windows is -- or if there even is one.</p> <p>To toggle between blending modes one must click on the dropdown on the top horizontal bar and manually select the blending mode. Nobody ain't got no time for that. AppleScript has accessibility features that allow it to click buttons and select things in an application's <abbr title="User Interface">UI</abbr> and after testing that Photoshop was somewhat exposed to this <abbr title="Application Programming Interface">API</abbr> I was able to come up with a script to toggle it for me:</p> <figure> <pre><code>tell application "System Events" to tell process "Adobe Photoshop 2022" tell application "Adobe Photoshop 2022" to set _currentTool to current tool if _currentTool is equal to "paintbrushTool" then set _focusedWindow to null repeat with i in windows if focused of i is true then set _focusedWindow to i exit repeat end if end repeat if description of _focusedWindow is equal to "standard window" then set theWindow to null repeat with i in windows -- Photoshop doesn't expose anything good to identify the window. -- Its position will always be at the top, so let's use that... if position of i is equal to {0, 24} then set theWindow to i exit repeat end if end repeat if theWindow is not null then set brushMode to pop up button 1 of theWindow set currentMode to value of brushMode set newMode to "Clear" if currentMode is equal to "Clear" then set newMode to "Normal" end if click brushMode click menu item newMode of menu 1 of brushMode end if end if end if end tell</code></pre> </figure> <p>That's great, but there's nothing in there about assigning the script to a keyboard shortcut.</p> <h2>Enter skhd</h2> <p><a href="https://github.com/koekeishiya/skhd" title="skhd on GitHub">skhd</a> is a third-party daemon that runs in the background that intercepts keypresses and performs shell commands. <span>macOS</span> has a built-in global shortcut feature that's in the <kbd><samp>Keyboard</samp></kbd> system preferences pane, but it's quite limited in the commands it can assign and what can be assigned. Skhd is designed for people who want to transform <span>macOS</span> into window managers like <a href="https://i3wm.org">i3</a> using things like <a href="https://github.com/koekeishiya/yabai">yabai</a>. Yabai is in fact developed by the same developer as skhd, but I use it without yabai despite its original intent. My keyboard doesn't have an eject key like typical <span>macOS</span> keyboards do so the <kbd><kbd>control</kbd> + <kbd>shift</kbd> + <kbd>⏏</kbd></kbd> for turning the screen off doesn't work. With skhd I can assign <kbd><kbd>control</kbd> + <kbd>shift</kbd> + <kbd>esc</kbd></kbd> to <code>pmset displaysleepnow</code>, allowing the feature to be used on my escape key less keyboard. One can execute AppleScript through the shell, so skhd can be used in much the same way.</p> <p>Skhd can be installed and started through <a href="https://brew.sh">Homebrew</a>:</p> <figure> <pre><code>brew install koekeishiya/formulae/skhd brew services start skhd</code></pre> </figure> <p>Configuration is easy, being a single file located at <code>~/.skhdrc</code>. Documentation may be found on skhd's GitHub page as to everything that can be done. I'll instead focus just on what is necessary to execute the AppleScript above. Here is an excerpt of my configuration:</p> <figure> <pre><code>ctrl - e [ "Adobe Photoshop 2022" : osascript ~/Scripts/Photoshop/"Toggle Clear Brush Mode".scpt ]</code></pre> </figure> <p>This snippet above tells skhd to bind <kbd><kbd>control</kbd> + <kbd>e</kbd></kbd> to <code>osascript ~/Scripts/Photoshop/"Toggle Clear Brush Mode".scpt</code> but only when Adobe Photoshop 2022 is the active application. This assumes the script is stored in <code>~/Scripts/Photoshop/Toggle Clear Brush Mode.scpt</code>, so if wanting to store it somewhere else make sure the path is changed in <code>~/.skhdrc</code>.</p> <p>If everything goes okay pressing <kbd><kbd>control</kbd> + <kbd>e</kbd></kbd> in Photoshop should cause the dropdown to toggle between <kbd><samp>Clear</samp></kbd> and <kbd><samp>Normal</samp></kbd> blending modes.</p> <h2>Security</h2> <p><span>macOS</span> has a lot of security features to keep arbitrary code from being executed without the user's permission. Sometimes <span>macOS</span>' security features while well-intentioned feel to be less thought out and especially far more annoying than they should be, and this is certainly one of those situations. When running skhd for the first time when starting it with Homebrew above it should cause a dialog box to appear asking for permission to access accessibility features; grant it permission. If one doesn't grant it permission that dialog box won't appear again, and anything skhd does will fail silently. It's poorly designed as the user should never be able to put themselves in a situation where something they believe should work won't without no obvious way to rectify it. This is a normal occurrence in Windows but hasn't been in <span>macOS</span>. In case the dialog was accidentally dismissed, permission may be granted again by going to <kbd><samp>Apple</samp> → <samp>System Preferences…</samp> → <samp>Security &amp; Privacy</samp> → <samp>Privacy</samp> → <samp>Accessibility</samp></kbd>. Clicking the <kbd><samp>+</samp></kbd> button will allow for selecting the executable to grant permission. If installed through Homebrew skhd will be located at <code>/usr/local/bin/skhd</code>.</p> urn:uuid:6e28a4bb-b977-5e79-9a19-c10ad44d2e7b HTML-Parser & HTML-DOM 2022-02-28T18:35:27+00:00 Dustin Wilson https://dustinwilson.com <p>I mentioned in <a href="https://dustinwilson.com/blog/where_have_the_years_gone" title="dW: Where Have the Years Gone?"><em>Where Have the Years Gone?</em></a> that <a href="https://jkingweb.ca" title="J. King's Personal Web Site">Jeff</a> and I have been working on a <a href="https://php.net"><abbr title="PHP: Hypertext Preprocessor">PHP</abbr></a> <abbr title="Hypertext Markup Language">HTML</abbr> parser and an <abbr title="Hypertext Markup Language">HTML</abbr> <abbr title="Document Object Model">DOM</abbr> implementation and that I would like to write about it more; this is my attempt to do so. The impetus for these libraries was needing a better scraper for our <a href="https://en.wikipedia.org/wiki/RSS" title="RSS on Wikipedia"><abbr title="Really Simple Syndication">RSS</abbr></a> aggregator server, <a href="https://thearsse.com">The Arsse</a>. I had written an <abbr title="Hypertext Markup Language">HTML</abbr>5 parser back when the <a href="https://html.spec.whatwg.org/multipage/parsing.html" title="HTML Parsing Specification">parser specification</a> was new, and up until last week this website was generated using it. It was sloppy, in a single 20,000 line file, only supported <abbr title="Unicode Transformation Format">UTF</abbr>-8, and wasn't updated for all the changes in the specification from when I first wrote it; it was simply not suitable for use in The Arsse.</p> <p>The Arsse uses <a href="https://github.com/nicolus/picoFeed" title="PicoFeed on GitHub">PicoFeed</a> to parse feeds and scrape websites. PicoFeed was originally authored for use with <a href="https://miniflux.app">Miniflux</a>, and the library was abandoned when the developer decided to switch to <a href="https://go.dev">Go</a> from <abbr title="PHP: Hypertext Preprocessor">PHP</abbr> -- leaving us in a pickle. Thankfully, someone picked up the torch, and we've contributed to the project since then. However, we'd still prefer to write our own because of issues we've found along the way; we would also like to support <a href="https://www.jsonfeed.org"><abbr title="JavaScript Object Notation">JSON</abbr> Feed</a>, too, even though we have not entirely glowing opinions of the format ourselves. It borrows far too much from <abbr title="Really Simple Syndication">RSS</abbr> and not enough from improvements brought forth by <a href="https://en.wikipedia.org/wiki/Atom_(Web_standard)" title="Atom on Wikipedia">Atom</a> -- repeating 15+ year old mistakes in the process.</p> <h2><abbr title="Hypertext Markup Language">HTML</abbr>-Parser</h2> <p>I began writing the <a href="https://code.mensbeam.com/MensBeam/HTML-Parser" title="HTML-Parser on MensBeam's Gitea">new parser</a> in 2017 based off of the <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr> living standard instead of <abbr title="Hypertext Markup Language">HTML</abbr>5 while Jeff was still focused on The Arsse proper. I, unfortunately, became bored with it and moved onto something else; the process is mostly tedium. He decided it was time to work on it after beginning <a href="https://code.mensbeam.com/MensBeam/lax" title="Lax on MensBeam's Gitea">Lax</a>, our in-progress feed parser mentioned above. His working on it got me interested in it again, and over time he became focused on the parser itself while I focused on the <abbr title="Document Object Model">DOM</abbr>. There were also a couple of branching projects that resulted from this, namely a set of <a href="https://code.mensbeam.com/MensBeam/intl" title="Intl on MensBeam's Gitea">internationalization tools</a> that actually conform to <a href="https://encoding.spec.whatwg.org" title="WHATWG's encoding standard"><abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr>'s encoding standard</a> (<abbr title="PHP: Hypertext Preprocessor">PHP</abbr>'s <a href="https://www.php.net/manual/en/book.intl.php" title="Intl documentation on php.net">intl</a> and <a href="https://www.php.net/manual/en/book.mbstring.php" title="Multibyte string documentation on php.net">mbstring</a> extensions don't handle this correctly) and a <a href="https://code.mensbeam.com/MensBeam/mime" title="Mime on MensBeam's Gitea">mime sniffer library</a>. Jeff wrote the entirety of these with my providing nothing but occasional input.</p> <p>There are other <abbr title="PHP: Hypertext Preprocessor">PHP</abbr> <abbr title="Hypertext Markup Language">HTML</abbr> parsers, most notably the widely used <a href="https://github.com/Masterminds/html5-php" title="Masterminds HTML5 parser on GitHub">Masterminds <abbr title="Hypertext Markup Language">HTML</abbr>5 parser</a>. Masterminds <abbr title="Hypertext Markup Language">HTML</abbr>5 parser isn't very accurate and in some cases fails to parse perfectly valid documents at all. <abbr title="Hypertext Markup Language">HTML</abbr>-Parser conforms to the specification where it can. It is also extensively unit tested, including with <a href="https://github.com/html5lib/html5lib-tests" title="html5lib-tests on GitHub">html5lib's own tests</a>. Because of this it is also slower than Masterminds' library. We believe this accuracy is more important -- especially when we attempt to scrape websites that may or may not be well-formed at all. We need the result to be what a browser would parse.</p> <p>Originally, the parser and an extension to <abbr title="PHP: Hypertext Preprocessor">PHP</abbr>'s <a href="https://www.php.net/manual/en/book.dom.php" title="DOM documentation on php.net">dom extension</a> were included together, mostly existing to circumvent <abbr title="PHP: Hypertext Preprocessor">PHP</abbr> <abbr title="Document Object Model">DOM</abbr> bugs when appending and when handling namespaced attributes. This, however, caused parsing to slow down a bit, and the more I added to the <abbr title="Document Object Model">DOM</abbr> to fill out missing features the slower it became. The decision was made to separate the two and bake the circumventions necessary for accurate parsing into the parser itself. This was a blessing in disguise which will become apparent later.</p> <p>After an initial write and working out bugs when unit testing against html5lib's tests we went through a period shaving off fractions of a second here and there optimizing it when parsing an extremely large document: <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr>'s <a href="https://html.spec.whatwg.org">single page <abbr title="Hypertext Markup Language">HTML</abbr> specification</a>. I think initially it was around 30 seconds on my computer. Today, it's around 5.5 seconds. The official benchmarks listed in the <span>README</span> of <abbr title="Hypertext Markup Language">HTML</abbr>-Parser are from Jeff's computer, one slightly slower than my own. We still have some more ideas for improvements which might shave a bit more off the top. However, we don't want to sacrifice readability of the code; the code still needs to be maintained by humans. Well, Jeff might <em>actually</em> be a robot...</p> <p>Initially, a conforming <abbr title="Hypertext Markup Language">HTML</abbr> serializer was part of the <abbr title="Document Object Model">DOM</abbr> part of the <abbr title="Hypertext Markup Language">HTML</abbr>-Parser library. I had written a fully functioning and unit tested serializer. After the two parts were separated into separate libraries, Jeff decided it should be part of the parser and wrote another one. I just finished writing my initial stab at a pretty printer for the serializer in <abbr title="Hypertext Markup Language">HTML</abbr>-<abbr title="Document Object Model">DOM</abbr>, so I migrated everything over to Jeff's serializer when I was able to. <abbr title="Hypertext Markup Language">HTML</abbr>-<abbr title="Document Object Model">DOM</abbr> still serializes as it should, but it's largely from <abbr title="Hypertext Markup Language">HTML</abbr>-Parser.</p> <h2><abbr title="Hypertext Markup Language">HTML</abbr>-<abbr title="Document Object Model">DOM</abbr></h2> <p>When initially writing the <abbr title="Document Object Model">DOM</abbr> classes they were simple extensions of <abbr title="PHP: Hypertext Preprocessor">PHP</abbr>'s <abbr title="Document Object Model">DOM</abbr> using its <code>DOMDocument::registerNodeClass</code> method. As I dug deeper into the <a href="https://dom.spec.whatwg.org"><abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr> <abbr title="Document Object Model">DOM</abbr> specification</a>, I discovered that it was too difficult to follow the specification as I was running up against type errors in <abbr title="PHP: Hypertext Preprocessor">PHP</abbr>'s <abbr title="Extensible Markup Language">XML</abbr>-based <abbr title="Document Object Model">DOM</abbr>. The straw that broke the camel's back was when the node passed to <code>Document::adoptNode</code> could not be passed by reference. Since the library wasn't married to <abbr title="Hypertext Markup Language">HTML</abbr>-Parser anymore I was free to do whatever I needed without worry about how much it would affect parsing speed. My decision was to then wrap <abbr title="PHP: Hypertext Preprocessor">PHP</abbr> <abbr title="Document Object Model">DOM</abbr>'s classes. I could then do whatever I wanted and let <abbr title="PHP: Hypertext Preprocessor">PHP</abbr>'s <abbr title="Document Object Model">DOM</abbr> handle it internally. This benefitted me greatly as soon as I started running unit tests.</p> <p><abbr title="PHP: Hypertext Preprocessor">PHP</abbr>'s <abbr title="Document Object Model">DOM</abbr> is at best a flimsy and buggy wrapper written to access a buggy and antiquated <abbr title="Extensible Markup Language">XML</abbr> library that conforms to no specification whatsoever, new or old. It returns empty strings when it should return <code>null</code> in some circumstances. It has issues with namespaces, especially concerning the <code>xmlns</code> attribute. When inserting nodes any non-default (in <abbr title="PHP: Hypertext Preprocessor">PHP</abbr> <abbr title="Document Object Model">DOM</abbr>'s case <code>null</code> is default) namespaced elements that are children of non-namespaced elements are prefixed with <code>default</code>. Same goes for attributes. Also due to what presumably is a memory management bug in the original xmllib the more namespaced elements there are <abbr title="Document Object Model">DOM</abbr> operations become exponentially slower. This leads us to use <code>null</code> internally while exposing the <abbr title="Hypertext Markup Language">HTML</abbr> namespace externally. In reality, there needs to be a new <abbr title="Document Object Model">DOM</abbr> extension for <abbr title="PHP: Hypertext Preprocessor">PHP</abbr>, but that is beyond what I am capable of programming. Wrapping the classes allows these bugs to be circumvented at least.</p> <p>It also allows templates to be implemented as specified. While templates work as specified in <abbr title="Hypertext Markup Language">HTML</abbr>-<abbr title="Document Object Model">DOM</abbr>, they were a colossal pain to implement because of the <abbr title="Extensible Markup Language">XML</abbr>-based inner <abbr title="Document Object Model">DOM</abbr>. A lot of code is written in both <abbr title="Hypertext Markup Language">HTML</abbr>-<abbr title="Document Object Model">DOM</abbr> and <abbr title="Hypertext Markup Language">HTML</abbr>-Parser just for handling templates whether it is for parsing, insertion, and especially for serializing. In my personal opinion template elements are the most ill conceived thing in <abbr title="Hypertext Markup Language">HTML</abbr> at present. They were designed to be used within a modular loading system. One such system was <a href="https://www.w3.org/TR/html-imports/" title="HTML imports specification">specified</a> and implemented in <a href="https://www.chromium.org/blink/" title="Blink rendering engine">Blink</a>, but some drama that I don't quite remember the details of ensued; it never was implemented in anything else and was subsequently removed from Chrome. JavaScript modules are now supported in place of them. Template elements are treated differently when parsing and have different rules when manipulated with the <abbr title="Document Object Model">DOM</abbr>, and is an everpresent exception throughout the specification. Storing <abbr title="Hypertext Markup Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr> in JavaScript is a constant source of consternation from old hats like me who during the web standards push in the late 1990's and early aughts had separation drilled into us, but as soon as <abbr title="Hypertext Markup Language">HTML</abbr> imports were abandoned there has simply been no other alternative. It's bonkers to have JavaScript append template elements to the document when the <abbr title="Hypertext Markup Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr> for components can simply be stored in template strings in code. Having them already in the document is inefficient as well because they're downloaded and therefore cached for every page; in JavaScript they're downloaded once and cached once.</p> <p>While developing <a href="https://code.mensbeam.com/MensBeam/HTML-DOM" title="HTML-DOM on MensBeam's Gitea">this library</a> I discovered another attempt to do something similar: <a href="https://github.com/PhpGt/Dom" title="PhpGt DOM">PhpGt</a>. Somewhere along the path of their development they came to the same conclusion that the built-in classes must be wrapped to get anything meaningful done. That's where the similarities between the libraries end, though. It oddly wraps all <abbr title="PHP: Hypertext Preprocessor">PHP</abbr> <abbr title="Document Object Model">DOM</abbr> classes such as <code>DOMDocument</code>, <code>DOMElement</code>, <code>DOMText</code>, etc. when only <code>DOMDocument</code> is necessary; handles templates incorrectly; has multitudes of factory classes that overcomplicates things further; and it also seems to follow Mozilla's <a href="https://developer.mozilla.org" title="Mozilla Developer Network"><abbr title="Mozilla Developer Network">MDN</abbr> documentation</a> instead of the actual specification. This has led to widespread bugs and implementation errors because <abbr title="Mozilla Developer Network">MDN</abbr> is a <em>JavaScript</em> developer's documentation, not an implementor's documentation. Other differences are that PhpGt's <abbr title="Document Object Model">DOM</abbr> implements individual element classes for everything while ours only presently supports what is barely necessary for the element creation algorithm. There are plans to support more in the future as time permits. Our library is also backed by a conforming parser while PhpGt's isn't. A full list of what <abbr title="Hypertext Markup Language">HTML</abbr>-<abbr title="Document Object Model">DOM</abbr> supports is available in its <span>README</span> along with any implementation details and deviations.</p> <hr> <p>Both libraries outlined above are available on Packagist as <a href="https://packagist.org/packages/mensbeam/html-parser" title="HTML-Parser on Packagist">mensbeam/html-parser</a> and <a href="https://packagist.org/packages/mensbeam/html-dom" title="HTML-DOM on Packagist">mensbeam/html-dom</a> and may be installed through <a href="https://getcomposer.org" title="Composer PHP dependency manager">Composer</a>.</p> urn:uuid:f5c74f43-4283-5054-9e86-880c8d6a1f0e Fox 2022-02-22T03:25:36+00:00 Dustin Wilson https://dustinwilson.com <figure><a href="https://dustinwilson.com/images/blog/fox/fox-l@2.jpg"><img src="https://dustinwilson.com/images/blog/fox/fox-l.jpg" width="1262" height="893" alt="Digital painting of a fox resting on a tree root"></a></figure> <p>Last May I was playing around with <a href="https://krita.org">Krita</a>'s new <abbr title="Red, Green, Blue, and Alpha">RGBA</abbr> brushes. It's difficult to explain what they are, and <em><abbr title="Red, Green, Blue, and Alpha">RGBA</abbr></em> isn't descriptive as to what they are. In most graphics applications a mask is provided for a stamp used as the brush. This feature in Krita allows you to provide a color image, and it -- color and all -- would be used for the stamp. One side effect of this is that a grayscale image with bump textures can be used, creating the illusion of varied paint thickness on a brush by using the <span>L*a*b*</span> lightness channel as data for the brush's stamp. If applied heavily the look of impasto can be achieved. Krita's expansive brush settings can be used to control this by various ways. I don't know whether I described this well or not. Krita has a <a href="https://www.youtube.com/watch?v=cGaVQaFI64k" title="&quot;Oil painting with NEW RGBA-wet impasto brushes in KRITA 5&quot; on YouTube">demonstration video</a> showing the wet variety of <abbr title="Red, Green, Blue, and Alpha">RGBA</abbr> brushes that didn't exist yet when I painted this, but it's the same premise; view that if you're interested in learning more.</p> <p>Like with <a href="https://dustinwilson.com/blog/keeping_watch" title="dW: Keeping Watch"><em>Keeping Watch</em></a> this one began as a doodle as well, and with Kate's encouragement it turned into a full painting where I experimented with brushes I created using the methods described above. I love experimenting with color, so I fired up <a href="https://coolors.co">Coolors</a>, and pressed the generate button a few times until a palette popped up that was to my liking. I tweaked the colors here and there to make it harmonious with what I wanted to paint, but if my memory serves me it wasn't anything drastic.</p> <figure> <svg aria-labelledby="title desc" role="img" viewBox="0 0 960 120"> <title>Color Palette</title> <desc>A table of color swatches showing the color palette used for "Fox"</desc> <rect width="120" height="120" fill="#ffffff"/> <rect x="120" width="120" height="120" fill="#a08c74"/> <rect x="240" width="120" height="120" fill="#f8ce7c"/> <rect x="360" width="120" height="120" fill="#f6ab68"/> <rect x="480" width="120" height="120" fill="#ea6c45"/> <rect x="600" width="120" height="120" fill="#25a293"/> <rect x="720" width="120" height="120" fill="#1b4153"/> <rect x="840" width="120" height="120" fill="#121c26"/> </svg> <figcaption>Color palette for "Fox"</figcaption> </figure> <p>This is a practice painting, and it is referenced heavily from a photograph I found on <a href="https://unsplash.com">Unsplash</a> that for some reason I can't seem to find no matter how I search for the subject matter. Composition was a bit different, and the fox was resting on rocks instead. The original image is 9921 × 7016 and would be about 84 <abbr title="centimeters">cm</abbr>. × 60 <abbr title="centimeters">cm</abbr>. when printed as intended.</p> urn:uuid:076c79b8-4219-5448-8652-e2cc854b17e9 Where Have the Years Gone? 2022-02-20T01:30:49+00:00 Dustin Wilson https://dustinwilson.com <p>What? After a year and a half of nothing but crickets from this website I am finally writing something? Yeah. It won't be much, but I should start fresh somewhere at least. These past couple of years have been unpleasant, right? The world appears to be coming apart at the seams. Far too many people have quite literally lost their fucking minds, and I just didn't feel as if anything I did or wrote here was that important. That, of course, yet again reneges on a <a href="https://dustinwilson.com/about#its_the_web_stupid" title="dW: About – It's the Web Stupid">desire I had</a> with this weblog where I would try to reclaim a wee bit of the Web back for myself.</p> <p>It seems to be a time of reneging for me. I've returned to <span>macOS</span> after stating that I would be <a href="https://dustinwilson.com/blog/growing_a_neckbeard" title="dW: Growing a Neckbeard">moving over to Linux</a>, and even before that I returned to Twitter after <a href="https://dustinwilson.com/blog/birdshit" title="dW: Birdshit">stating I wouldn't be using it anymore</a>. I have my reasons for both, but they are indeed uncharacteristic of me where I usually make a decision and stick with it. I moved back to <span>macOS</span> because being able to easily use applications necessary for my work and most importantly full color management outweighs any other benefits. It helped, too, that my issues around <a href="https://github.com/CloverHackyColor/CloverBootloader" title="Clover Bootloader on Github">Clover</a> became nonexistent when <a href="https://github.com/acidanthera/OpenCorePkg" title="OpenCore on Github">OpenCore</a> came on the scene. It's easier to use and more stable. I don't know what I will do in the future when Intel support is dropped from <span>macOS</span>, but I will cross that bridge when I get there. I still do have Linux installed, and I do continue to use it -- no, really.</p> <p>Moving back to Twitter is a bit different. I never stopped checking it, but I was completely silent on there for quite some time. This led to a few people who don't read my blog to wonder where I'd gone to. I'd like to thank them for checking in on me even though I was alright. It's still the hellsite it was when I wrote that blog post a few years back, and of course it's only gotten worse because apparently just trying to remain alive is political now. At some point -- I forget precisely when -- I unfollowed almost all political stuff on there, uninstalled all of the apps, and started conversing with some people again. I now check it almost exclusively on my computer where I can use custom scripts and stylesheets to remove crap from the webpage. I don't use it like I used to, and I probably look at it once a day if that. I mostly keep it around to check in on people I know, view pretty art, and occasionally -- that adverb doesn't reflect the gigantic tumbleweeds rolling by -- posting my own artwork.</p> <p>My work is probably where I have suffered the most these past couple of years. While in the past I have used painting as a sort of therapy, recently I've been incapable of doing even that, and depression is the only thing that exists in the vacuum formed from that absence. The past several years have been a series of disappointments to me, disappointment in myself, and it's been difficult to cope -- especially since the advent of <span>COVID</span>-19. It doesn't mean I've produced absolutely nothing. I've made a few things, but every time I have it just feels futile; few people seem to care. I am not saying this trying to frame my self-worth by my productivity or even by the popularity of my artwork (or in my case the lack thereof). That's an entirely capitalistic thought process that -- truth be told -- only leads to self-destruction as an artist. No, it's just that with every passing year I feel the clock ticking more easily than I could the year before, and that mindset is where the title of this post comes from. I have so far been focusing on my artwork, but my actual <em>work</em> plays a larger role. I don't have health insurance, and I can't afford it because paying for a policy would mean not eating or not paying for the house I live in. I make barely enough to pay my bills, and it's always on my mind. I do consider myself lucky because I know plenty of people who can't even accomplish that. Indeed, I am better off than I was five years ago when I was within a month of not being able to pay my mortgage. Yes, I have a mortgage thanks to prior employment; having that is something many don't and won't ever have these days. My work environment is pleasant most of the time, and I get along with everyone there. However, being genuinely thankful for the crumbs I'm given while being surrounded by Everests of cake isn't gratifying. Every attempt thus far to improve this situation has been met with failure. No one -- and I mean no one paying a living wage -- wants to hire me. That alone is an ever increasing source of my depression.</p> <p>Everything isn't bleak, and I truly didn't mean this post to be a huge downer. I wasn't even sure I was going to include anything about my mental state because of my aversion to posting personal stuff online. Hey, I'm just being honest. Thanks to <span>COVID</span> everyone seems to have issues to work out, so I might as well hang my own laundry out to dry. It's especially difficult for men in the world the way it is to express insecurities without receiving ridicule in return. I personally have in the past experienced that ridicule. Thankfully, I do have support from my girlfriend, and I am truly blessed to have her in my life. And, yes, I tell her this regularly. How she puts up with me I do not know. Just her presence alone has allowed me to continue on.</p> <p>I have not been idle. I have worked on a few relevant things outside of work. Nearly a decade ago some time after the <a href="https://html.spec.whatwg.org/multipage/parsing.html" title="HTML Parsing Specification">specification</a> was released for the <abbr title="Hypertext Markup Language">HTML</abbr>5 parser I decided I would like to write an implementation of it in <abbr title="PHP: Hypertext Preprocessor">PHP</abbr> because <abbr title="PHP: Hypertext Preprocessor">PHP</abbr>'s <abbr title="Document Object Model">DOM</abbr> extension and parser were made for <abbr title="Extensible Markup Language">XML</abbr> and couldn't really parse modern <abbr title="Hypertext Markup Language">HTML</abbr>. I was successful. The library was a wreck, but it worked. I ironed out bugs as I encountered them, and up until just a few days ago this website was built using that parser as part of a static site generator. A lot has changed since then; template elements didn't exist then just to give one example. I started on another one a few years back, but I became bored with it -- <a href="https://youtu.be/xrAIGLkSMls?t=12" title="Up - Dug the Talking Dog - &quot;Squirrel!&quot; on YouTube">squirrelling</a> over to some other project whatever that was. <a href="https://jkingweb.ca" title="J. King's personal Web site">Jeff</a> then became interested in a parser for a scraper he was working on as part of our open source <abbr title="Really Simple Syndication">RSS</abbr> aggregator, <a href="https://thearsse.com" title="The Advanced RSS Environment">The Arsse</a>. This got me interested in it again. After my initial work he focused on the parser side of things while I worked on the <abbr title="Document Object Model">DOM</abbr>. Two projects are the result of this endeavor, <a href="https://code.mensbeam.com/MensBeam/HTML-Parser" title="HTML-Parser on MensBeam's Gitea"><abbr title="Hypertext Markup Language">HTML</abbr>-Parser</a> and <a href="https://code.mensbeam.com/MensBeam/HTML-DOM" title="HTML-DOM on MensBeam's Gitea"><abbr title="Hypertext Markup Language">HTML</abbr>-<abbr title="Document Object Model">DOM</abbr></a>. <abbr title="Hypertext Markup Language">HTML</abbr>-Parser allows for per-specification parsing of <abbr title="Hypertext Markup Language">HTML</abbr> documents, and <abbr title="Hypertext Markup Language">HTML</abbr>-<abbr title="Document Object Model">DOM</abbr> allows for per-specification <abbr title="Document Object Model">DOM</abbr> manipulation by wrapping <abbr title="PHP: Hypertext Preprocessor">PHP</abbr>'s extremely buggy <abbr title="Document Object Model">DOM</abbr> extension and working around its innumerable bugs. Both are used in this website's static site generator. In addition, I've written a syntax highlighter in <abbr title="PHP: Hypertext Preprocessor">PHP</abbr> called <a href="https://code.mensbeam.com/MensBeam/Lit" title="Lit on MensBeam's Gitea">Lit</a> which does <a href="https://macromates.com" title="MacroMates">TextMate</a>-style syntax highlighting. I hope to write more about each of these in the future. Oh, and Lit is also dogfooded by being used to highlight code in posts on this website.</p> <p>This website also changed a bit, but it's not a redesign. This was more of a retooling -- an attempt to also use what I've been working on. The most notable change is the switch in the page's footer which allows for switching between a light and dark theme. The last iteration of this website switched themes based upon one's preferences, but this one also allows for dynamic changes as well. Unlike similar switches on many websites, mine is also keyboard accessible. Almost everything else is identical or nearly so.</p> <p>Sorry if I rambled a bit in this post, but I tried to keep it as organized as possible considering this has been more of a mind dump than anything. I have written a lot of code in my absence. I do have some ideas for my artwork moving forward, but I will save that for another post. I think I've written enough for today.</p> urn:uuid:629ce3c1-0ba7-5689-a743-87acd96b1e70 The Three Bandits 2020-08-24T03:24:23+00:00 Dustin Wilson https://dustinwilson.com <figure><a href="https://dustinwilson.com/images/blog/the_three_bandits/the_three_bandits-l@2.jpg"><img src="https://dustinwilson.com/images/blog/the_three_bandits/the_three_bandits-l.jpg" width="1262" height="1748" alt="Digital painting of three raccoons raiding a vending machine"></a></figure> <p>This year has been quite the anxiety-inducing one, and the best way I know of for me to relax is to paint. I've always relaxed by drawing or painting for as long as I could rememeber. As a child my parents would just hand me a notebook and a pencil to keep out of their hair, and my family would gift me three subject notebooks for my birthday and Christmas. Truth be told they were as much a gift for my mother as they were for me. Today, I just paint or draw before bed to relax and empty my brain before sleep. I'll work on the same image for months. I started on the one above in late April.</p> <p>I had been struggling for a while coming up with an idea for a painting I could do, and I was just looking through random images. I ran across a photo of a gas station that was lit from above by a sodium vapor lamp with the scenery outside of the lit area being blue. I knew I wanted to do something with that kind of lighting. It just took much longer to figure out what the subject matter was going to be. I just came up with this idea of raccoons raiding a vending machine randomly.</p> <p>I think I had the most fun on this painting working out the lighting, so much I introduced more light than would normally emanate from a vending machine, including the area at the bottom where the one raccoon is digging inside the machine for goodies. It sort of glows like the briefcase in <em>Pulp Fiction</em>. Another fun part was painting the labels on the snacks in the machine. They're all mostly vaguely like real world products but yet not. Some are a bit vulgar, too. Of course!</p> <p>The original of this image is 6136 × 8496 and would be about 24 <abbr title="centimeters">cm</abbr>. × 34 <abbr title="centimeters">cm</abbr>. when printed as intended.</p> urn:uuid:70eeaf09-7011-5ea3-808e-6e09ddcb9338 Growing a Neckbeard 2020-07-19T14:38:39+00:00 Dustin Wilson https://dustinwilson.com <p>These are quite interesting times for sure. I mentioned in my last post I already had by that point a couple of posts lined up, but I didn't see them as important anymore because of the <span>COVID</span>-19 pandemic and the seemingly perpetual dumpster fire that is my country. My thoughts on this haven't changed any. I've decided to post this one anyway, mostly because I've let my blog go silent again and that I need to do things that don't involve work which keep my mind off of the daily atrocities that are occurring in my country. I almost didn't hit publish on this post because it just seemed totally trivial. Maybe I just want to write something here no matter how inconsequential it appears to be.</p> <p>This post has been the one that has rested the longest in my backlog, having started it in January of <em>2019</em>. This is because what I was wanting to write about changed a lot, and I made the mistake of starting to write it at the beginning of a transitional period instead of at the end of it. Back then I was just interested in drafting a review of various <abbr title="Free and Open Source Software">FOSS</abbr> desktop environments, starting with <a href="https://gnome.org"><span>GNOME</span></a>. I have years of experience in running Linux as a server, but I didn't have a whole awful lot of experience running it as a desktop operating system. Again, I've tried them out from time to time over the years. I haven't been entirely ambivalent to them, but there is a huge difference between trying out an operating system and its desktop environment in a virtual machine and installing the operating system and desktop environment on actual hardware. That's before actually attempting even to perform daily tasks on it; one's priorities change when running an <abbr title="Operating System">OS</abbr> as their primary. I wanted to take these desktop environments for a spin on a separate drive on my main computer and attempt to get actual tasks done with my multiple displays and other hardware. What happened next was surprising.</p> <h2>The Hackintosh Failure</h2> <p>I outlined my early history with the Macintosh, many of my grievances with Apple, and my initial findings in setting up a hackintosh in <a href="https://dustinwilson.com/blog/knowing_when_to_move_on/"><em>Knowing When to Move On</em></a>. I won't reiterate them here. I will, however, add to them. The experiment ultimately failed. The bootloader kept getting corrupted not long after I started on my review of <span>GNOME</span>, and I was incapable of keeping the system updated. One day I booted into Windows to play a game, and when I was done with that I rebooted into <span>macOS</span> and couldn't boot it anymore even when I tried overwriting the bootloader from a backup. I was done. There are a lot of bullshit things one must do to get everything on a hackintosh system working perfectly, and I really didn't want to spend a long time getting everything back just like I wanted it. I also was stuck on <a href="https://en.wikipedia.org/wiki/MacOS_High_Sierra" title="macOS High Sierra on Wikipedia"><span>macOS</span> 10.13 High Sierra</a> because of Apple's disagreements with Nvidia as I have an Nvidia card. It also doesn't help that the latest released version of <span>macOS</span> is garbage because Apple prioritizes new features over bug fixes. Hey, <a href="https://tidbits.com/2019/10/21/six-reasons-why-ios-13-and-catalina-are-so-buggy/" title="TidBITS – Six Reasons Why iOS 13 and Catalina Are so Buggy">don't just take my word for it</a>. I am also concerned with all of the features and behaviors from <span>iOS</span> which have been creeping into <span>macOS</span>, especially <a href="https://developer.apple.com/mac-catalyst/">Catalyst</a> applications which allow developers to essentially click one checkbox and have their <span>iOS</span> applications run on <span>macOS</span>. None of the existing applications which use Catalyst on Apple's released operating systems are worth using, and it looks like that is going to be the case in the near future. The Mac is going to be filled with applications by developers who think that clicking a checkbox to build for the Mac is sufficient enough for a release, and the number of quality native applications for the Mac is already less than what it was a decade ago. What I see in <a href="https://en.wikipedia.org/wiki/MacOS_Big_Sur" title="macOS Big Sur on Wikipedia"><span>macOS</span> 11 Big Sur</a> doesn't give me hope; it actually fills me with dread akin to what <a href="https://en.wikipedia.org/wiki/Windows_Vista" title="Windows Vista on Wikipedia">Windows Vista</a> did in 2006 although admittedly not quite to that degree. I can see a future where I would be completely incapable of using a Mac as my primary computer because of Apple's propensity for removing features in favor of half-baked and often completely broken replacements. After the keynote for Big Sur people were confused and worried thinking Apple completely removed the terminal from the operating system because of the way they demonstrated the Linux virtual machine; that didn't end up being the case, but it's telling that people could believe Apple would remove access to the terminal. It's gotten to where every year people look for things which are missing in new releases of <span>macOS</span> as they slowly morph it into a desktop version of <span>iOS</span>. I don't want to use <span>iOS</span> on my desktop; in fact <a href="https://dustinwilson.com/blog/neither/" title="“Neither” on dW">I'd prefer never to use <span>iOS</span> at all</a>.</p> <p>Since I last wrote on the subject Apple released a <a href="https://www.apple.com/mac-pro/">new Mac Pro</a> as a tower computer that is upgradable which addressed one of my grievances in the prior post. Unfortunately, it is almost entirely made for the professional film industry and is priced accordingly. Their <a href="https://www.apple.com/pro-display-xdr/" title="Apple Pro Display XDR">new display</a> intended for use with it alone is $5000 and doesn't even come with a stand; <a href="https://www.apple.com/shop/product/MWUG2LL/A/pro-stand" title="Apple Pro Stand">the stand</a> is $1000. Yes, that's the correct number of zeros. The display itself isn't <abbr title="Video Electronics Standards Association">VESA</abbr> compatible and requires an adapter to even mount to a third party stand; <a href="https://www.apple.com/shop/product/MWUF2LL/A/vesa-mount-adapter" title="Apple VESA Mount Adapter">the adapter</a> is $200. The display has a super high color range that is really only useful again to the professional film industry for color grading. I'm sure there are some other obscure uses, but the reality is that 99.999% of the market has absolutely no use for the display. Don't get me wrong. I'd love to use one, of course. One that can do Adobe <abbr title="Red, Green, and Blue">RGB</abbr> is quite alright with me which it in of itself is on the higher end of the display market. The Pro Display <span>XDR</span> can produce colors far outside of the Adobe <abbr title="Red, Green, and Blue">RGB</abbr> color space. Their pro computers as they are today are luxury items instead of being able to service the professional market as a whole. At those prices Apple probably fancies itself the tech equivalent of Tiffany &amp; Co. My computer isn't for show; it isn't a luxury item for materialistic idiots; it's for getting work done.</p> <p>The entire rest of Apple's lineup isn't suitable for my uses on my primary computer, and two years ago this problem is what brought me to hackintoshing. Apple just a short bit ago announced they're switching Macs to their own processors like what they already use in the iPhone, iPad, and Apple Watch. I really do wish them luck in this endeavor. I just cannot follow it for my primary computer. Apple with this move will lock down their computers even more, and it will make their monopoly in <a href="https://en.wikipedia.org/wiki/ARM_architecture" title="ARM architecture on Wikipedia"><span>ARM</span></a> silicon even stronger. Apple has a performance monopoly when it comes to <span>ARM</span> processors for the consumer market as no Android device can even remotely come close to Apple's <abbr title="Central Processing Unit">CPU</abbr>s (or <abbr title="Graphics Processing Unit">GPU</abbr>s for that matter) in performance. Hackintoshing is likely going to become a thing of the past because both the processor architecture switch and the fact that third party offerings don't measure up in performance. Needless to say it'll be a multi year process and likely be slower than their Power​<abbr title="Personal Computer">PC</abbr> to Intel transition. I am, however, excited by the move as I wonder what they have planned for Macs now and am hopeful they'll start producing hardware that is worth purchasing again that doesn't require taking out a mortgage to purchase. I just don't see myself going back anytime soon for my primary. I don't trust Apple to make consistently good hardware anymore. I don't want to compromise again by buying an all-in-one computer that becomes useless when just one component of the unfixable-by-design computer breaks. The nearest Apple Store to me is 2.5 hours away.</p> <h2>No, It's Not the Year of the Linux Desktop</h2> <p>The <em>Year of the Linux Desktop</em> is thrown around as a running gag. It's even used as an insult to Linux users by Apple and Microsoft fans. There are very little computer manufacturers selling computers with Linux preinstalled on them, and that isn't likely to change in the near nor distant future. The days of the desktop computer for anyone but enthusiasts is waning. Most people are not buying personal computers. That makes perfect sense because most people just need their computers to be appliances; phones and tablets are perfect for that. I am not new to Linux. I've been using it for years on my servers, but I am no wizard at that by any means. This website is served on a Linux server, and all of my websites for the past 20 years have been served on Linux. I have also run various distributions on my secondary computers over the years but my actual time with them has been limited. My primary computer has been consistently <span>macOS</span>-based for the past 14 years. That has now changed, and I can almost feel the unshaven hairs growing longer on my neck as a result.</p> <p>The burning question probably is, "Why Linux?". I don't have any ideology about computer software. I love free software. I've even contributed to some projects myself, but I will gladly buy good software if it does what I need. The honest truth is there's nothing else to really move to. Windows 10 is bloated, slow, woefully insecure, costs ridiculous amounts of money, violates its users privacy, and umm... those fucking forced updates. I've already described <span>macOS</span>' faults in detail above and in previous posts, so that doesn't need repeating. It does seem like I am moving to Linux just because I feel like I have no other option; that's not true. I am quite happily using it, and I am enjoying learning things about Linux that only come from using it as a primary operating system. It makes me feel like it's 2006 all over again, abandoning Windows completely and using the first model Mac Pro as my primary. What made me love Mac <abbr title="Operating System">OS</abbr> X was its Unix underpinnings; while it presented a working environment that didn't require access to the terminal at all the terminal was there for power users and the Unix folder structure -- while hidden for everyday users -- was there. I could automate repetitive tasks really easily without writing code in something like <a href="https://en.wikipedia.org/wiki/C_(programming_language)" title="C programming language on Wikipedia"><span>C</span></a>, could explore the internals of the operating system, and after <a href="https://brew.sh">Homebrew</a> came out installation of software required just a single command. Linux provides me an operating system that is in some ways a lot like what Mac <abbr title="Operating System">OS</abbr> X was, not how <span>macOS</span> is today.</p> <h2>What Now?</h2> <p>Linux is greatly fragmented, and that is both its greatest strength and its greatest flaw. This fragmentation does provide users with a lot of choice of different approaches, but also that choice makes it ridiculously hard to decide on what to use as an end user -- at least it has for me. The choices are nearly endless as one can literally customize every aspect of their operating system. Out of all that there is to offer because of my affinity for <span>macOS</span> one might think I would have ended up using <a href="https://elementary.io">elementary​<abbr title="Operating System">OS</abbr></a>. I didn't.</p> <p>While I don't want to go into great detail on my assessments of different desktop environments because I might write about them later, I will say a bit about my distribution choice. I have tried most of the popular distributions. <a href="https://ubuntu.com">Ubuntu</a> is the most well known if not the most popular one. I currently run Ubuntu on my server and really like it for that, but I found I did not like it as a desktop distribution because most of the software available in its repositories are outdated. In the Linux world distributions are typically either fixed release or rolling release, either updated in versioned updates or gradually over time as individual packages themselves are updated respectively. Ubuntu is a fixed release <abbr title="Operating System">OS</abbr> like <span>macOS</span> is. However, unlike <span>macOS</span> <em>all</em> applications whether they're part of the <abbr title="Operating System">OS</abbr> itself or not are traditionally installed via Ubuntu repositories; they aren't updated as frequently as the application developers themselves update if at all between point releases of the operating system itself. Ubuntu has a solution for this shortcoming, <a href="https://snapcraft.io">Snaps</a>, which are a way to bundle applications and distribute them independent of the operating system. Questions about Canonical's absolute control over the distribution system itself aside, I find Snaps overengineered and quite like trying to mend one broken leg by cutting the other off. I really would like to avoid them and other things like it for the time being, so quickly realized I would like to use a rolling release <abbr title="Operating System">OS</abbr>. I narrowed down my list to <a href="https://software.opensuse.org/distributions/tumbleweed">OpenSUSE Tumbleweed</a> and <a href="https://manjaro.org">Manjaro</a> because they both are rolling release; software on their repositories aren't bleeding edge; and they're tested before release which I quite like. I ended up going with Manjaro because almost all of the applications I like to use were available without adding additional repositories or resorting to Snaps, <a href="https://flatpak.org">Flatpaks</a>, or <a href="https://appimage.org">AppImages</a>; the rest were on the <a href="https://aur.archlinux.org"><span title="Arch User Repository">AUR</span></a>. It also didn't hurt that <a href="https://jkingweb.ca">Jeff</a> was fed up with Windows by this point and jumped head first into installing Manjaro while I was still taking my dear sweet time trying to decide. I then eventually landed on <a href="https://kde.org/plasma-desktop"><span>KDE</span> Plasma</a> as my desktop environment, and I am mostly happy with it. I can do almost everything I need to do with a computer on Linux, and with free software at that. In fact most of the programs I used on <span>macOS</span> are available for Linux, so I am even using the same applications. For others such as the <span>macOS</span> iTunes/Music app there's alternatives for Linux which are actually quite a bit better. Not everything I have found alternatives to have been better; email applications are really lacking on Linux compared to <span>macOS</span>. I am using <a href="https://en.wikipedia.org/wiki/GNOME_Evolution" title="GNOME Evolution on Wikipedia">Evolution</a> at the moment until I can find something less bloated and antiquated in user experience while still supporting Card​<abbr title="Distributed Authoring and Versioning">DAV</abbr>.</p> <p>I, unfortunately, haven't been able to find good alternatives to the <a href="https://www.adobe.com/creativecloud.html">Adobe Creative Suite</a>. <a href="https://gimp.org"><abbr title="GNU Image Manipulation Program">GIMP</abbr></a> is the most well known Photoshop alternative, but I absolutely hate using it. Its user interface and experience is quite frankly really weird and janky. Color management also only works on a single display, and feeding it color profiles to use causes it to crash. Without color management it's pretty much useless for me. It also cannot work in <abbr title="Cyan, Magenta, Yellow, and Key (Black)">CMYK</abbr> or <span>L*a*b*</span> which makes it not useful at all for printing and for manipulating color in photographs. <a href="https://inkscape.org">Inkscape</a> looks and works like <a href="https://coreldraw.com"><span>C</span><span>orelDRAW</span></a> from 1999. I'm sure it's quite capable, and I have tried to use it quite a lot but then get frustrated trying to do even the most basic of tasks. I just don't want to fight its awful user interface to get work done. <a href="https://krita.org">Krita</a> is quite possibly the best painting application in existence, free or not, and I have used it already in my work. For painting I feel like I'm quite covered, but for everything else I'd need Adobe's apps. I am currently running Adobe's applications in a Windows virtual machine guest. This presents a problem of course because Adobe's applications make liberal use of <abbr title="Graphics Processing Unit">GPU</abbr> accelleration, and there's a <em>huge</em> difference when there isn't any. The solution to that is <abbr title="Graphics Processing Unit">GPU</abbr> passthrough using <a href="https://www.qemu.org"><span>QEMU</span></a>. I can give the virtual machine a secondary <abbr title="Graphics Processing Unit">GPU</abbr> and a display, and the virtual machine runs almost as if it's on bare hardware. <a href="https://github.com/debauchee/barrier">Barrier</a> is then used to share my mouse and keyboard with the virtual machine. Works great. Most of the time I am just doing something lightweight that doesn't really require <abbr title="Graphics Processing Unit">GPU</abbr> acceleration, so I can just run the same virtual machine in a window using the default <a href="https://en.wikipedia.org/wiki/Simple_Protocol_for_Independent_Computing_Environments" title="SPICE on Wikipedia"><abbr title="Simple Protocol for Independent Computing Environments">SPICE</abbr></a> video.</p> <p>In some people's opinion my virtual machine setup wouldn't be preferable to just running Windows as my primary. I disagree. I can strip Windows 10 down to just what is required to run everything for Adobe's Creative Suite, and I can not worry as much about getting the <abbr title="Operating System">OS</abbr> configured just how I want it or worry about its myriad of software failures that pop up at the most inopportune times. I keep a backup of the <abbr title="Virtual Machine">VM</abbr> so when something fails I am not stuck having to reinstall everything or searching the internet for esoteric Windows errors. It's just there to run Photoshop, Illustrator, and InDesign when I need them and whichever way I wish to run them.</p> <p>A big disadvantage Linux has over <span>macOS</span> is color management. Everything one sees on the screen on <span>macOS</span> is color managed and has been since 1993. Regardless of one's display's capabilities the colors on the screen are clamped to <abbr title="Standard Red, Green, and Blue">sRGB</abbr> by default. This means that on displays which support color gamuts larger than <abbr title="Standard Red, Green, and Blue">sRGB</abbr> colors in the user interface don't look oversaturated. Applications which require support for additional color profiles such as Photoshop and web browsers can access them and apply them to their open documents. However, the <abbr title="User Interface">UI</abbr> remains <abbr title="Standard Red, Green, and Blue">sRGB</abbr>. Linux (and Windows for that matter) allow for custom color profiles, but it only applies <abbr title="Look Up Table">LUT</abbr> values and doesn't clamp the <abbr title="User Interface">UI</abbr> to <abbr title="Standard Red, Green, and Blue">sRGB</abbr>, making any color used in user interfaces be oversaturated on my display. There is no way to fix this, and explaining this problem to people who have never used high gamut displays is like trying to explain blue to a blind man. I can live with this shortcoming mostly by using a neutrally colored theme which I would be doing anyway to avoid having the <abbr title="User Interface">UI</abbr> affect my perception of colors when painting or designing. Most applications which really need it like Krita and web browsers correctly change the color and not just <abbr title="Look Up Table">LUT</abbr> values.</p> <p><a href="https://wacom.com">Wacom tablets</a> are supported out of the box on Linux which is quite nice with a <a href="https://github.com/linuxwacom/xf86-input-wacom" title="xf86-input-wacom on Github">driver</a> that is quite well documented and doesn't exhibit the application conflicts that the official driver has on Windows and has been having in recent years on <span>macOS</span>. However, depending on the desktop environment one is left with varying degrees of interfaces to configure the tablet stretching from no <abbr title="Graphical User Interface">GUI</abbr> at all to fully featured. <a href="https://xfce.org">Xfce</a> has no tablet configuration tool. <a href="https://en.wikipedia.org/wiki/Cinnamon_(desktop_environment)" title="Cinnamon on Wikipedia">Cinnamon</a> has a fully featured one. <span>GNOME</span> and <span>KDE</span> Plasma's are problematic, although in different ways. After struggling getting what I wanted with Plasma's tool I ended up <a href="https://github.com/dustinwilson/tabulamutata" title="tabulamutata on Github">writing my own</a>. Aside from initial configuration I have no need for a <abbr title="Graphical User Interface">GUI</abbr> tool, so it works well and is easy (for me) to modify if I want to change its configuration in the future. While initially not having a <abbr title="Graphical User Interface">GUI</abbr> configuration tool for my tablet was a problem the fact that I am able to easily write a tool myself because the driver is accessible via the command line is a huge advantage Linux has over either <span>macOS</span> or Windows.</p> <p>One big advantage over <span>macOS</span> is that I don't need to boot into Windows to play most <abbr title="Personal Computer">PC</abbr> games. There are quite a few technologies that allow Windows games to run as well or better than they do on Windows in Linux. There is of course <a href="https://winehq.org">Wine</a>, and <a href="https://steampowered.com">Steam</a> has a thing called <a href="https://en.wikipedia.org/wiki/Proton_(software)" title="Proton on Wikipedia">Proton</a> which is based upon Wine to run games on Linux. On top of that there are applications such as <a href="https://tkashkin.tk/projects/gamehub/">GameHub</a> and <a href="https://lutris.net">Lutris</a> which are designed to make it really easy to configure games and manage them, especially ones which aren't bought on Steam. I like to play the occassional <abbr title="Personal Computer">PC</abbr> game with my girlfriend, so it's <em>really</em> nice not having to boot into Windows to do so. So far pretty much every game I've wanted to play runs just fine. I refuse to buy games with anticheat malware or spyware. They don't run in Wine/Proton due to the nature of what they are, anyway.</p> <hr> <p>Whew. This, like my hackintosh before it, is an experiment, but it looks like I'll keep this experiment going. It's a good start, anyway. I would like to write more about my findings on Linux in the future and maybe do a few projects of my own in the Linux world. I can say I haven't been this happy using my computer in quite some time, and the only thing I have to sacrifice is that I need to run Adobe's applications in a virtual machine. It's been nice finally getting this post worked out. Hopefully the next one won't be as difficult to author.</p> urn:uuid:081a82ce-dd88-5557-a906-8d7d741be522 Nonsense 2020-04-01T22:14:42+00:00 Dustin Wilson https://dustinwilson.com <figure><a href="https://dustinwilson.com/images/blog/nonsense/nonsense-l@2.jpg"><img src="https://dustinwilson.com/images/blog/nonsense/nonsense-l.jpg" width="1262" height="1750" alt="Casein painting of a river otter floating in water"></a></figure> <p>I had a couple of other posts planned, but they both seemed quite unimportant while people are dying of the <span>COVID</span>-19 pandemic. Art, however, is. It's definitely one of the best coping mechanisms I know of when trying to get myself through difficult times, anyway.</p> <p>This image has a bit of backstory to it. A few years ago my girlfriend was into taking various personality tests, and there was this one that associated you with a particular animal based upon your personality traits. I don't remember what it is called or I would link it here, but there was a methodology to it and very detailed thought processes that went into the animal selections. It even had a very active forum with people discussing the topic. Upon taking the test mine came out as a river otter, my girlfriend a red panda. Months later I bought her a stuffed red panda, and she reprised it with a river otter for me. She selected <em>"Toffee"</em> as the name for her red panda, and I named my river otter <em>"Nonsense"</em> after the frequently-used pun <em>"otter nonsense"</em>.</p> <p>I have been experimenting with casein paint a lot lately. My previous post on this blog in fact is of a polar bear painted in casein. I have a few others that I have done that I will get to posting here perhaps in a single post with all of them? I am not too sure yet. I actually began this one in late December while my girlfriend spent some time with me over Christmas. We painted together a few times, and for the longest time this was artist taped to the top of my cedar chest in my office barely worked on as I moved on to other projects and other paintings while I devised in the back of my mind what I wanted to do with this piece. It was initially painted in watercolor using a set of <a href="https://www.winsornewton.com/na/shop/water-colour/cotman-water-colours">Winsor &amp; Newton Cotman watercolors</a> my girlfriend brought with her here. My intention was to use both it and casein, but it didn't turn out that way in the end really. I initially had this more abstract water background that was reminiscent of swimming pool caustics going on I wasn't happy with. When I finally got the nerve to work on it again I brushed masking fluid over the otter and painted over the top of the background with casein.</p> <p>The extremely vibrant blue used in the water is not a color available in <a href="https://products.richesonart.com/collections/richeson-casein">Richeson</a>'s tubes. It's a primary blue cyan made from some <a href="http://www.sennelier-colors.com/en/Pure-pigments_fiche_5999.html">Sennelier pigment</a> I bought off of <a href="https://dickblick.com">Dick Blick</a>. To make casein paint I simply add some pigment to casein emulsion, and I have casein paint to paint with. I might experiment in the future with more pigments as Richeson's color offerings are a bit slim.</p> <p>As for the subject matter itself: river otters sometimes will float on their backs, but as far as I know they never hold their food while in this position. I felt like I wanted him holding something, so in his paws I put a bluegill for him to munch on later. They are a fish prevalent where I live in Louisiana.</p> urn:uuid:2c4a0ea3-a08c-5974-8bbb-121d810c478c Polar Bear 2020-03-09T14:29:02+00:00 Dustin Wilson https://dustinwilson.com <figure><a href="https://dustinwilson.com/images/blog/polar_bear/polar_bear-l@2.jpg"><img src="https://dustinwilson.com/images/blog/polar_bear/polar_bear-l.jpg" width="1262" height="917" alt="Casein painting of a polar bear sticking its head out of the water"></a></figure> <p>What? Three posts in one week? What is the world coming to? Well, before you die from shock I should tell you that this is older content I'm finally posting here now that I've updated the website.</p> <p>Something that's been happening over the past year is that I've started dabbling in traditional media again after a long hiatus. Kate started this by wanting to experiment herself, and she encouraged me to as well. I first worked with gouache again, but due to <a href="https://www.youtube.com/user/gurneyjourney/" title="James Gurney's YouTube channel">James Gurney</a>'s videos where he'd paint plein air in casein I decided to give casein a try and have been painting in it a lot. This polar bear is one of them.</p> <p>Casein paint can be deduced by its name to have something to do with milk, and that's true. The paint is bound with casein dissolved in an alkali like borax. Casein paint has a particular smell to it that's not horrible, but it is indeed peculiar. It is probably one of the oldest kinds of paint there is, and was especially popular with illustrators because the paint dries to an even consistency and is perfect for photographing for print. Acrylic paint largely replaced it for that purpose in the 1960's. There is only one manufacturer of casein paint today -- <a href="https://products.richesonart.com/collections/richeson-casein">Richeson</a>.</p> <p>I don't quite remember at this point how I came to paint a polar bear, but I think Kate just suggested it at random when I inquired about what I should paint next. I think the piece shows off some of casein's strengths. I painted the bear first completely to finish before I ever worked on the water. I took care to paint the fur differently above the water than in it to give the appearance of being underwater. I waited until the bear was dry then painted the water in washes of color over the top. You can't do this in gouache because the paint below will reactivate and mix with whatever is painted on top. You can in casein because the paint seals when it dries like it does with acrylic. Casein paint can still be reactivated but only if you add a drop of ammonia. This gives it a versatility that borders on oil.</p> <p>The painting is 9″×12″ in casein on watercolor paper.</p> urn:uuid:ccfd5345-2d02-5b85-ae52-760ba2ef7aa9 A Fresh Coat of Paint 2020-03-08T18:51:27+00:00 2022-02-08T20:30:51+00:00 Dustin Wilson https://dustinwilson.com <div> <ins datetime="2022-02-08 20:30:51+00:00"> <p><strong>NOTICE</strong>: If things this page describes does not correspond to what you are seeing it is because this post is referencing a previous version of this website.</p> </ins> </div> <p>A couple of days ago I posted the <a href="https://dustinwilson.com/blog/the_way_it_was/" title="dW: The Way It Was">first update to my weblog</a> in a year and some change. The reason is that I was mostly busy with work and projects. I actually wrote several drafts for this website, but nothing ended up being published. Things kept changing, and I also wasn't feeling the website anymore. The scripts I wrote to update the website years ago were stretching their usefulness, and I felt like I needed to write a set of tools for updating the thing before I actually published anything. Client work also pushed things back, but after a long time of saying I'll do it and not I finally just did.</p> <h2>Back to Basics</h2> <p>I wasn't ever truly happy with what I made last time. The overwhelming blueness of the design wasn't a good idea, and I spent way too much time with JavaScript making unnecessary things happen to the page. I didn't overengineer the JavaScript like we see a lot of these days on the Web, but superficial things were done simply because I could. I wanted to simplify everything and make the content stand out more, especially if it contained color. Often the best design comes out of limitations. So, I set myself some limitations before designing the website's layout:</p> <ol> <li>The only two colors which may be used on most things are the page's color and a text color.</li> <li>A tertiary color can be used for accents but only very sparingly.</li> <li>No shades or tints can be used for any of the colors.</li> </ol> <p>These limitations forced me to use typography to create "color". I could, for instance, use a lighter weight to make text darker or lighter in appearance without modifying its color. This is how typography should be used anyway. This led me to deciding to not use my font, <a href="https://dustinwilson.com/blog/ook/" title="dW: Ook.">Ook</a>, anymore. Ook only comes in regular, bold, and italic variants. While it contains a lot of special characters it doesn't come in a lot of variants. Since my restrictions demanded a font with a lot of weights I must retire it. When I first started creating it almost a decade ago there were no free fonts that had advanced typography features with ligatures, small caps, old-style, proportional, <em>and</em> lining numerals, subscripts and superscripts, etc. Nobody but typography nerds even considered it important nor possible, but many web browsers supported them. I had to create my own if I wanted them, so I did. The font was experimental, and it wasn't well-designed. I even said so when writing about it initially. It was my first attempt ever at a font, and I even changed it a lot while designing it. Today there are a lot of fonts that do support advanced typographic features, including the one I chose for the body copy of this website -- <a href="https://en.wikipedia.org/wiki/Noto_fonts" title="Noto Sans on Wikipedia">Noto Sans</a>.</p> <p>Noto Sans was designed at Adobe and commissioned by Google to support most languages. Its eventual goal is to support them all, and that is where its name comes from. Sometimes when there is no font installed on a system to support a particular character a replacement symbol is drawn there instead which is called <em>tofu</em>. Noto is short for <em>no to</em>fu. I have been a fan of the font since first seeing it shortly after I finished my own, and since it has matured over the years a lot of errors in the font and missing features have been added. I am sad I won't be using a font of my own creation anymore, but it's past time to retire it. The best part about Noto is that it is truly open source, being licensed under the <a href="http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&amp;id=OFL_web"><span>SIL</span> Open Font License</a>.</p> <p>Most websites by designers for themselves these days tend to be pretentious, ostentatiously showing off things at the expense of user experience. Just visit almost any website featured on <a href="https://www.awwwards.com">Awwwards</a> where the name of the game is bombard the viewer with flashy interactive special effects instead of providing them with information in a easy-to-understand manner. Forget making anything on the page accessible to those with disabilities. I won't win any awards with my design here of course. When I write a blog post about my newest work I want the work to be what the eye is drawn to, not the website's user interface. If that means this website is "boring" then so be it.</p> <h2>Under the Hood</h2> <p>This website makes liberal use of <a href="https://developer.mozilla.org/en-US/docs/Glossary/Grid" title="CSS Grid on MDN"><abbr title="Cascading Style Sheets">CSS</abbr> grid layout</a>. My last redesign used it, but only sparingly and with extensive fallbacks because most browsers that supported it then were quite buggy with it, especially Firefox. I don't have any sort of fallback for grid on this. Without support for <abbr title="Cascading Style Sheets">CSS</abbr> grid the website would simply fall back to traditional flow content which is quite acceptable in my opinion. It keeps the <abbr title="Cascading Style Sheets">CSS</abbr> itself cleaner and easier to manage, too. I have also tried to make my website friendly to printers with print styles and also with people who prefer dark themes. This website (and its favicon in supporting browsers) will change when dark mode is turned on.</p> <p>So, with that said of course there's no JavaScript running on the page to make crazy shit fly at you or pictures to materialize and drop from your mouse pointer. There's not much running at all, even. I don't even have analytics. I'm pleased if people read my blog, but I'm not interested in tracking anyone. There's far too much of that going on around the Web. That's not to say there aren't any interesting JavaScript things on the website. I just leave it for where it is necessary. For example, when I wrote <a href="https://dustinwilson.com/blog/color_modes/" title="dW: Color Modes"><em>Color Modes</em></a> I experimented with very basic Web​<abbr title="Graphics Library">GL</abbr> to show a <abbr title="Red, Green, and Blue">RGB</abbr> cube and <abbr title="Hue, Saturation, and Brightness">HSB</abbr> cone along with an interactive image diff, allowing the user to slide a bar across an image to reveal a secondary image to show differences between the two. These are still present in the original post, but they have been re-implemented using Web Components and delivered using JavaScript modules. They work like this:</p> <figure> <pre><code>&lt;script type="module" src="/scripts/js/elements/RGBCube.js"&gt;&lt;/script&gt; ... &lt;rgb-cube&gt; &lt;div class="notice"&gt; &lt;p&gt;Sorry, your browser appears to be incapable of viewing this 3D content properly. There is a &lt;a href="https://www.youtube.com/watch?v=mI51DTNh11E" title="RGB Cube"&gt;YouTube video&lt;/a&gt; available of the content if you are interested.&lt;/p&gt; &lt;/div&gt; &lt;/rgb-cube&gt;</code></pre> <div> <p>Sorry, your browser appears to be incapable of viewing this <abbr title="Three Dimensions">3D</abbr> content properly. There is a <a href="https://www.youtube.com/watch?v=mI51DTNh11E" title="RGB Cube">YouTube video</a> available of the content if you are interested.</p> </div> <figcaption>Boom.</figcaption> </figure> <p>Only recent browsers can load JavaScript modules so it works well for graceful degradation as old browsers won't even load anything at all; they haven't an idea what a <code>module</code> type is. Web components are incredibly flexible. With that one module I can put many <abbr title="Red, Green, and Blue">RGB</abbr> cubes on this page (and possibly crash your browser in the process because of all that Web​<abbr title="Graphics Library">GL</abbr>). All I need to do to make one appear after including the module is drop a <code>rgb-cube</code> element anywhere in the document; the stuff inside is just fallback content, intended to be shown if the JavaScript didn't fire or it failed. This didn't come out of nowhere. I've been experimenting with Web components for the past couple of years in an attempt to create a Web interface for <a href="https://thearsse.com">The Arsse</a> instead of using something like <a href="https://reactjs.org">React</a>. I should probably get on that because if I don't <a href="https://jkingweb.ca">Jeff</a> will likely want to throttle me; actually, now that I think about that he probably wants to do that to me anyway.</p> <p>I expect to keep this design for a while. There are some fixes I want to make to things I've noticed since going live with it. I also would like to write more, especially about what I've been up to lately. I know I've promised it before and didn't deliver. I apologize for that. I'll definitely try especially since I've made it ridiculously easy for me to do so.</p> urn:uuid:8f782d08-4f2e-5c58-89cb-53a15ec0c61d The Way It Was 2020-03-06T05:28:05+00:00 Dustin Wilson https://dustinwilson.com <figure><a href="https://dustinwilson.com/images/blog/the_way_it_was/the_way_it_was-l@2.jpg"><img src="https://dustinwilson.com/images/blog/the_way_it_was/the_way_it_was-l.jpg" width="1262" height="1262" alt="Illustration of a barefoot boy on a 1980's era three-wheeler with a cane pole and a cricket basket"></a></figure> <p>It's been over a year since my last post, and things have changed on this website. I'll write about it in another post, though. Instead, this one is going to be about the image that is just above.</p> <p>This is the album cover for <a href="https://frankfostermusic.com">Frank Foster</a>'s newest album <em>The Way It Was</em>. Frank contacted me last October wanting me to illustrate his album cover. The album itself is a detour from his usual work, being very acoustic and back to the roots of country music; so, he wanted the album cover to be a reflection of this. His direction was to have the cover be painted and of him as a child on an old 1980's Honda <span>185S</span> 3-wheeler. He's from Louisiana like me, so the dirt has the appearance of a lot of red clay in it and the sky is perpetually threatening rain. I treated the composition like a traditional painting straight on and staged almost like those old paintings of generals on horseback with the "camera" slightly low. I really enjoyed working on this. It was especially a challenge to paint his likeness from a few photos of him as a child and to paint the 3-wheeler. Frank was very descriptive in what he wanted, and he was a joy to work with.</p> <p>I painted this entirely in <a href="https://krita.org">Krita</a> which is an excellent (and <em>FREE</em>) program strictly designed for digital painting. I've tried Krita over the years, but I never could really work in it because of its lack of hardware acceleration. It made the application sluggish for me because of the enormous sizes I typically paint in. It has had hardware acceleration for a bit now, so I put it through its paces painting this one. Don't let the free aspect of the application fool you; it is a fully professional application with color management, and its brush customization puts Photoshop to shame. I plan on using it a lot more in the future.</p> <hr> <p>If you're interested go out and buy his album. It is <a href="https://frankfostermusic.com">available on his website</a>.</p> urn:uuid:5a574fc6-2cf5-5747-bb74-2a743a83c6ef Birdshit 2018-12-15T18:44:32+00:00 2018-12-15T18:44:32+00:00 Dustin Wilson https://dustinwilson.com <p>Here's yet another post on this blog where I describe a computing change. My first one was where I <a href="https://dustinwilson.com/blog/passing_on_1password/" title="dW: Passing on 1Password">moved away from 1Password</a> and the second was where <a href="https://dustinwilson.com/blog/knowing_when_to_move_on/" title="dW: Knowing When to Move On">I built a hackintosh</a>. Now, I've moved away from <a href="https://twitter.com">Twitter</a>. This has been a long time coming, and recent actions and inactions by Twitter have made me be introspective about my use of the platform and about social media in general. Actually, this decision happened months ago. I am just now getting around to putting it in writing.</p> <h2>The Killing of the Web</h2> <p>I was an early adopter of Twitter; many of us webheads were. We saw the potential of the platform as kind of an interactive <abbr title="Really Simple Syndication">RSS</abbr> feed, and we were entirely the reason for its success. Many of its features were invented by our small community from retweets to hashtags and even the term "tweet". When the masses flocked to <a href="https://facebook.com">Facebook</a> away from <a href="https://myspace.com">MySpace</a> we flocked away from our blogs to Twitter. In doing so, those of us who championed the Web have been instruments in killing it because of our own lethargy and addiction to alarming personal conduct and scandal.</p> <p>Prior to Twitter we had our own blogs where we self-published our own work. This was a realization of the original premise of the Web, the democratization of information where everyone could become their own publisher. We had a decentralized community of writers and artists who wrote, commented, and discussed ideas in the open. This is entirely how the Web standards movement happened. When we started using Twitter we stopped writing in our blogs and really stopped trying to help each other develop and learn. Because of this there is an entire generation of Web developers who know nothing of Web standards, know nothing of Web accessibility, and really know nothing of how and why the Web works the way it does. They treat the Web as if it is one of the many other proprietary app development platforms when it is in reality so much more. They yell about how <abbr title="Cascading Style Sheets">CSS</abbr> sucks and use classes for everything instead of using the cascading nature of the language to their advantage. As a result Web development has devolved into a JavaScript-library-of-the-week hellhole where people are hired to positions based upon their proficiency with a particular library and not the language and how it should work with and not against <abbr title="Hypertext Markup Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr>.</p> <p>I've never used Facebook for longer than a week or so. Its toxicity was apparent long before Twitter's was. I was bombarded with racist garbage from family and acquaintances who wanted to "friend" me on the platform and got into an argument with someone who was bullying a friend. I closed my Facebook account and have never looked back. Social media is addictive; we are social creatures, and these services are designed specifically to prey upon -- and twisting around Abraham Lincoln's eloquent words in <a href="https://en.wikisource.org/wiki/Abraham_Lincoln's_First_Inaugural_Address">his first inaugural address</a> -- the worst angels of our nature. I have never received peer pressure so intense as I have from people livid at me because I do not have a Facebook account. So many people willingly spew every little aspect of their private lives online for everyone to see so much that it is now expected, and when you do not do so you are berated for it because others cannot spy and comment on your private life where they can count their likes and retweets for validation to their points of view. It's appalling behavior, and the Web has become a cesspool controlled by a few social media websites instead of the platform of freedom and democracy it was intended to be.</p> <h2>Amorality</h2> <p>I am not pointing my metaphorical finger at others here and proclaiming my moral superiority. I am just as guilty as everyone else. Especially over the past couple of years my content on Twitter has mostly consisted of political retweets and comments on such. We Americans are experiencing a national dumpster fire spearheaded by our -- and it loathes me to call him this -- President and his Nazi allies in the Republican Party. Britons are watching as both of their major parties are causing their country to circle the toilet and break from the European Union without any means whatsoever to do anything about it. "Brexit", the 2016 <abbr title="United States">U.S.</abbr> Presidential Election, and the Russian war on democracy that took place in both events have turned everyone's Twitter feeds into garbage, and I apologize for contributing to it.</p> <p>However, political commentary itself isn't the worst of the disease that has spread through Twitter. The worst part of Twitter is in fact Twitter's own refusal to take responsibility for its platform. This complete lack of professional ethics in computer science permeates every aspect of Silicon Valley and has created very public platforms where the most degenerate facets of our societies can have a voice and gain the ligitimacy they so desperately seek. Nazis and other mentally unstable individuals are allowed to bully and prey upon others with impunity while time and time again the victims and those who report such behavior are the ones punished. Donald Trump can on a daily basis violate Twitter's terms of service by promoting violence and hate, but they don't dare ban him from Twitter; he makes them too much money through the outrage generated by each and every single tweet that comes out of his diseased mind and to the fingers tapping on his phone. <a href="https://www.businessinsider.com/twitter-ads-featuring-donald-trump-appear-in-japan-2017-4">They openly promote him, even.</a> Twitter isn't alone in this. For far too long many technology companies are perfectly content with making money from those who promote hate and fear; they are headed by individuals who are every bit devoid of morality as those to whom they make bank promoting.</p> <p>This promotion is carefully designed. Facebook pioneered the use of algorithms to determine what shows up in its users' feeds. Originally Twitter feeds consisted of a chronological feed of content from and only from those people who were followed. Today Twitter uses algorithms and machine learning akin to Facebook where feeds consist of content the user did not ask for mixed in with followed users' content in no logical order whatsoever. It is a frustrating user experience, but the worst part of it is that there's a method to the madness. The content is scrupulously chosen to generate the maximum level of engagement so advertisers will get the most out of their money. Twitter doesn't care what kind of engagement is generated, and outrage seems to be the most lucretive. In other words, Twitter and other social media services are specifically designed to make you miserable and unhappy to make these companies and their advertisers money.</p> <p>These same companies also make money by not only selling ads but also selling the very information people post to their services to advertisers, and apparently also to <a href="https://en.wikipedia.org/wiki/Facebook–Cambridge_Analytica_data_scandal" title="Facebook - Cambridge Analytica Data Scandal">organizations that use the data to manipulate elections</a>. The scariest part about all of this is that most people do not care and have no concern for their own privacy, and they do not care about the amoral behavior of the companies whose services they use. Because of this most governments aren't concerned with holding these companies accountable for their actions -- or in cases of abuse -- inactions. No one is holding these people accountable, and that is scary.</p> <h2>Federation</h2> <p>For years Twitter has allowed access to its service through its <abbr title="Application Programming Interface">API</abbr>. I and many early adopters of Twitter have used third party applications to access the service. On August 16, 2018 Twitter decided to <a href="http://apps-of-a-feather.com" title="Apps of a Feather">shut down necessary features of its <abbr title="Application Programming Interface">API</abbr> to third party applications</a> in an attempt to force users to use their applications and website so we third party application users would be subjected to the algorithmic feed of enragement like the vast majority of their user base. I simply refuse to use their first party offerings for reasons that should be apparent by reading this essay to this point, so I no longer will actively use Twitter. This is all for the best because I cannot in good conscience continue to contribute to the tempest of filth that the service has become. I did not use the service at all for a month, and quite frankly it has been mentally liberating. I have since tweeted promptional stuff there, but I will not interact on there anymore.</p> <p>Possibly the biggest mistake we have made concerning the Web has been to allow major communications platforms to be controlled by single entities. We are entirely naive thinking if we use a service, promote a service, and our communities contribute features and ideas to a service it is largely ours. We even expect the data on those services to be ours and private, too. We are genuinely shocked when we learn the hard way time and time again that this is not the case. What idiots we are. Almost every service we use today is centrally controlled by a corporation using proprietary technologies. We have absolutely no control over these products because we neither directly pay for it nor do we truly own the data stored on their servers.</p> <p>Free and open source federated software is our solution to this problem where users of a service are distributed over many servers and yet are still capable of communicating with one another. This used to be the typical behavior of many Internet-based communication platforms years ago. Email is federated. People with Gmail accounts can communicate with people on Yahoo! and with anyone who runs an email server. This is how Facebook and Twitter could work. Facebook and Twitter could even communicate with each other, but they don't.</p> <p>There is pushback from this from many people who believe having a service be centralized is the way to go, and until recently they seem to have been winning out. Moxie Marlinspike, the founder of <a href="https://signal.org">Open Whisper Systems</a>, is one such person. He <a href="https://signal.org/blog/the-ecosystem-is-moving/">wrote a lengthy blog post</a> assailing federated services a while back. I won't pick through the post debunking it because it isn't the focus of what I'm wanting to write about here, but it is nonetheless worth a read because it is a fantastically constructed piece of spin. Of course he is against it; his entire business model is predicated upon a centralized system.</p> <p>There are actual drawbacks to federation, of course. It is more difficult to develop because you have to account for other servers in the federation. If one signs up for a hypothetical federated Twitter on <em>feditweet.com</em> and it shuts down in six months one would need to sign up for another one and start over. Both of these issues are surmountable.</p> <h2>Mastodon</h2> <p><a href="https://joinmastodon.org">Mastodon</a> is a free and open source federated microblogging service developed by <a href="https://mastodon.social/@gargron">Eugen Rochko</a>. It implements features similar to Twitter, but not exactly. Aside from obvious things such as lack of advertising, tracking, and a business model it has designed its features to curtail some of Twitter's most reprehensible behavior.</p> <p>One of the absolute worst features of Twitter is the ability to add your own comment to a retweet. A typical use of this feature is to retweet something a Nazi has said along with a comment explaining how horrible it is. We're all guilty of doing this. It does nothing but give them what they want and promote the fascist's point of view while filling your followers' feeds up with what are literally statements of pure evil. Mastodon instead has what are called "boosts" which perform the same function as a retweet on Twitter but deliberately does not allow for commentary. The name of the feature correctly describes what it is for -- boosting other people's content; it becomes always a positive action rather than what has become over time a predominantly negative one.</p> <p>Mastodon also has a feature that allows people to hide content behind a content warning. This is most notable on the service today when discussing politics or instance administration. It is, however, useful for all sorts of things from hiding spoilers or showing joke punchlines even. The feature is an example where interface design can encourage behavior on a service. It has become ingrained in the culture of Mastodon to hide controversial posts as a common courtesy.</p> <p>Because of its federated construction Mastodon instances can be rather small from a single user to hundreds to thousands. Instances are essentially small communities of like-minded individuals who can communicate if they wish with other instances. This allows for better moderation where moderators and administrators are responsible for policing each of their instances. If a particular instance gets out of hand and starts harassing other instances they can be blocked.</p> <p>Mastodon isn't perfect and isn't a utopia by any stretch of the definition of the word. There have been issues, especially a quite nasty one surrounding <a href="https://en.wikipedia.org/wiki/Wil_Wheaton">Wil Wheaton</a> where a community of trans people harassed and threatened him, causing him to leave. On Twitter he encouraged adoption of a blocklist that blocked Nazis and other nasty people maintained by someone else. The maintainer started adding trans people to the list, and since a lot of people -- including myself -- used this blocklist many trans people on Twitter found themselves isolated. They were bitter about it, and decided to attack Wil Wheaton as one of the promoters of this blocklist (before he found out it blocked trans people) thinking he was transphobic and hateful toward them. He added fuel to the fire himself by reporting anyone and everyone including those who were supportive and sympathetic to his plight, so it wasn't entirely one-sided.</p> <p>This incident especially has caused discussion around how to improve moderation tools, and that's where things really improve upon Twitter. Discussion of it is public, and development of it is public. Anyone can contribute. We don't know how Mastodon will turn out, but we definitely can strive to do better.</p> <h2>Fediverse</h2> <p>Mastodon isn't the only federated social media service. It isn't even the only microblogging one, and in that is where the real potential is for these services. All of these services exist in a network that has come to be called the <em>Fediverse</em>. Most Fediverse services today are free and federated reimplementations and reimaginings of existing social media platforms:</p> <table> <thead> <tr> <th>Federated Service</th> <th>Original</th> </tr> </thead> <tbody> <tr> <td><a href="https://diasporafoundation.org">diaspora*</a></td> <td>Facebook</td> </tr> <tr> <td><a href="https://friendi.ca">Friendica</a></td> <td>Facebook</td> </tr> <tr> <td>Mastodon</td> <td>Twitter</td> </tr> <tr> <td><a href="https://joinpeertube.org">PeerTube</a></td> <td><a href="https://youtube.com">YouTube</a></td> </tr> <tr> <td><a href="https://pixelfed.org">PixelFed</a></td> <td><a href="https://instagram.com">Instagram</a></td> </tr> <tr> <td><a href="https://pleroma.social">Pleroma</a></td> <td>Twitter</td> </tr> </tbody> </table> <p>Mastodon implements a <a href="https://w3.org"><abbr title="World Wide Web Consortium">W3C</abbr></a> standard protocol called <a href="https://www.w3.org/TR/activitypub/">ActivityPub</a>. Any platform which implements this protocol can communicate with Mastodon instances. Pleroma is a service that's almost identical in features to Mastodon and can communicate freely with Mastodon instances. However, other platforms such as PixelFed and PeerTube directly can as well without having to interface with proprietary <abbr title="Application Programming Interface">API</abbr>s unique to each platform. This provides a far superior experience to what we're used to.</p> <p>The best thing is that there can be and are multiple implementations of different kinds of services. I am interested in Pleroma because of its greatly-reduced dependencies over Mastodon. If I wanted to switch to Pleroma as my microblogging software I can -- provided they support subdomains in the future.</p> <p>These federated platforms and the <abbr title="World Wide Web Consortium">W3C</abbr>'s interest in publishing standards which aid in this have a chance of taking back at least some of the Web from the grips of companies intent on ruining our lives for their monetary gain. The Fediverse won't replace them, but it doesn't have to.</p> urn:uuid:7c678e62-e42c-5dbd-aed9-4998352d4ac5 Keeping Watch 2018-09-24T18:24:25+00:00 2018-09-24T18:20:07+00:00 Dustin Wilson https://dustinwilson.com <figure><a href="https://dustinwilson.com/images/blog/keeping_watch/keeping_watch-l@2.jpg"><img src="https://dustinwilson.com/images/blog/keeping_watch/keeping_watch-l.jpg" width="1262" height="947" alt="Digital painting of a wolf pup and parent; the parent is asleep or pretending to be while the pup is watching"></a></figure> <p>Well, here's yet another result of my late night painting sessions. It is a painting of a gray wolf pup and his parent. The parent is resting but obviously not asleep while the puppy is awake and looking like he's on the lookout, hence the title <em>Keeping Watch</em>. I'm not sure whether the parent wolf is the mother or father. That's for the viewer to decide, I guess. It began as a doodle I did right before bed in April. I wasn't sure what I wanted to do with it. Kate encouraged me to paint it, so I did.</p> <figure> <svg aria-labelledby="title desc" role="img" viewBox="0 0 1200 120"> <title>Color Palette</title> <desc>A table of color swatches showing the color palette used for "Keeping Watch"</desc> <rect width="120" height="120" fill="#ffffff"/> <rect x="120" width="120" height="120" fill="#86858e"/> <rect x="240" width="120" height="120" fill="#8b7f79"/> <rect x="360" width="120" height="120" fill="#fac24b"/> <rect x="480" width="120" height="120" fill="#75a233"/> <rect x="600" width="120" height="120" fill="#266c38"/> <rect x="720" width="120" height="120" fill="#bb6502"/> <rect x="840" width="120" height="120" fill="#7a3930"/> <rect x="960" width="120" height="120" fill="#5c492e"/> <rect x="1080" width="120" height="120"/> </svg> <figcaption>Color palette for "Keeping Watch"</figcaption> </figure> <p>I went about this a bit differently than I have in the recent past. I am unsure whether it's because I've been doing a lot of shirt designs lately, but I just picked the colors that could be used in the painting first before starting instead of my usual practice of mapping out a color gamut on the wheel. I also actually painted it a bit differently than I would normally. All of the colors but one were used in the vast majority of painting. I reserved one color for a special part of the painting -- the puppy's eyes. It's the only thing that's blue in the painting. It's barely blue at that, being a faint blue grey. The leaves in the background look to be reflecting a bit of a sky that is off view that also look faintly blue, but upon closer inspection they're green. Juxtapositions of color can play tricks on the mind, and it's been interesting exploring that aspect of color with this painting most of all.</p> <p>I am generally happy with it. I could, of course, keep picking nits off of it until the end of the world. I had to stop at some point, but truth be told I stopped at Kate's insistence. I have been painting wildlife a bit lately, and I rather enjoy it. The original image is 14,400 × 10,800 pixels at a traditional canvas ratio of 4:3; that makes it roughly 48″ × 36″ at 300 <abbr title="lines per inch">l.p.i.</abbr> (121.92 <abbr title="centimeters">cm</abbr> × 91.44 <abbr title="centimeters">cm</abbr> at 118.11 <abbr title="lines per centimeter">l.p.cm</abbr>).</p> urn:uuid:bdd87693-2d80-5e80-8cf2-5a3165156a13 Knowing When to Move On 2018-07-11T22:00:13+00:00 2018-07-11T23:58:04+00:00 Dustin Wilson https://dustinwilson.com <p>I seem to be going through a lot of changes lately when it comes to computing. <a href="https://dustinwilson.com/blog/passing_on_1password" title="dW: Passing on 1Password">My last entry to this website</a> detailed my move away from <a href="https://1password.com" title="1Password">1Password</a>. This one will provide details on my move away from Apple hardware. Unlike the last one this is not necessarily a desired move but more like a necessary one. First, however, I need to explain how I got here which means actually starting from the very beginning.</p> <p>The first computer I can remember ever using was a <a href="http://lowendmac.com/1987/mac-ii/" title="“Macintosh II” on Low End Mac">Macintosh II</a>. My father probably bought it around 1987 and kept upgrading it from there until upgrades weren't available anymore, eventually replacing it with a <a href="http://lowendmac.com/1993/centris-650/" title="“Macintosh Centris 650 on Low End Mac” on Low End Mac">Centris 650</a> in 1993 and later a <a href="http://lowendmac.com/2000/ibook-se-firewire-466-mhz/" title="“iBook SE” on Low End Mac">vivid lime green clamshell iBook in 2000</a>. I would play games, but what I really enjoyed doing on the computer was art -- which is what he bought the computer for in the first place. My earliest memories involve using what was then <a href="http://www.danielsays.com/ssg-mac-afh10.html" title="“Aldus Freehand 1.0” on Daniel's Legacy Computer Collections">Aldus Freehand</a> and also <a href="https://en.wikipedia.org/wiki/MacPaint">MacPaint</a>. Later, my father bought Adobe Photoshop 1.0, but 2.5 is the one I remember using the most. Being able to use computers for art and design was what got me interested in them in the first place. Until the late 1990's you'd have been wasting your time trying to do art and design work on Windows.</p> <p>Personally I have owned a <a href="http://lowendmac.com/2002/15-powerbook-g4-late-2002/" title="“15-inch Titanium Powerbook G4” on Low End Mac">2001 Titanium PowerBook G4</a> that I got for college, a <a href="http://lowendmac.com/2006/mac-pro-mid-2006/" title="“Mid 2006 Mac Pro” on Low End Mac">first generation Mid 2006 Mac Pro</a>, a <a href="http://lowendmac.com/2012/imac-late-2012/" title="“Late 2012 iMac” on Low End Mac">Late 2012 27" iMac</a>, a few Mac Minis, and two more MacBook Pros. I have owned quite a few.</p> <p>I greatly prefer the workflow in <span>macOS</span> over Windows. I am not saying that <span>macOS</span> isn't without its annoyances (far from it), but out of what there is to offer it's the one that best provides me with both a useable <abbr title="Graphical User Interface">GUI</abbr> and a usable <abbr title="Command Line Interface">CLI</abbr> in one neat package. Windows does not provide that. Linux can provide that with lots of tinkering, though; more on Linux later.</p> <p>I've been using a Mac for my main computer since 2006 when I bought the first generation Mac Pro. I was tired of constantly fixing Windows <span>XP</span> issues in my computer, didn't like what I saw in Windows Vista, and Apple was transitioning to Intel processors. It still remains to this day the best computer I have ever owned. The case was built like a tank, and components inside of it were upgradable. I only ever had one issue with the computer. My video card failed; Apple just sent me a new one. There was no taking it into a store; there was no waiting for someone to fix it. I just put the card in myself. Self-upgrading and self-repair are concepts which are entirely foreign to today's Apple.</p> <p>I tend to have a major upgrade every six years or so, and in late 2012 it was time to get something new. I was a bit ticked off at that point because Apple decided in <a href="https://en.wikipedia.org/wiki/OS_X_Mountain_Lion">Mountain Lion</a> to remove support for 32-bit <abbr title="Extensible Firmware Interface">EFI</abbr>, keeping my Mac Pro from being officially supported. I ended up having to partition a <abbr title="Solid State Drive">SSD</abbr> to create a hacked 64-bit <abbr title="Extensible Firmware Interface">EFI</abbr>. Apple also hadn't updated the Mac Pros in quite some time at that point, and there was no word except from an email from Tim Cook on the release of anything new either. I was feeling ill toward Apple at that point, but I really did not want to go back to Windows. I caved and decided to buy an iMac when Apple updated them that December and bought a top-of-the-line 27" iMac.</p> <p>I haven't been as enamored with this machine. My intention was to keep it for a few years at the most, but I've kept it almost exactly 5 1/2 years. I knew before I bought it I wouldn't be able to fix it myself easily, and that has always bothered me. I've always purchased AppleCare on my Macs, and it was useful for this machine. The first issue I ran into with it was about six months after receiving it where the fan in the computer made a tapping noise. The computer is a thin device with only a fan and a hard drive (part of the fusion drive in my model) as the moving parts. Hard drive wasn't dead, and the noise only happened when the fan was going. After numerous phone calls and emails I finally got them to realize it was the fan. Because I don't live remotely near an Apple Store and because I have a desktop they sent someone to my house to fix it where he had to go through a ridiculous process to take the computer apart to just replace a fan.</p> <blockquote>"Self-upgrading and self-repair are concepts which are entirely foreign to today's Apple."</blockquote> <p>I bought a model with the <a href="https://en.wikipedia.org/wiki/Fusion_Drive">Fusion Drive</a> where it uses solid state storage to cache a larger traditional hard disk drive. To put it bluntly... it sucked. Internally the <abbr title="Solid State Drive">SSD</abbr> and the <abbr title="Hard Disk Drive">HDD</abbr> are separate bits of hardware and literally everything is handled by software -- <a href="https://en.wikipedia.org/wiki/Core_Storage">Core Storage</a>. This isn't a filesystem handling of <abbr title="Solid State Drive">SSD</abbr> caching like <span>ZFS</span> can do. Every single time it decided to write to the <abbr title="Solid State Drive">SSD</abbr> there was a noticeable few milliseconds pause. Because it only used the <abbr title="Solid State Drive">SSD</abbr> for files which are frequently used this momentary pause occured quite often, and when you're handling a lot of files those pauses add up. Today Fusion Drives don't have that problem, but it still is slow because the filesystem isn't handling it, higher level software is. Within a week of running my computer with the Fusion Drive I'd separated the two parts and never returned to using it. This is important to what happened a year later: the hard drive failed. The hard drive they put in the machine was a Seagate, and because it's a Seagate drive it failed within months of use; it's what they do best. Thankfully I'd separated the drives. Again, Apple sent someone by to fix it. What did he bring? A Seagate drive. That one lasted longer; it failed almost eight months ago.</p> <p>Wait! There's more! Within a year of using the computer the display started ghosting. The display in my iMac was manufactured by <span>LG</span>. They even <a href="https://www.macrumors.com/2012/06/27/some-retina-macbook-pro-users-experiencing-display-ghosting/">faced a class action lawsuit</a> over it on MacBook Pros. However, all of Apple's computers using <span>LG</span>'s displays during this time period exhibited this problem. Apple again sent someone by to replace the display. He replaced it with another <span>LG</span> display instead of the non-faulty Samsung display they started using; that one started ghosting about six months later. I didn't bother getting it replaced and have put up with it ever since. It's never permanent, but it has gotten worse over the years.</p> <p>Many Mac users are exasperated these days because of their recent MacBooks which are -- to put it bluntly again -- overengineered pieces of shit. They contain keyboards which fail because of microscopic specks of dust, contain so few ports that to use the machines one has to carry around bags of adapters which Apple will gladly sell you for $50 a pop, and have internal components which are inferior to <abbr title="Personal Computer">PC</abbr> competitors' comparable offerings in every conceivable category. <a href="https://weblog.rogueamoeba.com/2018/06/14/on-the-sad-state-of-macintosh-hardware/" title="“On the Sad State of Macintosh Hardware” on Rogue Amoeba">Developers are upset</a>, and even <a href="https://daringfireball.net/linked/2018/06/14/snellintosh" title="“Snellintosh” on Daring Fireball">John Gruber has damaging things to say</a> about Apple hardware; it's bad when he does. They act as if this is a new thing. Apple has been lethargic at updating their Macintosh hardware for at least seven years. They have made inferior hardware for quite a long time, choosing thinness over performance when it was unnecessary to do so. There is absolutely no reason why an iMac has to be as thin as it is; it sits on a desk and doesn't need to be lugged around anywhere. My iMac is an i7. The new ones are all i5s. Why? Because new i7s run too hot for the tiny heatsink and chassis fan that are used in Apple's thin case. Processing power takes a back seat to thinness... on a desktop computer. The new iMacs also don't have optical audio output I suppose because they wanted to differentiate it even more with the iMac Pro and to remove yet another useful function of their computers. The iMac Pro is a compromised machine as well, containing custom lower power (meaning also lower performing) Xeon processors that won't overheat in the iMac Pro's thin case; if spending $5000 for a computer I don't want my <abbr title="Central Processing Unit">CPU</abbr> a lower performing model. Apple did the same shit with the Mac Pro a few years earlier. The <a href="http://lowendmac.com/2006/mac-pro-mid-2006/" title="“Mid 2006 Mac Pro” on Low End Mac">original Mac Pro</a> was a tower. <a href="http://lowendmac.com/2013/mac-pro-2013/" title="“Late 2013 Mac Pro” on Low End Mac">Its replacement</a> is this weird cylinder trash can-looking device that has no internal expansion capabilities whatsoever. The new machines are underperforming compared to off-the-shelf <abbr title="Personal Computer">PC</abbr> hardware because Apple's overengineering of the internals restricts what they can do with the new Xeon processors. It hasn't gone over too well; many in the high-end market had moved away from Apple by this point, and surely by now most of them have. We're again at the point where we were in 2012 with Tim Cook's promises of a new machine, and when the new Mac Pro drops it probably will be another overengineered piece of shit instead of what the high-end market needs: a simple tower computer with upgradable and replaceable parts. That's exactly what I've built instead of buying Apple hardware again. It is past time to move on. I should have before I bought the last one.</p> <blockquote>"They have made inferior hardware for quite a long time, choosing thinness over performance when it was unnecessary to do so."</blockquote> <p>My father bought an <abbr title="International Business Machines">IBM</abbr>-Compatible <abbr title="Personal Computer">PC</abbr> computer sometime in the late '80's, and that machine eventually became completely mine when he didn't require it to run Automap for routing charter bus trips. The computer I left behind in 2006 when I bought my Mac Pro started out as that machine. I have years of experience building (and breaking) computers, so when I decided this time to build a <abbr title="Personal Computer">PC</abbr> instead of buying shitty Apple hardware I knew what I was doing. I didn't go into it without a plan; my initial plan was as follows:</p> <ol> <li>Build a "Hackintosh" which would run <span>macOS</span> as my primary operating system.</li> <li>Failing that, run Ubuntu Linux and see if Adobe Photoshop and Illustrator would be okay in a virtual machine.</li> <li>Failing that, run Windows 10.</li> </ol> <p>The first plan to extinguish was <span>B</span>. I didn't get far with Linux. I have a Thunderbolt <a href="http://www.drobo.com/storage-products/5d-5Dt/">Drobo <span>5D</span></a>, and it's not supported in Linux. I tried some third party software for managing a Drobo on it, but it never could recognize my Drobo. It wasn't Thunderbolt that was the issue because the drive it booted off of was Thunderbolt, connected into the Drobo. Even if I got the thing to work the Drobo only supports <abbr title="New Technology File System">NTFS</abbr>, <abbr title="Hierarchical File System +">HFS+</abbr>, and ext3. I would have to use ext3 which is rather slow. I've never gotten around to checking much on how Photoshop and Illustrator would work in a virtual machine.<sup><a href="#fn1-1">1</a></sup> I do know that <a href="https://virtualbox.org">VirtualBox</a>'s "Seamless Mode" is far from seamless. I am not sure about <a href="https://www.vmware.com/products/workstation-player.html">VMWare Player</a>. I will investigate this further because I do want to give Linux a fair shot. I enjoy using it quite a lot on my MacBook Pro. This will be easier later also because I want to explore replacing my Drobo with a custom built <abbr title="Network Attached Storage">NAS</abbr> where I can have my own <abbr title="Redundant Array of Independent Disks">RAID</abbr> array with a filesystem like <span>ZFS</span>.</p> <p>I abhor Windows; that's why it's last. Its <abbr title="Graphical User Interface">GUI</abbr> is overly complicated in places it shouldn't need to be and at times completely illogical; Microsoft treats its customers with contempt as if they're criminals with its restrictive and buggy activation <abbr title="Digital Rights Management">DRM</abbr> that has extremely confusing licensing terms; features are most of the time thought out only half way before implementation; and software lacks the polish Mac developers have historically applied to their applications. There isn't a Windows equivalent to <a href="https://panic.com">Panic</a> or <a href="https://www.rogueamoeba.com">Rogue Amoeba</a>. I have also been spoiled by the Unix shell. I know you can now use bash on Windows, but let's face it the Linux Subsystem for Windows is popsicle sticked and duct taped into it. Just accept Unix already, Microsoft; everyone else has. With all that said, Windows 10 is indeed the best version they have released, and if push came to shove I would reluctantly use it as my primary computing operating system.</p> <p>At least thus far plan <span>A</span> has worked. Installing <span>macOS</span> was as simple as making a <abbr title="Universal Serial Bus">USB</abbr> stick with the necessary bootloader. Getting everything recognized afterwards was a completely different story. Everything involves loading custom kernel extensions in the <abbr title="Extensible Firmware Interface">EFI</abbr> partition. Video was as easy as downloading Nvidia's Mac drivers. Audio was difficult because Apple doesn't yet have hardware with my particular audio chipset. There were a few kernel panics to sort out which required some manual editing of <abbr title="Central Processing Unit">CPU</abbr> settings in the <abbr title="Unified Extensible Firmware Interface">UEFI</abbr>/<abbr title="Basic Input/Output System">BIOS</abbr>/Whatever, but the issues were documented and easily rectified. I have had to learn a lot in the past couple of weeks. Truth be told I have had more difficulty with Windows than I have with hacking an operating system onto unsupported hardware. My computer has an <a href="https://asus.com">Asus</a> motherboard, and it came with an expansion card for Thunderbolt that apparently doesn't have firmware on it at all and has to be flashed with firmware when installing the drivers in Windows. That is sheer idiocy, but whatever. Twice after installing the drivers Windows became unresponsive, even in safe mode. Thankfully, I'm using <abbr title="Non-Volatile Memory">NVM</abbr>e SSDs. Reinstalling Windows didn't take long. Actually, the funny thing is it takes Windows longer to verify my serial than it does to install the <abbr title="Operating System">OS</abbr> before configuration. My intention with the Windows installation is just to play games, and getting my Switch Pro Controller to work was a pain in the ass. I had to download this hacky software to make it emulate an Xbox 360 controller that has to be copied into each game's folder and configured for each game that requires the controller. Contrast this to <span>macOS</span> where I simply paired it with the computer and went about my business. Bluetooth in general seems to be shitty on Windows where my Bluetooth keyboard would be recognized but non-functioning. Bluetooth really seems rather pointless for keyboards and mice on <abbr title="Personal Computer">PC</abbr>s because they won't work until the <abbr title="Operating System">OS</abbr> boots up, so I'm having to use a spare keyboard at the moment even though the keyboard works just fine once booted into <span>macOS</span>.</p> <blockquote>"It is past time to move on. I should have before I bought the last one."</blockquote> <p>I am not going to go into any specifics on the hardware I have for my new computer because I've already written enough. It was interesting buying individual parts after all of these years, and I probably annoyed <a href="https://jkingweb.ca">Jeff</a> with questions so much he felt like punching my face in. The most difficult part of buying parts was finding parts that did not have <abbr title="Light Emitting Diode">LED</abbr>s all over them and a case without a window to show off the inside of the computer. My motherboard was also covered with <abbr title="Light Emitting Diode">LED</abbr>s which were thankfully easy to remove. I do not understand this fascination with turning your computer into a Christmas tree. It's a waste of electricity for something that -- like a Christmas tree -- is gaudy and an eyesore. I don't care to see the inside of the computer unless I'm fixing or adding to it. Building the computer was relatively easy; there were only a few things different, usually in a way which made it easier.</p> <p>I now have a Hackintosh, running <span>macOS</span> as my primary <abbr title="Operating System">OS</abbr> with a Windows installation just for playing games. This feels like a transitioning period for me, and I might move away from Apple completely especially since I am now at the point where I am hacking their <abbr title="Operating System">OS</abbr> onto my custom built machine just so I can have hardware that isn't garbage and can be easily repaired if something goes wrong. Only time will tell what I will do, but I am open to all of the possibilities -- even Windows.</p> <footer> <hr> <ol> <li>Yes, I am aware of free alternatives such as <a href="https://www.gimp.org">The <abbr title="GNU Image Manipulation Program">GIMP</abbr></a>, <a href="https://krita.org">Krita</a>, and <a href="https://inkscape.org">Inkscape</a>. While I would and do use Krita especially all of them aren't complete replacements yet for either Adobe Photoshop or Illustrator for me. <a href="#fnr1-1" title="Jump back to footnote 1-1 in the text.">↩︎</a></li> </ol> </footer> urn:uuid:3f74876c-d50d-54ed-9e41-8c0e66c45271 Passing on 1Password 2018-04-24T02:12:23+00:00 2018-04-24T02:12:23+00:00 Dustin Wilson https://dustinwilson.com <p>For years I've used <a href="https://1password.com" title="1Password">1Password</a>. I am no longer using it.</p> <p>I'll admit that's extremely blunt and can be perceived as setting the tone for the entire article where I outline crummy things about 1Password. Nope. I just don't agree with the direction they are taking with the application. In this post I would like to describe my experiences and show what I am using now to replace 1Password.</p> <h2>Renting Software</h2> <p>There is a movement lately toward a subscription-based model for software. The traditional model of perpetually licensing paid software seems to be dying. Some say it is because Apple's App Store is extremely restrictive and has destroyed the traditional software market by poo-pooing paid upgrades. Others think it's because of pirating. There is some truth to the former, but it obviously doesn't tell the entire story. The latter is bullshit. For instance <a href="https://adobe.com" title="Adobe Software">Adobe</a>'s Creative Cloud software has never been easier to pirate. Historically the biggest barrier to pirate Adobe software was downloading the full software version; that's extremely easy today. The best part about it is that pirates even get a better user experience.</p> <p>When software has moved to this model wanting me to fork over a portion of my monthly income for software in perpetuity (unless I unsubscribe), I haven't obliged yet.<sup><a href="#fn1-1">1</a></sup> <a href="https://overcast.fm" title="Overcast">Overcast</a> switched to a model where it displays ads unless you pay for a subscription. <span>iOS</span> automatically updated it, and there I was being effectively ransomed for money from an application whose last version I paid for and could not return to. I deleted it immediately and started looking for alternatives.</p> <p>1Password switched to a subscription model, but to their credit they haven't stopped their software from working for people who paid for licenses in the past unlike others have. However, there are new features unique to the subscription model. Their customer service has been quite good, and they have helped me since with issues I've had. I just can't use software that won't really be updated and eventually won't be supported. Needless to say I won't subscribe to their software either.</p> <p>Subscription software is a scam, and in my opinion it should be illegal unless the customer is allowed to keep the software as is at the point of their subscription's termination. I subscribe to <a href="https://www.nationalgeographic.com" title="National Geographic">National Geographic</a>, a monthly magazine. If I stop subscribing to the magazine, I still have the magazines I received while subscribed. Upon cancelling the subscription the software ceases to function or -- as is the case with Overcast -- starts displaying ads anew when you stop forking over money to the company. We should stop referring to it as a subscription and call it what it is: rentalware. It's a racket that many crooks in the past would have loved to be able to legally do; today people accept it as the norm.</p> <p>In a world where <a href="https://spotify.com" title="Spotify">people pay a rental fee to listen to music</a> they could otherwise own I'm not holding my breath for a change.</p> <h2>Looking for an Alternative</h2> <p>I originally wanted to ramble a bit on about free software, but I came to the conclusion that was pretty much what it was -- a ramble. Free software is free. It doesn't cost you anything, but it can be clunky and support usually antagonistic with neckbeards telling you stupid shit like "<abbr title="Read The Fucking Manual">RTFM</abbr>" all the time. These points were tangential to what I'm wanting to say here, so having outlined what made me want to jump ship from 1Password let me get on with describing my journey to what I eventually decided upon.</p> <p>There are other alternatives to 1Password of course ranging from rent-for-advanced-features <a href="https://lastpass.com">LastPass</a> to free <a href="https://keepass.info">KeePass</a> and its many derivatives. I really shouldn't need to say why I didn't want to use LastPass, but aside from the fact that the password storage is not in the user's possession <a href="https://blog.lastpass.com/2011/05/lastpass-security-notification.html" title="2011 LastPass Security Breach">multiple</a> <a href="https://labs.detectify.com/2016/07/27/how-i-made-lastpass-give-me-all-your-passwords" title="2016 LastPass Security Breach">security</a> <a href="https://dustinwilson.com/blog/blog.lastpass.com/2017/03/important-security-updates-for-our-users.html" title="2017 LastPass Security Breach">breaches</a><sup><a href="#fn1-2">2</a></sup> are a nice reason not to use it. I first tried out KeePass, and I found that while the vault format itself was solid the software was not. There is not a single client that works worth a crap on <span>macOS</span> except <a href="https://keeweb.info">KeeWeb</a>, and it's an <a href="https://electronjs.org">Electron</a> application<sup><a href="#fn1-3">3</a></sup>. KeePass-compatible browser extensions are even worse and don't even provide a modicum of the functionality 1Password's or LastPass' extensions provide. I also have looked at <a href="https://bitwarden.com">Bitwarden</a> which is a server-based solution where I install it on my server and use applications to access the storage there. I fully intended on installing it on my server despite its heavy use of a Microsoft software stack that I don't otherwise use, but I discovered something else first.</p> <h2>Pass</h2> <p>I decided on <a href="https://www.passwordstore.org" title="Pass — the standard unix password manager">pass</a>; pass -- or "Password Store" -- is a Unix-based terminal application which follows the ol' <a href="https://en.wikipedia.org/wiki/Unix_philosophy" title="“Unix Philosophy” on Wikipedia">Unix philosophy</a>:</p> <ol> <li>Write programs that do one thing and do it well</li> <li>Write programs to work together, expecting the output of every program to become the input in another</li> </ol> <p>So... I replaced 1Password with a command line program? I did, and I'll admit now it's not for everyone. The downside to the Unix philosophy comes from its greatest strength in that the software isn't monolithic; it's just one tool in a chain of tools instead of a single application. Granted, with 1Password there are three parts: 1Password, its browser extension, and 1Password Mini (what actually interfaces with the extension). Those are all three pieces of a whole though, installed with the first piece. Pass is only really the second link in a chain.</p> <p>Pass works a lot differently than other password managers. It doesn't create a vault-like database to store your data. In the typical Unix manner it utilizes the filesystem. Rearranging and organizing your passwords and secure data is simply a matter of moving files around. Pass does not enforce any format for organizing your data; each secret file is a simple text file with key/value pairs with the first line's being the password. A hypothetical website secret file would be like this:</p> <figure> <pre><code>I4m7h3l1qu0r username: lahey@sunnyvaletrailerpark.com</code></pre> <figcaption>Mr. Lahey's novascotialiquor.ca login information</figcaption> </figure> <p>Each of those files is encrypted with a <abbr title="Gnu Privacy Guard">GPG</abbr> key. Pass simply provides a way to access these files and decrypt them on the fly.</p> <h2>Setting up Pass</h2> <p>I use <span>macOS</span>, but installation is trivial on other Unix-based systems and is even available for Windows.</p> <figure> <pre><code>brew install pass pinentry-mac gpg --full-generate-key</code></pre> <figcaption>Installation of pass using <a href="https://brew.sh">Homebrew</a> on <span>macOS</span></figcaption> </figure> <p>During the installation process Homebrew (or whatever package manager you have) will install <a href="https://gnupg.org">G​<span>nuPG</span></a> which is what handles the <abbr title="Gnu Privacy Guard">GPG</abbr> keys and does the decryption and encryption of the files. If you've ever sent an encrypted email you've used this before. Before using pass a public/private key pair must be generated, so that is what the second command is doing.</p> <p>As a helping hand to Linux users be advised pass expects gnupg2, so the command might be <code>gpg2</code> for you. It's an interactive prompt so just follow the on screen questions. Generate one with these properties:</p> <figure> <table> <tbody> <tr> <th>Kind</th> <td><abbr title="Rivest-Shamir-Adleman">RSA</abbr> &amp; <abbr title="Rivest-Shamir-Adleman">RSA</abbr> (default)</td> </tr> <tr> <th>Key size</th> <td>4096</td> </tr> <tr> <th>Key validity time</th> <td>0 = key does not expire</td> </tr> </tbody> </table> </figure> <p>It will in addition to these ask for your name, email address, and a comment. The comment is an identifier for the key. I used "Password Store"; use whatever you'd like. Keep your keys safe. If you lose the keys you will not be able to decrypt the passwords. Earlier when showing how to install pass via Homebrew I included <code>pinentry-mac</code>. This is a command line program which interfaces with G​<span>nuPG</span> to show a <abbr title="Graphical User Interface">GUI</abbr> dialog box for you to put in your password -- very convenient. G​<span>nuPG</span> just needs to be configured to use it:</p> <figure> <pre><code>echo "default-cache-ttl 300 pinentry-program /usr/local/bin/pinentry-mac" &gt; ~/.gnupg/gpg-agent.conf chmod 700 ~/.gnupg/gpg-agent.conf sudo killall gpg-agent</code></pre> <figcaption>Configuration of gpg-agent to set timeout and the pinentry program</figcaption> </figure> <p><kbd>"Password Store"</kbd> is the comment for the <abbr title="Gnu Privacy Guard">GPG</abbr> key that was generated earlier. Doing that will create a password store in <kbd>~/.password-store</kbd>. Inserting passwords isn't difficult at all but is beyond the scope of this post. <a href="https://git.zx2c4.com/password-store/about/">Pass' manual</a> provides numerous examples and is really easy to follow. I should say if migrating from 1Password the script provided on pass' website doesn't create a password store that is organized very well.</p> <h2>Browser Extension</h2> <p>There is a browser <a href="https://addons.mozilla.org/en-US/firefox/addon/browserpass-ce/" title="Browserpass on Firefox Add-ons">extension for Firefox</a>, <a href="https://chrome.google.com/webstore/detail/browserpass-ce/naepdomgkenhinolocfifgehidddafch" title="Browserpass on the Chrome Web Store">Chrome, and Chrome derivatives</a> called Browserpass which can access your password store. There is currently no Safari extension. I am not sure whether it is because no one has yet been interested in making one or if Safari's extension <abbr title="Application Programming Interface">API</abbr> doesn't support what Browserpass needs. If I had to guess it would be the latter.<sup><a href="#fn1-4">4</a></sup></p> <p>Unfortunately, there are multiple parts to this. In addition to the extension itself a messaging interface needs to be installed to communicate with extensions. Because of some <a href="https://github.com/Homebrew/homebrew-core/pull/21039" title="browserpass 2.0.8 (new formula) -- homebrew-core Issue #21039 on GitHub">really stupid shit</a> browserpass isn't in Homebrew. I can sort of understand the Homebrew owner's logic on this, but all Homebrew needs to manage is a command line tool and not the extensions themselves. Something is said about a "better and safer experience" if they can install the command line tool and the extensions all in one go. They're right; that's great in theory, but Chrome prohibits management of extensions via its extensions page if the extension is managed by something else other than the browser; no thanks. Thankfully one can create their own repositories in Homebrew, so <a href="https://github.com/dustinwilson/homebrew-tap/" title="My Homebrew tap on GitHub">I have created my own</a> largely using what was worked on in the issue I linked to earlier.</p> <figure> <pre><code>brew install dustinwilson/tap/browserpass browserpass-setup chrome &amp;&amp; browserpass-setup firefox &amp;&amp; browserpass-setup vivaldi</code></pre> <figcaption>Installation of the browserpass <abbr title="Command Line Interface">CLI</abbr></figcaption> </figure> <p>When done it will tell you that you will need to install the extensions (duh), but also a browserpass-setup command needs to be run which copies the appropriate messaging host file to the browsers. I have Chrome, Firefox, and Vivaldi installed on my computer, so I told it to install those. Install what you need. Perhaps when I get some time in the future I'll have the formula auto install them for you to save this step.</p> <p>This is it. Browserpass should now work in your browser(s). One caveat to note with the extension is that it expects the filename of password files for websites to be in the format of <code>domain.tld</code>. It doesn't matter how many folders deep you have it, though. You do not have to put your store in a format like this, but autodetection by the extension requires this format because decryption of the password file doesn't happen until you click to fill in the form and you provide your passcode. Consult <a href="https://github.com/browserpass/browserpass#requirements" title="Browserpass on GitHub">Browserpass' requirements</a> for more information. Another caveat is that it does not help in creation of passwords yet; that is being discussed, though.</p> <h2>Syncing</h2> <p>One thing I didn't mention is syncing. The accepted manner by the community (and one where pass does provide a small bit of help with) is using a private remote <a href="https://git-scm.com" title="Git distributed version control system">Git</a> repo to sync to different devices. Git isn't user friendly to even seasoned users, so I can understand averseness to using it. You can thankfully use whatever service you wish; just needless to say make sure it's a secure one.</p> <hr> <p>Like I said there was a good bit to set up, but this approach does provide me with quite a bit of freedom that I rather enjoy. Everything is encrypted with a format that is openly available, independently tested, and useful for more than just password storage. The best part is that I don't have to rent software. Pass doesn't end here. There are mobile apps for <a href="https://itunes.apple.com/us/app/pass-password-store/id1205820573" title="Pass - Password Store on iOS App Store"><span>iOS</span></a> and <a href="https://f-droid.org/packages/com.zeapo.pwdstore/" title="Password Store on FDroid">Android</a> available. Surprisingly enough the <span>iOS</span> app works really well. I was thoroughly shocked when I first tried it out to find a working and free <span>iOS</span> app that didn't contain any bullshit. I haven't tried the Android client yet, though. There are many plugins for Pass as well that does <a href="https://github.com/tadfisher/pass-otp" title="pass-otp on GitHub">stuff like <abbr title="One Time Password">OTP</abbr></a><sup><a href="#fn1-5">5</a></sup> and <a href="https://github.com/roddhjav/pass-tomb#readme" title="pass tomb on GitHub">vaulting with Tomb</a> along with a compatible alternative called <a href="https://www.justwatch.com/gopass/">gopass</a> which contains extra features not found in the official executable; either or both can be installed and not affect each other or Browserpass.</p> <footer> <hr> <ol> <li>Thus far employers have paid for my Creative Cloud subscription, and it hurts my soul. <a href="#fnr1-1" title="Jump back to footnote 1-1 in the text.">↩︎</a></li> <li>I ran out of words to apply links to for LastPass security breaches; there are that many. <a href="#fnr1-2" title="Jump back to footnote 1-2 in the text.">↩︎</a></li> <li>I don't really have a problem with Electron, but it's ridiculously wasteful in this case especially when it needs to be forever open <em>and unlocked</em> if communicating with a browser extension. <a href="#fnr1-3" title="Jump back to footnote 1-3 in the text.">↩︎</a></li> <li>Insert obligatory rant about the need for standardized extensions here. <a href="#fnr1-4" title="Jump back to footnote 1-4 in the text.">↩︎</a></li> <li>I provide an easy way to install it via <a href="https://github.com/dustinwilson/homebrew-tap/" title="My Homebrew tap on GitHub">my Homebrew tap</a> by entering <kbd>brew install dustinwilson/tap/pass-otp</kbd> into your terminal. <a href="#fnr1-5" title="Jump back to footnote 1-5 in the text.">↩︎</a></li> </ol> </footer> urn:uuid:22e8f2fd-6f58-5990-98ad-e3e331ad6561 Ligature Icons 2018-04-01T17:01:26+00:00 Dustin Wilson https://dustinwilson.com <p>Icon fonts have fallen out of favor in recent years because <abbr title="Scalable Vector Graphics">SVG</abbr> support has gotten good enough to be viewable by virtually everyone using a browser. There's a good reason for the switch to <abbr title="Scalable Vector Graphics">SVG</abbr> other than that, of course. Icon fonts are generally used in the conventional manner of assigning an icon to a character in a font, using the character in the markup, and then styling the containing element to use the icon font. It never should have been considered a viable method of displaying icons on a webpage. It littered the markup with stray characters that most of the time bore very little semantic meaning to the icons that would be displayed in an ideal setting. It also was an issue when screen readers were involved, creating odd -- and sometimes comical -- interjections of random characters that were read out instead of an icon. A simple <code>img</code> element would be preferable to that.</p> <p><abbr title="Scalable Vector Graphics">SVG</abbr> icons work really well today as long as you embed the <abbr title="Scalable Vector Graphics">SVG</abbr> into the document. If sourcing a <abbr title="Scalable Vector Graphics">SVG</abbr> through an <code>img</code> element by its identifier various problems begin occurring in different browsers -- except Firefox which handles everything you throw at it. Embedding <abbr title="Scalable Vector Graphics">SVG</abbr> into every document isn't efficient and isn't friendly to the browser's cache either. If there are only a few icons this is okay, but for several it's not a good option at all. What if there were a way to use icon fonts and have them be both semantic and degrade gracefully? There is, and I've used them on this website for almost five years. I only know of one <a href="https://webkit.org" title="WebKit">write-up about ligature icons</a> which is from <abbr title="Cascading Style Sheets">CSS</abbr> Tricks a couple of years ago about how Google's Material Design icons were ligature icons. It kind of fell flat because it didn't go into any detail of how to make them. I'll outline a way to do so here.</p> <h2>Ligatures</h2> <figure> <img src="https://dustinwilson.com/images/blog/ligature_icons/ligatures-l.png" width="1262" height="780" alt=""> <figcaption>Ampersand typeset in Bodoni Poster Condensed, eszett in Tungsten Black, oe in Alter Gotisch, AE in Akzidenz Grotesk Extended Bold, and ffi in Adobe Jenson Pro</figcaption> </figure> <p>I hope all designers are aware of ligatures. Some people reading this might not be, so I'll explain a little bit. They're combinations of letters into a single glyph like the ones displayed above. The most well known of the bunch of course is the ampersand which originated as a ligature of <em>"et"</em> which is Latin for <em>"and"</em>. Aside from the ampersand and other characters like the German <em>ß</em> that became so commonplace they just became yet another symbol used, they haven't been available for use on the Web except when someone has discovered the wonders of Unicode and decided to paste in Unicode representations of them like many do on their Twitter profiles. Automatic insertion of ligatures is supported by a vast majority of browsers now and have been for some time.</p> <p>This is interesting and all, but how are developers and designers going to create icon fonts? Well, the usual approach to this would be to use specialized font software to create them such as <a href="https://developer.apple.com/safari/download/" title="Safari Technology Preview">Fontlab</a> or <a href="http://jensimmons.com" title="Jen Simmons' website">FontForge</a>. In fact software like that is how I created my font originally, but I discovered another way that doesn't require much in the way of super specialized software like a FontLab or FontForge.</p> <h2>Math?! Ew!</h2> <p>Before getting into how to create them I should explain a bit about how fonts work internally. Internally fonts use a measurement called UPM which is short for <em>units per em</em>. In metal type it was the size of the box the letter rose out of, and in digital type it's the resolution of the font itself. Most font formats cannot use floating point numbers in the positions of points, so a font with 1000 UPM has 1000 units<sup>2</sup> to use within that box, but unlike metal type digital type can excede the box. I used 1000 UPM in my icon font. 2048 is a common UPM size; it provides more resolution for the font, and it's common because in the old days where processing power and memory wasn't remotely as abundant as it is today it was convenient to have a nice, round number in binary. Today we can use whatever we want. Actually, it might even make sense to use something which is proportional to the size of your icons; for instance if your icons are 24×24 then the UPM would be 2400. I haven't personally experimented with this yet, but it makes sense.</p> <h2>What? <abbr title="Scalable Vector Graphics">SVG</abbr>?</h2> <p>Indeed. You can <a href="https://gridbyexample.com/examples/" title="Grid by Example">author fonts in <abbr title="Scalable Vector Graphics">SVG</abbr> 1.1</a>. They have been removed in <a href="https://rachelandrew.co.uk" title="Rachel Andrew's website"><abbr title="Scalable Vector Graphics">SVG</abbr> 2.0</a> which I see as a shortsighted mistake; that's for another time, but what I'll show here says a bit of why it's a mistake to deprecate <abbr title="Scalable Vector Graphics">SVG</abbr> fonts. Chrome and Firefox have removed support for <abbr title="Scalable Vector Graphics">SVG</abbr> fonts, so why bother with them? It's what the icon font will be authored as, not what it will be delivered as. At the end of this process a TrueType font will be generated.</p> <figure> <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"&gt; &lt;defs&gt; &lt;font id="dWIcons" horiz-adv-x="0"&gt; &lt;font-face font-family="dW Icons" font-weight="normal" font-style="normal" units-per-em="1000" ascent="500" descent="-500"&gt; &lt;font-face-src&gt; &lt;font-face-name name="dW Icons Regular"/&gt; &lt;/font-face-src&gt; &lt;/font-face&gt; &lt;glyph unicode="ArtStation" glyph-name="artstation" horiz-adv-x="1000" d="M0,12,84-135c18-32,50-55,91-55H735L619,12Zm1000-2c0,21-7,39-16,55L655,636c-17,32-50,54-89,54H392L900-189,980-51c16,27,20,39,20,61ZM536,155,309,548,83,155Z"/&gt; &lt;glyph unicode="Dribbble" glyph-name="dribbble" horiz-adv-x="1000" d="M118-71C41,20,0,133,0,253H4c62,0,279,5,504,71l31-64C301,186,154-12,118-71ZM577,464C506,592,431,699,401,740a552.375,552.375,0,0,0,99,9c119,0,233-41,323-118-23-28-97-109-246-167ZM14,367C48,510,146,632,278,698c26-36,102-145,175-273C251,374,74,368,14,367Zm986-97c-75,14-150,22-223,22-38,0-76-3-113-7-17,39-26,60-36,80,156,67,241,155,269,189a497.519,497.519,0,0,0,103-284ZM795-153c-9,52-36,180-91,333a769.388,769.388,0,0,0,95,6,724.955,724.955,0,0,0,193-26A500.972,500.972,0,0,0,795-153ZM500-250c-109,0-212,35-299,100,24,44,129,210,383,301,64-169,93-312,102-365q-88.5-36-186-36Z"/&gt; &lt;glyph unicode="Email" glyph-name="email" horiz-adv-x="1000" d="M917,583H83A82.8,82.8,0,0,1,0,500V0A82.8,82.8,0,0,1,83-83H917a82.8,82.8,0,0,1,83,83V500a82.8,82.8,0,0,1-83,83ZM605,250C747,144,852,69,958-3a41.3,41.3,0,0,0-41-38H884C794,30,703,102,558,215c-32-22-41-26-58-26s-27,4-58,26C297,103,207,31,116-41H83A41.3,41.3,0,0,0,42-3C148,68,252,145,394,250,252,355,148,432,42,503c2,21,20,38,41,38h33c91-72,182-146,273-215,91-70,103-81,110-81s20,11,112,81c93,71,182,144,273,215h33c21,0,39-17,41-38C852,431,747,356,645,279l-40-29Z"/&gt; &lt;glyph unicode="Feeds" glyph-name="feeds" horiz-adv-x="1000" d="M214.5,750h570a214.67,214.67,0,0,0,215-215V-35a214.67,214.67,0,0,0-215-215h-570A214.67,214.67,0,0,0-.5-35V535a214.67,214.67,0,0,0,215,215Zm-84-768c0-58,47-106,105-106a106.053,106.053,0,0,1,106,106c0,58-47,105-106,105a104.987,104.987,0,0,1-105-105Zm0,404V237c199,0,360-162,360-361h150c0,282-229,510-510,510Zm744-511c0,414-336,750-750,750V475c331,0,600-269,600-600Z"/&gt; &lt;glyph unicode="GitHub" glyph-name="github" horiz-adv-x="1000" d="M500,738C224,738,0,514,0,238,0,17,143-170,342-237a22.018,22.018,0,0,1,8-1c19,0,26,13,26,26,0,11,0,43-1,85q-28.5-6-51-6c-96,0-117,73-117,73-23,57-56,73-56,73-14,10-19,16-19,21,0,9,22,9,23,9,50-3,76-51,76-51,25-43,59-55,89-55,23,0,44,7,57,13,4,32,17,54,32,67C298,30,181,72,181,264c0,55,19,99,51,134-3,7-10,28-10,57,0,12,2,77,25,77,18,0,59-7,128-53a471.359,471.359,0,0,0,125,17,477.028,477.028,0,0,0,125-17c68,46,110,53,127,53,24,0,26-65,26-76,0-30-8-51-11-58,33-35,52-79,52-134C819,72,702,30,591,17c18-15,34-46,34-92,0-67-1-121-1-137,0-12,7-25,25-25,2,0,6,0,9,1,199,66,342,253,342,474,0,276-224,500-500,500Z"/&gt; &lt;glyph unicode="Last.fm" glyph-name="lastfm" horiz-adv-x="1000" d="M.5,240c0,182,90,288,257,288,156,0,227-55,277-204l38-115c30-92,84-144,192-144,80,0,120,19,120,59,0,33-26,59-79,71l-78,18c-88,20-132,71-132,151,0,125,99,164,203,164,122,0,188-49,198-146l-116-14c-4,47-33,70-88,70-51,0-82-22-82-61,0-36,17-56,66-67l73-16c100-22,151-77,151-164,0-105-80-158-238-158-184,0-264,73-304,200l-37,116c-31,98-69,148-160,148-79,0-140-61-140-191,0-109,56-179,134-179,52,1,110,27,149,66l37-100c-40-29-117-60-191-60C89.5-28,.5,67,.5,240Z"/&gt; &lt;glyph unicode="Mastodon" glyph-name="mastodon" horiz-adv-x="1000" d="M940,151C926,80,819,3,696-12c-54-7-107-13-162-13C409-25,304,4,304,3c0-146,113-152,212-152,84,0,155,23,155,23l4-83s-74-41-206-41a731.4,731.4,0,0,0-194,26C54-166,43,100,43,341v81c0,217,140,280,140,280,70,33,191,47,317,48h3c125-1,246-15,316-48,4,0,140-65,140-292,0-38-1-166-19-259ZM792,408c0,105-56,175-148,175-52,0-92-20-118-61l-25-44-25,44c-26,41-66,61-118,61-92,0-148-70-148-175V145H311V400q0,81,66,81c49,0,74-32,74-96V245H551V385c0,64,25,96,74,96q66,0,66-81V145H792V408Z"/&gt; &lt;glyph unicode="Twitter" glyph-name="twitter" horiz-adv-x="1000" d="M314-156c389,0,595,328,584,610,40,29,74,65,102,106a420,420,0,0,0-118-32c42,25,75,65,90,113-39-23-83-40-130-50-37,40-91,65-150,65-113,0-205-92-205-205a241.626,241.626,0,0,1,5-47c-170,9-321,91-422,215A204.013,204.013,0,0,1,42,516c0-72,36-134,91-171a207.8,207.8,0,0,0-93,25c-1-101,70-184,165-203a225.516,225.516,0,0,0-93-4C138,82,214,22,304,21,233-34,145-67,49-67A390.782,390.782,0,0,0,0-64c91-58,199-92,314-92Z"/&gt; &lt;glyph unicode="." glyph-name="period"/&gt; &lt;glyph unicode="A" glyph-name="A"/&gt; &lt;glyph unicode="D" glyph-name="D"/&gt; &lt;glyph unicode="E" glyph-name="E"/&gt; &lt;glyph unicode="F" glyph-name="F"/&gt; &lt;glyph unicode="G" glyph-name="G"/&gt; &lt;glyph unicode="L" glyph-name="L"/&gt; &lt;glyph unicode="M" glyph-name="M"/&gt; &lt;glyph unicode="S" glyph-name="T"/&gt; &lt;glyph unicode="T" glyph-name="T"/&gt; &lt;glyph unicode="a" glyph-name="a"/&gt; &lt;glyph unicode="b" glyph-name="b"/&gt; &lt;glyph unicode="d" glyph-name="d"/&gt; &lt;glyph unicode="e" glyph-name="e"/&gt; &lt;glyph unicode="f" glyph-name="f"/&gt; &lt;glyph unicode="i" glyph-name="i"/&gt; &lt;glyph unicode="l" glyph-name="l"/&gt; &lt;glyph unicode="m" glyph-name="m"/&gt; &lt;glyph unicode="n" glyph-name="n"/&gt; &lt;glyph unicode="o" glyph-name="o"/&gt; &lt;glyph unicode="r" glyph-name="r"/&gt; &lt;glyph unicode="s" glyph-name="s"/&gt; &lt;glyph unicode="t" glyph-name="t"/&gt; &lt;glyph unicode="u" glyph-name="u"/&gt; &lt;glyph unicode="w" glyph-name="w"/&gt; &lt;/font&gt; &lt;/defs&gt; &lt;/svg&gt;</code></pre> <figcaption>My icon font represented in an <abbr title="Scalable Vector Graphics">SVG</abbr> document.</figcaption> </figure> <p>Yeah, I know. That's a lot to take in one go. That's okay. I'll explain. Assuming basic knowledge of <abbr title="Scalable Vector Graphics">SVG</abbr> file structure the first thing that should be unfamiliar is the <code>font</code> element.</p> <figure> <pre><code>&lt;font id="dWIcons" horiz-adv-x="0"&gt; &lt;font-face font-family="dW Icons" font-weight="normal" font-style="normal" units-per-em="1000" ascent="500" descent="-500"&gt; &lt;font-face-src&gt; &lt;font-face-name name="dW Icons Regular"/&gt; &lt;/font-face-src&gt; &lt;/font-face&gt; &lt;/font&gt;</code></pre> </figure> <p>In the excerpt above the <code>font</code> element has an <code>id</code> attribute and a <code>horiz-adv-x</code> attribute. The <code>id</code> attribute is the same as it is in <abbr title="Hypertext Markup Language">HTML</abbr>. The camel case structure of the id isn't what is found in <abbr title="Extensible Markup Language">XML</abbr> or <abbr title="Hypertext Markup Language">HTML</abbr> because it is used by software (to be detailed later) to generate name tables for the resultant TrueType font. The <code>horiz-adv-x</code> attribute is the default width in UPMs of a glyph; in this case it's zero.</p> <p>The <code>font-face</code> element defines the names and metrics for the fonts. The <code>font-family</code>, <code>font-weight</code>, and <code>font-style</code> attributes should all be self-explanatory. The <code>units-per-em</code> attribute shows exactly what was mentioned earlier. Lastly there's the <code>ascent</code> and <code>descent</code> attributes. In a normal font they're used to define the top of the ascenders and the bottom of the descenders; in this icon font they're used to force the baseline in the center of the icon and to help with some residual math necessary when exporting <abbr title="Scalable Vector Graphics">SVG</abbr> later.</p> <p>There is one more name to use in a font for our purposes and that's the <code>font-face-name</code> which goes inside a <code>font-face-src</code> element. It specifies the full name for this font which includes both the family name and its style name. Now, onto the <code>glyph</code>s that are within the <code>font</code> element.</p> <figure> <pre><code>&lt;glyph unicode="ArtStation" glyph-name="artstation" horiz-adv-x="1000" d="M0,12,84-135c18-32,50-55,91-55H735L619,12Zm1000-2c0,21-7,39-16,55L655,636c-17,32-50,54-89,54H392L900-189,980-51c16,27,20,39,20,61ZM536,155,309,548,83,155Z"/&gt;</code></pre> </figure> <p>As can be inferred by its name, the <code>glyph</code> element defines an individual glyph of the font. The particular example above is a ligature because its <code>unicode</code> attribute contains multiple characters. The <code>glyph-name</code> attribute is important for our uses because it is used to name individual glyphs which are used in the TrueType font's ligature feature table. The <code>horiz-adv-x</code> attribute is the same as the one mentioned before, but here it is defined just for this glyph. Lastly, the <code>d</code> attribute contains path information in <abbr title="Scalable Vector Graphics">SVG</abbr>'s esoteric way.</p> <figure> <pre><code>&lt;glyph unicode="." glyph-name="period"/&gt;</code></pre> </figure> <p>At the end of the <code>font</code> element there's a series of <code>glyph</code>s which look like this. They are glyphs for the individual characters in each of the ligatures' <code>unicode</code> attributes. There must be characters to replace present in the font, after all. The glyph contains no geometry and is intentionally empty.</p> <h2>Creating the Icons</h2> <p>While it definitely is possible to write <abbr title="Scalable Vector Graphics">SVG</abbr> path data by hand I'm not going to do it, especially when it can be exported from a vector application such as <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/columns" title="Columns CSS property on MDN">Adobe Illustrator</a> or <a href="https://thearsse.com" title="The Arsse">Inkscape</a>. In my explanations below I am going to be using Illustrator, but everything here is possible -- and perhaps even easier -- with Inkscape. Illustrator is what I personally am more familiar with, so I will be using that.</p> <p>This is where the math, stuff about UPM units, and the <code>ascent</code> and <code>descent</code> attributes come together. Using this approach each icon must be a compound path and in one color. It would be helpful to have all points be integers, but it's not absolutely necessary as the converter software will fix that; it's still a good idea to change them before to eliminate potential problems.</p> <figure> <img src="https://dustinwilson.com/images/blog/ligature_icons/icon_artboards.png" srcset="/images/blog/ligature_icons/icon_artboards.png 1x, /images/blog/ligature_icons/icon_artboards@2.png 2x" width="1200" height="742" alt=""> <figcaption>Cropping of a screenshot of the icons and their artboards in Adobe Illustrator</figcaption> </figure> <p>Is this a mistake? Unfortunately, no. In the example above I've created 1000×1000 point artboards for each of the icons because I use 1000 UPM in the font, flipped them vertically, and then adjusted their positions within the artboard upward by 250 points (1/4 of UPM). In Adobe Illustrator CS5, Adobe flipped the vertical ruler direction to where down was positive and up was negative. In fonts it's the opposite, so that's why the icons are flipped. I'm not awfully sure about the other. I did a lot of testing, and this is what ended up working. Adobe Illustrator copies objects to the clipboard in <abbr title="Scalable Vector Graphics">SVG</abbr>. You would think that would be the obvious way to get <abbr title="Scalable Vector Graphics">SVG</abbr> path data from these, but you'd be wrong. Objects copied to the clipboard do not seem to care about ruler direction, ruler origin, or even its position within 2-D space; typical Adobe. Instead, export the artboards to <abbr title="Scalable Vector Graphics">SVG</abbr> files and then copy the icon path's <code>d</code> attribute to the corresponding <code>glyph</code> in the icon <abbr title="Scalable Vector Graphics">SVG</abbr> font.</p> <h2>And, Finally...</h2> <p>If the <abbr title="Scalable Vector Graphics">SVG</abbr> specification authors and browser vendors weren't shortsighted this would be the end of the font generation process. We would have a font format as editable as a text document -- perfect for icons. Sadly, we must instead carry on. The last step of the font creation process involves converting our icon <abbr title="Scalable Vector Graphics">SVG</abbr> font into a TrueType font. The requirements are as follows:</p> <ul> <li><a href="https://code.mensbeam.com/MensBeam/lax" title="Lax">Node.js</a>, a requirement for svg2ttf as it is written in Node</li> <li><a href="https://tools.ietf.org/html/rfc4287" title="The Atom Syndication Format 1.0 Specification">svg2ttf</a>, the <abbr title="Command Line Interface">CLI</abbr> used to convert the <abbr title="Scalable Vector Graphics">SVG</abbr> icon font to a TrueType font</li> <li><a href="https://jsonfeed.org/version/1" title="The JSON Feed 1.0 Specification">ttfautohint</a>, a <abbr title="Command Line Interface">CLI</abbr> used to <del>perform voodoo on the font</del> <ins>add hinting</ins> to make it display a bit more nicely in Windows</li> </ul> <figure> <pre><code>brew install node ttfautohint npm install -g svg2ttf</code></pre> </figure> <p>Node.js and ttfautohint are easily available in your system's package manager. I use mac<span><abbr title="Operating System">OS</abbr></span>, so above I use <a href="https://github.com/brentsimmons/JSONFeed/issues" title="JSON Feed's Issue Tracker on GitHub">Homebrew</a>. You might be using a different operating system, so look up if you even have a package manager or if they are available. If not, they can always be downloaded manually. Svg2ttf is available via <a href="https://dustinwilson.com/feeds/" title="dW: Feeds">npm</a> which is installed with Node.js. With all the requirements met converting the font is simple:</p> <figure> <pre><code>svg2ttf --copyright "© 2018 Dustin Wilson" icons.svg icons.ttf ttfautohint --symbol --hinting-limit=0 --windows-compatibility icons.ttf icons-hinted.ttf mv icons-hinted.ttf icons.ttf</code></pre> </figure> <p>This above is using a bash shell, so if using Windows or a different shell the syntax might be a bit different. It would be convenient if the output of svg2ttf could be piped to ttfautohint, but the author of svg2ttf didn't provide standard output capabilities. Svg2ttf also injects its own copyright information in the font but thankfully has an option to supply your own. Considering these tools are available with command line interfaces it should be trivial to automate the process further. Generating WOFF files is outside the scope of this tutorial, but the output TrueType file should work in any tools you use to convert other fonts.</p> <h2>Markup &amp; Styling</h2> <p>Using the font is pretty much the same as you would any other font on the Web:</p> <figure> <pre><code>&lt;nav aria-label="social"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="https://artstation.com/dustinwilson/" class="artstation"&gt;ArtStation&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="https://dribbble.com/dustinwilson/" class="dribbble"&gt;Dribbble&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="mailto:dustin@dustinwilson.com" class="email"&gt;Email&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/feeds/" class="feeds"&gt;Feeds&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="https://github.com/dustinwilson/" class="github"&gt;GitHub&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="https://www.last.fm/user/DustinWilson/" class="lastfm"&gt;Last.fm&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="https://mastodon.dustinwilson.com" class="mastodon"&gt;Mastodon&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="https://twitter.com/dustinwilson/" class="twitter"&gt;Twitter&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt;</code></pre> <figcaption>An excerpt from this website's <abbr title="Hypertext Markup Language">HTML</abbr> concerning the footer icons</figcaption> </figure> <figure> <pre><code>@font-face { font-family: "dW Icons"; src: url("../fonts/icons.woff2") format("woff2"), url("../fonts/icons.woff") format("woff"), url("../fonts/icons.ttf") format("truetype"); } html { font-variant-ligatures: common-ligatures; } @supports (font-feature-settings: "liga") { body &gt; footer a { font-family: "dW Icons", Ook, Verdana, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; font-size: 1.5rem; line-height: 1; text-decoration: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #9ea9b2; text-transform: none; } } @supports not (font-variant-ligatures: common-ligatures) { body &gt; footer a { font-feature-settings: 'liga', 'c2sc'; } }</code></pre> <figcaption>An excerpt from this website's <abbr title="Cascading Style Sheets">CSS</abbr> concerning the footer icons (sans prefixed properties when superfluous)</figcaption> </figure> <p>There are a few notable differences, though. Ligatures need to be enabled for the font to do its thing, so I have set <code>font-variant-ligatures</code> on the entire page. Normally if ligatures aren't supported and <code>@font-face</code> is then users would be presented with a blank footer; that's not good. There are two <code>@supports</code> for this. One detects if ligatures are supported via <code>font-feature-settings</code> and applies the necessary styling to the footer, increasing the font size and changing the font rendering to a simple grayscale where it can. Normally I'm vehemently opposed to using those properties because on regular text it actually reduces legibility by decreasing the resolution of the type. It's not necessary on icons, though. The other <code>@supports</code> enables ligatures via <code>font-feature-settings</code> if <code>font-variant-ligatures</code> isn't supported. In my example the property enables both ligatures and capitals to small caps because elsewhere in the document <code>c2sc</code> is enabled, and <code>font-feature-settings</code> doesn't stack.</p> <hr> <p>Whew. That was a lot to write. The greatest thing about this approach is that the icons in the footer are just text. They're selectable and readable by screen readers, and if ligatures aren't supported it's still just text. My hope is that this will be useful to designers and developers and give them one extra thing in their Web repertoire because that's all it is -- just one more way of doing something. It won't work for all cases, but it's good to know it's there as an option.</p> urn:uuid:946811ae-e886-5b77-85aa-6173c8b28241 Redesigned, Again 2018-03-25T04:12:32+00:00 2018-03-28T01:25:01+00:00 Dustin Wilson https://dustinwilson.com <div> <ins datetime="2020-02-16 03:34:43+00:00"> <p><strong>NOTICE</strong>: If things this page describes does not correspond to what you are seeing it is because this post is referencing a previous version of this website.</p> </ins> </div> <p>It is difficult to write about your own website just like it's difficult to design something for yourself. I've been working on this off and on since about the middle of September of last year, mostly for about an hour here and there when I had time. I originally was just going to redesign and not say anything because mostly the design builds upon the last one just like it did the one before it. However, there are a few changes that are worth mentioning. Here goes nothing.</p> <h2><abbr title="Cascading Style Sheets">CSS</abbr> Grid</h2> <p>No. I didn't use some sort of stupid <em>"grid"</em> layout with classes everywhere a la <a href="https://getbootstrap.com" title="Bootstrap Framework">Bootstrap</a>. I mean the actual <abbr title="Cascading Style Sheets">CSS</abbr> Grid. There's been a lot of talk about it lately. All the major browsers implemented it fairly quickly starting late last year which is great because it simplifies laying out webpages immensely. I started this redesign intent on using <abbr title="Cascading Style Sheets">CSS</abbr> Grid. Learning to use it was the reason why I decided to redesign. I wanted to make better use of space on larger screens. I believe I'm mostly successful with that, but more on that later.</p> <figure> <pre><code>@media screen and (min-width: 71.20999rem) and (min-height: 28.94427rem) { @supports (display: grid) { body { display: grid; grid-template-columns: 16.18034rem calc(100% - 16.18034rem); grid-template-areas: "header main" "footer main"; } body &gt; header { grid-area: header; } main { grid-area: main; } body &gt; footer { grid-area: footer; } } }</code></pre> <figcaption>An excerpt from this website's layout <abbr title="Cascading Style Sheets">CSS</abbr></figcaption> </figure> <p>This is pretty much the core of the layout of this website. When the screen is wide enough it changes from flow layout to grid layout with the header and footer in a sidebar with the rest devoted to content. If <abbr title="Cascading Style Sheets">CSS</abbr> Grid isn't supported traditional flow content continues to be used, thanks to support queries.</p> <h2>Caveats</h2> <p><abbr title="Cascading Style Sheets">CSS</abbr> Grid is very new. In fact it's astounding just how fast browsers have implemented it. The <a href="https://www.w3.org/TR/css-grid-1/" title="CSS Grid Layout Module Level 1">specification</a> is only a candidate recommendation, and yet it's in every major browser.</p> <p>Many people are championing the idea of using <abbr title="Cascading Style Sheets">CSS</abbr> Grid right now because with support queries the layout can progressively enhance -- or as people are calling it today <em>"resilient design"</em>. Support queries aren't the Holy Grail of <abbr title="Cascading Style Sheets">CSS</abbr>. You cannot support query your way around bugs. Safari and Mobile Safari 10.0 have difficulties handling nested grids and have severe redraw issues where a grid from one page will "stick" to another. Both of these issues are already fixed, so they will land in stable versions soon enough. Just be mindful of what you're building, and as always test, test, test.</p> <p>If interested in learning more about <abbr title="Cascading Style Sheets">CSS</abbr> Grid the best content available on that subject would be <a href="http://jensimmons.com" title="Jen Simmons' website">Jen Simmons</a>' brilliant <a href="https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag/videos" title="Layout Land's Youtube Videos">videos</a>. The videos will get you up to speed, and <a href="https://gridbyexample.com/examples/" title="Grid by Example">Grid by Example</a> by <a href="https://rachelandrew.co.uk" title="Rachel Andrew's website">Rachel Andrew</a> will show far more.</p> <h2>Icons</h2> <p>I have for quite some time now had icons in the footer of different social media websites I am on along with email and feeds. They have been an icon font for quite a few years now, and they still are now. I decided initially with this redesign to switch to <abbr title="Scalable Vector Graphics">SVG</abbr> sprites. <abbr title="Scalable Vector Graphics">SVG</abbr> sprites have been typically loaded through JavaScript because why the hell not, right? The JavaScript would through an overengineered system end up pretty much injecting <abbr title="Scalable Vector Graphics">SVG</abbr> symbols into the page, leaving the developer to just include them everywhere in the document via <abbr title="Scalable Vector Graphics">SVG</abbr> <code>use</code> elements. You don't need JavaScript to load icons. The <abbr title="Scalable Vector Graphics">SVG</abbr> symbols can just be put into the document itself and included the same way, but the icons aren't cached separately from the document, leaving them to be downloaded every time the document changes or its cache expires. There is, however, another way; that is by using <code>img</code> elements and sourcing the icons from an external document by their identifier:</p> <figure> <pre><code>&lt;img src="/images/sprites.svg#mastodon" width="24" height="24" alt="Mastodon"&gt;</code></pre> <figcaption>An example of sourcing a <abbr title="Scalable Vector Graphics">SVG</abbr> icon by its identifier</figcaption> </figure> <figure> <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"&gt; &lt;defs&gt; &lt;symbol id="mastodon" viewBox="0 0 24 24"&gt; &lt;path fill="#2b90d9" d="M22.532,14.388c-0.323,1.693-2.896,3.546-5.852,3.905c-1.541,0.187-3.058,0.359-4.676,0.284c-2.646-0.123-4.734-0.643-4.734-0.643c0,0.262,0.016,0.512,0.048,0.745c0.344,2.657,2.589,2.816,4.716,2.89c2.147,0.075,4.058-0.539,4.058-0.539l0.088,1.975c0,0-1.501,0.82-4.176,0.971c-1.475,0.082-3.306-0.038-5.439-0.612C1.939,22.118,1.143,17.1,1.021,12.009C0.984,10.497,1.007,9.072,1.007,7.88c0-5.206,3.352-6.732,3.352-6.732C6.05,0.357,8.95,0.025,11.965,0h0.074c3.015,0.025,5.918,0.357,7.608,1.147c0,0,3.352,1.526,3.352,6.732C22.999,7.88,23.041,11.721,22.532,14.388"/&gt; &lt;path fill="#ffffff" d="M19,8.215v6.304h-2.439V8.401c0-1.29-0.53-1.944-1.59-1.944c-1.172,0-1.759,0.777-1.759,2.312v3.349h-2.424V8.769c0-1.536-0.587-2.312-1.759-2.312c-1.06,0-1.59,0.655-1.59,1.944v6.119H5V8.215c0-1.288,0.32-2.312,0.964-3.07C6.627,4.388,7.496,4,8.575,4c1.248,0,2.193,0.491,2.818,1.474L12,6.517l0.608-1.043C13.232,4.491,14.177,4,15.425,4c1.078,0,1.947,0.388,2.611,1.146C18.68,5.903,19,6.927,19,8.215"/&gt; &lt;/symbol&gt; &lt;/defs&gt; &lt;/svg&gt;</code></pre> <figcaption>An example of a symbol in a standalone <abbr title="Scalable Vector Graphics">SVG</abbr> document</figcaption> </figure> <p>Frankly, I'm quite shocked at how badly that works. Literally every browser has problems with it except for Firefox. If you use anything which must be internally linked such as gradients they won't show in Edge, Safari, or Chrome. It's as if <abbr title="Scalable Vector Graphics">SVG</abbr> sprites linked through <code>img</code> elements were only tested using flat icons in those browsers. I tried looking through WebKit's and Chromium's bug systems, but I can't really make heads or tails of either one. WebKit had a bug similar to this before, but it's labeled as fixed.</p> <p>Needless to say I went back to using an icon font. At least for now that means I must go back to using flat icons. The way I use them and have used them is different from what I've seen before, though. I'll write something on it soon. It would be best to devote an entire post to it.</p> <h2>Use of Space</h2> <p>The previous incarnation of this website -- quite frankly all of them -- didn't use the space on large screens well. I'd just center the content in the middle and keep the lines of text at an appropriate measure. I still do that today but just on blog pages. This is mostly because there is nothing that could be done and have the layout remain dynamic. I use <abbr title="Cascading Style Sheets">CSS</abbr> Grid in this redesign to make content on most of my pages utilize large screens, but because of the shortcomings of <abbr title="Cascading Style Sheets">CSS</abbr> as it is today text remains a single column resident. Print design has this solved. Magazines and newspapers have for centuries now split text up into columns. For the Web there's <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/columns" title="Columns CSS property on MDN"><abbr title="Cascading Style Sheets">CSS</abbr> Columns</a>, and... it sucks.</p> <p>Why does it suck, exactly? Because it doesn't take the behavior of the Web into account at all. The Web isn't like print; it is not static, but <abbr title="Cascading Style Sheets">CSS</abbr> Columns is. I have attempted to use it on this website and elsewhere numerous times, and I have yet to find a use for it that is scalable at all without setting a media query for every single addition or removal of a column. No thanks. Typographically <abbr title="Cascading Style Sheets">CSS</abbr> Columns as they're currently implemented aren't friendly to the reader. Columns don't easily break with the viewport without some considerable work, making the reader scroll on really long columns which defeats the entire purpose of them really. Firefox also for some odd reason refuses to implement <code>column-span</code> and has layout issues with <abbr title="Cascading Style Sheets">CSS</abbr> Columns when doing anything not absolutely basic.</p> <p><abbr title="Cascading Style Sheets">CSS</abbr> Columns is in stark contrast with <abbr title="Cascading Style Sheets">CSS</abbr> Grid. <abbr title="Cascading Style Sheets">CSS</abbr> Grid opens up an entire world of layouts previously impossible or difficult to do and is scalable without resorting to numerous media queries. My hope is that in a future update to <abbr title="Cascading Style Sheets">CSS</abbr> Grid it would allow a way for content to simply flow through columns, virtually creating the effect of <abbr title="Cascading Style Sheets">CSS</abbr> Columns but with the freedom <abbr title="Cascading Style Sheets">CSS</abbr> Grid allows. Ultimately, when laying out just about anything a designer does establish their grid and then the columns of text reside in that grid; the Web should work the same way except with the added benefit of fluid and responsive layouts. Grid and multi column text should not be entirely separate.</p> <h2>Feeds</h2> <p>I've long provided news feeds for my blog. In the modern world of social media feeds seem like a vestige of a bygone era on the Web. It seems that few people use them anymore. My guess is that it is mostly because good software to read them has been nonexistent especially since Google destroyed independent feed readers with Google Reader and then subsequently shut the service down. Jeff King and I are <a href="https://thearsse.com" title="The Arsse">trying to mitigate the problem</a>. Playing my part in the development of The Arsse, I decided I would work on a script to generate test feeds for our work-in-progress feed parser, <a href="https://code.mensbeam.com/MensBeam/lax" title="Lax">Lax</a>. The first iteration of that script became a script to generate the feeds for this website, one in <a href="https://tools.ietf.org/html/rfc4287" title="The Atom Syndication Format 1.0 Specification">Atom 1.0</a> and another in <a href="https://jsonfeed.org/version/1" title="The JSON Feed 1.0 Specification"><abbr title="JavaScript Object Notation">JSON</abbr> Feed 1.0</a>. I haven't provided a feed in vanilla <abbr title="Really Simple Syndication">RSS</abbr> in quite a long time now, and I don't plan on ever doing so again. Atom is a vastly superior format. Both Atom and <abbr title="Really Simple Syndication">RSS</abbr> can be entertwined into a Frankenstein-like feed format which gives people like us difficulties in writing a feed parser. I won't be doing that, either.</p> <p>Adding to news feeds' feeling of being of an earlier time is the fact they're <abbr title="Extensible Markup Language">XML</abbr>. It's neither fashionable nor economical these days to use <abbr title="Extensible Markup Language">XML</abbr> for a data interchange format, so it is indeed surprising it has taken this long for a <abbr title="JavaScript Object Notation">JSON</abbr>-based format to surface. After writing a feed generator of my own thus far I find <abbr title="JavaScript Object Notation">JSON</abbr> Feed an odd format. Its specification is ambiguous in spots where it shouldn't be<sup><a href="#fn1-1">1</a></sup>, and it looks by the <a href="https://github.com/brentsimmons/JSONFeed/issues" title="JSON Feed's Issue Tracker on GitHub">activity on its GitHub page</a> that it's effectively abandoned as questions haven't been answered since August of last year. Personally if making a <abbr title="JavaScript Object Notation">JSON</abbr>-based feed format I would have just translated Atom to <abbr title="JavaScript Object Notation">JSON</abbr> along with a few of the things <abbr title="JavaScript Object Notation">JSON</abbr> Feed adds which are relevant to new technologies available in today's Web. Atom has years of work put into it, and a lot of the ambiguousness of <abbr title="JavaScript Object Notation">JSON</abbr> Feed is solved already in Atom through iterative improvements over the years. Hopefully the current maintainers open it up to contribution by new people or someone comes by and creates an Atom to <abbr title="JavaScript Object Notation">JSON</abbr> Feed's <abbr title="Really Simple Syndication">RSS</abbr>.</p> <p>Despite the lethargicness of the maintainers of the format I am going to keep serving the <abbr title="JavaScript Object Notation">JSON</abbr> Feed. If I weren't helping write a feed parser for a feed aggregator I probably wouldn't even bother, though. Links to both of my feeds can be found on the <a href="https://dustinwilson.com/feeds/" title="dW: Feeds">Feeds</a> page.</p> <h2>The Road Ahead</h2> <p>For a post where I initially stated that it's difficult to write about my own website I have written quite a few words. Actually, it has taken me a couple of weeks to string this together in-between life and frequent hole plugging in the dam.</p> <p>I'm fairly happy with the outcome. If being self-critical of my design I'd like to work in the future on white space. My wide screen layouts mostly use the space up, but because of <abbr title="Cascading Style Sheets">CSS</abbr> Grid I can move things around as I like and create interesting uses of white space previously only possible in print or with JavaScript on the Web. There's likely bugs that still remain. I've spent my 30 minutes to an hour of time here and there lately mostly picking nits. I can fix the rest as I go instead.</p> <p>My hope here is to resume writing about the Web as I used to do. I know I've said that before, and it remains to be seen if I'll keep my word this time. However, the Web is under attack by giant corporations who control vast amounts of it, by governments who have disdain for those who use it to question their authority, and by developers themselves who build garbage websites and Web apps by ignoring Web standards and then complain about it. These reasons have given me a resolve to crack open my text editor and use it from time to time for writing about Web stuff, about my artwork and projects, and perhaps a bit of coding.</p> <section> <p>Edits</p> <p><time datetime="2018-03-27 20:25:01-05:00">2018-03-27</time> Removed reference to a Safari bug which doesn't show itself in a slightly modified design updated a few days after publication.</p> </section> <footer> <hr> <ol> <li>Starting with whether to call it "<abbr title="JavaScript Object Notation">JSON</abbr> Feed" or "<abbr title="JavaScript Object Notation">JSON</abbr>Feed". I am going to call it the former because combining an acronym with a capitalized word is ridiculous. <a href="#fnr1-1" title="Jump back to footnote 1-1 in the text.">↩︎</a></li> </ol> </footer> urn:uuid:fb05ff3b-981b-525d-b5fb-cb1be96cd2e3 Couture Tee Company 2017-12-15T04:47:57+00:00 2018-04-04T01:47:03+00:00 Dustin Wilson https://dustinwilson.com <p>The past few months I've been busy on a <a href="https://dustinwilson.com/blog/the_arsse/" title="dW: The Arsse">personal project</a>, but I've also been busy on other things, namely working for a new client doing quite a bit of illustration work. While work is ongoing a few of my illustrations printed on t-shirts have been released.</p> <p><a href="https://coutureteecompany.com" title="Couture Tee Company">Couture Tee Company</a> sells t-shirts all across the United States but is mostly known around the Southern <abbr title="United States">U.S.</abbr> with its <a href="https://coutureteecompany.com/category_s/100.htm" title="Southern Couture">Southern Couture</a> and <a href="https://coutureteecompany.com/category_s/109.htm" title="Lightheart">Lightheart</a> lines. They are one of the biggest in the country, and they are headquartered in North Louisiana where I live. Most of their products are geared toward a female-oriented market, but they have a male line they are trying to promote now called <a href="https://coutureteecompany.com/PRIORITY_s/96.htm" title="Priority">Priority</a>. Most of the work I'm going to be showing now comes from this line, but I've done a fair amount of work for the other two so far. They have new releases periodically around the year, and these have actually been out for a few months now. I plan on showing more here as work I've done gets released.</p> <h2>Screen Printing</h2> <p>I grew up with screen printing. My parents in addition to many other things had a screen printing venture they started when I was very little. My brother ended up taking over the screen printing business, and I worked for him for over a decade while doing Web work on the side. I then left to <a href="https://dustinwilson.com/blog/opera_15/" title="dW: Opera 15">pursue other things</a>. That didn't last long; my brother passed away last year; and now I'm back to screen printing with someone else. I never thought I'd be doing that again, but here I am.</p> <p>Illustrating for t-shirts is unique because of the screen printing process itself. Most forms of printing involve four color process printing with <abbr title="Cyan, Magenta, Yellow, and Key (Black)">CMYK</abbr>.<sup><a href="#fn1-1">1</a></sup> While you can use <abbr title="Cyan, Magenta, Yellow, and Key (Black)">CMYK</abbr> when screen printing, screen printing usually does things differently. It is usually used to print on colored garments, and therefore a white must be printed first before printing anything on top of it; that white is what is called a spot color. Typically in conventional offset printing spot colors are only used for effects such as fluorescent colors or metallics and usually never with any sort of halftoning. This isn't the case with screen printing because every color is chosen based upon the needs of the artwork and not based upon a pre-determined printing process. Most people do not have a clue just how difficult it is to print a t-shirt they buy, especially one with any sort of detailed artwork on it with colors that blend together. A screen is made for each individual color which involves a lot of labor to get the image on the screen, and separating the colors is a manual process because as mentioned before it's not a pre-determined printing process like <abbr title="Cyan, Magenta, Yellow, and Key (Black)">CMYK</abbr>. Computers are only going to get you so far. You must have a firm grasp on color theory along with the behavior of the inks being used. This is why most screen printed artwork is vector because separations can be created simply. For raster images most don't even try outside of simple things. During the several years I worked for my brother I developed a way to do complex spot color separations even on detailed painted illustrations, provided there's enough heads on the press for the colors. For the work I do here there is typically no more than seven; the cost goes up the more colors are used.</p> <figure><img src="https://dustinwilson.com/images/blog/couture_tee_company/tranquil_beach-l.jpg" width="1262" height="1413" alt="Tranquil Beach"><img src="https://dustinwilson.com/images/blog/couture_tee_company/stay_wild-l.jpg" width="1262" height="1413" alt="Stay Wild"><img src="https://dustinwilson.com/images/blog/couture_tee_company/classic_car-l.jpg" width="1262" height="1413" alt="Classic Car"><img src="https://dustinwilson.com/images/blog/couture_tee_company/gulls_just_want_to_have_fun-l.jpg" width="1262" height="1413" alt="Gulls Just Want To Have Fun"><img src="https://dustinwilson.com/images/blog/couture_tee_company/saltwater_fish-l.jpg" width="1262" height="1413" alt="Saltwater Fish"><img src="https://dustinwilson.com/images/blog/couture_tee_company/turkey-l.jpg" width="1262" height="1413" alt="Turkey"><img src="https://dustinwilson.com/images/blog/couture_tee_company/baseball-l.jpg" width="1262" height="1413" alt="Baseball"><img src="https://dustinwilson.com/images/blog/couture_tee_company/catch_of_the_day-l.jpg" width="1262" height="1413" alt="Catch of the Day"><img src="https://dustinwilson.com/images/blog/couture_tee_company/deer_stand-l.jpg" width="1262" height="1413" alt="Deer Stand"><img src="https://dustinwilson.com/images/blog/couture_tee_company/cotton_fleur_de_lis-l.jpg" width="1262" height="1413" alt="Cotton Fleur de Lis"><img src="https://dustinwilson.com/images/blog/couture_tee_company/dog_and_duck-l.jpg" width="1262" height="1413" alt="Dog and Duck"><img src="https://dustinwilson.com/images/blog/couture_tee_company/steamboat-l.jpg" width="1262" height="1413" alt="Steamboat"></figure> <h2>The Future</h2> <p>I plan on having new regular releases for a while. They give me quite a bit of freedom on many of them, so I've even had some opportunities to try out a few things I have not printed before. I'll be adding more here as new ones are released -- hopefully quicker than I did on this initial posting. I also hope to eventually have a crack at their website; it could use some work.</p> <section> <p>Edits</p> <ol> <li><time datetime="2020-02-15 21:34:43-06:00">2020-02-15</time> Added <em>"Gulls Just Want to Have Fun"</em>, <em>"Classic Car"</em>, <em>"Stay Wild"</em>, and <em>"Tranquil Beach"</em>.</li> <li><time datetime="2018-04-03 20:47:03-05:00">2018-04-03</time> Added <em>"Steamboat"</em>.</li> <li><time datetime="2018-01-12 22:38:35-06:00">2018-01-12</time> Added <em>"Dog &amp; Duck"</em>.</li> </ol> </section> <footer> <hr> <ol> <li>I described <abbr title="Cyan, Magenta, Yellow, and Key (Black)">CMYK</abbr> before when I wrote about <a href="https://dustinwilson.com/blog/color_modes/#cmyk" title="dW: Color Modes">Color Modes</a>. Many of the descriptions such as halftones are relevant to what is written about here. <a href="#fnr1-1" title="Jump back to footnote 1-1 in the text.">↩︎</a></li> </ol> </footer> urn:uuid:70702546-920d-509d-9925-fd25a4ff6225 The Arsse 2017-09-10T20:13:44+00:00 2017-09-16T17:23:52+00:00 Dustin Wilson https://dustinwilson.com <p><em>"The... what?"</em> Yeah. You read that correctly. <a href="https://thearsse.com" title="The Arsse">The Arsse</a> is a project <a href="https://jkingweb.ca" title="J. King's Web Hub">Jeff King</a> and I have been working on. It is an <abbr title="Really Simple Syndication">RSS</abbr> aggregator -- in other words a means to self-host <abbr title="Really Simple Syndication">RSS</abbr> feeds on your server. If anyone is familiar with <a href="https://tt-rss.org" title="Tiny Tiny RSS">Tiny Tiny <abbr title="Really Simple Syndication">RSS</abbr></a> The Arsse is quite like the aggregator part of it. In fact, Tiny Tiny <abbr title="Really Simple Syndication">RSS</abbr> is why The Arsse exists in the first place.</p> <h2>Origins</h2> <p>Both Jeff and I run our own private servers, and we have for quite a few years now. We have <abbr title="Hypertext Transfer Protocol">HTTP</abbr>, mail, <abbr title="Extensible Messaging and Presence Protocol">XMPP</abbr>, and a bunch of other things running on our servers. The time came one day when he decided to put an <abbr title="Really Simple Syndication">RSS</abbr> aggregator on his server. I usually just let him explore like that because he'll figure it all out and then tell me how to do it. It's a great working relationship -- one beneficial to me in any case.</p> <p>In his research he ran across Tiny Tiny <abbr title="Really Simple Syndication">RSS</abbr> and seemed to like it. It had one caveat, however: it wouldn't run with <a href="https://sqlite.org" title="SQLite"><span>SQLite</span></a>. We just need the software for one, maybe two users on our servers. Running an entire instance of <a href="https://www.postgresql.org" title="PostgreSQL">P​<span>ostgreSQL</span></a> or <a href="https://www.mysql.com" title="MySQL">M​<span>ySQL</span></a> is wasteful especially when it's used for absolutely nothing else but storing a couple of feeds. It's the software equivalent of buying an 18-wheeler to go grocery shopping. After digging around on the community forums he discovered that they had no intention of supporting <span>SQLite</span>. His thoughts were that it couldn't be that difficult to implement it, so he went about it.</p> <p>After a bit he had a <a href="https://tt-rss.org/oldforum/viewtopic.php?f=10&amp;t=3902&amp;p=23001" title="Jeff's question to Tiny Tiny RSS">few questions to ask</a>. The responses were antagonistic to say the least. All he wanted to do was add in support for <abbr title="Structured Query Language">SQL</abbr>ite and was perfectly willing to do the work himself; all he got in return were jeers and insults. Immediately after the first response I was telling him, "Let's just write one ourselves. You've been saying you want a coding project to work on; this is it." He persisted because he was willing to prove to the asshole he'd do it. After digging into Tiny Tiny <abbr title="Really Simple Syndication">RSS</abbr>' code he realized he really was wasting his time as its code is a rat's nest of a mess. He decided to go my route, and we now have something to show.</p> <p>Okay, okay. That's all fine and dandy, but why <em>"The Arsse"</em>? We both have a mutual friend that goes way back to our times of trying and failing to do an online webcomic around the turn of the century; we come to him anytime we need to name something. He just has a knack for this kind of thing. He's also now a doctor (no he's not a proctologist). Our intention was just to use something funny as the working title for the project and rename it later. The renaming part never happened. Originally it was just "Arsse" and was an acronym for something I forget now and doesn't really matter anymore. The article before it was added quite recently. Good thing, too. When we looked to get the domain for it <a href="https://thearsse.com" title="The Arsse">thearsse.com</a> was available but oddly enough arsse.com wasn't.</p> <h2>The Website</h2> <figure> <img src="https://dustinwilson.com/images/blog/the_arsse/the_arsse.png" srcset="/images/blog/the_arsse/the_arsse.png 1x, /images/blog/the_arsse/the_arsse@2.png 2x" width="1173" height="1250" alt=""> <figcaption>The Arsse's website</figcaption> </figure> <p>The Arsse's website was designed by me and is a simple one-pager. I thought since there wasn't a lot of content yet to put up there I would have a bit of fun with it by fashioning a large vintage-looking logo in <abbr title="Scalable Vector Graphics">SVG</abbr>. I tried to make it look like a late 1950's or early 1960's detergent packaging. To make it show that it is for an <abbr title="Really Simple Syndication">RSS</abbr> server I put a subtle emphasis on the <abbr title="Really Simple Syndication">RSS</abbr> part of "Arsse" by using a centerline just on those letters. Seeing as the name of the product evokes something unpleasant, the design would have a bigger pop by showing just the opposite: cleanliness.</p> <p>Design from that era liked diagonals as a means to draw attention, so I decided to use them as dividers between the different sections. It is a bit tricky to create such a thing in <abbr title="Cascading Style Sheets">CSS</abbr>, so I thought I'd show it here. The effect is done by using a pseudo-element, absolute positioning, and a bit of geometry. The example below is <span>SCSS</span>, but it's possible to do it manually with <abbr title="Cascading Style Sheets">CSS</abbr>. I just wanted my code to be resuable.</p> <figure> <pre><code>@mixin divider($angle: 1deg) { position: relative; z-index: 1; &amp;::before { position: absolute; display: block; background-color: inherit; content: ''; bottom: 0; @if $angle &gt; 0 { // slope = tan(angle) // y2 = slope * (x2 - x1) + y1 top: 0 - tan($angle) * 100vw; } @else { top: 0; } left: 0; right: 0; z-index: -1; transform-origin: top left; transform: skewY($angle); width: 100%; height: 100%; } }</code></pre> <figcaption>A <span>SCSS</span> mixin for the angled dividers on thearsse.com</figcaption> </figure> <p>What is going on here is when the angle is positive the skewing of the pseudo-element causes it to appear further down than it should be -- exactly the height of the skew. If you think of it as a right triangle with the hypotenuse's being the angled line, what we'd need to find is the height of the vertical leg so it can be moved upwards exactly that distance:</p> <figure> <img src="https://dustinwilson.com/images/blog/the_arsse/triangle.png" srcset="/images/blog/the_arsse/triangle.png 1x, /images/blog/the_arsse/triangle@2.png 2x" width="1173" height="200" alt=""> <figcaption>The "triangle" formed by the skewing of the divider pseudo-element</figcaption> </figure> <p>I have the angle because that is used in the transform itself, and if I set the origin at the top left point of the triangle the x coordinate of the one on the other side of the hypotenuse would be the width of the document. The width of the document isn't constant, so the amount the divider needs to be moved upward is relative to the width of the viewport. There's a <abbr title="Cascading Style Sheets">CSS</abbr> unit for that: <code>vw</code>. If you treat the top left point as <code>(0, 0)</code> and the right point's x-coordinate as <code>100</code> (for <code>100vw</code>) then calculating the vertical is easy... except <span>SCSS</span> doesn't have trig functions. I use <a href="https://github.com/sass/node-sass" title="Node.js bindings to libsass">node-sass</a>, so creating the <code>tan</code> custom function wasn't difficult.</p> <h3>What's Next?</h3> <p>Right now The Arsse is at a very early stage. Jeff is quite prolific with testing, so what is there works really well. The idea from the beginning was to make The Arsse compatible with multiple <abbr title="Application Programming Interface">API</abbr>s. We needed to pick one to implement first. Tiny Tiny <abbr title="Really Simple Syndication">RSS</abbr> would seem like the logical choice considering they were the reason this software exists in the first place, but the <abbr title="Application Programming Interface">API</abbr> is badly documented (and designed... for another day). After a bit of discussion we implemented <a href="https://github.com/nextcloud/news" title="Nextcloud News">NextCloud News</a> 1.2 first. Tiny Tiny <abbr title="Really Simple Syndication">RSS</abbr>' <abbr title="Application Programming Interface">API</abbr> is next, though.</p> <p>Since The Arsse is just an aggregator a web client at the very least is necessary. That's on the drawing board, too. I am designing it out while discussing with Jeff how we should construct it. When there is more to show I'll post here.</p> <hr> <p>Please take a look at The Arsse at <a href="https://thearsse.com" title="The Arsse">its website</a> and if interested look at its code and contribute on <a href="https://code.mensbeam.com/MensBeam/arsse" title="The Arsse's respository">our Gitea</a>.</p>