DEV Community: netsi1964 🙏🏻

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!

From Flawless Codes to Human Qualities: The Unexpected Gifts of AI

netsi1964 🙏🏻 — Fri, 09 Feb 2024 15:20:46 +0000

AI is redefining our relationship with technology, not by avoiding errors, but by introducing variability and unpredictability, reminding us of the value of human qualities. This shift from impeccable software to systems that can "surprise" us points to a new era where technology encourages the development of empathy, adaptability, and creativity among its users.

Automating the Workforce and the Job Market

As AI systems become an integrated part of the workplace, our perception of automation shifts from a job threat to an opportunity to enhance human skills. AI can handle routine tasks, allowing humans more time to focus on tasks that require creativity, empathy, and critical thinking. This development underscores the need to value and develop these inherently human qualities, which cannot be easily automated.

Decision Making and the Role of AI

AI's influence on decision-making processes extends beyond offering data-driven insights. By integrating AI into decision-making, a degree of unpredictability and nuance is introduced, challenging traditional logic and predictability. This forces us to embrace more flexible and adaptive approaches, value human intuition, and accept that not all decisions can or should be reduced to binary choices.

Personalization through AI

AI's ability to tailor experiences to individual preferences opens up a new understanding of technology's role in our lives. Instead of viewing technology as an impersonal and flawless entity, we begin to see the value in systems that can "understand" and adapt to human variability. This pushes the boundaries of how we perceive the interaction between humans and machines, highlighting the potential for a deeper, more meaningful connection.

A Concrete Example: The Software Developer's New Reality

Imagine a software developer named Martin. For years, Martin has designed and implemented software applications where precision and predictability were key. When Martin sends a specific API call to a database, he expects the same answer every time. This has been the foundation of how he built secure and stable systems. His code is like a well-oiled machine, where every element functions as expected, without surprises.

But now, as Martin begins to integrate language models based on Large Language Models (LLM) like GPT into his applications, he notices a significant change. These models, trained on vast datasets of human text, bring a new dimension of 'humanity' to the interactions. Suddenly, the same input can yield different responses, depending on the context, previous interactions, or even the model's own 'state'. It's a situation that more closely resembles a dialogue with a human than a static database call.

For Martin, this is an eye-opener. He realizes that his expectations for software must change. He can no longer expect the inhuman consistency from his AI-driven applications. Instead, he must adapt to a world where software behaves more dynamically, more unpredictably, and yes, more humanly. This requires a new approach to design and development, accommodating variability and flexibility.

Conclusion

The advent of AI has opened the door to a world where flawless codes and immutable systems are no longer the ultimate goal. Instead, we've begun to appreciate the 'unexpected gifts' that AI brings - a rediscovery of the human qualities that make us unique. By navigating AI's unpredictability, we learn to value errors as a source of learning and innovation, recognizing the importance of human traits such as empathy, adaptability, and creativity. As we move forward, it's clear that the future of technology lies not in its infallibility but in its ability to make us more human.

This blog post came to life during a train ride from Trifork in Aarhus back home to Viborg on a Friday. Throughout the journey, I used ChatGPT as a sparring partner, crafting the entire piece on an iPad Pro connected to the internet through my iPhone. This experience not only showcases the mobility and flexibility of modern technology but also highlights the evolving role of AI as a creative and collaborative tool in the writing process. It's a testament to how technology can enhance our productivity and creativity, even while on the move, bridging ideas and innovation seamlessly across devices.

Some tips on styling in creating images using ChatGPT

netsi1964 🙏🏻 — Sat, 03 Feb 2024 11:47:27 +0000

How do you get the style right when prompting for images in ChatGPT

One thing is that you from nothing but a text prompt can make LLMs like ChatGPT/Dall-e 3 create stunningly looking images, but often it is sort of out of control.

Merging the great text understanding of a Large Language Model like ChatGPT with an image generator like Dall-e 3 is a genius move IMHO - you can "talk your way" into the image you want.

I want to share some great patterns I discovered in my journey to becoming a super user of generative AI. Here I will share there.

Get the generative id (seed) of your generated images

Sometimes you get an image which has a great style to it, something which you like and want to reuse.

What I do is to ask for the generation id: Please give the generation id for this image, and you will get a unique number like: 12mRB34VZjntNwiQ. I then save the generated image together with this id in a document in Apple note app. This then becomes a repository of styles with examples (you know: an image says more than 1000 words)

Enter a dialogue with ChatGPT to get the perfect prompt

Say you would like to create something in the style of a Rembrandt painting. Here is an actual dialogue I had with ChatGPT:

Me



So summarize in 100 words the style, so I can use it for a
prompt to generate an image

