20 Mix11 HTML5 and JavaScript Sessions

This year I will be attending the Microsoft Mix Conference again in Las Vegas (April 12-14 2011). There were a lot of great sessions last year and there appear to be many more scheduled for this year.

I have listed 20 sessions (in alphabetical order) that I hope to attend if the schedule permits, otherwise I'll just catch the videos that will be posted shortly after they are presented.

In addition to these sessions I'm also looking forward to the Future of the Web keynotes by Scott Guthrie, Dean Hachamovitch, Joe Belfiore.

If you are already going or plan to attend after seeing these great sessions, then I hope to see you there! It should be another great conference! See http://live.visitmix.com/mix11 for more details...

1. 5 Things You Need To Know To Start Using <video> and <audio> Today

   Nigel Parker
   

   Come along to this session to get an overview of the new video and audio tags from the HTML5 specification. Discover how to use them to play media in modern browsers and on mobile devices. Learn the most advanced techniques and best practices, including encoding optimizations, custom skinnable players, full screen workarounds, seeking settings and fallback scenarios for legacy browsers.

2. 50 Performance Tricks to Make Your HTML5 Web Sites Faster

   Jason Weber
   

   Learn how you can make your sites faster directly from the Internet Explorer Performance Team. These are the same guys who brought you GPU accelerated graphics and compiled JavaScript with Internet Explorer 9, and they’re going to share their favorite 50 best practices for web developers. This session will provide an inside look into browser performance, discuss why common web best practices are important, and then go deep into how to get the most from new HTML5 capabilities including Canvas, Audio, Video, SVG, local storage, and more.

3. Building Business Centric Application in JavaScript

   Deepesh Mohnani
   

   Building end-to-end data-intensive JavaScript applications has never been easier. In this session, we will talk about tools that let you focus on business logic, without having you worry about plumbing and infrastructure, making your development process more productive. Attendees will learn about the latest investments that are being made to simplify development of business-centric applications, bringing rich data and visualization to your jQuery client using WCF and WCF DomainServices.

4. Data in an HTML5 World

   Asad Khan
   

   Come and learn about ‘datajs’. datajs is a new cross-browser JavaScript library that enables better data-centric web application by leveraging HTML5 browser features and modern protocols such as OData. It's designed to be small, fast, and provide functionality for structured queries, data modification, and interaction with various cloud services, including Windows Azure.

5. Deep Dive Into HTML5 <canvas>

   Jatinder Mann
   

   If you’ve seen the demos for Internet Explorer 9’s hardware accelerated graphics, you are probably excited to learn the details of HTML5 Canvas. With all major browsers supporting HTML5 Canvas, a scriptable 2D drawing context, Canvas is quickly becoming the natural choice for graphics on the web. In this session, you will learn advanced Canvas concepts (including the origin-clean security and the Canvas Drawing Model), understand when to use Canvas versus SVG and get a deeper look at how the Internet Explorer team solved interoperability issues as we implemented the specification. You will learn to build HTML5 Canvas websites through best practices and lots of code samples.

6. Designer and Developer: A Case for the Hybrid

   Jeff Croft
   

   Should designers code? Or is is okay for one to specialize in visual design and expect others to build their vision? As we get farther and farther away from the days of the "webmaster," and become an industry of specialists, are we losing some of the beauty, efficiency, and innovation that can be found at the point where design and development intersect? Jeff Croft, hybrid designer and developer, makes the case that the best web products will always be created by designers who understand the building blocks of the web: the code.

7. Filling the HTML5 Gaps with Polyfills and Shims

   Rey Bango
   

   Everyone wants to jump into HTML5 but how do you use the cool features of this new specification while ensuring older browsers render your web pages as expected? This is where polyfills and shims come in. In the session, you’ll learn how to use specially crafted JavaScript and CSS code that emulate HTML5 features so that you can take advantage of HTML5 today without breaking your sites in older browsers.

8. The Future of HTML5

   Giorgio Sardo
   

   We love HTML5 so much that we want it to actually work – in an interoperable, predictable manner across all browsers. In this session you will learn the current status of HTML5 and the Open Web Platform and what will take to bring it to a Recommendation. You will also preview the next emerging standards and understand Microsoft implementation approach through prototypes. Finally ride the DeLorean at 88mph and discover some of the work being done by Microsoft with the W3C on what will lead into HTML6.

