Toolroom Tech Blog

Devlopers Digest

JS Snippet 2: Get multiple occurring values from an array

How to get multiple occurring values from an array in JavaScript

See a working Demo here:

 * Get multiple occurring values from an array.
 * @param {Array} arr - The Array to check for duplicates
 * @param {Function} [parseFunction] - Optional function that is used to parse each value. I.e. parseInt
function multiples(arr, parseFunction) {
    var i,

//Count occurrence of each value
    for (i=0;i<len;i++) {
        key = arr[i];

    //Now push all items with multiple occurrence into result
    for (i in obj) {
        if(obj[i] > 1) {
            if(parseFunction) {
                i =, i);
    return out;

//returns ["4", "5", "7"]

//returns [4, 5, 7]
console.log(multiples([1,2,3,4,4,5,5,6,7,7,7,7,7,8], parseInt));

JS Snippet 1: Remove duplicate values from an array

How to remove duplicate values from an Array in JavaScript

See a working example here:

function unique(arr) {
    var i,
    //Store each value as key/value pair in a new object
    for (i=0;i<len;i++) {
    //Now push the object into the result array
    for (i in obj) {
    return out;

console.log(multiples([1,2,3,4,4,5,5,'Hello World','Hello World',6,7,7,7,7,7,8], parseInt));
//result: [1, 2, 3, 4, 5, 6, 7, 8, "Hello World"]

KalEl - A plain JavaScript DateTime Picker and Calendar

First working beta of KalEl plain JavaScript DateTime Picker and Calendar is online: https://github.

First working beta of KalEl plain JavaScript DateTime Picker and Calendar is online:

Or watch the demo here:

Route specific CSS in Ember.js

Often we want to use route specific css in our apps. In Ember you can simply make the route itself responsible to add css classes to your Body.

Often we want to use route specific css in our apps. In Ember you can simply make the route itself responsible to add css classes to your body.

  activate: function() {
  deactivate: function() {
  routeClassName: function() {
      var routeClassName = this.routeName.replace(/\./g, '-').dasherize();
      //Instead of the application route name we use the app name
      if(routeClassName === 'application') {
          routeClassName = 'dweedo';
      return routeClassName;

9 reasons why to use Single Page Web Apps

... and 9 why you should do it not.

... and 9 why you should do it not.

This week I had a discussion with a friend where I tried to convince him of SPAs ... but It wasn't easy. So I decided to bring tdown and share my thoughts. There may be scenerios where it really doesn't make any sense to implement an SPA. But you should consider it - it's a great opportunity to create a great web based app. I hope this list will help you to decide whether to make a web application or not.



REST API required
Since you need an API to exchange data with your Server, you can reuse this API with other, i.e. mobile, apps. If well designed, you can do a complete frontend rewrite without any(!) impact on the server.
REST API required
Some would say it's more work. Indeed, it is.
Testability of server communication
It's much easier to test an API than a mishmash of HTML and Javascript.

Highly responsive

You can immediately give feedback to user activity. No need to perform a partial or full page roundtrip. Once loaded you can simply reuse data in different ways or just make the whole thing more interactive.
Longer initial loading
Since you initially load the whole application at once, including Scripts, Templates and CSS, the time to load the app will increased. In extreme cases drastically.
No server state
Since stateless, we do not need to keep a 'clone' of the client state on the server. You just need to authenticate the requests.
No server state
You don't know the requesting client. That means the API must claim all parameters it needs within each action again and again. And: you need to implement a proper security concept to validate each request by yourself!
Data Binding
Most JavaScript SPA frameworks come with bindings. They save lots of work since you are not required to pay attention on all parts of the application that should be updated if whatever happens whenever.
Side effects & debugging issues due Data Binding
Sometimes bindings may lead to side effects you would never think of. Furthermore it can be hard to debug those bindings...
Lightweight data exchange
Once loaded, the app communicates only data (JSON) with the server. No heavy requests, no heavy HTML responses. In extreme cases you can make almost everything offline.
Furthermore, while debugging your app, you can better read and mock the data transmitted between client and server, i.e. via Fiddler.
Easier to manipulate request and response
Transmitted data may always be subject of interception. But it's much easier to manipulate human readable JSON.

JS business logic
You have to implement the whole Business logic with JS ... this seems very horrible. On the other Hand, why not - good apps always check data integrity on the Server. 

No date issues
Prevent issues where you have to guess the timezone or the local date format. Just give UTC to the Client and it does the rest. Don't bother about time zones, the Client knows it!

JS Memory leaks
Well, that's a Problem. Most Frameworks are well built to minimize the potential to run into such issues. I recomment to sometimes do a full page load instead of just a partial switch.

Search engines do not speak JS
That's not the full truth, Google tries to understand JS. But in fact you should also provide a static version of the content you want to expose to search engines.

No Server generated Scripts
No need to generate JS generically on the Server.

JS must be enabled on the Browser
But imho that's not a real issue anymore.
Move load from server to client
Since everything is rendered on the client, your servers will make a party.


Selenium: Automated UI Tests For The Web

Silencium, Silencium. Selenium.In short terms Selenium is a suite of open source tools to automate U

Silencium, Silencium. Selenium.

In short terms Selenium is a suite of open source tools to automate UI Tests for web applications. And by the way ... you can even automative annoying administrative tasks with it :)

Let's outline what Selenium means

Browser Automation

Selenium wraps the Browser and uses its native Automation Support. It provides full access to the dom and of course JavaScript.

Supports single-page applications

Due to its JS and asynchronous support, Selenium is great for testing SPAs.

Large browser support

Selenium supports a wide range of Browsers, even for mobiles.

Supports multiple programming languages
Write (or record) coded UI Tests with the programming language of your choice: Java, C#, Python, Ruby, Perl, PHP

Well documented API

Selenium has a considerable documentation available on their Website. Including samples in different languages.

Open Source

Wow! You can get Selenium for free!

The Selenium toolset

Selenium 1 (aka. Selenium Remote Control / RC)

Selenium 1 was the main Selenium project for a long time, it still has support but not active development. Not all functionality of Selenium 1 is availabable on Selenium 2 yet, so this may be your project in some special cases.

Selenium 2 (aka. Web Driver)

Web Driver addresses the limitiations that arose with Selenium 1. With the WebDriver API, Selenium provides a more cohesive and object oriented approach than its predecessor. It furthermore has a much better support for single page applications, that became popular at least with Angular, Backbone and Ember.
While using Selenium Web Driver you are usually not required to run the Selenium Server, since Web Driver will directly invoke the browser. But in certain cases, i.e. if you're using Selenium-Grid or want to connect to remote machines, you will need it.

While Selnium 1 injected JavaScript into the browser and used its JavaScript to drive the test, Selenium 2 directly utilizes the browsers native automation support.

Selenium IDE

Selenium IDE is a Firefox plugin that provides prototyping for test cases. You can record your tests and export them into one of the many supported programming languages. But remember, Selenium IDE is not intended for serious, robust test automation!

Selenium Grid

Selenium Grid allows to run your tests in parallel on different remote machines. This has two advantages:
  1. significantly boost the performance of your large or just slow test suites
  2. run your tests within multiple environments

Selenium WebDriver and .Net

Using Selenium with your project is as simple as possible.

1. Create or just reuse a directory where you can provide the Selenium Driver for your Browser. Then add this directory to the PATH variable. You can also store the files directly within your solution, but there may be issues depending on the solution. I prefer the PATH way.
2. Download the latest Web Driver for the desired browser
3. Create a unit test project with Visual Studio
4. Download the latest from
5. Extract the selenium-dotnet files and reference them within your VS project
6. Write your test and ... run it.


If you want to see an example, just ask!

Ember-CLI: '$' is not defined

If you get this error, you&#39;re just missing a reference to JQuery. But hey, you don&#39;t need any import

If you get this error, you're just missing a reference to JQuery. But hey, you don't need any import - Ember has everything you need:

//Be sure to have Ember imported
import Ember from 'ember';
//Instead of this
//Just do this

Linq: Order by Null last

How to order null elements to the bottom with Linq

Sometimes you might to order values, where Null values should go to the bottom of the result. To achieve this, just use the following:

myObjects.OrderBy(_ => _.Value == null).ThenBy(_ => _.Value);


Windows authentication with Forms fallback in ASP

Windows authentication with Forms authentication if first one fails. Works with and MVC.

These days I was working on a simple MVC 4 application to be hosted on IIS 7.5/8, nothing special. But it made me crazy when I tried to implement the last feature ... windows authentication with forms authentication fallback. THe problem is, that IIS typically supports either Windows or Forms authentication. In principle you can do two things: a single-app solution, where both authentication methods are combined within a single application or a multi-app solution that uses one app per authentication.

How does Windows authentication work?

Windows authentication follows the NTLM/Kerberos challange handshake protocol. This is more or less, what happens:

1) User requests access to a resource

2) The server negotiates the protocol with the client

  • IIS sends two WWW-Authenticate headers: Negotiate and NTLM

3) Our negotiation comes up with NTLM authentication (Kerberos is more secure/complex, search it on your favorite search engine):

  • IIS responds with a 16-byte random challenge message
  • The client sends a hash, generated from the users password to encrypt the challenge sent by the server
  • IIS now sends user name, the original challenge, and the response from the client to the Domain Controller
  • The DC obtains the password hash for the user, and then uses this hash to encrypt the original challenge. Next, the domain controller compares the encrypted challenge with the response from the client computer. If they match, the domain controller sends the server confirmation that the user is authenticated.
  • If the credentials are ok, IIS grants access to the requested resource
  • IIS passes to ASP.NET the token that represents the authenticated user or anonymous user account. It is accessible via HttpContext.User.

Single-App Solutions

I found lots of suggestions to create a single-application solution, but mostly not worth implementing it due complexity or possible maintenance issues when moving the application to other servers.

Microsofts Paul Wilson writes on how to do it with classic on IIS 6. His solution builds up on forms authentication and requires two login pages and a custom 401 page. But on the one hand i do not want no modify the application too much andf on the other hand it's hard to make it work on IIS7.

So, I decided to use a multi-application approach that indeed needs a second application but is much smarter and cleaner in my opinion.

Multi-App Solution

As already said, you can only use either windows or forms authentication in a application. And this is exactly the way this solution is based on.


  • No modification or optimization of your base application
  • Use only standard authentication modules
  • Attach this solution to any forms application


  • Requires a second application or at least a sub-application on IIS

Implementation Summary

First of all we need our base web application providing configured to use forms authentication. Then we need another, almost empty web application, that is configured to use Windows Authentication. The latter is responsible to do the Windows Authentication and to set the forms authentication cookie before it redirects to our base web application. If the windows authentication did not work, HttpContext.User.Identity.IsAuthenticated is set to false and the user will be redirected to the forms login page.

How to do it uses a so called machine key for ViewState encryption and validation as well for signing the authentication ticket for forms authentication. This feature was introduced especially for load balancing. That means, if both of our applications, the base and the authentication app, use the same key, they can both access the authentication cookie.

In our authentication app we just need one Action, I create the action 'Index' within a controller named 'NtlmController'. Since the Windows authentication of the request is already done before the action is executed, we can  access the authentication token here. If the token says, the user is authenticated, we set the authentication cookie and that's it.

public ActionResult Index()
	var principal = (IPrincipal) Thread.CurrentPrincipal;
	if (principal != null) {
		if (!principal.Identity.IsAuthenticated)
			throw new ArgumentException("Principal is not authenticated, should not happen :)");
		//User is validated, so let's set the authentication cookie
		FormsAuthentication.SetAuthCookie(principal.Identity.Name, true);

	//use this if your authentication app is a sub-app of your base app
	//return Redirect("~/../");

	//use this if your authentication app is another app on the server
	return Redirect("");

Now generate a machine key for the authentication app. In IIS >=7 it's easy to achieve this: In IIS left click on your app, in the features view open machine key and click generate keys. Save it and IIS will update your web.config automatically.


The resulting line should look like this:

	<machineKey decryptionKey="C7976FD237C42579DDD645F4649DD05A3F09F32069691C34" validation="SHA1" validationKey="1EE24CF0741E7F7557E5390CCEF5F5DF1BF90F098294AF2BC3D8B3C2F1195E2E268377FDD7361AE8998374064A6CB23DE361414DDDDA90DF49D4BC6E55687F63" />

Now let's do the only modifications to our base app. First copy the machineKey line to to the web.config and add some parameters to the forms authentication configuration, so that redirects between both applications are allowed:

	<machineKey decryptionKey="C7976FD237C42579DDD645F4649DD05A3F09F32069691C34" validation="SHA1" validationKey="1EE24CF0741E7F7557E5390CCEF5F5DF1BF90F098294AF2BC3D8B3C2F1195E2E268377FDD7361AE8998374064A6CB23DE361414DDDDA90DF49D4BC6E55687F63" />
	<authentication mode="Forms">
		<forms loginUrl="/Account/Login" timeout="2880" domain="localhost" path="/" enableCrossAppRedirects="true" name=".ASPXFORMSAUTH" protection="All" />

That's it. If you directly access your base app, you'll get your forms login. But if you access the authentication app from a machine within your domain, you will automatically be logged on.

Good luck.



Furher information

Microsoft Word 2013: PDF Flow

New Word 2013 opens PDF files :)

Today I unintentionally found the probably best feature in Word 2013: PDF Reflow. In Terms of Microsoft this means: Open a PDF in Word, and its paragraphs, lists, tables, and other content act just like Word content.

And it works! :)