Web browsers have been growing up over the past few years. Now that Internet Explorer 6’s hold on the web has been broken, browsers have been implementing a variety of cool new features that websites are taking advantage of today.

This article focuses on new web technologies that you can use on actual web pages today. Sure, some of you have no doubt heard of many of these, but the majority of people haven’t heard of all of them.

Drag and Drop to Upload

Many websites now allow you to upload files just by dragging and dropping them into your browser window – a welcome change from having to click a browse button and use a file chooser, as we had to just a few years ago. Whether you’re attaching a file to an email in Gmail or uploading an image to imgur.com for quick sharing, you can drag and drop the file onto the web page.

Render 3D Graphics in the Browser

Browsers like Chrome and Firefox now support WebGL, which allows web pages to render 3D graphics without any plugins. WebGL can be used for games and other 3D models, but the most popular website using WebGL is probably Google Maps. On Google Maps in Chrome, you can enable “MapsGL.” This will cause Google Maps to render the map with OpenGL, resulting in smoother animations. When you use Street View, you’ll see an animation as the map zooms in. Street View will also be rendered with OpenGL, not Adobe Flash.

If Google Maps wasn’t impressive enough, the Quake 3 engine has been adapted to work in WebGL in your browser. This website also uses the pointer lock (or mouse lock) specification to grab your mouse pointer and keep it within the game area.

Communicate with WebSockets

HTML was never designed to allow web pages to communicate back-and-forth with web servers. HTML was created for static web pages, and most web pages currently use hacky polling-based methods to communicate with servers. WebSockets allow web pages to create a full communication channel over a TCP connection, dramatically reducing latency and network traffic when web pages need to send data back and forth with servers.

WebSockets are used by Mozilla’s BrowserQuest game, allowing the game running inside your browser to send events back and forth to its server. WebSockets have also been used to create IRC clients running in your browser. Perhaps most impressively, WebSockets have also been used to create a JavaScript torrent client that runs in your browser, giving Chrome OS users a native torrent client. JSTorrent doesn’t look completely stable yet, but it’s a good example of what’s possible with WebSockets.

Play Videos and Music Without Flash

HTML5 video has gotten a lot of attention, so many people know that it’s now possible to play back videos in H.264 (MP4), WebM, and Ogg Theora formats without needing Flash installed. Many video websites – including YouTube – offer HTML5-based video playback. Unfortunately, many websites insist that they need DRM, which is why YouTube still uses Flash for videos with advertisements and Netflix still uses Silverlight for its videos. HTML5’s “video tag” can look just like a Flash-based video player, so you may never notice that a website is using it – except that video playback will work on mobile devices and will perform better.

Run Web Apps Offline

Access Your Webcam and Video Conference

Web pages can now access your webcam – with your permission, of course. A web page could use this feature to take photos from your webcam for your profile picture or record video. However, it could also use the new WebRTC API for video conferencing between different browsers without any plugin required. In the future, Google’s Hangouts won’t require a plugin at all and Skype will run in your browser, too.

 

Create Notification Pop-ups

Browsers now allow web pages to show you desktop notifications. For example, Google Calendar can show you pop-up notifications when you have created reminders for upcoming events. Chat and email websites could display pop-ups to alert you of new messages.

Identify Your Location

Web pages can now ask for permission to access your location. If you’re using a tablet or another type of device with a dedicated GPS chip, the browser will use your GPS hardware to identify your location. On devices without GPS chips, nearby wireless network names or your ISP’s location can be used to approximate your current location. Geolocation can replace the need to type your address into websites that display local content and allow you to determine your precise location using a GPS chip on a portable computer.

Make Web Apps Your Default Applications

Browsers now allow web apps to become your default applications, so you can use Gmail in your browser to send emails when you click a mailto: link anywhere on your computer – even outside your browser.

Run Native Code In Your Browser

Somewhat controversially, Chrome includes Google’s Native Client. Native Client allows web pages to run native code written in languages like C or C++. The code is executed in a sandbox for security, and it runs at almost-native speeds.

Native Client allows web pages to run high-performance code for things like game engines and local video encoding. It could be the path to getting more advanced applications on Chrome OS. The Chrome Web Store contains a variety of games written in Native Client, including a port of the critically acclaimed Bastion.

Browsers are gaining new web features at a rapid pace. We can be thankful that Internet Explorer 6 is no longer the industry standard.

Image Credit: Christian Heilmann on Flickr