Most Popular Posts

Most Commented On

Current Bloggers

Sponsors

Wikis

  • You have not yet contributed to any pages.

KnockoutJs ProTip: When Checked Bindings and Attr Bindings on a check box, order matters

Posted by Derik Whittaker, Thursday, June 27, 2013 (3,131 views)

Was trying to figure out why my ‘Checked’ bindings were not setting my default value on page load in my HTML.  Below is the binding setup I was working with

image

If you notice I have my checked binding bound to an observable on my VM and I am setting the value attribute based on a value in the enum.

I could get the checked binder to fire if AFTER the page loaded I changed the value in the SelectedPointOfView observable this led me to believe my bindings were setup correctly, which turns out they were -- kinda. 

Take a look at the correct bindings below:

image

If you compare the 2 you should notice that I changed the order in which i specified the binders. When Knockout is parsing the bindings they are parsed left to right.  This meant that the initial pass tried to set checked value but I had not specified what the value of the radio button should be.  When I changed the binding order everything worked as expected because the value for the radio button had already been specified.

From now on I will have to pay closer attention to binding order.

Till next time,

P.S. If you want to learn more about Knockout watch my Pluralsight Course on Knockout JS

P.S.S. If you want to learn how to transition your XAML skills to HTML you can watch my course on Html for the XAML Developer

Filed under:
Discuss (0)

My Developing Windows 8 Apps w/ XAML Live Lesson is Live

Posted by Derik Whittaker, Thursday, June 27, 2013 (2,517 views)

I am happy to announce that my Video Live Lesson ‘Developing Windows 8 Apps Live Lesson’ is live via Pearson Education.  This series was a long time in the making and I am very happy for it to be out.

This video series has 8 in-depth lessons

  1. Introduction to Window 8 and ModernUI
  2. Using MVVM to build ModernUI Applications
  3. General Application Features
  4. Working w/ User Controls
  5. Application Integration via Contracts
  6. Live Tiles and Notifications
  7. Transitions and Animations
  8. Working w/ Device Sensors
 

The goal of this lesson is to give the developer a through walk through on how to build ModernUI applications with XAML and C#.

Check it out and hope you enjoy it.

Till next time,

Filed under: ,
Discuss (0)

Career-Defining Moments

Posted by Rob Reynolds, Tuesday, June 25, 2013 (4,749 views)

Fear holds us back from many things. A little fear is healthy, but don’t let it overwhelm you into missing opportunities.

In every career there is a moment when you can either step forward and define yourself, or sit down and regret it later. Why do we hold back: is it fear, constraints, family concerns, or that we simply can't do it?

I think in many cases it comes to the unknown, and we are good at fearing the unknown. Some people hold back because they are fearful of what they don’t know. Some hold back because they are fearful of learning new things. Some hold back simply because to take on a new challenge it means they have to give something else up. The phrase sometimes used is “It’s the devil you know versus the one you don’t.” That fear sometimes allows us to miss great opportunities.

In many people’s case it is the opportunity to go into business for yourself, to start something that never existed. Most hold back hear for a fear of failing. We’ve all heard the phrase “What would you do if you knew you couldn’t fail?”, which is intended to get people to think about the opportunities they might create. A better term I heard recently on the Ruby Rogues podcast was “What would be worth doing even if you knew you were going to fail?” I think that wording suits the intent better. If you knew (or thought) going in that you were going to fail and you didn’t care, it would open you up to the possibility of paying more attention to the journey and not the outcome.

In my case it is a fear of acceptance. I am fearful that I may not learn what I need to learn or may not do a good enough job to be accepted. At the same time that fear drives me and makes me want to leap forward. Some folks would define this as “The Flinch”. I’m learning Ruby and Puppet right now. I have limited experience with both, limited to the degree it scares me some that I don’t know much about either. Okay, it scares me quite a bit!

Some people’s defining moment might be going to work for Microsoft. All of you who know me know that I am in love with automation, from low-tech to high-tech automation. So for me, my “mecca” is a little different in that regard.

Awhile back I sat down and defined where I wanted my career to go and it had to do more with DevOps, defined as applying developer practices to system administration operations (I could not find this definition when I searched). It’s an area that interests me and why I really want to expand chocolatey into something more awesome. I want to see Windows be as automatable and awesome as other operating systems that are out there.

