Black Belt Coder

I've talked about how you can use the asterisk to indicate a rule is for IE only but while doing some investigation for another issue I discovered another easy hack that could eliminate the need for things like conditional comments at all.

I was doing some investigation on transparent PNGs and had the following code

Live Example

This works in every browser but IE6 since it doesn't support PNG alpha channels without using the DirectX Filter property. So I'll need to turn off the background, and specify a filter property, preferably only applying to IE6. The code I ended up with was...

Live Example

The obvious extra syntax above is *- which is the hack to bypass the all the other browsers but IE 6. I'm jus ta lowely web developer not an IE/FF CSS parser expert so I'm not exactly sure why IE6 recognizes this and IE7.

Also, the asterisk isn't even necessary for this to work.

This works just as well, but I thought it prudent to add the asterisk to adhere to the hack used by the Yahoo guys, and prevent any conflicts with the browser specific properties popping up such as -moz-border-radius: 10px;.

Minor I know, but on my most recent project I decided I'd finally find out how to use this darn thing. I've always just gone with the following code.

At Method the designs are typically based on a single base font, with slightly varying fonts for headers and such, so that font is defined high in the inheritance tree to avoid duplication and to enable a single place to change if necessary. Which is why its not included in the above code.

To achieve the same thing with the font property you'll use the following line.

We have 4 parts here, and here are each of the values for those parts.

1. bold/normal - obviously just font-weight, but you'll need this part.
2. 12px - just font-size, you should know what to do with this.
3. /18px - the line-height, optional, you could omit this part if you don't care about the line height.
4. auto - the font family, as we specify it higher in the tree, we don't want to specify it over and over, so we'll just have CSS figure it out for us.

Thats right, the 4 monitor club.

I've heard it talked about a lot and based on the amount of multi-tasking I do, and the amount of screens I use on a consistent basis I knew I had to grow beyond the 2 I had previously.

I will be downgrading to 3 after today as 4 leaves me with no desk space and just isn't efficient. Plus nobody here has 3 and I figure if I go around with 4, people will get jealous.

Hardware

I originally wanted to do this because we had an old PCI NVidia card laying around, and recently some new monitors became free. So it seemed like a simple process. But when I went to put it all together, it turns out an NVidia card and an ATI card won't co-exist peacefully.

So off to NewEgg.com I go (my goto site for new hardware) and ordered up a new Video Card. Today I got it in the mail, and slapped it in.

I was absolutely amazed at this point, the computer booted up, the monitors did some turning on and off, and then all the monitors were working just as expected. I still needed to change the resolution and placement of the monitors, but I was just boggled that it took 0 setup after I plugged the card in.

Anyway

I'm stoked.

So the biggest project I've had at Method is the company website. It was essentially the first project I was handed when I arrived, and so I've basically been working on it from when I've moved down from Seattle till when I went to Hawaii for vacation with some small breaks for other little projects.

This site was an ultimate team project, with people taking up any responsibility that was necessary. Lots of times, each of us would be the only person on the project that day/week. The reason for the quality of this site is the talent of the team. For sure.

So this is the site, some of the cooler things out there.

The modules re-order as you resize the window. The idea is to not have any scroll bars, if you don't have enough space for all the modules, you get several pages of them.

I really like the the case study profiles, which show up once you click one of the case study modules. They give you an impressive flash slideshow. This actually uses some ActionScript / JavaScript integration. Fun stuff.

In the overlays with large blocks of text, it is automatically divided into 2 columns and then paged. This is just insanely hard, but eventually Brian Ross got it to work. He was very vigilant and it was a great last minute fix.

The site is almost 100% one page. There are some special pages we did as one offs because of time limitations, but the modules, and overlays all exist on one page that reloads data from the server as needed. This was my first project doing something so complex. Typically we didn't worry about back button issues in our ajax applications at Daptiv, but here being one page it was critical.

This site wasn't the epitome of Technical brilliance, it was more a lesson on what not to do in a lot of situations, but its not really appropriate of me to be so critical. Though here are some of the more high level criticisms.

* PHP isn't the language I would choose for something this complex. It interfaced well with the CMS, but its not something thats easily testable, or object oriented, which I would think is pretty important for a project of this site.

* I have to do a better job of managing large js code bases. The file just kept growing and growing, culminating in a rather large complex js file. There was a lot of rush rush coding here, and thus Refactoring went out the window. But I'm still not sure what the best solution is to this.

* For projects this big, a strong development process is not optional. 3 weeks, thats something you can keep in your head, 3 months, you gotta have something there for that.

Since this project, a lot of positive changes have occurred in the development team, its apparent the added experience from these large projects really are advancing our skills.

In the mean time, check out the site, its really cool!

A critique I received today.

You are just 1 prozac away from being a great programmer.

Those who know me are either completely agreeing with that statement, or are wondering what drugs he's taking.

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

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.

Lastly...

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.

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.

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++.
   http://dotnetjunkies.com/WebLog/rohancragg/archive/2004/05/21/14127.aspx
   http://weblogs.asp.net/pleloup/archive/2004/05/12/130566.aspx
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.

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.

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.

http://www.davidco.com/coaches_corner/Kelly_Forrister/article78.html

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.

http://www.43folders.com/2004/09/08/getting-started-with-getting-things-done

Brain dump time.

• Using a strict XHTML doc type in IE 6, a DIV can only be as small as its line height and font size are defined as.

• A little random, but if your setting up a Fitnesse test suite, and have a .NET config file, you need to make your config file the same name as the fitnesse server config. This is because your process runs inside the Fitnesse executable and its going to search for its config file for your settings. (I think its fitnesse.exe.config) I didn't see this on the internet anywhere, so I thought I'd mention it.
• I dislike the AlphaImageLoader IE 6 filter. Its nice that its there, otherwise PNG's would still be mostly pointless, but the limitations it provides are disgusting. (A post for another time)
• If you've never worked in a design studio before, your missing out on the gamut from eccentric to mundane. Positioning fonts pixel perfectly was never a concern of mine considering the imperfection of CSS, and the display of web pages across different platforms. (Different monitors, different browsers, different tubes between the computers)
• CSS and Semantic architecture doesn't get enough lip service. This is one hard thing to do to get your HTML to be nice and semantic so that it your CSS can cascade across the entire site properly and without massive CSS hacky things.
• I hadn't used the CSS syntax of .class.class to match elements before and now I know why. It doesn't work in IE 6, which can make this a really big problem if you were relying on it for some reason. (Don't ask).  This selector which reads as, "class that has class"matches things like, "box red show", so if you had .box.blue no workie, but .box.show would work just fine.
  • We had some HTML that went, class="module news", and when I went to change all the H2's in the news section only, IE 6 barfed. Led to some icky CSS.

I remember from watching a video on the YUI Theater by Nate Koechley on the YUI CSS Foundain library and heard a sweet little trick to write CSS comments for IE only without using conditional comments.

His trick was to just append an asterisk (*) to the beginning of any command that you want to be IE only.

Just remember to do your IE only command after the firefox command.  If you switched the two heights, IE would still read both and set its height to 600px.