Click Here to Redeem the Exclusive Offer for John Papa’s friends from Fotolia:

Fotolia provides me access to affordable images that I can use legally for my videos/presentations (see their terms for full details). I am always careful to make sure that when I use images I verify that I have rights to do so. Fotolia has been a great source for images and they confirmed that in my case it is OK according to their terms. Of course, please read their terms for yourself. In my case it works as long as I do not distribute the original images, which is fine by me.

Free Trial Subscription

This trial offer gets you a 1 month Monthly Subscription for 25 downloads with Fotolia. They’ll ask for your billing information, but you won’t be charged unless you continue with a paid membership after the trial. You can cancel your subscription at any time.

The subscription is a great way to go as you can get the highest available file size, and the images download directly on to your computer. They even have a direct link to download them to your DropBox (which is what I do).

Pay as You Go

The simplest option is to just buy some credits. The deal they set up will give you 50% more Credits on your first purchase and get an additional 5 Credits free.

See them in Action

My new course Pluralsight course “The Art of Public Speaking and Effective Presentations” provides a road-map for delivering effective presentations and motivating an audience through forming your message, designing visuals and demos, preparing for the unexpected, and effective delivery strategies. By the end of this course, you will learn many techniques on how to become a more effective presenter. Along the way you’ll find tips from many accomplished speakers including some of your favorite Pluralsight authors.

Disclaimer: I have purchased 40+ images from Fotolia.com using their credit based options and spent over $200 before switching to a subscription. I was very happy with what I got for $200 but the subscription is much cheaper if you want many images. I contacted Fotolia to see if we could work out a discount for a future subscription since I use them so much and they agreed to give me one. In addition they also offered to give a discount to anyone I refer to Fotolia.

Toastr is a simple JavaScript toast notification library that is small, easy to use, and extendable. It allows you to create simple toasts with HTML5 and JavaScript like this:

Simply include the files in your HTML page and write a simple line of code like this:

var msg = 'Are you the six fingered man?';
var title = 'Inigo Montoya';
toastr.success(msg, title);

Click the this button to try it yourself.

Try Toastr

Get Toastr 1.3.0

You can grab the latest bits from NuGet or github

• Install toastr from NuGet
• Fork toastr on github

What’s New in 1.3.0

• Added onFadeIn and onFadeOut callbacks.

toastr.options.onFadeIn = 
    function() { 
        console.log('hello'); 
    };

• Added option newestOnTop to show toasts in oldest or newest first order.

toastr.options.newestOnTop = false;

• Fixed margins on full width toasts
• Added LESS file.
• Added min file for JS and CSS
• Added missing vendor prefixes in CSS.
• Various minor bug fixes.
• Added unit tests for new features.

Live Demo

Needs more information? Check out the readme on the github page for details on the simple API. You can also find a link to the live toastr demo on github or you can go directly to the toastr demo from here.

Some of these features came right from pull requests from Toastr users. If you have an idea for Toastr, feel free to contribute and make a pull request. just be sure to also include unit tests to cover any code changes.

My new course Pluralsight course “The Art of Public Speaking and Effective Presentations” provides a road-map for delivering effective presentations and motivating an audience through forming your message, designing visuals and demos, preparing for the unexpected, and effective delivery strategies. By the end of this course, you will learn many techniques on how to become a more effective presenter. Along the way you’ll find tips from many accomplished speakers including some of your favorite Pluralsight authors.

Main Focus

In the course I emphasize the importance of preparation and give practical examples that you can use in your own presentations. It all starts with your message. That’s message in the singular form, because I truly believe that the most effective presentations have 1 true message. There may be many factors and mini stories in the presentation, but they all should point back to emphasizing that message. Then I flow through how to tell a story around your message, how to prepare visuals and demos, and how to deal with the unexpected. I then move into a few factors that can really help you once you are delivering your presentation.

Topics

Here is the flow of the course:

• Public Speaking
• Finding and Crafting Your Message
• Tell Your Story
• Organizing Your Flow and Your Visuals
• Demos
• Preparing for a Series of Unfortunate Events
• Emotional Intelligence and Communication
• Effective Delivery
• Epic Successes and Failures

I hope you enjoy it!

If you enjoyed my Single Page Application Jump-Start course, you will be happy to learn that the source code for the final SPA Jump-Start solution is now available! The great folks at Pluralsight worked with me to host the final solution of Code Camper Jump-Start (CCJS) on GitHub. You can grab the code, fork it, make pull requests, or just browse!

My SPA Jump-Start course helps you walk through and build CCJS step by step. The step by step code is exclusively available to Pluralsight Plus subscribers and the final source is now hosted in this GitHub repository.

I hope you enjoy the code and thank you for watching my courses!

You can learn more about AutoHotKey and other presentation tips in my upcoming Pluralsight course “The Art of Public Speaking and Effective Presentations”

You could use notepad, a snippet tool, or even the toolbox in Visual Studio. But AutoHotKey provides more than those and it is a free tool. For example, AutoHotKey works in any editor. Create a script where you define your keystrokes and map them to code that will be pasted.

How it Helps

Lets say you are in a presentation and staring at a mostly blank code file. You are supposed to be typing in 30 lines of code from scratch. Instead of typing and making mistakes along the way, copying and pasting code, pulling in finished solutions, or using a toolbox, etc … you can type the code in chunks. Point by point you fill in the blanks by typing custom keystroke mappings that you define.

Often I will start with a blank code file and then use bookmarks in Visual Studio to define where I want my code to go. Another technique I use is to start with an empty file that contains comments where the code should go. This way I know where each snippet should be entered.

Creating a Script

First, create a file with an *.ahk extension. Then edit that file in notepad, notepad++ or any other text editor.

Next, create a keystroke mapping that when typed, and followed by a TAB keystroke, will paste your code snippet. The keystroke mapping should be surrounded by colons. Specifically, put 2 colons before the mapping and 2 colons after the mapping. Like this: ::demo01:: . Then when you type demo01 followed by a TAB you should expect your code to be pasted.

Wait, what code? Right, it’s time to show how to define the code that will be pasted. Following your keystroke mapping type Clipboard = ( ). This means when you type your keystroke mapping that it will copy whatever is inside the parenthesis to the clipboard of your PC. Easy enough. So this is where you put your code!

Put your code inside these parentheses, taking care to make sure you use the proper whitespace. Whatever you put in here is exactly what goes to the clipboard.

Finally, now that you have told AutoHotKey what to move to the clipboard, you need to tell it to paste the code. You do that by sending the paste command using send ^v and wrapping up with the return keyword.

The sample below puts this all together.

::demo01::
Clipboard = 
(
        var saveChanges = function () {
            return manager.saveChanges()
                .then(saveSucceeded)
                .fail(saveFailed);
            

        };
)
send ^v
return

Normally, I will have a few of these keystroke mappings in a ahk file. When you install AutoHotKey it adds a feature where you can right click a ahk file in windows explorer and then compile it. So you can compile the script by right clicking the file and choosing compile script. This creates an executable file, which of course you run.

Once the file is running, anytime you use the keystroke mappings followed by a TAB your code will be pasted (as long as you are in an editor of some sort).

This makes it really simple to create a script with a bunch of code snippets that you can type on the fly!

Try It Now

You can download a sample script (also shown in my new Pluralsight course) right here. Try this out by downloading and installing AutoHotKey, compiling the script, running it, then typing the keystrokes in an editor.

Learn more about Durandal and these topics from my beginner level SPA JumpStart course for Pluralsight.

I’ve spent a lot of time lately with JavaScript both with and without libraries, and while I love vanilla.js (just using JavaScript as it is powerful on its own), I prefer to take advantage of well built and stable libraries such as Durandal, Knockout and Breeze.

Go deeper on how to build a SPA from my intermediate level SPA course for Pluralsight.

Learn more about Knockout.js and data binding in JavaScript Knockout course for Pluralsight.

Breeze.js is a client side JavaScript library that manages rich data. Before Breeze existed, I wrote a SPA and it had 20 JavaScript files and modules for data management that total about 1550+ lines of code. I wrote all of this code to do a fraction of what Breeze does. It was painful to write and every time I added a new entity or CRUD method it got much bigger. I rewrote this logic using Breeze and ended up with 2 files (datacontext.js and model.js) and had 350+ lines of code, more functionality, and every time I add a new entity the code increases by just a few lines. That’s 1/4 the code, about 1/4 the time, and a more value. Does that interest you?

Remember Upshot?

You may recall a library that the ASP.NET team started a while back called Upshot.js. Upshot had a lot of promise for rich data management, but was dropped due to resources. That left the door wide open and in came a Breeze. Breeze does quite a bit, including making all entity properties observable (for Knockout), but for this post let’s focus on the features below as they are proof enough that you should take it seriously:

• Caching and Sharing
• Easy Queries
• Object Graphs
• Works with Knockout and Angular
• Support

Learn more about Durandal and these topics from my beginner level SPA JumpStart course for Pluralsight, available now.

Separation

I choose to use separation patterns. So my data logic goes in a datacontext module in JavaScript. It exposes that data logic to the view models or controllers on the client. I slide Breeze right inside of the datacontext and expose a simple API so my viewmodels and controllers can share the datacontext. This makes it easy for the viewmodel to call for data doing something like datacontext.getCustomers or datacontext.Save.

Caching and Sharing

Let’s say you have an app with customer data. You may show customer information on views for a customer list, customer details, orders, sales, reports, and more. If you change a customer’s name or other information in one view, you expect it to ripple throughout the app. If you get the customer data in each viewmodel and store it separately, this becomes problematic. Sure you could use events to communicate with them all, but then you are storing that customer data in several places: not very DRY.

Breeze helps cache the customer data the first time you get it. Then when you go to another view that needs that data, Breeze supplies it. By wrapping this all in the datacontext, you have one place to go for your data. If you update the customer, Breeze has 1 copy of it and all places that point there are updated. Pretty slick!

Easy Queries

A library isn’t valuable unless it’s you can use it easily. Who wants to maintain something convoluted? Not me. Words can’t say how easy it is to query Breeze. So let’s just look at some examples.

var query = breeze.EntityQuery
           .from("Customers")
           .where("CompanyName", "startsWith", "A")
           .orderBy("CompanyName");

var promise = manager.executeQuery(query)
              .then(querySucceeded)
              .fail(queryFailed);

This code creates a query that gets customers whose company name starts with the letter A and orders them by the company name. Then the query is executed against the remote data service and the data is returned through a promise. Pretty simple and self-explanatory.

Object Graphs

Real apps use object graphs. Real apps need to navigate between the entities in an object graph (both parent-child and child-parent). Real apps can be difficult. Breeze can retrieve object graphs and make it easy to navigate their relationships. Go from customer to one of their orders to one of the order details, and then back up if you like. Grab an entire object graph in one call or just get the top-level. Whatever you need, it’s pretty great to be able to get parts of or entire object graphs as needed.

Breeze allows you to connect objects on the client that you retrieved in separate calls, too. For example, go get a list of sales people objects (for customers). Breeze caches the sales people entities. Then go get a list of customers and their orders and Breeze caches those too. breeze also sees that the customer objects have a salesperson. We already have the sales people in cache so Breeze connects the entities and allows you to navigate between them. So as you get the data Breeze connect them in its cache.

Knockout and Angular

Breeze is built to adapt to other frameworks. So if you want to use Angular, Knockout, or Backbone you are in luck: Breeze is very happy to work with all of those. Out of the box Breeze works with Knockout, but you can change the adapter setting and switch to using Angular or Backbone. This gives Breeze a big advantage for future proofing in case you want to use one of these frameworks now and in the future choose a new popular framework.

Here is an example of getting employee data with Breeze and data binding the resulting entities using Knockout.

<!-- Knockout template -->
<ul data-bind="foreach: results">
  <li>
    <span data-bind="text:FirstName"></span>
    <span data-bind="text:LastName"></span>
  </li>
</ul>
 
// bound to employees from query
manager.executeQuery(breeze.EntityQuery.from("Employees"))
   .then(function(data){ 
       ko.applyBindings(data);
    });

Here is an example of getting employee data with Breeze and data binding the resulting entities using Angular.

<!-- Angular template -->
<li data-ng-repeat="emp in employees">
    <label>{{emp.FirstName}}</label>
    <label>{{emp.LastName}}</label>
</li>
 
// bound to employees from query
manager.executeQuery(breeze.EntityQuery.from("Employees"))
   .then(function(data) { 
       $scope.employees = data.results; 
    });

Need SPA Support?

Want someone to have your back? The folks who make Breeze licensed it with an MIT license. They also offer support and consulting services for building a SPA with Breeze using technologies such as Durandal, Knockout, Backbone and Angular. IdeaBlade has been in the rich data business for a decade and has a great track record in this space with various other products. Breeze is their answer to the JavaScript and web space. So if you need support for your project, check out your options here.

What Else?

Do you want to save entities to local storage and later pull them back into Breeze? No problem. Do you want to query locally first and if the data is not there go to the remote service? No problem. Do you want the client to tell the server to do server-side paging and filtering? No problem! Breeze can do quite a lot and has saved me tons of code in my apps. I highly recommend checking it out.

SPA Jump-Start Series

• Beginning SPA – Part 1
• SPA Architecture – Part 2
• Durandal – Part 3
• Breeze – Part 4

This is an April Fools Day joke … leave your sighs at the door. It fully entertained my children

What You Need To Know

These are issues that many HTML app developers face. You could code this “plumbing” yourself but it would quickly become something you’d feel should be shared to all of your projects. You need to handle application life-cycle for those common situations. When does your VVM load? When does it go away? What if you want to prevent (or at least interrogate) a user leaving a View/ViewModel? How do compose the View and the ViewModel? App life-cycle and VVM Composition is a critical piece of an app. How do you intercept url navigation and keep the user on the client? These 3 areas are where Durandal can really make a positive difference.

• URL Routing
• VVM Composition
• App Life Cycle

Learn more about Durandal and these topics from my beginner level SPA JumpStart course for Pluralsight, available now.

Durandal

In a SPA it’s pretty darn important to be able to show a View, pair it with a ViewModel, and be able to hook into events in the app’s life-cycle. Durandal makes this super simple. You may not have heard of Durandal before as it is a newer player in this field, but it is built by the makers of Caliburn Micro, a very popular MVVM framework for .NET and XAML. It follows convention over configuration, which simply means if you name things certain ways, they just work. Kind of cool Of course you can override those conventions yourself too.

Is it worth learning? Yes! I rewrote my entire demo app in just a few days using Durandal and was able to reduce the code base considerably, and end up with a more fully featured app. The end result was well worth it and you will see Durandal through my course and as a featured player in Hot Towel.

Sure, Durandal has a lot of features, but let’s focus only on these 3 areas any serious SPA has to deal with: routing, app life-cycle, and composition.

URL Routing

Most apps have more than 1 View. So how do you go from View A to View B in a SPA without hitting the server for a page refresh? The answer routing (aka navigation). Let’s say you have a Sessions View and a Speakers View. You want to navigate from one to the other and stay on the client. Durandal can you help you do this.

You simply tell Durandal which routes to listen for. When It sees a route in the address bar it does a pattern match against it and if it is a route you defined, then it will not go to the server and instead it will marry up the V and VM pair.

// Inside a shell ViewModel

// Get the router module (Durandal provides this)
var router = require('durandal/plugins/router');

// Define the routes and look 
// for a V and VM pair both with the 
// same name, by convention
router.mapNav('sessions');
router.mapNav('speakers');

function activate() {
    // Tell the router to start listening for 
    // routes and where to start
    return router.activate('sessions');
}

You can override the default conventions and place your V and VM anywhere you want, but this code shows the easiest path. Make careful note that the activte method has a return statement. Durandal runs on promises, which are the promise that a method will return an answer to the code. The activate method of this code is called (we’ll see more in a bit on this) and waits to hear back for the code to be done. This is where the return router.activate statement kicks in. Without this, the caller would not know when it was done.

VVM Composition

You can put a V and VM together anywhere you like in the HTML. Usually I name my root HTML page shell.html. This is like my master page where I lay out the set of areas I want to compose V and VM pairs. I may have a header, content and footer areas, vertically. Or perhaps a dashboard with 4 content areas, 2 tall by 2 wide. How you lay it out is up to you.

Once a route is invoked you want to pair the V and VM and make the V appear in the right area. We do this through composition. Notice the image below shows the HTML section tag contains a compose binding. This is a custom Knockout binding that Durandal uses to help you compose the V and VM.

The section tag will go get the current item that was navigated to and find its V and VM pair. It will place the View in this HTML tag and when it is done, it will invoke the afterCompose (this is a handy feature that enables things like turning of a progress bar while composing). You can also use the entrance transitionwhich comes with Durandal or write your own to animate the arrival of the V.

   <section data-bind="
            compose: {model: router.activeItem, 
            afterCompose: router.afterCompose, 
            transition: 'entrance'}">
    </section>

If you want more areas, just create more HTML tabs and compose bindings. You can also make a V share a VM, as I explain more in my course. This is handy for composing a few Views that all share a VM.

App Life Cycle

The life-cycle of your VVM pair is important. You may need to load data when you crank up a VVM pair. Maybe you want to perform some logic before you leave a VVM pair. You can do this easily with Durandal.

Durandal will look for these 4 methods in your VM. When one of the events occurs, Durandal will look in your VM and if it finds one it will invoke it. They are pretty self explanatory.

• activate
• deactivate
• canActivate
• canDeactivate

If you want to cancel one of the can events, then return false.

// Inside your ViewModel
var canDeactivate = function () {
    var title = 'Do you want to leave?';
    var msg = 'Navigate away and cancel? ';
    return app.showMessage(title, msg, ['Yes', 'No '])
        .then(function (selectedOption) {
        if (selectedOption === 'Yes ') {
            // Call some cancel function
            cancel();
        }
        return selectedOption;
    });
};

return {
    activate: activate,
    canDeactivate: canDeactivate //,
    //...
};

There is so much more you can use Durandal to do, but these 3 concepts are absolutely huge in helping build a SPA. If all you use it for are these 3 tips, then you are getting your value.

Next time I’ll talk a about how to get rich data using BreezeJS.

SPA Jump-Start Series

• Beginning SPA – Part 1
• SPA Architecture – Part 2
• Durandal – Part 3
• Breeze – Part 4

Many JavaScript Libraries

You may look and think, wow, there are a lot of JavaScript libraries in this project. The “Many” is subjective based upon your perspective. Is 3 many? Is it 10, 20, 30 ? I think it depends on who you ask. Let me put it another way: if you work on a ASP.NET MVC project take a look at all of the dll’s in your references folder. How many is too many there? I bet they don’t bother most folks. Rarely do I hear complaints about that. Is it because Microsoft put them there? Or is it because they are out of sight out of mind? Or possibly we are just used to them being there.

Now let’s take a look at the 3rd party JavaScript libraries I included in my course and in the Hot Towel SPA template.

My point is that the number of JavaScript libraries I use is dependent on the value they offer. If a library offers more value to me than me writing it, then I am fine using it.

Note that I rolled up the min versions using a feature of VS 2012. Some people remove these files, others leave them alone. Choose your own adventure

<Content Include="Scriptsjquery-1.9.1.js" />
<Content Include="Scriptsjquery-1.9.1.min.js">
  <DependentUpon>jquery-1.9.1.js</DependentUpon>
</Content>
<Content Include="Scriptsjquery-1.9.1.min.map">
  <DependentUpon>jquery-1.9.1.js</DependentUpon>
</Content>
<None Include="Scriptsjquery-1.9.1.intellisense.js">
  <DependentUpon>jquery-1.9.1.js</DependentUpon>
</None>

Tracking Dependencies

I had a comment recently on a discussion board for my latest SPA JumpStart course at Pluralsight. “TheWayItIs” explains

My concern comes with the many code libraries and hierarchical dependencies of your patterns upon these.This in itself seems to become spaghetti of external dependencies on your patterns.

I already know these things, and that is the heart of the problem. I’ve gone through this jungle and come out the other end. Seeing the relationships and dependencies between these libraries is clear to me now. However, that is because I now know what to look for and how they all work together. Further, the patterns I employ help clarify this for new libraries and dependencies I may add or remove in the future. Now that I have this knowledge, it is more difficult to imagine what it is like to be without the knowledge. It is like this for anyone who tries to explain something that they know to someone who doesn’t know. I have to break it back down to the time when I lacked it. This is my job: to walk through these issues and show you what to look for and how to gain this clarity.

The dependencies are handled by 2 main players: the require.js and the module pattern. The module pattern separates code into more files, where each file has one specific role. then require.js helps load those dependencies between modules in their proper order. This is over simplification, but really, that’s the key to this point: it doesn’t have to be complex.

Keep your code separated and let require.js handle dependencies.

I’ve been a .NET coder since the beginning and I use these same concepts with .NET. It all falls down to Single Responsibility Principle (SRP). Keep your code separated (and do not repeat yourself) and you gain code re-use, reduce bugs, make it easier to maintain, and can scale easier.

Production Capable?

The same person on the discussion thread at my SPA course also asks

… are you proposing your sessions as production capable patterns relying on these many libs or should we view these patterns as useful for an expiring app such as a code camp with speakers?

My answer is yes. Yes these libraries and patterns are production capable right now, today, this moment (notice the pun on moment.js). Of course patterns and libraries evolve.

Why Introduce New Libraries?

Case in point is that I knew Durandal.js and Breeze.js were being developed when I wrote my intermediate SPA course. They were not ready for apps at that time (this was last summer), so I wrote replacements by hand. This accomplished a few things. First, when you go through my intermediate course you understand the complexities of solving these problems that these 2 libraries solve for you. Why? Because I walked through how to do it all manually and it was much more work. Second, there is value in seeing how this all works so you do not have magical black boxes solving your issues. Not that you want to recreate the wheel, but its important to know how a wheel rolls. Finally, after going through that experience, you now understand and appreciate the value of Durandal and Breeze much more than if you had not seen how to do it all by hand.

Clarity

Clarity won’t come in a heartbeat, but rest assured that it will come. Just like 100′s of files in .NET appear manageable to you today, the amount of JavaScript won’t appear so daunting. You’ll see that many of the important patterns you know so well in .NET are still there in JavaScript. Organizing your code in .NET is slightly personal preference … it’s the same with JavaScript/HTML. You’ll find the arrangement that works for you and find your chi.

These were awesome questions and they deserved some time in print. I hope they help you!