Blokking In Your Designs

Blokk font preview

Consider using Blokk in your mockups

Recently a friend suggested I check out a font called Blokk. Blokk is aptly named, as it’s just a typeface of squares—if you’ve ever worked with somebody who was confused by Lorem Ipsum, the idea goes, replacing letter forms (and their loaded meanings) with a font like Blokk might help viewers focus on the design of the page and not just the content.

At this point most good designers I know do a lot of their work directly in the browser. I wouldn’t use Blokk while building a prototype, necessarily, but it could help to be able to quickly switch into Blokk when taking screenshots for client reviews. We made a quick bookmarklet for our designers to do just that:

  1. Download Blokk and install it on your computer
  2. Drag this link into your browser toolbar: BlokkIt
  3. Click the link to convert the active webpage to Blokk

To remove the font again, just reload the page. The un-minified code’s available in this gist.

I’m Speaking at WordCamp Providence!

Towards the end of August, Underscore.js and Backbone.js were added into WordPress core in preparation for release 3.5 (trac changeset link). Having these two libraries available by default is a powerful step forward for JavaScript development within WordPress, but many beginners are unaware of or intimidated by these newcomers. I am pleased to announce that I’ve been accepted to speak on October 27th at WordCamp Providence, where I will be giving an overview of how these new tools differ from jQuery and how the three libraries can be used in concert to build more robust front-end code in your plugins, themes and web applications.

See the talk description on the WordCamp Providence website!

How we can have Nice Things: my slides from WordCamp Boston 2012

I delivered a talk this morning at WordCamp Boston 2012 on how to find ways to fit web development tools into your workflow—you can find the slides online at http://talks.kadamwhite.com/wcbos12/.

The genesis of this talk was a conversation in which some friends expressed frustration at hearing about not being able to use “cool” front-end technologies with WordPress. It is true that WordPress and its LAMP stack are “old fashioned” compared to, say, a CouchApp, but for example you can make Node.js work for you by running your build process with something like Grunt.js even if you don’t incorporate Node into any part of your public-facing web stack. The best tools are flexible, and I use stylesheet pre-processors (with demos in LESS) to show how you can slot a tool into several different aspects of your workflow.

Tools that help us make website are invaluable for keeping up our speed and productivity as developers, and playing with the “latest and greatest” helps us stay excited about what we do and engaged with the community at large. We’ve gotten good at making advanced sites for our clients—we deserve to have some cool toys ourselves now and again.

For all who attended, I hope you found the talk useful! I have added two pages of links to unit testing and style guide resources at the end of the talk for those who wanted some further reading. For additional resources for workflow and developer tools—far, far more resources than you could shake a stick at—check out Aaron Jorbin’s slides from “Developing an Automated Workflow,” also presented today at WordCamp Boston 2012.

wget in Git Bash

The msys shell that comes with a Windows install of Git has curl, which is an awesome little utility, but sometimes you want access to wget. The MinGW project on SourceForge has a build of wget ported to work with MinGW/MSys: download this archive, create a folder called /bin in your home directory, and extract wget.exe to that /bin folder. Since ~/bin should be in your MSys PATH (at least it was for me), this should let you run wget from any directory when using Git Bash.

Credit to trasana.org’s page on creating a build environment for pointing me in the right direction

The best of both worlds: A lightweight, sexy Bash shell on Windows

To be honest, I really like working in Windows 7. It’s fast, it’s stable (for me at least), I love the window arrangement hotkeys, and it’s hardly lacking for software support. Unfortunately, the default command prompt stinks; I feel most comfortable in a UNIX environment, so this article describes how to soup up the bash prompt installed as part of msysgit (Git for Windows). (Let me start by saying that to the best of my knowledge, Windows Power Shell has actually gotten pretty damn capable; several of my coworkers use it to do exactly what I’m going to describe below, and it definitely integrates well into the greater Windows infrastructure. I don’t know, YMMV.)

tl;dr:: download Ben Alman’s Bash prompt script to your home folder, then add a line to your .bashrc for your msys shell to source that file.

Screen capture of Git Bash within the Windows context menu

