Archive for the ‘design’ Category
Introduction
On May 14th, I competed at a Hackfest hosted by Podio.
Podio is a customizable social networking application delivered as a service
(aaS). After 8 hours of coding, I placed first in the competition and won a
beautiful Apple Cinema Display. In this post I will cover my hack, how it was
done, and lessons learned.

Victori pretium it
Or, you can watch my video interview
(more…)
Posted in design, Productivity, Ruby, San Francisco, Software, Technology and Computers | 6 Comments »
Tuesday, October 20th, 2009
Note the tab on the far right…

the actual title was:
Tale Of Exploding Assassin Worries Security Officials
Posted in design | No Comments »
I have a new favorite coffee place in North Austin, and while I’m not excited about seeing all you sumzuhbitches there taking up all the outlets, I do like the ambience and the owners and I want their store to do well. So, if you have the inclination and are at the MoPac and 183 area, please come to Sodade Coffee.
It’s much less-crowded than competitor Primo 360. It has the quietness of Epoch Coffee on a weekday but is several miles closer to my home and saves me some of that precious, precious petroleum.
The other thing is that their choice of music is largely out of the jukebox of Steven Harms: Interpol, Pink Floyd, post-“Pepper” Beatles, etc.
And, good lord, they have a beautiful la Marzocco machine. At the Huffington post a few weeks back they had an article on “Artist Porn” ( ’twas this article that got me on to “Mad Men” ), it strikes me that the author really ought have included the La Marzocco catalog.

or
By Tim Holmes
I. Love. Italian. Design.
Lamentably, I missed the recent exhibition about Olivetti in Turin: “Olivetti, Una bella società”.
I should get back to Italy soon—and you should get to Sodade
Posted in design | 1 Comment »
Millions of dollars each year are spent figuring out how best to position a product within the aisles of a grocery store. For the pleasure of having a rickety cardboard kiosk set up on the corner a company will pay a premium to the store owner, or, in to the drug store chain that Lauren and I were patronizing this afternoon.
Now, as I walked past this kiosk I thought to myself: “This name is horrible, how can I improve this?”.

