I’m not a fan of “Inbox Zero” or “E-mail Bankruptcy” or “Getting Things Done”. I feel they all add an extra unnecessary step/series of steps to the end goal of accomplishing things. Maybe, I’m too old school, or too efficient at multitasking but the idea of writing a list of things to do before actually doing those things causes my brain to start doing increasingly dangerous stunts without a stunt coordinator.

I want to introduce you to a new name for a concept I’ve been using forever, I call it.

Procrastination Zero.

It’s the simplest plan of all time, it has a single rule and it works. I’ve been utilizing it for seven years now—albeit without a fancy name.

The Rule: When something needs to be done, do it.

“Well Jim.” You say, “That sounds too easy to be true, I can’t just do things as they come up. I’m a busy person!!”

I know. Me too. Always. Yet, for some inexplicable reason doing things when they come up always keeps me ahead of the curve. Crazy-talk I know!

Hey, how does this work?

As I said earlier. You just do things as they come up. Simple. You don’t write things down, you don’t put things off until tomorrow. You just do them. Right away.

But I don’t have all the info/stuff I need to finish the task!

Which means you don’t have a task then. Isn’t that odd? Basically if someone tells you about something they need done, but they can’t get you all the info/stuff to do it until Wednesday, then you have not been assigned/given a task at all. And it can wait until Wednesday when the task is actually available to do, but do it as soon as it’s ready to go.

Wait! I don’t have time to do things as they come up, I’m swamped.

Right… Two things are happening here. One; You’re a liar and probably a dirty procrastinator as well (only slightly kidding). Two; You’re honest, but also have a problem saying no. Which is why you’ve accepted more tasks than you can actually accomplish (I’ve finally stopped doing this to myself).

To solve this problem, simply stop lying and procrastinating. Or in the second more probable use case, start saying no. Firmly but, politely. It’s real easy, the work still needs to get done, it’ll just be more graciously distributed, easing your mind and work load quite a lot.

But I have 1000 e-mails from the last month in my Inbox.

Really? You sure? Try using a junk filter. If in the very uncommon case that you are buried in legitimate e-mails, try answering them as they come in. You’re not required to write a novel or even a novella for e-mail communications. The point is to be fast, if your correspondents need to wait a week or longer to hear back from you they’d have been better off using traditional mail.

The average e-mail can be answered in less than 30 seconds, and 3 sentences. Anything that takes more thought or a longer response should have the following reply sent; “Hi Name, Let’s schedule a phone call to discuss this. When is good for you?”

Phone calls can cover a lot of info in a short period, plus a real voice and tone go a long way to squashing time-wasting miscommunications. Is the other party too busy for a phone call? Link them to this article, they need it.

So that’s it. Start today!

Procrastination Zero! Guess what you’re done!

The Reno Gazette gave him a single sentence. One sentence. Fifty-seven years distilled into a single series of small facts. Surely this is not what becomes of us after we leave our bodies. Just a small inconsequential sentence in a small paper in our current town.

He wasn’t the best man to ever live, but he was nowhere near the worst, and so I thought I might give him a few more words in remembrance. And you gentle reader, if you could be so inclined, maybe you could say a small prayer for the man, so that he can rest in peace and move onto the next.

Dale Allen Mathias, was born in Germany, on a US Army base. He lived in Kentucky for a time. California most of his life, Arizona for a short period and he died in Reno Nevada. He had a younger brother Glen and an older Sister Lee. He attended high school in Oakland California about which he once told me, as one of very few white kids at school, “You put your stuff in your locker, look both ways and run.” This was the man’s humor.

He met Michelle “Mik” McClain in a pool hall in the 1970’s. Together they had me James Allendale, then married. After they moved out of Oakland and into Quincy, California my sisters Magdalena Ayn and Sarah Adalea followed. I went to kindergarten in Quincy, I fell down the stairs with my mom, broke my nose in the backyard, I cried as hard as my mom did on my first day of kindergarten and I remember my dad left me a note about how proud he was of me and that he loved me. Back then he was my hero.

He loved fish. He loved science. He was strong and capable and brilliant. He once saved a fish from certain death, by preforming surgery on it, he made the papers, he was the Fish Doctor. He was funny, though often crude. He always provided, we weren’t rich, but we were fed and clothed and always sheltered. He loved us. I loved him.

