Introducing DataTablesDotNet

The datatables plugin is one of the coolest jQuery plugins around, and I wanted to find a way to make it work easily with ASP.NET MVC sites. Initially I created some objects that included the various datatables property names and that worked well. However, when another project came along and I wanted to use datatables in that project too I realized the original way I created the objects just wasn’t going to cut it.

After a lot of searching I found this blog post. I liked what I saw. Even better was the additional code contributed by Paul Inglis in the comments. The only thing I did not like was the stringify used to turn the datatables JSON into key/value pairs. I also did not like the way the project was made available – a box.net download location with no way to contribute (hence the code in the comments). I decided I would build on these great contributions and update the code to work without the serialization.

So, here it is on GitHub. The code has been cleaned up, it uses Paul’s Expression code for building the filters/sorts, and it doesn’t stringify the datatables data which cuts the data sent pretty much in half. I also added a model binder so it all “just works”.

NOTE: Isn’t it funny how one can look for something and not see it right in front of them? When I was doing my original googling, I was getting next to nothing for results. It is funny how that can work out sometimes. I built upon the above codebase and pushed my code to GitHub and nuget because I thought I was providing something of value. It wasn’t until I searched for my nuget package that I saw about a dozen other packages doing similar things. That being said, there are only a couple that include everything I did – others are just models or binders, so it is somewhat of use. Also, I see in the most used package a minor flaw in logic in the binder, but it doesn’t break any functionality, so not a big deal. Finally, the process gave me a chance to do a deep-dive into Expressions, and that was very enlightening, so the entire process was still of use, even if the nuget package isn’t. :)

Diff in Sublime 2

I love Sublime 2. I never thought something like Sublime would be something I’d love, but I really do. I thought, “It’s just a text editor. What is the big deal?” It is so much more than just a text editor, but it gets the majority of its use from me as one and I could not be happier.

I was recently working with some diff’ing using WinMerge, and I generated a patch file. I did not want to initially apply all the chages from the patch, but there are some pretty good code changes from the newest version of NopCommerce that I would like to add to our site, so I thought I’d cherry pick. I opened up the patch in Sublime, and too my dismay found there was no color highlighting even the the syntax selection was correct. A quick google and I found this post about editing the theme to fix the problem. Yet another thing to love about Sublime 2. Here are the steps I took to get at the theme easily and the edits I made.

  1. Select Preferences > Browse Packages – this will open up Windows Explorer
  2. Find your color scheme folder. Most likely it is named something like “Color Scheme – XXX” (e.g., “Color Scheme – Grandson of Obsidian”)
  3. Open the XXX.tmTheme file (in Sublime of course)
  4. Add entries for: diff.header, diff.deleted, diff.inserted and diff.changed
  5. Enjoy your new syntax highlighting

Here is the snippet I added to fit my theme:

<dict>
    <key>name</key>
    <string>diff.header</string>
    <key>scope</key>
    <string>meta.diff, meta.diff.header</string>
    <key>settings</key>
    <dict>
        <key>background</key>
        <string>#6699FF33</string>
    </dict>
</dict>
<dict>
    <key>name</key>
    <string>diff.deleted</string>
    <key>scope</key>
    <string>markup.deleted</string>
    <key>settings</key>
    <dict>
        <key>background</key>
        <string>#DD555566</string>
    </dict>
</dict>
<dict>
    <key>name</key>
    <string>diff.inserted</string>
    <key>scope</key>
    <string>markup.inserted</string>
    <key>settings</key>
    <dict>
        <key>background</key>
        <string>#33996666</string>               
    </dict>
</dict>
<dict>
    <key>name</key>
    <string>diff.changed</string>
    <key>scope</key>
    <string>markup.changed</string>
    <key>settings</key>
    <dict>
        <key>background</key>
        <string>#E6DB7466</string>               
    </dict>
</dict>

What was the coolest part for me was the fact that Sublime 2 supports alpha. I had a hard time getting the colors exactly the right shade for my theme, so I tried adding alpha, an BAM! It worked. All I had to do was tweak the alpha to get the colors to fit to my liking. I think it fits in pretty well with the rest of the theme. I am super-stoked!

Untitled

Another really cool think was how easy it was to hack the theme. The link shows how to use foreground coloring, but I really wanted “highlighting”, so I wanted to use the background color. It was intuitive to assume I would simply change “foreground” to “background”, and I double-checked to be sure. I also really liked that the instant I saved the theme it was updated in my running instance of Sublime 2. Awesome!

MongoDB Contacts Demo App

I haven’t posted in a while. Work stuff hasn’t really been post-worthy, so I was struggling to find something to post about. I realized I had an old demo I whipped up that I had never posted about, so here goes…

I wanted to play around with Mongo, and I also wanted to play around with AppHarbor, so I thought I’d make a Mongo app I could push to AppHarbor. To keep it simple, I decided to make a contacts app – you know, something super useful.

