Archive for the ‘Web Apps’ Category

File Under: Web Apps, Web Basics
Dec
28
2011

Building Better Single-Page Web Apps

By

Single-page, application-style websites offer web developers a way to replicate the user experience of native apps, particularly on mobile devices. Indeed, the application design model — that is, a single webpage that never needs to refresh or reload — is the basis for some of the web’s most popular sites like Facebook and Twitter.

But such app-based sites often break fundamental tenets of the web, eschewing HTML source for JavaScript, breaking the browser’s back button and removing the ability to link deep into the application. Some of these problems are addressed by standards like the HTML5 History API, which allows applications to update the URL bar without refreshing the page, but not every app bothers to take advantage of such recent developments.

The potential problems single-page apps can cause are not, however, sufficient reason to avoid them, argues Mozilla Developer Evangelist Christian Heilmann. Done responsibly and in keeping with the best practices of the web, the single-page app can be part of the future of the web, writes Heilmann.

Among the benefits of single-page apps are speed gains — stripping away the HTML means there’s very little to load initially and subsequent data loads can be done in very small increments, which makes for very fast apps. With the rise of web apps targeting mobile devices the speed advantages make single-page apps appealing to developers. Indeed, Heilmann believes “single page apps … are necessary for the web to be an apps platform.”

Naturally there will be problems with the rise of apps. “We have to battle two main issues,” writes Heilmann, “old conditioning of users and sloppy development for the sake of doing something ‘new’.”

In other words the danger isn’t the single-page concept itself, which, if done right, will yield an “app” that also has all the benefits of the web — deep linking, bookmarking, and indexing. It’s the latter problem Heilmann mentions, one that’s neatly satirized by sites like Hipstergrammers, that causes many developers concern: new just for the sake of new.

Heilmann’s post does a great job of cutting through the hype behind single page apps and presenting them for what they are — another tool with both positive and negative trade offs. Be sure to read through the whole article which offers a great list of potential problems and how to avoid them.

File Under: Web Apps
Sep
29
2011

Flickr’s New ‘Photo Sessions’ Bring Back the Slideshow

By

Flickr has unveiled a new feature dubbed Photo Sessions, which are real-time slideshows you can share with your friends around the web.

Say you want to share a slideshow with some friends you met on your last trip abroad. You’re back home and they’re back home on the other side of the globe. No one is coming over for dinner and slides. Instead, you just create a new session on Flickr and send the resulting URL to your friends. Once everyone has joined in, sessions become a bit like screen sharing — you swipe to the next photo and everyone else’s screen follows along.

Flickr has thrown in a few interactive features as well, including the ability to chat while the photos roll by. There’s also a way for your friends to doodle on your images from their own laptops or iPads.

Combine Flickr’s new sessions with a group chat app — Skype, iChat or the like — and you have a kind of disjointed, thoroughly modern take on the good old carousel slideshows your parents subjected their friends to in the ’70s. Feel the shag carpet people.

Alongside Sessions Flickr also announced a new Android app, which is considerably more impressive than the company’s iOS app. The Android Flickr app offers filters, geotagging and sharing in a slick-looking app that seems aimed at catching up with Instagram.

See Also:

Tags:
File Under: Web Apps
Sep
19
2011

Last Call for Delicious Bookmarks

By

Attention Delicious bookmarking fans, time is running out to transition your bookmarks to the updated, launching-soon Delicious website.

Current Delicious users have until September 23, 2011 to transfer their data and accept the new terms of service. If you don’t move your data by then your bookmarks will disappear forever.

After years of languishing at Yahoo, Delicious, the original king of online bookmarking, was purchased by AVOS, a new company from YouTube creators Chad Hurley and Steven Chen.

The transfer of ownership means that existing users need to agree to the new terms of service before Delicious can relaunch. You can read over the new terms on the AVOS website. If you prefer not to be part of the new Delicious, but would still like to grab your bookmarks before they go poof, you can do so using Delicious’ export tools.

See Also:

Tags:
File Under: Web Apps
Sep
1
2011

Offline Gmail Returns, Sort of

By

The offline Gmail web app

Offline Gmail is back. Originally built around Google’s Gears plugin, the company announced earlier this year that it was pulling the Gears-based feature and rewriting it to use HTML5 and web standards. Now offline Gmail is back (along with offline support for Google Docs and Calendar) and no longer requires the Gears browser add-on.

