Category Archives: javascript

January, 2013

Building real time applications for any client with Azure Mobile Services & Pusher

Because ZUMO can cater ANY client!

Azure Mobile Services is definitely one of the coolest technologies in the Azure family. One of the issues however, has been that it only has client libraries for Windows 8, iOS and Android, making it a bit more difficult for developers targeting other platforms (also web browsers!) to take advantage of its capabilities.

A while ago, I blogged about how to work around that – by using ZUMO REST API. However, you still didn’t have access to one of the nicest features of ZUMO for mobile devices – and that is push notifications. That changed recently, when ZUMO announced a partnership with Pusher, to provide push notifications for virtually any client.

Additionally, the team recently released another cool feature – scheduled tasks (cron jobs). Let’s see how you can use it all together to quickly build a realtime service.

More after the jump.

Continue reading

August, 2012

Knockout.js pro tips – working with templates

Because templating in KO can be very flexible

Just like last time, when we discussed observable arrays, I wanted to share a few (hopefully) useful tips about working with templates in Knockout. This is not going to be a comprehensive look into templating with knockout – there are plenty of resources that cover that – but rather a collection of smaller pieces of advice that could make you life easier.

Again, familiarity with Knockout is assumed.

Continue reading

July, 2012

Knockout.js pro tips – working with observable arrays

Because array manipulation doesn't have to be a bottleneck

Recently, I have been blogging mainly about Web API, but many people have been asking me about Knockout.js. And rightfully so, because it is one of the most robust Javascript client side technology right now.

I blogged about KO a couple of times here before, but I thought it might be a nice change to do it in a new format. Instead of a one big, end-to-end solution, let’s do a set of “pro tips”, small pieces of real-life advices for your Knockout solutions.

This article assumes a working knowledge of Knockout.

Continue reading

May, 2012

Native HTML5 push notifications with ASP.NET Web API and Knockout.js

Because you don't need websockets for push notifications

The ASP.NET Web API project progresses at a rapid pace, and has already come a long way since the beta release. And as it is OSS now, it’s really great that we all can see the progress being made (thanks, MS!). So today we are going to build a native HTML5 push notifications mechanism over HTTP protocol, utilizing the latest exciting features of Web API (PushStreamContent), modern browsers’ Server-sent Events EventSource API and, of course, Knockout.js.

Few weeks ago Henrik Nielsen on his blog was kind enough to share some updates about the latest feauters available in the ASP.NET Web API. We are going to be using his sample code as the starting point to develop an application utilizing a real HTTP push messaging infrastructure. We’ll use that to build a browser-based multi-person chat, but the principles showed here could be used for pretty much anything that requires pushing content to the client.

Continue reading

Windows Phone 7 sports application with Apache Cordova, jQuery Mobile Metro and ESPN API

Because WP7 development can be really easy

One of the finest news recently has been the announcement of jQuery Mobile Metro theme for WP7. The nice folks at Windows Phone Interoperability Bridges and Sergei Grebnov have released that (also available as a Nuget package) last week.

I immediately thought that this is one of the things that should be definitely checked out – after all jQuery Mobile is a wonderful technology for building robust mobile applications – and jQuery Mobile Metro seems to have so much potential! Coupled with Apache Cordova (formerly PhoneGap), it allows us to quickly and easily brew a mobile application that can be deployed to any platform. What happens with Cordova, is that you build your application with HTML5, CSS and Javascript – and then it’s packaged into an environment specific package and run as if it was a native application (using an embedded browser control). Things couldn’t be any easier.

So today, the plan is to build a sports application for Windows Phone 7 – using all the goodies: Apache Cordova, jQuery Mobile Metro and our good friend, ESPN API.

Continue reading

April, 2012

Full screen Bing Maps with HTML5 Full screen API

Because Bing maps are made for full screen

I recently got a bit depper into Bing Maps development, and I have been mesmerized by their richness and capabilities.

With that said, I had an idea that Bing Maps are one of those products that are simply tailor made for full screen viewing. So I thought, why not bring that to life with the new HTML5 Full screen API? Noteworthy, Facebook recently rolled out an update including the full screen API in their photo viewing service.

More after the jump.

Continue reading

Your own sports news site with ESPN API and Knockout.js

Because single page applications with knockout.js are a piece of cake

I was really excited when I heard the announcement of the ESPN API. Being a sports freak like me, that opens a tremendous amount of possibilities for application development. Today, let’s build our own sports news single-page application, fueled entirely by Knockout.js.

You will be able to browse the latest news from ESPN from all sports categories, as well as filter them by tags. The UI will be powered by KnockoutJS and Twitter bootstrap, and yes, will be a single page. We have already done two projects together using knockout.js – last.fm API infinite scroll and ASP.NET WebAPI file upload. Hopefully we will continue our knockout.js adventures in an exciting, and interesting for you, way.

More after the jump.

Continue reading

March, 2012

Build Facebook style infinite scroll with knockout.js and Last.fm API

Because with knockout.js, you shall fear UI no more

I’m convinced that most of us web developers often have to struggle with some sophisticated Javascript driven UI that tend to get out hand with their complexity, dependencies and relationships.

With that in mind, I wanted to show you an example of a knockout.js code in action.

Since knockout.js is one of the most amazing and innovative pieces of front-end code I have seen in recent years, I hope this is going to help you a bit in your everday battles. In conjuction with Last.FM API, we are going to create an infinitely scrollable history of your music records – just like the infinite scroll used on Facebook or on Twitter.

More after the jump.

Continue reading

Passing data to jQuery events with event.data and custom $.Event object

Cause clean Javascript is cool

Whenever handling an event in jQuery, be it a UI event or a programmatic event, it is very often required to pass some piece of data to it. It is common for novice developers to pull that data directly from globally scoped objects – variables or global DOM selectors – which is not the best practice, and with more sophisticated dynamic UIs it easily gets out of hand and becomes impossible to maintain in the longer run.

To avoid such issues, jQuery provides two easy mechanisms for passing data to event handlers. More after the jump.

Continue reading