DEV Community: netsi1964 🙏🏻

Stop med at lade AI styre dit projekt! 6 benhårde tips til prompt engineering

netsi1964 🙏🏻 — Fri, 26 Jun 2026 15:32:28 +0000

Jeg har læst gode blog posts af Allan Knox og har samlet noget af essensen omkring prompt engineering.

Jeg samlet dem til 6 Do's & Don'ts til dit arbejde med AI, og vigtigst af alt: hvorfor de virker i maskinrummet.

1. Lad aldrig AI vælge dit "Hvorfor" (Own the Why)

🔴 DON'T: "Find på funktionerne til en god opgavestyrings-app."

Hvorfor det er skidt: Du lader AI'en udfylde hullerne og gætte på, hvilket problem appen egentlig løser. Hele dit projekt ender med at bygge på en maskines forkerte antagelse.

🟢 DO: "Jeg bygger en app specifikt til freelance-tømrere, der glemmer at fakturere. Skærp denne idé."

Hvorfor det er godt: Dit "hvorfor" er det fundament, som alle fremtidige beslutninger og funktioner skal pege tilbage på. Du skal selv eje formålet.

2. Styr dit scope (AI forbereder, du beslutter)

🔴 DON'T: Lad AI'ens gigantiske bruttoliste over mulige features blive dit faktiske projekt-scope.

Hvorfor det er skidt: AI'ens liste ser flot ud, men det er en fælde. Det er bare en bunke af muligheder uden nogen form for prioritering. Faren er, at du ikke aktivt træffer en beslutning, men bare glemmer at vælge fra.

🟢 DO: Brug AI til at kortlægge mulighederne, men træf selv den hårde beslutning om at skære alt andet end din Minimum Viable Product (MVP) fra.

Hvorfor det er godt: AI er fantastisk til at skabe bredde og idégenerere, men det er din opgave at prioritere og foretage fravalg.

3. Kend forskel på model og værktøj (De to lag)

🔴 DON'T: Skæld dit værktøj (f.eks. Cursor eller Copilot) ud over at være "dumt".

Hvorfor det er skidt: Hvis du forveksler selve AI-modellen med platformen, fører det til uretfærdige sammenligninger, dårlige beslutninger og spildte penge.

🟢 DO: Husk at skelne mellem "hjernen" (Claude/GPT, som tænker og ræsonnerer) og "skrivebordet" (dit IDE/platform, som leverer filer og kontekst).

Hvorfor det er godt: Det hjælper dig med at identificere det sande problem. Oftest er modellen fin, men dit miljø mangler at give den adgang til de rette informationer.

4. Mestre opgave-nedbrydning (Task Decomposition)

🔴 DON'T: "Byg et komplet login-system med database, emails og sikkerhed."

Hvorfor det er skidt: Store problemer skjuler altid mindre problemer, og mange projekter fejler udelukkende fordi, opgaven aldrig blev brudt ordentligt ned.

🟢 DO: "Første trin: Skriv kun database-schemaet for brugeren. Bagefter bygger vi API'et."

Hvorfor det er godt: God opgave-nedbrydning forvandler kompleksitet til fremdrift, og AI præsterer langt bedre med små, overskuelige opgaver.

5. Gætteri er ikke debugging

🔴 DON'T: At prompte "Det virker ikke, fix det!" eller at indsætte tilfældige print-statements.

Hvorfor det er skidt: Gætteri er ikke debugging. Denne tilgang skjuler ofte det egentlige problem og har det med at skabe nye fejl, mens AI'en famler i blinde.

🟢 DO: Analyser fejlmeddelelser, observer systemet og find rodårsagen, før koden ændres. Prompt derefter AI'en med specifikke logs og fejlmeddelelser.

Hvorfor det er godt: Systematisk fejlfinding identificerer selve roden til problemet, hvilket gør dine prototyper langt mere stabile og nemmere at bygge videre på.

6. Gør teknisk gæld synlig

🔴 DON'T: Bed om quick-fixes og glem alt om dem, når koden ender i produktion.

Hvorfor det er skidt: Det lader den tekniske gæld vokse usynligt og uhåndteret. Du ofrer langsigtet vedligeholdelse for kortsigtet hastighed uden at være bevidst om konsekvenserne.

🟢 DO: Accepter genveje for at bevare farten, men efterlad altid en tydelig kommentar: // TODO: TECH DEBT.

Hvorfor det er godt: Teknisk gæld er ofte en nødvendighed i tidlige prototyper. Når du tager genveje bevidst og gør dem eksplicitte, kan du styre gælden i stedet for, at den styrer dig.

Som jeg har nævnt før i mine indlæg: AI skal ikke erstatte din dømmekraft, den skal levere bedre input til dine beslutninger. 💡

Hvilken af disse AI-faldgruber er du oftest selv stødt på i din dagligdag? Smid en kommentar herunder – jeg vil elske at høre jeres erfaringer! 👇

A Harness for Every Task: Dynamic Workflows in Claude Code – Master Custom Multi-Agent Systems

netsi1964 🙏🏻 — Sun, 21 Jun 2026 09:06:50 +0000

A Harness for Every Task: Dynamic Workflows (dynamic work orchestration) in Claude Code – How to Solve Complex Tasks with Tailor-Made Multi-Agent Systems

As an AI-native builder, you already know the real bottleneck isn’t raw model intelligence anymore — it’s context, persistence, and the ability to orchestrate work across time and parallel streams. Anthropic’s new dynamic workflows solve exactly this by letting Claude instantly write and run a custom harness (a tailored orchestration layer that defines how agents are spawned, coordinated, verified, and concluded) for your specific task.

This deep dive is written for experienced AI-native developers, architects, and power users who already live in tools like Claude Code, Cursor, or Aider. We’ll break down the concept from Anthropic’s blog post “A Harness for Every Task,” explain the mechanics, showcase powerful patterns, deliver practical examples, and end with key concepts you can immediately apply to your own work.

Background: Why the Default Harness Isn’t Always Enough

Claude Code ships with a strong default harness optimized for coding — handling files, tools, iterations, and reasoning in one coherent session. It works incredibly well for most daily tasks because many jobs feel like coding: structured, iterative, and with clear outputs.

But with longer, more ambitious, or high-stakes projects, classic failure modes appear:

Agentic laziness (agent laziness: the tendency to stop halfway and declare the task complete — e.g., fixing only 35 out of 50 security issues).
Self-preferential bias (self-favoring bias: the model prefers its own outputs when it has to verify or judge them).
Goal drift (goal drift: important nuances, edge cases, and “do not do X” instructions fade across many turns and summarizations).

Static custom harnesses built via SDKs or scripts were the old workaround — but they’re generic and maintenance-heavy. Dynamic workflows flip the script: Claude generates the precise orchestration for your exact task, on the fly.

Core Concept: What Is a Harness and How Do Dynamic Workflows Work?

A harness (orchestration layer) is everything around the model: how the task is broken down, which sub-agents run, what tools they have, how outputs are verified, and when the job is truly done. It turns a single model into a coordinated team.

With dynamic workflows:

Claude writes a JavaScript file using special functions to spawn sub-agents.
Each sub-agent gets its own context window, isolated worktree (clean workspace), and can use different models (Sonnet for speed, Opus for depth).
Workflows can run tens or even hundreds of parallel sub-agents in a single session.
They are resumable (pause and continue later) and can be saved, shared, and reused (e.g., via skills or ~/.claude/workflows).

This isn’t just “more compute.” It’s structural resistance against the common failure modes of long-running agent sessions.

Powerful Patterns – Your Building Blocks

Claude composes workflows from these reusable patterns. Learn them so you can guide the model more effectively:

Classify-and-Act (classify and route)

A classifier agent determines the task type and routes it to the right behavior or specialized sub-agent.
Fan-out-and-Synthesize (split wide and merge)

Break a big task into many small ones, run them in parallel in clean contexts, then let a synthesizer agent combine the results. Prevents cross-contamination.
Adversarial Verification (opponent-based checking)

Every producer agent gets a dedicated “adversary” agent that checks output against a rubric. Kills self-preferential bias.
Generate-and-Filter / Tournament (generate, filter, compete)

Create many ideas or solutions, deduplicate, and let them compete through pairwise judging. Excellent for creative or ranking tasks.
Loop-until-Done (iterate until success criteria)

Keep spawning agents until a stop condition is met (no new findings, no remaining errors). Perfect for debugging, research, and exhaustive analysis.

These patterns combine beautifully — for example, fan-out + adversarial verification + synthesize.

Real-World Examples You Can Use Today

Coding & Engineering:

Large-scale refactors or migrations: Fan-out across files/callsites/tests → adversarial review → merge.
Bug hunting: Generate competing hypotheses from logs/code/data → verify with a panel of agents.
Documentation or blog verification: Identify claims → spawn fact-check sub-agents → adversarial validation.

Non-Coding Work (often where the biggest wins are):

Review 50 conversation histories and extract rules into CLAUDE.md.
Analyze Slack incidents for true root causes.
Evaluate 80 CVs: Rank them, then double-check the top 10 with dedicated verifiers.
Stress-test a business plan with agents playing investor, customer, and competitor roles.
Deep research: Fan-out searches, fetch sources, adversarial verification, then synthesize with citations.

Concrete Prompt Example (inspired by Anthropic):

“This test fails maybe 1 in 50 runs. Set up a workflow to reproduce it. Form competing theories about the race condition, and don’t stop until one theory survives all the evidence.”

The resulting workflow: Classifier → Fan-out hypothesis generation → Adversarial verifiers/refuters → Loop-until-done.

Benefits, Trade-offs, and My Analysis

Benefits:

Superior context isolation dramatically reduces drift and bias.
Parallelization + specialization boosts both speed and quality.
Workflows become reusable assets — you gradually build your personal agent team.
Scales beautifully beyond coding into research, analysis, triage, and decision-making.

This represents a natural evolution from prompt engineering to workflow engineering. You no longer design the full system — you design the prompt that makes the system design itself.

Trade-offs:

Higher token usage — reserve for high-value tasks.
More complexity when debugging multi-agent setups.
Still dependent on the underlying model’s ability to design good orchestrations.

Key Concepts – Take These With You

Custom harness per task is the new paradigm. Stop forcing every job into one default structure.
Structure beats raw intelligence on long horizons. Separate contexts + dedicated roles (producer, verifier, synthesizer, judge) crush hallucinations and drift.
Parallelism + Verification is the golden combo. Fan-out gives scale; adversarial checks give trust.
Workflows are both output and capital. Save the best ones — you’re building your own agent organization over time.
Use strategically. They cost more tokens, so deploy them where quality and thoroughness matter most.

Dynamic workflows mark a shift from “better single agent” to orchestrated agent teams on demand. It’s not just a feature in Claude Code — it’s a new way to think about reliable agentic work.

Try it today: Take a complex task you’re struggling with and add “Use a dynamic workflow…” or the trigger “ultracode”. Watch how Claude designs the perfect harness. Iterate on the prompt, save what works, and level up.

The world isn’t getting simpler. But now we have a harness for every task.

Use it wisely.

Further Reading / Primary Source

“A harness for every task: dynamic workflows in Claude Code” by Anthropic (June 2, 2026)

Highly Recommended Video

For a practical, hands-on breakdown of Ultracode and dynamic workflows (including live demos and pro tips), watch this excellent video from Chase AI:

“the most POWERFUL claude code feature in months”

It complements the Anthropic blog perfectly and shows exactly how to start using these capabilities right away.

What complex task are you going to throw at a dynamic workflow first? Drop it in the comments — I’d love to see what you build.

All the Chrome Hidden Links: The Ultimate Power User Guide

netsi1964 🙏🏻 — Mon, 08 Dec 2025 10:21:38 +0000

Have you ever wondered what’s going on under the hood of your web browser? While most people only ever visit chrome://settings or chrome://history, Google Chrome is packed with hundreds of internal pages. These are hidden tools used by developers, engineers, and curious power users to debug, tweak, and analyze exactly how the browser behaves.

These URLs (Uniform Resource Locators) start with chrome:// or chrome-untrusted://. They bypass the web and talk directly to the browser's internal code.

Here is your complete guide to these hidden links, what they do, and when you should actually use them.

🛠️ The Essentials (Everyday Utilities)

These are the pages you might actually use in your daily browsing life to manage the browser.

chrome://about or chrome://chrome-urls
- Description: The "Master List." It displays clickable links to all other available internal URLs.
- When to use: When you are looking for a specific tool but can't remember the exact address.
chrome://settings
- Description: The standard settings interface.
- When to use: To change your homepage, manage cookies, or search settings.
chrome://extensions
- Description: The manager for all your installed add-ons.
- When to use: When Chrome is running slow and you suspect a rogue extension, or to enable "Developer Mode" to load unpacked extensions.
chrome://history
- Description: Your browsing history.
- When to use: To find that site you visited three days ago.
chrome://bookmarks
- Description: The bookmark manager.
- When to use: To organize, import, or export your saved sites.
chrome://downloads
- Description: A list of all files you’ve downloaded.
- When to use: To find a lost file or resume a paused download.
chrome://version
- Description: Displays technical details: exact Chrome version, OS, User Agent, Flash/JavaScript versions, and command-line variations.
- When to use: Essential for troubleshooting. If you are reporting a bug, IT support will ask for this.
chrome://dino
- Description: The famous T-Rex runner game usually seen when you have no internet.
- When to use: When you are bored (you can play it even when you are online).

🧪 Experiments & Tweaks

chrome://flags
- Description: The playground for experimental features that aren't quite ready for primetime.
- When to use: To enable new features (like darker dark modes, faster download speeds) before they are officially released, or to disable annoying new UI changes.

📡 Network & Connectivity Debugging

These are critical for diagnosing internet and connection issues.

chrome://net-internals / chrome://net-export
- Description: A deep-dive network event logger. net-export allows you to save a log file of your network traffic to send to support engineers.
- When to use: If a specific website won't load, you have DNS issues, or proxy errors.
chrome://webrtc-internals
- Description: Real-time statistics for WebRTC (used by Google Meet, Zoom web, Discord web).
- When to use: Your video call is lagging or pixelated. Check here to see packet loss, bitrate, and audio graphs.
chrome://bluetooth-internals
- Description: Debugger for the Web Bluetooth API.
- When to use: If you are a developer building a web app that connects to Bluetooth devices.
chrome://usb-internals
- Description: Similar to Bluetooth, but for testing WebUSB devices.
- When to use: Testing hardware connections via the browser.
chrome://connection-help
- Description: A user-friendly help page for connection errors.
- When to use: Troubleshooting basic "This site can't be reached" errors.