ChatGPT



Rembrandt's painting style is distinguished by its emotional depth and focus on realism. His technique utilizes chiaroscuro, with dramatic contrasts between light and dark, to create volume and texture. His brushwork is expressive and often features impasto, which adds a tactile quality to surfaces. Rembrandt excelled in capturing human emotions, giving his subjects a sense of dignity. His compositions are complex, with thoughtful use of lighting to guide the viewer’s eye. His landscapes are atmospheric, with subtle light effects, while his portraits are intimate, deeply insightful, and introspective.

I then had a dialogue where I ended up with the prompt for generating a woman eating a pizza in the kitchen "Rembrandt style" The prompt became:



Generate an image: A woman eating a pizza in a kitchen,
portrayed with the emotional depth and realism characteristic
of Rembrandt’s style. The image is infused with chiaroscuro,
enhancing the three-dimensionality through stark contrasts of
light and shadow. The painting captures the intricate textures
of the scene, from the woman's expression to the pizza’s
cheesy surface, using expressive brushwork and impasto
techniques. The atmosphere is intimate and introspective,
focusing on the woman’s interaction with her meal, and the
composition is thoughtfully arranged with subtle lighting that
guides the viewer’s eye.

Which however gave an image with the woman eating a slice, yet no slice was missing from the pizza...

And here comes a reminder: you can "prompt on" and asking for correction to already generated image:

Me



Nice, but she has taken a slice, while the pizza is not
missing a slice! Please correct that error

Which then gave me an image matching my desired image:

I then (of cause) asked for a generation id: 12mRB34VZjntNwiQ

Uploade the image you like and make ChatGPT describe what it sees

Another path to get the style you want is to upload a picture of the style you desire. You should then ask something like this:



I really like the style of this image - can you give a
detailed prompt of the STYLE and method used in this image, so
that I can prompt a generative AI and get similar style.

An example

I found this image generated using Leonardo.AI which is kind of inspiring to me.

ChatGPT then replied:



Create an image in a hyper-detailed illustrative style that
merges elements of realism with surrealism. The artwork should
have two halves with one side depicting elements of nature,
wildlife, and organic textures, and the other side showcasing
urban elements, architecture, and geometric patterns. Both
sides should seamlessly transition into each other, forming a
cohesive whole that juxtaposes the natural world with human
civilization. The colors should be vivid and rich, with a
depth that suggests a three-dimensional effect, and the lines
should be crisp and refined. The overall feeling should be one
of a thought-provoking dichotomy, blending the living with the
inanimate in a single, harmonious portrait.

Now let's try to generate an image which combines the desire to get an image of a woman in the kitchen eating a pizza in that style!

Me



I need a picture of a woman eating a pizza, Create an image in
a hyper-detailed illustrative style that merges elements of
realism with surrealism. The artwork should have two halves
with one side depicting elements of nature, wildlife, and
organic textures, and the other side showcasing urban
elements, architecture, and geometric patterns. Both sides
should seamlessly transition into each other, forming a
cohesive whole that juxtaposes the natural world with human
civilization. The colors should be vivid and rich, with a
depth that suggests a three-dimensional effect, and the lines
should be crisp and refined. The overall feeling should be one
of a thought-provoking dichotomy, blending the living with the
inanimate in a single, harmonious portrait.

(Generation ID: tWwVb30ug4EZwlPj)

Summary (done by ChatGPT ;-))

As we wrap up this creative exploration, remember that the key to unlocking AI's potential lies in our prompts. Our journey with ChatGPT and Dall-e 3 has shown us that with a sprinkle of imagination and a dash of dialogue, we can shape the raw clay of AI's capabilities into a masterpiece. Hold onto those generation IDs like treasured maps to past styles. Engage in the back-and-forth banter with AI to perfect your vision. And when you stumble upon a style that captivates you, upload it, dissect it, and learn from it. Each interaction is a step toward mastering the art of prompt engineering, transforming you from a mere spectator to a maestro of the digital canvas. So go ahead, prompt with purpose, and let your creativity soar to new heights.

DEV Community: netsi1964 🙏🏻

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

Konklusion på fordelene ved elbil

Fordele:

Udfordringer:

A virtual podcaster

An interview with a frontend developer at Trifork, Aarhus

From Flawless Codes to Human Qualities: The Unexpected Gifts of AI

Automating the Workforce and the Job Market

Decision Making and the Role of AI

Personalization through AI

A Concrete Example: The Software Developer's New Reality

Conclusion

Some tips on styling in creating images using ChatGPT

How do you get the style right when prompting for images in ChatGPT

Get the generative id (seed) of your generated images

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