Technical Project Retrospective:

Posted in development by Kris Gray on April 29th, 2008

While this was my third site I had worked on, it was the first site that was finished and out the door for the public to enjoy. At Method we have retrospectives, to determine how the project went, and what could have gone better, yet we don’t have a good technical retrospective. So here’s my brain dump of the project, and what I can do to improve.

BTW, the awesome flash piece was done by Austin and Erik Hunter. No relation. They did an amazing job at it, and its really the centerpiece that makes the site really astounding. I just had to do the pathwork for the site, its colors, logo’s, text, mainly the menial work.

Welcome back reset.css!

My love for reset.css has been documented before, and I was able to just throw it along with a few other components at the start of the project. It feels really really good to be able to use whatever pieces of technology I consider necessary on a project like this. Coming from an enterprise product like Daptiv where everything was closely watched and to scrutinized it was great to just pop in libraries as the need dictated.

Abstract like crazy

IE 6 doesn’t support a few really important CSS selectors, one of the more important ones being

  1. .class.alsohasthisclass {}

So to avoid a problem where you can’t accurately target elements because of poor selector ability, create HTML structures that can be easily accessed by tried and true CSS selectors. This is in part because I’m not sure exactly which CSS selectors all the A-Grade browsers support. Something that I’m really trying to pickup rather quickly for sure.

Extra Markup is not the enemy.

Part of what I like to do when I create the structure for a site is to never have to go back and change the markup to make it easier to create the CSS. I figure if I did the Markup correctly, then I should be able to never touch it ala-CSS Zen Garden. The main problem with this, is as you start coding your markup, your not going to see a need to put classes on elements that you can easily style using element selectors. Some of the more simple and common ones I’ve been doing are.

  • Put the class “first” on ever set of elements, P tags in a Div, LI elements in a UL, etc.
  • Add the class “selected” for current navigation item, this is probably one most of you are already doing.
  • Wrap the whole body in a div with a class name.
  • Places where image replacement is a possibility, put the text in a SPAN inside the element.


Separate positional styles from visuals

This was a godsend and something I think is really important. You can’t re-use a class in a different situation for its style properties if it also has positional elements to it.

  1. .box { border: 1px solid brown; }
  3. DIV.body P { margin-bottom: 3px; }
  1. <div class="body">
  2. <p class="box">text</p>
  3. text
  5. </div>

I’ll be taking this farther in the future, its kind of hard to describe at the moment as I’ve not really created a blueprint on how to do this.

No comments

6 Web Developer Notepad++ Tips

Posted in development by Kris Gray on April 12th, 2008

Once I moved away from the Enterprise Software world into the Design Services industry, I had a bit of an editor problem. I used to use VS.NET 2005, and now I just don’t need that raw brute force power.

So instead I moved to Notepad++, which I had known about from Scott Hanselman’s 2007 Ultimate Developer and Power Users Tool List for Windows

Ever since I’ve started using it, I’ve picked up some pretty awesome tricks that nobody ever happened to enlighten me about. So here they are along with a few I already knew about, but are awesome enough to mention again.

  1. Use as your default Text Viewer for everything

    Here’s some links for doing it in Notepad2 which you can just do the same thing with Notepad++.

  2. Setting up your HTML with HTML Tidy

    I’m sure cleaning up your HTML is what its supposed to be used for, but I just like that it will take an almost blank document, and generate the few necessary tags I need for me to start an HTML document.

  3. Unwrap Text

    This is very useful for condensing CSS into 1 line. So now I’ve been developing my css multi-line, then when I’m done with it, I’ll run this command and then I can move on with a small css file.

  4. Align by clipboard character.

    Copy the colon character(“:”) to the clipboard (Ctrl+C), then…

    This also works with the bracket characters (“{“) which will line all start of the rules properties.

  5. Superfast Macro Support

    Its amazing how much faster this feature is that in Visual Studio. Its essentially unusuable in Visual Studio now that I realize what the performance of Macro’s really should be.

  6. Horizontal Block Select

    If you hold down the Alt key while doing a selection, you can select a block horizontally. This feature exists in Visual Studio as well and I was used to using it, so its great that its also in Notepad++.

The only small thing I dislike about Notepad++ is that it injects a weird character when I hold down the Shift Key and hit the backspace character. I used to hold down the shift key all the time as I type lots of special characters, and I don’t want to have to let go of that sucker just to backspace.

Other then that, its wonderful, I swear.

I would greatly appreciate other tips, just leave a small comment and I’ll go check it out.


Gaining Peace of Mind

Posted in development by Kris Gray on April 10th, 2008

Having a calm collected state of mind isn’t something that you should attain in the rare moments of the day you can relax, and it isn’t something you gain naturally. Having a calm inner spirit or essentially achieving a zen like state is something you have to fight for.

With that in mind, I really urge you to go read this book.

Getting Things Done Book

He approaches your mind like a Rubiks cube that while difficult for the uninitiated, is really quite simple to get to a grip on and put into an organized fashion.

When you’ve read it, you should probably read it again, and one final time to get it fully committed to memory.

They also have a website that has some awesome stuff on it, such as this tip that allows you to keep a centralized list of todo items in your Gmail in box.

Getting things done, or GTD for short really isn’t a small fledgling idea, many many people adopt its teachings, as you can see by this 43folders article.

No comments