Jens Grochtdreis jensgro

A Developer's Guide to GitHub Copilot Agent Mode: From IDE Collaborator to Autonomous Teammate

The New Class of AI Collaborators: Defining Copilot's Agentic Capabilities

Executive Summary: The "Agent" Ambiguity

A critical point of ambiguity within the GitHub Copilot ecosystem is the overloaded term "agent." An expert-level understanding requires first distinguishing between the two primary "agentic" products, which serve different purposes and operate in different environments.

A Guide to Chrome's Remote Debugging Feature

Ever wanted to control your browser with a script without losing your current login session? Or debug a tricky issue on a colleague's machine from your own desk? Chrome has a powerful built-in feature for this called remote debugging.

This guide explains what it is and how to get started.

What is Remote Debugging? 🤔

Although CSS has seen the light of the world [more than 20 years ago][1], it's still surprisingly under-researched. Our websites keep breaking in spectacular ways: visual inconsistencies caused by seemingly minor changes can go undetected for days, negatively impacting the user experience (UX), inducing customer churn and frustration, which can lead to lost opportunities. All too often, CSS is not perceived as a critical resource requiring proactive and deliberate care, but as an annoying necessity to advertise the brand to the consumer.

CSS is a very simple language: its [parsing][2] and [matching][3] semantics are incredibly easy to understand and implement. Moreover, it is very forgiving and

Linklist for using 11ty (Eleventy)

The project itself has a very good documentation.

	#!/usr/bin/env bash

	# List of banned packages with versions
	banned=(
	"ansi-styles@6.2.2"
	"debug@4.4.2"
	"chalk@5.6.1"
	"supports-color@10.2.1"
	"strip-ansi@7.1.1"
	"ansi-regex@6.2.1"

	(() => {
	const loadedIframes = []; // Holds { el, originalSrc }

	document.addEventListener(
	"load",
	(event) => {
	const iframe = event.target;

	if (!iframe.matches('iframe[loading="lazy"]')) return;

	*,
	::after,
	::before {
	box-sizing: border-box;
	}

	html {
	font-size: 16px;
	}

	// 3D Dom viewer, copy-paste this into your console to visualise the DOM as a stack of solid blocks.
	// You can also minify and save it as a bookmarklet (https://www.freecodecamp.org/news/what-are-bookmarklets/)
	(() => {
	const SHOW_SIDES = false; // color sides of DOM nodes?
	const COLOR_SURFACE = true; // color tops of DOM nodes?
	const COLOR_RANDOM = false; // randomise color?
	const COLOR_HUE = 190; // hue in HSL (https://hslpicker.com)
	const MAX_ROTATION = 180; // set to 360 to rotate all the way round
	const THICKNESS = 20; // thickness of layers
	const DISTANCE = 10000; // ¯\\_(ツ)_/¯

	// sh.mts: javascript shorthand

	// #region array tools
	/** id function (returns first argument) */
	export const id=<T,>(x: T): T=>x
	/** create an array filled with n copies of x */
	export const af=<T,>(n: number, x: T): T[]=>Array(n).fill(x) // TODO: make this 'afl' or 'fil' (aa?)
	/** loop i from 0..n, calling f(i) */
	export const ii=(n: number, f: (i: number)=>void)=>{for(let i=0;i<n;i++)f(i)}
	/** map f over [0..n] */

	/* version from https://kittygiraudel.com/snippets/sr-only-class/ */

	.sr-only {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	-webkit-clip-path: inset(50%) !important;
	clip-path: inset(50%) !important;
	height: 1px !important;
	overflow: hidden !important;
	margin: -1px !important;