[{"type":"blog","frontmatter":{"title":"on gambling","date":"2026-06-19T00:00:00.000Z","category":"note diy technical","tags":"investing money silicon photonics market research","description":"Ketchup bottle moment"},"issueNumber":234,"slug":"on-gambling","title":"on gambling","description":"Ketchup bottle moment ","content":"\nFirst things first, I think the proliferation of gambling ads in public life is one of the more visible signs of the deep moral rot our society is currently experiencing. There are zero good reasons sports leagues should be official partners of gambling platforms. It damages the integrity of the game. The NBA already had a huge deal about this with the Tim Donaghy situation... and somehow Scott Foster is still reffing games in 2026? Make it make sense. It's even worse when the broadcast platforms are also partners with the gambling firms. I don't need talking heads shouting about money lines during timeouts and halftime. It's so incredibly annoying! Prediction markets somehow feel even less regulated than crypto. It is my opinion that it is entirely too easy to place a bet these days.\n\nDon't take this to mean I am anti-gambling. I grew up in Las Vegas, I understand the highs and lows that gambling can provide. All I'm saying is that gambling should be regulated and confined to designated spaces -- casinos and brokerages! After all, what is the biggest casino of them all? The stock market. Personally, I love to gamble on interesting pre-revenue companies. Sometimes it pans out, sometimes it doesn't. You have to understand the risk you are taking with any investment position. \n\nThis time, I think I've found a real gem ($LWLG) and I wanted to share my research in an easily scannable format. I built [Ketchup Bottle Moment](https://ketchupbottlemoment.com/) to be that resource. It explains my investment thesis with publicly available facts and figures. No investment is an absolute sure thing, but I have a good feeling about this one 😎 ","date":"2026-06-19T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/234","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/234/comments","title":"Ketchup Bottle Moment","created_at":"2026-06-20T00:11:47Z","updated_at":"2026-08-07T01:18:49Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/234/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"note diy technical","tags":["investing money silicon photonics market research"],"readingTime":"2 minutes"},{"type":"blog","frontmatter":{"title":"all systems go","date":"2026-06-15T00:00:00.000Z","category":"note technical diy","tags":"hyzer business entrepreneurship","description":"marking the public launch of my technical consultancy"},"issueNumber":233,"slug":"all-systems-go","title":"all systems go","description":"marking the public launch of my technical consultancy ","content":"\nToday I revealed the secret teased in [my last post](/getting-down-to-business), and officially announced my independent technical consultancy, [Hyzer](https://hyzer.sh)!\n\nFor the past year, I've been freelancing for a few agency and startup clients, solving a variety of problems in a range of tech stacks. \n\nQuick highlight list:\n- Linked up with the fine folks at [two things](https://twothings.co) and delivered multiple Svelte and Swift prototypes for EA Sports. One was tested via a focus group of 40 people and had a strong positive reception.\n- Several hits working with the wonderful team at [WLCR](https://wlcr.io). \n - Contributed heavily to [Later.com](https://later.com)'s rebrand, including the main [Made You Look](https://later.com/made-you-look) campaign landing page for their SXSW event launch.\n - Headless B2B Shopify work for [Coast](https://b2b.coastportland.com/), extending their existing D2C store to support B2B customers in different regional markets.\n - Built the realtime direct messaging system for [RallyCrew](https://app.rallycrew.com), the social media app for kayakers and water sport enthusiasts.\n- Extracted a design system from an existing giant Rails monolith with lots of subtle inconsistencies.\n- All manner of feature requests for the above & more.\n\nThrough all of last year's engagements, I was testing my pitch, rates, client selection and billing cadences, finding some things worked smoother than others. After a year, I think I've found some sweet spots for myself, how I best like to work and deliver, and the value I can bring to any team.\n\nBiggest lesson, hourly billing is a losing man's game. For engineering, it only works up to a point, and with speed-to-delivery compressing thanks to advances with LLMs and related tooling, it's an unsustainable race to the bottom. Like I said on my site -- AI can one shot a mockup today. Where does that leave the rest of us? \n\nWell, I believe my value comes from my unique perspective and hard-won experience. I have delivered exceptional digital experiences for clients at all scales in my decade-plus career. I've shipped work to production for big tech companies, government agencies, charities, non-profits, sports teams, media companies, universities, retailers, startups, and everything in between. Everyone has _some_ war stories, but I also have a history of successful launches and rave reviews.\n\nMost importantly, I'm allergic to jank. I know what looks good, works accessibly, and how to make an experience sizzle no matter the screen it's being viewed on.\n\nIf you or your team have a problem you're stuck on, want an idea to go from 0->1 quickly and elegantly, or simply need some extra engineering firepower for a couple of sprints, don't hesitate to [reach out](mailto:tanner@hyzer.sh).\n\nI'm excited to see what the next year brings.","date":"2026-06-15T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/233","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/233/comments","title":"all systems go","created_at":"2026-06-16T06:20:45Z","updated_at":"2026-06-19T23:55:08Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/233/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"note technical diy","tags":["hyzer business entrepreneurship"],"readingTime":"2 minutes"},{"type":"blog","frontmatter":{"title":"getting down to business","date":"2025-11-26T00:00:00.000Z","category":"note","tags":"technical personal hyzer business development","description":""},"issueNumber":230,"slug":"getting-down-to-business","title":"getting down to business","description":"","content":"\nwhen my contract working for the VA ended in may, i took a week to regroup and then basically immediately jumped back into freelancing while looking for the right long-term fit. it turns out i kind of like a lot of aspects of being a freelancer. so i decided to lean in. \n\nthe process has been kind of messy, but i'm slowly figuring it out. i've been lucky to have a couple of steady clients for these initial months to really ease most of my concerns during this phase. it certainly made it a lot easier to warm up to the idea of striking out on my own.\n\n\nhere are the rough steps i've taken to start my freelance business:\n\n0. have lunch with a friend to pick their brain about starting a business \n1. register a LLC with the state. member managed as the sole member. in oregon, this was pretty simple, and cost $100.\n2. apply for a EIN with the IRS\n3. open business bank accounts + credit card. the EIN is helpful here.\n4. buy domain, set up very basic landing page\n5. google workspace for business email\n6. sign up for healthcare via healthcare.gov\n7. create invoice template + basic accounting spreadsheet\n\n\nwhen the landing page is a little more polished i'll make a more official announcement. \n\nin the meantime, i am available for full stack software development and consulting including but not limited to creative prototyping, design systems engineering, systems design and architecture, devops, developer experience and tooling, a11y issues, vibe code triaging, etc.","date":"2025-11-26T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/230","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/230/comments","title":"getting down to business","created_at":"2025-11-26T18:16:44Z","updated_at":"2025-11-26T18:17:33Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/230/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"note","tags":["technical personal hyzer business development"],"readingTime":"2 minutes"},{"type":"blog","frontmatter":{"title":"fig season","date":"2025-08-01T00:00:00.000Z","category":"recipe","tags":"galette bumper crop sugar jam jelly fig newtons","description":"figs are friggin great"},"issueNumber":225,"slug":"fig-season","title":"fig season","description":"figs are friggin great ","content":"\nMy fig tree generally gives two crops a year, and this year that first one was a huge bumper crop. So I spent the last week using all the figs. I gathered two large bowls without even breaking out the ladder. One bowl was around 9-10lbs of figs... And the second crop should be ready in the fall! I am rich with figs (though not Figma, as I couldn't get IPO shares. Ah well, _c'est la vie_).\n\nI set aside a portion of good-looking smaller figs, to eat as breakfast (mashed on toast with chevre & honey) and for use in this recipe for [chicken thighs with figs](https://www.everylastbite.com/balsamic-chicken-figs/).\n\nI stemmed, quartered and dehydrated a full batch in the dehydrator, ~6 hours at 135F. Then I put these in the food processor with a couple fresh figs, some honey, and some lemon juice to make the filling for fig newtons. I followed [this recipe](https://www.seriouseats.com/homemade-fig-newtons-recipe) for the filling & the dough, they turned out pretty well! The only thing I changed was I didn't use orange zest, because I'm lazy and didn't have oranges.\n\nThe bulk of the figs went towards jam. I made two batches using [this recipe](https://www.foodandwine.com/recipes/fig-jam), one with rosemary added. Amazingly decadent. This gave me about ~125oz of jam, or 8 mason jars worth.\n\nI made a couple [fig galettes](https://www.simplyrecipes.com/recipes/fig_galette/) as well, very simple with frozen puff pastry from the store. Let it thaw, spread some chevre & fig jam, top with quartered figs, fold the edges & bake for 45min @ 375. super easy and delicious.\n\nSomewhat surprisingly, my favorite dish was a [fig and prosciutto pizza](https://www.foodnetwork.com/recipes/ree-drummond/fig-prosciutto-pizza-with-arugula-recipe-1925521), which was an interesting departure from the pizza I normally make, using fig jam as the sauce base. The prosciutto fig pairing is such a classic, and the saltiness works so well with the sweetness from the jam and fresh figs.\n\nI feel bad for people who decide not to eat figs because they're squeamish about the wasps or whatever. Figs are so friggin good.","date":"2025-08-01T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/225","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/225/comments","title":"fig season","created_at":"2025-08-01T17:11:52Z","updated_at":"2025-08-01T17:19:45Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/225/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"recipe","tags":["galette bumper crop sugar jam jelly fig newtons"],"readingTime":"2 minutes"},{"type":"blog","frontmatter":{"title":"2025 site updates","date":"2025-07-05T00:00:00.000Z","category":"technical","tags":"sveltekit tailwind heffner.dev update css density tokens","description":"goodbye tailwind, hello svelte5"},"issueNumber":218,"slug":"2025-site-updates","title":"2025 site updates","description":"goodbye tailwind, hello svelte5 ","content":"\ntl;dr: I ripped out tailwind, updated to svelte 5 everywhere, pruned the dependency list, fixed some bugs, and gave the site a little facelift.\n\nI originally [chose to use tailwind](https://www.heffner.dev/heffdotdev-technical-details) because I had never used it at work and wanted to give it a fair shake. Three years later I think that I have. I don't want to use it on this site any longer. It's a perfectly fine framework, and probably has a lot of uses on professional teams that don't have strong css skills... but seeing as how I don't use it in my day job, having to regularly look up the classes every time made working on this site feel like more of a burden than anything else. And that's against my entire goal! This site should be as frictionless as possible for me.\n\nSo, I ripped out probably 90% of my existing stylesheets and associated markup and redesigned the site from the ground up. New tokens, a new type scale, and modern css features. With ~60 lines of css, I have the foundations for my entire site.\n\nHere is that foundation:\n```css\n/* set up global css vars & fonts */\n:root {\n --c-accent: oklch(57.057% 0.21474 14.568);\n --c-accent-brighter: oklch(from var(--c-accent) l c h / calc(alpha - 0.75));\n --c-secondary: oklch(48.821% 0.21724 264.392);\n --c-secondary-brighter: oklch(from var(--c-secondary) l c h / calc(alpha - 0.75));\n --c-text: oklch(27.9% 0.041 260.031);\n --c-background: oklch(96.8% 0.007 247.896);\n\n --density: .4rem; /* ~10pt grid */\n\n accent-color: var(--c-accent);\n}\n\n@font-face {\n font-family: 'Merriweather';\n font-style: normal;\n font-weight: normal;\n src: url('$lib/font/Merriweather-Bold.ttf') format('truetype');\n}\n@font-face {\n font-family: 'Mulish';\n font-style: normal;\n font-weight: normal;\n src: url('$lib/font/Mulish-Regular.ttf') format('truetype');\n}\n\n/* https://www.joshwcomeau.com/css/custom-css-reset/ */\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n* {\n margin: 0;\n}\n@media (prefers-reduced-motion: no-preference) {\n html {\n interpolate-size: allow-keywords;\n }\n}\nbody {\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n\n background-color: var(--c-background);\n font-family: 'Mulish', sans-serif;\n}\nimg, picture, video, canvas, svg {\n display: block;\n max-width: 100%;\n}\ninput, button, textarea, select {\n font: inherit;\n}\np, h1, h2, h3, h4, h5, h6 {\n overflow-wrap: break-word;\n color: var(--c-text);\n}\np {\n text-wrap: pretty;\n}\nh1, h2, h3, h4, h5, h6 {\n text-wrap: balance;\n font-family: 'Merriweather', serif;\n}\n#root, #__next {\n isolation: isolate;\n}\n\n\n/* https://complementary.space/ */\nbody {\n --space-near: calc(var(--density) * 5);\n --space-away: calc(var(--density) * 10);\n}\nbody [data-density-shift] {\n --space-near: calc(var(--density) * 2);\n --space-away: calc(var(--density) * 5);\n}\nbody [data-density-shift] [data-density-shift] {\n --space-near: calc(var(--density) * 1);\n --space-away: calc(var(--density) * 2);\n}\n\n/* type scale */\nh1, .h1 {\n font-size: 2.75em;\n line-height: 1.1;\n margin-bottom: var(--space-away);\n}\nh2, .h2 {\n font-size: 1.6583em;\n}\nh3, .h3 {\n font-size: 1.401em;\n}\nsmall, .small {\n font-size: 0.8448em;\n display: block;\n margin-bottom: var(--space-near);\n}\nhtml {\n font-size: clamp(1em, 0.8333vw + 0.775em, 1.25em);\n}\n\n```\n\nAll of that boils down to:\n- 9 total css variables (6 colors, using the modern [oklch color space](https://css-tricks.com/almanac/functions/o/oklch/)) and two self hosted fonts\n- Josh Comeau's [modern CSS reset](https://www.joshwcomeau.com/css/custom-css-reset/)\n- 3 levels of information density to control spacing between elements.\n- A responsive type scale based on `em`\n\nI cannot recommend https://complementary.space enough, it's a lovely paradigm to work with and very flexible. Juggling `var(--space-near)` and `var(--space-away)` for 99% of margins and paddings reduced so much mental overhead.\n\n\nWith the foundations in place, I could refactor any other individual components as needed. And boy, did they need it. A lot of cobwebs had crept into my codebase over three years, plus I had to clean all the tailwind class cruft out.\n\nSvelte 5 runes are great. Svelte continues to be my favorite framework to work with, it's just so intuitive. I moved the majority of files from `.js` to `.ts`, plus anything with `.svelte` is now typescript as well. yay! Much of the refactor was moving syntax from Svelte 4 to 5.\n\nI cleaned up my metatag strategy, updated my OG images, fixed my playwright tests, and tried to make things feel a bit smoother everywhere. I'll make additional posts for those soon. Next tasks for the site will be refreshing the favicon and other image assets, but first I need to focus on some yard work. 😅\n\n\n\nRefactor stats:\n $\"Image\"$ \n\nRepo Languages (Before):\n $\"Image\"$ \n\nRepo Languages (After):\n $\"Image\"$ \n\n","date":"2025-07-05T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/218","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/218/comments","title":"2025 site refresh","created_at":"2025-07-06T01:51:08Z","updated_at":"2025-07-06T02:04:23Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/218/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"technical","tags":["sveltekit tailwind heffner.dev update css density tokens"],"readingTime":"4 minutes"},{"type":"blog","frontmatter":{"title":"home & garden update, year 4","date":"2025-06-14T00:00:00.000Z","category":"diy","tags":"garden yardwork closets sauna life exercise relaxation","description":"the one with all the shoveling"},"issueNumber":210,"slug":"home-garden-update-year-4","title":"home & garden update, year 4","description":"the one with all the shoveling ","content":"\nwhew. a little late with the update this year, it's been a busy one!\n\nprevious updates:\n- [3](/home-garden-update)\n- [2](/new-year-post) \n- [1](/first-time-homebuyer-recap)\n\nI didn't get to all the goals from the second update, but I did a fair bit anyways! The biggest project of the past year was [the sauna](/gallery/sauna). \n\nGetting the sauna up and running was an undertaking, even when building from a kit. All told, this covered about two and a half months of work, mostly weekends and some evenings spread over seven months or so.\n\nLast year we worked through our third [ChipDrop](https://getchipdrop.com/) to start covering some grass in the backyard as well. Currently working my way through the fourth (and largest yet!) as cardboard supplies allow. I hope to be able to use the other half of my driveway soon.\n\nI'm going to put the rest of the items in a list because typing in detail feels like I'll never get through them.\n\n- upcycled the remaining existing garden beds into another standing garden bed\n- grew 400+ pounds of pumpkin in the front yard. carved two as jack-o-lanterns, the rest were processed into pies, cookies, stews, breads, soup and a number of other dishes. delicious!!!!\n- had fridge repaired (ice maker burnt out)\n- replaced garage door wheels with vinyl rollers (reduces sound)\n- took an 8 week [pottery wheel class](https://www.morningceramics.com/)\n- added shelves to both office closets\n- made some faux-stained glass for front-door window privacy\n- [began exercising](/on-exercise) consistently\n- planted an apple tree (a 5-variety graft from costco)\n- transplanted two kiwi plants and pulled out the eyesore of an arch the previous owner had them growing over\n- re-did irrigation lines using soaker hoses connected to mechanical timers\n- let go of my government contracting job due to DOGE cuts\n- started freelancing again\n- hit a 725 day streak on Duolingo (Estoy aprendiendo español)\n- became an uncle!\n- consistently making art again (at least once a month, though aiming for weekly)\n\nthe remainder of this year, the goals are:\n- get through remaining pile of woodchips\n- continue exercising regularly (3x week minimum)\n- build little library\n- get a new mailbox\n- update closet shelving in hallway + master bedroom closets\n\nthen next year:\n- re-roof the house + install solar panels\n- re-paint the exterior\n- re-build backyard greenhouse\n- upgrade rain barrels\n- build a firepit\n\nthe work continues.","date":"2025-06-14T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/210","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/210/comments","title":"home & garden update year 4","created_at":"2025-06-14T21:40:16Z","updated_at":"2025-11-26T18:32:31Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/210/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"diy","tags":["garden yardwork closets sauna life exercise relaxation"],"readingTime":"2 minutes"},{"type":"blog","frontmatter":{"title":"fresh kitchen","date":"2025-06-14T00:00:00.000Z","category":"note","tags":"new kitchen tools appliances blender","description":"starter tips for a home kitchen"},"issueNumber":208,"slug":"fresh-kitchen","title":"fresh kitchen","description":"starter tips for a home kitchen ","content":"\na friend recently asked what items would you get if you were assembling a new home kitchen from scratch on a budget? it's a really good question. if i had to start my kitchen over, i think these items would provide a strong foundation for making a wide range of dishes.\n\nessentials:\n- cast iron pan + lid. 12\" if you have the space but 10\" will do\n- stock pot\n- saucepan\n- metal spatula\n- wooden spoon\n- chef knife\n- paring knife\n- 2-3 cutting board(s)\n- 2 rimmed baking sheets\n- 2 big mixing bowls (ikea has good ones)\n- measuring cups\n- baking dish(es)\n- colander or strainer\n- can opener\n- meat thermometer (thermopen, etc) \n- storage containers for leftovers\n\nthat list will take you very far. then as recipes require, or budget allows, you can expand that core with other helpful additions. \n\n- instant pot\n- food processor\n- immersion blender\n- stand mixer \n- cheese grater\n- veg peeler\n- pizza slicer\n- tongs\n- bread knife\n- sharpening whetstone\n- rolling pin\n\nSome items the cheap version will perfectly acceptable, but for others I would spring for some extra quality. Cast iron is cast iron, a $25 lodge is going to work just fine. You'll notice a difference between a $85 chef's knife and a $25 knife, I would go higher if the budget allows.\n\nBon appetit!","date":"2025-06-14T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/208","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/208/comments","title":"fresh kitchen","created_at":"2025-06-14T21:27:39Z","updated_at":"2025-06-14T21:27:49Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/208/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"note","tags":["new kitchen tools appliances blender"],"readingTime":"1 minute"},{"type":"blog","frontmatter":{"title":"desktop refresh","date":"2025-05-16T00:00:00.000Z","category":"technical","tags":"note linux windows ai","description":"moving to Pop! OS"},"issueNumber":201,"slug":"desktop-refresh","title":"desktop refresh","description":"moving to Pop! OS ","content":"\nLong story short, Microsoft shoved a number of AI features into Windows 11 that I didn't ask for and can't turn off. In addition to being horribly intrusive, it was making my desktop with fairly new hardware unreasonably slow. So I decided to fix it by opting out of Windows entirely. I landed on [Pop!_OS](https://system76.com/pop/), a friendly-looking linux distro.\n\nI bought a new USB drive to flash the OS image to and perform the initial installation. It has 64GB for $8 from my local Fred Meyer... remember when these things were measured in KB for quadruple the price? One weird trick to feel old fast.\n\nThe first time I booted from the USB drive, the screen froze on a scary looking error about 30 seconds in and I flashed a brief panic that I bricked my box. Crossing my fingers, I turned the power off and tried booting from the USB again, no issues this time. \n\nAfter installing the OS, it was time to get things set up how I like them. I haven't actually used linux at home before, so this will be a fun experiment. \n\nrough order of operations:\n- generate new ssh key & add to github\n- install zsh and make default shell\n- add [my dotfiles](https://github.com/tjheffner/dotfiles) for zsh settings and aliases\n- set up Firefox extensions (uBlock origin, Privacy Badger, React devtools, WAVE a11y checker) \n- install homebrew, mainly to install nvm + node\n- from the Pop!_store, install Steam, Spotify, Discord, VLC, Clementine\n- install Sublime Text (I like using this as my scratchpad)\n- install VS Code []\n- in Steam settings, enable compatibility layer\n\nThe only real stumbling blocks were initially installing node directly via apt (ended up with node 12) and installing VS Code via the Pop!_Store. When I started VS Code there was warning that I'd have to do a bunch of tinkering for any (most?) plugins I installed, as the version it gave me was some random flatpak fork. \n\nSo I installed homebrew to install nvm, because using nvm to manage node versions instead makes me happy. And following [these directions](https://github.com/erik1066/pop-os-setup?tab=readme-ov-file) instead of the version available in the Pop!_store for VS Code to have proper plugin support is a small price to pay for less friction down the road.\n\nOverall, it has been a relatively painless switch, with 2 or 3 hours total configuration between all the things listed above. Pop!_OS is very reminiscent of OSX, has nice customization options and hasn't once shown me an ad or suggested I use AI to find files I saved on my own computer. My environment feels snappier as well. Huge improvement to my overall computer experience, would recommend. Kind of kicking myself I didn't do this months earlier, but here we are now. Pop!","date":"2025-05-16T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/201","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/201/comments","title":"desktop refresh","created_at":"2025-05-17T05:09:49Z","updated_at":"2025-05-19T15:53:36Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/201/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"technical","tags":["note linux windows ai"],"readingTime":"3 minutes"},{"type":"blog","frontmatter":{"title":"on exercise","date":"2025-04-28T00:00:00.000Z","category":"note","tags":"advice workout growth consistency","description":"use it or lose it applies to everything"},"issueNumber":195,"slug":"on-exercise","title":"on exercise","description":"use it or lose it applies to everything ","content":"\nOver the past few months I have become a gym person. It's not something I ever really saw myself doing, as I hated most acts of exercising in the past. Well, I didn't mind riding my bike, or bouldering... but anything involving machines or weights just never clicked for me. I would stick with it for a couple of weeks at most until I found some reason to skip a session and from there I'd avoid going back altogether for months or years at a time. But recently I realized I didn't have good reasons to put off exercising regularly any longer. And I definitely need to, having put on a fair bit of weight since the covid lockdowns.\n\nSo I've been going to the gym three times a week, doing full body every time. I try to ride my bike at least once a week outside of the gym too. I've signed up for a [thirty mile bike ride](https://orbike.com/pp/) this summer. I can feel my energy levels getting higher, even as I do more things, physical or otherwise. It's been great.\n\nThat increased energy has also helped me (re-)realize everything works like this. If you want to get better at anything, you have to do the work. If you don't use a skill, it will wither. Art, writing, cooking, communication, anything. The exercise is the point. Practice makes perfect. AI slop isn't a substitute for doing the work. If you've done a thing many times before, AI may make you faster at it, but you've put the time in already. If you haven't done the time, it'll speed you up, up to a point. And then you hit the wall. That same plateau you hit anywhere else when you aren't doing the work consistently and intentionally.\n\n\nps. I'm using the [Strong app](https://www.strong.app) to track workouts and it's wonderful. No frills with a clean ui, very cool to see my progression at a glance.","date":"2025-04-28T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/195","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/195/comments","title":"on exercise","created_at":"2025-04-28T22:15:43Z","updated_at":"2025-04-29T18:04:50Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/195/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"note","tags":["advice workout growth consistency"],"readingTime":"2 minutes"},{"type":"blog","frontmatter":{"title":"hiccup remedies","date":"2024-07-19T00:00:00.000Z","category":"note","tags":"hiccups fish magic","description":"doctors hate this one weird trick"},"issueNumber":177,"slug":"hiccup-remedies","title":"hiccup remedies","description":"doctors hate this one weird trick ","content":"\r\n\r\nyou're probably aware of most of the classic solutions to hiccups already:\r\n\r\n- hold your breath and count to ten\r\n- have someone scare them out of you\r\n- drink water upside down\r\n- drink hot water\r\n- drink ice cold water\r\n- bite a lemon\r\n- hold your knees to your chest\r\n- etc. \r\n \r\nnone of those methods really seem to work consistently for me. but i read a recent comment somewhere on reddit that seems to have the golden ticket!\r\n\r\nthis poster claimed that hiccups as a biological action stem from an ancient fish-y remnant in the brain. in essence, hiccups are your brain telling you to breathe through your gills. and you can calm your hiccups by reminding yourself that you are not a fish. \r\n\r\nit sounds a little preposterous, and having done no further research into the topic i cannot claim whether it's scientifically accurate or not. however, i can claim that **it works consistently for me**! the last four times i have had the hiccups, i've taken a deep breath and thought to myself \"bro, you are not a fish\". and all four times, the hiccups have subsided nearly instantly. \r\n\r\nso the next time you have the hiccups, try reminding yourself that you're not a fish. you might just be surprised. and if it doesn't work, well you can always try drinking some water off the roof of your mouth 😉\r\n\r\n","date":"2024-07-19T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/177","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/177/comments","title":"hiccup remedies","created_at":"2024-07-19T15:33:31Z","updated_at":"2024-07-19T15:33:37Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/177/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"note","tags":["hiccups fish magic"],"readingTime":"2 minutes"},{"type":"blog","frontmatter":{"title":"accessibility testing with playwright","date":"2024-06-02T00:00:00.000Z","category":"technical","tags":"a11y axe playwright e2e testing","description":"aka why this site has different colors now"},"issueNumber":169,"slug":"accessibility-testing-with-playwright","title":"accessibility testing with playwright","description":"aka why this site has different colors now ","content":"\r\nMy last few projects at work I've been using [Playwright](https://playwright.dev/) for e2e testing instead of Cypress. Playwright is an open source tool from Microsoft, and is a fairly intuitive testing framework if you have any experience with other javascript testing libraries like jest, react-testing-library, mocha, chai, etc. It's also pretty straightforward to integrate with [Axe](https://www.deque.com/axe/) for automating some accessibility testing. Wonderful.\r\n\r\nHere's how I went about accessibility testing this website with Playwright.\r\n\r\n## setting up playwright\r\nFirst, I installed playwright via `npm init playwright@latest`. This asks a few questions and generates a `playwright.config.ts` and some example tests. I am using typescript and wanted a github action workflow generated for me. Cool. I also needed to install the browsers that Playwright uses for its tests. I did not need to install any additional system deps, but you may need to (whether locally or in CI). The Playwright docs are generally pretty good, this is all outlined in them. Then I added a command to package.json, so I could run the tests easily.\r\n\r\n```\r\n \"test\": \"npx playwright test\"\r\n```\r\n\r\nMy personal laptop is getting up there in years, so despite installing versions of chromium, safari, and firefox... playwright actually won't test webkit on my machine. So I altered the config to only run tests for chromium on my local and save testing the full suite of browsers for CI.\r\n\r\nOnce that was sorted out, Playwright was successfully running the example tests locally. Now to extend it for accessibility testing.\r\n\r\n## adding axe\r\n[Playwright's docs](https://playwright.dev/docs/accessibility-testing) cover the main part of this, but I'm going to paste the extension here for reference. \r\n\r\nFirst `npm i -d @axe-core/playwright` to grab the playwright-compatible Axe library.\r\n\r\nThen in a `test-utils.ts` file, we're going to drop this in to create a re-usable fixture:\r\n\r\n```ts\r\n/* This file contains consistent configuration for a11y tests across other test files. */\r\nimport { test as base } from '@playwright/test'\r\nimport AxeBuilder from '@axe-core/playwright'\r\n\r\ntype AxeFixture = {\r\n makeAxeBuilder: () => AxeBuilder\r\n}\r\n\r\n// Extend Playwright's base test by providing \"makeAxeBuilder\"\r\n//\r\n// This new \"test\" can be used in multiple test files, and each of them will get\r\n// a consistently configured AxeBuilder instance.\r\nexport const test = base.extend({\r\n makeAxeBuilder: async ({ page }, use, testInfo) => {\r\n const makeAxeBuilder = () =>\r\n new AxeBuilder({ page }).withTags([\r\n 'wcag2a',\r\n 'wcag2aa',\r\n 'wcag21a',\r\n 'wcag21aa',\r\n ])\r\n // .exclude('#commonly-reused-element-with-known-issue');\r\n\r\n await use(makeAxeBuilder)\r\n },\r\n})\r\n\r\n// Exported here for convenience\r\n// so other test files can do import { test, export } from './utils'\r\nexport { expect } from '@playwright/test'\r\n```\r\n\r\nNow our test files can use `makeAxeBuilder()` to generate an axe-check with consistent configuration. I like to `export {expect}` from the utils file to keep my imports cleaner in the tests themselves. Personal preference.\r\n\r\n## testing\r\n\r\nOK! With the base in place, we can now run accessibility tests against our site. A barebones test looks like this:\r\n\r\n```ts\r\ntest('Home page renders without a11y errors', async ({\r\n page,\r\n makeAxeBuilder,\r\n}) => {\r\n await page.goto('/')\r\n\r\n const accessibilityScanResults = await makeAxeBuilder().analyze()\r\n\r\n expect(accessibilityScanResults.violations.length).toEqual(0)\r\n})\r\n```\r\n\r\n## reporting\r\nThat isn't super useful if there are errors, though. I want the results in an easy-to-read format so I can act on them. I'm doing that in two ways:\r\n1. the `axe-html-reporter` package, which turns the results into a nicely structured HTML report I can view locally\r\n2. massaging the results into a better json object that prints in the console.\r\n\r\nThis way, if it's a simple error I can see it immediately in the console, but if there are a number of violations I can reference them easily with the HTML report.\r\n\r\nHere's how I set up my function to generate both reports. In my `test-utils.ts` file, I added this\r\n\r\n```ts\r\nimport { createHtmlReport } from 'axe-html-reporter';\r\nimport fs from 'fs';\r\n\r\n...\r\n\r\n// Generate readable report outputs for a given check.\r\nexport const generateReport = (accessibilityScanResults, key) => {\r\n // axe-html-reporter builds a nice page, use that.\r\n const htmlReport = createHtmlReport({\r\n results: accessibilityScanResults,\r\n options: {\r\n projectKey: 'heffdotdev',\r\n doNotCreateReportFile: true\r\n },\r\n });\r\n\r\n // write report to file. test-results is gitignored\r\n const htmlReportDir = 'test-results/a11y'\r\n if (!fs.existsSync(htmlReportDir)) {\r\n fs.mkdirSync(htmlReportDir, { recursive: true })\r\n }\r\n fs.writeFileSync(`${htmlReportDir}/${key}.html`, htmlReport)\r\n\r\n // create useful json object\r\n const errors = accessibilityScanResults.violations.map(v => {\r\n return {\r\n issue: v.id,\r\n count: v.nodes.length,\r\n description: v.description,\r\n errors: v.nodes.map(n => {\r\n return {\r\n html: n.html,\r\n impact: n.impact,\r\n target: n.target,\r\n summary: n.failureSummary,\r\n }\r\n }),\r\n }\r\n })\r\n\r\n return {\r\n htmlReport,\r\n errors\r\n }\r\n}\r\n```\r\n\r\nAnd in our barebones a11y test, we generate the reports if there are errors:\r\n\r\n```ts\r\n if (accessibilityScanResults.violations.length > 0) {\r\n generateReport(accessibilityScanResults, 'homepage')\r\n }\r\n```\r\n\r\nWe can now run the tests & get a readable, actionable report of any violations found. \r\n\r\n## conclusion\r\n\r\nSpeaking of found violations, boy did I find some! Running `npm run test` with barebones tests against my four main pages (homepage, blog, gallery, work) I was immediately hit with a number of violations per page. There was one obvious issue in the header: the menu icon that links to the site menu in the footer did not have an accessible name, because there was no text at all 🙈. \r\n\r\nThe remaining violations on most pages are related to contrast issues. The color schemes I came up with... they are not fully accessible. They pass the contrast check at most larger sizes, but smaller text fails. So I need to update my theme a bit. The emoji wall on the homepage also needs some attention. \r\n\r\nOnce I have the light and dark color schemes sorted out, I will be able to use Playwright to easily verify that they both pass across all the different page types. Neat!\r\n\r\nYou can view all of this site's [Playwright tests here](https://github.com/tjheffner/heffdotdev/tree/main/tests).","date":"2024-06-02T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/169","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/169/comments","title":"accessibility testing with playwright","created_at":"2024-06-02T22:44:10Z","updated_at":"2025-07-06T02:05:24Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/169/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"technical","tags":["a11y axe playwright e2e testing"],"readingTime":"5 minutes"},{"type":"blog","frontmatter":{"title":"home & garden update","date":"2024-05-27T00:00:00.000Z","category":"diy","tags":"note garden sauna paint projects momentum","description":"year 3: the one about the yard"},"issueNumber":161,"slug":"home-garden-update","title":"home & garden update","description":"year 3: the one about the yard ","content":"\r\nWow. The last two years have absolutely flown by. It's been a while since my last home updates ([1](/some-new-homeowner-tips) and [2](/first-time-homebuyer-recap))... _A Lot_ has been done in the interim. The coolest part for me is how each additional update or improvement seems to create even more momentum for the next project. the flywheel effect happening to my own motivation. I don't mind.\r\n\r\nIn two years, Randi and I have really turned this house into our home. I love living here with her so much. It truly is a personal paradise (aka \"the purr palace\" because our cat is a queen). And every little project we've done, big or small makes it that much better. \r\n\r\n## recap\r\nto wit, over the last two years we've:\r\n- painted every room but one (the bathroom, which eventually will be remodeled)\r\n- built some initial [rain barrels](/rain-barrels)\r\n- had the house re-piped\r\n- built compost storage area, later expanded it a bit\r\n- removed a ton of overgrown and overdone grasses left from previous owner. seriously 40 different puffballs, dotting the borders like little gumdrops. it was too much.\r\n- upgraded to fiber & ran 5 drops through the crawlspace\r\n- observed where the light and water go throughout the days and the seasons\r\n- harvested many gallon freezer bags full of cherries, grapes, plums, raspberries, figs and more\r\n- [set up the living room home theater](/home-theater-services)\r\n- organized the garage with pegboards + better shelves\r\n- learned how to replace the drain pump on a washing machine\r\n- repaired a dishwasher & installed a new dishwasher several months later\r\n- turned all of the front yard from grass into plantable space with the power of sheet mulching (thanks [chipdrop](http://chipdrop.net/)!)\r\n- planted three trees (oak, hazelnut, nectarine) & four blueberry bushes, plus some grape cuttings in the newly plantable area\r\n- bought a gas-powered generator after a [lengthy power outage](/lessons-from-the-storm)\r\n- moved all the raspberries to one area of the yard\r\n- added supports for the grapes + berries\r\n- poured cement pad for hot tub\r\n- ordered a sauna kit (12-16 weeks lead time)\r\n- ripped out one existing raised bed\r\n- cleaned up the street-strip with gravel box for trash cans + flowers instead of grass\r\n\r\nWhew! That was a lot. And I am sure I am missing multiple somethings. We've been really busy! But it's been a good busy, and it's so wonderful to sit back and relax and savor the literal fruits of your labor. It's almost time to harvest cherries again :)\r\n\r\n## what's next on the list? \r\nObviously, lots of watering and weeding. Just a little bit of focused effort every day (at least 15 minutes, an hour is wonderful) really adds up in the end. It can be overwhelming to think about everything you have to do to get it where you want it, but [chunking it up](/one-box-at-a-time) has been a really effective technique for me. I like to focus on an area and then when it's done, see what my eye naturally wanders to next. That's my next project.\r\n \r\nWe are waiting for additional woodchips to finish sheet mulching a few areas of the yard (again courtesy of chipdrop, which provides them for free but not really on a set schedule of any sort). We've basically determined the raised beds that came with the house are nice, but not ideal. We need geriatric raised beds, I mean, really raise the things. The current ones are basically elevated by a foot, which is nice for separation, but still annoying to work in. We're going to pull most of them out and plant directly into the ground instead. The ones we don't remove, we're going to increase the height of. Maybe turn one into a [hugelkultur](https://www.almanac.com/what-hugelkultur-ultimate-raised-bed) box to help get the height up.\r\n\r\nI also need to dig up a couple bushes in the back to prepare an area for the sauna's base. I want to have that all squared away before the kit is shipped. Summer goals. My plan is to create a small raised base, basically a small deck, so I can easily put a drain in the middle of the floor to hose it out in the future. It's going to be sited near the hot tub, mostly for electrical convenience.\r\n\r\nOne of these summer weekends I am going to build a [free little library](https://littlefreelibrary.org/), to go in the newly-cleaned up street area. I want to build it with a shelf below for extra vegetables from our garden, and maybe a space to share seeds as well.\r\n\r\nI don't know if I'll get to it this year, but I want to upgrade the rain barrel situation, and figure out a more convenient way to use that water, preferably on a timer. Right now we have some drip lines that can be connected to a hose. I've also built a small pump-box from a plastic storage bin, a piece of 2x4, and a cheap pump from harbor freight. I connect it to the rain barrels and am able to water about half of the yard (particularly the berries, compost, and a fig and plum trees), but I'd like to cut myself out of the situation entirely, and have everything pumped on a timer from the rain barrels. That's gonna take a bit of research and some bigger barrels. I want to upgrade to 3 or 4 IBC containers on the side of the house. That would take my rainwater storage capacity from 110gal to 825-1100gal! and let me move the existing rain barrels elsewhere.\r\n\r\nAs you can see, the yard has been a big focus for us once we finished painting walls. So we haven't tackled any of the closet upgrades yet, but I hope to hit those in the coming months as well. Maybe towards the end of the year, when it isn't as pleasant to work outside... but it's real fun getting my hands dirty.\r\n","date":"2024-05-27T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/161","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/161/comments","title":"home & garden update, start of year three","created_at":"2024-05-02T19:04:38Z","updated_at":"2024-07-15T15:16:46Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/161/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"diy","tags":["note garden sauna paint projects momentum"],"readingTime":"5 minutes"},{"type":"blog","frontmatter":{"title":"what makes a team successful","date":"2024-05-26T00:00:00.000Z","category":"note","tags":"trust management tech leadership va.gov","description":"spoilers: it's trust"},"issueNumber":160,"slug":"what-makes-a-team-successful","title":"what makes a team successful","description":"spoilers: it's trust ","content":"\r\nI recently wrapped up a contract for the VA that I'm quite proud of. My team built a new foundation for the frontend of [va.gov](https://www.va.gov), laying the groundwork for rapid publishing of over twenty-seven thousand pieces of content (and counting!). As proud as I am of our work, I have even more pride for my team. It was my first experience as tech lead, full stop. Not \"just\" front-end lead or subject matter expert for a particular system, but as lead of the whole shebang. And I personally think it was a healthy high-functioning team, and that is what enabled us to hit our delivery despite all of the chaos that envelops the VA's development & contracting processes.\r\n\r\nWhy was the team so successful? There are a number of reasons, but I believe what it ultimately boils down to is one word. **Trust**. I said \"trust\" a lot in a [recent company spotlight interview](https://agile6.com/sixer-spotlight-with-tanner-heffner/), and I'm going to say it some more here. \r\n\r\nThe core team for this project was small, six people in total. We had a PM/DM type, me, two FE engineers, a Drupal engineer and a devops engineer. our PM was also transitioning from a fullstack engineering role. So a team of six engineers. There was additional support from contract managers, coaches, VA OCTO folks, etc., but the day-to-day core group was small and nimble. We built trust among ourselves early on in the contract with a lot of animated discussions around the proposed architecture. We were inheriting a skeleton codebase from a previous effort at the VA to solve this problem. The PM and myself were actually a part of the previous effort, so we had some familiarity with the code (though it had sat untouched for at least nine month after the initial contract ended) but still needed to brush up. \r\n\r\nFrom the beginning, I did not want to act as a micro-manager for all technical decisions. I wanted us to come to consensus on the desired architectural approach and then make it happen, without being a roadblock. We also needed to determine how much of the previous effort was still relevant and how much we would need to refactor or build out entirely for ourselves. Those animated discussions were invaluable for us as a team to feel out working styles, big picture thinking, the feature roadmap, and how we'd divide and conquer. We had a number of spikes, prototypes, and more discussions. We didn't always agree on final approach, but most decisions were determined democratically. Some were dictated a little more strictly from the VA proper, but for the most part the big picture was a truly collaborative effort. This collaboration built strong trust across the team, and folks took strong sense of ownership over the areas they did build personally. That ownership built further trust.\r\n\r\nAnother huge source of trust was from the VA itself. Our stakeholder was someone that we had worked with closely for several years, so they generally stayed \"hands-off\" and trusted our team to accomplish the work by the contract deadline. This gave us a little more lee-way in sprint-to-sprint planning, and took some immediate pressure off. We still delivered value each sprint, of course, but our team was a little more comfortable with having a few larger-sized tickets that spanned sprints on occasion. \r\n\r\nAs I stated in that spotlight interview, I trusted my team implicitly. I knew we had each other's backs, no matter what came up. Early on in the contract, my grandpa died and I missed a week. Later, an [ice storm hit Portland](/lessons-from-the-storm) and my power was out for six days. I missed another week. In both cases, my team picked up my slack without missing a beat. They knew what we had set out to do. Other team members experienced similar events over our nine month contract like planned vacations, funerals, weddings, power outages, home appliance issues, you name it. In all cases, we rolled on as planned and trusted ourselves to get it done. Because we said we would. And had repeatedly shown one another that our word could be trusted.\r\n\r\nObviously, a successful team is not only dependent on trust. The competency to do the work to a certain standard must be there too. But once someone's demonstrated that standard repeatedly, it is easy to take for granted that any additional work will also be near that level. Or if it isn't there, that someone will speak up to ask for help. That takes a level of trust too, to ask questions without fear.","date":"2024-05-26T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/160","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/160/comments","title":"what makes a team","created_at":"2024-05-02T19:03:36Z","updated_at":"2024-07-15T14:23:50Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/160/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"note","tags":["trust management tech leadership va.gov"],"readingTime":"4 minutes"},{"type":"blog","frontmatter":{"title":"pickled red onions","date":"2024-04-30T00:00:00.000Z","category":"recipe","tags":"quick pickle condiment flavor enhancer yum","description":"so much flavor, so little effort"},"issueNumber":159,"slug":"pickled-red-onions","title":"pickled red onions","description":"so much flavor, so little effort ","content":"\npickled red onions are one of those things that elevate any dish they are added to. great on tacos, bagels, eggs, sandwiches, whatever. and as a quick pickle, they take practically no effort to make. you'll need to do four things: slice the pickles, make the brine, combine in a jar, wait a bit and enjoy!\n\nStuff you'll need:\n\n| ingredient | amount |\n| :--- | :--- |\n| red onions | 2 medium |\n| vinegar | 2 cups |\n| water | 2 cups |\n| sugar | 1/3 cup |\n| salt | 2 tablespoons |\n| mason jars | 2 or 3, depending on size |\n\nYou can also add some additional spices to your jarred mixture if desired. Garlic cloves, whole peppercorns, mustard seeds, etc. Anything your heart desires. Or doesn't!\n\nWith the ingredients gathered, here's how i make my pickled red onions. First, thinly slice the red onions.. I don't have a mandolin, so I [french the onions](https://www.youtube.com/watch?v=5sdQgm_Vafc) instead. But any thin julienne cut will do.\n\nPack these sliced onions into the mason jars. Add your additional spices to the jars now, if using them. I like to pop a couple whole peeled garlic cloves in there.\n\nNow combine the rest of the ingredients (vinegar, water, salt, sugar) into a small saucepan on medium heat. This is your pickling brine. Stir until the sugar and salt have dissolved, and then remove from heat to cool. Once the mixture has cooled, pour into the prepared jars. Let cool to room temperature, and then put a lid on the jar and place the in the fridge.\n\nThe onions are ready to eat in approximately one hour, longer if your onions are thicker. You want them to be bright pink and tender. They will increase in flavor over time, and store well in the fridge for about two weeks (if they last that long!).","date":"2024-04-30T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/159","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/159/comments","title":"pickled red onions","created_at":"2024-05-02T18:30:44Z","updated_at":"2025-07-06T01:35:57Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/159/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"recipe","tags":["quick pickle condiment flavor enhancer yum"],"readingTime":"2 minutes"},{"type":"blog","frontmatter":{"title":"mayonnaise","date":"2024-03-25T00:00:00.000Z","category":"recipe","tags":"savory easy versatile","description":"comes together in less than five minutes"},"issueNumber":149,"slug":"mayonnaise","title":"mayonnaise","description":"comes together in less than five minutes ","content":"\r\ni never really enjoyed mayo growing up. about the only thing i ever liked it in was deviled eggs, because who doesn't love deviled eggs? i didn't want mayo on my sandwiches, near my fries, or in my fridge in general. i'd buy a jar now and then for the odd dish but inevitably it would sit there for months, untouched and gross. then i learned how easy it was to make at home, and in usable quantities to boot. if you have an immersion blender, a few base ingredients in a takeout deli container become a delicious mayo in no time at all. so much tastier than store-bought, and way less waste (at least for me, because i end up using it all in a week or two).\r\n\r\n## ingredients \r\nhere's what you'll need:\r\n- an immersion blender\r\n- a deli takeout container (32oz, the tall ones you get for soup to-go)\r\n- one egg\r\n- dijon mustard\r\n- a half cup to cup of oil, depending how much mayo you want to make. i use half a cup of vegetable oil (or olive oil if i want something a little more savory).\r\n- salt and pepper to taste\r\n\r\nthat's all you need! and it's very flexible as a base.\r\nsometimes i'll add some of these things if i want to take it in a different direction flavor wise:\r\n- dill, capers, pickles for more of a tartar sauce style\r\n- ketchup or sun-dried tomatoes for more of a fry sauce\r\n- miso, extra egg yolks instead of egg whites for more of a kewpie-style mayo\r\n\r\n## steps\r\n1. crack the egg into the takeout container and let it sit for a minute or two for room temp.\r\n2. add a spoonful of dijon. this will act as the emulsifier and help the egg and oil blend together smoothly.\r\n3. add a pinch of salt, some pepper and your choice of oil. i generally use half a cup of vegetable oil.\r\n3a. if you are using other ingredients, add them now too (dill, pickles, etc)\r\n4. put the immersion blender in the container all the way to the bottom and start blending on a low speed.\r\n5. keep blending at a low speed until all the ingredients are mixed together. it should take about two minutes tops.\r\n\r\nonce the mayo is made, it'll keep in the fridge for up to two weeks. use it for anything you would use mayo for... grilled cheeses, BLTs, tuna salads, as a cooking fat, sandwich condiments, etc.","date":"2024-03-25T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/149","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/149/comments","title":"mayonnaise","created_at":"2024-03-26T02:48:35Z","updated_at":"2024-03-26T02:50:21Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/149/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"recipe","tags":["savory easy versatile"],"readingTime":"2 minutes"},{"type":"blog","frontmatter":{"title":"tinned fish cakes","date":"2024-03-09T00:00:00.000Z","category":"recipe","tags":"sardines lunch savory","description":"a quick and savory lunch"},"issueNumber":129,"slug":"tinned-fish-cakes","title":"tinned fish cakes","description":"a quick and savory lunch ","content":"\r\noh, tinned fish, [my old friend](/tinned-fish-pesto-pasta). what can't you do? lately i've been turning tinned sardines into crab cake like treats for lunch and really can't recommend it enough.\r\n\r\nhere's what you'll need:\r\n- a tin of fish (i've been using the [Season brand sardines](https://www.seasonproducts.com/sardines/) in olive oil, they come in a six pack from Costco)\r\n- breadcrumbs\r\n- an egg\r\n- green onion\r\n- spoonful of dijon or [mayo](/mayonnaise)\r\n- salt & pepper to taste\r\n\r\ni also occasionally add a little bit of chopped sundried tomatoes or capers if i'm in the mood, but you can really take them any direction you'd like.\r\n\r\nok. so you have your ingredients. chop up the green onion all the way down to the root. dump everything into a mixing bowl, including the oil from the tin. mix all that up until it starts sticking together. one tin of fish usually makes 2-3 cakes, depending how you size them and what other ingredients you include. heat up a pan with a little bit of oil and spoon your cakes in there. smash them a bit so they are even thickness throughout. \r\n\r\na couple minutes on each side, and you're done! you can eat them as-is, or treat them like a fish patty for a sandwich. \r\npersonally i like to toast a hamburger bun, spread a little bit of mayo and/or mustard, some spinach, some hotsauce and maybe a slice of cheese too if i'm feeling frisky. a slice of tomato would be good if they're in season.\r\n\r\nbon appetit!","date":"2024-03-09T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/129","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/129/comments","title":"tinned fish cakes","created_at":"2024-03-10T00:10:02Z","updated_at":"2024-03-26T02:50:59Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/129/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"recipe","tags":["sardines lunch savory"],"readingTime":"2 minutes"},{"type":"blog","frontmatter":{"title":"last epoch","date":"2024-03-09T00:00:00.000Z","category":"note","tags":"gaming arpg diablo","description":"the diablo 4 we all wanted"},"issueNumber":128,"slug":"last-epoch","title":"last epoch","description":"the diablo 4 we all wanted ","content":"\r\nI discovered the game [Last Epoch](https://lastepoch.com/) this week and let me tell you, I am hooked. If you are a fan of ARPGs (Diablo II, Path of Exile, etc.), I'm pretty sure you will be enthralled too. I don't want to spoil anything, and also I couldn't really if I wanted to. I'm currently playing blind, not looking up any build guides or anything of the sort and absolutely loving it. There are plenty of skills similar in form to other ARPGs, but Last Epoch delivers loads more flexibility, in a fairly easy-to-understand skill tree. Different options in each skill tree can vastly change how a given skill functions, which means you can shift your playstyle to your heart's content. The crafting mechanism is pretty nifty too. It was a little overwhelming at first glance, but once I took the time to read how it works, it clicked for me pretty quickly. There are plenty of helpful guides included in the game for the different features, too.\r\n\r\nThe only downside for me so far is that the controller support (either on the Steam Deck or a controller connected to it) isn't quite at the level that the keyboard/mouse interactions are. But they seem to be patching and making improvements pretty regularly, so hopefully all of the controller kinks are sorted out soon. For the time being, I recommend playing on a machine with a keyboard and mouse (but it still runs perfectly fine on a steam deck with graphics sliders turned down a bit).\r\n\r\nAll in all, 5 out 5 stars and I'm only level 40. This game kicks ass. It's basically everything I wanted Diablo 4 to be, and at half the cost. What's not to love?\r\n","date":"2024-03-09T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/128","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/128/comments","title":"last epoch","created_at":"2024-03-09T23:57:05Z","updated_at":"2024-03-09T23:57:11Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/128/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"note","tags":["gaming arpg diablo"],"readingTime":"2 minutes"},{"type":"blog","frontmatter":{"title":"home theater services","date":"2024-02-10T00:00:00.000Z","category":"diy","tags":"plex sonarr radarr prowlarr","description":"the Arr apps are amazing"},"issueNumber":109,"slug":"home-theater-services","title":"home theater services","description":"the Arr apps are amazing ","content":"\nlast black friday, I splurged and got a new 65\" tv, record player, AV receiver and surround sound speakers for the living room. it's been a monumental upgrade to our home theater experience. the living room was already wired for a 5.1 setup by a previous owner, so it wasn't too much of a stretch to adapt it to 7.1. cannot recommend it enough. but the digital side of my home theater needed some love to match. it was using the same janky setup i initially hacked together when i first got my NAS. (which I bought using the 2020 covid trumpbux. pretty sweet.) so this weekend i re-did my NAS setup to make use of the [*arr family of apps](https://wiki.servarr.com/) and help manage everything with a little less friction.\n\n**obligatory note that i don't condone or endorse downloading content illegally. use torrents responsibly as dictated by the laws of your country of residence. thanks! ✌️**\n\nbefore i was only running qbittorrent in docker, not really using jackett, etc. after a couple of hours this weekend, and several more hours moving files around to match my new folder structure, i now have a bunch of additional services running in docker and they all communicate with each other. it's great. content in my media library is monitored via radarr/sonarr/prowlarr and when higher quality versions of files are available, it updates them. it also lets me know when i'm missing episodes of series, etc. has made the whole process a lot more seamless.\n\nbasically, it works with one large shared folder so things are treated as a single filesystem. all the services are exposed on different ports available only to my home network.\n\n```\ndata\n├── torrents\n│ ├── books\n│ ├── movies\n│ ├── music\n│ └── tv\n└── media\n ├── books\n ├── movies\n ├── music\n └── tv\n```\n\nthere is a separate shared folder for all of the docker services and their config. this separation allows things to be easily mounted in as volumes and shared across the services that need them, without exposing everything to a service that doesn't need it. nifty.\n\n```\ndocker\n└── appdata\n ├── radarr\n ├── sonarr\n ├── bazarr\n ├── prowlarr\n ├── flaresolverr\n ├── plex\n ├── tautalli\n ├── pullio\n └── qbittorrent\n```\n\nat least on synology you have to make these folders manually, but that's not a big deal if you can ssh into your box instead of using the web ui.\n\n- radarr -- movies\n- sonarr -- tv shows\n- bazarr -- subtitles\n- prowlarr -- centralized indexer management for the *arr apps. only have to enter data in one spot, instead of individually.\n- flaresolverr -- get around cloudflare blocking prowlarr on certain indexers\n- plex -- media library\n- tautalli -- stats for plex\n- qbittorrent -- my preferred torrent client. easy to use.\n- pullio -- keeps docker images for the above updated\n\nin the `docker/appdata` folder, i have a `docker-compose.yml` and a `.env` file to centralize management of all these services. \n\nhere's what the docker-compose looks like for all of the services:\n```yml\nversion: \"3.2\"\nservices:\n# Radarr - https://hotio.dev/containers/radarr/\n radarr:\n container_name: radarr\n image: ghcr.io/hotio/radarr:latest\n restart: unless-stopped\n logging:\n driver: json-file\n options:\n max-file: ${DOCKERLOGGING_MAXFILE}\n max-size: ${DOCKERLOGGING_MAXSIZE}\n labels:\n - org.hotio.pullio.update=${PULLIO_UPDATE}\n - org.hotio.pullio.notify=${PULLIO_NOTIFY}\n - org.hotio.pullio.discord.webhook=${PULLIO_DISCORD_WEBHOOK}\n ports:\n - 7878:7878\n environment:\n - PUID=${PUID}\n - PGID=${PGID}\n - TZ=${TZ}\n - UMASK=002\n volumes:\n - /etc/localtime:/etc/localtime:ro\n - ${DOCKERCONFDIR}/radarr:/config\n - ${DOCKERSTORAGEDIR}:/data\n\n# Sonarr - https://hotio.dev/containers/sonarr/\n sonarr:\n container_name: sonarr\n image: ghcr.io/hotio/sonarr:release\n restart: unless-stopped\n logging:\n driver: json-file\n options:\n max-file: ${DOCKERLOGGING_MAXFILE}\n max-size: ${DOCKERLOGGING_MAXSIZE}\n labels:\n - org.hotio.pullio.update=${PULLIO_UPDATE}\n - org.hotio.pullio.notify=${PULLIO_NOTIFY}\n - org.hotio.pullio.discord.webhook=${PULLIO_DISCORD_WEBHOOK}\n ports:\n - 8989:8989\n environment:\n - PUID=${PUID}\n - PGID=${PGID}\n - TZ=${TZ}\n - UMASK=002\n volumes:\n - /etc/localtime:/etc/localtime:ro\n - ${DOCKERCONFDIR}/sonarr:/config\n - ${DOCKERSTORAGEDIR}:/data\n\n# Bazarr - https://hotio.dev/containers/bazarr/\n bazarr:\n container_name: bazarr\n image: ghcr.io/hotio/bazarr:nightly\n restart: unless-stopped\n logging:\n driver: json-file\n options:\n max-file: ${DOCKERLOGGING_MAXFILE}\n max-size: ${DOCKERLOGGING_MAXSIZE}\n labels:\n - org.hotio.pullio.update=${PULLIO_UPDATE}\n - org.hotio.pullio.notify=${PULLIO_NOTIFY}\n - org.hotio.pullio.discord.webhook=${PULLIO_DISCORD_WEBHOOK}\n ports:\n - 6767:6767\n environment:\n - PUID=${PUID}\n - PGID=${PGID}\n - TZ=${TZ}\n - UMASK=002\n volumes:\n - /etc/localtime:/etc/localtime:ro\n - ${DOCKERCONFDIR}/bazarr:/config\n - ${DOCKERSTORAGEDIR}/media:/data/media\n\n # Prowlarr - https://hotio.dev/containers/prowlarr/\n prowlarr:\n container_name: prowlarr\n image: ghcr.io/hotio/prowlarr\n restart: unless-stopped\n logging:\n driver: json-file\n options:\n max-file: ${DOCKERLOGGING_MAXFILE}\n max-size: ${DOCKERLOGGING_MAXSIZE}\n labels:\n - org.hotio.pullio.update=${PULLIO_UPDATE}\n ports:\n - 9696:9696\n environment:\n - PUID=${PUID}\n - PGID=${PGID}\n - UMASK=002\n - TZ=${TZ}\n volumes:\n - ${DOCKERCONFDIR}/prowlarr:/config\n\n # Flaresolverr - https://github.com/FlareSolverr/FlareSolverr/tree/master\n # proxy service for prowlarr when cloudflare is detected\n flaresolverr:\n # DockerHub mirror flaresolverr/flaresolverr:latest\n image: ghcr.io/flaresolverr/flaresolverr:latest\n container_name: flaresolverr\n environment:\n - LOG_LEVEL=${LOG_LEVEL:-info}\n - LOG_HTML=${LOG_HTML:-false}\n - CAPTCHA_SOLVER=${CAPTCHA_SOLVER:-none}\n - TZ=${TZ}\n ports:\n - 8191:8191\n restart: unless-stopped\n\n # Plex - https://hotio.dev/containers/plex/\n # Also please read the extra info => https://trash-guides.info/Hardlinks/How-to-setup-for/Synology/#appdata\n plex:\n container_name: plex\n image: ghcr.io/hotio/plex\n restart: unless-stopped\n logging:\n driver: json-file\n options:\n max-file: ${DOCKERLOGGING_MAXFILE}\n max-size: ${DOCKERLOGGING_MAXSIZE}\n labels:\n - org.hotio.pullio.update=${PULLIO_UPDATE}\n - org.hotio.pullio.notify=${PULLIO_NOTIFY}\n - org.hotio.pullio.discord.webhook=${PULLIO_DISCORD_WEBHOOK}\n ports:\n - 32400:32400\n environment:\n - PUID=${PUID}\n - PGID=${PGID}\n - TZ=${TZ}\n - UMASK=002\n - PLEX_CLAIM_TOKEN=${PLEX_CLAIM_TOKEN}\n - PLEX_ADVERTISE_URL=${PLEX_ADVERTISE_URL}\n - PLEX_NO_AUTH_NETWORKS=\n - PLEX_BETA_INSTALL=${PLEX_BETA_INSTALL}\n volumes:\n - /etc/localtime:/etc/localtime:ro\n - ${DOCKERCONFDIR}/plex:/config:rw\n - ${DOCKERSTORAGEDIR}/media:/data/media:rw\n\n # qbittorrent - https://hotio.dev/containers/qbittorrent\n qbittorrent:\n container_name: qbittorrent\n image: hotio/qbittorrent:legacy\n restart: unless-stopped\n logging:\n driver: json-file\n options:\n max-file: ${DOCKERLOGGING_MAXFILE}\n max-size: ${DOCKERLOGGING_MAXSIZE}\n labels:\n - org.hotio.pullio.update=${PULLIO_UPDATE}\n - org.hotio.pullio.notify=${PULLIO_NOTIFY}\n - org.hotio.pullio.discord.webhook=${PULLIO_DISCORD_WEBHOOK}\n ports:\n - ${QBITTORRENT_WEBUI_PORT}:${QBITTORRENT_WEBUI_PORT}\n - ${QBITTORRENT_PRIVOXY_PORT}:${QBITTORRENT_PRIVOXY_PORT}\n cap_add:\n - NET_ADMIN\n devices: # Optional, uncomment if you use VPN\n - /dev/net/tun:/dev/net/tun # Optional, uncomment if you use VPN\n sysctls:\n - net.ipv4.conf.all.src_valid_mark=1\n - net.ipv6.conf.all.disable_ipv6=1\n environment:\n - PUID=${PUID}\n - PGID=${PGID}\n - TZ=${TZ}\n - UMASK=022\n - VPN_ENABLED=${VPN_ENABLED}\n - VPN_LAN_NETWORK=${LAN_NETWORK}\n - VPN_CONF=wg0\n - PRIVOXY_ENABLED=${QBITTORRENT_ENABLE_PRIVOXY}\n dns:\n - 1.1.1.1\n - 8.8.8.8\n volumes:\n - /etc/localtime:/etc/localtime:ro\n - ${DOCKERCONFDIR}/qbittorrent:/config:rw\n - ${DOCKERSTORAGEDIR}/torrents:/data/torrents:rw\n\n # tautulli - https://hotio.dev/containers/tautulli\n tautulli:\n container_name: tautulli\n image: ghcr.io/hotio/tautulli\n restart: unless-stopped\n logging:\n driver: json-file\n options:\n max-file: ${DOCKERLOGGING_MAXFILE}\n max-size: ${DOCKERLOGGING_MAXSIZE}\n labels:\n - org.hotio.pullio.update=${PULLIO_UPDATE}\n ports:\n - 8181:8181\n environment:\n - PUID=${PUID}\n - PGID=${PGID}\n - UMASK=002\n - TZ=${TZ}\n - WEBUI_PORTS=8181/tcp,8181/udp\n volumes:\n - ${DOCKERCONFDIR}/tautulli:/config\n\n```\n\nyou'll need an accompanying `.env` file for any of the `${ }` values, and a little bit of extra work if you do want to use a VPN for your torrent client (recommended). the TRaSH guide and hotio.dev docs for the qbittorent container linked below were very helpful in sorting all of that out. The TRaSH guide has [good base versions for both files](https://trash-guides.info/Hardlinks/How-to-setup-for/Synology/#needed-files).\n\n\ni also created some scheduled tasks. one runs `docker-compose up -d` on boot, so whenever my NAS restarts, these services will too. the other scheduled task runs [pullio](https://hotio.dev/scripts/pullio/) every weekend to keep these containers updated.\n\nin the future, i think i'm going to play around with self-hosting a discord server where i can send container updates / notifications to. potentially integrate with slash commands to add content to my library from anywhere, not necessarily just through the webui when connected to my home network. knowing me, i probably won't get to that for many months... but someday i will 😁\n\n## resources\nhuge shoutout to these links which really helped me sort it out along the way:\n\n- [TRaSH guides](https://trash-guides.info/Hardlinks/How-to-setup-for/Synology/)\n- [hotio.dev](https://hotio.dev/)\n- [pullio](https://hotio.dev/scripts/pullio/)\n- [*arr wiki](https://wiki.servarr.com/)\n- [fluance](https://www.fluance.com/) (for the speakers + record player)\n\n## 2025 update\nmy NAS stopped working after a power outage despite being connected to a UPS. it was beeping loudly hours before we were supposed to leave on a weeklong vacation, so I shut it off and told myself it was a future problem.\n\ncame home, rebooted, still no dice. the synology assistant showed the status as ready, but it was unreachable. after a lot of googling, it seemed like the power brick was the most likely culprit. seems to be a common failure, especially after running nearly non-stop for 4 years. so I ordered a new power brick & replaced the old one and everything booted up correctly (mostly) without issue! local plex server was back up and running for TV viewing, etc. \n\nHowever, I couldn't reach any of the services on my local network in the browser of my new computer. turns out I needed to update the privacy settings to allow Brave to reach items on the local network. Enabling that, and now everything worked as expected!\n\n $\"Image\"$ \n\nI've also given the NAS a custom domain via my router, so I can hit all the services by visiting `nas.home:` when on my home wifi. 😇","date":"2024-02-10T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/109","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/109/comments","title":"home theater service upgrades","created_at":"2024-02-11T00:04:34Z","updated_at":"2025-09-17T00:26:54Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/109/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"diy","tags":["plex sonarr radarr prowlarr"],"readingTime":"10 minutes"},{"type":"blog","frontmatter":{"title":"lessons from the storm","date":"2024-01-31T00:00:00.000Z","category":"note","tags":"diy homeownership winter preparedness","description":"portland's 2024 ice extravaganza"},"issueNumber":107,"slug":"lessons-from-the-storm","title":"lessons from the storm","description":"portland's 2024 ice extravaganza ","content":"\r\njanuary 12, portland is under a winter storm warning lasting through the morning hours of the 13th. our power went out for the first time later that afternoon. we were not the only ones. at the peak, at least 165k people in the portland metro were also without power from PGE. our power was permanently restored by the following friday. here's a short timeline of everything between and some lessons we learned.\r\n\r\n## timeline\r\n### saturday\r\npower went out at 3pm. this is not the first time the power at our house has gone out for winter storms, it did last year as well. but last year, it was restored within 36 hours. so we were naively expecting a similar outcome this time. we went to the local dive bar a short walk from our house, they always seem to keep power. ate warm dinner and slept in bed under all the blankets.\r\n\r\n### sunday\r\nhung out in our blanket lasagna for most of the morning. went back to the dive bar for lunch and to charge our phones. no communication from PGE yet, save the initial message confirming power was out. \r\n\r\nin the evening, we used our fireplace for the first time since moving into the house. burnt some scrap wood as i'd never stocked up on firewood. kept the fire going until around 3 am when we ran out of scraps.\r\n\r\n### monday\r\nit was very cold. the thermostat read 42° F indoors. we probably would have stuck it out another night with blankets, but our cat was absolutely miserable. we knew we had to get her someplace warmer. luckily my mom lives about an hour away and had space. so we got the car packed up with some spare clothes, toiletries, kitty supplies and hit the road about noon.\r\n\r\non the drive over, pge sent their first message estimating power restoration around 10pm tuesday.\r\n\r\n### tuesday\r\n\r\ni turned 32 in the basement of my mom's house. not exactly how i envisioned it but it was nice to be warm with family. \r\n\r\nthere were no additional comms from pge. i checked the outage map around 9:50pm and noticed the estimate had been updated to 10pm wednesday.\r\n\r\nat 11:58 pm i receive a text from PGE that power has been restored. but portland is now under a new storm advisory, this time for freezing rain through at least 6am. temperatures are forecast to start warming up, though.\r\n\r\n### wednesday\r\nwe clean up and prepare to return home around 1:30pm, giving the ice a chance to melt a bit. the roads were basically clear heading back, save for the shady portion of my mom's driveway.\r\n\r\nwe get home around 3pm, power is on, faucets are flowing. there's some minor flooding in the bathroom, presumably from faucets that were running for 10-15 hours. we get those shut off and cleaned up the remaining puddle (no visible damage yet 🤞) and start to do some laundry. the washer is not filling properly... it's in the garage and we forgot to drain the line before leaving. great. (worked fine once power was fully restored & temps warmed up)\r\n\r\npower goes out again at 6pm. estimated restoration time is thursday 10pm. we sleep on the couch with a mass of blankets and no fire. it's slightly warmer because the furnace had at least been running for half a day.\r\n\r\n### thursday\r\nwake up, still no power. the streets are relatively clear of ice and snow, at least. i head to a couple gas stations and big box stores looking for some firewood, but everywhere is cleared out. all i can find are these pre-cut swedish fire logs from lowe's. i grab three and head home.\r\n\r\nthis was probably stupid of us but we burn all three during the day hoping that pge sticks to their estimate. each burnt for about two hours. power was restored around 7pm. some periodic flickers for about an hour afterwards but it never went out. \r\n\r\nslept in bed with furnace going.\r\n\r\n### friday\r\n\r\nlost power again in the morning for about 2 minutes around 6:30-7 am. of course it came back. i worked all day friday for the first time this week. no issues with power at all during the workday. lost power again around 6pm. estimated 10pm restoration. restored about 15 minutes later, before 6:30. then we lost power again around 8pm. eta still 10pm. restored about 20 minutes later. it has stayed connected since. thank goodness.\r\n\r\n## lessons\r\n\r\nsome tips for when you have advance notice of a storm warning, etc\r\n\r\n- stock plenty of firewood in advance. if you have a working fireplace... be prepared to use it, even if you haven't.\r\n- charge battery banks. we have a few, but they weren't fully charged so didn't last as long as they could have.\r\n- phone on airplane mode whenever possible to preserve battery\r\n- if temps are freezing, set faucets to drip overnight. potentially shut water off entirely.\r\n- winterize outside hose spigots, if you haven't already done that for the season.\r\n- drain the water in the washing machine line. the garage gets colder than the house, obviously\r\n- the toilet may need winterizing too. our bathroom has a skylight, so it can get quite cold without power. the bidet attachment needed replacing. ($35, a million percent worth it)\r\n- have some kind of crampons for walking on ice. i ordered some yaktrax that can slip over your shoes or boots for easy on/off.","date":"2024-01-31T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/107","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/107/comments","title":"winter storm 2024","created_at":"2024-02-01T05:50:39Z","updated_at":"2024-02-01T05:51:37Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/107/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"note","tags":["diy homeownership winter preparedness"],"readingTime":"4 minutes"},{"type":"blog","frontmatter":{"title":"zoomable images","date":"2024-01-21T00:00:00.000Z","category":"technical","tags":"AST markdown html parsing","description":"baby's first AST plugin"},"issueNumber":95,"slug":"zoomable-images","title":"zoomable images","description":"baby's first AST plugin ","content":"\r\nI wanted a simple way to zoom in on images included in [gallery](/gallery) pages, like so:\r\n\r\n![a picture of my cat, Lulu](https://github.com/tjheffner/heffdotdev/assets/11279744/8b61412b-a402-4b74-851d-c7a1d11654de)\r\n\r\n Here's how I'm doing that with a little bit of CSS and some checkbox logic. By nesting the input and image inside the label, the whole thing is clickable for a simple zoom effect. And thanks to the checkbox, each image's zoom state is independent of all other images on the page.\r\n\r\n```html\r\n

\r\n \r\n \r\n $\"...\"$ \r\n \r\n

\r\n```\r\n\r\n```css\r\n/* zoomable images */\r\n.zoom input[type=checkbox] {\r\n display: none\r\n}\r\n\r\n.zoom img {\r\n transition: transform 0.25s ease;\r\n cursor: zoom-in\r\n}\r\n\r\n.zoom input[type=checkbox]:checked~img {\r\n transform: scale(1.65);\r\n cursor: zoom-out\r\n}\r\n```\r\n\r\nPretty nifty! The only issue now is that I store all of my images in Github issues. How can i make a markdown image (`![alt](src)`) into the html structure that I need? \r\n\r\nThanks to the [swyxkit](https://github.com/swyxio/swyxkit) base, this site is already set up with [mdsvex](https://mdsvex.com/), [remark](https://www.npmjs.com/package/remark) and [rehype](https://www.npmjs.com/package/rehype). Because we are interested in the HTML structure for this particular problem, we specifically want a plugin for **rehype**.\r\n\r\nIt was simple to write my own plugin to create the structure I needed. Also, major credit to [this comment](https://github.com/mrzmmr/rehype-wrap/issues/4#issuecomment-680143739) which got me 9/10ths of the way there.\r\n\r\nAnyway, here is the plugin:\r\n```js\r\nimport { visit } from 'unist-util-visit'\r\nimport { selectAll } from 'hast-util-select'\r\nimport { fromSelector } from 'hast-util-from-selector'\r\n\r\nexport default function rehypeZoomImages(options = { selector: 'img' }) {\r\n return (tree) => {\r\n for (const match of selectAll(options.selector, tree)) {\r\n visit(tree, match, (node, i, parent) => {\r\n const wrapper = fromSelector('div.zoom ')\r\n const label = fromSelector('label')\r\n const checkbox = fromSelector('input[type=\"checkbox\"]')\r\n\r\n node.properties.loading = \"lazy\"\r\n\r\n label.children = [checkbox, node]\r\n wrapper.children = [label]\r\n parent.children[i] = wrapper\r\n })\r\n }\r\n }\r\n}\r\n```\r\n\r\nWhen given an html AST (the \"hast\" in the dependencies above), we have a very structured tree to search through. Markdown from a Github issue is fed through `mdsvex` using my configured `remark` & `rehype` plugins. Slotting the above plugin into the list means all `` selectors present in the tree will be wrapped with my desired html structure for zoomable images. A `

` that contains a ``, and that label is the parent of the checkbox `` that controls state, plus the original `` node that was found. While i'm here, I also add the `loading=\"lazy\"` attribute to the img node because my gallery pages tend to be quite image heavy.\r\n\r\n Here's a [great primer on how ASTs work for HTML](https://css-tricks.com/how-to-modify-nodes-in-an-abstract-syntax-tree/) if you want to know more.","date":"2024-01-21T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/95","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/95/comments","title":"zoomable images","created_at":"2024-01-21T12:00:21Z","updated_at":"2024-01-22T03:40:11Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/95/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"technical","tags":["ast markdown html parsing"],"readingTime":"3 minutes"},{"type":"blog","frontmatter":{"title":"early 2024 site updates","date":"2024-01-20T00:00:00.000Z","category":"technical","description":"spoiler: gallery section is live! and more!"},"issueNumber":84,"slug":"early-2024-site-updates","title":"early 2024 site updates","description":"spoiler: gallery section is live! and more! ","content":"\r\n2024 has been a year already and we're only three weeks in. i've been mostly without power for the last six days, which i will cover more thoroughly in a different post. this post is not about that. this post is about the cool things i've done to this site already this year. i was working on adding [gallery](/gallery) pages to the site when i lost power. when i got power back... i still felt the itch. and so it is done. \r\n\r\ni've stubbed out the initial gallery pages for now, and they're pretty empty... but in the coming weeks, i'll actually add photos and context. neat!\r\n\r\ni also did a decent refactor on how pages are pulled in from the github issue queue, so it should be even easier for me to add additional page types in the future, if i want to. maybe.\r\n\r\ni think i fixed the generated og images on a lot of the main pages... i had forgotten to add it to their metatags 🤦 \r\n\r\nalso refactored the mobile menu colors and link construction. the mobile menu is the only place the [blogroll](/blogroll) is currently surfaced... maybe it's too hidden, but it felt a little cramped in the footer.\r\n\r\ni even went ahead and fixed the [rss feed](/rss.xml) and created a [sitemap](/sitemap.xml). i styled the rss feed based on [this blog post](https://darekkay.com/blog/rss-styling/) from darek kay. i tried to style the sitemap in a similar fashion, but it isn't quite working yet. that'll happen this year too. maybe add these two and the blogroll to the footer menu, we'll see.\r\n\r\ni don't know where this rush of energy to do these things came from, but i am not complaining. you have to ride it while you've got it. who knows how long until it comes back round again?\r\n\r\nnext up on features for this site:\r\n- updating gallery pages with actual content\r\n- fixing the blog search page, updating filters\r\n- maybe a theme refresh\r\n\r\n\r\nuntil next time ✌️","date":"2024-01-20T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/84","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/84/comments","title":"early 2024 site updates","created_at":"2024-01-20T09:29:42Z","updated_at":"2024-01-20T09:40:09Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/84/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"technical","tags":[],"readingTime":"2 minutes"},{"type":"blog","frontmatter":{"title":"penne alla vodka","date":"2024-01-20T00:00:00.000Z","category":"recipe","tags":"pasta sauce tomato tomatoes blender","description":"it's worth the tiny bit extra effort over regular red sauce"},"issueNumber":83,"slug":"penne-alla-vodka","title":"penne alla vodka","description":"it's worth the tiny bit extra effort over regular red sauce ","content":"\r\nreally kicking myself for not having made this before now. i blame it on two things-- my not buying cream all that regularly, and not really a vodka drinker. so it never crossed my mind. but it's insanely delicious and absolutely worth the tiny bit more effort than a regular red sauce (maybe even less effort, but slightly more dishes to clean).\r\n\r\nbasically--\r\nboil some water for penne pasta. while that's getting started, sweat diced onions in butter, add tomato paste. let it meld a bit, add garlic, and whole peeled tomatoes. a spoonful of pesto. let all that meld together for 10-15 minutes, crushing the whole tomatoes as you stir. then add like a cup of cream and bust out the immersion blender, pureeing until it's smooth.\r\n\r\nabout 3 minutes before the pasta is al dente, add a shot of vodka into the sauce and keep stirring. too much vodka will ruin the dish, don't do that. add salt and pepper to taste. transfer pasta directly to the sauce, adding pasta water as needed to keep the sauce silky.\r\n\r\nserve hot with some parmesan or other similar hard white cheese and enjoy !","date":"2024-01-20T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/83","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/83/comments","title":"penne alla vodka","created_at":"2024-01-20T09:19:19Z","updated_at":"2024-01-20T09:19:23Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/83/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"recipe","tags":["pasta sauce tomato tomatoes blender"],"readingTime":"1 minute"},{"type":"blog","frontmatter":{"title":"creme brulee","date":"2024-01-07T00:00:00.000Z","category":"recipe","tags":"dessert","description":"no torch required"},"issueNumber":57,"slug":"creme-brulee","title":"creme brulee","description":"no torch required ","content":"\r\nThis is a stand-alone post for the creme brulee recipe listed as part of the [christmas dinner walkthrough](/christmas-2023).\r\n\r\n| ingredient | amount |\r\n| :--- | --- |\r\n| eggs | 6 yolks |\r\n| brown sugar | 3/2 cups |\r\n| rum | 1 oz |\r\n| vanilla extract | 1 tbsp |\r\n| milk | 1 cup |\r\n| cream | 1 cup |\r\n\r\nAll of those combine into something magical.\r\n\r\nFirst, prepare the six oven-proof ramekins on a cookie sheet. Preheat the oven to 300°F.\r\n\r\nThen add the rum, milk, cream, and vanilla together in a small saucepan and bring to a boil. If \r\n\r\nWhile the liquids are heating, mix the eggs and sugar together in a large mixing cup. \r\n\r\nOnce boiling, remove from heat and gently stir for a while, maybe ten minutes. This cooks off the alcohol in the rum without curdling the milk.\r\n\r\nAfter the booze has evaporated, slowly stir in the milk mix to the sugary eggs. Once everything is combined and the sugar is dissolved, pour the mixture into the prepared ramekins and bake in the oven for 30 minutes.\r\n\r\nLet cool to room temperature and place in the fridge to chill for at least one hour (overnight is fine if making in advance).\r\n\r\nWhen it's time to eat, set the oven to broil at 450F. Spoon a layer of brown sugar on top of each ramekin and place them under the broiler for ~6-10 minutes, depending on your oven. The sugar should crystallize under the broiler to provide that nice \"tap tap\" sound when hit with a spoon. \r\n\r\nServe hot, it helps to put them on a small plate.\r\n\r\n","date":"2024-01-07T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/57","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/57/comments","title":"creme brulee","created_at":"2024-01-07T22:11:10Z","updated_at":"2024-01-13T06:56:20Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/57/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"recipe","tags":["dessert"],"readingTime":"2 minutes"},{"type":"blog","frontmatter":{"title":"new year post","date":"2024-01-07T00:00:00.000Z","category":"note","tags":"personal diy goals","description":"2023 recap, 2024 goals, things of that nature"},"issueNumber":56,"slug":"new-year-post","title":"new year post","description":"2023 recap, 2024 goals, things of that nature ","content":"\r\n\r\n2023 was not a good year globally but 31 was a pretty good one overall for me personally. highs and lows, but mostly highs!\r\n\r\nto wit, 2023 had all of this in store for me:\r\n- spent an incredible month in [japan with randi <3](/gallery/japan)\r\n- finished a bunch of house projects [painted most rooms, plumbing re-piped, [home theater system](/home-theater-services), re-arranged living room, patio furniture, garage re-org, ...]\r\n- started a tradition for monthly family dinners to get us all together more\r\n- hosted [christmas dinner](/christmas) for the fam for the first time\r\n- launched the [medical bill rights sub-site](/work/medical-bill-rights) for centers for medicare & medicaid services\r\n- hired as tech lead for a meaningful VA project\r\n- grandpa passed away after a long battle with dementia\r\n- traveled the most since covid lockdowns (spent time in japan, mexico, seattle, arizona, and indiana)\r\n\r\nand a ton more i'm almost certainly forgetting here. but suffice to say, it was a very busy year! if i have my way, 2024 will be more of the same. (minus the month-long ramble across japan... if only)\r\n\r\nhere are some things i'd like to accomplish in 2024:\r\n- build a sauna in the backyard\r\n- tend to the plants better, both indoors & out.\r\n- eat more out of the garden\r\n- exercise more consistently\r\n- set a new personal best at dabney. current best is: -5 under, average round is between 0-2 over\r\n- post more things to this page & add some features\r\n- launch my current project at the VA to production\r\n- re-do the closets (3 bedrooms, 1 hallway, 1 electrical)\r\n\r\nif i can get those things done i'll probably feel 2024 is a good year for me too.\r\nif i can't get those things done in the coming year, well, there's always next year 😄 ","date":"2024-01-07T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/56","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/56/comments","title":"new year post","created_at":"2024-01-07T21:32:31Z","updated_at":"2024-02-11T18:31:38Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/56/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"note","tags":["personal diy goals"],"readingTime":"2 minutes"},{"type":"blog","frontmatter":{"title":"christmas 2023","date":"2023-12-26T00:00:00.000Z","category":"recipe","tags":"duck orange mushroom risotto winter salad potato soup","description":"general walkthrough of all dishes"},"issueNumber":54,"slug":"christmas-2023","title":"christmas 2023","description":"general walkthrough of all dishes ","content":"\r\nMy family does a monthly dinner, rotating between our households for hosting rights. It landed on my house for December, so we hosted [Christmas Dinner](/christmas). Here's how we set ourselves up for a relatively stress-free day in the kitchen.\r\n\r\n**The week leading up to the dinner**, my partner made most of the assorted desserts: \r\n- coconut balls \r\n- meringue cookies (lemon and vanilla)\r\n- almond roca\r\n- chocolate bark with peanuts\r\n\r\n**The day before**, I made some creme brulees and the vinaigrette for the salad. I also cooked a package of bacon for the soup.\r\n\r\nThe vinaigrette comes together very quickly: the juice from two lemons, dried cranberries, a little olive oil, some dijon mustard, salt and pepper to taste. Mix everything together with an immersion blender until the mixture is homogenous and reserve in a jar. It will keep in the fridge for a week or so.\r\n\r\nThe creme brulee is six egg yolks, a cup and a half of brown sugar, a shot of rum, tablespoon of vanilla, cup of milk, cup of cream. Add the rum, milk, cream, and vanilla together in a small saucepan and bring to a boil. While the liquids are heating, mix the eggs and sugar together in a mixing cup . Once boiling, remove from heat and gently stir for a while, maybe ten minutes. This is to cook off the alcohol in the rum without curdling the milk. Then slowly stir in the milk mix to the sugary eggs. Once everything is combined and the sugar is dissolved, pour the mixture into six ramekins and let cool. Once cooled, place in the fridge to chill overnight.\r\n\r\n**The day of**, first thing was starting the soup in the crockpot. It takes at least four hours on high, so I wanted to get it going early. Dice up an onion and put it in a skillet with some oil on low. Stir every once in a while so they don't burn. While the onions are sweating, dice up fifteen or so potatoes into smallish (~1-inch) chunks. Put the potatoes and onions in the crock pot, a bunch of thyme, some bay leaves, salt & pepper to taste. Two quarts of chicken stock and forget about the soup for a while.\r\n\r\nOnce the soup was started, I made the marinade for the duck breasts. It was 2/3 cup OJ, 1/3 cup soy sauce (tamari for gluten-free), and three or four heaping spoonfuls of honey. Mix that all together so the honey dissolves. Score the fat on the duck breast in a crosshatch and put everything into a ziploc bag. Place back in the fridge until 30 minutes or so before cook time.\r\n\r\nNext I started preparing the charcuterie board, slicing salamis and cheeses with some fruits and crackers and arranging on the board. This wasn't on the menu but was nice to have anyway. At this step I also sliced an orange into very thin slices, both for the duck garnish as well as some cocktails (Prosecco + cranberries + orange slice + rosemary. They were a hit).\r\n\r\nI also started soaking some dried porcini mushrooms and chopped another white onion for the risotto. These I kept off to the side until I needed them.\r\n\r\nWith all of this prepared, it was time to relax for a couple hours. When the crockpot timer for the soup is done, scoop out some of the potato chunks (optional, but I like some chunks) and the bay leaves. Add a little bit of heavy cream, then blend until smooth. Add the potato chunks back in plus some chopped bacon. It's ready to serve whenever at this point. I had tiny bowls of chives, cheese, bacon and sour cream available as toppings.\r\n\r\nAfter the soup course, I chopped a red onion and two apples. These went into a bowl with some mixed greens, chopped walnuts, dried cranberries, and a little bit of parmesan. I tossed everything together without the vinaigrette so people could add their own in the amounts they desired at the table. I began preheating the oven here, to 400 F.\r\n\r\n**The main course was the only real timing challenge of the day**, getting the duck breasts, risotto, and baked vegetables ready to serve at the same time. First, popped the veggies (a sheet pan of broccoli, brussels, onions, sweet potatoes) into the oven. These will be in there for 40 minutes or so, flip halfway. Then I strained the soaking mushrooms (reserve the liquid!) and chopped them small. Saute the onions and mushrooms in an instant pot with some butter. Stir occasionally so they don't burn. The instant pot is cheating when it comes to risotto. It makes the process dead simple. \r\n\r\nNow that the veggies are in and the risotto veggies are sauteing, start the duck breasts in a cold pan, skin side down. Keep the marinade in the ziploc, it will become the pan sauce. The duck will stay skin side down for 10-15 minutes. It took closer to 20 minutes for me, because the pan was crowded with 5 breasts. While the duck is cooking, we'll return to the risotto. \r\n\r\nStir in two cups of arborio rice. It needs to be this type of rice for risotto, it's starchier and is what helps make it creamy. Once the rice has been thoroughly coated with butter, add the reserved mushroom liquid and some chicken stock. Then put the lid on and lock it. Set the pressure timer to 5 minutes, that's all it takes!\r\n\r\nThe duck is probably ready to flip by now, it's okay to check. The skin should be brown and crispy, but not burnt. Flip the breasts over and cook for an additional 3-4 minutes. The temperature should be around 135-140 F internal before removing to rest for 10 minutes. The meat will continue to cook while it rests.\r\n\r\nOnce the duck is removed, drain off most of the fat from the pan and add the reserved marinade over medium heat. Add a little bit of cornstarch to help thicken. Stir occasionally.\r\n\r\nThe risotto timer should have ended by now, and be naturally releasing. If the pressure hasn't fully released yet, do so manually. Then remove the lid and add some parmesan cheese (and chopped parsley, if desired). Stir to incorporate, it should be creamy with very little work!\r\n\r\nRemove the veggies from the oven, and assemble plates with risotto, veggies, duck breast, pan sauce and garnish with an orange slice. Dinner is served!\r\n\r\n**After dinner, set the oven to broil at 450F**. Spoon a layer of brown sugar on top of the creme brulees and place them on a cookie sheet under the broiler for ~6-10 minutes, depending on your oven. They should crystallize to provide that nice crack when hit with a spoon. Serve hot, it helps to put them on a small plate.\r\n\r\nAnd that's how we prepared and served a four course [Christmas menu](/christmas) for 5 with very little fuss! Bon appetit!","date":"2023-12-26T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/54","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/54/comments","title":"christmas 2023","created_at":"2023-12-27T01:45:07Z","updated_at":"2023-12-27T02:11:04Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/54/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"recipe","tags":["duck orange mushroom risotto winter salad potato soup"],"readingTime":"6 minutes"},{"type":"blog","frontmatter":{"title":"og images in svelte component deployed to netlify","date":"2023-03-12T00:00:00.000Z","category":"technical","tags":"snippet","description":"clean unfurl images dynamically generated"},"issueNumber":50,"slug":"og-images-in-svelte-component-deployed-to-netlify","title":"og images in svelte component deployed to netlify","description":"clean unfurl images dynamically generated ","content":"\n> **2025 update:** Svelte 5 server functions have improved a bit, so there were some small updates needed to render OG images again. the way fonts load and the way html is rendered on the server is a bit simpler now. the updated code can be [found here](https://github.com/tjheffner/heffdotdev/blob/main/src/routes/api/og.png/%2Bserver.ts).\n\n\n\nRecently added dynamic og:images to this website thanks to [the very straightforward blog post from Geoff Rich](https://geoffrich.net/posts/svelte-social-image/). I won't rehash everything here, I recommend you read that, it is a pretty nifty approach and works swimmingly!\n\nThings to keep in mind:\n- `satori` does not support all the background-image options, so a lot of fancy gradient magic is out of the question\n- If deploying to netlify (like I am for this site), update your `netlify.toml` to include the resvg library as an external node module. Otherwise the build will fail when deployed, even if it works locally.\n\n```yml\n[functions] \n external_node_modules = [..., \"@resvg/resvg-js\"]\n```\n\n- pulling images and fonts may require some extra handling for vite, satori, or svelte, depending on how your project is configured.\n- you may need to sanitize or encode titles if you have special symbols in them (`&` doesn't play nicely ootb, for instance)\n\nAll in all though, pretty simple to add and makes such a huge difference as a touchpoint into your website. Definitely worth the time to set up.","date":"2023-03-12T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/50","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/50/comments","title":"og images in sveltekit + netlify","created_at":"2023-03-12T23:48:12Z","updated_at":"2025-07-06T23:14:46Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/50/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"technical","tags":["snippet"],"readingTime":"1 minute"},{"type":"blog","frontmatter":{"title":"tinned fish pesto pasta","date":"2023-03-11T00:00:00.000Z","category":"recipe","description":"quick and tasty pantry dinner"},"issueNumber":47,"slug":"tinned-fish-pesto-pasta","title":"tinned fish pesto pasta","description":"quick and tasty pantry dinner ","content":"\r\nthis dish comes together in a flash, with ingredients lying around in your pantry. a box of pasta, a tin of fish packed in oil (mackerel is a favorite, sardines work great, tuna is fine), and some pesto makes for a delightful time with very little work.\r\n\r\nbring a pot of water to a boil, salt heavily (or to your taste), add pasta. cook to al dente as indicated on the box.\r\n\r\nwhile the pasta is cooking, prepare the sauce. you can do this two ways: in another pan, or in a metal bowl placed over the boiling pot, double boiler style. if you choose the second route, be sure that there is room for the bowl to sit on the pot without touching the water-- otherwise you will constantly be juggling the bowl on and off the heat to stir the pasta, and potential of spills when it boils over. \r\n\r\neither which way you choose, put some olive oil in along with some minced garlic. then add spinach, pesto, and a spoonful or two of capers and stir taking care not to burn any of the garlic. once the spinach is starting to wilt, add your tinned fish and its oil. stir everything up without breaking down the fillets of fish too much. if the spinach is wilted too much, or you have a lot of pasta, feel free to add more handfuls in here. it'll be fine. you can add whatever else you like to the pan, this is just a good base. it's good with olives, artichoke hearts, sun dried tomatoes, cherry tomatoes. whatever tickles your fancy (and happens to be in your pantry).\r\n\r\nspeaking of pasta, it's probably close to being done by now. reserve a cup of the pasta water and drain the rest. toss the pasta into the sauce (whether in pan or bowl) and mix everything up nicely. grate some hard white cheese (parmesan, pecorino, or the like) over the mixture, adding pasta water in small amounts to help everything come together. add black pepper to taste. serve hot!\r\n\r\nreheats the next day fine, but i wouldn't freeze it","date":"2023-03-11T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/47","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/47/comments","title":"tinned fish pesto pasta","created_at":"2023-03-12T07:34:56Z","updated_at":"2023-03-12T07:45:02Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/47/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"recipe","tags":[],"readingTime":"2 minutes"},{"type":"blog","frontmatter":{"title":"parent :has() stateful child","date":"2023-02-26T00:00:00.000Z","category":"technical","tags":"snippet css css4","description":"style based on child state with pure css"},"issueNumber":45,"slug":"parent-has-stateful-child","title":"parent :has() stateful child","description":"style based on child state with pure css ","content":"\r\nGiven some DOM like this:\r\n```html\r\n

\r\n \r\n Choice 1\r\n

\r\n```\r\n\r\nyou can do something like:\r\n```css\r\n.field-wrapper:has(input:checked) {\r\n /* ...changes that apply to the whole wrapper... */\r\n}\r\n```\r\n\r\nwithout fiddling with classes based on child state bubbling up to the parent in js. \r\n\r\nIn this way we can get a nice recolor on the parent wrapper based on child state without any fiddling with adding or removing classes:\r\n![A list of three checkbox inputs displaying different states: Checked, unchecked, and disabled.](https://user-images.githubusercontent.com/11279744/224521143-daf0b17c-7430-4950-af98-10a4966c7f44.jpeg)\r\n\r\n\r\nNote: [`:has()` is not available in FF, yet](https://caniuse.com/?search=%3Ahas()). In the mean time, if you want a CSS solution to this problem for all browsers, you probably want to put all the stateful changes on the `` element and use the CSS sibling selector:`.checkbox__input:checked+.checkbox__label { ... }`.","date":"2023-02-26T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/45","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/45/comments","title":"parent :has() stateful child","created_at":"2023-03-12T02:41:37Z","updated_at":"2023-03-12T02:44:07Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/45/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"technical","tags":["snippet css css4"],"readingTime":"1 minute"},{"type":"blog","frontmatter":{"title":"preserved lemons","date":"2022-011-15 00:00:00","category":"recipe","description":"flavor powerhouse"},"issueNumber":44,"slug":"preserved-lemons","title":"preserved lemons","description":"flavor powerhouse ","content":"\r\ntwo words. lemon season. preserved lemons. lemons, salt. closed jar. two months. home run.\r\n\r\nin more than two words: quarter lemons, pack them into a mason jar with salt in alternate layers. fill the top of the jar with any leftover lemon juice. seal. flip the jars daily for the first week or two then leave them alone for another month and a half. \r\n\r\nafter waiting, the lemons will be preserved and absolutely incredible. i like to add the full lemon in things, but it can be very salty in the flesh, so it's okay to scrape it off and only use the rind. you can also rinse briefly under running water to remove excess salt.\r\n\r\nadd preserved lemons to a dizzying number of dishes for a hit of bright flavor. i like to add a wedge into stews and soups (particularly the [chicken and bean stew](https://www.heffner.dev/southwest-chicken-bean-stew). it's great in pasta sauces and with seafood. you can even get away with putting some into eggy dishes for a refreshing lightness.","date":"2022-11-15T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/44","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/44/comments","title":"preserved lemons","created_at":"2022-11-16T06:53:15Z","updated_at":"2023-03-12T07:20:49Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/44/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"recipe","tags":[],"readingTime":"1 minute"},{"type":"blog","frontmatter":{"title":"shrimp and rice","date":"2022-11-13T00:00:00.000Z","category":"recipe","tags":"extra context after category","description":"one pan deliciousness"},"issueNumber":43,"slug":"shrimp-and-rice","title":"shrimp and rice","description":"one pan deliciousness ","content":"\r\nthis is a simple one-pan shrimp and rice dish for those nights you don't want to do a whole lot of cooking. it's pretty adaptable to your spice and flavor levels too, which is nice. here's what you'll need: \r\n- 1 box of chicken rice a roni (or your own rice, plus chicken bullion instead of the seasoning packet)\r\n- 2 1/2 cups of veggie stock (or water)\r\n- a bell pepper or two\r\n- a large onion\r\n- half a stick of butter\r\n- couple cloves of garlic\r\n- tony chachere's creole seasoning (love this stuff)\r\n- 15-20 uncooked frozen shrimp (i get the costco bag, perfect for this)\r\n- a jalapeno (optional)\r\n\r\nok. in a large saucepan melt the butter and then add the diced onion. let it sweat a bit, then add the rice-a-roni. toast the vermicelli a bit, and add the chicken bullion to the mix if you're using it. chop the rest of the veggies. add the liquid to the pan, then your veggies. dump in the seasoning packet and your desired amount of tony's. i like to add a bunch of good shakes, give it a little heat. but i add less because my girlfriend doesnt like it as spicy, and the jalapeno rounds it out nicely. bring it to a boil, then add the frozen shrimp and cover. reduce the heat to medium and let it cook for 20-25 minutes, until the shrimp are done and the rice is cooked. all in all, it takes about 35 minutes, counting the cook time. pretty simple for something so tasty!\r\n","date":"2022-11-13T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/43","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/43/comments","title":"shrimp + rice","created_at":"2022-11-14T05:03:19Z","updated_at":"2022-11-14T05:03:31Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/43/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"recipe","tags":["extra context after category"],"readingTime":"2 minutes"},{"type":"blog","frontmatter":{"title":"sveltekit upgrade","date":"2022-11-11T00:00:00.000Z","category":"technical","description":"pluskit is a go"},"issueNumber":41,"slug":"sveltekit-upgrade","title":"sveltekit upgrade","description":"pluskit is a go ","content":"\r\nRecently spent some time updating this blog to accommodate all the recent breaking changes from sveltekit this summer. overall a relatively painless process on the sveltekit side of things-- there was an easy migration helper (`npx svelte-migrate routes`) that handled most of the dirty work and left helpful messages for the rest of the things to carry over. there were also a number of packages to be updated.\r\n\r\nso i updated my packages, ran the migration helper, fixed those things, and everything worked fine locally and when running `npm run build && npm run preview`. yay! the real issue arose when deploying to netlify again-- the sveltekit netlify adapter seemed to have issues around bundling for esm. the latest auto adapter also used the netlify adapter, so same issues. i spent a good chunk of time going down these rabbit holes, and then i saw a note in the [swyxkit readme](https://github.com/sw-yx/swyxkit) (which this blog is based on!) that says: `This project recently switched to use sveltejs/adapter-auto (Oct 2022: currently pinned to v72 https://github.com/sveltejs/kit/issues/6440#issuecomment-1269274541)` and that was the silver bullet. Pinning to that version, everything worked when deployed too!\r\n\r\nthe new routing system in sveltekit seems pretty powerful, and while there are slightly more files it's easier to find things based on filesystem than a couple of underscores as reserved file names. I'm excited to test the layout break-outs in the future, as things on this site grow. it'll get there eventually. thanks!","date":"2022-11-11T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/41","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/41/comments","title":"sveltekit upgrade","created_at":"2022-11-11T18:35:04Z","updated_at":"2022-11-11T18:44:23Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/41/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"technical","tags":[],"readingTime":"2 minutes"},{"type":"blog","frontmatter":{"title":"savory toast","date":"2022-11-06T00:00:00.000Z","category":"recipe","description":"simple toast with the most"},"issueNumber":34,"slug":"savory-toast","title":"savory toast","description":"simple toast with the most ","content":"\r\nsome quick and dirty toast that tastes delicious:\r\n\r\n- toast two slices of bread of your choice. i have 9 grain whole wheat, good stuff\r\n- layer of pesto\r\n- cut up a hard boiled egg and place on the pesto\r\n- top with some sun dried tomatoes + their oil\r\n\r\nyou can swap the hard boiled egg for some tinned fish (sardines, etc) if you want even more savory toast, more of a lunch snack than a breakfast toast. still delish.\r\n\r\nbon appetit!","date":"2022-11-06T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/34","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/34/comments","title":"savory toast","created_at":"2022-11-09T16:50:43Z","updated_at":"2022-11-09T16:50:48Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/34/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"recipe","tags":[],"readingTime":"1 minute"},{"type":"blog","frontmatter":{"title":"hummus","date":"2022-07-16T00:00:00.000Z","category":"recipe","tags":"dip spread delicious tasty easy adaptable veggie vegetarian","description":"so easy you'll never buy pre-made again"},"issueNumber":33,"slug":"hummus","title":"hummus","description":"so easy you'll never buy pre-made again ","content":"\r\na cheap and easy delicious staple to have on hand, this recipe comes together in minutes and is easily adaptable to whatever extra flavors you want to add or showcase. here's what you'll need: **two cans of garbanzo beans, olive oil, tahini, half of a lemon, garlic, salt, and a food processor.** just these ingredients will get you there for a deliciously simple hummus. i like to add some paprika and cumin to mine, sometimes some red pepper, maybe really heavy on the garlic... perhaps some kalamata olives. the point is, it's a very dependable and adaptable base from which to build to your palate's content. here's how to do it: [spoiler: a lot of pulsing with a food processor]\r\n\r\n**open and drain the cans of garbanzo beans while reserving the liquid from one can.** dump the drained beans into the food processor. **add cloves of garlic** or a spoonful or two of the pre-minced stuff. **a heaping spoonful of tahini.** this is basically sesame nut butter, it helps thicken the hummus and provide some body. you can usually find it in the kosher section of the grocery store. next **add a few healthy glugs of olive oil**. pulse the processor a few times to start breaking up the beans. they'll be pretty chunky still. **squeeze in the lemon juice** taking care not to include the seeds, and **add your spices** if you want. i like paprika, cumin, cayenne pepper, harissa, etc.. go light on the salt at first, tasting as you go. it's a lot harder to remove salt than add it ;) once your initial spices are in, **start slowly adding the reserved liquid and pulsing until the hummus gets to a consistency you like.** it should be thick but not necessarily chunky (unless you like it that way!) and stick to a chip, not runny like soupy beanwater.\r\n\r\nmy advice is to **taste as you go** and adjust as necessary. **add more spices, liquid, tahini as needed.** usually a dash or two of salt at the end ties it all together. if you're using other ingredients (like olives, roasted red bell peppers, mama's lil peppers, obscene amounts of garlic, etc.) include some chopped in the early stages when you are initially pulsing the beans, and save some more to set on top of the finished product if you want a fancier presentation.\r\n\r\nthat's all there is to it!","date":"2022-07-16T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/33","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/33/comments","title":"hummus","created_at":"2022-07-17T04:07:17Z","updated_at":"2022-07-17T04:09:18Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/33/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"recipe","tags":["dip spread delicious tasty easy adaptable veggie vegetarian"],"readingTime":"2 minutes"},{"type":"blog","frontmatter":{"title":"some new homeowner tips","date":"2022-07-14T00:00:00.000Z","category":"diy","tags":"first time home owner pro tip diy quality of life","description":"the things that really made a difference fast"},"issueNumber":32,"slug":"some-new-homeowner-tips","title":"some new homeowner tips","description":"the things that really made a difference fast ","content":"\r\ntwo and a half months in, here are the things that have made the biggest impact so far. some probably pretty obvious and perhaps some not so obvious\r\n\r\n- **rekey your locks (& new garage door opener).** we also upgraded the front door to a keypad lock that can be used with just a key also. not wifi connected, i'm not about that life. no \"smart\" appliances in my home please and thank you. it's great to be able to go for walks in the neighborhood and not worry about keys at all.\r\n- **put the little felt floor slider pads on your furniture.** e.g. one on each leg for chairs around the table. what a simple but wonderful improvement being able to smoothly slide your chair with no screeching or scratching.\r\n- **countertop kitchen compost bin**. if you have the space on your countertop, a little compost bin by the sink is a great way to cut down waste. i empty ours about once a week into a larger compost bin in the yard and in turn recycle that compost back to the garden. it also greatly reduces the smell of the other trash (that collects much slower without all the food waste).\r\n- **yellow butterflies and mosquito bits** will take care of any and all fungus gnat problems you inherit from gifted houseplants or box store soil. put a few butterflies around your pots to catch the live adults. steep some mosquito bits in hot water for half an hour and then water your plants with that, and you'll take care of any eggs laying around. repeat as necessary weekly until bye bye gnats.\r\n- **fix the little things that annoy you as soon as you can.** you'll feel so much better afterwards. like a squeaky blinds cord or re-aligning a door that's slightly off... just take the time to fix it. very few of these problems take more than a few minutes to solve and your peace of mind will thank you.","date":"2022-07-14T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/32","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/32/comments","title":"some new homeowner tips","created_at":"2022-07-15T02:28:07Z","updated_at":"2024-03-22T04:57:20Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/32/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"diy","tags":["first time home owner pro tip diy quality of life"],"readingTime":"2 minutes"},{"type":"blog","frontmatter":{"title":"first time homebuyer recap","date":"2022-07-06T00:00:00.000Z","category":"note","tags":"mortgage finance bills home","description":"a look back at the first two months and the costs"},"issueNumber":27,"slug":"first-time-homebuyer-recap","title":"first time homebuyer recap","description":"a look back at the first two months and the costs ","content":"\r\n## intro\r\n\r\nI was extremely lucky to find and close on a house we loved this April. Owning my own home was a five year goal for 26 year-old me and I stuck the landing just over four years later. It was a bit of a hectic process start to finish considering *gesturing to everything* but with some perseverance and luck we got it done. After aspirationally scrolling zillow and redfin listings for two years of the pandemic and seeing prices rise and rise and rise, I FOMO'd in and [found a realtor](http://www.jmaproperties.com/) to start my search in earnest.\r\n\r\nThat was near the middle of February. We spent 4 weekends looking at various houses all around the Portland metro area, I think ultimately looking at 15-20 houses. Most would go on to sell within a week or two. It was literally that fast. Houses would get listed on a Wednesday or Thursday and have pending sales by Sunday. I submitted offers for three houses in total, and was significantly outbid with cash offers on two of them. Like these were $180,000 homes in 2013 listing for $400,000 in 2022. And selling to cash buyers for anywhere between 50-100k over asking, with another 7-10 offers waiting in the wings. Insane! How does anyone compete with that?\r\n\r\nWe found this absolute gem of a property (3b/1ba, central air, skylights, large covered deck, mature fruit trees and raised garden beds, roses of every color) right on the cusp of the city limits, and thanks to some divine intervention our offer was accepted. The previous owners were an orthodox denomination and did no work on the Sabbath, which they observe from Friday sundown to Sunday sunrise. So in a stroke of pure luck/realtor savvy, we saw the house Friday afternoon before the cutoff and submitted our offer that night. It was nerve-wracking waiting until Sunday (when they had an open house planned already!), but we got the news later that morning-- We were the highest of three offers... and we beat the second highest offer by only four grand! They still held the open house, which also was a bit stressful... what if a higher offer came in? Our offer of $444,000 held, and the real process could begin.\r\n\r\n## buying process\r\n\r\nSo our offer was accepted. Next came the inspections and the financing. I'll cover the latter in a bit. We had two inspections, a full inspection and a follow-up electrical inspection because the previous owners had a ton of their stuff in the garage at the time of the first one that blocked the electrical panel. The house was in great shape, obviously well-loved with a few miscellaneous things here and there and just a tiny bit of mold in the attic because the bathroom wasn't vented properly. They call it \"potential growth\" because no one wants to say the m-word during this process. That's a whole other can of worms. We got a quote for fixing that and the sellers credited us that much of our offer. Our realtor went back and forth with their realtor on some of the random tasks, getting contractors scheduled to fix stuff our inspector found, drafting documents and agreements etc. This is where having a great realtor (and/or lawyer) shines, I didn't have to do much during all of this, just a few phone calls with my realtor as she wrangled all the finer details. Which was great, because all of this took about a month and was happening concurrently with the financing side... which is where I had to do a lot more.\r\n\r\n## financing process\r\n\r\nThis is where I made probably my biggest mistake of the whole process, I didn't shop around terribly hard to find a lender / the best rate available. I googled a few banks and checked my credit union but ultimately I went with the lender my realtor recommended, because the first house we offered on needed a \"fast close\" and she said they could do it in two weeks. Crazy town. We were outbid on that house by at least 75k in cash and there were 10 offers total, so it didn't matter in the slightest anyway. But when we got to the next houses, they said the numbers would work out similarly (actually better, we ended up buying a cheaper house than the one we missed on) and it seemed reasonable enough to me and my budget, so I didn't search too hard to see what other rates I might have gotten. I'd already submitted documents and my realtor had worked with them before, so I went with it. \r\n\r\nI had to submit a bunch of documents showing my finances, various bank account statements, credit check, tax forms, etc. It was a lot. But we got through it, everything checked out and financing was approved. I ultimately locked in a 4.49% rate on a 30 year fixed for $416,000. Definitely nothing to sneeze at, but it works out to ~2600/month PITI.... Just slightly higher than the rent we were paying, for a much worse living situation. Absolutely worth it in my mind to be building equity and not having to ask a landlord permission to do all the projects we've been dreaming up over the past few years... like putting in [rain barrels](https://www.heffner.dev/rain-barrels), or getting chickens. This house has so many small quality of life improvements in various areas it truly adds up to a monumental shift. It's so much brighter, better ventilated & less drafty, no leaks, quieter neighborhood, cleaner, etc. In hindsight it's wild I rented at the location I did as long as I did. My mental health has improved so drastically in such a short time I almost don't believe it. As I write this, 30 year fixed rates are now hovering around 6.0% so I feel like I beat the buzzer a little bit, even if I wasn't ready to purchase when rates were bottoming out in the 2s and low 3s earlier in the pandemic.\r\n\r\nWhile everything described above is ongoing, you submit \"earnest money\" early on, which basically signals that you are serious about moving forward in the process. This counts towards your down payment, and transferring that money is when it started to feel \"real\" for me. I put 5% down which means I have PMI (private mortgage insurance) for a little while, adds about $100/mo until I get to 20% equity. That's fine, I wanted to get into the house ASAP.\r\n\r\n**All in all, between the down payment (including earnest money) and closing costs, I paid $29,916.99 up front to get the keys.**\r\n\r\n## all the other things \r\n\r\nCool! So I'm out 30 grand and I have a monthly payment of 2600 hanging over my head for the next 30 years. But I have a south-facing house that gets tons of sun with a tranquil yard with four mature fruit trees. I'm stoked. But what else? Well, there have been a good deal of other \"initial\" costs with this home purchase. The sellers took all the appliances except for the dishwasher, so I needed to buy a fridge, washer, and dryer. I've also ordered a chest freezer for the garage, but it hasn't arrived yet. Moving costs... I helped enough people move in my life I was happy to pay someone else to do it this time. Mostly smooth, but still a long day. There were also a ton of trips to hardware stores to get tools and various other items for around the house. The contractors who came and fixed our attic issue. Re-keying the locks. The list goes on and on. We haven't painted yet but that is on the list. Wanted to before we moved in but the timing of it all just didn't allow for it.\r\n\r\n## total cost (so far)\r\nSome of the following numbers are surely juiced by inflation / supply chain costs / corporate greed / etc. but still hopefully a decent estimate of additional costs a first time home buyer may have outside of closing costs and mortgage payments themselves!\r\n\r\nItem | Cost\r\n---|---\r\nHome inspection | 770\r\nMold remediation | 1700\r\nMovers | 1,400\r\nBoxes, packing materials | 135\r\nFridge | 3116\r\nWasher + Dryer | 1532 \r\nDryer power cord | 26\r\nDryer vent | 18\r\nChest Freezer | 600\r\nSmart lock | 120\r\nRe keying locks | 219\r\nCleaning supplies | 40\r\nPlunger + toilet caddy | 15 \r\nShop broom | 15\r\nSwiffer + restocks | 40\r\nTrash can | 15\r\nDishware | 30\r\nFlatware | 20\r\nCal King mattress + duvet | 2454\r\nCal King frame | 1240\r\nCal King sheets | 350\r\n2 Rain Barrel materials | 100 \r\nGarden plants + cages | 110\r\n2 strands of those outdoor string lights that everyone has | 80\r\nGrill | 130\r\nStorage bins | 20\r\nWheel barrow | 80\r\nTV wall mount | 100\r\nOther miscellaneous hardware stuff (tools, screws, anchors, hooks, etc.) | 200\r\n**TOTAL** | **14,675**\r\nClosing Costs | 29,917\r\n**FULL TOTAL** | **44,592**\r\n\r\nSo, your initial expenses may be quite a bit higher than \"just\" the down payment and other closing costs. Granted, we probably could have done this significantly cheaper by not upgrading our bed right away, choosing smaller or older appliance models, more time spent thrifting for deals, moving on our own/with friends' help, etc. This spending fit into our budget (if a little high initially, knowing it should smooth out as these large longer-term purchases fall off) and the benefits have been worth every penny.\r\n\r\nGood luck in your first time home-buyer search(es), hope this was helpful!","date":"2022-07-06T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/27","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/27/comments","title":"first time homebuyer recap","created_at":"2022-06-21T05:14:51Z","updated_at":"2022-07-07T07:09:29Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/27/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"note","tags":["mortgage finance bills home"],"readingTime":"7 minutes"},{"type":"blog","frontmatter":{"title":"pizza dough","date":"2022-06-25T00:00:00.000Z","category":"recipe","tags":"pizza dough easy tasty","description":"an old standby that's simple and delicious"},"issueNumber":29,"slug":"pizza-dough","title":"pizza dough","description":"an old standby that's simple and delicious ","content":"\r\na simple and delicious pizza dough recipe that is easy and forgiving with tweaks for different styles. use this dough on pizza stones, cast iron, cookie sheets, etc. it's very flexible and always delicious. you need just a handful of ingredients, some measuring cups and a mixing bowl or two. let's dive in.\r\n\r\nthis first part is the busiest part of the whole process. gather all the stuff you'll need first: a large mixing bowl, tablespoon, teaspoon, flour, corn meal, yeast, sugar, salt, olive oil and warm water. in a large mixing bowl add flour and corn meal in a 2:1 ratio. i generally use two cups of flour and one cup of cornmeal. on one side of the bowl, add one tablespoon of yeast (or one packet, if you have packets). on the same side of the bowl, add two teaspoons of sugar. on the other side of the bowl, add one teaspoon of salt. honestly, sometimes i switch it up and use two teaspoons of salt instead of sugar, and it still turns out fine. it's a very flexible recipe. anyway, mix all the dry ingredients together until the mixture looks uniform. once the dry ingredients are mixed, add one to three tablespoons of olive oil. the more olive oil you use, the more focaccia-like the dough will become. add two cups of warm water, a little at a time. stir the water in slowly, mixing the dough as you go. you may need to occasionally dust a little more flour in (another half cup or so, over the whole process). \r\n\r\nonce the dough has come together, knead it for another 3-5 minutes until its smooth and a bit elastic all around. transfer the dough to a lightly oiled bowl or pie dish or what have you, and sock it someplace warm & still for at least half an hour to prove. I pop mine in a pie dish in the microwave, but you can also put in a bowl and cover it with a towel or any other place that is warm and still air. you'll know your kitchen better than me.\r\n\r\nafter the dough has risen for a while, transfer it to the baking implement of your choosing-- pizza stone, cast iron pan, cookie sheet, etc. you can either roll it out at this point, or let it rise for another 15-30 minutes. once you're ready to roll it out slap it onto your bakeware and start forming the base. use an oiled rolling pin or a bottle with parchment paper or whatever you've got handy to spread and smooth it. if baking the dough in a cookie sheet you can spread it out with your hand to the edges and it's fine. oil the sheet first. this is a good time to preheat the oven to 425 degrees.\r\n\r\nokay now that your dough is spread out and ready for toppings, add some sauce. making your own tomato sauce will taste best but honestly just a few spoonfuls out of a can will do just fine, it's pizza. you want it fast and easy. put a few spoonfuls of sauce on the dough and spread it out with a spoon for a light covering. you can sauce it heavier if doing deep dish in a cast iron or whatever, but for most purposes lighter sauce works better with this dough, in my opinion. \r\n\r\nonce the sauce is on, then add a base layer of cheese and your toppings of choice. lately i've been doing my version of a \"veggie delight\", with artichoke hearts, kalamata olives, mama's lil peppers, and topped with a few healthy handfuls of arugula, mozzarella cheese & light tomato sauce in a cookie sheet. add whatever toppings your heart desires, go nuts. experiment. there are so many amazing combinations out there. i leave it as an exercise for the reader to discover more. anyways, once your pizza is all topped up, the oven should be beeping that it's preheated very soon.\r\n\r\npop this sucker in for anywhere from 15-25 minutes depending on what you set the oven to, your bakeware implement, and number of toppings. for the pizza described (\"veggie delight in a cookie sheet\"), a 18 minute bake usually hits that sweet spot of browning-but-not-burnt cheese that i crave. again, this is a very flexible recipe you should adapt to your own tastes. maybe check the pizza after 15 minutes just to be safe. anyway, cook the dang thing. when it's done cooking, let it sit for another 3-5 minutes before slicing, then dig in. bon appetit!","date":"2022-06-25T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/29","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/29/comments","title":"pizza dough","created_at":"2022-06-26T04:07:59Z","updated_at":"2022-06-27T01:53:06Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/29/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"recipe","tags":["pizza dough easy tasty"],"readingTime":"4 minutes"},{"type":"blog","frontmatter":{"title":"rain barrels","date":"2022-06-20T00:00:00.000Z","category":"diy","tags":"diy home project recycling water conservation","description":"diy water conservation"},"issueNumber":26,"slug":"rain-barrels","title":"rain barrels","description":"diy water conservation ","content":"\r\nhere's a quick and dirty way to put some rain barrels together. these rain barrels aren't the fanciest ones out there but they do the job of storing rainwater and they do it well. hopefully this step-by-step is straightforward enough to adapt to your own needs.\r\n\r\nthis is what we're building:\r\n![image4](https://user-images.githubusercontent.com/11279744/175847555-5f329bbd-96c3-4adb-a589-3ecaf2c78dac.jpeg)\r\n![image1](https://user-images.githubusercontent.com/11279744/175847546-562ad12e-68ff-473e-9f76-b762653eec92.jpeg)\r\n\r\n\r\nsourcing the barrels is going to be the hardest part of the whole endeavor. i picked these up in 2020 from a coworker who didn't need them, and they sat unused in the backyard where i was renting until i bought my own house and could put them up. if you don't have a coworker/friend giving them away, there's a few places to look. first, try checking with your city, some municipalities have programs in place to get rain barrels to residents. if your city isn't with it, you can try searching craigslist or calling manufacturers, car washes or animal supply shops, things of that nature. many industries use these 55 gallon barrels so ask around. be sure to thoroughly clean the barrels before storing water in them. don't use a barrel if something toxic to plant life was stored in it previously, even if you've clean it. find a different barrel.\r\n\r\nokay. so you've got a barrel (or two). here are the other things you'll need per barrel:\r\n- 3/4\" spigot valve\r\n- 3/4\" female copper adapter\r\n- 3/4\" pvc male-male adapter\r\n- flexible downspout adapters\r\n- screen (could be scrap from a window screen, only need a 4 or 5\" square)\r\n\r\nand the tools:\r\n- 1\" & 4\" hole saw drill bit + drill (or your preferred method of cleanly cutting consistent holes in plastic) \r\n- silicone caulk + caulk gun\r\n\r\nwhat we need is (roughly) seen here:\r\n![image3](https://user-images.githubusercontent.com/11279744/175847553-54d15785-333b-4562-9de8-210d528c8618.jpeg)\r\nnot pictured: caulk gun, a few other pieces of plastic gutter adapter, and materials for the base (sand, gravel, tiles)\r\n\r\nwe're going to drill 3 holes total. two 1\" holes that will fit the 3/4\" adapters & spigot, and one 4\" hole in the lid of the barrel for the gutters to feed into. flip the barrel upside down and drill the first 1\" hole about 4\" from the bottom. this is where the spigot and copper adapter will go. screw the spigot in now while the barrel is upside down.\r\n![image5](https://user-images.githubusercontent.com/11279744/175847558-3fa139a9-ac54-486d-9eab-cff6e1d434ad.jpeg)\r\n\r\nnow flip the barrel right side up and attach the adapter to the inside.\r\n![image6](https://user-images.githubusercontent.com/11279744/175847560-b3121ee5-c03c-4d89-aa07-b6559423b7eb.jpeg)\r\n\r\ndrill the second 1\" hole about an inch or two from the top. this is the overflow hole where water will escape from so that your gutters don't back up.\r\n![image7](https://user-images.githubusercontent.com/11279744/175847562-5df1649a-d1ee-41a2-90bc-bf51cfa7efec.jpeg)\r\n\r\nnow take the silicone caulk and caulk the edges around the spigot and overflow holes to prevent leaks.\r\n![image9](https://user-images.githubusercontent.com/11279744/175847564-43fe3340-e4e9-4a4b-9e78-9fbc642552fe.jpeg)\r\n![image10](https://user-images.githubusercontent.com/11279744/175847565-bc33879b-5a94-4695-9277-67e3503e3a17.jpeg)\r\n\r\ni don't have pictures of the 4\" hole in the top, but drill it towards the back side (opposite of the spigot) so it's closer to the gutters coming down. remove your existing gutter pieces and attach your adapters to connect your gutters to the barrels. lowe's/home depot etc. will sell these plastic gutter adapters in various sizes (3\", 4\", etc.), get the ones that fit your gutter!\r\n![image4](https://user-images.githubusercontent.com/11279744/175847555-5f329bbd-96c3-4adb-a589-3ecaf2c78dac.jpeg)\r\n![image1](https://user-images.githubusercontent.com/11279744/175847546-562ad12e-68ff-473e-9f76-b762653eec92.jpeg)\r\n\r\nso... when I initially put them up, i was so pleased with myself! but i totally didn't think about the base for the second barrel... the first one was on concrete, so no worries there, but the second... i just put the stand on the dirt and water is very heavy. surprise! it fell over.\r\n![image2](https://user-images.githubusercontent.com/11279744/175847550-032d33cf-f37b-4334-8df7-88c393a3badf.jpeg)\r\n![image11](https://user-images.githubusercontent.com/11279744/175847567-628aeefc-1bac-489a-ba80-f4820a5aafed.jpeg)\r\n\r\nso another trip to lowe's, i grabbed a bag of sand and a bag of gravel, plus eight tiles. I wanted to use cinder blocks originally in order to lift it even further off the ground, but my local store didn't have them.. so this is what i ended up with after digging out some dirt and some rough leveling with the sand and gravel before laying the tile. definitely take your time on this step to ensure the ground is as level as possible. you want the weight to distribute evenly so your barrel doesn't tip over.\r\n![image1](https://user-images.githubusercontent.com/11279744/175847546-562ad12e-68ff-473e-9f76-b762653eec92.jpeg)\r\n\r\none other change that i did after the fact, i noticed that the barrel on the concrete wasn't really filling at all. two huge storms and the water line was still below the spigot! meanwhile the other barrel was practically full after the first storm. i think this is due to the slope of my house on the land, the water moves west away from that spout. so I moved the empty-ish barrel over to capture that overflow and just hooked the original gutter back up on that downspout. you can see it's a little janky right now, with the gutter adapter and an extra tile at the overflow. i put a piece of mesh screen underneath in order to keep bugs and debris out.\r\n![image0](https://user-images.githubusercontent.com/11279744/175847544-12e6b045-ba1d-4f84-9f5b-d2ee0858cbc8.jpeg)\r\n\r\nin the future, i want to put a real concrete base down on the side of the house, behind these barrels (without the window) and replace these with some larger 250gal tanks. then I could move these two barrels to the front yard gutters for eventual beds out there. these two are a good stopgap for now.\r\n\r\nthat's all there is to it, thanks for reading! ","date":"2022-06-20T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/26","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/26/comments","title":"rain barrels","created_at":"2022-06-21T05:12:50Z","updated_at":"2024-03-22T04:57:05Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/26/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"diy","tags":["diy home project recycling water conservation"],"readingTime":"4 minutes"},{"type":"blog","frontmatter":{"title":"my covid experience","date":"2022-04-20T00:00:00.000Z","category":"note","tags":"health masks safety","description":"spoiler: it's not fun"},"issueNumber":24,"slug":"my-covid-experience","title":"my covid experience","description":"spoiler: it's not fun ","content":"\r\nThree years into this global pandemic, I caught covid. It was a relatively \"mild\" case, in that I never lost my sense of smell or taste and didn't need to be hospitalized. Still, it has been a miserable experience. After being relatively isolated since everything shut down in early 2020, masking at the grocery store and other public places as restrictions relaxed and were re-instated with the different waves, my partner and I decided we wanted to be part of the world again, you know? We're both vaccinated, diligently wore masks, didn't dine indoors, etc. We felt we had been safe, and it was time to do more of the things we had missed doing during isolation. We went to a concert at the Rose Garden (Tyler the Creator's \"Call Me If You Get Lost\" Tour), and it was a great time. I did have my first \"old man at the show\" moment, which was kind of surprising to me. I remember Tyler coming onto the scene when I was in high school, and I'd followed his career since. But the audience was thousands of kids still in high school, which is cool, but I didn't expect that. So I definitely felt a little weird, like, why do you all know the words to these old songs? You definitely shouldn't be listening to yonkers at age 7. But I digress. I was masked up most of the time, but removed it while drinking a beer or three. All in all, it was a great show and we had a blast. And then we went home, thinking nothing of it.\r\n\r\nA week later, I was sicker than I had been in years. I hadn't caught a cold since before the pandemic, and that felt great. But now I was achier and more fatigued than I'd ever been. Literally hadn't felt aches to this degree since the first vaccine shot. I normally crack my back every day, and I couldn't even do a quarter-turn without feeling pain. I was essentially bedridden for six days, achy and fatigued for four or five of those. I ate maybe three meals total, lost about fifteen pounds and suffered from diarrhea for the duration. I was also very congested, and gained a nasty cough. A miserable cocktail of symptoms. The silver lining for me was that I kept my sense of smell & taste, but all in all, I wouldn't wish it on anyone.\r\n\r\nI'm now a week out from being bedridden, and my appetite has returned. I'm no longer achy or fatigued to the degree that I was, but I am still lightly congested, the cough is still nasty, and I have to catch my breath after minor movements. Like, I used to climb rocks and ride my bike for miles and was a generally healthy 30 year old in good shape. Now, I'm out of breath going up and down the stairs in my own home. Who knows what the long term effects will ultimately be, but I'm not looking forward to finding out.\r\n\r\nAll that to say, I will continue to mask up in public places for the foreseeable future. Covid is the real deal, even a \"mild\" case like mine. Be safe out there.","date":"2022-04-20T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/24","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/24/comments","title":"my covid experience","created_at":"2022-04-20T14:47:47Z","updated_at":"2022-04-20T14:47:54Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/24/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"note","tags":["health masks safety"],"readingTime":"3 minutes"},{"type":"blog","frontmatter":{"title":"one box at a time","date":"2022-04-08T00:00:00.000Z","category":"note","tags":"stress management burnout","description":"there's always another box"},"issueNumber":23,"slug":"one-box-at-a-time","title":"one box at a time","description":"there's always another box ","content":"\r\nA while back I worked as a stock boy for a local computer store. There were three of us working in the back room handling receiving/shipping for our store, as well as inventory transfers to other stores. Every day we'd receive a mountain of boxes, full of rows of tightly packed smaller boxes and other products. My job was to unpack all of these boxes, print out new SKU stickers and individually label the unpacked goods, put those now-labeled goods onto our backroom stock shelves, re-stock the front displays as needed, and also break down mountains on mountains of cardboard. Putting the SKUs on everything was pretty tedious but overall, pretty easy work all things considered. \r\n\r\nMy boss back there was a guy named Dave, an old head who could have been retired for years but wanted something to do during the day. After watching me rush through those tasks for a few days, scrambling to get all the received products on the shelves lickety-split so I could dick around on youtube, he shared some great advice: \r\n\r\n> \"Kid, take it one box at a time. There's always gonna be another box delivered. Don't break your back trying to clear the table. Do it slow and do it right. One box at a time.\"","date":"2022-04-08T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/23","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/23/comments","title":"one box at a time","created_at":"2022-04-08T16:55:01Z","updated_at":"2022-06-21T05:39:24Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/23/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"note","tags":["stress management burnout"],"readingTime":"1 minute"},{"type":"blog","frontmatter":{"title":"dill & caper compound butter","date":"2022-03-26T00:00:00.000Z","category":"recipe","tags":"savory delicious butter","description":"capers are a perfect ingredient"},"issueNumber":21,"slug":"dill-caper-compound-butter","title":"dill & caper compound butter","description":"capers are a perfect ingredient ","content":"\r\nA thing about me is every big grocery trip (opposed to small last minute outings), I try to get an ingredient or two that is new to me and then figure out what to do with them later. There are misses to be sure but sometimes i find some gems that open up whole new paths for me. Capers are one of the latter. I recently bought a Costco jar of capers while not really knowing what they were. So I did some investigating, and turns out capers are actually flower buds from a certain bush that are picked before they can bloom and then pickled or dried. They are delicious. Some things I've tried them in so far: puttanesca, on bagels with cream cheese and lox, and chicken piccata. My favorite use of capers so far has been the compound butter. It's super easy to make and packs a punch of flavor.\r\n\r\nFirst decide how much butter you want to make. I used **two sticks of unsalted butter**, set out to soften. Unsalted butter because the capers themselves are pretty salty. You don't absolutely need to soften the butter, but it's much easier to mix if you do. Let it sit for half an hour or so. While the butter is softening, grab a **bunch of dill**, rinse and chop somewhat finely. Once the butter is soft, add it to a metal bowl and add the dill and a tablespoon of **capers**. Figure on using half a tablespoon of capers per stick of butter, more or less to your taste. **Take a fork and mix** it all together until the dill and capers are distributed throughout the butter. Set a piece of plastic wrap on the counter and scoop the butter into the middle. Using the plastic wrap, roll the mixture into a log. We want a log shape because it's easy to slice off a round off it and then wrap it back up. You could just as easily scoop it into an old butter container or tupperware that you have lying around. Once you've got the butter where you want it, refrigerate or freeze. It will keep for a long time in either.\r\n\r\nI like to spread the caper butter on toast (sourdough) in the morning and then top with a poached egg and some pepper. That's also good with hard boiled eggs, soft scrambled, hard fried, etc.. any egg would be delicious. I like poached. It's also good as a replacement for cream cheese with bagels and smoked fish, or on some crusty bread with pasta. You could add it to chicken roasting in a pan. The possibilities are practically endless, and probably all delicious. Like this butter.","date":"2022-03-26T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/21","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/21/comments","title":"compound butter","created_at":"2022-03-26T22:49:00Z","updated_at":"2022-04-08T16:31:02Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/21/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"recipe","tags":["savory delicious butter"],"readingTime":"2 minutes"},{"type":"blog","frontmatter":{"title":"storybook with twig for drupal","date":"2022-03-26T00:00:00.000Z","category":"technical","tags":"storybook, twig, drupal","description":"support for twig in js and php!"},"issueNumber":20,"slug":"storybook-with-twig-for-drupal","title":"storybook with twig for drupal","description":"support for twig in js and php! ","content":"\r\nStorybook is great. I love using [Storybook](https://storybook.js.org/) when building out component libraries or design systems, it's a near-perfect tool for prototyping and testing components with all their different variations and states. Being able to do this in isolation from the actual implementation speeds up development and confidence that edge cases are covered. It's primarily used with javascript components, like React.\r\n\r\nWith a little bit of configuration, you can use storybook for twig templates too. this can be handy if you work with Drupal, which uses twig for its theme layer. I would recommend using [Wingsuit](https://wingsuit-designsystem.github.io/), as they've figured all of this out in a rock solid way. But if you aren't sold on tailwind or have some esoteric requirements that mean you need to roll your own... here's how to do that:\r\n\r\nStorybook needs:\r\n- `@storybook/html` base\r\n- `twing` for twig support. twing is necessary for storybook, when Drupal consumes the components it will use twigphp. \r\n- `drupal-attribute` and `drupal-twig-extensions` add javascript support for drupal-specific twig filters & functions. this wont matter much in storybook, but it will let you re-use templates between the two without breaking compilation.\r\n\r\nDrupal needs:\r\n- components module enabled, namespace defined\r\n- library that includes design system js + styles\r\n\r\n[example repo](https://github.com/tjheffner/dte-storybook)","date":"2022-03-26T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/20","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/20/comments","title":"storybook with twig for drupal","created_at":"2022-03-26T22:11:34Z","updated_at":"2022-06-21T05:39:11Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/20/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"technical","tags":["storybook, twig, drupal"],"readingTime":"1 minute"},{"type":"blog","frontmatter":{"title":"svelte + tailwind = joy","date":"2022-03-26T00:00:00.000Z","category":"note","tags":"technical note","description":"building the web is fun again"},"issueNumber":19,"slug":"svelte-tailwind-joy","title":"svelte + tailwind = joy","description":"building the web is fun again ","content":"\r\nThis site is built with svelte & tailwind and both have been super fun to work with. Svelte is intuitive and for lack of better words, feels like what javascript has tried to feel like for ages now. If you've used react or vue or the like, svelte will feel similar but simpler. It's just.. friendlier? Less boilerplate, more html, and it's **fast**. It pairs really nicely with tailwind, which is a powerful but small framework for utility-first css.\r\n\r\nI really wish I had tried [tailwind](https://tailwindcss.com/) sooner. I don't know that I \"enjoyed\" BEM, though it did make a certain sort of sense for giving stylesheets structure. Whole lot of naming things with BEM though, and that's one of the hardest parts. It also introduces a lot of explicit connections between your stylesheets and your html. That's a lot of different points to maintain. Tailwind on the other hand sees CSS rules as utilities, all the way down. A single class for a single rule. Thinking of CSS this way, it almost doesn't matter how your html is structured. You might be thinking that sounds really clunky, putting so many more classnames in your HTML that you now have to keep track... and you kind of do, but you gain the freedom of not having to actually name anything at all. Plus all the styles for a thing are right there with the thing. If you do still need your own classes, you can still write CSS normally. The number of custom styles you need to write reduces drastically. And while tailwind generates a ton of classes in development, it also cleans them up to only keep the ones you actually use. Which keeps your CSS over the wire nice and tidy. The css for this site ultimately comes in at a couple of kB (57kB at the time of writing).\r\n\r\n[Svelte](https://svelte.dev/) feels like a natural direction for modern javascript. It has a familiar syntax to react/vue/jsx, and is so performant. It shifts a lot of the work from the browser to the build step, which means it feels so snappy, even on my old machine. And the learning curve was practically nothing, due to the familiar syntax. I would love to use the combo of svelte + tailwind in a work setting someday. ","date":"2022-03-26T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/19","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/19/comments","title":"joys of working with svelte + tailwind","created_at":"2022-03-26T21:44:24Z","updated_at":"2022-03-26T21:44:38Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/19/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"note","tags":["technical note"],"readingTime":"2 minutes"},{"type":"blog","frontmatter":{"title":"HTML Ipsum test post","description":"Lorem Ipsum style page for testing appearance of all the different HTML things"},"issueNumber":15,"slug":"html-ipsum-test-post","title":"HTML Ipsum test post","description":"Lorem Ipsum style page for testing appearance of all the different HTML things ","content":"\r\nThis HTML filler is grabbed from CSS Tricks to test out how things look: https://css-tricks.com/new-site-html-ipsum/\r\n\r\n

\r\n\r\n

Didn't melt fairer keepsakes since Fellowship elsewhere.

\r\n

Woodlands payment Osgiliath tightening. Barad-dur follow belly comforts tender tough bell? Many that live deserve death. Some that die deserve life. Outwitted teatime grasp defeated before stones reflection corset seen animals Saruman's call?

\r\n

Tad survive ensnare joy mistake courtesy Bagshot Row.

\r\n

Ligulas step drops both? You shall not pass! Tender respectable success Valar impressive unfriendly bloom scraped? Branch hey-diddle-diddle pony trouble'll sleeping during jump Narsil.

\r\n

North valor overflowing sort Iáve mister kingly money?

\r\n

Curse you and all the halflings! Deserted anytime Lake-town burned caves balls. Smoked lthilien forbids Thrain?

\r\n

Adamant.
Southfarthing!
Witch-king.
Precious.
Gaffer's!

\r\n

Excuse tightening yet survives two cover Undómiel city ablaze.
Keepsakes deeper clouds Buckland position 21 lied bicker fountains ashamed.
Women rippling cold steps rules Thengel finer.
Portents close Havens endured irons hundreds handle refused sister?
Harbor Grubbs fellas riddles afar!

\r\n

Narsil enjoying shattered bigger leaderless retrieve dreamed dwarf.

\r\n

Ravens wonder wanted runs me crawl gaining lots faster! Khazad-dum surprise baby season ranks. I bid you all a very fond farewell.

\r\n

Narsil.
Elros.
Arwen Evenstar.
Maggot's?
Bagginses?

\r\n

Concerning Hobbits l golf air fifth bell prolonging camp.
Grond humble rods nearest mangler.
Enormity Lórien merry gravy stayed move.
Diversion almost notion furs between fierce laboring Nazgûl ceaselessly parent.
Agree ruling um wasteland Bagshot Row expect sleep.

\r\n

Ere answering track forests shards roof!

\r\n

Delay freezes Gollum. Let the Ring-bearer decide. Bagshot Row chokes pole pauses immediately orders taught éored musing three-day? Disease rune repel source fire Goblinses already?

\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n

	Dangers	Playing	Window	Meaning	Pace
Current	living	odds	charged	heads	felt
Inn	climbing	destroying	overhead	roll	mud
Breath	relevant	éored	hinges	year	signed
Accept	threads	name	fitted	precious	attacked
Chief	sails	first-born	pottery	lever	antagonize
Unoccupied	victorious	means	lovely	humble	force
kinsmen	give	walking	thousand	manners	burning

\r\n

Afraid smithy Fellowship debt carven hooks.

\r\n

What about second breakfast? Nags runt near Lindir lock discover level? Andûril breathe waited flatten union.

\r\n

\r\n
You shall be the Fellowship of the Ring.
\r\n
—Númenor, sweeter burned verse
\r\n

\r\n

Should Shirelings extraordinary spends poison's willing enchantment.

\r\n

I think we should get off the road. Penalty sight splintered Misty Mountain mithril? Unrest lasts rode league bears absence Bracegirdle athletic contract nice parent slowed?

\r\n

Pardon Concerning Hobbits rune goblins? Twitching figure including rightful Thorin's level! Worth tubers threats Hornburg deadliest? Unfold thumping shh wants Homely!

\r\n

Improve drops absolutely tight deceit potent Treebeard startled!

\r\n

J.R.R. Tolkien 3000 uttered veins roaring winds moaning flaming. Meddle measure pure Samwise Gamgee business! _Lied mistake Proudfoots pon. Instance 80 morbid ceremonial plunge Anor mad. Questions shells hangs noble Proudfoots throws. Rampart damage questions Chubbs 3000 conjurer? Single tempt peasants Bolg Athelas Mordor Wraiths Azog Undómiel mangler? Nori Giants Undómiel Rivendell spike posts took. Fool's Underhill boarded vanishing twilight unheard-of. Presence Dunland lamb lair. Barricade ^didn't feelings purring vine Morgoth. Distract Giants nearing champion T. Clothing titles quick bother Arod Gloin Beren troop? Balls crashing bastards arrives precisely rascal stubbornness Snowbourn. Hobbitses rose barren strengths tested mirrors moonlight password center? Remade free filthy breaking respect amuse Arod? Vengeance ~~Elessar Wolves~~ posts remain doorway said! Suspects fight Merry hungers locked yelp.

\r\n

Abandon: Tact flies disturber thinking hospitality Elros act vest handy ranks.
Devil: Boneses spilled Caradhras hungry pace lanterns glory haunted shone forging.; Unprotected Beorn's fireworks dream journey beacon dwells gnaws key.
Happened: Known wanna fifth Bill hell knew she scale.; Missing vanish taken colleague sway voice tricks 13 Grimbold.; Thereof skills kingsfoil innocent riding light Thorin Oakenshield won.

","date":"2022-03-19T20:57:14.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/15","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/15/comments","title":"blogpost html testing ground","created_at":"2022-03-19T20:57:14Z","updated_at":"2025-07-06T01:22:08Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/15/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"note","tags":[],"readingTime":"5 minutes"},{"type":"blog","frontmatter":{"title":"Southwest chicken & bean stew","description":"good recipe for rotisserie chicken leftovers","category":"recipe"},"issueNumber":3,"slug":"southwest-chicken-bean-stew","title":"Southwest chicken & bean stew","description":"good recipe for rotisserie chicken leftovers ","content":"\r\nHere's a simple recipe to make the most of your rotisserie chicken leftovers. Easy to prepare & adapt to your own tastes, freezes well, and most importantly, is delicious! Don't forget the toppings... together, they make it sing.\r\n\r\n**Prep time:** 30 min\r\n\r\n**Cook time:** 3-4 hours (not counting soaking beans overnight)\r\n\r\n## Ingredients\r\nAmount | Ingredient\r\n--- | :---\r\n3 lb. | rotisserie chicken leftovers, a decent amount of meat left.\r\n3 cups | dry beans. cannellini is what i used. canned is fine too.\r\n1 large | onion\r\n3 good size | carrots\r\n1 stalk | celery\r\n4-6 cloves | garlic\r\n1-2x 4oz can | green chiles \r\n1 bunch | cilantro\r\ndollop | sour cream\r\n2 | limes\r\nto taste | salt, black pepper, bay leaves, cumin, red pepper flakes\r\n\r\n## Steps\r\n- If using dry beans, start soaking these in the morning or even better, the night before. Saucepot, cover with a 2-3 inches water, salt liberally. The beans can take it. \r\n- Into a big stockpot, break down the chicken leftovers, bones, meat, skin and all. Fill with water an inch or two higher than the contents, bring to a boil then turn to low and simmer for 1-2 hours. You can toss the onion skins & carrot peels in here too if you have them ready. Unlikely, I haven't told you to chop them yet. But stock is stock, and those will help make a great stock 😎 \r\n- After the stock has simmered for a while, strain it. Remove the chicken skin and bones (and the veggie scraps if you've added them) and reserve the good meat in a side bowl for now.\r\n- Drain your beans and add them to the stock. Bring to a boil again and then turn down to medium-low and simmer.\r\n- While beans are simmering, chop up the onions, carrots, celery, garlic, spices to taste.\r\n- After beans have simmered for an hour or so (probably less if using canned beans), add the chopped veggies & green chiles. Let simmer for another hour.\r\n- Taste several beans from around the pot for tenderness. Gauge consistency of stew \r\n- Simmer for another 30 minutes to an hour until they're ready.\r\n- About 5 minutes before serving, dump the reserved chicken meat into the pot, stir in and turn the heat off.\r\n- Chop cilantro & cut limes into wedges.\r\n- Serve into bowls, add a dollop of sour cream, chopped cilantro, and the juice from a lime wedge. \r\n- Enjoy! ","date":"2022-03-16T01:29:30.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/3","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/3/comments","title":"Rotisserie chicken & bean stew","created_at":"2022-03-16T01:29:30Z","updated_at":"2022-03-16T02:00:02Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/3/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"recipe","tags":[],"readingTime":"2 minutes"},{"type":"blog","frontmatter":{"title":"heffdotdev technical details","description":"the what and why of this site","category":"technical"},"issueNumber":2,"slug":"heffdotdev-technical-details","title":"heffdotdev technical details","description":"the what and why of this site ","content":"This site is the latest iteration of my personal home on the web. Over the years I have used a few different formats for my online debris, including but not limited to: geocities & angelfire, myspace, twitter, student portfolios built with & hosted by cargocollective or format, a number of abandoned blogs with wordpress, tumblr, medium, and static site generators like jekyll w/ github pages. \r\n\r\nthrough all of the above, some things I realized:\r\n- I need to be able to add my own code to wherever my content lives.\r\n- If the effort to publish posts is high, I will not keep the habit for long. \r\n - Twitter is best example of this, in that there's practically no barrier to posting and it's the only one I've managed to use consistently through the years. \r\n- I need my site to be more than just an archive of posts\r\n\r\nTechnical requirements for my site:\r\n- Svelte as the main framework\r\n- Tailwind for styles\r\n- Low barrier to publish\r\n- Performant\r\n- Easy for me to add custom code to, when necessary\r\n\r\nAll the above considered, I knew I was going to go the static site generator route again. There are a million wonderful choices out there.\r\n\r\nI originally started my site refresh mid-pandemic using Sapper, because I wanted to try out Svelte. I got it hooked up with netlify CMS and it worked well enough, but after that step I sorta just set it aside while I focused on other things. I'm blessed to have a well paying career, so rebuilding my portfolio site wasn't exactly a priority. Sometimes it takes a while for me to get the ball rolling. Anyways, when I picked this project back up, I discovered that Sapper was deprecated, in favor of sveltekit. Essentially the same thing, but more production-ready. So I started looking into Sveltekit, and also I knew I wanted to use tailwind too. Tailwind's been in my peripherals for some time, but I never had a good opportunity at work to bring it in.\r\n\r\nSo for the re-refresh, I started looking to see if anyone had put out a starterkit that used Svelte and Tailwind and then I'd figure out the publishing portion after that, potentially going with netlify CMS again as a low-effort easily managed .md-based CMS. And then I found [swyxkit](https://swyxkit.netlify.app/about)! Which perfectly filled all of the technical requirements with plenty of other nice enhancements out of the box to boot.\r\n\r\nSo this blog is based on swyxkit which means:\r\n- Svelte based, very performant\r\n- Tailwind for styling\r\n- Github Issues as a CMS, so the barrier to posting is practically nothing. With an interface & formatting I'm extremely familiar with. \r\n- Easy to extend with my custom code on top of the kit.\r\n\r\nAnd that's basically it. Neat!","date":"2022-03-15T01:58:01.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/2","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/2/comments","title":"heffdotdev technical details","created_at":"2022-03-15T01:58:01Z","updated_at":"2022-03-16T00:49:23Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/2/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"technical","tags":[],"readingTime":"3 minutes"},{"type":"blog","frontmatter":{"title":"Hello world","description":"obligatory test post for the new website","category":"technical"},"issueNumber":1,"slug":"hello-world","title":"Hello world","description":"obligatory test post for the new website ","content":"This is the first post for my new personal site. It is based on https://github.com/sw-yx/swyxkit and uses github's issue queue as a CMS. more details to come, but for now this is just a test that the CMS is working properly :)\r\n\r\ntesting code blocks in actual content\r\n\r\n```js\r\nexport let foo;\r\n\r\nfoo = 'bar'\r\n```","date":"2022-03-13T20:38:01.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/1","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/1/comments","title":"Hello world","created_at":"2022-03-13T20:38:01Z","updated_at":"2024-02-11T01:48:16Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/1/reactions","total_count":1,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":1,"eyes":0}},"category":"technical","tags":[],"readingTime":"1 minute"},{"type":"blog","frontmatter":{"title":"Dynamic Colors using CSS Variables and a Tiny Bit of Javascript (drupalSettings)","date":"2018-12-13T12:00:00.000Z","category":"technical","description":"Tutorial on how to hook CSS variables to editor controlled fields in Drupal","disclosure":"This post is also available on the Phase2 blog: https://www.phase2technology.com/blog/dynamic-colors-css-variables-javascript"},"issueNumber":13,"slug":"dynamic-colors-using-css-variables-and-a-tiny-bit-of-javascript-drupalsettings","title":"Dynamic Colors using CSS Variables and a Tiny Bit of Javascript (drupalSettings)","description":"Tutorial on how to hook CSS variables to editor controlled fields in Drupal ","content":"\r\n## The Short of It:\r\nFirst, what do I mean by dynamic colors? I’m referring to a color defined by a content editor, a color that the design system doesn’t necessarily know about beforehand.\r\n\r\nCSS Variables are great, and [supported in most modern browsers](https://caniuse.com/#feat=css-variables), except for IE11. Calling IE11 a modern browser feels dirty, but that’s neither here nor there.\r\n\r\nFor this demo, we’ll be using Drupal’s Color field to define the colors of elements on a given page. In practical terms, we have a taxonomy vocabulary called “Category”. Each category term can define a color.\r\n\r\nWhen a given content type references a category term, that category’s color field output will be preprocessed & added to drupalSettings. Once available as a drupalSetting, it can easily be assigned to a CSS variable, using a couple lines of javascript.\r\n\r\nThat CSS Variable, once defined, will trickle down to the components that need it, thanks to the power of… cascading style sheets.\r\n\r\n## The Long of It:\r\nDrupal Fields\r\nFirst things first, we’re gonna make sure we have a color to reference, and a node that uses it. So we have a taxonomy term with a color field (machine name: field_color). We also have a content type with that takes an optional reference to that taxonomy term’s vocabulary (machine name: field_category).\r\n\r\nDrupal Preprocessing\r\nNow in the preprocess, we need to extract the color field value from that entity reference, and attach it to the drupalSettings object. We can do this like so, in `my_module.module`:\r\n\r\n```php\r\n/**\r\n * Implements hook_page_attachments_alter().\r\n */\r\nfunction my_module_page_attachments_alter(&$page) {\r\n // Makes the section color value available to javascript for live-updating.\r\n $node = \\Drupal::routeMatch()->getParameter('node');\r\n if ($node && $node instanceof NodeInterface) {\r\n $category = $node->get('field_category')->entity;\r\n\r\n if (isset($category)) {\r\n $color = $category->field_color->color;\r\n\r\n $page['#attached']['drupalSettings']['my_module']['page_color'] = $color;\r\n $page['#attached']['library'][] = 'my_module/sections';\r\n }\r\n }\r\n}\r\n```\r\n\r\nIf we’re on a node, we check for the category field, and if that reference exists, we grab the hex string value from the color field. That gets assigned to the drupalSettings object. We also attach a js library that makes the dynamic value available to our stylesheet.\r\n\r\nThat library looks like this, inside of `my_module.libraries.yml`:\r\n```yml\r\nsections:\r\n version: 1.x\r\n js:\r\n js/sections.js: {}\r\n dependencies:\r\n - core/jquery\r\n```\r\n\r\nWe’ll come back to the JS in a bit, once we’ve actually set up how our CSS variables should be used.\r\n\r\n## CSS Setup\r\nCSS Variables (aka [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables)) are a cool “new” feature that bring the concept of variables to CSS natively. They cascade and inherit as other CSS rules do, and so CSS Variables should be defined in a selector that sets their scope. We’re interested in a global scope, because these colors need to be available to many components, so I set them on the :root selector. The body element would also be global scope, but I have other body-specific styles there, and I like the separation of concerns.\r\n\r\n```css\r\n// css variable set at :root for overriding section colors\r\n// based on the value of the Category taxonomy.\r\n:root {\r\n --section-color: $c-blue;\r\n}\r\n```\r\nWe set a default color for the variable so that if a category isn’t referenced on a node (or if a user has javascript disabled), there’s still a default color.\r\n\r\nI’ll only be covering how one component (a hero) can use this CSS var, but it’s the same concept for all components that need a dynamic color.\r\n\r\nrelevant portion of code:\r\n```\r\n/**\r\n* Hero with a solid blue background instead of an image.\r\n*/\r\n&--solid {\r\n background: $c-blue;\r\n background: var(--section-color);\r\n\r\n ...\r\n\r\n .hero__cta {\r\n background-color: $c-blue;\r\n background-color: var(--section-color);\r\n border: $border-thin solid $c-white;\r\n\r\n &:hover {\r\n color: $c-blue;\r\n color: var(--section-color);\r\n background-color: $c-white;\r\n }\r\n }\r\n}\r\n```\r\n\r\nYou’ll notice that I’ve duplicated some rules for colors. This is purely to satisfy IE11 and is not necessary if you don’t need to support it. This project did, so it was necessary. Because browsers drop CSS rules they don’t support, IE ignores the second declaration and falls back to the first rule without problems. Browsers that do support CSS variables (e.g. the rest of them), read both rules and use the last-defined, which happens to be our desired CSS variable. Everyone’s happy.\r\n\r\n## JS Connection\r\nThe final piece we need to make this all work as intended is updating the initial CSS variable declaration to be our desired color.\r\n\r\n```\r\n:root {\r\n --section-color: $c-blue;\r\n}\r\n```\r\nWe can do this in a few short lines of javascript, like so:\r\n\r\n```js\r\n(function pageColors($, Drupal) {\r\n Drupal.behaviors.setPageColor = {\r\n attach: function getPageColor(context, settings) {\r\n if (settings.my_module) {\r\n if (settings.my_module.page_color) {\r\n // Grabs the page color value set in my_module_page_attachments_alter().\r\n const pageColor = settings.msk_content.page_color;\r\n\r\n // Set root CSS variable to page color. Page elements that need to be color-coded\r\n // use this variable and helper classes to ensure correct color applications.\r\n document.documentElement.style.setProperty('--section-color', pageColor);\r\n }\r\n }\r\n }\r\n }\r\n}(jQuery, Drupal));\r\n```\r\n\r\nTada! Now we have some dynamic connectivity between our Drupal Color field and our stylesheets. If you don’t need to support IE11, you’re done at this point. If you do need to support IE11… you’ll need a few more lines of javascript, as all the elements that should be receiving dynamic colors don’t have any clue about the CSS Variable! So we’ll have to hard code them as part of this function. Using our previous hero example, the complete function looks something like this:\r\n\r\n```js\r\n(function pageColors($, Drupal) {\r\n Drupal.behaviors.setPageColor = {\r\n attach: function getPageColor(context, settings) {\r\n if (settings.my_module) {\r\n if (settings.my_module.page_color) {\r\n // Grabs the page color value set in my_module_page_attachments_alter().\r\n const pageColor = settings.msk_content.page_color;\r\n\r\n // Set root CSS variable to page color. Page elements that need to be color-coded\r\n // use this variable and helper classes to ensure correct color applications.\r\n document.documentElement.style.setProperty('--section-color', pageColor);\r\n\r\n // IE11 can't read css variables at all: https://caniuse.com/#search=css%20variables\r\n // So we hard color any items that need it.\r\n const isIE = '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style;\r\n if (isIE) {\r\n\r\n $('.hero--solid').css('background', pageColor);\r\n $('.hero--solid .hero__cta')\r\n .css('border', '3px solid ' + pageColor)\r\n .css('color', pageColor)\r\n .hover(function() {\r\n // mouseenter\r\n $(this).css('color', '#ffffff');\r\n $(this).css('background-color', pageColor);\r\n }, function() {\r\n // mouseleave\r\n $(this).css('color', pageColor);\r\n $(this).css('background-color', '#ffffff');\r\n }\r\n );\r\n }\r\n }\r\n }\r\n }\r\n}(jQuery, Drupal));\r\n```\r\n\r\nNot the cleanest, but that’s IE for you. This could be cleaned up further to use string interpolation and fat arrows, if you have babel working on this file. If not, simple string concatenation is still the way to go, because IE will error on it otherwise. Maybe someday we can leave IE behind, but this post is not that day.\r\n\r\nAnyways, that’s all there is to it. Thanks for reading!","date":"2018-12-13T12:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/13","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/13/comments","title":"Dynamic Colors using CSS Variables and a Tiny Bit of Javascript (drupalSettings)","created_at":"2022-03-19T06:01:50Z","updated_at":"2022-03-19T06:02:09Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/13/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"technical","tags":[],"readingTime":"7 minutes"},{"type":"blog","frontmatter":{"title":"Burn the Earth, Leave it Behind","date":"2017-02-09T00:00:00.000Z","category":"note","description":"My second entry to the Surrounded by the Sound series.","disclosure":"You can view this submissions as part of the overall project [here](https://surroundedbythesound.tumblr.com/post/171595522611/burn-the-earth-leave-it-behind-tanner-heffner)."},"issueNumber":14,"slug":"burn-the-earth-leave-it-behind","title":"Burn the Earth, Leave it Behind","description":"My second entry to the Surrounded by the Sound series. ","content":"\r\nThere’s not one song on this album that I can single out as my favorite, as the most impactful to me, or as the ‘most essential’ listening. Depending on my mood, it could be any of the ten tracks. These thirty minutes are Pat the Bunny at his best. (At the time these renditions were recorded he wasn’t personally at his best, but musically, that’s besides the point.)\r\n\r\nPat the Bunny, born Patrick Schneeweis, is the person responsible for a great deal of my favorite folk-punk songs. [Burn The Earth, Leave It Behind](https://diybandits.bandcamp.com/album/burn-the-earth-leave-it-behind) by Wingnut Dishwasher’s Union is, in their own words, “gutter rock at it’s finest!” I certainly can’t argue with that.\r\n\r\nPat doesn’t have the cleanest voice, but considering the crusty anarcho-folk junkie aesthetic, and the passion—holy shit the passion—passion oozing through each syllable strung out to match the strumming, the vocals sound perfect. Unlike his earlier releases under the Johnny Hobo & the Freight Trains moniker, albums full of angry, bitter drinking anthems drenched in a 'fuck the world’ mentality, his worldview has softened somewhat during the Wingnut stage. There’s more hope for the future. The Johnny Hobo tracks can be overly screechy, and a little too nihilistic at times, but they shouldn’t be overlooked either. They’re perfect drinking music for this administration, to be honest. I recommend the album Just Traveling Through, Will Sleep On Your Couch For Beer if you can find it, as it’s the best sounding (in my opinion). But that’s not the album we’re talking about. Coincidentally, Burn The Earth, Leave It Behind has its fair share of drinking anthems and bitterness too, being gutter rock at it’s finest and what have you. I’ve come back to this particular well a lot over the past three months.\r\n\r\nWhile the recent actions by those in power have me anxious and worrying more than usual, as they no doubt have you too, the overwhelming response to those actions have me hopeful for what part of the future we can still save. It’s going to take a strong intersectional coalition, and actual work. Not cheap sloganeering and empty tweets. I didn’t want to make this too political, but it’s hard not to be political when talking about Pat’s work.\r\n\r\nThe Democrats won’t save us. The Republicans are actively working to kill us. This is our best chance to burn the earth and leave it behind. Those currently in power are finding countless ways to enact worst-case scenarios for the widespread institutional rot that we’ve let fester for decades, across probably every sector of government at this point, by not holding our elected officials accountable. By being unwilling to look America’s ugly past in the face. We’re not even two months through twenty-seventeen and Jefferson fucking Beauregard Sessions is about to become the Attorney General of the United States. Literal nazis are willing to show their colors and preach their hate in public and some people are worried that punching them will impugn those very same nazis’ freedom of speech! What fucking timeline are we living in? Don’t let anyone ever tell you it’s not okay to punch a nazi. Punch nazis. If someone comes at you with nonsense about “protecting their freedom of speech” or “violence is never the answer,” please understand that person is most likely an idiot who doesn’t understand the first amendment and/or was never about non-violence in the first place. Practice nonviolence with those who are nonviolent with you. Nazis… I shouldn’t have to explain this. You know where they don’t have to explain this? Germany. Why isn’t America’s ugly past covered in the same way? Sadly, we both know the answer to that.\r\n\r\nWe need to come together as an American people and do the right thing. The necessary thing. Burn the earth. Leave it behind. What comes after? Here’s Pat with the gist of it, from the album’s last track:\r\n\r\n\r\n_We’re building a new world, all of my friends and me_\r\n\r\n_it’s not an exact science yet, but we have the technology._\r\n\r\n_now all we need is an economy_\r\n\r\n_where everybody finally will get enough to eat,_\r\n\r\n_even the suburbs. no powers getting too crooked to stand_\r\n\r\n_on its own feet for much longer than it has._\r\n\r\n_So I don’t want to kill a cop,_\r\n\r\n_what I want is neighborhoods where they don’t have to get called_\r\n\r\n_when the shit goes down_\r\n\r\n_cause our friends, they are enough, and our neighbors have enough._\r\n\r\n_finally we’re enough._\r\n\r\n_cause our friends, they are enough._\r\n\r\n_and our neighbors are enough._\r\n\r\n_and finally we’re enough_\r\n\r\n_please help me be enough._","date":"2017-02-09T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/14","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/14/comments","title":"Burn the Earth, Leave it Behind","created_at":"2022-03-19T06:14:35Z","updated_at":"2022-03-19T06:15:57Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/14/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"note","tags":[],"readingTime":"4 minutes"},{"type":"blog","frontmatter":{"title":"Markov Chain Twitter Bot","date":"2016-08-06T03:22:00.000Z","category":"technical","tags":"twitter ruby heroku markov chain","description":"a short entry on building my own twitter_ebooks bot"},"issueNumber":6,"slug":"markov-chain-twitter-bot","title":"Markov Chain Twitter Bot","description":"a short entry on building my own twitter\\_ebooks bot ","content":"\r\nThanks to [this tutorial](http://blog.boodoo.co/how-to-make-an-_ebooks/) and my nearly 15,000 tweets (holy shit, when did that happen?), I now have a nonsensical, yet occasionally profound, twitter_ebooks bot to call my own. It was actually a whole lot simpler to set up than I thought it would be-- creating a dummy email, new twitter account, and setting up [Heroku](https://www.heroku.com/) for the first time with all their various authentication processes took longer than actually setting up the [bot's code](https://github.com/tjheffner/food_libs/blob/master/bots.rb).\r\n\r\nFor now, this bot spits out tweets based on an archive of my past tweets, using a Markov chain. A Markov chain is _`a stochastic model describing a sequence of possible events in which the probability of each event depends only on the state attained in the previous event.`_
\r\n\r\nWhat that means in this context is, my bot will never immediately repeat a tweet. Each tweet is generated from the grammar and syntactical structure of my actual tweets, by starting with a random-length fragment from anywhere in my archived tweets. I added some logic to vary the construction patterns to ensure it wasn't copying past tweets entirely word for word. It does _occasionally_ tweet fragments word-for-word from my past tweets, as a fallback if the tweet that was originally constructed exceeds the character limit.\r\n\r\nAll in all, it's got me excited to play around with Ruby, and more advanced twitter bots in general. I'm particularly interested in exploring avenues involving randomized image manipulations once I find the time.\r\n\r\nFor now, you can follow the occasionally profound mutterings of my spambot here: __[@food_libs](http://www.twitter.com/food_libs)__","date":"2016-08-06T03:22:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/6","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/6/comments","title":"Markov Chain Twitter Bot","created_at":"2022-03-19T05:17:09Z","updated_at":"2024-01-13T06:52:48Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/6/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"technical","tags":["twitter ruby heroku markov chain"],"readingTime":"2 minutes"},{"type":"blog","frontmatter":{"title":"file cabinet smoker: behind the smokescreens","date":"2016-07-30T12:00:00.000Z","category":"diy","tags":"DIY smoking file cabinet cooking","description":"the true story of how I recycled a filing cabinet into a meat smoker"},"issueNumber":8,"slug":"file-cabinet-smoker-behind-the-smokescreens","title":"file cabinet smoker: behind the smokescreens","description":"the true story of how I recycled a filing cabinet into a meat smoker ","content":"\r\nA banner ad is the reason [this project](/work/file-cabinet-smoker) exists. I saw one for a file cabinet smoker build when I was researching bedframe designs and had to investigate... It marinated in the back of my mind as a ridiculous scenario for several months without any real action towards realizing it. Then one day, the stars aligned. I was hunting for a proper bookshelf and I stumbled upon the perfect file cabinet. I knew this silly premise was meant to be reality. And so it is.\r\n\r\nChoosing a file cabinet is the most important part. I recycled mine from a [local recycling center](http://www.rebuildingcenter.org/). From my original research, I wanted to find one that was a little older, because newer file cabinets use plastic parts on the drawer's slide rollers. I really wasn't trying to disassemble every cabinet drawer completely to replace some plastic washers with metal ones. I'd have to do that, so drawers can still roll and food can be safely cooked, without fear of toxic fumes from heated plastic. The cabinet I found was all metal, exactly what I needed. If you can weld, you might try only reusing the drawer faces & cabinet shell. Older file cabinets have their own problems, in that they may have lead-based paint. The paint was going to go regardless of cabinet age, but still. Once you've found a file cabinet that you want to work with, you'll need some other supplies.\r\n\r\n## Supplies\r\n\r\n| __Item__ | __Quantity__ | __Note__ |\r\n| :------------ |:------------:| :---------------------------------------------------------------------------------- |\r\n| File Cabinet | 1 | As many drawers as you like, mine has 4. |\r\n| Metal Grate | 3 | 1 less than the # of drawers. Don't get galvanized steel, it's unsafe for cooking. |\r\n| Thermometer | 3 | One for each drawer with a grate. Grill thermometers work great. |\r\n| Nut & Washer | 3 pair | To secure thermometer to drawer. Came included with the thermometers I bought. |\r\n| Floor Vent | 1-2 | Adjustable vents to help regulate airflow + smoke output. Back vent optional. |\r\n| Spraypaint | 3 cans | I used heat-resistant flat black grill paint. Totally optional. |\r\n| Power Tools | -- | Power drill, and Sawzall. Used to cut holes for grates & vents. |\r\n| Wire snips | -- | Aviation snips to help with hole cutting. |\r\n| Sandpaper | sheets on sheets | To help get paint off. A power sander would help a lot probably. |\r\n| Fire materials| 🔥🔥🔥 | Wood, charcoal, lighterfluid (only recommended for the initial fires, not cooking) |\r\n\r\n* I ordered the thermometers from Amazon, I think they were around $4 each.\r\n* Home Depot sold the perfect size grill grates, small enough to fit in the drawer, big enough to have sufficient cooking area exposed to smoke.\r\n* Home Depot also sold the paint.\r\n* And the floor vents. and the tools.\r\n\r\n## Plan\r\nDecide how you want your smoker(/bbq) to function. My cabinet has 4 drawers, and is set up for the bottom box to be a firebox, the second lowest drawer has my water / drip container, and the top two drawers are for food. I usually keep my veggies in the top drawer, so that meat doesn't drip onto them.\r\n\r\nYou also need to determine how you want your firebox to function. It can be as simple as starting a fire in the drawer (what I've chosen to do) or, if you want more temperature control, by using a gas burner or electric stove. You would then need to connect the hose to the propane tank or wire to an outlet.\r\n\r\nIf you can weld, you might try only reusing the drawer faces & cabinet shell. Having the drawer faces swing outwide like a door would give you a lot more space to configure shelving or possible hanging setups, and better control of how the smoke fills the box overall. Some welding is handy if you are using a smaller, less vertical, file cabinet(s), say one or two drawers, because then you can weld a smaller firebox to the side entirely, for more of a cold smoke.\r\n\r\n## Steps\r\n1. Cut a hole in a box.\r\n2. But seriously, we're gonna measure some things first. My file cabinet has 8 holes of varying sizes, some much larger than others.\r\n - 1 hole in the very top of the cabinet shell, for smoke to get out. We're going to put a floor vent here, to help regulate how much smoke escapes.\r\n - 1 large hole in every drawer bottom that isn't the firebox. For the grate.\r\n - Just make the hole a little smaller than the grate and you won't need to weld anything\r\n - 1 small hole on the front face of each of the drawers that you just cut large holes in.\r\n - My [file cabinet](/work/file-cabinet-smoker) drawers had a knob below the handles. I removed those and put the thermometers there. You may need to drill a hole.\r\n - 1 hole in the back, towards the bottom, so the fire can breathe. The other floor vent (if you bought it) goes here.\r\n3. While you've got the drawers open for measuring, now is a good time to remove any locking mechanisms.\r\n - It's a pain if you get locked out, especially if you don't have a key. I was lucky I had a hole cut in the top already before it happened. Take the locking mechanism off ASAP.\r\n4. Measure & mark the holes.\r\n5. Now we cut holes in the box.\r\n - To cut each hole, there was a bit of a process. First, take a powerdrill with a decent size bit (I used 3/8), and make two or three holes next to each other, through the file cabinet metal.\r\n - Use the wire snips to connect those holes and snip away until you have an opening that is large enough to safely fit & start the sawzall blade in.\r\n - Sawzall down the length of the hole side.\r\n - Repeat as needed for other sides.\r\n - Wiresnip away any rough/dangerous edges.\r\n6. After the holes are cut, put all grates, thermometers, and vents in place.\r\n7. Now, we discover fire.\r\n - For this first fire, I just wanted to see if things would burn, temperatures would rise, smoke would travel through drawers, etc. etc. Testing. This is where I found I needed to remove the vent on the bottom entirely for enough air to reach the fire.\r\n - Adjust hole sizes / vent openings / amount of wood on the fire / etc until you're satisfied with test results.\r\n8. Time to get rid of all the inside paint! We don't want that on our food. Spoiler: we're going to light more fires.\r\n - I brushed _everything_ inside the cabinet with some __olive oil__. The cabinet walls, the drawer walls, all of it.\r\n - Then, I easily tripled the amount of wood I put in the cabinet for the first fire. This fire is the hottest my smoker has burned, because I filled _every_ drawer with wood and kindling, to make sure that enough heat & smoke hit the paint anywhere it was.\r\n - When this fire died out, almost all of the paint had either burnt off or easily peeled away in large, crisp, flakes. For the patches that didn't, I sanded them out with lots of sandpaper.\r\n - Sandpapering was hard work, and the drawers had lots of weird crinkles I couldn't sand, so I stopped doing that and decided I wanted to get on with it.\r\n - One more test fire, smaller this time, just to clear everything out & give our newly exposed metal insides a nice smoky coating.\r\n9. Paint the outside!\r\n - Remove your thermometers. I originally took the top vent out but having the different colors looked pretty goofy, so I painted it too.\r\n - I needed just under 3 cans to evenly coat a 4-drawer file cabinet.\r\n10. Cook!","date":"2016-07-30T12:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/8","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/8/comments","title":"File Cabinet Smoker","created_at":"2022-03-19T05:32:06Z","updated_at":"2024-03-22T04:56:27Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/8/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"diy","tags":["diy smoking file cabinet cooking"],"readingTime":"8 minutes"},{"type":"blog","frontmatter":{"title":"Building Pattern Lab Workshop","date":"2016-02-01T19:00:00.000Z","category":"technical","description":"An in depth dive on my main internship project at Phase2"},"issueNumber":9,"slug":"building-pattern-lab-workshop","title":"Building Pattern Lab Workshop","description":"An in depth dive on my main internship project at Phase2 ","content":"\r\n> As an intern fresh out of a local coding bootcamp, I was included in a meeting [where I was] tasked with building an internal training module that would explain the concepts of Pattern Lab to people across Phase2 (not just our front-end developers). The other key requirement was that it should be done in the “workshopper” format, popularized by nodeschool.io.\r\n\r\n\r\n> Pattern Lab is a fairly complex (not complicated) system with many moving parts, and the workshopper format is very good at one thing — being a terminal-based test runner for node.js. How to combine the two?\r\n\r\nThis was original published on an older version of the Phase2 blog, now you can see it on the wayback machine [here](https://web.archive.org/web/20160605095856/https://www.phase2technology.com/blog/building-pattern-lab-workshop/)","date":"2016-02-01T19:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/9","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/9/comments","title":"Building Pattern Lab Workshop","created_at":"2022-03-19T05:42:12Z","updated_at":"2022-03-19T05:42:39Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/9/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"technical","tags":[],"readingTime":"1 minute"},{"type":"blog","frontmatter":{"title":"What We Talk About When We Talk About Pattern Lab","date":"2015-09-29T00:00:00.000Z","category":"technical","description":"An old post extolling the virtues of atomic design.","disclosure":"While I still love everything Pattern Lab represents, I'd probably recommend you use Storybook or Knapsack now."},"issueNumber":10,"slug":"what-we-talk-about-when-we-talk-about-pattern-lab","title":"What We Talk About When We Talk About Pattern Lab","description":"An old post extolling the virtues of atomic design. ","content":"\r\n## Prototyping\r\n\r\nWhether your developmental choices are oriented for Drupal, Wordpress, Ruby, or any of the other myriad possibilities available to developers in 2015-- at the end of the day, what you see on the web boils down to HTML.\r\n\r\nIf we keep this simple fact in mind, the power of prototyping, particularly with Pattern Lab, quickly becomes clear.\r\n\r\nFirst, what do we mean by prototyping?\r\n\r\n**\"Simple: rapid, iterative generation of HTML, CSS, Javascript, and other assets expressly for the purpose of informing - and consumption by - builds in more complex systems.\"**\r\n\r\nThe rapid, iterative generation of assets provides developers, and their teams, with enormous benefits. Pixel-perfect design comps are a wonderful starting point, but with the multitude of screen sizes available to users today, it's practically impossible to translate comps exactly to the web. That's where iteration comes in-- quickly see what works and what doesn't, across all aspects of the design.\r\n\r\n* Solve problems early\r\n* Test UX early with real code\r\n* Easily updateable designs\r\n* Shared design vocabulary\r\n* Front-end development is FAST\r\n* Generate assets (CSS/JS/Icons) at STEP ONE\r\n* Parallel development with \"back-end\"\r\n* Roadmap for back-end development\r\n\r\nAll of those are important, but those last two are truly invaluable. Many current workflows have a division between front and back-end devs. Front end development can't truly begin until the complex backend structure is built and generating the html that needs to be stylized. Prototyping turns that division into a true partnership-- front-end developers can quickly generate simple HTML representations with real assets (CSS, JS, Icons, etc). While the back-end is being constructed, there are visible guidelines for what structures are needed and which classes need applied where. By following those guides, the CSS (and other assets) from the prototype are the exact same as the assets for the actual production site.\r\n\r\nWith all of that in mind, let's talk about Pattern Lab.\r\n\r\n## Prototyping with Pattern Lab\r\n\r\nPattern Lab is, in my opinion, the ideal tool for front-end web development in 2015. It's really a collection of tools, including: a living style guide, a component library, a viewport resizer for easy testing among a variety of screen sizes, annotations, and an auto refresh tool. All of which combine to streamline front-end development.\r\n\r\n* Implements Atomic Design at a code level\r\n* Produces HTML and assets like CSS and JS\r\n* Works locally, generates static, hostable code\r\n* A full interface to navigate all prototypes\r\n* Responsive tools built in [viewport resizer]\r\n* Is un-opinionated about *how* those assets are written:\r\n\t* BEM, SMACSS, Sass/Less\r\n\t* Task runners: Grunt, Gulp\r\n\r\nThe un-opinionated nature of Pattern Lab makes it trivial to add to your current workflow-- no need to learn new styles of writing code, Pattern Lab handles them all just the same.\r\n\r\nWith Pattern Lab, everyone on the team has access to everything– it’s very easy to see all design components at a glance and how they fit together, from basic styles and color palettes all the way through to full page mockups. This accessibility improves communication among various team members immensely. No more confusion about if you meant the `.header-logo--small` or the `.small-header_logo`.\r\n\r\nPattern Lab also makes editing trivial. Need to change a wrapper div around a button? Thanks to Pattern Lab's robust templating, fix it in one place, it’s fixed everywhere. No more hunting through umpteen different pages to make sure you didn’t miss one. Plus, the auto-refresh means you see all your changes instantly, ensuring things look exactly how they should.\r\n\r\nAs an added bonus, Pattern Lab can be hosted as a standalone styleguide & component library, or included as part of a larger theme in Drupal or Wordpress. If it's part of a theme, there is no duplication or moving of files required between Pattern Lab and the theme itself-- they share the exact same assets. Everything lines up perfectly. Because the assets used for the prototype are the same assets used for production, there is very little development time truly wasted by prototyping, but a whole host of efficient, cost-saving benefits.\r\n\r\n## But really, why use Pattern Lab?\r\nIf you're still not convinced, I think the [Pattern Lab](http://patternlab.io) website explains it best.","date":"2015-09-29T00:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/10","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/10/comments","title":"What We Talk About When We Talk About Pattern Lab","created_at":"2022-03-19T05:46:59Z","updated_at":"2022-03-19T06:14:47Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/10/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"technical","tags":[],"readingTime":"3 minutes"},{"type":"blog","frontmatter":{"title":"Dynamically draw SVG polygons with jQuery","date":"2015-04-20T12:00:00.000Z","category":"technical","tags":"javascript jquery svg","description":"Turns out, my 9th-grade math teacher was right--- algebra did come in handy someday."},"issueNumber":7,"slug":"dynamically-draw-svg-polygons-with-jquery","title":"Dynamically draw SVG polygons with jQuery","description":"Turns out, my 9th-grade math teacher was right--- algebra did come in handy someday. ","content":"\r\nAt Epicodus, one of our weekly tests was to design a web-app that would return the type of triangle based on three input values.\r\nSimple enough, but I wanted to actually _see_ the triangle, not just its alleged type. The triangle, if it exists, is also drawn using jQuery and SVG polygons. Turns out, my 9th-grade math teacher was right--- algebra did come in handy someday.\r\n\r\nYou can click [here to view the Triangle Tracker code](https://gist.github.com/tjheffner/79945d95f96cff582d924402e557b4dc).\r\n\r\nBelow, is the example code, showing how you can map form input values to an SVG canvas using jQuery in order to dynamically draw polygons. I'm going to warn you, there is some algebra.\r\n\r\nFirst, we're going to build the form structure. We want a form, an area to track submitted values, and a canvas to draw the triangles from submitted values. Here's what that looks like: [view gist](https://gist.github.com/tjheffner/79945d95f96cff582d924402e557b4dc#file-triangles-html)\r\n\r\nHopefully that was fairly straightforward. We have a form with an input field for each side of a triangle. After the form comes an SVG object, with a polygon item where the SVG will be drawn, if possible. After the canvas comes some container divs, for lists tracking previously input values. Each of these items has a unique id to make the jQuery selections easier.\r\n\r\nSpeaking of jQuery, we need the glue that will put all of those pieces together. The following script uses jQuery to take the form inputs, compute the type of triangle, if any, and then draw a SVG polygon to the canvas, using algebra and geometry.\r\n\r\n[js gist](https://gist.github.com/tjheffner/79945d95f96cff582d924402e557b4dc#file-svg-triangle-js)\r\n\r\nLet's break that down.\r\n\r\nBefore we do anything, we wait until the entire page has loaded. Then, we only fire the triangle logic on the form submit. This stops us from drawing triangles whenever a single input is changed, only when the whole form is ready.
\r\n\r\nThe '#type' clearing corresponds to a `` element in the form structure that displays the input values' resulting triangle type.
\r\n\r\nEach input value gets a variable. These represent sides of a triangle. We sort the values here to prepare for our algebra to come. We know that a triangle has 3 sides, and from this alone we can determine the type of triangle. We also know that a triangle has an area of 1/2 * base * height. That's the formula we need for drawing triangles, but it doesn't do us a lot of good when we have three sides. Fortunately, there's a formula for finding the area of a triangle if you know the length of all three sides.
\r\n\r\nThat formula goes like this:
\r\n

s = the sum of all sides / 2

area = sqrt(s * (s - side 1) * (s - side 2) * (s - side 3))

\r\n\r\nSo we can find the area, plus three sides. Thanks to our sorted values, we can use the longest side as the base. This gives us
\r\n

AREA = 1/2 * sorted[0] * h

h = (2 * A) / sorted[0]

\r\n\r\n This knowledge allows us to draw the triangles dynamically upon form input.
\r\n\r\nWe create a triangle object with 5 values--- 3 sides, plus a height value, and a \"short\" value, which is the smallest side of a right triangle that has the hypotenuse and second longest side equal to side2, aka sorted[1], and height. This 'short' value is the key to plotting the triangle vertices on the svg canvas.
\r\n\r\nAfter the triangle object, we use some logic with the first three values to determine what kind of triangle it is. If all inputs are the same, equilateral. Two identical inputs is isosceles, otherwise scalene. This determination is then output through the `` mentioned earlier. The input values for that type are also attached to the appropriate list.
\r\n\r\nNow comes the drawing logic. In the #picture div, we have an svg object with a set size, containing a polygon object that has a style applied, but no coordinates. We're going to use our triangle object values as points for the polygon. Because the inputs change every time the form is submitted, the triangle polygon created dynamically changes as well.
\r\n\r\nOur SVG object is set to a size of 400px wide by 300px tall. SVG uses a coordinate system where 0,0 is in the top left corner of the object. So our canvas goes from (0,0) to (0,400) across the x axis and (0,0) to (0,300) down on the y axis.
\r\n\r\nWith three sides to a triangle, we need three vertices, or for our purposes, coordinates. I arbitrarily place our first triangle corner coordinate at (100, 100) to help keep math easy.
\r\n\r\nIf the sides can't physically make a triangle, where the longest side is greater than the sum of the two shorter sides, the triangle is therefore \"impossible\" and we don't have to worry about drawing it. These values get thrown into the \"impossible\" list and the canvas is hidden.
\r\n\r\nIf the sides _can_ make a triangle, we use our first point at (100,100) and follow the x axis the length of our longest side. The y axis doesn't change. This gives us a line across the x axis at (100, 100) to (100 + the length of side 1, 100). We now how two points of the triangle. The third point will need to be the height of the triangle, as we calculated earlier. This gives us half of the coordinate pair-- ( ?, 100 + height). We add 100 for the same reason we added 100 to the x value of the other point-- our starting point is 100,100, so we treat that as our origin. Similar to zero-ing out the container weight when measuring on a scale-- we know that value is there, but we're pretending it isn't.
\r\n\r\nSo we have two and a half vertices:
\r\n\r\n

(100, 100)

(100 + a, 100)

(? , 100 + h)

\r\n\r\nIn order to find that missing x coordinate, we need to do some math. This is the reason we calculated the \"short\" value of the triangle earlier. The short function finds the value of the smallest side of the right triangle created by taking the height of our large triangle and the side opposite. The \"short\" value is a segment of the longest side of the large triangle.
\r\n\r\nIf we take the Pythagorean theorem `(side1^2 + side2^2 = side3^3)` and substitute in height for side3 and our short value for side1, we get `short = sqrt(side2^2 - height^2)`.
\r\n\r\nUsing this value, we know how far down the X axis we need to be for our last point to connect the original two sides. This makes our last coordinate pair (100 + short, 100 + h). By choosing to always draw one triangle side flat across the y=100 line, we only have to compute one coordinate pair.
\r\n\r\nWe now use jQuery to select the polygon item and tell it what points to draw from. It already has styles applied from the form structure, so coordinates are all it needs. If the triangle is impossible, we hide the svg entirely.
\r\n\r\nAnd that's it! Now you can use math to dynamically create polygons from form inputs to your heart's desire.","date":"2015-04-20T12:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/7","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/7/comments","title":"Dynamically draw SVG polygons with jQuery","created_at":"2022-03-19T05:29:39Z","updated_at":"2022-03-19T06:23:14Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/7/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"technical","tags":["javascript jquery svg"],"readingTime":"6 minutes"},{"type":"blog","frontmatter":{"title":"where the streets count backwards","date":"2014-06-01T12:00:00.000Z","description":"My friend asked me to contribute to a zine he was putting together about music that made you feel something, anything, where it counted.","category":"note"},"issueNumber":12,"slug":"where-the-streets-count-backwards","title":"where the streets count backwards","description":"My friend asked me to contribute to a zine he was putting together about music that made you feel something, anything, where it counted. ","content":"\r\n_My friend Austin Powe asked me to contribute an essay to a zine he was putting together about music that made you feel something, anything, where it counted. I feel a little guilty calling this an essay, but it was my submission nonetheless. Click to read his zine, “Surrounded by the Sound: 16 Stories About the Music That Changed Your Life.”_\r\n\r\n

\r\n\r\n> “You were drunker than high school, self-conscious and sweet.\r\n> I never ever felt so cool disguised in your sheets.\r\n> But I'm a constant headache, a tooth out of line.” \r\n\r\nJoyce Manor — Constant Headache\r\n\r\nIt felt like it ended before it started. It was another drunk Halloween night, but one I’ll never forget. It was the most beautiful parking lot in Eugene. You were there. I can’t remember what we were giggling about, but I remember yr glow beneath the streetlights. The way you bit yr bottom lip before we finally kissed. I remember every freckle. Every one. We didn’t last long together, maybe a month? Three? I’m still not entirely sure what counted. But I remember every thing that counted, every stolen kiss, every word whispered in the soft silences. \r\n\r\nA stubborn reminder that one perfect night’s not enough.\r\n\r\nJoyce Manor’s self-titled is a whirlwind nineteen minutes that is very much a kindred spirit.\r\nTen perfect tracks dripping with essential punk angst, coupled with powerful undercurrents of loves found and loves lost. Each track feels finished, but individually manages to feel cut short, ended well before it could have. Sounds about right.","date":"2014-06-01T12:00:00.000Z","ghMetadata":{"issueUrl":"https://github.com/tjheffner/heffdotdev/issues/12","commentsUrl":"https://api.github.com/repos/tjheffner/heffdotdev/issues/12/comments","title":"where the streets count backwards","created_at":"2022-03-19T05:54:44Z","updated_at":"2022-03-21T02:26:52Z","reactions":{"url":"https://api.github.com/repos/tjheffner/heffdotdev/issues/12/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0}},"category":"note","tags":[],"readingTime":"2 minutes"}]

Posts