He wasn’t the best dad. He had flaws and anger issues, he was an alcoholic and drug addict, he spent time in jail and rehab. I hadn’t spoken to him in nearly ten years when I found out he was sick.

I called him, he answered and he told me about how jail had changed him and he was clean, he sounded proud, I was happy to hear it. He was on his way to get some Angel fish, he loved fish.

I told him I forgave him, I said to him “I miss you old man.” He choked up and returned the sentiment.

You see, even when I stopped speaking to him, even when he did bad things and wrong things, even at his worst, he was my dad. That hero from thirty-two years earlier, the man that always carried a recent picture of me in his wallet, the proud grandfather that never treated my wife with anything but love and respect. The man that took my entire family in, providing shelter, and food and money for not just me, but all three of us when I had my own personal demons surface at twenty-four.

My Dad taught me to be a man, through example. He taught me work ethic, responsibility, and how to provide. He taught me to learn everything I could, how to b.s. with the best of them. He taught me all kinds of bad habits and traits as well, but without them and him, I certainly wouldn’t be the man I am today, and I know at least four people that really love the man I’ve become.

Dad, I never stopped loving you. And I will always miss you, and I hope in our next lives we get to hang out.

My heart stopped.

I was in the parking lot at Pike’s Market in Seattle. I had just received an email from EllisLab and was reading it on my iPhone. The above was the first line I read. It was followed by a paragraph of why.

I could not breathe.

The day before I had given notice at Amazon. I had told them I was leaving to be the Creative Director at EllisLab, the result of a month long journey that included soul searching, mind wrestling and creating my first Key Note presentation, that I was not able to present with the animations and panache I had practiced.

I scrolled down.

The first sentence of the second paragraph was… “Instead, I’d like to offer you the position of Chief Creative Officer at EllisLab.”

The air I had lost, came rushing back in a wave of emotions.

This was it, the big time. The culmination of my eleven year journey from kitchen table to CCO of the company that makes the very software that built the site you’re reading, and many more like it before, and many more to come.

Tears began to roll into my giant moustache.

I turned to my wife, and I read aloud the first sentence, she began yelling “No! No! No!” and grasped my arm, repeating “No!” I began reading the second paragraph and choked up, tears burst forth and my throat locked. I handed her my phone and she finished reading the offer email out loud to the boys and I.

I could feel the car swelling with pride.

Eleven years ago when I got laid off from Les Schwab in Portland, so soon after having our second son. I promised my wife, that if she supported me at trying to make web design work for us by starting my own business, that she and my sons would never want for anything again. I would provide for them the life they deserved. We deserved. You see I knew all along, that web is what I was supposed to be doing with my life.

Amy, Liam, Bryce, Cameron. I started this journey for them and me, I stayed the course for a promise I made.

I’ve dragged them all over the country, following my career, trying to get to the point where I would be leading the design charge, not just pushing pixels and painting screens. Where I could have the best of both worlds. Somewhere I could make an impact on the community I love.

EllisLab stepped up, and offered to take a chance on this humble man, and not unlike my family, I’m not going to let them or the community down.

This is where I bring the DazzleThunder.

During the wait, I asked the same Apple employee four times, to please just be honest and save me the trouble of standing here, with my whole family if I’m not going to be able to purchase an iPad. All four times he said there was “plenty to go around”, to be fair the third and fourth time he added, “so long as you don’t want a white 3g at&t model” and “if you don’t mind a black Verizon model” respectively.

In line, I stayed. I was twenty people from the entrance, when the same dude came out and said, “Really sorry, but we only have 10 left, and it is 2 per person, so…” At this point I was pretty pissed. This guy had wasted my family and I’s time. The realization that they knew exactly how many there were the whole time, and that more than half the line was going home empty handed, and in fact they had lied to everyone, keeping the line as long and crazy as they could, made my anger even worse.

It’s not about getting an iPad or not. It’s about a company knowingly wasting my time and even when pressed and taken aside and asked for a legit answer telling me, “it’s NO problem”.

So I left the line after thanking the kid for wasting my time. He was of course, mock offended.

I also let the rest of the line behind me know that the iPads were all gone. Because there was NO way that the last 10 wouldn’t be purchased by the next 20 people, let alone and more likely the next five people. It was very funny, watching the guy and his coconspirators try to run damage control after my announcement.

I went home, looked on craigslist and realized why that group of kids I saw leaving the Apple store 2 hours earlier each had four iPads with them. Aftermarket sales for the $499 model for $1000!

I called another Apple store, spoke to a manager and he said, we are getting more tomorrow (Saturday) at 11am, if you call I’d be happy to hold one while you drive down, to make up for the debacle at the launch line.

I called at 11am, asked for the manager and got a different manager who told me, no iPads today, sorry, but we are getting a secret shipment tomorrow at, yes you guessed it, 11am. Call back then and I’ll be happy to hold one while you drive down, no problem. She too felt sorry for me after I told her my story.

So this morning I call at 11am. Guess what, yeah no iPads, but yet another manager. This one says no way we get any shipments on a Sunday, how silly of me for believing someone who works somewhere I don’t. He goes on to say we will be getting more tomorrow (Monday) at 11am, and that they had gotten some on Saturday at 11am. Wait, that’s strange I was told they didn’t get any Saturday by Saturday’s manager.

At this point, I realize what a fool I’d been over a hunk of metal and glass. I simply said. “You lost a sale, thank you for wasting my time.” I heard, “But, wait…” before I ironically pressed end on my iPhone 3GS.

I wanted to redesign, as the fifty second version wasn’t my bag of tea. I’m not sure this one is perfect enough either, but I want to start writing and drawing again, and this will have to do. for now.

New brand? Yes the text brand is new, I think it really fits the idea of artist, writer & outlaw. I heart it.

No Septapus? Sort of, he’s not gone, just hiding ;)

Where is the search? Coming back soon, I just want to do something different with it, so it’s still in development, truth is the content here is not deep enough, yet to really need it, so it was low priority and not a launch blocker.

I hate it! Sorry, but if I’m being honest, this site is mostly for me, and if you really hate it that much, wait a year, I promise it’ll be different again.

Thanks for stopping by, I hope to see you back again soon.

I have everything in the world to be thankful for. A new job, a new adventure, a new city, my wife of 14 years, my three sons, a roof over my head, a roof waiting to cover me in Seattle, friends, family and a multitude of other things, big, small and in between.

The blog has been quiet the last few weeks, because of this giant undertaking of moving across the country for the second time, in three years. leihu will continue to be quiet for another couple of weeks as I travel and unload and settle in at my new gig and in my new house.

I will be back with three more installments of CSS 101, and then I will be starting a new basics series on ExpressionEngine development. Additionally I’m going to start writing a serial novella one chapter at a time here on leihu.

So until we meet again, I must resolve this burst with good tidings to you and yours.

Love, James.

My time in Nashville, and even those twelve long months in Spring Hill have been the best of my life so far, well, you know barring the births of my sons, meeting my best friend and wife forever, my first kiss/car/beer, you get the gist. I love Tennessee, it has been home, and it will always hold a piece of my larger than average, but quite normally sized for my height, heart. I will miss a lot of things and people and places within this great state. For the first time in a long while I have friends I’ll miss dearly and connections to a place that I can’t just turn and walk away from.

In Tennessee, I found family, not blood family, but better. I found Jesus. I found myself and I found Magic again.

There comes a time for everything, that marks it’s end. The end of our time in Nashville, and the south draws near. On November 28th, Amy, Liam, Bryce, Cameron, our pets and I, will get into our 2004 Dodge Dakota, and make another long journey to a new horizon. This time the trip will include eight days, seven states, thirty-four-hundred-miles and hopefully less stress.

We’re moving to Seattle, WA.

Why Come?

In July of this year, I realized that I had made a grave mistake in leaving Paramore|Redd for what seemed like greener pastures in a work from home remotely gig out of San Francisco. I was quite unhappy, and I wasn’t being challenged creatively or intellectually, it was not my new job’s fault, not anyone’s fault, it was just me. I had made a mistake. I began a search.

I tried finding a job locally, it was our goal to stay local, in Tennessee. Nobody had a place for me. I slowly figured out that I was a living catch 22, I had a skill set and experience level that everyone wanted, but no one was able or willing to pay for. Again, no one at fault here, just bad timing in a small market. I widened my search.

