Karl Horky
LightNews LightNews
banner
karlhorky.com
Karl Horky
@karlhorky.com
2.7K followers 2.4K following 420 posts
Technical Founder, Curriculum Engineer @upleveled.io
Org Team React Amsterdam, AmsterdamJS, @reactvienna.com
Canadian, Austrian, he/him
📍Amsterdam https://github.com/karlhorky
Posts Replies Media Videos
karlhorky.com
npx-safe by @rafaelgss.dev :

Use the Node.js permissions model to make running npx on untrusted packages safer 🔥

github.com/RafaelGSS/do...
alias npx-safe='function _npx_safe() { local node_opts="--permission --allow-fs-read=$(npm prefix -g) --allow-fs-read=$(npm config get cache)" local package="" local package_args=() while [[ $# -gt 0 ]]; do if [[ "$1" == --* ]]; then # Anything starting with `--` goes into node_opts node_opts+=" $1" else # The first non-`--` argument is the package; the rest are package args if [[ -z "$package" ]]; then package="$1" else package_args+=("$1") fi fi shift done echo "=============================" echo " npx-safe Log " echo "=============================" echo "Node.js options:" echo " $node_opts" echo echo "Package:" echo " $package" echo if [[ ${#package_args[@]} -gt 0 ]]; then echo "Arguments:" for arg in "${package_args[@]}"; do echo " $arg" done echo fi echo "=============================" npx --node-options="$node_opts" "$package" "${package_args[@]}" }; _npx_safe'
October 16, 2025 at 9:43 AM
karlhorky.com
Why?

Dependabot security alert appears and update generated -> fails because the update is for a pnpm transitive dependency with the error:

Dependabot doesn't support the 'updating transitive dependencies' feature for pnpm package_manager
tar-fs has a symlink validation bypass if destination directory is predictable with a specific tarball #1 Error: Dependabot doesn't support the 'updating transitive dependencies' feature for pnpm package_manager Dependabot attempted to update your dependencies but encountered an unsupported feature: 'updating transitive dependencies' for pnpm package_manager. Currently, this feature is not supported by Dependabot.
September 25, 2025 at 1:09 PM
karlhorky.com
My request for Dependabot: Full support for @pnpm.io

(updates to transitive deps fail currently)

Voice support in the issue 🙌

github.com/dependabot/d...
pnpm transitive dependency updates support #13177 Dependabot doesn't support transitive dependency updates for pnpm, a very popular package manager (31M downloads / week as of writing).
September 25, 2025 at 1:09 PM
karlhorky.com
Codemods for Node.js 😍

Looking great, thanks to all contributors!
npx codemod search scope:nodejs Found 8 packages: ╭─────────────────────────────────────────┬──────────────┬──────────┬──────────────────╮ │ 📦 Name │ 📊 Downloads │ ⭐ Stars │ 👤 Author │ ├─────────────────────────────────────────┼──────────────┼──────────┼──────────────────┤ │ @nodejs/fs-access-mode-constants │ 8 │ 4 │ nekojanai (Jana) │ │ @nodejs/util-log-to-console-log │ 8 │ 3 │ Bruno Rodrigues │ │ @nodejs/process-main-module │ 5 │ 4 │ Bruno Rodrigues │ │ @nodejs/tmpDir-to-tmpdir │ 4 │ 4 │ nekojanai (Jana) │ │ @nodejs/rmdir │ 7 │ 6 │ Augustin Mauroy │ │ @nodejs/create-require-from-path │ 5 │ 4 │ Augustin Mauroy │ │ @nodejs/import-assertions-to-attributes │ 7 │ 5 │ Augustin Mauroy │ │ @nodejs/correct-ts-specifiers │ 0 │ 0 │ nodejs │ ╰─────────────────────────────────────────┴──────────────┴──────────┴──────────────────╯
August 30, 2025 at 4:06 PM
karlhorky.com
@netlify.com multiple users reporting Netlify edge functions being down, in case you didn't know yet

Maybe you can update the status page with the outage?

