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:

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…

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?
    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 template.

All the javascript code of the drawings can be found here:

So, here’s the result: