"X marks gender-neutral"

From a Kottke post:

"Mx." (pronounced "mix" or "mux") is a gender-neutral honorific. It's used by people who don't want to be identified by gender, whether their gender identity isn't well-represented by the older forms, or they just don't want to offer that information or assume it when addressing someone else.

...

This is happening. It's happening in progressive, diverse, digital communities first. And for all their fractiousness, and the inherent difficulty in dealing with areas as complex and personal as identity, gender, and sexuality, it does feel like some standards are emerging.

"The last thing we all need is for the 'data' economy to destroy another medium"

From "Apple's actual role in podcasting: be careful what you wish for":

[Podcasting is] completely decentralized, free, fair, open, and uncontrollable by any single entity, as long as the ecosystem of podcast-player apps remains diverse enough that no app can dictate arbitrary terms to publishers (the way Facebook now effectively controls the web publishing industry).

[...]

And the last thing we all need is for the "data" economy to destroy another medium.

I don't have much skin/knowledge in this game, but I agree that podcasts feel like one of the final pieces of media that hasn't been overrun by money-grabbing. Nothing like this lasts but I'm living it up!

How to empty Chrome's cache and do a hard reload

This post assumes you know a bit about browser caches.

Sometimes I want to empty Chrome's cache and do a hard reload. Maybe I'm getting some stale resources that I'm pretty sure have changed and I want to make sure I'm getting fresh files.

To empty Chrome's cache and do a hard refresh:

  1. Open the Chrome DevTools. You can't do a hard reload if you don't have the DevTools open.
  2. Right-click on the Reload button.
  3. Click "Empty Cache and Hard Reload".

Here's what that looks like:

Screenshot of "Empty Cache and Hard Reload" in Chrome

I haven't seen this concisely documented anywhere, so I thought I'd write this post!

Detect global JavaScript variables with iframes

This post assumes you know about global variables in JavaScript and the basics of iframes. This post is meant for browser-based JavaScript, not other environments like Node.

It's pretty easy to accidentally leak global variables in JavaScript. Even the best of us accidentally find ways to fill the window object with variables we didn't intend to.

There are a lot of fancy tools that help you find these variables, but if you're looking for a simple oddball solution, you can use iframes.

Here's the finished, annotated code:

(function () {
  // Create an iframe and put it in the <body>.
  var iframe = document.createElement('iframe')
  document.body.appendChild(iframe)

  // We'll use this to get a "pristine" window object.
  var pristineWindow = iframe.contentWindow.window

  // Go through every property on `window` and filter it out if
  // the iframe's `window` also has it.
  console.log(Object.keys(window).filter(function (key) {
    return !pristineWindow.hasOwnProperty(key)
  }))

  // Remove the iframe.
  document.body.removeChild(iframe)
})()

In short, this looks at all the global variables on your window and compares it with the "pristine" window inside an iframe. If you have anything the iframe doesn't, it prints it out.

This is a bit of a hack and might not work in every weird edge case, but I've pasted this code snippet into the console and it's been useful!

Parse URLs with <a> tags in JavaScript

I've needed to use JavaScript to parse URLs while working at Braintree. In Node, this is easy; just use the built-in URL module. Before I started at Braintree, I thought browser-based URL parsing would require pulling in a third-party library or writing some tricky string parser. It turns out that there's an easy way that's built into browsers.

You can use <a> tags to parse out various attributes of a URL. For example, to get the hostname of a URL, you could do something like this:

var a = document.createElement('a')
a.href = 'http://evanhahn.com/parse-urls-with-a-tags/'

a.hostname  // => 'evanhahn.com'

You can grab things like hostname, protocol, hash, and much more. Take a look:

var a = document.createElement('a')
a.href = 'http://user:pass@evanhahn.com:8080/p/a/t/h?query=string#hash'

a.hash      // => '#hash'
a.host      // => 'evanhahn.com:8080'
a.hostname  // => 'evanhahn.com'
a.origin    // => 'http://evanhahn.com:8080'
a.password  // => 'pass'
a.pathname  // => '/p/a/t/h'
a.port      // => '8080'
a.protocol  // => 'http:'
a.search    // => '?query=string'
a.username  // => 'user'

This is really useful as a lightweight way to parse URLs!