JP Hellemons

Make your own Wordfeud helper

Fri, 24 Feb 2012 18:04:00 +0100

Scrabble is funny, and to play it with friends even more. Especially because you can spread the game throughout your day. But I am a coder, I like math more than words. So to keep up with this Wordfeud trend, I need help. So why not code a helper?

I only use the Dutch library which is a modified version of opentaal. I downloaded the ‘opentaal’ library from this url:

http://www.opentaal.org/bestanden/doc_download/18-woordenlijst-v-210g-bronbestanden-

and used the following 48 lines of C# code to make a small helper.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows.Forms;
using System.IO;

namespace Opentaal
{
    public partial class Form1 : Form
    {
        private static List<string> _lijst;

        public Form1()
        {
            _lijst = File.ReadLines("OpenTaal.txt").ToList();
            InitializeComponent();
        }

        private void button1_Click(object sender, EventArgs e)
        {
            if (textBox1.Text.Length > 0)
            {
                string zt = textBox1.Text.Trim(); // search parameter
                switch (comboBox1.SelectedItem.ToString())
                {
                    case "Begint met":
                        ShowFound(_lijst.Where(p => p.StartsWith(zt)).ToList());
                        break;
                    case "Eindigt op":
                        ShowFound(_lijst.Where(p => p.EndsWith(zt)).ToList());
                        break;
                    case "Bevat":
                        ShowFound(_lijst.Where(p => p.Contains(zt)).ToList());
                        break;
                }
            }
        }

        private void ShowFound(List<string> l)
        {
            textBox2.Clear(); // for second search
            foreach (string st in l.OrderBy(s => s)) // order by alfabet 
                textBox2.Text += st + Environment.NewLine;
            int eind = textBox2.Text.LastIndexOf(Environment.NewLine);
            textBox2.Text = textBox2.Text.Substring(0, eind); // remove last linebreak
        }
    }
}

You can take this code and make more search options. Please note that the opentaal library is released under a creative commons license.

Download the Visual Studio project as zip

Browser speed test 2012

Thu, 09 Feb 2012 23:41:00 +0100

How fast are we today? More and more web applications are using JavaScript to improve the UX (User eXperience) Almost all websites use frameworks like jQuery and mooTools, extJs etc. for this. So it is important that our browsers are fast with JavaScript!

Browsers are updated more often because they are more important every day. Since I have several extensions for Chrome and Firefox, it’s not fair to compare RAM usage. So I only looked at JavaScript performance. A way to compare it, is to run SunSpider http://www.webkit.org/perf/sunspider/sunspider.html

So I run all my installed browsers with my Centrino 2 cpu, win7sp1x64 and here are my results, run with my hardware.

Internet Explorer 9.0.8112.16421	220ms
Internet Explorer 10 platform preview 2.10.1008.16421)	234ms
Firefox 11 beta	250ms
Opera 11.61 (build 1250)	255ms
Safari 5.1 (7534.50)	257ms
Chrome 17.0.963.46 beta-m	277ms

As you can see, the results are very similar these days. So if you have an up-to-date browser, your fine.

Also check out this blog from 2 years ago:
http://lifehacker.com/5457242/browser-speed-tests-firefox-36-chrome-4-opera-105-and-extensions

And if someone is still using IE6 or 7, please upgrade a.s.a.p. check out the kill bill’s browser website if you are not convinced.

Enjoy your browser!

Testdrive Windows 8

Fri, 30 Dec 2011 05:40:00 +0100

It is always nice when there is a new version available from an operating system! I am currently using Windows 7 as primary OS on my development machine for Asp.Net development.

Disclaimer: Before you start, make sure that you have a Live ID and a powerful machine to run virtualization software!

I have downloaded this ISO from Microsoft.com:

Windows 8 Developer Preview with developer tools English, 64-bit (x64)

http://msdn.microsoft.com/en-us/windows/apps/br229516

I have tried dual boot solutions several times. With Ubuntu, Fedora etc. But this time, I didn’t want to come near a boot loader. So my only option was virtually. Even though when I read a nice post about attaching a *.vhd file. My favorite and easiest virtualization software (Microsoft Virtual PC) didn’t want to run this ISO. So I had to use different virtualization software. I decided to go with VMware player. VMware player is free, it only requires a registration, but that is totally worth it! VMware has a lot of experience with virtualization software, but upgrading from 4.0 to 4.0.1 is really annoying, because of all the reboots. It took me a lot of time. (I have a 2,5 year old notebook)

