I’ve been sick a lot lately. In fact, in my entirely life, I don’t ever remember being this sick for this long. It’s been weeks with the same cold – months if you consider the on-again/off-again problems I’ve been having. I guess it could be my fault. I’ve never been a big fan of drugs or doctors.

During my sick time, I try to do some work and often find myself barely able to concentrate. You know how it is, your head feels like its floating, and then you cough or sneeze and you feel as though your body has shaken apart into a million pieces. I’ve always equated that feeling with the visualization of my head becoming pixilated or snowy. That brings me, ever so strangely, to my current topic.

It’s been years since I focused on the front of web development issues. Back in the late 1990’s and early 2000’s I tinkered with client-side web development a great deal. I was writing “Ajax” applications before they were known as that. Of course, they all ran on intranet sites for my clients because they would only work in IE. I learned something back then. It was all a matter of pixels. In many cases, you had to take a box model and calculate precisely where things were and how they should line up. Of course, back then I was still using tables for layouts and cutting up images into manageable slices to put in individual or spanned table cells. Making those images line up, then, was extremely important to work on all browsers.

Over the years, I drifted away from client-side development. I have been concentrating on the back end of the web development stack. IIS, Apache, SQL Server, MySQL, MSMQ, MQ Series, BizTalk, WF, Remoting=>WCF, and associated technologies have been where I spent my time. What happened with data once my server pieces were done was beyond me. As a 3-year veteran working with IIS at Microsoft, you can see why this is important to me. That said, to help make IIS a better web server, it is always useful to actually know what is being served by your webserver, and why it may be important to you. I started playing with ASP.NET MVC which of course means I had to look at the “View” side of things again. To get a better grip on ASP.NET MVC, I decided to implement my blog in Oxite. Oxite isn’t a product, its a technology sample that is being followed to its logical conclusion – full implementation. This project fills the void of most samples by truly evangelizing the technology in a real-world implementation that can (and should) be implemented by others. Many of the samples out there are great examples of how to start an app, but never demonstrate that you can fully implement your project in the technology.

So, as I decided to dive in again and start playing with client-side development, I realized quickly that I needed to relearn everything I once knew. Box models were still important, but so was understanding the nuances of where my pixels within the context of their containers. Unlike with tables, that are fairly predictable, I learned very quickly that CSS-based DIV layouts can break down quickly if you aren’t using the proper attributes in your styles. div wrapping, overflow, z-indexes, display styles all became important topics for me to learn. I was trying to learn All this while I was laying sick in my bed!

I must say that I’m hooked now. I love technologies like jQuery. I’ve written a few plug-ins already. Some of them you see on this site, others will be on my site soon. Some will be coming in next revisions and available for download from this site. You can get the twitter client plug-in that scrolls at the top of this site’s page by downloading the Oxite skin on this website. I love that the community has developed many resources such as Yahoo’s CSS reset and associated style sheets.

Don’t get me wrong, I’m not an expert in these technologies overnight. I’ve got a LOT to learn. But I just keep telling myself, its all a matter of pixels. Count them out and everything will turn out ok!

Some resources for your own journey in client-side design/development:

• jQuery – jQuery is a technology rooted in Microsoft’s leading XmlHttpRequest object. jQuery native core allows you to assign behavior to elements of the document object, perform common tasks such as layout, animations, fades and much more. This site’s plug-in repository is worth checking out and scouring for examples.
• jQueryUI – If you like jQuery, this framework of UI plug-ins will help you get a clean, professional look for any website. The site allows you to create a customized theme, download it, and apply it to your layout. Absolutely brilliant.
• YUI – Yahoo User Interface Library provides many user interface modules. I highly recommend the reset CSS. It helps all browser get on the same footing as far as padding, margin, borders, and spacing go. Very useful tool to help you achieve your desired look/feel on all browsers.
• The Ajaxian – Great blog with useful information about developing dynamic content on the client side.
• Introducing JSON – A good starting spot to learn about JSON (JavaScript Object Notation) and associated extensions such as JSONP. JSON allows you to serialize objects across Ajax requests. jQuery provides support for JSON/JSONP.
• Microsoft: Introduction to JSON in JavaScript and .NET – Useful information to further your understanding of JSON.
• HTML 5 Draft Recommendation – It always helps to know where your rendering specification is heading. HTML 5 supports things such as canvases that can render objects of irregular shapes and even manipulate individual pixels.
• Common layouts – This useful site provides the code needed to produce common layouts in fixed and fluid mode.
• Firebug – This tool is useful if you need to inspect a website’s output and determine what isn’t working. Often times it is hard to tell what setting is making our layout go wildly wrong. Firebug allows you to view the aggregate of your CSS calls for a given element, and let you see where your settings are coming from. The tool is invaluable to any client-side developer.
• FireUnit – Provides JavaScript debugging. This is a necessary tool for anyone developing modern, dynamic, and interactive web UI today.
• Color Schemer – This site provides a great tool to create color pallets for your site.

There is so much more to look at that I’m leaving out here. Obviously I could make the list extremely long. However, emphasizing everything means I am emphasizing nothing. I suggest those sites above as a good starting point.

Happy Coding!