JohnPapa.net

International Code Sharing

Fri, 04 May 2012 14:21:29 GMT

A Swede, and Italian/American, and a … Ward Bell walk into a bar …

OK, so I don’t exactly know what Ward Bell is (besides a great friend and brilliant colleague). And what’s he doing walking into a bar with a Swede? And how did they do that since Ward lives in San Francisco, CA and Hans Fjällemark lives in Sweden? And why did they invite me, the Italian/American, since I don’t drink? They went to the bar to share code ideas, of course!

I’ve always enjoyed working on side projects with friends so I could share ideas and bounce crazy ones off each other. The ultimate result is better code and a lot of fun. Ward and I have been friends for years and we often chat over the 3 hour time different from Florida to California via Skype while working out different patterns for building apps. One project Ward was instrumental in helping me work through was how I use a service locator (aka my ServiceProvider) for MVVM with XAML.

Hans is a new friend who I ran into on Twitter. he lives in Sweden, but thanks to Skype the 8 hour time difference is not a problem. I wanted a designer to help with my JsRender course’s demo layout and he was willing to help out (did a great job too). Together we came up with a nice layout for showing demos and key code concepts. What really helped is that Hans is a good designer and a good developer. Later, Hans and I worked out a bunch of small open source projects, one of which is the recently released toastr on github.

My point here is that all 3 of us have greatly benefited not only by creating better code, but also by motivating each other. Motivation is key so side projects don’t get left hanging (at least for me). And I find it directly helps me to build patterns that I can apply to my day job.

So how does this work? We use a few tools … Skype for IM and screen share, DropBox for instant sharing of ideas, and github for a a private repository and source control.

I highly recommend giving this type of collaboration a try. Find somebody that you know or who is on twitter, regardless if they are down the hall or on the other side of the world. With tools like Skype, DropBox and github there is no reason not to. And who knows, you might meet some great people like Hans and Ward

New Course on JsRender Templating Fundamentals with JavaScript

Tue, 01 May 2012 21:23:46 GMT

Super fast rendering, code-less tag syntax, and no DOM nor jQuery dependency. That’s JsRender!

My latest course JsRender Fundamentals is now available at Pluralsight! Learn how to build fast, robust, and maintainable Web applications with JavaScript, jQuery and JsRender: the successor to jQuery Templates.

Free Preview:

Course Description:

JsRender (the successor to jQuery Templates) is a JavaScript library that allows you to define a boilerplate structure once and reuse it to generate content dynamically. Learn how JsRender brings a new templating library to HTML5 development that has a code-less tag syntax, high performance, no dependency on jQuery nor a DOM, supports creating custom functions, and uses pure string based rendering.

What are the modules?

0: Course Overview

> 1 minute teaser trailer on what the course covers

1: Getting Started with JsRender

This first module sets the foundations for the course by showing you everything you need to know to get started with JsRender and some helpful resources. You'll also learn a few tips on some tools and conventions that may help you along the way.

2: JsRender Core Tokens

This module introduces the core JsRender token syntax for HTML encoding, handling conditionals, expressions, and looping through data. Also covered are how to use JsRender without jQuery and the #data and #index tokens.

3: View Paths, Nesting and Context Changes

This module covers how to manage object hierarchies, changing context, view paths, and contextual parameters using the JsRender features.

4: Managing Templates

This module covers important management and performance tips for your templates using JsRender and jQuery. You will learn how and when to use strings to store templates, how to compile and name 1 or more templates, and how to use external templates.

5: Advanced JsRender Concepts and Tips

This module demonstrates how to create your own JsRender tags, converters and helper functions to create more powerful and cleaner templates through separation of behavior and structure. These tips can create powerful, resuable and more maintainable templates for web applications.

Demos:

The course includes 20+ demos that you can run (some within Visual Studio and others from JsFiddle)

Parting Thoughts:

I extend a sincere thank you to some great folks who helped influence this course through their contributions to open source, the plug in community, and some by helping me vet the content and ideas. They are, in no particular order:

Boris Moore – creative mind behind of JsRender and jQuery Templates
Hans Fjällemark – designed the responsive web design layout for the demos
Ward Bell – helped vet my ideas for the “code concepts” window in the demos

Simple JavaScript Notifications with toastr

Tue, 01 May 2012 13:46:32 GMT

