Archive for the ‘JavaScript’ Category

File Under: JavaScript, Multimedia
Nov
19
2012

HUGEpic Embeds Massive Images Without the Huge Downloads

By

Hieronymus Bosch’s The Garden of Earthly Delights in HUGEpic.io.

HUGEpic is a web app for displaying massive images online and browsing them like you would a map. There are several Flash-based tools that can already do similar things, but HUGEpic doesn’t require a plugin, meaning it works perfectly well on both desktop and mobile devices.

HUGEpic means you can add very large images to your pages without forcing your users to download enormous files. HUGEpic works like Google Maps, but for images — only the data necessary for the current zoom level is actually loaded.

Developer Peter Bengtsson launched HUGEpic a few weeks ago, but it wasn’t until today that it gained its most useful feature — the ability to embed HUGEpic’s image browser in your own site.

Other nice features in HUGEpic include permalinks for bookmarking or sharing images with friends. The permalinks even remember particular locations and zoom levels within an image, as does the new embedding feature. As you pan around on your image, the position and zoom level are automatically inserted into the HTML embed code. There’s also an option to draw annotations on a layer on top of the image.

HUGEpic is what Bengtsson calls a “little fun side-project” so it may not stand up to massive traffic, but the code is available on GitHub if you’d like to set up your own instance of HUGEpic. [Update: As Bengtsson notes in the comments below, "all images are served from a Amazon CDN with servings from every continent in the world. Also, it's built to be very fast. The home page alone makes over 4,000 requests per second."] For more info on the tools behind HUGEpic — which include a Tornado server with MongoDB and Redis on the backend — see Bengtsson’s original blog post.

File Under: APIs, JavaScript, Web Basics
Sep
11
2012

RSS in JSON, for Real?

By

Photo: Kevin Conboy/Flickr

A short while ago Twitter said they were going to move to JSON over XML, without much explanation other than they like JSON and not XML so much these days, etc. I’m a big believer that everyone has the right to support whatever they want when they want for whatever reason, whether they say the truth or not. Because of that belief, I take with a grain of salt every bit of support for every format and protocol. I assume that just because someone supports it today doesn’t tell you for sure that they will support it tomorrow. Though the penalty is usually pretty high for removing support for interfaces people depend on. They tend to remember it next time you ask for their trust. All that is fair game too.

So anyway, this got me thinking again about the possibility that JSON might take over from XML. What then? Should we give up all the interop we get from RSS just because it uses XML and not JSON? And it’s because of all that interop that that day will never come. A transition may happen over a long period of time, and before it’s complete there will be something after JSON. Because smart people see that, they tend to be conservative about switching just for the sake of switching. It’s why the web, which is entirely an XML application, will keep XML support everywhere for the forseeable future.

In other words, I’d bet with virtual 100 percent certainty that it’s safe to keep producing XML-based RSS feeds.

But people like JSON, there’s no denying that. And a JSONified RSS can totally co-exist with the original XML. So let’s have RSS in JSON? That’s a question that seems worth asking about, at this time.

Turns out it is a very straightforward thing to do. I of course have an RSS feed for Scripting News, the blog you’re reading right now. I wrote a script that maintains JSON and JSONP versions of the same content, automatically. When the RSS is built so are the JSON formats.

http://scripting.com/rss.json and http://scripting.com/rss.js

I learned a long time ago to embrace change. It’s why there is a RSS today that is derived from the RSS that Netscape shipped in 1999 and has features of my scriptingNews format shipped in 1997. If the world wants to go to JSON, help it get there in a way that benefits from all we learned in the evolution of RSS from 1997 through 2002. It’s stood up pretty well over the years. And there’s wide support for it, and lots of understanding of how it works. If there is to be a JSON-based syndication standard, we can cut years off the development process by simply accommodating it.

So I put together an invitation to discuss this.

http://rssjs.org/

If you find this interesting, give it some thought, and if you have something to say, write a blog post of your own, or write a comment on that page. Obviously there’s no moderation for what goes on your blog, but there will be moderation of the comments. Be aware of that. One feature of the past are personal attacks which are totally pointless and subtract from the discourse, and we should not carry that practice forward. That’s why the moderation. :-)

Otherwise, I totally look forward to hearing what people think.

Thanks…

This post first appeared on Scripting News.

Dave Winer, a former researcher at NYU and Harvard, pioneered the development of weblogs, syndication (RSS), podcasting, outlining, and web content management software. A former contributing editor at Wired magazine, Dave won the Wired Tech Renegade award in 2001.
Follow @davewiner on Twitter.
Tags: ,
File Under: Browsers, JavaScript
Sep
5
2012

