http://nathanherald.com nathanherald.com nathanherald.com en-us 2010-08-28T07:55:16-07:00 http://nathanherald.com/2010/08/http-www-youtube-com-watch-v-zgt3-fxovug-feature-player_embedded http://nathanherald.com/2010/08/http-www-youtube-com-watch-v-zgt3-fxovug-feature-player_embedded http://www.youtube.com/watch?v=zGt3-fxOvug&feature=player_embedded

http://www.youtube.com/watch?v=zGt3-fxOvug&feature=player_embedded

]]>
2010-08-25T07:26:43-07:00 http://nathanherald.com/2010/08/inception-explained-to-mac-users http://nathanherald.com/2010/08/inception-explained-to-mac-users Inception Explained to Mac Users Inception Explained to Mac Users ]]> 2010-08-25T05:06:15-07:00 http://nathanherald.com/2010/08/it-s-time-to-buy-new-shoes http://nathanherald.com/2010/08/it-s-time-to-buy-new-shoes It's time to buy new shoes It's time to buy new shoes

My current New Balance 574's from 2003 are in really bad shape. I think it's time to replace them. These are the models that are in the running:

Adidas Han Solo

NikeFree

New Blanance 574

]]>
2010-08-24T19:52:19-07:00 http://nathanherald.com/2010/08/hungoverowls-tumblr-com http://nathanherald.com/2010/08/hungoverowls-tumblr-com hungoverowls.tumblr.com hungoverowls.tumblr.com ]]> 2010-08-04T11:25:07-07:00 http://nathanherald.com/2010/08/daypack-ia-part-1 http://nathanherald.com/2010/08/daypack-ia-part-1 Daypack - IA part 1 Daypack - IA part 1

Organizing an app for fast access to all it's features and information is so important, yet often overlooked or skipped. With Daypack, I want to make sure that it's easy to get from any one place to any other place - not just by limiting the number of taps, but also by avoiding any confusion.

Luckily, Basecamp is a well organized application.

This can even be seen in how ActiveRecord works with Rails (if you are familiar with it). Rails was definitely made to make Basecamp.

Relations

In Basecamp, there are a number of key objects to keep track of, all of which relate to each other in a number of ways. In database lingo, one might say that an Account has many Projects which in turn has many Messages. Thinking this way, one could arrive at a tree structure to show what belongs to what:

  • Accounts
    • People (1)
    • Projects
      • Messages
      • To-Dos
      • Milestones
      • Writeboards
      • Files
      • Time Tracking
      • People (2)

This is all very straight forward except for the fact that People show up twice. Since a Person can be related to more than one project, there is a list of all people across all projects and then just people in a certain project.

There is also the possibility of an overview or activity feed for the entire account as well as each project, which could be useful to see recent changes and posts and the like. Also, some users will actually be logging into multiple accounts, so it should be easy to switch from one account to another.

iPhone

In the iOS SDK there are Navigation Controllers. These are simply just a way to represent a list of things that might link to another list of things - which sounds perfect for this type of problem.

This is actually the exact problem the iPhone solves beautifully: drilling down into content through a hierarchy.

Using our tree hierarchy from before, one could navigate to a specific message by:

  • Choose Account, see Projects ->
  • Choose Project ->
  • Choose Messages List ->
  • Choose Message ->

Not bad and pretty straight forward. If, later, they wanted to see a message in a different project, it might go:

  • Back to Messages List <-
  • Back to Project <-
  • Back to Account, see Projects <-
  • Choose another Project ->
  • Choose Message List ->
  • Choose Message ->

In a followup post, I will show some mockups and discuss data modeling in iOS.

]]>
2010-08-02T12:04:00-07:00 http://nathanherald.com/2010/08/data-attributes http://nathanherald.com/2010/08/data-attributes Data Attributes Data Attributes

HTML5 introduces a new, standard way to store data in your html source that is invisible to the end user. Here is an example:

