Multiple ReCaptcha on the same page

Been trying to use multiple Google reCAPTCHAs on the same page with mixed success. Reason for doing this is for example a login page with a reCAPTHCA for the login form and a modal opening with a reset password form. I prefer to use the “invisible” reCAPTCHA since it gives a cleaner look. To be able to use the native validation of forms in HTML5 i need to manually execute the reCAPTCHA when the form is submitted which gave me issues with multiple reCAPTCHAs.

Continue reading

Powershell: IIS Application Pool Killer

Every now and then IIS application pools lock up and needs to be killed. You can add the field PID in Task Manager and then use cmd tools to find which one of the IIS Worker Process is the right one and kill it. I created a simple script that lists all the IIS Application Pools by name, select the one you need to kill and the script kills it. The script is available on my Github and is named IISAppPoolKiller.ps1. Please comment below what you have been using this for!

Continue reading

AngularJS: Drag & Drop

Implementing drag and drop in AngularJS is pretty straight forward using directives. This also makes the code re-usable throughout your app and/or other projects as well. As always there is a few fays of accomplishing this and the number of plugins available are many. If the plugins doesn’t perform what you need you can easily write your own directives to take care of this. All the examples I found out there didn’t take care of updating the actual data set in the background. One even did DOM manipulation outside of AngularJS which is a big NO NO! Just taking the DOM element and removing it from one div and adding it to another doesn’t really help much when manipulating data in a webapp.

Background for this example

So we have two lists that we want to drag and drop between. In this case they are hard coded but it can be something retrieved from a REST API for example. Whenever we drag an item to a new list we need to update the data set. If we then chose to send the update up to the server directly or wait for the user to hit the “save” button is a different story. So for this example I just created a basic data set like this:

var dataModel = {
  'reds': [{
    'id': 'red1',
    'text': 'This is red 1'
  }, {
    'id': 'red2',
    'text': 'This is red 2'
  }],
  'greens': [{
    'id': 'green1',
    'text': 'This is green 1'
   }, {
    'id': 'green2',
    'text': 'This is green 2'
   }]
}

We then create a controller and bring in the data simply like this:

