Archive for June, 2010

File Under: CSS, Web Standards
Jun
22
2010

Dealing With Browser Differences in CSS 3

By

Woolly, the CSS sheep.

Cutting edge web technologies never come without a cost.

Sometimes it means limited browser support for emerging standards, and other times it means having to go back and rewrite your code when draft standards change.

When it comes to the still-in-progress CSS 3 spec, not only does browser support vary widely, but most browsers have implemented what are know as vendor-specific prefixes. The prefixes complicate things, and they require more work to drop them into your code, but they do serve a purpose.

For example, if you want rounded corners in CSS 3, you’d use border-radius to define them. But because border-radius is still being finalized, browsers only support their own versions of the rule. So, -moz-border-radius will target Firefox, -webkit-border-radius targets Safari and Chrome. For Opera, it’s -o-border-radius.

None of the special prefixes will validate, which is less than ideal. There’s a suggestion floating around that CSS validators should change their behavior regarding vendor prefixes by issuing a warning instead of an error. Regardless, if you want absolute standards conformance in your CSS code, you’ll need to stay away from vendor prefixes.

However, if you want to play with CSS 3′s new toys, you’ll see there are some very good reasons why vendor-specific prefixes exist, and why you should use them (for now) in addition to the actual proposed rules of CSS 3.

To stick with the border-radius example, consider what happens when you want to target just one corner of an object. The spec was in flux in when the WebKit project decided to use -webkit-border-top-right-radius and Mozilla went with -moz-border-radius-topright. Without the prefix, you’d have to deal with two different CSS rules, potentially forever, with one of them eventually being depricated, but still out there in older versions of that browser.

Both prefixes are technically “wrong” and that’s a good thing. Eventually, the final spec will be published and only one rule will be standardized, with all browsers implementing that rule. At that point, you can simply go into your code and delete all of your prefix rules. The vendor names make them easy to find and zap.

One thing you should definitely not do is target only one browser’s prefixes. As Apple’s disingenuous “HTML5″ showcase recently highlighted, optimizing for a single browser is never a good idea.

If the idea of vendor-specific prefixes strewn about your otherwise standard CSS makes you uneasy, there is another possibility — offloading all the prefixing stuff to JavaScript.

Developer Arron Gustafson has written a critical article for A List Apart where he derides vendor-specific prefixes and offers a JavaScript alternative for those who feel the same way he does.

Gustafson refers to vendor prefixes as “forking” CSS. While we agree with his point, the word “forking” is problematic if only because there is nothing wrong with forking code. In fact, it’s the norm in the open source world. (You are using Git or Mercurial right?). And vendor prefixes are not forks, they’re hacks — temporary ways to push the boundaries of the web while standards bodies catch up.

Terminology aside, Gustafson’s point is valid — ignoring standards and littering your CSS with browser-specific code are both bad ideas.

Gustafson’s little JavaScript library can help you avoid vendor prefixes in your CSS. But, impressive as the script is, all it really does is offload the prefixing to JavaScript. The approach has some downsides — it means additional page load times and it neglects users who have JavaScript disabled.

If you want to start using CSS 3′s features now, you’re not going to avoid vendor prefixing, but at least you can choose how to handle it. Whether that means using the prefixes in your stylesheet, putting your vendor-specific code into separate stylesheets, or using a JavaScript solution like Gustafson’s is up to you.

See Also:

Tags: , ,
File Under: APIs, Web Apps
Jun
22
2010

Google Docs Can Now Convert Images and PDFs to Text

By

Google’s web-based document editor can now convert the text inside your PDFs and images into text you can edit.

When you upload a file to Google Docs, you’ll see the option to “Convert text from PDF or image files to Google Docs documents.” You can upload any PDF, PNG, JPG or GIF.

To do the conversion, Google is relying on a technology commonly known as Optical Character Recognition, or OCR. The company began using OCR for web searches in 2008, then released experimental support for OCR-based conversion as part of its Documents List Data API in 2009.

Google has been improving the technology since then, and this is its first appearance in a Google product. Of course, since it’s part of the API, you can roll it into an app of your own creation. But we can expect the conversion tool to improve and yield some pretty cool applications down the road.

It’s not perfect, and the results will vary based on the resolution or visual clarity of whatever you’re uploading.

We converted Mark Klein’s public declaration from the AT&T/NSA wiretapping case. Here’s the original PDF from the Electronic Frontier Foundation, and here’s our Googlefied MS Word .doc file.

The cleaner the layout and the text rendering, the cleaner the result.

