How To Spot A UI Guru

gu·ru (gŏŏr’ōō, gŏŏ-rōō’)
n. pl. gu·rus

  1. A trusted counselor and adviser; a mentor.
  2. A recognized leader in a field: the guru of high finance.

There is a definitive line between the skill set of a front-end (what you see and do on a web page) and a back-end (what happens behind the scenes.. think e-commerce). Depending on the size of the development team, the same person may or may not fill the shoes of both roles. You can always spot the front-end developers of a company because of their rhino Javascript O’Reilly book and at least one or two CSS books for reference. Additionally these developers will have at least two browsers installed on their machine for testing purposes.

Some gurus prefer to be considered designers, some call themselves developers while in actuality you really should have a little bit of both skills to become efficient at the trade. There is certainly an art to designing a usable yet visually appealing website. Although looks don’t always equal a usable design, we try to make it as nice as possible anyways. Many times the page markup itself will be a work of art in its own right as this sample from css zen garden demonstrates:

<div id="container">
	<div id="intro">
		<div id="pageHeader">
			<h1><span>css Zen Garden</span></h1>
			<h2><span>The Beauty of <acronym title="Cascading Style Sheets">CSS</acronym> Design</span></h2>
		</div>

		<div id="quickSummary">
			<p class="p1"><span>A demonstration of what can be accomplished visually through <acronym title="Cascading Style Sheets">CSS</acronym>-based design. Select any style sheet from the list to load it into this page.</span></p>
			<p class="p2"><span>Download the sample <a href="/zengarden-sample.html" title="This page's source HTML code, not to be modified.">html file</a> and <a href="/zengarden-sample.css" title="This page's sample CSS, the file you may modify.">css file</a></span></p>
		</div>

		<div id="preamble">
			<h3><span>The Road to Enlightenment</span></h3>
			<p class="p1"><span>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible <acronym title="Document Object Model">DOM</acronym>s, and broken <acronym title="Cascading Style Sheets">CSS</acronym> support.</span></p>
			<p class="p2"><span>Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the <acronym title="World Wide Web Consortium">W3C</acronym>, <acronym title="Web Standards Project">WaSP</acronym> and the major browser creators.</span></p>
			<p class="p3"><span>The css Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the (yet to be) time-honored techniques in new and invigorating fashion. Become one with the web.</span></p>
		</div>
	</div>
</div>

If your web page markup at all resembles this then you are well on your way to being a UI guru. Gurus go to extreme lengths to ensure that their sites both function and appear identical to the most users as possible and in today’s Internet is is no small feat. If you think this is an accomplishment, consider the fact that beyond the basic concepts many gurus are self taught. While schools teach the fundamentals of making a functional website they likely won’t get into the facets of designing a quality site that appeals to everyone. Web standards, usability, search optimization are all topics that I myself have had to lean independently of college. What’s so nice about the web platform is that markup is open for any software or technology to develop on, this is most apparent when it comes to the type of application to develop with. While not always the case, these applications are encouraged to abide by the standards put in place by the World Wide Web Consortium (W3C). In time you will learn not to rely on the application to format your markup and be able to write code with just about anything.

For all of those aspiring UI gurus out there, perhaps the best way to learn UI is through trial and error. We learn new concepts and solutions to problems by talking with colleagues and by spiking out through web searches for ways to improve our skills. We also learn by closely following websites authored by industry leaders and finding ways to add our own unique twist to those concepts. Books and websites alone aren’t enough to become proficient, just like anything, the more you practice the better you become.

Recommended books

JavaScript: The Definitive Guide, Fifth Edition
CSS Mastery
Bulletproof Web Design

Recommended Websites

Nettuts.com
A List Apart
Think Vitamin

More

Using jQuery Selectors

jQuery Selectors are a powerful feature of the framework that is essentially one of the main reasons that you’d want to use it in the first place. Those who are already familiar with how CSS3 selectors work will feel right at home with the concept of selectors. Today’s modern browsers at best support “most” of the CSS3 specification (with Firefox 3 & Safari), while others use only limited features of it. What’s so nice about jQuery is that the browser doesn’t need to support the CSS3 specification for you to use them within the framework itself. Those familiar with XPath will also be happy to know that simple XPath selectors are also supported via a plugin for jQuery if preferred. Here are some examples to demonstrate the power of selectors:

Style alternate table rows

$("table#mytable tbody tr:even").addClass("alt");

Add text based on a link’s file extention

$("a[href$=.pdf]").append(" (pdf download)");

Style links to external sites

$("a[href^=http://]").addClass("external");

Keep in mind that these are one line of code each that would otherwise take somewhere between 5 and 10 lines of javascript. As an added benefit, they also will execute as soon as the document object model is ready since the “$” shortcut function performs this for us behind the scenes. It is essentially waiting for the earliest time that the script is able to run, when all markup has been loaded (but not images or flash videos) so that we’re not having to wait for larger files to load before hand.

jQuery also has custom selectors which act like shortcuts for some common tasks. For example, you can find all buttons with $(:button), find all checkboxes with $(:checkbox), etc. If you would like to learn more, there is a jQuery selector documentation on their website as well.

More

Think your WiFi is secure? Think again.

Upon digging into a network issue that happened the other day I came across some interesting facts about wireless security. Namely one which criticizes WEP (wired equivalent privacy) security which actually originated with the first generation of wireless networking equipment. The flaw is the result of the static nature of WEP keys which makes them easy to decipher. Its been reported that German researchers were able to compromise a network that used a 104-bit key in under a minute with no more than a 1.7GHz Pentium M computer. Because of these concerns it is recommended to use the newer, more robust WPA (WiFi protected access) encryption as this technology was developed because of the shortcomings of WEP.

More

jQuery Framework First Impressions

Javascript frameworks come in a variety of flavors, they’ll typically encapsulate common practices that web developers frequently use in their sites. With the three dominant mainstream browsers (FF3, IE7, Safari and potentially even more) to worry about, each with a slightly different technique to program for, it can be a good practice to use a tested framework which works across the board and remove the overhead associated with testing common methods.

The framework which I’ve come to grow quite fond of lately is called jQuery. JQuery is best described as a type of web designers toy box that focuses on separating content from functionality. So what do I mean by this?

Here is an example setup for a jQuery project.

Sample jQuery Page Structure
$(document).ready(function(){
   $("#Button1").click(function(event){
	alert("Say Something");
 });
});

Whats nice about jQuery is that the footprint is relatively small at 54k or less, and if you prefer there is a file hosted from the Google API website which you can link to directly inside of your page. In fact you’ll find that many tasks require a minimal amount of code to achieve some impressive results.

// Resize lightbox on button click

$(document).ready(function(){
   $("#Button1").click(function(){
      $("#lightbox").animate({
          width: "1000px", 
          height: "400px", 
          fontSize: "3em"
      });
   });
});

Those familiar with object oriented programming will be glad to know that jQuery also supports chainability as in this example.

$("a").addClass("test").show().html("foo");

The jQuery framework is becoming increasingly popular among many high profile sites such as Netflix, NBC and Dell to name a few. Even the Microsoft development community is taking notice as their next update of Visual Studio will be providing jQuery code completion within the software itself.

For more information on jQuery you can visit their website: http://jquery.com/

More

Blogging explained in plain english

To some extent, I’d like to think that this blog is meant for a wide range of visitors. So I’ve decided that in an effort to widen my audience, I’ll occasionally be posting material that is more suited to those without much technical knowledge and Internet savviness. With that said, here is a short 3 minute video from CommonCraft.com that breaks down the concept of blogging into simple, easy to understand terms.

More