answers.netlify.com/t/the-site-s...
My site https://fincaguarumo.com (hosted by Netlify via fincaguarumo.netlify.app, a next.js app) suddenly returns a 500 error. In the logs, I can see only this: Error handling request: TypeError: functions is not a function at file:///root/src/bootstrap/server.ts:53:45 at mapped (ext:deno_http/00_serve.ts:407:24) at mapped (ext:deno_http/00_serve.ts:513:16) at ext:deno_http/00_serve.ts:729:29 at eventLoopTick (ext:core/01_core.js:178:7) at async netlify:bootstrap-stage1:4:1 I have not changed anything recently, I do not have any custom functions. I have no idea how to debug this error as it seems to stem from Netlify itself and not something on my end. Just to be sure, I triggered a manual deploy without cache, updated the @netlify/plugin-nextjs to 5.12.0, but to no avail. The app uses next.js 15. Is there anything else that can be done on my end?
August 11, 2025 at 5:59 PM
karlhorky.com
VS Code 1.103 (Jul 2025) finally has expandable hovers in JavaScript and TypeScript 😍

for when the hover info is showing the type name instead of the object / array / etc

code.visualstudio.com/updates/v1_1...
August 9, 2025 at 3:49 PM
karlhorky.com
Looks like `experimental.typedRoutes` is coming to Next.js Turbopack, thanks to Ben Gubler 🚀 🎉

github.com/vercel/next....
Screenshot of PR, showing that `experimental.typedRoutes` is no longer marked as "unsupported"
July 17, 2025 at 9:07 AM
karlhorky.com
My work in open source, from fixing papercuts to support students to discussing standards 🚀

Thanks so much to the Open Source Initiative @opensource.org for featuring me as a maintainer for Maintainer Month 2025!

opensource.org/maintainers/...
Screenshot of Open Source Initiative blog post by Karl Horky: Karl Horky: From Papercuts to Standards Hi, I’m Karl Horky (GitHub, LinkedIn), Technical Founder at UpLeveled – tech education programs for all skill levels. In an educational landscape of AI-generated solutions, disconnected islands of knowledge and barriers to entry, I focus on helping students level up by designing accessible curricula and contributing to open source. Then and Now I’ve been in open source for over 13 years, and in tech for more than 20, through which I have used a range of languages and technologies, from QBasic and C to...
May 21, 2025 at 10:04 AM
karlhorky.com
AI-generated image alt text in HTML and Markdown in VS Code April 2025 (1.100) 😍

code.visualstudio.com/updates/v1_1...
Generate alt text in HTML or Markdown You can now generate or update existing alt text in HTML and Markdown files. Navigate to any line containing an embedded image and trigger the quick fix via ⌘. or by selecting the lightbulb icon. [Screenshot that shows generating alt text for an image html element.]
May 8, 2025 at 11:39 PM
karlhorky.com
Oh nice, looks like the 2019 idea I had to "skip parameters in function parameter lists" may come to life in @chronicles.org's proposal "void Discard Bindings for ECMAScript" 😍
Parameters void discard bindings in parameter declarations help to avoid needing to give a name to parameters that might be unused by a callback or an overridden method of a subclass: ``` // project an array values into an array of indices const indices = array.map((void, i) => i); // passing a callback to `Map.prototype.forEach` that only cares about keys map.forEach((void, key) => { }); // watching a specific known file for events fs.watchFile(fileName, (void, kind) => { }); ``` Tweet from @karlhorky ECMAScript spec people 👇 Is / was there a proposal to skip parameters in function parameter lists like this? function mapper(, key) { /* use only the key */ }
May 7, 2025 at 11:44 PM
karlhorky.com
GritQL Biome plugins looking great 🔥

More options for simpler linting plugins 👍

ESLint `no-restricted-syntax` is almost there, but esquery can get pretty verbose...
Here is an example of a plugin that reports on all usages of Object.assign(): // ./path-to-plugin.grit `$fn($args)` where { $fn <: `Object.assign`, register_diagnostic( span = $fn, message = "Prefer object spread instead of `Object.assign()`" ) } output: $ biome lint /packages/tailwindcss-config-analyzer/src/introspect.ts:12:17 plugin ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ Prefer object spread instead of `Object.assign()` 10 │ function createContextFromConfig(config: Partial<Config>) { 11 │ return createContext( > 12 │ resolveConfig(Object.assign({}, DEFAULT_CONFIG, config)), │ ^^^^^^^^^^^^^ 13 │ ); 14 │ }
March 24, 2025 at 2:49 PM
karlhorky.com
`Cannot find matching keyid` error with latest pnpm?

