Archive for the ‘JavaScript’ Category

File Under: APIs, CSS, HTML, JavaScript

‘Tis the Season … To Write Better Code

The holidays are here and for web nerds that means only one thing — another wave of advent tutorials is hitting the web.

It doesn’t feel much like winter right now at the Webmonkey lair, but that’s okay because we mark the start of the holiday season by the launch of 24Ways, the grand poobah of advent calendars for web nerds. 24Ways has been an annual tradition since 2005, offering 24 articles packed with new tips and tricks showcasing some of the year’s best new ideas in web development.

This year’s 24Ways kicked off with a tutorial on HTML5 Video “Bumpers” by 24Ways founder Drew McLellan. Other articles thus far include how to start a project on the right foot, how to contribute code to the community and Geri Coady’s excellent article on Color Accessibility.

While 24Ways may be the biggest name in advent tutorials, it’s not lacking for competition these days. We also recommend the Performance Calendar, which tackles the often confusing world of website optimization. There’s also Digitpaint’s advent calendar which we enjoyed last year and has already published some nice articles this year, including this look at CSS filters.

If you’re missing another favorite, the PHP Advent Calendar, fear not, it has returned, but with a new name and domain: PHP Advent is now Web Advent. The name may have changed, but Web Advent offers similarly great content, like this article on Sharing What You Know by Heather Payne, the founder of Ladies Learning Code.

Mozilla Blends Social API, WebRTC for More Social Apps

Mozilla is making good on its promise to take its fledgling Social API beyond the simple Facebook integration it showcased for the launch of Firefox 17. In fact, the company’s newest Social API demo removes the need for social websites entirely, tapping emerging web standards to create a real-time video calling, data sharing app — one part Skype, one part Facebook, all parts web-native.

The direct peer-to-peer video calls and file sharing features come from WebRTC, a proposed web standard that Mozilla and others are working on in conjunction with the W3C. The RTC in WebRTC stands for Real-Time Communications, and the core of WebRTC is the getUserMedia JavaScript API, which gives the browser access to hardware features like the camera and microphone.

Much of the enthusiasm around WebRTC comes from the fact that it enables web apps to do many of the same things that, without WebRTC support, require platform-native APIs. WebRTC will help developers build web apps that can compete with native apps, but it has other tricks up its sleeve — like a whole new way to connect with your friends on the web.

“While many of us are excited about WebRTC because it will enable several cool gaming applications and improve the performance and availability of video conferencing apps, WebRTC is proving to be a great tool for social apps,” writes Mozilla’s Maire Reavy on the Mozilla blog.

Reavy goes on to paint a picture of seamless social sharing through WebRTC and Mozilla’s Social API:

Sometimes when you’re chatting with a friend, you just want to click on their name and see and talk with them in real-time. Imagine being able to do that without any glitches or hassles, and then while talking with them, easily share almost anything on your computer or device: vacation photos, memorable videos — or even just a link to a news story you thought they might be interested in — simply by dragging the item into your video chat window.

Mozilla’s Social API-WebRTC mashup goes beyond previous demos, using a new WebRTC feature, one which Firefox is the first to support, DataChannels. DataChannels offer a way to send data from one WebRTC-enabled browser to another. DataChannels can send pretty much any data the browser can access, be it images, videos, webpages or local files.

For more details on how the DataChannel API works, check out this earlier post on the Mozilla Hacks blog. If you’d like to see exactly what’s happening behind the scenes of Mozilla’s Social API-WebRTC demo, the code is available on GitHub.

File Under: JavaScript, Multimedia

HUGEpic Embeds Massive Images Without the Huge Downloads

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

RSS in JSON, for Real?

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.
File Under: Browsers, JavaScript

Better JavaScript Development With ‘JSTerm’ for Firefox

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.