Category Archives: Code

Ch-ch-ch-ch-changes! v2.0

Posted on by

Well, almost a year to the day. Pretty bad…

BUT, at least I have a decent excuse. My wife and I had a beautiful baby girl, Haven, on Christmas Day. Shortly after I got the new job we found out about the pregnancy, and then it was doctor visits galore. For the past 5 months now it has been “Daddy time”, so, yeah.

A funny thing about this post and the last – they both have to do with changes. While there are the obvious ones (fatherhood), I mean career changes. You see, I have been on my contract this past year with Walt Disney Parks and Resorts Digital (WDPRD) and I have been kicking some ass (if I may say so myself). I have been working hard to gain FTE there, and it has always been a bit like a carrot on a stick – just out of reach. Well, now I am coming up on my final day tomorrow.

A couple weeks back the axe fell and all contractors were cut. We lost some really good guys in Argentina, and now those of us in Seattle are gone too. Like the last time this happened, I have some options, so I am not too worried, but the whole “Daddy” thing is my priority, and I have been lucky enough to WFH 4 days a week, so I need to look for something matching that. Good luck to me…

As far as code goes, I don’t have a bunch new. The most recent stuff I did was just some JS sandbox stuff to play around. Here are some links:

JS “Hydra” – an interview test:
https://jsbin.com/wujaxob

Apple basket – add and eat apples from your “basket”:
https://jsbin.com/piruqa

Simple inheritance demo:
https://jsbin.com/vagoyu

Another simple inheritance demo:
https://jsbin.com/rubunu

Sandbox play-around:
https://jsbin.com/yejari

I have a couple of code tests from a recent interview that I will hopefully share soon. Or maybe next year. 🙂

Ch-ch-ch-ch-changes!

Posted on by

I have neglected my blog for some time, and it is time I gave it a little love.

I recently went through a major career change. I received news that my employer of over 10 years was going through some financial hardship and that my hours were no longer guaranteed. I have been telecommuting for the past 5 years, so the news came as quite a shock. I knew I wasn’t going to be able to continue to telecommute, and the best I could hope for was a couple of days a week working from home.

Luckily I have been a developer for some time. I get a lot of recruiter emails, so I started replying and reaching out to previous recruiters I had spoken to. It did not take long for phone interviews to roll in, and then face-to-face interviews. I have always put way too much pressure on myself in interviews, and I was dreading going in to “code in ten minutes” or whiteboard or whatever.

The funniest part of this whole process is most of the employers I interviewed with were not actually on the MS stack – which has been my focus for most of my career as a developer. Most were on some sort of PHP codebase server side (eww…) but the majority of focus was on client-side. I am thankful for taking the leap into js frameworks!

So, I now have a new job in Seattle. I have to commute about 1.5 hrs each way, but it could be worse. I drive maybe 1.5 miles to the marina, park, hop on the foot ferry, then transfer onto the “big” ferry in to Seattle. Here are some pics from the ferry:

IMG_20150527_055839

IMG_20150529_060339

IMG_20150529_164745

If you gotta commute, commute in style…

Anyway, to give some examples of some client-side code, I added some new gists and repos. Check them out if you like.

scroblr

Posted on by

I used to listen to my Last.fm station a lot, but lately I have been stream my local radio station (107.7 The End, Seattle). I like the variety and even some of the DJ banter while I work. I work from home and it makes it seem a little less like I am sitting at home in my office by myself.

The one downside was no scrobbling. I had another Chrome plugin but it did not work with Abacast (the platform 107.7 uses to stream their broadcast). I looked into making the plugin work with Abacast, but to be honest the docs were kinda poor and the API was a little “scattered”. I looked at more open-source plugins and found scroblr. It isn’t anything fancy, but the API made it a snap to create a new plugin for Abacast. I forked the code, whipped up a plugin, tested and submitted a pull request in under an hour. Now I am happily scrobbling from the 107.7 stream.

Azure table to json with jQuery

Posted on by

I have been working with Azure quite a bit lately. We are looking to move all our hosted servers “into the cloud” – wherever that may be… Anyway, I have been working on a simple asset management system and I just started to implement the Azure Search API. I wanted to seed the index with existing data about the assets but I couldn’t see any easy way to export a list of the files in the container. Google to the rescue!

My search found a great post by Dave Ward on extracting data from an HTML table using jQuery. It is a pretty simple little snippet but it works quite well:

var data = $('#__fx-grid3 tbody tr').map(function() {
  // $(this) is used more than once; cache it for performance.
  var $row = $(this);

  return {
    name: $row.find('td:nth-child(1)').text(),
    url: $row.find('td:nth-child(2) .fxs-copybutton-value').text(),
    creationTime: $row.find('td:nth-child(3)').text(),
    size: $row.find('td:nth-child(4)').text(),
  };
}).get();

Use the snippet in the container details page and it will pull the name, url, etc. from the table. Now you’ve got the table data stored nicely in a local variable named data – but how to easily get at it? A little more googling found another simple little trick:

copy(data);

This will copy the data variable value to the clipboard. Now it is a simple paste into whatever text editor you favor. The above may be Chrome-specific, but if you are a web dev then you are likely using Chrome anyway – or at least have it at your disposal…

Insert? Update? Nope, it’s MERGE!

Posted on by

I needed to track changes when updating a table, but I wasn’t really sure what would be the most perf-friendly method. Luckily I stumbled on a great post about T-SQL MERGE. The post described almost to a “T” what I needed to do: some records would stay the same, some would drop off, and others would change.

MERGE is pretty slick. I was able to easily take the 3 queries I had in place for insert, update and delete (well, soft delete anyway) and basically cut/paste them right into the merge command. It is nice that the syntax matches up so well and makes sense (unlike things like ROW_NUMBER() – yuck). It was really a nice, concise way to get exactly what I needed, and it performs very well.

Better Cassette Bundling

Posted on by

We use Cassette v1 for our company site mainly because that’s what there was for bundling back in those days. Since then v2 has been released and MS has bundling and minification baked in to MVC now. But, as a wise man once said:

“If it ain’t broke, don’t fix it!

Mostly I follow that logic when I am being lazy – and since the whole bundling thing is gonna boil down to a different syntax to do the same thing, I figured why bother. Heck, I did not even want to bother going to v2!

I just decided to add the slick Select2 list to an admin page, and it made me push on an edge of Cassette that I had not run into before: how to easily exclude a folder. In short, there is no built-in easy way. However, I found a great post about using Cassette for semi-complicated scenarios. There is an excellent snippet of code in there that extends the FileSearch class and makes excluding folders as easy as this:

bundles.Add<StylesheetBundle>("Administration/Content",
    new ExcludeDirectorySearch("*.css", new [] { "ckeditor", "ckfinder" }));

jQuery finds

Posted on by

I just ran across a couple of cool things to solve some problems. I needed a small pub/sub solution, and I found a tiny one:

jQuery Tiny Pub/Sub

It is a pretty slick little implementation and, more importantly, helped me solve my problem.

I needed to lazy load images, and there are a few solutions out there, but I was looking for something small (do you see a theme?) and I found this:

Unveil.js

This takes a very nice lazy load plugin and strips it down to the most basic of functionality resulting in a great lazy load plugin that comes in under 1k.

Introducing DataTablesDotNet

Posted on by

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

Posted on by

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!