DannyDotNet

This blog has migrated to github pages.

Single Pages Apps (SPAs) are the current flavour of the month. They have seemingly appeared from nowhere, but now it seems like every developer is talking about them. Wikipedia describes this pattern as follows:

A single-page application (SPA), also known as single-page interface (SPI), is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application.

In a SPA, either all necessary code – HTML, JavaScript, and CSS – is retrieved with a single page load,^[1] or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions. 

In my experience they offer some advantages over traditional apps:

• Very responsive
• Rapid development time
• Data is usually provided via a REST API - making integration to other systems easy

along with some disadvantages:

• Usually implemented with javascript (with all baggage it brings, such as horrendous function passing syntax everywhere) 
• Can be harder to debug - you can end up in dependency hell
• Common tasks such as continuous integration is harder than with more mature patterns such as MVC (example: making javascript unit tests play nice with TFS).

The high responsiveness alone makes SPAs worth of investigating. Responsive web apps ==  happy users!

Ok, I'm sold. What now?

So, where do we start? The SPA (and javascript) community is fast moving place. I have lost track of the number of new templates and libraries in use... Knockout, Angular, Durandal, Ember, Bootstrap, JQuery, etc, etc, etc. You can attempt to roll your own SPA from the ground up, or you can use a ready made project template - such as the Ember App Kit.
 Ember App Kit gives you:

• A nice project structure
• GruntJS automation for minification, compilation, and deployment
• Ember SPA framework - with Handlebar templates, routing, controllers
• Unit tests with QUnit
• Javascript 6 (ECMA6) modules (this is very very cool- a tool called a transpiler is used. ECMA6 takes Javascript into the realm of modern languages with a proper object model and sane module support)

Esentially, this kit gives us an out-of-the-box ready to go application. You can use it as a starting point to customise and build on for your own application.

Let's get started

grunt server

Where to now?

References

• Ember App Kit
• Ember App Kit Getting Started Guide
• Ember Sherpas - Introduction to Ember App Kit
• EmberJS
• GruntJS

I lost a good couple of hours tracking this one down. If Visual Studio is taking a very long time to load debug symbols when debugging (think 5 minutes to 30 minutes), try this...

Delete all break points (Debug - > Delete All Break Points).

Sometimes something small like this can be a lot more frustrating than a big issue. Hopefully this saves someone from going crazy.

I'm a typical developer. I often can't resist the urge to try different platforms. My current blogging platform (blogger) has numerous limitations. I started looking for alternatives, and Ghost appeared on the radar.

Ghost is a ground up blogging platform, being developed under the premise that other platforms (such as word press) are becoming overly complex.
Before I go into too much detail, I should point out that Ghost is beta (maybe even alpha software).

The good parts

Ghost offers some interesting features, such as:

• Handlebar based templating
• The ability to run on your own server/vm, or via Ghost's own Hosted service
• A very nice post editor, which has markup based formatting, and a live preview.
• Open source,  so you can hack away at the code base.
• Node JS based platform

The bad parts

Ghost's hosting is a paid service. They offer a 30 day trial. I signed up... and then the wheels fell off.
I tried editing my new blog, but kept being presented with the sign up page. Filling in the sign up page again logs you into the site.

Once you have logged in, the next mystery is how to actually post. You have to manually append /ghost/ to your blog address. It's not that much effort to provide a link for this.

Posting was straight forward enough, until I tried to include a code sample. I use Alex Gorbatchov's syntax highlighter. To enable this on my Ghost blog, I had to edit my template. To do this, I had to download the default template from Github, edit the source, then zip it up and upload it via Ghost's admin page.

I had my template setup, and I tried to add some code to a post, Ghost saved the HTML - but then stubbornly refused to display it. It could be something to do with the highligher using CDATA tags... it could be overly aggressive filtering (why do you need to filter out HTML that I add to my blog?)... it could be the lunar cycle, who knows.

At least the edit page looks nice.



The next big issue is that Ghost doesn't have an API yet. There is no way to integrate other services. Want to import all your old blogger posts? bad luck. I have seen an import function (for Word Press) mentioned on the Ghost forums, but finding it is like finding the lost ark - and it doesn't seem to work too well anyway.

The lack of an API means that offline editors, (like LiveWriter), can't be used to update your blog. It also rules out the many mobile blogging apps on mobile platforms.

The final problem for me was performance. Ghost Hosted feels slow - at least from Australia. Blogger uses Googles CDN, and feels snappy virtually anywhere. Ghost don't seem to have a solution that is working out here yet. A blog page that takes 5 or more seconds to load is going to translate to a lot of lost readers.

Conclusion

Ghost is a service that shows a lot of promise, but is not a usable option for me as it stands. I wouldn't recommend going with them unless you are prepared to deal with a lot of issues and frustration. That said, they are showing all the signs of being awesome down the track.

If you can, consider contributing to Ghost's code base, and help them get there faster. I look forward to giving them another try in 6 months.

References