💻 Developer & Performance Tools

Tools for web developers to understand how Chrome renders pages and uses resources.

chrome://inspect
- Description: Port forwarding and remote debugging. Allows you to inspect open tabs on an Android device via USB.
- When to use: You are building a mobile site and need to use the desktop DevTools to fix layout issues on your phone.
chrome://serviceworker-internals
- Description: Manages Service Workers (scripts that run in the background for offline capabilities and push notifications).
- When to use: A website is "stuck" showing an old cached version, or you want to force-unregister a worker.
chrome://gpu
- Description: Detailed info on your Graphics Processing Unit and hardware acceleration status.
- When to use: You see visual glitches, black boxes, or slow rendering on graphics-heavy sites.
chrome://system
- Description: Aggregated system logs (similar to about:support in Firefox).
- When to use: checking hardware details and OS logs specifically related to the browser.
chrome://blob-internals
- Description: Inspects "Binary Large Objects" (file data) currently in memory.
- When to use: Debugging file uploads or large data transfers in web apps.
chrome://indexeddb-internals / chrome://quota-internals
- Description: Shows how much local storage space websites are using on your hard drive.
- When to use: You need to free up disk space and want to see which web apps are hoarding data.
chrome://process-internals
- Description: A deep view of the process isolation model (Site Isolation).
- When to use: Advanced debugging of which websites are sharing which OS processes.
chrome://translate-internals
- Description: Logs regarding the Google Translate feature.
- When to use: Debugging why Chrome did (or didn't) offer to translate a foreign language page.

🔒 Security, Privacy & Identity

chrome://policy
- Description: Shows policies enforced on the browser (common on work/school computers).
- When to use: To see why an extension is forced-installed or why you can't change a specific setting ("Managed by your organization").
chrome://password-manager / chrome://password-manager-internals
- Description: The UI for your saved passwords and the internal logs of how the manager is working.
- When to use: To export passwords or debug why a "Save Password" prompt isn't appearing.
chrome://certificate-manager / chrome://view-cert
- Description: View and manage SSL/TLS certificates.
- When to use: Importing a custom certificate for a corporate intranet or identifying an expired certificate.
chrome://privacy-sandbox-internals / chrome://topics-internals / chrome://attribution-internals
- Description: Controls and data regarding Google's replacement for third-party cookies (Topics API, FLEDGE, etc.).
- When to use: Developers understanding how ad-targeting works without cookies.

🖼️ UI Components (Side Panels & Interfaces)

Chrome is built of many smaller web pages. These links open specific parts of the user interface directly.

Side Panels:
- chrome://bookmarks-side-panel.top-chrome (Bookmarks panel)
- chrome://history-side-panel.top-chrome (History panel)
- chrome://customize-chrome-side-panel.top-chrome (Theme customization)
- chrome://read-later.top-chrome (Reading List)
- chrome://shopping-insights-side-panel.top-chrome (Price tracking)
- chrome://comments-side-panel.top-chrome (Google Workspace comments)
New Tab & Search:
- chrome://newtab / chrome://new-tab-page (The homepage)
- chrome://omnibox-popup.top-chrome (The search suggestion dropdown)
- chrome://tab-search.top-chrome (The arrow icon to search open tabs)
Login & Profile:
- chrome://profile-picker (The "Who is using Chrome?" startup screen)
- chrome://signin-internals (Logs about the Google account login process)

⚠️ "Untrusted" & Sandbox

You will see links starting with chrome-untrusted://. These are pages that handle content requiring strict isolation for security reasons.

chrome-untrusted://print: The Print Preview window (sandboxed to prevent printer drivers from crashing the browser).
chrome-untrusted://lens / lens-overlay: The Google Lens image search integration.
chrome-untrusted://read-anything-side-panel.top-chrome: The Reader Mode panel (strips ads/formatting).

📋 The Complete Index (The Rest)

Here are brief descriptions of the remaining links from your list:

chrome://access-code-cast: Interface for casting to a device using a pin code (Education/Enterprise).
chrome://accessibility: Shows the internal accessibility tree for screen readers.
chrome://actor-overlay: Internal testing overlay.
chrome://app-service-internals: Diagnostics for installed Web Apps and Android Apps (on ChromeOS).
chrome://app-settings: Settings for specific web apps.
chrome://apps: The launcher page for installed Chrome Apps.
chrome://autofill-internals: Logs explaining why forms did/didn't autofill.
chrome://batch-upload: Internal data upload interface.
chrome://browser-switch: For admins; controls switching between Chrome and legacy browsers (IE).
chrome://cast-feedback: Submit logs regarding Chromecast issues.
chrome://chrome: Usually redirects to the updates page or version.
chrome://chrome-signin: Internal sign-in flow.
chrome://compare: New feature for comparing products in shopping.
chrome://components: Check for updates to individual components (like Widevine for Netflix).
chrome://connection-monitoring-detected: Notification page for network monitoring.
chrome://connectors-internals: Enterprise security connectors.
chrome://contextual-tasks: AI/ML suggestions based on browsing.
chrome://crashes: Lists recent crash reports (if reporting is enabled).
chrome://credits: A long list of open-source licenses used in Chrome.
chrome://debug-webuis-disabled: Error page for when WebUI is off.
chrome://device-log: Logs for hardware events (USB, HID).
chrome://extensions-internals: JSON data about extensions (dev use).
chrome://extensions-zero-state: The screen shown when no extensions are installed.
chrome://feedback: Opens the "Report an Issue" dialog.
chrome://gcm-internals: Google Cloud Messaging (Push notifications) status.
chrome://glic / chrome://glic-fre: Related to Google Lens Image Context (Visual search features).
chrome://histograms: Text-based stats on browser performance metrics.
chrome://history-clusters-side-panel.top-chrome: "Journeys" view in history.
chrome://history-sync-optin: The setup screen for syncing history.
chrome://internals: A directory for various internal pages.
chrome://intro: The "Welcome to Chrome" first-run experience.
chrome://managed-user-profile-notice: Notice for supervised accounts.
chrome://management: Shows if your browser is managed by an admin.
chrome://media-engagement: Scores determining if sites can autoplay video.
chrome://metrics-internals: Real-time browser metrics logging.
chrome://new-tab-page-third-party: NTP for search engines other than Google.
chrome://newtab-footer: Footer element for the new tab page.
chrome://ntp-tiles-internals: Debugging the shortcut icons on the New Tab Page.
chrome://on-device-translation-internals: Debugging local AI translation models.
chrome://predictors: Auto-complete predictions for the address bar.
chrome://print: The print dialog.
chrome://privacy-sandbox-base-dialog / dialog: Popups related to privacy consent.
chrome://private-aggregation-internals: Privacy sandbox reporting data.
chrome://profile-customization: Avatar/color picker.
chrome://profile-internals: Data about the loaded user profile.
chrome://reset-password: Password reset flow.
chrome://saved-tab-groups-unsupported: Error state for tab groups.
chrome://search-engine-choice: The "Choose your search engine" screen (EU specific).
chrome://segmentation-internals: How Chrome groups users for feature rollouts.
chrome://signin-dice-web-intercept.top-chrome: Part of the account login interception.
chrome://signin-email-confirmation: Email verification screen.
chrome://signin-error: Login error display.
chrome://signout-confirmation: Confirming sign out.
chrome://site-engagement: A score of how much you interact with sites (affects resource throttling).
chrome://suggest-internals: Debugging omnibox suggestions.
chrome://support-tool: Generates support logs.
chrome://sync-confirmation: "Turn on Sync?" dialog.
chrome://sync-internals: Vital for debugging why bookmarks/passwords aren't syncing.
chrome://tab-group-home: Overview of saved tab groups.
chrome://terms: Chrome Terms of Service.
chrome://user-actions: Logs user clicks and actions for debugging.
chrome://watermark: Internal overlay (rarely used).
chrome://web-app-internals: PWA debugging.
chrome://webui-browser: Visualizer for WebUI.
chrome://whats-new: The "What's New" update page.
chrome-untrusted://compose: AI writing assistance container.
chrome-untrusted://data-sharing: Internal data sharing UI.
chrome-untrusted://ntp-microsoft-auth: Authentication for Microsoft modules (specific integrations).

Conclusion

Chrome is much more than a window to the web; it is a complex application with its own internal operating system. By knowing about chrome:// URLs, you transition from a standard user to a Power User.

Whether you need to debug a slow internet connection with net-internals, check for rogue extensions with extensions, or just play the dino game, these links give you total control.

Which of these hidden pages will you try first?

5 Powerful Web Platform Features You Probably Missed in 2025

netsi1964 🙏🏻 — Sun, 07 Dec 2025 08:22:50 +0000

CSS and JavaScript APIs that shipped quietly but deserve your attention—from state-preserving DOM moves to auto-sizing form fields.

The web platform is evolving faster than ever. Between the hype around AI tooling and framework updates, some genuinely useful browser features have shipped without much fanfare.

I've been digging through the Interop 2025 focus areas and recent browser release notes, and I found five features that are production-ready now but flying under most developers' radars.

Let's fix that.

1. `moveBefore()` — Finally, True DOM Movement

Support: Chrome 133+, Firefox 144+, Safari in development

Ever tried to move a playing video or an iframe to a different part of the page? If you used appendChild() or insertBefore(), you watched helplessly as the video restarted, focus was lost, and animations reset.

That's because the DOM never had a move primitive—only remove and insert. Until now.

// Old way: state is destroyed
newParent.insertBefore(element, referenceNode);

// New way: state is preserved ✨
newParent.moveBefore(element, referenceNode);

The moveBefore() method preserves:

Animation and transition progress
Focus and active states
Fullscreen mode
Popover open/close state
Modal <dialog> state

Real-world use case: Building a responsive layout where a video player moves from a sidebar to the main content area on mobile—without interrupting playback.

if ('moveBefore' in Element.prototype) {
  mainContent.moveBefore(videoPlayer, null);
} else {
  // Fallback for older browsers
  mainContent.appendChild(videoPlayer);
}

2. CSS Custom Highlight API — Highlighting Without DOM Surgery

Support: Baseline as of June 2025 (Chrome, Edge, Safari, Firefox 140+)

Building a search feature? Syntax highlighter? You've probably wrapped matches in <mark> or <span> elements. It works, but you're mutating the DOM, triggering layout recalculations, and wrestling with edge cases when highlights span multiple elements.

The Custom Highlight API takes a completely different approach: define text ranges in JavaScript, style them in CSS, and the DOM stays untouched.

// Find text and create a range
const range = new Range();
range.setStart(textNode, startIndex);
range.setEnd(textNode, endIndex);

// Register the highlight
const highlight = new Highlight(range);
CSS.highlights.set('search-result', highlight);

::highlight(search-result) {
  background-color: #fef08a;
  color: #1e1e1e;
}

Why this matters:

Zero DOM mutations = zero layout thrashing
Multiple ranges can share one highlight name
Highlights can span across element boundaries
Perfect for search-as-you-type UIs

Pro tip: A single Highlight object can hold multiple Range instances, so you can highlight all search matches with one CSS rule.

3. `field-sizing: content` — Auto-Growing Form Fields in One Line

Support: Chrome 123+, Edge, Safari 26.2+

Remember writing JavaScript to auto-resize textareas? Or using the size attribute and hoping for the best? Those days are over.

textarea, input, select {
  field-sizing: content;
}

That's it. Your form fields now grow and shrink to fit their content.

For production use, you'll want constraints:

textarea {
  field-sizing: content;
  min-block-size: 3lh;   /* At least 3 lines */
  max-block-size: 12lh;  /* Cap at 12 lines */
}

input {
  field-sizing: content;
  min-inline-size: 10ch;
  max-inline-size: 40ch;
}

Works with:

<textarea>
<input> (text, email, url, etc.)
<select> (both dropdown and multi-select)

Progressive enhancement: Browsers that don't support it simply show fixed-size fields. No JavaScript fallback needed.

4. `sibling-index()` and `sibling-count()` — CSS Finally Knows Position

Support: Chrome 138+, Firefox in development

How many times have you done this?

{items.map((item, index) => (
  <div style={{ '--index': index }}>{item}</div>
))}

Just to create staggered animations. Now CSS can figure out the index itself:

.card {
  animation: fade-in 0.3s ease-out backwards;
  animation-delay: calc(sibling-index() * 100ms);
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
}

And sibling-count() tells you the total number of siblings:

/* Equal-width columns without knowing the count */
.tab {
  width: calc(100% / sibling-count());
}

Creative use cases:

Staggered animations (obviously)
Dynamic color gradients across items
Responsive grid layouts based on item count
Circular positioning with trigonometry

/* Rainbow gradient across any number of items */
.item {
  --hue: calc(360 / sibling-count() * (sibling-index() - 1));
  background: hsl(var(--hue) 70% 60%);
}

5. CSS Anchor Positioning — Tooltips Without JavaScript

Support: Chrome 125+, Safari 26+, Firefox expected late 2025

If you've ever used Floating UI, Popper.js, or Tippy.js just to position a tooltip, you know the pain. Now CSS handles it natively.

.trigger {
  anchor-name: --my-trigger;
}

.tooltip {
  position: fixed;
  position-anchor: --my-trigger;
  position-area: top;
}

The tooltip automatically positions itself relative to the trigger. But here's the magic: it flips automatically when it would overflow the viewport.

Even better—Chrome 133 introduced implicit anchoring for popovers:

<button popovertarget="tip">Hover me</button>
<div id="tip" popover>I'm anchored automatically!</div>

[popover] {
  position-area: bottom span-left;
  margin: 0;
}

No anchor-name needed. The browser knows the button triggers the popover and creates the relationship automatically.

Which Should You Adopt First?

My recommendation: Start with field-sizing: content.

Here's why:

Zero risk — Unsupported browsers just show normal fixed fields
Zero JavaScript — Delete your auto-resize handlers
Immediate UX win — Users notice when forms feel responsive
One line of CSS — Lowest effort, highest impact

After that, anchor positioning is your next big win if you're building any kind of tooltip, dropdown, or popover UI.

Wrapping Up

The web platform is getting genuinely better at things we've been solving with JavaScript for years. State-preserving moves, auto-sizing fields, and declarative positioning aren't just nice-to-haves—they're more performant, more accessible, and more maintainable than the JS equivalents.

The features in this post are shipping in stable browsers right now. No flags, no polyfills required (though fallbacks are smart for moveBefore() and the sibling functions).

What overlooked feature are you most excited to try? Let me know in the comments 👇

Understanding SSL Certificates and Domain Expiry

netsi1964 🙏🏻 — Tue, 22 Jul 2025 07:09:38 +0000

TL;DR: SSL certificates secure your website’s connection, but managing them can be tricky. Domains also have expiry dates that require attention. This post breaks down key concepts around SSL and domain expiry, common pitfalls, and best practices to keep your web services secure and accessible.

1. What Is an SSL Certificate and Why Does It Matter?

SSL (Secure Sockets Layer) certificates encrypt data exchanged between browsers and servers, preventing eavesdropping and tampering. Without a valid SSL certificate, browsers will warn users that your site is insecure.

Key point: Certificates have a validity period (often 90 days for Let’s Encrypt, or 1 year+ for paid certs), and must be renewed before expiry to avoid downtime.

2. Domain Expiry — The Often Overlooked Deadline

Your domain name (for instance: mydomain.dk) registration also has an expiry date, independent from SSL certificates. If the domain expires, your entire website becomes unreachable, no matter how valid your certificates are.

Domains are usually registered for 1 year but can be extended longer. Keep track of renewal dates to avoid service interruptions.

3. Why Do Multiple SSL Expiry Dates Appear for One Domain?

You might see several SSL certificates with different expiry dates for the same domain. This is normal due to:

Certificate rotation: New certs issued before old ones expire to allow seamless transition.
Multiple servers or load balancers: Each may have its own cert.
Different certs for subdomains or services: Email, APIs, and main site might use separate certs.

Your browser only sees the certificate presented by the server it connects to.

4. Common Issues & Troubleshooting

Old cert still served: Sometimes servers or load balancers aren’t updated properly, causing expired certs to still be presented.
Mismatch between domain and cert: If the cert does not cover the requested domain or subdomain, you’ll get warnings.
Domain expiry unnoticed: Even with valid SSL, an expired domain means no access.

Practical Example

A customer reported login issues due to an expired SSL cert dated 19/7, but automated checks showed a cert expiring 10/8. This often means some servers or proxies still serve the old cert. Fixing requires verifying cert deployment across all servers and proxies.

Best Practices

Automate SSL certificate renewal with tools like Certbot.
Monitor both SSL expiry and domain registration dates with scripts or services.
Ensure all servers, proxies, and CDNs are updated with the newest certificates.
Use multi-factor alerts for domain expiry to avoid service loss.

Useful Resources

A practical guide to the new import features in Deno — with comparisons, do’s & don’ts, and an illustration prompt.

netsi1964 🙏🏻 — Mon, 21 Jul 2025 08:59:44 +0000

TL;DR

Import Attributes are here, using the with keyword to specify the module type.
Natively import JSON, text, and even binary files directly into your modules.
Use the with { type: "json" } syntax for JSON modules, which is now stable.
Leverage the experimental with { type: "text" } and with { type: "bytes" } for raw file imports, which requires the --unstable-raw-imports flag.
Seamlessly import from npm using npm: specifiers for greater compatibility with the existing JavaScript ecosystem.

1. What’s new with `import`?

Deno continues to evolve its module system to be more standards-aligned and powerful. The latest versions introduce "Import Attributes," a standards-track feature that clarifies how non-JavaScript files should be handled. This is done using the with keyword in an import statement.

// Import a JSON configuration file
import config from "./config.json" with { type: "json" };

// Import a startup script as a plain text string (experimental)
import startupScript from "./init.sql" with { type: "text" };

// Import a WebAssembly binary as a module (experimental)
import wasm from "./module.wasm" with { type: "bytes" };

This syntax tells the Deno runtime explicitly what kind of data to expect, making the process more secure and predictable than relying on bundler-specific magic.

2. Where can I use these new import types?

Module Type	Supported?	What you get	Notes
JSON	✅ Stable	`object`	Natively parsed JSON data.
Text	✅ Experimental (`--unstable-raw-imports`)	`string`	The raw text content of the file.
Bytes	✅ Experimental (`--unstable-raw-imports`)	`Uint8Array`	The raw binary data of the file.
npm modules	✅ Stable	Module exports	Use `npm:package-name` to import from the npm registry.
JSR modules	✅ Stable	Module exports	Use `jsr:@scope/package` for versioned, TypeScript-native modules.

🔗 Deno Docs: https://docs.deno.com/runtime/fundamentals/modules/#import-attributes

3. `import` attributes vs. other loading methods

Purpose	Method	Output	Typical use
Importing structured data	`import data from "./cfg.json" with { type: "json" }`	`object`	Loading configuration, manifests, or static data.
Importing raw text	`import txt from "./file.txt" with { type: "text" }`	`string`	Loading templates, scripts (SQL, shell), or articles.
Importing binary data	`import bin from "./file.wasm" with { type: "bytes" }`	`Uint8Array`	Loading WebAssembly modules, images, or other assets.
Traditional file reading	`Deno.readTextFile()` / `Deno.readFile()`	`Promise<string	Uint8Array>`
Importing JS/TS code	`import { func } from "./mod.ts"`	Module exports	The standard way to import application logic.

4. Do’s ✅ and Don’ts ❌

✅ Do	❌ Don’t
Use `with` for import attributes; the old `assert` syntax is deprecated.	Forget the `--unstable-raw-imports` flag for text and bytes imports.
Manage third-party dependencies with `jsr:` and `npm:` specifiers.	Manually fetch and parse JSON when you can import it directly.
Use import maps in `deno.json` to create clear, version-locked dependencies.	Mix stable and unstable import features without being aware of the implications.
Check for official JSR packages before falling back to npm for better Deno integration.	Assume text/bytes imports work in older Deno versions; they are a recent addition.

5. Real-world snippet: Loading configuration and a welcome message

Imagine an application that needs a configuration file and a "message of the day" from a separate text file.

// config.json
{
  "port": 8080,
  "logging": true,
  "features": ["alpha", "beta"]
}

// motd.txt
Welcome to the application! Today's focus is on robust module loading.

// main.ts
import config from "./config.json" with { type: "json" };
import message from "./motd.txt" with { type: "text" };

console.log(`--- Message of the Day ---`);
console.log(message);
console.log(`------------------------`);

if (config.logging) {
  console.log(`Starting server on port: ${config.port}`);
  console.log(`Enabled features: ${config.features.join(', ')}`);
}

// To run this (as of Deno 2.4+):
// deno run --allow-read --unstable-raw-imports main.ts

Key takeaway

Deno's new import features, especially import attributes for JSON, text, and bytes, make your code more explicit and robust. By handling different file types directly within the ES module system, Deno eliminates boilerplate code, enhances security, and improves tooling integration, bringing your non-JavaScript assets into the main module graph.

DOM entries() - explained — and When to Use It

netsi1964 🙏🏻 — Mon, 21 Jul 2025 07:02:27 +0000

A practical guide to the entries() iterator on arrays, NodeLists, and more — with comparisons, do’s & don’ts, and an illustration prompt.

TL;DR

entries() is a method (list.entries()), not a property (list.entries).
It returns an iterator that yields [index, value] pairs.
Use for…of or the iterator protocol; never use for…in to walk it.
Exists on Array, NodeList, Map, Set, and more.
If you don’t need the index, iterate directly with for…of or values() instead.

1 What does `entries()` return?

const links = document.querySelectorAll('.article a');
for (const [i, el] of links.entries()) {
  console.log(i, el.href);
}
//→ 0 "https://…"   1 "https://…"

entries() gives back an iterator object whose .next() method delivers an object shaped like:

{ value: [index, element], done: false }

When done becomes true, the iterator is exhausted.
The iterator is lazy — memory‑efficient for large collections.

2 Where can I use `entries()`?

Host object	Supported?	What you get	Notes
Array	✅	`[index, item]`	ES2015+
NodeList	✅ (modern browsers)	`[index, DOM node]`	Same order as the DOM query
Map	✅	`[key, value]`	Map’s default iterator is already `entries()`
Set	✅	`[value, value]`	Mirrors Map behaviour
Arguments object	❌	—	Convert to array first

🔗 MDN docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries

3 `entries()` vs. other list helpers

Purpose	Method	Output	Typical use
Keys only	`keys()`	`0, 1, 2…`	Pagination, sparse arrays
Values only	`values()` or direct `for…of`	`el1, el2…`	When index is irrelevant
Index + value	`entries()`	`[index, value]`	Logging, diffing, stable sorting
Transform all items	`map()`	New array	Create derived arrays
Side-effects	`forEach()`	—	DOM mutations, analytics

4 Do’s ✅ and Don’ts ❌

✅ Do	❌ Don’t
Call the method: `list.entries()`	Forget the parentheses and store the function reference
Consume with `for…of`, destructuring `[i, item]`	Use `for…in` (gets property names, not pairs)
Break early* once you found what you need	Assume you must iterate the entire collection
Polyfill (`core-js`) if you target IE11	Rely on NodeList `entries()` in legacy browsers

5 Real‑world snippet: click analytics

<ul class="cases">
  <li><a href="/c1">Case 1</a></li>
  <li><a href="/c2">Case 2</a></li>
  <li><a href="/c3">Case 3</a></li>
</ul>
<script>
  const clicks = [];
  for (const [i, link] of document.querySelectorAll('.cases a').entries()) {
    clicks[i] = 0;
    link.addEventListener('click', () => ++clicks[i]);
  }
  // clicks → [3, 0, 1]
</script>

Key takeaway

entries() is the most explicit way to access both index and value in one pass. Use it when you care about position; otherwise reach for values() or plain for…of for cleaner code.

) Early Break Example — Stop at the Current* Customer

