Recursive Function

Recursive Function Blog

Amazing CSS Animations

November 15th, 2007 by August Trometer

WebKit, if you didn’t know, is the web rendering engine behind Apple’s Safari web browser. It’s Open Source, too, meaning that anyone can take the WebKit source and build their own browser.

One thing that amazes me about WebKit is how the team keeps pushing the web forward. Over the past several months, they’ve added a ton of great features for web developers, and they just keep piling them on. Recently they announced support for CSS Animations. These are animations that are specified right within the CSS rather than JavaScript. For many web page animations, this effectively reduces to a single line of CSS code what would previously have been pages of JavaScript.

Here’s an example:

With WebKit, this box will rotate, move, and fade out when you click the button below.

For most browsers, if you click the Fade Out button, the box will simply vanish. If you’re using a WebKit-based browser, however, the box does something much cooler. It will rotate, slide to the right, and fade away, all at the same time. Here’s a screencapture of what it looks like:

Wanna see how it’s done? Here’s the HTML:

<div id="fader">With WebKit, this box will rotate, move, and fade out when you click the button below.</div>

<p>
	<input type="button" value="Fade Out" onclick="document.getElementById('fader').className='fader out';" />  <input type="button" value="Fade In" onclick="document.getElementById('fader').className='fader';" />
</p>

And here’s the CSS:

#fader {
	margin: 50px 10px;
	border: 6px solid #abc;
	color: #345;
	padding: 10px;
	width: 200px;
	opacity: 1;
	overflow:hidden;
	background-color: #fff3af;
	-webkit-transition:all .5s linear;
	}
#fader.out {
	opacity: 0;
	border-color: white;
	border-width: 0;
	background-color:#fff;
	margin-left: 400px;
	-webkit-transform:rotate(360deg);
}

If you’ll notice, the only JavaScript I’m using here is to change the class name on the #fader div, and that could have been just as easily handled through :hover. So with just a single line of CSS, namely -webkit-transition:all .5s linear;, I get all that animated goodness for free. The WebKit blog has more details on how this works, and they’re promising a much more detailed set of documents soon.

Why is this so cool? In addition to being just plain sexy, animations are an important indicator that something in the interface has changed. They catch your eye and direct your attention to a part of the UI that is being affected.

As a web developer, I spend a lot of time adding a ton of JavaScript code to get these animations to happen. With CSS-based animations, none of that extra code is necessary. For developers, that means less time spent on animation code and more time spent on adding actual feature. For users, it means smaller, faster-loading webpages. It’s a win-win!

Thanks WebKit! Keep up the great work!

Money Ball Marketing

November 15th, 2007 by Chris Lucas

Steve Rubel had an interesting post yesterday about new ways to approach marketing called The Moneyball Marketing Era, which is a reference to the popular business/baseball book from Michael Lewis that immortalized Billy Beane as one of the most innovative front office manager’s in the history of baseball.

Essentially Rubel states that marketers need to find new ways to approach marketing opportunities and activities. You need to focus not on reach but on effectiveness, find relationships, and find compelling metrics, like completions of tasks (downloads, buys, sign ups) from a site instead of simple page views. For instance, if you are a social network that is bringing together underwater photo enthusiasts, don’t advertise or look for mentions on TechCrunch or Scoble, but rather look for advertising/marketing opportunities on blogs or sites that are discussing underwater photos, where the smaller number of readers will probably make for better customers or users of your site. Start a new contest for best underwater photos with that site and watch their readers become users of your site.

I agree with this, though I am not sure that it is all that new of an idea. At FormSpring we have been looking at advertising and marketing opportunities for the last few weeks and have been practicing essentially the same ideas that Rubel mentions. Because of the broad nature of our online form builder, we know that we could spend many days and dollars trying to get to all of our different niches (non profits, small business, web designers, education, marketers, event planners, etc.) but we have decided to target web designers because they are the ones who are helping create web sites and who potentially could become the greatest advocates for a tool like FormSpring. We are looking at how to get users to sign up with the most effective use of our ad dollars and marketing hours and what sites within the web design world will help us achieve that.

