Azure table to json with jQuery

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!

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

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" }));

SVN woes

I recently found out that our repository holding the code of multiple projects for the past 8+ years wasn’t being backed up properly. What’s worse, the reason it isn’t being backed up properly isn’t because we have no backup in place, no, it is because the repo is corrupt. HOORAY!

This revelation has led me on a long, strange trip, and I have tried many things so far in an attempt to save some of our history (though it is not looking good). One of the interesting things I read was an idea to use svnsync:

Another approach I forgot to recommend before is to setup a user in the original repository that has read permission only to your branch, and then use that user to create a mirror of the repository using svnsync. svnsync will honor the permissions in your access file, and will simply omit the stuff that user can’t read, leaving you with a repository that has a bunch of empty revisions but contains all the changes made to your branch only.

I found a great post on using svnsync and had a go. While this is a pretty slick trick, it unfortunately did not work. You, long ago when the repo was corrupted, I was tasked with “fixing” the repo. My “fix” allowed us to keep on using the repo, but it effectively made the repo worthless since my “fix” was to remove the corrupt db rev file – not a good idea…

Anyway, now we are stuck with a repo that is full of work and no way to export it easily with history. Luckily 3 years in code is like dog years, so much of the code from before the corruption occurred is not really used. My latest trick to attempt is dumping a range after the corruption, then use svndumpfilter to try and save history for relevant projects. This post gives a nice outline of the steps involved to perform a task like this.

Unforunately, some stuff is just going to have to get added to the new repo and we are going to lose history, but we can keep the current repo running in a read-only state for that. In the end, it turns out this is all for the better – we made the mistake of putting binaries into the repo, and it is out of control at over 14GB. Time to prune that sucker…

jQuery Download Plugin

jQuery Download Plugin

I was in need of an “export” button to export some data to a CSV file, but the data changes based on some other choices. I added my js to export the file and then – DUH! You cannot use ajax to return a file. Silly me… :)

I figured I could wrap a form around the button and set a hidden input and blah blah blah. I googled and found the above, which basically does all that for me and gives me a convenient 1 liner to work much like an ajax call would but allow for a “save as” dialog. It is pretty neat-o!

jQuery finds

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.

MediaBrowser3

For some time I have wanted a nice media experience for playing back my music/movies. I also wanted something that would make it nice and easy to play content over the internet when I travel. I was considering just writing something from scratch just for the experience, but then I thought, “why reinvent the wheel?” and I opted for an existing media server package.

First I tried Plex. I have to say it is pretty user-friendly, but it does have its quirks. For example, certain media tags would not update properly, and no matter what I did I could not figure out how to get the “agent” (the code that fetches the metadata) to work. Also, when I wanted to extend some functionality I found out the source is closed, so that really put me off.

While looking into how I could extend Plex, I ran across info for MediaBrowser3. The codebase is in C# and it is open source (github repo), so I knew that I could do with it as I pleased. I installed it and was very pleased.

MB3 is the next version from an established MB2, so there are some things that are still in flux, but the dev community is very active. I saw a call for devs to join the team, so I did. I have always wanted to join an open source project, but I have always been a bit intimidated by the prospect as well. I have to say I am very happy I did drop them a line to join because the experience has been great and the community is fantastic – and very supportive and appreciative of all the devs! :)

Personally I have focused on a redesign of the video player interface, and recently I have started to play with the chromecast SDK to enable casting from the MB3 web client. Speaking of clients, there are many to choose from: desktop clients, mobile clients, the web client, whatever floats your boat.

If you have been in the market for a great media server, I’d suggest checking out MB3. And if you are a developer, visit the community forum and leave a message on the “join the team” post. Even if you are not a dev, there are still other ways you can support the project through documentation or language translation.

Spiffing up Calibre content server with Bootstrap

I really dig Calibre. It is great for managing my growing Kindle ebook collection. One thing I do not like about it is the chosen style of the content server. To each his own, I guess…

I thought it would be pretty cool to style it with Bootstrap. It would look pleasing to me, and since the source is available I thought I’d be able to figure it out pretty easily. The app is written in Python, but it turns out the content server uses templates (mostly anyway, there is quite a bit of generated HTML in there – ewww!)

I started poking around with the templates, and then I wondered if someone else already had the same thought. I googled and sure enough someone had. I found this post that included a gzipped tarball ready to go. I downloaded it, unzipped, copy/pasted the folders and checked it out.

I liked what I saw, but I thought it could be just a little bit better. I changed up some of the markup and got a better flow (I never liked the overflow). To limit the initial book comments I used a great plugin called readmore (with a really slick looking site too). Finally, I set up the templates to use the responsive style sheet. I did not make any edits for the mobile sizes, so things look a bit wonky, but it beats the heck out the the built-in mobile option:

Original version

Original version


With my updates

With my updates


My "Mobile" layout

“Mobile” layout

If you are a Calibre user and you’d like to use this (or the original which can be downloaded from the link) you can download the 7zip here: content_server.

To “install”, just unzip and replace the folder. On a windows PC the path is [install_path]\resources\. The folder is content_server.

UPDATE: Craig finished his initial pass at using Bootstrap 3 on put it up on GitHub. It looks great!