One of the things that I've always liked to have on my blogs over the years is a "latest comments" widget. I like to leave all my blog posts open for comment indefinitely, and this gives users a way to see the latest comments, even if they are on very old blog posts.

Disqus doesn't have a "drop-in" JavaScript snippet to do this, but Disqus does have an extensive HTTP API that allowed me to build my own.

The terminoloy that Disqus uses was a little confusing for me, but by reading some of the docs and trying a few tests in Fiddler, I was able to see that the forums/listPosts API endpoint was the one I wanted. You'll need to make sure that you have a public key generated in order to use the endpoint. Here's the widget I wrote:

Some notes:

• Disqus rate limits you to 1000/requests per hour. For my blog, that's probably more than enough.
• This script depends on jQuery, but you can use something else for your DOM manipulation, even plain JavaScript if that's your jam.
• I was at least partially inspired by Raymond Camden blogging about something similar.

Needs a catchier title. But basically I want users to be able to enter location information for some entity. Each entity can take place in multiple places over time. Each place could be very loose or specific, to the user's preference. Basically, I want something like this (forgive the lack of design polish):

This turned out to be quite easy. I simply combined jQuery Tag-it with Google's AutocompleteService API.

Google's API allows you to attach an autocomplete to a textbox directly, but I didn't see any multi-select ability there, so that's where Tag-it comes in. You can simply attach Tag-it to an HTML unordered list (ul) and away you go. There are options for configuring delay and minimum length, so you don't have to bring in a seperate debounce tool. It uses jQuery UI's autocomplete, so if you've used that before, you should be pretty comfortable. Basically, you just define a function with a 'response' callback, and pass an array of suggestions to that callback. Google's API will be providing the suggestions. Easy peasy.

Look carefully at Google's terms of use before you deploy this anywhere. I believe you have to show "powered by Google" somewhere, at the very least. And, getting actual location data (like latitude and longitude) is a whole other story.

A project I'm working on now has a SPA project that uses the doT template engine.

Using it isn't terribly different from other JS templating engines (like Mustache), so if you have experience with those, it should look pretty similar.

First, you need a template. Just define it in a <script></script> block like so:

Notice the {{ }} areas in the template? That's what doT is going to fill in with whatever data we want (i.e. interpolation). The data that will be passed in is simply a JavaScript object, and this template knows that object by the name "it". So you can think of "it" as kinda like a keyword.

The next step would be to get the data, get the template, and combine them together to get an output.

Note that I'm using jQuery for convenience, but it's not required.

doT also offers conditionals and looping. It claims to be the "fastest + concise" templating engine for Node.js and browsers. If performance is a major concern for your templating engine, you can check out their benchmarks. Seems to be a close race depending on the browser, but doT is no slouch. Personally, I believe that templating is (hopefully) such a small part of the overall performance of a typical SPA app that it won't keep me up at night.

I have a web page on domain A and, say, a Json endpoint on domain B. I would like domain A to make an Ajax request to domain B, but when I try that, I get an error message, as shown here:

Some options:

• Make the request server-side instead of client side.
• If you have control of the endpoint, add "Access-Control-Allow-Origin" to the response header.
• Use jsonp (you may still need control of the endpoint if it doesn't support jsonp already).

Let's explore the jsonp option. Here's a similar request to the one above, except this time it's using jsonp.

It does not raise an error.

The way jsonp works is a little wacky, but the main thing you need to know is that you need to specify a callback function. jQuery handles this automatically on the client side. Here's how I handle it on the server side with ASP.NET MVC using the Mvc.Jsonp package.

Notice three things:

1. SomeController inherits from JsonpControllerBase
2. GetAllItems return type is JsonpResult and has a "callback" string parameter
3. The Jsonp function from the base class and how callback is passed to it.

The benefit is that you can now do cross-domain scripting. So far the drawbacks seems to be that:

• It's limited to GET requests
• Error handling may take some extra work
• If there is no Jsonp endpoint, then you either have to make one or you're out of luck.

I'm giving it a shot on Ledger, and seems to be working fine so far.

Welcome to another "Weekly Concerns". This is a post-a-week series of interesting links, relevant to programming and programmers. You can check out previous Weekly Concerns posts in the archive.

• 50 Years of BASIC
• Why is it called "logging in"?
• I've been working with CKEditor recently, whereas most of my experience is with TinyMCE. I asked a question on Stack Overflow about manipulating the HTML in a CKEditor instance.
• Resizing images in your ASP.NET project? Check out ImageResizer. It's API and functionality had me crying tears of joy compared to the cludgy mess of System.Drawing and System.IO stuff I was using.
• Equality in JavaScript sure is cuh-razy!

If you have an interesting link that you'd like to see in Weekly Concerns, leave a comment or contact me.