Script Junkie

Serious Web Development

June, 2011

  • Script Junkie

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


    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


    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!


    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!



  • Script Junkie

    HTML5 and its Impact on SEO


    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


    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


    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


    I stumbled upon this cool project site via Twitter this morning, 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.


    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


    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


    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


    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.

Page 1 of 1 (11 items)