Backbone.js Data Binding

In the client-side application development world there are many different choices for development but it seems that at the time of this writing in late 2013 there is a lot of focus on “the big 3”: Backbone.js AngularJS and Ember.js One of the elements that people like a lot about AngularJS and Ember.js (or even something like Knockout.js) is that you get data binding capability out of the box where when something in the view changes, the appropriate model is updated accordingly. So if a user is typing something into an input field, the model value is being set as he or she types. This is something that Backbone.js does not really have natively… yet (as of October 2013).

Certainly, if you wanted to you could load up one of the many libraries that implement data binding in Backbone.js in some manner or another. However, as it turns it’s not really too difficult to integrate this functionality into what you are likely already doing with Backbone.js, so loading up a whole different library is probably unnecessary in most cases. In what follows, we’re going to look at how you can hook up your Backbone models to respond to changes in the view as they occur.

Read More »

Web Storage: Local Storage & Session Storage

In the transition from HTML4 to HTML5, one of the additions of note is web storage. Web storage comes in 2 forms: local storage and session storage (the difference between the 2 will be explained subsequently). But first let’s cover the basics. What is web storage? Basically, it is a method of storing data locally in the user’s browser using key value pairs of data like so…

localStorage.setItem('food', 'Burgers');
localStorage.getItem('food'); // Burgers

By setting a key (food), we can store a value (Burgers) locally.

But what’s so different about this? Browser cookies also accomplish this and cookies have been around forever. Good question. There are 2 key differences between web storage and cookies mainly having to do with size capacity and data transfer.

Read More »

Introduction to Ghost

When Ghost first made its appearance on the Internet via some initial videos demonstrating its features and capabilities as a new blogging platform, there was a lot of excitement around it. There was an enthusiastically supported Kickstarter campaign that raised a sizable amount of money. Below is the video showcasing Ghost…

Fast forward to 10/14/2013, Ghost released to the general public today. Will this go down as a day that everyone remembers as a monumental day in history, or are we seeing just a frenzy of brief initial energy? Only time will tell, but Ghost seems to have some unique things going for it. For one, it runs on Node.js. This is something that is unique when compared to other popular blogging platforms and content management systems. To learn more about Node.js you can take a look at the Node.js primer elsewhere on this site. While there are probably some other Node-based blogging platforms that have been written by people in the Node.js community, Ghost definitely seems to have the most visibility at present. I like Node.js and I like blogging so it seems like a coming together of some good things.

Secondly, one of the engaging features Ghost possesses is that in creating a post you can use simple markdown (which is also used on other popular sites such as GitHub and Reddit) to easily bridge the gap between entering plain text into an editor and having it be cleanly converted to HTML. And beyond that there is a slick live editing feature where you can see what your post is going to look like in real-time as you edit. You don’t even have to click any preview button to see what you are creating because it is right there in front of you.

And then lastly, Ghost proclaims to be a return to the basics of being “just a blogging platform”. This is where WordPress got its start before it matured into a full-fledged content management system over the years. It will be interesting to see if Ghost sticks to its roots or if people will try to turn it into all things for all purposes.

In 2013, a lot of people use WordPress for their blogs because it is so ubiquitous across the internet. Ghost is likely going to need to have some significant appealing features that really set it apart from something as established as WordPress before it becomes widely adopted. But there are definitely going to be some initial challenges for Ghost to overcome. One is the learning curve of using and developing on a platform such as Node.js which in 2013 is still an emerging technology. Installation and deployment to production will not immediately be available on all web hosts. Additionally, like any piece of software in its infancy, features will be somewhat limited. At its launch Ghost had no native comments system and only supports one user account per blog. So there are definitely a number of elements across the entire stack that need to bake in the oven a bit longer. But these things will come with time and with enthusiastic community involvement things may come quicker than anticipated.

Overall, Ghost looks promising and the future looks bright… so it is definitely something to keep an eye on as it grows and matures. If you want to go check it out, the Ghost homepage can be found here and the Ghost GitHub page is here.

A WebGL Primer

Web Graphics Library, or WebGL for short, is a JavaScript API for rendering interactive 2D or 3D graphics in the browser (those browsers that support it). It is maintained by the Khronos Group which has this to say about WebGL on it’s website.

