Serious Web Developmenthttp://blogs.msdn.com/b/scriptjunkie/atom.aspxTelligent Community 5.6.583.17018 (Build: 5.6.583.17018)2011-05-26T05:51:00Zhttp://blogs.msdn.com/b/scriptjunkie/archive/2011/09/03/understanding-jquery-s-data-api-s.aspx2011-09-03T00:21:00Z2011-09-03T00:21:00Z<div> <p>jQuery's Core Team Member, Dave Methvin has a great write up on&nbsp;<a href="http://learningjquery.com" title="http://learningjquery.com">LearningjQuery.com</a>&nbsp;called "<a href="http://www.learningjquery.com/2011/09/using-jquerys-data-apis" title="http://www.learningjquery.com/2011/09/using-jquerys-data-apis">Using jQuery's Data API</a>". &nbsp;He walks us through the&nbsp;beginning&nbsp;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. &nbsp;Dave outlines 5 rules of the road for using .data():</p> <ol> <li>Only the&nbsp;<code>.data()</code>&nbsp;API reads HTML5&nbsp;<code>data-*</code>&nbsp;attributes, and it does so&nbsp;<em>once</em>.</li> <li>The&nbsp;<code>.data()</code>&nbsp;API converts HTML5&nbsp;<code>data-*</code>&nbsp;values to Javascript types whenever possible.</li> <li>The lower-level&nbsp;<code>jQuery.data()</code>&nbsp;API does not read HTML5&nbsp;<code>data-*</code>&nbsp;attributes.</li> <li><em>No</em>&nbsp;jQuery data API ever&nbsp;<em>changes</em>&nbsp;HTML5&nbsp;<code>data-*</code>&nbsp;attributes.</li> <li>All&nbsp;<code>data-*</code>&nbsp;names are stored in camelCase in the jQuery data object, using&nbsp;<a href="http://www.w3.org/TR/html5/elements.html#embedding-custom-non-visible-data-with-the-data-attributes">W3C rules</a>.</li> </ol> <div>You can read more about the history and the rules of the road over at&nbsp;<a href="http://www.learningjquery.com/2011/09/using-jquerys-data-apis">Learning jQuery</a>.</div> </div>...(<a href="http://blogs.msdn.com/b/scriptjunkie/archive/2011/09/03/understanding-jquery-s-data-api-s.aspx">read more</a>)<img src="http://blogs.msdn.com/aggbug.aspx?PostID=10205535" width="1" height="1">ralph.whitbeck@gmail.comhttp://blogs.msdn.com/ralph.whitbeck_4000_gmail.com/ProfileUrlRedirect.ashxhttp://blogs.msdn.com/b/scriptjunkie/archive/2011/08/30/spin-js-makes-animated-gifs-old-school.aspx2011-08-30T12:59:23Z2011-08-30T12:59:23Z<p style="text-align: left;"><a href="/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/6864.throbber.png"></a>In most web apps, when an A<a href="/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/3125.throbber.png"></a>jax 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.</p> <p><a href="http://fgnass.github.com/spin.js/">Spin.js</a> is a new library that aims to cut out the need for images. Created by <a href="https://twitter.com/#!/fgnass">Felix Gnass</a>, 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:</p> <p style="padding-left: 30px;"><em>var opts = {</em><br /><em>&nbsp; lines: 12, // The number of lines to draw</em><br /><em>&nbsp; length: 7, // The length of each line</em><br /><em>&nbsp; width: 5, // The line thickness</em><br /><em>&nbsp; radius: 10, // The radius of the inner circle</em><br /><em>&nbsp; color: '#000', // #rbg or #rrggbb</em><br /><em>&nbsp; speed: 1, // Rounds per second</em><br /><em>&nbsp; trail: 100, // Afterglow percentage</em><br /><em>&nbsp; shadow: true // Whether to render a shadow</em><br /><em>};</em><br /><em>var target = document.getElementById('foo');</em><br /><em>var spinner = new Spinner(opts).spin(target);</em></p> <p>The great thing is the broad browser suppoer with Spin.js being successfully tested in:</p> <ul> <li>Chrome</li> <li>Safari 4+</li> <li>Firefox 3.5+</li> <li>IE 6,7,8,9+</li> <li>Opera 10.6+</li> <li>Mobile Safari (iOS 4)</li> </ul> <p>Be sure to <a href="http://fgnass.github.com/spin.js/">visit the demo page</a> so you can use the interactive builder to see how the throbber can be dynamically adjusted based on small adjustments.</p>...(<a href="http://blogs.msdn.com/b/scriptjunkie/archive/2011/08/30/spin-js-makes-animated-gifs-old-school.aspx">read more</a>)<img src="http://blogs.msdn.com/aggbug.aspx?PostID=10202705" width="1" height="1">reybango@live.comhttp://blogs.msdn.com/reybango_4000_live.com/ProfileUrlRedirect.ashxhttp://blogs.msdn.com/b/scriptjunkie/archive/2011/08/19/using-and-writing-polyfills-for-building-modern-applications.aspx2011-08-19T15:04:46Z2011-08-19T15:04:46Z<p>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.</p> <p>Contributing <a href="http://ScriptJunkie.com">ScriptJunkie.com</a> author and awesome developer <a href="http://addyosmani.com">Addy Osmani</a> has put up a great post that dives into <a href="http://addyosmani.com/blog/writing-polyfills/">writing cross-browser JavaScript polyfills</a> where he guides you through the ins-and-outs of polyfills and how to get started using them in your web applications.</p> <p><em>"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."</em></p> <p>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 <a href="http://www.netmagazine.com/features/making-html5-and-css3-work-polyfills-and-shims">the article I wrote for .net Magazine</a> on the same topic.</p>...(<a href="http://blogs.msdn.com/b/scriptjunkie/archive/2011/08/19/using-and-writing-polyfills-for-building-modern-applications.aspx">read more</a>)<img src="http://blogs.msdn.com/aggbug.aspx?PostID=10197826" width="1" height="1">reybango@live.comhttp://blogs.msdn.com/reybango_4000_live.com/ProfileUrlRedirect.ashxhttp://blogs.msdn.com/b/scriptjunkie/archive/2011/08/18/html5-powered-vnc-implementation-novnc-let-s-you-access-remote-systems.aspx2011-08-18T17:27:51Z2011-08-18T17:27:51Z<p>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 <a href="https://github.com/kanaka">Joel Martin</a> has done with the <a href="https://github.com/kanaka/noVNC">HTML5-powered noVNC VNC client</a>.</p> <p>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):</p> <p style="padding-left: 30px;"><em>"Unless you are using a VNC server with support for WebSockets connections (only my <a href="http://github.com/kanaka/libvncserver">fork of libvncserver</a> 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://")."</em></p> <p>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:</p> <p>[View:http://www.youtube.com/watch?v=icVpGOvh4tc]</p> <p>noVNC currently works on all <a href="https://github.com/kanaka/noVNC/wiki/Browser-support">modern browsers</a> and for those that don't support WebSockets, it falls back to the <a href="https://github.com/gimite/web-socket-js">web-socket-js polyfill</a> for support. For IE9, you can also use the <a href="http://html5labs.interoperabilitybridges.com/prototypes/websockets/websockets/info">WebSockets prototype</a> offered on the <a href="http://html5labs.interoperabilitybridges.com/">Microsoft HTML5 Labs</a> site.</p> <p></p>...(<a href="http://blogs.msdn.com/b/scriptjunkie/archive/2011/08/18/html5-powered-vnc-implementation-novnc-let-s-you-access-remote-systems.aspx">read more</a>)<img src="http://blogs.msdn.com/aggbug.aspx?PostID=10197430" width="1" height="1">reybango@live.comhttp://blogs.msdn.com/reybango_4000_live.com/ProfileUrlRedirect.ashxhttp://blogs.msdn.com/b/scriptjunkie/archive/2011/07/13/expression-web-4-sp2-brings-the-jquery-goodness-and-interactive-snapshot-for-debugging.aspx2011-07-13T18:21:41Z2011-07-13T18:21:41Z<p><a href="http://expression.microsoft.com/en-us/hh290892">Microsoft released Expression Web 4 SP2</a> and it brings a host of nice features. The two that I'm really digging are jQuery Intellisense support and the Interactive Snapshot.</p> <p><span style="font-size: large;"><strong>jQuery Intellisense</strong></span></p> <p>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.</p> <p style="padding-left: 30px;"><em>In their 2010 <a href="http://www.webdirections.org/sotw10/script/#javascript-libraries">survey of Web Developers</a>, Web Directions found that jQuery dominates&mdash;used by (an astounding) 78% of respondents.</em></p> <p>Um..yea. jQuery is incredibly popular and adding it into Expression makes it substantially easier for users to build out dynamic sites.</p> <p><em><a href="/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/5086.jquery_2D00_exp.png"><img border="0" alt="" src="/resized-image.ashx/__size/550x0/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/5086.jquery_2D00_exp.png" width="458" height="219" /></a></em></p> <p><span style="font-size: large;"><strong>Interactive Snapshot</strong></span></p> <p>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:</p> <p style="padding-left: 30px;"><em>In Web 4 SP2, we&rsquo;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.</em></p> <p><a href="/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/3404.snapshot.png"><img border="0" alt="" src="/resized-image.ashx/__size/550x0/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/3404.snapshot.png" /></a></p> <p><em></em></p> <p>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 <a href="http://expression.microsoft.com/en-us/hh290892">the blog post for details</a> and give Expression Web a try.</p> <p style="padding-left: 30px;"><em></em></p>...(<a href="http://blogs.msdn.com/b/scriptjunkie/archive/2011/07/13/expression-web-4-sp2-brings-the-jquery-goodness-and-interactive-snapshot-for-debugging.aspx">read more</a>)<img src="http://blogs.msdn.com/aggbug.aspx?PostID=10186183" width="1" height="1">reybango@live.comhttp://blogs.msdn.com/reybango_4000_live.com/ProfileUrlRedirect.ashxhttp://blogs.msdn.com/b/scriptjunkie/archive/2011/07/13/new-release-of-labjs-script-loader-improved-chaining-support-feature-detection-debug-mode-and-more.aspx2011-07-13T15:18:56Z2011-07-13T15:18:56Z<p>Great news! Kyle Simpson, author of the highly popular and useful <a href="http://labjs.com/">LABjs</a> dynamic script loader, just <a href="https://twitter.com/#!/getify/status/90951621298757632">tweeted out that he's released LABjs 2.0</a>! Of course, I had a quick chat with him so he could give me the lowdown on the new release:</p> <p style="padding-left: 30px;"><em>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.</em></p> <p>Cool new features include:</p> <ul> <li> <div id="LC4" class="line">script() calls in the chain allow you to define one or more scripts to load in parallel</div> </li> <li> <div id="LC5" class="line">wait() calls in the chain allow you to express where execution order needs to wait to preserve dependency execution.</div> </li> <li> <div id="LC6" class="line">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).</div> </li> <li> <div id="LC7" class="line">The source code is vastly cleaner, and well commented</div> </li> <li> <div id="LC8" class="line">v2.0 is backwards-compatible for its API</div> </li> <li> <div id="LC9" class="line">Many bugs/quirks, including weirdness with "AllowDuplicates" and chain resumption, have been completely fixed</div> </li> <li> <div id="LC10" class="line">New features include "debug mode", built-in queueing, cache-busting, sandbox(), and noConflict()</div> </li> </ul> <p>You can check out the <a href="http://labjs.com/releasenotes.php">release notes for full details</a> and nab a copy of the <a href="http://labjs.com/download.php">latest version here</a>.</p>...(<a href="http://blogs.msdn.com/b/scriptjunkie/archive/2011/07/13/new-release-of-labjs-script-loader-improved-chaining-support-feature-detection-debug-mode-and-more.aspx">read more</a>)<img src="http://blogs.msdn.com/aggbug.aspx?PostID=10186093" width="1" height="1">reybango@live.comhttp://blogs.msdn.com/reybango_4000_live.com/ProfileUrlRedirect.ashxhttp://blogs.msdn.com/b/scriptjunkie/archive/2011/07/12/cloud-based-development-via-node-js-and-cloud9-ide-integration-coming-soon.aspx2011-07-12T18:32:00Z2011-07-12T18:32:00Z<p>We all know that <a href="http://www.nodejs.org/">Node.js</a> and <a href="http://cloud9ide.com/">Cloud9 IDE</a> are both hot bits of technology so it should come as no surprise that <a href="http://www.joyent.com/">Joyent</a> and Cloud9 have partnered to make it easy to build, run, debug and deploy Node applications using the web-based IDE.</p> <p>Here's the press release:</p> <p style="padding-left: 30px;"><em>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). <b></b></em></p> <p style="padding-left: 30px;"><em>The Cloud9 IDE, a state-of-the-art IDE that runs in the browser and lives on Joyent&rsquo;s public cloud, JoyentCloud.com, allows developers to run, debug and deploy applications from anywhere, anytime.&nbsp; This joint effort gives developers ready access to a premium IDE at no cost for pre-production use, and includes support for commercial use.</em></p> <p style="padding-left: 30px;"><em>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.</em></p> <p style="padding-left: 30px;"><em>&ldquo;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,&rdquo; said Cloud9 IDE CEO Ruben Daniels. &ldquo;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&rsquo;t have to create a new Joyent account &ndash; Joyent automatically accepts the login and billing information from your Cloud9 IDE account.&rdquo;</em></p> <p style="padding-left: 30px;"><em> &ldquo;We want to provide developers with the best tools for developing next-generation web applications, and this partnership does just that,&rdquo; said David Young, Joyent CEO. &ldquo;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.&rdquo;</em></p> <p>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. <b><span style="text-decoration: underline;"><a href="http://bit.ly/mLNLKO">Sign up here</a>.</span></b> <b><span style="text-decoration: underline;"></span></b></p> <p>Here are some pics to whet your appetite:</p> <p><a href="/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/7534.c9on-Joyent-_2D00_-add-deploy-target_2D00_isolated.png"><img border="0" alt="" src="/resized-image.ashx/__size/550x0/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/7534.c9on-Joyent-_2D00_-add-deploy-target_2D00_isolated.png" /></a></p> <p></p> <p><a href="/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/2626.c9on-Joyent-_2D00_-deploy.png"><img border="0" alt="" src="/resized-image.ashx/__size/550x0/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/2626.c9on-Joyent-_2D00_-deploy.png" /></a></p> <p><a href="/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/8688.c9on-Joyent-_2D00_-new-project.png"><img border="0" alt="" src="/resized-image.ashx/__size/550x0/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/8688.c9on-Joyent-_2D00_-new-project.png" /></a></p> <p><a href="/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/1781.c9on-Joyent-_2D00_-new-project_2D00_isolated.png"><img border="0" alt="" src="/resized-image.ashx/__size/550x0/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/1781.c9on-Joyent-_2D00_-new-project_2D00_isolated.png" /></a></p> <p><a href="/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/0654.c9on-Joyent_2D00_-add-deploy-target.png"><img border="0" alt="" src="/resized-image.ashx/__size/550x0/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/0654.c9on-Joyent_2D00_-add-deploy-target.png" /></a></p> <p></p>...(<a href="http://blogs.msdn.com/b/scriptjunkie/archive/2011/07/12/cloud-based-development-via-node-js-and-cloud9-ide-integration-coming-soon.aspx">read more</a>)<img src="http://blogs.msdn.com/aggbug.aspx?PostID=10185703" width="1" height="1">reybango@live.comhttp://blogs.msdn.com/reybango_4000_live.com/ProfileUrlRedirect.ashxhttp://blogs.msdn.com/b/scriptjunkie/archive/2011/07/11/evaluating-jquery-plugins-for-use-in-your-projects.aspx2011-07-11T12:24:00Z2011-07-11T12:24:00Z<p><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;" id="internal-source-marker_0.2652904732767961"><span>I just found, what looks like an, awesome HTML5 <span>Uploader</span> <span>jQuery</span> <span>Plugin</span> in my Twitter feed and my first thought was, &ldquo;Wow, this would make a great addition to the project that I am currently working on.&rdquo; &nbsp;Unfortunately, once I started to evaluate the <span>plugin</span> it failed miserably in all aspects of my evaluation criteria. &nbsp;So much so, I feel it is a great example of how NOT to release a <span>jQuery</span> <span>plugin</span>.</span></span><br /><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"><span>Here is the criteria I use to evaluate a <span>jQuery</span> <span>plugin</span> before I consider using it in my project:</span></span><br /><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"></span></p> <ol> <li style="list-style-type: decimal; font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Good documentation and demos</span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"><span> - If I can&rsquo;t figure out how to use your <span>plugin</span> and/or see what it&rsquo;s capable of fairly quickly I don&rsquo;t really want to waste my time on trying to figure that out. &nbsp;The <span>plugin</span> author should be providing at the very least easy examples on what the <span>plugin</span> does.</span></span></li> <li style="list-style-type: decimal; font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"><span>Easily <span>downloadable</span></span></span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"><span> - Seems like a silly requirement but if I can&rsquo;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&rsquo;ll weigh heavily in my determining to use the <span>plugin</span> or not.</span></span></li> <li style="list-style-type: decimal; font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">License released under</span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"><span> - I should also be able to find what license the <span>plugin</span> is released under. &nbsp;Ideally it should be listed on the <span>plugin</span> site but if not in the header of the JavaScript file. If a <span>jQuery</span> <span>plugin</span> does not have a license specified I will not consider it.</span></span></li> <li style="list-style-type: decimal; font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Source code available</span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"><span> - Most <span>jQuery</span> <span>plugins</span> are released with an open source license, with those projects the code should be available to evaluate. &nbsp;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 <span>architected</span>.</span></span></li> </ol> <p><br /><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"><span>These are just simple things every <span>plugin</span> author should be doing. &nbsp;Unfortunately, HTML5 <span>Uploader</span> <span>jQuery</span> <span>Plugin</span> failed on 3 out of 4 items listed above. &nbsp;I contacted the owners of the <span>plugin</span> to voice my displeasure and was sent a reply with a code beautifier link to be able to read the <span>minified</span> code that one got after having to &ldquo;Pay with a Tweet&rdquo; to download the code which has no license attributed with it. &nbsp;I replied back with &ldquo;thanks, but no thanks&rdquo; and will find something else until they fix those issues above.</span></span><br /><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"><span>In addition to the items above, I consider the following to be a huge plus when evaluating a <span>jQuery</span> <span>Plugin</span>:</span></span><br /><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"></span></p> <ol> <li style="list-style-type: decimal; font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"><span>Source Code available on <span>Github</span></span></span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"><span> - This is a huge plus I can easily fork, watch or submit issues to the code base. &nbsp;<span>Github</span> also provides the easiest way to view commits and see if the code has been idle or not.</span></span></li> <li style="list-style-type: decimal; font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">MIT and GPLv2 Licensed</span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"><span> - I find <span>plugins</span> licensed the same as the <span>jQuery</span> code base to be ideal.</span></span></li> <li style="list-style-type: decimal; font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Unit tests</span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> - It shows that the code is thoroughly tested each release and I can rest assured that the code is of quality.</span></li> <li style="list-style-type: decimal; font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Issue Tracker</span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"><span> - If it is on <span>Github</span> I can see if the issue tracker is in use and if issues are being addressed as they come up. &nbsp;This allows me to help the project if I come across any problems.</span></span></li> </ol> <p><br /><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"></span><br /><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"><span>What are some criteria you use when evaluating <span>jQuery</span> <span>Plugins</span> or JavaScript code in general?</span></span></p> <p></p> <p><em>* Note: This content was originally posted on <a href="http://ralphwhitbeck.com">http://ralphwhitbeck.com</a> and is reprinted here with permission.</em><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"></span></p>...(<a href="http://blogs.msdn.com/b/scriptjunkie/archive/2011/07/11/evaluating-jquery-plugins-for-use-in-your-projects.aspx">read more</a>)<img src="http://blogs.msdn.com/aggbug.aspx?PostID=10184687" width="1" height="1">ralph.whitbeck@gmail.comhttp://blogs.msdn.com/ralph.whitbeck_4000_gmail.com/ProfileUrlRedirect.ashxhttp://blogs.msdn.com/b/scriptjunkie/archive/2011/07/08/buzz-makes-it-easy-to-use-html5-audio.aspx2011-07-08T16:23:03Z2011-07-08T16:23:03Z<p><a href="http://jaysalvat.com/">Jay Salvat</a> has produced some <a href="http://markitup.jaysalvat.com/home/">amazing</a> <a href="http://vegas.jaysalvat.com/">jQuery</a> <a href="http://facedetection.jaysalvat.com/">plugins</a> before and his latest library continues in that tradtion. <a href="http://buzz.jaysalvat.com/">Buzz is his newest creation</a> and makes it incredibly easy to use the new HTML5 Audio element's API. It offers methods to track things like:</p> <ul> <li>Browser support</li> <li>Codec support</li> <li>Timing</li> <li>Playback</li> <li>and more...</li> </ul> <p>And support for a variety of audio formats:</p> <p><a href="/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/4137.buzz_2D00_audio_2D00_support.png"><img border="0" alt="" src="/resized-image.ashx/__size/550x0/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/4137.buzz_2D00_audio_2D00_support.png" /></a></p> <p>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.</p> <p><a href="http://buzz.jaysalvat.com/demo/"><img border="0" alt="" src="/resized-image.ashx/__size/550x0/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/7827.buzz.png" /></a></p>...(<a href="http://blogs.msdn.com/b/scriptjunkie/archive/2011/07/08/buzz-makes-it-easy-to-use-html5-audio.aspx">read more</a>)<img src="http://blogs.msdn.com/aggbug.aspx?PostID=10184634" width="1" height="1">reybango@live.comhttp://blogs.msdn.com/reybango_4000_live.com/ProfileUrlRedirect.ashxhttp://blogs.msdn.com/b/scriptjunkie/archive/2011/07/08/another-great-javascript-learning-center-launches-and-it-s-free.aspx2011-07-08T14:13:00Z2011-07-08T14:13:00Z<p>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 <a href="http://appendto.com/blog/2011/07/appendto-launches-free-developer-learning-center">free Developer Learning Center</a> which is chock full of videos to get you up to speed on JavaScript and jQuery.</p> <p style="padding-left: 30px;"><a href="http://appendto.com/team/andrew-wirick">Andrew Wirick</a>, Senior Trainer and Developer, explains the lesson structure, <em>"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."</em></p> <p>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.</p> <p><a href="http://learn.appendto.com/learn-jquery-javascript-free"><img border="0" alt="" src="/resized-image.ashx/__size/550x0/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/7444.appendto_2D00_learn_2D00_videos.png" /></a></p> <p></p>...(<a href="http://blogs.msdn.com/b/scriptjunkie/archive/2011/07/08/another-great-javascript-learning-center-launches-and-it-s-free.aspx">read more</a>)<img src="http://blogs.msdn.com/aggbug.aspx?PostID=10184591" width="1" height="1">reybango@live.comhttp://blogs.msdn.com/reybango_4000_live.com/ProfileUrlRedirect.ashxhttp://blogs.msdn.com/b/scriptjunkie/archive/2011/06/29/ie10-platform-preview-is-out-with-more-html5-and-css3-goodness.aspx2011-06-29T18:56:00Z2011-06-29T18:56:00Z<p>The IE team has just announced <a href="/b/ie/archive/2011/06/29/site-ready-html5-second-ie10-platform-preview-available-for-developers.aspx">the release of IE10 Platform Preview 2</a> and it's chock full of HTML5 &amp; CSS3 goodness. Included in the preview are features developers have been clamoring for including:</p> <p>Expanded HTML5 support:</p> <ul> <li>Asynchronus Script Execution</li> <li>Drag and Drop</li> <li>File API</li> <li>Forms Validation</li> <li>Sandbox</li> <li>Web Workers</li> </ul> <p>Expanded CSS3 Support:</p> <ul> <li>CSS3 Flexible Box (&ldquo;Flexbox&rdquo;) Layout</li> <li>Positioned Floats</li> <li>CSS3 Gradients</li> <li>CSS3 Grid Alignment</li> <li>CSS3 Multi-column Layout</li> </ul> <p>I'm especially excited about the addition of the Forms Validation and Web Workers API.</p> <p><a href="http://ie.microsoft.com/testdrive/Graphics/WorkerFountains/Default.html">Web Workers Fountain Demo App</a>:</p> <p><a href="http://ie.microsoft.com/testdrive/Graphics/WorkerFountains/Default.html"><img border="0" alt="" src="/resized-image.ashx/__size/550x0/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/3782.webworkers.png" /></a></p> <p><a href="http://ie.microsoft.com/testdrive/HTML5/Forms/Default.html">Forms Validation Demos</a>:</p> <p><a href="http://ie.microsoft.com/testdrive/HTML5/Forms/Default.html"><img border="0" alt="" src="/resized-image.ashx/__size/550x0/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/8561.forms1.png" /></a></p> <p><a href="http://ie.microsoft.com/testdrive/HTML5/Forms/Default.html"><img border="0" alt="" src="/resized-image.ashx/__size/550x0/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/1185.forms2.png" /></a></p> <p>Full details about these new features and more can be found in the <a href="http://msdn.microsoft.com/en-us/ie/gg192966">Internet Explorer Platform Preview Guide for Developers</a>.</p> <p>You can <a href="http://ie.microsoft.com/testdrive/Info/Downloads/Default.html">download IE10 Platform Preview 2 here</a> and test out the latest updates and demos via the <a href="http://ie.microsoft.com/testdrive/">Internet Explorer Test Drive site</a>.</p> <p>Channel 9 has also published a <a href="http://channel9.msdn.com/Tags/internet+explorer">set of videos showing off the new stuff in IE10 PP2</a>.</p>...(<a href="http://blogs.msdn.com/b/scriptjunkie/archive/2011/06/29/ie10-platform-preview-is-out-with-more-html5-and-css3-goodness.aspx">read more</a>)<img src="http://blogs.msdn.com/aggbug.aspx?PostID=10181538" width="1" height="1">reybango@live.comhttp://blogs.msdn.com/reybango_4000_live.com/ProfileUrlRedirect.ashxhttp://blogs.msdn.com/b/scriptjunkie/archive/2011/06/24/making-a-canvas-snake-game.aspx2011-06-24T19:51:00Z2011-06-24T19:51:00Z<p>Everyone's excited about the gaming possibilities that HTML5 brings, especially via the Canvas element. CSS master <a href="http://css-tricks.com">Chris Coyier</a> has a nice guest post on his blog by JS stud, <a href="http://skilldrick.co.uk/">Nick Morgan</a>, who is one of those who are excited and decided to gain some experience by <a href="http://css-tricks.com/9876-learn-canvas-snake-game/">making a Canvas-based snake game</a>:</p> <p style="padding-left: 30px;"><em>Of all the new elements being added in HTML5, I think <code>canvas</code> 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.</em></p> <p style="padding-left: 30px;"><em>In&nbsp; 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.</em></p> <p>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.</p> <p>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 <strong>intro</strong> to Canvas animation.</p> <p><a href="/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/2061.snake.png"><img border="0" alt="" src="/resized-image.ashx/__size/550x0/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/2061.snake.png" /></a></p> <p>Definitely worth a look if you're interested in taking advantage of Canvas and gaming.</p>...(<a href="http://blogs.msdn.com/b/scriptjunkie/archive/2011/06/24/making-a-canvas-snake-game.aspx">read more</a>)<img src="http://blogs.msdn.com/aggbug.aspx?PostID=10178838" width="1" height="1">reybango@live.comhttp://blogs.msdn.com/reybango_4000_live.com/ProfileUrlRedirect.ashxhttp://blogs.msdn.com/b/scriptjunkie/archive/2011/06/23/github-for-mac-looks-sweet.aspx2011-06-23T12:36:00Z2011-06-23T12:36:00Z<p>I have to say I'm just a little jealous at the <a href="https://github.com/blog/878-announcing-github-for-mac">announcement by the GitHub team</a>. They've just released <a href="http://mac.github.com/">GitHub for Mac</a> and this desktop app for the GitHub service looks sweet! It has everything you would expect from a Git UI including:</p> <ul> <li>Cloning repos</li> <li>Browsing history</li> <li>Easy branching</li> <li>Reviewing commits</li> <li>and a whole lot more</li> </ul> <p>And the UI is clean and dead simple. Best of all it's a <strong><a href="http://mac.github.com/">FREE download</a></strong>! And yes, I'm a little jealous because I want this for Windows 7! C'mon GitHub, show the Windows love!</p> <p>Pics:</p> <p><a href="/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/4721.branches_2D00_full.png"><img border="0" alt="" src="/resized-image.ashx/__size/550x0/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/4721.branches_2D00_full.png" /></a></p> <p><a href="/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/5078.commit_2D00_full.png"><img border="0" alt="" src="/resized-image.ashx/__size/550x0/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/5078.commit_2D00_full.png" /></a></p> <p></p>...(<a href="http://blogs.msdn.com/b/scriptjunkie/archive/2011/06/23/github-for-mac-looks-sweet.aspx">read more</a>)<img src="http://blogs.msdn.com/aggbug.aspx?PostID=10178155" width="1" height="1">reybango@live.comhttp://blogs.msdn.com/reybango_4000_live.com/ProfileUrlRedirect.ashxhttp://blogs.msdn.com/b/scriptjunkie/archive/2011/06/22/html5-and-its-impact-on-seo.aspx2011-06-22T19:37:00Z2011-06-22T19:37:00Z<p>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 <a href="http://sixrevisions.com/content-strategy/what-potential-impact-can-html5-have-on-seo/">certain HTML5 features might affect your opitimization efforts</a>.</p> <p style="padding-left: 30px;"><em>One key component of HTML5 is that it adds new elements that help us better express what&rsquo;s on a web page. This helps improve web page segmentation so that different parts &mdash; such as the header, footer, main content area, etc. &mdash; 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 <code>&lt;footer&gt;</code> or <code>&lt;header&gt;</code> or using them for different indexing purposes (such as identifying copyright information or finding the site&rsquo;s name or logo). Search engine&nbsp; indexing will thus be more efficient, meaningful and possibly more advanced.</em></p> <p>I'm really happy to see this being fleshed out and Adam touches on:</p> <ul> <li>The new semantic tags</li> <li>Web page segmentation</li> <li>The new <a href="http://www.w3.org/TR/html5/links.html#linkTypes">link types</a></li> <li>&lt;video&gt; and &lt;audio&gt;</li> </ul> <p>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.</p>...(<a href="http://blogs.msdn.com/b/scriptjunkie/archive/2011/06/22/html5-and-its-impact-on-seo.aspx">read more</a>)<img src="http://blogs.msdn.com/aggbug.aspx?PostID=10177935" width="1" height="1">reybango@live.comhttp://blogs.msdn.com/reybango_4000_live.com/ProfileUrlRedirect.ashxhttp://blogs.msdn.com/b/scriptjunkie/archive/2011/06/14/want-to-learn-jquery-online-check-out-code-school.aspx2011-06-14T16:40:00Z2011-06-14T16:40:00Z<p><a href="http://envylabs.com/">Gregg Pollack of Envy Labs</a> emailed me recently to give me the heads up about his new online learning initiative called <a href="http://www.codeschool.com/">Code School</a>. If you don't know Gregg, he was one of the masterminds behind the <a href="http://www.youtube.com/user/envyads">incredibly viral "Rails Envy" set of videos</a>. 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 "<a href="http://www.codeschool.com/courses/jquery-air-first-flight">jQuery Air: First Flight</a>" which runs you through the ins-and-outs of getting up to speed with jQuery.</p> <p><a href="http://www.codeschool.com/courses/jquery-air-first-flight"><img src="/resized-image.ashx/__size/550x0/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/2727.jqueryair.png" border="0" /></a></p> <p>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.</p> <p>&nbsp;</p>...(<a href="http://blogs.msdn.com/b/scriptjunkie/archive/2011/06/14/want-to-learn-jquery-online-check-out-code-school.aspx">read more</a>)<img src="http://blogs.msdn.com/aggbug.aspx?PostID=10174429" width="1" height="1">reybango@live.comhttp://blogs.msdn.com/reybango_4000_live.com/ProfileUrlRedirect.ashxhttp://blogs.msdn.com/b/scriptjunkie/archive/2011/06/13/class-computer-science-in-javascript.aspx2011-06-13T14:36:00Z2011-06-13T14:36:00Z<p>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.</p> <p>Well, programmer extrodinaire Nicholas Zakas has started to <a href="https://github.com/nzakas/computer-science-in-javascript">compile a collection of JavaScript code that tackles many of the common approaches</a>. For example, here's the classic <em><a href="https://github.com/nzakas/computer-science-in-javascript/tree/master/algorithms/sorting/bubble-sort">bubble sort</a></em>: </p> <p>&nbsp;</p> <pre>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 &lt; len; i++){ for (j=0, stop=len-i; j &lt; stop; j++){ if (items[j] &gt; items[j+1]){ swap(items, j, j+1); } } } return items; } </pre> <p>&nbsp;</p> <p>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.</p>...(<a href="http://blogs.msdn.com/b/scriptjunkie/archive/2011/06/13/class-computer-science-in-javascript.aspx">read more</a>)<img src="http://blogs.msdn.com/aggbug.aspx?PostID=10173923" width="1" height="1">reybango@live.comhttp://blogs.msdn.com/reybango_4000_live.com/ProfileUrlRedirect.ashxhttp://blogs.msdn.com/b/scriptjunkie/archive/2011/06/09/html5-snippets.aspx2011-06-09T16:17:00Z2011-06-09T16:17:00Z<p>I stumbled upon this cool project site via Twitter this morning, <a href="http://html5snippets.com">http://html5snippets.com</a>. HTML5Snippets allows you to share HTML5 &amp; CSS3 snippets. It's an small experimental project created by <a href="http://twitter.com/rbreve" target="_blank">Roberto Brev&eacute;</a>.</p> <p><a href="/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/6242.html5snippets.png"><img src="/resized-image.ashx/__size/550x0/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/6242.html5snippets.png" border="0" /></a></p> <p>Users can request snippets of code as well as browse existing code snippets.&nbsp; </p> <p><a href="/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/7776.html5snippets_2D00_1.png"><img src="/resized-image.ashx/__size/550x0/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/7776.html5snippets_2D00_1.png" border="0" /></a></p> <p>Seems like a cool way to learn new HTML5 techniques.</p>...(<a href="http://blogs.msdn.com/b/scriptjunkie/archive/2011/06/09/html5-snippets.aspx">read more</a>)<img src="http://blogs.msdn.com/aggbug.aspx?PostID=10172987" width="1" height="1">ralph.whitbeck@gmail.comhttp://blogs.msdn.com/ralph.whitbeck_4000_gmail.com/ProfileUrlRedirect.ashxhttp://blogs.msdn.com/b/scriptjunkie/archive/2011/06/09/want-to-learn-canvas-you-need-to-get-this-book.aspx2011-06-09T13:14:00Z2011-06-09T13:14:00Z<p>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&nbsp;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. </p> <p><span style="float: right; margin-left: 10px;"><a href="http://rawkes.com/foundationcanvas"><img src="/resized-image.ashx/__size/150x0/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/3404.foundation_2D00_canvas_5F00_cover.jpg" border="0" /></a></span></p> <p><span id="btAsinTitle"><a href="http://rawkes.com/foundationcanvas">Foundation HTML5 Canvas: For Games and Entertainment</a>&nbsp;takes you&nbsp;through the basics of Canvas and leads you into advanced topics that will have you building advanced Canvas apps, including games, in no time.&nbsp;Here's what Rob had to say:</span></p> <p style="padding-left: 30px;"><i>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 </i><a href="http://rawkes.com/foundationcanvas"><i>the website for the book</i></a><i> to find out more.</i></p> <p><span>Here's what you'll learn:</span></p> <ul> <li>The exciting new features that HTML5 brings and how to use them</li> <li>The basics of programming in JavaScript and capturing user input</li> <li>What the canvas drawing element is all about and why you'd want to use it</li> <li>How to utilise both basic and advanced features of canvas</li> <li>How to create realistic animations using canvas and a splash of physics</li> <li>How to make interactive games using canvas, JavaScript, and other HTML5 goodies</li> </ul> <p>The book is definitely top-notch and if you're interested in HTML5-based animation, it definitely should be part of your library. </p> <p>Be sure to check out the book as well as Rob's Script Junkie article on <a href="http://msdn.microsoft.com/en-US/scriptjunkie/gg189187.aspx">How to Build Asteroids with the Impact HTML5 Game Engine</a>&nbsp;to learn what can be done with Canvas.</p>...(<a href="http://blogs.msdn.com/b/scriptjunkie/archive/2011/06/09/want-to-learn-canvas-you-need-to-get-this-book.aspx">read more</a>)<img src="http://blogs.msdn.com/aggbug.aspx?PostID=10172909" width="1" height="1">reybango@live.comhttp://blogs.msdn.com/reybango_4000_live.com/ProfileUrlRedirect.ashxhttp://blogs.msdn.com/b/scriptjunkie/archive/2011/06/08/w3c-media-capture-api-prototype-for-ie9-released.aspx2011-06-08T16:06:00Z2011-06-08T16:06:00Z<p>Claudio Caldato of Microsoft's Interoperability team announced yesterday that they've <a href="/b/interoperability/archive/2011/06/07/new-media-capture-audio-prototype-released.aspx">released for IE9 a new prototype of the W3C's Media Capture API</a>. The <a href="http://www.w3.org/TR/media-capture-api/">specification</a> 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.</p> <p style="padding-left: 30px;"> <em>Our next prototype will support Speech recognition and will implement the Microsoft proposal available on the W3C website <a href="http://lists.w3.org/Archives/Public">here</a> and <a href="http://lists.w3.org/Archives/Public/www-archive/2011Mar/att-0001/microsoft-api-draft-final.html">here</a>. It will also include two implementations of the sample apps that are described in sections 5.1 and 5.2 of the draft.</em></p> <p>The release sticks to Microsoft's conservative approach of allowing developers to experiment with important&nbsp;features that may not be 100% ready for release. To download and install<a href="http://html5labs.interoperabilitybridges.com/prototypes/media-capture-api/media-capture-api/info"> the new prototype</a> along with <a href="http://html5labs.interoperabilitybridges.com/prototypes/indexeddb/indexeddb/info">IndexedDB</a>, <a href="http://html5labs.interoperabilitybridges.com/prototypes/websockets/websockets/info">WebSockets</a> and the <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">FileAPI</a>, be sure to visit the <a href="http://html5labs.interoperabilitybridges.com/">Microsoft HTML5Labs</a>.</p> <p style="padding-left: 30px;"><em>&nbsp;</em></p>...(<a href="http://blogs.msdn.com/b/scriptjunkie/archive/2011/06/08/w3c-media-capture-api-prototype-for-ie9-released.aspx">read more</a>)<img src="http://blogs.msdn.com/aggbug.aspx?PostID=10172571" width="1" height="1">reybango@live.comhttp://blogs.msdn.com/reybango_4000_live.com/ProfileUrlRedirect.ashxhttp://blogs.msdn.com/b/scriptjunkie/archive/2011/06/06/processing-js-1-2-released.aspx2011-06-07T00:38:00Z2011-06-07T00:38:00Z<p>Last week, the <a href="http://processingjs.org/blog/?p=267">processing.js project released version 1.2</a> which is their largest release to date, and focuses on performance, compatibility, 3D, and bug fixes.</p> <p style="padding-left: 30px;"><em>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&rsquo;ve also <a href="http://processingjs.org/reference/articles/RenderingModes">written a guide</a> 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 <a href="http://processingjs.org/reference/articles/PomaxGuide">people new to Processing</a>, <a href="http://processingjs.org/reference/articles/jsQuickStart">JavaScript developers</a> and <a href="http://processingjs.org/reference/articles/p5QuickStart">Processing developers</a>, there has never been a better time to jump in!</em></p> <p style="padding-left: 30px;"><em>This release also includes some important changes to ensure better compatibility with Processing 1.5. First, we&rsquo;ve altered our default frame rate to match Processing&rsquo;s (i.e., 60 fps). Developers who are upgrading from previous versions of Processing.js, and who don&rsquo;t explicitly set a frame rate, may notice that sketches seem to run more slowly. Don&rsquo;t worry, Processing.js is faster than ever! Your sketch is just drawing at 60fps. It&rsquo;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 <a href="http://weblogs.mozillazine.org/roc/archives/2010/08/the_mozrequesta.html">not provide any real gain</a> other than bigger deltas between visible frames.</em></p> <p>Here are some great examples of processing out in the wild:</p> <ul> <li><a href="http://apps.facebook.com/viriongame/">Winners of Zynga&rsquo;s Facebook Game competition</a></li> <li><a href="http://heff2011.wordpress.com/2011/04/03/continuum/">Using Processing.js to design tomorrow&rsquo;s fashion</a></li> <li><a href="http://numberpicture.com/">A fantastic collaborative data visualization tool</a></li> <li><a href="http://n96.org/">A real-time Twitter visualizer</a></li> <li><a href="http://neoformix.com/2011/TweetTopicExplorer.html">Another great Twitter visualization tool</a></li> <li><a href="http://labs.lucastswick.com/circle-art/">An experiment in painting with circles</a></li> <li><a href="http://fathom.info/macrecipes/">Visualizing MacGyver episodes</a></li> <li><a href="http://www.atzombies.com/">@Zombies, a Social Network Story Telling experiment</a></li> <li><a href="http://www.reddit.com/r/programming/comments/h9ynx/while_my_boss_wasnt_looking_an_html5_wave/">One of many interesting Processing.js and CoffeeScript experiments we&rsquo;ve seen lately</a></li> <li><a href="http://zepadovani.info/">Using Processing.js as dynamic website background</a></li> <li><a href="http://asalga.wordpress.com/2011/04/03/">A virtual museum</a></li> <li><a href="http://scotland.proximity.on.ca/sdowne/physics/physicsSubtitles/">popcorn.js + processing.js + box2d.js</a><a> </a></li> <li><a href="http://www.atelierbinturong.com/2011/04/spring-and-processingjs.html">Drawing flowers</a></li> <li><a href="http://www.youtube.com/watch?v=WK3zc8XDxuI">Video showing the iPad with Arduino + Processing.js</a></li> <li><a href="http://vocamus.net/dave/?p=1166">Creating video game sounds and visualizing the waveforms</a></li> <li><a href="http://processingjs.nihongoresources.com/graphs/">A graph visualization tutorial</a></li> <li><a href="http://www.analogpixel.org/pages/mouseMaze/">A simple but fun mouse maze game</a></li> <li><a href="http://www.upfade.com/">Graffiti drawing demo</a></li> </ul> <p>Since the release there has already been a <a href="http://processingjs.org/blog/?p=267">minor point release to 1.2.1</a>.</p> <p>Congratulations to the Processing.js team.</p>...(<a href="http://blogs.msdn.com/b/scriptjunkie/archive/2011/06/06/processing-js-1-2-released.aspx">read more</a>)<img src="http://blogs.msdn.com/aggbug.aspx?PostID=10171837" width="1" height="1">ralph.whitbeck@gmail.comhttp://blogs.msdn.com/ralph.whitbeck_4000_gmail.com/ProfileUrlRedirect.ashxhttp://blogs.msdn.com/b/scriptjunkie/archive/2011/06/03/windows-8-previewed-html5-and-javascript-apps.aspx2011-06-03T10:43:00Z2011-06-03T10:43:00Z<p>A preview demonstration of Windows 8 at the D9 Conference is causing a lot of discussion this week.&nbsp; One of the new features that web developers are talking about is &ldquo;<em>Web-connected and Web-powered apps built using HTML5 and JavaScript that have access to the full power of the PC.</em>&rdquo;<br /><br />In a <a href="http://www.microsoft.com/presspass/features/2011/jun11/06-01corporatenews.aspx">press release</a> from Microsoft: &ldquo;<em>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&rsquo;s much more to the platform, capabilities and tools than we showed today.</em>&rdquo;<br /><br />This is very exciting news for HTML5 and JavaScript developers.<br /><br /><iframe src="http://www.youtube.com/embed/p92QfWOw88I?rel=0&amp;hd=1" frameborder="0" height="349" width="560"></iframe><br /><br />In the video above, Jensen Harris, Director of PM, Windows User Experience, walks us through basic elements of the new Windows 8 user interface.<br /><br />Microsoft is planning on revealing many more details to developers in it&rsquo;s upcoming <a href="http://www.buildwindows.com/">BUILD</a> event (formerly PDC) September 13-16 in Anaheim, California.</p>...(<a href="http://blogs.msdn.com/b/scriptjunkie/archive/2011/06/03/windows-8-previewed-html5-and-javascript-apps.aspx">read more</a>)<img src="http://blogs.msdn.com/aggbug.aspx?PostID=10171160" width="1" height="1">ralph.whitbeck@gmail.comhttp://blogs.msdn.com/ralph.whitbeck_4000_gmail.com/ProfileUrlRedirect.ashxhttp://blogs.msdn.com/b/scriptjunkie/archive/2011/05/31/build-canvas-based-heatmaps-with-heatmap-js.aspx2011-05-31T16:08:00Z2011-05-31T16:08:00Z<p>I've always loved <a href="http://www.crazyegg.com/">Crazyegg's</a>&nbsp;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 <a href="http://www.patrick-wied.at/static/heatmapjs/">Heatmap.js</a> which lets you do that same thing. It uses the HTML5 Canvas element to dynamically generate the heatmaps based on your data.</p> <p style="padding-left: 30px;"><em>Heatmap instances contain a store in order to colorize the <strong>heatmap based on relative data</strong>, 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 <strong>dynamically recalculate</strong>.</em></p> <p>If you check out the image below, you can see how hovering over the button&nbsp;accentuates the heatmap's colorization&nbsp; on that section:</p> <p><a href="http://www.patrick-wied.at/static/heatmapjs/"><img src="/resized-image.ashx/__size/550x0/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-41/8484.heatmap.png" border="0" /></a></p> <p>The source is released under a very liberal MIT and Beerware license (yep, Beerware) and the author, <a target="_blank" href="http://www.patrick-wied.at/">Patrick Wied</a>, is actively <a href="http://www.patrick-wied.at/">looking for contributions</a>.</p>...(<a href="http://blogs.msdn.com/b/scriptjunkie/archive/2011/05/31/build-canvas-based-heatmaps-with-heatmap-js.aspx">read more</a>)<img src="http://blogs.msdn.com/aggbug.aspx?PostID=10169964" width="1" height="1">reybango@live.comhttp://blogs.msdn.com/reybango_4000_live.com/ProfileUrlRedirect.ashxhttp://blogs.msdn.com/b/scriptjunkie/archive/2011/05/26/javascript-server-roundup-the-lowdown-on-serveral-engines.aspx2011-05-26T13:10:00Z2011-05-26T13:10:00Z<p>InfoWorld has published<a href="http://www.infoworld.com/d/application-development/javascript-conquers-the-server-969?page=0,0">&nbsp;an interesting comparison of several server-side JavaScript-based server implementations</a>. Of course, <a href="http://nodejs.org/">Node.js</a> 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.</p> <p>It's going to be interesting to see how developers of more traditional server-side&nbsp;options like PHP, Python or ASP.Net adapt to Node's asychronous model. I think this quote speaks volumes to Node's model:</p> <blockquote> <p><em>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.</em></p> </blockquote> <p>Tom Robinson, a developer on <a href="http://narwhaljs.org/">Narwhal</a>,&nbsp;actually comments on the difficulties of the async model:</p> <p style="padding-left: 30px;"><em>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.</em></p> <p><em></em>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.</p> <p>I was kind of perplexed by this statement though:&nbsp;</p> <p style="padding-left: 30px;"><em>One developer referred to <a target="_blank" href="http://www.commonjs.org/">CommonJS</a>, an attempt at building a standard server-side API, as "so 2009."</em></p> <p>I've felt that the CommonJS movement had some teeth and this sounds like there may be some splintering. </p> <p>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.</p>...(<a href="http://blogs.msdn.com/b/scriptjunkie/archive/2011/05/26/javascript-server-roundup-the-lowdown-on-serveral-engines.aspx">read more</a>)<img src="http://blogs.msdn.com/aggbug.aspx?PostID=10168644" width="1" height="1">reybango@live.comhttp://blogs.msdn.com/reybango_4000_live.com/ProfileUrlRedirect.ashxhttp://blogs.msdn.com/b/scriptjunkie/archive/2011/05/26/the-script-junkie-blog-is-live-the-new-source-for-javascript-html-and-css-community-news.aspx2011-05-26T12:51:00Z2011-05-26T12:51:00Z<p>When we launched <a href="http://ScriptJunkie.com">Script Junkie</a> 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.</p> <p>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&nbsp;news&nbsp;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&nbsp;up-to-date with what's going on in the community.&nbsp;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 <a href="mailto:sjsiteteam@microsoft.com">sjsiteteam@microsoft.com</a>.</p> <p>Having&nbsp;timely&nbsp;information is invaluable and we hope to provide&nbsp;the best&nbsp;resource for keeping the community in the loop.</p>...(<a href="http://blogs.msdn.com/b/scriptjunkie/archive/2011/05/26/the-script-junkie-blog-is-live-the-new-source-for-javascript-html-and-css-community-news.aspx">read more</a>)<img src="http://blogs.msdn.com/aggbug.aspx?PostID=10168638" width="1" height="1">reybango@live.comhttp://blogs.msdn.com/reybango_4000_live.com/ProfileUrlRedirect.ashx