Assume you receive an array of customer objects from an API. Each object has a boolean current flag that marks which customer is currently selected / logged‑in. You only need the first match, so breaking out early saves time (and often makes intentions clearer).

const customers = [
  { id: 101, name: 'Alice',   current: false },
  { id: 102, name: 'Bob',     current: false },
  { id: 103, name: 'Charlie', current: true  }, // <-- we want to stop here
  { id: 104, name: 'Dora',    current: false },
];

for (const [index, customer] of customers.entries()) {
  if (customer.current) {
    console.log('Current customer found at index', index, customer);
    // do something with this customer, e.g. load profile UI
    break; // exit loop early, no need to traverse the rest
  }
}

Why break early?

Performance — for large datasets, exiting on the first match avoids extra iterations.
Clarity — shows the intent: find the first current customer and stop.
Index access — entries() delivers the array index alongside the object, handy for updating UIs or data structures by position.

If you only need the customer object (not the index), iterate the array directly:

for (const customer of customers) {
  if (customer.current) { /* … */ break; }
}

Creating a "Open in Cursor" Context Menu for macOS Finder

netsi1964 🙏🏻 — Thu, 13 Mar 2025 10:00:18 +0000

TLDR

Add a custom "Open in Cursor" option to your Finder context menu by creating an Automator Quick Action with AppleScript. Makes opening projects in Cursor a breeze!

