Monthly Archives: January 2015

Learn Handlebars in 10 Minutes

By Danny Markov


Handlebars.js is a popular templating engine that is powerful, simple to use and has a large community. It is based on the Mustache template language, but improves it in several important ways. With Handlebars, you can separate the generation of HTML from the rest of your JavaScript and write cleaner code.

This quick article is an attempt to teach you almost everything you need to know about Handlebars in 10 minutes or less. It may seem a bit overwhelming in the beginning, but just like riding a bike (pun intended), after you get the hang of it, it becomes the easiest thing in the world.

0. Adding it to your project

Adding handlebars to you project is pretty straightforward. Just go to , and click the download button to get the latest version. At the moment of writing, this is version 2.0.0. Now all you have to do is to include the library in your html with a regular tag.

You can also use a CDN-hosted version, which has the added benefit that the same file might be cached already in the visitor’s browser, if it has been used by another website.

// From File
<script src="handlebars-v2.0.0.js"></script>

// From CDN
<script src=""></script>

1. Templates

Once you have the library in place, you can start writing templates. The recommended way of adding templates to your page is by including them in tags with a special type. The type attribute is important, otherwise the browser will attempt to parse them as JavaScript (which they are not).

The templates have an easy to grasp syntax. They can contain HTML and text, mixed with Handlebars expressions. Expressions are wrapped in double or triple curly braces {{}}. Expressions tell Handlebars to include the value of variables or to execute helper functions. Templates need to be compiled to a JavaScript function before use. You can see an example below. Note that we are using jQuery to make working with the DOM easier, but Handlebars can work perfectly without it.