App
http://mongocontacts.apphb.com/

Code
https://github.com/timhobbs/MongoContacts

It is pretty straight-forward. Check the “about” link in the app for some more details. You can play around with the demo app, but please try to keep things PG. I know, I know…

AngularJS form serialization

I have been playing around with AngularJS, and I am falling in love! We use KnockoutJS pretty extensively in our site, and while I do like KO, I think it is better suited for small enhancements rather than larger things like we do: cart management and a ship estimator, a pretty advanced checkout page, and a school address picker. These all work okay with KO, and honestly, they would probably work much better if they were designed better. Unfortunately this work was initially farmed out to some overseas contractors, and they seem to believe in the anti-KISS pattern, if that even exists…

To begin with, I started on some demos to focus on each task. I created a small ship estimator demo, then I made a small cart demo. Again, due to a really poor design, the ship estimator (which should be the easiest thing with a whopping 3 form fields) is the worse of the 2 in the current implementation. To be fair to KO, I think if the redesign I used for the demo were what we used in our live site, KO would suffice. That being said, Angular just provides more – it is a framework after all, while KO is just a library.

The latest demo is an address form with a school picker – you enter the zip code and a list of matching schools for the zip are displayed in a select list. Once a selection is made, the form fields are populated with the school address details and the fields are set to readonly.

This all works fine, but my co-worker asked if we could then submit the form via a normal HTML form submission. That got me to wondering, so I asked Google. I found a great post on the NG Google Group. The suggestion was to use hidden inputs to store values, and offered a couple ways to do so:

A) (This)

<input type="hidden" name="someName" value="someVal">

becomes

<input type="hidden" ng-init="someName = 'someVal'" 
    name="someName" value="{someName}}">

This first option … gives you the benefit of having the value in the scope and on the hidden element constantly synchronized.

B) Write a directive for hidden input types that picks up the name and value and inserts it into the scope. This is not too hard:

app.directive('input', function() {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      if ( attrs.type === 'hidden' ) {
        scope[attrs.name] = attrs.value;
      }
    }
  };
});

This second option is nice but it won’t allow you to update the hidden field’s value if you plan to do a pure HTML form submission later (although with a little thought and $watch you could probably wire this up).

In our demo code, my co-worker and I opted for the first approach. It winds up being a bit more verbose, but it isn’t too much extra leg work and works well with the 2-way binding to keep the form values up to date.

CSS shorthand

Dustin Diaz has put together a nice guide to CSS shorthand. My personal favorite:

element {
  background: #fff url(image.png) no-repeat 20px 100px fixed;
}

Another favorite of mine is shorthand for margin/padding. I always remember the order by thinking of a clockface, but I also recently saw someone recommend “TRouBLe” (top, right, bottom, left). That may work, but I prefer the clockface (especially since that is what I have always used!)

New hardware!

What happens when AV nerds grow up...

Okay, maybe my new setup doesn’t quite look like that but it is pretty sweet!

I was rockin’ an old HP Compaq DC7800 Compact Tower I purchased from work, with a nice max-out to a Core2Duo 8400 and 8GB RAM. It is a decent little machine, but it started to misbehave, so I got scared. All things figured, the mobo and power supply are probably 5-7 years old, so I thought it was time to go bigger…

I couldn’t reuse the mobo or case if I wanted to, cause HP locks you in by putting the stuff on the opposite side of the norm. This is my shocked face. On a side note, NEVER buy HP. Worst. Service. EVER! If it wasn’t a steal deal from work I would not have bought it.

IBM Portable Since I had to start from scratch, I started with the case. I am a guy that thinks a case should just be a non-descript box. Don’t get me wrong, I am not talking the old-school beige box here, but a case is a case, right? I realize now I was wrong.

I got a Corsair 300R case, and it is pretty awesome. It has great cable management capabilities, plenty of room to expand with more fans (if needed) and tool-less drive bays that are a breeze to use. My favorite thing was that the HD bays are ready-to-go for 2.5″ SSD drives. Nice!

Next was the mobo. I chose an ASRock Z87 Extreme4 based on the feedback I read. I have been out of the hardware game for some time, so I wasn’t really sure who the “players” are in the mobo market, but ASRock seems solid. The board is pretty even – all black and slick looking. It matches my case nicely. My favorite touch – a GUI BIOS? OMGWTFBBQ?!?! Are you kidding? With sound. I guess I could do without the starfield background, but a GUI BIOS is space-age, right?

After I got the backbone squared, it was on to the processor! I chose an Intel Core i5-4670K Haswell. The Haswell should meana little better power-consumption, and the K means overclocking. I have never done the overclocking thing, but with the processor it is supposed to be simple. Turns out it actually is. In fact, the BIOS has built-in overclocking settings that you can just point and click to choose. Idiot-proof.