When you install Git for Windows, you get a pretty handy little application called “Git Bash” added to your context menu. This is a lightweight bash shell, provided as part of the MSys build environment. It’s not cygwin, but if you’re like me that’s just the point: I don’t need 99% of what cygwin provides, and Git’s Bash prompt loads quickly, runs fast, and integrates seamlessly with the Windows file structure: $ cd /c/Users/KAdam/Desktop takes me right to my desktop, without any of cygwin’s directory aliasing weirdness. I get ls, less, find, curl, ssh and more, and it even has a basic version of vim. Most usefully, however, MSys Bash lets me use some basic dotfiles.

In the UNIX world, dotfile refers to any file whose filename starts with a period (the “dot”). These are hidden files on UNIX-based systems, and are frequently used for configuration or utility files. For example, a .bashrc file in your user directory (/c/Users/yourAccount/ on Windows) will let you specify custom command-line aliases, preferences and utilities for your user account’s Bash shell without impacting any global settings. Any developer likes to customize their environment, and dotfiles give you tremendous freedom to configure applications to your personal preferences. You can get pretty tricky with these.

Regarding the iOS 5.1 Lock Screen

Apple’s iOS 5.1 software update for iPhones makes the camera icon appear persistently on the lock screen. Previously the camera could be launched by tapping on the camera icon; after 5.1, you now have to swipe the icon to launch the app. When you try to tap on the camera icon now, the screen bounces slightly to indicate you must swipe upwards instead.

I know this was to prevent the camera from triggering as you carry the phone around in your pocket, but it’s just not very affordant. On a dark background you can barely see the subtle lines around the camera icon that indicate dragability in iOS, and the screen-bounce seems like a clumsy solution to the problem. Since 5.1 came out I’ve seen people on the street try repeatedly tapping the icon before they understood what they had to do—call me crazy, but maybe it’d have been better to go with a double-tap on the icon instead? I’d willingly take the hit of a few photos of the inside of my pocket in exchange for a button-like icon that actually acts like a button.

OK, </grump>. That concludes this week’s episode of end-of-weekend blues manifesting themselves through UX criticism.

TEDxSomerville: “Ideas Worth Spreading”

Independently-organized TEDx conferences serve as locally-franchised versions of the greater TED experience, providing the consistent TED branding and format on a local scale. I had the opportunity to spend a day earlier this month at TEDxSomerville, which ran all day long on the 4th at Arts at the Armory here in town. TED’s tagline is “ideas worth spreading”—I won’t talk much about the Ideas part here, but I’d like to dig into the ways we spread them.

“Mixed Up” on Snip.It

Around New Year’s, I talked a bit about writing up interesting cocktail recipes in a blog. If it’s not obvious I’m not exactly the world’s best blogger, so let’s try Snip.It. A bookmarklet-based collection should be maintainable, and if anything warrants a write-up that I can’t find on another blog, Mixed Up articles might just cross over into this space. If you’re one of the people who expressed interest in reading my thoughts on mixed drinks, give it a follow:

“Mixed Up” cocktail recipes collection on Snip.It

Bypass the WordPress password form by using the_password_form

Last month, I found Kieran Lane’s blog post on bypassing the WordPress password-protected post form while researching how to allow a client to skip the password form via a URL parameter. Kieran’s solution required editing a WordPress core file, and at the time neither of us had found a less brittle way to solve the problem. Fortunately, it is possible to do just this by using WordPress’s the_password_form filter:

function bypass_password_form( $output ) {
  // Check for a hash of the password
  // exactly as in Kieran's example
  if ( $_GET['pwd'] == md5( $post->post_password ) ) {
    return apply_filters(
      'the_content',
      get_page( get_the_ID() )->post_content
    );
  }
  // Or return the output as normal
  return $output;
}
add_filter('the_password_form','bypass_password_form');

They are not well documented, but there is almost always a way to do something in WordPress using filters—it can just take a few weeks of digging to find the right one! If you are managing your own site, modifying the core files may be fine, but I encourage any WordPress contractors or developers to research and share ways they have found to avoid customizing the core. Having this kind of functionality in a plugin or your theme’s functions.php will make for fewer headaches for clients when they need to upgrade ;)

Stepping Into Custom Post Types

My slides for today’s presentation have been uploaded to Slideshare! I will post a link to the video when it is available.

UPDATE 9/11/11: The video of my post types talk is now online! My sincere thanks to Kurt Eng for all the effort WordCamp Boston put into filming these talks.