Sign in

Hugo

@codewithhugo.com
43 followers 98 following 54 posts

Senior Developer - Building alpinedevtools.com Wrote jesthandbook.com + ×3 books with Packt. Thoughts at codewithhugo.com

PostsRepliesMedia
Hugo @codewithhugo.com · 25/02/2026
Quadratic runtime complexity (nested loops) is really nasty since it's fast over small datasets/test cases but under real-world usage it breaks. In this case, the Alpine.js Devtools data panel would freeze.
000
Hugo @codewithhugo.com · 25/02/2026
This fix for an O(n^2) -> O(n) is just moving a reduce() out of a map(), but it took years to diagnose (thanks to showsubmit.com for being the reproduction case).
100
Hugo @codewithhugo.com · 25/01/2026
I would be interested
120
Hugo @codewithhugo.com · 21/11/2025
The super annoying thing here is that in my case it didn't manifest as a CSP failure but as a crash from the _website's_ code
010
Hugo @codewithhugo.com · 21/11/2025
Chrome is the opposite, adding inline scripts breaks stuff but its permissive about loading JS resources from Chrome extension URLs
110
Hugo @codewithhugo.com · 21/11/2025
Yeah I didn't manage to figure it out completely, based on the fix, it must be that when Firefox when it encounters a CSP with script-src, it wont allow loading from moz-extension://<extension-UUID> Weirdly enough it doesnt mind you injecting an inline script (and fetch-ing the resource is allowed)
110
Hugo @codewithhugo.com · 21/11/2025
Replied on GH but that looks suspiciously similar to an issue I fixed on Alpine Devtools to do with how Firefox CSPs deal with extension resource URLs
110
Hugo @codewithhugo.com · 26/10/2025
As far as they're concerned, the website is only there to deflected from call center/other manned support channels The only time reliability will come up & handling "edge cases" will be important is if there's some company wide initiative to reduce call center contact
000
Hugo @codewithhugo.com · 09/09/2025
I noticed this in an older version of date-fns (v1 or v2), 90% of the function I was reading was validating inputs, latest uses TS and doesnt validate as much Before TypeScript and IDEs that understand TypeScript (even in JS), that was kind of the JS way of doing types... runtime validation
040
Hugo @codewithhugo.com · 31/08/2025
One of those productivity/flow tips is to leave something half done so you can get going the next time LLMs/agents give you that in the cases where they don't one-shot your request. Even just firing up the dev server and testing the output still gets you closer to flow even in the one shot case.
010
Hugo @codewithhugo.com · 23/08/2025
Arguing with an LLM about whether I want to call Alpine.js devtools seamless or effortless
000
Hugo @codewithhugo.com · 19/08/2025
... in the gnarliest file of the project 1 line fix, but you had go know where to jam it Decent
000
Hugo @codewithhugo.com · 19/08/2025
Fed a repro into a coding agent (Jules) and it actually fixed the underlying bug Can we make a plan to solve it but in a way that i can take over from Jules if you cant solve it? (So probably include a reproduction, make sure it fails eg. automation tests, submit that code, then try to fix it)
100
Hugo @codewithhugo.com · 19/08/2025
Jira and Confluence are enterprise kitchen sinks As others mention, whatever you wanna build with them, you can. Where smaller/earlier stages players are more focused/have less flexibility so enforce a simpler process.
000
Reposted by Hugo
Luc van Donkersgoed @lucvandonkersgoed.com · 18/08/2025
The AWS News Feed is currently without funding 😢 Meanwhile development of new features continues, the site's numbers are consistently growing, and with the pre:Invent season about to fire up we expect only more visitors and subscribers in the coming months! Will you become a sponsor? Send me a DM!
023
Hugo @codewithhugo.com · 15/08/2025
Meanwhile Chrome rolled out Manifest v3 and started uninstalling non v3 extensions earlier this year...
000
Hugo @codewithhugo.com · 14/08/2025
👍 my pleasure
010
Hugo @codewithhugo.com · 07/08/2025
Started using jules.google.com Async development agent, you grant it access to GitHub repositories, it clones them in a VM and runs tasks (including scripts etc). Not bad for small tasks, stubbing/poc attempts or while on the go (slow to type code on mobile).
000
Hugo @codewithhugo.com · 05/08/2025
Also pre-TypeScript libraries that do a bunch of runtime parameter validation
000
Hugo @codewithhugo.com · 01/08/2025
I'm reviving my newsletter, have ~2 months of content scheduled. Subscribe if you think this content might interest you. buttondown.com/hugo/
000
Reposted by Hugo
isaacs @isaacs.bsky.social · 31/07/2025
Big news! I'm available for hire! If you have JavaScript/TypeScript you want written, and you have budget for an ambitious and highly skilled practitioner with over 20 years of experience doing that, including leading teams, communities, and execs, hit me up. izs.me (RT please)
izs.me
Isaac Z. Schlueter
35432
Hugo @codewithhugo.com · 29/07/2025
If you prefer it to your email inbox, I'll be sending them out Subscribe at buttondown.com/hugo#subscri...
buttondown.com
Code with Hugo: JS & Node.js in Prod
Subscribe for content about: TypeScript Node.js Test Runner Past focuses: The Jest Handbook Alpine.js Guides A weekly newsletter covering web technologies and developer tools with a particular foc...
000
Hugo @codewithhugo.com · 29/07/2025
I've aggregated some more advanced/non-obvioud TypeScript patterns in this new posts codewithhugo.com/typescript-t...
codewithhugo.com
TypeScript in the Trenches: Utility types and type manipulation patterns for application development · Code with Hugo
<p>7 advanced types and patterns that I&rsquo;ve used as part of TypeScript application development.</p> <p>These patterns help unlock new levels of type safety
100
Hugo @codewithhugo.com · 11/05/2025
Also found supademo.com/tools/screen... To add annotations in the padding space to make the images pop a bit more
supademo.com
Free Online Screenshot Generator | Supademo
Create, customize, and share professional screenshots effortlessly with Supademo's Free Online Screenshot Generator. Enjoy powerful creation tools, customizable templates, and seamless sharing options...
000
Hugo @codewithhugo.com · 11/05/2025
Was struggling to find a free product screenshot generator for Alpine Devtools Chrome extension For the Chrome Webstore you need to capture 1280x800 and I'm just not that accurate with drag and drop screenshot.rocks seems to do the basics of what I need (browser frame config, padding/background)
screenshot.rocks
Screenshot.Rocks | Create beautiful mobile or browser screenshots and mockups
Create mobile or browser mockups from screenshots in seconds. Screenshot.rocks turns ordinary browser screenshots into beautiful mockups
100
Hugo @codewithhugo.com · 03/05/2025
Aaaand just noticed it's not responsive I've got a plan to move alpine.codewithhugo.com over (which is 11ty) so will likely redo at that point
alpine.codewithhugo.com
000
Hugo @codewithhugo.com · 03/05/2025
Interesting concept of a minimalist blog ostwilkens.se/blog/setting... To be honest for alpinedevtools.com/updates I went even further: use .md files and generate the HTML using the VSCode Markdown All In One plugin.
100
Hugo @codewithhugo.com · 15/04/2025
Funny story I keep hitting this "I want to select elements where attr starts with *prefix*" Eg. Detect HTMX I need hx-* or data-hx-*
000
Hugo @codewithhugo.com · 15/04/2025
I'm not one to admit when I'm being stubborn But working on the Alpine Devtools in the evenings means I finally felt the "why no dark mode" pain This vindicates the time I spent wiring Tailwind (v4) properly the other day (devtools v1 is on Tailwind 1)
GitHub diff adding Tailwind dark: classes to support dark mode
000
Hugo @codewithhugo.com · 12/04/2025
What's next? - time travel debugging (store data updates and re-apply them) - improvements to component/data edit UX Let me know your workflow/features you need: alpinedevtools.com/survey
alpinedevtools.com
Alpine.js Devtools Workflow Survey
This short 6-question survey will help me prioritise features and explore ways to make Alpine.js Devtools more sustainable. If you use Alpine.js Devtools, I’d love your input! (I'm collecting emails t...
000
Hugo @codewithhugo.com · 12/04/2025
Early Access (paid) features, see alpinedevtools.com/pricing (launch discount!) - Alpine v3 stores inspect/data edit - Alpine v3 eval warnings - jump to source in elements tab for eval errors and components
200
Hugo @codewithhugo.com · 12/04/2025
Free Extension (re)available on Chrome webstore: - manifest v3 compatible (rewrite to @solidjs.com) - component inspect/data edit - performance fix for larger components (instant updates, tested on 10k data properties) - state/sync reload fixes (no more close/reopen, works on page refresh etc)
120
Hugo @codewithhugo.com · 12/04/2025
Live/(re)launched alpinedevtools.com Over the past few weeks.
alpinedevtools.com
Alpine Devtools
Alpine.js devtools is a Chrome extension for the Alpine.js JavaScript library. It allows you to detect, inspect and edit Alpine.js data and components in the Chrome Developer Tools.
110
Hugo @codewithhugo.com · 02/04/2025
One of the first times I've ever been bitten by Big O ``` data.map((d) => { prevState = oldData.reduce() }) ``` When data and oldData are ~10k entries, you're doing a 100 million iterations. Move the reduce out of the loop (.map here) and you're doing 20k...
000
Hugo @codewithhugo.com · 28/03/2025
No build Tailwind - use `@tailwindcss/browser` via CDN (but only on local) in your app - run `copy(document.querySelector('style').innerText)` (depending on whether you've got other styles you might need to mess with the selector) - paste into your .css file
010
Hugo @codewithhugo.com · 27/03/2025
So here's the deal: - rewrite the panel with SolidJS - launch paid early access (components features available now, stores in the next release) Early access available at: github.com/sponsors/Hug...
000
Hugo @codewithhugo.com · 27/03/2025
Trying something new (or maybe reviving an old project) I was part of the original crew that worked on Alpine devtools. Chrome has obsoleted the extension (granted, it has had no updates since Sept 24) with Manifest v3
Alpine.js devtools early access extension in the Chrome Web Store
100
Hugo @codewithhugo.com · 16/01/2025
Using Windows as a dev machine (temporarily) professionally for the first time after ~ a decade of being on Mac I started leaning into the IDE to run things, shell is just a minefield with backslash in paths, slow and bad auto complete Keyboard navigation muscle memory for VSCode letting me down
010
Hugo @codewithhugo.com · 15/01/2025
That looks awesome
000
Hugo @codewithhugo.com · 10/01/2025
MacBook Air M1 -> remote desktop via Citrix I guess will sip battery?
000
Hugo @codewithhugo.com · 04/12/2024
buttondown.com/hugo/archive...
buttondown.com
codewithhugo@next
Welcome to the 96th Edition of the Code with Hugo newsletter. A lot has happened since I was regularly sending this out. This is still a place to learn about...
000
Hugo @codewithhugo.com · 02/12/2024
I'm changing jobs in the new year so there may be a set of new posts about what the job search was like this time round Buttondown, which powers the newsletter has changed pricing tiers (stopping my send) and UI (hiding away a setting Ineed to toggle) let's see when the newsletter makes it out.
100
Hugo @codewithhugo.com · 02/12/2024
super excited about new Node.js features: I have test runner examples and a post about env file management github.com/HugoDF/node-... codewithhugo.com/load-env-var...
github.com
GitHub - HugoDF/node-test-runner-examples: Examples of tests using the `node:test` module and runner
Examples of tests using the `node:test` module and runner - HugoDF/node-test-runner-examples
100
Hugo @codewithhugo.com · 02/12/2024
As I look forward to 2025, here's some recent things I've been up to: Published JavaScript Design Patterns with Packt: www.amazon.co.uk/Javascript-D... My take on design patterns in JS (you can, but should you?). As well as other types of patterns in architecture and building JS applications
amazon.co.uk
110
Hugo @codewithhugo.com · 02/12/2024
Been trying to get my first newsletter issue in a while sent out, more on that at the end of the thread A lot has happened since I was regularly sending this out. I'm intending for it to still a place to learn about JavaScript/TypeScript and Node.js in the real world.
110
Hugo @codewithhugo.com · 02/12/2024
Good to be here!
010
Hugo @codewithhugo.com · 01/12/2024
Another thing that I've seen BFFs do is aggregate/transform multiple "service" responses (something that filtering in the API tier wouldn't fix)
010
Hugo @codewithhugo.com · 01/12/2024
Isomorphic SSR
010
Hugo @codewithhugo.com · 01/12/2024
But those are basically excuses 🤣
110
Hugo @codewithhugo.com · 01/12/2024
2. I don't use eval so comma + equals sign was/felt easier to implement than say s-attr="{ key: value }"
110