My 8GB of RAM served me nicely, but I thought I’d try to keep the old hardware running if possible, so I opted to get some new RAM. The new mobo can take up to 32GB, so I went with 2x8GB G.SKILL Ripjaws. The RAM is pretty, liiks slick, and is a beast.

For power, I went with an OCZ ModXStream Pro 700W Modular power supply. The modular part is very nice – I can add/remove cables as needed, and it made my cable management much easier.

Finally, I figured if I was overclocking I’d better go with something a bit more substantial than the stock fan provided with the new CPU. I went with a Cooler Master Hyper 212 EVO which did not disappoint. The thing is massive and so far has actually been cool to the touch. I’ll have to do an hour or so of gaming and see what it feels like then.

All in all, I am extremely happy with the hardware. Then came the difficult part: I did not want to re-install Windows. Boy, it probably would have been easier, but I am here to tell you all hope is not lost.

First boot = blue screen. Ugh. The main issue is that all the drivers you need for this shiny new hardware are nowhere to be found on your existing HD. I started googling and found a lot of stuff like this. Everyone recommended startup recovery/repair. Well, a few attempts at that and it still wasn’t working. I was getting the error that an update was causing a problem, but that wasn’t really true, was it Windows?

A little more googling turned up this post which was the real info I needed. It was slightly unclear to me at first, but what you basically need is the drivers for your new mobo and you run the command to install the drivers on your existing HD. So, I pulled out the CD that came with the mobo and ran the command:

dism /image:c:\ /add-driver /Driver:g:\ /recurse

I ran it over the entire CD-ROM, and in retrospect that maybe was not what I needed, but who cares. I tried a reboot after, and same blue screen. However, running it through the startup repair a couple more times resulted in success! I am happily typing away on my new PC using my old SSD drive without a fresh install of Windows.

My final step in the journey was to see what my WEI numbers were with the new hardware. With the old setup, my CPU and RAM was the bottleneck with a score of 6.5 each. The graphics were at 6.8, and my SSD was 6.9 – all in all a pretty respectable score. Running the update blew my mind – my CPU and RAM jumped to 7.7 each, and most surprisingly, the SSD jumped to 7.9. Same old drive, just with better hardware support. WOW! I then used the BIOS overclock stuff and was able to bump up the RAM performance to 7.8. So now, my trusty low-power 9800GT Nvidia card is the bottleneck of my system – and that is a bottleneck I can live with.

photos by: DSmous & Soupmeister

Blacklisting with Project Honeypot

The other day I was looking at the traffic coming in to one of our sites and I saw some semi-suspicious traffic. turns out it is some sort of crawler, but that it has been linked in the past to some sort of trojan. This got me wondering how I could easily block traffic from an IP or a range of IP’s. I did not really want to use IIS to block IP’s, or have to enter individual IP’s (or ranges for that matter) into our firewall. I was looking for something a bit more automated.

A quick google turned up this post for an HTTP module. The module uses the blacklist from Project Honeypot. All one needs to do is signup for the PH api, make some minor modifications to the module and you are off an running.

A little more googling turned up another HTTP module on Github called BlacklistProtector. I did not look much at this code, but I imagine it is pretty similar and likely requires an api key as well.

One thing I did notice in the comments section of the first blog post is that the original creator of the module claimed PH had too many “false positives”. Granted, the comment was from a few years back, so it may not apply these days, but it is something to consider. I haven’t implemented the blacklist handler, but I thought it would be useful to allow for some method of overriding IP addresses. Perhaps when I finally do implement the handler I’ll add this capability. If I do, I’ll be sure to put the code up on Github and update this post with a link.

Execute powershell script as a scheduled task

I have a little cleanup function that runs on a website that I can trigger by hitting a URL. I wanted to run that as a task, so I googled how to create the powershell script and how to setup that script to run as a task. Here are the findings:

The powershell script

$webClient = new-object System.Net.WebClient
$webClient.Headers.Add("user-agent", "PowerShell Script")
$webClient.DownloadString("http://www.website.com/")

From Otto Helweg

Setting up the task

In the Program/script, put:
C:\Windows\System32\WindowsPowerShell\v1.0\powershell.exe

In the Add arguments (optional):
-noninteractive -nologo c:\pathtofile\powershellscript.ps1

From TechNet

I’m somebody!

Much like Navin R. Johnson, when I saw this in my notifications today I felt all giddy:

scottha-plus-one

The original post on Google+ was to announce the new Tekpub video Scott and Rob completed. It is called “Get Involved” and it covers various topics about getting involved in the social space as a developer. I highly recommend it.

The funny thing is that part of the video touches on getting people to respond to you via Twitter or having someone that you look up to or is famous retweet you, and this sorta felt the same to me. It isn’t the same, since it was easier for Scott to see my reply than it would be in a stream of tweets, but just having him +1 my comment made me feel good today.