Karl Horky

@karlhorky.com

Technical Founder, Curriculum Engineer @upleveled.io Org Team React Amsterdam, AmsterdamJS, @reactvienna.com Canadian, Austrian, he/him 📍Amsterdam https://github.com/karlhorky

VS Code release notes blog post showing a new setting:

Configurable extension auto-update delay
Setting:
extensions.autoUpdateDelay
This setting is managed at the organization level. Contact your administrator to change it.ORG
To give you more control over when extension updates are installed, you can now configure a delay for automatic extension updates. This builds on the delayed extension auto-updates feature introduced in the previous release.

Use the
extensions.autoUpdateDelay
This setting is managed at the organization level. Contact your administrator to change it.ORG setting to configure the delay in hours. By default, VS Code waits two hours before installing extension updates. The delay only applies when auto-update is enabled.

Hall full of people at JSNation 2026 in Amsterdam

bad AI-generated photo of Karl, wrong eyes, wrong face

Security: minimumReleaseAge setting for mitigating supply chain attacks on extensions #316867

In the last years, supply chain attacks have increased dramatically. A few examples in the VS Code extension ecosystem:

- AI-Slop ransomware test sneaks on to VS Code marketplace - BleepingComputer
- Malicious VS Code AI Extensions With 1.5M Installs Found Exfiltrating Code - The Hacker News
- Fake Clawdbot VS Code Extension Installs ScreenConnect RAT - Aikido
- Solidity Devs Targeted Again: Malicious VS Code Extension Drops ScreenConnect RAT - Checkmarx
- VS Code extensions contain trojan-laden image - ReversingLabs
- Malicious VSCode extensions on Microsoft's registry drop infostealers - BleepingComputer
- Malicious VSCode extensions infect Windows with cryptominers - BleepingComputer
- Nx Compromised to Steal Wallets and Credentials - Semgrep
- Supply Chain Risk in VS Code Extension Marketplaces - Wiz

Allow for minimumReleaseAge-style...

Integrated browser "edit mode": use inline text edits as a signal for Copilot edits #310710

karlhorky
opened 5 hours ago · edited by karlhorky
When performing marketing copy edits, it is often faster to just change text copy directly in the integrated browser than to describe the change in chat and wait for Copilot to make the change and the dev server to update the integrated browser (especially true with slower dev servers).

In the integrated browser, introduce a mode where DOM elements/nodes containing text are temporarily editable (eg. the behavior of contenteditable attribute). The user can then edit text inline and click on a "Save" button, upon which Copilot should use the diff of the edited text (plus nearby DOM context and innerHTML, as necessary) as a signal to propose source edits in the backing tsx / jsx / html / svelte / vue / etc file.

This proposal is NOT about persisting DOM edits deterministically to files. The browser would only be the interaction surface, while Copilot still generates normal source edits for review, based on the diff.

This could be extended to other non-text edits in future, such as image paths.

Alternatives considered
Full WYSIWYG editor, mapping changes to source files deterministically

cc @meganrogge @jruales @kycutler

Security releases available

Updates are now available for the 25.x, 24.x, 22.x, 20.x Node.js release lines to address:

- 3 high severity issues.
- 4 medium severity issues.
- 1 low severity issue.

This security release includes the following dependency updates to address public vulnerabilities:

- c-ares (1.34.6) on 20.x, 22.x, 24.x, 25.x
- undici (6.23.0, 7.18.0) on 20.x, 22.x, 24.x, 25.x

openPetition

Recognition of Work on Open-Source as Volunteering in Germany
Henning Lammert
Petition is addressed to
German Bundestag, Petition Committee
3,256 Signatures

3,134 from 30,000 for quorum in Germany

$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'$

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.

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).

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 │
╰─────────────────────────────────────────┴──────────────┴──────────┴──────────────────╯

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?

Expandable hovers for JavaScript and TypeScript

When you hover over a symbol in JavaScript or TypeScript, VS Code tries to show the most useful IntelliSense type information about that symbol. Types can be very complex, so one challenge for us has been trying to find the right balance between showing enough details to be useful, while not showing so much info that it becomes overwhelming. It's hard to come up with a good one size fits all approach, and also the level of type detail you want might change depending on what you are working on.

That's why this iteration, we've added new UI that gives you more control over how types are shown in hovers. When you hover over a symbol, now you can select the little + icon on the left side of the hover control to expand the interfaces and complex types in the hover into their components.

For example, you can use this to see the properties of an interface directly in the hover.

Screenshot of PR, showing that `experimental.typedRoutes` is no longer marked as "unsupported"

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...

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.]

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) => { });
```

$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 │ }$

$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$

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

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

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.

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
```

Code:

['a'].concat('b')
'c'.concat(['d'])

Error on ['d']:

Argument of type 'string[]' is not assignable to parameter of type 'string'.(2345)

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

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>
);
}

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>>

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 & more test"
},
{
"name" : ["Another test & testing stuff"]
}
]
}

If we render it like so, the first li will have the value Test & 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.

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

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.

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);

$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.$