Back to the career-defining moment. Sometimes these moments only come once in a lifetime. The key is to recognize when you are in one of these moments and step back to evaluate it before choosing to dive in head first. So I am about to embark on what I define as one of these “moments.”  On July 1st I will be joining Puppet Labs and working to help make the Windows automation experience rock solid! I’m both scared and excited about the opportunity!

Filed under: ,
Discuss (5)

LINQ to Entities oddity with Guid Arrays

Posted by Derik Whittaker, Wednesday, June 05, 2013 (6,027 views)

Was trying to write very simple Linq statement today (below) and I received the following error

Linq Statement

image

Error Message Received

"LINQ to Entities does not recognize the method 'System.Guid get_Item(Int32)' method, and this method cannot be translated into a store expression."

Of course when I received this I was take back because at first glance I assumed it was trying to convert my GUID to an int and we all know this is not possible.  I then thought maybe I was testing against the wrong column in the database table, but that was not the case.

I have to say I was a bit at a loss, at lease for a second.  I had a theory so I changed my code to look like below:

image

And of course this code WORKED. 

Notice that the ONLY thing I changed was I pushed the Video ID out of the array and into a local variable prior to using Linq.  Turns out that that Linq is not able to use array indexers for GUID arrays, or at least that is my take on why this is not working based on the error.

Long story short is if you get this error try pushing your array item into a local variable rather than trying to access it via an array indexer.

Till next time,

P.S. If you want to learn more about Knockout watch my Pluralsight Course on Knockout JS

 

P.S.S. If you want to learn how to transition your XAML skills to HTML you can watch my course on Html for the XAML Developer

Discuss (6)

Chocolatey official public feed now has 1,000 stable packages

Posted by Rob Reynolds, Saturday, June 01, 2013 (2,982 views)

 

image

Chocolatey has reached a milestone at 1K unique stable packages! When I started chocolatey a little over two years ago I didn't know there would be such a tremendous community uptake. I am blessed that you have found value in chocolatey and have contributed code, packages, bugs and ideas to making chocolatey better.

To celebrate this we should look at who contributed the package that put us over the top. It was Justin Dearing with SqlKerberosConfigMgr (http://chocolatey.org/packages/SqlKerberosConfigMgr). And I'm giving Justin a $50 gift card for Amazon as a small token of my appreciation. It's not much but we appreciate the contributions! This was unannounced because we want to focus on quality, not quantity.

Now, while this is a significant milestone, we are not very far in the bigger scheme of offerings for Windows. There is no hurry to get there, we prefer quality packages over quantity of packages. We will eventually grow much bigger and as we add additional sources, it increases the amount of packages we can offer.

Thanks so much to all of you for all of your work, we wouldn't be where we are today without the community!

Filed under:
Discuss (0)

TypeScriptCompile “Include” error when loading a Project

Posted by Derik Whittaker, Wednesday, May 29, 2013 (2,778 views)

Today when opening one of our .sln files we received the following error message when trying to load a web project.

The Attribute "Include" in element <TypeScriptCompile>

Of course the first thing we did was open the .csproj file but nothing seemed ‘out of whack’.  When we opened the file we saw what we thought was the issue, but it turned out to be a false negative.  The false negative is below.

image

 

It was not until we started to really, really took a look at the changes line by line that we noticed the issue (even then we glossed over the issue a few times first).

Here is the xml which is the issue

image

 

 

Notice how the merge had put a <TypeScriptCompile> element inside of a <Content> element, this is NOT allowed.  Once we moved the <TypeScriptCompile> element the project opened just fine and we were able to compile.

Till next time,

P.S. If you want to learn more about Knockout watch my Pluralsight Course on Knockout JS

 

P.S.S. If you want to learn how to transition your XAML skills to HTML you can watch my course on Html for the XAML Developer

Filed under:
Discuss (0)

.NetRocks - Making the Transition from XAML to Html

Posted by Derik Whittaker, Tuesday, May 21, 2013 (2,969 views)

Recently I sat down as a guest with Richard and Carl on .Net Rocks and recorded a show on my experiences on migrating from XAML to HTML.  Chatting w/ Richard and Carl is always great. 

In this episode we tried to focus on my experiences on moving from XAML to Html but when you have 3 guys w/ A.D.D. staying on course is always a challenge :)  We were able to talk about:

  • We talked about TypeScript and how it can make the conversion from .Net to JavaScript easier
  • We talked about MVVM and how developers LOVE this pattern
  • We talked about how Winforms is still prevalent in the corporate world… DEAL WITH IT
  • We talked about many of the things in XAML that can translate to HTML
    • MVVM
    • Knockout
    • XAML layout concepts loosely translate to HTML layout concepts
  • We talked about my Pluralsight course on Html from the XAML Developer
    • Even plugged my next Pluralsight course – MVVM w/ Knockout for the XAML developer

