Wired Magazine Web Monkey
Goo.gl URL Shortener Coming Soon to a Twitter Client Near You
Google’s URL shortening service, goo.gl, has added an API, giving third-party developers a way to integrate the service into their own apps. The new API means Twitter clients and other apps that use short URLs can hook into goo.gl just like they do bit.ly and dozens of other shorteners.
The goo.gl API is, like most Google APIs, a RESTful JSON-based API. There are only three real methods — insert, list and get — but that’s enough info for apps to shorten and expand URLs, as well as fetch history and analytics for shortened links.
The goo.gl shortener is a late entry into an already crowded field, but of course the Google name carries a good bit of weight so you can expect most Twitter clients to add goo.gl to their list of URL shortening options. The goo.gl shortener also has a couple of nice extras like QR codes and, according to stat tracking site Pingdom, it’s both the fastest and most reliable URL shortener out there.
If you’d like to play with the new service, the API documentation and developer guide can be found on the Google Labs site. And yes, the API is a labs project and may be subject to change before it graduates into a real web service.
See Also:
Awesome Guitar Tab Mashup Showcases Audio Data API
Attention budding guitar players, the web just might turn into the best guitar teacher around.
The Mozilla hacks blog has details on an awesome web-based guitar tab player experiment from developer Greg Jopa. Using Mozilla’s experimental Audio Data API and the Vexflow HTML5 music notation rendering API, Jopa’s guitar tab player displays interactive sheet music that traces the notes of a song as it plays.
If you’re using Firefox 4, head over to the demo site to see the mashup in action. Other browsers won’t work, but the demo movie below shows how the guitar tab player works.
The reason this experiment only works in Firefox is because it uses Mozilla’s new Audio Data API, which gives web developers a way to interact with raw audio data in HTML5’s <video> and <audio> elements using JavaScript. With the Audio Data API, developers can read and write audio data within the browser, opening the doors for online tools like spectrum analyzers, audio remixing tools and 3D audio visualizations.
While Mozilla’s Audio Data API hasn’t been blessed by the W3C just yet, plenty of what we use on the web right now — XMLHttpRequest anyone? — started out exactly the same way. Because the web embraced XMLHttpRequest, it became a standard. Given this awesome experiment and some of the other great demos we’ve seen that use the Audio Data API, we’re really hoping the W3C adds the Audio Data API to the spec.
See Also:
Join the Early Adopters and Help Make HTML5 Better for Everyone
Whenever we write about HTML5 here at Webmonkey — whether it’s something great, like Microdata, or something not-so-great, like the flaw in WebSockets — there is an inevitable comment or two telling everyone that they should wait until HTML5 is done. Some people think even the W3C doesn’t want you adopting HTML5 just yet.
Of course all those people, including the W3C, are wrong. Not only is much of the HTML5 spec well on its way to being finalized, browsers already support much of it. The level of support varies by browser, but HTML5 is very much here today.
The real reason you should use HTML5 now is that early adopters are already helping to make it better, finding bugs and giving the browser makers a reason to fix them.
Mark Pilgrim’s site Dive Into HTML5 is a fantastic resource for learning HTML5 and it’s written in HTML5. Pilgrim recently pointed out that the site’s use of HTML5 and CSS 3 has “led to bug fixes in at least four browsers and one font.”
If we all waited to use HTML5 until it was “done” we wouldn’t know about those bugs. It’s early adopters — like many Webmonkey readers — who are helping to make the web better by using HTML5 today and helping to discover the parts that don’t work in the real world. Browser bugs aren’t always discovered by reading specs or through stress tests like ACID 3, they’re discovered in the wild, on the web. Finding them now means that than in five or ten years when HTML5 is set in stone, it will have fewer problems.
Naturally we’re not suggesting that HTML5 is right for every website. Mainstream sites don’t want to discover bugs, though that hasn’t stopped big names like Nike from jumping in the HTML5 waters.
Maybe some parts of HTML5, like say WebSockets, aren’t quite ready to be used on the New York Times homepage. But smaller sites using WebSockets are helping to pave the way so that eventually sites the size of the Times can use WebSockets and the rest of HTML5 without worrying about bugs.
Not every site needs to live on the edge, but those that do make the web a better place for all the rest.
[Note to the commenters who will inevitably point out that we don't use HTML5 at Webmonkey: those of us that write for Webmonkey do not also write the code that runs it.]
5 Mosaic photo by Leo Reynolds/Flickr/CC
See Also:
A Guide to HTML5 Features You Can’t Detect
What language does that browser speak?
Web developers looking to play with the new features in HTML5, CSS 3 and other NEWT tools are still struggling with incomplete and inconsistent browser support. While HTML5 and its siblings are far from perfect (and complete), that doesn’t mean you can’t use them; it just means using them is a little more complicated since you need to detect the current browser’s level of support and then adjust accordingly.
One of the easiest ways to detect the current web browser’s level of HTML5 support is the Modernizr JavaScript library. We’ve covered Modernizr several times in the past and it’s a great addition to any HTML5 toolkit.
But sadly, not everything can be detected with JavaScript. If you’ve ever bashed your head against the keyboard trying to figure out why something wasn’t being detected, Modernizr has a new wiki page for you: The Undetectables.
The page lists a number of features that simply can’t be detected using general feature tests. Instead, these features can be found by either user agent sniffing (which leads to heartache and doom), browser inferences or as the wiki puts it “simply providing the same (slow) fix to everyone.”
In some cases there are workarounds, like the great keypress JavaScript effort from Google , which fixes a number of erratic, inconsistant keyboard behavior quirks in today’s browsers. However, in many cases you’re probably better off avoiding the undetectable features until browsers catch up.
If your code has been behaving strangely, despite your best efforts to detect a browser’s features, save yourself some hair pulling and head over the new Modernizr page to see if perhaps the problem is on the list of things that can’t be detected. If you discover other problems trying to sniff a browser’s capabilities, be sure to let the Modernizr devs know about it.
See Also:
Mac App Store Gems for Web Developers
The Mac App Store has launched with over 1,000 OS X applications. Our sister site Gadget Lab has more details on what that means for Apple fans.
One thousand apps for the launch is impressive, but what’s in it for web developers? Here’s a quick roundup of a few apps that Mac-loving web developers might want to check out (URLs point to the Mac App Store so you’ll need OS X 10.6.6 for the links to work).
-
iSlice (free) — This slick little app opens PhotoShop documents and slices them up. ISlice retains all the layer info in the Photoshop file so it’s easy to hide background layers and focus on what you need to extract. If you already own Photoshop there’s no point to this one, but if you frequently need to slice comps and don’t want to pay Photoshop’s hefty price tag, iSlice fits the bill.
-
OAuth for Mac ($3) — OAuth is pain if all you want to do is pull a bit of data out of say, the Twitter API. OAuth for Mac handles the OAuth calls for you and quickly generates a token. I haven’t had a chance to test it yet, but it looks like it would be handy for testing and developing quick scripts.
-
Colorbender ($2) — A nice looking color-scheme generator with hex and RGB values. There are tons of free color-scheme generators on the web, but if you’d like a Mac-native version, Colorbender looks like it would fit the bill.
-
mColorMeter ($3) — Ever wanted to know what color your favorite website is using in its menubar? With mColorMeter you can just hover over any pixel on your screen and the app will tell you the value in RGB, Hex and Munsell colors.
-
Base ($17) — Base is nice-looking graphical interface for working with SQLite databases. It’s not cheap, but $17 seems a small price to pay if it means never having to work the sqlite3 command line again.
-
Gitbox ($40) — Hardly a day goes by without someone claiming there are no good Git GUIs. We haven’t tried Gitbox so we’re not endorsing it, especially at $40, but it does offer a very nice-looking graphical UI for Git. And the app comes bundled with the official Git binaries so there’s nothing extra to install — just download the app and start using Git. Great for the command-line-phobic, but seasoned Git users will likely turn up their noses at the price. (See this thread on Hacker News for some more thoughts on Gitbox.)
-
Honorable Mentions — There are quite a few apps in the new store that have been around forever. We love the all-in-one development tool Coda ($100), Text Wrangler (free), BBEdit ($125 currently on sale for $99) and Pixelmator ($30).
The biggest downside to Apple’s new App Store for Mac is that there are no trial versions of the software. For that, you’ll have to head to the developers’ site and (assuming there’s a trial version available) download a good ol’ .dmg file.
See Also:
Pick the Perfect HTML5 Video Player for Your Site
There’s no question that HTML5 video is at the forefront of the web’s migration to HTML5. Unfortunately converting your site’s video to HTML5 is a little more complicated than just dropping in the video tag.
We’ve covered a few HTML5 video players in the past — SublimeVideo, FlareVideo and the DIY route — but new players seem to emerge every day and deciding which one is right for you can be complicated.
To help you out developer Philip Bräunlich has put together a great chart of 19 different HTML5 video player solutions. The chart breaks down each player, covering options like whether or not there’s a Flash fallback for older browsers, if keyboard shortcuts are supported, how easy it is to theme and use, and what license the code is available under. The sidebar also has links to demos so you can see each player in action.
If you’ve been trying to figure out which video player has everything you need, Bräunlich’s chart should be a huge time saver.
Flickr Goes Native With Windows Phone 7 App
Flickr, the grandfather of online photo-sharing sites, is giving the kids a new way to use the site with their fancy Windows 7 and Windows Phone 7 devices. Yahoo has announced Flickr for Windows 7 and Windows Phone 7 — native Flickr apps for Windows phones and tablets.
Flickr already offers an iOS app for Apple devices, but the new Windows 7 apps look considerably slicker and offer a much better interface than what you’ll find the iOS app. The new software won’t be available until the end of January, but you can check out the video below for a teaser.
According to our friends at ReadWriteWeb, the new Flickr for Windows 7 apps use Windows Azure, Microsoft’s foray into cloud-based software, behind the scenes. It’s an interesting choice of platform considering Flickr is already, well, in the cloud. Given that Yahoo has a considerable infrastructure of web-based services, why use Azure?
Marcus Spiering, Flickr’s mobile product manager at Yahoo, tells RWW that “Azure allowed us to build an app quickly and do it with quality.” Reading between the lines it’s hard to escape the subtext: Yahoo’s own tools weren’t up to the task.
Whatever the case, Flickr for Windows 7 and Windows Phone 7 is a slick looking app and we’re hoping to see the iOS version get a similar makeover. Curiously, there’s still no official Flickr app for Android.
See Also:
How To Bring Back the Status Bar in Firefox 4
Firefox 4 will bring a significantly revamped user interface to the popular Mozilla browser, including some welcome changes like automatic bookmark and history syncing, a better add-ons manager, tabs-on-top and dozens of other improvements.
Firefox 4 is also notable for what isn’t included — the venerable status bar. The status bar is an almost universal element of browsers and Mozilla decision to remove it is, well, curious.
Mozilla says that ditching the status bar gives Firefox a simpler, smaller user interface. While that’s true, it comes at the expense of something that every other browser manages to offer — URL previews in the lower left corner of the browser window.
Defenders of the change point out that all of the elements that used to be in the status bar are still in Firefox, they’re just in different places. The page load information is now displayed on each tab, and the URL preview seen when hovering links has moved to the URL bar.
It’s the later change that irks many long-time Firefox users. Part of the problem is that there simply isn’t as much room in the URL bar so URLs are truncated with ellipses, giving you less information about where a link leads.
Mozilla plans to improve the URL preview interface before the final release of Firefox 4, but that doesn’t change the fact that Firefox’s URL preview is now in a different place than every other browser on the web (Chrome and IE 9 don’t have permanent status bars, but both still show link previews in the bottom left corner of the browser window).
Luckily there’s already a Firefox add-ons that brings back the status bar. If you’re using the Firefox 4 beta and you miss the status bar, the appropriately named Status-4-Evar will restore it to its former glory.
See Also:
Cool Sites: Nike’s ‘Better World’ Site Embraces HTML5
You might think, given the varying browser support, that no one is using HTML5 yet. But you’re wrong. HTML5 is everywhere you look. Even Nike, which has a history of Flash websites, recently turned to HTML5 to build its new “Better World” website.
The Nike Better World website uses HTML5, CSS 3 and JavaScript to create a unique scrolling storyboard-style experience. The site has received quite a bit of attention in the design community for its unique interface and fancy animations.
It also makes a great lesson in how you can use — and, sadly, now you should not use — HTML5 today.
One of the best ways Better World uses HTML5 is the awesome, and often overlooked, data- attribute. If you’ve ever used a title attribute to pass some data to JavaScript, well, the data- attribute is your new friend. HTML5’s custom data attributes allow you to write semantically valid HTML while, simultaneously, embedding data within the page.
On the Nike site, attributes like data-controller and data-scrolloffset pass information to the JavaScript scrolling function without mucking up the semantics of the page.
The best thing about the data- attribute is that you can define your own syntax — just prefix your attributes with data-. For a great overview of the new data syntax and how you can use it, check out JavaScript guru John Resig’s overview of the data- attribute.
However, impressive as the Nike site is, it also gets some things wrong. While Better World uses many of the new HTML5 tags — like article, section, header, footer and canvas — it isn’t always using them properly.
The prime offender is the ever-confusing section tag, which is scattered about the site somewhat haphazardly. Deciding when you should use section can be a headache (see HTML5 Doctor’s article on when to use the section tag), but one good rule of thumb is — does the element have a heading? In the case of Nike’s site, the answer is often no. In most cases the code would be improved by simply using a div tag.
Despite all the cool new semantically meaningful tags, remember that there’s nothing wrong with good old div. In fact, that’s one of the things it’s for — elements that don’t have semantic value.
Nitpicking aside, the Nike site is great example of a big company pushing the envelope with HTML5. Our only real complaint is that Nike is still relying on Flash for video — ironic considering that HTML5 video is one of the more common examples of HTML5 on the web today.
See Also:
Popular ‘CSS Reset’ Stylesheet Gets an HTML5 Makeover
Woolly, the CSS sheep.
Eric Meyer introduced the web to the concept of a “reset stylesheet.” The goal of a reset stylesheet is to make sure every browser starts from the same set of display defaults, correcting differences in default line heights, margins, heading fonts and so on. Now Meyer has updated what’s probably the web’s most popular reset stylesheet, the famous “Eric Meyer Reset.”
You can grab the latest version of Meyer’s reset stylesheet from his website (note that Meyer’s main reset page still hosts V1, for the updated version you’ll need to copy and paste from the linked blog post).
The latest version of Meyer’s reset stylesheet dispenses with a few CSS rules that probably aren’t necessary anymore — for example, the font selector in the first reset rule — and adds some new rules to handle HTML5 elements in older browsers.
Meyer also corrects what he considers the biggest mistake of the original code — setting :focus to invisible. The idea behind the rule was sound — reset :focus so authors can easily define their own styles. The problem was that too many people did not define their own focus styles. That meant thousands of websites that simply copied and pasted (or hotlinked) Meyer’s stylesheet, without really reading it, wiped out all the :focus styles.
In the new version Meyer has commented out the entire :focus rule to avoid obliterating :focus styles on sites that simply copy and paste the code. Those that take the time to uncomment the rule will, one hopes, notice the comment telling them they need to define their own visible focus rule.
If you’ve been using the also very popular HTML5 Doctor reset stylesheet, you’ll probably notice some similarities in Meyer’s new effort. Both make excellent starting points for those that have grown accustomed to reset stylesheets. Just keep in mind that Meyer’s update is still a beta release so, as he writes, “use with caution and test with abandon.”
See Also:
