The Value of Listening to Your Clients

I was recently privy to an internally published post-mordem of a SaaS company that shut its doors after multiple years of development and many rounds of angel funding.  Their failure is truly a gift to anxious entrepreneurs out there who believe they are sitting on the next billion-dollar idea.

While I can’t reveal some of the proprietary details of the company or its specific issues, I can tell you some of the important lessons they learned.

LISTEN TO YOUR CLIENTS

I say this as a twelve year web developer: do not let developers drive the priorities of your web app.

The product team in this case wanted to build a private social networking site.  They spent way too much time building out functionality that will always pail in comparison to what Facebook or LinkedIn can deliver.

Their clients had REAL needs.  Needs that seemed to be “one-offs”.  The company didn’t see an opportunity to drive a business from these needs.  So they continued building out a Facebook killer.  What a mistake.

Saddest of all, they had potential for large (paying!) opportunities if they would just latch on tighter to their clients and listen to their needs.  They purged friends and friends of friends for opportunities and churned through each relationship.  To their clients, their company looked like a small child showing a sketch and asking the dad if the picture is a masterpiece.  Of course, says daddy, but I’m not gonna hang it over the fireplace.

DON’T GO LIVE UNTIL YOU’RE READY

While I am religious about agile and iterative development, there is something to be said for putting out a complete message when you go public.  Can you imagine if Apple released the iPhone 1 but it couldn’t make a call?  A lot of companies confuse Agile iterations with production releases.  Don’t rush the project into Beta until you’ve fully explored your ideas.

 


Google+ grows to 40MM

Google+, or as I call it–Facebook is not about the technology, has grown to 40MM users.  That’s incredible, but I gotta imagine the staleness must be off the charts.  I haven’t touched my account in months.

In fact, the only Google+’r I know who is active on that dang thing is Bill Gross of Idealab.

What do you think?


RIP Dennis Ritchie

Dennis Ritchie invented the C Programming Language while working at Bell Labs.  His contributions to Computer Science, Unix and more cannot even be expressed in this little blog post.

I was first introduced to Ritchie’s work in college during my first programming class in the fall of 1998.  I’ll never forget the first program I compiled.  I was working with the Borland Turbo C Compiler and my professor had taught us how to write a simple “Hello World” program.

We saved our little programs onto a 3.5″ floppy disk and inserted it into the professor’s computer.  He then had us run a verification program that would test our “Hello World” app to make sure it worked correctly.

This was all very exciting for a geek like me.

Ritchie’s work on C paved the way for Object-Oriented programming with C++ (a clever way to say “The Next Iteration of C”) by Bjarne Stroustrup.  This work eventually spawned Java by James Gosling.

Java, originally written to power toasters and appliances, would  eventually become the core technology that powered the web for several years.  It’s funny how life works like that sometimes.

C eventually would be the backbone of Perl which ultimately spawned PHP.

Apple, Inc uses Objective-C (another object-oriented flavor of C) for the lion-share (pun intended) of their development.

Where would technology be without Mr. Ritchie’s contributions?


Things we rebuild constantly

There are a lot of great frameworks out there that automate the things we end up building over and over again.  They call this “scaffolding.”  With Symfony, for example, you can generate the Admin Console of your website by reverse-engineering the database.

We recently launched Image Monkey (imgmky.com) which automates the processing of images.   This has been a huge time saver for our prototyping.  Instead of writing image code, we can just send our source images through Image Monkey.

What are some other tasks that we, developers, are constantly redoing?  Here’s my list…

User Registration

I’m so tired of this.  User signs up, they click on a confirmation link and have a valid account with an encrypted password in the database.  Drupal does a great job of creating a starter registration framework, but unfortunately Drupal is a nightmare all its own.

Wouldn’t it be great if you could define a registration form in a remote server and import the form through Javascript?  Never worry about registration again.  It just might work.  We’ll see.  Or maybe a better solution is to just build a Symfony user-registration module that can plug into any project.

Profiles, etc

This sorta goes hand-in-hand with registration.  Once a site has account management, you know somebody in the offices upstairs is gonna want the ability to have social media profiles.

 

 


DOM Manipulation with JQuery

If you’re using manual Javascript to manipulate the DOM elements in your webpage, well you’re just…DOM.  What can I say?  JQuery makes life so easy it’s insane.