And then the answer became clear….
(more…)
Posted in Critique, Culture, design | 4 Comments »
Saturday, February 17th, 2007
You wouldn’t think it, but my feet have been hurting.
Bad.
I couldn’t really believe it. It’s not lie i stand on my feet all day carving people with scalpels, or slowly planing off shavings on hulls or keels, or serve food. This was the most paradoxical part: I largely sit on my butt all day and stare at lights in a screen.
But it is true.
I tried to remedy the situation with some superfeet inserts for my Merrills, but these were apparently wearing out and my feet were hurting yet again. As such, it was time for a new shoe. Something that I could slip on, something easy and comfortable, something casual enough for the office and nice enough to make the scene at a restaurant.
I really wanted Birkenstocks that I could wear in winter.
The solution was the Birkenstock Alton.
I wore these during the BNR class and I did not have the foot pain issue that I had been having. I also wore these on one or two of our walks and they hold up well enough during some extending walks.
I recommend.
Posted in design | 1 Comment »
Tuesday, January 16th, 2007
In the following post I discuss potty topics. Consider yourself warned.
(more…)
Posted in Culture, design, Travelogue | 2 Comments »
Sunday, November 26th, 2006
Over the Thanksgiving holiday I took the opportunity to read the autobiography of Apple co-founder Steve Wozniak, iWoz.
- Steve believes in “extreme ethics”: always tell the truth completely
- Steve was incredibly precocious in terms of becoming an engineer
- Steve seems to be one of the ‘new atheism’ camp: Science, proof, reason, plus nothing else.
So I never got any exposure to religion. Church, mass, communion. What is that? Seriously I couldn’t tell you.
As for religion, if I asked, my dad would say, no, no, he was scientific. Science was the religion. We had discussions about science and truth and honesty, the first discussions of many that formed my values.
- Steve takes engineering very seriously.
…I still believe engineers are among the key people in the world. And I believe that I will be one forever, and i have dedicated my whole life to engineering.
(more…)
Posted in Books, design, Technology and Computers | No Comments »
Saturday, September 2nd, 2006
As I posted earlier, I’m undertaking to better understand the basics of the DOM, Javascript, and DHTML on my pilgrimage to being Ajax competent. I’m using Ajax in Action as my guide.
Recently at work, we had need of a basic ‘dashboard’. It’s a pretty simple design: boxes on the left with one level of drop down for menus, a big, central ‘content’ section in the middle.
I was thinking of how I wanted to implement this.
- It needed to be flexible (i.e. layout should be described in an XML file)
- It needed to be updatable without touching the JavaScript (to get a feel for the Ajax design)
- It needed to be somewhat visually appealing.
The goal was to use Javascript to create a 100% DOM rendered page that worked in IE and Firefox.
Here’s the product
Here’s how I did it after the jump….
<pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel=stylesheet type="text/css" href="dashboard.css">
<script type="text/javascript" src="dashboard.js" ></script>
<title>Dashboard</title>
</head>
<body onload="javascript:pageLoad()">
<div id="page_container">
<div id="navigation_bar">
</div>
<div id="content_area">
<div id="titlebar_area">
<div>
<p id="title">A Basic Dashboard Example</p>
</div>
</div>
<div id="main_area">
<h1>Welcome to the dashboard example</h1>
<p> Double-click an item to the left to
expand/collapse.</p>
</div>
<div id="footer">
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01 Transitional" height="31" width="88">
</a>
</p>
<p style="text-transform:small;font-variant:small-caps;
font-size:8pt;text-align:right"><em>Version 0.1</em></p>
</div>
</div>
</div>
</body>
</html>
</pre>
You basically have two critical areas in this skeletal bit of HTML: the navigation_bar div and the main_area div. My code is focused on putting “main navigational areas” in the navigation_bar. Updates into the “main view” may need to happen ( it doesn’t really happen in this code ).
To lay out the prettyness of the page, we use CSS:
<pre>
body{
margin-left:0px;
background-color:#AAAAAA;
font-family: arial, helvetica, courier, times;
}
div#page_container{
background-color:#AAAAAA;
margin-right: 10%;
}
div#navigation_bar{
position:absolute;
padding-left:0px;
margin-left:0px;
margin-top:10px;
width: 200px;
width: 300px;
height: 100%;
background-color: #AAAAAA;
}
div.navigation_block{
position:relative;
background-color: white;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
border-width: 2px 1px 3px 3px;
border-style: solid;
border-color: #222222;
padding-bottom:2px;
width: 11em;
}
div.navigation_block p{
width: 80%
}
div.navigation_block_submenu{
margin-bottom: 5px;
margin-left: 10px;
margin-top: 0;
margin-right: 0px;
margin-left: 5px;
padding: 0px 0px 0px 3px;
margin-bottom:3px;
width: 9em;
background-color:#DDD;
}
.submenu_element{
padding-top:0px;
margin:0px;
font-size: 0.95em;
}
div.navigation_block p{
padding-left: 5px
}
div#content_area{
position:relative;
top:0px;
left:200px;
width:200px;
width:40em;
padding-left:0px;
padding-top:2px;
margin-left:0px;
margin-top:10px;
background-color: #AAAAAA
}
div#titlebar_area{
background-color: white;
border-width: 2px 1px 3px 3px;
border-style: solid;
border-color: #000000;
margin-top: 8px;
height: 52px;
padding:0.5em;
}
p#title{
color:black;
text-align:center
}
div#main_area{
background-color: #FFFFFF;
border-width: 2px 1px 3px 3px;
border-style: solid;
border-color: #000000;
height:370px;
margin-top: 5px;
padding: 2px;
height:100%
}
div#main_area h1{
border-width: 0 0 3px 2px;
border-color: #AAAAAA;
border-style:solid;
color:black;
font-size: 1em;
padding-left: 2px;
margin-right: 2%
}
div#footer{
background-color:#AAA;
padding-top: 10px;
padding-right:0px;
width: 40em
}
/* Stupid hack for stupid internet explorer */
html>body div {
width: 40em
}
/* Make changes that make IE happy, make FF happy */
*
{
-moz-box-sizing: border-box !important;
}
</pre>
That’s the CSS. Now, let’s show the code on how we dynamically update these pages.
/* dashboard.js
AUTHOR: Steven G. Harms (stharms@cisco.com)
CREATION: 8/28/2006
A script that is used with an XML file to use the DOM to create a Web2.0 /
DHTML-y web site
*/
// Global variables, used sparingly
var xmlDoc;
// Function Declaration Area
function add_a_footer(entered_text){
var dom = document.domain;
var myText = document.createTextNode("hello, " + dom);
document.getElementById("footer").appendChild(myText);
var childEl=document.createElement("div");
childEl.className='navigation_block';
childEl.appendChild(myText);
document.getElementById("footer").appendChild(childEl);
}
function addAnEvent(anObject, eventType, callback, capture){
if (window.XMLHttpRequest){ // it's a mozilla-like thing!
anObject.addEventListener(eventType, callback, capture);
return anObject
}else{
anObject.attachEvent('on' + eventType ,callback);
return anObject
}
}
function appendTitleBlock(anObject, myTitle){
//alert('cunning '+aTitle);
if ( myTitle == "" ){
aTitle="ERROR!";
}
var appendTitle = document.createTextNode(myTitle);
var title = document.createElement('p');
title.appendChild(appendTitle);
anObject.appendChild(title);
return anObject;
}
function browser_mutate(){
// Some tricks to help IE render properly
var browser = navigator.appName;
if (browser.match(new RegExp("Microsoft", "i"))){
// Line up the box model
var navbar = document.getElementById('navigation_bar');
navbar.style.marginTop='8px';
//Make sure our submenus are properly whited-out
for ( var divvie in document.getElementsByTagName("div")){
if (divvie.match(new RegExp("submenu","i"))){
var node = document.getElementById(divvie);
node.style.backgroundColor="#FFF"
}
}
}else{
var navbar = document.getElementById('navigation_bar');
navbar.style.marginTop='10px';
}
}
function buildSubmenuFor (aBlock, manipulationClosure){
//alert(aBlock.getAttribute('name'));
//alert(aBlock.childNodes.length);
var childItem;
var theDiv = document.createElement('div');
for (var i=0; i<=aBlock.childNodes.length; i++){
//alert(aBlock.childNodes.item(i));
if (
( aBlock.childNodes.item(i) != null ) &&
( aBlock.childNodes.item(i).nodeName == "name")
){
childItem = aBlock.childNodes.item(i);
//alert ( aBlock.childNodes.item(i));
//alert(childItem.getAttribute('href'));
var theURL = childItem.getAttribute('href');
//alert(childItem.firstChild.nodeValue)
var theTarget= childItem.firstChild.nodeValue
//Create a link item and put it in a paragraph
var linkPara=document.createElement('p');
linkPara.className='submenu_element';
var link = document.createElement('a')
link.setAttribute('href', theURL)
link.setAttribute('class','submenu_element' )
var textual_data = document.createTextNode(theTarget);
link.appendChild(textual_data);
linkPara.appendChild(link);
theDiv.appendChild(linkPara);
}
}//end For
if (manipulationClosure == null ){
return theDiv;
}else{
return manipulationClosure(theDiv)
}
}
/*
This function receives a Javascript "Element" object
*/
function createNavBlock(aBlock){
// This might seem obvious, but this is an HTMLDivElement in
// the API references
var constructedBlock = document.createElement('div');
constructedBlock.className="navigation_block";
constructedBlock.id=aBlock.getAttribute('name');
constructedBlock.setAttribute('id',aBlock.getAttribute('name'));
if ( false ){
alert('Constructed Block Object: ' + constructedBlock + "\n" +
'Class Name: ' + constructedBlock.className + "\n" +
'ID: ' + constructedBlock.id);
}
return constructedBlock;
}
/*
This function creates the main navigational blocks to the left of the
screen.
It also seeds them with the callback function that is used to extract
the fuller drop-down
*/
function createNavMenu(){
var array_of_blocks = xmlDoc.getElementsByTagName('block');
var nav_section = document.getElementById('navigation_bar');
for (var i=0; i<array_of_blocks.length; i++){
var navBlock = createNavBlock(array_of_blocks[i]);
if ( false ){
alert('Constructed Block Object: ' + navBlock + "\n" +
'Class Name: ' + navBlock.className + "\n" +
'ID: ' + navBlock.id);
} //end if
navBlock = addAnEvent(navBlock, 'dblclick', eventHandler, 'false');
navBlock = appendTitleBlock(navBlock, array_of_blocks[i].getAttribute('displaytitle'));
nav_section.appendChild( navBlock );
}// end for
}
function eventHandler(anEvent){
var myEvent = anEvent ? anEvent : window.event;
var thisName = this.id ? this.id : window.event.srcElement.id;
/* Due to a bug in IE's rendering of CSS, it's possible that someone could click
on the title of a box ( even though they're clicking outside of the title )
and thus a 'null' value for thisName will be, quite legally, derived. To
catch this we send return, the user will assume they didn't dblclick properly
*/
if (thisName == ""){
return
}
if (false){
alert ('howdy '+anEvent
+ "\n and..." + this
+ "\n and..." + thisName);
}//end debugging truefalse
if ( thisName == null ){
return
}
var screenBlock = document.getElementById(thisName);
if ( isExpanded(screenBlock) ){
//alert('expanded');
//alert(screenBlock.getElementsByTagName('div')[0])
screenBlock.removeChild(screenBlock.getElementsByTagName('div')[0])
}else{
//alert('not expanded');
var informationBlock = findBlockWithName(thisName);
buildSubmenuFor(informationBlock);
screenBlock.appendChild(buildSubmenuFor(informationBlock, function (aDiv)
{
aDiv.className="navigation_block_submenu";
aDiv.setAttribute('id',thisName + '_submenu');
return aDiv
}));
}
}
function findBlockWithName(aName){
//alert(aName);
var array_of_blocks = xmlDoc.getElementsByTagName('block');
for (var i=0; i<array_of_blocks.length; i++){
// alert('! ' + array_of_blocks[i].getAttribute('name'));
if (array_of_blocks[i].getAttribute('name')==aName){
return array_of_blocks[i];
}
}
}
function importXML(){
if (document.implementation && document.implementation.createDocument) {
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.onload = createNavMenu ;
}else if (window.ActiveXObject){
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.onreadystatechange = function () {
if (xmlDoc.readyState == 4) createNavMenu ()
};
}else{
return;
}
xmlDoc.load("navigation.xml");
}
function isExpanded (blockToExamine){
//alert (blockToExamine);
var cNodes =blockToExamine.childNodes;
for (var i=0; i<cNodes.length; i++){
if (cNodes.item(i).tagName == 'DIV'){
return true;
}
}
return false;
}
function pageLoad(){
browser_mutate();
importXML();
}
And lastly here’s the XML file:
<blocks>
<block name="aggregator_block" displaytitle="Aggregator Sites">
<name href="http://www.reddit.com">Reddit</name>
<name href="http://www.digg.com">Digg</name>
</block>
<block name="timewaster_block" displaytitle="Timewasters">
<name href="http://www.youtube.com">Youtube</name>
<name href="http://www.socialitelife.com">Socialite's Life</name>
</block>
</blocks>
Posted in AJAX, design, Technology and Computers | No Comments »
Thursday, August 31st, 2006
I’m having an ideabuzz at the moment. What’s an ideabuzz, it’s a feeling that there’s a connection between things ( which spawns an ideabuzz which reminds me of a bit in one of the Dune books by frank herbert where herbert describes a mentat working through a very difficult problem shaking his hands and frothing because he was so close to the final calculation which resolved a very difficult series of unsolubles). An ideabuzz is when you type very fast and you’re not quite sure where the idea is going, but you keep typing very fast. So, i’m having one of those right now about fake things that are meant to be real.
I never much cared for Nathaniel Hawthorne, but there is a story of his called rappacini’s daughter (one of the first best gothic stories ever written) where he writes abotu a man who puts a poison in the lips of his daughter (who is of course, beautiful) and if she kisses someone she’ll kill the kissee.
In any case, there’s a story around that, but see she’s manufactured but natural.
In the end of Do Androids Dream of Electric Sheep Deckard encounters a wild animal ( in this future vision, the animals are all gone: goats, horses, dogs, etc. Those that remain are venerated under the hyper Christianity of that world called “Mercerism”. The wild animal he encounters is a grasshoper, he turns it over and looks at the bottom and realizes that it is in fact a simulation, a machine grasshopper. This has some meaning relative to the previous experiences he went through.
Origami, origami is amazing. I found this page at Discovery and was amazed by this stunning dragon and then i was even more stunned by the origami flower. As amazing as the dragon is, the flower is more amazing because it’s natural, it’s unnatural natural. It’s like Zen gardens, the goal is to mirror the natural ways and assemblages of natural foliage, but to do it in a way with patterns that show human intervention was involved, the natural unnatural as it were.
And that’s a lot of typing without much sorting into a coherent post. Maybe it’ll turn into something more solid later.
Posted in arete, Culture, design, Ruminations, Zen | No Comments »