<li><a href="#" data-id="1">One</a></li>
<li><a href="#" data-id="2">Two</a></li>
<li><a href="#" data-id="3">Three</a></li>

This is setup to link each list item with a record in a database, but you could create your own attribute for the max and min sizes of a cropped image, the username of the uploaded user, anything. It would just be <p data-user="nathan">Nathan Herald</p> and there you go.

It's easy to get to from Javascript and easy to write into the html for both a human and a computer. And it works in IE!

Please, use this now. No more abusing classes and id's to reference things that have nothing to do with the actual information's structure.

]]>
2010-07-30T09:20:52-07:00 http://nathanherald.com/2010/07/louis-c-k-everythings-amazing-and-nobodys http://nathanherald.com/2010/07/louis-c-k-everythings-amazing-and-nobodys http://log.maniacalrage.net/post/869103364/louis-c-k-everythings-amazing-and-nobodys

http://log.maniacalrage.net/post/869103364/louis-c-k-everythings-amazing-and-nobodys

]]>
2010-07-29T19:40:07-07:00 http://nathanherald.com/2010/07/future-of-self-service-banking http://nathanherald.com/2010/07/future-of-self-service-banking Future of Self Service Banking Future of Self Service Banking

Reinventing the ATM.

]]>
2010-07-29T11:14:49-07:00 http://nathanherald.com/2010/07/inception-infographic http://nathanherald.com/2010/07/inception-infographic http://farm5.static.flickr.com/4133/4841545208_548d340eb6.jpg

]]>
2010-07-28T12:30:26-07:00 http://nathanherald.com/2010/07/idea-daypack http://nathanherald.com/2010/07/idea-daypack Idea - Daypack Idea - Daypack

For a while now I have wanted to make iPhone apps. I have actually already created two, but they will not be released. They are not up to my standards, mostly because of API limitations or speed concerns.

However, there is one app that I think could be a great challenge while also being something I would use daily. The idea: an app for Basecamp.

Daypack would be everything one needs to access and deal with Basecamp while away from the computer.

There are already plenty of Basecamp iPhone apps out there now and all of them suck. Most are slow, unorganized, and just don't make using Basecamp easier than the regular website.

The two areas that I want to focus on are: speed and IA. If those two problems ever got solved (to some definition of solved), then I would focus on search, but that might never happen.

As I work on this idea in what little spare time I have, I want to post all my ideas, sketches, comps, and anything else on this blog. If it ever materializes as a real app then I will release it for sale in the store.

Over the next few days I will try to detail my current progress with the IA and my ideas to make it hecka fast.

If you're interested in helping or have any feedback or even want to tell me what a bad idea this is: always feel free to contact me.

]]>
2010-07-07T10:34:08-07:00 http://nathanherald.com/2010/07/grab-finder-window-script http://nathanherald.com/2010/07/grab-finder-window-script <p>I needed a quick way to grab the path from the front most finder window.</p> <pre><code>alias cf=copy_finder_window_path function copy_finder_window_path() { osascript <<END tell application "Finder" set the_folder to (the target of the front window) as alias set the_path to (get POSIX path of the_folder) set the clipboard to the_path as text end tell END } alias gf="cf && cd \`pbpaste\` && clear && pwd" </code></pre> I needed a quick way to grab the path from the front most finder window.

alias cf=copy_finder_window_path
function copy_finder_window_path() {
osascript <<END
tell application "Finder"
  set the_folder to (the target of the front window) as alias
  set the_path to (get POSIX path of the_folder)
  set the clipboard to the_path as text
end tell
END
}

alias gf="cf && cd \`pbpaste\` && clear && pwd"
]]>
2010-07-07T08:09:10-07:00 http://nathanherald.com/2010/07/the-helvetica-killer http://nathanherald.com/2010/07/the-helvetica-killer The Helvetica Killer The Helvetica Killer