JQuery is browser-safe and has an incredibly simple interface for accessing elements by id, name, or through a filtered search.

Suppose you wanted to show an alert box that says “Under Construction” whenever somebody hits a button.  An incredibly impractical feature, I know, but the old way was to do the following:

<input id=button type=button onclick=”alert(‘Under Construction’)” >

This is fine on one element, but soon it becomes a real maintenance nightmare.  You’ve got markup and scripts colliding all over the place.  Let’s extend the concept, let’s say I want to change the content of my header to say “Under Construction” when somebody presses my magic button.

The old way:

<h1 id=title>Here is my great website</h1>

<input id=button type=button onclick="document.getElementById('title').innerHTML = 'Under Construction" >

As you can see, this is starting to get messy.

Now enter JQuery.  Take the example above, I’ll separate my JavaScript behavior from the layout.

<h1 id=title>Here is my great website</h1>

<input type=button id='button'>

and I’ll add a separate <script> tag to process the button click…


$('#button').click( function() {// Adds a click listener event
  // here is my logic once the button is pressed
  $('#title').val( "Under Construction" );
});

And there you have it!


Introducing Image Monkey

Have you ever been mid-way into a web app and then thought…ah, I gotta download, configure, and remember how to use Image Magick or some other image framework?  Well, worry no more friends, because Image Monkey (imgmky.com) is here to save the day.

Image Monkey is a web-based interface into image manipulation and caching.  Simply request a URL from Image Monkey and it will handle resizing, caching, and serving up an image.

Say I have an image like this

http://www.gravatar.com/avatar/60a65ef5ca5d0a6f056586bfffd4d98a

If I want a 50×50 version of this image, I can just ask Image Monkey for it and that crazy monkey will make sure it gets done in the most efficient, speediest way possible.

<img src=”http://imgmky.com/gen?key=MYKEY&url=http%3A%2F%2Fwww.gravatar.com%2Favatar%2F60a65ef5ca5d0a6f056586bfffd4d98a&size=50×50″ />

For more info, checkout http://imgmky.com to see how easy it is to resize, cache, and serve images for your webapp. Oh yeah, ImgMky is FREE and open-source! So have a blast.

Image Monkey Homepage and GitHub
~ Sap


FREE Image placeholders speed up your web development

Here’s something kinda fun I found the other day.  If you’re a fan of Blueprint CSS you know that the best way to design a web site is to lay out the content first and not worry about things like colors, graphics, and logos.

To take the concept even further, I discovered a collection of image placeholders created by Gareth Saunders.  This has everything: grids, banners, logos, badges, and more.  Don’t worry about finding the best logo for “Download as PDF” when you’re in the Prototyping Stage (I will write a blog on this soon), identify the approximate size of the logo and use an image placeholder.  They look like this:

Isn’t that great?  Your first prototype should be FILLED with these image placeholders.  You will save a TON of money in buying icon packages from sites like iStockPhoto.com if you WAIT until the site look is finished.

I speak from personal experience here.  Sadly, I have probably wasted hundreds of dollars on clip art and icons that I never ended up using.

Download the whole library here FREE:

http://www.garethjmsaunders.co.uk/blueprint/placeholders


New Firefox, me likey

I just downloaded the newest version of Firefox(7.0.1).  For over a year I’ve been using Google Chrome exclusively because it’s lightweight and starts blazing fast.

For some time, it seemed, each release of Firefox was making the renegade browser slower and slower.  I love Firebug and the Web Developer tools suite, but using a browser as memory intensive as Firefox eventually got to me.  During my hiatus, I discovered that Safari actually had a nice set of development tools including a device simulator.  On a recent call, a client wondered what his site looked like on an iPad and neither of us had the magic device in our pocket so I simply used the Safari simulator to render the site using the iPad view.

Not too bad, Safari.

But the new Firefox has apparently taken a page of Chrome’s playbook.  They’ve reduced the size of the toolbar, cut the fat, and even taken the trouble of upgrading all my plug-ins (Firebug, Charles, etc).

So I’ve set my default browser BACK to Firefox.

 


RIP Steve Jobs (1955-2011)

Yesterday was a rare rainy day in Southern California.  I was driving home in my cheap rental car (my car is in the shop) and I started flipping through Twitter on my iPhone as I sat in traffic.

