KyorCode

Javascript prototypical inheritance by example

2015-01-02T11:52:00.001+01:00

// Util.inherits - straight from node js sourcecode
var util = {
  inherits: function (ctor, superCtor) {
    ctor.super_ = superCtor;
    ctor.prototype = Object.create(superCtor.prototype, {
      constructor: {
        value: ctor,
        enumerable: false,
        writable: true,
        configurable: true
      }
    });
  }
};

var Other = function () {

};

Other.prototype.stuff = function () {
  console.log('Other!');
}

// create our Base constructor
var Base = function (a) {
  this.a = a;
  this.other = new Other();
};

// add a prototype method
Base.prototype.add = function () {
  this.a++;
};

Base.prototype.callStuff = function () {
  this.other.stuff();
}

/* ... */

// An ancestor of Base constructor
var ChildBase = function (b) {
  // we have to invoke the Base consturctor with the current context.
  Base.apply(this, arguments);

  this.b = b;
};
// here is where inheritance happens
util.inherits(ChildBase, Base);

/* ... */

ChildBase.prototype.callOther = function () {
  this.callStuff();
};

// instantiation
var childBase = new ChildBase(2);
// JS keyword instanceof works
console.log(childBase instanceof ChildBase); // true
console.log(childBase instanceof Base); // true
childBase.add();
console.log(childBase.a); // value will be 3
console.log(childBase.b); // value will be 2
childBase.callOther() // 'Other!'

Running Koa.Js in Cloud9

2014-08-05T15:37:00.001+02:00

What is Koa.Js?

Koa is a new web framework designed by the team behind Express, which aims to be a smaller, more expressive, and more robust foundation for web applications and APIs. Through leveraging generators Koa allows you to ditch callbacks and greatly increase error-handling. Koa does not bundle any middleware within core, and provides an elegant suite of methods that make writing servers fast and enjoyable.
[Source: koa.js.com – Introduction]

What is Cloud9?

Cloud9 combines a powerful online code editor with a full Ubuntu workspace in the cloud.
[Source: c9.io]

Koa.Js in Cloud9…

As stated by Koa.Js it makes use of the new generator feature in javascript ECMA 6. This feature is support for node from 0.11 and up by toggling the –-harmony flag. By default cloud9 runs in node version 0.10.x or 0.8.x, depending on your setup. You can check this by entering the following command into your bash command line tool in your c9 workspace:

node -v

To resolve this problem we first need to install node version 0.11.x, this can be done by executing the following command:

nvm install 0.11

After this we still have to tell the current workspace to use this version. To make this change type in the following command ( x is the patch number, it should have been shown to you through the previous command ) :

nvm use v0.11.x

Now we can create a simple Koa.Js server ( create an index.js file in your root folder ):

var koa = require('koa');
var app = koa();

app.use(function *(){
    this.body = '<h1>Hello from Koa.Js</h1>';
});

app.listen(process.env.PORT);

If you now press the run command, you will be confronted by errors. The reason for this is that the runner/debugger defaults to ‘Node (default)’. This implies that c9 is running your javascript in the default node version 0.10.x or 0.8.x.
To get around this problem, we need to create a run file so that c9 knows how to run node in harmony mode and thereby supporting generators.

If you check ‘Show Hidden Files’ in your workspace directory tree ( the small gear in the upper right corner) , you’ll see a .c9 folder, in that folder there is an other folder called ‘runners’. Create a new file in that folder called ‘Node 0.11.x.run’ and open it. Next copy past the following code into it and save:

// This file overrides the built-in Node 0.11.x runner
// For more information see http://docs.c9.io:8080/#!/api/run-method-run
{
  "cmd": [
    "bash",
    "--login",
    "-c",
    "nvm use 0.11 > /dev/null; node --harmony ${debug?--nocrankshaft --nolazy --debug-brk=15454} '$file' $args"
  ],
  "debugger": "v8",
  "debugport": 15454,
  "info": "Your code is running at \\033[01;34m$url\\033[00m.\n\\033[01;31mImportant:\\033[00m use \\033[01;32mprocess.env.PORT\\033[00m as the port and \\033[01;32mprocess.env.IP\\033[00m as the host in your scripts!\n"
}

