Everything in Scrum…

• is a time box (aka sprint), so things don’t go on forever
• is done with cross functional teams who don’t need to be managed
• has a constrained team size ( under 8 people )
• has to achieve some form of a shippable product at the end of each time box / sprint
• assumes that you are intelligent enough to come up with a solution to the problem at hand
• requires minimal or no interruptions while sprinting

Additional points

• Scrum goes hand in hand with Extreme Programming practices.
• Working more hours does not equal better code quality. Code will likely become exponentially worse as a result of quick fixes and ideas that haven’t been adequately thought through. The cost to fix these issues even outweigh the cost that would have been saved by keeping normal work hours. As a result, overworking is not a good way to increase project velocity.
• Unexpected features can harm project velocity in such a way that if not adjusted in time for quality control will cause future iterations to gradually worsen as you build upon a flawed code base. This continues until eventually you have a “design dead” product.
• Over 65% of all functionality that is delivered (which must be maintained) is rarely or never used.
• 35% of all requirements change during the life of a project.
• Using a prioritized list of features, overtime the items will begin to loose value and at some point the time may be better spent elsewhere.

Resources

The Innovators Delima
Scrumalliance.org

Microsoft Silverlight 2: Control Model
http://channel9.msdn.com/pdc2008/PC29/

Styling a Silverlight based Twitter application with Expression Blend 2
http://channel9.msdn.com/posts/Dan/Celso-Gomes-Styling-a-Silverlight-based-Twitter-application-with-Expression-Blend-2/

Helpful Links:

• Snoop (WPF Debugging utility)
• Nibbles Tutorials (Redesigned silverlight site by Celso Gomez)

“Since 1991, the Professional Developers Conference (PDC) has been Microsoft’s premier gathering of leading-edge developers and architects. Attend the PDC to understand the future of the Microsoft platform and to exchange ideas with fellow professionals. You’ll learn about upcoming products, meet Microsoft’s leaders and top engineers, write some code, and be inspired! Unplug for a few days and think about the future.”

ASP.NET 4.0 Roadmap
http://channel9.msdn.com/pdc2008/PC20/

ASP.NET and JQuery
http://channel9.msdn.com/pdc2008/PC31/

Microsoft Visual Studio: Web Development Futures
http://channel9.msdn.com/pdc2008/TL48/

ASP.NET MVC: A New Framework for Building Web Applications
http://channel9.msdn.com/pdc2008/PC21/

Its almost been a week now since Google’s new Chrome browser has been released to the public and from what I’ve been seeing, the response has been overwhelmingly good. While its too soon to tell how much adoption the new browser will have especially to your average web user, if this past week is any indication of this then we may have one serious contender on our hands.

The idea behind the new browser was Google’s acknowledgment of how much time we spend online conducting our daily business, whether it be online banking or sending email. Sites are being developed now that are capable of performing much more complex tasks than we would have ever imagined 15 years ago when web browser were first introduced. This realization has given way to finding a better browser architecture capable of dealing with the high demands of sites such as online word processors, airfare booking, maps and many other types rich internet applications.

So I guess the more important question is should you be using Chrome in its current development state? Do you like to jump in feet first and test the waters with a whole new experience? Are you not concerned with bugs, incompatibilities or worse.. potential security holes? Then by all means, this is your browser. Now don’t get me wrong, this isn’t trying to imply that there is anything wrong with treading new ground and pushing new technology. For myself though, I’ll be mostly using Chrome as a fun new toy to experiment with rather than migrating over entirely. What I’m really interested in seeing is what will come out of the open source community that is actively working on the browsers core which I believe in time that we will see great things come out of the chromium project which powers Chrome. While there is no certainty that Google Chrome itself will come out on top when its all said and done, but there is no denying that it will be known as the browser that was at the forefront of a new undertaking in how we think about today’s web applications.

Pros:
Introduces a new way of thinking about how browsers work
Innovate way of handling complex websites with V8 JavaScript rendering engine (complied)
The UI is simplistic (the browser should be transparent)
Everything is open source!

Cons:
Google is a company that is best known for it’s services NOT it’s software.
The UI is simplistic (I miss having my firefox plugins at my disposal)
As if web developers need one more browser to test on
Too early to tell its adoption rate

This first solution has stood the test of time and is known as the clearfix method. This technique uses the :after pseudo-element which is supported by CSS2 compatible browsers. Unfortunately, this doesn’t include Internet Explorer 7 and below. You may notice that there is actually two style blocks for our CSS and that is because we are using conditional comments that will target any Internet Explorer browser and use the proprietary hasLayout CSS attribute that must be commented or else your page will not validate.

<style type="text/css">

  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

</style><!-- main stylesheet ends, CC with new stylesheet below... -->

<!--[if IE]>
<style type="text/css">
  .clearfix {
    zoom: 1;     /* triggers hasLayout */
    }  /* Only IE can see inside the conditional comment
    and read this CSS rule. Don't ever use a normal HTML
    comment inside the CC or it will close prematurely. */
</style>
<![endif]-->

View Example #1

