Programming languages and their ecosystems

There was an article called "Ruby is defined by terrible tools". I haven't enough Ruby experience to know whether its thesis is true, but one quote really stuck out for me:

Programming languages cannot be considered separately from their ecosystems.

I totally agree with this, almost to the point where the language itself is secondary to the tools. "Softer" things can go a long way to making a language good to work with: package management; documentation; tooling; community.

Personally, I feel this way about Node. I don't find JavaScript a pleasure to work with, but the Node ecosystem is solid.

How to clear all inline styles from an HTML element

In short: set the styles to the empty string to clear all styles (for example, myElement.style.cssText = "";).

As a front-end developer at Braintree, I deal with the DOM a lot. For reasons I could bore you with, I needed to use JavaScript to clear all inline styles (but not styles applied from CSS) from an HTML element.

After trying a few less-than-ideal solutions, I found a one-liner that solved the problem: all I had to do was set its cssText to the empty string, like this:

myElement.style.cssText = "";

That cleared all inline styles! As far as I can tell, this worked in every browser I tested (though I didn't test less than IE8).

Hopefully this little trick can help you.

Overwriting document.head in strict mode on Safari

In short: you can't overwrite document.head in strict mode if you're on Safari, so be careful with your polyfills.

This is a pretty niche post, but I ran into this problem today.

document.head is a convenient reference to the <head> element that you can reference from JavaScript. Unfortunately, like many convenient features, not all browsers support it.

Luckily, it's an easy fix. Mathias Bynens has a helpful post where he shows how to polyfill it. It's a one-liner:

// Credit to Mathias Bynens for this line!
document.head = document.head || document.getElementsByTagName('head')[0];

This has the nice benefit that it works in all browsers, old and new...except for Safari when you're in strict mode.

Safari (both on desktop and on iOS) will throw an error when you try to overwrite document.head if you're in strict mode. This means that the following function will always throw an error:

function polyfillDocumentHead() {
  'use strict';
  document.head = document.head || document.getElementsByTagName('head')[0];
}

Now that we know that this is an issue, we have a couple of options.

  1. We can use a second example from the original blog post:

    // Credit to Mathias Bynens again!
    document.head || (document.head = document.getElementsByTagName('head')[0]);
    

    This will only reassign it if it isn't defined, which shouldn't happen on Safari. Unfortunately, linters will complain about this line by default (that includes JSLint, JSHint, and ESLint). You can use your favorite linter's "don't lint this line" feature or disable the checks for that entirely.

  2. You can never reassign document.head and simply assign it to a new variable.

    var head = document.head || document.getElementsByTagName('head')[0];
    

    If you're encountering this problem in a CommonJS environment (like Browserify or Webpack), you can use my new document.head npm module. It works just like the above, but it might save you from having to write the line above every single time. You use it like this:

    var head = require('document.head');
    

    The whole module is one line!

  3. We could sidestep this problem entirely by using a selector library like jQuery.

And there you have it: properly shimming document.head when you're in strict mode and on Safari! I do not expect this niche post to make it to the front page of anything other than this blog.

Pietime, my entry to JS1k 2015

For the uninitiated, JS1k is a JavaScript code golfing competition. To quote its about page, entrants "submit a self-contained demo in 1024 bytes of pure JS, which in turn may use various web technologies." In other words: see how much you can fit into just one kilobyte of JavaScript code.

There have been some incredible entries. 2013's winner might be my favorite, but there are plenty of other amazing submissions. It's almost spooky to see how much one carefully crafted kilobyte of JavaScript can produce nowadays!

I've been entering since 2013, but I actually placed in the top ten this year! You can check out my submission here. It lets you tell time using a non-traditional method: pie charts.

Many of the lessons of Daniel LeCheminant's four-kilobyte StackOverflow clone were helpful when squeezing my entry into the byte limit. Perhaps the biggest lesson was unintuitive: repeat yourself! The JSCrush JavaScript compressor can better compress repeated code than fewer characters. That's why my code has lots of lines like this:

canvas.c.beginPath();
canvas.c.moveTo(s / 2, s / 2);
canvas.c.arc(s / 2, s / 2, s * 0.45, 0, 2 * Math.PI);
canvas.c.stroke();

I could've used with, but that turned out to compress worse than repeating myself like that. That was surprising to me!

Give my submission a look if you'd like, but definitely check out the other entries from this year—there are some really cool ones.

"This Incredible Hospital Robot Is Saving Lives. Also, I Hate It"

From an article on Wired:

Maybe that's why super-intelligent robots make us uncomfortable. It's not just fear that they're dangerous or are going to steal our jobs—it's envy. They're not saddled with emotions. They do everything perfectly. They roll about assuming they can woo us with cute beeps and smooth lines like "thank you." I, for one, shan't be falling for it.