Script Junkie

Serious Web Development

Posts
  • Script Junkie

    Understanding jQuery's Data API's

    • 0 Comments

    jQuery's Core Team Member, Dave Methvin has a great write up on LearningjQuery.com called "Using jQuery's Data API".  He walks us through the beginning thoughts on what the .data() API was meant for, a DOM based In-Memory storage, to how it evolved into reading the data attribute in HTML5.  Dave outlines 5 rules of the road for using .data():

    1. Only the .data() API reads HTML5 data-* attributes, and it does so once.
    2. The .data() API converts HTML5 data-* values to Javascript types whenever possible.
    3. The lower-level jQuery.data() API does not read HTML5 data-* attributes.
    4. No jQuery data API ever changes HTML5 data-* attributes.
    5. All data-* names are stored in camelCase in the jQuery data object, using W3C rules.

    You can read more about the history and the rules of the road over at Learning jQuery.

  • Script Junkie

    Spin.js makes Animated Gifs Old School

    • 1 Comments

    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

    • 0 Comments

    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 ScriptJunkie.com 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

    • 0 Comments

    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.

  • Script Junkie

    Expression Web 4 SP2 Brings the jQuery Goodness and Interactive Snapshot for Debugging

    • 0 Comments

    Microsoft released Expression Web 4 SP2 and it brings a host of nice features. The two that I'm really digging are jQuery Intellisense support and the Interactive Snapshot.

    jQuery Intellisense

    Expression has traditionally be a designer's tool but with the lines between developer and designer blurring, it makes sense for Expression to add support to one of the most popular JavaScript libraries out.

    In their 2010 survey of Web Developers, Web Directions found that jQuery dominates—used by (an astounding) 78% of respondents.

    Um..yea. jQuery is incredibly popular and adding it into Expression makes it substantially easier for users to build out dynamic sites.

    Interactive Snapshot

    One of the best features of Expression Web has to be the SuperPreview which lets you look at your site as it would render in any version of IE and Firefox 3.x. This was a snapshot though which was kind of tough if you were hoping to debug easily as it rendered. With Interactive Snapshot, you now have the ability to do just that:

    In Web 4 SP2, we’ve added an Interactive mode to our stable of IE renderers (as well as an interactive Firefox 3.x). Interactive mode essentially puts Internet Explorer in a panel, allowing you to see and interact with web pages during the authoring process. Mouse-overs, lightboxes and animations all work. Simply saving your changes triggers a refresh of the panel. IE Interactive uses the current version of Internet Explorer installed on your machine.

    While these are my two favorite features for this update, there's a whole lot more to check out so be sure to check out the blog post for details and give Expression Web a try.

  • Script Junkie

    New Release of LABjs Script Loader. Improved Chaining Support, Feature detection, DEBUG mode and more.

    • 0 Comments

    Great news! Kyle Simpson, author of the highly popular and useful LABjs dynamic script loader, just tweeted out that he's released LABjs 2.0! Of course, I had a quick chat with him so he could give me the lowdown on the new release:

    LABjs 2.0 is a full rewrite, emphasizing standardized and future thinking feature tests instead of hacks, readable source code, and several helpful new features. LABjs 2.0's goal is to be both a complete loader solution itself, as well as the building block for a variety of more complex dependency management solutions.

    Cool new features include:

    • script() calls in the chain allow you to define one or more scripts to load in parallel
    • wait() calls in the chain allow you to express where execution order needs to wait to preserve dependency execution.
    • LABjs now uses standardized and future-thinking feature tests for preloading and ordered-execution loading, de-emphasizing hacky techniques like cache preloading (now only used in older legacy browsers).
    • The source code is vastly cleaner, and well commented
    • v2.0 is backwards-compatible for its API
    • Many bugs/quirks, including weirdness with "AllowDuplicates" and chain resumption, have been completely fixed
    • New features include "debug mode", built-in queueing, cache-busting, sandbox(), and noConflict()

    You can check out the release notes for full details and nab a copy of the latest version here.

  • Script Junkie

    Cloud-based Development via Node.js and Cloud9 IDE Integration Coming Soon

    • 0 Comments

    We all know that Node.js and Cloud9 IDE are both hot bits of technology so it should come as no surprise that Joyent and Cloud9 have partnered to make it easy to build, run, debug and deploy Node applications using the web-based IDE.

    Here's the press release:

    In an arrangement that brings together the work of JavaScript inventor Brendan Eich and Node.js inventor Ryan Dahl, Joyent and Cloud9 IDE, Inc. today announced an agreement to provide web application developers with a one-stop cloud development and deployment platform for Node.js applications from within the Cloud9 IDE (Integrated Development Environment).

    The Cloud9 IDE, a state-of-the-art IDE that runs in the browser and lives on Joyent’s public cloud, JoyentCloud.com, allows developers to run, debug and deploy applications from anywhere, anytime.  This joint effort gives developers ready access to a premium IDE at no cost for pre-production use, and includes support for commercial use.

    Developers can self-provision their Joyent Node.js SmartMachines from within the Cloud9 IDE, and immediately begin testing on their Node.js-based application. Once an application is ready for production, developers are able to purchase commercial cloud services that ensure scalable, successful deployment.

    “If you want to see the future of cloud computing, this is it. Joyent has the complete cloud data center software stack and we have the cloud-based IDE for JavaScript, which is the language used by over three-quarters of websites today and is a key part of the explosion of mobile apps,” said Cloud9 IDE CEO Ruben Daniels. “The new integrated solution lets you create your development project in Cloud9, and then test and run your code on the Joyent architecture. You don’t have to create a new Joyent account – Joyent automatically accepts the login and billing information from your Cloud9 IDE account.”

     “We want to provide developers with the best tools for developing next-generation web applications, and this partnership does just that,” said David Young, Joyent CEO. “The combination of the Node.js IDE and Joyent cloud make it effortless for a developer to get an app up and running in the cloud quickly and successfully.”

    Joyent Chief Evangelist Tom Hughes-Croucher and Cloud9 IDE, Inc. CTO Rik Arends will be putting on a webinar discussion about this partnership on Wednesay, July 20 at 10 AM Pacific time. Sign up here.

    Here are some pics to whet your appetite:

     

     

     

     

     

  • Script Junkie

    Evaluating jQuery Plugins for Use in your Projects

    • 2 Comments

    I just found, what looks like an, awesome HTML5 Uploader jQuery Plugin in my Twitter feed and my first thought was, “Wow, this would make a great addition to the project that I am currently working on.”  Unfortunately, once I started to evaluate the plugin it failed miserably in all aspects of my evaluation criteria.  So much so, I feel it is a great example of how NOT to release a jQuery plugin.

    Here is the criteria I use to evaluate a jQuery plugin before I consider using it in my project:

    1. Good documentation and demos - If I can’t figure out how to use your plugin and/or see what it’s capable of fairly quickly I don’t really want to waste my time on trying to figure that out.  The plugin author should be providing at the very least easy examples on what the plugin does.
    2. Easily downloadable - Seems like a silly requirement but if I can’t easily download the code because of a silly wall in place like having to tweet to be able to get to the code base then that’ll weigh heavily in my determining to use the plugin or not.
    3. License released under - I should also be able to find what license the plugin is released under.  Ideally it should be listed on the plugin site but if not in the header of the JavaScript file. If a jQuery plugin does not have a license specified I will not consider it.
    4. Source code available - Most jQuery plugins are released with an open source license, with those projects the code should be available to evaluate.  I should be able to see the full source code, if you are only providing a minimized version then I am unable to evaluate very easily to understand how the code is architected.



    These are just simple things every plugin author should be doing.  Unfortunately, HTML5 Uploader jQuery Plugin failed on 3 out of 4 items listed above.  I contacted the owners of the plugin to voice my displeasure and was sent a reply with a code beautifier link to be able to read the minified code that one got after having to “Pay with a Tweet” to download the code which has no license attributed with it.  I replied back with “thanks, but no thanks” and will find something else until they fix those issues above.

    In addition to the items above, I consider the following to be a huge plus when evaluating a jQuery Plugin:

    1. Source Code available on Github - This is a huge plus I can easily fork, watch or submit issues to the code base.  Github also provides the easiest way to view commits and see if the code has been idle or not.
    2. MIT and GPLv2 Licensed - I find plugins licensed the same as the jQuery code base to be ideal.
    3. Unit tests - It shows that the code is thoroughly tested each release and I can rest assured that the code is of quality.
    4. Issue Tracker - If it is on Github I can see if the issue tracker is in use and if issues are being addressed as they come up.  This allows me to help the project if I come across any problems.



    What are some criteria you use when evaluating jQuery Plugins or JavaScript code in general?

    * Note: This content was originally posted on http://ralphwhitbeck.com and is reprinted here with permission.

  • Script Junkie

    Buzz Makes it Easy to Use HTML5 Audio

    • 0 Comments

    Jay Salvat has produced some amazing jQuery plugins before and his latest library continues in that tradtion. Buzz is his newest creation and makes it incredibly easy to use the new HTML5 Audio element's API. It offers methods to track things like:

    • Browser support
    • Codec support
    • Timing
    • Playback
    • and more...

    And support for a variety of audio formats:

    It also provides methods to help you degrade your application for non-modern browsers. It's a simple, clean and easy-to-use library and definitely worth a look.

  • Script Junkie

    Another Great JavaScript Learning Center Launches...and it's Free!

    • 0 Comments

    Everyone wants to learn JavaScript now. It's the cool language and the language that's powering a lot of the awesome features of HTML5. While there are several resources available many require some form of payment so when you find one that offers good guidance at no cost, you make sure you bookmark it. So be sure to jot this site down as appendTo has just announced their free Developer Learning Center which is chock full of videos to get you up to speed on JavaScript and jQuery.

    Andrew Wirick, Senior Trainer and Developer, explains the lesson structure, "Often learning is about understanding what prerequisite knowledge you need to know before tackling a subject. The goal of the lesson structure was to provide an interactive learning experience while also providing an easy way to tell what prerequisites a student needs."

    Right off the bat they have 8 videos to choose from and each video is about 30-40 minutes long. They range from JavaScript 101 to understanding how jQuery manages events so you'll have a good set of options to learn from.

     

  • Script Junkie

    IE10 Platform Preview 2 is Out with More HTML5 and CSS3 Goodness

    • 9 Comments

    The IE team has just announced the release of IE10 Platform Preview 2 and it's chock full of HTML5 & CSS3 goodness. Included in the preview are features developers have been clamoring for including:

    Expanded HTML5 support:

    • Asynchronus Script Execution
    • Drag and Drop
    • File API
    • Forms Validation
    • Sandbox
    • Web Workers

    Expanded CSS3 Support:

    • CSS3 Flexible Box (“Flexbox”) Layout
    • Positioned Floats
    • CSS3 Gradients
    • CSS3 Grid Alignment
    • CSS3 Multi-column Layout

    I'm especially excited about the addition of the Forms Validation and Web Workers API.

    Web Workers Fountain Demo App:

    Forms Validation Demos:

     Full details about these new features and more can be found in the Internet Explorer Platform Preview Guide for Developers.

    You can download IE10 Platform Preview 2 here and test out the latest updates and demos via the Internet Explorer Test Drive site.

     Channel 9 has also published a set of videos showing off the new stuff in IE10 PP2.

  • Script Junkie

    Tutorial: Making a Canvas Snake Game

    • 0 Comments

    Everyone's excited about the gaming possibilities that HTML5 brings, especially via the Canvas element. CSS master Chris Coyier has a nice guest post on his blog by JS stud, Nick Morgan, who is one of those who are excited and decided to gain some experience by making a Canvas-based snake game:

    Of all the new elements being added in HTML5, I think canvas is one of the most exciting. Canvas gives you a fixed-size drawing surface and a selection of basic commands to draw on that surface.

    In  this tutorial I'm going to show you how to make a simple snake game using canvas. You know, like you used to get on your Nokia phone.

    Rick walks you step-by-step explaining what the Canvas element is, how you can do simple animation and then roll it all up into a neat game. I especially loved his use of JSFiddle so that readers can instantly run the code and get feedback within the article.

    Now don't expect a King Cobra or Python to appear. The end result is REALLY basic but that's the point of it; to give an intro to Canvas animation.

    Definitely worth a look if you're interested in taking advantage of Canvas and gaming.

  • Script Junkie

    GitHub for Mac Looks Sweet...and it's FREE!

    • 2 Comments

    I have to say I'm just a little jealous at the announcement by the GitHub team. They've just released GitHub for Mac and this desktop app for the GitHub service looks sweet! It has everything you would expect from a Git UI including:

    • Cloning repos
    • Browsing history
    • Easy branching
    • Reviewing commits
    • and a whole lot more

    And the UI is clean and dead simple. Best of all it's a FREE download! And yes, I'm a little jealous because I want this for Windows 7! C'mon GitHub, show the Windows love!

    Pics:

     

  • Script Junkie

    HTML5 and its Impact on SEO

    • 1 Comments

    Seach engine pptimization (SEO) is incredibly important to a lot of site owners and so it makes sense that people are asking how HTML5 will impact search engine algorithms. Adam Heitzman took an initial stab at figuring out how certain HTML5 features might affect your opitimization efforts.

    One key component of HTML5 is that it adds new elements that help us better express what’s on a web page. This helps improve web page segmentation so that different parts — such as the header, footer, main content area, etc. — can be easily be distinguished from one another....The benefit of this is that it will allow search engines to easily crawl the website, possibly skipping sections such as <footer> or <header> or using them for different indexing purposes (such as identifying copyright information or finding the site’s name or logo). Search engine  indexing will thus be more efficient, meaningful and possibly more advanced.

    I'm really happy to see this being fleshed out and Adam touches on:

    • The new semantic tags
    • Web page segmentation
    • The new link types
    • <video> and <audio>

    It'd be great to see more detail into how other features affect it and even how the greater reliance of JavaScript may affect how crawlers view your pages. I recently gave an HTML5-related talk and this was a topic that was on the mind of a couple of attendees so I'm glad we're starting to dig into this.

  • Script Junkie

    Want to Learn jQuery Online? Check out Code School

    • 2 Comments

    Gregg Pollack of Envy Labs emailed me recently to give me the heads up about his new online learning initiative called Code School. If you don't know Gregg, he was one of the masterminds behind the incredibly viral "Rails Envy" set of videos. Since Gregg knows I'm a member of the jQuery team, he wanted to make sure I was in the loop on his newest course titled "jQuery Air: First Flight" which runs you through the ins-and-outs of getting up to speed with jQuery.

    The course is broken up into five levels running you through the basics of JavaScript all the way through using jQuery's built-in DOM and Ajax capabilities. It's screencast-based and with Gregg's experience in producing online tutorials, it's very well-done. And you can't beat the price of $45 either.

     

  • Script Junkie

    Classic Computer Science in JavaScript

    • 3 Comments

    Ah, remember the good ole college days where you had to code in CICS and Cobol? No? Um...okay I'm showing my age. Anyways, we all had to go through some of the basics of computer science at some point to understand specific algorithms and how sorting works and while we may want to forget some of those courses altogether, the stuff we learned is certainly applicable till this day.

    Well, programmer extrodinaire Nicholas Zakas has started to compile a collection of JavaScript code that tackles many of the common approaches. For example, here's the classic bubble sort

    function swap(items, firstIndex, secondIndex){
        var temp = items[firstIndex];
        items[firstIndex] = items[secondIndex];
        items[secondIndex] = temp;
    }
     
    /**
    * A bubble sort implementation in JavaScript. The array
    * is sorted in-place.
    * @param {Array} items An array of items to sort.
    * @return {Array} The sorted array.
    */
    function bubbleSort(items){
    
        var len = items.length,
            i, j, stop;
    
        for (i=0; i < len; i++){
            for (j=0, stop=len-i; j < stop; j++){
                if (items[j] > items[j+1]){
                    swap(items, j, j+1);
                }
            }
        }
        
        return items;
    }
    
    

    He covers many different classic computer science paradigms, algorithms, and approaches and it's well worth the look, especially if you're a self-taught developer without a formal background in CS.

  • Script Junkie

    HTML5 Snippets

    • 0 Comments

    I stumbled upon this cool project site via Twitter this morning, http://html5snippets.com. HTML5Snippets allows you to share HTML5 & CSS3 snippets. It's an small experimental project created by Roberto Brevé.

    Users can request snippets of code as well as browse existing code snippets. 

    Seems like a cool way to learn new HTML5 techniques.

  • Script Junkie

    Want to Learn Canvas? You Need to Get this Book.

    • 0 Comments

    The HTML5 Canvas element and API have become indespensible for developers who want to build interactive graphics without the need for 3rd party plugins. From very cool drawing to full-on video games, Canvas is the new technology of choice for building out some great user experiences. The downside is the learning curve. It's not a trivial API and if you want to go beyond the basics, it's helpful to have a resource. Thankfully, Canvas and game expert Rob Hawkes has written a fantastic book the technology.

    Foundation HTML5 Canvas: For Games and Entertainment takes you through the basics of Canvas and leads you into advanced topics that will have you building advanced Canvas apps, including games, in no time. Here's what Rob had to say:

    My motivation behind writing the book stems from the lack of concise and easy-to-understand documentation about all the cool things that HTML5 canvas can do. Back when I was learning canvas myself there was very little to go on apart from the hardcore specification documentation, which is meant for browser manufacturers to understand, not Web developers. Readers of the book will be able to learn everything from the history of HTML5, to a foundation course in JavaScript, all the way to learning how to draw in the browser using canvas. The book ends with a look at more challenging areas of canvas, like animation with physics, and game development. All in all, this is the book that I wish existed when I started out, so if you're looking at canvas or game development I encourage you to check out the website for the book to find out more.

    Here's what you'll learn:

    • The exciting new features that HTML5 brings and how to use them
    • The basics of programming in JavaScript and capturing user input
    • What the canvas drawing element is all about and why you'd want to use it
    • How to utilise both basic and advanced features of canvas
    • How to create realistic animations using canvas and a splash of physics
    • How to make interactive games using canvas, JavaScript, and other HTML5 goodies

    The book is definitely top-notch and if you're interested in HTML5-based animation, it definitely should be part of your library.

    Be sure to check out the book as well as Rob's Script Junkie article on How to Build Asteroids with the Impact HTML5 Game Engine to learn what can be done with Canvas.

  • Script Junkie

    W3C Media Capture API Prototype for IE9 Released

    • 0 Comments

    Claudio Caldato of Microsoft's Interoperability team announced yesterday that they've released for IE9 a new prototype of the W3C's Media Capture API. The specification defines HTML form enhancements to provide access to the audio, image and video capture capabilities of a device. For this prototype, the focus is specifically on the audio portion of the spec with a plan to add speech, image and video support soon after.

     Our next prototype will support Speech recognition and will implement the Microsoft proposal available on the W3C website here and here. It will also include two implementations of the sample apps that are described in sections 5.1 and 5.2 of the draft.

    The release sticks to Microsoft's conservative approach of allowing developers to experiment with important features that may not be 100% ready for release. To download and install the new prototype along with IndexedDB, WebSockets and the FileAPI, be sure to visit the Microsoft HTML5Labs.

     

  • Script Junkie

    Processing.js 1.2 Released

    • 1 Comments

    Last week, the processing.js project released version 1.2 which is their largest release to date, and focuses on performance, compatibility, 3D, and bug fixes.

    Since our last release, exciting things have been happening in browser development. WebGL, the 3D extension of the HTML5 canvas element, has now shipped in Firefox and Chrome, and is being tested in nightly builds of Safari and Opera. Processing.js has been fully WebGL compatible for more than a year, and version 1.2 includes some great 3D performance and bug fixes. We’ve also written a guide to help explain how Processing.js uses canvas and WebGL to support the various Processing render modes. Processing.js is a great way to get started with 2D and 3D graphics on the web, without having to understand all of the underlying technologies. With several guides for people new to Processing, JavaScript developers and Processing developers, there has never been a better time to jump in!

    This release also includes some important changes to ensure better compatibility with Processing 1.5. First, we’ve altered our default frame rate to match Processing’s (i.e., 60 fps). Developers who are upgrading from previous versions of Processing.js, and who don’t explicitly set a frame rate, may notice that sketches seem to run more slowly. Don’t worry, Processing.js is faster than ever! Your sketch is just drawing at 60fps. It’s possible to make things as fast as the browsers will allow by setting a higher frame rate, but this will of course consume more CPU, and actually not provide any real gain other than bigger deltas between visible frames.

    Here are some great examples of processing out in the wild:

    Since the release there has already been a minor point release to 1.2.1.

    Congratulations to the Processing.js team.

  • Script Junkie

    Windows 8 Previewed - HTML5 and JavaScript Apps

    • 0 Comments

    A preview demonstration of Windows 8 at the D9 Conference is causing a lot of discussion this week.  One of the new features that web developers are talking about is “Web-connected and Web-powered apps built using HTML5 and JavaScript that have access to the full power of the PC.

    In a press release from Microsoft: “Today, we also talked a bit about how developers will build apps for the new system. Windows 8 apps use the power of HTML5, tapping into the native capabilities of Windows using standard JavaScript and HTML to deliver new kinds of experiences. These new Windows 8 apps are full-screen and touch-optimized, and they easily integrate with the capabilities of the new Windows user interface. There’s much more to the platform, capabilities and tools than we showed today.

    This is very exciting news for HTML5 and JavaScript developers.



    In the video above, Jensen Harris, Director of PM, Windows User Experience, walks us through basic elements of the new Windows 8 user interface.

    Microsoft is planning on revealing many more details to developers in it’s upcoming BUILD event (formerly PDC) September 13-16 in Anaheim, California.

  • Script Junkie

    Build Canvas-based Heatmaps with Heatmap.js

    • 2 Comments

    I've always loved Crazyegg's heatmap functionality. It's a very cool method of seeing where users are clicking on your site and where the most activity is. I just stumbled upon Heatmap.js which lets you do that same thing. It uses the HTML5 Canvas element to dynamically generate the heatmaps based on your data.

    Heatmap instances contain a store in order to colorize the heatmap based on relative data, which means if you're adding only a single datapoint to the store it will be displayed as the hottest(red) spot, then adding another point with a higher count, it will dynamically recalculate.

    If you check out the image below, you can see how hovering over the button accentuates the heatmap's colorization  on that section:

    The source is released under a very liberal MIT and Beerware license (yep, Beerware) and the author, Patrick Wied, is actively looking for contributions.

  • Script Junkie

    JavaScript Server Roundup - The Lowdown on Several Engines

    • 2 Comments

    InfoWorld has published an interesting comparison of several server-side JavaScript-based server implementations. Of course, Node.js but they also cover Jaxer, EJScript, RingoJS and AppengineJS. At this point, it feels that Node.js has so much momentum that other JS-based servers are often overlooked so it's nice to see a broader view of the landscape.

    It's going to be interesting to see how developers of more traditional server-side options like PHP, Python or ASP.Net adapt to Node's asychronous model. I think this quote speaks volumes to Node's model:

    In the right hands connected to a right-thinking mind, the results can be staggeringly efficient. When the programmer spends a few minutes and separates the work done before and after a delay, there's no need for the machine to tie up RAM to hold the state in the thread just so it will be ready when the data finally shows up from the database or the distant server or even the file system. It was undeniably easier for the programmer to let the computer keep all of the state, but it's much more efficient this way. Just as businesses try desperately to avoid tying up capital in inventory, a programmer's job is to think like a factory boss, treat RAM as capital, and avoid consuming any of it.

    Tom Robinson, a developer on Narwhal, actually comments on the difficulties of the async model:

    I'm increasingly convinced this asynchronous callback style of programming is too difficult for most developers to manage. Without extreme discipline it can easily lead to 'callback hell,' with deeply nested callbacks and complex code to implement logic that would be simple on a synchronous platform.

    JavaScript developers are fairly used to this style of development but in the "post back" world, this isn't as commonplace so I can see where Tom is coming from.

    I was kind of perplexed by this statement though: 

    One developer referred to CommonJS, an attempt at building a standard server-side API, as "so 2009."

    I've felt that the CommonJS movement had some teeth and this sounds like there may be some splintering.

    I think once the tooling becomes more mature, we're going to see much easier transition path for developers and broader adoption of these JavaScript servers.

  • Script Junkie

    The Script Junkie Blog is Live! The New Source for JavaScript, HTML and CSS Community News.

    • 4 Comments

    When we launched Script Junkie last June, our focus was (and still is) to provide in-depth articles that helped developers solve specific problems. The feedback has been great and Script Junkie continues to grow rapidly, due in no small part to the awesome authors who produce excellent content for SJ readers.

    Now that the site is chugging along nicely, we want to continue to support the JavaScript, HTML and CSS community by providing information in a more timely fashion. This is why we've launched the Script Junkie blog. Here, you'll be able to find news posts about the latest and greatest libraries, frameworks and technologies in the web development space. This will be very different than the deep technical articles found on our main site and will offer much more frequent, bite-sized posts to keep you up-to-date with what's going on in the community. And we're actively looking for the community to submit news to us so if you have something new and exciting you want to share, please be sure to email us at sjsiteteam@microsoft.com.

    Having timely information is invaluable and we hope to provide the best resource for keeping the community in the loop.

Page 1 of 1 (24 items)