Chris Bowen's Blog

Development Practices, Tools, Technology, and Community

Posts
  • Chris Bowen's Blog

    New Boston Developer Group! Beantown ALT.NET

    • 0 Comments

    imageOn the heels of the launch of the New England Mobile .NET group, there’s another Boston-area developer group – Beantown ALT.NET!  The group is organized by John Zablocki and starts in September.

    First of all, what’s “ALT.NET”?  The concept has been around quite a while, and there are groups in many other cities.  In fact, click through to NY ALT.NET or DC ALT.NET for a good description.  John also has a post describing “Why Beantown ALT.NET?

    First meeting’s details:

        Beantown ALT.NET
        September 28th, 6:30 PM
        Microsoft NERD
        1 Memorial Dr., Cambridge, MA
        Topic: “HTML5 Practices and Adoption”
        Speaker:  Well, me…

    John kindly invited me to speak for this meeting.  We’ll go beyond the “What is HTML5?” introduction to focus on practical strategies, tools, libraries, etc. for adopting HTML5 technologies today, while accommodating browsers that don’t natively support those features.

    On October 26th, John will be covering “.NET and NoSQL: Relaxing with CouchDB”. 

    I hope to see you there!

    -Chris

  • Chris Bowen's Blog

    New England Code Camp 16 – October 29th – Save the Date!

    • 1 Comments

    Code CampI’m happy to pass along word that the date is set and venue reserved for the 16th New England Code Camp, a free, full day of knowledge sharing and networking, driven by developer community volunteers.

    New England Code Camp 16
    Saturday, October 29th, 2011
    Microsoft
    201 Jones Road, 6th floor
    Waltham, MA

    Never been to a Code Camp? To get an idea of what to expect, take a look at the schedule for Code Camp 15, held earlier this year.

    Food...Code Camp SessionCode Camp Session

    Registration and the Calls for Speakers and Sponsors will be coming later, but in the meantime, mark your calendar and get ready to join hundreds of your fellow developers for this great community event!

    -Chris

  • Chris Bowen's Blog

    New Boston User Group – New England Mobile .NET Developers

    • 0 Comments

    There’s a new developer group forming in the Boston area, focusing on cross-platform development for mobile devices.  Topics will include mobile devices (iPhone, Windows Phone 7, Android, etc.) and development, .NET, Mono, and frameworks like MonoTouch and beyond.

    First meeting:

        New England Mobile .NET Developers’ Group
        August 24th, 6PM
        Microsoft NERD
        Cambridge, MA

    The group is organized by Mike Bluestein, who has spoken at area events like Code Camps and is author of Learning MonoTouch.

    See you there!

    -Chris

    P.S.  Focusing on Windows Phone development, there’s also the Boston / New England Windows Phone User and Developer Group, meeting monthly in Waltham, hosted by Don Sorcinelli and Steve Hughes.  (Next meeting, August 17th.)

  • 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

    More Microsoft HTML5 Web Camps Coming Soon!

    • 0 Comments

    Microsoft Web CampsThe Microsoft HTML5 Web Camps are free, full-day events to help you get up to speed with HTML5 and related web standards. 

    After the popular events in Massachusetts & NYC in June, Rachel Appel, G. Andrew Duthie and I will be running six more Web Camps in August and September:

    They’re all listed on the MSDN Events site and will soon be on the Microsoft Web Camps site as well.

    What’s Being Covered?

    Over the course of four sessions, we’ll introduce you to the next wave of web standards including HTML5, CSS3, ECMAScript5, SVG, and more:

    • HTML5
      • Semantic Markup, Audio, Video, Canvas, Geolocation, and more
    • Cascading Style Sheets, Level 3 (CSS3)
    • Scalable Vector Graphics (SVG)
    • ECMAScript5 and scripting techniques
    • Internet Explorer 9
      • Standards support and testing
      • Performance
    • Present and future of web standards
      • Internet Explorer 10
      • Emerging standards (e.g. WebSockets, IndexedDB, etc.)
    • Developer options and tools
      • Libraries
      • IE9 Developer Tools
      • Visual Studio 2010 and Expression Web 4

    We’ll also show you techniques and frameworks to help you get started today while still offering good experiences for non-modern browsers.

    Hope to see you at the Web Camps!

    -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

    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

    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

    Developer Events in the Northeast – Early Summer, 2011

    • 0 Comments

    Welcome to summer!  Though beaches, ice cream trucks, and vacations await, the developer community marches on, so here’s a look at events in the northeastern U.S. for the first part of the season. 

    As always, if you know of other (free or nearly free) developer-focused events, please let me know.

    -Chris

    Connecticut

    July 5
    Agile Connecticut - Farmington, CT

    July 11
    Hartford Area Build Guild – Farmington, CT
    “Web People + Adult Beverages + High Fives”

    August 2
    Agile Connecticut - Farmington, CT

    August 8
    Hartford Area Build Guild – Farmington, CT
    “Web People + Adult Beverages + High Fives”

    Schedule TBD
    Connecticut .NET Developers Group – Farmington, CT
    Connecticut DotNetNuke User Group - Bethany, CT
    Fairfield/Westchester .NET User Group – Stamford, CT
    Fairfield/Westchester SQL Server UG - Stamford, CT
    Hartford SQL Server Users Group – Farmington, CT
    New England Silverlight Guild – Hartford, CT

    Maine

    June 23
    Maine Bytes User Group - Portland, ME
    “Azure State of the Union” – Ben Day

    June 28 
    Maine Developer Network - Augusta, ME
    HTML5: Intro, graphics (CSS, SVG, Canvas), and practices/adoption – Chris Bowen

    June 28
    Bangor Area .Net Developers (BAND) - Bangor, ME
    HTML5, IE9 & 10, and More – Chris Bowen (Yes, I’m also presenting in Augusta, but that’s during the day Smile )

    July 26
    Bangor Area .Net Developers (BAND) - Bangor, ME

    CodeCampJuly 29 – 31
    Maine Code Camp 2 – Mt. Blue State Park, Weld, ME
    Escape from the office with fellow developers for a weekend of actual, honest-to-goodness camping and tech!

    Schedule TBD
    Agile User Group – Portland, ME
    Usability / User Experience User Group – Portland, ME
    Web Designers User Group – Portland, ME (on Summer break)

    Massachusetts

    June 22
    Boston XNA Developers Group - Waltham, MA

    June 22
    Agile Boston User Group - Waltham, MA
    “Agile Coaches Panel Presentation”

    June 22
    Boston Front End Developers – Cambridge, MA

    June 23
    Boston Azure User Group – Cambridge, MA
    “Rock, Paper, Azure Challenge” – Hands-On in-the-Azure-cloud Game Challenge

    June 23
    Boston Web Performance Group – Boston, MA
    “Powering Up Your Code with High Performance CSS and HTML5” – Tim Wright

    June 23
    Refresh Boston – Cambridge, MA
    “Hopping on the Bandwagon: Branding & Marketing for Smallish Businesses” – Fred LeBlanc

    June 25
    Hack/Reduce Boston Hackathon – Cambridge, MA

    June 29
    Worcester Web Technology – Worcester, MA
    “Intro to Ext JS 4”

    June 30
    Boston JavaScript Meetup – Cambridge, MA
    “Sencha Ext & Sencha Touch” – Aaron White

    June 30
    UX Book Club, Boston – Cambridge, MA
    “Christopher Alexander: The Timeless Way of Building”

    June 30
    Lean Startup Circle Meetup – Cambridge, MA

    July 7
    New England Visual Basic Professionals - Waltham, MA
    “Identify & Fix Performance Problems with Visual Studio Ultimate” – Ben Day

    July 7
    HPC & GPU Supercomputing Group of Boston – Cambridge, MA

    July 11
    New England F# User Group – Cambridge, MA
    “F# Type Providers” – Keith Battocchi

    July 12
    Build Guild – Salem, MA
    “Web People + Adult Beverages + High Fives”

    July 12
    DotNetNuke Boston Meetup – Cambridge, MA

    July 13
    Boston Area SharePoint Users Group – Cambridge, MA
    “SharePoint 2010 Usage and Adoption Best Practices” – Scott Jamison

    July 13
    jQuery Boston Meetup – Boston, MA
    “Web Mapping with Geomap, a jQuery Plugin” – Ryan Westphal

    July 13
    Boston PHP – Cambridge, MA
    “Learn the Secrets of SEO (Search Engine Optimization)”

    July 14
    Worcester Web Technology – Worcester, MA

    July 19
    Boston New Technology Meetup – Cambridge, MA

    July 20
    New England Windows Phone User and Developer Group - Waltham, MA
    Summer of Mango: “Developing Windows Phone 7.1 Structured Storage Applications”

    July 20
    Boston .NET Architecture Study Group - Waltham, MA

    July 20
    HTML5 Game Development Meetup – Boston, MA

    July 20
    New England ASP.NET Professionals – Waltham, MA

    July 20
    Boston Arduino Users Group – Cambridge, MA

    July 27
    Boston XNA Developers Group - Waltham, MA

    July 28
    Boston Azure User Group – Cambridge, MA

    August 9
    DotNetNuke Boston Meetup – Cambridge, MA

    August 17
    New England ASP.NET Professionals – Waltham, MA
    “Intro to HTML5” – Chris Bowen

    August 17
    Boston .NET Architecture Study Group - Waltham, MA

    August 17
    HTML5 Game Development Meetup – Boston, MA

    August 17
    Boston Arduino Users Group – Cambridge, MA

    August 17
    Worcester Web Technology – Worcester, MA

    August 18
    Western Mass Microsoft Technology Users Group - Agawam, MA
    “ASP.NET MVC3 and Razor” – Chris Bowen

    Schedule TBD
    Beantown .NET User Group - Cambridge, MA (On Summer break)
    Boston .NET User Group - Waltham, MA
    Boston BizSpark Meetup – Cambridge, MA
    Boston Business Intelligence – Waltham, MA
    Boston Cloud Services – Waltham, MA
    Boston Web Design Meetup – Cambridge, MA
    Boston WebsiteSpark Group – Cambridge, MA
    Cape Cod .NET User Group – Plymouth, MA
    Cape Cod XNA User Group – Hyannis, MA
    IASA New England – Waltham, MA
    New England Silverlight Guild – Cambridge, MA
    New England SQL Server User Group - Waltham, MA (On Summer break)
    North Shore Web Geeks – Newburyport, MA
    OWASP (Open Web Application Security Project) – Waltham, MA
    Western Mass Developers’ Group – Hadley, MA

    New Hampshire

    July 13
    Granite State SharePoint User Group – Nashua, NH

    July 20
    NH .NET User Group, Seacoast – Portsmouth, NH

    July 20
    NH .NET User Group, Nashua – Nashua, NH

    August 10
    Granite State SharePoint User Group – Nashua, NH

    Schedule TBD
    Nashua Scrum Club – Nashua, NH
    NH .NET User Group, Concord – Concord, NH (On Summer break)
    Seacoast SQL Server Users Group – Portsmouth, NH

    New York (Upstate)

    June 22
    Build Guild – Troy, NY
    “Web People + Adult Beverages + High Fives”

    June 23
    VDUNY - Visual Developers of Upstate NY - Rochester, NY
    “Windows Communication Foundation (WCF)” – Steve Maier

    July 6
    Rochester Javascript ��� Rochester, NY

    July 12
    Rochester SharePoint User Group – Rochester, NY

    August 3
    Rochester Javascript – Rochester, NY

    Schedule TBD
    AppRochester – Rochester, NY
    Central New York .NET Developer Group - East Syracuse, NY
    OWASP (Open Web Application Security Project) – Rochester, NY
    Refresh Rochester – Rochester, NY
    Tech Valley .NET Users Group - Latham, NY
    Upstate NY PowerShell Users Group – Rochester, NY
    Upstate NY PowerShell Users Group – Syracuse, NY
    Western New York .NET Users Group - Amherst, NY
    Western NY SQL Server PASS – Amherst, NY

    Rhode Island

    July 13 
    Providence Geeks – Providence, RI

    July 14
    Providence Web Development Lunch Hour – Providence, RI

    August 11
    Providence Web Development Lunch Hour – Providence, RI

    Schedule TBD
    Rhode Island .NET User Group - Bristol, RI
    Southern New England SQL Server User Group, Warwick, RI

    Vermont

    July 11 
    Vermont .NET User Group – S. Burlington, VT
    Mark Dunn

    imageSeptember 10
    Vermont Code Camp 2011 – Burlington, VT

    September 16
    VT Hackathon – Burlington, VT

    Schedule TBD
    Vermont SQL Server User Group - Burlington, VT

  • 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

    The Code Project Virtual Tech Summit on HTML5 & CSS3

    • 0 Comments

    Starting today (and continuing after), you can access some great content on HTML5 and CSS3 for free via The Code Project’s Virtual Tech Summit:

    http://www.virtualtechsummits.com/Register.aspx?eventID=13

    The event kicks off at noon EDT with Molly Holzschlag’s keynote on “The Future of HTML5” followed by other sessions… including one by me on “Using the Internet Explorer 9 Developer Tools” (launching at 2:15 PM EDT).

    If you can’t make it today, no problem, an advantage of this virtual event is you can drop by any time.

    Enjoy!
    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

    HTML5 Web Camps in Waltham, MA and New York City

    • 0 Comments

    imageWant to get up to speed with HTML5 and related web standards?  HTML5 Web Camps are a series of events to help you do just that.

    In the northeastern U.S., join me and my NYC-based teammate Rachel Appel as we deliver two free, full-day HTML5 Web Camps in June:

    • June 13, 9 AM – 5 PM
      Microsoft, 201 Jones Road
      Waltham, MA
      Registration
    • June 15, 9 AM – 5 PM
      Microsoft, 1290 Ave of the Americas
      New York, NY
      Registration

    We’ll be covering the next wave of web standards including HTML5, CSS3, SVG, and more:

    • HTML5 Semantic Markup
    • HTML5 Audio and Video
    • HTML5 Canvas
    • HTML5 Geolocation
    • Cascading Style Sheets, Level 3 (CSS3)
    • Scalable Vector Graphics (SVG)
    • ECMAScript5
    • Internet Explorer 9
      • Standards Support
      • Site Pinning
      • Hardware Acceleration
    • Present and future of web standards
      • A look at the IE10 Platform Preview
      • Emerging standards (e.g. WebSockets, IndexedDB, etc.)
    • Developer options and tools
      • IE9 Developer Tools
      • Expression Web 4
      • Visual Studio 2010

    We’ll also show you techniques and frameworks to help you get started today while still offering good experiences for non-modern browsers.

    It’s a full (and free) day, so register now and we’ll see you at HTML5 Web Camp!

    -Chris

  • Chris Bowen's Blog

    New England Code Camp 15 – The Schedule!

    • 0 Comments

    CodeCampNew England Code Camp 15 is this Saturday!  Code Camp is a free day filled with technical (no marketing fluff) sessions given by and for the area developer community.

        New England Code Camp 15:
        Developers in the Streets! 
        Saturday, May 7th
        8:30 AM to 6:40 PM (Doors at 8 AM)
        Microsoft, 201 Jones Road (6th Floor), Waltham, MA

        Register at http://codecamp15.eventbrite.com 
        
        Details at http://TheDevCommunity.org

    It’s a Saturday very well spent!

    CC15 Contributors

    Thanks to the contributing companies for supporting this event!

    • image Lunch is being provided by Telerik
    • image Morning coffee & doughnuts provided by Wintellect

    CC15 Speakers

    Thanks also to the 30 speakers volunteering their time and expertise to share with the community!

    • Andy Beaulieu
    • Chris Bowen
    • John Bowen
    • SB Chatterjee
    • Ben Day
    • John Garland
    • Richard Hale Shaw
    • Tom Haslam
    • Patrick Hynds
    • Sunil Kadimdiwan
    • Justin Kohlhepp
    • Slava Kokaev
    • Jesse Liberty
    • Steve Maier
    • Todd Mancini
    • Igor Moochnick
    • Andrew Novick
    • Jim O’Neil
    • Varsham Papikian
    • Steve Resnick
    • Joe Stagner
    • Jerry Sun
    • Pat Tormey
    • Frederic Torres
    • Mike Walsh
    • Dileepa Wijayanayake
    • Bill Wilder
    • Maura Wilder
    • Joan Wortman
    • Frank Wu

    The “Draft – Will Change” Schedule

    CC15 will feature 40 sessions in 6 rooms! The draft session grid is below.

    TheDevCommunity.org will be the definitive source for the schedule and session details (as of later tonight), so please check there for the latest.

     image
    (Click to expand)

    Please consider this a preview version – chances are this schedule will change, but hopefully not terribly much.  Again, follow http://TheDevCommunity.org for details and updates.

    Social Media

    Finally, please tag any Code Camp 15 social media creations with #necc15.

    See you at Camp!

    -Chris

    [Update 5/3 – Already a change to the schedule Smile]

  • Chris Bowen's Blog

    Developer Events in the Northeast – May and June, 2011

    • 0 Comments

    Here’s the latest roundup of developer events in the northeastern U.S. for May to June. As always, if you know of other (free or nearly free) developer-focused events, please let me know.

    -Chris

    Connecticut

    May 5
    Fairfield/Westchester .NET User Group – Stamford, CT
    “.NET and MongoDB: The Ubiquitous Blog Example” – John Zablocki

    May 9
    Hartford Area Build Guild – Farmington, CT

    May 12
    Agile Connecticut - Farmington, CT
    “Team Greatness Using the Core Protocols” – Jim McCarthy

    June 18
    Code Camp Hartford 4 – Bloomfield, CT

    Schedule TBD
    Connecticut .NET Developers Group – Farmington, CT
    New England Silverlight Guild – Hartford, CT
    Fairfield/Westchester SQL Server UG - Stamford, CT
    Hartford SQL Server Users Group – Farmington, CT
    Connecticut DotNetNuke User Group - Bethany, CT

    Maine

    May 12
    Maine Bytes User Group - Portland, ME
    “Crash Course in Windows Phone 7” – Jesse Liberty

    May 16
    Maine Developer Network - Augusta, ME
    Augusta Business Intelligence Event

    May 16
    Web Designers User Group – Portland, ME
    Search Engine Optimization

    May 24 
    Bangor Area .Net Developers (BAND) - Bangor, ME

    May 31
    Usability / User Experience User Group – Portland, ME
    Lizzie Jones

    Schedule TBD
    Agile User Group – Portland, ME

    Massachusetts

    May 3
    Boston Business Intelligence – Waltham, MA
    “Introduction to Master Data Services” – Brian Berry

    May 5
    Beantown .NET User Group - Cambridge, MA
    “Too Slow: Performance Profiling, Testing & Fixing with VS2010” – Ben Day

    May 5 
    New England Visual Basic Professionals - Waltham, MA
    “Using the ASP.NET Membership Provider” – Patrick Hynds

    Code CampMay 7
    New England Code Camp 15 – Waltham, MA
    The fifteenth! Join hundreds of developers at the Microsoft office in Waltham, MA for this session-packed, free day of learning and networking. By and for the developer community, Code Camps are always free and focus on tech, not marketing.  Registration

    May 9
    imageWindows Phone Developer Garage – Cambridge, MA
    A free, full-day Windows Phone 7 “learn and build” event, featuring a mix of sessions and hands-on labs.

    May 10
    DotNetNuke Boston Meetup – Cambridge, MA

    May 10
    Build Guild – Salem, MA
    “Web People, Adult Beverages, High Fives”

    May 11
    Boston .NET User Group - Waltham, MA
    “Processing Data: Parallelism and Performance with PLINQ and C#/.NET 4” – John Hart

    May 11
    Boston Area SharePoint Users Group – Cambridge, MA
    “Architecture: Fast Search Server 2010 for SharePoint” – Carlos Valcarcel

    May 12
    New England SQL Server User Group - Waltham, MA

    May 12
    Boston Web Design Meetup – Cambridge, MA

    May 16
    Azure Deep Dive with Wintellect’s Jeffrey Richter – Waltham, MA
    A free, full day on Windows Azure for developers and architects.

    May 17
    Boston New Technology Meetup – Cambridge, MA

    May 18
    Boston .NET Architecture Study Group - Waltham, MA

    May 18
    HTML5 Game Development Meetup – Boston, MA

    May 18 
    New England Windows Phone User and Developer Group - Waltham, MA

    May 18
    New England ASP.NET Professionals – Waltham, MA

    May 18
    jQuery Boston Meetup – Boston, MA
    “Understanding jQuery Events, and Working with New HTML5 APIs” – Boaz Sender

    May 19
    Western Mass Microsoft Technology Users Group - Agawam, MA
    “MonoTouch Development” – Michael Bluestein

    May 19
    Western Mass Developers’ Group – Hadley, MA

    May 19 
    Boston Web Performance Group – Boston, MA
    “Meet for SPEED”

    May 19
    Lean Startup Circle Meetup – Cambridge, MA

    May 25
    Agile Boston User Group - Waltham, MA
    “Emotional Intelligence” – Art deLorenzo

    May 26
    Boston Azure User Group – Cambridge, MA

    May 26
    OWASP (Open Web Application Security Project) – Waltham, MA
    “A Web-Application Architecture for Regulatory Compliant Cloud Computing” – Arshad Noor

    June 2
    Beantown .NET User Group - Cambridge, MA

    June 2
    New England Visual Basic Professionals - Waltham, MA
    “SharePoint 2010 Development for .NET Developers” – Bob German

    June 8
    Boston Area SharePoint Users Group – Cambridge, MA

    Architect FactoryJune 9
    The Architect Factory 3 – Cambridge, MA
    A free event for experienced developers interested in learning skills helpful for assuming architect roles.  Call for Speakers open now, registration opening soon.

    June 9 
    New England SQL Server User Group - Waltham, MA
    “Disk I/O Tuning” – Kevin Kline 

    June 13
    imageMSDN Event - HTML5 Jumpstart – Waltham, MA
    A full day event on HTML5 and related standards and technologies with Chris Bowen and Rachel Appel.

    June 13
    New England F# User Group – Cambridge, MA
    “Purely Functional Imperative Programming” – Runar Bjarnason

    June 14
    DotNetNuke Boston Meetup – Cambridge, MA

    June 15 
    HTML5 Game Development Meetup – Boston, MA

    June 15 
    Boston .NET Architecture Study Group - Waltham, MA

    June 15 
    New England Windows Phone User and Developer Group - Waltham, MA

    June 15
    New England ASP.NET Professionals – Waltham, MA

    June 16 
    Western Mass Microsoft Technology Users Group - Agawam, MA
    TFS with Benjamin Day

    June 16
    Western Mass Developers’ Group – Hadley, MA

    June 30 
    Lean Startup Circle Meetup – Cambridge, MA

    Schedule TBD
    Boston BizSpark Meetup – Cambridge, MA
    Boston Cloud Services – Waltham, MA
    Boston JavaScript Meetup – Cambridge, MA
    Boston WebsiteSpark Group – Cambridge, MA
    Boston XNA Developers Group - Waltham, MA
    Cape Cod .NET User Group – Plymouth, MA
    Cape Cod XNA User Group – Hyannis, MA
    IASA New England – Waltham, MA
    New England Silverlight Guild – Cambridge, MA
    North Shore Web Geeks – Newburyport, MA
    Refresh Boston – Cambridge, MA
    UX Book Club, Boston – Cambridge, MA 

     

    New Hampshire

    May 11
    NEW GROUP!
    Granite State SharePoint User Group – Nashua, NH
    “Introducing SharePoint 2010” – Chris Bortlik

    May 12
    Nashua Scrum Club – Nashua, NH
    Agile Practitioners Problem Clinic

    May 18
    NEW GROUP!
    NH .NET User Group, Seacoast – Portsmouth, NH
    “HTML5 (and Friends) on Your Developer Radar” – Chris Bowen

    May 18
    NH .NET User Group, Nashua – Nashua, NH

    May 25
    NH .NET User Group, Concord – Concord, NH

    June 8
    Granite State SharePoint User Group – Nashua, NH

    Schedule TBD
    Seacoast SQL Server Users Group – Portsmouth, NH

     

    New York (Upstate)

    May 3
    AppRochester – Rochester, NY
    ClayWare on “Efforts bringing the PadBracket to the market” &
    Gary Davis on “User Experience and Interface Design”

    May 4
    Central New York .NET Developer Group - East Syracuse, NY
    “Silverlight 5 – 3D Made Easy” – Andy Beaulieu

    May 4
    Rochester Javascript – Rochester, NY

    May 10
    Tech Valley .NET Users Group - Latham, NY

    May 12
    Rochester SharePoint User Group – Rochester, NY
    ”SharePoint 2010 Nirvana” – Doug Davis

    June 1 
    Rochester Javascript – Rochester, NY

    June 7
    AppRochester – Rochester, NY

    Schedule TBD
    Build Guild – Troy, NY
    OWASP (Open Web Application Security Project) – Rochester, NY
    Refresh Rochester – Rochester, NY
    Upstate NY PowerShell Users Group – Rochester, NY
    Upstate NY PowerShell Users Group – Syracuse, NY
    VDUNY - Visual Developers of Upstate NY - Rochester, NY
    Western New York .NET Users Group - Amherst, NY
    Western NY SQL Server PASS – Amherst, NY

    Rhode Island

    May 11
    Providence Geeks – Providence, RI

    June 15
    Providence Geeks – Providence, RI

    Schedule TBD
    Rhode Island .NET User Group - Bristol, RI
    Southern New England SQL Server User Group, Warwick, RI 

    Vermont

    May 9
    Vermont .NET User Group – S. Burlington, VT

    June 13 
    Vermont .NET User Group – S. Burlington, VT

    Schedule TBD
    Vermont SQL Server User Group - Burlington, VT

     

    Online

    Now (through mid-May)
    Rock Paper Azure Challenge
    Prove your developer skills (and compete for prizes) while learning cloud computing with Windows Azure in this adaptation of the classic “Rock, Paper, Scissors” game.

    May 10
    Linked .NET User Group
    “Scott Guthrie Unplugged 9” - an open Q&A session

    May 31
    Linked .NET User Group
    “Visual Studio Tips & Tricks, Greatest Hits” – Zain Naboulsi

  • Chris Bowen's Blog

    Call for Speakers: The Architect Factory 3 - Cambridge, MA on June 9

    • 0 Comments

    Architect Factory

    After successful events in 2009 and 2010, the Architect Factory 3 will be held at Microsoft NERD in Cambridge, MA on June 9th from 1-8PM. 

    This free event helps experienced developers (regardless of technology) learn the skills to transition into a variety of architect roles.

    From the Architect Factory site:

    Many experienced developers look to become software architects instead of managers as the next step in their careers, but it can be difficult to find opportunities to learn about the skills needed to make the transition. Aspiring architects need a way to learn what to learn to become effective architects. The Architect Factory is designed to fill this need.

    The Call for Speakers (see below) is open now, and registration will be opening soon is now open at:

         http://architectfactory.eventbrite.com

    Bryan TuttleAttendees NetworkingMore NetworkingKeynote

    Thanks to event organizer Bryan Tuttle and the team of volunteers for making this possible!

    View from NERDCall for Speakers Now Open

    This is a volunteer-driven event, and speakers from all technology backgrounds are welcome and encouraged to submit sessions that will help experienced developers to assume roles as architects. 

    Sessions should familiarize senior developers with the areas that all architects should understand to succeed.  Some examples:

    • At the EventThe Role of the Architect
    • Principles of Software Design
    • Methodology Comparisons (TOGAF, Zachman)
    • Design Patterns
    • Testing and Validation
    • Establishing Development Practices
    • Model Driven Architecture
    • Service Oriented Architecture
    • Performance
    • Interoperability
    • Patterns for Cloud Computing
    • Refactoring
    • Breakout SessionArchitecting for the User Experience
    • Working with Business Stakeholders and Development Teams

    Interested in helping the New England developer community by sharing your perspective and experiences?  Please complete the speaker registration formThank you!

    -Chris

    [Update 5/10 – Registration now open!]

  • Chris Bowen's Blog

    New England Code Camp 15 Update

    • 0 Comments

    CodeCampNew England Code Camp 15 is just over a week away (May 7th, Waltham, MA - registration), and the growing list of sessions promises to make it worth investing your Saturday in this free event.

    The Call for Speakers is open through Friday at midnight, so it isn’t too late (well, at least as I write this) to join in and help*. BTW, session submission is easier this time, just email a very short form.

    See TheDevCommunity for the list of sessions, which currently include these topics:

    • ASP.NET MVC
    • Business Intelligence
    • Effective Developer Skills
    • HTML5
    • JavaScript
    • jQuery
    • LightSwitch
    • Open Source
    • PerformancePoint
    • Python
    • MEF
    • Reporting Services
    • SharePoint
    • Silverlight
    • SQL Server
    • Visual Studio
    • WebMatrix
    • Windows Azure
    • Windows Phone
    • WPF
    • XNA

    The schedule will be assembled this weekend, so keep an eye here and on TheDevCommunity for more.

    See you at Camp!

    -Chris

    * The community wants to hear from you, so don’t worry if you haven’t presented before because the variety of viewpoints and experiences is the important part.  Also, as a free/weekend/community event, it really is a relaxed atmosphere.

  • Chris Bowen's Blog

    More “New” in New Hampshire

    • 0 Comments

    Just one month after posting about New Hampshire .NET Seacoast, there’s another new addition to the growing New Hampshire tech community. 

    The Granite State SharePoint User Group is holding its first meeting on May 11th in Nashua, and helping to kick things off is SharePoint expert Chris Bortlik.

        imageGranite State SharePoint User Group
        May 11, 6-8 PM
        “Introducing SharePoint 2010” – Chris Bortlik, Microsoft
        Daniel Webster College
        20 University Dr. (Eaton Richmond 122)
        Nashua, NH
        Registration (free)

    New Hampshire Tech Community

    There’s a lot happening in NH, so here’s a summary of events and groups:

    Concord

    Hampton

    Manchester

    Nashua

    Portsmouth

    I hope you’ll enjoy and support the growing community!

    -Chris

  • Chris Bowen's Blog

    Windows Phone Garages in Cambridge, MA and Beyond (FL, GA, MD, NC, NY, PA)

    • 1 Comments

    imageA new series of the popular Windows Phone Garages is coming to the eastern US in May.  These are free “learn and build” events with a mix of presentations and hands-on labs all focused on helping you create great apps for Windows Phone.

    City Date  
    New York, NY 5/3 Registration
    Cambridge, MA 5/9 Registration
    Alpharetta, GA 5/19 Registration
    Charlotte, NC 5/24 Registration
    Malvern, PA 5/24 Registration
    Chevy Chase, MD 5/26 Registration
    Tampa, FL 5/26 Registration


    imageThe morning features 3 developer sessions, and after lunch, you’ll have a chance to put your new knowledge to work, with experts on hand to help you.

    9 – 10 am

    Introduction to Windows Phone Development

    No experience with Windows Phone 7 development? No problem. During this optional session at the start of the day we will cover the fundamentals of Windows Phone Silverlight and XNA Development. We'll explore the various core components and tools available, and leave you with some resources to take you to the next level.

    10 – 10:30 am

    What’s new for Windows Phone Developers

    This session will highlight some of the new developer features coming for Windows Phone Developers. We’ll also take a look at AppMaker, a new dynamic new tool that enables you to generate a simple Windows Phone application from one or more online data feeds.

    10:45 – 12:30 pm

    Windows Phone Application Jumpstart

    To give you a jumpstart on app development, we’ll walk through in detail building an app, styling it, and adding advanced capabilities. We’ll also cover submitting it to the marketplace and monetizing your app.

    12:30 – 1:00 pm

    Lunch

    1:00 – 5:00 pm

    Windows Phone Garage Open Lab

    Bring your laptop fully loaded with Visual Studio 2010 and the latest version of the Windows Phone Tools. Get some help with an app you are working on, or use the information from the Jumpstart to build an app around your favorite data feed. No ideas? No worries – we’ll have a few starter templates that you can build on.

    Tip: These are set up with tables for the machines that attendees will bring in for labs.  While that’s great for your computer (and your coffee cup), it uses more space, so these will fill up quickly.

    -Chris

Page 3 of 23 (458 items) 12345»