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.

TortoiseSVN global ignores

I know all the cool kids are using git and their .gitignore files, but in crufty enterprisey-land we still use SVN. I hated always having to ignore bin/obj, etc. for new projects, so a while back I found out how to set global ignores. I wanted to share this info with some co-workers, so I thought it would make a good blog post. That way I’ll be able to refer back to it when I format my HD and forget how exactly I set the global ignores “last time”.

It is really quite simple:

  1. Open TortoiseSVN settings by right-clicking > TortoiseSVN > Settings
  2. In the initial General dialog, in the lower Subversion section is a textbox labelled Global ignore pattern. Add your values here

tsvn-general

I use VS/C#, so I added bin obj *.user *.suo, YMMV.

CSS3 animation for Bootstrap icons

I found this great post on Elijah Manor’s blog where he animated the refresh icon. I don’t use Bootstrap on my site, but I did have the need for a refresh icon for an older post, and this would have been pretty cool. If only I had been smart enough to think of it. DOH!

If you want to skip all the specifics and just get to the payoff, here is the jsfiddle with the working animation: