Had a great time delivering my Full Stack Guardrails for AI Agents masterclass at The Geek Gathering 2026 (Osijek, Croatia) 🙌
Topics
- ways AI can fail in software development
- deterministic guardrails to help AI make fewer mistakes
- exercise to build app feature with guardrails
![https://github.com/karlhorky/next-js-tricks#check-nextjs-typescript-plugin-diagnostics-in-terminal
Check Next.js TypeScript Plugin Diagnostics in Terminal
Next.js includes a custom TypeScript plugin for diagnostics such as missing types on metadata exports. However, the plugin diagnostics are not reported by tsc or a next CLI subcommand.
The TypeScript team have up until now (August 2026) rejected the feature request that tsc execute TypeScript language-service plugins:
microsoft/TypeScript#16607
To report the Next.js plugin diagnostics in the terminal and CI, install @typescript-eslint/project-service:
pnpm add --save-dev @typescript-eslint/project-service
Make sure the existing tsconfig.json enables the Next.js plugin:
{
"compilerOptions": {
"plugins": [{ "name": "next" }]
}
}
Add the following script:
scripts/next-tsc.ts
...](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:b3xwbnwkl5qzjjhkwoimvb6x/bafkreigumxkk5j5cxrzuwy3mzepud6eodtm2akxftbo2cotmrtnaygxahm)
![packages/database/tables/0150-quizzes.ts
```diff
- typeId: QuizType['id'];
+ curriculumVersionId: CurriculumVersion['id'];
+ quizTypeId: QuizType['id'];
```
@karlhorky
switch from `type_id` to `quiz_type_id` to match existing foreign key naming patterns](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:b3xwbnwkl5qzjjhkwoimvb6x/bafkreidqzlfekhfs2vcwyk4o7flmltzildrkffhqcampfpd7uru2syh2ki)
![https://github.com/upleveled/youtube-private-invitations/pull/2
Example PR title and description:
Add endpoint sync with OpenAPI contract #2
Depends on PR #1
Manual sync in PR #1 lets channel owners paste add/remove invitees in YouTube Studio, so it works without a backend. Some teams already decide private-video invite changes outside the extension (eg. cohort tools, admin dashboards, CRMs), and need the extension to fetch those pending changes without background polling.
This PR adds endpoint sync on top of the manual YouTube Studio automation. The options page stores API request settings, and the popup fetches pending invitations only when the user opens it or refreshes it.
Before changing YouTube private-video invitees, the popup shows one pending invitation change:
affected videos
invitees to add
invitees to remove
previous/next controls
an Apply button
When the user clicks Apply, the extension opens the first pending video's YouTube Studio edit page for the native private-share seed save, applies the same invitee changes to the affected videos, and reports each result back to the endpoint.
TODO
- [ ] Add options page API request settings textarea
- [ ] Parse .http-style endpoint URL and request headers
- [ ] Fetch pending invitations from GET <endpoint> only from popup open or refresh
- [ ] Add popup pending-change preview, navigation, refresh, and Apply action
- [ ] Show add/remove invitees and compact affected video links before applying
- [ ] Collapse affected video links after 5 videos
- [ ] Open the first pending video's YouTube Studio edit page for the native seed save
- [ ] Detect ytcp-error-section.app-load for wrong active channel or inaccessible videos
- [ ] Ask the user to switch YouTube Studio channels manually when YouTube Studio blocks access
- [ ] Reuse YouTube Studio automation for add and remove actions
- [ ] POST each invitation result to <endpoint>
- [ ] Keep failed invitations pending by endpoint behavior
- [ ] Always send reque...](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:b3xwbnwkl5qzjjhkwoimvb6x/bafkreiejt2ftsy4z6rrxxxeeia65kxwmnq5lglmul6d6gogtitt26rgfxy)
![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'](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:b3xwbnwkl5qzjjhkwoimvb6x/bafkreif5l4ryqge3ybrwgdrxdv4666pky5cgicxkohru7f3hw3ow7b6rae)
![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.]](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:b3xwbnwkl5qzjjhkwoimvb6x/bafkreiggfmfsjw6q3g3io5bav7lob2fnuq3xueg334ml4so6hw2ok243ty)
![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](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:b3xwbnwkl5qzjjhkwoimvb6x/bafkreialhago73cb3xyz3eqg4zuzbyehbd4j4cgc63k4u4ybc6knlezpwm)
![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](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:b3xwbnwkl5qzjjhkwoimvb6x/bafkreih4f4absbok6lct3vmy4b2gnnftqdat5o6va54usqb5o47c56ygle)
![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
```](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:b3xwbnwkl5qzjjhkwoimvb6x/bafkreig4kq6s4t44q4xluxkoyzj3dqzzmltkc6qb2ynmrcm2u3ymk7eiga)
![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
```](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:b3xwbnwkl5qzjjhkwoimvb6x/bafkreiaw4g4zu7ndtpn7rd3mpp6ysndp7tfo6xgkpwt7rghk5ol2x5zl7a)
![Code:
['a'].concat('b')
'c'.concat(['d'])
Error on ['d']:
Argument of type 'string[]' is not assignable to parameter of type 'string'.(2345)](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:b3xwbnwkl5qzjjhkwoimvb6x/bafkreigzypgaq4n3pv2svry5yktsjzfctjg5nc5hdeikwts34y3vy7lrum)
![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](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:b3xwbnwkl5qzjjhkwoimvb6x/bafkreietojzm2aedjdfwg2553vpdf5mywpjpcjvbknvfgegvgk532wosrm)
![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>
);
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:b3xwbnwkl5qzjjhkwoimvb6x/bafkreihzsvl2e2gpnuy4x7e2ewq7vy275n4wwbx267vfps3vdhy7pk6fne)
![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>
);
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:b3xwbnwkl5qzjjhkwoimvb6x/bafkreid725pfuz3bo2u2ik6bavwll3jmd4n3257gfc2cp4ynsfy3ole6we)
![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>
);
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:b3xwbnwkl5qzjjhkwoimvb6x/bafkreibmrobs67ck7mgvbg7fpcqufygo3r7f5zhrff25mxdwo4upzp5jwy)
![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>>](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:b3xwbnwkl5qzjjhkwoimvb6x/bafkreih4of2cjnslylhef7nagblgxqt6gb2hwrjdokjvdy74ami3xgkcb4)
![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.](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:b3xwbnwkl5qzjjhkwoimvb6x/bafkreibiplvnknho23myv74wuwdkxuyy526jebxyrxjtft5kzpd4lnqiee)
![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.](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:b3xwbnwkl5qzjjhkwoimvb6x/bafkreiaa6yk2y7unzxmstzeeli7otyqo6sq5wtx53r7clggh2i2mjyvfly)
![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);](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:b3xwbnwkl5qzjjhkwoimvb6x/bafkreidgtibbdbswqs55jbqz3aw5jhfndbtopsfrbfasy6qf2rxywlnfve)
