Dan Wahlin's WebLog

Getting Started with CSS Media Queries

dwahlin — Tue, 22 May 2012 19:22:28 GMT

If you've ever printed a page and noticed that it looks different than the actual page displayed in the browser you've more than likely witnessed a CSS media type in action. By using CSS media types such as "print", backgrounds, navigation bars, and other items can be hidden as a user prints which makes the printed page look much more readable. An example of changing styles through a CSS media type as a page is printed is shown next. This type of code can be placed directly in a <style> element in a given page or in an external style sheet.

@media print 
{    
    body {
        background-color: white;    
    }

    nav {
        display: none;
    }    
}

The print media type is one of many that can be used. A list of the different media types available to target various scenarios is shown next:

Media Type	When is it used?
3d-glasses	3D scenarios
all	All media types
braille	Braille tactile devices
embossed	Paged Braille printers
handheld	Handheld devices
print	Printed materials
projection	Projected presentations
screen	Different types of screens
speech	Speech synthesizers
tty	Teletypes and terminals
tv	Television devices

Media types can be defined in a web page using several different techniques. When a media type is identified (such as when a print operation occurs in the browser), the style sheet associated with the media type is applied dynamically by the browser. One of the easiest ways to get started using media types is to add the media attribute of the <link> element as shown next:

<link type="text/css" media="print" href="Styles/print.css" />

This code will cause the style sheet to be applied only when the specific media type ("print" in this case) is identified by the browser. You can also combine the media attribute with @import in an HTML page to cause a style sheet to be applied (note that the @import rule is ignored in older browsers though):

<style type="text/css" media="print">
    @import "Style/print.css";
</style>

If you'd prefer to load a specific style sheet from within another style sheet, @import can be used along with the media type. For example, if you have a style sheet named styles.css and want print styles to be included in it, the following can be added in the file to define the print style sheet along with the media type that it applies to:

@import url('print.css') print;

Finally, @media can be used directly in a style sheet as shown earlier to identify a specific media type section:

@media print
{
    /* custom print styles go here */
}

While media types definitely fill a direct need, they can't be used to perform more involved runtime logic. That's where CSS media queries come into play.

Adding CSS Media Queries into the Mix

CSS media types can be combined with CSS media queries to dynamically change styles and provide a responsive layout that adapts to different screens. While media types target a specific type of media such as print, you can add more control into your pages and even adjust the overall layout by adding CSS media query expressions. Expressions provide a way to associate logic with a given media type. It's important to note that although CSS media queries can be used to dynamically change the layout of a page, they don't optimize a page for smaller devices. Page optimization normally involves the server transmitting smaller images, minimizing the HTML payload that is sent, and performing other types of optimization tasks. Although CSS media queries can be used to load different types of images, they don't have any effect on the overall HTML that is loaded.

You can use CSS media queries to target a variety of properties:

Screen height and width
Aspect ratio
Color
Orientation (portrait versus landscape)
Visit http://www.w3.org/TR/css3-mediaqueries for a complete list

Let's take a look at how media types and media expressions can be used together to create a CSS media query. The following shows a simple example of some HTML that will be rendered in different devices:

<body>
    <div id="wrapper">
        <article class="clearfix">
            <section>This is section 1</section>
            <section>This is section 2</section>
            <section>This is section 3</section>
        </article>
    </div>
</body>

The following CSS is applied to the HTML for styling purposes:

#wrapper 
{
    width: 980px;
    margin: 0 auto;
}

section 
{
    border: 1px solid black;
    height: 50px;
    width: 31%;
    margin: 0px 0px 10px 5px;
    padding: 5px;
    font-weight: bold;
    background-color: green;
    color: white;
    float: left;
}

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

When the HTML and CSS is rendered the following output is displayed in the browser:

What happens when the page is rendered on a phone with a small screen? Although most modern smart phones will display the page fine, the user will likely have to zoom in to read the content and swipe left or right to view specific areas. The experience can be made much better by using CSS media types combined with CSS media queries.

Let's look at how to target devices that have a max width of 480 pixels and reformat the green boxes shown earlier so that they display vertically instead of horizontally. By stacking the boxes vertically and adjusting their widths the user won't have to zoom in and swipe from left to right to see all of the content. An example of defining a media type of "screen" along with a max-width media query expression is shown next:

@media screen and (max-width:480px) {
    /* custom styles go here */
}

This code targets any screen that has a maximum width of 480 pixels using the (max-width:480px) expression and triggers styles defined in the media query's brackets to be applied. A more complete example of checking for a specific max-width and then applying custom styles to the page when the expression returns true:

@media screen and (max-width:480px) 
{
    #wrapper
    {
    width: 98%;
    margin: 0 auto;
    }

    section
    {
    width: 98%;
    margin: 0px 0px 10px 0px;
    background-color: red;
    color: white;
    float: none;
    }
}

When the expression is true the custom #wrapper and section element styles are applied dynamically causing the floats to be removed. The result is shown next:

To target widths between 481 and 979 the following CSS can be written. Looking through the code you'll see that 2 expressions are used.

@media screen and (min-width: 481px) and (max-width:979px) {
    #wrapper
    {
        width: 98%;
        margin: 0 auto;
    }

    section
    {
        width: 98%;
        margin: 0px 0px 10px 0px;
        background-color: #ccc;
        color: black;
        float: none;
    }
}

Each expression is wrapped in parenthesis and separated with the "and" keyword. Although the code only changes each section's background and text color, additional modifications to the styles could certainly be made. The following image shows the screen that's rendered in the browser.

Additional media queries can certainly be added to target smaller devices such as iPhone and Android phones. For example to target a max-width of 320 pixels the CSS shown next can be added.

@media screen and (max-width: 320px)
{
    #wrapper 
    {
        width: 98%;
    }
          
    section 
    {
        width: 98%;
        margin: 0px 0px 10px 0px;
        background-color: #000;
        color: white;
        float: none;
    }
}

CSS Media Query Testing

Although CSS media queries are fairly straightforward to add, how do you test that they're actually working? You can certainly resize the browser window yourself to do some basic testing but if you want to know exact sizes it's better to take advantage of tools designed for that task.