• Ghost Blogging Platform
• Ghost Source (Github)
• Scott H - Install Ghost on Azure

A good number of us have content stored on google drive. Wouldn't it be handy if we could reference that content in our blog posts? Good news, you can!

Steps

1. Go to your google drive account.
2. Ensure the folder the item is in, is shared (use the option Anyone who has the link can view).
3. Share the item (use the same option as above). Copy the "Link to Share" link.
4. Paste the link in the linkifier below
5. Copy the link produced, and insert it into your blog via any of your usual methods

How it works

A link with this format: https://drive.google.com/file/d/[id number]/edit?usp=sharing is transformed using a regular expression, to this format: http://drive.google.com/uc?export=view&id=[id number]

Google Drive Linkifier

Please post a comment if you have any problems.

Last week, a coworker asked me a question about Etags. I'd never heard of of Etags - in spite of them being around since 1999!

In a nutshell, an etag is an identifier assigned to a specific version of a hosted object by a webserver - for the purposes of caching.

Etags operate as follows:

1. 1. A client sends a HTTP request for an object.
2. 2. The server returns the object to the client, along with the ETag value (as an Etag field, eg: ETag: "686897696a7c876b7e"). The client caches the object.
3. 3. When the client needs re-display the object, a it sends a HTTP request along with a If-None-Match field, eg: If-None-Match: "686897696a7c876b7e".
4. 4. If the If-None-Match field matches the Etag for the resource, a HTTP 304 (NOT MODIFIED) response is sent. If the If-None-Match field does not match, a HTTP 200 (OK) response is sent along with the updated resource.

This mechanism allows objects to be transmitted only when they have changed - saving on bandwidth. What's even better, is that Etags are on be default in IIS and Apache and supported by all major browsers. Sounds like a win-win!

Notes

• Etags work with all major browsers (IE8+,FF,Chrome,Safari)
• Etags work along side other cache headers (such as expiry)
• Etags are usually generated based on timestamps
• Etags can be used as a tracking mechanism

References

• Detecting the Lost Update Problem Using Unreserved Checkout (W3C 1999)
• Wikipedia ETag article
• HTTP 1.1 If-None-Match

I recently purchased a Belkin WeMo light switch. I've been eyeing these off for a while. The general premise is pretty cool. It is a IP enabled light switch, with Iphone/Android control.

Install was pretty easy. It was simply a matter of cutting a hole in the gyprock (plaster board), and running some wires to my existing switch. Belkin provided some twist-on electrical connectors, which made the job very easy. Note that this will not use any sort of standard Australian wall plate – so it is not going to look like your Clipsal switches. It does fit into a standard plasterboard C-Clip, so that is nice.

Once running, it was fairly easy to setup. After installing the WeMo app, I connected my phone to a new Wifi access point provided by the WeMo switch. The WeMo app then prompted me to enter my existing WiFi network details. From there, the switch connected to my home network and performed a firmware update, and we were in business.

Controlling the switch worked on my home network, or remotely - and it responded fast. There is an audible click from the switch when triggered remotely.
The switch lights up to indicate status, with a small green icon showing on/off state. This is really handy at night. There is also a soft white LED showing a network connection.

Legal & Safety Note

If you live here in Australia, you MUST have the switch installed by a licenced electrician. It is a legal requirement. You should also keep in mind that you are dealing with 240v power. You could do yourself a serious injury or manage to electrocute yourself. Don’t become a Darwin Award.

Issues

So far, I have had two problems. The first is that the switch has stopped responding to my phone over wifi. If I connect to it over the cell network, it works fine. I suspect this is a quirk of the NAT setup for my home network rather than an issue with the switch itself.

The second issue I have had is that I setting up IFTTT (https://ifttt.com) integration was difficult. The WeMo app was unable to generate a PIN for IFTTT. Belkin were very quick to respond on twitter. They suggested performing a factory reset of the switch (which I did). Within 24 hours it was working. It may have been a server side issue at Belkin.

Integration

As a software developer, I was keen to attempt to integrate with the WeMo switch. Unfortunately Belkin don’t provide a public API! I was hoping there would be a REST or SOAP service I could work with. That means our options for integration are limited to third party services supported by the WeMo – which includes IFTTT (mentioned above).  

For my integration test, I integrated my home alarm system with the switch. When my alarm is armed at night time, the WeMo Switch turns on my outside light.

In more detail, when I arm my alarm, an email is sent saying “Alarm Armed at [time]”. I added a Google script to my Gmail account to check if it is after sunset, and if it is, send a second email saying “Alarm Armed [Night]”.

IFTTT picks up this second email, and turns on my outside light!

Conclusion

Overall I'm happy with the WeMo switch. The price was $60, which seems ok considering some of the fancier standard light switches are up near that price. If integration was friendlier, I’d rate it higher.

Rating: 4/5 Stars - Highly recommended

Photos

The installed switch

Front of switch and connectors

Back of switch, showing wires

References

• IFTTT (IF That Then This)
• Belkin WeMo Home Automation