Upgrade to Node.js v22.14.0, which updates to the fixed Corepack 0.31.0 version:

Windows: choco upgrade nodejs # or nodejs-lts

macOS: brew upgrade node # or node@22

Ubuntu: sudo apt-get --only-upgrade install nodejs
Deploy log showing "Cannot find matching keyid" error: 3:29:43 PM: ! Corepack is about to download https://registry.npmjs.org/pnpm/-/pnpm-10.2.1.tgz 3:29:43 PM: /opt/buildhome/.nvm/versions/node/v22.13.1/lib/node_modules/corepack/dist/lib/corepack.cjs:21535 3:29:43 PM: if (key == null || signature == null) throw new Error(`Cannot find matching keyid: ${JSON.stringify({ signatures, keys })}`); 3:29:43 PM: ^ 3:29:43 PM: Error: Cannot find matching keyid: {"signatures":[{"sig":"MEYCIQDkZyZZmBzkRcQowEEFiEcGp4/xV8GBLXxTEzz9QstrsAIhAPx6tvZixjTub6GPqJa82vcWFhUU39JCtoJvcoRK/K39","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"keys":[{"expires":null,"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","keytype":"ecdsa-sha2-nistp256","scheme":"ecdsa-sha2-nistp256","key":"MFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAE1Olb3zMAFFxXKHiIkQO5cJ3Yhl5i6UPp+IhuteBJbuHcA5UogKo0EWtlWwW6KSaKoTNEYL7JlCQiVnkhBktUgg=="}]} 3:29:43 PM: at verifySignature (/opt/buildhome/.nvm/versions/node/v22.13.1/lib/node_modules/corepack/dist/lib/corepack.cjs:21535:47) 3:29:43 PM: at installVersion (/opt/buildhome/.nvm/versions/node/v22.13.1/lib/node_modules/corepack/dist/lib/corepack.cjs:21882:7) 3:29:43 PM: at process.processTicksAndRejections (node:internal/process/task_queues:105:5) 3:29:43 PM: at async Engine.ensurePackageManager (/opt/buildhome/.nvm/versions/node/v22.13.1/lib/node_modules/corepack/dist/lib/corepack.cjs:22316:32) 3:29:43 PM: at async Engine.executePackageManagerRequest (/opt/buildhome/.nvm/versions/node/v22.13.1/lib/node_modules/corepack/dist/lib/corepack.cjs:22416:25) 3:29:43 PM: at async Object.runMain (/opt/buildhome/.nvm/versions/node/v22.13.1/lib/node_modules/corepack/dist/lib/corepack.cjs:23102:5) 3:29:43 PM: Node.js v22.13.1
February 11, 2025 at 11:47 AM
karlhorky.com
Thanks for the great talk at React Amsterdam @mickey.studio 🎉

Great to see more about this topic in design systems creation:

- Drawbacks of rigid, highly-coupled components
- Patterns of fine-grained component factoring and composition to counter these drawbacks
Mickey presenting at React Amsterdam, with the slide listing out problems with rigid, highly-coupled components: - Lacks context - Complex to maintain - Complex to modify - High cognitive load - Slow iterations - Prop-drilling - Lack of control
January 24, 2025 at 8:53 AM
karlhorky.com
> if you use the demo code and print `.get('a[]')` you get the value, right?

you get a string - that was the point

there is no way to receive an array value, which was the vulnerability

forked sandbox: codesandbox.io/p/devbox/pen...
Go to /?a=1&a=2 Go to /?a[]=1&a[]=2 Go to /?a=1,2 Search param for a: null typeof search param for a: object Search param for a[]: 1 typeof search param for a[]: string
January 13, 2025 at 2:49 PM
karlhorky.com
This is what we teach to students in the first lecture about TypeScript, that narrowing with runtime code is sometimes required
Narrowing 2/4 In circumstances where you are uncertain about the type of the data, typeof expressions can be used to check the type and also serve as a type guard, which narrows the type in TypeScript: ```ts function log(id: string | number) { console.log(id.length); // Error: Property 'length' does not exist // on type 'number' if (typeof id === 'string') { // Type narrowed to string console.log(id.length); // No errors! } } ``` instanceof expressions also work.
January 13, 2025 at 2:34 PM
karlhorky.com
PostgreSQL: Ever wanted to insert test data with explicit `id`s into a table with an identity column eg. `GENERATED ALWAYS AS IDENTITY`?

Added a new trick to PostgreSQL Tricks with a seeder script which achieves this (short version: detect + drop + re-add the identity)

github.com/karlhorky/po...
Seed Test Fixture Data with Explicit ids to Generated Identity Fields When adding data to a database for testing purposes, it's often useful to have explicit id values to reference records in other tables via foreign keys. However, these explicit id values are incompatible with identity fields such as a field specified with id PRIMARY KEY GENERATED ALWAYS AS IDENTITY - inserting records with explicit id values will lead to cannot insert a non-DEFAULT value into column errors from PostgreSQL: ``` 2025-01-06 12:49:32.107 UTC [17659] ERROR: cannot insert a non-DEFAULT value into column "id" 2025-01-06 12:49:32.107 UTC [17659] DETAIL: Column "id" is an identity column defined as GENERATED ALWAYS. 2025-01-06 12:49:32.107 UTC [17659] HINT: Use OVERRIDING SYSTEM VALUE to override. 2025-01-06 12:49:32.107 UTC [17659] STATEMENT: INSERT INTO regions (id, slug, title) VALUES ($1, $2, $3), ($4, $5, $6) ON CONFLICT (id) DO UPDATE SET id = excluded.id, slug = excluded.slug, title = excluded.title ``` To use explicit id values in test fixture data while using generated identity fields, drop the identity, insert the records and add the identity back. The following example of this approach uses: - Postgres.js `seedFixtures.ts` ``` import { readdir } from 'node:fs/promises'; import postgres from 'postgres'; if (!process.env.FEATURE_TEST_SEEDING) { throw new Error('Set the environment variable FEATURE_TEST_SEEDING to seed database with test data'); } const sql = postgres({ transform: postgres.camel, }); const testFixtures = (await readdir('./tables', { withFileTypes: true })) .filter((entry) => { return entry.isFile() && /^\d+-[^.]+\.fixture\.ts$/.test(entry.name); }) .sort((a, b) => { return parseInt(a.name.split('-')[0]!) - parseInt(b.name.split('-')[0]!); }); // continues at link ```
January 6, 2025 at 1:06 PM
karlhorky.com
one last edge case where I can imagine TS has only partial errors:

overlapping identically-named APIs between different types (Array.prototype.concat and String.prototype.concat)

but more uncommon, and I guess could be caught by types in other parts of program or other tooling like linters
Code: ['a'].concat('b') 'c'.concat(['d']) Error on ['d']: Argument of type 'string[]' is not assignable to parameter of type 'string'.(2345)
December 6, 2024 at 10:40 PM
karlhorky.com
In case this is still not clear, here's a demo

In this demo, tsc (with @types/node and @types/sanitize-html) will not allow building type-unsafe, insecure JS, because of the type error on line 25

(see tsc error in alt text, or just run `pnpm tsc` in the sandbox)