app.controller('DragDropCtrl', function($scope) {
    $scope.data = dataModel;

That gives us the ability to use ng-repeat to display the data like this:



<div ng-app="dragDrop" ng-controller="DragDropCtrl">

<div id="reds" class="list red" droppable>

<div class="item" id="{{ item.id }}" ng-repeat="item in data.reds" draggable>
    {{ item.text }}
   </div>

  </div>


<div id="greens" class="list green" droppable>

<div class="item" id="{{ item.id }}" ng-repeat="item in data.greens" draggable>
     {{ item.text }}
    </div>

  </div>

That will be the base for our drag and drop example. As you can see in the HTML above we have the directives droppable and draggable applied to the list and the items. These directives uses native javascript functions to make the items draggable the lists able to accept drops. The draggable directive is the most straight forward, it looks like this:

app.directive('draggable', function() {
  return function(scope, element, attrs) {
    // Get the native element
    var el = element[0];
    el.draggable = true; // Make dragable
    
    // Add event listeners
    el.addEventListener(
      'dragstart',
      function(e) {
        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setData('item_id', this.id);
        e.dataTransfer.setData('origin_id', el.parentElement.id);
        this.classList.add('dragging');
        return false;
      }, false
    );

    el.addEventListener(
      'dragend',
      function(e) {
        this.classList.remove('dragging');
        return false;
      },
      false
    );
  }
});

It just uses basic javascript functionality to make the object, in this case a fiv, draggable and attaches the ID as the data payload. It’s the droppable directive that is the more interesting one and actually communicates back to the scope and in turn the controller. The droppable directive looks like this:

app.directive('droppable', function() {
  return function(scope, element, attrs) {
    // Get the native element
    var el = element[0];
    
    // Add event listeners
    el.addEventListener(
      'dragover',
      function(e) {
        e.preventDefault(); // Allow the drop
        
        // Set effects
        e.dataTransfer.dropEffect = 'move';
        this.classList.add('dragover');
        return false;
      }, false
    );

    el.addEventListener(
      'dragenter',
      function(e) {
        this.classList.add('dragover');
        return false;
      }, false
    );

    el.addEventListener(
      'dragleave',
      function(e) {
        this.classList.remove('dragover');
        return false;
      }, false
    );
    
    el.addEventListener(
      'drop',
      function(e) {
        this.classList.remove('dragover');
        
        // Get the data
        var destination = this.id;
        var item_to_move = e.dataTransfer.getData('item_id');
        var origin = e.dataTransfer.getData('origin_id');
        
        // Call the scope move function
        scope.MoveItem(origin, destination, item_to_move);

        return false;
      }, false
    );
  }
});

All this is also basic javascript for drag and drop functionality. The interesting part here is when we call the MoveItem function on the scope. The scope comes from the controller containing the list of items. So we need to define the function below on the controller scope to make this work. One thing to remember here is to be able to re-use this code throughout our application the controller scope must define this function where these directives are used.

$scope.MoveItem = function(origin, dest, item_id) {
  // Check if dropped in origin
  if (origin == dest) return;
  
  // Find item in origin array
  for (i = 0; i < $scope.data[origin].length; i++) {
    if ($scope.data[origin][i].id == item_id) {
      // Splice the item from the origin array
      var item = $scope.data[origin].splice(i, 1);
      // Push to the destination array
      $scope.data[dest].push(item[0]);
      // End loop
      break;
    }
  }
  
  // Update UI
  $scope.$apply();
}

So we basically manipulate the two arrays of items depending on the drag and drop direction. Since this was called from the directive we have to call the $apply() function on the scope so the update gets pushed to the UI. Depending on your data setup this can be handled id a service as well, the basic principal is the same.

This demo example is available on JSFiddle – AngularJS – Drag and Drop

Visual studio: Dump data to file from immediate window

Friday afternoon I started a test run against an API to sort some file issues out. Saving the result in a List<string> while running to dump it out to a text file when done. Due to bad formatting of the filename I got an unhandled exception. Quick test code doesn’t always include try-catch statements where they should as you know. Since the the information was in the list I went ahead and dumped it out to a new text file via the immediate window.

You can more or less run any code via the immediate window as long as everything you need are in the current context. I wrote a short example on how to do this if you ever run into the same issue. Immediate-window-demo on Github.

Front-end Demos on Github

I really like both JSFiddle and Plunker but they come with limitations. To counteract cross site scripting issues and other security concerns they sandbox the code with iFrames and similar methods. That is just fine when you do simple examples of front-end implementations. I actually managed to implement a connection to Google oAuth ina JSFiddle but it was hard and requires several re-loads of the page before the user actually get anywhere. Plunker suffer from similar limitations but is much better for larger demos since you can split the code into several files. I also like their editor better.

For more complex demos that implement oAuth, requiring post-backs or other more advanced features I’m now using the Github.io pages. Simply put the service allows static pages, which is great for JavaScript demos, to be served straight from a Github repository!

First you setup a repository named {githubusername}.github.io and check in whatever HTML, CSS and JavaScript content you’d like to run. This will be accessible via the {githubusername}.github.io web address. It has support for SSL (HTTPS) as well as custom domain names. If you use a custom domain name you will not be able to use SSL at this time. I have seen workarounds with CDN solutions like CloudFlare but I haven’t tested it my self yet.

For any other repository you create you can commit files to a branch named “gh-pages” and they will be served at {githubusername}.github.io/{repositoryname}. In my case I put a “front page” in my {githubusername}.github.io repository linking other demos but you could actually build a complete blog in that space if you like. So far I have only scratched the surface of what can be done with this but there are a lot of information out there. At the bottom of this post there is a link to some more information to get you started.

The reason I ended up with this solution was due to JSFiddle/Plunker implementation complexity for my latest demo. When I moved to the US from Sweden my phone took care of my phone numbers missing country code and allowed me to dial them as +46. When I used Skype to dial them it just got the original number entered in the phone without country code. One big difference between the dial screen in Skype and the phone is that you can’t edit the phone number in Skype. You have to delete the whole thing and type it in with country code and then the number. Since I sync my phone with Google Contacts I figured I’ll use their API and a E164 (country code + phone number) javascript library to update all contacts in my address book.

Since the code use for my self was a bit of a one of, I now type in new numbers with country code, I thought I’ll make a functioning demo out of the code. If people want to use it to correct their own address book they can. At the same time it’s a complete Google oAuth, API implementation demo written in AngularJS.

E164 formatter demo: https://kallsbo.github.io/gcontactse164/
G
ithub demos: https://kallsbo.github.io

More info on Github pages: https://pages.github.com/

In the menu above you will find links to my demos on JSFiddle, Plunker and Github.