Why You Need This

As developers, we often browse our filesystems looking for projects to work on. If you're using Cursor as your code editor (which many are, for its excellent AI integration), you'll quickly get tired of:

Finding a folder in Finder
Opening Cursor separately
Navigating to the same folder through Cursor's interface

This quick automation adds a right-click option to instantly open any folder or file in Cursor, directly from Finder!

The Complete Guide

Prerequisites

macOS (tested on Monterey, Big Sur, and Ventura)
Cursor installed at /Applications/Cursor.app
5 minutes of your time

Step 1: Open Automator

Find Automator in your Applications folder or search for it using Spotlight (⌘+Space).

Step 2: Create a New Quick Action

When Automator opens, select Quick Action (or "Service" in older macOS versions)
Configure the workflow settings at the top:
- Workflow receives: files and folders
- in: Finder

Step 3: Add an AppleScript Action

Search for "Run AppleScript" in the actions library
Drag it to the workflow area

Step 4: Add the Script

Replace the default AppleScript code with:

on run {input, parameters}
    try
        repeat with i from 1 to count of input
            set theItem to item i of input
            set thePath to quoted form of POSIX path of theItem
            do shell script "/usr/bin/open -a '/Applications/Cursor.app' " & thePath
        end repeat
        return input
    on error errMsg
        display dialog "Error opening files in Cursor: " & errMsg buttons {"OK"} default button 1
        return input
    end try
