phoenix down

yesterday was my learn something day at work, which is the monthly day where i get to focus on learning something because i work at a good place and am very lucky except rather than doing what i think i'm intended to do, which is to take it as a kind of restful and gentle day of comfortable study, i pinned myself to this completely self-imposed idea that i was going to end the day with a perfectly polished deliverable and if i did not do that then what was even the fucking point

i'm thankful for the flow state of working on a project, of the certainty and comfort in knowing that i can do a thing and it will work, it's not fear of the unknown, but of how long to get through the unknown, how many different walls i'm going to have to knock down or climb over or go around to get to the eventual implementation and how long that journey will be then it is dark outside and i am coming back for more after dinner while d plays video games and i can be so bad at having a healthy relationship with it, which is something i need to be conscious of and protect myself from even though i also need to harness it

the project was email headers, which we get a very dry plaintext version of and have to limn meaning from, and so i thought i'd build a bookmarklet that structures and enriches that data and displays it within our app as an aide to what is often an intimidating task, and so during my last learn something day, i had written the code that extracts the big block of headers from the app (where it is nested within two levels of iframes) and parses them into data and wipes out the frame containing the headers and renders them in more readable fashion

and so i had been thinking about that coming up and trying to decide what i could do to make the project more like learning and so originally i looked into experimenting with this framework svelte, but as i was reading their onboarding materials i kept thinking that the choices that were made were ugly (though i also felt that way about syntax constructs that i now love, so who knows) and thought i would just rather work in react and so then i switched to learning about our company's design system and the idea of using that in the project being the big "learning" component

but to get to the point to where i could start to use the design system in the bookmarklet and "learning," i had to work around the limitations of bookmarklets as a form, since they're limited to the amount of characters that you can put in a link and i'd exceed that just adding the dependencies for the framework before getting to my code at all, and the classic way you get around this is by storing the bulk of your code somewhere else and just using the bookmarklet as a vessel to request and embed that external file full of code, no limits

except the heyday of the bookmarklet was before the days of content security policies, which are special locks that on certain pages prevent you from making requests except to a whitelisted set of domains, which is a smart security policy, and you can get around it with a chrome extension, but i like the ephemerality and casualness of a bookmarklet instead of making the value claim that you should install this thing and it's going to be a platform that's iterated on

so i found a workaround for the content security policy, which was to store my code in a knowledge base app we provide and because the API for that was a whitelisted domain, i could store my code bundle there, pull it in, and run it, and i did a small proof of concept for this with some hello world code (or, rather alert("hey") code) and it worked, 

so i then went through getting a local development setup with babel and webpack going, telling myself that i should make a copy of it to use as boilerplate for myself in the future but instead finding that i do it from scratch each time and do it a little better, and so i got all my dependencies installed for react and the design system and successfully rendered a component and built the bundle and then opened the knowledge base app, created a new knowledge base, and used the html editor button on an article to paste the 1.2mb bundle of unoptimized code i had and saved it and then i wrote the code for the bookmarklet shell to pull it in and render it in the iframe and

it didn't work because the html editor translated & into & which fucked everything up when i tried to interpret the code in the bookmarklet and so then i first tried hand editing the machine transpiled bundle which is a ludicrous idea and so i had the idea that if i could use the API to upload a file directly to the article, it wouldn't get parsed into & and so then i figured out how to write a node script to make a multipart request containing a file and that was working the way it was supposed to except not in the way the API did, so then i wondered if just using the standard JSON API would still be enough to get over the encoding issue 

and it was and so i found a webpack plugin that would run a node script after my code was transpiling and so then used the node script to automatically make a call to the API to update the article text with the bundled code and then i tested the bookmarklet to pull it through into the iframe and it totally worked, the component rendered, except it lost all of the styling which was the whole reason i was using the design system for some reason i still don't totally understand but think had something to do with the nested iframes and by this point it was like 1pm and i had been working since 8 and really needed to eat lunch but i didn't want to eat lunch until i "got to a stopping point" and

so i decided that maybe i was too harsh on the chrome extension and that would be the best vessel for the idea, or at this point the only vessel, so i got my design system and react stuff into the chrome extension shell i've been using at work and it was rendering and so then i stopped and shoved food into my mouth and read pandemic updates on the new york times app and then 

when i went back to it, i found that even with the chrome extension, which meant that the hacky shit i had done earlier in the day to get the bundle in an accessible place was totally unnecessary, the hard thing i still needed to do wasn't working right because, i was sure, of this nested iframe complexity and again, this was the core of what i had decided the day would be,

so then i pivoted to just building a standalone app on a page on the knowledge base site with the design system and first i had to figure out how to reset and wipe out all of the standard stylesheets and stuff embedded in the knowledge base app and make everything disappear except my app and i got that and i started roughing out the component structure and quickly built out a form with a textarea where you could paste the block of raw header and submit it and then set up some state and effect hooks and then i added an accordion to hold different subsets of the headers and added some categorization data to the header parser so that it could be divided into the different subsets and then i started experimenting with different card components for storing each header name and value and trying to get something that looked decent and then was thinking about how i wanted to enrich the data in addition to making it more readable by adding tooltips with descriptions of what each header is and represents and also links to searches for the header names and to custom searches in our logging app

and that was going really well for a while except i started to want to use an icon component for a button and it seemed like getting the icon component to render was really simple and it was rendering a chunk of something but the svg icon wasn't in it and i then tried looking in the storybook implementation examples and the readme in the repo and was trying these different provider components which seemed potentially necessary but just could not figure it out

and so then i pivoted to using just emojis instead of icons, which is a UI compromise i have made before, but which looked worse in the context of these design system components that all had a kind of gestalt and i just couldn't bear the dissonance and so i tried to figure out how i could create something that looked decent without the icon

and then i went on a very short run that started later than i had planned because of my absorption in the project and we had dinner and then watched a few episodes of the wire and then i encouraged d to play final fantasy so i could open my laptop in the dark and at this point my eyes were really struggling to continue to look at the computer screen and try to make things a little better and write the bookmarklet code that copies the headers and opens the site

and that was my day where at the end i felt shitty and like i did not accomplish or learn anything so it's nice to write it out and feel like maybe i actually did both (and always, in the back of my mind, i'm iterating and thinking of new was around the walls i hit before, even though sometimes i really wish i was better at turning it off), but i felt like shit about it, which is such a privilege, and then this morning when i still felt like shit i took a mental health day, and i'm thankful that i am able to do that, even though i didn't enjoy it as much as i thought i would, but i did do a lot of cleaning which is an activity that's involving for me and that puts me in a better headspace going forward, the impact of the absence of clutter

i'm thankful even though last time i got my antidepressants refilled through text chat, they said that the next time i would have to get them refilled in person, i did text chat again and asked if that was still true or if things had changed and the chat person very pointedly said to me "so you're saying you can't come in because of the pandemic?" like wink wink, i was not saying that at all, but thank you for giving me the password you needed to hear and anyway i'm thankful for continued access to my antidepressants because god knows i need them!