Now if go to your index.js file and press ‘Run’. This should still throw some errors. If you look at the output window, you’ll see in the upper right corner the following line: ‘Runner: Node.js (default)’, click this line and from the list select ‘Node 0.11.x’ and press run again.

You Koa.Js server should now be up and running.

Knockout and Razor syntax awkwardness

2014-03-14T15:44:00.001+01:00

While working on a project in ASP.NET MVC 5 with Razor and Knockout, I came across a little awkwardness in the syntax highlighting.
Take a look at the following piece of code:

   1:  <label for="Income" data-bind="text : formatLabel('@Translations.ReviewDetails_Income',[IncomeYear])"></label>

note: Translations is a resx file with our translations in it… obviously.

The syntax highlighting is confused by the fact that there is an @ in there. While this syntax is perfectly valid and the view does compile and display’s correctly.
The solution is actually very simple, but isn’t really the way you want to use this type of syntax.

   1:  <label for="Income" data-bind="@string.Format("text : formatLabel('{0}',[IncomeYear])",Translations.ReviewDetails_Income)"></label>

See what I did there. It’s in my opinion way less readable, but the syntax highlighting is now correct.
Wondering if anybody else has come across this glitch I went on the GoogleWebs and after a few minutes of research, I found this feedback ticket on the Microsoft Connect website.
They have taken it up with the Product Team, so I’ll be expecting a fix for this in the near future.

Regards,
Kyor

C# JSON to Javascript object – The camelcase issue

2012-10-17T14:01:00.001+02:00

Today I saw in the following question a challenge:

I have JSON returned from an API like so:

   1: Contacts: [{ GivenName: "Matt", FamilyName:"Berry" }]

To keep things consistent with my code style (camelCase – lower case first letter), I want to transform the array to product the following:

   1: contacts: [{ givenName: "Matt", familyName:"Berry" }]

The catch is that the names of the properties should be converted to the camelcase code style. I pondered about this for a little while, when it kinda hit me in the face. Javascript objects can be handles as arrays.

This allowed me to produce the following script to fix this issue:

   1: var firstToLower = function(str) {   2:     return str.charAt(0).toLowerCase() + str.slice(1);   3: };   4:     5: var firstToUpper = function(str) {   6:     return str.charAt(0).toUpperCase() + str.slice(1);   7: };   8:     9: var mapToJsObject = function(o) {  10:     var r = {};  11:     $.map(o, function(item, index) {  12:         r[firstToLower(index)] = o[index];  13:     });  14:     return r;  15: };  16:    17: var mapFromJsObject = function(o) {  18:     var r = {};  19:     $.map(o, function(item, index) {  20:         r[firstToUpper(index)] = o[index];  21:     });  22:     return r;  23: };

Usage:

   1: // Map to   2: var contacts = [{   3:     GivenName: "Matt",   4:     FamilyName: "Berry"},   5: {   6:     GivenName: "Josh",   7:     FamilyName: "Berry"},   8: {   9:     GivenName: "Thomas",  10:     FamilyName: "Berry"}];  11:    12: var mappedContacts = [];  13:    14: $.map(contacts, function(item) {  15:     var m = mapToJsObject(item);  16:     mappedContacts.push(m);  17: });  18:    19: alert(mappedContacts[0].givenName);  20:    21:    22: // Map from  23: var unmappedContacts = [];  24:    25: $.map(mappedContacts, function(item) {  26:     var m = mapFromJsObject(item);  27:     unmappedContacts.push(m);  28: });  29:    30: alert(unmappedContacts[0].GivenName);​

Kinda cool I thought, so I decided to share this with you!