9. Going Mobile with Your Site on Internet Explorer 9 and Windows Phone 7

   Joe Marini
   

   The mobile Web is here, it’s huge, and your business can’t afford to ignore it. Mobile users have come to expect their favorite Web sites to give them a great mobile experience – otherwise, they find new favorite sites that do. In this session, Joe Marini, Principal Program Manager for Internet Explorer on Windows Phone will take you through the design and experience principles you need to consider when creating your mobile Web presence, teach you about the exciting new HTML5 capabilities that Internet Explorer 9 on Windows Phone 7 will support, and show you how to give your sites the next-generation features you need to engage your users on their smartphones.

10. Good JavaScript Habits for C# Developers

    Elijah Manor
    

    It seems that far too many people come to jQuery thinking that their previous knowledge with object-oriented languages like C# or Java will help them be successful at client-side scripting. In many cases, you can be successful with this approach, however, the more JavaScript you write you will inevitably find yourself uncovering strange bugs because you didn't take time to learn JavaScript properly. This session is targeted for developers that use jQuery, but haven’t invested adequate time to learn some of the foundational JavaScript concepts that differ from C#. If you would like to avoid some of these common mistakes when bringing your existing expertise to JavaScript, then please join me as I try to explain some of the differences.

11. HTML5 with ASP.NET

    Mads Kristensen
    

    This talk is all about code. Whether you are building a new website using ASP.NET or maintaining an existing one, you’ll leave the talk ready and able to utilize HTML5 on ASP.NET. We’ll look at what HTML5 offers modern application developers and how you can code HTML5 with ASP.NET WebForms or ASP.NET MVC today and tomorrow.

12. JavaScript Panel

    Luke Hoban, Allen Wirfs-Brock, Tomasz Janczuk and Doug Crockford
    

    JavaScript is one of the most widely used general purpose functional, dynamic and prototype-based object-oriented programming languages on the web with considerable amounts of JS even running outside of the browser in other hosts. The language has matured and is currently in version 5 (officially, this is known as EcmaScript 5). Where did it come from? What problems was it initially designed to solve? How has it managed to scale to so many different usage scenarios? What are these scenarios, exactly? What does EC5 add to the language and what specific problems do these new additions solve? What's missing from the language? How will it evolve? How general purpose is JavaScript, really? The folks who will be on stage can answer all of these questions, but most importantly, YOU will drive the panel with your own questions. What do you want to know? What's the most burning question you have in your mind related to JavaScript? Answers await.

13. Knockout JS: Helping you build dynamic JavaScript UIs with MVVM and ASP.NET

    Steve Sanderson
    

    Steve Sanderson delivers KnockoutJS in this lightening talk. Learn how the Knockout library builds on advanced jQuery and JavaScript techniques to make even the most complex data-filled HTML forms a breeze. We’ll see jQuery, jQuery templating, JSON and live data banding applied wto the MVVM pattern with Knockout, combined with ASP.NET to produce results that need to be seen to believed.

14. Making Better Web Apps For Today's Browsers

    James Mickens
    

    Microsoft Research is working on several cool ways to make web applications faster and more robust. In this session, James Mickens will describe two projects that leverage JavaScript to improve web programs running on unmodified, commodity browsers. His talk will focus on Silo, a system that exploits DOM storage and AJAX to make web pages load more quickly. He’ll also describe Mugshot, a framework which allows developers to capture and replay JavaScript application bugs that users encounter in the wild. Neither project requires users to install a plugin or otherwise change their browser.

15. Modernizing Your Website: SVG meets HTML5

    Jennifer Yu
    

    Scalable Vector Graphics (SVG) integrates with the HTML5 and CSS features to unleash some of the most beautiful experiences on the web. In this session we’ll explain what is SVG and when you should consider using it instead of other alternatives. We’ll show you how to create content that is interoperable across browsers and devices. We’ll cover common pitfalls to avoid, as well as look at the best SVG tools and libraries available to developers. We’ll walk through code samples to learn first-hand how you can bring a high quality, interactive SVG experience to your customers.

16. Node.js, Ruby, and Python in Windows Azure: A Look at What’s Possible

    Steve Marx
    

    Most people using Windows Azure are using ASP.NET and PHP, but Windows Azure is much more general than that. Steve Marx will show how he built a few web apps (including his blog) that run on Windows Azure and don’t use .NET or PHP. Server-side JavaScript, Ruby, and Python will be the most prominent examples.

17. An Overview of the MS Web Stack of Love

    Scott Hanselman
    

    Oh yes. Building web applications on the Microsoft stack continues to evolve. There’s lots of great tools to leverage, but it can be difficult to keep up with all the options. In this technical and fast-paced session, you’ll learn from Scott Hanselman how the pieces fit together. We’ll look at ASP.NET MVC 3, MvcScaffolding, Entity Framework Code First (Magic Unicorn Edition), SQL Compact 4, jQuery and more. We’ll also see how many times Scott can say “unobtrusive” in a single talk. You’ll leave this session with a clear understanding of the technology options available on the Microsoft Web Stack. What’s changed since PDC? What direction are we doing? Let’s see what we can build in a PowerPoint-free hour with the Microsoft Web Stack of Love.

