2013-04-08

Demo Of The Day: Software That's Pushing The Web Forward

Every day, we come across demos from developers across the world pushing the boundaries of what's possible in their domains. From amazing experiments with the bleeding edge of browser technology to incredible new mobile app UIs and beyond, this post is an ongoing log of our favorites. If you see a demo worth including here, let us know by tweeting @fastcolabs or talking to us on App.net, Tumblr, Facebook or Google+.



Sometimes we see a demonstration that makes us stare at the screen for minutes trying to figure out how it was done. Other times we find ourselves refreshing the page again and again to watch a delightful new trick. On very rare occasions, something comes along that feels like a giant leap forward for the web. We're using this post to share our daily favorites and keep a log of the demos that made us change the way we think about software.

April 16, 2013

Co-browsing is an inevitable evolution of the way we surf the web. That's why we've been watching apps like Juntoo with great anticipation—it's an iPad app that allows two people to co-view PDFs, websites, documents and images. But sometimes you just need something light and web-based to get your point across.

That's the concept behind the Pensieve screencast, a simple utility that lets you draw on the screen with your Wacom tablet (or cursor), capture the screencast and send it as a link or embed. This isn't exactly co-browsing, but it's a much faster form of asynchronous demonstration that fits somewhere between a WebEx and and an email attachment (or some other delayed message.)

The point here isn't that you can solve all your collaborative challenges just by capturing your screen—but rather to demonstrate that there is a lot of territory between "real time" and everything else, with room for lots of different bespoke tools for different jobs.


April 12, 2013

Visualizing data on the web can be a kluge when users are visiting your site on multiple browsers and platforms. D3.js is a Javascript library that intends to make it easier for developers to create embedded charts and graphs using web standards for HTML, SVG and CSS, without any proprietary nonsense. Here is a project that gives you reusable charts and graph components that are fully customizable—no boilerplate code here.

Charts included are:

  • Simple Line
  • Scatter / Bubble
  • Stacked / Stream / Expanded Area
  • Discrete Bar
  • Grouped / Stacked Multi-Bar
  • Horizontal Grouped Bar
  • Line and Bar Combo
  • Cumulative Line
  • Line with View Finder
  • Pie Chart
  • Bullet Chart
  • HTML Indented Tree

Play with the code behind these charts here.


April 10, 2013

Hyper-lapse videos are taking the Internet by storm, but creating them is a time-consuming and difficult process because it requires taking many photographs from precise angles and stitching them together in editing software. What if you could tap into a source of preexisting photos of nearly the entire world, taken from predictable angles with location data already embedded in them?

That was the thought behind Toronto-based web agency Teehan+Lax's Google Street View hyper-lapse project. The software, which they released as an open-source project on GitHub, combines Three.js, the same 3-D rendering library used in the GitHub STL viewer we highlighted yesterday, and GSVPiano.js, a library for requesting Google Street View photos. The result is a creative tool that anyone can use to create hyper-lapse videos of practically any street in the world. Because it's open source and very simple to implement (about 40 lines of JavaScript to create a video), we can't wait to see what developers do with it.

Past Demos

April 9, 2013

Thanks to 3-D printers, we may be rapidly approaching a time when most physical objects have forkable source code. It makes sense that GitHib, the most prominent host of open-source projects, is leading the way with a new viewer for STL files, the most popular 3-D CAD format of the maker community. The technology behind the viewer isn't particularly new, but the combination of GitHub's popularity and the 3-D printing projects already being tracked through the site's repositories makes this feel like a giant leap forward for the home fabrication movement. Plus, it's just incredibly fun to browse through massive repos of STL files (this is our favorite so far) and see 3-D versions of the physical objects these digital files represent.


April 5, 2013

After a couple of miles, us humans start to lose our sense of scale. Take, for example, interplanetary distances. At its closest, Mars floats about 35 million miles from the Earth. Can you visualize that length? Of course not. To understand the distance in human terms, try this demo, which reduces the Earth to a 100-pixel-wide sphere and then flies you to Mars in your browser. After watching and scrolling through it a few times, you'll have a sense of just how far away the red planet really is (spoiler alert: it's not that close).


April 4, 2013

How many hours have you wasted pulling data out of PDFs? Those days are over, thanks to Tabula, a project from Knight-Mozilla Open News. The software is still a work in progress, but for anyone who works with government data, even this initial prototype will be a panacea. Check out the restricted demo or fork the project on GitHub.


April 2, 2013

Native browser animation continues to amaze. For the JS1K competition, cellist and developer Grant Kot managed to cram an HTML5 canvas simulation of "soft body blobs, collisions between them, and collisions with a sinusoidal terrain" as well as mouse interaction into less than one kilobyte of JavaScript. It's one of the smoothest native browser demos we've seen, maintaining a good frame rate even after hundreds of blobs fall onto the screen. Considering it's just a bunch of squishy circles floating around, the demo is also deceptively entertaining to watch and play with.


March 27, 2013

If you had told me a week ago that native console-quality gaming was possible in the browser, I would have laughed. Today, I would be regretting it. Using a highly optimized subset of JavaScript called asm.js, the team at Mozilla worked with Epic Games to port its ubiquitous Unreal Engine to the browser. The result was spectacular, as you can see in the above video.


Check Back Daily For More Demos


[Fly Image: Craig Taylor via Shutterstock]




Add New Comment

0 Comments