The answers though aren’t in the explanation but rather in the execution, I think even the least knowledgeable marketer wants to get, or knows he needs to get where Rubel is pointing, but many don’t know how to get there. My experience and humble opinion tell me that testing, testing, and testing are the best ways to get there. I once had a mentor tell me that every marketing program is a test, and that every test better have an answer. So, yeah, find those esoteric stats, create those relationships, but don’t be afraid to test and keep testing (and measuring) until you find out what’s working.

Lunch With Guy Kawasaki

November 9th, 2007 by Chris Lucas

guy20.jpg Yesterday we had a great opportunity to attend a lunch in downtown Indy in which Guy Kawasaki was the keynote, and gave a presentation about the Art of Innovation. The lunch was part of the Indiana Entrepreneurship Week, presented by TechPoint. Besides the poor job of marketing by the organizers (Guy wasn’t even mentioned on the website!) the event was great. We walked in about ten minutes before the lunch started and sat in the second row, center stage!

I had attended a WebEx a month or two ago and Guy used a similar deck of slides, so I was familiar with parts of his presentation, though the anecdotes and expansion on his thoughts varied from the original presentation, so it was still a captivating presentation.

One of the better points he made was in terms of mantra’s versus mission statements and how corporations go to great lengths (off-site meetings, team building, corporate coaches, etc.) to come up with long business speak mission statements, that really mean very little to what the company does. Instead, Guy says, is to come up with a three or four word mantra of what you do. Something that is focused and really gets to the essence of what you or your company is about. The other great point was his message about”Bozos” or people who tell you that an idea/business can’t or won’t work. He made a reference of how he had turned down an interview for the CEO position at Yahoo, when it was first being started because he didn’t think it would work. He had been a “bozo” because he couldn’t see past his PC days at Apple, and see how the internet was the new curve, the new way to do business - a roughly 2 billion dollar decision on his part, yikes!

I could probably go on and on about the presentation and Guy, but the biggest thing for me was the energy and enthusiasm that he had for his topic. He was sniffling and had a cold, but you could tell that even though he wasn’t feeling well, that he loves to talk about entrepreneurship, and if you/me/your company can harness just a little bit of that passion, feel that way about your company or product, you are going to be one step better towards creating a product that is successful.

You need a product road map

November 9th, 2007 by Ade Olonoh

I enjoyed the 37signals book and agree with a lot of their philosophy, but was baffled by today’s article, You don’t need a product road map.

The article makes a lot of assumptions about people who have a product road map:

  • They add all feature requests to the road map
  • They don’t do due diligence before adding features to the road map
  • They sell their software based on the road map, not the current features
  • They share their road map with current and prospective customers
  • They promise features to current and prospective customers

I agree that all the things above are bad, but to me this doesn’t translate at all to: don’t use a product road map.

We use a road map internally for FormSpring, although it’s very informal — deadlines are vague, items are not well defined unless slated for release in the near future, and we take a lot of liberties in adding/removing items when necessary. But having a road map is the best thing we’ve done to help focus development so that what we create has maximum value for customers.

We had to make a conscious decision to put together a road map based on an overall vision for the product. Our list of feature ideas and requests is very very long, and if we sat at the keyboard each morning and asked, “what do I build today?” it would be far too easy to slip into picking the items that are easy or fun. If you pick new features at a whim, then you end up with a horrible product overall, and one that hardly appeals to any of your customers.

And while I would agree with 37signals that writing a 5-20 year plan is ludicrous, I think it’s even more dangerous to not have any plan whatsoever, even if it’s only a few square feet of space on the conference room whiteboard.

Twitter Batch Search

November 7th, 2007 by Ade Olonoh

I was searching Twitter a few days ago, looking for people I know that might be twittering. I was surprised to find out that there was no mechanism to perform a batch search. The only way is to give Twitter your GMail username and password so it can search your contacts, and I’m too paranoid about security to do that.

So rather than enter in contacts one by one, I spent couple hours putting together this utility that would take a list of email addresses or names and run a batch search to find people on Twitter.

Twitter Batch People Search

It might take a while to return results from a large list, but otherwise seems to work pretty well.

Comments and suggestions are welcome.