Until next time!

PS: I’ll start posting more now. I promise!

Bookreview: Head First–Design Patterns

2012-01-28T20:45:00.000+01:00

Info:

688 pages
published October 2004
ISBN: 978-0596007126
Authors: Eric T. Freeman, Elisabeth Robson, Bert Bates & Kathy Sierra
Available here

Looking for a refresh of my knowledge about design patterns, I decided to purchase this book due to its high recommendations.
The book covers the following design patterns in a very big detail ( using the Java language to show code examples ).

Strategy pattern
Observer pattern
Decorator pattern
Factory pattern
Singleton pattern
Command pattern
Adapter and Facade pattern
Template pattern
Iterator and Composite pattern
State pattern
Proxy pattern
Compound patterns
Extra overview of less common patterns

This book is just perfect for beginners, but for people with already some knowledge or more, this book start to be a drag pretty soon. The examples and examplecontexts are so simple and everyone of them is explained in more then one way. This leads to a very repetitive reading. I had real troubles keeping my attention to reading through all of it. To be honest I only read the first 6 or 7 chapters, all the other once I “overviewed”, just looking through the definition parts and code examples.
Talking about code examples, as a .NET enthusiast, the Java wasn’t that hard to understand.
Ableit, I would recommend this as a very good introduction into the GoF (Gang of Four) book. That is still on my list, but I’m pretty sure that I would be able to devour that book way easier now.

C# out Parameter–Tuples (Multiple return values)

2012-01-23T22:24:00.001+01:00

There will be times when you want to get multiple return values from methods and are to lazy to create a new object for it. Well recently the .NET framework now supports a couple of ways to return multiple values with more ease.
First of all we have the “Tuple” being now available and coming from the F# side of the .NET framework. A tuple is no more then a typesafe way to return a collection of different objects. As an example:

   1: public Tuple<string,int,double> TupleReturn()   2: {   3:     //... some DB action   4:     return Tuple.Create("FirstItem", 1, 500.00);   5: }

This method return as tuple with the first item being a string, the second an integer and the third a double. To work with this return value we can do the following:

   1: var x = TupleReturn();   2: var i1 = x.Item1;   3: var i2 = x.Item2;   4: var i3 = x.Item3;   5:     6: Console.WriteLine(String.Format("The type of i1 is {0}",i1.GetType()));   7: Console.WriteLine(String.Format("The type of i2 is {0}",i2.GetType()));   8: Console.WriteLine(String.Format("The type of i3 is {0}",i3.GetType()));   9: Console.ReadLine();

The result will be:

The type of i1 is System.String
The type of i2 is System.Int32
The type of i3 is System.Double

To read more about tuples go to: MSDN (1) or Extended Tuples

The next solution to return multiple is to work with the “out” parameter. This type of method parameter allows for the method to use the same variable as it was passed to it. So in short, any change to the parameter will be reflected to the variable passed to it. Next to this, the method itself can off course still return a normal value.

   1: public string OutReturn(out string name, out string surName)   2: {   3:     //... some DB action   4:     name = "Ferrari";   5:     surName = "Bently";   6:     return "are awesome!";   7: }

The one thing to not about this type of parameter is that is has to be initialized before you pass it to the method! If you do so, you can use it as follows:

   1: string name;   2: string surName;   3: var r = OutReturn(out name,out surName);   4: Console.WriteLine(String.Format("{0} and {1} {2}",name,surName,r));   5: Console.ReadLine();

Which results into:
Ferrari and Bently are awsome!

Enjoy!

Creating a basic Silverlight control–DateItem

2012-01-20T00:06:00.001+01:00

When you first start working in Silverlight every control you use is something basic and sometimes you just want more then the basic controls.
The good people of Microsoft allowed us to create custom controls so we can do nearly anything in Silverlight to have great interaction with the user,
thus increasing user experience.
Today I’ll show you one of the first controls I ever made, It was for a small website that needed a nice way to show the date.
They kind of wanted a small calendar style icon.
The result was as following:

In XAML I didn’t have to do more then(NL-BE date format):

<ctrl:DateItem Date="01/02/2012" />

To start of create a new “Silverlight Class Library” and call it for example “CustomControlLibrary.DateItem”:

Rename the Class1.cs file to DateItem.cs ( don’t forget to rename the class itself! ).
Add a new folder called “Themes” and add a new “Silverlight Resource Dictionary” to the folder. Rename that to “generic.xaml”.
This will automatically be recognized by Silverlight.
Open the generic.xaml file and paste the following code inside:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:CustomControlLibrary.DateItem">
</ResourceDictionary>

Make sure the xmls:local is referring to your own namespace, shouldn’t you have chosen to make it CustomControlLibrary.DateItem.
We have now the fundamentals for most, if not all custom controls.

a resourcedictionary
class file

We first want to create our layout of the control so I created the following code:

<Style TargetType="local:DateItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:DateItem">
                    <Border Width="50" Height="50" BorderBrush="#A0A0A0" BorderThickness="1">
                        <Grid Margin="1">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="auto" />
                            </Grid.RowDefinitions>
                            <StackPanel HorizontalAlignment="Stretch" Margin="1,1" Grid.Row="0" Background="#DDE2E5">
                                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                                    <TextBlock FontSize="9" x:Name="MonthPart" />
                                    <TextBlock FontSize="9" Margin="3,0,0,0" x:Name="YearPart" />
                                </StackPanel>
                            </StackPanel>
                            <Viewbox Grid.Row="1" Stretch="Uniform" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                <TextBlock x:Name="DatePart"/>
                            </Viewbox>
                            <TextBlock Margin="0" HorizontalAlignment="Center" FontSize="9" Grid.Row="2" x:Name="DayOfTheWeekPart" />
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

What I did here is create a “Style” that should be applied to the “DateItem” control, by overriding the template we can customize the look of our control.
We created a new “ControlTemplate”, with a border inside and a grid to arrange all the values. Very important: setting up the right names for your inner-controls.

This is because we will have to address them from the classfile. I created the following important controls:

a textblock (MonthPart)
a textblock (YearPart)
a textblock (DatePart)
a textblock (DayOfTheWeekPart)

Notice that I suffix them with “Part” this will allow easier recognition in the classfile. Talking of which, lets look at that.
The first thing I usually do is make the classfile “Blendable”, meaning it is easier to work with in Blend. I do this by adding the necessary class-attributes:

   1: [TemplatePart(Name = Parts.DatePART, Type = typeof(TextBlock))]   2: [TemplatePart(Name = Parts.MonthPART, Type = typeof(TextBlock))]   3: [TemplatePart(Name = Parts.YearPART, Type = typeof(TextBlock))]   4: [TemplatePart(Name = Parts.DayOfTheWeekPART, Type = typeof(TextBlock))]   5: public class DateItem : Control   6: {   7: }

Also notice I derived from the “Control” class.
By making an innerclass called Parts, it’s easier to work with the different parts. (It’s here that the naming in the resourcefile matters).

   1: public static class Parts   2: {   3:     public const string DatePART = "DatePart";   4:     public const string MonthPART = "MonthPart";   5:     public const string YearPART = "YearPart";   6:     public const string DayOfTheWeekPART = "DayOfTheWeekPart";   7: }

The next thing we need is a property on the object on which we can set our date, either manually or by databinding. This type of properties are dependency properties.

   1: public static readonly DependencyProperty DateProperty =   2:             DependencyProperty.Register("Date", typeof(string), typeof(DateItem), new PropertyMetadata(DateTime.Now.ToShortDateString(),OnDateChanged));   3:     4: private static void OnDateChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)   5: {   6:     ((DateItem) d).UpdateDate(e.NewValue.ToString());   7: }   8:     9: protected virtual void UpdateDate(string value)  10: {  11:     Debug.Assert(DateTime.TryParse(value, out _date), "Date couldn't be converted to datetime value");  12:    13:    14:     _day.Text = string.Format("{0:dd}", _date);  15:     _year.Text = string.Format("{0:yy}", _date);  16:     _month.Text = string.Format("{0:MMM}", _date);  17:     _dayOfTheWeek.Text = string.Format("{0:ddd}", _date);  18: }  19:    20: public string Date  21: {  22:     get  23:     {  24:         return (string)GetValue(DateProperty);  25:     }  26:     set  27:     {  28:         SetValue(DateProperty, value);  29:     }  30: }

There we go and we have a dependency property to get our date, with databinding and if the the “Date” property isn’t set, we set it to the current date.
Now to apply our resourcedictionary style template, we must tell the class to override its defaultstylekey, this can be done in the constructor of the class:

   1: public DateItem()   2: {   3:     DefaultStyleKey = typeof(DateItem);   4: }

To link our style controls with the code and apply our date to the right controls, we have to get them out of the template as control objects and apply the date to them.
We do this by overriding the “OnApplyTemplate()” methode.
To support the object we create them as private fields first:

   1: private TextBlock _day;   2: private TextBlock _month;   3: private TextBlock _year;   4: private TextBlock _dayOfTheWeek;   5: private DateTime _date;

   1: public override void OnApplyTemplate()   2: {   3:     base.OnApplyTemplate();   4:     5:     _day = GetTemplateChild(Parts.DatePART) as TextBlock;   6:     _dayOfTheWeek = GetTemplateChild(Parts.DayOfTheWeekPART) as TextBlock;   7:     _year = GetTemplateChild(Parts.YearPART) as TextBlock;   8:     _month = GetTemplateChild(Parts.MonthPART) as TextBlock;   9:    10:     Debug.Assert(_day != null, "Date textblock can not be null");  11:     Debug.Assert(_year != null, "Year textblock can not be null");  12:     Debug.Assert(_month != null, "Month textblock can not be null");  13:     Debug.Assert(_dayOfTheWeek != null, "DayOfTheWeek textblock can not be null");  14:       15:     UpdateDate(Date);  16: }

In this methode we fetch every part and make an object of it, then for safety I assert those objects to check if they are not "null”. Then we call the “UpdateDate()” method to apply our date.
To learn more about the “out” parameter and optional parameters, I have a new blogpost ready to talk about those ;)
At this point we should have a ready to use DateItem!
Just built it, reference the project and you can use it in other projects.