Below is a screenshot of Wired magazine’s iPad app, followed by the Google Docs Wired_iPad_app. You’ll notice it had some problems with the pullquote and the hyphens, but it navigated the two-column layout pretty well.
Continue Reading “Google Docs Can Now Convert Images and PDFs to Text” »

Tags: , , ,
File Under: HTML5, Mobile, Web Apps
Jun
21
2010

Gmail Mobile Is Always on the Move

By


Google has updated its mobile Gmail interface for iPad users. The company announced the update Monday on the official Google Mobile blog. To see the updated interface, just surf to Gmail using Safari on your iPad.

Gone is the split-screen interface for composing e-mails. Now, you get a tasteful, lightboxed modal overlay — fewer distractions, cleaner and more room for the text of your e-mail. A screenshot is above. The changes will only show up for iPad users, and the new site (for now) is only available to English-language users.

It’s not a major update, but it demonstrates a new way of developing the web app that allows Google to respond more quickly to user feedback. Google switched the product over to a more easily-iterative HTML5 codebase last year. The mobile Gmail site gets updated more frequently — usually just small stuff here and there — and is becoming faster and more usable all the time.

On my own iPhone, I switched from the native Apple mail app to Gmail’s mobile web interface long ago, and I’ve never gone back. I still use the native mail app to send e-mails when I have to (from Twitter or Instapaper, for instance) but for everything else, I use the Gmail web app in Safari. In the early days, it was fairly painful, but it’s gotten much faster and much more usable since Google switched to the current iterative approach. The floating control bar, the swipe-to-archive gesture, the menu navigation and the way threaded conversations expand and contract are elegant, innovative enhancements that all web app developers can learn from.

What do you use for mobile e-mail? Native or web app? Let us know and tell us why you chose that route in the comments.

See Also

Tags: , , ,
File Under: Frameworks, Mobile
Jun
18
2010

New Frameworks Give Mobile-Web Apps a Boost

By

Sencha Touch, the new mobile-website framework, shows off its multidevice mojo.


Apple’s campaign to make native mobile apps seem sexier than the temperamental world of the mobile browser has been very successful. Tens of thousands of developers have been lured to the company’s App Store as a result.

However, the rapid rise of a number of impressive client-side JavaScript frameworks make it possible to build cross-platform, fast and lightweight mobile applications that run in the browser and, in some cases, equal the functionality of native apps.

Since these frameworks deliver content through the browser, there are no bizarre App Store approval processes or installer packages to contend with, and you really can “write once, run anywhere.” Any mobile operating system with a modern browser is game — iOS, Android, WebOS, it doesn’t matter.

Sure, for most games and animation-heavy apps, native is still the way to go. But for all other kinds of content, even complex stuff like maps and videos, the mobile web may be the better choice.

The latest entry into the mobile-framework field is Sencha Touch, brought to you by the same people that created Ext JS, jQTouch and Raphael, all of which have been combined under the name Sencha.

Sencha Touch, released this week, bills itself as “the first HTML5 framework for mobile devices,” which isn’t quite true. Several other mobile frameworks make use of HTML5 APIs like offline storage, or companion APIs like geolocation. But Sencha is nevertheless well worth a look if you’re thinking of building a cross-platform mobile app.

Sencha offers built-in support for the geolocation API and the offline storage API, and takes advantage of CSS 3 for smaller, image-less design elements. Because all the major mobile platforms — iOS, Android and WebOS — use similar WebKit-based browsers, there’s little to worry about when it comes to support for cutting edge features like HTML5 and CSS 3. Even when Firefox arrives on mobiles, you should expect support to be on par.

Sencha has some demos available if you’d like to see what’s possible. The GeoCongress demo makes use of the geolocation API to find out where you are and then show a list of your senators and representative. There’s also a very slick Solitaire demo that shows how to preserve an app’s state using the HTML5 local storage API.

The Sencha Touch code is available under a GPLv3 license. If you’d like to experiment with the code, head over to the new Sencha Touch site and grab a copy.

If Sencha Touch doesn’t cover all your bases, there are several other frameworks out there that do similar things. Although not specifically geared to mobile-web apps, SproutCore can be used to create lightning-fast mobile-web apps.

SproutCore generated quite a bit of interest a few years ago, when Apple incorporated it into the company’s MobileMe tools like iWork.com. It’s also the framework behind Kiva’s Loan Browser tool.

If you’re used to jQuery-style JavaScript, SproutCore will look a bit strange at first. Like server-side frameworks such as Rails and Django, SproutCore is based on the model-view-controller (“MVC”) paradigm. As with other frameworks in this category, SproutCore cuts down on latency by moving business logic to the client, but in keeping the MVC pattern of server-side frameworks, SproutCore should make developers feel right at home.

