Evolution

I’ve been thinking for a while about moving my simple web site and blog to a different platform. I’m currently paying to host everything on a traditional hosting service. Ten years ago, this was really the only option if you wanted buy a domain and put a web site out there (there was also self hosting with dynamic DNS, but I was never brave enough to open up my home network). Now, we have so many options that it would be difficult to list them all. We have “cloud” hosts like Azure and AWS. We have developer-friendly hosts like Heroku. GitHub can even host your static pages (more on that later). Most of these cloud-based options can be utilized for free with limited traffic and processing power.

Back to GitHub. With a combination of Jekyll and GitHub Pages, you can host a static site or blog for free on GitHub. You can even have your custom domain point there. The simplicity of this solution is appealing to me. There is no database, no server-side code, and no server configuration or complexity. You just have a bunch of static files in a special Git repository. For dynamic content (such as a blog), you create markdown files that will get converted to static html by Jekyll. The added bonus is that your site is served up as static content, eliminating time consuming server side processing on each request. Anyway, I’ve yet to pursue this path, but it’s the most appealing option at this time.

As for this blog… Given the rise of social networks in the past few years, I’m not sure that “blogging” things is the best use of time for me. The original intent of this blog was to share things with family and friends, but that function has been replaced by better tools. So, I’d expect that new blog posts will be infrequent.

Using cookies with HttpClient

This simple code snippet shows how to store and use cookies from a web request using the .Net HttpClient. For example, if an API or site sends a token or authentication cookie, you may need to store it and send it on all subsequent requests to show that you are authenticated. This would be for a session-based service. The key is to create a single CookieContainer instance and a single HttpClientHandler instance to hold it. Assume the following class is registered as a singleton.

public class WebClient
{
    private CookieContainer _cookieContainer;
    private HttpClientHandler _handler;
 
    private HttpClientHandler Handler
    {
        get
        {
            if (_handler == null)
            {
                _cookieContainer = new CookieContainer();
                _handler = new HttpClientHandler { CookieContainer = _cookieContainer, UseCookies = true, AllowAutoRedirect = false };
            }
            return _handler;
        }
    }
 
    private HttpClient GetClient()
    {
        // the second param prevents the Handler from being disposed with the client
        var client = new HttpClient(Handler, false);
        client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
        return client;
    }
 
    public async Task Get<T>(string path) where T : class
    {
        using (var client = GetClient())
        {
            var content = await client.GetStringAsync(path);
            return JsonConvert.DeserializeObject<T>(content);
        }
    }
}

Trying out Windows Live Writer

Scott Hanselman has been trumpeting Windows Live Writer for some time now.  I’ve been hesitant to try it out because I’m a control freak and I was convinced that Live Writer wouldn’t do things correctly.  Well, he blogged about it again today so I’m giving it a try (with this post).  It was the comments on his post that swayed me.

Live Writer has improved quite a bit since last time I tried it.  It actually pulled down my WordPress theme in order to provide a themed preview, which isn’t perfect, but it’s good enough to get an idea.  Adding categories and tags is really simple, with type-ahead suggestions from previous posts.  It looks like it has some powerful picture, video and map embedding tools, which I will try eventually.

The thing I’m most curious about is embedding code snippets.  It looks like all of the syntax highlighting plugins are 2+ years old.  Update: I tried a couple of them and they both resulted in an awful looking table.

Cat

We are getting a cat today! Sly and Cordy have been gone for 2-3 years now, and we’ve been talking about getting more cats for a while. Brenda found a good one at the Troutdale humane society yesterday. She’s 6 months old and had just arrived at the shelter. Lots of photos coming soon…

V__8B55 (1)Prep

[Edit] Her name is Olivia.

New Deck



Our new deck is complete and it’s much nicer than the old one. The flooring is composite material from TimberTech and the railing is aluminum. We plan to stain the wood skirting to better match the deck and house color, but we’ll have to wait until it stops raining. As a bonus, we have a decent sized storage area underneath part of the deck.

Last.fm Recent Tracks with AngularJS

AngularJS is an MVC framework for javascript. It is best suited for round-tripping resources with a RESTful service. In this post, I will simply get a list of recent tracks from Last.fm, treating each track as a resource. The Last.fm API is documented here. There is no round-tripping in this example. I’ll also be utilizing Twitter Bootstrap for layout.

To start, create the AngularJS application and a controller for recent tracks. Since this is a simple application, there are no routes and views. The controller will be invoked inline on the main page. Routes and views are easily added once you get a handle on the framework.

'use strict';
 
var LastFmApp = angular.module('lastfm-app', []);
 
LastFmApp.controller('RecentTracksController',
    function RecentTracksController($scope, $http) {
        var url = 'http://ws.audioscrobbler.com/2.0/';
        var params = {
            method: 'user.getrecenttracks',
            api_key: 'your_api_key',
            limit: 12,
            user: 'user_name',
            format: 'json'
        };
        $http.get(url, { params: params })
            .success(function (data) {
                $scope.songs = data.recenttracks.track;
            })
            .error(function (data, status) {
                console.log(data || "Request failed");
                console.log(status);
            });       
    });

The HTML (simplified for brevity).

<!DOCTYPE html>
<html lang="en" ng-app="lastfm-app">
<head>
    <meta charset="utf-8">
    <title>Recent Tracks</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap-responsive.min.css">
</head>
<body>
    <div class="container" ng-controller="RecentTracksController">
        <ul class="thumbnails">
            <li class="span4" ng-repeat="song in songs">
                <a class="thumbnail" href="{{song.url}}" title="{{song.artist['#text']}} - {{song.name}}" style="display: block;">
                    <div class="media">
                        <div class="pull-left" href="#">
                            <img class="media-object" src="{{song.image[2]['#text']}}">
                        </div>
                        <div class="media-body">
                            <strong>{{song.artist['#text']}}</strong><br />
                            {{song.name}}<br />
                            <em>{{song.date['#text']}}</em>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

The resulting grid will look something like this:

Recent Tracks

Best Purchases

I feel like we’ve made some good purchases in the past year. Here are some of the things that I like the most. Click the thumbnails for more information.

 

Thumbnail Gallery with Flickr, Bootstrap, and Javascript

I recently created a thumbnail gallery of my latest Flickr photos using the Flickr feeds API, Twitter Bootstrap, and Javascript/jQuery.  There is no server side code for this solution, and the client side code is really simple.  To start, create a blank html page (I like to start with the HTML5 Boilerplate).  Make sure you include the Bootstrap css and jQuery.  I used the Thumbnails component of Bootstrap for the gallery layout.  Here’s the div to hold the thumbnails:

<div class="row">
    <div class="span16">
        <ul class="thumbnails" id="my-photos">
        </ul>
    </div>
</div>

Here’s the javascript to fetch the photos and populate the div. For this example, I’m displaying the pdx group pool photos.

// see the list of feeds here - http://www.flickr.com/services/feeds/
// this is a handy tool to get people and group ids - http://idgettr.com/
$(document).ready(function () {
    var flickrFeedUrl = "http://api.flickr.com/services/feeds/groups_pool.gne?id=35468135854@N01&lang=en-us&jsoncallback=?";
    $.getJSON(flickrFeedUrl, { format: "json" },
        function (data) {
            $.each(data.items, function (i, item) {
 
                // build some elements and then append them accordingly
                var li = $("<li>").attr("class", "span2");
                var a = $("<a>").attr("href", item.link).attr("class", "thumbnail").attr("title", item.title);
                // we want the larger square (150px) thumbnail instead of the smaller one (75px)
                var img = $("<img/>").attr("src", item.media.m.replace("_m.jpg", "_q.jpg"));
                img.appendTo(a);
                a.appendTo(li);
                $("#my-photos").append(li);
 
                // stop at 18 photos (i is 0 based)
                if (i == 17) return false;
            });
      });
});

That’s it. This minimal amount of client side code produces a nice, responsive gallery of thumbnail links to Flickr photos.

Edit 12/31/2012: I am now using mustache.js for templating, which is much more elegant than building the html via js.

Project – La Cocina

I’ve been working on a new Rails application for storing our recipes. It’s at a point where it is being hosted and used by us. Some of the style is borrowed (stolen) from Martha Stewart’s blog.

The big feature of La Cocina is it’s ability to pull in recipes from a number of other recipe sites.  I’m using the nokogiri gem to do screen scraping for recipe data.  There’s an admin interface for creating new screen scrapers (which I call “scarfers”), so it’s easy to add new recipe sites by entering DOM paths (CSS or XPath) and some other options.  With one click of a bookmarklet on a supported site (we have 5 configured so far), the recipe is in our database.

Other stuff in use: kaminari for pagination, paperclip for image attachments (including fetching from a URL, resizing, and generating thumbnails), acts-as-taggable-on for tagging, SASS for CSS, Twitter Bootstrap for some design and layout, MySql as the database, and miscellaneous jQuery for client-side things.

There are a few things left for me to do.  For one, I want to make it a true multi-user site so I can share it or create a demo account for showing it off.