When you install Windows 8 in VMware you can get an error because it requires a product key. After searching the web for a while, I found a good workaround which is to disable the floppy disk reader in VMware.

Have fun testing Windows 8 with VMware!

A few screenshots:

NDepend first view

Fri, 02 Dec 2011 07:36:00 +0100

Today I have installed NDepend for the first time! I was really convinced because of this short video and the 7 minute version. Too bad that it isn’t really a human voice, but the feature set of NDepend will make up for that. I followed these instructions for the installation and installed the Visual Studio Add-In.

All I had to do was select NDepend –> attach new NDepend project to current VS Solution. NDepend immediately showed that two critical rules are violated!

Method too complex (well some programmers might see this one as a compliment, but this does affect maintainability and scalability of your code)
Methods with two many parameters

so just two issues, I am flattered!

When you click on the ‘Show CQL Explorer’ You will see the Code Query Language which is required to select the critical rules. So you can simply navigate to the issues.

FXCop vs. NDepend

As you all know, you can also choose to use FxCop to check your source code against a coding standard. Here is a link where you can see how you can check your code for the use of the object ‘Arraylist’ instead of the generic ‘List<obj>’ http://www.binarycoder.net/fxcop/html/ex_usegenericlist.html

With NDepend this can be done with CQL like this:

SELECT TYPES WHERE IsDirectlyUsing "System.Collections.ArrayList"

CQL

CQL (Code Query Language) is great. You can read more about it here: http://www.ndepend.com/CQL.htm Like SQL is for relational databases, is CQL for selecting source code. The default rules that NDepend uses to validate your source code are divided in several categories. You can enable rules (CQL) disable the rules that are less important according to you. You can add your own rules or edit the default rule set. Here is the rule for one of my two violations:

The CQL even has syntax highlighting!

Conclusion

I recommend that everybody checks out the NDepend trial and go see it for yourself. You can check out the license costs of NDepend here. For developers who work with continuous integration like Cruisecontrol.net, Teamcity or Microsoft Team Foundation Server, it is really recommended to check your code against a code standard.

Let me know if you have NDepend best practices in the comments! Looking forward to it. NDepend is together with Resharper my favorite Visual Studio add-in.

Equal column height, div problem

Tue, 08 Nov 2011 05:29:00 +0100

Years ago, everybody made a column layout with an Html table. If you do not remember why tables are bad, I recommend reading these nine reasons not to use tables. Today we use (external) cascading style sheets to solve it. Most of the time with the famous ‘faux columns’ trick.

<div id="left">
    leftside
</div>
<div id="right">
    <div>block one</div>
    <div>block two</div>
    <div>block three</div>
</div>

The equal height problem is sometimes hard to solve. As you can see here with multiple blocks. The red should be as large as all the yellow blocks together. This is hard to solve with faux columns because the height of the yellow part and therefor the white space between them is hard to determine. It is even more difficult when sometimes the red part is longer then the total yellow part.

The easiest fix for this, is to use a bit of jQuery. I only had to add this single line:

$('#left').height($('#right').height()-15);

Here is the final example: http://jsfiddle.net/jphellemons/VTna6/

Good luck!

Update to FxCop 10

Tue, 01 Nov 2011 04:49:00 +0100

So we have all used FxCop before haven’t we? Well I found out, that my version was 9.x and it prompted with an available update! So Microsoft’s download page opened. http://www.microsoft.com/download/en/details.aspx?id=6544

It only displays a small 1 kb file! a “readme.txt” file. That’s strange. So I checked again for an available download link, but ended up with the same readme file.

This is the content of the text file:

FxCop Installation Instructions 1. Download the Microsoft Windows SDK for Windows 7 and .NET Framework 4 version 7.1. 2. Run %ProgramFiles%\Microsoft SDKs\Windows\v7.1\Bin\FXCop\FxCopSetup.exe to install FxCop.

Ok, so you need the Windows 7 Software Development Kit. That download can be found on http://www.microsoft.com/download/en/details.aspx?id=8279 and contains a web installer. So more bytes to download.

Make sure that you check the box next to the Tools under .Net Development when you are going to install the SDK.

After the installation you can navigate to:

C:\Program Files\Microsoft SDKs\Windows\v7.1\Bin\FXCop

And there you will find the FxCop 10 installer: FxCopSetup.exe ! Or you can save yourself a lot of time and download it zipped here:

FxCopSetup 10.zip

Good luck!

Tidy your HTML with Asp.Net TidyManaged vs Tidy.net

Tue, 25 Oct 2011 05:05:00 +0100

I recently stumbled upon a small bug which had to do with a part of C# code that cleans up an HTML string which came from a database. This string is used as output on the web and therefore needs to be w3c and tidy!

I always used Tidy.Net for it. Really liked it and decided to check for a new version of that library while I was doing some code maintenance. That library's latest release date is from June 2005! that’s over 6 years old!

So I decided to go and look for a better solution. I found the TidyManaged project from June 2010. I wasn’t directly motivated to migrate to this library so my next step was a showdown between the two.

I fired up Visual Studio 2010 and started a new console application. Because ‘the numbers tell the tale’. I used the StopWatch class which is awesome! I have downloaded the HTML source code from a website and passed that to both the Libraries.

static void Main(string[] args)
{
    WebClient wc = new WebClient();
    string testInput = wc.DownloadString("http://www.jphellemons.nl");

    Stopwatch sw = new Stopwatch();
    sw.Start();
    ParseWithOldLib(testInput);           
    sw.Stop();
    Console.WriteLine("Tidy.Net lib from 2005 took: " + sw.ElapsedTicks);
    sw.Restart();
    ParseWithNewLib(testInput);
    sw.Stop();
    Console.WriteLine("TidyManaged lib from 2010 took: " + sw.ElapsedTicks);
    Console.ReadKey(); // to keep console open
}

The results:

	Tidy.Net	TidyManaged
website 1	1080148	359861
website 2	644471	140835
website 3	467094	84472
website 4	495851	191426

So this managed code wrapper for the unmanaged tidy project’s DLL is always a lot faster! I have the tidy DLL placed in “C:\Windows\system”. That DLL is 323kb and the unmanaged DLL is 25kb. (together 348kb) The Tidy.Net (which is an older .Net port of the 323kb DLL is 188kb. So that is smaller, but an older library.

If you look at the output of both libraries, you will see that the Tidy.Net library makes smaller html files then the TidyManaged. But the TidyManaged takes inline CSS styles and combines them in the header of your document.

I will attach my sample project, so that you can test the difference yourself.

TidyConsoleApp.zip

Good luck!

Filter a DataTable with LINQ to Objects

Mon, 03 Oct 2011 05:44:00 +0100

Today I had a DataTable object with the top x rows of a query.

select top 23 * from products

So my Asp.Net C# code looked like this:

private void SampleMethod(int toShow)
{
    string sql = "SELECT top " + toShow + " * from products";
    SqlCommand com = new SqlCommand(sql);
    DataTable dt = dal.GetDataTable(com);
    if (dt.Rows.Count > 0)
    {
        var a = dt.AsEnumerable().Where(
                p => p.Field<int>("stock") > p.Field<int>("ProductMinStock"))
        DataList2.DataSource = a;
        DataList2.DataBind();
    }
}

This crashed as you might have noticed. The error was:

DataBinding: System.Data.DataRow does not contain a property with the name

The problem was, that I did not specify the columns. The unfiltered DataTable could be bind to the DataList. Those DataRows where known. Since I did not use Entity Framework, but just try to filter a DataTable object which holds a DataRowCollection, I had to specify the return object(s). The types have to respond with your DataColumns in your database. You can set everything to string and see where it crashes if you do not know what type to use and change it. That’s how I found out that a field which should have been an int(32) was a float in the database (and therefor should have used double in C#)

Here is my final code, which has exactly the same columns as the unfiltered DataTable so that I can bind both result sets to the same DataList.

var a = dt.AsEnumerable().Where(
    p => p.Field<int>("stock") > p.Field<int>("ProductMinStock")).Select(p => new {
        ProductPictureName = p.Field<string>("ProductPictureName"),
        ProductCode = p.Field<string>("ProductCode"),
        ProductDescription = p.Field<string>("ProductDescription"),
        price = p.Field<double>("price"),
        productid = p.Field<Int32>("productid"),
        productpricebreak = p.Field<double>("productpricebreak")
    });

I hope that someone might have found this snippet useful to see how to manually specify the 'unknown' fields.

Good luck!

JQuery with webform input validation, ajax posting json to asp.net C#

Mon, 26 Sep 2011 05:39:00 +0100

This blog post is all about how to make a nice form and have client side validation with jQuery and the famous validation plugin. After validation the data, the form will be posted asynchronous to an Asp.Net C# Webservice/webmethod. While the post is being processed, a nice loading image will be displayed to notify the user of the progress.

Add jQuery

First you have to add jQuery to the form. This can be done by downloading a version from jQuery.com (option 1) or get jQuery as Nuget Package or (option 2) get jQuery from a CDN (Content Delivery Network) (option 3) so that the request is being handled by the closest server based on Geolocation. This approach has also another benefit called browser caching.

option 1:

1. go to http://jquery.com/ and right click download and select ‘save-as’

2. save in your javascript folder of your solution

3. add a reference in your form page

Pro: Just a few easy steps, things won’t break if there is a newer version.

Con: No CDN, no auto update

option 2:

1. install Nuget from http://nuget.org/

2. restart visual studio

3. click project

4. click manage nuget packages

5. type in the search box on the top right: jQuery

6. click on install

7. add a reference in your form page

optional: view the package info online on nuget.org: http://nuget.org/List/Packages/jQuery

Pro: Nuget will update the library if there is a new version

Con: No CDN, requires a small but awesome extension for Visual Studio

option 3:

1. Choose between networks (Google or Microsoft)

2. Add a reference to either

https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js

http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js

Google CDN: http://code.google.com/apis/libraries/devguide.html#jquery

Microsoft CDN: http://www.asp.net/ajaxlibrary/CDN.ashx#Using_jQuery_from_the_CDN_12

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

Pro: Geo benefit, Browser Cache, saves your bandwith

Con: No auto update

Adding validation

The next step is to add a nice jQuery plugin called ‘validation’. This plugin is maintained by a member of the jQuery team. His name is Jörn Zaefferer. You can get it from his website:

http://jquery.bassistance.de/validate/jquery-validation-1.8.1.zip

and you can read more about it on his site:

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

His plugin is also available through Nuget and the Microsoft CDN (not Google’s)

http://nuget.org/List/Packages/jQuery.Validation

Extract the zip and add the file ‘jquery.validate.min.js’ to your Javascript folder in your solution and add a reference to it.

<script src="js/jquery.validate.min.js" type="text/javascript"></script>

I have attached an example of how I made a simple form with jQuery 1.6 from the Google CDN and the validation plugin.

html5-jquery-validation.zip

$(document).ready(function () {
    $('#sub').click(function () {
    var container = $('div.error');

    var validator = $("#form1").validate({
        errorContainer: container,
        errorLabelContainer: $("ul", container),
        ignore: ":not(:visible)", // if you have input fields in your form which are temp invisible
        wrapper: 'li',
        rules: {
            tbMail2: { equalTo: "#tbMail1", required: true, email: true }
        },
        messages: {
            tbMail2: "The mailadresses are not the same!"
        }
    });
    if ($("#form1").valid()) {
        alert('ok nice!');
    }
    else {
        alert('this is optional, the error is shown below');
    }
});
});

This is the HTML for my simple form:

<form id="form1">
    <fieldset>
        <legend>Personal Information</legend>
        <label for="fname">First Name:</label>
        <input type="text" name="firstname" id="fname" class="required"/>
        <label for="tbMail1">E-Mail:</label>
        <input type="text" name="mail1" id="tbMail1" class="required email"/>
        <label for="tbMail2">E-Mail again:</label>
        <input type="text" name="mail2" id="tbMail2" class="required email"/>
        <input id="sub" type="submit" value="Send"/> <input type="reset"/>
    </fieldset>
</form>
<div class="error" style="display: none;">
    <h2>Something goes wrong!</h2>
    <ul>
        <li><label for="fname" class="error">Please fill in your firstname</label></li>
        <li><label for="tbMail2" class="error">The second mailadres is an invalid adress</label></li>
    </ul>
</div>

As you might notice, I haven't added an error message in the container for all form elements. All form elements are required fields and two are marked as email. Those classes can be found in the documentation of the validation plugin.

I added an image from http://www.ajaxload.info/ as loading image and added the style=”display:none;” When the validation has succeeded, the image will be faded in. and when the Ajax JSON post has completed, it will be faded out.

Here is my Asp.Net ASMX file which will handle the AJAX JSON request and will return an URL.

using System;
using System.Web;
using System.Web.Script.Services;
using System.Web.Services;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[ScriptService]
public class myAjaxHandler : WebService
{
    [WebMethod(EnableSession = true)]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public string ProcessSampleForm(string first, string mail, string mailinglist)
    {
        // sample code
        bool mailingList = false;
        bool.TryParse(ml, out mailingList);
        string redir = "youraccount.aspx";
        if(first.Contains("admin"))
            redir = "admin/admin.aspx";
        
        return redir;
    }
}

To call this ASMX, I used jQuery. It's very easy to make Async calls with jQuery and combine it with Asp.Net logic.

if ($("#form1").valid()) 
{
    $(".loadingimg").fadeIn();
    var dataString = "{ 'first' : '" + escape($('#fname').val()) + 
        "', 'mail' : '" + escape($('#tbMail1').val()) + 
        "', 'mailinglist' : '" + $("input[name='ml']:checked").val() + 
        "' }";
        /*alert(dataString.replace('\',','\',\n'));*/ // just for debugging ;)
    $.ajax({
        type: "POST",
        url: "myAjaxHandler.asmx/ProcessSampleForm",
        data: dataString,
        cache: false,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            $(".loadingimg").fadeOut();
            window.location.replace(msg.d);
        },
        error:function(xhr,err){
            $(".loadingimg").fadeOut();
            alert("readyState: " + xhr.readyState + "\nstatus: " + xhr.status);
            alert("responseText: " + xhr.responseText);
        }
    });
}

Please let me know in the comments if this will work for you. I will attach the full source code below:

html5-jquery-json-ajax-aspnet-asmx.zip

Summary

Use HTML5! Add the jQuery library by one of the three options mentioned in this post. Add the jQuery validation plugin. Use jQuery to validate your form and if it's validated, send a JSON string asynchronously to an Asp.Net (C#) Asmx and process the result of the method in jQuery again. Also use nice gif images to let users know that something is currently running.

Good luck!

Upgrade BlogEngine 2.0 to 2.5

Mon, 01 Aug 2011 19:34:00 +0100

The BlogEngine team has released BlogEngine 2.5 last 27th of June. I postponed it for a while but you have to keep your Online Software up to date! So I decided to give it a try. The migration from 1.x to 2.0 was almost painless, so moving to 2.5 should work out fine too. My installation as no database, but stores stuff in the App_Data folder. I followed this guide: http://blogengine.codeplex.com/wikipage?title=Upgrading%20to%20BlogEngine.NET%202.5

my 8 easy steps: (maybe you only need 4)

1) download current 2.0 installation as backup

2) download 2.5 web version
http://blogengine.codeplex.com/releases/view/69117#DownloadId=253216

3) removed everything in the 2.5 App_Data folder except: blogs folder and blogs.xml file

4) copied the App_Data from 2.0 local backup to the 2.5 local folder and uploaded everything to the online version with overwriting enabled. (I recommend FileZilla for everything FTP related)

5) go to your online URL (mine crashed)

6) I received ‘Unrecognized configuration section system.web.extensions’ So I had to ask the hosting company to migrate my site from an Asp.Net 2.0 application pool to 4.0

7) After that I received another crash in imaginary.twitterfeed.cs (rule 21) and imaginary.twittersearch.cs (rule 22) on almost the same line:

private string _dataFileName = HostingEnvironment.MapPath(
Path.Combine(BlogSettings.Instance.StorageLocation, TWITTERFEED_DATA_FILENAME));

change it to:

private string _dataFileName = HostingEnvironment.MapPath(
Path.Combine(Blog.CurrentInstance.StorageLocation, TWITTERFEED_DATA_FILENAME));

8) The next crash was in admin/extension manager/extensions.ascx.cs from line 202 after some research that was because according to this thread http://blogengine.codeplex.com/discussions/252979

You should remove the directory of admin/extension manager because that is renamed to admin/extensions from version 2.0.0.49

My blog worked after these 8 easy steps! The following steps are optional:

in app_code/extensions/sentcommentmail.cs (rule 95) and contact.aspx.cs (rule 100) there was some obsolete use of replyto. So I changed it to:

var mail = new MailMessage
{
   From = new MailAddress(BlogSettings.Instance.Email),
   Subject = BlogSettings.Instance.EmailSubjectPrefix + subject + post.Title
};
mail.ReplyToList.Add(new MailAddress(replyTo, HttpUtility.HtmlDecode(comment.Author)));

and in contact.aspx.cs:

mail.ReplyTo = new MailAddress(email, name);

mail.ReplyToList.Add(new MailAddress(email, name));

So everybody should update their BlogEngine installation because of all the nice features!