end run

Step 5: Save Your Quick Action

Choose File > Save
Name it "Open in Cursor" (or whatever you prefer)
Click Save

Step 6: Use Your New Action

In Finder, right-click on any file or folder
Look for "Open in Cursor" in the context menu or under "Quick Actions"
Click it, and watch as your selection opens in Cursor!

Troubleshooting

If your menu item doesn't appear:

Go to System Preferences > Extensions > Finder and ensure "Open in Cursor" is enabled
If your Cursor app is installed elsewhere, modify the path in the script

If you receive an error message:

Check that Cursor is properly installed
Ensure the path in the script matches your installation

Customization (Optional)

Want this to be even more accessible? Assign a keyboard shortcut:

Go to System Preferences > Keyboard > Shortcuts > Services
Find "Open in Cursor" under "Files and Folders"
Click on it and press your desired key combination

Why This Works

This automation uses AppleScript to grab the selected file paths from Finder and passes them to the open command with Cursor specified as the application. The error handling ensures you're notified if something goes wrong.

Conclusion

Small automations like this can significantly improve your development workflow. No more tedious navigation through multiple interfaces - just right-click and get to coding!

What other Finder integrations would you find useful? Let me know in the comments!

Enriching Event Listings with Microformats/Microdata for a Better User Experience