(Play with our code editor on

2. Expressions

To build up from the previous example, any data that you print out in an {{ }} expression, will automatically get HTML escaped by handlebars. This is a great security feature, but some times you might wish to print raw HTML. In this case you will use the triple curly brace expression {{{ }}}.

Also, notice that the handlebars expressions support nested values which enables us to easily access any data from a JavaScript object.

(Play with our code editor on

3. Context

Handlebars builds on the best features of Mustache. And one these is the concept of context – the object where properties you include in curly braces are looked up. Every template you write has a context. On the top level, this is the JavaScript object that you pass to the compiled template. But helpers like #each or #with modify it, so that you can access the properties of the iterated object directly. The next example will make things clearer.

(Play with our code editor on

4. Helpers

Handlebars doesn’t allow you to write JavaScript directly within templates. Instead, it gives you helpers. These are JavaScript functions that you can call from your templates, and help you reuse code and create complex templates. To call a helper, just use it as an expression – {{helpername}}. You can pass parameters as well – {{helpername 12345}}, which are passed as parameters to your helper function.

To create a helper, use the registerHelper function. See the example below, which demonstrates a creating a helper, and a number of Handlebars’ built-in ones:

(Play with our code editor on

5. Block helpers

Block helpers are just like the regular ones, but they have an opening and a closing tag (like the #if and #each built-ins). These helpers can modify the HTML and content they are wrapped around. They are a bit more complicated to create, but are very powerful. You can use them to reuse functionality or to create large blocks of HTML in a reusable way (for example lists of items that you use on many places in your app).

To create a block helper, you again use Handlebars.registerHelper(). The difference is that this time we will use the second parameter of our callback function – options. It exposes a few useful properties that we will need. See the example below, which turns text uppercase.

(Play with our code editor on

Resources and further reading

You now know enough to start using Handlebars in your web apps! But it never hurts to know a bit more, so here are a few more resources and articles if you wish to dig deeper in the library:

  • Handlebars.js – Handlebars’ home is full of great documentation and examples.
  • Try Handlebars.js – try out different Handlebars scenarios in your browser (it is for an older version of handlebars, unfortunately, but the basics are pretty much the same).
  • Handlebars Helpers – a collection of 130+ handlebars helpers in ~20 categories.
  • SWAG – more handlebars helpers.
  • Handlebars API Reference.


Freebie: 5 Beautiful and Responsive Footer Templates

By Martin Angelov


Footers are often underestimated by designers and developers. This area of a website is a great place to provide people with more information like contact details and social accounts, or with direct links to pages of interest. This is why we want to share with you a collection of 5 beautiful and responsive footers, which you can use as a building block for your next site.

The Design

Our templates are responsive and are easy to customize. We have split the CSS into separate files for each of the templates, so that it is extremely easy to include the footer that you need into an existing website – just copy and paste! The CSS is self contained, so you can be sure that no conflicts will arise with the rest of the page. Our footers also work great on smartphones and tablets.

Beautiful Responsive Footer Templates

Some of the footers use Font Awesome, so you have plenty of icons to choose from. And as a bonus they are crisp on any resolution, so are retina ready.

Free for Commercial Use

Feel free to use these templates in both personal and commercial projects. We hope they come in handy and we’d love to see what you do with them 🙂


Tutorial: Making a Shoutbox with PHP and jQuery

By Nick Anastasov


In this tutorial, we are going to build a shout box with PHP and jQuery, which allows visitors of your website to leave short comments to one another. Shouts will be stored on the server as files, no database like MySQL will be required. We are going to use two PHP libraries to make things easier – Flywheel for storing the shouts as json files and RelativeTime for creating human readable relative time stamps. We will be using Composer to install these libraries.

On the client side, we are using plain jQuery code, and the Emoji One library, which is a free project and library for adding pretty emojis to web apps. Let’s begin!

Running the shoutbox

You can grab the source code from the download button above. It has plenty of comments and is easy to follow. To run it, simply upload it to your web hosting space or add it to the apache htdocs folder if you run something like XAMPP or MAMP. Then, open http://localhost in your browser (or your website, if you uploaded it to your hosting space). Here are a few things to look for:

  • The zip files already contains the dependencies, so you don’t need to install Composer. This makes it easy to get started with the code – simply upload it and use it!
  • Make sure that the data/shouts directory exists and is writable. Otherwise you will see errors in your log file and no shouts will be stored. You might need to chmod it to 777 if you keep seeing errors.


Let’s start with index.html. It is a regular HTML5 document, which includes our JavaScript libraries, scripts and stylesheets. Here are the parts relevant to the shoutbox:


<div class="shoutbox">
    <h1>Shout box <img src='./assets/img/refresh.png'/></h1>
    <ul class="shoutbox-content"></ul>
    <div class="shoutbox-form">
        <h2>Write a message <span>×</span></h2>
        <form action="./publish.php" method="post">
            <label for="shoutbox-name">nickname </label> <input type="text" id="shoutbox-name" name="name"/>
            <label class="shoutbox-comment-label" for="shoutbox-comment">message </label> <textarea id="shoutbox-comment" name="comment" maxlength='240'></textarea>
            <input type="submit" value="Shout!"/>

With JavaScript we will insert the published shouts into the

    element. The form is hidden by default, and only revealed when the “Write a message” header is clicked.

    Shoutbox with PHP and jQuery

    The JavaScript Code

    And here is our script.js, which makes the above HTML work:


        // Storing some elements in variables for a cleaner code base
        var refreshButton = $('h1 img'),
            shoutboxForm = $('.shoutbox-form'),
            form = shoutboxForm.find('form'),
            closeForm = shoutboxForm.find('h2 span'),
            nameElement = form.find('#shoutbox-name'),
            commentElement = form.find('#shoutbox-comment'),
            ul = $('ul.shoutbox-content');
        // Replace :) with emoji icons:
        emojione.ascii = true;
        // Load the comments.
        // On form submit, if everything is filled in, publish the shout to the database
        var canPostComment = true;
            if(!canPostComment) return;
            var name = nameElement.val().trim();
            var comment = commentElement.val().trim();
            if(name.length && comment.length && comment.length < 240) {
                publish(name, comment);
                // Prevent new shouts from being published
                canPostComment = false;
                // Allow a new comment to be posted after 5 seconds
                    canPostComment = true;
                }, 5000);
        // Toggle the visibility of the form.
        shoutboxForm.on('click', 'h2', function(e){
            if(':visible')) {
            else {
        // Clicking on the REPLY button writes the name of the person you want to reply to into the textbox.
        ul.on('click', '.shoutbox-comment-reply', function(e){
            var replyName = $(this).data('name');
            commentElement.val('@'+replyName+' ').focus();
        // Clicking the refresh button will force the load function
        var canReload = true;
            if(!canReload) return false;
            canReload = false;
            // Allow additional reloads after 2 seconds
                canReload = true;
            }, 2000);
        // Automatically refresh the shouts every 20 seconds
        function formOpen(){
            if(':visible')) return;
        function formClose(){
            if(!':visible')) return;
        // Store the shout in the database
        function publish(name,comment){
            $.post('publish.php', {name: name, comment: comment}, function(){
        // Fetch the latest shouts
        function load(){
            $.getJSON('./load.php', function(data) {
        // Render an array of shouts as HTML
        function appendComments(data) {
                    '<span class="shoutbox-username">' + + '</span>'+
                    '<p class="shoutbox-comment">' + emojione.toImage(d.text) + '</p>'+
                    '<div class="shoutbox-comment-details"><span class="shoutbox-comment-reply" data-name="' + + '">REPLY</span>'+
                    '<span class="shoutbox-comment-ago">' + d.timeAgo + '</span></div>'+

    The Emoji One library has version for both JavaScript and PHP. In the appendComments method, we use the emojione.toImage() function to convert all typed-out smileys into emoji. See all functions that are supported, and check out this handy emoji code website. Now that the frontend is ready, let’s move on to the backend.

    The PHP Code

    We have two files – publish.php and load.php. The first accepts a POST request for storing shouts in the data store, and the second returns the 20 latest shouts. These files are not opened directly by visitors – they only handle AJAX requests.


    // Include our composer libraries
    require 'vendor/autoload.php';
    // Configure the data store
    $dir = __DIR__.'/data';
    $config = new JamesMossFlywheelConfig($dir, array(
        'formatter' => new JamesMossFlywheelFormatterJSON,
    $repo = new JamesMossFlywheelRepository('shouts', $config);
    // Store the posted shout data to the data store
    if(isset($_POST["name"]) && isset($_POST["comment"])) {
        $name = htmlspecialchars($_POST["name"]);
        $name = str_replace(array("n", "r"), '', $name);
        $comment = htmlspecialchars($_POST["comment"]);
        $comment = str_replace(array("n", "r"), '', $comment);
        // Storing a new shout
        $shout = new JamesMossFlywheelDocument(array(
            'text' => $comment,
            'name' => $name,
            'createdAt' => time()

    Here we directly use the Flywheel library we mentioned in the beginning. Once it is configured, you can store any type of data, which will be written as a JSON file in the data/shouts folder. Reading these shouts is done in load.php:


    require 'vendor/autoload.php';
    // If you want to delete old comments, make this true. We use it to clean up the demo.
    $deleteOldComments = false;
    // Setting up the data store
    $dir = __DIR__.'/data';
    $config = new JamesMossFlywheelConfig($dir, array(
        'formatter' => new JamesMossFlywheelFormatterJSON,
    $repo = new JamesMossFlywheelRepository('shouts', $config);
    // Delete comments which are more than 1 hour old if the variable is set to be true.
    if($deleteOldComments) {
        $oldShouts = $repo->query()
                    ->where('createdAt', '<', strtotime('-1 hour'))
        foreach($oldShouts as $old) {
    // Send the 20 latest shouts as json
    $shouts = $repo->query()
            ->orderBy('createdAt ASC')
    $results = array();
    $config = array(
        'language' => 'RelativeTimeLanguagesEnglish',
        'separator' => ', ',
        'suffix' => true,
        'truncate' => 1,
    $relativeTime = new RelativeTimeRelativeTime($config);
    foreach($shouts as $shout) {
        $shout->timeAgo = $relativeTime->timeAgo($shout->createdAt);
        $results[] = $shout;
    header('Content-type: application/json');
    echo json_encode($results);

    We’ve included code which deletes shouts older than an hour. We use this feature to keep the demo clean. You can enable it if you wish. After selecting the shouts, we are also calculating the human-readable relative time stamp with the RelativeTime library.

    With this our shoutbox is ready! You can embed it in your website, customize it and change the code any way you please. We hope you like it!


10 Things That Drive Me Mad When Visiting A Website

By Martin Angelov


There is a lot of hate on the internet. Most of the time, it is only because people find it easier to vent their real-life frustration online. But sometimes it is the websites you visit that drive you mad. Here are 10 usability failures that are guaranteed to piss your users off. If you are a web developer/designer, read the how to fix tips to make sure you are not part of the problem!

1. Forms that lose your input on error

As far as infuriating usability issues go, this has to rank at the top. You spend all that time filling in a form, making sure everything is perfect, and then, suddenly, all is gone forever. A habit that probably most of you have developed is to copy the contents of the field that took you the most time to fill, just in case everything goes to waste.

How to fix it:

If you are a web developer, simply add some JavaScript to your forms, use a validation library or submit via AJAX. Something that is a bit more involving, if you wish to keep the logic of your forms entirely in the server side, is to make sure that the contents of the inputs is populated again by placing everything in the session on submit.

2. Captchas

I am sure I am not the only one that hates them. Some of these horrible inventions are simply impossible to discern. Combine it with #1, and you get a maddening combination.

Don’t you hate captchas?

How to make it better:

Spam bots are getting more and more sophisticated, so some kind of proof that you’re human will still be required. Some captchas are better than others. reCAPTCHA only shows house numbers, so they are easy to guess by humans (and you also aid the correctness of Google Streetview).

3. Sending spam

Don’t you just hate it when a website tries to engage you by flooding you with useless, spammy emails that are impossible to unsubscribe from? I know I do.

You make my inbox hurt, LinkedIn.

You make my inbox hurt, LinkedIn.

How to fix it:

STOP SPAMMING. Also, close your LinkedIn account. Who needs that anyway.

4. Using negative setting names

Another hair-pulling mistake that web developers make, is to build settings panels with overly creative setting names. Don’t do this:

Negative settings are bad


How to fix it:

Aim for clarity and use simple phrasing. Use checkboxes for on/off. Prefer select boxes over radio groups for more than three options. Organize your settings in logically connected groups.

5. Long forms

Out of all the ways you could be spending your time online, I bet that filling out forms is the one you hate the most. Here is how I usually react when I see a long registration form:

What’s this!? I only wanted to try out your todo list!

How to fix it

Only ask for information you absolutely need. Even then, don’t do it during sign up, or you risk people leaving.

6. Interstitial ads

Those horrible ads are the first thing you see on some websites. Some of these ads don’t even let you dismiss them for a few seconds.

Nobody wants your mobile app!

Nobody wants your mobile app!

How to fix it

By using these ads you:

  • Make everybody hate you
  • Piss off your users. And what is the first thing a pissed off user does when they eventually visit the page they were headed to? They write a hate comment. That is right – you are breeding trolls.
  • Give people a reason to install AdBlock which in turn hurts all the hardworking web owners out there.

So don’t.

7. On close dialogs

I loathe these from the bottom of my heart. When I’ve made my mind that I don’t want to spend any more time on your website, and you still prompt me to stay once I close the tab, I am tempted to unleash 4chan upon you.

On close dialogs

I want to leave, damn it!

How to fix it:

Delete your website from the internet. You are a bad person.

8. Placing things where I don’t expect them to be

User interfaces should be logically organized. Related actions give people context and allow them to navigate your web app easily. So don’t move things around where they clearly don’t belong. Here is a horrible navigation menu:

Confusing interfaces

Tuesday is a great day to format your hard drive!

So first, people should create an event, then invite their friends, and finally format their hard drives. The perfect conclusion to a productive day!

Of course, this is a fictional example, but you get the point. To fix this category of issues:

  • Read a bit about UX and interface design. This will help you spot and fix usability problems.
  • Ask out friends or relatives to use your web apps while you observe. If they are confused, you have more work to do.

9. Sites broken on mobile

I remember the time when web designers couldn’t wait to drop the dreaded 1024×768 resolution that constrained their web sites. But just as this became a fact, mobile happened, and with it came all kinds of screen sizes that we have to support. Making a site responsive is not that hard to do. But if you don’t it will drive visitors away. This is bad:

Non-responsive sites

Quora clearly wants you to use their mobile app

How to fix:

For existing sites – add some media queries. This can go a long way towards being more usable on mobile. For new sites, you can go with a framework like Bootstrap, which has a responsive grid that is easy to use.

10. Paywalls

I realize that some sites offer quality content that can’t be supported with ads alone, so it makes a sane business decision to lock it up behind a pay wall. But boy can this drive you mad when you’ve been sent a link that you want to read.


Paywall example

So there you have it, that is 10! What would you add?


The 30 Best Free WordPress Themes Of 2014

By Danny Markov


Did you know that WordPress now powers 23% of all websites on the internet? It is no wonder – the open source CMS is very extensible and has a large community producing themes and plugins. The result is that you can build almost any site with WordPress. All that you need to do, is find the perfect theme, and we went ahead and did that for you!

In this article, we’ve collected our favorite free themes from 2014. To be honest some weren’t released this year, but all have received updates in the last 12 months, and we simply couldn’t resist including them. Here are our picks:

1. Tracks

A beautiful and stylish theme, perfect for magazine or photography blogs. It offers an outstanding flat design with well picked fonts and a black/white color scheme. Tracks’ creators have done a great job making the theme responsive, as it transforms smoothly and looks great on all screen sizes.


2. Minimable

Minimable is a bootstrap based theme, which despite its name, offers a great amount of features such as the well designed navigation or a stunning slideshow overlay you can use for your photos. Most of the elements are nicely animated, which gives the theme a professional and unified feel.



3. Fukasawa

Fukasawa sports a beautifully minimal layout that displays you posts, images and videos in a Pinterest-style grid. This theme offers clever responsive design and retina friendly icons that allow it to adapt gracefully to any screen resolution. This theme also gives you great customization options with its numerous color schemes and widgets.



4. Perfetta

Sometimes websites don’t need to be over-the-top and packed with features; sometimes simplicity is what you need. Perfetta strips away the fat and offers a blog-style layout in a clean, sophisticated layout and design with smooth reveal animations for the content view. If you want your visitors to focus on your content, then this is for you.



5. Serene

Serene is a simple, modern theme built with the idea to create a blogging experience that is a pleasure to the eyes. It supports 6 different post formats, including: Article, Quote, Video, Audio, Gallery and Link, which all look very cool. It also features color schemes and full browser compatibility.



6. StanleyWP

A cute, flat design theme by GentsThemes, created to showcase your work in a simple way. It has a premium look and doesn’t lack features either: a drag and drop homepage builder, three page templates, a responsive design and others.



7. Arcade

A theme wtih a big and bold header image that will quickly grab the attention of anyone who visits your site. Take advantage of the large call to action area, post block and widgetized footer on your home page to get your important information across in the best looking way possible.



8. Moesia

Moesia is a striking business theme you can use to build an effective online presence. Choose from eleven predefined blocks and build the homepage that best suits your company. Each of the homepage blocks can have a parallax background image and its own set of colors. Moesia also features a selection of Google Fonts, two types of layouts for the blog page, cool animations and much more.



9. OneEngine

A multi-purpose one page WordPress theme with a layout builder included, easy-to-use backend options, plus a glorious design with 60+ animation effects, unlimited color schemes and Google Fonts Support.



10. InstantWP

InstantWP is a minimal Bootstrap based theme packed with some great features. The theme is perfect for those looking to display portfolio items and also manage a nice WordPress blog.



11. Daily

Free responsive WordPress theme, which can be used as a blog or portfolio. Minimalism, simplicity and refined details are Daily’s key advantages. A full screen intro, responsive design, extensive documentation, SVG icons, integrated lightbox, 3 separate widgetized areas – this one has it all.



12. Fabren

Complement your beautiful images by giving each post a custom splash of color. Select from multiple layouts to create a unique design that works great as an online shop, business site or personal blog.



13. Rams

Rams is a clean and minimalist theme with plenty of style and zero fluff. It’s responsive & retina ready, features multiple post formats and changeable sidebar background color and accent color of the content. Its simplicity and easy set up will have you blogging in no time.



14. Enlightment

Enlightenment Theme comes with all standard WordPress functionality, a responsive layout and a large set of features for advanced customization of your website.
You can personalize individual templates, build custom landing pages and showcase any type of content.



15. Storefront

Storefront is an intuitive & flexible, free WordPress theme offering deep integration with WooCommerce. It’s the perfect platform for any type of store since it is built and maintained by WooCommerce core developers – the most popular WordPress eCommerce plugin.



16. Hoffman

Hoffman is a stylish and beautifully minimal WordPress theme for bloggers. You can give Hoffman a personal touch by changing the accent color, switching the background color or adding a background image. The theme includes custom widgets for recent posts with thumbnails, recent comments with avatars, Flickr, Dribbble, video and easy-to-use social links in Hoffmans header, footer and post meta section.



17. Matheson

Matheson is a beautiful, clean and professional theme for WordPress that would work great for any business or blog. A bold typeface, minimalist design and large home page slider puts the focus where it’s needed, on your content.



18. Sparkling

Sparkling is a clean, modern flat design theme developed using Bootstrap 3. With pixel perfect design, awesome widgets and full-screen slider it obtains a premium look and feel. The theme is SEO friendly and will make Google love your website.



19. Portfolio

A potent theme for showcasing your best projects, whether your focus be on photography, interior design, art or any creative discipline. Available at no cost, you can have a style that puts premium themes to shame, but without the hit to your wallet that usually comes with it!



20. Zerif Lite

A very stylish, yet fun theme featuring bright colored panels, mixed with see-through ones which show an awesome full screen background image. Add some smooth CSS animations and you’ve got this awesome scrolling experience – perfect for product introductions.


Zerif Lite

21. Radcliffe

Radcliffe is a image-heavy theme for writers who want to put their content front and center. Massive full-screen featured images makes Radcliffe perfect for photoblogs or a photo-heavy personal blog. The thought-through typography makes writing and reading longform articles a pleasure too.



22. Make

Make is an incredibly powerful open-source WordPress theme which makes building a website easier then ever using a drag and drop page builder with over 110 customization options. You can add and style columns, banners, galleries, posts lists, and other sections to your page without touching a single line of code.



23. Newsted

Newsted is a stylish two column WordPress theme with a responsive layout for all mobile and desktop devices. Newsted allows you to add a prominent call to action and header image on the homepage as well as 3 additional homepage widget areas.



24. Spacious

Spacious is a theme with a bright and clean design, which could work great as a business website or a tech blog.



25. Ultimate

Ultimate is a well crafted free WordPress theme by the guys over at Theme Horse. It is easily customizable with numerous theme options and features support for popular plugins for further personalization.



26. Quill

Quill is designed with law firms in mind. Use it to create a great online presence for your firm and show your potential clients what you’re all about by using the many available front page blocks. You can brag with your latest cases, show off your most valuable employees, present facts about your firm and much more.



27. Accelerate

Accelerate is multipurpose WordPress theme made for simplicity and ease of use. It supports most post formats which makes it possible to use it as a blog, personal, corporate or any other kind of site. The design is flat and sharp and will go along nice with any kind of content.



28. Lingonberry

Lingonberry’s got all the features you need, and none that you don’t. It’s designed to be easy to install, use and visit. Lingonberry supports all post formats and provides unique styling for all of them. No matter what kind of content you want to publish, It’s got your back.



29. Adamos

A cool theme with a stylish top navigation bar and a beautiful full-width slideshow image banner you can use to highlight your featured posts or favorite pictures.



30. Perkins

Perkins is a bold WordPress theme with a layout highly suited for magazine websites. The sections are nicely designed and the typography is quite good as well. If you still don’t fancy the standard look, Perkins is customizable including custom background, logo and colors.



And that’s 30! We hope that you enjoyed this post and like the themes we’ve included. Did we miss anything? Tell us in the comment section.


Creating Your First Desktop App With HTML, JS and Node-WebKit

By Danny Markov


These days you can do pretty much anything with JavaScript and HTML. Thanks to Node-WebKit, we can even create desktop applications that feel native, and have full access to every part of the operating system. In this short tutorial, we will show you how to create a simple desktop application using Node-WebKit, which combines jQuery and a few Node.js modules.

Node-WebKit is a combination of Node.js and an embedded WebKit browser. The JavaScript code that you write is executed in a special environment and has access to both standard browser APIs and Node.js. Sounds interesting? Keep reading!

Installing Node-WebKit

For developing applications, you will need to download the node-webkit executable, and call it from your terminal when you want to run your code. (Later you can package everything in a single program so your users can only click an icon to start it).

Head over to the project page and download the executable that is built for your operating system. Extract the archive somewhere on your computer. To start it, you need to do this in your terminal:

# If you are on linux/osx

/path/to/node-webkit/nw /your/project/folder

# If you are on windows

C:pathtonode-webkitnw.exe C:yourprojectfolder

# (the paths are only for illustrative purposes, any folder will do)

This will open a new node-webkit window and print a bunch of debug messages in your terminal.

You can optionally add the extracted node-webkit folder to your PATH, so that it is available as the nw command from your terminal.

Your First Application

There is a Download button near the top of this article. Click it and get a zip with a sample app that we prepared for you. It fetches the most recent articles on Tutorialzine from our RSS feed and turns them into a cool looking 3D carousel using jQuery Flipster.

Directory Structure

Once you extract it, you will see the files above. From here this looks like a standard static website. However, it won’t work if you simply double click index.html – it requires Node.js modules, which is invalid in a web browser. To run it, CD into this folder, and try running the app with this command:

/path/to/node-webkit/nw .

This will show our glorious desktop app.

Our node-webkit app

Our node-webkit app

How it was made

It all starts with the package.json file, which node-webkit looks up when starting. It describes what node-webkit should load and various parameters of the window.


  "name": "nw-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  "author": "",
  "window": {
    "toolbar": false,
    "width": 800,
    "height": 500
  "license": "ISC",
  "dependencies": {
    "pretty-bytes": "^1.0.2"

The window property in this file tells node-webkit to open a new window 800 by 500px and hide the toolbar. The file pointed to by the main property will be loaded. In our case this is index.html:


<!DOCTYPE html>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Tutorialzine Node-Webkit Experiment</title>

	<link rel="stylesheet" href="./css/jquery.flipster.min.css">
	<link rel="stylesheet" href="./css/styles.css">


	<div class="flipster">
			<!-- Tutorialzine's latest articles will show here -->

	<p class="stats"></p>

	<script src="./js/jquery.min.js"></script>
	<script src="./js/jquery.flipster.min.js"></script>
	<script src="./js/script.js"></script>

And finally, here is our JavaScript file. This is where it gets interesting!


// Mixing jQuery and Node.js code in the same file? Yes please!


	// Display some statistic about this computer, using node's os module.

	var os = require('os');
	var prettyBytes = require('pretty-bytes');

	$('.stats').append('Number of cpu cores: <span>' + os.cpus().length + '</span>');
	$('.stats').append('Free memory: <span>' + prettyBytes(os.freemem())+ '</span>');

	// Node webkit's native UI library. We will need it for later
	var gui = require('nw.gui');

	// Fetch the recent posts on Tutorialzine

	var ul = $('.flipster ul');

	// The same-origin security policy doesn't apply to node-webkit, so we can
	// send ajax request to other sites. Let's fetch Tutorialzine's rss feed:

	$.get('', function(response){

		var rss = $(response);

		// Find all articles in the RSS feed:

			var item = $(this);
			var content = item.find('encoded').html().split('</a></div>')[0]+'</a></div>';
			var urlRegex = /(http|ftp|https)://[w-_]+(.[w-_]+)+([w-.,@?^=%&amp;:/~+#]*[w-@?^=%&amp;/~+#])?/g;

			// Fetch the first image of the article
			var imageSource = content.match(urlRegex)[1];

			// Create a li item for every article, and append it to the unordered list

			var li = $('<li><img /><a target="_blank"></a></li>');

				.attr('href', item.find('link').text())

			li.find('img').attr('src', imageSource);



		// Initialize the flipster plugin

			style: 'carousel'

		// When an article is clicked, open the page in the system default browser.
		// Otherwise it would open it in the node-webkit window which is not what we want.

		$('.flipster').on('click', 'a', function (e) {

			// Open URL with default browser.




Notice that we are accessing Tutorialzine’s RSS feed directly with jQuery, even though it is on a different domain. This is not possible in a browser, but Node-WebKit removes this limitation to make development of desktop applications easier.

Here are the node modules we’ve used:

  • Shell – A node webkit module that provides a collection of APIs that do desktop related jobs.
  • OS – The built-in Node.js OS module, which has a method that returns the amount of free system memory in bytes.
  • Pretty Bytes – Convert bytes to a human readable string: 1337 → 1.34 kB.

Our project also includes jQuery and the jQuery-flipster plugin, and that’s pretty much it!

Packaging and Distribution

You most certainly don’t want your users to go through the same steps in order to run you application. You wan’t to package it in a standalone program, and open it by simply double clicking it.

Packaging node-webkit apps for multiple operating systems takes a lot of work to do manually. But there are libraries that do this for you. We tried this npm module –, and it worked pretty well.

The only disadvantage is that the executable files have a large size (they can easily hit 40-50mb) , because they pack a stripped down webkit browser and node.js together with your code and assets. This makes it rather impractical for small desktop apps (such as ours), but for larger apps it is worth a look.


Node-webkit is a powerful tool that opens a lot of doors to web developers. With it, you can easily create companion apps for your web services and build desktop clients which have full access to the users’s computer.

You can read more about node-webkit on their wiki.


How to install Maven on Windows

To Apache Maven Maven on Windows, you just need to download the Maven’s zip file, and Unzip it to the directory you wish to install, and configure the Windows environment variables.

Tools Used :

  1. JDK 1.7
  2. Maven 3.2.2
  3. Windows 8
Maven 3.2 requires JDK 1.6 or above, while Maven 3.0/3.1 requires JDK 1.5 or above


Make sure JDK is installed, and “JAVA_HOME” variable is added as Windows environment variable.


2. Download Apache Maven

Visit Maven official website, download the Maven zip file, for example : Unzip it to the folder you want to install Maven.

Assume you unzip to this folder – C:\Program Files\Apache\maven

That’s all, just folders and files, installation is NOT required.


Add both M2_HOME and MAVEN_HOME variables in the Windows environment, and point it to your Maven folder.

Maven document said add M2_HOME only, but some programs still reference Maven folder with MAVEN_HOME, so, it’s safer to add both.

4. Add To PATH

Update PATH variable, append Maven bin folder – %M2_HOME%\bin, so that you can run the Maven’s command everywhere.


5. Verification

Done, to verify it, run mvn –version in the command prompt.

C:\Users\mkyong>mvn -version
Apache Maven 3.2.2 (45f7c06d68e745d05611f7fd14efb6594181933e; 2014-06-17T21:51:42+08:00)
Maven home: C:\Program Files\Apache\maven
Java version: 1.7.0_65, vendor: Oracle Corporation
Java home: C:\Program Files\Java\jdk1.7.0_65\jre
Default locale: en_US, platform encoding: Cp1252
OS name: "windows 8.1", version: "6.3", arch: "amd64", family: "windows"