Brian Sullivan

Last post I talked about how easy it really is to create professional-looking graphics when you’ve got a decent editor.� Now I’m going to prove it to you!� We’re going to try to recreate this snazzy button from Mint.com:

We might not be able to do it exactly, but it’ll be something with the same general effect.

Step 1:� Open up Paint.NET (or any other similar graphics editor) and set your canvas size to 140×40.� Set your primary color to (25, 108, 200).� This will be the outside border of the button.� Set your secondary color to (41, 129, 229).� This will be the main interior color of the button.

Step 2:� Choose the rounded rectangle button and set it to “Filled Shape with Outline” mode.� Create a shape that fills up most of the canvas.

Step 3:� Next we need to do the “shine” on the top half of the button.� Select the first layer (the one with the blue rectangle) and choose the Magic Wand tool.� Set the tolerance to about 75% and click anywhere in the shape to select it.� Create a new layer on top of the other two.� Choose the Ellipse tool and set it to “Draw Filled Shape,” and make sure your primary color is still white.� Draw the ellipse starting above the top of the canvas and go down about a third of the way into the button.

Step 4:� Go to the “Layer” menu and choose “Layer Properties.”� Set the opacity of the layer to about 85.

Step 5:� Go to the “Effects” menu and choose “Gaussian Blur.”� Set the radius to 2 and click “OK.”

Step 6:� If you’ll notice, there’s a kind of “glow” around the edge of the button.� To duplicate this, first go to the “Layers” menu and choose “Merge Layer Down.”� Then, pick the Magic Wand tool and set the tolerance to 25%.� Click anywhere in the darker blue section to select it.� Create a new layer.� Choose the Rounded Rectangle tool and set it to “Draw Shape Outline.”� Draw an rectangle just on the inside of the button in white.

Step 7:� Do another Gaussian blur with a 3px radius.

Step 8:� Now let’s do the drop shadow.� Flatten your layers again and choose the Magic Wand tool.� Set the tolerance to 75% and click anywhere on the button.� Create a new layer.� Choose the paint bucket and pick a light gray color.� Click inside the selected region to fill it.� Make sure your Layers window is open (F7), and click the down arrow to move the gray rectangle below the blue one.� Choose the Move Selected Pixels tool and hit the down arrow on your keyboard about 3 times.

Step 9:� Do another Gaussian Blur with a 3px radius.

Step 10:� Set the opacity of the layer to 135.

Step 11:� Now put your text on top.� I couldn’t find something that looked like the font Mint is using, so I just used Lucida Sans.

�

Well, it’s not perfect, but I’m starting to get the hang of it, I think.� Play around with it a bit and see what you can come up with.� If you have any suggestions about the way I’ve done this button, I’m all ears!

One of the things that has kept me from doing freelance web work for a long time is graphics.� I’ve had no training in graphic design, and very little natural talent to speak of in the artistic area.� And let’s face it.� In a public facing site, the look and feel is what gets a user’s attention and keeps it, and thus determines a large part of a site’s success.� Your app could function perfectly and provide incredibly useful functionality, but if it looks like the web circa 1996, it’s going nowhere.� So I thought I was stuck.� I thought if I was ever going to be successful as a web developer, I would have to buy my graphics from a professional designer every time.

But a couple of weeks ago when the consulting company came in to demo some of their sites, I started to notice some patterns.� I’m not sure what clicked in my head, but I started to see what design details made the sites look modern and professional.� Now, don’t get me wrong, I’m not suddenly some master designer, but I figure if I can deconstruct what makes other sites look good, then I can try to apply some of those principles to sites of my own and start to grow my skills.

The�one thing I saw almost everywhere was gradients.� Seriously, take a look around your favorite site.� Chances are there will be gradients all over the place.� Everything from backgrounds to buttons to form borders use them.� And they make a huge difference.� For example, take a look at this button from the ASP.NET forums site:

Pretty basic, but still modern and attractive.� Before I started really thinking about it, I probably would have settled for something flat and boring like this on a site I made:

Okay, but not great.� But if we use a gradient instead of the flat blue color, and make the bottom right half of the border just a bit darker, we get this:

See how we get that “3D” effect?� It’s a whole lot easier than I thought it would be.� The trend right now seems to be toward what I think of as “chunky” graphics, especially on modern, “Web 2.0″-ish sites.� Very simple shapes, but with a lot of depth and lighting to them.� For example, take a look at Mint.com.� The buttons, the leaf graphics, and the word balloons all use very simple techniques to give them a professional look.� This is great for novice designers like myself.� We can be trendy even while we’re still learning the basics.

One thing that helps out immensely is having a good graphics editor.� As Jeff Atwood has said, every developer ought to learn to use one.� And not MSPaint, you wimp.�:-P� I’ve been playing around with Paint.NET, and I like it a lot.� It has features that can produce some very nice looking grpahics, but it doesn’t feel crowded or cluttered with unneccessary tools.� And, hey, the price is right!� � I’ve also heard some good things about The GIMP, if you’re feeling Linuxy.

So if you have only thought of yourself as a programmer, unfit to wear that black turtleneck, just give it a try.� Download a graphics editor and try to duplicate a nice simple button or logo from a site you like.� It’s easier than you think.

In response to Chad
Myers admonition to blog now,
I’m going to try my hand at writing about a few of the topics he
suggested, starting with “Unit Testing 101.” I think these
entries will mostly be for me, to solidify my own understanding of
these topics. But maybe I can say something differently than the way
it’s been said before and help someone out a bit.

DISCLAIMER:
I do not claim to be an expert on this or any further topics
suggested by Chad. Feel free to correct me when I post something
that’s incorrect or misleading, but let’s keep it friendly. I’m
a newbie here, okay? Examples
will be in C#.

First off, why would
we need unit tests? We can already build applications that work
correctly without writing a single unit test. Why go to the extra
effort (and write the extra code) when we can get along just fine
without them?

The purpose of unit
tests is to verify that each particular atomic piece (usually a
method on a class) works correctly, independent of the code around
it. By testing a method in isolation, you can have greater confidence
that your method works the way you intended it to. Once you have a
reasonable level of confidence that methods work the way they are
supposed to, you can narrow down the source of a bug by eliminating
possibilities of where that bug might exist. Unit tests also help
when changes need to be made to a system. After you’ve changed the
way a method works, your unit tests can verify that the method still
works correctly.

To illustrate, let’s
look at a very simple method called GCD.
As you might expect, this method will take two integers as
parameters, and return the greatest common divisor of those two
integers. You remember this from Comp Sci 101, right? The method
might look something like this:

static int GCD(int a, int b)
{
        int Remainder;
    
        while( b != 0 )
        {
            Remainder = a % b;
            a = b;
            b = Remainder;
        }
      
        return a;
}

�Pretty simple.  So now, let's write a function to make sure this method returns the correct value for a given set of inputs.

�static void GCDOf10And25ShouldBe5()
{
   Console.Write(“Test – GCDOf10And25ShouldBe5: “);
   int result = GCD(10, 25);
   if(result == 5)
   {
      Console.WriteLine(“Passed”);
   }
   else
   {
      Console.WriteLine(“Failed”);
   }
}

We can write other tests like this for our other methods, and call them all to produce a kind of report that will tell us which tests passed and which failed.  I know what you're thinking.  “Brian, that sure is a lot of code.”  Yep.  And repetitive, too.  Lots of calls to Console.WriteLine.  And what happens when the number of tests you have starts to grow?  You'll have a hard time picking out that one line out of twenty or thirty that says “Failed.”  

Well, that's because I just showed you the old-fashioned way of writing unit tests, using only what's available by default in the programming environment.  If you're going to use unit tests, you need to use a unit testing framework.  There are lots of them out there, for just about every language you can think of (and quite a few that you didn't know existed, most likely).  A lot of them are in the “xUnit” family, which means that they have their roots in a framework called SUnit originally developed for Smalltalk by a guy named Kent Beck.  I'm going to use one of those frameworks, MbUnit, in my examples.  When you download MbUnit or other similar framework, you get a set of libraries to use in your tests, plus a test runner console application (and sometimes a GUI version) that will run all of the tests in a class or group of classes.