My friend Hans Fjällemark and I have been collaborating on some JavaScript libraries lately and we decided it was time to release toastr, the first of them, on github. Our collaborative organization is under https://github.com/CodeSeven

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:

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

Hans is a great developer / designer and has recently helped me created some nice responsive designs in some demos and Pluralsight courses. You can see the layout he helped design and create in my latest course, JsRender Fundamentals on Pluralsight now.

The API

There are 4 methods to learn. info, warning, success and error. The each have a message and an optional title.

// Display a info toast, with no title
toastr.info('Are you the six fingered man?')

// Display a warning toast, with no title
toastr.warning('My name is Inigo Montoya. You Killed my father, prepare to die!')

// Display a success toast, with a title
toastr.success('Have fun storming the castle!', 'Miracle Max Says')

// Display an error toast, with a title
toastr.error('I do not think that word means what you tink it means.', 'Inconceivable!')

After having it in alpha for a few weeks and accepting feedback on it, we decided today to take it to beta as the API has stabilized.

toastr is Responsive

Just include the viewport meta tag and the toastr-responsive.css, and toastr will adjust to different device sizes. See toastr and its responsive web design here on responsinator.com

Some important links:

see toastr in action at toastr’s demo page here
grab toastr from github at https://github.com/CodeSeven/toastr

What Else Can toastr Do?

Check out the demo for these and other examples of toastr in action.

Override the css classes to change the appearance
Set the fadeOut, fadeIn, and timeOut settings
Set timeOut to 0 to make the toast sticky
Position the toast in the top left, top right, bottom right, or bottom left
Set the message to HTML content and/or wire event handlers up to that content.
For debugging, set the debug info to true to show all of the options and setting in the browser’s console window

Unit Tests

Feel free to check out toastr’s unit tests, which you can run online here. We decided to go simple and use QUnit, which does the job quite nicely.

NuGet

I published a package on NuGet for toastr that you can find here. Be sure to allow searching for pre-release packages (NuGet disables that by default). We do not foresee any changes to the API so this beta should be pretty solid. If we receive no major issues, we’ll go RC very soon.

2 Months with the ASUS ZenBook UX31E

Mon, 30 Apr 2012 14:19:20 GMT

It’s been over 2 months since I’ve been using my ASUS ZenBook UX31E out and about for blogging, surfing, coding, and presentations. I wrote about the slick look of the UX31E and my (poor) opinion of the keyboard and the screen last month and frankly that has not changed. However, I have found the UX31E to be ideal for several situations over that time, so I’ll focus my wrap up on what this sub $1000 ultrabook is good for.

Speed

I give a lot of presentations with multiple instances of Visual Studio and heavy loads of software running on my computer. I won’t suffer a laptop that performs sluggishly in front of a room of developers because it needlessly detracts from the presentation. The good news is that the UX31E is really fast for a small lightweight laptop. I have been able to run multiple demos, powerpoint, presentation tools, and other apps during my presentations and the machine has not missed a beat. The best thing I can say about its performance is that I never once paused for concern over how it was performing on stage.

Projection

It frustrates me to no end when a laptop does not work well with projectors. Laptop is ready to go, you are on stage, you plug it into the projector, and the resolution you want to use is not available. Ugh. The UX31E worked great with many of the projectors I connected to it. Now, this is not often just on the laptop. The projector and video card in the laptop have a lot to do with this too. I bring multiple laptops to presentations (call me careful, call me prepared). The point is that when some of my laptops were not working with the resolution I wanted, the UX31E always came up aces. When giving a presentation the last things you want to worry about are the speed of your laptop and how it will project to the screen. Kudos go to the UX31E on both of these points.

Boot Up / Awake

It really is amazing at how fast this computer comes awake from sleep. Open the lid, count to 3 and before you can do that it’s ready to go. At first I did not appreciate this feature, but after using it for a few months I really grew to appreciate how fast it came awake. I’d be sitting chatting with some folks about code and they’d ask to see a demo. I could just whip out the UX31E, open the lid, and in seconds I was running my demo. Now that is sweet.

Summary

Due to the keyboard responsiveness issue I experienced I found the UX31E not to be good for me for everyday development, but I did find it to be very valuable for travel and presentations. However if you do a lot of presentations and/or travel, this could be an ideal laptop.

… And to be clear …

Disclosure of Material Connection: I received one or more of the products or services mentioned above for free in the hope that I would mention it on my blog. Regardless, I only recommend products or services I use personally and believe my readers will enjoy. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”