Chrome has an extension called Windows Resizer (http://tinyurl.com/WindowsResizer) that allows specific resolutions to be targeted easily. After installing it, an icon shows in the Chrome browser that you can select to pick a target as shown next. Custom resolutions can be added easily.

You can also use device emulators if you have them installed or do testing on real devices which is of course highly recommended if you have them. If you don't want to install an emulator, a nice (and reasonably priced) tool that can be used to test iOS devices on Windows is available at http://www.electricplum.com. It provides a way to test what web pages look like on iPhone and iPad devices as shown next:

In this post you've seen the role that CSS media types and CSS media queries play in providing more responsive web pages. In a future post I'll walk through how a more robust site can benefit from CSS media queries to render pages that look good on a variety of devices. You can download the sample code from this post as well as a more robust example that I’ll blog about later here.

jQuery Documentation Resources to Speed Up Your Development

dwahlin — Fri, 20 Apr 2012 19:16:06 GMT

We’ve been seeing a sharp increase in the number of people interested in getting started with jQuery lately in our training and consulting business which is exciting since it’s such a great framework to use for client-side coding. If you’ve been fighting with cross-browser issues and want to make client-side development fun again then jQuery is a great way to go in my opinion.

One of the challenges with learning any new framework is knowing where to find documentation and good sources of examples. Although I normally rely on the standard documentation on the http://www.jQuery.com site, there are several other sources out there that can be helpful. Some of the sources are a bit dated, but they still provide a good way to find out more about core functionality. Here’s a quick list of the sites and extensions I’m aware of. If you know of others please let me know by adding a comment and I’ll update the list.

api.jquery.com

http://api.jquery.com

This is the main documentation site available for jQuery. It’s a great place to find details, but you’ll have to know where to look which can be frustrating sometimes for new developers.

jQuery API Search (Chrome Extension)

Get the extension here

This is a nice Chrome extension that adds jQuery API search support to Chrome’s omnibox (the URL/search textbox at the top of the browser). Simply type jq followed by a tab and then enter the function you’d like to get documentation on in the omnibox. The extension will search the APIs on the jQuery.com site and return matching results. Very handy….get it here.

jQuery API Browser (Chrome Extension)

Get the extension here

This Chrome extension provides a quick way to search through jQuery documentation without having to open up a webpage. It’s not completely up-to-date but is quick and efficient for finding information about most functions.

jQAPI.com

http://jqapi.com/

Provides a great way to pull up the official documentation using a simplified navigation mechanism. I like how clean the documentation is and how well the search and navigation scheme works. They also have an offline version available which is handy when you don’t have access to the network.

jQuery Source Viewer

http://james.padolsey.com/jquery/#v=git

This site provides a great way to see what’s happening inside the jQuery source code (a great way to learn various JavaScript tips and tricks). Simply type in the function you’d like to explore and the site will display the source code.

visualjQuery.net

http://visualjquery.net/

Another documentation site that provides a nice navigation scheme and clean view of the documentation. It’s a little outdated (covers jQuery 1.6).

api.jquery.com/browser

http://api.jquery.com/browser

This site provides some nice drill-down functionality to find out details about a particular function quickly and easily. It’s out dated but provides a quick way to find out about the core API functions.

api.jquery.com/visual

http://api.jquery.com/visual

This site is also a bit outdated, but if you’re looking to quickly find details on core functionality it makes it easy to drill-down into specific topics, see related functions, and then get details and samples about a given function.

If you’re interested in learning more about jQuery check out my jQuery Fundamentals course at Pluralsight.com.

jQuery Tip #7 - Consolidating jQuery Ajax Calls

dwahlin — Thu, 19 Apr 2012 07:08:00 GMT

Previous Tips:

As the use of Ajax continues to grow in popularity it's worth taking the time to think through how Ajax calls are structured and used in an application especially if re-use and maintenance are important. If you analyze a lot of the Ajax code out there you'll likely find that calls to the server are scattered throughout scripts and pages. For example, if an Ajax call is made to get a list of jobs, a call is made directly in the script that needs the data. If another page/script needs the same type of data another Ajax call is made. This results in code duplication and complicates maintenance since Ajax calls aren't consolidated.

While there's certainly nothing wrong with this approach (it gets the job done after all), you can get better re-use out of your Ajax calls by consolidating them into JavaScript objects. In this post I'll talk about how Ajax calls can be consolidated using JavaScript patterns and describe the benefits this approach provides.

The Case for Consolidation

JavaScript libraries such as jQuery make it so easy to make Ajax calls that we often don't think much about the code being written and where it's being used. For example, consider the following code that's used to retrieve customers from a WCF service and update a page with the retrieved data:

$('#GetCustomersButton').click(function () {
    $.getJSON('../CustomerService.svc/GetCustomers',
        function (data) {
            var cust = data.d[0];
            $('#ID').text(cust.ID);
            $('#FirstName').val(cust.FirstName);
            $('#LastName').val(cust.LastName);
        });
});

Although this code works fine, it can't be re-used across other pages that may also need customer data. If another page or script needs the same data then the getJSON() call will have to be re-written since the manner in which the returned data is processed will more than likely be different. In addition to this potential problem, the code is added into a script that may have completely different responsibilities that are unrelated to calling a service.

In the object-oriented world we strive to follow the single responsibility principle when designing classes to avoid duplication and provide better re-use. Following this same principle in JavaScript code makes a lot of sense and can lead to better re-use, simplified maintenance, and better overall organization of code in an application. By placing Ajax calls into a re-useable JavaScript object we can use them throughout an application more easily, minimize duplicate code, and provide a better maintenance story. Before jumping into how Ajax calls can be consolidated, let's review a key pattern called the Revealing Module Pattern that can be used to encapsulate JavaScript code.

Encapsulation with the Revealing Module Pattern

There are several different patterns that can be used to structure JavaScript code and provide a way for functions to be encapsulated inside of class-like structures (given that JavaScript doesn't officially support the concept of a class). One pattern that can be used is the Revealing Module Pattern. By using the pattern you can encapsulate variables and functions into an object, achieve re-use, simplify maintenance, and can also help avoid naming collisions. There are several other patterns such as the Prototype Pattern and Revealing Prototype Pattern that can be used (to name just two) but the Revealing Module Pattern provides a simple way to get started creating JavaScript objects that are similar in purpose to C# or Java classes.

The following code shows an example of some simple code that has no structure applied to it (I call it "Function Spaghetti Code"). With this approach variables and functions are scattered throughout a file with no rhyme or reason as to how they relate to each other. All of the variables and functions defined this way are automatically placed in the global scope which can lead to naming collisions.

var engine = 'V8';

function start() {
    alert('Car started ' + engine + ' engine');
}

function stop() {
    alert('Car stopped ' + engine + ' engine');
}

function turn() {
    alert('Car turned')
}

Listing 1. Function-based JavaScript Code with no encapsulation.

Listing 2 shows this same code refactored to follow the Revealing Module Pattern. In this simple example the code is encapsulated in an object named car. Following this pattern allows the code to be organized, variables and functions to be taken out of the global scope, and a re-useable object to be defined that can be used in one or more pages or applications.

var Car = function (engine) {
    var start = function () {
        alert('Car started ' + engine + ' engine');
    },
    stop = function () {
        alert('Car stopped ' + engine + ' engine');
    },
    turn = function () {
        alert('Car turned');
    };

    return {
        start: start,
        stop: stop,
        turn: turn
    };
}('V8');

Listing 2. Organize functions in an object to provide encapsulation, re-use, easier maintenance, and to help avoid naming collisions.

Looking through the code in Listing 2 you'll see that 3 functions are defined including start(), stop(), and turn(). All three are publicly exposed to consumers using the return object that's defined (an object literal). Any functions not listed in the return object are inaccessible to consumers making them similar to private members in object-oriented languages. Since the car object is self-invoked (note the parenthesis at the end of Listing 2) you can call it directly using code such as the following:

car.start();
car.stop();
car.turn();

If you want to create a new instance of car the code in Listing 3 can be used instead of the code shown in Listing 2. Notice that the Car object starts with an upper-case character so that the consumer knows to create a new instance of the object to use it. This is a common convention being used more and more among JavaScript developers.

var Car = function (engine) {
    var start = function () {
        alert('Car started ' + engine + ' engine');
    },
    stop = function () {
        alert('Car stopped ' + engine + ' engine');
    },
    turn = function () {
        alert('Car turned');
    };

    return {
        start: start,
        stop: stop,
        turn: turn
    };
};

Listing 3. Using the Revealing Module Pattern to create a Car object that can be created using the "new" keyword.

To use the Car object the following code can be written:

var car = new Car('V8');
car.start();
car.stop();
car.turn();

If you only need one object in memory as an application is running the code shown in Listing 2 works well. If you need multiple instances of an object the self-invoking parenthesis can be removed as shown in Listing 3.

Now that you've seen how the Revealing Module Pattern can be used to structure JavaScript code, let's see how it can encapsulate Ajax functions into an object.

Consolidating Ajax Calls

A sample application named Account at a Glance (download it here – an image from the application is shown below) built to demonstrate several HTML5, jQuery, and general JavaScript concepts relies on the Revealing Module Pattern to consolidate Ajax calls into a single object that can be re-used throughout the application. By following this pattern, an Ajax call used to retrieve market quotes can be defined in one place and then called from other scripts that may need the data. This approach provides several benefits including more modular, re-useable, and maintainable code. If something changes with an Ajax call you can go to one place to make the core modifications rather than searching through multiple scripts and pages to find where changes need to be made.

To access market quote data in the application the following call could be made as data is needed in a given script:

$.getJSON('/DataService/GetQuote', { symbol: sym }, function (data) {
    //process data here 
});

Although this code works, it's much better from a re-use and maintenance standpoint to consolidate calls into an object. Listing 4 shows an example of an Ajax-specific object named dataService that the Account at a Glance application uses to retrieve different types of JSON data from the server.

var dataService = new function () {
    var serviceBase = '/DataService/',
    getAccount = function (acctNumber, callback) {
        $.getJSON(serviceBase + 'GetAccount', { acctNumber: acctNumber },
          function (data) {
              callback(data);
          });
    },

    getMarketIndexes = function (callback) {
        $.getJSON(serviceBase + 'GetMarketIndexes', function (data) {
            callback(data);
        });
    },

    getQuote = function (sym, callback) {
        $.getJSON(serviceBase + 'GetQuote', { symbol: sym }, function (data) {
            callback(data);
        });
    },

    getTickerQuotes = function (callback) {
        $.getJSON(serviceBase + 'GetTickerQuotes', function (data) {
            callback(data);
        });
    };

    return {
        getAccount: getAccount,
        getMarketIndexes: getMarketIndexes,
        getQuote: getQuote,
        getTickerQuotes: getTickerQuotes
    };

} ();

Listing 4. Consolidating Ajax calls into a dataService object.

The dataService object follows the Revealing Module Pattern discussed earlier to encapsulate the various functions. A single instance is created initially at runtime (the dataService function is self-invoked as the script initially loads) that exposes four functions responsible for getting account, market, quote, and ticker data from the server.

Looking through each function in the dataService object you'll notice that they all accept a callback parameter. Because each function is re-useable, it won't know how to handle the data that's retrieved from a given service - processing of data is unique to the caller of the function. As a result, each function in dataService allows the caller to pass a callback function that is invoked once the data returns from the service to the client. An example of calling the dataService object's getAccount() function is shown next:

dataService.getAccount(acctNumber, renderAccountTiles);

When the data is returned the getAccount() function will invoke the renderAccountTiles callback function shown in Listing 5.

renderAccountTiles = function (data) {
    $('div.tile[id^="Account"]').each(function () {
        sceneStateManager.renderTile(data, $(this), 500);
    });
}

Listing 5. The renderAccountTiles() function handles data returned from the call to dataService.getAccount().

Note that a nested/inline callback function could be passed to getAccount() as well as shown next:

dataService.getAccount(acctNumber, function (data) {
    //Process data here
});

Anytime a script in the application needs to retrieve data from the server a call can be made to one of the dataService object's functions and required parameters can be passed along with the callback. This technique provides a flexible way for Ajax functionality to be consolidated into an object while remaining flexible as far as callbacks go.

This technique can be applied to other parts of an application as well to create additional objects that encapsulate related variables and functions. By focusing on objects rather than functions you can more efficiently organize code in an application and achieve many of the benefits mentioned earlier such as better re-use and simplified maintenance. Eliminating Function Spaghetti Code is definitely a good thing.

If you'd like additional details about structuring JavaScript code or building an end-to-end application check out my Structuring JavaScript Code or Building an ASP.NET MVC, EF Code First, HTML5, and jQuery courses from Pluralsight.

Pluralsight Meet the Author Podcast on Structuring JavaScript Code

dwahlin — Wed, 11 Apr 2012 06:00:57 GMT

I had the opportunity to talk with Fritz Onion from Pluralsight about one of my recent courses titled Structuring JavaScript Code for one of their Meet the Author podcasts. We talked about why JavaScript patterns are important for building more re-useable and maintainable apps, pros and cons of different patterns, and how to go about picking a pattern as a project is started. The course provides a solid walk-through of converting what I call “Function Spaghetti Code” into more modular code that’s easier to maintain, more re-useable, and less susceptible to naming conflicts. Patterns covered in the course include the Prototype Pattern, Revealing Module Pattern, and Revealing Prototype Pattern along with several other tips and techniques that can be used.

Meet the Author: Dan Wahlin on Structuring JavaScript Code

The transcript from the podcast is shown below:

[Fritz] Hello, this is Fritz Onion with another Pluralsight author interview. Today we’re talking with Dan Wahlin about his new course, Structuring JavaScript Code. Hi, Dan, it’s good to have you with us today.

[Dan] Thanks for having me, Fritz.

[Fritz] So, Dan, your new course, which came out in December of 2011 called Structuring JavaScript Code, goes into several patterns of usage in JavaScript as well as ways of organizing your code and what struck me about it was all the different techniques you described for encapsulating your code. I was wondering if you could give us just a little insight into what your motivation was for creating this course and sort of why you decided to write it and record it.

[Dan] Sure. So, I got started with JavaScript back in the mid 90s. In fact, back in the days when browsers that most people haven’t heard of were out and we had JavaScript but it wasn’t great. I was on a project in the late 90s that was heavy, heavy JavaScript and we pretty much did what I call in the course function spaghetti code where you just have function after function, there’s no rhyme or reason to how those functions are structured, they just kind of flow and it’s a little bit hard to do maintenance on it, you really don’t get a lot of reuse as far as from an object perspective. And so coming from an object-oriented background in JAVA and C#, I wanted to put something together that highlighted kind of the new way if you will of writing JavaScript because most people start out just writing functions and there’s nothing with that, it works, but it’s definitely not a real reusable solution. So the course is really all about how to move from just kind of function after function after function to the world of more encapsulated code and more reusable and hopefully better maintenance in the process.

[Fritz] So I am sure a lot of people have had similar experiences with their JavaScript code and will be looking forward to seeing what types of patterns you’ve put forth. Now, a couple I noticed in your course one is you start off with the prototype pattern. Do you want to describe sort of what problem that solves and how you go about using it within JavaScript?

[Dan] Sure. So, the patterns that are covered such as the prototype pattern and the revealing module pattern just as two examples, you know, show these kind of three things that I harp on throughout the course of encapsulation, better maintenance, reuse, those types of things. The prototype pattern specifically though has a couple kind of pros over some of the other patterns and that is the ability to extend your code without touching source code and what I mean by that is let’s say you’re writing a library that you know either other teammates or other people just out there on the Internet in general are going to be using. With the prototype pattern, you can actually write your code in such a way that we’re leveraging the JavaScript property and by doing that now you can extend my code that I wrote without touching my source code script or you can even override my code and perform some new functionality. Again, without touching my code. And so you get kind of the benefit of the almost like inheritance or overriding in object oriented languages with this prototype pattern and it makes it kind of attractive that way definitely from a maintenance standpoint because, you know, you don’t want to modify a script I wrote because I might roll out version 2 and now you’d have to track where you change things and it gets a little tricky. So with this you just override those pieces or extend them and get that functionality and that’s kind of some of the benefits that that pattern offers out of the box.

[Fritz] And then the revealing module pattern, how does that differ from the prototype pattern and what problem does that solve differently?

[Dan] Yeah, so the prototype pattern and there’s another one that’s kind of really closely lined with revealing module pattern called the revealing prototype pattern and it also uses the prototype key word but it’s very similar to the one you just asked about the revealing module pattern.

[Fritz] Okay.

[Dan] This is a really popular one out there. In fact, we did a project for Microsoft that was very, very heavy JavaScript. It was an HMTL5 jQuery type app and we use this pattern for most of the structure if you will for the JavaScript code and what it does in a nutshell is allows you to get that encapsulation so you have really a single function wrapper that wraps all your other child functions but it gives you the ability to do public versus private members and this is kind of a sort of debate out there on the web. Some people feel that all JavaScript code should just be directly accessible and others kind of like to be able to hide their, truly their private stuff and a lot of people do that. You just put an underscore in front of your field or your variable name or your function name and that kind of is the defacto way to say hey, this is private. With the revealing module pattern you can do the equivalent of what objective oriented languages do and actually have private members that you literally can’t get to as an external consumer of the JavaScript code and then you can expose only those members that you want to be public. Now, you don’t get the benefit though of the prototype feature, which is I can’t easily extend the revealing module pattern type code if you don’t like something I’m doing, chances are you’re probably going to have to tweak my code to fix that because we’re not leveraging prototyping but in situations where you’re writing apps that are very specific to a given target app, you know, it’s not a library, it’s not going to be used in other apps all over the place, it’s a pattern I actually like a lot, it’s very simple to get going and then if you do like that public/private feature, it’s available to you.

[Fritz] Yeah, that’s interesting. So it’s almost, you can either go private by convention just by using a standard naming convention or you can actually enforce it by using the prototype pattern.

[Dan] Yeah, that’s exactly right.

[Fritz] So one of the things that I know I run across in JavaScript and I’m curious to get your take on is we do have all these different techniques of encapsulation and each one is really quite different when you’re using closures versus simply, you know, referencing member variables and adding them to your objects that the syntax changes with each pattern and the usage changes. So what would you recommend for people starting out in a brand new JavaScript project? Should they all sort of decide beforehand on what patterns they’re going to stick to or do you change it based on what part of the library you’re working on? I know that’s one of the points of confusion in this space.

[Dan] Yeah, it’s a great question. In fact, I just had a company ask me about that. So which one do I pick and, of course, there’s not one answer fits all.

[Fritz] Right.

[Dan] So it really depends what you just said is absolutely in my opinion correct, which is I think as a, especially if you’re on a team or even if you’re just an individual a team of one, you should go through and pick out which pattern for this particular project you think is best. Now if it were me, here’s kind of the way I think of it. If I were writing a let’s say base library that several web apps are going to use or even one, but I know that there’s going to be some pieces that I’m not really sure on right now as I’m writing I and I know people might want to hook in that and have some better extension points, then I would look at either the prototype pattern or the revealing prototype. Now, really just a real quick summation between the two the revealing prototype also gives you that public/private stuff like the revealing module pattern does whereas the prototype pattern does not but both of the prototype patterns do give you the benefit of that extension or that hook capability. So, if I were writing a library that I need people to override things or I’m not even sure what I need them to override, I want them to have that option, I’d probably pick a prototype, one of the prototype patterns. If I’m writing some code that is very unique to the app and it’s kind of a one off for this app which is what I think a lot of people are kind of in that mode as writing custom apps for customers, then my personal preference is the revealing module pattern you could always go with the module pattern as well which is very close but I think the revealing module patterns a little bit cleaner and we go through that in the course and explain kind of the syntax there and the differences.

[Fritz] Great, that makes a lot of sense.

[Fritz] I appreciate you taking the time, Dan, and I hope everyone takes a chance to look at your course and sort of make these decisions for themselves in their next JavaScript project. Dan’s course is, Structuring JavaScript Code and it’s available now in the Pluralsight Library. So, thank you very much, Dan.

[Dan] Thanks for having me again.

Testing Mobile Websites with Adobe Shadow

dwahlin — Sun, 08 Apr 2012 03:06:36 GMT

It’s no surprise that mobile development is all the rage these days. With all of the new mobile devices being released nearly every day the ability for developers to deliver mobile solutions is more important than ever. Nearly every developer or company I’ve talked to recently about mobile development in training classes, at conferences, and on consulting projects says that they need to find a solution to get existing websites into the mobile space.

Although there are several different frameworks out there that can be used such as jQuery Mobile, Sencha Touch, jQTouch, and others, how do you test how your site renders on iOS, Android, Blackberry, Windows Phone, and the variety of mobile form factors out there? Although there are different virtual solutions that can be used including Electric Plum for iOS, emulators, browser plugins for resizing the laptop/desktop browser, and more, at some point you need to test on as many physical devices as possible. This can be extremely challenging and quite time consuming though especially when you consider that you have to manually enter URLs into devices and click links on each one to drill-down into sites.

Adobe Labs just released a product called Adobe Shadow (thanks to Kurt Sprinzl for letting me know about it) that significantly simplifies testing sites on physical devices, debugging problems you find, and even making live modifications to HTML and CSS content while viewing a site on the device to see how rendering changes. You can view a page in your laptop/desktop browser and have it automatically pushed to all of your devices without actually touching the device (a huge time saver). See a problem with a device? Locate it using the free Chrome extension, pull up inspection tools (based on the Chrome Developer tools) and make live changes through Chrome that appear on the respective device so that it’s easy to identify how problems can be resolved. I’ve been using Adobe Shadow and am very impressed with the amount of time saved and the different features that it offers. In the rest of the post I’ll walk through how to get it installed, get it started, and use it to view and debug pages.

Getting Adobe Shadow Installed

The following steps can be used to get Adobe Shadow installed:

1. Download and install Adobe Shadow on your laptop/desktop

2. Install the Adobe Shadow extension for Chrome

3. Install the Adobe Shadow app on all of your devices (you can find it in various app stores)

4. Connect your devices to Wifi. Make sure they’re on the same network that your laptop/desktop machine is on

Getting Adobe Shadow Started

Once Adobe Shadow is installed, you’ll need to get it running on your laptop/desktop and on all your mobile devices. The following steps walk through that process:

1. Start the Adobe Shadow application on your laptop/desktop

2. Start the Adobe Shadow app on each of your mobile devices

3. Locate the laptop/desktop name in the list that’s shown on each mobile device:

4. Select the laptop/desktop name and a passcode will be shown:

5. Open the Adobe Shadow Chrome extension on the laptop/desktop and enter the passcode for the given device:

Using Adobe Shadow to View and Modify Pages

Once Adobe Shadow is up and running on your laptop/desktop and on all of your mobile devices you can navigate to a page in Chrome on the laptop/desktop and it will automatically be pushed out to all connected mobile devices. If you have 5 mobile devices setup they’ll all navigate to the page displayed in Chrome (pretty awesome!). This makes it super easy to see how a given page looks on your iPad, Android device, etc. without having to touch the device itself. If you find a problem with a page on a device you can select the device in the Chrome Adobe Shadow extension on your laptop/desktop and select the remote inspector icon (it’s the < > icon):

This will pull up the Adobe Shadow remote debugging window which contains the standard Chrome Developer tool tabs such as Elements, Resources, Network, etc. Click on the Elements tab to see the HTML rendered for the target device and then drill into the respective HTML content, CSS styles, etc.

As HTML elements are selected in the Adobe Shadow debugging tool they’ll be highlighted on the device itself just like they would if you were debugging a page directly in Chrome with the developer tools. Here’s an example from my Android device that shows how the page looks on the device as I select different HTML elements on the laptop/desktop:

Conclusion

I’m really impressed with what I’ve to this point from Adobe Shadow. Controlling pages that display on devices directly from my laptop/desktop is a big time saver and the ability to remotely see changes made through the Chrome Developer Tools (on my laptop/desktop) really pushes the tool over the top. If you’re developing mobile applications it’s definitely something to check out. It’s currently free to download and use. For additional details check out the video below:

jQuery Samples

dwahlin — Tue, 03 Apr 2012 04:03:04 GMT

Here are the jsfiddle samples that John Papa and I covered in our jQuery Fundamentals workshop at DevConnections last week. These were a few of the samples we wrote on the fly (so they’re not “perfect”) using http://jsfiddle.net and wanted to share. Additional jQuery samples covering selectors, DOM manipulation, Ajax techniques, as well as sample applications can be found here.

You can also view the talks John gave at the conference here. Code and slides from my talks can be found at the following links:

If you’re interested in learning more about jQuery check out my jQuery Fundamentals course at Pluralsight.com.

Using the Data Function

Using Object Literals with jQuery

Using jQuery each() with string concatenation

Using on() to handle child events

jQuery - hover

jQuery - event handling variations

jQuery - Twitter (bind, append, appendTo, each, fadeOut, $.getJSON, callback, success, error, complete)r

jQuery - attr vs prop

jQuery - Simple selectors

Code and Slides: Building the Account at a Glance ASP.NET MVC, EF Code First, HTML5, and jQuery Application

dwahlin — Sat, 31 Mar 2012 16:59:53 GMT

This presentation was given at the spring 2012 DevConnections conference in Las Vegas and is based on my Pluralsight course. The presentation shows how several different technologies including ASP.NET MVC, EF Code First, HTML5, jQuery, Canvas, SVG, JavaScript patterns, Ajax, and more can be integrated together to build a robust application. An example of the application in action is shown next:

View more of my presentations here.

The complete code (and associated SQL Server database) for the Account at a Glance application can be found here. Check out the full-length course on the topic at Pluralsight.com.

Code and Slides: Techniques, Strategies, and Patterns for Structuring JavaScript Code

dwahlin — Sat, 31 Mar 2012 16:42:00 GMT

This presentation was given at the spring 2012 DevConnections conference in Las Vegas and is based on my Structuring JavaScript Code course from Pluralsight. The goal of the presentation is to show how closures combined with code patterns can be used to provide structure to JavaScript code and make it more re-useable, maintainable, and less susceptible to naming conflicts. Topics covered include:

Closures
Using Object literals
Namespaces
The Prototype Pattern
The Revealing Module Pattern
The Revealing Prototype Pattern

View more of my presentations here.

Sample code from the presentation can be found here. Check out the full-length course on the topic at Pluralsight.com.

Code and Slides: Getting Started Building Windows 8 HTML/JavaScript Metro Apps

dwahlin — Sat, 31 Mar 2012 16:24:20 GMT

This presentation is from a talk I gave at the spring 2012 DevConnections conference. It covers some of the key topics you need to know to get started building Windows 8 HTML/JavaScript Metro apps including navigation options, UI surfaces that can be used, controls, data binding and templates, and animations.

View more of my presentations here.

Sample code shown in the presentation can be found here. A large number of samples are available in the Windows 8 SDK which can be found here.

Call for Speakers – Fall 2012 ClientDev Connections

dwahlin — Wed, 14 Mar 2012 02:32:51 GMT

John Papa and I just sent out a call for abstracts for the upcoming Fall 2012 DevConnections conference to be held in Las Vegas, NV. If you’re interested in presenting on client-side development topics such as HTML5, CSS3, JavaScript, jQuery (or another JavaScript library), Silverlight 5, Windows 8 Metro style app development, or other related topics please submit session ideas. If you know someone else who may be interested, please forward the information. Here’s the official announcement that was sent out.

Call for Speakers – Fall 2012 ClientDev Connections

We’d like to extend an invitation to submit abstracts for consideration to speak at the Fall 2012 Microsoft ClientDev Connections conference (part of DevConnections) in Las Vegas, October 29th – November 1, 2012. Pre-con workshops will be October 28th and post-con workshops will be on November 2nd. This is one of the new tracks at DevConnections focusing on client-side development technologies such as HTML5/CSS3, JavaScript technologies, Silverlight, and Windows 8 Metro-style apps.

The deadline for submissions is Monday, April 2nd, 2012.
To submit sessions please use this URL: http://www.deeptraining.com/devconnections/abstracts

Please keep the abstracts under 200 words each and in one paragraph. No bulleted items or line breaks, and please use a spell-checker. Do not email abstracts, you need to use the web-based tool to submit them.

Please submit AT LEAST 3 abstracts. There are are a limited number of speaker slots so it will help your chances of being selected if you submit 4 or more abstracts. Also, you are encouraged to suggest all-day pre or post conference workshops as well. We need to finalize the conference content and the track layout in just a few weeks, so we need your abstracts no later than Monday, April 2nd, 2012. No exceptions will be granted on late submissions!

Topics of interest include (but are not limited to):

* HTML5
* CSS3
* JavaScript development techniques
* jQuery or other script libraries
* Silverlight 5
* Windows 8 Metro-style apps
* XAML design concepts
* Anything else related to client-side development

Please realize that while we want a lot of the new and the cool, it's also fine to propose sessions on the more mundane "real world" stuff as it pertains to client-side development.

What you will get if selected:

* $500 per regular conference talk.
* Compensation for full-day workshops ranges from $500 for 1-20 attendees to $2500 for 200+ attendees.
* Coach airfare and hotel stay paid by the conference (up to $500 is covered for your flight)
* Free admission to all of the co-located conferences
* The adoration of attendees

To repeat: the deadline for submissions is Monday, April 2nd, 2012 and the URL once again is http://www.deeptraining.com/devconnections/abstracts

Your continued support of DevConnections conferences is appreciated!

Dan Wahlin & John Papa
Microsoft ClientDev Connections Conference Chairs

jQuery Tip #6 – Creating a Custom jQuery Selector

dwahlin — Tue, 13 Mar 2012 07:06:00 GMT

Previous Tips:

Selectors are a key part of jQuery and one of the features that have made it so popular over the years. If you've worked with jQuery then you've used different types of native selectors including tag name, ID, class name, and others. jQuery also provides selector extensions that add the ability to search children in a given parent by position, locate input elements, find even or odd elements, and much more. Examples of custom selector extensions in jQuery include :eq(), :hidden, :gt(), :visible, and many more. A complete list of the selector extensions built into jQuery can be found at http://api.jquery.com/category/selectors.

While most jQuery developers know about selector extensions, many aren't aware that you can write your own custom selectors quite easily. Although custom selector extensions certainly aren't required, they can be useful in situations where you find yourself writing the same type of code over and over and you want to simplify things as much as possible. For example, assume that you have the divs shown next defined in a page and you'd like to write code to display all hidden divs (this code is a bit contrived in order to demonstrate a point – I'd stick with consistently using CSS class names in a real app).

<div class="panel hidden">
    Panel 1
</div>
<div class="panel" style="visibility:hidden">
    Panel 2
</div>
<div class="panel" style="display:none;">
    Panel 3
</div>
<div class="panel">
    Panel 4
</div>

If you wanted to show all panels that have the hidden class on them or those that have a style of display:none or visibility:hidden set then you might write code similar to the following. This code gets run as a button in the user interface is clicked.

$('#showPanelsButton').click(function () {
    $('.panel').each(function () {
        var $pnl = $(this);
        if (($pnl.css('display') == 'none') ||
             $pnl.css('visibility') == 'hidden' ||
             $pnl.hasClass('hidden')) {
            $pnl.removeClass('hidden')
                .css({ 'display': '', 'visibility': '' });
        }
    });
});

While there's nothing wrong with this code, if you find yourself needing it in multiple places you'll either refactor it into a function (the preferred approach) or copy it around throughout one or more scripts. Another technique that can be used is to write a custom selector. By creating a custom selector you can encapsulate the code into a re-useable function and use it directly within your jQuery selectors.

Creating a custom selector is accomplished by using jQuery's extend() function, defining the expression that needs to extended (the : character in this case), and then associating a selector name with a function that determines what nodes make it into a set and what nodes are excluded as the custom selector is used. This may sound at little complex at first glance but it's surprisingly simple once you see the pattern. The following code shows how the code shown earlier can be refactored inside of a custom selector.

$.extend($.expr[':'], {
    hiddenPanel: function (pnl) {
        if (pnl == null) return false;
        var $pnl = $(pnl);
        return $pnl.css('display') == 'none' ||
               $pnl.css('visibility') == 'hidden' ||
               $pnl.hasClass('hidden');
    }
});

Looking through the previous code you'll see that we start by calling jQuery's extend() function and pass it the expression that we'd like to extend (: in this example) as well as an object literal that defines the custom selector name and the function that will be called once it's executed. In this example the custom selector is named hiddenPanel and when it's used in a jQuery selector the function will check if the node that's passed in has its display set to none, visibility set to hidden, or if it has a CSS class on it named hidden. If any of the conditions are met the node is included in the set and returned to the caller. If the node doesn't meet any of the conditions it will be excluded.

The following code demonstrates how to use the hiddenPanel custom selector:

$('#showPanelsButton').click(function () {
    $('.panel:hiddenPanel')
       .removeClass('hidden')
       .css({ 'display': '', 'visibility': '' });
});

Live Example

If you’re interested in learning more about jQuery or JavaScript check out my jQuery Fundamentals, Building ASP.NET MVC Apps with EF Code First, HTML5, and jQuery, or Structuring JavaScript Code courses from Pluralsight. We also offer onsite/online training options for companies as well at http://www.thewahlingroup.com.

Conclusion

The custom :hiddenPanel selector is now available to use anytime you're working with selectors. By creating a custom selector it's straightforward to look for hidden panels, get a set of nodes that match the conditions defined in the selector, and then modify the nodes. Although this simple custom selector example may not necessarily apply to your own application, knowing how custom selectors can be created and used is useful in a variety of scenarios.

Creating Metro Style Icons with Metro Studio

dwahlin — Tue, 06 Mar 2012 15:15:49 GMT

I normally don’t post about 3rd part software or giveaways but I’m really impressed with Syncfusion’s new Metro Studio product after downloading it today (registration required). It’s includes 600 free icons and you can easily customize the icons. I don’t know how long the free offering will last but it’s worth registering to get a key while it’s available (nobody from Syncfusion asked me to post about the program by the way – I just liked it). Here’s what the program looks like (very Metro-ish):

Once you download and install Metro Studio you’ll have access to all of the icons in various categories. That’s fantastic if you’re not super artistic like me since the more icons I have access to the better. What really surprised me though was the editor that’s included in Metro studio since it lets you change things like the size of the icon, padding, shape, background color, and even icon color. Everything can be done visually without having to be a graphics guru….pretty impressive.

In addition to being able to customize the icons, you’ll find a XAML button at the bottom of the editor if you’d like to get pure XAML (useful for Windows Phone or Windows 8 Metro apps built using XAML) and you can get a .png image by clicking the Save button which is great for HTML/JS Windows 8 Metro app developers.

Needless to say, I’m impressed. I’ve come across a lot of icon packages, but the level of customization provided and ease of use makes this little utility stand above anything else I’ve seen and lets non-graphics guys like me get different icons going quickly and easily. I don’t know anyone involved with creating the utility, but I’m really liking it and appreciate the free offer.

My good friend Tim Heuer also has a nice post about Metro style icons and accessing them in Blend. Check it out here.

New Pluralsight Course: Building ASP.NET MVC Apps with EF Code First, HTML5, and jQuery

dwahlin — Sun, 04 Mar 2012 17:40:18 GMT

I just finished up a new Pluralsight course titled Building ASP.NET MVC Apps with EF Code First, HTML5, and jQuery that I’m really excited about. As the title implies, the course provides an end to end look at an application built using ASP.NET MVC, Entity Framework Code First, HTML5, jQuery, and several other technologies. The application is a single-page application that loads the initial screen and then relies on Ajax calls to load data and tiles behind the scenes. Screenshots of the initial concept as well as the resulting application are shown next:

The goal of the course is to provide an end-to-end look at different technologies, show how they can be integrated together, and discuss several best practices that can be used in applications. Most courses focus on a narrow topic (such as my jQuery Fundamentals, Structuring JavaScript, or ASP.NET Web Forms courses on Pluralsight.com) or only focus on getting started with technologies but don’t go into more real-world scenarios. With this course, I walk through building an application from start to finish and discuss data repository classes, creating and using Model classes, ASP.NET MVC controllers and actions, converting Model objects to JSON, client-side technologies such as jQuery, JavaScript patterns, HTML5, Ajax calls, structuring C# and JavaScript code, dependency injection, plus a lot more. If you've been waiting for a course that ties everything together into one cohesive unit then this course will help you out. Here's a quick list of the key technologies that the course covers:

HTML5 features
JavaScript
Modernizer
HTML5 Boilerplate
jQuery along with several jQuery plug-ins
jQuery Templates
Canvas
SVG
JSON and AJAX technologies
ASP.NET MVC (Controllers, Actions, and working with JSON)
Entity Framework Code-First
Repository Pattern for data access
Unity IoC Container
Custom Dependency Resolvers
SQL Server 2008
Nuget

A sample video from the course that shows the application that’s discussed throughout is shown next:

To get the most out of the course I recommend that you have some familiarity with ASP.NET MVC and JavaScript/jQuery. All of the server-side code is written in C#. If you need a refresher on any of those technologies and others check out the following courses on Pluralsight.com:

JavaScript Fundamentals
jQuery Fundamentals (one of my courses)
Structuring JavaScript Code (one of my courses)
HTML5 Fundamentals
Using HTML5 and CSS3
Introduction to ASP.NET MVC 3

Here’s the complete course outline. If you don’t already have a Pluralsight subscription check out their 10-day free trial (and talk to your boss about getting one!). The course can be found here.

Building ASP.NET MVC Apps with EF Code First, HTML5, and jQuery

The Account at a Glance Application
Introduction
Introduction to the Account at a Glance Application
Demo: The Account at a Glance Application
Application Technologies
Project Structure
Demo: Creating the Application Projects
Summary

Working with Data
Introduction
Data Technology Overview
Creating Model Classes
Demo: Creating Model Classes
Creating a DbContext Class
Demo: Creating a DbContext Class
Database Structure
Creating Data Repository Classes
Demo: Creating Data Repository Classes
Retrieving and Storing Financial Data
Demo: Retrieving and Storing Financial Data
Summary

Serving HTML5 and JSON Content
Introduction
Server-Side Technology Overview
Creating ASP.NET MVC Controllers
Demo: Creating Controllers
Demo: Creating DataServiceController Actions
Demo: Creating a Dependency Resolver
Demo: Refactoring ModelContainer
Demo: Disposing of Dependencies
Using HTML5 Boilerplate in _Layout.cshtml
Demo: Integrating HTML5 Boilerplate into _Layout.cshtmlDemo
Working with Views
Summary

Client-Side Functionality
Introduction
Client-Side Technology Overview
Demo: Application Scripts
Defining Tile Layout using Object Literals
Demo: Defining Tile Layout using Object Literals
Demo: The sceneStateManager Script
Retrieving JSON Data using jQuery Ajax Functions
Demo: Retrieving JSON using jQuery
Demo: Interacting with Ajax calls using the Chrome Developer Tools
Rendering JSON Data using jQuery Templates
Demo: Using jQuery Templates
Demo: Viewing jQuery Templates Functionality using the Chrome Developer Tools
Charting Data with Canvas and SVG
Demo: Canvas Fundamentals
Demo: Rendering a Canvas Chart with Flot
Demo: Working with SVG
Integrating HTML5 Video
Demo: Using HTML5 Video
Summary

Additional courses that I’ve published for Pluralsight include:

Looking Forward: Single Page Apps, Client-Side Databinding, Entity Change Tracking, and Windows 8

dwahlin — Sun, 04 Mar 2012 01:41:00 GMT

I had the opportunity to attend the MVP Summit and some other events that were also running up in Redmond, WA for Windows 8 and ASP.NET this past week and if there’s one thing I learned it’s that Microsoft’s developers definitely aren’t sitting around idly twiddling their thumbs. A slew of new technologies are on their way which adds to the fun if you’re someone who enjoys learning, being challenged, and having access to technologies that can help you be more productive. For me personally, that’s the fun of being in the development world. Change is part of the game and embracing it is key to being successful as a developer - at least in my opinion. While it’s true that not every new technology deserves attention (and I’d agree that some technologies seem to move too fast), there were several I saw that have some great potential. The good news is that they’re available to start using or experimenting with now if you’re interested.

So what should you learn and how do you get started? Everything that follows is completely subjective of course, but if you’re a Web developer then knowing JavaScript and jQuery definitely won’t hurt you a bit. That includes developing for Windows 8. Developers skilled in JavaScript/jQuery will definitely be ahead of the game with the new technologies that are coming out. Sometimes it feels like I’m 1 out of 2 total developers on the planet that seem to actually like JavaScript (always have for some reason going back to the mid 90s), but I like the overall direction things are moving especially when I consider what it means for clients using my applications.

Web Development Technologies

For Web developers, there are several technologies that I think are worthy of taking a closer look:

ASP.NET MVC Single Page Applications (client-centric application relying on JavaScript, uses Knockout and Upshot, can work on the desktop browser or on mobile devices)
ASP.NET Web API (new server-side API for serving different data formats to a variety of applications)
Knockout (client-side databinding, templating, and more)
Upshot (client-side data sources, tracking client-side insert/update/delete changes, accessing server APIs using Ajax)

ASP.NET MVC Single Page Applications provide a flexible, client-centric way to build applications. They rely on ASP.NET MVC which renders the initial HTML, JavaScript libraries such as Knockout and Upshot for data binding and data access, and the ASP.NET Web API for serving and modifying data on the server. Many of the technologies could be used on their own as well in standard HTML pages. Single Page Applications add support for additional functionality that most Web applications don’t normally have including history support, deep linking, and offline applications. Check out Steve Sanderson’s presentation at TechDays for a nice overview of what can be done with Single Page Applications. I’m starting work on a new course for Pluralsight that will cover the ins-and-outs of building ASP.NET MVC Single Page Applications and using technologies like the Web API and Upshot and am really excited about the functionality Microsoft is providing in this space.

If you already know JavaScript, jQuery, and related technologies then I’d highly recommend jumping into technologies like Knockout since it’s well established, adds a tremendous amount of productivity to your arsenal (two-way databinding in HTML pages anyone?), has great samples, and a large following on the Web. My good friend John Papa has an awesome course on everything you need to know to get started with KnockoutJS on Pluralsight that you can find here. I highly recommend it if you’d like to learn more about using Knockout in your Web applications today.

Here’s a description of the course:

Do you write a lot of HTML, JavaScript, and jQuery to push and pull data? Does your JavaScript seem to lack the structure and patterns of your non script code? In this course you will learn popular techniques to use data binding to bind your data to your target controls in HTML writing less code, but gaining more power. See how to consume json data, use json objects in JavaScript, and use declarative binding all by using the KnockoutJS JavaScript library. Learn how the XAML data binding paradigm has been brought to the web world with observable objects, change notifications, subscriptions, and 2 way bindings. Explore modern JavaScript patterns and practices that follow the SOLID principles, reduce errors in your code, and make code easier to maintain. After taking this course you will have a solid foundation for building robust web apps using common JavaScript patterns, MVVM, and KnockoutJS.

Desktop (or Web) Development Technologies

Microsoft just released the Consumer Preview of Windows 8 and I’ll admit I’m really excited about it – especially the opportunity that the App Store presents. I have it running on both my laptop and desktop machines at this point. Check out Scott Hanselman’s post on setting up a bootable VHD if you’re interested in getting it going without messing up your existing OS. See my previous post titled Why I’m Excited about Windows 8 for additional details on why I’m looking forward to the new OS.

From a development standpoint, you have two options for building Windows 8 Metro style Apps that will be deployed in the upcoming Windows App Store:

Build XAML applications with C#, C++, VB, etc.
Build HTML5/JavaScript applications

If you’re already building WPF or Silverlight applications then the move to XAML-based Metro Apps will be relatively painless. Sure, you’ll have to learn the new WinRT namespaces, classes, and overall API, but things map up pretty nicely with the stuff you’re already used to. I’m a big fan of XAML based on my experience with Silverlight and WPF so it’s exciting to see that the skills I already have in that area can be leveraged to build Metro Apps.

If you’re building Web applications you can use your existing skills to build Metro Apps as well. That includes using HTML5, JavaScript, jQuery, and other popular libraries out there. By default, applications rely on WinJS scripts for rendering UI, performing animations, using platform controls, performing data binding, etc. but you can certainly use other libraries as well to perform a variety of tasks. Although the apps are written using HTML5 and JavaScript, they’re packaged up and can be placed in the Windows 8 App Store for consumers to download.

Developers building Windows Forms, WPF, or Silverlight apps can also target the desktop mode of Windows 8 (non-Metro Apps) and existing applications are supposed to port over nicely to Windows 8 (I haven’t had a chance to validate this claim yet but everything I’ve tried over the past few days has worked perfectly). That means that various types of desktop applications can still be used just as they are on Windows XP, Vista, or Windows 7.

John Papa and I put together a course on getting started building Windows 8 Metro Apps if you’re interested in jumping into that arena that can also be found on Pluralsight.

Here’s a description of the course:

Windows 8 Metro style apps provide a new opportunity for developers to interact with users and provide a more immersive experience on the desktop or on touch devices. This course covers fundamentals you need to know to get started building Metro apps quickly using Visual Studio 11. Topics covered include an overview of Windows 8 and Metro app features as well as key features that you need to know to build HTML/JavaScript or XAML/C# Metro apps.

Summary

There’s a lot of new technology coming our way in the near future. Some of it may change how we write existing applications and some of it may go the way of the Dodo and be extinct in a few years. It’s always hard to know what technologies to tackle but I’m betting on many of the technologies I discussed here sticking around for quite awhile. While it’s not all roses, I definitely feel excited about the future of Web and Desktop development and like the overall direction that Microsoft is going.

Video: Structuring JavaScript with the Revealing Module Pattern

dwahlin — Mon, 27 Feb 2012 07:16:53 GMT

This sample video from Pluralsight’s Structuring JavaScript Code course provides an introduction to the Revealing Module Pattern and demonstrates how it can be used to convert “function spaghetti code” to more structured code that’s re-useable and easier to maintain. If you’d like additional details about using the Revealing Module Pattern as well as other patterns that can be used to structure your JavaScript code view my post here.

Additional courses that I’ve published for Pluralsight are shown below: