The videos, news posts and Twitter buzz about Wave started quite a while before the first invites actually went out and are still popping up. Some of this news focused on the more technical aspects of Wave and some of it gave general “it’s an email killer” type hype. The best explanations I’ve seen though are the Google Wave Cinema videos by copyrighthater on YouTube. They’re clips from movies, recreated within Google Wave to show off how realtime, media-enhanced, group communication can actually work. Check out this remake of a clip from Good Will Hunting:

So, you get the idea…or maybe you don’t, but at least you’ve now seen how the interface works. As you could see (very briefly around 40sec) in the video, you can embed YouTube videos by hitting the G+ button, searching for the video you want to embed, clicking add to wave, then clicking the little light bulb icon to convert the link into an embedded video. You can also just paste a YouTube URL right into a blip you’re writing and the light bulb icon will show up next to it.

While that works great for YouTube, I prefer to share videos through Vimeo. Unfortunately, Wave hasn’t yet added embed functionality for Vimeo URLs and pasting in the embed script doesn’t work either. I tried finding an answer for this on Google with no luck. It wasn’t until I searched public waves with: “group:public@a.gwave.com embed vimeo” that I found an answer; actually 2 answers, both posted by http://InitialBLIP.com.

Option 1: HTML Embedding Gadget

Click on the “Add Gadget By URL” puzzle piece icon and paste in:
http://wave-ide.appspot.com/html.xml
This will insert a little textbox in your blip where you can paste in whatever HTML code you like.

Option 2: Video Embedding Extensions

Embedding HTML seems like the most versatile option, but the guys at InitialBLIP have made it simpler with their own Wave extensions. You still click on the “Add Gadget By URL”, but instead paste the URL below for your preferred video hosting service, replacing VIDEO_ID with the id of your video.

• 12sec: http://wave.initialblip.com/12seconds/VIDEO_ID
• Vimeo: http://wave.initialblip.com/vimeo/VIDEO_ID
• Viddler: http://wave.initialblip.com/viddler/VIDEO_ID

So, if I wanted to embed the video from SXSW of Me vs the SXSW MechBull, I’d simply click the puzzle icon, paste in http://wave.initialblip.com/vimeo/3817908 and there it is.

The one flaw of our house that we hadn’t remedied was the landscaping. We did what we could by removing unwanted trees, digging up rotten railroad ties and transplanting the sporadically planted Azalea bushes into defined planter areas. A couple weekends ago we also had 22 tons of fill dirt dumped in front of our house and rented a skid-steer and a harley rake attachment to level out our lumpy, terraced property. One thing remained the same though; it still wasn’t a “yard”.

That finally changed last weekend when we rolled out 8,000 square feet (16 pallets) of Centipede grass. Of all the projects we’ve done here, laying that much sod was by far the most physically exhausting. Between running the tiller, raking the soil, moving loads of sod, laying out the rolls, cutting the edge pieces with a machette and pushing a 250lb water-filled roller over it when we were done, there were no easy tasks associated with this project. If it weren’t for our friends Levi, Greg and Jay who helped us do the bulk of the work on Saturday, we would have never finished. In fact, I just finished rolling out the last piece of sod while wearing a headlamp at 8pm tonight.

As has been the case with several of our DIY projects, we didn’t know exactly what we were getting ourselves into. Our plans hit a few snags: the rain last week washed away all the soil we loosened over the prior weekend, we over-estimated a little on the amount of sod we needed and under-estimated how much time it would take. The results though, are amazing. We now have a beautiful, intentional-looking yard that perfectly compliments our house.

View more pictures of our newly sodded yard.

What’s a Gowalla?

Essentially, Gowalla is Geocaching, but without actual physical caches to find. Yes, I know, most of you have probably never been Geocaching, so you probably need a better description. Let’s try again. It’s a virtual scavenger hunt for cool landmarks, restaurants, vineyards, coffeehouses, parks, museums, colleges, bars, offices, churches, towers, sculptures, aquariums, caves, diners, and big blue wet things. If someone has an iPhone with the Gowalla app installed, they can add any type of spot to system which will instantly become available to everyone else with the app.

The homepage of the mobile application is the Passport. As you might expect, your passport keeps track of your travel stamps – the places you’ve been to. From the Passport you can either “Check In” to a spot you’re at or add a “New Spot”. To see what’s around you’re current location, click on the 2nd button on the bottom of application: Spots. The Spots page lists all the places nearby that other Gowallaers have created. If you live somewhere with a lot of marked spots, you can narrow down the list into categories by clicking the browse button at the top of the screen.

Creating, finding & checking in at cool places is only part of the fun though. When you create an account, you start off with 3 or 4 “items” in your bag. These are little digital trinkets that you can trade or leave at the places you visit. By leaving an item at a spot and not taking something in exchange, you become a “founder” of that spot. By doing this though, you will quickly run out of items and the only way to get new items is to check in at other spots. Every time you check in, you have a chance at finding a new item.

With the addition of friend management in v1.2 of the iPhone application, things just got a whole lot more social. Now you can easily add your Twitter and Facebook friends and see what they’re doing while you’re out and about. Another recent addition is the status message. Instead of simply checking in to a spot and trading some icons, you can announce what you’re doing there and share that information with the world. Last night for instance, I checked in at the Holy Trinity Greek Orthodox Church. Why would anyone want to know that? Well, I answered that question when I checked in: “Checking out the Columbia Greek Festival!”. While I can’t check in at an event, I can check in at the location of the event. That makes answering Twitter’s “What are you doing?” question an integral part of the game.

Wanna Gowalla?

You should! It’s a fun game, a free download from the iTunes App Store and is constantly being improved. It’s come a long way since it was first introduced at SXSW this year and the recent improvements have made this game one I think everyone will love to play.

It was fun getting to talk to the students about what I do at work, how design trends affect our workflow and how to find a niche in the constantly evolving world of web technology. One of the questions I was asked was how I keep up with it all. I’m sure this is the same for most web designers and developers out there, but for me, the answer is blogs and Twitter. Sure, a book like Transcending CSS comes along now and then and rocks my boat, but filtering through the steady flow of links, tutorials and resources available for free online is what keeps me in the game.

After talking for a while about some of the blogs, resource sites and twitter accounts I follow, I was asked, “What 5 people should aspiring web designers and developers follow on Twitter.” Five?! I stumbled a bit listing off household web design names like Jeffrey Zeldman, Dave Shea, Jonathan Snook, Jason Santa Maria & Andy Clarke, but I wasn’t nearly done. There was no way I could only pick just 5 so I promised to email the professor my list before their class period was over. Yes, I gave myself homework.

What I discovered was that I rely on Twitter way more than I thought. Of the 328 people I currently follow, a large percentage are web designers or developers who have influenced my work in one way or another. Some of these people have 10s of thousands of followers, and some have less than 100. In my mind though, they’re all essential members of my online web community.

Here’s what I had to say:

“I definitely can’t narrow the must-follow list down to 5. To start out…follow every person who’s mug is posted up on http://www.happywebbies.com They’re all highly influential people and most are fun to keep up with.”

I followed that blatant cop-out up with a list of 5 brilliant people they probably aren’t following, but should be:

• Matthew Smith (@squaredeye)

  He eats web and talks about beer. Created a great resource called http://patterntap.com

• Lea Alcantara (@lealea)

  Freelance designer who has written a lot of valuable content about self branding.

• Derek Powazek (@fraying)

  Long-time industry thought leader and an excellent writer/speaker.

• Jon Tan (@jontangerine)

  Huge type nerd who is always on the cutting edge of the font-embedding problem.

• Aarron Walter (@aarron)

  Mailchimper, teacher at Art Institute of Atlanta & author of a great book on Findability.

It’s been interesting to watch Twitter go from being a medium of communication between nerdy web workers to a globally adopted resource, but it still does that initial job very well, knitting this tiny world of an industry together. Of course, I could have made my list a lot longer, but I promised 5 and I think it’s important for everyone in this industry to find their own heroes and muses.

Your Homework