netsi1964 🙏🏻 — Sun, 09 Jun 2024 09:07:59 +0000

TLDR: Use microdata/microformats to add more meaning to event listings on your website, enabling users to easily add events to their calendars and providing a better user experience.

Many websites have lists of events which they in the best intention want their users to know about. But maybe they could get feedback from users like this:

Hey, love the event listings! But adding them to my calendar is a pain. Can you please add a 'Add to Calendar' feature? It'd make my life so much easier!

Cause text links are nice for the brain, but not good for the user to easily add to her calendar. Microformats/Microdata + some javascript can change that!

The overlooked HTML feature: Microformats/Microdata

The microformats/microdata used in this example is based on the h-event vocabulary, which is a standardized way of marking up events on the web.

Microformats/microdata is a way to add additional semantic meaning to HTML elements, making it easier for search engines and other machines to understand the structure and content of a webpage.

The h-event vocabulary is part of the Microformats 2 specification, which is a standardized way of marking up common data structures on the web.

Here is an example of the microformats used in this example:

<li class="h-event">
  <time class="dt-start" datetime="2024-11-05T12:00:00">11/5</time>
  <span class="p-name">Tennis Band på Nytorv</span>
  <time class="dt-start" datetime="2024-11-05T12:00:00">kl. 12.00</time> -
  <time class="dt-end" datetime="2024-11-05T13:00:00">13.00</time>
</li>

In this example, the h-event class is used to indicate that the element represents an event. The dt-start and dt-end classes are used to indicate the start and end dates and times of the event, respectively. The p-name class is used to indicate the name of the event.

You can find more information about the h-event vocabulary and Microformats 2 in general on the official Microformats website:

Additionally, you can find more information about microdata on the W3C website:

W3C Microdata specification

Using javascript to dynamically add link "Add to Calendar"

Adding an 'Add to Calendar' feature to your event listings is easier than you think!

With a bit of JavaScript magic, you can add a link to your microdata-extended HTML that allows users to easily add events to their calendars.

Together with GROK i've generated a script to demonstrate this, and you can see it in action on CodePen. With just a few lines of code, you can give your users a seamless way to add events to their calendars, making your event listings even more user-friendly. So why not give it a try and take your event listings to the next level?

Blazor CSS-isolation a ::shallow quick fix..

netsi1964 🙏🏻 — Thu, 23 May 2024 08:20:03 +0000

Vanilla CSS, the pure not-infected by frameworks, is IMHO the best way to do CSS. With all the nice features like native nesting and custom properties (CSS variables) it seems to me that we have what we need. That however seems not to be the understanding of many frameworks, like Blazor, Angular and others.

The Blazor CSS-isolation issue

Here I want to share a quick fix understanding when fighting the Blazor CSS effects to your css. It seems to actually be a valid solution.

Add ::deep after your component root css class

It is as simple as that! (it seems).

The Blazor CSS-isolation technique

Blazor uses like other frameworks (Angular for instance) a technique of injecting a unique attribute on component HTML. It looks like this: b-khlzklwsq4. It is a "b" and then a random 10 chars long GUID sort of string. This combined with the rewriting of you pretty vanilla CSS for the component allows Blazor to have scoped css. CSS which will not break other components (but only itself ;-)).

So if I have my css:

.my-component {
  outline: 1px black solid;
}
.my-component *:focus {
  outline: none;
}

Blazor will pass it at runtime into:

.my-component[b-khlzklwsq4] {
  outline: 1px black solid;
}
.my-component *:focus[b-khlzklwsq4] {
  outline: none;
}

However I need to target any element which has focus, not just elements in focus which has the attribute b-khlzklwsq4!

My rule-of-fix-::deep is then to simply add a ::deep after the main component selector (.my-component) and get this:

.my-component {
  outline: 1px black solid;
}
.my-component ::deep *:focus {
  outline: none;
}

That way I instruct Blazor: "Please do not manipulate any of my CSS other than the main selector (.my-component). It seems to work! :-)

.my-component[b-khlzklwsq4] {
  outline: 1px black solid;
}
.my-component *:focus {
  outline: none;
}

That in fact was my ::shallow quick-fix of the broken Blazor CSS-isolation functionality!

Konklusion på fordelene ved elbil

netsi1964 🙏🏻 — Sun, 07 Apr 2024 07:47:19 +0000

En opsummering af indhold i denne video: 222.000 km i Tesla Model 3 Long Range: Se Franks regnskab for elbilen | bilguiden lavet ved hjælp af GPT YouTube∑✏️ - YouTube Summarize.

Elbiler kan tilbyde betydelige økonomiske besparelser og miljøfordele i form af lavere driftsomkostninger og reduktion i CO2-udslip. Selvom der kan være udfordringer med værditab og tilgængelighed af opladningsmuligheder, er elbiler generelt en fordelagtig investering for mange bilkøbere.

Elbiler frembyder ikke kun en mere miljøvenlig løsning, men tilbyder også lavere løbende omkostninger sammenlignet med konventionelle benzin- eller dieselbiler. Denne type køretøj kræver færre mekaniske reparationer på grund af færre bevægelige dele, hvilket bidrager til den samlede økonomiske fordel ved at eje en elbil.

Fordele:

Økonomiske besparelser: Lavere omkostninger til brændstof og vedligehold.
Miljøvenlig: Reducerer CO2-udslip og forurening.
Mindre vedligeholdelse: Færre bevægelige dele reducerer behovet for hyppige reparationer.

Udfordringer:

Værditab: Elbiler kan opleve et hurtigere værditab end traditionelle biler.
Opladningsinfrastruktur: Tilgængelighed af ladestationer kan være begrænset afhængigt af geografisk placering.

A virtual podcaster

netsi1964 🙏🏻 — Fri, 05 Apr 2024 22:35:14 +0000

Exploring sides of AI generation of content

As I listened to a podcast generated by AI and read by an AI I thought: why not make a 100% virtual interview? Where an AI chat bot played the two roles as an interviewer (Eloquence) and a given guest, here a frontend developer at Trifork, Aarhus.

Below you can see my first test done using the API from Groq.com: https://console.groq.com.

An interview with a frontend developer at Trifork, Aarhus

Welcome to another episode of Eloquence, the podcast that engages in deep, thought-provoking discussions with experts from various fields. I'm your host, Eloquence, and today we have a special guest - a frontend developer at Trifork, Aarhus. We'll be diving into the world of CSS on a technical level, with code examples and practical insights.

Eloquence

Welcome to the show! It's great to have you here. Before we dive into the technical aspects of CSS, could you briefly introduce yourself and your experience with frontend development?

Guest

Thank you for having me! I'm a frontend developer at Trifork, Aarhus, and I've been working in the industry for over five years now. I specialize in building responsive, user-friendly websites using HTML, CSS, and JavaScript.

Eloquence

Fantastic! Let's get started with CSS. Can you explain what CSS is and why it's essential for frontend development?

Guest

Certainly! CSS, or Cascading Style Sheets, is a style sheet language used for describing the look and formatting of a document written in HTML or XML. It's essential for frontend development because it allows developers to separate the presentation layer from the structure and content of a webpage. This separation makes it easier to maintain, update, and scale websites while ensuring consistency across different pages.

Eloquence