Offline Gmail does, however, require the Google Chrome web browser. In fact, the offline version of Gmail is an entirely separate app you’ll need to install through the Chrome Web Store. The Web Store app is based on the Gmail web app for tablets and uses a widescreen layout that will look familiar to anyone using Gmail on an iPad or the new three-pane mail interface.

Unfortunately, the offline app for Gmail is just that, a separate web app. You won’t be able to use Gmail offline simply by clicking a button in the regular web interface. Rather you’ll need to install the offline Gmail app and switch over to that interface whenever you’re offline.

And that’s not the only downside to this release. Offline Gmail will only give you access to the last three to seven days’ worth of email (the exact amount will vary depending on how many messages you get each day). All of your starred messages will also be available, but beyond that you’re out of luck — there’s no way to, for example, download a specific tag or set of messages for offline use.

Things are even worse in the offline version of Google Docs which, for now, is limited to read-only access — not exactly helpful when you’re trying to finish that report sans wifi.

Google says these issues are temporary and that the offline support is a work in progress, but given the extremely limited functionality one wonders why they were released at all. Of course Google’s motto is release early, release often; clearly they’ve released early, hopefully the often will kick in soon.

In the mean time if you need offline access to your email, we suggest a traditional desktop client.

See Also:

Tags:
File Under: Browsers, Mobile, Web Apps
Aug
24
2011

Mozilla’s WebAPI Wants to Replace Native Apps With HTML5

By

Mozilla has launched an ambitious new project aimed at breaking down the proprietary app systems on today’s mobile devices. The project, dubbed WebAPI, is Mozilla’s effort to provide a consistent, cross-platform, web-based API for mobile app developers.

Using WebAPI, developers would write HTML5 applications rather than native apps for iOS, Android and other mobile platforms.

Mozilla isn’t just talking about WebAPI, it’s already hard at work. It plans to develop the APIs necessary to provide “a basic HTML5 phone experience” within six months. After that the APIs will be submitted to the W3C for standardization.

Among the APIs Mozilla wants to develop are a telephone and messaging API for calls and SMS, a contacts API, a camera API and half a dozen more.

If those APIs sound vaguely familiar it might be because the W3C’s Device APIs Working Group is covering similar ground.

So, why the new effort from Mozilla? Well, Mozilla’s WebAPI is a part of its larger Boot to Gecko Project, which aims to eventually develop an operating system that emphasizes standards-based web technologies. With that end goal in mind, WebAPI may end up somewhat different than what the W3C is trying to build.

It’s also possible that Mozilla simply doesn’t want to wait for the Device APIs Working Group. Mozilla wants WebAPI up and running in a mere six months, the W3C’s Device APIs Work Group is unlikely to move that fast. But “the idea is to collaborate with W3C and all players and together form a good solution, and not just dump it on them,” says Mozilla Technical Evangelist Robert Nyman in a comment on his post announcing WebAPI.

The dream of write-once, run-anywhere software is nothing new and, if history is any guide, Mozilla’s WebAPI efforts may well be doomed. The open source giant does have one thing going for it that most other efforts have not — the open web. Most write-once, run-anywhere attempts have come from companies like Adobe and were built around proprietary frameworks. WebAPI doesn’t suffer from vender lock-in the way some projects have. WebAPI’s main roadblock is convincing other mobile web browsers to support the APIs.

For WebAPI to appeal to developers, Mozilla will need Apple, Google and other mobile browser makers to implement the APIs so that WebAPI can compete with native applications. Before you dismiss that as an impossibility, bear in mind that Apple’s original vision for iOS app development was based around HTML applications, and you’d be hard-pressed to find a company more eager to embrace web apps than Google. Whether either company will devote any resources to implementing WebAPI remains to be seen. But if Mozilla can get WebAPI standardized by the W3C other browser makers would likely support it.

Mozilla’s plans for WebAPI are certainly ambitious, but the company is putting its money where its mouth is — Mozilla is currently hiring several full time engineers to work on WebAPI.

See Also:

Tags: , , ,
File Under: Multimedia, Web Apps
Aug
15
2011

Make Waves with WebGL Demo ‘Water’

By

WebGL Water Running in Chromium 14Web Developer Evan Wallace has released one of the more impressive WebGL demos we’ve seen.