New Article on JsRender Templating

Wed, 11 Apr 2012 12:49:13 GMT

Super fast rendering, easy to pick up, no DOM nor jQuery dependency. That’s JsRender. Check out this month’s Client Insight column where I cover the basics of JsRender. And be on the lookout for my new full length course on JsRender, coming to Pluralsight in May 2012.

JsRender is the successor to jQuery Templates created by Boris Moore. It brings a new templating library to HTML5 development that has a code-less tag syntax, high performance, no dependency on jQuery nor a DOM, supports creating custom functions, and uses pure string-based rendering.

So instead of writing code like this:

var i = 1;
$(my.vm.movies).each(function () {
  var movie = this;
  $("#movieContainer1").append(
    "<div>" + i++ + ": " + movie.name + " ("
    + movie.releaseYear + ")</div>");
});

you can write code like this:

<div>
    {{:#index+1}}: {{:name}} ({{:releaseYear}})
</div>

Activating the Nokia Lumia 900 Windows Phone

Fri, 06 Apr 2012 23:27:20 GMT

I received my Nokia Lumia 900 today and was very excited to open it. I had 3 goals for today:

1) activate it

2) make sure my unlimited data plan was still in place

3) get my apps to the new phone

I accomplished 1 and 2 and I am currently working on 3. I’ll be doing an unboxing post shortly after this here.

Disclaimer: this review is purely about the ordering, activation and setup process. So this is entirely on ATT … I’ll be reviewing the phone and the OS in a later hands on post.

Don’t forget the Micro SIM

Make sure you have a micro sim card before activating. If you went from a Samsung focus, like I did, then this will be key.

Activation

This took me about 30 minutes. I tried in vain for 15 minutes online to activate the phone. Eventually, I called Premier Support at 1-866-499-8008 and they had me turn both phones off, call me back on my wife’s cell phone, and then they activated the Lumia 900. In all, it was 30 minutes form when I opened the box and not a great experience, but it certainly could have been much worse. That it did not work online and that the guy kept putting me on hold without explaining anything was not good. But 30 minutes is not terrible. So I give this activation process a generous 7/10.

Data Plan

I formerly had an unlimited data plan on my Samsung Focus. ATT no longer offers that plan. When I ordered the Lumia I made sure that they would put this plan back on my Lumia when I got it. They made a note of it and after 2.5 hours on a Sunday, I felt better about it. Then when I got my phone today I called the number they instructed me to call and they put the unlimited plan back on my phone. I’m very happy that honored their promise and despite the time on the phone, I give this a 8/10. They have me the impression that they will only be doing this for customers who have had the unlimited plan for a long time. Obviously, they are trying to phase it out completely.

Apps

I wish the apps would go to the Zune software so when I reconnect to my PC it would just resync them on the new phone. Or with Windows Live it would be great if it noticed the apps were not there, and asked me if I wanted them to be downloaded and installed. Alas, that’s not reality. I had to go through the marketplace and try to find all the apps I had before and install them 1 at a time. The good news is that they queue them up so I can tell it to go install 50 apps. The bad news is that this process really needs to be much simpler and less user involved. Overall, a 5/10 rating for me.

Overall Activation Process

It took a lot of time on the phone beforehand and during the activation and setup process, which really was not fun. I’d rather be spending that time with my family. In the end, it all works, so I am happy … but I give the activation and setup process 6/10 overall simply for the many hours of effort that I had to put into it Sunday and today.

Nokia Lumia 900 Windows Phone Unboxing

Fri, 06 Apr 2012 23:26:34 GMT

I just activated my Nokia Lumia 900 running the latest Windows Phone OS. I purchased the cyan colored Lumia … or blue to me I’ll post a thorough review later after I get more hands on time with it, but this post is all about first impressions. In short … WOW!

Tip: Click on the photos for the full size versions.

If you want to see my activation process experience, you can check it out here.

It arrived on time, as promised from ATT Wireless, via FedEx. Here is the phone inside the box and then a closeup of the box itself (with my number blocked out).

When I opened the Lumia box, I found a subtle reminder not to text and drive. How’d they know?

Here are the contents of the box laid out on the table. Notice that they sent a funky looking plug and USB cable, that looks oddly familiar. There is also a SIM card door key, that is needed to open the door for the sim card. My device came with a sim card already punched out and installed, which was nice. I was upgrading a Samsung Focus (first edition) to the Lumia on the same phone number. But the sim card is a different size, so they sent a new one and installed it for me.