I saw the headline and my heart sank, “Apple confirms former CEO and co-founder Steve Jobs has died.”

I knew it would happen soon, but I still didn’t want to read those words. He left us too soon.

I was first introduced to the PC with Windows 3.0.  My dad’s work had provided him with a slick Compaq laptop.  It was futuristicly thin, with a bright screen filled with vivid colors.

Meanwhile, another computer story was being rebooted.  Jobs had been out at Apple computers for sometime.  Macs were those other computers that teachers had.

I connected w/the second tenure of Steve Jobs when I was visiting a friend at Chapman University in Orange, California.  In their office they had these bright-colored pods.  It was a computer and monitor built into a single device.  They called them “iMacs”.

What was this?!  It got my attention immediately.  The ad campaigns rolled out thunderously with pictures of John Lennon, Muhammad Ali and other culture creators with their soon-to-be-famous catchphrase “Think different.”

It was a challenge, I thought.  Microsoft had conquered the personal computer space and this little computer company was telling us that we were all lemmings.  If John Lennon were alive, the ad said, he would be using a frickin Mac!

After a few years in software development Macs became more and more prevalent.  The graphics guys liked them.  They said Photoshop worked better on a Mac.  Then the writers started using them.  Suddenly there was two classes of people in the workspace: the creative people and the cube-dwellers.

Then came OSX.  And as a developer, I was thoroughly intrigued by one idea: it was built on Unix (Well, BSD).  For years I had been using PuTTy, the desktop SSH client.  With a Mac, I’d have native shell access.  My apps would be developed in an environment much more like our servers (we had all given up on Windows Server by 2002).

I bought my first Macbook Pro in 2004.  All the developers that worked with me laughed at me.  “You just paid twice as much as I paid for this custom-made computer I built at Fry’s.”

I didn’t care.  I wasn’t buying a Mac to look cool, I really believed it would improve my development ability.  And it did.  Soon I was operating on multiple terminal windows, deploying local servers from native shell scripts.  The eyeballs started peering over the cubicles.  One by one, Macbooks started appearing in the office.  People were telling the IT folks, “I’d rather buy my own Mac than use your free PC.”

Desktop support soon found themselves twiddling their thumbs.  Nobody needed their help anymore.  There were no more, “My computer is running slow,” phonecalls anymore.  There was just…work.

I have created websites, software, music, movies, books, and more on my Mac since 2004.  It changed everything.

Mr. Jobs, thank you for your innovation, your influence, and your example.

~Sap


The magic of Blueprint CSS

Joshua Clayton, I could kiss you.

I’ve been building webpages for over 12 years and if there’s one thing I’ve always hated, it’s styling HTML and CSS.  There are a number of reasons I’ve loathed this process but it mostly comes down to this

  • Browser-variances (I’m looking at you IE)
  • CSS blows
  • I tend to get bogged down in color selection
  • Slows down functional development

Enter Blueprint CSS.  Suddenly the entire world of laying out a webpage has become a simple process.  Fonts, grids, and colors are automagically handled by Blueprint and I can focus on building a functional app.

To use Blueprint

Download and unzip the blueprint folder from their website.  I usually put it under my css/ folder so the tree structure should look like this

  • web/
    • css/
      • blueprint/

Include the following Blueprint directives in the <head> tags of your application

<link href="/css/blueprint/screen.css" media="screen" rel="stylesheet" type="text/css" />
<!--[if lte IE 8]><link href="/css/blueprint/ie.css" media="screen" rel="stylesheet" type="text/css" /><![endif]-->

And there you have it.  A basic framework for building pages.

Blueprint comes with a few standard elements.  I’ll go into those in more detail later, but here’s the ones you’ll be most interested in

  • “container” a CSS class that creates a center-aligned box for the bulk of your application
  • “header” an HTML5 element for creating the top bar
  • “nav” an HTML5 element for storing your file menu
  • “span-1″ – “span-24″ – Blueprint has 24 columns available for use.  You can use these elements to position your columns.  It saves a TON of work.

Play around with Blueprint CSS and you’ll find it’s a huge time saver and gives you a clean looking application with minimal effort.

~Sap


Follow

Get every new post delivered to your Inbox.