Pinned
Hugo
Hugo
@codewithhugo.com
Senior Developer - Building alpinedevtools.com Wrote jesthandbook.com + ×3 books with Packt. Thoughts at codewithhugo.com
43 followers98 following54 posts
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).
Hugo reposted
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).
I'm reviving my newsletter, have ~2 months of content scheduled. Subscribe if you think this content might interest you. buttondown.com/hugo/
Hugo reposted
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)
I've aggregated some more advanced/non-obvioud TypeScript patterns in this new posts codewithhugo.com/typescript-t...
If you prefer it to your email inbox, I'll be sending them out Subscribe at buttondown.com/hugo#subscri...
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)
Also found supademo.com/tools/screen... To add annotations in the padding space to make the images pop a bit more
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.
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
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-*
Yeah so I didn't want to borrow the v-bind/x-bind shorthand because I explicitly am not doing a reactive binding Re why it's `data-s-attr="attrName=contextValue"` 1. The querySelectorAll is simpler (select for data-s-attr), I'm not even sure how I would use querySelect for "attrs starting with :"
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
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
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)
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...
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...
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
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...
Been playing with simple web components recently for some codewithhugo.com pages Found it a bit painful to do templating (`.innerHTML` or `.appendChild` friendly options) Open sourced 2 utils that I couldn't find a lightweight existing package for (`lit-html` seems heavy handed in this case)
`html-esc`: A template literal tag which escapes interpolated values github.com/HugoDF/html-... `render-tmpl`: A `<template>` based HTML templating library ("directives" to make it easy to inject values and attributes into your template) github.com/HugoDF/rende...
You are up to date.