{"version":"https://jsonfeed.org/version/1","title":"Aaron Gustafson: Content tagged developer tools","description":"The latest 20 posts and links tagged developer tools.","home_page_url":"https://www.aaron-gustafson.com","feed_url":"https://www.aaron-gustafson.com/feeds/developer-tools.json","author":{"name":"Aaron Gustafson","url":"https://www.aaron-gustafson.com"},"icon":"https://www.aaron-gustafson.com/i/og-logo.png","favicon":"https://www.aaron-gustafson.com/favicon.png","expired":false,"items":[{"id":"https://www.aaron-gustafson.com/notebook/links/modern-css-feature-support-for-shadow-dom/","title":"🔗 Modern CSS Feature Support For Shadow DOM","summary":"This is a tremendously useful resource for anyone working with Shadow DOM and trying to understand where modern CSS features actually stand in practice, not just in theory.","content_html":"

Adobe has produced a tremendously useful resource for anyone working with Shadow DOM and trying to understand where modern CSS features actually stand in practice, not just in theory.

\n

What I especially like here is the framing: not simply “supported” or “unsupported,” but whether a feature is actually advisable in Shadow DOM, how it crosses boundaries, and where browsers still disagree. That’s the kind of nuance you need when you’re building real components instead of admiring specs from afar.

\n","social_text":"This is exactly the kind of resource the web platform needs more of: practical, test-backed guidance on how modern CSS features actually behave with Shadow DOM.","url":"https://www.aaron-gustafson.com/notebook/links/modern-css-feature-support-for-shadow-dom/","external_url":"https://shadow-dom-css.adobe.com/","tags":["CSS","web components","developer tools"],"date_published":"2026-04-29T12:25:00Z"},{"id":"https://www.aaron-gustafson.com/notebook/links/slidevars/","title":"🔗 slideVars","summary":"A lovely little utility from Chris Coyier that turns CSS custom properties into a live control panel.","content_html":"

This is a lovely little utility from Chris Coyier that turns CSS custom properties into a live control panel.

\n

It’s one of those tools that immediately makes me want to crack open a demo and start playing. What’s especially nice is that it doesn’t ask you to invent some parallel configuration universe if you don’t want to; it can just inspect the variables you already have and give you a UI for experimenting with them. That makes it feel less like a framework and more like a really practical enhancement to the way many of us already work.

\n","social_text":"slideVars feels like the kind of tiny, practical tool that makes design and front-end iteration a whole lot more fun.","url":"https://www.aaron-gustafson.com/notebook/links/slidevars/","external_url":"https://codepen.github.io/slideVars/","tags":["CSS","developer tools","web development"],"date_published":"2026-04-23T12:20:00Z"},{"id":"https://www.aaron-gustafson.com/notebook/a-web-component-starter-template/","title":"âœđŸ» A Production-Ready Web Component Starter Template","summary":"I created a comprehensive starter template for creating production-ready web components with modern tooling, testing, and CI/CD—following Google’s Custom Element Best Practices.","content_html":"

Creating a new web component from scratch involves a lot of boilerplate—testing setup, build configuration, linting, CI/CD, documentation structure, and more. After building — and refining/rebuilding — numerous web components, I’ve distilled all that work into a starter template that lets you focus on your component’s functionality rather than project setup.

\n

The Web Component Starter Template is based on the architecture and patterns I’ve refined across my web component work, incorporating Google’s Custom Element Best Practices and advice from other web components practitioners including the always-brilliant Dave Rupert.

\n

# What’s included

\n

The template provides everything you need to create a production-ready web component:

\n\n

# Quick start with interactive setup

\n

Getting started is straightforward. If you’re a GitHub user, you can create a new repository directly from the template. Alternatively, clone it locally:

\n
git clone https://github.com/aarongustafson/web-component-starter.git my-component\ncd my-component\nnpm install\nnpm run setup
\n

The setup wizard asks for your component name and description, then automatically:

\n\n

You’re left with a fully scaffolded repository, ready for you to develop your component.

\n

# Flexible import patterns

\n

One of the key features is support for multiple registration patterns. Users of your component can choose what works best:

\n

Manual registration for full control:

\n
import { ComponentNameElement } from '@yourscope/component-name';\n\ncustomElements.define('my-custom-name', ComponentNameElement);
\n

Auto-define for convenience:

\n
import '@yourscope/component-name/define.js';
\n

Or call the helper directly:

\n
import { defineComponentName } from '@yourscope/component-name/define.js';\n\ndefineComponentName();
\n

The auto-define approach includes guards to ensure it only runs in browser environments and checks if customElements is available, making it safe for server-side rendered (SSR) scenarios.

\n

# Testing made easy

\n

The template includes a comprehensive testing setup using Vitest:

\n
import { describe, it, expect } from 'vitest';\n\ndescribe('MyComponent', () => {\n  it('should render', () => {\n    const el = document.createElement('my-component');\n    expect(el).toBeInstanceOf(HTMLElement);\n  });\n});
\n

Happy DOM provides a lightweight browser environment, and the included scripts support:

\n\n

# Automated publishing with OIDC

\n

The template is configured for secure automated publishing to npm using OpenID Connect (OIDC), which is more secure than long-lived tokens. After you manually publish the first version and configure OIDC on npm, create a GitHub release and the workflow handles publishing automatically.

\n

Manual publishing is still supported if you prefer that approach.

\n

# Following best practices

\n

The template bakes in best practices from the start:

\n\n

The included WEB-COMPONENTS-BEST-PRACTICES.md document explains the reasoning behind each pattern, making it a learning resource as well as a starter template.

\n

# Why I built this

\n

After creating components like form-obfuscator, tabbed-interface, and several others, I found myself copying and adapting the same project structure each time. This template captures those patterns so I — and now you — can start building components faster.

\n

If you build something with it, I’d love to hear about it!

\n","social_text":"Start building web components the right way with this production-ready template.","url":"https://www.aaron-gustafson.com/notebook/a-web-component-starter-template/","tags":["web components","JavaScript","open source","developer tools","best practices"],"date_published":"2026-01-02T00:06:37Z"},{"id":"https://www.aaron-gustafson.com/notebook/evernote-for-interface-inventories/","title":"âœđŸ» Evernote for Interface Inventories","summary":"Earlier today, Brad Frost posted a great piece touting the usefulness of interface inventories . I’ll give him the floor to explain:","content_html":"

\n\tEarlier today, Brad Frost posted a great piece touting the usefulness of interface inventories. I’ll give him the floor to explain:

\n
\n

\n\t\tAn interface inventory is similar to a content inventory, only instead of sifting through and categorizing content, you’re taking stock and categorizing the components making up your website, app, intranet, hoobadyboop, or whatever (it doesn’t matter). An interface inventory is a comprehensive collection of the bits and pieces that make up your interface.

\n
\n

\n\tInterface inventories are a great way to take stock of the design consistency (or inconsistency) of your site and are a typical first step in creating a pattern library. After all, you need to know what patterns you have before you can document them.

\n

\n\tIn his article, Brad offers a Keynote template for gathering your screenshots, but I have been living in Evernote lately, so I wanted to take a moment to show off how you might use Evernote’s tools to simplify the process of building an interface inventory. If you don’t have an Evernote account, you can get a free one here.

\n

\n\tOne method of getting screenshots into Evernote is using Skitch. Skitch was originally developed by plasq, but was acquired by Evernote in 2011. It is a general purpose screenshotting tool that supports annotations, etc.

\n
\n\"\"
\n

\n\tHere’s a quick run-down on how to use Skitch to build your interface inventory:

\n

\nStep 1: Create a new Notebook for your interface inventory and adjust the Skitch preferences so it uses it.

\n
\n\"\"
\n

\nStep 2: Click the “Screen Snap” button and adjust the crop tool to contain the interface object you want to capture.

\n
\n\"\"
Position your crosshairs and

\n
\n\"\"

your snap is captured in Skitch
\n

\nStep 3: Rinse & repeat.

\n

\n\tWhen Skitch syncs up to Evernote, your screenshots will magically appear on any device you have.

\n

\n\tAnother route to go involves the Evernote Web Clipper. This add-on is available for pretty much every browser and is available as a bookmarklet to boot.

\n

\n\tUsing the Web Clipper is every bit as simple as it is with Skitch. Possibly moreso. One bonus is that you have the benefit of being able to direct your individual clips to different notebooks within Evernote. Simply click the Web Clipper button, select the area to clip, and choose where you want the clip to go. You can even add any tags you might find useful.

\n
\n\"\"
\n

\n\tEither way you go, you will eventually end up with a nice little collection of interface artifacts in Evernote which are, in turn, available on the web and on any device where you have Evernote installed.

\n
\n\"\"
All your interface are belong to us.
\n

\n\tThe nice thing about using a tool like Evernote for creating an interface inventory is that you can share this notebook with your colleagues to speed up the documentation. Simply divide up your interface into categories and go on a scavenger hunt. All of the snaps will sync to the same place and become a part of your interface inventory. Done and done.

\n

\n\tHappy snapping!

\n","url":"https://www.aaron-gustafson.com/notebook/evernote-for-interface-inventories/","tags":["design","developer tools","web design"],"date_published":"2013-07-10T12:00:00Z"},{"id":"https://www.aaron-gustafson.com/notebook/subtree-merge-as-an-alternative-to-submodules-with-git-svn/","title":"âœđŸ» Subtree merge as an alternative to submodules with git svn","summary":"We use Subversion as our version control system for all client work here at Easy because we absolutely love Springloops’ hosted Subversion service , but we use Git for all of our open source projects because, well, Git is a lot more fun
","content_html":"

We use Subversion as our version control system for all client work here at Easy because we absolutely love Springloops’ hosted Subversion service, but we use Git for all of our open source projects because, well, Git is a lot more fun to work with and we love the community that’s built up around Github. In order to have the best of both worlds when working on client projects, we use git-svn as our front-end to Subversion. It’s a great tool, but it’s not without its limitations. One such limitation is its inability to translate Git submodules into svn:externals. Thankfully, Git offers an alternative that is comparable and plays nicely with Subversion: the subtree merge.

\n

When attempting to dcommit a Git repository containing a submodule, you’ll likely receive a message like this:

\n
\n

952bee47201e87b0b0e851bcbe6c8940d429cda0 doesn’t exist in the repository at /usr/local/git/libexec/git-core/git-svn line 3787 Failed to read object 952bee47201e87b0b0e851bcbe6c8940d429cda0 at /usr/local/git/libexec/git-core/git-svn line 480

\n
\n

That annoying message is the painful reminder that you need to find another way to add content from another project into your repository. Subtree merge to the rescue!

\n

If you’ve already hit the error, go ahead and delete your submodule folder(s) and the .gitmodules file and commit the changes to your repository to make the path available again. Next, from a shell within the root of your Git repository enter these commands at the prompt (replacing the capitalized phrases with your relevant information):

\n
    \n
  1. git remote add -f LOCAL_NAME PATH/TO/GIT/REPOSITORY
    2. \n
  2. git merge -s ours --no-commit LOCAL_NAME/BRANCH_NAME
    3. \n
  3. git read-tree --prefix=PATH/I/WANT/IT/IN/ -u LOCAL_NAME/BRANCH_NAME
    4. \n
  4. git commit -m \"Merge of PROJECT\"
    5. \n
  5. git pull -s subtree LOCAL_NAME master
    6. \n
\n

To provide a fully fleshed-out example for you, I used the following to merge the master branch of eCSStender into the path vendors/ecsstender within another project.

\n
    \n
  1. git remote add -f eCSStender git://github.com/easy-designs/eCSStender.js.git
    2. \n
  2. git merge -s ours --no-commit eCSStender/master
    3. \n
  3. git read-tree --prefix=vendors/ecsstender/ -u eCSStender/master
    4. \n
  4. git commit -m \"Merge of eCSStender into the vendors directory\"
    5. \n
  5. git pull -s subtree eCSStender master
    6. \n
\n

The beauty of this is that you can use that last line to pull in the latest version of the external project and then all you have to do is dcommit the changes to get them into Subversion. Problem solved.

\n","url":"https://www.aaron-gustafson.com/notebook/subtree-merge-as-an-alternative-to-submodules-with-git-svn/","tags":["developer tools","software development"],"date_published":"2010-04-05T10:45:21Z"},{"id":"https://www.aaron-gustafson.com/notebook/now-thats-what-i-love-to-hear/","title":"âœđŸ» Now that’s what I love to hear","summary":"I got an email the other day from Steven Mading, a developer at the BioMagnetic Resonance Bank at the University of Wisconsin . In it, he shared his experience using jsTrace and, with his permission, I’m sharing it with all of you:","content_html":"

I got an email the other day from Steven Mading, a developer at the BioMagnetic Resonance Bank at the University of Wisconsin. In it, he shared his experience using jsTrace and, with his permission, I’m sharing it with all of you:

\n
\n

I just thought I’d give a quick thank you to you for the little jsTrace JavaScript utility you made available online. I found it from a Google search and it was exactly what I needed.

\n

It really helped me a lot. I had a problem with some widgets on an HTML form that had a lot of JavaScript hooks (things like onblur, onclick, onfocus, etc). The events were occurring in a weird order and I couldn’t trace what was happening. Using the standard alert() function was useless because making an alert window POP up caused the events to be different and changed the relevant behavior (since onfocus and onblur were a relevant part of the behavior, popping up a window changes the focus and invalidates the debugging information when what I’m trying to do is figure out why the focus changes aren’t happening the way I expect.)

\n

Your jsTrace allowed me to figure out the problem (which, as it turns out, was that when I clicked on Widget B, I was calling BOTH the onclick for Widget B and the onblur for Widget A, but not always in a predictable order). So once I knew that was happening, I was able to redesign my code to work either way and thus fix the bug.

\n

Again, thank you for making this tool publicly available.

\n
\n

I love it when things work out like that. It makes it all worthwhile.

\n

Have you had an experience with using jsTrace that you’d like to share? Do you use it or any other scripts we’ve built often? Are any of the user enhancement scripts in use on production websites? Let us know your thoughts, good or bad.

\n","url":"https://www.aaron-gustafson.com/notebook/now-thats-what-i-love-to-hear/","tags":["JavaScript","developer tools"],"date_published":"2006-01-18T18:07:40Z"},{"id":"https://www.aaron-gustafson.com/notebook/more-developments-in-jstrace/","title":"âœđŸ» More developments in jsTrace","summary":"As I mentioned to Ian earlier today, Dave and I were discussing having the jsTrace window keep pace with whatever the most current line is spit out to it. A few hours later, here it is: jsTrace 1.3 . I have some other stuff (read
","content_html":"

As I mentioned to Ian earlier today, Dave and I were discussing having the jsTrace window keep pace with whatever the most current line is spit out to it. A few hours later, here it is: jsTrace 1.3. I have some other stuff (read: paying projects) that need my attention, so I am putting jsTrace down for a bit. Dave & I will be posting a few more demos of its use in different situations, but as far as further development goes, I’m gonna be hands-off for a bit to let you all get a chance to participate.

\n

And if you’re in the participatory mood, check out this site I built with Adaptive Path. I will be posting some details about the project and how I accomplished certain design features once Kel’s campaign’s over and life gets a little less hectic.

\n","url":"https://www.aaron-gustafson.com/notebook/more-developments-in-jstrace/","tags":["JavaScript","developer tools","web development"],"date_published":"2005-11-02T04:31:24Z"},{"id":"https://www.aaron-gustafson.com/notebook/jstrace-two-days-on/","title":"âœđŸ» jsTrace two days on","summary":"The reception for our latest script release , jsTrace , has been fantastic. From the write-up on the DOM Scripting Task Force blog to all of the emails and comments, it’s been great.","content_html":"

The reception for our latest script release, jsTrace, has been fantastic. From the write-up on the DOM Scripting Task Force blog to all of the emails and comments, it’s been great.

\n

The past few days have seen many ideas, requests and enhancements sent my way. Some have been rolled into the jsTrace 1.1 release which I made public today. One such enhancement (brought to us by Joe Shelby) I have dubbed “memory,” as it allows the debugging window to remember both its position and size the next time it is opened (via cookies). Further enhancements have been made to the underlying code to streamline development of additional tools for the bottom toolbar and the font size of the bottom toolbar has also been increased (per several requests).

\n

I hope you all enjoy the improvements. Keep ‘em coming.

\n

Update: We’ve also been mentioned in DOMScripting.com.

\n

Another update (to 1.2): I added a buffer to handle traces executed prior to the jsTrace window being generated. The buffer is written to the viewport once it is generated.

\n","url":"https://www.aaron-gustafson.com/notebook/jstrace-two-days-on/","tags":["JavaScript","developer tools","web development"],"date_published":"2005-10-30T01:04:04Z"},{"id":"https://www.aaron-gustafson.com/notebook/debugging-javascript-just-got-a-little-bit-easier/","title":"âœđŸ» Debugging JavaScript just got a little bit easier","summary":"Like many of you, I’m sure, I hate debugging JavaScript. Really, it’s not the debugging, per se , as much as it’s using alert() to echo stuff out to the screen. It’s stupid and distracting and takes for ever if you’re debugging a lot of
","content_html":"

Like many of you, I’m sure, I hate debugging JavaScript. Really, it’s not the debugging, per se, as much as it’s using alert() to echo stuff out to the screen. It’s stupid and distracting and takes for ever if you’re debugging a lot of stuff.

\n

For the last few months, I’ve been toying with a few different means of error reporting and echoing out debugging information, but hadn’t been really satisfied with anything I’d come up with. I used to do quite a bit of Flash work back in the day (before Dave came along and put my best efforts to shame) and always loved the Trace window. I liked that you could just echo stuff out to it and it acted as a running tally of pretty much anything you wanted to track: variable values, messages, etc. Two days ago I decided that was what I wanted for JavaScript.

\n

I toyed with the idea of spawning a popup and tracing the info to that, but I don’t like popups. They are possibly more annoying than alert messages (well
 maybe not). I decided to echo the messages out to a div on the page instead. Then feature creep set in. Before I knew it, it was a draggable, scalable window with some nifty features. Never one to be selfish, I thought other people could find a use for it too, so I’ve released it for anyone who wants it: here it is. Use it, play with it and improve on it as you see fit.

\n

The script currently has the following features:

\n\n

Special thanks go out to Aaron Boodman, whose DOM Drag was perfect for the dragging and enabled me to hook up a window stretcher pretty easily, Richard Rutter, whose Browser Stickies were also somewhat of an inspiration, and Dave, for helping me debug the scaling code.

\n

Aside: one nice feature of the script is that, once it was operational, I was able to use it to debug itself
 how cool is that?

\n","url":"https://www.aaron-gustafson.com/notebook/debugging-javascript-just-got-a-little-bit-easier/","tags":["JavaScript","developer tools","web development"],"date_published":"2005-10-27T01:59:39Z"}]}