Another method uses an additional <div> element on the page with a style of “clear:both” which will force your container to accommodate the cleared element. While just as effective as any of the other methods, there is the concern of adding additional “meaningless” markup to your pages.

<div id="outer">
    ....
    <div style="clear: both;"></div>
</div>

View Example #2

Finally there is a relatively newly discovered technique which is quite easy to implement and is one which doesn’t require additional markup. It simply involves adding a “overflow: auto” property to the outer <div> element.

Half an hour of testing later, I was amazed to find Paul was 100% correct - as this example shows. It seems that reminding the outer <div> that it’s overflow is set to ‘auto’, forces it to think “oh yeah.. I’m wrapping that thing, aren’t I?”.

-Alex Walker, sitepoint.com

View Example #3

So there you have it, three different techniques that will help you clear all of those pesky float issues.

The form results are displayed to you in a nice pie chart. The actual data is output into a spreadsheet behind the scenes if you need to use it for any other reason which is a nice touch as well.

An alternative service that I also recommend is called WuFoo. This service is free to try and allows for further customization of your web forms. I kid you not when I say that seemingly everything that you could ever want is included with this service such as phone number and date fields which include custom validation messages built in. There is a monthly fee as your usage increases however.

For me personally, Google Docs does just fine for my needs. Feel free to give your ice cream preference if you’d like to try out a sample form.

We’ll first start out with some html markup, notice the lack of css class attributes or JavaScript event handlers present.

<fieldset>
	<legend>Log In</legend>
	<p id="loginResult">Invalid login.. try again.</p>
	<form id="login" method="post">
		<dl>
			<dt><label for="username">Username:</label></dt>
			<dd><input id="username" type="text" /></dd>
			<dt><label for="password">Password:</label></dt>
			<dd><input id="password" type="text" /></dd>
		</dl>
		<p><input type="submit" value="Login" /></p>
	</form>
	<small>u:username / p:password</small>
</fieldset>

The next step we take is to target each element down the list and assign it a css class. We do this by using jQuery’s element specific selectors :text and :submit.

	$(function(){
		$('form#login :text').addClass('inputTextbox');
		$('form#login :submit').addClass('inputSubmitBtn');
	});

Next, we’ll add the event handler for the submit button by using .click(). To make things easier on ourselves we could always shorten our code by chaining the click event at the end of our submit button selector which was already defined in the previous step.

$('form#login :submit').addClass('inputSubmitBtn').click(function() {
     // click event code
}

Throw in an animation for good measure to display a message for invalid attempts and you’re good to go. Here is the full JavaScript code we’re working with.

		$(function(){
			$('form#login :text').addClass('inputTextbox');
			$('form#login :submit').addClass('inputSubmitBtn').click(function(){
				if($('#username').val() != "username" || $('#password').val() != "password")
				{
					for(i=0;i<5;i++)
						$("#loginResult").animate({opacity: 'toggle'}, 500 );	

					$("#loginResult").fadeIn(500);
					return false;
				};
			});
	    });

Join Eric Meyer, Jeffrey Zeldman and special guests to gain a deeper understanding of web standards and emerging best practices. Be inspired by fresh ideas and new directions. Join the greatest minds and hottest talents in web design today.

The Ajax Experience
September 29 - October 1, 2008 in Boston, MA

The only Web 2.0 development event created by developers, the real experts working in the trenches who have encountered and conquered today’s most pressing pain points. The Ajax Experience is the original and most in-depth rich internet application conference addressing cutting edge topics, from cross-browser compatibility to how to choose the right framework and everything in between. We bring you sessions on performance, scalability, server-side and client-side development, and JavaScript from industry experts who face the same day-to-day challenges as you do. Whether you’re a designer, developer, tester or manager, The Ajax Experience provides you with sessions to take your skills to the next level and enhance your professional development. Guaranteed.

Future of Web Apps
October 8-10, 2008 in London (San Francisco and Miami have also hosted)

The Future of Web Apps showcases the successful web technologies and business trends of the future, delivered by the pioneers of today. Attended by all the major European and US start-ups and industry experts, it’s the best place to learn directly from the developers, designers and entrepreneurs behind the web’s brightest stars in a relaxed and fun environment.

The Future of Web Design
November 3-4, 2008 in New York, NY

Join world-leading web designers in NYC for one day of inspiration, advice and best practice.

(SXSW) South by Southwest Interactive
March 13-17, 2009 in Austin, TX

The SXSW Interactive Festival features five days of exciting panel content and amazing parties. Attracting digital creatives as well as visionary technology entrepreneurs, the event celebrates the best minds and the brightest personalities of emerging technology. Whether you are a hard-core geek, a dedicated content creator, a new media entrepreneur, or just someone who likes being around an extremely creative community, SXSW Interactive is for you!

Mixx 2009
March 18-20, 2009 Las Vagas, NV

MIX is an ongoing conversation between web designers, developers, and business decision makers. We showcase topics and solutions that bridge Microsoft and non-Microsoft perspectives, and emphasize the inclusive and participatory nature of the next web.

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

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.