Again, thanks Richard and Carl, I had a BLAST.

Till next time,

P.S. If you want to learn more about Knockout watch my Pluralsight Course on Knockout JS

 

P.S.S. If you want to learn how to transition your XAML skills to HTML you can watch my course on Html for the XAML Developer

Discuss (0)

TypeScript references not being created correctly during drag-n-drop

Posted by Derik Whittaker, Monday, May 13, 2013 (3,138 views)

One of the viewers of my Html for the XAML developer course over on Pluralsight sent me a question regarding the ability to drag and drop a d.ts file onto a TypeScript file and have the reference added correctly.

He said that when he dropped the d.ts file he was expecting to get something like:

/// <reference path="../something.d.ts" />

However, what he got was:

c:\user\[usernamehere]\file\…

To be honest I was not sure what the issue was but did ask 2 questions:

  1. Do you have the TypeScript IDE plugin installed?
  2. Do you have Web Essentials installed?

Turns out he did not have Web Essentials installed, which it appears is what gives you the nice ability to drag-drop a Typescript file into your editor and have it provide the correct reference syntax.  I honestly was not aware that it was Web Essentials which did this, just assumed it was part of the TypeScript plugin.

Moral of the story, if you have not already installed Web Essentials DO SO NOW…!

Till next time,

P.S. If you want to learn more about Knockout watch my Pluralsight Course on Knockout JS

 

P.S.S. If you want to learn how to transition your XAML skills to HTML you can watch my course on Html for the XAML Developer

Filed under:
Discuss (0)

Typescript Bundler Issue - Not transforming to JavaScript

Posted by Derik Whittaker, Saturday, May 11, 2013 (3,526 views)

Today one of the viewers of my Pluralsight course was having issues and I was trying to help him via email, but to no avail.  I asked him to send me his project so I could take a look myself.  I ran the project and sure enough things were odd.  I looked at his Typescript syntax and everything looked right, as you see below.

image

I next took a look to ensure the JavaScript was being loaded correctly and at first glance everything looked right, but then I noticed that the loaded file was NOT JavaScript but rather the raw, untransformed TypeScript.  At this second I knew the issue.  The Bundler was not bundling the Typescript and turning it into JavaScript.

I checked the bundle configuration and everything looked ok, but clearly there was an issue.  After some continued looking I noticed that the TypeScript Bundlertransformer had not been installed. 

Once I added the BundleTransformer.Typescript nuget package and recompile the application the world was a happy place.

Till next time,

P.S. If you are looking to make the jump from XAML based development to HTML development check out my HTML for the XAML Developer Pluralsight course

Filed under:
Discuss (0)

Putting the Dynamic back into TypeScript

Posted by Derik Whittaker, Wednesday, May 08, 2013 (6,718 views)

One of the really powerful features that TypeScript brings to the JavaScript world is some Static Typing, even if it is only at code/compile time.  With TypeScript I can say that an object is of a certain type which implies there are only a limited set of properties/methods available to me.  This is great, but it does limit the core power of JavaScript and dynamic languages in general.

Given the static nature of TypeScript, (yes I can choose to ignore this feature, but why?) which I want in most cases, the following will cause me compile time issues.

image

The reason this is causing me issues is because MemberInitContext does NOT contain a LoadChoachingStaffStats property, but I know that the caller may provide an object which does contain this object.   Below is my definition for MemberInitContext.

image

Given I know this property MAY be provided at runtime I have a decision to make.  I can do any of the following to resolve my build errors.

  • Add the property to the MemberInitContext
  • Create a inherited type which contains this property
  • Change my constructor to take an ‘any’ rather than a type
  • Add the dynamic back into TypeScript

I am going to choose the last option here, but how?  Simple, by redefining the variable to an any INSIDE my constructor as below.

image

By declaring my type as an ‘any’ TypeScript is happy and lets me hack away and complete my tasks.