Once I was looking outside Tennessee a lot of opportunities opened. I was offered a job in Illinois, with a fantastic group of guys, I turned it down only because after visiting and discussion my wife and sons weren’t interested in moving to Illinois. Sometimes I regret not taking that job, if only because it sure would have been fun to work there.

I was taking daily phone interviews at this point, some turned into second phone interviews, others faded away. Two turned into fly in and meet and interview in person deals. Both were in Seattle. After interviewing on separate occasions, yes two different trips to the Emerald City, I was offered both jobs, not at the same time, mind you but close enough together that a decision between them had to be made.

Both jobs were generous and amazing offers to work on incredible and famous projects. Both jobs were in Seattle, a place my family was interested in moving to, and both jobs offered amazing salaries and benefits packages and people to work with.

One job however offered me something the other didn’t, the opportunity to move my skill set and knowledge forward, a way to grow as a designer and developer. So I made two calls.

I accepted a position with Amazon. I am going to be a Senior UX Designer for the Shelfari/Kindle team. I start December 13th.

I’m really excited, but also a bit scared. Amazon’s interview process was the hardest interview of my life. If this job is half as challenging as the interview and pushes me where I’m sure it will, I’ll come out the other end with a wealth of new knowledge about my craft and art.

It’s not goodbye…

It’s just so long. I’ll be back around to visit and I’ll be on the twitters and the facebooks and some of you have my phone number; call, text, write me an email.

Thanks for all the fish.

The HTML base of a navigational menu is often represented with a unordered list <ul>, like so.

<ul id="primary-navigation">
	<li><a href="" title="">menu item one</a></li>
	<li><a href="" title="">menu item two</a></li>
	<li><a href="" title="">menu item three</a></li>
	<li><a href="" title="">menu item four</a></li>
</ul>

The use of an unordered list is debatable, but in my opinion an unordered list is more logical than an ordered list, because we are not always going be leaving the menu items in order. And more reasonable than a definition list, because we are not defining a list of anything, we are merely listing navigational items, however, that being said, if you were to have a more complex menu with additional text, for instance, “About Us - All About The Company and Team” that would be a good case for using a definition list.

Since we are discussing beginners topics in CSS 101, I am going to keep this super simple and only talk about best practices for horizontal and vertical menus in terms of CSS code, not visual design.

The Horizon

Horizontal menus are quite common and are terrific for creating site wide menus of potential locations within your website. Unfortunately, they are often limited to a set width and therefore can be a bad choice for heavy navigational websites. It is always best practice to have a small amount of primary navigation, but the reality is that often clients and audiences require a great deal more than will fit in a single horizontal navigation.

By default an unordered list stacks vertically in a browser, and we need the list items to sit next to each other horizontally, how might we achieve this?

Floats of course!!

The CSS for the above HTML, to create a horizontal menu should look something like this

#primary-navigation{
	list-style-type: none;
	margin: 0;
}

	#primary-navigation li{
		float: left;
		margin-right: 5px;
	}
	
		#primary-navigation a:link,
		#primary-navigation a:visited{
			background-color: #EEEEEE;
			color: #FF0000;
			display: block;
			padding: 10px;
		}
	
		#primary-navigation a:hover,
		#primary-navigation a:active{
			background-color: #FF0000;
			color: #FFFFFF;
		}

Because we have floated the list items, we need to clear those floats, if you remember from Floats & You, we can do this using the :after method by applying a new class to our HTML menu, like this.

<ul id="primary-navigation" class="float-clear">
	<li><a href="" title="">menu item one</a></li>
	<li><a href="" title="">menu item two</a></li>
	<li><a href="" title="">menu item three</a></li>
	<li><a href="" title="">menu item four</a></li>
</ul>

Horizontal menu, not so hard, well guess what, vertical is even easier!

Vertically Challenged

First, we don’t need .float-clear or floats at all. Starting with the original HTML above, we can use the following CSS to make this a vertical menu.