Enjoy!

Bookreview: The Agile Samurai–How agile master deliver great software

2011-09-08T11:16:00.001+02:00

Info:

280 pages
published 15-09-2010
ISBN: 978-93435-658-6
Author: Jonathan Rasmusson
Available here

After flying through this book, which implies it is a very pleasant reading, I have found a very broad basis to start developing in an agile way. I’m sure that after you have read this book you will come to the same conclusion. Even I you are an experienced agile developer, there are some really good pointers, tips & tricks in the book. All supported by amusing pictures.

The book is also boiled down into a story of “The master samurai” and “The apprentice”, at the end of each chapter they kind of review what you saw in that chapter and provoke some questions about it and a more practical insight into the matter.

The book walks the whole end-to-end process of developing in an agile way. Starting up by gathering requirements, analyze them, creating an iteration plan, monitoring that plan, execution styles and delivering production ready software. As a small bonus, the book goes scratches the surface of a few concepts that are very common in development.

Unit testing: creating an armor for yourself that your code works
TDD: Test driven development, creating the tests first relying on the validation of your user stories, prove they fail and then create the code to make them pass the tests and of course Refactor the code afterwards.
Refactoring as a good continuous practice
Continuous integration concepts

Albeit, this a must have book for your collection, I’m putting it up on my front row.

