Categories
Code snippets Javascript Uncategorized

AngularJS ng-options syntax

I keep forgetting the correct syntax for ng-options in angular dropdowns. The documentation can be found here: https://docs.angularjs.org/api/ng/directive/ngOptions

The syntax used in the documentation is a bit confusing:

select as label for value in array

A concrete example for the syntax would look like this:

item.Id as item.Name for item in itemSource

I hope this helps myself and maybe someone else as well…

Categories
Good practices/Training

Don’t use magic numbers

Quick note to start a new category on this blog: Good practices/Training

Everyone who doesn’t know what a “Magic number” in coding is, please quickly read this: http://stackoverflow.com/questions/47882/what-is-a-magic-number-and-why-is-it-bad

In some rare cases it might be allowed to use magic numbers (like 0/1 or in a circles calculation you may use 90/180/270/360 if it is clear why it’s being used). But in all other cases you have to explain such numbers – and the best way to do that is naming a variable or constant.

Example:

double angle = currentAngle + (angleSize / 3);

Why is this divided by 3?

angle = currentAngle + (angleSize / 3.5);

Why is this divided by 3.5?

The very least you can do here is add a comment with a short explanation.

Categories
Linux Rails

Install rails >=1.9.3 on Ubuntu 12.04 (for Redmine) with RVM

Quick reference on installing specific versions of rails on an “older” version of ubuntu without the need of having all packages in the ubuntu repositories.

\curl -L https://get.rvm.io | bash -s stable --ruby
/usr/local/rvm/bin/gem install ... (all needed gems)
/usr/local/rvm/bin/gem install passenger
apt-get install libcurl4-openssl-dev apache2-threaded-dev
/usr/local/rvm/gems/ruby-2.0.0-p247/gems/passenger-4.0.10/bin/passenger-install-apache2-module

The Apache 2 module was successfully installed.

Please edit your Apache configuration file, and add these lines:

   LoadModule passenger_module /usr/local/rvm/gems/ruby-2.0.0-p247/gems/passenger-4.0.10/buildout/apache2/mod_passenger.so
   PassengerRoot /usr/local/rvm/gems/ruby-2.0.0-p247/gems/passenger-4.0.10
   PassengerDefaultRuby /usr/bin/ruby1.8

After you restart Apache, you are ready to deploy any number of Ruby on Rails
applications on Apache, without any further Ruby on Rails-specific
configuration!

After doing so, you can continue to install redmine as described in http://www.redmine.org/projects/redmine/wiki/RedmineInstall

/usr/local/rvm/gems/ruby-2.0.0-p247/bin/bundle install --without development test

This will fail if the environment is not set correctly – this helped me a lot:
http://stackoverflow.com/questions/12127603/usr-bin-env-ruby-noexec-wrapper-fails-with-no-file-or-directory

source /usr/local/rvm/environments/ruby-2.0.0-p247

And finally the last missing gem:

/usr/local/rvm/bin/gem install rake -v=10.1.0

That’s it.

Categories
MVC

Typesafe viewmodel for MVC frameworks

Ever since I was working with MVC projects, looking at sample code even from Microsoft, I always wondered why everyone is using ViewBag and other “unsafe” techniques for the data to be displayed. I would have sticked to developing PHP applications if I wanted to do that. (And maybe even some PHP frameworks might do a better job than MS from this perspective.)

Now I came up with a very simple solution that I will be using in the future whenever possible: The view-model basically consists of three classes:

  • ViewBase
  • PageBase
  • ContentBase

With this simple setup, there is no need to use the dynamic ViewBag or other constructs that can lead to runtime errors when changes are done to the controller or to the model. Every property can be checked at compile-time for the template _Layout.cshtml as well as for every view.

Categories
Development Javascript

Bézier curves

Some time ago I did some interview question that I just wanted to share mostly because I want to keep a backup of it.

The questions were the following:


  1. We start with three dots (green) on the screen.
  2. We need to connect these dots with a smooth line (blue) rather than direct lines (grey).
  3. What would be your approach if you can use only following methods: lineTo and curveTo?
    lineTo(X,Y)
    Draws a line using the current line style from the current drawing position to (X,Y); the current drawing position is then set to (X,Y).
    curveTo(controlX:Number, controlY:Number, anchorX:Number, anchorY:Number) : void
    Draws a curve using the current line style from the current drawing position to (anchorX, anchorY) and using the control point that (controlX, controlY) specifies. The current drawing position is then set to (anchorX, anchorY). The curve drawn is a quadratic Bezier curve. Quadratic Bezier curves consist of two anchor points and one control point. The curve interpolates the two anchor points and curves toward the control point.

When I first read the challenge and that I’m not bound to any technology, I thought of HTML5, Canvas and SVG. A while before that time I had stumbled upon some impressive samples of JavaScript drawing with Raphael Library so I gave it a try.
Since they stated: “Feel free to use any resources available to you.” I decided to take full advantage of the library, but still had to do the curves calculation.
I also decided to go with HTML5 and Canvas since that is the field of work I like the most – and in addition was the most simple way to deploy and show the code and results.

To get a simple and clean start I used the http://html5boilerplate.com/ template.

All the javascript code of the drawings can be found here: http://mattanjakern.de/share/bezier/js/script.js