Better JavaScript Development With ‘JSTerm’ for Firefox

By

JSTerm, an experimental Firefox add-on for JavaScript developers, has hit version 2.0.

The JSTerm Firefox add-on — not to be confused with the HTML5 Telnet Emulator by the same name — adds a “jsterm” button to Firefox’s Developer Toolbar. Click the button and you’ll get a JavaScript terminal for live coding, prototyping and quick JavaScript experiments. JSTerm behaves like a typical shell terminal with history, tab completion and plenty of key bindings.

Version 2.0 offers performance improvements, a new option to undock the terminal into its own window, global history shared across sessions and support for OS X’s fullscreen mode.

To try out JSTerm you’ll need Firefox 16 (currently in the Beta channel) since JSTerm uses the new Graphical Command Line Interface we covered in our Firefox 16 beta review. JSTerm also takes advantage of the built-in Firefox Source Editor to highlight JavaScript and a sandbox to eval JavaScript.

If you’re thinking there are already several tools for Firefox that cover this ground, well, you’re right. The built-in Scratchpad and WebConsole both offer similar tools, though neither is quite as nice for quick prototyping and experimenting. Developer favorite Firebug also has a Console for JavaScript developers, but it lacks the nice syntax highlighting you’ll find in JSTerm.

For more details on JSTerm and a changelog of everything that’s new in this release, check out Mozilla developer Paul Rouget’s blog. To have a look at the code behind JSTerm, head to GitHub.

Tags: ,
File Under: JavaScript, Multimedia
Aug
27
2012

Tired of Tiny Movies? Go Large With BigVideo.js

By

Size matters. Image: Screenshot/Webmonkey

Nothing grabs a user’s attention like a big, full-window video on a landing page. For example, check out Path.com. However, with all the various screens potentially connecting to your site these days, making sure your movie plays full-window on all of them can be tricky.

That’s where BigVideo.js comes in. Developer John Polacek‘s BigVideo is a jQuery plugin for adding big background videos to your site. The plugin makes it easy to drop in a single video URL and get fit-to-fill background video that takes up the whole window. The script will fall back to displaying an image on devices where video doesn’t work.

BigVideo can also handle playlists, serving up a series of videos, as well as a very cool feature to play videos without the sound. And yes, you can (and should) add a button to allow users to turn the video off altogether. That said, I left BigVideo open, running in a background tab for several days and it didn’t have a noticeable impact on performance.

For more info, head over to the GitHub page where you can see BigVideo in action, get a full list of features and grab the code for your own site.

Tags: ,
File Under: Browsers, JavaScript
Aug
22
2012

Speedy Chrome Tops Google’s New ‘Octane’ JavaScript Test Suite

By

Is your browser running on high octane? Image: Barbara L. Hanson/Flickr

The Google Chrome team has added a new set of JavaScript benchmarks to the web, dubbed “Octane“. Octane joins the ranks of other test suites like WebKit’s SunSpider test and Mozilla’s Kraken.

Google’s Stefano Cazzulani, Chrome Product Manager, writes on the Chromium blog that, despite a plethora of benchmarks on the web, Google wanted a new suite with “new benchmarks created from full, unaltered, well-known web applications and libraries.” The result, says the company, is a test suite that better reflects performance in “real web applications.”

Of course what constitutes “well-known web applications and libraries” is left to Google’s Chrome team to decide, and, perhaps not coincidentally, Chrome scores quite well on Octane’s hand-picked suite. That’s not to say that Chrome isn’t actually quite fast, but it does highlight the main problem with browser-maker benchmarks — the browser vendor creating them almost always seems to score the highest on them.

I ran the latest version of each of the major web browsers through Octane on a 2008 MacBook Pro (average of five runs each):

  • Safari 6: 6007
  • Chrome 21: 8517
  • Firefox 14: 5351
  • Opera 12: 3330
  • Internet Explorer 9: (tested in VMWare, but IE9 didn’t render the page.)
  • Mobile Safari (iPad 3): 553 (incomplete test, typed arrays aren’t supported in Mobile Safari).

Naturally the results will vary depending on your hardware, particularly your graphics card, but in all my tests Chrome won by a large margin.

To see the actual tests — which include a 2D physics engine, a 3D rendering engine culled from translated C++ along wit PDF.js and other libraries — head on over to Google Code where you’ll find the source for the entire suite. Also be sure to read through the FAQ for more info about the thinking behind Octane.

Tags: ,
« OLDER POSTS