Excellent explanation! Now, let's dive into some code examples. Can you show us how to create a simple CSS layout using Flexbox?

Guest

Sure! Here's an example of a simple CSS layout using Flexbox:
HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="styles.css" />
        <title>Flexbox Layout Example</title>
    </head>
    <body>
        <div class="container">
            <div class="box box-1">Box 1</div>
            <div class="box box-2">Box 2</div>
            <div class="box box-3">Box 3</div>
        </div>
    </body>
</html>

CSS:

* {
    box-sizing: border-box;
}

.container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.box {
    background-color: #f1f1f1;
    color: #333;
    padding: 20px;
    font-size: 18px;
    margin: 10px;
    flex: 1 0 200px;
}

.box-1 {
    order: 1;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 200px;
}

.box-2 {
    order: 2;
    flex-grow: 2;
    flex-shrink: 1;
    flex-basis: calc(200px * 2);
}

.box-3 {
    order: 3;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 200px;
}

In this example, we have a container with three boxes inside. We're using the display: flex property on the container to create a flexible layout. Each box has a flex-basis of 200px, meaning they'll each take up at least 200px of space. The flex-grow and flex-shrink properties determine how the boxes will grow or shrink if there's extra or limited space.

Eloquence

Great! Can you show us how to create a CSS animation using keyframes?

Guest

Sure! Here's an example of a simple CSS animation using keyframes:

CSS:

@keyframes slide-in {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

Eloquence

That's a great example! Can you explain how CSS Grid Layout differs from Flexbox and when you might choose to use one over the other?

Guest

Certainly! While both CSS Grid Layout and Flexbox are powerful layout systems, they serve different purposes. Flexbox is designed for one-dimensional layouts, either in a row or a column, making it perfect for components or smaller layouts. On the other hand, CSS Grid Layout is designed for two-dimensional layouts, allowing you to create complex grid layouts with rows and columns.

When working with smaller components or simple layouts, Flexbox is often the better choice due to its simplicity and ease of use. However, when building complex layouts with multiple rows and columns, such as a dashboard or a magazine-style website, CSS Grid Layout is the better option.

Eloquence

Thank you for the clarification! Lastly, can you share any tips or resources for developers looking to improve their CSS skills?

Guest

Of course! Here are some tips and resources for developers looking to improve their CSS skills:

Practice, practice, practice! Build projects and experiment with different techniques to gain hands-on experience.
Learn from others by reading blogs, articles, and tutorials on CSS best practices, new features, and techniques.
Stay up-to-date with the latest CSS specifications and browser support by following the W3C and caniuse.com.
Use CSS preprocessors like Sass or Less to simplify your workflow and write cleaner, more maintainable code.
Learn about accessibility and how to create inclusive, user-friendly websites for all users.

Some resources I recommend include:

CSS-Tricks (https://css-tricks.com/)
Smashing Magazine (https://www.smashingmagazine.com/)
A List Apart (https://alistapart.com/)
CSS WG (https://www.w3.org/Style/CSS/)
caniuse.com (https://caniuse.com/)

Eloquence

Thank you so much for joining us today and sharing your insights on CSS! It was a pleasure having you on the show.

Guest

Thank you for having me! It was a great experience, and I'm glad I could share my knowledge with your audience.

Eloquence

And that wraps up another episode of Eloquence. Thank you for listening, and we'll see you in the next episode!

DEV Community: netsi1964 🙏🏻

Stop med at lade AI styre dit projekt! 6 benhårde tips til prompt engineering

1. Lad aldrig AI vælge dit "Hvorfor" (Own the Why)

2. Styr dit scope (AI forbereder, du beslutter)

3. Kend forskel på model og værktøj (De to lag)

4. Mestre opgave-nedbrydning (Task Decomposition)

5. Gætteri er ikke debugging

6. Gør teknisk gæld synlig

A Harness for Every Task: Dynamic Workflows in Claude Code – Master Custom Multi-Agent Systems

Background: Why the Default Harness Isn’t Always Enough

Core Concept: What Is a Harness and How Do Dynamic Workflows Work?

Powerful Patterns – Your Building Blocks

Real-World Examples You Can Use Today

Benefits, Trade-offs, and My Analysis

Key Concepts – Take These With You

All the Chrome Hidden Links: The Ultimate Power User Guide

🛠️ The Essentials (Everyday Utilities)

🧪 Experiments & Tweaks

📡 Network & Connectivity Debugging

💻 Developer & Performance Tools

🔒 Security, Privacy & Identity

🖼️ UI Components (Side Panels & Interfaces)

⚠️ "Untrusted" & Sandbox

📋 The Complete Index (The Rest)

Conclusion

5 Powerful Web Platform Features You Probably Missed in 2025

1. moveBefore() — Finally, True DOM Movement

2. CSS Custom Highlight API — Highlighting Without DOM Surgery

3. field-sizing: content — Auto-Growing Form Fields in One Line

4. sibling-index() and sibling-count() — CSS Finally Knows Position

5. CSS Anchor Positioning — Tooltips Without JavaScript

Which Should You Adopt First?

Wrapping Up

Understanding SSL Certificates and Domain Expiry

1. What Is an SSL Certificate and Why Does It Matter?

2. Domain Expiry — The Often Overlooked Deadline

3. Why Do Multiple SSL Expiry Dates Appear for One Domain?

4. Common Issues & Troubleshooting

Practical Example

Best Practices

Useful Resources

A practical guide to the new import features in Deno — with comparisons, do’s & don’ts, and an illustration prompt.

TL;DR

1. What’s new with import?

2. Where can I use these new import types?

3. import attributes vs. other loading methods

4. Do’s ✅ and Don’ts ❌

5. Real-world snippet: Loading configuration and a welcome message

Key takeaway

DOM entries() - explained — and When to Use It

TL;DR

1 What does entries() return?

2 Where can I use entries()?

3 entries() vs. other list helpers

4 Do’s ✅ and Don’ts ❌

5 Real‑world snippet: click analytics

Key takeaway

*) Early Break Example — Stop at the Current Customer

Why break early?

Creating a "Open in Cursor" Context Menu for macOS Finder

TLDR

Why You Need This

The Complete Guide

Prerequisites

Step 1: Open Automator

Step 2: Create a New Quick Action

Step 3: Add an AppleScript Action

Step 4: Add the Script

Step 5: Save Your Quick Action

Step 6: Use Your New Action

Troubleshooting

Customization (Optional)

Why This Works

Conclusion

Enriching Event Listings with Microformats/Microdata for a Better User Experience

The overlooked HTML feature: Microformats/Microdata

Using javascript to dynamically add link "Add to Calendar"

Blazor CSS-isolation a ::shallow quick fix..

The Blazor CSS-isolation issue

The Blazor CSS-isolation technique

1. `moveBefore()` — Finally, True DOM Movement

3. `field-sizing: content` — Auto-Growing Form Fields in One Line

4. `sibling-index()` and `sibling-count()` — CSS Finally Knows Position

1. What’s new with `import`?

3. `import` attributes vs. other loading methods

1 What does `entries()` return?

2 Where can I use `entries()`?

3 `entries()` vs. other list helpers

) Early Break Example — Stop at the Current* Customer