So, here’s the result:

Categories
Development GAE play! framework

play! framework and Google App Engine

I just uploaded my first app to the Google App Engine – which is unbelievably simple with play! framework and the gae module. The application for my test is just 10 lines of code in the controller and all it does (for now) is to extract the URL of the latest Chromium Build from the download page.

The deployment of a play! application requires three pretty simple steps to be executed:

1. Download Google App Engine SDK für Java and extract the zip.

2. Install gae module

$ play install gae

Then the module needs to be registered in conf/dependencies.yml like this:

require:
    - play -> gae 1.6.0

There is one more command I had to run to activate the module (which I don’t know whether it is always necessary because I never had to do that before):

$ play dependencies

3. Deploy and run
And then to deploy the app all there is to do is to run one command, insert Google credentials and the files will be uploaded to the Google App Engine and can be served only seconds later.

$ play gae:deploy --gae=/path/to/your/extracted/appengine-java-sdk-1.6.3

Et voilà: http://kithelpers.appspot.com/

Categories
Development Uncategorized WPF

Synchronize a long-running task to the UI-Thread in WPF/.NET

This post explains how to process data from a task in WPF in a way I’d consider “best-practice”. The main code could or should be in the view-model.

Code-behind (keep it short or better yet use a delegate command)

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            try
            {
                // Get some parameters if necessary
                [...]

                this.SomeViewModelData.StartSearch([parameters...]);
            }
            catch (Exception ex)
            {
                log.Warn("Error handling...", ex);
            }
        }

And the code in the view-model:

  • StartSearch() is a method in the view-model class and sets the properties of the view-model that are bound to the UI
  • this.IsWaiting is some bool property to indicate the waiting status in the UI
  • this.ResultData is not bound but contains data to be processed
  • ProcessResultData() processes the result and sets the output (for example it might fill an ObservableCollection)
        public void StartSearch([parameters...])
        {
            try
            {
                var uiScheduler = TaskScheduler.FromCurrentSynchronizationContext();

                this.IsWaiting = true;

                Task.Factory.StartNew(() =>
                {
                    this.ResultData = DatabaseService.GetComplexData([parameters...]);
                }).ContinueWith((t) =>
                {
                    // Invoke in UI Thread via scheduler
                    this.ProcessResultData();

                    // Cancel waiting indicator
                    this.IsWaiting = false;
                }, uiScheduler // <-- This is the important part: Continue
                               // the task in the UI thread
                {
                    if (t.Exception != null)
                    {
                        log.Warn("Task exception handling...", t.Exception);
                    }

                    this.IsWaiting = false;
                }, TaskContinuationOptions.OnlyOnFaulted);
            }
            catch (Exception ex)
            {
                log.Warn("Do exception handling... ", ex);
                this.IsWaiting = false;
            }
        }
Categories
Development Tools

Howto: Task and issues tracking with Redmine and Eclipse Mylyn

While working on one of my current projects I came to realize the importance of good task management and issue tracking. Sadly the use of an expensive Team Foundation Server does not guarantee good task tracking when the tasks are only used to do the rough planning in MS Project. Much more important than the tool being used, is to use any tool in a good and efficient way. Even for projects with one single developer, using task management helps to keep track of the progress and to work and focus on subtasks.

Redmine

There are a lot of issue tracking and project management tools out there. I’ve been using trac for quite some time in different projects but then I have been looking for a tool that does the same stuff but allows to manage multiple projects within one instance. After installing Redmine the search was over 😉 Redmine comes with a big feature list and in addition there are some handy plugins, most mentionable the Stuff-To-Do plugin.

To enable synchonization between Eclipse Mylyn and Redmine, the Mylyn Connector plugin needs to be installed in Redmine. To do that, simply cd to your Redmine root dir and run

ruby script/plugin install git://redmin-mylyncon.git.sourceforge.net/gitroot/redmin-mylyncon/redmine-mylyn-connector

Depending on your type of installation, a webserver restart may be required. In addition to the plugin, also make shure that “Enable REST web service” is activated in the Redmine Authentication Settings.

Eclipse & Mylyn

Two Features need to be installed in Eclipse in Order to use the Redmine task integration: Mylyn and the Redmine Mylyn Connector. These Features can simply be installed using these Update Sites:

Mylyn: http://download.eclipse.org/tools/mylyn/update/helios

Redmine Mylyn Connector: http://redmin-mylyncon.sourceforge.net/update-site/N/

After installing these Features, open the “Task Repositories” view and add a Task Repository with these self-explanatory settings:

When the settings have been successfully validated and the new task repository has been created, a new dialog is presented to create the first query for the task repository. The task list can be filtered by every available field of the Redmine task repository. As a result of the query the Task List view gets populated with the task items of your Redmine instance.

The combination of the Eclipse Mylyn and Redmine also provides a bunch of additional features such as time-tracking of individual work items, to filter displayed items by the active working set linked with the selected task and a whole lot more…

And always remember: The most important point is to use project and task tracking in the first place 🙂

Categories
Development Tools

Useful SQL Server Management Studio extension

Today I discovered a very useful plugin for MS SQL Server Management Studio that has a big feature list and can help out when you miss code completion or need to create stored procedures for CRUD operations.

http://www.ssmstoolspack.com/

Enjoy!