A new typeface that is supposed to "fix" Helvetica and make it even better? I am interested.

After reviewing zoomed in specimens of the typeface, I don't like the character they added. The way the lowercase f and t curl a bit, the way the s seems more playful. And yet, they take away the uniqueness of the a and the R. Weird.

It actually seems further away from what I would want it to be.

(Note: the article body on the CR site is set in Helvetica Neue, the already improved Helvetica.)

]]>
2010-07-06T14:22:15-07:00 http://nathanherald.com/2010/07/temp-time-date http://nathanherald.com/2010/07/temp-time-date http://farm5.static.flickr.com/4122/4769334406_c3323c1765.jpg

]]>
2010-07-02T16:51:05-07:00 http://nathanherald.com/2010/07/pogo-sketch http://nathanherald.com/2010/07/pogo-sketch Pogo Sketch Pogo Sketch

I think I really need one of these. I might even be able to set it up to make my trackpad a really small tablet.

]]>
2010-07-02T16:50:14-07:00 http://nathanherald.com/2010/07/essential-vim http://nathanherald.com/2010/07/essential-vim Essential VIM Essential VIM ]]> 2010-07-02T13:56:03-07:00 http://nathanherald.com/2010/07/kathy-sierra http://nathanherald.com/2010/07/kathy-sierra http://blog.businessofsoftware.org/2010/05/kathy-sierra-at-business-of-software-2009.html

http://blog.businessofsoftware.org/2010/05/kathy-sierra-at-business-of-software-2009.html

]]>
2010-06-25T15:38:18-07:00 http://nathanherald.com/2010/06/google-map-tiles-math http://nathanherald.com/2010/06/google-map-tiles-math <p>Making custom google map tiles from a master png:</p> <pre><code>convert -crop 160x160 full.png tile_%d.png </code></pre> <p>It numbers the tiles sequentially, so a tile at position 1,1 in a 2x2 grid will be tile_3.png (it starts numbering at zero).</p> <p>Calculating the tile number is terribly easy:</p> <pre><code>(coord.y * 2^zoom) + coord.x </code></pre> <p>Where 2^zoom represents the maximum number of tiles across. (At zoom 1, there are a max of 2 tiles across.)</p> Making custom google map tiles from a master png:

convert -crop 160x160 full.png tile_%d.png

It numbers the tiles sequentially, so a tile at position 1,1 in a 2x2 grid will be tile_3.png (it starts numbering at zero).

Calculating the tile number is terribly easy:

(coord.y * 2^zoom) + coord.x

Where 2^zoom represents the maximum number of tiles across. (At zoom 1, there are a max of 2 tiles across.)

]]>
2010-06-17T13:44:13-07:00 http://nathanherald.com/2010/06/what-is-i-b-m-s-watson http://nathanherald.com/2010/06/what-is-i-b-m-s-watson What Is I.B.M.’s Watson? What Is I.B.M.’s Watson?

Ends with:

At least it knew its own name.

]]>
2010-06-10T05:14:54-07:00 http://nathanherald.com/2010/06/things-that-vim-does-that-bother-me http://nathanherald.com/2010/06/things-that-vim-does-that-bother-me Things that vim does that bother me Things that vim does that bother me

I love vim. It's pretty much awesome and can do pretty much whatever you can figure out how to tell it to do. While MacVIM solves most of my qualms with vim (making sure ⌘+S works, etc), I still have a few things that just don't feel right at all. If you know how to solve any of these issues, let me know.

  • When I click way to the right it actually puts the cursor there, instead of at the last character on that line
  • The cursor doesn't seem to be able to exist outside the current viewable area, so when I scroll the cursor moves lines (by staying at the bottom/top of the viewable area)
  • Installing plugins still miffs me (I can do it, but man it takes some time for me to get it right)
  • Buffers staying in the open buffers list when I close a tab really bothers me
  • Column selection isn't as fancy as TextMate's
  • Simple things that I miss from TextMate like Run this file or Evaluate all lines with # =>
  • I can't figure out how to make ⌘+Enter make a new line below my current line (I guess I could bind it to Esc,o but that hasn't proven to be easy)

