Chris Bowen's Blog

Development Practices, Tools, Technology, and Community

Posts
  • Chris Bowen's Blog

    HTML5 Game Development Resources

    • 0 Comments

    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 gskinner.com.  Used in some of the demos during the session. 
    • Akihabara Tutorials – A nice tutorial series by Boston locals Darren Torpey and Darius Kazemi


    Audio


    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


    Webcasts

    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

  • Chris Bowen's Blog

    Index of Silverlight Games (Most with Source)

    • 7 Comments

    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.

    -Chris

    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

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

    • 0 Comments

    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.

    Errors

    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
    • console.info – Informational message
    • console.warn – Warning message
    • console.error – Error message
    • console.assert – Emit message only if a condition fails

    Also:

    • 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

  • Chris Bowen's Blog

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

    • 0 Comments

    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

  • Chris Bowen's Blog

    Got Tech Posters?

    • 14 Comments

    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:

    Enjoy!

    -Chris

  • Chris Bowen's Blog

    Save the Dates: Code Camp 7 - Deer in Headlights

    • 12 Comments
     

    [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

  • Chris Bowen's Blog

    Internet Explorer 9: Pinned Site Shortcuts vs. Internet Shortcuts

    • 1 Comments

    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

  • Chris Bowen's Blog

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

    • 0 Comments

    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:

    image

    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.

    Conclusion

    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

  • Chris Bowen's Blog

    The Top 10 Windows 8 Secrets of App Success

    • 0 Comments

    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 http://aka.ms/apps

    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 http://aka.ms/apps.  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 http://windowsuserexperiencetraining.com.

    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

    HTML5, CSS3, and More with Expression Web 4 SP1

    • 1 Comments

    imageIf you’re designing for the web (especially with HTML5 and CSS3), take a look at Expression Web 4, a design-focused environment for HTML, CSS, validation, SEO, and more.  See “Top 10 Features” for an introduction.

    Expression Web 4 Service Pack 1 has just been released, adding a bunch of new features:

    • HTML5 – Code Editor IntelliSense and Design View support
    • CSS3 – Property IntelliSense and new tooling support
    • New SuperPreview Features – Online service, Interactive pages, and Internet Explorer 9 support
    • Expanded PHP Support – PHP 5.3 and PHP module IntelliSense, PHP version-aware tooltips, and “Open as PHP” feature.
    • And of course various fixes and tweaks

    Let’s dive into the first three items in this post.  The Expression Web team blog has a detailed post on the release, and there’s a What’s New page as well.

    HTML5 Support

    While some HTML5 support was available via add-ins prior to SP1, SP1 directly integrates support for all HTML5 tags.  For example, semantic elements like article and aside:

    HTML5 IntelliSense

    Expression Web will flag HTML5 schema violations in real time:

    HTML5 Schema Validation

    And you can run the Compatibility Checker (Tools –> Compatibility Reports) for a detailed report:

    Compatibility Checker

    Notice the hr element’s size attribute, deprecated in HTML5, has been flagged:

    Compatibility Report

    CSS3 Support

    CSS3 support includes IntelliSense and error checking for the CSS3 draft specification.  To enable this, open the Authoring tab in Tools –> Page Editor Options and ensure the CSS Schema is set to “CSS 3 draft”:

    Authoring Options  Setting CSS Schema

    You’ll have IntelliSense for new CSS3 properties like pseudo-classes and pseudo-elements:

    CSS3 IntelliSense

    And by the way, IntelliSense goes beyond listing text:

    IntelliSense for colors

    CSS3 also extends to tools like the New/Modify Style dialog (including border-radius and box-shadow):

    Modify Style dialog

    CSS Properties is CSS3-aware as well.  For example, here are CSS3 border-radius and box-shadow properties, along with an HSL color model:

    CSS Properties

    SuperPreview, Now with More Super

    A constant challenge for web developers is seeing how a page renders in different browsers.  The problem is, a single machine often can’t run all of the browsers (and multiple versions of the same browser) a designer wants to test. 

    SuperPreviewPart of Expression Web, SuperPreview makes that easier.  Fire up a web page and compare how it renders in multiple browsers, including Internet Explorer 9:

    SuperPreview

    Here’s an overview of SuperPreview features to get you started.  But let’s focus on what’s new…

    Page Interaction Mode

    Page Interaction ModeSome pages you’ll want to test require a user to log in. The new Page Interaction Mode (CTRL+I) adds support for many of these login-protected pages. Just turn it on then head to the page and log in.

    SuperPreview Online Service

    Online ServiceAdditional browsers are available remotely via the SuperPreview Online Service.  This service renders pages for you so you don’t need to install additional browsers/versions to compare results. 

    View the Online Service status to see which browsers/versions are available:

    Online Service Status

    Expressing Yourself

    Expression Web 4Now that you’ve seen all of this, how do you get Expression Web 4?

    Then head to these places to learn more:

    Enjoy creating those designs!

    -Chris

  • Chris Bowen's Blog

    List of HTML5 Presentation Resources

    • 3 Comments

    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

    • 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.)
    • ScriptJunkie.com – Articles and information on web development
    • CanIUse.com – 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

    CSS

    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

    Tools

    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

  • Chris Bowen's Blog

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

    • 0 Comments

    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

    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:

    Menu

    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

  • Chris Bowen's Blog

    Internet Explorer 9 Developer Tools Deep Dive – Part 1: Introduction

    • 0 Comments

    Internet Explorer 9In this series, we’ll take a detailed look at the Developer Tools included in Internet Explorer.  They can be used to inspect page structure, improve design, debug scripts, optimize page and network performance, and much more.

    BTW, much of this content is covered in my screencast for The Code Project Virtual Summit on HTML5/CSS3 (available for free).

    Getting Started

    The F12 Developer Tools are a standard feature of Internet Explorer (no need to install anything else), so just make sure you’re running IE8, IE9, or the IE10 Platform Preview.  Head to these sites to learn more and download IE:

    Running the Developer Tools

    Easy enough – just press F12 or choose Tools-> “F12 developer tools” to start.

    Launching the Developer Tools

    The Developer Tools

    Detach Window You can either run the tools attached in the browser or press the double window icon at top right to detach for a second monitor or to use side-by-side with the browser.

    Tools and Browser Side-by-Side

    • Tip: On Windows 7, the Aero Snap keys are handy here – Windows Key + Arrow Keys.

    A Quick Tour

    Let’s take a quick tour of the main features, and we’ll delve into the details in the other posts.  There are six tabbed sections of features: HTML, CSS, Console, Script, Profiler, and Network.

    The HTML Tab

    The HTML tab is great for inspecting your page, setting values, and seeing the effects of CSS styling.

    HTML Tab

    The right-hand pane shows a per-element CSS summary (Style) and hierarchy/trace (Trace Styles), offers a visual layout tool (Layout), and a way to set custom attributes (Attributes).

    The 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.

    CSS Tab

    Combined with the right-hand panes on the HTML tab, there are a lot a ways to view and modify your CSS.  More details and advice for using these two tabs in Part 2 (HTML & CSS).

    The Script and Console Tabs

    The Script tab lets you work with script, setting breakpoints, debugging through code, and breaking on errors.

    New in IE9 is the ability to Format JavaScript, which can make even minified script files easy to read and debug.

    Script

    The pane at right features Console (supporting console.log() and other functions), Breakpoints, Locals, Watch, and Call Stack views. 

    New in IE9 is the Format JavaScript option, which can make even minified script files easy to read and debug:

    Format JavaScript

    The Console tab is much like the Console pane of the Scripts tab, offering a larger surface for viewing messages and executing script commands.  You’ll find more on this in Part 3 (debugging).

    The Profiler Tab

    The Profiler tab lets you analyze the execution of JavaScript.  Just “Start Profiling”, load a page and/or use page functionality, then click “Stop Profiling”.

    Profiler

    You’ll see a summary report showing functions, times called, time elapsed and more.  There is much more detail on using this feature in Part 4 (profiling).

    The Network Tab

    The Network tab is new with IE9, enabling the capture and analysis of network usage. 

    Network Report

    Like script profiling, just start capturing and load/use a page or pages.  You’ll see the requests made, results, response details, and timing.  Double-click an entry to see details:

    Network Request Details

    There’s a lot to cover here, so see Part 5 (network profiling and debugging) for details and techniques for using this feature.

    Menu Options

    Menu

    Color PickerDon’t forget to look through the many options in the various menus. For example:

    • Image and Link reports
    • Element outlining (tables, divs, etc.)
    • Cache management
    • Setting custom User-Agent (UA) strings (e.g. mobile)
    • Clear/view cookies
    • ValidationDisabling of script, CSS, and the pop-up blocker
    • Tools to resize the browser, measure items, and select colors
    • Page validation 

    You can also change Browser Mode and Document Mode

    We’ll dive into this in the next post, but the short version is Browser Mode can send different User-Agent (UA) strings, simulating different browsers to a server, and Document Mode changes the engine mode IE will use to render pages.

    Internet Explorer Resources

    Finally, here are some resources to get you underway:

    Stay tuned for more posts, and I hope you enjoy using the F12 Tools!

    -Chris

  • Chris Bowen's Blog

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

    • 0 Comments

    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:

    Search

    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

  • Chris Bowen's Blog

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

    • 10 Comments

    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

    Register

    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

    Tips from My Technical Presentations

    • 12 Comments

    My role involves spending a good deal of time with technical audiences.  Recently, I've been getting reactions like this - "I enjoyed your presentation!  I have an odd question - how did you zoom in like that?" or "How did you set those colors in Visual Studio?"

    So, I'm posting some tips so I can direct people here for more information. 

    1) Use ZoomIt for Screen Zooming

    ZoomItIt's never a good thing to feature content on your screen that the audience can't see.  It's frustrating for them, and hinders conveying the very message you're trying to present.

    Fortunately, there's a very easy answer.  For areas where you can't already have proper font sizes and colors (see below), use ZoomIt, a free tool from TechNet!

    Read my post on ZoomIt for details.

    ZoomIt is just great.  Obviously, you can zoom, but you can also draw lines, boxes, ellipses and text anywhere on the screen.  It also has a break timer you can use to quickly count down that break between your sessions.

     

    2) Change the Default "Highlight" Color in Visual Studio

    SelectedTextHighlight The default blue highlight for selected text in Visual Studio looks fine on a computer, but when projecting, selecting text can actually make it harder to read - it's likely that nobody past the first few rows can read what you've just selected.

    To fix this, go to Tools->Options->Environment->Fonts And Colors, then in the "display items" list, Dark Theme and Bright Highlightchoose "Selected Text" and change the background color to bright yellow or green (think highlighter) and the text to black.

     

    3) Use a Code Color/Font Scheme That's Easy to View

    This is clearly subjective, but I've found that changing the fonts and colors from the default results in code that's easier on the eyes.  Many people have told me they prefer this, nobody has said they had trouble with it.

    ImportExportSettingsI've uploaded the settings file for my colors and fonts to SkyDrive (see the above code picture for a preview.)  You can easily apply them to your own Visual Studio settings using "Tools->Import and Export Settings".  I'd recommend you back up your current settings using the Export option before trying this out.

    I use the Consolas font in Visual Studio, which you can download here.

    Also, check out Scott Hanselman's great post on alternate Visual Studio themes.

     

    4) Create Quick-Change Font Size Macros

    In Visual Studio, it's easy to create your own keybindings to IDE features.  FontMacrosI've added CTRL-SHIFT-[+/-] to mine which quickly increments or decrements the editor font size. 

    The screenshot at right shows the decrease font macro I've wired up.  Go to Tools->Options->Environment->Keyboard, then type "Font" into the Show Commands Containing textbox to find the font-related commands.

    Then you can just ask the audience if they can see, quickly bump the font a bit and you're good to go.

     

    5) Have Emergency Backup Plans... and Pictures... and Video

    MPj04005760000[1] Let's face it, sometimes demos don't work as planned.  Pilot error, beta software, phases of the moon - you need a contingency plan.  I'll typically run through my demos and take screenshots of the key points, adding them to the end of my presentation deck. 

    In some cases, you might even consider recording the whole demo, using a tool like Camtasia.  Play the video (without sound) and narrate what's happening for the audience.  Your audience will appreciate having content rather than watching you flail about, trying to diagnose a problem.

    This also applies to websites that you may want to show, should you find yourself without web connectivity.  Either save a local copy of the page (in IE, File->Save As->Web Archive, single file (*.mht)) or just take a screenshot.

     

    Hope you find these tips useful.  Do you have others?

    -Chris

  • Chris Bowen's Blog

    Metro Developer Opportunities This Week in New England

    • 0 Comments

    This week offers several excellent opportunities for Windows 8 and Windows Phone developers here in New England.

    MetroAcceleratorLabsMetro Accelerator Labs – Waltham, June 6-8

    As mentioned earlier, the Metro Accelerator Labs are coming to our Waltham offices on Wednesday through Friday (June 6-8).  It is a 3-day event focused on helping you create Windows 8 and Windows Phone apps with experts on hand to help you, whether you’re just starting or adding the finishing touches.

    We’ll have a brief dev/design session each morning (agenda here), but the focus is squarely on your apps and coding.  Bring your PCs, apps or app ideas, and get ready to develop!

    You can join us for as little or as much of the 3-day event as you wish.  Register here

    Ready.Set(){Code} Challenge – Waltham, June 7

    Ready.Set () {Code} Challenge  - Boston, MAOn Thursday (June 7th), the special Ready.Set(){Code} Challenge by Nokia Developer will also be running in the Waltham office.  Part of a 13-city tour, this is a great opportunity to create Windows Phone apps by yourself or by forming a team. 

    At the end of the day, you’ll have a chance to show your app and the best (in a number of categories) will be awarded prizes!

    Separate registration is required.  Note we’ll have two rooms this day, so both the Metro Accelerator Lab and Ready.Set(){Code} Challenge will be running concurrently.  Join in either as you wish!

    -Chris

  • Chris Bowen's Blog

    Game Development with Construct 2 – Templates for Windows 8

    • 2 Comments

    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
    Auto-Runner 
    (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
    Platformer
    (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

  • Chris Bowen's Blog

    New Windows 8 “Camp in a Box” and Virtual Labs

    • 0 Comments

    Two new resources have just been published to help you learn about Windows 8.

    Windows 8 “Camp in a Box”, RTM Edition

    [Update 10/1/2012 – Camp in a Box RTM version]

    Windows 8 Camp in a BoxRecently updated for Windows 8 Release Preview, the Windows 8 “Camp in a Box” includes a variety of content from the Windows 8 Developer Camp event series that’s now underway:

    • Session Slides – 20 presentations covering development and design topics
    • Hands-on Labs – Available in C# and JavaScript, covering topics such as touch, views, contracts (search/share), media, state, settings, tiles & notifications, and more.
    • Samples – Including HTML, XAML, and C++ versions of the “Contoso Cookbook” Metro style app as well as an HTML “Platformer” game.
    • Resources – Links to some useful sites

    After installing, you’ll find a “Default.htm” link on your desktop. Open it to get launch a content directory:

    ContentsLabsSamplesPresentationsResources

    Of course you can also open the directory where you installed the Camp in a Box, but the HTML interface is a friendly way to begin exploring.

    Windows 8 Release Preview Virtual Labs

    [Update 7/23/2012 – JavaScript labs now available!]

    Windows 8 Release Preview Virtual LabsThe “Camp in a Box” is great for downloading labs to work on your own machine, but there’s now another option as well...

    The Windows 8 Virtual Labs let you dive in and learn about Windows 8 development without having to install everything on your own machine.  It uses an ActiveX control to let you connect to a remote server where everything is configured and ready for you.

    You can work (in 90-minute segments – and yes, you can get more as you need) on this set of C# labs, all updated for Release Preview:

     

    There are now 8 JavaScript labs available as well:

     

    Enjoy!
    -Chris

  • Chris Bowen's Blog

    Windows Phone Development: A Quick Introduction

    • 1 Comments

    Windows phoneThis post is to help you get up to speed quickly with the Windows Phone 7 Series development announcements made today at MIX10.

    The great news is that applications can be written for Windows Phone 7 Series devices using regular Silverlight (Silverlight 4 RC is now available) and XNA.  No alternate or light versions here, so go ahead and leverage your existing experience.

    New to Silverlight?  Head to http://silverlight.net/learn, watch some videos, and try some hands-on labs.  A similar story for XNA – head to the XNA getting started page.

    In this post, I’ll focus on the Silverlight story (but those who know me realize I’ll cover the XNA view as well.)

    Installing

    image Head to the Windows Phone for Developers page and download the developer tools (be sure to review the release notes as well).

    The installer will take care of installing the free Visual Studio 2010 Express RC (it will update an existing install of an RC version), XNA Game Studio 4.0 CTP, Silverlight 4 SDK and Tools for Visual Studio 2010, etc.

    You can also create applications using Expression Blend 4 Beta as detailed in this post.

    A (Very) Basic Application

    Let’s keep things simple with this first application.  Start Visual Studio 2010 (Express or another RC version):

    VS2010 Start Page

    Click “New Project…”

    New Project

    Windows Phone Application is a basic template, and Windows Phone List Application is helpful if you’ll be using the List and Navigation controls.

    You can also create an XNA based game.  Click on the XNA Game Studio 4.0 tab and choose Windows Phone Game (4.0).  I plan to cover this in a future post.

    Choose Windows Phone Application:

    Windows Phone Application - Split View

    By default, you’ll see a split view with design and XAML surfaces.  You can make changes in either.  From the Toolbox, add a TextBox and Button, dragging/resizing to fit:

    Adding Controls

    Double-click the button, then in the generated button1_Click event in the code behind file, add code to update the list title:

    Button Click Event

    Now run it!  (Run Button (F5), or Debug –> Start Debugging).  The Windows Phone Emulator will start (left image) then load your application (middle image). Enter your name and click Button (right image):

    Emulator - Initializing Emulator - Application Loaded Emulator - After Button Click

    Congratulations, you have a Windows Phone 7 Series application! Sure, not a very interesting application, but I’m sure you’ll do much better.

    Debugging

    Debugging is basically the same story that you’re used to with other Visual Studio applications.  Set breakpoints (F9) and they’ll be hit when you use the application:

    Setting a Breakpoint

    Simple enough.  Step through, view locals, change values, add DataTips, etc.

    Windows Phone Emulator

    The Windows Phone Emulator lets you develop applications without a device and supports GPS simulation, rotation/orientation, skinning, GPU emulation, and more. 

    The emulator is default, but if you manage to track down a device, you can change this via the dropdown:

    Device Selection

    Emulator OptionsNote that you can modify the emulator with a few options.  They are, in order:

    • Close (see next)
    • Minimize
    • Rotate counterclockwise
    • Rotate clockwise
    • Zoom / Reset Zoom
    • Settings (zoom from custom % to fit to screen)

    Rotating the emulator shows how your application will look when the orientation (accessible via Page.SupportedOrientations) changes:

     Orientation

    You might close the emulator, and you’ll get a dialog:

    Emulator - Close Warning

    If you’re planning to change code and rerun the application several times, it’s faster to leave the emulator open and instead stop the application through Visual Studio.  This way the emulator won’t need to load and initialize each time.

    Learning More

    Your first application done, it’s time to learn more:

    Enjoy creating those applications!

    -Chris

Page 1 of 23 (458 items) 12345»