On the downside, SproutCore does not degrade at all. If anyone shows up to your mobile site with JavaScript disabled, they’ll see a blank page. SproutCore also lacks support for WAI-ARIA, which means it doesn’t offer much in the way of accessibility tools.

SproutCore is written in Ruby. You can grab a copy from the SproutCore site, or install it as Ruby “gem.”

Another possibility is iWebKit, which offers many of the same features you’ll find in other frameworks, but puts more emphasis on Apple’s mobile devices. Unfortunately, while most iWebKit apps will work just fine in Android, the built-in UI elements are clearly iPhone-specific.

Like the others iWebKit is customizable. You can always dive into the CSS files and tweak things to your liking (though doing so may call in to question the benefit of using a framework in the first place).

Another framework worth noting is Apple’s own PastryKit. Although PastryKit’s UI isn’t cross-platform, it does have some nice tools for iPhone-specific web apps. Keep in mind, though, that PastryKit is not officially documented. Daring Fireball has a nice video overview, and developer David Calhoun has dug a bit deeper into how PastryKit works.

Before you rush off to develop a mobile-web app, it’s worth pointing out that there are definitely some significant advantages to native apps — whether its on iOS or Android. Native apps have access to lower-level system tools (in the iPhone’s case, that means stuff like the accelerometer, gyroscope and more). If your apps need those tools, then by all means, use native code.

If you’re not writing an app that makes heavy use of platform tools, the web is a viable option. And, thanks to frameworks like Sencha Touch, SproutCore and iWebKit, building a cross-platform mobile-web app doesn’t have to be a Herculean task.

See Also:

Tags: , , , , ,
File Under: Blog Publishing
Jun
17
2010

In Walked Blog: WordPress Hits 3.0 With ‘Thelonious’

By

WordPress, one of the most popular blogging platforms on the web, reached a new milestone Thursday with its 3.0 release.

This one is nicknamed “Thelonious,” and you can run an update your own WordPress installation by clicking on the update link at the top of your blog dashboard. It’s also available for download.

The big news is that WordPress MU, a multisite tool that can be used to run a whole network of blogs, has become one of WordPress’ default features. You can now manage as many different blogs as you want from one single WordPress installation.

There are a number of updates to the user-facing part of WordPress. The admin has been redesigned: It’s been slimmed down and made easier to navigate with a more accessible layout and color scheme. Some of the menu choices have been renamed to be more descriptive.

There are also new contextual help tabs on every panel inside the admin, so it’s less likely you’ll be left wondering, “what’s this do?” For promoting your posts on Twitter, there’s a new tool that lets you generate a short URL for your post as you’re composing it.

The WordPress team has built a new default theme called “Twenty Ten” to show off all the new features in Thelonious. Much like Kubrick, the old default theme, Twenty Ten is pretty minimal, but it’s a good starting point for learning how to tweak and customize WordPress.

For theme developers and site administrators, WordPress 3.0 has a number of enhancements. The new MU integration is a big plus if you’re running a blog network, or even two different sites that share resources and authors. There’s also a new set of APIs you can use to make building custom headers, backgrounds, menus and custom post types easier. To see the full list of enhancements, see the list at the WordPress Codex.

Here’s a video tour of the new stuff:

Continue Reading “In Walked Blog: WordPress Hits 3.0 With ‘Thelonious’” »

Tags: ,
File Under: Browsers, Social, Software
Jun
16
2010

New Flock Is Simpler, Now Based on Chrome

By

The all-new beta of the Flock browser is based on the same code as Google Chrome. The company ditched Firefox in favor of Chromium in this new version.

The social web browser Flock is undergoing a major change in its next release. The upcoming Flock 3.0 will move away from the Firefox backend Flock has used for years in favor of Chromium, the open source implementation of Google Chrome.

If you’d like to test a beta version of the new Flock browser, head over to Flock beta page and grab a copy. For now the new Chromium-based Flock is available for Windows 7, XP and Vista only. A Mac version is reportedly in the works.

Flock is a browser built for social web junkies. It helps you manage your identity across multiple social websites, and it brings status updates and posting widgets directly into the browser via sidebars. Ever since the browser was first introduced in 2006, it’s been based on Firefox’s open source browser code, so this new version is a drastic change of plans. Flock is a niche browser — its user base is minuscule compared to the web at large — but those who do use it are dedicated and passionate about it.

The new Flock has been radically simplified, eliminating support for all but the biggest social networks and media sharing sites, namely Facebook, Twitter, Flickr and YouTube. Sorry MySpace, you’re just not part of the social web anymore (at least according to Flock).

The Flock 3.0 beta is a totally different browser than its predecessors — about the only thing that’s the same is the name. As you would expect, Flock now looks like Google Chrome, with tabs on top and the familiar, all-in-one URL and search bar. Flock has added some of the tools from older versions, rebuilding them on top of the new Chrome foundation, namely the social networking account manager and a sidebar that displays all your friends’ updates and lets you post your own status updates.

The sidebar looks similar to previous versions, though there are some new filters. You can narrow your Twitter updates to show only mentions or direct messages, and curb Facebook noise by eliminating wall posts, pokes, event invites or whatever. Just about every type of notification can be toggled on or off for any of the supported services.

Manage your groups in Flock's sidebar.

Perhaps the most useful addition to Flock 3.0 is the ability to create groups of friends to filter and manage your incoming updates. Out of the box, Flock offers two groups — Best Friends and Co-workers — though you can customize and create your own groups as well. Once you’ve got your groups set up, Flock makes it very simple to switch between seeing what your friends are up to, what’s going on with your work colleagues, your family, and so on. For those with hundreds of contacts and friends spread across multiple sites, and for those who apply different social standards when interacting with people from different parts of their life, this will likely be Flock 3.0′s killer feature.

Another very useful new feature is the integrated search field in the URL bar. Flock has changed the way Chromium’s URL search bar works to include your friend’s Twitter posts, Facebook updates, Flickr images and YouTube video in your searches. It makes easy to find out what your friends have said about whatever you’re searching for.

We’ve been using Flock for several years now and have to admit that we’ve never quite been able to figure our where it fits into our daily browsing tasks. Previous versions were sluggish, and the amount of setup required to interact with a bunch of different websites was overwhelming. Also, it’s an open secret that there was little Flock could do that you couldn’t accomplish by installing a few good add-ons to vanilla Firefox.

By contrast, the new Flock is a svelte, speedy browser. It immediately feels more relevant and fresh. And, in narrowing its support to only the most popular social sites, Flock is less daunting for newcomers. Getting started is in fact incredibly elegant — the browser launches with a screen that asks you to set up a Flock account, but you can skip it and just start surfing. As you log in to social sites like Twitter and Facebook, Flock begins filling out the social sidebar with updates from your friends on those sites mere seconds after you’ve logged in.

That said, you long-time Flock users may be unhappy with the new version — particularly if you rely on any Flock-compatible Firefox add-ons or use any of the many sites Flock no longer supports. While Flock 3.0 should work with any Chrome extensions, Chrome extensions do not have quite the same range of function as those in Firefox.

If you’d like to give the new Flock a try, head over the beta download page and grab a copy. Keep in mind that Flock 3.0 is still a beta and may have some bugs. If you’re on a Mac, there’s a mailing list you can sign up for to be notified when a Mac version is available.

See Also:

Tags: , , ,
File Under: Multimedia, Web Apps
Jun
16
2010

YouTube Adds Simple Video Editing Tool-

By

YouTube has launched a new video-editing tool that lets you edit your uploaded videos inside your web browser.

The new video editor will definitely not replace desktop software like iMovie or Windows Live Movie Maker anytime soon. That said, YouTube’s editor does cover the basics like combining uploaded clips, trimming, editing and adding audio to your uploaded videos.

This isn’t the first time YouTube has experimented with in-browser editing. You may remember YouTube’s Remixer tool, which was released in 2007 as an experiment, had limited capability and was buggy to boot. It was based on Flash and other Adobe technologies.

The new editor is definitely a big step up, and it’s powered mostly by JavaScript. The interface is simple and quite easy to use. To start editing, just drag the thumbnails of your uploaded videos into the filmstrip at the bottom. Once you have your clips in the editor, you’ll notice the cursor turns to scissors. Click one of the thumbnails, and you can start trimming and editing your footage.

There’s also an option to add music to your clips, though the selection is limited and, as Google Operating System notes, some tracks will cause YouTube to display ads in your final video.

Once you’ve got your clips edited and arranged the way you want, you can watch a low-res preview and then save your changes back to your videos. The interface is quite snappy when it comes to editing, and even saving, though it takes some time for YouTube to actually process your video and make it available on the site.

While YouTube’s new editor is clearly a limited, work-in-progress effort, it’s not hard to see how Google can build on this foundation to create something that will serve the needs of most casual video editors, eliminating the need for yet another piece of desktop software.

See Also:

Tags: , ,
File Under: Browsers
Jun
14
2010

Opera 10.6: WebM Video, HTML5 and More Speed

