The Awesome New Technology That You’ll See On The Web This Year

The web becomes more and more capable each day, finding ways to replace what you do on your desktop. In the very near future you’ll talk to your web apps, enjoy complex animation without the drain of Flash, and maybe even plug in your guitar. These features and more already exist, and they’re coming to the broad internet this year.

Title image remixed from an original by Ralph Bijker

Thanks to the quick iteration of browsers such as Chrome and Firefox, what developers can easily accomplish with their sites grows by the day. At Google I/O last week, I sat in on Google engineer Eric Bidelman‘s session The More Awesome Web (you can view the presentation here) and learned about what we can expect from web developers — and what we as web developers can do ourselves — with the latest features of HTML5, CSS and JavaScript. Even if you’re not a developer, what’s up next for the web is pretty exciting. Here’s a look at some of the coolest features you’ll see in web apps this year.

Note: Not all browsers currently support the technologies discussed in this post, so you may need Chromium to try out any linked examples.

Plug Your Guitar into a Web Site

Yes, you will plug your guitar into a web site. Chrome already offers a web audio API that allows developers to access a user’s audio input (with permission) by writing very little code. While not terribly exciting in itself, the amazing stuff happens after grabbing that signal.

Audio processing on the web is kind of mind-blowing. Developers can now detect pitch — which could lead to web-based pitch correction/auto-tuning — and add effects to live or recorded audio (e.g. vocoders). You can even plug your guitar into a web site and add effects. The web audio API can also do simple things like record audio notes. What once took an app now takes a tiny amount of code written for the web.

Automatically Translate Your Speech

We’ve been able to talk to the web for a little while now, but with a number of limitations. For the most part, voice search was as good as it got. With the latest speech recognition abilities in Chrome, developers can make use of this technology to do much more.

For example, what if you could say something in English and see it translated into Spanish, French, Italian or a variety of other languages on the fly? You can. With access to the speech recognition API, developers can take what you say and use that text for a variety of purposes. Running that text through a translation service is just one of them.

Easily Share Your Screen

Plenty of web apps allow screen sharing, but they require quite a bit of work to make it happen. Some ask you to download software, others try to make it work with plug-ins like Flash or Java. Soon you’ll see screen sharing offered directly by your browser using HTML5, bypassing a lot of the heavy lifting required by other technologies. If you’re running Chromium, you can try it now. Other browsers will have to wait a little while before simple screen sharing is widely supported.

Enjoy Live-Rendered Animations

Although not the most outright exciting feature for the end user, we’ll all come to appreciate the complex animation possible in the browser as developers implement new possibilities. By now you might be familiar with the SVG format, which offers a way of drawing scalable vector graphics using XML code. This format not only makes it possible to create images without files that load quickly, but also scale those images to pretty much any resolution without pixelation. In its own right, SVG is amazing. When you add animated masks using clipping paths, you get some pretty cool effects. The code is easy to write and will allow developers to add compelling and interesting motion elements to their sites.

The Future

These are just the highlights. Smaller, less flashy improvements are on the way as well and new technologies will likely surface in the latter half of 2013. The web is growing in awesome, incredible ways this year. As the years progress, we’ll be doing even more than we expected in our browsers.