Regards,
Kyor

An other view on a Switch Case

2011-09-01T14:36:00.000+02:00

As first post I'm was inspired by this post. I thought about what Anoop said and started thinking about possible variations.

But lets start with the basics, right. If you stranded on this page I assume you know a wee bit about programming or a lot more then I do. (Just to note that I'm always open for tips, hints, criticism, ...)

A basic switch case in c# looks like this:

var str = "Toad";
            switch (str)
            {
                case "Bird" :
                    Console.WriteLine("It's a bird!");
                    break;
                case "Toad" :
                    Console.WriteLine("It's a toad!");
                    break;
                default:
                    Console.WriteLine(string.Format("I don't know a {0}.",str));
                    break;
            }

Nothing really special about it, when you have read through Anoop’s post you can alter a switch case to be the following:

public class SwitchCase : Dictionary<string, Action>
   {
       public Action DefaultAction
       {
           get;
           set;
       }
  
       public SwitchCase(Action defaultAction)
       {
           DefaultAction = defaultAction;
       }
  
       public void Eval(string param)
       {
           if (ContainsKey(param))
           {
               this[param]();
           }
           else
           {
               if (DefaultAction == null)
                   throw new NullReferenceException("Default action may not be null.");
               DefaultAction();
           }
       }
   }

Usage:

var sc = new SwitchCase(() => Console.WriteLine("The default action"))
                         {
                             {"Case1", () => Console.WriteLine("Case 1")},
                             {"Case2", () => Console.WriteLine("Case 2")},
                             {"Case3", () => Console.Write("Case 3")}
                         };
  
            sc.Eval("Case1");

Or converting this into a generic becomes:

public class ActionSwitchCase<TTkey> : Dictionary<TTkey, Action>
    {
        public Action DefaultAction
        {
            get;
            set;
        }
  
        public ActionSwitchCase(Action defaultAction)
        {
            DefaultAction = defaultAction;
        }
  
        public void Eval(TTkey key)
        {
            if (ContainsKey(key))
            {
                this[key]();
            }
            else
            {
                if (DefaultAction == null)
                    throw new NullReferenceException("Default action may not be null.");
                DefaultAction();
            }
        }
    }

Which you could use as:

var asc = new ActionSwitchCase<string>(() => Console.WriteLine("Default!"))
                                        {
                                            {"Case1",() => Console.WriteLine("Case 1")},
                                            {"Case2",() => Console.WriteLine("Case 2")},
                                            {"Case3",() => Console.WriteLine("Case 3")}
                                        };
  
            asc.Eval("Case1");

While actually putting it a bit further is applying it to functions, creating the following class:

public class FuncSwitchCase<TTKey, TInpuType, TResultType> :
        Dictionary<TTKey, Func<TInpuType, TResultType>>
    {
        public Func<TInpuType, TResultType> DefaultFunction
        {
            get;
            set;
        }
  
        public FuncSwitchCase(Func<TInpuType, TResultType> defaultFunc)
        {
            DefaultFunction = defaultFunc;
        }
  
        public TResultType Eval(TTKey key, TInpuType param)
        {
            TResultType output;
  
            if (ContainsKey(key))
                output = this[key].Invoke(param);
            else
            {
                if (DefaultFunction == null)
                    throw new NullReferenceException("Default function may not be null.");
                output = DefaultFunction(param);
            }
  
            return output;
        }
    }

Which then could be used as:

Func<string,string> f1 = (x) => x + "function 1";
            Func<string, string> f2 = (x) => x + "function 2";
            Func<string, string> df = (x) => x + "default";
  
            var fsc = new FuncSwitchCase<string, string, string>(df)
                          {
                              {"Case1", f1},
                              {"Case2", f2}
                          };
  
            Console.WriteLine(fsc.Eval("Case1","To hell with..."));

This opens a few doors in create switch cases. And credits to Anoop’s post putting down the idea.

Regards,
Kyor