Long story shot is that even though TypeScript tries to impose Static typing, which is AWESOME in most cases, you can still force it back to dynamic if you want.

Till Next Time,

P.S. Check out my HTML for the XAML developer course on Pluralsight

Filed under: ,
Discuss (9)

My first Pluralsight course (HTML for the XAML Developer) as gone live

Posted by Derik Whittaker, Monday, May 06, 2013 (3,525 views)

For the past 2 months I have been working on my first Pluralsight course, and it has finally gone LIVE.  I had a great time building this course and I hope it shows.  In fact I enjoyed it so much I am currently working on my 2nd course.

This course, HTML for the XAML Developer is intended to help XAML based developers (WPF or Silverlight) make the transition to HTML development.  I take you, the viewer, through the exercise of porting an existing XAML based application over to be an HTML based one.  In this course I used many frameworks but I tried to keep it as vanilla as possible.  I know there are 100 different ways to to build HTML sites and even more tools and libraries but I really wanted to focus on many of the basics.

I hope everyone who watches will enjoy the course.

Module Listings

  • Getting Started – Overview of what we are going to be working on along w/ a quick start of some of the tools
  • Porting our ToDo Listing Screen – Part 1 - Introduce many of the basics and build a simple listing screen of items
  • Porting our ToDo Listing Screen – Part 2 – Add some styling and enhanced features
  • Porting our ToDo Maintenance Screen – Part 1 – Introduce many data entry techniques and basis persistence.
  • Porting our ToDo Maintenance Screen – Part 2 – Data Validation

 

Till next time,

Filed under:
Discuss (1)

Inheritance issue w/ Typescript (JavaScript) and MVC Bundling Ordering

Posted by Derik Whittaker, Tuesday, April 30, 2013 (4,167 views)

Today I extended one of our classes to use inheritance via Typescript (love that).  When I refreshed the page I received an error here

image

When I dropped to the Chrome debugger and outputted both the values for both ‘d’ and ‘b’ I was a bit shocked.  ‘d’ was valid, but ‘b’ was undefined.  I tried a whole slew of things but nothing came to mind.  Of course I thought maybe I was using inheritance wrong, but my syntax was right.

After some digging online I found this link which talks about how a parent class has to be loaded prior to it child for everything to work.  This makes perfect sense given the way JavaScript parses code.  I had this brilliant idea that I would simply add a _ prefix to my base class name and that would have the file loaded first.  WRONG…

If you look at the image below you can see that _BaseViewModel.js is way at the bottom of the list and my error was being thrown in the AthleteListingViewModel…

image

Somehow I needed to force the bundler to load the files in the order I wanted.  In our case I am NOT including each file into the bundle manually, rather I am using the ‘IncludeDirectory’ feature. 

After a bit more searching I found this link which solved the same basic problem but in a much more complex way than I needed.  However it showed me how I could solve the problem in a few lines of code.  What I needed to do was create a new instance of IBundleOrderer and use it.

This code is my AlphaSortedBundleOrderer which solved my issues.

 

After I created my new AlphaSortedBundleOrdered I just needed to use it in my bundler.  I did this as you see below.

image

Once I had my bundler setup correctly I re-ran the page and my .js files were ordered as expected.

image

Now I am sure there is a 100 ways to solve this problem, but this worked for me.

Till next time,

Discuss (2)

Knockout Click binding and the ‘this’ context

Posted by Derik Whittaker, Monday, April 29, 2013 (3,537 views)

When using Knockout JS wiring to the click binding is cake and simply just works.  Or does it?

Per the documentation there are multiple ways to wire the click binding within your html.  Assume you have a method such as (the code below is TypeScript)

You can do any of the following:

All of the above will accomplish the same goal, passing in the current $data object into the underlying method.  However, what appears to be the same is actually quite different.  The difference comes in when you are going to use the ‘this’ context.  Lets take a deeper look.

‘this’ context for option 1:

image

‘this’ context for option 2:

image

‘this’ context for option 3:

image

Did you notice the difference?  2 of the options (1 & 3) set the ‘this’ context equal to the passed in $data object.  Option 2 has the context set to the $parent object (in our case the view model).

Now I am NOT saying which one is right and which one is wrong because they are all right.  However, I just want to make sure everyone is aware of the differences.  In many cases i use option 2 because I want direct access to the underlying view model and this provides this.