Provided you’re using a capable browser (Firefox, Chrome or Safari), head on over to Wallace’s WebGL Water demo and be amazed.

If you stay abreast of the latest and greatest in web browsers you’ve probably heard of WebGL, an API for adding hardware-accelerated 3D rendering to the HTML5 Canvas tag. The WebGL API is based on OpenGL, a desktop graphics standard, which means WebGL will run on many different devices — your laptop, your phone, even your TV.

Firefox 6+, Google Chrome and the latest version of Apple’s Safari all support WebGL (in Safari you’ll need to enable WebGL under the developer tools menu). There’s also an experimental build of Opera with WebGL support.

If you’re stuck with Internet Explorer, Vimeo user Ivan Enderlin posted this video which shows Firefox rendering the WebGL Water demo.

WebGL water, by @evanwallace from Ivan Enderlin on Vimeo.

Also, be sure to check out rest of Wallace’s website for some other WebGL demos, games and experiments.

See Also:

Tags: ,
File Under: JavaScript, Web Apps
May
18
2011

Yes Virginia, That Is Linux Running on JavaScript

By

Linux running in a JavaScript-based emulator

JavaScript never seems to get any respect. It’s not a real programming language, detractors complain, it’s just some script language that runs in the web browser. We’re not sure what makes JavaScript less “real” to some, but thanks to today’s web browsers, JavaScript has become a very powerful language. Powerful enough to run Linux in your web browser.

French developer Fabrice Bellard has built a JavaScript-based x86 PC emulator capable of running Linux inside a web browser.

If you’d like to try it out, point Firefox 4 or Chrome 11 to the demo page. Keep in mind that this is just Linux, no X Window or other graphical interface, just the command line, a small C compiler and QEmacs, Bellard’s emacs clone. Still, it’s really Linux, really running in your web browser, really using JavaScript to emulate hardware.

For more info on how Bellard did it, as well as what the hardware emulator supports, see Bellard’s technical notes.

Because the hardware emulation is built around the Typed Array spec, Bellard’s Linux experiment only works in those browsers that support JavaScript typed arrays, namely Firefox 4+ and Chrome 11+ (though a bug in Chrome 12 prevents it from working in the latest version of Chrome ).

Bellard is probably best known for founding the FFMPEG project, but unlike that very useful project, Bellard says his JavaScript-based Linux experiment has no real goals. “I did it for fun,” writes Bellard, “just because newer Javascript Engines are fast enough to do complicated things.”

That said, Bellard does have a few possible uses in mind, including serving as a benchmark for JavaScript performance (how fast can your JavaScript engine boot Linux?), client-side processing and perhaps, with a few improvements, running old DOS games and other software in the browser.

See Also:

File Under: HTML5, Multimedia, Web Apps
May
12
2011

Angry Birds Attacks Web … Web Wins

By

Angry Birds, currently one of the most popular games for iOS, Android and other platforms has made the leap to the web. Rovio, the company behind the game, has unveiled a web-based version of Angry Birds at Google’s I/O conference in San Francisco.

You can install the new Angry Birds for the web as an app in Google’s Chrome browser, or just play from the URL, chrome.angrybirds.com, which works just fine in any modern web browser. Just don’t hit that link if you’re planning to get any work done today.

Behind the scenes, the web incarnation of Angry Birds is powered primarily by HTML5. However, if you happen to have ditched Flash, you’ll notice that Angry Birds on the web won’t work.

What’s interesting is that the offending code appears to use gwt-voices, a cross-browser audio shim from Google. In theory gwt-voice only falls back to Flash when needed, but using the Aurora release of Firefox brings up a “You need to install Flash Player” message for Angry Birds (most likely because Firefox does not ship with mp3 support).

Calling Angry Birds an HTML5 app, is, in that regard, somewhat of a stretch.

Still, the primary rendering and logic of the game does use HTML5 elements like canvas, and HTML5 APIs like localStorage. The latter is interesting because it makes Angry Birds on the web hackable.

As per Rovio’s releases on other platforms, Angry Birds for the web offers in-app purchases for additional playing levels. But because Angry Birds uses the localStorage API, a clever dose of JavaScript will, at the time of writing, unlock the extra levels sans payment.

Welcome to the web, Angry Birds, where everything is hackable.

See Also:

Tags:
File Under: Programming, Web Apps, Web Services
Apr
25
2011

Lessons From a Cloud Failure: It’s Not Amazon, It’s You

By

Chaos Monkey will eat your cloud.

Amazon’s cloud-hosted Web Services experienced a catastrophic failure last week, knocking hundreds of sites off the web. Some developers saw the AWS outage as a warning about what happens when we rely too much on the cloud. But the real failure of Amazon’s downtime is not AWS, but the sites that use it.

The problem for those sites that were brought down by the AWS outage is the sites’ own failure to implement the one key design principle of the cloud: Design with failure in mind.

That’s not to say that Amazon didn’t fail rather spectacularly, taking out huge sites like Quora, Reddit, FourSquare and Everyblock, but as Paul Smith of Everyblock admits, while Amazon bears some of the responsibility, Everyblock failed as well:

Frankly, we screwed up. AWS explicitly advises that developers should design a site’s architecture so that it is resilient to occasional failures and outages such as what occurred yesterday, and we did not follow that advice

But perhaps the most instructive lesson comes from those sites that were not affected, notably Netflix, SimpleGeo and SmugMug. Netflix published a look at how it uses AWS last year and, by all appearances, those lessons served the company well, because Netflix remained unaffected by the recent failure.

Among Netflix’s suggestions is to always design for failure: “We’ve sometimes referred to the Netflix software architecture in AWS as our Rambo Architecture. Each system has to be able to succeed, no matter what, even all on its own.”

To ensure that each system can stand on its own, Netflix uses something it calls the Chaos Monkey (no relation). The Chaos Monkey is a set of scripts that run through Netflix’s AWS process and randomly shuts them down to ensure that the rest of the system is able to keep running. Think of it as a system where the parts are greater than the whole.

The photo sharing site SmugMug has also detailed its approach to designing for failure and why SmugMug was largely unaffected by the recent AWS outage. SmugMug co-founder and CEO Don MacAskill, echos Netflix’s redundancy mantra, writing, “Each component (EC2 instance, etc.) should be able to die without affecting the whole system as much as possible. Your product or design may make that hard or impossible to do 100 percent — but I promise large portions of your system can be designed that way.”

MacAskill also has strong words for those who think the recent AWS outage is a good argument for sticking with your own data center: “[SmugMug's] data-center related outages have all been far worse … we’re working hard to get our remaining services out of our control and into Amazon’s.”

“Cloud computing is just a tool,” writes MacAskill, “Some companies, like Netflix and SimpleGeo, likely understand the tool better.”

If you’d like to learn more about how designing for cloud services differs from traditional data-center setups, check out this excellent post on O’Reilly. Also, be sure to read Netflix’s advice and learn from Everyblock’s downtime by following the guidelines in Amazon’s own documentation.

Photo: Technically not a monkey. (DBoy/Flickr/CC)

See Also:

Tags:
File Under: HTML5, Multimedia, Web Apps
Apr
20
2011

YouTube Begins Serving Up Native WebM Video

By

YouTube has announced it will begin offering HTML5 videos in the WebM codec to web browsers that support it. So far YouTube says that it has encoded 30 percent of its videos in WebM, which accounts for 99 percent of all traffic to the site.

YouTube’s move to WebM is no surprise; Google has already dropped the competing H.264 codec from its Chrome web browser and it was only a matter of time before YouTube began moving to WebM as well.

The WebM Project, a partnership between Google, Mozilla, Opera and dozens of other software and hardware makers, provides web developers a way of embedding video and audio in HTML5 pages without plug-ins, and without the need to pay the expensive licensing fees that surround the competing H.264 codec. Currently WebM video works in Firefox 4, Chrome, Opera and Internet Explorer (via a plugin). The other main HTML5 video codec, H.264, works on all Apple devices and in Internet Explorer 9.

While YouTube is adding WebM support, it isn’t following Chrome’s lead and dropping H.264. The site will continue to serve up H.264 video to those browsers that support it (in other words, Safari, Mobile Safari and Internet Explorer 9).

Despite the new WebM support, YouTube still isn’t serving up HTML5 videos by default. If you’d like to get in on the new WebM fun, you’ll still need to sign up for the opt-in HTML5 player.

See Also:

Tags:
« OLDER POSTS