Chris Bowen's Blog

Development Practices, Tools, Technology, and Community

  • Chris Bowen's Blog

    Internet Explorer 9 Developer Tools Deep Dive – Part 4: Profiling JavaScript


    This continues a series of posts on the F12 Developer Tools included with Internet Explorer (since version 8) to help you improve your websites with tools to review content, diagnose issues, improve performance, and more:

    If this is your first look at the F12 Tools, I recommend you skim through the introductory post first.

    Profiling JavaScript with Internet Explorer

    In the last post, we saw many ways to help create JavaScript that is correct, but what about making it efficient?  Though the new “Chakra” JavaScript engine in IE9 helps, it certainly that doesn’t mean we can stop looking for ways to optimize script performance.

    Let’s fire up the IE9 Developer Tools (press F12 or choose Tools –> F12 Developer Tools) and take a look.

    Introduction to Profiling

    The F12 Tools’ Profiler tab lets you analyze the execution of JavaScript, showing which functions (whether custom or built-in) are being called and where time is spent.

    Just click “Start profiling”, load a page and/or use page functionality, and click “Stop profiling”.  You can also use F5 and Shift+F5 to start/stop, though I rarely find that easer.

    Profiler tab

    In this example, we’re using the “ECMAScript5 Tile Switch Game” sample from the IETestDrive site

    ECMAScript 5 Example

    When the session is stopped a report of the instrumented script is shown, including the following by default:

    • Function name
    • Count of times called
    • Inclusive time (ms) – Time in the function plus any functions it calls
    • Exclusive time (ms) – Time in the function only
    • URL (of file containing the function)
    • Line number

    Viewing Function Source Code

    Double-click a line to go directly to the source for the function, if you have access to it.  See Part 3 - JavaScript debugging for more on the Script tab.

    • Tip:  Typically you can click to source where the URL field is specified.  In this case playSound(), but not play() or getElementById():

      Clicking to source
    • Tip: You can also add the Function type column (see next) and look for “User” functions.

    Function source

    Click the Profiler tab to return to the list. 

    Customizing and Sorting the Report

    There are more details available via columns that are hidden by default.  To show them, right-click in the report and choose “Add / Remove columns”:

    Add / Remove Columns

    This will give access to:

    • Inclusive time % – Percent of total time
    • Exclusive time %
    • Avg time (ms)
    • Max time (ms)
    • Min time (ms)
    • Function type – User, DOM, Built-In

    The right-click menu also enables sorting by displayed columns, but you’ll probably find it easier to click on column headers to toggle between sorting ascending and descending.

    Report Views

    There are two options available for viewing profiling report data: Functions and Call Tree views.

    Report views

    Functions View

    By default, reports are shown in Functions view, listing content at the function level (one line per function) and allow an easy way to see where the most calls are made and where time is spent.

    Functions view

    Call Tree View

    Call Tree view shows the same data (each line is still a specific function), organized into a hierarchy by caller/callee relationships.  From the root function(s), expand to see functions were called (and continue to expand to functions they in turn called.)

    Call Tree view

    • Tip:  Unlike in Functions view, the same function may appear in more than one place because it was called by different parts of the application.  In the above picture, playSound() appears under endPieceFlip() and startPieceFlip().

    Sorting in Call Tree view works at the group level, with each subgroup sorting individually.

    Searching Reports

    As with other areas of the F12 Tools, use the Search box to find functions by name:


    If a match is found, use the Next/Previous Result buttons Results buttons (Enter / Shift+Enter) to navigate results.

    Search results

    Comparing Reports

    As you create profiling sessions, you may notice the report drop-down is keeping track: 

    Session reports

    Use this to switch between individual profiling sessions.  These are retained only for the life of the window. 

    To save the data for later use, or to perform more analysis, click the “Export data” button Export data to save to a CSV format (that can then be load directly into Excel):

    Import to Excel

    • Tip: You can copy items (tab-delimited format) from the report directly.  Click, CTRL+Click (for multiple items), or CTRL+A (all items), then CTRL+C or right-click and choose “Copy” to add details to the clipboard.

    Once in Excel, you can decide where to go next.  Build up an archive to document application performance during development, create various analysis graphs, or even extend Excel with .NET to help detect changes and trends from session to session.

    Performance Optimization Tips

    Now that you know how the profiler works, what should you be looking for?  It’s a huge topic, subject of books, presentations, and articles, but here are some ideas to get you thinking:

    • Find hotspots – Obvious, but hard to master.  Invest time where there’s the largest potential benefit.  Profile, then sort on exclusive time to get a quick view.  The more you read JavaScript optimization articles & books and keep up with advances in JavaScript (e.g. new ECMAScript 5 options), the better you’ll be at finding ways to improve.
    • High function counts – Having many calls to a function isn’t necessarily a problem, but it’s a good place to start looking.  Can you refactor to batch requests together? Move conditionals earlier to prevent code path execution (a good use of the Call Tree view)? Make asynchronous requests?
    • Repeated calls – Calling a function with the same arguments repeatedly?  Recomputing values frequently? They may be a good candidates for caching and/or precomputing common requests (server- or client-side).
    • Use realistic data – Some issues only manifest themselves in production scenarios.  Test with realistic data and conditions… before your users do (e.g. testing that document processor using “Hello world!” might not be enough.)

    Again, just a starting point, and many books and articles await you.  For more ideas, watch Jason Weber’s “50 Performance Tricks to Make Your HTML5 Web Sites Faster” session from Mix11.

    Next: Part 5 – Network Performance and Debugging

    JavaScript execution is only part of the performance landscape.  How you utilize (and don’t utilize) the network is another major performance factor. 

    In the next article, we’ll take a look at the Network feature that was added to the F12 Tools with Internet Explorer 9.


  • Chris Bowen's Blog

    Internet Explorer 9 Developer Tools Deep Dive – Part 3: Debugging JavaScript


    This continues a series of posts on the F12 Developer Tools included with Internet Explorer (since version 8) to help you improve your websites with tools to review content, diagnose issues, improve performance, and more:

    If this is your first look at the F12 Tools, I recommend you skim through the introductory post first.

    Debugging JavaScript with Internet Explorer

    Because using JavaScript to create web applications isn’t without its share of… challenges, the F12 Developer Tools can be very handy. 

    In this article, you’ll see how features from breakpoints and debugging code, to variable inspection and script formatting can make things easier.

    Using the Debugger

    To start debugging, open the Developer Tools (press F12 or choose Tools –> F12 Developer Tools) then select the Script tab and set a breakpoint (F9 or right-click and choose “Insert breakpoint”), then press “Start Debugging”.

    Script Tab - Start Debugging

    Use the script drop-down list to switch between all of the page’s scripts:

    Selecting Script Files

    • Tip: Use CTRL+G to go to a specific line:

      Go To Line (CTRL+G)

    Start debugging, and if the breakpoint (or an error as we’ll see next) is hit, the debugger will pause at the line:

    Paused in the Debugger

    Use the toolbar buttons or access keys to step through code:

    Debugging Options

    The options are (from left to right):

    • F5 – Continue – Continue execution
    • CTRL+SHIFT+B – Break All – Break on any next statement
    • F11 – Step Into – Step forward, including into any functions
    • F10 – Step Over – Step forward, without going into any called functions
    • SHIFT+F11 – Step Out – Step forward, but out of the current function

    Right-click on the code for more options:

    More Debugging Options

    • Set next statement – Makes the target statement execute next, skipping any code between it and the current statement.
    • Run to cursor – Executes code until the target statement is reached, including running any code between it and the current statement.
    • Add watch – See Working with Variables - Watch and Locals below

    Tip: If Internet Explorer reports “not responding”, check to see if the F12 Tools are waiting on a line of code in debugging mode.  The F12 Tools’ window detaches in debugging mode and may have snuck under IE’s window while awaiting your input.


    If you run a script with an error (and the F12 Tools running), you’ll see the error highlighted in the Script tab:

    JavaScript Errors

    The Console (on the right-hand side) will display a list of messages and errors. You can click on the hyperlinks to navigate to the line of code when available. MSDN has a list of built-in error codes (and suggested fixes) for common issues (from security to HTML5).  More on the Console in a moment.

    Note that before seeing this, you may be prompted to launch the debugger.  Click Yes to launch the debugger (and check “Do not show this message again” to keep it quiet in the future).

    Prompt to Launch Debugger

    Note that you can enable/disable breaking for errors via the “Break On Error” configuration option (CTRL+SHIFT+E).

    Formatting JavaScript

    Many times, you’ll use “minified” versions of JavaScript files to reduce download sizes and improve performance.  That’s great for optimization… but not so great for readability.

    Fortunately, the Configuration Configuration Menu (CTRL+ALT+O) menu has a “Format JavaScript” option:

    Format JavaScript

    Same source, just formatted to be easier to read (notice how the line numbers are preserved).  Set breakpoints as you wish and enjoy.

    Formatted JavaScript

    Working with the Console

    The Console was given its own tab in IE9, but as you’ve seen above, is also available as a pane of the Script tab (in IE8 and later).

    Console displays error messages and also supports diagnostic information via the window.console object.  You can use these functions to instrument your scripts to help you detect and trace issues (instead of those jarring alert() calls):

    • console.log – General logging
    • – Informational message
    • console.warn – Warning message
    • console.error – Error message
    • console.assert – Emit message only if a condition fails


    • console.clear – Clears the console window
    • console.dir – Displays details for an object
    • console.profile/profileEnd – Start/stop a script profiling session (covered in Part 4 of this series)

    You can check existence of window.console if you have script you only want executed when the F12 Tools are running.  For example:

    window.console Diagnostics

    • Tip:  You don’t need to be debugging for these diagnostic messages to display.

    Seeing too many messages, or just want to see certain message types?  Right-click in the Console and choose “Filter” option(s):

    Filtering Console Messages

    Executing Script

    The textbox at the bottom of the Console supports direct script execution.  Enter variable names to see details (via window.console.dir), expressions, or statements.

    Executing Script

    You’ll see the result in the Console, and browser’s rendering of the page will reflect any effects/changes as well.

    • Tip: This is a great way to learn/test commands from JavaScript libraries like jQuery.
    • Tip: If you run script that modifies the DOM (e.g. adding elements), the HTML tab won’t show the change (nor let you select it via “Select Element By Click”) until you hit the Refresh Refresh Button button - the one in the F12 Tools, not IE’s page refresh.

    You can enter a single line, or click the multiline button Multiline Script Button (CTRL+ALT+M) to enter multiline scripts.

    Working with Variables - Watch and Locals

    Because seeing code is only part of the battle, you’ll want to inspect variables as well.  When debugging, the Script tab lets you hover over variables to see details. 

    From simple properties and scalars:

    Inspecting a Property

    To full object inspection:

    Inspecting an Object

    The Locals and Watch panes help you track values of variables and objects.  Locals is constantly updated to show you values of locally-scoped variables:

    Locals Pane

    Values changed by the latest executed statement are shown in red.

    The Watch pane shows only variables and expressions you indicate.  You can also add a watch directly in the Watch pane, from an entry in the Locals pane, or by right-clicking on a variable name in debugging mode:

    Adding a Watch

    Also note that as you execute script via the Console, variables, jQuery results, and the like offer an “Add to watch” option.

    Adding a Watch via the Console

    Unlike the Locals pane, Watch retains the same set of items as you step through code.  In-scope watch variables will have values displayed, out-of-scope variables are shown as “undefined”:

    Watch Pane

    The Watch and Locals panes allow you to edit variables.  Double-click the Value cell or right-click and choose “Edit value”:

    Editing a Value

    The Call Stack

    Many times you will be debugging code but wondering just what series of functions led execution to that point.  Use the Call Stack pane to see the path of functions:

    Call Stack

    You can navigate between items on the call stack by double-clicking. The chosen stack item line will be highlighted in green (and as always the current/executing line of code is highlighted in yellow):

    Navigating the Call Stack

    Managing Breakpoints

    Finally, you can direct the tools to break at certain lines by setting breakpoints.  Just select the line in the Script tab and press F9 or right-click and choose “Insert breakpoint”:

    Insert a Breakpoint

    You can further control breaking by setting the “Break on error” and “Continue after exception” options:

    Break Options

    The Script tab’s Breakpoints pane lets you view and manage (disable/enable and delete) all breakpoints at a glance:

    Breakpoints Tab

    Conditional breakpoints can be set via the Breakpoints pane (above), or by right-clicking on the breakpoint indicator and choosing “Condition…”:

    Conditional Breakpoint

    Enter the JavaScript expression for the condition to check (you have access to any in-scope variables as well):

    Conditional Breakpoint Expression

    Conditional breakpoints are displayed with a plus Conditional Breakpoint Indicator indicator:

    Breakpoints (with Conditionals)

    Next: Part 4 – Profiling

    I hope you’ve enjoyed this look at working with JavaScript in the F12 Tools. 

    In the next article, we’ll take a look at profiling and optimizing JavaScript, using the F12 Tools Profiler tab to analyze script performance.


  • Chris Bowen's Blog

    HTML5 Game Development Resources


    HTML5 Logo by W3CThe first series of HTML5 Game Camps concluded yesterday, helping attendees to learn HTML5 by diving in and writing games.  Here’s a summary of links and resources for anyone who would like to get started.

    Demo at the Georgia Tech Game CampGame Campers at Work/PlayCambridge Game Camp DemoersDemoing a Game

    imageThe events featured introductions to the underlying technologies (HTML5, JavaScript, graphics) then a look at engines that can make game development easier.  The second half was hacking time followed by a chance for everyone to demo their creations.  It was great to see what could be made in just a few hours!

    Thanks to everyone who participated, and let me know if you’ve continued working on your creations after the events!

    Session 1 – A Tour Around HTML5

    This session focuses on a brief introduction to HTML5, CSS3, standards, and browser support.

    HTML5 Presentation ResourcesLearning HTML5

    Implementing HTML5

    IE Test DriveInternet Explorer & HTML5

    Session 2 – Adding the Fun(ctionality) with JavaScript and Tools

    The focus is on a few resources for learning JavaScript, libraries to make things easier, and support in developer tools.

    General JavaScript

    JavaScript Frameworks & Tools

    imageInternet Explorer Developer Tools (built in to IE 8+) – See also Firebug for Firefox and the Chrome Dev Tools

    WebMatrix 2 Beta

    • WebMatrix 2 Beta - Free, lightweight, and supports HTML5/CSS3, ASP.NET, and PHP development

    Web Standards Update for VS2010Visual Studio 2010 Extensions

    Expression Web 4 HTML5 Support

    Session 3 – HTML5 Graphics

    Focused on 2D graphics with SVG and Canvas and choosing between them.

    SVG-oids gameSVG

    Canvas PadCanvas

    HTML5 Blizzard DemoSVG & Canvas

    Session 4 – Creating an HTML5 Game

    At this point, the survey of the moving parts (HTML5, JavaScript, graphics, etc.) is done, so it’s time to pull it all together and make games!  So many choices, but to keep things simple the focus was on leveraging game engine libraries already out there.

    List of Game EnginesJavaScript Game Engines

    • List of Game EnginesBefore you start, take a look at this list to see what’s already out there
    • EaselJS – Canvas-based JS library by  Used in some of the demos during the session. 
    • Akihabara Tutorials – A nice tutorial series by Boston locals Darren Torpey and Darius Kazemi


    Galactic Demo3D in 2D

    Game Dev Resources

    The Slides

    Much of the time was spent in code and demos, but the slides we did use are up in a presentations folder on SkyDrive. The relevant files are:

    • SkyDrive ShareHTML5 – Practical First Look
    • HTML5 Camps – Scripting
    • HTML5 Game Camp – Graphics
    • HTML5 Game Camp – Games


    Missed the in person events?  Fortunately, it isn’t game over!  The content is being brought to you online via these webcasts:

    Enjoy creating those games!


  • Chris Bowen's Blog

    Silverlight 2.0 and RIA Development Article Series


    Our very own Bob Familiar has been cruising the seas of Silverlight and has recently posted a very nice four-article series on using Silverlight 2.0 to develop RIAs (Rich Internet Applications):

    This series of articles takes a look at the current state of RIA development leveraging Silverlight 2.0. The series will focus on the architecture of RIA's, the use of XAML for resolution independent user interface layout and design, Windows Communication Foundation for Web Services, Visual Studio 2008 and Expression Blend for the design/development environment and Windows Server 2008/IIS7 as the deployment environment.

    Bob's not only a great technology guy, but an excellent musician as well.  The series is based on his experiences developing his Sounds Familiar music site, showcasing his work. 

    I've come to know Bob's musical work from our many hours in the car together for our Roadshows, taking turns listening to our Zunes.  He has a lot of songs, you know.  I'm thinking I'll record my daughters practicing their piano so I have some custom compositions as well.  It's only fair.


  • Chris Bowen's Blog

    Learn About the New England Research & Development (NERD) Center


    A new site has just launched with details of the Microsoft New England Research & Development (aka “NERD”) center at One Memorial Drive in Cambridge, MA.

    The NERD Site

    The site features details about the facility, plus events, jobs, and the teams that call NERD home.

    Check it out at:  (Not to be confused with our friends across the pond at the Cambridge, England Research Center.)

    It’s a beautiful facility, right along the Charles with amazing views of Cambridge and Boston, so take a look at the upcoming events and drop by for a visit!


  • Chris Bowen's Blog

    Virtual TechDays 2009 "Defy All Challenges" Event



    Our old New England friend Thom Robbins has announced that the Virtual TechDays 2009 "Defy All Challenges" event is coming on April 1st, taking community and knowledge sharing into the online world.

    With a target of over 90 sessions in 5 tracks delivered over 24 hours, this should be great fun for both the presenters and attendees.

    Your chance to get involved, the Call for Content, is open through February 13th, and submissions from everyone and in any language are welcome.

    Are you interested in sharing your knowledge with your peers around the world?

    We are looking for passionate speakers to submit topics that developers would be interested in learning about. 

    This is an open call for sessions so please feel free to refer other industry experts to this site.

    Please note that if you submit a session for consideration, this does not guarantee that your session will be accepted for this event.


  • Chris Bowen's Blog

    Index of Silverlight Games (Most with Source)


    Zero Gravity In my experience, many corporate developers by day are actually gamers by night (after putting the kids in bed, of course.)  So when an interesting technology like Silverlight comes along, a good way to learn what it can do is to see gaming concepts applied, then pull things apart to see how they were done.

    Here's a recent crop of Silverlight 1.0 & 1.1 games, each (but one) with source:

    If you're interested in learning more about game development with Silverlight, Bill Reiss has been working on a great series of tutorial posts on his Silverlight Games 101 blog.  Start reading from the bottom first, where he start with a basic game canvas, then adds sprites, a game loop, keyboard input, etc.


    Update 7/5 - Added Silverlight Maze, Khet
    Update 7/6 - Added Bubble Factory [via WynApse].  Hmm, three more games without source - I may have to change the post title soon... :(
    Update 7/8 - Added Browser Poker, Grand Piano, Silverlights Out, SilverNibbles [via Tim Sneath]
    Update 7/30 - Added Silverlight Tetris

    Technorati tags: , ,
  • Chris Bowen's Blog

    Article on Microsoft's Partner Solutions


    aspprologo A copy of the June asp.netPro magazine found it's way to me and I found a nice article by Auri Rahimzadeh describing Microsoft's various offerings to the partner community. 

    Blogging the link because I tend to get asked about this often:

        asp.netPRO - "Microsoft's Partner Solutions"

    The article touches on the following programs:

    Worth taking a look, especially if you're consulting, considering becoming a Partner, and/or creating software for resale.  These programs can help you save plenty of money on software and also help establish your brand.


  • Chris Bowen's Blog

    Internet Explorer 9: Pinned Site Shortcuts vs. Internet Shortcuts


    imageYou may have noticed that with Internet Explorer 9, dragging a site’s icon to your desktop results not only in a link being created, but also the IE window being refreshed. 

    Why does that happen?  (And is there a choice?)

    A Tale of Two Shortcuts

    Pinned SiteBy default, when you click and drag a site icon to desktop, you’ll create a Pinned Site Shortcut.

    The page is relocated to a new window, which will show it as a pinned site.  For example, you’ll see the navigation buttons take on the key color of the site icon (or the msapplication-navbutton-color meta element.)  More on pinned sites in a moment.

    The Alternative

    Site Without PinningJust want a basic link without the extras? 

    Hold down Shift then drag & drop the site icon to the desktop.  This will create an Internet Shortcut.  You’ll notice IE does not move or change in this case.

    You may be asking “So… why the two options?”

    The Differences

    Pinned Site Shortcuts use the .website file extension, and Internet Shortcuts use the .url extension.  They look the same when a site has a favicon, and slightly different without:

    With FaviconWithout Favicon

    “Um, that’s fascinating, Chris, but what’s the practical difference?”

    Certainly the most substantial difference is that one gives you a pinned site, along with the many features they support – Jump Lists, Notifications, Thumbnail Toolbars, etc.  Links for learning more are at the end of this post.

    Let’s look at some other differences.

    Menu Options

    Firing up the right mouse button, here are the right-click menus for each (Internet Shortcut on left, Pinned Site Shortcut on right):

    Internet Shortcut MenuPinned Site Menu

    Mostly the same, except the Internet Shortcut offers “Print”, and the Pinned Site Shortcut offers to pin to the Start Menu and Taskbar.  Speaking of which…

    A Stroll to the Taskbar

    Dragging (or pinning) the shortcuts to the Taskbar has different effects by shortcut type:

    • Pinned Site Shortcut – Adds a new, separate pinned site to your taskbar.  This will give you easy access to that site, plus the features mentioned earlier.  Right click on shortcut in the Taskbar to see some of those features.
      Pinned Site on the TaskbarChannel9 as a Pinned Site


    • Internet Shortcut – Pins the site to Internet Explorer itself, not as a new entry in the Taskbar.  Right-click on IE’s Taskbar shortcut and the site is listed under “Pinned”:
      Links Pinned in IELinks Pinned in IE

    Learning About Pinned Sites

    This post focused on the differences in shortcut features, but there’s much more that pinned sites can do (and generally don’t need much work to enable.)  Here’s where to find more:

    Enjoy making those shortcuts!


  • Chris Bowen's Blog

    Got Tech Posters?


    Have a blank wall (and access to your company's color printer)? 

    There are plenty of technology posters and charts for developers available on MSDN.  I didn't realize just how many until I searched for "poster" on MSDN downloads.

    Here's a list of the more recent ones:



  • Chris Bowen's Blog

    Save the Dates: Code Camp 7 - Deer in Headlights


    [Update - Attendee registration and call for speakers are now open!]

    I'm happy to announce we've finalized the dates for the next round of the Code Camp that started it all! 

    New England's Code Camp 7 - "Deer In Headlights" will be held the weekend of March 31st and April 1st at Microsoft's Waltham, MA office.  Look for some changes to "the usual" this time around!

    Haven't been to a Code Camp before?  They're free events, held outside of work hours, that are a chance for regional .NET communities to gather and to learn from each other.  High signal, low marketing.  Code aplenty, slides afew.  Check out the Code Camp Manifesto for the brief list of the Code Camp guiding principles.

    The relaxed atmosphere of Code Camps is also a great way to break into practice of public speaking.  If you've been considering giving it a try, this will be the perfect opportunity. 

    Mark your calendars and stay tuned for event registration and speaker submission details!


  • Chris Bowen's Blog

    Tech Telecommuters - What's Your "Third Place"?


    Adventures in Telecommuting

    At Microsoft, I'm classified as a "mobile" employee.  That's code for "work where you can be productive".  Much of the time, that means home, and sometimes our Waltham, MA office where we have shared space you can grab as needed.  Many times, though, it's a "third place" (I'll get to that in a moment.) 

    MPj04308140000[1]As great as working from home can be, as the weather warms and summer approaches, there's a new source of urgency to be somewhere else... vacation.

    I absolutely adore my daughters (a phrase you just know will be followed by the word "however"), however, the reality is that the summer months are challenging for the work-from-home types, especially those that need to code and/or read a lot, without having to arbiter weighty disputes involving shouts of "nuh-uh!" and "did too!"

    Not Work, Not Home... The Third Place

    The term "third place" was coined to reflect places that people go outside of home (first place) and work (second place).

    My home office is usually pretty good, and I can escape to the back porch (where I am right now) which is nice, but school vacation or not, there are times I simply need a change of venue.

    So what's my "third place"?  Well, there isn't just one...

    The Coffee Shop

    MPj04230300000[1] The big daddy of all the choices.  Scorned by some, but thoroughly enjoyed by many others.  Count me in the latte(r) camp.

    I'm hardly alone in this.  Here's someone's Starbuckian Handbook.  Sage advice indeed.

    Contrary to tip #1 in the "handbook", I tend to alternate between the selection of Starbucks and Panera Breads in our area, so I don't wear out my welcome at any one.

    Generally, the coffee shops work for what I need.

    The Library

    "Did he just say 'the library'?  How old fashioned!" 

    In my college years, I was a library person.  Many of my peers just couldn't stand being there, but I found it allowed me to truly focus.  No distractions, no loud espresso machines, no toe-tapping music looping in the MPj04276860000[1]background.  Just blissful peace with the faint sounds of pages being turned and the occasional politely hushed conversation.

    The library works for telecommuters, too.  I'm sure one of your area towns has an adequately "workable" library.  Also, college/university libraries are getting the message too, adding amenities to make an extended work session more comfortable.

    Sure, they don't always have the latest computing technology books, but if that's what you need, then perhaps the next place is more your style...

    The Big Bookstores

    An interesting hybrid between a library and a coffee shop (the big bookstores generally also have a cafe these days).  I find it an especially nice place to go if I'm in research mode.  People are usually a little more clued in to library etiquette, versus coffeehouse chatter and cellphone barking. 

    Research is especially good at these places since I can usually grab a few different books/magazines on a topic and plow through them (over an appropriately large coffee beverage of course.)


    MPj03860690000[1]I haven't tried this one yet, but a friend suggested it as a possibility.  And why not?  Many hotels have carefully crafted, welcoming environments that are comfortable and quiet.

    As long as you're patronizing their coffee/snack area and/or restaurant, there would seem little problem with hanging around for a little while to catch up on things. 

    It could be a nice alternative to the mainstream coffee houses.


    CNN has been running a special work at home feature, with stories about telecommuting.  Once concept that piqued my interest was of "coworking", where fellow telecommuting developers (or other professions) gather in a common place for work.  There's a coworking wiki, with information on area groups. 

    Missing the social interaction of work, but don't miss the dreaded "quick questions" that often tag along for the ride?  Coworking might be for you.

    Some Assistance Required

    So why did I write this?  I'd enjoy hearing your feedback.  Have you encountered any places that could serve as a home away from your home away from the office?  Any places that sound good, but in reality should just be avoided?

    Believe me, I really want to know. 

    Hmm, is that the kids I hear?


  • Chris Bowen's Blog

    Windows 8 Release Preview, Visual Studio 2012 RC, and More!


    It’s a big day for releases as a number of new Release Previews and Release Candidates have just been made available:

    [Last updated – 7/13/2012]

    Windows 8 Release PreviewWindows 8 Release Preview

    Visual Studio 2012 RC downloadsVisual Studio 2012 Release Candidate

    .NET Framework 4.5 Release Candidate

    Team Foundation Server 2012 Release Candidate 

    Windows Server 2012 Release Candidate

    Enjoy downloading and exploring!


  • Chris Bowen's Blog

    Internet Explorer 9 Developer Tools Deep Dive – Part 5: Network Performance and Debugging


    This post completes a series on the F12 Developer Tools included with Internet Explorer (since version 8) to help you improve your websites with tools to review content, diagnose issues, improve performance, and more:

    If this is your first look at the F12 Tools, I recommend you skim through the introductory post first.

    Network Performance and Debugging in IE9

    So far, our discussion of the F12 Tools focused on the client-side experience, but it’s very important to know how your applications utilize network resources.

    Reducing download sizes, finding missing/redirected content, improving cache utilization, and much more can improve performance (actual and perceived) and lower your bandwidth bills.

    The Network Tab

    New in Internet Explorer 9, the Network tab offers an easy way to capture and investigate network traffic and cache requests.  You can get a quick report of requests and responses, including headers, timing, and many more details.

    “Wait, is this Fiddler ported to IE?”

    Fiddler Session at MIX11No, but…

    Fiddler is a web debugging proxy developed by Eric Lawrence (who also happens to be a PM on the Internet Explorer team.)  While in some cases you’ll see similarities to Fiddler, they are very different in other regards.

    Eric gave a great session on Fiddler at MIX11, and spent time (around 12:30 in) describing key differences from the F12 Tools.  The session recording and slides are available for free.

    You can also hear more in Eric’s very recent appearance on episode 116 of the “Herding Code” podcast.

    Creating a Capture Session

    To begin, launch the F12 Tools (Tools –> “F12 developer tools” or just press F12) and click to the Network tab.  Click “Start capturing” and request a page (in this case, the IETestDrive home page):

    Network capture session

    Summary View

    By default, captured traffic is shown in summary view, with the following fields:

    • URL
    • Method – HTTP method (GET, POST, etc.)
    • Result – HTTP response code (200, 301, 304, etc.)  There are many codes, including redirects and errors.  For example, look for 404 results, indicating the URL is incorrect or the content is unavailable.
    • Type – Content type received
    • Received – Size of data received
    • Taken – Duration of request
    • Initiator – Cause of the request (see Request Initiators below)
    • Timings – Graph of request/response timings (see Request Timings below)

    Click any field header to sort, and right-click for options such as showing data as bytes and times in milliseconds:

    Summary view options

    Double-click or select an item and press “Go to detailed view” for full details.

    Detailed View

    Detailed view

    There are seven detail categories for each request:

    Detailed view categories

    • Request headers
    • Request body – The content (body) of the request, if any.
    • Response headers
    • Response body – The content (body) of the response.  Shown as text (if script, css, etc.) or visually if possible (image types)
    • Cookies – Any cookies sent or received for the request
    • Initiator – What prompted the request.  See Request Initiators below.
    • Timings – Detailed breakdown of timing.  See Request Timings next.

    Cycle through items with the Previous Previous button (CTRL + ,) and Next Next button (CTRL + .) buttons, and press “Back to summary view” to return.

    Request Timings

    Timing details can seem a bit complex at first, but they’re fairly straightforward once you learn a few concepts.

    Let’s start with a simple image request from the IETestDrive home page (after clearing the cache – see later), showing Timing details for GraySwooshWatermark.png:

    Timings tab

    Zooming in to the left-hand side:

    Timings detail

    The request/response cycle has seven timing components:

    • Wait – Time since start of page navigation to when the request started.
    • Start – From when the request was created to when it started to be sent.
    • Request – When the request was started to be sent to the first response.  Also known as time to first byte.
    • Response – Time from first byte to completion of receiving the response.
    • Gap – Time between response completion to page load event.
    • DOMContentLoaded – Time of DOMContentLoaded event.
    • Load (event) – Time of page Load event.

    Click in the list or on the diagram to highlight each timing component.

    • Tip: If you forget, the above descriptions are shown in the F12 Tools as you click each.

    DOMContentLoaded vs. Page Load Event

    Why are DOMContentLoaded and page Load different events?  DOMContentLoaded fires when the page and scripts are loaded.  This can happen before other requests (e.g. for images) are complete, at which point the page Load event would fire. 

    The difference between these can be significant, especially when downloading large graphics, ads, or other content, so it may be useful to tie script to the DOMContentLoaded event rather than page Load.

    For a good demonstration of this in action, run the DOMContentLoaded example from the IETestDrive site:

    DOMContentLoaded example

    Run it twice to see the impact that browser caching has on the delta between the events.

    Analyzing Ongoing Traffic

    So far, we’ve focused on profiling network use related to an initial page load, but the F12 Tools can also track ongoing requests, such as requests for additional content and Ajax-based calls. 

    To see this in action, we’ll run the Texas Hold’em example from IETestDrive.

    Run the example and on the Network tab, click “Start capturing”.  Next, hover over the game’s “START” button, but don’t click it yet:

    Texas Hold'em example

    You’ll see an image request (buttonGeneric_Hover.png) was made the moment the cursor hovered over the button:

    Image request

    Request Initiators

    Why did IE9 wait to download this?  For details, double-click (or hover over for a tooltip) the Initiator field, pictured above showing the value “background-image”, and the following is displayed:

    Image request Initiator details

    The Initiator tells us what prompted IE9 to make the request.  In this case CSS indicated an alternate background for hovering over the button, but IE deferred downloading the image until the hover event was executed.  (As shown in Part 2, you can select the button and view the CSS Styles tab to see the input.actionButton:hover rule.)

    Now click the game’s “START” button and you’ll notice three more requests:

    Additional requests

    The requests were for the background for another element, along with the first two playing cards dealt.  Click “Go to detailed view” or double-click on of the card requests, then choose the “Response body” tab:

    Response body for a playing card

    Again, to see why the request was made, click the “Initiator” tab:

    Card image request initiator

    Now we see JavaScript changed the src attribute for the img element (in this case to “Hearts_Queen.png”), and that resulted in a request to download the image.

    From HTML to CSS and scripting, there are many possible request initiators.  Some common examples:

    • background-image
    • click
    • @font-face
    • <frame>
    • frame navigate
    • <img>
    • @import
    • innerHtml
    • <input type=“image”>
    • navigate
    • Refresh
    • <script>
    • XmlHttpRequest

    Taking time to understand initiators will give you another tool for improving page & network performance.  For more detail, see “Understanding Download-Initiator” in this Fiddler blog post.

    Browser Caching

    After a number of Texas Hold’em hands, you may notice requests for certain items either aren’t made or show a 304 Result.  This is because they’ve already been downloaded to play other hands and are already available locally. 

    Restart the application (refresh IE9) and you may see some 304 results.  For example:

    304 results

    Notice the large difference in the Received field between cached (304) and downloaded (200) images.  In this example, 11.65KB for the full image vs. just 162 bytes for a 304 - Not Modified result.

    To see this at a higher level, here is an initial request to the CSS3 Media Queries example:

    Initial page load

    The second request is very different:

    Second page request

    Not only is the page ready more quickly, but most requests were served by the browser cache (evidenced by the 304 Results, smaller Received sizes, and fewer blue segments under Timings.)

    • Tip: Use the F12 Tools to ensure your web server is setting cache headers that properly set expiration policies.
    • Tip: To improve cache hits, ensure file names match in spelling and case wherever referenced.  The Network Monitoring example shows the effect of inconsistent case requests.

    To clear the cache so requests again hit the network, click the “Clear browser cache” button Clear browser cache button (CTRL + R).

    The Timings field shows timing of later requests relative to the original requests (including time waiting for you to click a button as in the Texas Hold’em example).  This happens until you start a new session or click the “Clear” button Clear button, which clears results and resets timings for subsequent requests.

    Saving Network Captures

    As we saw with JavaScript profiling, you can also save network profiling details to an external file.  Press the “Export captured traffic” button Export captured traffic button to save captured results:


    Network data can be saved in CSV (comma separated values) format or as XML using the HTTP Archive format, described in this IE Blog post.

    • Tip: As mentioned in the IE Blog post, you can import these XML files into Fiddler.


    I sincerely hope you’ve found this series useful.  If you have feedback or ideas for other scenarios to cover, please leave comments here or send me a note.

    Thanks, and enjoy using the F12 Tools!


  • Chris Bowen's Blog

    The Top 10 Windows 8 Secrets of App Success


    Making $ on Windows 8: The First Mover Advantage

    The upcoming release of Windows 8 offers developers a huge opportunity.  How huge?  The Windows Store Blog sums it up well:

    WindowsWith more than 630 million licenses sold to date, across 200+ countries and regions around the world, Windows has an unrivaled global reach. Combined with the flexibility of monetization options that the Store provides, Windows 8 represents the single biggest developer opportunity for any platform.

    So, how can you join in?

    Generation App: Getting You There

    Many thousands of developers will recognize this opportunity, but you can gain an advantage and stand out from the crowd through the programs we’re offering:

    • DevCampsWindows 8 DevCamps & Hackathons
      • Free events, running now in many cities
      • DevCamps – In-person training & guidance from Windows 8 experts
      • Hackathons – Expert help and hands-on experience creating your app
    • 30 To Launch30 To Launch
      • Online training and tips from insiders, at your own pace
      • Tele-support with a Windows 8 architect
      • Exclusive one-on-one design consultation
      • Includes an Application Excellence Lab
    • Application Excellence Labs
      • Your Opportunity to Get Into the Windows Store
      • Free Developer Accounts for Quality Apps
      • More, including a helpful survey (details below) at

    These Application Excellence Labs (or “AE Labs”) are a great way for developers to get guidance and feedback on ways to make their apps shine.  In a moment, you’ll see how the labs and the related survey can help you as you develop your apps.

    What You Need to Know

    Windows Dev CenterFirst, some essential resources to get you started:

    Another immensely useful resource is the Application Profile Survey, available via  The survey is part of the AE Lab review and is available to you beforehand as a checklist of things to consider as you develop your app. 

    To access the survey, simply create an account and add an Application Profile for your app or app ideaOnce you’ve done that, a “Survey” link will appear with your Application Profile, bringing you to a helpful checklist of guidance:

    App Profile Survey

    You can expand each item to reveal guidance and related resources. 

    And Now, the List

    The Application Profile Survey just mentioned is a great resource, used as part of the AE Labs to meet with developers to review their apps, covering everything from design and features to user experience and performance.

    To help you benefit from the experiences in those reviews, the list below is based on the more frequently-encountered scenarios as reported by the Premier Field Engineers conducting those reviews. 

    So grab a cup of coffee and settle in – taking the time to ensure you’ve considered each for your app will definitely help you get ready for the Windows 8 opportunity!

    1) Screen Management and Layout

    Your app can be run on a wide variety of devices, with different screen sizes and resolutions.

    What would your app do if it suddenly had much more room to run in?  Instead of just showing an undersized rectangle of content in the upper left corner, does the new space let you do something new (adaptive layout) or should things stay put and scale in place relatively (fixed layout)?

    Scaling to Different Screens

    Understand your options for creating flexible layouts, and make sure you’ve tested your app for multiple screen sizes, pixel densities, as well as in portrait and landscape orientations.

    Visual Studio Simulator Change Resolution OptionThe Simulator that’s part of Visual Studio 2012 can make these much easier to test.  See Running Windows apps in the simulator for more. 

    For more on this, see:


    2) Apply UX Design Concepts Effectively

    Designing UX for appsEffectively applying modern design is critical for the usability and familiarity of your app, so take the time to understand the main concepts and apply them well.  The overall guidance you’ll need is on Designing UX for apps and in the App Profile Survey, but based on AE Lab reviews, here are a few areas in particular that can help:

    • Silhouette - Apply the concepts of Silhouette to your layout to help your users become instantly familiar with your app
    • Navigation – Understand navigation options and the navigation design guidance, avoiding use of tabs, menus for navigation, and home buttons.
    • AppBar - Know how to use the AppBar, including when and where to place commands including use of contextual commands.
    • Text & Typography – Effective use of fonts, font sizes, colors and more can offer a simplicity and clarity that’s central to modern design.  Understand the guidance for type and typography to improve user experience.

    Basing your app on Visual Studio’s Grid or Split project templates, which are themselves already based on much of this guidance, can help you easily get started on the right track. 

    UX Virtual TrainingAlso, there’s a full set of excellent UX training (as recorded sessions) available at

    For more, see:


    3) Snapping

    Users will expect to be able to put your app into snapped view, so make sure you’ve tested your app for snapped, filled, and full views, including the effect on the flow of your content and behavior of your AppBar.

    Unsnapped and Snapped View States

    Though you may decide that some features and content should be limited in snapped view (focus on what will remain clear and relevant), make sure your app remains functional.

    By the way, if you are developing a game or another app that won’t support play while Snapped, one simple option is to create a branded page with text.  For example, a pause screen that pauses gameplay, music, etc., and invites the user to continue by returning to full screen view.

    For more on this, see:


    4) Process Lifecycle Management (PLM) and Load Time

    Apps don’t always run continuously.  If the user switches away to do something else, your app may be suspended and perhaps terminated if resources are running low.  Take the time to ensure that your application supports saving and restoring so the user won’t lose data or have to retrace steps when they resume.

    Windows App Certification Toolkit (WACK)Also, to ensure good user experience, your app needs to load quickly.  Try running your app with the Windows App Certification Kit (or WACK), which will help you test for this and other scenarios.

    For more, see:


    5) What if the Connection is Offline or Metered?

    Does your app rely on internet connectivity?  Your app needs to provide a good experience when offline and with limited internet connectivity.  Be sure to test for these scenarios, because if you don’t, chances are your app will fail when this is tested during review.

    imageUse the Windows.Networking APIs to detect connectivity, alerting the user about connectivity status, and reconnecting automatically if connectivity is restored.  Also, disable areas that require network connectivity, displaying an inline error.

    How can you improve user experience?  Consider bundling a minimum set of resources in the app’s package to use in these scenarios and caching resources when the app is online for later offline use.

    If your app downloads large amounts of data (e.g. large images), make sure you respect the cost the user will incur if they have a metered network connection.  Use the Windows.Networking.Connectivity APIs to determine if the user is on a metered network connection so you can adjust the app’s behavior.

    For more, see:


    6) Handle and Display Errors Well

    You might be used to using dialogs to display common errors, but many scenarios should be handled instead with inline text or an error and warning bar.

    Error/Warning BarInline Text

    imageThe error guidelines (also here) make the best practices clear, including some helpful Do’s and Don’ts.

    For more, see:


    7) A Good Sign-in / Sign-out Experience

    imageIf your app requires login, make sure you offer a good user experience before the user logs in rather than simply displaying a blank screen with login.  In other words, offer as much functionality as you can as a default experience before the user has to log in. 

    If that’s not possible, then you can show the SettingsFlyout automatically when the app launches.  Also, your custom login and logout controls should be in the SettingsFlyout and nowhere else.

    For more, see Guidelines for the Microsoft account sign-in experience (and especially “Things to avoid”).


    8) Understand the Search and Share Contracts

    Using the Search and Share contracts is a simple way to make a big difference in how users view the usefulness of your app.  For example, supporting Share can add new scenarios for connecting your app to other apps in ways that you may not have imagined.

    Sharing Contract    Search Contract

    However, avoid including duplicated Search and Share functionality (e.g. custom search fields) directly in your app, outside of the Charms functionality.  Also, make sure you test to ensure your app launches correctly when it is invoked by Search and/or Share.

    imageFor more, see:


    9) The “Embedded Browser” Temptation

    imageYou may have an existing web application or site that you’d like your app to leverage, but to ensure a good experience and fewer context switches for the user, you need to resist the urge to host entire web pages (e.g. via the WebView control) as your app’s primary workflow.

    See these samples for examples and guidance for using web content and services in your app: 


    10) Accessibility and High Contrast Mode

    Enabling accessibilityConsider choosing to make your application fully accessible by following the guidelines and declaring your app as accessible.  Doing so can help you reach more customers, and you’ll be providing a service to users for whom accessibility makes all the difference!

    Using Visual Studio’s Grid or Split project templates will help you get off to a good start with accessibility.

    While declaring your app as accessible is optional, in either case you should review how your app displays when High Contrast mode is on.  You might be surprised by some of the formatting or color issues that can be uncovered. 

    For more, see:


    Wrapping Up

    30 To LaunchThanks for taking the time to read this post.  By learning from these scenarios, you’re in a great position to create amazing apps!

    Be sure to take full advantage of the 30 To Launch and App Excellence Lab programs as well as the Application Profile Survey mentioned earlier.  You’ll be in very good company, amongst those who recognize the advantage of getting advice, training, and guidance.

    Looking forward to your fantastic apps and success with Windows 8!

  • Chris Bowen's Blog

    Microsoft 2012 Launch Event Series – Windows 8, Visual Studio 2012, and More


    The New Era of Work

    A major series of free, full-day product launch events for Windows 8, Visual Studio 2012, Windows Server, and more begins on October 30th:

    Attend a FREE one-day event and be part of the biggest product launch in our history. You’ll discover how the latest Microsoft technologies are transforming the way people work—from developers and managers to executives in the C-suite. The New Era of Work is here.

             A New Generation of Apps Begins Here


    Each city will feature one or more of the following tracks of content: Developer, Developer Manager, IT Professional, IT Executive, and Business Executive

    Here’s the full list of “The New Era of Work” cities and dates:

    10/30 Hollywood, CA

    10/30 Waltham, MA

    11/5 Houston, TX

    11/5 New York, NY

    11/7 Bloomington, MN

    11/8 Bellevue, WA

    11/13 Dallas, TX

    11/13 Syracuse, NY

    11/14 San Francisco, CA

    11/14 Brookfield, WI

    11/14 Irvine, CA

    11/14 Orlando, FL

    11/15 Miami Beach, FL

    11/15 Reston, VA

    11/15 Baton Rouge, LA

    11/27 Columbus, OH

    11/27 St. Louis, MO

    11/28 Atlanta, GA

    11/28 Chicago, IL

    11/28 Denver, CO

    11/28 Detroit, MI

    11/28 Iselin, NJ

    11/28 Kansas City, MO

    11/29 Salt Lake City, UT

    11/29 Charlotte, NC

    12/4 Portland, OR

    12/5 Oklahoma City, OK

    12/6 Indianapolis, IN

    12/6 Philadelphia, PA

    12/7 Richmond, VA

    12/12 Brentwood, TN

    12/13 Pittsburgh, PA

  • Chris Bowen's Blog

    Internet Explorer 9 Developer Tools Deep Dive – Part 2: HTML & CSS


    This continues a series of posts on the F12 Developer Tools included with Internet Explorer (since version 8) to help you improve your websites with tools to review content, diagnose issues, improve performance, and more:

    If this is your first look at the F12 Tools, I recommend you skim through the introductory post first.

    Working with HTML and CSS

    One of the best uses of the F12 Tools (press F12 or choose Tools –> F12 Developer Tools) is to work through issues with page structure and design.  Usually you’ll start by selecting a particular element. You can browse the HTML tab to find content manually, but here are three shortcuts:

    Find Element by Click

    Easy enough. Just click the arrow button Select Element by Click (or CTRL+B) and click on the element you’d like. The element will be outlined in the page and selected in the HTML display.

    Find Element by Click

    Search Box

    Next is the Search box, available on all tabs except Console. Enter text to find and, if matches are found, they will be highlighted in the main and HTML/CSS windows, and the forward/back buttons Search Forward/Back will be enabled.

    On the HTML tab, Search supports selectors as used by CSS (and the basis of jQuery selectors) but you need to type an “@” symbol before your expression, otherwise it’s treated as a literal text search.

    For example, a search for “@.navigation-list li” on my blog finds the li items in elements assigned the “navigation-list” class:


    Search Results

    The matching items are highlighted in the HTML (or CSS) tab and the first match outlined in the browser window.

    Outline Elements

    If you want to quickly survey a page to find a category of element, use Tools –> Outline Elements (CTRL+O):

    Outline Elements

    Add elements and/or selectors (and colors) and they’ll be outlined in the browser window:

    Outline Elements Dialog

    For example, the two selectors enabled above outline all images and non-local links:

    Effect of Outline Elements

    Unlike search, Outline Elements affects only the main browser window, and does not highlight matches in the HTML tab.  However, your choices will be highlighted on all pages you visit while the F12 Tools are open.

    Working with HTML

    Now that you’ve found the content, the HTML tab will let you review, change, and save changes to your page.

    Any existing attribute can be edited, and new ones added by right-clicking the element and choosing “Add Attribute”.  You can also edit the HTML directly by clicking Edit Edit (CTRL+E).

    HTML tab

    Content changes modify only your local view, so you’ll need to update your site manually. You can click Save Save to save HTML or CSS files, but a handy way to isolate a change is the Element Source with Style button Element Source with Style (CTRL+T).  It shows the markup focusing on that element, plus any applied CSS styles.

    You can also view just the DOM either for the page or just an element via the View –> Source options:

    View Source

    In the CSS section next, we’ll cover the details shown in the panes on the right-hand side of the HTML tab, but note that while most nodes deal with CSS, the Attributes node applies to both CSS and HTML attributes.

    Note: The HTML display reflects changed attributes and edited HTML, but if script changes the page structure, refresh the HTML tab by clicking Refresh Refresh or pressing F5 (make sure the HTML tab has focus, or the main page will refresh, losing any changes you’ve made.)

    Working with CSS

    Now that you know how to work with HTML, let’s focus on styling with CSS.  You’ll find the F12 Tools are great for diagnosing style issues (e.g. “Now why is that text red?!”).

    When elements are selected in the HTML tab, the right-hand pane displays the Style view by default:

    HTML Tab - Style

    This view shows all styles that apply to the current element, organized by style.  You can see which attributes have an effect and which aren’t used (indicated by strikethrough font) because they are overridden by another style.  Click the checkboxes next to each to see the result of enabling/disabling the style or attribute.

    Trace Styles takes a different approach, displaying by attribute rather than style.  I find it the fastest way to discover why a particular effect/setting is being used.  For example, to find why text is a certain color, expand the color attribute and you’ll see the various styles that set the color, and which has “won”:

    HTML Tab - Trace Styles

    As with Style, you can check/uncheck settings to determine their effects.

    Layout is a graphical representation of the size, offset, margin, border, and padding for a given element.  It is editable, so you can modify layout directly here.

    HTML tab - Layout

    Attributes shows all attributes for the selected element, including HTML and CSS.  You can edit and add attributes as you wish, with a full drop-down list of attributes as guidance:

    HTML Tab - Attributes

    You can also click “Show Read-Only Properties” to see all attributes for that element.  Read-only attributes will be listed in gray.

    CSS Tab

    The CSS tab displays current CSS classes and styles, allowing you to view specific CSS files in use by the page, make changes, and search.

    Select from the available stylesheets for the page, and you’ll see the styles driven by that document.

    CSS Tab - Selecting Stylesheet

    You can modify styles directly in the tab, and right-click to create or delete rules and attributes:

    CSS Tab - Modifying CSS

    And as described earlier, you can also use the Search box to find content in the selected stylesheet.

    Browser Testing

    Top of mind for many, especially when using HTML5 and CSS3, is making sure a site works and looks good in other browsers that might be used to access your site.

    A good way to do this is to have the F12 Tools simulate being another browser and/or version.  On the right side of the menu, you’ll see options to change the Browser Mode and Document Mode:


    It’s important to know the difference between these, so here we go...

    Browser Mode

    While Browser Mode sets default Document Mode (we’ll get to that next), it more importantly also changes the UA (user-agent) string sent by IE to the web server.

      Browser Mode

    For example, you could tell the website that you are running Internet Explorer 7.  If the server cares about this (via conditional logic or controls), it might send you different content tuned for IE7.  Of course, for static content, this setting will have no effect on what is sent by the website.

    Keep in mind that the content itself might have logic that depends on the UA string, such as reacting to certain browsers/versions (e.g. “If Internet Explorer < 8, do this, else…”)

    As mentioned, Browser Mode also sets Document Mode to the default choice for that browser (e.g. IE7 standards mode for IE7), but you could set these independently (e.g. IE9 Browser Mode w/ IE8 Standards Document Mode).

    Document Mode

    Unlike Browser Mode, Document Mode changes the way content is processed locally by Internet Explorer itself.

    Document Mode

    In other words, regardless of what you tell the server via Browser Mode, this sets how IE will process and display the received content.  For example, if you are working in IE9 on a page using HTML5 features, you can switch to IE7 or IE8 mode to see how that same content would be rendered for users of those versions.

    The best way to learn these is to try them, especially on a page that offers features not supported in an earlier version of Internet Explorer or has logic that depends on the UA string.

    For more details on all of this, see Testing Browser and Document Compatibility Modes with the Developer Tools and Defining Document Compatibility on MSDN.

    Change User Agent String

    If you want to change the UA string beyond the default entries in Browser Mode, use Tools –> “Change user-agent string”:

    Change user agent string

    You can choose one of the built-in UA strings, or define your own by clicking “Custom…”.  In the image above, I have a custom UA string for a mobile device.

    Remember that this has no effect on the Document Mode used to process the content, and is only a signal to the website/page that you have a particular browser/version.

    Expression Web SuperPreview

    Expression Web SuperPreviewWhile you can change the UA string as you wish, it can be important to see and compare how a page actually renders in different browsers beyond.  Short of having all of those browsers (and OS versions) at your disposal, Expression Web SuperPreview can help.

    There is a trial version and a full version that offers Remote Browsers, enabling rendering of pages on browsers you may not have (e.g. Safari 5 on a Mac).

    See the end of my article “HTML5, CSS3, and More with Expression Web 4 SP1” for details on SuperPreview.

    Next: Part 3

    In the next article, we’ll begin diving into JavaScript, using the F12 Tools Console and Script tabs to debug your scripts.


  • Chris Bowen's Blog

    List of HTML5 Presentation Resources


    I’ve been running sessions on HTML5, Internet Explorer 9/10, CSS3 and more at recent Web Camps, Code Camps, and user group meetings.  Many resources are shown or mentioned in those sessions, so I’ve compiled a list of them for you here.

    I hope you find these useful!


    • HTML5 at W3C – Specifications and learning materials
    • HTML5 W3C Logo – HTML5 and related logos
    • HTML5 LabsHTML5 Labs – Prototypes of early web specifications (e.g. IndexedDB, FileAPI, etc.)
    • – Articles and information on web development
    • – Details support by browser for HTML5, CSS3, and other technologies
    • Modernizr – HTML5 & CSS3 feature detection made easy
    • HTML5 Cross Browser Polyfills – Shims, polyfills helpful for implementing features while supporting a range of browsers
    • HTML5 Boilerplate – An HTML5 template. Useful also as a reference.
    • Initializr – HTML5 template builder
    • Yepnope.js – Conditional resource loader that utilizes asynchronous calls

    HTML5 Sample Applications/Sites

    Internet Explorer


    Canvas & SVG

    • Canvas PadCanvas Pad – Great way to see/learn canvas capabilities
    • Easel.js – A library to help create HTML5 Canvas graphics
    • UN Systems Org Chart – SVG example showing effects of zooming
    • SVG-Oids – SVG game example (Fire up the F12 dev tools with this one)
    • Raphael – A library to help create vector graphics - SVG/VML

    Microsoft Web Platform


    Presentation Slides

    And finally, here are slides I’ve used at some point for various presentations. 

    • SkyDrive folder share.  Contains:
      • HTML5 and Friends
      • HTML5 Web Camp – Graphics and UI with CSS3, SVG, and Canvas
      • HTML5 Web Camp – Practices and Adoption Techniques

    My teammate Rachel Appel has posted materials from her HTML5 Web Camp sessions as well.


  • Chris Bowen's Blog

    Game Development with Construct 2 – Templates for Windows 8


    Construct 2As you consider your Windows 8 game development options, have a look at Construct 2 by Scirra.  It helps you create games quickly, providing a visual, no-coding-required experience supporting a number of platforms, including the Windows Store and Windows Phone.  (And behind the scenes, games are based on JavaScript and HTML5!)

    Getting Started with Construct 2

    There’s a free version of Construct 2 available (just read the terms so you know what’s supported) and plenty of resources to help you learn:


    Game Templates

    When you create a new project, you’ll see many helpful options, from simple examples to full games with walkthroughs.  Nine of these (named “Template: …”) are game starters, including platformer, driving, turret defense, and other types of games.  You should try each of them and look through them to see how they work.

    Windows 8 Game TemplatesConstruct 2 supports publishing Windows Store games, but you need to support a few things, so I’ve extended the nine included game templates with features like the Windows 8 object, a “Pause" layer, snapped view support (with game pause), touch support, and some project property updates.

    Game Templates for Windows 8

    With thanks to Scirra, here are the 9 templates, available on GitHub:


    Download all templates as a ZIP, or get individual templates below, just click the link and choose “View Raw”, which will let you save the template.

    Game Description Screenshot
    (click “View Raw” and save)
    Side-scroller with player constantly running, having to jump between platforms. Auto-Runner
    Driving Game
    (click “View Raw” and save)
    Top-down driving around a track with bordering objects. Driving Game
    Infinite Jumping
    (click “View Raw” and save)
    Vertical game where player automatically jumps and must reach new platforms. Infinite Jumping
    Physics Catapult
    (click “View Raw” and save)
    Fire catapult at structures with physics behaviors for impact/gravity. Physics Catapult
    Physics Puzzle
    (click “View Raw” and save)
    Click/touch objects to remove to clear puzzle. Physics Catapult
    (click “View Raw” and save)
    Jump between a variety of platforms (static, moving, one-way). Platformer
    Top-Down Shooter
    (click “View Raw” and save)
    Top-down view, move player and fire at targets. Top-Down Shooter
    Turret Defense
    (click “View Raw” and save)
    Add turrets to maze to fire on targets as they pathfind to their goal. Turret Defense
    Vertical Shooter
    (click “View Raw” and save)
    Vertically-scrolling game player and targets both moving and firing. Vertical Shooter

    Publishing Your Game

    After you select a template, you’ll want to customize the game to your liking with new images, mechanics, sounds… whatever you can imagine!  When you’re ready to publish to the Windows Store, just follow these steps.

    Keep the Cash OfferAnd with each game you publish, you can earn money with the Keep the Cash offer through June 30, 2013!

    Enjoy!  And drop me a line if you find these useful or have any recommendations to make them more helpful.


  • Chris Bowen's Blog

    Introduction to JavaScript Animation and Windows 8 Games


    Unless you’re aiming for the next great text-only game, chances are something’s going to move in your game. From ships and planets to fireballs and monsters, what are some ways to get them going?

    How Will You Start the Show?JavaScript-based games in Windows 8 can take advantage of many different options.  Here are some of them:

    • Animate DOM elements with JavaScript and CSS
    • Animate DOM elements with new CSS3 features
    • Animate what’s drawn in SVG
    • Animate what’s drawn to a <canvas> element
    • Use the WinJS.UI.Animations library
    • Use one of many animation frameworks

    We’ll take a look at each of these, but first it’s important to know game loop options.

    The Game Loop

    To get things going, you need code that handles input, updates game state, and draws/moves things. 

    You might think to start with a for loop, and move something across the screen.  E.g.:

        for (i = 0; i<10; i++){
            smiley.x += 20;

    What happens logically:

    What the user actually sees:

    You’ll probably just see the item popping instantaneously to the final location.  Why?  The interim positions will change more quickly than the screen will update.  Not the best animation, is it?

    Later, we’ll get to CSS features and animation frameworks that offer ways to chain animations with logical delays (“move this here, wait a bit, then move it there”), but in the meantime, let’s leave the for loop behind…

    SetInterval & SetTimeout

    Generally, game loops work by calling a function repeatedly, but with a delay between each call.  You can use setTimeout to do something like this:

        function gameLoop() {
            // Update stuff… 
            // Draw stuff…     
            setTimeout(gameLoop, 1000/60);  // Target 60 frames per second       

    Just point setTimeout to the function to call and how long (in milliseconds) to wait.  Closely related, setInterval also waits then calls a function, but automatically keeps calling the function until canceled. 

    Using requestAnimationFrame

    But there’s some trouble in setTimeout/setInterval paradise. 

    They work by setting a fixed amount of time between loops, but what if the system isn’t ready to draw an updated frame?  Any drawing code executed is wasted because nobody will see the update.

    There’s now a more efficient way - requestAnimationFrame.  Instead of specifying how long until the next iteration, requestAnimationFrame asks the browser to call back when it’s ready to display the next frame.  For a demonstration, see the requestAnimationFrame example (and the Windows SDK sample):


    Important: to benefit from requestAnimationFrame, you should separate your state-updating code from your visual rendering/drawing code.  Update can continue use setTimeout to run consistently to keep the game going - process input, update state, communicate, etc. - but rendering will run only when necessary via requestAnimationFrame.

    Like setTimeout, requestAnimationFrame needs to be used once per callback.  With a separate render loop, you might have something like this:

        function renderLoop() {       

            // Draw stuff…      

    [Here, I’m using a tip from Martin Wells’ Sprite Animation article that putting requestAnimationFrame before drawing code can improve consistency.]

    Note that if you’re creating a browser-based (vs. Windows Store) game, you’ll want to check for vendor-specific prefixed requestAnimationFrame implementations (e.g. window.msRequestAnimationFrame).

    That’s a basic introduction, but there’s more to game loops that you should look into: loop coordination techniques, integrating event-driven updates, and different ways to compute how much to change in each iteration of the game loop.

    Basic DOM Element Animation

    One way to create HTML games that generally work well across browsers and without plugins, is to use a bunch of DOM elements (<div>, <img>, etc.) and move them around. Through some combination of JavaScript and CSS, you could animate and move things around the browser.

    Let’s take a look at how this applies to a Windows Store game. 

    Start Visual Studio 2012 and under JavaScript Windows Store templates, create a game with the “Blank App” template.  Add any image to the game’s images folder, then and add it via an <img> tag to default.html:

            <img id="smile" src="images/Smile.png"

    Set some starting CSS in /css/default.css:

        #smile {
            border:4px solid #000;

    Now we can write some basic animation in /js/default.js.  First add the highlighted to the existing args.setPromise line:


    Now, add a variable, init function to start things, and gameLoop to animate things:


    Give it a run, and prepare to be amazed!


    DOM element animation is time-tested and still a perfectly viable option for many situations.  However, more options have emerged since then, so, onward!

    Animation with CSS3

    The latest features in CSS3 (aka “CSS Module Level 3”) offer 2D and 3D ways to change and animate presentation styles defined for DOM elements.  These approaches can be both concise and easy to maintain.

    CSS3 Transitions

    Transforms (both 2D and now in CSS3, 3D) can change appearance of an item – Transforms to rotate, scale, move (called “translate”), and skew (think stretch or italics and you won’t be far off), but they simply change from one state to another.

    Transitions can help you animate the presentation changes from state A to B, simply using CSS.  See the Hands On: transitions sample:


    Our above DOM element example could be modified to apply a style with a transition over 4 seconds.  Something like this:

        left: 500px;
        top: 500px;
        transition:4s linear;

    CSS3 Animations

    Transitions are very useful, but support only a single timing function.  Animations introduce keyframes, which allow multiple timing functions to control animations.  Also, Animations are explicitly called (vs. Transitions, which trigger implicitly.) 

    See the Hands On: animations sample:


    See Also:

    Animation with SVG

    SVG (Scalable Vector Graphics) support using markup and/or code to define shapes that retain clarity/definition as they are scaled.  SVG can even utilize styles defined in CSS, making them even more flexible.

    Because the individual components of an SVG composition are themselves DOM elements, this is technically a special case of the DOM elements approach, so many of the same techniques apply. 

    Some examples (don’t forget, View Source is your friend): SVG-oids, SVG Dice, and SVG Helicopter.


    SVG is a powerful option, but when should you use it, and how does it compare with using canvas? See How To Choose Between SVG and Canvas.

    See also:

    Animation on a Canvas

    Support for <canvas> across many browsers has made it a great option games.  Though you can add a canvas via HTML (or dynamically with JavaScript), canvas is driven entirely by JavaScript, so creating animations is a matter of knowing what you’re drawing and where, and modifying over time with JavaScript.

    New to canvas?  Try the ”drawing to a canvas” Quickstart.

    Let’s use canvas in a new example.  Create a new Blank App project and add a <canvas> element to default.html:

            <canvas id="gameCanvas" height="800" width="800"></canvas>

    Because JavaScript is the only way to “talk” to the canvas, we’ll focus on /js/default.js for the rest.  Add a pointer to init() like above, then the function:


    Because canvas uses immediate mode graphics, it’s not as simple as creating an object and moving by setting location properties (like you can with DOM and SVG animation.)  So, canvas-based games will typically create JavaScript classes for things to be tracked and displayed, then update logic simply sets properties (x, y, etc.) on those instances, which the render loop dutifully draws to the canvas. 

    Here’s what you should see when you run the “game”:


    Of course, there’s a lot more to canvas and canvas animation than that.  Canvas can work with images, video, animations, gradients and much more.  For details, see the Quickstart and ”How to animate canvas graphics", and for demos see Canvas Pad and Canvas Pinball:



    Also, there are a number of libraries available to make working with canvas easier, for example EaselJS, which we’ll get to a little later.

    Animating Windows Store Games with WinJS

    The Windows Library for JavaScript (WinJS) contains helpful namespaces and classes to create animations in an efficient and reliable way.

    For example, you can use WinJS.UI.executeTransition to activate one or more CSS transitions.  Our earlier DOM element example could become:


    Even more useful, there’s a full library of animations available in WinJS.UI.Animation, including animations for:

    • Adding/Removing content
    • Transitioning & navigating
    • Dragging & dropping
    • Selecting content
    • et al.

    These are most frequently helpful with Windows Store apps, but games can benefit as well.  To see some in action, try the HTML animation library sample from the Windows SDK:


    See Animating your UI to learn more.

    Using Animation Frameworks

    Just as we saw with JavaScript physics engines in an earlier post, there are many frameworks out there that can make many of common scenarios easier.  Anything that can save time and effort is worth some research. 

    There are many out there, but here are a couple to get you thinking.

    jQuery & jQuery.animate()

    imagejQuery is an JavaScript library that helps make common tasks easier (and reliably cross-browser). 

    Among the many things you’ll find in jQuery, the jQuery .animate() method has many features that can apply to game animation.

    With jQuery.animate, our “smile” example could be written as:

        left: '+=500',
        top: '+=500',
        }, 4000);

    A jQuery selector is used to find the smile element, then the animate method will adjust the left and top CSS properties, increasing each by 500 pixels over 4 seconds.

    For some interesting examples/tutorials, see "13 Excellent jQuery Animation Techniques" on WDL.

    CreateJS: Animation with EaselJS & TweenJS

    imageCreateJS is a family of JavaScript libraries and tools to help make things from canvas, sound, loading, to animations easier.

    I introduced using CreateJS for Windows Store Games in an earlier post.  If you’re new to CreateJS, have a look.  As the post details, EaselJS can make using canvas for games much easier.  It also supports features like SpriteSheet, which uses multiple pictures of the same object to create animations, such as a character running:


    However, another CreateJS library, TweenJS, is especially relevant to any discussion of animations. 

    You can use TweenJS to animate objects’ values and CSS properties.  It also offers a chained syntax, where you can specify animations as steps with delays and other connections to relate them.


    Like CSS Transitions and Animations, TweenJS also supports easing functions to control the rate of change of each animation.

    Game Engines

    Not only are there more animation frameworks out there, but there are game-related frameworks as well.  I’ll probably dedicate a post to this later, but some examples are Crafty, melonJS, Akihabara and more.

    A great directory of what’s out there is the Game Engines list on GitHub.

    Also see Bob Familiar’s “Windows 8 Game Development for the Win” list of various game tools and frameworks (free and commercial) that can lead to Windows Store games.

    Let’s Get Moving!

    Ready to dive in?  Here are a few more references to get you started.

    Enjoy, and good luck!


Page 1 of 23 (458 items) 12345»