I am sure there are many different ways in JavaScript/Knockout to get the parent View Model but honestly I like low friction and option 2 provides this for me.

Till next time.

Filed under: ,
Discuss (2)

Validating all observables w/ Knockout validation and Typescript

Posted by Derik Whittaker, Sunday, April 21, 2013 (4,567 views)

Knockout js is an awesome MVVM framework for HTML/Javascript development and there is an extension library which performs data validation called Knockout.Validation which is an equally awesome library.  Today when doing some coding I needed to validate that all properties on a VM were valid. A quick search showed me this was very easy and should just work.  However, I am using Typescript and for all of its awesomeness it sometimes makes life a bit more challenging than expected.

To validate an entire observable all you should need to do is first tell the validation library that your vm is under validation by doing

image

and then you can simply call a .isValid() on your VM as such.

image

However, when doing this in Typescript I was getting the red squiggly as you see here.

image

At first I was not sure why, so I decided to take a peek at the source for the validation and I came across the code you see below.

image

As you can see, the highlighted yellow is where the .isValid() method is being added to object (obj == your passed in viiew model) so I KNOW that my view model has a .isValid.  Sure enough at runtime if I hit a breakpoint and did this.isValid() i would get the response I was expecting.  However, because .isValid() was being added to my VM dynamically (this is the amazing power of JavaScript) Typescript did not know about the method and it was causing compile time errors.

How to fix this?

The simple solution that I found was to ‘fake’ Typescript into thinking that the .isValid computed is on my VM from the start.  I did this by adding the following to my VM

image

Now you will notice that I am simply declaring the computed I am NO assigning it and that is ok.  In fact if you look at the generated output from the Typescript compiler you will NOT see a computed created for .isValid().  But this does not matter.  The Typescript compiler thinks it is there so you are free to use it off of your VM as you see here.

image

After adding my declaration for isValid() I was good to go and my code worked as expected both at code time and run time.

Till next time,

Discuss (1)

Typescript, jQuery and the ‘this’ context causing issues

Posted by Derik Whittaker, Friday, April 12, 2013 (4,015 views)

Today I was in the middle of porting some raw javascript over to TypeScript as well as moving inline javascript into separate classes.  In the middle of doing this I started to run into some really odd stuff.  Namely, the ‘this’ context in one of my methods was set to window, not to the parent object.  This was really weird and at first I thought maybe it had to do w/ Inheritance and Typescript (this class implemented a base class).  Sadly even when I removed the base class I was still getting the results.

After a bunch of digging I was able to find the root cause, Derik was doing something stupid and jQuery was making it worse :)

In order to get some feedback and to help illustrate my issue.

Here is what my Typescript class which was having the issue looked like.  The box in red is what was throwing the error.

image

From Chrome’s debugger when I would output ‘this’ it would be the browsers window object, not my parents object.  This told me something was screwed up but I could not find the cause.  That was until I started walking the call stack to see WHERE PerformSearch was being called.  Turns out PerformSearch was being called by jQuery… that was odd.  In fact below is the code making the call.

 

image

Again, why was jQuery calling my method I had not told it to.  Well I kept walking the stack and I realized that this was being called during a .ajax call as seen below.

image

It turns out that the ‘data’ object I was passing across the wire was not just a property bag, but it had methods.  These methods referenced ‘this’ and when jQuery tried to searlize the object it is executing the functions, and when it does the ‘this’ context is wrong and BOOM.

To solve this issue I simply refactored my code to NOT have a method and then it just worked.

My question is this.  Is what I was doing just dumb and I was an idiot, or is there a way to tell jQuery to NOT try and call my methods during serialization? 

Till Next time,

P.S. I know I could have guarded against this in my method by checking that ‘this != window’ but that felt dirty and I had a better solution.

Filed under: ,
Discuss (1)
More Posts « Previous page - Next page »

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Subscribe
Google Reader or Homepage

del.icio.us CodeBetter.com Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl CodeBetter.com Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of Devlicio.us
Red-Gate Tools For SQL and .NET

NDepend

SlickEdit
 
SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
LiteAccounting.Com
DevExpress
Fixx
NHibernate Profiler
Unfuddle
Balsamiq Mockups
Scrumy
JetBrains - ReSharper
Umbraco
NServiceBus
RavenDb
Web Sequence Diagrams
Ducksboard<-- NEW Friend!

 



Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers

 

Community Server (Commercial Edition)