18. Pragmatic JavaScript, jQuery & AJAX with ASP.NET

    Damian Edwards
    

    jQuery turned the world on its ear. Do we still write JavaScript or do we just write jQuery? Damian will answer that question with new JavaScript techniques and AJAX as well as some jQuery plugin surprises up his sleeve. What are the best libraries and practices for using jQuery and JavaScript with ASP.NET? How should balanced applications be designed to make the best use of the power of the server and the power of the client?

19. Reactive Extensions for JavaScript (RxJS)

    Bart De Smet
    

    Nobody likes sluggish web interfaces that get stuck when interacting with servers and services. Asynchrony has become the way of life to enhance user experiences. The A in AJAX pinpoints this observation precisely. Moreover, the sheer amount of asynchronous data sources is overwhelming: stock tickers, Twitter quotes, RSS feeds, you name it. Unfortunately, the programmability story for each of those sources differs significantly, with little to no unification or compositionality. Got tired of writing cumbersome code with plenty of callbacks, tedious logic and tricky error handling? Enter the Reactive Extensions, a library to seamlessly compose all kinds of asynchronous “reactive” data streams using LINQ-style query operators, available for both .NET and JavaScript (RxJS). Come and learn how Rx will make your life as a web developer easier when dealing with the asynchronous reality of modern web programming.

20. The View of the World Depends on the Glasses I Wear

    Thomas Lewis
    

    There is no mobile Web, there is no desktop Web, and there is no tablet Web. We view the same Web just in different ways. So how do we do it? Sitting next to HTML5 is its friend CSS3 with its support for Media Queries. Media Queries let you customize your web experience based on parameters of display, device, properties and more. If you are a designer or front-end developer, come to this session to explore the sheer brutality of CSS3 Media Queries.

Webinar: Amplify JavaScript Library with Scott González

appendTo has recently launched a new JavaScript library called Amplify. The intent of the library is to help you solve common front-end problems and it is meant to "amplify" your current JavaScript library of choice (jQuery, dojo, mootools, etc).

Amplify is currently composed of three components

1. Publish and Subscribe: Provides a clean pub/sub API, prevents collisions between custom events and method names, and allows a priority to your messages.
2. Request: Sets out to make data retrieval more maintainable. It does this by separating the definition of a request from the actual implementation of requesting the data. The definition of the quest is only responsible for deciding the caching strategy, server location, data type, decoders, headers, etc. while the actual requestor code only needs to know a request ID.
3. Store: Handles the persistant client-storage, using standards like localStorage and sessionStorage, but falling back on non-standard implementations for older browsers.

Scott González, the lead Amplify architect, will be presenting the library in an upcoming Webinar on Thursday March 31, 2011 12:00 PM Central. You might already know Scott from his role as jQuery UI Developer Lead.

If you are interesting in joining the webinar you can sign-up from appendTo's event page.

Sign-up for Webinar

JSConsole Remote Debugging and JSBin Live Preview

Remy Sharp ( @rem ) recently implemented some really awesome new features to jsconsole.com and jsbin.com that I wanted to share with you.

JSConsole: Remote Debugging

JSConsole.com is a useful tool if you want to play around with JavaScript. You can load another webpage into jsconsole, load external scripts, and then start playing around with them.

However, a really compelling feature that he has added recently is the ability to remotely debug against another browser. Think of the potential of this. You can use jsconsole and remote debug against a jQuery Mobile application or any other website on any other device for that matter!

The process is really straightforward. All you do is type :listen at the jsconsole command line and it will output a unique identifier for you to use in your web application. It even spits out the whole script tag so you can copy/paste it into the web app that you want to remote debug.

/* Example script tag outputted by the JSConsole 
   :listen command that you need to insert into 
   your web application */
<script src="http://jsconsole.com/remote.js?5BDE9731-8EBD-42A8-8D72-CB24878F09A6"></script>

Once you've pasted the script into your web app, then you'll see that a connection has been made in the jsconsole window. It will show the useragent of the browser you've just connected to.

When you are connected then you can either enter commands into the jsconsole command line to execute on the remote browser. In addition any console.logs that are invoked on the remote browser will show up in your jsconsole window!

If for some reason you'd rather not use the GUID that JSConsole generates, you can just as easily provide your own "unique identifier" such as myApplication, but you do run the risk that this might conflict with someone else's "unique identifier".

NOTE: This debugging tool is intended for debug only and not for production code.

JSBin: Live Preview Pane

Another cool new feature is the "Live Preview" pane in JSBin. Previously, you had to manually click the "Preview" button to preview the result of our JSBin, but now you can see live updates in this new pane.

All you need to do is type the following statement in your browser's console. After you've executed the statement, then JSBin will remember this option by default when you create a new JSBin.

jsbin.livePreview();

Book Review: Eloquent JavaScript

Eloquent JavaScript: A Modern Introduction to Programming

During my flight to and from Seattle, WA from the MVP Summit I was able to read Eloquent JavaScript: A Modern Introduction to Programming by Marijn Haverbeke (@marijnjh). It is kind of funny to say, but for some parts of the book it almost read like a novel. Read on for more details ;)

Table of Contents

1. Introduction
2. Basic JavaScript: Values, Variables, and Control Flow
3. Functions
4. Data Structures: Objects and Arrays
5. Error Handling
6. Functional Programming
7. Object-Oriented Programming
8. Modualarity
9. Regular Expressions
10. Web Programming: A Crash Course
11. The Document Object Model
12. Browser Events
13. HTTP Request

An Enjoyable Read

I enjoy technical books anyway, but this one was quite unique. Not only did it get into the nitty gritty of JavaScript, techniques, and patterns, but it also did it in a light hearted and often times hilarious way. For example, there were two stories described in the book "Aunt Emily's Cats" and "The Sad Story of the Recluse" that really stood out to me. I don't know the last time I've read a technical book and the stories have made such an impression.

Aunt Emily's Cats

Story: A story of a guy whose crazy Aunt has over 50 cats living with her and she regularly emails you to keep you up-to-date. At the end of each email she appends what cats have been born and which cats have died. You want to humor your Aunt by keeping track of the genealogy of her cats so that you can ask about her cats, their birthdays, etc…

Solution: Write an algorithm to parse all the emails the Aunt sent and build up a genealogy using JavaScript and techniques that are taught along the way.

The Sad Story of the Recluse

Story: There was a recluse living in the mountains. He didn't do much, but one day he wanted to write something, so he decided to write a technical book. Instead of writing his book in HTML he decided to make up his own Markdown-ish language that he would later convert into HTML. Unfortunately, the recluse was struck by lightening and died.

Solution: In his honor, the book guides you on how to write the program that the recluse only had dreamed.

Funny Code Examples

Don't worry, there is no lack of code in this book. In fact some of the code is downright hilarious!

In his explanation of the stack in JavaScript he shows asking the computer a really hard question that causes it to run out of space or "blow the stack"!

function chicken() {
   return egg();
}

function egg() {
   return chicken();
}

print( chicken() + " came first." );

I wish I would have thought of that. A good example and funny! LOL

Memorable Quotes

As I wrote in my margins the following quotations from his book stood out to me, so I thought I would share them with you.

"The art of programming is the skill of controlling complexity" --Page 3

"Pure functions are the things that mathematicians mean when they say "function." They always return the same value when given the same argument and do not have side effects...Generally, when something can naturally be expressed as a pure function, write it that way. You'll thank yourself later. If not, don't feel dirty for writing nonpure functions." --Page 37

"...[don't] worry about efficiency until your program is provably too slow. When it is, find out which parts are taking up the most time, and start exchanging elegance for efficiency in those parts." --Page 38

"If we build up a big string by concatenating lots of little string, new strings have to be created at every step, only to be thrown away when the next piece is concatenated to them. If, on the other hand, we store all the little strings in an array and then join them, only one big string has to be created." --Page 88

Summary

I would target this book for both a beginner and intermediate developer. As I've mentioned before, the book was pretty easy to read and in some parts quite amusing ;)

Even thought you might be tempted to skip a chapter here and there because you think you know something, I would encourage you to read it from start to end. You never what what small nuances you've been missing all these years about JavaScript.

An older version of the material can be found free online ( HTML/PDF ) and also a revised and updated version is available from Amazon ( Paperback/Kindle ).

Thanks Marijn Haverbeke for an informative and enjoyable book!

Hanselminutes #256: JavaScript & jQuery: Moving beyond Alert()

Dave Ward ( @encosia ) and I were honored to be guests on Hanselminutes #256: JavaScript & jQuery: Moving beyond Alert() while we were at the MVP Summit in Redmond, WA.

Listen to Podcast

Our conversations revolved around trying to encourage developers to take their JavaScript knowledge to the next level.

Many developers view JavaScript as a necessary evil and possibly a toy language. Part of this tarnished view of JavaScript may have stemmed from the olden days when you had to manually navigate through the various DOM inconsistencies yourself. Thankfully today modern JavaScript libraries (such as jQuery, Dojo, MooTools, YUI, etc) have abstracted away many of those horrible cross-browser inconsistencies in the DOM.

Many developers don't take the necessary effort to learn JavaScript appropriately. What typically happens is that a developer will try to code JavaScript in the same way they would C#, Java, etc... In many cases, you can be successful with this approach, however, the more JavaScript you write you will inevitably find yourself uncovering strange bugs.

Lint Tools
These are some tools that can help you identify some common problems in your JavaScript

• JSLint.com by Douglas Crockford *Based on the concepts from the JavaScript: The Good Parts book
• JSHint.com by Anton Kovalyov ( @antonkovalyov ) *A JavaScript Community fork of JSLint

Script Loaders
A way to load your scripts asynchronously so that your pages can load faster

• LAB.js by Kyle Simpson ( @getify )
• RequireJS by James Burke ( @jrburke )
• DeferJS by Boris Moore
• YepNope by Alex Sexton ( @slexaxton ) and Ralph Holzmann ( @ralphholzmann )
• etc... ( spreadsheet comparing many script loaders )

HTML5 Libraries
Detects features of your browser so that you can use it or pollyfill with JavaScript

• Modernizr by Paul Irish ( @paul_irish ), Faruk Ateş ( @KuraFire ), and Alex Sexton ( @slexaxton ) *Note: The YepNope script loader works really well with this library. Check out Progressively Enhancing HTML5 Forms by Chris Coyier ( @chriscoyier )
• List of HTML5 Cross Browser Pollyfills

Books
These are some good books to introduce you to JavaScript, show you what you what parts are good, and also good patterns that you should consider.

• Eloquent JavaScript: A Modern Introduction to Programming by Marijn Haverbeke ( @marijnjh ) *Free
• JavaScript: The Good Parts by Douglas Crockford
• JavaScript Patterns by Stoyan Stefanov

Articles
These articles are targeted for C# developers that want to understand JavaScript better.d

• How Good C# Habits can Encourage Bad JavaScript Habits: Part 1 - Global Scope & Declaring Arrays & Objects
• How Good C# Habits can Encourage Bad JavaScript Habits: Part 2 – False-y, Testing and Default Values, Comparisons, and Looping
• How Good C# Habits can Encourage Bad JavaScript Habits: Part 3 – Function Scope, Hoisting, & Closures
• JavaScript for C# Programmers by Julian Bucknall ( @jmbucknall )

Videos
These are some great videos that I have learned a lot from. If you have time I strongly encourage you sit back and enjoy.

• Crockford on JavaScript video series on Yahoo!
• 10 Things I Learned from the jQuery Source by Paul Irish ( @paul_irish )
• 11 More Things I Learned from the jQuery Source by Paul Irish ( @paul_irish )

{Dev:unplugged} HTML5 Contest

Contest

In addition to launching IE9 yesterday Microsoft has recently launched a new HTML5 competition called {Dev:unplugged}.

The goal is to encourage innovation and push the barrier as to what HTML5 and related technologies can create.

The contest is split between 3 main categories: Games, Music, and Innovation. To help get you started, Microsoft is even providing assets, recommending resources, and referring to various code samples.

Judges

As a side note, I am honored to be one of the judges for this contest alongside some extremely talented leaders in this field:

• Andrew Dupont (@AndrewDupont)
• Dion Almaer (@dalmaer)
• Brad Neuberg (@bradneuberg)
• Allison House (@allison_house)
• Rob Ford (@fwa)
• Ben Galbraith
• Robert Nyman (@robertnyman)
• Dominic Espinosa (@mrs_moustache)
• Naveen Selvadurai (@naveen)
• Grant Skinner (@gskinner)
• Remy Sharp (@rem)

Prizes

To encourage participation there are over $40,000 worth in prizes that will be given away with the Grand Prize winner receiving $9,000 in cash and a trip to the Future of Web Apps Converence in Las Vegas.

Rules

The following are the rules of the competitions. You can find more details on their website.

1. No Plugins: The submission must stick to HTML/CSS/JS on the client-side (no restrictions on the server-side)
2. Same Markup: The submission has to work across IE9 RC, Chrome Beta and Firefox Beta.
3. Making the Web Native: The submission must be amazing! We will be keeping an eye out for submissions that push the envelope and blur the line between a web app and a native app.

Get Coding

So, what are you waiting for? Shoot for the stars and start developing the next innovation on the web! You have until May 8, 2011 to submit your web application to be included in the content. Sign up today!