Interaction of Color

I have recently been reading through Josef Albers’ book Interaction of Color and working through some of the proposed exercies. It seemed obvious that, rather than cobbling together bits of colored paper, a web page could easily generate any number of possible color combinations.

So I built a simple page that dynamically generates the swatches described in Albers’ first exercise: https://terrencedorsey.com/files/albers.html

You’ll see two large fields of different colors and a small, central swatch. This central swatch is the same color within both larger fields. Notice how, depending on the surrounding colors, the central color may look different — lighter, darker, or even a slightly different shade.

Each time you refresh the page it generates a different, random selection of colors. Hex values for the generated colors are provided at the bottom of the page.

There’s a fiddle if you want to play with the code: https://jsfiddle.net/tpdorsey/wqo15gb5/

Albers Color Swatches

2015 Reading and Listening Updates

2015 was a busy year with lots of time spent on the road and not enough spent at home with my family or relaxing with a good book. Nonetheless, I did stumble across a few excellent books in the last 12 and updated my reading list accordingly.

Two books stood out. Let me tell you about them briefly.

If you’ve heard about the recent Jessica Jones series on Netflix, you might be interested in some background reading. Alias Omnibus, by Brian Michael Bendis and Michael Gaydos, collects Jones’ background in the Alias stories for Marvel by Bendis and Gaydos, along with some related storylines from other series (as I understand it). The Netflix and Marvel stories differ enough while tackling the same tough material to make both worthwhile reading/watching.

I also received Von Dutch: The Art, The Myth, The Legend, by Pat Ganahl, as a gift and frankly couldn’t put it down. Ignore for a second the recent “Von Dutch” fashion marketing phenomenon, which has nothing at all to do with the man. Dutch was arguably the inventor and master of modern decorative hot-rod pinstriping. Ganahl, a talented, long-time automotive journalist working mostly in the hot rod scene, created a fascinating portrait of the reclusive, eccentric Von Dutch, told mostly through the recollections of people who knew him. The discrepancies in the stories say as much about the fans, friends, and hot rod scene as they do about Dutch. A fascinating and finely told bit of history.

As for all that traveling… while I haven’t acquired a taste for audiobooks yet, I have been listening to hours and hours of podcasts. Two I particularly enjoy are:

Dan Carlin’s Hardcore History features some great, in-depth, wide-ranging narrative overviews of historical people and events. I particularly enjoyed Wrath of the Khans, a five-episode history of Genghis Khan and his hordes, and Blueprint for Armageddon, a six-episode history of World War I as told through personal accounts and diaries.

Beware: these are long-haul listening, and a single episode can go on for hours. On the other hand, I love Carlin’s ability to bring characters to life though quoted excerpts from source materials, as well as his tangent thoughts on those sources and the historians behind them.

My other favorite podcast is Nerds on Draft by my friends Gabe and Jeff. They talk about craft beer and nerdy stuff. You should also check out their excellent beer journal app TapCellar.

Cheers!

Keyboard Shortcuts for Outlook on Mac OS

I’m just going to come straight out and say it: Outlook on the Mac is a pretty decent mail client, particularly if your employer has invested in well-run Exchange and Active Directory services.

Here’s the problem, though.

You’re dealing with new messages in your inbox, and most tasks can be accomplished without taking your hands off the keyboard.

↑ and ↓ take care of navigating through messages.

⌘-R starts a reply, or ⇧-⌘-R (Shift-CMD-R) to reply all… used with extreme caution, please. (“Bedlam DL3?” “Me Too!”)

⌘-N starts a new message. ⇥ (Tab) through the address and subject fields to the message body. ⌘-↵ (CMD-Enter) sends the message.

⌫ and ⌦ are handy, too. I use these most of all.

Now, what if you want to move a message? The keyboard shortcut is ⇧-⌘-M (Shift-CMD-M), which brings up a dialog box to select the folder. (Note that the folder has to exist already. Type a folder name, select it from the list if more than one matches the search string, then press ↵ to move the message.

Moving messages

Unfortunately, that’s a lot of work if you move messages to specific folders frequently. Here’s where we use some built-in Mac OS functionality to create a keyboard shortcut.

When you move a message to a folder by using the ⇧-⌘-M (Shift-CMD-M) or by clicking the Move button on the ribbon, Outlook adds that action to its Move menu items. You can see these by clicking Message > Move and noting the items at the top of the menu.

Move commands

So, first, use either the Move button or the the ⇧-⌘-M action to register the destination in this menu. Note the name exactly as it appears here.

Now go to System Preference > Keyboard > Shortcuts.

Select App Shortcuts, then click the + button to add a new shortcut.

New App Shortcut

For Application choose Microsoft Outlook.app (it may be in the system Applications folder rather than your user Applications).

For Menu Title type in the exact name that appears in Outlook’s Move menu. In my example here it’s “Status (Mailbox - Dorsey, Terrence)”. Your Mac will find this. It’s magic.

For Keyboard Shortcut, type the shortcut key combination.

Shortcut details

Click Add and you’re good to go (assuming no conflicts with other system or app shortcuts).

Now, when you want to move a selected message, just use your keyboard shortcut. As an added bonus, if you ever reorganize folders in Outlook, the app is smart enough to continue routing messages to the right place.

Tap Utils for TapCellar

If you enjoy exploring craft beer, TapCellar, created by my friends Gabe and Jeff, is a fantastic beer journal app for iPhone. Rate the beers you’ve tried, share recommendations with friends, keep a shopping list, even track the contents of your beer cellar. It’s a great app. Check it out.

In fact, I like TapCellar so much, I wrote Tap Utils, a collection of tiny Ruby command line scripts that let you extract interesting information from your TapCellar backup.

Grade timeline for styles containing: Stout

Date        Grade F          A+  Name
2014-10-12  A               *    Imperial Russian Stout
2014-10-12  B            *       Sea Monster
2014-10-12  B+            *      Old Growth
2014-10-12  A               *    Yin
2014-10-12  B            *       Old Rasputin
2014-10-12  C         *          Overcast Espresso Stout
2014-11-11  B+            *      Milk Stout Nitro
2014-11-16  B            *       35K
2014-11-17  B+            *      Dragon's Milk
2014-11-25  A+               *   Aún Más Café Jesús
2014-12-05  A+               *   Bourbon County Brand Stout
2014-12-10  A               *    Ten Fidy

Mean Grade: A-             *

There are four scripts right now:

tap-avg-grades returns a table showing each style for which you’ve rated a beer, along with the average grade for the style, the number of beers rated for the style, and the standard deviation of grades. The standard deviation seemed like a clever idea at the time, but doesn’t really tell you anything useful. I might change this a more relevant measurement at some point in the future.

tap-shopping prints out a nicely formatted ASCII shopping list from the beers in your Shopping List saved filter. You can sort the results by brewery, name, or style keywords.

tap-styles prints out a chart illustrating the number of graded beers for all styles with graded beers.

tap-timeline prints out a vertical scatter plot chart illustrating grades over time based on a name or style keyword. The screen shot above shows an example.

I learned a lot making these scripts and I hope you enjoy playing with them. There’s decent documentation in the readme, and all of the utils should have --help options as well. Drink some beers, grade them in TapCellar, then print out some pretty charts. Above all else, have fun.

Vim Setup Links

I’ve been trying to work a little vim practice into my editing. It’s not to replace my trusty Sublime Text 3 setup, but rather to develop some muscle memory for those times when vim is the most robust editor at hand. And it’s always good to have a backup.

This is just a quick dumping ground for some useful posts I’ve found while setting up a local vim environment.

Configuring Vim on Mac OS X by Tim Reynolds, including sample .vimrc setup.

Vim and iTerm2 color-schemes by Chris Hunt.

How to control vim colors by Alvin Alexander.

10 vim color schemes you need to own

My favorite ST3 color scheme, Plastic Code Wrap, ported to vim by JoeDF at PlasticCodeWrap/GVIM. JoeDF has ported Plastic Code Wrap to over 20 other editors as well.

Here’s another vim port of Plastic Code Wrap by Chris Hoffman.

Vim Commands Cheat Sheet and a concise over view of the most common VIM Editor Commands.

And now to practice…

Sublime Text 3 Setup

I recently had to setup up Sublime Text 3 all over from scratch due to reasons of not planning ahead. It seemed prudent to write the steps all down for future reference and put the whole thing where I wouldn’t loose it. Like on my blog.

Nothing fancy, but it works for my purposes.

Start out by installing Package Control, the package manager for ST2 and ST3.

Open the command palette with CMD+Shift+P (Ctrl+Shift+P on Windows) and run Package Control: Install Package to find and install packages. See the Package Control Usage page for instructions on the process. Generally I like to search for packages on the Package Control site first so I can check for version compatibility, dependency gotchas and evidence of abandonware.

Markdown Extended is my preferred Markdown implementation. I actually set up ST3 to ignore the default Markdown package as you can see in the preferences below.

I’m using Monokai Extended as the theme just for Markdown Extended. Again, see the preferences JSON below. There was some monkey business involved in getting this set up, unfortunately: I had to use PackageResourceViewer to extract Monokai Extended into my /Packages folder, then point to that .tmTheme file (again, see below). This works better on my work machine, so I’ll have to double-check that setup and report back any further information. For now it’s good enough to get working.

I’m also using Colorcoder for semantic code coloring. It looks like Ruby support is installed by default now. Previously I had to use a workaround discussed in this issue on GitHub.

When installed you can now just go to View > Syntax > Colorcoder > Ruby (Colorcode). Colorcoder also has built-in support for C++, Coffeescript, Go, Lua and Python.

Pretty JSON is a good package for formatting and minifying JSON. I find it helpful, along with JSON Formatter for Chrome.

I don’t need to do diffs often, but when I do, Sublimerge: The professional diff and merge tool for Sublime Text 2 and 3 is the way to go. Buy it and support a developer who makes a really nice, useful tool.

As mentioned earlier, I’m using Monokai Extended as my Markdown-specific theme. Colorcoder applies semantic coloring, but it does so in conjunction with your existing theme setting. For general coding, I’m using PlasticCodeWrap, which I grabbed from the terrific tmTheme Editor by Allen Bargi.

And that’s pretty much it for my ST3 setup. My work setup has SublimeLinter 3 installed, but I don’t end up using it much.

Keybindings

I also don’t do much in the way of fancy keybindings. However, here are two that I’ve found useful.

[ { "keys": ["super+k", "super+t"], "command": "title_case" }, { "keys": ["ctrl+alt+super+m"], "command": "set_file_type", "args":{ "syntax" : "Packages/Markdown Extended/Syntaxes/Markdown Extended.tmLanguage" } }, { "keys": ["ctrl+alt+super+t"], "command": "set_file_type", "args":{ "syntax" : "Packages/Text/Plain Text.tmLanguage" } } ]

The first keybinding creates a shortcut for Title Case, which doesn’t have a default keybinding. The shortcut is CMD+K, then CMD+T, which follows the same pattern as the Upper Case and Lower Case bindings.

The second keybinding toggles between text and Markdown syntaxes for the current file. Mostly this is handy for .txt files that contain Markdown. I noticed, however, that this must be a keybinding I originally created for ST2. Package locations have moved around a bit since then. I had to unpack the Markdown Extended package with PackageResourceViewer and point the keybinding to the unpacked tmLanguage file. There must be a better way.

Preferences

Here’s my current Markdown Extended.sublime-settings. This is where I set the a default theme for the syntax that’s different from the general theme.

{ "color_scheme": "Packages/Monokai Extended/Monokai Extended.tmTheme", "margin": 100, "wrap_width": 80 }

And here are my general user preferences. I use Inconsolata at a sane size for mature eyes on large or Retina displays. Tabs are two spaces as the goddess intended. You can also see here that I ignore the default Markdown package.

{ "color_scheme": "Packages/Colorcoder/PlasticCodeWrap (Colorcoded).tmTheme", "font_face": "Inconsolata", "font_size": 17, "tab_size": 2, "translate_tabs_to_spaces": true, "trim_trailing_white_space_on_save": true, "ignored_packages": [ "Vintage", "Markdown" ], "original_color_scheme": "Packages/Monokai Extended/Monokai Extended.tmTheme" }

I’m not obsessive about fixed-width fonts. Check out Dan Benjamin’s Top 10 Programming Fonts and follow-up posts for some excellent suggestions. Adobe’s Source Code Pro is nice if you don’t mind having Adobe software on your system.

That’s about it for setup. The magic is in the writing and the coding.

My Web Perf Book For O’Reilly

Head over to HTTP Archive and check out their trends graphs. Notice anything? That’s right, web pages keep getting bigger and more complicated. The problem here is that — particularly in e-commmerce — consumers of your site expect it to load and become interactive quickly.

Turns out, the problems involved and solutions needed to fix them depend, mostly, on straightforward, Web Dev 101-level knowledge and technology. I recently wrote a short e-book on the subject for O’Reilly, Web Page Size, Speed, and Performance (free, registration required). There’s also an accompanying blog post on O’Reilly Radar, It’s time for a web page diet.

Slimming down web sites is not necessarily a matter of learning new and sophisticated programming techniques. Rather, getting back to basics and focusing on correct implementation of web development essentials — HTML, CSS and JavaScript — may be all it takes to make sure your own web sites are slim, speedy and responsive.

Interesting side note: mobile web users (and probably app users as well) expect faster interaction than on the desktop and are more likely to ditch an action if it’s slow. Think about the implications of that complication on your app development plans.

Markdown Links with Template

In Dr. Drang’s recent blog post, Quicker Markdown linking with TextExpander, the good Doctor takes a five-step, TextExpander-powered workflow for creating Markdown-flavored links created by David Sparks (of Mac Power Users fame and notoriety) and improves it with a new, streamlined TextExpander snippet fueled by 18 lines of AppleScript.

The Dr. Drang version programmatically retrieves the URL of the current page in either Safari or Chrome and creates a Markdown link with it. The upside of this method is that you can create a Markdown link without having to switch between apps. The downside is that the web page has to be in the currently selected tab in either Safari or Chrome and you have to supply the link text.

It’s a neat solution. In theory it saves you a context swap between editor and browser, and Dr. Drang’s script is also an interesting starting point for much deeper customization. But I’d like to point out what may be an even better option.

Template Extension

The Template extension for Chrome is a highly customizable utility for extracting data from a web page to the clipboard in a single action.

The key feature is Template’s built-in templating language the enables you to create custom actions that can extract just about anything directly associated with a web page or browser: page URL and title text, meta information in the page, links for all current tabs in the browser and a whole lot more. Check out the Guide for details about all of the template tags and operations you can use.

You can execute any of the templates set up in the extension via a toolbar menu, a right-click context menu or, optionally, a user configurable, template-specific keyboard shortcut.

I’ve only touched the surface of what Template can do, but it hugely simplified many aspects of my work as a technical writer, particularly when it comes to capturing research notes or sharing links. Template has become one of those must-have, first install tools, alongside Alfred, Sublime Text 3 and TextExpander.

I’ll give you a few examples of Template in action just to give you an idea of what’s possible.

Using Template

The simplest template I use regularly just grabs the title of a web page and the URL, something I might grab to paste into an email or Tweet. The template tags are simply {title} {url} and it returns simple strings like so:

Bash $PS1 Generator 2.0 https://www.kirsle.net/wizards/ps1.html

A similar one creates a simple Markdown link using the [{title}]({url}) tags. The results look like this:

[Bash $PS1 Generator 2.0](https://www.kirsle.net/wizards/ps1.html)

Template includes a built-in {selectionMarkdown} tag that takes any text you’ve selected from the page and does some simple Markdown conversion of elements such as links, emphasis, strong and so on. Here’s an example:

Still, [as Marvin and Tammi say](https://www.youtube.com/watch?v=svAs-6MiqxE&feature=kp), ain't nothing like the real thing, baby.

I haven’t tested this extensively to see what breaks the encoding, but it meets my limited expectations.

There’s also a {selection} tag that just grabs the selected text. I use this, along with the title, URL and a blockquote prefix, for research notes with an attribution.

> {selection} From: [{title}]({url})

So I just select some text, invoke the Template action, then paste:

This works, but… blech. There’s a better way. From: Quicker Markdown linking with TextExpander - All this

There are some limitations here.

First, it requires Chrome. That’s fine for me, but you may prefer another browser. (I keep Firefox around just for those moments when I need TableTools2, the Firefox extension that Sorts, Searches, Summarizes, Filters, Copies, Charts, Rearranges, Combines and Compares HTML Tables!)

Second, it requires going to the browser tab I want to copy from, which is a context switch specifically avoided by Dr. Drang’s script. I find this an acceptable compromise — generally I’m already looking at the tab when I want to grab a link or other data from it, then switching over to the editor in which I want to use the results. Your mileage may vary.

I’ve used all of, what… four of the built-in tags here, and none of the available operators. There’s just a ton of potential in Template. It’s in no way a replacement for TextExpander, but it is another incredibly handy arrow in the quiver.

And now that I think about it, some pretty interesting things could be done with Template and TextExpander together to extract elements of a page, place them on the clipboard, then paste them with additional formatting or cursor placement via a snippet and some script. Hmmm....

Updating the Reading List

Quick note to mention that I’m updating my Reading List page from using Amazon affiliate links to instead linking up reviews or other relevant discussion.

Two reasons for this:

First, I’m a proponent of supporting local, independent booksellers and I feel that directing readers to Amazon undermines that.

Second, the Amazon links were a convenient way to direct readers to book summaries and reviews. The affiliate links were a “bonus,” but one that never actually paid off. So why bother? There are other sources of more useful reviews. (For example, check out the 1937 review of The Hobbit by C.S. Lewis!)

Replacing older links will be an ongoing project, so check back in occasionally for new book recommendations as well as new review links.

Happy reading!

Teaching Programming with Human Functions

Today, in my RubyStory class, I attempted to introduce the kids to Ruby functions. I won’t go so far as to say it was a disaster, but it didn’t go particularly well. They just didn’t get it.

OK. Functions are a pretty big concept for a new programmer to grasp.

I also made a major mistake: too much talking, not enough coding. The kids are much happier and seem to understand better when actually writing code, making things happen and experimenting on their own.

I did experiment with a different kind of example, however, and it seemed to bring some fun and understanding: “human functions.” Basically, the kids became functions and we interactively ran the program by talking to each other. Here’s how it worked.

First, I took one of the students, Sophie, aside and gave her some secret instructions: “Take the word you’re given and use it in a sentence.”

Then, one of the other students would “call” her with a word: “Sophie: donuts.” Sophie would respond “I love to eat donuts.”

We had some fun with it, as 10 year old kids will, and changed up the examples a bit. As I explained, this pretty much equates to the following code.

def sophie(word)
    puts "I love to eat " + word
end

sophie("donuts")

This seemed to help the kids understand a lot better. I think next class we’ll start out with more exercises like this before moving to the code. We could get multiple human functions involved to demonstrate how functions generalize tasks within a program.

For example, here’s a simplified version of our storytelling program.

def prompt(choice1, choice2)
    print "Which do you choose (%s or %s): " % [choice_1, choice_2]
    answer = gets.chomp
    return answer
end

def story
    puts "A zombie appears. Do you run or fight?"
    action = prompt("run", "fight")

    if action == "run"
        puts "Chicken! Bawk bawk bawk!"
    elsif action == "fight"
        winorlose
    end
end

def winorlose
    puts "Rolling the dice..."
    diceroll = 1 + rand(6)

    if diceroll > 3
        puts "Yay! You win!"
    else
        puts "Sorry, you lose."
    end
end

My human functions can run this program.

  1. Kendall starts the story, and passes the the prompt to Arden.
  2. Arden asks Teddy the question and returns his answer to Kendall.
  3. Kendall either ends the story (“run”) or calls Sophie (“fight”).
  4. Sophie rolls a die and, depending on the roll, tells Teddy whether he won or lost.

We’ll have to see how it works. Looks like I’ve got a bit of writing and scheming to do before the next lesson.

View all of the posts in the archive, browse the tags, or subscribe to the feed for All Posts.