Since vim is so customizable, I am sure I could fix all of these things (and more), but I am currently stumped on these things. If/when I figure them out I will update my vim-config on github.

]]>
2010-06-09T05:46:49-07:00 http://nathanherald.com/2010/06/holy-grail-css-columns-using-the-flexible-box-model http://nathanherald.com/2010/06/holy-grail-css-columns-using-the-flexible-box-model Holy Grail CSS Columns Using the Flexible Box Model Holy Grail CSS Columns Using the Flexible Box Model

CSS Columns In Safari

The A List Apart Article about Holy Grail Columns is still a great resource for building columns where the main content is first in the source, but everything lays out and remains flexible.

However, after reading about the Flexible Box Layout Module and looking through some examples I figured it would be easy to do the same without using floats and all that crap that was never intended for columns anyway. I was right.

Here is a demo

It is terribly easy to setup.

First, just tell the wrapper div that it's to behave like a box and that it's children should layout horizontally:

#columns {
  display: box;
  box-orient: horizontal;
}

Note: I am not showing the -moz and -webkit prefixes, but they are included in the demo page's code.

Secondably, let's make sure my columns show up in the correct order:

#center { box-ordinal-group: 2; }
#left { box-ordinal-group: 1; }
#right { box-ordinal-group: 3; }

That's freaking simple. Thirdly, let's add some width's to the left and right:

#left { width: 200px }
#right { width: 150px }

And lastly, let's make the center column "flexible":

#center { box-flex: 1; }

And that's it. Take a look at the demo.

]]>
2010-06-08T14:12:02-07:00 http://nathanherald.com/2010/06/how-to-make-safari-s-reader-view-left-justified http://nathanherald.com/2010/06/how-to-make-safari-s-reader-view-left-justified How to make Safari's Reader view left justified How to make Safari's Reader view left justified

This assumes you have the Develop menu shown and know how the Inspector works.

Step 1

Right click on a part of the text and choose Inspect Element.

Step 2

Click on a div with the class="page".

Step 3

Find the CSS rule for .page and uncheck the text-align: justify; rule.

Tomorrow: make an extension to do this automatically.

]]>
2010-06-07T14:34:29-07:00 http://nathanherald.com/2010/06/iphone-upgrade-eligible http://nathanherald.com/2010/06/iphone-upgrade-eligible http://farm5.static.flickr.com/4023/4680259848_430ed217b7_o.png

]]>
2010-06-04T07:58:44-07:00 http://nathanherald.com/2010/06/love-of-things http://nathanherald.com/2010/06/love-of-things Love of Things Love of Things

My goal is to create products that people love.

I think I just realized this fully today. There are things that are not alive, not people, and may not even really change my life so much and I love them. Sometimes the word adore may even apply.

This is why I want to create content management systems, ecommerce platforms, reusable tools, and other internet related things. I also catch myself wanting to design clothing, bags, storage solutions, and other things that I interact with often. If I can't find something I love then I want to make it. I, apparently, desire to desire something.

Not that Shopify or Expression Engine are bad, but I just don't love them like I do my iPhone or my hat. I actually really enjoy using both of these products, it's just not a full affair type thing. Tons of products are in this "like but not love" category, physical and virtual.

I remember loving my old 3rd gen iPod I used in college. Everywhere I went it went with me; it put me to sleep, woke me up, went for walks with me, and kept me focused when working on school work. So many other examples exist in my past: old laptops, shoes, shirts, etc.

I know everyone can think of a product that they miss or still have a deep affection for. A toy or computer or clothing item or something that they really loved.

