Monthly Archives: September 2014

Angular JS : Best Practices

Controller Best Practices

It is not OK to manipulate the DOM inside the controller.

Its ok to manipulate the DOM in a service. But you should be careful when doing this. Usually it is wrong.

DOM manipulations should only be done inside the Directive or sometimes inside a service.

Minification in JavaScript files : Angular uses reflection when dealing with directives and controllers. Since Angular handles parameters in such a way it is important that we write our Angular controllers using the right syntax.

Continue reading

Dell : Recommended Items

Project : Recommended Items –

My task was to make the call to a webservice and accept the JSON response. I then fed that response through some Angular templates and Razor views in which I had constructed. I built a custom paging feature that accepts swipe gestures as well as click events. This feature leveraged a custom themed Bootstrap CSS grid and styles. Angular JS as well as jQuery and latest RAW javaScript were the tools used to create the look and feel of this feature. This feature was completed by a two man team.

Continue reading

Dell : Compare Systems

Project : Compare Systems-

My task was to make the call to a webservice and accept the JSON response. I then fed that response through some Angular templates and Razor views in which I had constructed. The task of displaying technical features of each system or accessory item was handled in a responsive layout. The use of Angular JS, custom themed Bootstrap Grid and CSS was leveraged to provide the look and feel of this feature. This was completed within a four man team.

Continue reading

Google Polymer – Advanced : Create a Custom Element

Getting Started

This tutorial I will walk through the code and explain each item and its importance. This tutorial is not to teach you CSS or basic HTML. This is an example of how to use Google’s Polymer to make a complex custom element.

What this tutorial covers

  • Setting up a custom Polymer element.
  • Using Polymer’s Paper Elements
  • Using some Polymer Core Elements. Both UI elements and Functional Elements (core-ajax)
  • I will touch base a little about css3 transitions

Continue reading

Getting Started with Polymer

cloud 9 idegithub
Google Polymer

In this tutorial we will get familiar with Google Polymer. Learn the basics on importing HTML files, and use the custom polymer tags. Also, touch a little on implementing the paper style polymer elements and use Bower to get it all rolling within the Cloud 9 web based IDE.

Note * Cloud 9 IDE and gitHub are free accounts.
As a UI developer, I highly recommend creating an account for gitHub and keeping it up to date with what you have learned and special projects.

Continue reading

In depth JavaScript : Apply / Call

Why use Apply or Call?

Call takes the value to be used as the “this” object as the first object in the parameter list. The rest of the parameters will come after the first object and separated by commas.

callFunction.call(thisObjectPassedIn, param1, param2)

Apply is just like call but the second parameter is an array of parameters.

applyFunction.apply(thisObjectPassedIn, [param1, param2])

In depth JavaScript : Callbacks

JavaScript – Object based language

Functions are OBJECTS

var myFunction = function(){
  alert('test');
}

function doFunction(myFunction){
  //do something
  myFunction();
}

Things to understand about functions

  • functions can be stored as a variable
  • functions take parameters that can be variables
  • can be created by functions
  • can be returned from functions

Continue reading