Recreating Github in a SPA way


This blog post is exposing the video demoing the new SPA based application built on top of Angular.js that I’ve been developing as a weekend project. The app is completely javascript based application with the purpose to replicate GIthub’s web client leveraging Github’s REST based API.

There are couple of special touches that I did which distinguish it from the Github itself:

  • completely different architectural approach (SPA based app driven by the REST API) than the one Github uses (full page reload),
  • completely responsive (optimized for desktops/tablets/mobiles),
  • different approach in presenting repository details (folder/file hierarchy).

 

Enjoy the video and please feel free to provide the feedback! Hope to share it with you soon…

 

Adding i18n support to your Angular Applications


For adding i18n support to your Angular.js based applications you could find angular-translate module to be very useful. This is really good module to use for that purpose.

This post is about using that module as a base and going a bit further by encapsulating all i18n related logic completely into its own separate module with minimal impact to your application’s config method.

About the module

You can find the source code for the module on this repository. Also the example small application using it can be found here.

In order to use url.i18n in your applications you will first need to downlaod and add angular-translate.js as a dependency to your application.

I am usually using bower, so for me it required this 2 things: 1) Adding following line to my bower.json file:

"angular-translate": "~2.0.1"

After that you should be including the library specific files to your index.html page (or whatever root page of your project). This would also mean that you would have copied the content of lib folder within a specific location in your application (that specific location depends on your application structure and the way you are laying out your modules).

    <script src="../lib/index.js"></script>
    <script src="../lib/constants.js"></script>
    <script src="../lib/providers/translation-provider.js"></script>
    <script src="../lib/lang/sr.js"></script>
    <script src="../lib/lang/de.js"></script>
    <script src="../lib/lang/en.js"></script>

I like my modules to have clear files separation hence you’ll see everything in its own file. I find this especially usefull for a large teams. But you could easily use only 1 file and concatenate all my files within it. I usually use grunt for building so I have separate tasks for doing that for production versions.

The next step is to configure your angular.js application (main angular module) to use url.i18n. This means you should add url.i18n as a dependency to your application – something like this:

angular.module('myApplication', ['url.i18n'])

With this you’re good to go with using this module for i18n support within your application. The only thing to do is change your templates and global controller to be able to switch languages. Check out example folder for an example (deployed here).

If you want to set a specific language as a default language you can easily do that by adding following line to your main application’s config handler function (see example for reference):

TranslationProvider.setPreferredLanguage('de');

Your company needs help from an expert?  Feel free to contact me.

 

Links

Building single page apps with require, backbone, Flickr API …


Building single page apps might implicate a lot of tools and technologies. In this post I have provided you with a small single-page application that is consuming public Flickr API service (json based). It renders a list of items retrieved based on the tag search, which are linked to an internal details page. You will find out how you might be using frameworks like

  • backbone.js to try to structure your applications a bit better,
  • require.js to modularize your application code and perform dependency management,
  • grunt.js to enhance your build process,
  • compass  for css preprocessing
  • karma to help you automate your tests running
  • jasmine to help you write your javascript tests

About the application

The application’s requirements can be found within README.md file, but here are some of the things to be done:

  • App consumse a Public JSON API Feed (documentation) and displays the resulting data according to the wireframes (Wireframes-spec.pdf).
  • Should function as a sinigle-page app (SPA)
  • Use responsive techniques to ensure it works on a range of devices
  • Use Backbone for adding a structure to the application (MVC like style).
  • Implement search box where text entered is matched against public Flickr API tags
  • Provide build process for generating production-ready code

Development Process

In the following screencast I will try guiding you trough the app and its source code and explain some implementation specific details.   The video quality is not good at all, but hey you can get everything for free! 🙂 Hope you’ll find it helpful!

Outro

There is so much more that can be improved and implemented here but it is outside the scope of this tutorial, whose only purpose is to help you wrap your head around the ways of configuring these technologies and using them in your everyday work and process of building single page applications.

Your company needs help from an expert?  Feel free to contact me.
 

Links

HTML5 Drag&Drop demo


Drag&Drop API is one of many great things that new HTML5 specs offers.

In this post I have provided you with an example of how you might use that API to create a very basic portal.

About the demo

To see the demo mentioned above, visit this page.

The file dealing with DnD API is called urldnd.js. This file contains a definition of a Portal (URLDnD) class, which attaches Drag&Drop features to registered portal portlets.

Portlets are draggable and may be dropped within each of the portal columns. Portal columns are the containers for protal’s portlets and to be registered as a drop zones I had to add event listeners to certain DnD events. One of the most important handlers is registered in this line:
column.addEventListener('drop', dnd.handleDrop, false);

This is how you make a column react on each portal drop event. So whenever portal is dragged over a column, and dropped inside of it dnd.handleDrop function is executed and it contains the logic of removing the portal from the previous container (column) and appending it to the new targeted container (column).

The moment we start dragging the portlet, the dragstart event would be triggered so in order to catch that event and attach the minimal amount of data to it I am registering the handler to that event in the following line of code:
portlet.addEventListener('dragstart', dnd.handleDragStart, false);

The dnd.handleDragStart function is the place where I am taking the dragged portlet’s id and storing it within the event in the following line of code:
e.dataTransfer.setData('text/plain', this.id);
The reason for doing that is simple – so that at the end, when the portlet gets dropped I could grab the portlet that was dragged and manipulate it accordingly. The above line shows how you might attach some extra information to the event itself.
The code for the demo is very intuitive and straightforward.
There is so much more in relation to the Drag&Drop API that is outside of the scope of this demo and tutorial, but if this can help you get started in any way than my mission is accomplished. 😉
Good luck!

Links

URL Express CRUD Library


A few days ago, as a result of playing with Node, I have created and published an open source node based library called url-express-crud.

The main library objectives are:

  • Quickly expose basic CRUD operations in the application for a concrete model (resource).
  • Make it as flexible as possible, enabling clients (developers) to configure it based on their needs and desires (override resource related templates, make route handlers configurable, …).
  • Make it support content negotiation.

The main motivation for creating this library was to make it possible to quickly provide basic boilerplate CRUD operations for models (resources) that almost every app needs and all with certain level of flexibility in terms of customization that might be required.

However its important to note that the library is its very early phase and there’s a lots of things still to be implemented…

Installation

Just require the library as a dependency in your project’s package.json file:
"url-express-crud": "*"
Than just require it within your project file:
var urlCrud = require('url-express-crud');

And you can start using the library.

Usage

In order to help you understand how to use the library I have created a demo application.

The example application’s source code can be found in the separate github repo located here.

I’ve record a short screen-cast of me going though the process of using the library and creating the example application mentioned above. For now in order to provide you with the video pls contact me here, but if you are patient it will be soon uploaded to this blog.

Links

Playing with google maps api


Few months ago I had a need for building a form that has some address related logic built into it.

The aim was enabling the users to quickly fill in their address form fields, in that manner that they would be interpreted correctly for the persistence layer, meaning all of the address components would be extracted correctly (like country region, city, ….) and placed in appropriate input fields.

So I was playing a bit with the Google Maps API and here is what I ended up with in the initial phase (a thing that I can share).

Please note that the only purpose of this tutorial is to try to expose some code that might hopefully help you learn some parts of that API and maybe help you getting some idea how to address your own problems (in this area).

Brief Code overview

index.html page contains all the html markup that the demo needs.

You will find that I’ve been using Twitter’s Bootstrap framework for styling the demo page.

The JavaScript dependencies are:

  • Google Maps API v3:
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&language=en"></script>
  • jQuery:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  • Twitter Bootstrap library:
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  • My custom utility functions for dealing with Google Maps API responses and address form fileds:
<script type="text/javascript" src="../url.google-maps-utils.js"></script>
  • The main demo script, bootstrapping everything:
<script type="text/javascript" src="script.js"></script>

Demystifying source files

I have created documentation for my custom JavaScript files and you can find them here:

Links