A consistent thread running through the objects that I seem to fall in love with is a combination of beauty and utilitarian design. A balance between being terribly useful and practical while being awesomely intuitive and usable and pleasing to the eye seems to be very important to me. I see examples of this everywhere in my house: iPhone, Puma shoes, white fitted hat, front pocket wallet, G2 .5mm pens, moleskins, and many more.

The newest item that I have fallen for is my new Soto OD-1R burner. The little dude performed awesome for boiling water (< 2 minutes for a small kettle) and cooking. The way the supports fall into a locking position, the auto regulation of the fuel to maintain a consistent flame, and light weight really make my appreciate how well it works even more.

Not that this is new or anything, but going forward, I want to only make things that cultivate a love and affection from the people that use or consume them. I see this everywhere when people wear Expression Engine t-shirts, have Apple stickers on their car, and are willing at any time to sell their friends on the awesomeness of things.

My desires may be selfish. Not so much to make money, but more to have a sense of impacting other people in the world.

I want to make love more than make money.

(Hmmm, I think I'll just leave that last sentence as is.)

]]>
2010-06-03T11:37:22-07:00 http://nathanherald.com/2010/06/dreamhost http://nathanherald.com/2010/06/dreamhost <p>Honestly, I don't know why my site was down. Dreamhost must have changed something, because I haven't touched the files in months.</p> <p>Either way, I added a <code>require 'yaml'</code> line and that fixed it. Maybe they upgraded some gem or something and it doesn't include yaml. I'm sure a Gemfile and bundler would fix this sort of thing, but man that would require me to do something.</p> Honestly, I don't know why my site was down. Dreamhost must have changed something, because I haven't touched the files in months.

Either way, I added a require 'yaml' line and that fixed it. Maybe they upgraded some gem or something and it doesn't include yaml. I'm sure a Gemfile and bundler would fix this sort of thing, but man that would require me to do something.

]]>
2010-06-03T11:18:01-07:00 http://nathanherald.com/2010/06/body-class http://nathanherald.com/2010/06/body-class <p>Expression Engine template html snippet:</p> <pre><code><body class="{if segment_1}{segment_1}{if:else}home{/if}"> </code></pre> <p>Very useful to namespace each url and for showing parts of the nav as "current."</p> Expression Engine template html snippet:

<body class="{if segment_1}{segment_1}{if:else}home{/if}">

Very useful to namespace each url and for showing parts of the nav as "current."

]]>
2010-05-20T14:35:14-07:00 http://nathanherald.com/2010/05/evan-hecox http://nathanherald.com/2010/05/evan-hecox http://vimeo.com/10119673

http://vimeo.com/10119673

]]>
2010-05-20T13:44:22-07:00 http://nathanherald.com/2010/05/michael-buble-being-stalked-by-a-velocirapter http://nathanherald.com/2010/05/michael-buble-being-stalked-by-a-velocirapter Michael Buble Being Stalked By A Velocirapter Michael Buble Being Stalked By A Velocirapter ]]> 2010-05-20T13:41:45-07:00 http://nathanherald.com/2010/05/crossfire http://nathanherald.com/2010/05/crossfire http://wondertonic.tumblr.com/post/501888858/the-coward-dies-a-thousand-deaths-the-brave-but

http://wondertonic.tumblr.com/post/501888858/the-coward-dies-a-thousand-deaths-the-brave-but

]]>
2010-05-20T12:21:56-07:00 http://nathanherald.com/2010/05/did-you-know-you-can-use-a-scanner-wirelessly http://nathanherald.com/2010/05/did-you-know-you-can-use-a-scanner-wirelessly <p>Did you know you can use a scanner wirelessly?</p> Did you know you can use a scanner wirelessly?

]]>
2010-05-06T12:27:14-07:00 http://nathanherald.com/2010/05/understanding-the-web http://nathanherald.com/2010/05/understanding-the-web Understanding The Web Understanding The Web

If you are involved in the web industry in the least bit, then you must read this.

]]>