[{"data":1,"prerenderedAt":904},["ShallowReactive",2],{"profile":3,"work":70},{"title":4,"description":5,"name":6,"role":7,"tagline":8,"location":9,"country":10,"workEligibility":10,"remote":11,"timezone":12,"email":13,"availability":14,"links":15,"skills":22,"education":40,"languages":52,"slug":54,"body":55},"","I build interfaces for products people use every day — mostly in Vue and Nuxt, and mostly at the\npoint where a design system meets real production constraints.","Jake Armour","Senior Frontend Developer","Vue 3 · Nuxt · TypeScript","Telford, United Kingdom","UK",true,"UTC−2 to UTC+2","jobs@jakearmour.com","Open to senior frontend roles",[16,19],{"label":17,"href":18},"GitHub","https:\u002F\u002Fgithub.com\u002Fjake-armour",{"label":20,"href":21},"LinkedIn","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fjakearmour",{"core":23,"other":31},[24,25,26,27,28,29,30],"Vue 3","Nuxt","TypeScript","JavaScript","HTML\u002FCSS","Tailwind CSS","Pinia",[32,33,34,35,36,37,38,39],"Design systems","Component libraries","Headless CMS","Core Web Vitals","Unit testing","CI\u002FCD","Data visualisation","Git",[41,47],{"institution":42,"qualification":43,"grade":44,"start":45,"end":46},"The University of Huddersfield","MEng Computer Science","Pass with Distinction",2014,2019,{"institution":48,"qualification":49,"grade":50,"start":51,"end":45},"Telford College of Arts and Technology","BTEC Information Technology","D*D*D*",2012,[53],"English (fluent)","profile",{"type":56,"children":57},"root",[58,65],{"type":59,"tag":60,"props":61,"children":62},"element","p",{},[63],{"type":64,"value":5},"text",{"type":59,"tag":60,"props":66,"children":67},{},[68],{"type":64,"value":69},"I'm currently a senior frontend developer at Spamhaus, where I've led two company rebrands and\nbuilt the Vue 3 component library the rest of the team ships on. Outside work I build tools I\nactually need: a component workshop for Vue, a zero-knowledge password manager, and a monitor\nthat watches the containers running in my house.",[71,220,630,738],{"title":72,"description":73,"tagline":74,"year":75,"status":76,"role":77,"featured":11,"order":78,"stack":79,"links":85,"highlights":89,"slug":93,"body":94},"Jungleland","Jungleland is a children's play centre in Telford. Until 2021 it had no booking system at all —\nfamilies simply turned up. Social distancing ended that: entry had to be capped per session, so\nthe whole thing had to be built from nothing. Timed slots with hard capacity limits, a deposit\ntaken at the point of booking, and a way for staff to open and close dates themselves without\ncalling me.","Timed-slot booking and deposits for a children's play centre",2021,"live","Sole developer — frontend, payments, backend, deployment",1,[80,30,81,82,83,84,29],"Nuxt 4","Stripe","AWS Amplify","AppSync \u002F DynamoDB","AWS SES",[86],{"label":87,"href":88,"primary":11},"junglelandbooking.com","https:\u002F\u002Fjunglelandbooking.com",[90,91,92],"Real customers, real payments","Multi-step flow that survives a refresh","Staff-managed dates and capacity","jungleland",{"type":56,"children":95},[96,100,105,112,117,129,149,155,175,181,198,204,209,215],{"type":59,"tag":60,"props":97,"children":98},{},[99],{"type":64,"value":73},{"type":59,"tag":60,"props":101,"children":102},{},[103],{"type":64,"value":104},"It has been running and taking bookings ever since.",{"type":59,"tag":106,"props":107,"children":109},"h2",{"id":108},"the-booking-flow",[110],{"type":64,"value":111},"The booking flow",{"type":59,"tag":60,"props":113,"children":114},{},[115],{"type":64,"value":116},"A parent booking a party is usually doing it one-handed. The flow is deliberately linear — pick a\ndate, pick a slot, pay a deposit, get a confirmation — and each step is its own route:",{"type":59,"tag":118,"props":119,"children":123},"pre",{"className":120,"code":122,"language":64},[121],"language-text","\u002Fbook\n  → \u002Fbook\u002F[date]\n    → \u002Fbook\u002F[date]\u002F[timeslot]\n      → \u002Fdeposit\u002F[id]\n        → \u002Fconfirmation\u002F[id]\n",[124],{"type":59,"tag":125,"props":126,"children":127},"code",{"__ignoreMap":4},[128],{"type":64,"value":122},{"type":59,"tag":60,"props":130,"children":131},{},[132,134,139,141,147],{"type":64,"value":133},"Booking state lives in a ",{"type":59,"tag":135,"props":136,"children":137},"strong",{},[138],{"type":64,"value":30},{"type":64,"value":140}," store persisted to ",{"type":59,"tag":125,"props":142,"children":144},{"className":143},[],[145],{"type":64,"value":146},"localStorage",{"type":64,"value":148},", so a half-finished booking\nsurvives a refresh, a backgrounded tab, or a phone that decides to lock mid-payment. That single\ndecision removed the most common support complaint from the first version.",{"type":59,"tag":106,"props":150,"children":152},{"id":151},"capacity-is-the-hard-part",[153],{"type":64,"value":154},"Capacity is the hard part",{"type":59,"tag":60,"props":156,"children":157},{},[158,160,166,168,173],{"type":64,"value":159},"Everything else follows from not overselling a slot. The data model is deliberately narrow —\n",{"type":59,"tag":125,"props":161,"children":163},{"className":162},[],[164],{"type":64,"value":165},"Date → TimeSlot → Booking",{"type":64,"value":167}," in ",{"type":59,"tag":135,"props":169,"children":170},{},[171],{"type":64,"value":172},"AppSync\u002FGraphQL over DynamoDB",{"type":64,"value":174}," — with capacity held on the\ntimeslot rather than derived at read time. Abandoned bookings expire on their own through\nDynamoDB TTLs rather than needing a cleanup job, so a parent who bails at the payment step\nreleases their slot without anyone intervening.",{"type":59,"tag":106,"props":176,"children":178},{"id":177},"payments-and-mail",[179],{"type":64,"value":180},"Payments and mail",{"type":59,"tag":60,"props":182,"children":183},{},[184,186,190,192,196],{"type":64,"value":185},"Deposits go through ",{"type":59,"tag":135,"props":187,"children":188},{},[189],{"type":64,"value":81},{"type":64,"value":191},", with the checkout session created server-side in a Nitro route so\nno key is ever exposed to the client. Confirmations are sent through ",{"type":59,"tag":135,"props":193,"children":194},{},[195],{"type":64,"value":84},{"type":64,"value":197},". Both are\nboring, on purpose — this is somebody's actual revenue.",{"type":59,"tag":106,"props":199,"children":201},{"id":200},"admin",[202],{"type":64,"value":203},"Admin",{"type":59,"tag":60,"props":205,"children":206},{},[207],{"type":64,"value":208},"Staff get a JWT-authenticated admin area to create bookable dates, set slot capacity, and see\nwhat has been booked. It is intentionally plain: the people using it are running a play centre,\nnot learning software.",{"type":59,"tag":106,"props":210,"children":212},{"id":211},"what-id-change",[213],{"type":64,"value":214},"What I'd change",{"type":59,"tag":60,"props":216,"children":217},{},[218],{"type":64,"value":219},"The repo has no automated tests and no linting — it grew from something built quickly under a\nreopening deadline and never had that debt paid down. If I picked it up again today, capacity\nlogic is the first thing I'd put under test, because it is the part that costs real money when\nit is wrong.",{"title":221,"description":222,"tagline":223,"year":224,"status":225,"role":226,"featured":11,"order":227,"stack":228,"highlights":232,"slug":236,"body":237},"Vitro","Vitro is a component workshop for Vue 3 — the thing you open to build a component in isolation,\nbefore it has a page to live on.","A Vite-native component workshop for Vue 3",2026,"building","Creator",2,[24,229,26,230,231],"Vite","vue-component-meta","Shiki",[233,234,235],"Stories are real Vue templates","Controls derived from your props","A playground non-developers can use","vitro",{"type":56,"children":238},[239,243,248,260,266,271,284,290,303,491,504,510,538,544,575,580,586,613,619,624],{"type":59,"tag":60,"props":240,"children":241},{},[242],{"type":64,"value":222},{"type":59,"tag":60,"props":244,"children":245},{},[246],{"type":64,"value":247},"It exists because writing Storybook stories was always the part of the job I put off. Authoring\nfriction was the problem I actually wanted to solve; format churn came a close second, because a\nstory format that keeps changing underneath you turns migrations into routine work. Histoire, the\nobvious alternative, had stalled.",{"type":59,"tag":60,"props":249,"children":250},{},[251,253,258],{"type":64,"value":252},"The CLI is ",{"type":59,"tag":125,"props":254,"children":256},{"className":255},[],[257],{"type":64,"value":236},{"type":64,"value":259},". Vite is the builder — not wrapped, not shimmed, just Vite.",{"type":59,"tag":106,"props":261,"children":263},{"id":262},"who-it-turned-out-to-be-for",[264],{"type":64,"value":265},"Who it turned out to be for",{"type":59,"tag":60,"props":267,"children":268},{},[269],{"type":64,"value":270},"It has earned its keep in a way I did not plan for. A lot of my work at Spamhaus is building\ncomponents that the marketing team have only ever seen as a Figma frame — approved in a design\nfile, never touched. Giving non-technical stakeholders somewhere hands-on to poke at instead\n(change the props yourself, with the Figma frame sitting next to the real rendered component)\nhas been worth more than any amount of written documentation.",{"type":59,"tag":60,"props":272,"children":273},{},[274,276,282],{"type":64,"value":275},"That is what makes the shareable-URL state and the ",{"type":59,"tag":125,"props":277,"children":279},{"className":278},[],[280],{"type":64,"value":281},"figmaUrl",{"type":64,"value":283}," embed the two features I would\nkeep above all the others: they turn \"here is the component\" from a meeting into a link.",{"type":59,"tag":106,"props":285,"children":287},{"id":286},"stories-are-just-vue",[288],{"type":64,"value":289},"Stories are just Vue",{"type":59,"tag":60,"props":291,"children":292},{},[293,295,301],{"type":64,"value":294},"The format is a ",{"type":59,"tag":125,"props":296,"children":298},{"className":297},[],[299],{"type":64,"value":300},".story.vue",{"type":64,"value":302}," file containing ordinary Vue markup:",{"type":59,"tag":118,"props":304,"children":308},{"className":305,"code":306,"language":307,"meta":4,"style":4},"language-vue shiki shiki-themes github-light github-dark","\u003Ctemplate>\n  \u003CStory title=\"Button\">\n    \u003CVariant title=\"Primary\">\n      \u003CAppButton variant=\"primary\">Save changes\u003C\u002FAppButton>\n    \u003C\u002FVariant>\n  \u003C\u002FStory>\n\u003C\u002Ftemplate>\n","vue",[309],{"type":59,"tag":125,"props":310,"children":311},{"__ignoreMap":4},[312,334,368,399,440,457,474],{"type":59,"tag":313,"props":314,"children":316},"span",{"class":315,"line":78},"line",[317,323,329],{"type":59,"tag":313,"props":318,"children":320},{"style":319},"--shiki-default:#24292E;--shiki-dark:#E1E4E8",[321],{"type":64,"value":322},"\u003C",{"type":59,"tag":313,"props":324,"children":326},{"style":325},"--shiki-default:#22863A;--shiki-dark:#85E89D",[327],{"type":64,"value":328},"template",{"type":59,"tag":313,"props":330,"children":331},{"style":319},[332],{"type":64,"value":333},">\n",{"type":59,"tag":313,"props":335,"children":336},{"class":315,"line":227},[337,342,347,353,358,364],{"type":59,"tag":313,"props":338,"children":339},{"style":319},[340],{"type":64,"value":341},"  \u003C",{"type":59,"tag":313,"props":343,"children":344},{"style":325},[345],{"type":64,"value":346},"Story",{"type":59,"tag":313,"props":348,"children":350},{"style":349},"--shiki-default:#6F42C1;--shiki-dark:#B392F0",[351],{"type":64,"value":352}," title",{"type":59,"tag":313,"props":354,"children":355},{"style":319},[356],{"type":64,"value":357},"=",{"type":59,"tag":313,"props":359,"children":361},{"style":360},"--shiki-default:#032F62;--shiki-dark:#9ECBFF",[362],{"type":64,"value":363},"\"Button\"",{"type":59,"tag":313,"props":365,"children":366},{"style":319},[367],{"type":64,"value":333},{"type":59,"tag":313,"props":369,"children":371},{"class":315,"line":370},3,[372,377,382,386,390,395],{"type":59,"tag":313,"props":373,"children":374},{"style":319},[375],{"type":64,"value":376},"    \u003C",{"type":59,"tag":313,"props":378,"children":379},{"style":325},[380],{"type":64,"value":381},"Variant",{"type":59,"tag":313,"props":383,"children":384},{"style":349},[385],{"type":64,"value":352},{"type":59,"tag":313,"props":387,"children":388},{"style":319},[389],{"type":64,"value":357},{"type":59,"tag":313,"props":391,"children":392},{"style":360},[393],{"type":64,"value":394},"\"Primary\"",{"type":59,"tag":313,"props":396,"children":397},{"style":319},[398],{"type":64,"value":333},{"type":59,"tag":313,"props":400,"children":402},{"class":315,"line":401},4,[403,408,413,418,422,427,432,436],{"type":59,"tag":313,"props":404,"children":405},{"style":319},[406],{"type":64,"value":407},"      \u003C",{"type":59,"tag":313,"props":409,"children":410},{"style":325},[411],{"type":64,"value":412},"AppButton",{"type":59,"tag":313,"props":414,"children":415},{"style":349},[416],{"type":64,"value":417}," variant",{"type":59,"tag":313,"props":419,"children":420},{"style":319},[421],{"type":64,"value":357},{"type":59,"tag":313,"props":423,"children":424},{"style":360},[425],{"type":64,"value":426},"\"primary\"",{"type":59,"tag":313,"props":428,"children":429},{"style":319},[430],{"type":64,"value":431},">Save changes\u003C\u002F",{"type":59,"tag":313,"props":433,"children":434},{"style":325},[435],{"type":64,"value":412},{"type":59,"tag":313,"props":437,"children":438},{"style":319},[439],{"type":64,"value":333},{"type":59,"tag":313,"props":441,"children":443},{"class":315,"line":442},5,[444,449,453],{"type":59,"tag":313,"props":445,"children":446},{"style":319},[447],{"type":64,"value":448},"    \u003C\u002F",{"type":59,"tag":313,"props":450,"children":451},{"style":325},[452],{"type":64,"value":381},{"type":59,"tag":313,"props":454,"children":455},{"style":319},[456],{"type":64,"value":333},{"type":59,"tag":313,"props":458,"children":460},{"class":315,"line":459},6,[461,466,470],{"type":59,"tag":313,"props":462,"children":463},{"style":319},[464],{"type":64,"value":465},"  \u003C\u002F",{"type":59,"tag":313,"props":467,"children":468},{"style":325},[469],{"type":64,"value":346},{"type":59,"tag":313,"props":471,"children":472},{"style":319},[473],{"type":64,"value":333},{"type":59,"tag":313,"props":475,"children":477},{"class":315,"line":476},7,[478,483,487],{"type":59,"tag":313,"props":479,"children":480},{"style":319},[481],{"type":64,"value":482},"\u003C\u002F",{"type":59,"tag":313,"props":484,"children":485},{"style":325},[486],{"type":64,"value":328},{"type":59,"tag":313,"props":488,"children":489},{"style":319},[490],{"type":64,"value":333},{"type":59,"tag":60,"props":492,"children":493},{},[494,496,502],{"type":64,"value":495},"No abstract ",{"type":59,"tag":125,"props":497,"children":499},{"className":498},[],[500],{"type":64,"value":501},"args",{"type":64,"value":503}," object standing in for a template. You write the markup you would actually\nwrite, which means a story is readable by anyone on the team and stays honest about how the\ncomponent is really used. The format is a semver-protected, additive-only contract — the\nmigration churn is the thing I was trying to escape, so committing to never causing it was the\npoint.",{"type":59,"tag":106,"props":505,"children":507},{"id":506},"controls-you-didnt-have-to-write",[508],{"type":64,"value":509},"Controls you didn't have to write",{"type":59,"tag":60,"props":511,"children":512},{},[513,515,520,522,528,530,536],{"type":64,"value":514},"Controls are derived from the component's own props via ",{"type":59,"tag":125,"props":516,"children":518},{"className":517},[],[519],{"type":64,"value":230},{"type":64,"value":521},". A variant with no\nslot content auto-renders ",{"type":59,"tag":125,"props":523,"children":525},{"className":524},[],[526],{"type":64,"value":527},"\u003CComponent v-bind=\"state\" \u002F>",{"type":64,"value":529},", so a component you have just written\ngets a working playground with zero configuration. Manual ",{"type":59,"tag":125,"props":531,"children":533},{"className":532},[],[534],{"type":64,"value":535},"Hst*",{"type":64,"value":537}," controls are there when you want\nto override, and control changes update the preview live without remounting — state survives, so\nyou can tweak a prop mid-interaction.",{"type":59,"tag":106,"props":539,"children":541},{"id":540},"three-views",[542],{"type":64,"value":543},"Three views",{"type":59,"tag":60,"props":545,"children":546},{},[547,552,554,559,561,566,568,573],{"type":59,"tag":135,"props":548,"children":549},{},[550],{"type":64,"value":551},"Canvas",{"type":64,"value":553}," for the component, ",{"type":59,"tag":135,"props":555,"children":556},{},[557],{"type":64,"value":558},"Source",{"type":64,"value":560}," for Shiki-highlighted markup, ",{"type":59,"tag":135,"props":562,"children":563},{},[564],{"type":64,"value":565},"Docs",{"type":64,"value":567}," for autodocs —\nprop, event and slot tables pulled from the type signatures, including JSDoc descriptions. If a\n",{"type":59,"tag":125,"props":569,"children":571},{"className":570},[],[572],{"type":64,"value":281},{"type":64,"value":574}," is set on the story, the Figma frame embeds alongside it.",{"type":59,"tag":60,"props":576,"children":577},{},[578],{"type":64,"value":579},"The full UI state — story, variant, every control value, viewport, background, theme — is encoded\nin the URL. Any view you are looking at is a link you can paste to a designer.",{"type":59,"tag":106,"props":581,"children":583},{"id":582},"built-output",[584],{"type":64,"value":585},"Built output",{"type":59,"tag":60,"props":587,"children":588},{},[589,595,597,603,605,611],{"type":59,"tag":125,"props":590,"children":592},{"className":591},[],[593],{"type":64,"value":594},"vitro build",{"type":64,"value":596}," produces a static, relative-path ",{"type":59,"tag":125,"props":598,"children":600},{"className":599},[],[601],{"type":64,"value":602},"dist\u002F",{"type":64,"value":604}," with per-story chunks that will serve from\nany subpath. It also emits a Storybook-compatible ",{"type":59,"tag":125,"props":606,"children":608},{"className":607},[],[609],{"type":64,"value":610},"\u002Findex.json",{"type":64,"value":612},", so existing visual-regression\ntooling — Lost Pixel, Playwright — works against it without adaptation. Adopting a new workshop\nshould not mean rewriting your VR pipeline.",{"type":59,"tag":106,"props":614,"children":616},{"id":615},"status",[617],{"type":64,"value":618},"Status",{"type":59,"tag":60,"props":620,"children":621},{},[622],{"type":64,"value":623},"M1–M6 complete: the full v1 workshop is working. Next is hosted publishing.",{"type":59,"tag":625,"props":626,"children":627},"style",{},[628],{"type":64,"value":629},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":631,"description":632,"tagline":633,"year":224,"status":225,"role":226,"featured":11,"order":370,"stack":634,"highlights":639,"slug":643,"body":644},"Cubby","Cubby is a self-hosted password manager — a Bitwarden replacement with a web dashboard and a\nFirefox extension. The constraint that shapes every decision in it: the server never sees\nanything it could decrypt. Your master password and vault keys do not leave the client.","A zero-knowledge password manager",[80,26,635,636,637,638],"Web Crypto","Postgres","Docker","WXT",[640,641,642],"Server only ever holds ciphertext","Shared vaults without breaking the model","Proven by test, not by claim","cubby",{"type":56,"children":645},[646,658,663,669,689,695,700,706,711,717],{"type":59,"tag":60,"props":647,"children":648},{},[649,651,656],{"type":64,"value":650},"Cubby is a self-hosted password manager — a Bitwarden replacement with a web dashboard and a\nFirefox extension. The constraint that shapes every decision in it: ",{"type":59,"tag":135,"props":652,"children":653},{},[654],{"type":64,"value":655},"the server never sees\nanything it could decrypt.",{"type":64,"value":657}," Your master password and vault keys do not leave the client.",{"type":59,"tag":60,"props":659,"children":660},{},[661],{"type":64,"value":662},"That is easy to claim and easy to get subtly wrong, so it is asserted by a test that talks to a\nlive Postgres, registers a user, creates an item, and fails if any row holds anything but\nciphertext. The property is enforced by CI rather than by my good intentions.",{"type":59,"tag":106,"props":664,"children":666},{"id":665},"where-the-crypto-lives",[667],{"type":64,"value":668},"Where the crypto lives",{"type":59,"tag":60,"props":670,"children":671},{},[672,674,680,682,687],{"type":64,"value":673},"Key derivation happens in the browser. The symmetric key stays in memory only — reload the page\nand you get the unlock screen back, master password required. The API deals exclusively in opaque\nblobs; it can tell you ",{"type":59,"tag":675,"props":676,"children":677},"em",{},[678],{"type":64,"value":679},"that",{"type":64,"value":681}," an item changed and ",{"type":59,"tag":675,"props":683,"children":684},{},[685],{"type":64,"value":686},"when",{"type":64,"value":688},", never what it says.",{"type":59,"tag":106,"props":690,"children":692},{"id":691},"sharing-without-cheating",[693],{"type":64,"value":694},"Sharing without cheating",{"type":59,"tag":60,"props":696,"children":697},{},[698],{"type":64,"value":699},"Shared vaults are where zero-knowledge designs usually quietly compromise. Cubby gives every user\nan RSA key-pair, with the private key wrapped under their own symmetric key. A shared vault has\nits own key, delivered to each member encrypted to that member's public key. Invite by email,\naccept, and everyone can read and edit — while the server still holds nothing but ciphertext and\na set of per-member wrapped keys it cannot open.",{"type":59,"tag":106,"props":701,"children":703},{"id":702},"the-rest-of-it",[704],{"type":64,"value":705},"The rest of it",{"type":59,"tag":60,"props":707,"children":708},{},[709],{"type":64,"value":710},"Revision-based delta sync against an encrypted local cache, so a client fetches what changed\nrather than the whole vault. Folders with encrypted names. Live TOTP codes. A configurable\ngenerator with look-alike exclusion. Client-side Bitwarden JSON import — decrypted, re-encrypted\nand uploaded without the plaintext touching the wire. Account recovery via a one-time key issued\nat signup, because \"we can reset it for you\" is precisely what a zero-knowledge system cannot\noffer.",{"type":59,"tag":106,"props":712,"children":714},{"id":713},"running-it",[715],{"type":64,"value":716},"Running it",{"type":59,"tag":60,"props":718,"children":719},{},[720,722,728,730,736],{"type":64,"value":721},"One ",{"type":59,"tag":125,"props":723,"children":725},{"className":724},[],[726],{"type":64,"value":727},"docker compose up",{"type":64,"value":729}," brings up Postgres, the API, and a Caddy proxy handling auto-TLS and\nrouting, plus a scheduled ",{"type":59,"tag":125,"props":731,"children":733},{"className":732},[],[734],{"type":64,"value":735},"pg_dump",{"type":64,"value":737}," backup with retention. The Firefox extension is built with\nWXT and is the piece still in progress.",{"title":739,"description":740,"tagline":741,"year":224,"status":225,"role":226,"featured":11,"order":401,"stack":742,"highlights":745,"slug":749,"body":750},"Beacon","I run a handful of Docker containers at home that are reachable from the internet. Beacon exists\nbecause I kept finding out one of them had fallen over by trying to use it.","Uptime monitoring for the containers I self-host",[80,743,636,637,744],"Drizzle","Cloudflare Tunnel",[746,747,748],"Watches from outside the box","No inbound ports, no manual DNS","One docker compose up","beacon",{"type":56,"children":751},[752,756,762,772,778,789,795,833,839,899],{"type":59,"tag":60,"props":753,"children":754},{},[755],{"type":64,"value":740},{"type":59,"tag":106,"props":757,"children":759},{"id":758},"the-one-rule",[760],{"type":64,"value":761},"The one rule",{"type":59,"tag":60,"props":763,"children":764},{},[765,770],{"type":59,"tag":135,"props":766,"children":767},{},[768],{"type":64,"value":769},"The monitor must not run on the same host as the things it watches.",{"type":64,"value":771}," Its entire job is to\nnotice when that host dies, which it cannot do from inside it. Obvious once stated, easy to get\nwrong when you are the person who owns both boxes and has a spare slot on one of them. Beacon\nruns somewhere else, deliberately, and everything about its packaging assumes that.",{"type":59,"tag":106,"props":773,"children":775},{"id":774},"getting-out-of-the-house-safely",[776],{"type":64,"value":777},"Getting out of the house safely",{"type":59,"tag":60,"props":779,"children":780},{},[781,783,787],{"type":64,"value":782},"The services it watches reach the internet through a ",{"type":59,"tag":135,"props":784,"children":785},{},[786],{"type":64,"value":744},{"type":64,"value":788}," — no inbound ports\nopen on the home network, no port forwarding, no DNS records maintained by hand, no certificates\nto renew. The tunnel dials out; nothing dials in.",{"type":59,"tag":106,"props":790,"children":792},{"id":791},"what-it-is",[793],{"type":64,"value":794},"What it is",{"type":59,"tag":60,"props":796,"children":797},{},[798,800,804,806,810,812,816,818,824,826,831],{"type":64,"value":799},"A ",{"type":59,"tag":135,"props":801,"children":802},{},[803],{"type":64,"value":80},{"type":64,"value":805}," app with an auth-protected dashboard: what is up, what is down, how long it has been\nthat way, and history per service. Checks and results live in ",{"type":59,"tag":135,"props":807,"children":808},{},[809],{"type":64,"value":636},{"type":64,"value":811}," via ",{"type":59,"tag":135,"props":813,"children":814},{},[815],{"type":64,"value":743},{"type":64,"value":817},", with\nmigrations applied on startup so a deploy is a restart. Auth is ",{"type":59,"tag":125,"props":819,"children":821},{"className":820},[],[822],{"type":64,"value":823},"nuxt-auth-utils",{"type":64,"value":825},". The whole\nthing is a single ",{"type":59,"tag":125,"props":827,"children":829},{"className":828},[],[830],{"type":64,"value":727},{"type":64,"value":832}," on a host that needs Docker and nothing else — no Node, no\npackage manager; dependencies are installed and the app built inside the image.",{"type":59,"tag":106,"props":834,"children":836},{"id":835},"configuration-is-load-bearing",[837],{"type":64,"value":838},"Configuration is load-bearing",{"type":59,"tag":60,"props":840,"children":841},{},[842,844,850,852,858,860,865,867,873,875,881,883,889,891,897],{"type":64,"value":843},"A note I left in the deployment guide for my future self, after it bit me twice: every\napplication variable must be ",{"type":59,"tag":125,"props":845,"children":847},{"className":846},[],[848],{"type":64,"value":849},"NUXT_",{"type":64,"value":851},"-prefixed. Nitro bakes ",{"type":59,"tag":125,"props":853,"children":855},{"className":854},[],[856],{"type":64,"value":857},"runtimeConfig",{"type":64,"value":859}," at build time and\nre-reads it at runtime ",{"type":59,"tag":675,"props":861,"children":862},{},[863],{"type":64,"value":864},"only",{"type":64,"value":866}," from ",{"type":59,"tag":125,"props":868,"children":870},{"className":869},[],[871],{"type":64,"value":872},"NUXT_*",{"type":64,"value":874},". Set ",{"type":59,"tag":125,"props":876,"children":878},{"className":877},[],[879],{"type":64,"value":880},"ADMIN_PASSWORD_HASH",{"type":64,"value":882}," instead of\n",{"type":59,"tag":125,"props":884,"children":886},{"className":885},[],[887],{"type":64,"value":888},"NUXT_ADMIN_PASSWORD_HASH",{"type":64,"value":890}," and sign-in returns a 503 while ",{"type":59,"tag":125,"props":892,"children":894},{"className":893},[],[895],{"type":64,"value":896},"docker compose exec",{"type":64,"value":898}," shows you a\nperfectly correct-looking value in the environment. The container starts, the dashboard loads,\nand the one thing you need it to do fails silently.",{"type":59,"tag":60,"props":900,"children":901},{},[902],{"type":64,"value":903},"Small operational details like that are most of what running your own infrastructure actually is.",1785686103274]