codesandbox.io/p/devbox/l7w...
Code: import { createServer } from "node:http"; import { parse } from "node:url"; import sanitize from "sanitize-html"; const port = 3000; const server = createServer((request, response) => { if (!request.url) { response.statusCode = 400; response.end("Invalid request"); return; } const url = parse(request.url, true); // Narrow the type in TS to string | string[] if (url.query.name === undefined) { response.statusCode = 400; response.end('Missing "name" query parameter'); return; } // This will still throw a TypeScript error, // and prevent a build with tsc const sanitized = sanitize(url.query.name); // Error: Argument of type 'string | string[]' is not assignable to parameter of type 'string'. response.statusCode = 200; response.setHeader("Content-Type", "application/json"); response.end(JSON.stringify({ message: "Query received", query: url.query })); }); server.listen(port, () => { console.log(`Server running at http://localhost:${port}`); }); TypeScript error when `tsc` is run: ➜ workspace git:(master) ✗ pnpm tsc index.ts:25:30 - error TS2345: Argument of type 'string | string[]' is not assignable to parameter of type 'string'. Type 'string[]' is not assignable to type 'string'. 25 const sanitized = sanitize(query.name); // Error: Argument of type 'string | string[]' is not assignable to parameter of type 'string'. ~~~~~~~~~~ Found 1 error in index.ts:25
December 6, 2024 at 5:45 PM
karlhorky.com
Or in Next.js use, you can't even pass in an array without special handling - everything is strings

(I think that's my favorite - secure by default, make the insecure thing harder)

codesandbox.io/p/devbox/sto...
Browser view: https://4fmkh6-3002.csb.app/?a=1&a=2 Search param for a: 1 typeof search param for a: string Code: 'use client'; import { useSearchParams } from "next/navigation"; export default function Home() { const searchParams = useSearchParams(); console.log(searchParams.get('a')); return ( <div> <a href="/?a=1&a=2">Go to /?a=1&a=2</a><br /> <a href="/?a[]=1&a[]=2">Go to /?a[]=1&a[]=2</a><br /> <a href="/?a=1,2">Go to /?a=1,2</a><br /><br /> Search param for a: {String(searchParams.get('a'))}<br /> typeof search param for a: {typeof searchParams.get('a')} </div> ); } Browser view: https://4fmkh6-3002.csb.app/?a[]=1&a[]=2 Search param for a: null typeof search param for a: object Code: 'use client'; import { useSearchParams } from "next/navigation"; export default function Home() { const searchParams = useSearchParams(); console.log(searchParams.get('a')); return ( <div> <a href="/?a=1&a=2">Go to /?a=1&a=2</a><br /> <a href="/?a[]=1&a[]=2">Go to /?a[]=1&a[]=2</a><br /> <a href="/?a=1,2">Go to /?a=1,2</a><br /><br /> Search param for a: {String(searchParams.get('a'))}<br /> typeof search param for a: {typeof searchParams.get('a')} </div> ); } Browser view: https://4fmkh6-3002.csb.app/?a=1,2 Search param for a: 1,2 typeof search param for a: string Code: 'use client'; import { useSearchParams } from "next/navigation"; export default function Home() { const searchParams = useSearchParams(); console.log(searchParams.get('a')); return ( <div> <a href="/?a=1&a=2">Go to /?a=1&a=2</a><br /> <a href="/?a[]=1&a[]=2">Go to /?a[]=1&a[]=2</a><br /> <a href="/?a=1,2">Go to /?a=1,2</a><br /><br /> Search param for a: {String(searchParams.get('a'))}<br /> typeof search param for a: {typeof searchParams.get('a')} </div> ); }
December 5, 2024 at 9:03 AM
karlhorky.com
Yeah, I guess I'm used to TypeScript param types catching these things for me already, eg. Express query param types:

www.typescriptlang.org/play/#code/J...
Code: import {type Request} from '@types/express-serve-static-core' import sanitizeHtml from 'sanitize-html'; const request = {} as Request sanitizeHtml(request.query.abc!) Error (on "request.query.abc"): Argument of type 'string | ParsedQs | string[] | ParsedQs[]' is not assignable to parameter of type 'string'. Type 'ParsedQs' is not assignable to type 'string'.(2345) const request: Request<ParamsDictionary, any, any, QueryString.ParsedQs, Record<string, any>>
December 5, 2024 at 8:53 AM
karlhorky.com
Ah interesting, and in the case of Dust, it seems like it was to avoid XSS vulnerabilities caused by missing encoding

github.com/linkedin/dus...
I just stumbled upon this issue and I honestly couldn't understand why this happens. Let's say you have a template like <ul>{~n} {#section} <li>{name}</li>{~n} {/section} </ul> and the data to render is { "section" : [ { "name" : "Test &amp; more test" }, { "name" : ["Another test &amp; testing stuff"] } ] } If we render it like so, the first li will have the value Test &amp; more test, but the second one will render Another test & testing stuff. Why do the two behave differently? In my head they should behave the same way, but I can't for the life of me find what causes that difference.
December 5, 2024 at 8:25 AM
karlhorky.com
it's crazy how often a new typescript-eslint rule ends up teaching JavaScript and TypeScript fundamentals 😮 🚀

typescript-eslint.io/rules/return...
left pane (code): async function invalidAlways1() { try { return Promise.resolve('try'); } catch (e) {} } async function invalidAlways2() { return Promise.resolve('try'); } async function invalidAlways3() { return await 'value'; } reported errors: @typescript-eslint/return-await - docs Returning an awaited promise is required in this context. 3:12 - 3:34 > Add `await` before the expression. Use caution as this may impact control flow. Returning an awaited promise is required in this context. 8:10 - 8:32 Returning an awaited value that is not a promise is not allowed. 12:10 - 12:23 return-await Enforce consistent awaiting of returned promises. This rule builds on top of the eslint/no-return-await rule. It expands upon the base rule to add support for optionally requiring return await in certain cases. The extended rule is named return-await instead of no-return-await because the extended rule can enforce the positive or the negative. Additionally, while the core rule is now deprecated, the extended rule is still useful in many contexts: - Returning an awaited promise improves stack trace information. - When the return statement is in try...catch, awaiting the promise also allows the promise's rejection to be caught instead of leaving the error to the caller. - Contrary to popular belief, return await promise; is at least as fast as directly returning the promise.
November 28, 2024 at 10:19 AM
karlhorky.com
Playwright 1.49's new `.toMatchAriaSnapshot()` 😍

Nice and compact YAML syntax to test multiple elements in an accessibility tree 🎉

Thanks Pavel Feldman, @max.sh , @skn0tt.bsky.social , Dmitry Gozman and everyone else involved!

playwright.dev/docs/release...
Aria snapshots New assertion `expect(locator).toMatchAriaSnapshot()` verifies page structure by comparing to an expected accessibility tree, represented as YAML. ```ts await page.goto('https://playwright.dev'); await expect(page.locator('body')).toMatchAriaSnapshot(` - banner: - heading /Playwright enables reliable/ [level=1] - link "Get started" - link "Star microsoft/playwright on GitHub" - main: - img "Browsers (Chromium, Firefox, WebKit)" - heading "Any browser • Any platform • One API" `); ``` You can generate this assertion with Test Generator and update the expected snapshot with `--update-snapshots` command line flag. Learn more in the aria snapshots guide.
November 26, 2024 at 5:57 PM
karlhorky.com
nice!

some before and after code shots from the video (with alt text)
Before: @Component({ standalone: true, selector: 'zippy', ... }) class Zippy {} @Component({ selector: 'app-root', standalone: true, imports: [Zippy], template: '<zippy />', }) export class AppComponent { name = 'Minko'; } bootstrapApplication(AppComponent); After: @Component({ ... }) class Zippy {} @Component({ template: '<Zippy/>' }) export class AppComponent { name = 'Minko'; } bootstrapApplication (AppComponent);
November 24, 2024 at 5:57 PM
karlhorky.com
I like the overall idea behind privacy protections for users 👍

But cookie banners / similar are a bad technical implementation, imposing bad UX on millions of users

This makes a noticeable impact on user frustration, not to mention Europe's productivity and economy

legiscope.com/blog/hidden-...
For the most part, small businesses use cookies efficiently without precise user identification. Identifying users typically requires a court order to process IP addresses, which is rarely pursued. Therefore, cookie banners primarily serve to mitigate theoretical legal risks rather than enforce extensive user tracking. It is not to say that some businesses do not use cookies to operate user tracking on a massive scale. Some companies relying exclusively on advertising do share user data with very large pools of partners—sometimes hundreds of ad partners. In that case, cookie banners do offer privacy protections for users. However, looking at the general scale of the internet, only a very small fraction of websites use mass-scale partnerships as their main economic model. For users, repeated interactions with cookie banners lead to significant frustration and complete loss of vigilance. The consent fatigue results in users mindlessly accepting terms without proper consideration, thereby undermining the very intent of the regulations. The constant barrage of consent prompts not only reduces productivity but diminishes user satisfaction and erodes trust in online platforms. Conclusion The realization that Europeans spend 575 million hours annually clicking on cookie banners highlights a significant, yet often overlooked, economic and productivity drain. These processes deliver minimal privacy benefits and little enhancement to business performance.
November 17, 2024 at 11:17 AM