With that said, I’m wondering who else I should be following. Sure, a lot of Twitter users throw out names each week on #FollowFriday, but with only 140 characters, you never get anything more than a list of names. So in the comments below, tell me about 5 people from your list who I might not have heard of that every aspiring web designer and developer should follow.

After returning from my 2nd trip to SXSW, I started wishing I could bring that group knowledge and sense of community home with me to Columbia. So in May of 2008 a few of us got together and started talking about forming a Refresh group. There were a handful of agencies and corporations here that did web stuff, but there was little (if any) communication between them. After little more than a year, the steady growth of Refresh Columbia, the formation of other user groups in town, and the collaboration between those groups to put together http://convergesc.org in June have really transformed this community. There are strong connections between individuals with a wide variety of talent and a growing connection between the user groups and the colleges/universities here.

It comes full circle…

SXSW inspired me to form a local group, so wouldn’t it be great to have a panel at SXSW to help other people do the same in their own cities? Gene Crawford, Jay Barry, Greg Lunn and I plan to do just that. We’ve submitted a panel idea for SXSW 2010 titled: Refresh 101: Kick-Start Your Local Web Community. Our thought is that if we could make the kind of impact we did here in Columbia, anyone can do the same, and that’s what we hope to encourage.

We need Your Vote!

Of the 2,210 panels that have been submitted for this year’s interactive festival, only 300 or so will be selected. Public voting plays a large role in deciding which panels make the cut, and anyone can create an account and vote. Whether you plan to attend SXSW or not, please visit our panel page and vote for us.

I’ll be attending this year’s conference regardless of whether or not I’m speaking, so if you’re planning to go, please leave a comment and let me know. As I said above, I always enjoy meeting other people who are as passionate about the web as I am. Thanks!

I just read the July issue of Laptop magazine and Mark Spoonauer (editor in chief) said that netbooks are here to stay. With this trend do you think the 1024×768 res will be reduced to 800×600 to capture this growing market? The mobility and internet access makes me think twice what would be the more popular resolution. Do you have any of the latest numbers? – Maria

Here’s what I replied:

“That’s a great question. I personally would not revert to designing sites to fit within an 800×600 resolution unless the website or app I was developing specifically targets the Netbook or mobile demographic. On the flip side to that argument, w3schools reported that as of January 2009, 93% of web browsers had a resolution of 1024 or higher with 57% being higher. Last year, they reported that only 38% of computers had a resolution higher than 1024 x 768. Even with that increase, I still default to designing sites at 960px wide. From what I’ve seen, 960 is still the industry standard because it fits within 1024 and is divisible by so many potential grid widths. (See: http://960.gs/ & http://www.cameronmoll.com/archives/2006/12/gridding_the_960/ ) While this does mean that visitors with an 800×600 resolution will see a horizontal scrollbar, the actual content of most 960px wide sites does not stretch the full width of the site and should still be readable without scrolling.”

Is it really that simple?

After sending that reply I started re-thinking my answer. While I don’t have a netbook, I know they’ve become insanely popular over the last few years and I’ve seen them take the place of big, bulky laptops at conferences and coffee shops. Should we be catering to this growing market? If so, what exact resolutions are we dealing with. After doing a little research, I discovered that most netbooks have a resolution of either 1024×600 or 800×480. Sweet, 1024 should display my 960px sites just fine, but…Eight hundred by four eighty! In Firefox with all my toolbars and status bar turned on, I’ve got over 150px of vertical chrome – that would account for about 30% of the 480px height. Yikes! Would anybody really ever buy a computer in 2009 with a screen resolution of 800×480? If so, they might as well just get a smart phone.

Let’s take our research to the Amazon, shall we?

Amazon.com has exactly 221 netbooks available from 11 different manufacturers. What matters most to me on this matter is what’s selling. They have 100 netbooks listed in their netbooks bestsellers list. I browsed all the way down to #50 and didn’t find a single product with a resolution lower than 1024×600. I even found a few with resolutions up to 1366×768. If people really do buy netbooks with an 800×480 resolution, they are the minority…and they’ll just have to work that horizontal scrollbar.

What do you say?

Is anyone out there giving love to those poor 800×480 users out there? …all 5 of them.

“Dear #lazyweb: What does everyone use for site-wide scans for broken links?”

I was curious because we have a couple ginormous sites we’ve created recently at work that we wanted to scan. I got back a couple recommendations for the Mac app, Integrity and one for Xenu Link Sleuth, the PC app that the Integrity creator lists as their inspiration. Case closed. Lazyweb wins again, right? Well, the next day, I got another reply:

You might want to try Linkpatch for catching broken links on your site, much better than 1-time crawl- http://linkpatch.com
- @brightwurks

Linkpatch is a subscription-based web service that monitors your site’s 404 page and sends an email report each time someone lands there. While I can still see the usefulness of site-wide scanning applications like the two listed above for finding broken outgoing links, Linkpatch seemed like a great concept for keeping up with broken, moved, or mistyped incoming links. They have a free account option for monitoring a single site, so I decided to give it a try.

Setting up Linkpatch was dead simple. I just created an account and pasted a unique JavaScript tracking script into my 404 template. A few hours later, I got my first 404 report. According to the email, someone was trying to get to http://jasongraphix.com/archive/images/oreo4.jpg, an image URL from before I redesigned the site in February. I made sure to create permanent redirect records in my .htaccess file for all my old blog posts, but never did anything about directly linked images. All of my blog images have moved from /archive/images to /static/uploads, so adding one line to my .htaccess file fixed a problem I didn’t even know existed.

RedirectMatch permanent ^/archive/images/(.*) /static/uploads/$1

Sure, if I had been paying more attention to my stats, I might have known about the broken image links, but getting an email report (seen on the right here) made it much more obvious.
Thanks, @brightwurks!

Over the course of a lunch break I created a webpage with a simple list that showed exactly what the extension sheet had on it, making each <li> expand on click to show more contact information: cell number, email, twitter, website, instant messenger, etc. This webpage was similar to any other wepage really except that it was a little narrower and contained 2 extra lines of meta data in the header:

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no"/>

I learned about the first meta tag from a short post on Daring Fireball a while back. It’s just a simple tag that loads pages added to your home screen as a standalone app; without the standard Safari chrome. The viewport meta tag just defines some rules for the display of the page. By setting the width and height to device-width and device-height, I’m just forcing the page to fit to the viewport whether it’s in portrait or landscape mode. Setting user-scalable to “no” just prevents the user from zooming in or out, which is acceptable since I’m designing the content to fit the screen. You can learn more about these meta tags (and a lot of other great iPhone mobile app tips) from the HTML section of Apple’s Safari Reference Library.

As I mentioned above, those two meta tags are really the only iPhone specific bits in this simple web application. The rest is just plain ole’ HTML, CSS and jQuery with a smidge of PHP just to handle some variables and authentication. Rather than explaining all that I’ll just let you grab the demo. Feel free to use this as is or modify it to your heart’s content. I used an HTML file to store the directory data, but this example could easily be modified to pull from an XML file or from a database.

Download Mobile Directory Demo – Zip (28KB)
View the Demo (password is “stapler”)

The label here would be “Search:”, but in the hint I want to give the user some examples of data they can search for. A great place to put this hint information is the title attribute of the textbox. For users without JavaScript, hovering an input with a title will show them a tooltip of the hint. Using jQuery though, we can enhance the experience quite a bit:

$('input.txbhint').focus(function() {
	if ($(this).val() == "" || $(this).val() == $(this).attr('title')){
		$(this).val("").removeClass("hinted");
	}
}).blur(function() {
	if ($(this).val() == "") {
		$(this).val($(this).attr('title')).addClass("hinted");
	}
}).filter(function() {
	if ($(this).val() == "" || $(this).val() == $(this).attr('title')){
		$(this).val($(this).attr('title')).addClass("hinted");
	}
});

The jQuery code above simply sets the input’s title text as it’s value and colors it gray (via the “hinted” class) until the user focuses on it. When they do, the value gets removed and the text color gets set to black. If the user leaves the textbox and the value is still blank, we cleverly reset the text with the title text again and change the color back to gray.

View the Demo