#primary-navigation{
	list-style-type: none;
	margin: 0;
	mwidth: 220px;
}

	#primary-navigation li{ margin-right: 5px; }
	
		#primary-navigation a:link,
		#primary-navigation a:visited{
			background-color: #EEEEEE;
			color: #FF0000;
			display: block;
			padding: 10px;
		}
	
		#primary-navigation a:hover,
		#primary-navigation a:active{
			background-color: #FF0000;
			color: #FFFFFF;
		}

See what I did there? Let me explain, first I gave the menu a width, as a vertical menu is often going to be in a sidebar, so it’s going to be restricted to a certain width, then I removed the float declaration and right margin and gave it a bottom margin instead. Amazing, flexible code powers unite… uh, sorry, got too excited there.

Why use a vertical menu? They make great sidebar menus, and secondary drop downs and long menus. Vertical menus have as many uses as his horizontal brother. Which type you choose comes down to preference and project needs based.

Now that you have this really solid HTML and CSS base for menus go out there and visually design some awesome menus!

Join me next week for a discussion about the Cascade and Importance.

Some things to keep in mind

Everything is a box. Even if it doesn’t look like a box or seemingly behave like one, it is. Boxes by nature stack, sometimes they stack within one another, other times on top of each other.

Everything has a parent. As is true with being human, one cannot exist without parents, the same is true in HTML and CSS development.

Now that you know those two key pieces of the puzzle—which help you not only with today’s lesson, but in general as well—we can move onto the types of positioning and their differences.

The Four Horsemen of positioning

There are four types of positioning. static, fixed, relative and absolute.

static is the default type of positioning, it applies to all elements without needing to be declared, in fact if you ever find yourself needing to declare this as a positioning type, you may be writing too specific or complex code.

relative positioning tells the browser to start the element relative to it’s original (static) location in the document.

absolute positioning places itself on top of the rest of the document and when you set it’s top, left, bottom or right attributes it positions itself relative to the nearest positioned parent. If a positioned parent doesn’t exist it defaults to the <body> of the document.

fixed A fixed element will not scroll with the rest of the document, it’s position is independent of the browser viewport. Otherwise it behaves similarly in terms of top, left, bottom, right and z-index as an absolute positioned box does.

A Few of the horsemen’s tools

Position attributes are powerful on their own, but they do work well with a few other attributes that when combined give us a great deal more flexibility.

Top, left, bottom, right. These four attributes allow us to explicitly declare where we want our positioned boxes to render in relation to the document and their positioned parents.

z-index tells our positioned box where to be in terms on depth on the page. Yeah our HTML page has 3 dimensions, uh sort of. Only a box that has positioning of relative, absolute or fixed can be given a z-index. This allows us to layer positioned boxes on top of each other, overlapping one another if you will.

Some Quick Examples

Relative

Here is a common case where relative positioning can be quite useful. We have a sidebar, that contains some headings that we want to have “break out” of the left hand side of the sidebar visually. A common way that developers do this is with negative margin declaration, unfortunately negative margins don’t work in MSIE as expected.

The code looks like this;

#sidebar h2{
	left: -50px;
	position: relative;
	z-index: 1;
}

This is saying to the browser, “Hey browser, whenever you see a <h2> inside a box identified #sidebar, go ahead and shift it to the left 50 pixels, oh yeah and please put it on top of the #sidebar, thanks!”

Absolute

Here is a cool way to use absolute positioning. Let’s say in that same <h2> above we want to place a neat little icon on the right side of that <h2>, but not just to the right of the text, but aligned with the right hand side of the actual <h2> box.

Here is the HTML

<h2>Heading <span class="cool-icon">Icon here</span></h2>

The CSS, perhaps?

#sidebar h2 .cool-icon{
	background: transparent url(img/cool-icon.gif) no-repeat 0 0;
	display: block;
	height: 16px;
	position: absolute;
	right: 0;
	top: 0;
	width: 16px;
}

The reason this works as expected is because earlier we gave the <h2> a position of relative, which makes it a positioned parent. Otherwise the .cool-icon would be in the top right hand of the browser viewport.

Fixed

So what about fixed positioning? What is something cool we can do easily with that? How about a #sidebar that stays in place as the rest of the document scrolls? I’ll show you how to do that, but there is something to keep in mind, if #sidebar ever gets taller than the browser viewport, anything below the bottom of the viewport will be inaccessible to your users, as the element is FIXED and will not scroll regardless of it’s content. You can prevent this by setting a common height on the #sidebar

So how to do it?

#sidebar{
	height: 550px;
	position: fixed;
	z-index: 1;
}

That’s that, sincerely that little guy won’t budge.

Recap, and Reminders

1. Everything is a box.
2. Everything has a parent.
3. Everything starts out statically positioned.
4. Absolutely positioned elements require a positioned parent.
5. Relatively positioned elements start right where they are.
6. Fixed positioned elements stay put, and will not scroll.
7. Monsters are only scary when you don’t know their names.

So I hope this makes you feel better about that crazy monster in your closet, and that you join me next week when I talk about menus.

Floats are simple, in fact most CSS is simple, but that is for another article or three.

I would like to run down some basic examples and discuss how we get around common pitfalls, allowing us to write leaner, cleaner and more stable code.

Real World Example

The two column layout conundrum. Blog posts are a common use of this type of utility.

The HTML may often appear like this.

<div id="wrap">
	<div id="header">
		...
	</div>
	<div id="main-content">
		...
	</div>
	<div id="sidebar">
		...
	</div>
	<div id="footer">
		...
	</div>
</div>

Then the related CSS would be something along these lines.

#wrap{ 
	margin: 0 auto;
	width: 940px; 
}

#header{ ... }

#main-content{
	float: left;
	width: 550px;
}

#sidebar{
	float: right;
	width: 200px
}

#footer{ ... }

Now this will result in the sidebar moving to the right of the wrap div, and the main-content moving to the left, allowing the two division tags to align side by side, as opposed to being stacked on top of each other as they would appear without the above CSS.

The header and footer divs will appear above and below the floated columns respectively, well, almost. The footer div will not go below the columns, in fact it will place it self directly below the header, however, child content (e.g. text) will be below the floated columns, but the actual body of the div is not, which can cause some unexpected results when the layout and content becomes more complex.

There is a way to fix this, in fact there are several ways, all of which require a little extra HTML, and some CSS, but it’s minimal and straight-forward.

First we add this to the HTML

<div id="wrap">
	<div id="header">
		...
	</div>
	<div id="content-wrap" class="float-clear">
		<div id="main-content">
			...
		</div>
		<div id="sidebar">
			...
		</div>
	</div>
	<div id="footer">
		...
	</div>
</div>

I’ve added a new div, wrapped around the #main-content and #sidebar divs, this gives us a few options, and in reality, this extra div, is almost never extraneous given the complexity of design these days.

We also need to add this small rule to the CSS.

.float-clear:after{
	content: ".";
	clear: both;
	display: block;
	height: 0;
	font-size: 0;
	visibility: hidden;
}

The way this works is it places a period (.) character directly following the last child in the parent, so in our example it places a period right after the #sidebar inside the #content-wrap. Next it applies clear: both to that period, which forces anything below it to actually flow below it. The display: block, forces the period to be a block level element, which makes it fill the entire parent width wise. The rest is used to visually hide the period, so that it does not disrupt our layout aside from the way we intend it to.

And the best part? MSIE doesn’t require this code at all, in fact MSIE has a rendering difference which causes it to auto clear floats by default, what a neat little trait. However, MSIE will need you to to assign the following line of code to your iepatch file

.float-clear{ height: 1%; }

This gives the element has-layout, which is important for MSIE, another neat quirk.

That is pretty great right? Yes, I agree.

Well if I’m being fair, there is another completely acceptable way to clear the floats.

alternate a

#content-wrap{ overflow: hidden; }

Now while this does work, it does have some caveats and in my opinion makes for much more complex CSS down the road, and dependent on the complexity of your design, that can become a huge unnecessary headache. For instance, if #content-wrap needs to have a height applied, if #main-content or #sidebar ever get any taller than that set height, their content will be hidden at the point where their height meets the set height of the #content-wrap div.

So I hear you asking, why bother with confusing us with this alternate solution, when the first solution works well and as intended/expected? Well, I find the best way to guide a person to the right solution is to show them why the alternates aren’t as good.

OK. That my friends is floats in a nutshell. I hope they are a bit less confusing now. Join me next week for Positioning, Absolutely!