Here is the Lumia 900 cyan from the powered off state all the way through setup and then its initial powered on state. Took about 8 seconds for the first boot to setup, then just a short bit to entered the setup information.

I had to skip the Windows Live setup because I could not get activated right away. Once I was activated, all was well though.

I set up WiFi first and hooked up gmail, twitter (using Rowi from the marketplace), Facebook, and Windows Live. Took about 1 minute to get these going … so I was very happy with that.

The screen is awesome. Its bigger than the Samsung Focus and the colors just pop. You can see here the Lumia 900 is larger than the Samsung Focus, but only by a little bit. It appears (and feels) slightly thinner than the Focus too.

It looks great, feels great in my hand (heavier than the Focus, but less toy like), and so far is very fast. I’ll reserve judgment on the final review for when I have time to do more hands on with it. But out of the gate, I was very impressed with the device!

Learn About External Templates with KnockoutJS

Wed, 04 Apr 2012 13:13:42 GMT

Templating is a killer feature of many technologies that helps reduce code and make it more manageable and adaptable. Knockout.js has a native template engine (or you can tie in a custom templating engine), but often I like to go a bit further and load my templates from external files. In this month’s Papa’s Perspective column in Visual Studio Magazine I cover the Knockout.js External Template Engine and how it makes using external templates with Knockout.js a breeze. Check it out.

Jim Cowart wrote this library, pushed it to github, and created a NuGet package for it, so there’s no reason not to use it . Just search for “Knockout” and you will find it in NuGet.

I talk more Jim’s templating library and several ways to use templates with Knockout in my in depth Knockout course at Pluralsight. So if you want to learn more, check out Building HTML5 and JavaScript Apps with MVVM and Knockout.

Fundamentals of Windows 8 XAML/C# Metro Style Apps

Tue, 03 Apr 2012 04:15:56 GMT

This is a Windows 8 XAML/C# Fundamentals presentation I gave at the Spring 2012 DevConnections conference in Las Vegas. It covers some of the key topics you need to know to get started building Windows 8 XAML Metro apps including styling, animations, invoking the Windows Runtime (WinRT), the intrinsic controls, and more that will help prepare you to develop Windows 8 Metro style apps.

You can view my other sessions from DevConnections and Orlando Code Camp here:

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.

If you like this you can check out the Windows 8 Fundamentals course Dan Wahlin and I co-authored for Pluralsight.

Whirlwind Tour of Building HTML5 and JavaScript Apps with MVVM and Knockout

Tue, 03 Apr 2012 04:14:48 GMT

This is the Whirlwind Tour of Building HTML5 and JavaScript Apps with MVVM and Knockout presentation I gave at the Spring 2012 DevConnections conference in Las Vegas and in Orlando Code Camp (both last week). It covers some of the key topics you need to know to build web applications using the MVVM pattern with JavaScript and jQuery that consume json data, use json objects in Javascript, use declarative binding, using KnockoutJS.

You can view my other sessions from DevConnections and Orlando Code Camp here:

View more of my presentations here.

The demo code can be downloaded from here and here.

If you are interested in KnockoutJS, you’ll want to check out my course for Pluralsight which covers KnockoutJS in depth.

JsRender Fundamentals: Templating for HTML5 Applications

Tue, 03 Apr 2012 04:14:30 GMT

This is a JsRender Fundamentals presentation I gave at the Spring 2012 DevConnections conference in Las Vegas. It covers some of the key topics you need to know to build web applications with JsRender. Learn how JsRender brings a new templating library to HTML5 development that has a code-less tag syntax, high performance, no dependency on jQuery nor a DOM, supports creating custom functions, and uses pure string-based rendering.

You can view my other sessions from DevConnections and Orlando Code Camp here:

View more of my presentations here.

The demo code can be downloaded from here.

If you are interested in JsRender, you’ll want to check out my upcoming course for Pluralsight (May 2012) which will cover JsRender in depth.

9 jQuery Samples

Tue, 03 Apr 2012 04:13:12 GMT

These are the jsfiddle samples that Dan Wahlin and I covered in our jQuery Fundamentals workshop at DevConnections last week. These were samples we wrote on the fly in http://jsfiddle.net and wanted to share. Enjoy!

Additional jQuery samples covering selectors, DOM manipulation, Ajax techniques, as well as sample applications can be found here.

You can view my other sessions from DevConnections and Orlando Code Camp here:

View more of my presentations here.

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

3 Quick JavaScript Tips for .NET Developers

Fri, 30 Mar 2012 16:16:15 GMT

Yesterday at the DevConnections event I had to make an emergency speaking appearance for a speaker who became suddenly ill. Luckily that talk was a topic I know well (JavaScript intro for .NET developers), I was available, and I didn’t freak out

I grabbed the speaker’s deck and used it as a guideline, but I spent the majority of the time in jsfiddle.net writing examples. The audience was really interactive and grasped the basics pretty quickly. The topics that we spent the most amount of time discussing as a group where regarding namespaces, functions and objects. So I thought I might include 3 of the examples here on my blog.

Namespacing

Namespacing is an important (and easy) way to make sure your objects do not collide with other javascript libraries. There are many ways to handle namespacing, but the way I like to start with is dead simple. This example shows that all variables hang off the ‘my’ namespace. I like using ‘my’ because its short and sweet.

Creating an Object Literal

Objects can be created in a variety of ways. But the most common you will see in demos is the object literal. The reason? Its short and sweet. Objects can be created simply by setting a variable equal to an open and close curly brace pair, as shown below. Then add properties as needed. I often use this syntax for simple objects (not a lot of logic, mostly properties and a few methods).

The ‘this’ keyword does work with the object literal, though once you get into nesting functions it can get unwieldy unless you manage ‘this’. That’s often when I use one of a few techniques such as setting ‘this’ (at a place where you know what ‘this’ represents for certain) to a variable called self. But I’ll hit that topic in a later post.

I most often use object literals for passing arguments to functions

Creating an Object from a Function

You can also create objects through functions. While I prefer using a pattern such as the Revealing Module pattern for this, the simplest way to create an object from a function is shown below. Note that use of ‘self’ in here to represent ‘this’. It may not be needed in all cases but it’s a good habit to get into that has saved me many times. A friend of mine actually uses the word ’me’ instead of self … says its twice as fast

Review of the ASUS ZenBook UX31E

Fri, 23 Mar 2012 13:47:04 GMT

I’ve been using my ASUS ZenBook UX31E out and about for blogging, surfing, coding, and presentations for about 5 weeks now. A lot of people have commented on it with the common theme of it being a slick looking, eye catching, lightweight machine. I agree that its got the looks. The ZenBook is pretty snappy too for a i5 with 4GB of RAM and has done a very good job during presentations. When I wrote about my unboxing experience, I was originally bothered by the keyboard (it’s just not as fluent as Lenovo or even Vaio keyboards) and the overly “washed out” screen. Ultimately, I found some very good uses for the UX31E. It’s fair to note that these machines sell for around $1000 depending on varying features. So when evaluating my options I try to keep in mind that value for the cost. In this review I broke down my experiences by how I used the ZenBook.

But first, just as a reminder…

Disclosure of Material Connection: I received one or more of the products or services mentioned above for free in the hope that I would mention it on my blog. Regardless, I only recommend products or services I use personally and believe my readers will enjoy. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”

Power

If a PC can’t handle the load, I instantly toss it aside. So did the ZenBook hold its own with my daily use? Simply put, the ZenBook handled all of my requests admirably. I suspect that the i5 and SSD had a lot to do with this as the 4GB of RAM is certainly not a lot. It handled lightweight tasks like surfing the web, blogging with Live Writer, managing email, editing photos, and playing games on the internet (that was my daughter) quite well. When I installed Visual Studio 2010 on the ZenBook I expected some bigger lags but I was pleasantly surprised in how fast it loaded and built projects. Is it as fast as my i7, 8GB RAM machines, no … but its also half the cost. Overall, I the ZenBook was fast and powerful enough for me.

Writing Code

I do a lot of coding, writing demos, and tinkering on the side with Visual Studio. The ZenBook had no problems keeping up with me and I was happy to code along with it. My biggest concerns were that I never quite got used to the keyboard. Maybe I’m picky, but I just didn’t get used to the feel of the keyboard and often had to go back and correct typos more often than usual. This was a problem for me when coding because my mind takes me in many directions, very quickly, and having to go back really took me out of any rhythm I could get into. I am used to nice expensive keyboards that are very responsive. Maybe I am too used to them, because my most common issue was I “missed” keys (did not press hard enough). Ultimately, because of this hurdle I could not overcome, for writing code in long blocks of time I just was not as productive with the ZenBook.

It’s worth noting that the screen does appear to be a little washed out, too. I played with the contrast quite a bit as I kept thinking that maybe it was turned up too high. I could never get it to be as sharp and colorful as I had hoped. This wasn’t a killer, but it certainly wasn’t a plus either when sitting down to write code for long periods.

Presentations

I took the ZenBook to several presentations and it simply excelled. First, its lightweight at less than 3 pounds so it was easy to carry around. The power supply is lightweight too, which is often a place that these tiny laptops manufacturers lack. The ZenBook also looks great, so when doing presentations I often got a lot of remarks about how nice it looked. It was certainly a topic of conversation with its shiny case. The fast start feature on the ZenBook was also great, so I could close the lid, carry it from room to room, and set back up in just a few minutes. The keyboard issues I mentioned previously did not bother me at all for this type of use as during presentations I am more deliberate about what I type. So overall, the UX31E is an ideal presentation laptop for me. The laptop comes in a nice looking case and also has a small ouch for the video out dongle.

Family Use

My daughter loves this laptop. I let her use it for a day and not long after she was attached to it. We have several laptops and desktops in our house along with a Windows 8 tablet from Build and an iPad 2. but the kids enjoy the laptops because they can do so much more with them. My daughter gave the ZenBook a good test by writing stories in Word, surfing the web, playing games (HTML5 and Flash based), watching videos, and doing homework (sometimes). The ZenBook fared very well for all of these uses and my daughter simply loved it. In fact, I had to tear it away from her to write the review

Sound

I normally don’t say anything about the sound on a computer,because frankly, I don’t often use a computer’s built in speakers for music or movies. Instead, I use nice headphones or a dedicated sound system. But for being a built in sound system, the ZenBook’s sound is exceptionally good. I was very happy with the quality of the sound coming from the UX31E and found myself using it more that I ever had with a laptop.

More on the Keyboard

Interestingly, my daughter had the same problems with the keyboard early on, but got over them faster than I did. She no longer has any slow downs with the keyboard. I however, never got comfortable with the keyboard responsiveness. Keyboards are a personal taste, so I expect some will be fine with it and others will find the same issues I did.

Summary

The ultimate test for me is if I still use it after a month. So do I? Yes, I found the ZenBook to be very useful for travel and presentations, but not for long periods of day to day development. I did find a hidden gem though, as the ZenBook is ideal for my oldest daughter. In fact, my younger children all eye the laptop too. So it seems that its looks and weight (kids lugging it around the house) are very appealing to families. My kids are picky too, as they get frustrated when their apps are slow (Word, email, videos) or games won’t work. They had no such issues on the ZenBook.

The keyboard was a killer for me, but my family is happy about that since they now have a great laptop that they share. I’ll still use it for travel and presentations, but on all other days, its slated for my family’s use. I’ll follow up with a final conclusion in April, since I have a few more tests slated for the ZenBook.

Free Online Event on KnockoutJS and MVVM

Wed, 14 Mar 2012 01:52:21 GMT

I published my Knockout / JavaScript / MVVM course with Pluralsight last month and have been getting a lot of positive feedback … thanks! I decided to do a free short presentation from the course and answer some questions online. And what better way to do that than on LIDNUG. So next Monday I’ll be presenting KnockoutJs and MVVM at LIDNUG … you can register for the event online. Monday, March 19th 2012 from 1:00pm to 2:00pm ET

HTML/ JavaScript Apps with MVVM and KnockoutJS

Do you write a lot of HTML and JavaScript code to push and pull data? In this session John will demonstrate how to bind your data from JavaScript to your target controls in HTML writing less code, and gaining more power. See how to use objects in JavaScript, use declarative binding, integrate templates and control of flow, create custom bindings, and include jQuery UI following good separation patterns using KnockoutJS and MVVM.

More Resources for JavaScript Patterns

Wed, 14 Mar 2012 01:51:24 GMT

In just a few weeks I’ll be at DevConnections in Las Vegas where I’ll be presenting on a few sessions such as JsRender/JsViews, KnockoutJS, and Windows 8 Metro apps with XAML, JavaScript Patterns. These will each be a whirlwind tour of those topics, which is about all you can do in an hour. I always tell folks that I am not trying to teach everything there is to know in 1 hour …. but rather I am showing what can be done and inspire you to continue down that path, if you so choose.

For those of you who can’t make DevConnections, you’ll be glad to know that there is an excellent video training course on the JavaScript patterns by Dan Wahlin at Pluralsight titled “Structuring JavaScript”. Dan and I subscribe to many of the same philosophies on patterns. For example, you’ll see that Dan and I are co-presenting the JavaScript Patterns session at DevConnections and in my KnockoutJS course for Pluralsight, I use the Revealing Module Pattern heavily. (Hey, I practice what I preach.)

For the most in depth coverage of the patterns and how to use them properly, you should definitely check out Dan’s course. It’s chocked full of great content such as:

Why do we Need JavaScript Patterns?
Prototype Pattern
Module Pattern
Revealing Module Pattern
Revealing Prototype Pattern

CSS3 Background Gradients

Mon, 05 Mar 2012 18:38:10 GMT

CSS3 background gradients can add jut the right amount of pop to a web page when used properly, but its important to know how they work differently in the major browsers.

This month in my Papa’s Perspective column in Visual Studio Magazine I discuss CSS3 background gradients and show some tips on how to use them across Chrome, Safari, Firefox and IE. It’s a quick article that will help get you jump started and coding with them in just a few minutes. You can check out my article on CSS3 background gradients here.

KnockoutJS's Built-in Bindings

Fri, 02 Mar 2012 15:40:55 GMT

Bindings are the glue between the data values in the source (JavaScript objects) and the presentation in the target (the DOM). I continue to explore the KnockoutJS JavaScript library by examining Knockout’s various built in bindings in this month’s Client Insight column in MSDN Magazine, that just hit the shelves.

<htmltag 
    data-bind="built-in-binding:vm-property1, 
        another-built-in-binding:vm-property2">
</htmltag>

If you are not familiar with Knockout, you may want to first read the overview article on Knockout in last months’ Client Insight column here first.

Knockout is ideal for building single page web apps (SPA’s) and works great with the MVVM pattern with JavaScript and HTML. If you are interested in learning Knockout from end to end, you can check out my Pluralsight course Building HTML5 and JavaScript Apps with MVVM and Knockout, which contains over 40 examples you can download with your Pluralsight subscription.

And if you like it, please be sure to share it.

Knockout Session from South Florida Code Camp

Tue, 21 Feb 2012 16:23:31 GMT

I had a great time at the South Florida Code Camp last weekend presenting a Whirlwind tour of Knockout and Javascript Patterns. The rooms were small and way overpacked, but I’ll take that as a sign that the topic is popular

The Knockout session is a whirlwind tour of KnockoutJS ’s features. If you like it and want to see more in depth material on Knockout, you can check out my full course at Pluralsight titled Building HTML5 and JavaScript Apps with MVVM and KnockoutJS.

Here are the slides and sample code from the presentation at code camp. Thanks for attending!

South Florida Code Camp is Tomorrow

Fri, 17 Feb 2012 19:43:25 GMT

I’ll be heading to Ft Lauderdale tonight so I can get a bright and early start for South Florida Code Camp tomorrow. They have a pretty good lineup and I’ll be presenting 2 sessions. Hope to catch you there!

HTML5 and JavaScript Fundamentals with MVVM and KnockoutJS

John Papa

11:10am – 12:20pm

Do you write a lot of HTML and JavaScript code to push and pull data? In this session 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, use declarative binding, using KnockoutJS. You will also see how to use the MVVM pattern to write data centric JavaScript code that follows good separation patterns and creates highly maintainable code.

Techniques, Strategies, and Patterns for Structuring JavaScript Code

John Papa

1:20pm – 2:30pm

Are you writing a lot of JavaScript code and trying to apply good practices to make it more maintainable and flexible? In this session learn about common practices to make avoid problems such as polluting the global namespace and code that executes inconsistently, by using patterns such as separation and the Revealing Module Pattern. You will leave this session with several tips on how to write clean, more maintainable, and consistent code.

If you enjoy these and want more, you can check my latest course Building HTML5 and JavaScript Apps with MVVM and Knockout which is now available at Pluralsight. In it, I demonstrate how to build robust and maintainable Web applications with JavaScript patterns, MVVM, and KnockoutJS .

</shameless plug>