Easy Javascript plugin development using gulpjs

I’ll be showing how to setup a build environment suitable for developing a sophisticated JavaScript plugin

Build System: Gulp.js

We don’t want to end up writing all the code in one huge JavaScript file, so using gulp.js actually gives us  lots of features:

  • Modularizing our code in multiple files and concating/minifying it at run time
  •  Gives us the ability to write our code using higher level languages like CoffeeScriptSass , etc.. and will compile them at run time
  • A local  web server to to host our plugin and the styling code ( sometime that’s needed if you have different development and deployment workflows )
  • Enable sourcemaps while developing
  • Use watchers to recompile files on change & also for browser reload

Continue reading


How to call onRouteChange and onRouteExit in Ember.js

A two scenarios that I always encounter while developing an ember app are:

  • When the user is in edit/create page and is editing an ember model, I want to rollback that model when the user clicks on any link on the page
  • I want to globally hide any error message shown when the route changes

Ember actually has features to make you implment these scenarios but its not exactly clear on how to do it.

Continue reading


Ember.js Custom Select with Change Event Callback

We want to implement basic change callback functionality on a Ember Select , sadly its not part of the ember select view, if you searched about how to implement it, most of the answers would be: make an observable, the hard part if you want to save data when the select changes, that would fire the observable indefinitely and to work around it you would have to hack it
Continue reading


Redirect to the original requested page after login using AngularJs

What we want to do is that when the user tries to go to a page and he is not logged in, we want to redirect him back to that page after he login successfully There is two different scenarios that we want to handle

  • The user is not logged in to our site and tries to access it (no cookie stored)
  • When the user is already in our site and he makes a request to the server and the the server  returns unauthorized (401) (in case the user is logged in and the cookie times out)

Continue reading


AngularJs Scroll to element using directives

I want to implement a simple concept using angular, scrolling to a specific area of the page using a directive, I found myself needing this in a pagination example, I want to scroll to the top of the list when the user clicks on next page

Whenever I am trying to implement a directive like that I always try to first write how I would want to represent it in the html.

Continue reading


How to do Authorization and Role based permissions in AngularJs

We will be adding 3 Layer to implement Authorization in our app

  • UI manipulation (Showing or hiding part of the screens based on the user permission)
  • Routing ( When the user access a route that he doesn’t have permission to will redirect him to an error  route )
  • Http Interceptor (We will Setup an interceptor that will check when the server returns 401 or 403  and will redirect the user to an error route)

Continue reading


AngularJs Good Unit Test Structure For Controllers & How to test ajax code and Promises

The poorly the structure is made for unit testing the more and more complected it will take to write a unit test for a simple functioning piece of code , and it will feel that your fighting your way against testing, instead it should feel more fun! So i’ll be showing a structure that worked for me very well when working with angular controllers Before going deep with the structure, i’ll be using

  • Jasmine (unit testing)
  • Jasmine spies (mocking)
  • karma (because its awesome)

Continue reading


Build AngularJS Grid with server side paging, sorting & filtering

I will be showing how to build a grid that supports server side paging, sorting & filtering

My goal with this  is that i didn’t want to implement a more complex approach that will be hard to customize later, so what i ended up doing is implementing a solution that will show a list of data in a table like structure and implement a reusable solution for paging, sorting & filtering

Continue reading