Ren Provey

Cloud Coding

2011-12-07T00:00:00-08:00

Cloud Coding

After reading Mark O'Connor's post about swapping his MacBook for an iPad+Linode, I decided to give the setup a whirl. For reasons that probably defy logic (what can I say, I'm a slave to fashion), I substituted Panic's Prompt for the recommended iSSH and have yet to feel any pain from the decision.

Mark covers a lot of the setup for a Linode server in his follow-up post. For now, I am just SSHing to my home machine via no-ip.com, and the only real fiddly bit that I needed to add was the following in my vimrc:


    if has('gui_running')

        set background=light

    else

        let g:solarized_termcolors=256

        set background=dark

    endif

The key thing here is to force solarized to use the let g:solarized_termcolors=256 even if vim is running in a terminal. Panic's Prompt by default will register itself as a 16 color terminal, to get 256 colors working (and the beautiful Solarized color scheme), I added export TERM=xterm-256color to the login script which can be configured in Prompt's individual machine settings.

We'll see how the setup works out, for now it is nice to just be traveling around with only an iPad.

December 07 2011

IDEO HCD Toolkit: Deliver

2011-11-17T00:00:00-08:00

IDEO HCD Toolkit: Deliver

While reading the HCD Toolkit, I've noticed that each section is roughly the same size. Don't get me wrong, each section has been a small wonder-world of information, but I couldn't help wonder if the Deliver section had been hardest of all to trim down. It covers a lot of ground and not a word was wasted. To summarize it would be to re-write it, but the pieces of the section which really resonated with me were:

Mini-Pilots & Pilots - These seek to allow understand and refine the solution, its context, and support system as well as possible. I especially liked the idea of mini-pilots that focused on a subset of the solution and/or allowed participants a deeper understanding by taking them out of their traditional roles.
On-going Learning & Iteration - This is something that I think is so often missed, or haphazardly bolted on at the end of a implementation. This involves revisiting stories from the Hear phase as well as collecting new ones while continually refining the solution. Page 97 of the IDEO Toolkit
Measuring Impact - The toolkit does a great job of diving in to indicators like leading and dynamic changes (both positive and negative), assessing outcomes, and strategies for measuring the impact of a solution in a holistic fashion.

As you can tell, I am a big fan of the upfront work and the continual learning presented. I think companies all too often equate a customer's final product with their final product. A great product doesn't end with ending up in the customer's hands. Putting a product in a customers hands is an opportunity to learn more about the product, evolve the product (see the product lines here), and recognize the new opportunities a strong product creates.

November 17 2011

Scared.

2011-11-01T00:00:00-07:00

I'm scared. You're scared. We're all scared.

Listen to the whole thing, but know that (I felt) it was around the 15 minute mark Merlin hit stride. Given at Webstock 11.

November 01 2011

IDEO HCD Toolkit: Create

2011-10-31T00:00:00-07:00

IDEO HCD Toolkit: Create

While I can't do the toolkit justice in my notes, I fount the Create section to be a real gem. The goal of the Create phase is to synthesize the research of the Hear phase, identify opportunities, brainstorm solutions, and create prototypes with the purpose of eliciting feedback. Through the create process, don't focus on feasibility and viability, instead focus on desirability.

Story Sharing - These are stories collected from in the Research phase. When sharing, remember to be specific and be descriptive (use physical senses, cover who, what, why, when, where, and how). No judgement. Create post-it notes of key pieces of information.
Pattern Identification - Select the most surprising and provocative post-it notes, grouping them into related thoughts. Create a succinct "insight statements" for each post-it group which summarizes the take-away.
Find Themes - Sort the insight statement cards in to themes and evaluating each to make sure they are on the same level. Some themes may need to be generalized, while others may need to broken apart.
Create a Visual Framework - A framework is a visual representation of a system, often a framework will take one of the following structures:
Page 70 of the IDEO Toolkit
Create opportunity areas - Ask the question "How might we..." (HMW) - Opportunity areas are not solutions, but questions to spur idea generation and the brainstorm of multiple solutions.
Brainstorm! - Brainstorming makes us think expansively and without constraints, so there are no bad ideas and wild ideas are encouraged. Build on ideas using AND rather than BUT. Go for quantity, 15-30 minutes per HMW. The practice of generating impractical solutions often sparks ideas that are relevant and reasonable. The toolkit provides a rough rule of thumb, that out of 100 ideas 3 may be truly useful.
Prototype - Make solutions tangible in a rapid and low-investment way. Prototypes are disposable, they should be built as roughly and as rapidly as possible.
Feedback - Feedback brings constituents directly back in to the design process. Presenting multiple prototypes/ideas allows people to easily give honest feedback via comparing and contrasting. For each prototype identify 3-4 questions you'd like to answer.

October 31 2011

IDEO HCD Toolkit: Hear

2011-10-17T00:00:00-07:00

IDEO HCD Toolkit: Hear

As the toolkit is meant to, the Hear section is very focused on working with folks in under resourced areas of the world, but I found a few principles which are easily extended to a process working with a broader group. The goal of the Hear phase is to gain a strong understanding of an audience's needs, barriers, and constraints.

Engage in context - While this section is called Hear, context is the reoccuring theme. The way a person presents a narrative, can differ from actual observation, especially when a person is learning a new skill or process. So, hear with all five senses, and hear in the actual environment a person will be operating in.
Be qualitative - Seek a broad understanding. Work to understand a person's social, political, economic, and cultural oppertunities as well as barriers. Analyze the relational dynamics in a system (eg., people, places, objects, and institiutions).
Testing - This is the chance to validate assumptions and preconceptions, be very intentional about letting any through without verfiying them.
Framing - Challenges and statements should all be framed from constituents point of view.
Inspiration - Look for inspiration in new places, search for similar problems in different contexts. The concept seems so incredibly straight forward, but rarely to I take the time to intentionally think about parallels of a design problem. The toolkit gives the example of hospital staff visiting a hardware store to gain insight about organizing supplies.

The toolkit goes in to excellent detail on how to identifying a challenge, recognizing existing knowledge, research, interview, immerse, and document.

October 17 2011

IDEO HCD Toolkit: Introduction

2011-10-12T00:00:00-07:00

IDEO HCD Toolkit: Introduction

The toolkit was funded by the Bill & Melinda Gates Foundation, targeting organizations that work in Africa, Asia, and Latin America. I am not going to lie, while traveling to Asia would be wonderful, I am reading the toolkit hoping to draw out some more general lessons of the human centered design process.

The Three Lenses of Human Centered Design

The HCD process examines starts with the people being designed for, examining thier needs, dreams, and behaviors. The process steps through the following 'lenses':

Desirability - What do people desire?
eg. Rocket pants, space cars, unicorns, and sporks. To be desired something dosen't necessarily have to be feasible, which brings us to...
Feasibility - What is technically and organizationally feasible?
And now we have to cross rocket pants, space cars, and unicorns off the list, leaving us to examinine the viability of sporks.
Viability - What can be financially viable?
So, I am assuming the spork business is pretty competative and covered by many interenational patents and we're back to the drawing board.

In summation:

Page 6 of the IDEO Toolkit October 12 2011

Murray's Law for Success

2011-10-07T00:00:00-07:00

HBR: Murray's Law for Success on Your Terms

There are three critical ideas within Murray's two sentences:

Are you positioning yourself so that one day, you do not have to work?

When you no longer have a financial need to work in the role you occupy, would you still continue to occupy that role?

Do you define your own standards of career excellence?

There are three phases in a professional life:

Learning the "Game."

Winning the "Game."

Defining the "Game."

Where are you? Where do you want to be?

More at HBR's Murray's Law For Success.

I'll keep the cheap and preachy to a minimum the next few weeks, but wanted to record this.

October 07 2011

Hola 960.gs

2011-03-06T00:00:00-08:00

Hola 960.gs

"The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design layouts, and a CSS file that have identical measurements." - http://960.gs/

What the hey? Sounds good enough to me, lets give it a whirl. Since this site is heavily gridded, I decided to convert it.

For starters I added the following a wrapping div <div class="container_12">, you could go with 16 column grid: <div class="container_16"> and was in business.

Basically, moving items about the grid, is dead simple, above is my introduction:
<h1 class="grid_5 prefix_7 clearfix">Hello, my name is ... and technology.</h1>.

The class grid_5 places the element across 5 elements of the grid. I added a class of prefix_7, which shifts the element to the right by 7 grid columns.

By using the grid, prefix suffix, classes you can position elements about the grid. The last bit to remember is that if a continer has a grid within it, attach a class of alpha and omega to the last.

March 06 2011

HTML5 Form Fun

2010-11-20T00:00:00-08:00

HTML5 Form Fun

There is a lot of fun to be had here, but I am just going to cover the stuff that is relevant now.

Placeholder Attribute

One of the wonderful ways that HTML5 makes life easier is adding the placeholder attribute to input and textarea fields:

<input type="text" placeholder="sender@example.com" />
<textarea placeholder="Email body" ></textarea>

Required Attribute

While browsers don't actually respect this, this is a handy semantic way to hook in for your own javascript validation. Like many attributes if the required exists it is considered to be true, if not false.

<input type="text" placeholder="sender@example.com" required />
<textarea placeholder="Email body" required ></textarea>

Autofocus Attribute

You could use this, but honestly really? It either doesn't help or confuses regular users, and pisses off your power users. Trust me, your site search probably sucks.

Type Attribute

Finally the type attribute gets a little loving, and how exciting that is:

<input type="text" placeholder="text type">

<input type="search" placeholder="search type">

<input type="email" placeholder="email type">

<input type="url" placeholder="url type">

<input type="tel" placeholder="tel type">

These may not look different in a desktop browser, but by specifying the proper types, phones will change their keyboard styles to make input easy for the user.

November 20 2010

AV Club — HTML5's New Audio and Video Tags

2010-10-19T00:00:00-07:00

AV Club — HTML5's New Audio and Video Tags

They have been a long time coming, but HTML5 will finally introduce native, standardized playback with all the accompanying JavaScript support.

HTML5 Audio Tag

<audio src="happyhappyjoyjoy.mp3" controls></audio> — Like many HTML5 tag attributes, by simply being there, controls is true. Something like controls="false" would still display controls (we're looking at if the attribute exists, not what it is set to). If you don't want them, just leave controls out.

The preload attribute can be set to one of the following:

none — don't preload until specifically asked,
auto — preload as much as possible,
or metadata — (default) load metadata and first frame of video.

Other attributes are autoplay and loop. For obvious reasons, never tell anyone that either of those exist.

<audio> also has a long form for specifying fallbacks when an audio format is not supported:

<audio controls preload="none">

    <source src="happyhappyjoyjoy.mp3">

    <source src="happyhappyjoyjoy.ogg">

  </audio>

At this point in the discussion, HTML5 For Web Designers author, Jeremy Keith, has a cheeky little bit about OGG not being "crippled" by software patents, so I'll add a cheeky little link here. Good luck finding the comments section!

HTML5 Video Tag

Video is very similar with a few extra helpful attributes:
<video src="happyhappyjoyjoy.mp4" controls width="300" height="200" poster="placeholder.png"></video> — all those should be self explanatory, poster is what allows you to specify a placeholder image.

In long form to allow specification of fallbacks:

<video controls width="300" height="200" poster="placeholder.png">

    <source src="happyhappyjoyjoy.mp3">

    <source src="happyhappyjoyjoy.ogg">

  </video>

October 19 2010

Heroku Pro Tip

2010-10-14T00:00:00-07:00

Heroku Pro Tip #1

We interrupt your regularly scheduled programming to bring you this Heroku Pro Tip. If you're getting errors caused by Heroku installing your dev or test groups from bundler, run: heroku config:add BUNDLE_WITHOUT="test development" --app app_name

October 14 2010

HTML5 head

2010-10-13T00:00:00-07:00

HTML5 head

Short and sweet:

Remember that old doctype? <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" OMG this/goes //ON//FOREVER//EN> is now simply: <!DOCTYPE html>
HTML5 allows you to drop the type="text/css" from your CSS tags: <link rel="stylesheet" href="/stylesheets/master.css">
Same goes for the type="text/javascript" in your script tag. The HTML5-ized version would simply be: <script src="javascripts/modernizr-1.5.min.js"></script>

All of those are good to use now, so with all the time you just saved, I think you can treat yourself to a little WHAM...

October 13 2010

Hello HTML5

2010-10-12T00:00:00-07:00

Hello HTML5

To get ready for writing today's post, I polished up this blog's source code. If you're like me, you're probably looking to jump into code as soon as possible. To that end, head over to Paul Irish's excellent HTML5 Boilerplate, download the commented template and start reading through while building.

Resources I'll Be Using

HTML5 For Web Designers - it is small and fast, gets the job done for your markup.
HTML5 Doctor - a great reference, exampled, and explained.

I'll try to keep this list updated as I find other useful resources. For now have fun with HTML5 Boilerplate.

October 12 2010

Git Odds and Ends

2010-07-13T00:00:00-07:00

Git Odds and Ends

$ git gc — Internally optimizes the way Git stores its history, the --aggressive parameter takes things one step further by recalculating the deltas from scratch.
$ git archive --format=<zip or tar> --prefix=<prefix>/ HEAD > filename.zip — Valid format types are tar and zip.
$ git archive --format=tar --prefix=<prefix>/ <HEAD, commit hash, branch, or tag> | gzip > filename.tar.gz — Pipe into gzip

July 13 2010

Git Submodules

2010-07-12T00:00:00-07:00

Git Submodule

$ git submodule — List your submodules, a - before the hash indicates the submodule is not initialized
$ git submodule add <git repository> <target directory> — Let your project know about the submodule and where it will go
$ git submodule init <target directory> — Initialize the submodule (this will add an entry to your .git/config file)
$ git submodule update <target directory> — Pull in the contents of the submodule. This command is destructive.

The trick here is that a Git Submodule only tracks the revision from when it was added, not the latest version of whatever that submodule contains. To update a submodule:

$ cd <target directory>
$ git checkout HEAD — The can be any revision, not necessarily HEAD.
$ git add <target directory>
$ git commit -m "UPDATED: Submodule..."

July 12 2010

Git Rebase

2010-07-08T00:00:00-07:00

Git Rebase

$ git rebase -i HEAD~5 — Interactive rebase of the last 5 commits. The sweet thing here is you can clean up a commit history. You can also pass in a tag or hash range.
$ git rebase --continue — If you have to drop out of the rebase to resolve a conflict, after you add the merged file(s), this is how to start it up again.
$ git rebase --abort — Forget this.

July 08 2010

Git Blame

2010-06-24T00:00:00-07:00

Git Blame

$ git blame -L start_line,end_line file —
$ git blame -L start_line,+5 file — you can specify prev / more lines
$ git blame -L "/regex/",+5 file — you can use regex, you can optionally pass in a commit hash id before the file name

Git Revert

$ git revert — rolls back the previous commit, committing immediately
$ git revert -n HEAD — roll back without committing
$ git blame -L "/regex/",+5 file — you can use regex, you can optionally pass in a commit hash id before the file name

June 24 2010

Getting Started with Jekyll

2010-06-23T00:00:00-07:00

Getting Started with Jekyll

In rebuilding this site I made the move to Jekyll, an excellent static site generator. Everything went swimmingly when I found what I was looking for, but the finding seemed a bit more difficult than I expected. Maybe I missed a key resource, but I'll outline what I did to hopefully save someone a bit of time. You can also browse this site's repository and others for more examples.

Getting Started

A few things to note, Jekyll gives the following special consideration:

_config.yml — file, stores site settings, you can see mine here, and all options in the wiki.
_site — by default this is where Jekyll generates the static version of the site, you can override this in the _config.yml
_posts — directory, where Jekyll looks here for blog posts
_layouts — directory, contains your layout files.
{{content}} tag in the layout is where the main body of content from your individual pages will be inserted.

Page Settings

At the top of each page you'll see the bits of information Jekyll uses when constructing the site, here is a sample for one of my blog posts:


  ---

  layout: default

  title: Git

  categories: jekyll

  published: true

  ---

These should be self explanatory, but lets run through them real quick:

layout should correspond to a file in _layouts and is required for any file that is going to be generated using a template,
title blog post title,
categories blog post categories,
published a boolean, regarding weather to publish the post.

You can also add custom attributes here, which you can call from the template using {{page.attribute_name}}

Iterating Over Posts

In my index.html file, I have:


    {% for post in site.posts limit:5 %}

    {{ post.content }}

    {% endfor %}

You can add more advanced options in the wiki. See the Pagination along with the Post sections for respective information.

Setting Your Permalink Style

You'll on the bottom of each of my post pages, you'll notice a call to {post.url}. This is generated form a combination of two factors. Jekyll can parse the date of the post from its file name, you'll notice anything in my _posts directory is named in the DD-MM-YYYY-post_title.html format. In my _config.yml file you'll see a line similar to:
permalink: /blog/:year/:month/:day/:title

Jekyll will parse this information out of the filename when creating the permalinks and blog directory.

Other Resources:

June 23 2010

Git Log

2010-06-22T00:00:00-07:00

Git Log

$ git log --since="5 hours" — commits in the last 5 hours
$ git log --before="5 hours" — without commits from the last 5 hours
$ git log <commit marker>..<commit marker> — log for a commit range
$ git log <commit marker>^ — a caret acts like a minus one, you can use multiple carets.
$ git log <commit marker>~2 — two revisions prior to what the hash or tag specifies.
$ git log --pretty=oneline <commit marker>..<commit marker> — a nice way to tighten up the log output.

June 22 2010

Git Diff

2010-06-21T00:00:00-07:00

Git Diff

$ git diff — working tree v. staging area
$ git diff --cached — staging area v. repo
$ git diff HEAD — tree, staging area v. HEAD

$ git diff --stat <commit marker> <commit marker> — Amount of code that has been changed since a tag or hash.

June 21 2010

Ignore Files in Git

2010-06-20T00:00:00-07:00

Ignoring Files in Git

.gitignore — repo level ignore.
<repo>/.git/info/exclude — local ignore.

June 20 2010

Git Branches

2010-06-19T00:00:00-07:00

Git Branches

git checkout -b <new branch> — create and switch to.
git branch -m <current branch> <new branch> — move branch.
git branch -d <branch> — delete branch.
June 19 2010