Category Web Development

Entries 15 Total Description

What I actually do for a living

Blokking In Your Designs

Feb 6, ’13 11:12 AM
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.

Comments Off

I’m Speaking at WordCamp Providence!

Sep 27, ’12 5:55 AM

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!

Comments (2)

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

Jul 14, ’12 2:36 PM

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.

Comments (1)

wget in Git Bash

May 28, ’12 10:42 AM

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

Comments Off

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

May 22, ’12 10:20 AM

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.

Continue Reading… Comments (1)

Bypass the WordPress password form by using the_password_form

Jan 9, ’12 8:05 PM

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 ;)

Comments (2)

Stepping Into Custom Post Types

Jul 23, ’11 4:23 AM

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

Stepping Into Custom Post Types
View more presentations from kadamwhite

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.

Comments (1)

BostonIndies.com redesign launched!

Jul 18, ’11 8:22 AM
Boston Indies Logo

Boston Indies is a local game development group, founded by Scott Macmillan as an offshoot of the larger (and more corporate) Boston PostMortem meetup. I’ve been proud to be associated with the Indies group, and was excited when Darren Torpey asked if I would be available to help them with a site design. Managing editor Jonathan Myers has brought in a lot of good content to the site so my design was pitched to take a backseat to the articles themselves, giving just enough structure and consistency to let the content shine. Check out the new, cleaner look of Boston Indies here.

Comments Off

Parallax & CSS3

Jan 8, ’11 2:19 PM

I’m spending the bulk of this weekend at the HTML5 Tools Jam organized by my friends Darren & Darius of Boston Game Jams. I am working towards adding parallaxing background support to the ALES level editor for the Akihabara HTML5 game engine. I have the benefit of direct access to the creators of ALES, the aforementioned Darren Torpey & Darius Kazemi, but my first goal didn’t even involve Akihabara: I just wanted to see if there was a way to use CSS3′s support for multiple backgrounds to create a parallax effect within a div. As you can see above (if you’re using Chrome, Safari or Opera), it does!

The above div contains two .png background images with a repeat-x property specified. Just as you define multiple backgrounds through comma-separated url() statements, so can you change the position of all background images within a div by using JavaScript to pass comma-separated background positions. In this case I’m using setInterval to quickly create a continuous animation:

setInterval(function() {
    pos1+=4;
    pos2+=1;
    $('#css3parallaxdemo').animate({
      'background-position': pos1+'% bottom,'+pos2+'% bottom'
    },20, 'linear');
}, 20);

The easy part done, I am looking forward to diving into ALES. It’s doubtful I will be able to get full two-dimensional parallax motion ready by the end of the weekend due to other commitments, but many other people here are also working on ALES and I’m looking forward to seeing where the platform goes. (I recommend taking a look at Ryan Kahn’s Akihabara plugins system as an example of awesome recent developments.)

Comments Off

This talk is about Content

Oct 25, ’10 9:08 PM

At the Boston WordPress Meetup this evening, I saw a presentation by Chris Brogan on “The Power of Content.” While everything he said was definitely true—the normal internet user has developed a microscopic web-browsing attention span thanks to twitter, top 10 (and even moreso top 9) lists draw visitors and inspire discussion in your comments, and so on—the presentation left a bad taste in my mouth.

It wasn’t a presentation about the power of content: it was a presentation about how to present and ration information to drive traffic. These things matter, but they have little to do with the underlying content. This is what rankles me, the gap between what I had expected from the talk and what was being presented. I’d gone in expecting a presentation about honing the content you produce, and instead I was reminded of all of the trollish presentation tricks and vacuous social media positioning people use to make up for lack of remarkable content.

“Remarkable” content is an idea I’ve borrowed from my friends at Dejobaan Games, who use it to refer to the way they spread buzz for their games. In short: if you make something worth talking about, people will talk. This kind of “if you build it” approach may not generate the volume of traffic a top 10 list would, but the visitors you do get are more invested in your content when you have earned their attention. This is what I care about. With all due respect to Mr Brogan (and the amount of traffic he maintains speaks for itself!), his definition of ‘content’ has about as much applicability to what I do as these social media strategies.*

All that aside, thanks again to Kurt and James from Boston WP for yet another successful meetup, and see you all at Design Camp Boston!

* (marginally NSFW, for language)

Comments Off