So lets rewrite that test we just made using MbUnit.

[Test]public void GCDOf10And25ShouldBe5(){   Assert.AreEqual(5, GCD(10, 25));}

Well, that was a bit shorter at least.  Lets take a look at what's going on here.  That [Test] attribute up top is just to let MbUnit know that this method needs to be called when we use the test runner.  The only method we're calling,  AreEqual, is the backbone of an xUnit type testing framework. When the two parameters passed in to the method aren't equal, an AssertionException is thrown.  It is caught by the test runner and turned into a readable message.  The test runner also keeps track of how many tests and how many failed, and displays a summary once all the tests have been run.

There are tons of other features of this and other frameworks, way too many to go into here.  If I've piqued your interest at all, check out the WikiPedia article on testing frameworks and pick one for your environment.  

� At work, my customers know that there is no way
that they could do the work that I do without some serious training
time.� But all too often after describing something they want done,
they utter those dreaded words, “That should be pretty easy, right?”�
As is true with most professions, the work involved in software
development is both incomprehensibly complex and deceptively simple to
those on the outside.� Something as “simple” as moving an entry field
to another part of a form could take hours of work, depending on how
tightly coupled the system is to its user interface.� On the other
hand, something as “complex” as building a report that allows a user to
sort data, move columns around, and group things on the fly could take
the same few hours given the right tools.

I don’t suppose there’s any easy
remedy for this problem.� You just have to earn your users’ trust over
time that you know what you’re doing.

Today, I listened to a presentation from a company that my employer is thinking about contracting to do some design work for a site we’re rewriting and possibly a new CMS implementation for corporate stuff.� When the presenter talked about how he had founded the company three years ago after building a very successful previous business and then selling it.� Even though the company is still very new, it has contracts with some of the biggest companies in our area (which includes one of the biggest companies in the world).

I thought to myself, “This guy really knows how to make it on his own.”� The more I think about it, the more I think I’d like to own my own business.� Sure, there’s some risk involved, and you don’t have that security blanket that goes with a job in corporate America, but I think being in control of your own destiny is enough to swing me in the other direction.� I think it’s also the desire to build that I’ve written about previously, the drive to create.� I don’t think I’m anywhere close to having the kind of experience I need to be out on my own.� Of course, I could probably use that excuse for my whole career.� And I bet the hard part about it isn’t technical, but being able to build a customer base.� What do you think about being on your own versus working for somebody else?

If you’re one of the millions of Americans whose state’s primary is today, please go vote!� This is the most impact many Americans have ever had on the primary process, with nearly half the states in the union voting today.� Please take advantage of your privilege and fulfill your civic duty.

Call me a copycat, but I decided to install Ubuntu on a partition on my laptop, just to see what all the fuss is about.� Honestly, part of what got me to try it was the fact that my father decided to use it exclusively on one of his machines.� Now, my dad’s no luddite, but he’s certainly not what I would call a hard-core computer geek.� I thought, “Okay, Brian.� If you’re going to be a real geek, have some stones and give it a shot.”�

My overall impression so far is that it is the polar opposite of a Mac as Jeff described it the other day.� Instead of having an extremely closed, almost game-console-like evironment where everything works because it was all designed to work together, you have a jungle of software and� hardware drivers to wade through that may or may not totally explode when used with the wrong command-line flag.� Even the way you obtain and install it feels very by-the-seat-of-your-pants.� It very much feels do-it-yourself, as opposed to the “We’ll take care m of all that silly computer stuff for you, you just concentrate on watching YouTube and checking the weather” vibe I get from a Mac.� The Mac and Linux zealots seem very similar in their motivations for choosing a different platform, but to me Windows is actually somewhere in between the two in the compromise between out-of-the-box usability and freedom of customization.�

Update:� Turns out enabling Gutsy Backports fixed my problem.� Anyone else with Intel’s ICH8 chipset, take note.� Thanks to linuxtechie for posting the solution.

I’m at the beginning of creating my first large-scale ASP.NET application.� I’ve done plenty of WinForms stuff before, but not ASP.NET, and I didn’t realize what a totally different animal it is until recently.� Fortunately, Dino Esposito’s book on the subject is excellent and has helped me out a lot.
The site is essentially a rewrite of an existing classic ASP site with quite a bit of added functionality.

To create custom profile properties, you add something like this to the section of web.config:

���
���
���
��� …

When your custom provider gets called to get the properties from your data store, you’re presented with a collection keyed on the property name from web.config that contain the values of those properties set by the application.� So now, when faced with the task of setting the resulting property values based on what you got from your database table, you must find a way to map those string property names to columns on your database.� Like so:

When Microsoft released .NET 3.0 (which I still think should have been called WinFX), probably the most talked-about piece of that suite of libraries was Windows Presentation Foundation.� One could argue that was only because it was the most demo-friendly of the set, but I think it’s because many people believed that, more than any other piece of .NET 3.0, it has the potential to change the way we build applications.

One thing that kind of worries me, though, is how necessary the designer (the person, not the tool) becomes in the application development process.� For quite a while now, professional designers have been essential to producing a professional-looking website.� Desktop applications, though, have remained firmly in the hands of developers.� Oh, sure, we may have some UI standards or guidelines, but for the most part creating professional applications required minimal artistic talent.� This has been a good thing for me, because I certainly don’t have a naturally good asthetic sense, and I have not taken the time to develop it.

One begins to wonder if non-designing developers even have a future.� The profession we developers most often draw analogies to is the architect.� Our profession has many things in common with architecture, so much so that the best of us are often called “architects.”� However, architects have for a long time not only been responsible for the utility and structural integrity of the buildings they design, but the visual beauty as well.� This goes beyond what we would term “elegance” of design, which may only be appreciated by fellow professionals once they have seen the inner workings.� If an architect is to achieve his goal, his building must be appealing to non-architects.

The argument for a long time has been that the devs are techie geeks who don’t have the capcity for asthetics, and designers are black turtleneck-wearing artists who can’t be expected to grok the computer science necessary to build applications.� However, college architectural programs have tough requirements for both “left-brained” and “right-brained” skills.� It’s not seen as unreasonable to expect both sets of skills from one type of professional, what’s to keep employers from making the same requirements of a developer?�

I think as time goes on, a software professional who possesses only technical skills may be looked at the same as an architect who only knows the mathematical principles behind architecture and can only produce ugly buildings.� Maybe I need to enroll in an art class…

���� The other day, I was listening to the latest .NET Rocks episode with Michael Palin… I mean Simon Peyton Jones… on functional programming and the Haskell language.� One of the things he talked about really struck a chord with me, namely function “purity” in Haskell.�
����
���� In modern programming languages, when we call a function, we know what kind of things it needs to do its job (parameter types) as well as what kind of thing it will give back to us as an answer (return type).� For example, a function in C# may look like this:

int DoSomething(int foo){ … }

���� We know that means it takes an integer and gives us back an integer.� But what it doesn’t tell us is how it affects the state of the rest of the system, like writing to a file or a database, printing something to the screen, modifying variables outside its local scope, etc.� In other words, it may have side effects.� Sometimes, we call functions precisely for their side effects ( void Foo(){…} ).�

In Haskell, though, by default functions cannot have side effects.� These are “pure” functions.� If you want a function to be able to, say, write to a file, you must explicitly declare it that way.� It actually has a different signature from a function that can’t do IO.

I’m not trying to just bash COBOL here (as much as it puts a bad taste in my mouth sometimes), but to say that I think this can influence my design of programs in other languages.� It’s my hypothesis that if more of the functions that I write were “pure” in the Haskell sense, the entire system would be easier to test, debug, and understand.� If anyone else has thoughts on this, I’d love to hear them.