mix-blend-mode

You can do a lot of interesting color manipulation now without JavaScript. Here is a terrific demo of what you can do with new CSS property mix-blend-mode. Just click in the image and pick a new color for the VW Beetle.

See the Pen Dynamic Image Colorizing with by Noah Blon (@noahblon) on CodePen.

MDN docs, which list other possible values besides “hue.” Try playing around with other values in the Pen above, or with your browser’s dev tools.

If you’re thinking that “mix” and “blend” are almost redundant, well… your’re right, but that awkward name differentiates this property from background-blend-mode.

Fun fact! This is not a CSS3 property, but is defined in a separate specification: Compositing and Blending Level 1.

TIL

Today I learned that Javascript dates are all kinds of wonky.

1
2
3
4
» new Date('10/25/2015')
« Sun Oct 25 2015 00:00:00 GMT-0400 (EDT)
» new Date('2015-10-25')
« Sat Oct 24 2015 20:00:00 GMT-0400 (EDT)

The Date constructor interprets a MM-DD-YYYY string as local time, but a YYYY-MM-DD string as UTC time. What a pain. Imagine that you’re working with text-based dates from a database (or worse, from user input) and trying to do some date calculations. Oh, the horror!

Ok, fine, it’s not that bad.

Read More

Twitter Favorite

The following tweet perfectly describes how I feel about Twitter’s switch to the generic “like” used by other social networks.

The term “like” has problems that Facebook has been trying to solve. Namely, what do you do about sad posts? “So-and-so passed away last night. Please keep the family in your thoughts and prayers,” for example. I really don’t want the poster receiving a notification that says “Ivan likes this.” I’d rather it say, “Ivan comiserates with this.” I hear Facebook is testing a new way of responding to content, but it hasn’t happened yet. Until then, its problems are now also Twitter’s problems.

Well, I can’t change Twitter, but I can change my browser. Someone made a Chrome plugin to change the heart/like back to the familiar star/favorite. I modified it a little bit and published a Greasemonkey script to do the same on Firefox:

There’s also one for TweetDeck on Chrome (via Tampermonkey) or Firefox, although it does not change the dog-ear “liked” because that’s actually an image and I didn’t feel like making and hosting a modified sprite sheet):

To install, first install Greasemonkey. Simply copy the entire contents of the Gist above, and when you try to create a new Greasemonkey script, you’ll have the option to “Use Script From Clipboard” at the bottom of the little popup. Just enable it and you’re golden. It won’t change how other people see your favorite/like, but you can at least delude yourself into thinking that you do not, in fact, “like” everything under the sun. And that’s gotta be worth something.

JavaScript code styles

There is a big debate about code style. There always has been. It’s not so much a Holy War as a Lilliputian War (because the topic of discussion is mostly subjective, but there are certainly a few objective claims, especially about readability). There are standards that have been erected, and they have massive followings. The prevalent wisdom is the following:

  • Adopt the current style used in any group project you join
  • “Just pick one” if starting a new project
  • The style is law. Do not break the style. Use tools to enforce the style. Make extremely rare and well-documented exceptions.

Read More

One hundred words per minute

I finally hit 100 WPM using the Colemak keyboard. This officially makes me a faster typist than I ever was with Qwerty.

I must confess, a big part of the reason for this is that I have learned to touch-type (mostly—I am not very good with some numbers and symbols, and my left hand tends to want to hover instead of stay touching the keycaps). But I also must give due praise for Colemak’s comfort of use. I may simply be http://youarenotsosmart.com/2010/05/19/fanboyism-and-brand-loyalty/ it, but I think that increased speed is definitely a side effect of the proven reduced finger travel distance of ~40% over Qwerty (run your own tests with the web app http://patorjk.com/keyboard-layout-analyzer/).

I have been practicing almost daily for half an hour or so. Since it’s such a time investment, I decided to multitask by typing a book. https://code.google.com/p/amphetype/ is an ancient Python-based Windows application that allows you to import any plaintext file and practice by typing it out. It has some very robust statistics as well, but that’s beside the point; the point is that I have typed the entirety of Flatland and Heart of Darkness, and I’m half-way through Fahrenheit 451.

Also, the point is that I can type pretty fast now. Here’s the dampened history of my last 1000 practice sessions, along with my top speeds.

Numbers and graphs make anything more believable. (click to enlarge)

I’ve hit 100 a few times, and I usually only dip into the 70s when there are too many quotes and dashes. (Both Flatland and Heart of Darkness are full of dashes—it drives me nuts!) If grouping by day or by 10-session chunks, I get an even nices progression that shows my current average at a solid 80 WPM.

(click to enlarge)

Now if I could just get to typing at 100 WPM as my average, I can declare my goal accomplished.

Bonus story: I once invented my own Colemak derivative that got slightly higher scores in the KLA linked above. Artificial scores mean nothing in the real world, of course, but I’m still fond of my baby, which I named Ivak.