WebGL is a cross-platform, royalty-free web standard for a low-level 3D graphics API based on OpenGL ES 2.0, exposed through the HTML5 Canvas element as Document Object Model interfaces…WebGL brings plugin-free 3D to the web, implemented right into the browser. Major browser vendors Apple (Safari), Google (Chrome), Mozilla (Firefox), and Opera (Opera) are members of the WebGL Working Group.

What this looks like practically is that a developer can use JavaScript to draw graphics on the HTML <canavas> element. The end result brings a significant change to how developers go about rendering this sort of content on websites.

In the early to mid-2000’s anything having to do with 2D and 3D graphical animation and/or interactivity on the web was done in Flash. Flash was used to build entire websites that assaulted the senses with a rich, dynamic smorgasbord of visual and audio presentations. However, when Apple decided **not** to support Flash on it’s increasingly popular iPhone (and later the iPad) coupled with other problems inherent in Flash — such as its propensity to be a CPU and resource hog and the inability for search engines to index the content within it — developers began to move away from it. HTML5 emerged and an increase in the popularity of using JavaScript to provide rich interactive experiences on web sites came along with it. WebGL is a part of that transition.

Read More »

Express.js Authentication

Now we will discuss how to implement authentication in Express.js. Express.js was discussed previously in the Introduction to Express.js. In the discussion there, we looked at how Express is a web-application framework just like CodeIgniter, Django, or Laravel except instead of running on something like Apache or Ngnix, it runs on Node.js and instead of being written in PHP or Python, it is written in JavaScript. Before looking at the following section, it might be a good idea to be familiar with Express.js by reading the introduction to Express and be familiar with Node.js as well. A Node.js Primer will help you with that.

When you think authentication in web development, you think logging in and logging out. Note that this is a little bit different from authorization, which has more to do with whether a logged in user has the permissions to do a certain action on a website. This the reason that you have different roles such as “Administrator,” “Editor,” and “User” defined within different systems. For this section we’ll focus more on authentication, but a lot of the ways that you handle authentication can also be extended upon to implement authorization.

Session-Based Authentication

When you speak of authentication in modern web applications, there are a number of different implementations you could be talking about. One of the more traditional approaches is the use of sessions. Sessions go back as far as anyone can remember with anything having to do with the web. Express.js supports sessions and you can use them just as you would in other languages like PHP.

Place the following code in a file called server.js. Obviously, in a real application we’d want to separate the markup we’re returning out into views and use a templating language to render them like we did in the introduction to Express. But for now, this will do just to serve for purpose of example…

var express = require('express');
var app = express();

app.use(express.bodyParser());
app.use(express.cookieParser('shhhh, very secret'));
app.use(express.session());


function restrict(req, res, next) {
  if (req.session.user) {
    next();
  } else {
    req.session.error = 'Access denied!';
    res.redirect('/login');
  }
}

app.get('/', function(request, response) {
   response.send('This is the homepage');
});

app.get('/login', function(request, response) {
   response.send('<form method="post" action="/login">' +
  '<p>' +
    '<label>Username:</label>' +
    '<input type="text" name="username">' +
  '</p>' +
  '<p>' +
    '<label>Password:</label>' +
    '<input type="text" name="password">' +
  '</p>' +
  '<p>' +
    '<input type="submit" value="Login">' +
  '</p>' +
  '</form>');
});

app.post('/login', function(request, response) {

    var username = request.body.username;
    var password = request.body.password;

    if(username == 'demo' && password == 'demo'){
        request.session.regenerate(function(){
        request.session.user = username;
        response.redirect('/restricted');
        });
    }
    else {
       res.redirect('login');
    }	
});

app.get('/logout', function(request, response){
    request.session.destroy(function(){
        response.redirect('/');
    });
});

app.get('/restricted', restrict, function(request, response){
  response.send('This is the restricted area! Hello ' + request.session.user + '! click <a href="/logout">here to logout</a>');
});

app.listen(8124, function(){
    console.log('Server running...');
});

Now if you run the following command in the same directory as server.js…

node server

and then open up your browser to https://localhost:8124 you can see the homepage as defined by the default route.

Read More »