By

Opera is faster than a potato and getting even faster. Opera has released a new build of the coming Opera 10.6, with more support for various HTML5 elements, bug fixes and speed improvements.

Currently Opera 10.6 is still in the experimental stage so you may experience some hiccups, but if you’d like to test the new features you can download 10.6 from the Opera site.

The big news in this release are the new HTML5 features. Opera 10.6 adds support for web workers, the geolocation API, the offline API and improved support for the Cross-Document Messaging spec.

Opera 10.6 also joins experimental builds of Firefox and Chrome in supporting the new WebM video format. WebM is a set of codecs (coder-decoders) for browsers to use to play video and audio content embedded on HTML5 web pages without the use of plug-ins. Unlike H.264, a competing codec, WebM is royalty-free and is now supported by all major web browsers except Apple’s Safari.

Of course the new HTML5 features in Opera 10.6 are still works in progress. There are bugs. For example, while Opera’s WebM video demo worked just fine in our testing, some WebM videos on YouTube would pause when we right-clicked the page. But the audio didn’t pause, which caused syncing problems. Look for the bugs to be worked out as Opera 10.6 progresses toward a final release.

As for speed, well, Opera’s Carakan rendering engine and the new Vega graphics engine in Opera 10.5 put it neck and neck Google Chrome in our informal tests. This time around we tested Opera 10.6 against Chrome 6 (a developer channel release) and found that the difference is slight, but Opera feels marginally faster (when the Opera 10.6 alpha was released Download Squad found Opera handily beating Chrome 6 in benchmark tests).

So far there’s no release date for the final version of Opera 10.6, but if you’d like to test the latest and greatest Norway has to offer, head on over the download page.

See Also:

Tags: , , ,
File Under: CSS
Jun
14
2010

Twitter Fail Whale Rendered in Pure CSS

By

Here’s Twitter’s unofficial mascot drawn solely using cascading stylesheets, by Subcide’s Steve Dennis. What you see above is just an image — read Steve’s post or jump straight to the demo to see the real thing.

It looks great in all modern browsers (basically, everything newer than IE8) and if you look at it in Safari or Chrome, you’ll notice it’s even animated using WebKit-specific CSS animation controls.

From his blog post: “Curves are done using various uneven border-radius properties, stranger angles (such as the strings) are masked using containers with overflow: hidden; set on them. I hope someone else gets a bit of enjoyment out of my wasted Sunday.” Hardly a waste, Steve.

See Also:

Tags: , , ,
File Under: Browsers
Jun
11
2010

Google Chrome Working on Extension Syncing Feature

By

Google Chrome appears to be gearing up for another web-browser first — syncing extensions among your various Chrome installations. Chrome already syncs bookmarks, preferences and themes. Adding extensions makes for a universal browsing experience no matter what computer you happen to pick up.

The feature isn’t part of Chrome just yet. In fact, Google hasn’t even mentioned it. But the eagle-eyed folks over at Download Squad noticed that someone recently checked in some extension-syncing code into the Chromium project.

Chromium is the open source project that Google’s Chrome is based on. We’ve been using Chromium nightlies for some time now, but sadly, testing last night’s build did not reveal any extension-syncing. (Download Squad also failed to get extension-sync working.)

So, while Chromium’s extension-syncing is thus far embryonic, it is nevertheless a work in progress. This means Chrome will likely beat Firefox Sync to incorporating extension-syncing: Despite being at version 1.3, Firefox Sync still does not sync extensions.

Firefox Sync does, however, sync several things Chrome doesn’t, including your browsing history and currently open tabs. And to be fair, Mozilla’s extension system is quite a bit more powerful and complex than what Chrome offers, and that complexity likely makes extension-syncing somewhat more difficult to build.

Browser extensions in Chrome are especially lightweight. Developers can write extensions that alter a web page’s behavior or add buttons or other elements to the browser’s skin. All of the coding is accomplished using simple web standards — HTML, CSS and JavaScript.

By contrast, traditional extensions for other browsers are more powerful, but their file sizes are larger. The lightweight approach makes it easier to sync extensions between two installations of a browser quickly.

Mozilla is encouraging developers to experiment with its own lightweight-extensions model for Firefox called Jetpack, which also uses add-ons coded in web standards. Safari 5, released this week, is using a similar HTML-JavaScript–based model.

Although Chrome’s extension-syncing isn’t working at the moment, and there will no doubt be some wrinkles to iron out even once it is, we’re looking forward to seeing it turn up in developer builds, hopefully sooner rather than later.

See Also:

Tags: , , ,
« OLDER POSTS