Script Junkie

Serious Web Development

August, 2011

  • Script Junkie

    Spin.js makes Animated Gifs Old School


    In most web apps, when an Ajax request is done, developers will use an animated gif image (AKA Throbber) to give the user an indication that something is going on. Throbbers come in many forms from circles to bars and even animated logos. The key thing is that they all required an image to be loaded and rendered to the user.

    Spin.js is a new library that aims to cut out the need for images. Created by Felix Gnass, Spin.js uses CSS3 and JavaScript to render the indicator. For versions of IE that don't support CSS3, the lib falls back to using VML to render the UI. Here's how you'd setup a simple throbber:

     var opts = {
      lines: 12, // The number of lines to draw
      length: 7, // The length of each line
      width: 5, // The line thickness
      radius: 10, // The radius of the inner circle
      color: '#000', // #rbg or #rrggbb
      speed: 1, // Rounds per second
      trail: 100, // Afterglow percentage
      shadow: true // Whether to render a shadow
    var target = document.getElementById('foo');
    var spinner = new Spinner(opts).spin(target);

    The great thing is the broad browser suppoer with Spin.js being successfully tested in:

    • Chrome
    • Safari 4+
    • Firefox 3.5+
    • IE 6,7,8,9+
    • Opera 10.6+
    • Mobile Safari (iOS 4)

    Be sure to visit the demo page so you can use the interactive builder to see how the throbber can be dynamically adjusted based on small adjustments.

  • Script Junkie

    Using and Writing Polyfills for Building Modern Applications


    HTML5 is the hot topic these days. Everybody wants to use the cool features and enhance their sites. One stumbling block is the pervasiveness of non-modern browsers that don't support these great new features. So how do you get around this? Through polyfills and shims of course! Thankfully, a lot of very smart people have created specially crafted JavaScript, HTML and CSS that can mimick the funcitionality found in HTML5, CSS3 and ES5 in non-modern browsers.

    Contributing author and awesome developer Addy Osmani has put up a great post that dives into writing cross-browser JavaScript polyfills where he guides you through the ins-and-outs of polyfills and how to get started using them in your web applications.

    "In today's post, I'm going to recount my experience of creating a cross-browser polyfill along with the lessons learned along the way. I'll also give you some tips on how you can create your own polyfills and avoid some of the headaches developers often run into when coding them for the first time."

    If you're interested in leveraging HTML5 and ES5 today while still supporting non-modern browsers, Addy's post is well-worth the read. You can also check out the article I wrote for .net Magazine on the same topic.


  • Script Junkie

    HTML5-Powered VNC Implementation noVNC Let's You Access Remote Systems


    I'm constantly amazed at what developers are able to accomplish now with browser-based technologies. I've used VNC for years to remotely manage PCs and servers and it's a great tool for sure. Never in a million years would I have imagined that you could build an implementation of it using HTML5. That's what Joel Martin has done with the HTML5-powered noVNC VNC client.

    By leveraging WebSockets and Canvas, noVNC is able to remotely connected to a box and render our the screen. Here's the main caveat though (via Joel's Github repo):

    "Unless you are using a VNC server with support for WebSockets connections (only my fork of libvncserver currently), you need to use a WebSockets to TCP socket proxy. There is a python proxy included ('websockify'). One advantage of using the proxy is that it has builtin support for SSL/TLS encryption (i.e. "wss://")."

    Regardless, this is still hot and a testament to how powerful web technologies are becoming. You also have to give credit to Joel for some innovative thinking and skills. Check out the video here:

    noVNC currently works on all modern browsers and for those that don't support WebSockets, it falls back to the web-socket-js polyfill for support. For IE9, you can also use the WebSockets prototype offered on the Microsoft HTML5 Labs site.

Page 1 of 1 (3 items)