Saturday, November 30, 2013

Javascript Performance Tips and more

Javascript performance tips

Designer tips for performance

Doug Crockford  the "Good Parts" Talks [1] [2]

javascriptjabber with scott hanselman , JSHint

Stack, Queue, Linked List using Javascript

Semextex GUI components

The jiggle effect using Javscsript

Javascript library trends

Javascript Fat arrow

JS implementation of excel like functionality

To Hell with JQuery

Some Good iOS7 resources

The site by Ralf Ebert has  some good basic introduction for iOS. Of course, I have to use chrome translate to read it in english.

cocoanetics - You can make any iOS device (>= iPhone 4S) and any Mac (>= late 2011) sporting a BTLE chip into an iBeacon.
An iBeacon is identified by 3 values: proximityUUID, Major and Minor. The first being a UUID and the two latter being two 16 bin integers. You can construct a CLBeaconRegion in 3 levels: only UUID, UUID plus Major, UUID plus Major plus Minor.
AutoLayout - rather than the master / details , gives the ablity to edit details inline $39

Saturday, November 23, 2013

Forkin and Pushin

working tree - your unstaged files
index - staged files
snapshot - in source control

git status -s

git log

 see hash of snapshot contents. each commit get new hash, usually can abbreviate hash using first 7 chars of the hash

git show <hash>

git gui

git log --pretty=raw or oneline

git checkout restores the files from the index

git diff 7char1...7char2 or git log -p

git tag labelname1 7char1 gives a tag to a commit

use a branch to create changes seperate from our main changes (i.e. master)

branch is a label to a commit - git branch -v

git branch newfeature creates a branch

switch between branches using git checkout <branchname>

if you are positioned on master you can do git merge newfeaure

gitk can be entered at command prompt

remotes is connection from one git repository to another

git remote -v shows connections

push your master to git hub (i.e. origin) : git push -u origin master

merging happens automatically when pulling from remote

In GitHub , What is a Fork
At some point you may find yourself wanting to contribute to someone else's project, or would like to use someone's project as the starting point for your own. This is known as "forking"

Pull requests let you tell others about changes you've pushed to a GitHub repository. Once a pull request is sent, interested parties can review the set of changes, discuss potential modifications, and even push follow-up commits if necessary.
There is the git-flow . See talk

Tuesday, November 19, 2013

Git up and go

Today I took in the Git Foundations training by Tim Bergland at the Witherspoon building (located at 2810 Cates Ave. on the  NCSU campus).  I can confirm if you park at 2815 Cates Ave, you might expect a parking violation warning on your windshield.

On learning about why you have to invoke the add command twice on successive writes to the GIT repository.  why add twice??? three stage thinking (why u add everytime) :

working (tree)  --- edit   ->  
staging (i.e. status tells just YOU add/remove to empty shopping cart) ->
history (commit - together)

On the git log and how to create a git alias  (i.e. git lol)

provides date, author, 40 char commit id
C:\gittrain>git config --global "log --graph --decorate --oneline --all"

Learned that branching is giving the "commit you are on" a label. You can only be on one branch at a time, and by default, you are on master 

C:\gittrain>git branch
* master

create a branch
C:\gittrain>git branch feature
Now on Branch feature
C:\gittrain>git lol
* 5390c82 (HEAD, master, feature) more books info
* 877cb2e Initial commit

Add file to branch staging
C:\gittrain>git add raven.txt.

Commit file
C:\gittrain>git commit -m "add brnch"
[master 82168b5] more barnch
 1 file changed, 3 insertions(+), 1 deletion(-)

switch to branch 'feature'
C:\gittrain>git checkout feature

Switched to branch 'master'
C:\gittrain>git checkout master

merge feature into master
C:\gittrain>git merge feature - m "merged"

delete feature branch (branch is just name for a commit)

C:\gittrain>git branch -d feature

The transcript of the class can be found here.

Saw this link today on Git Hub evolution by Zach Holman . Also, a link on effective-git-branching-and-release-management

Friday, November 15, 2013

Javascript Tools Bower, Grunt, Yeoman

bower is a package manager for installing client-side libraries in your server-side environment . This post has a good introduction.
bower is a package manager for client side technologies. It can be used to search , install , uninstall web assets like JavaScript , HTML , and CSS. It is not an opinionated tool and leaves lot of choice to the developers. There are various tools built on top of bower like YeoMan and Grunt
C:\Users\dmbl>npm install -g bower

Bower : "offers the opportunity to search for packages you may need in your project (for example,bower search underscore to find Underscore.js) and install them in your project (for example, bower install –save underscore"

command line build tool. It can help us automate repetitive tasks. We can think of it as JavaScript alternative to Make or Ant. It can perform tasks like minification, compilation , unit testing, linting, etc.
gruntjs-workflow : "Grunt.js is a fantastic task-based command line tool written in JavaScript on top of the wonderful Node.js platform. You can leverage Grunt.js to script away all of your grunt work"
grunt tasks : "Grunt JS is a task runner, which means it is designed to run tasks for you. It’s your little slave bot, and you can tell it what to do, and when to do it!"

As stated on their website, Yeoman 1.0 is more than just a tool. It's a workflow; a collection of tools and best practices working in harmony to make developing for the web even better
AKA Yo - introduction to yeoman yo

C:\Users\dmbl>npm install -g yo

Related posts:

Intro to Angular, Yeoman, and Chrome Apps (Revised)

Wednesday, November 13, 2013

Node.js under the hood

In ten years of java development, I have mainly been involved with stateless  "pull" technologies:
The term connectionless is also used to describe communication in which a connection is made and terminated for each message that is sent. IP is connectionless as well as stateless.

With Node.js, it is a platform that fills a particular need :

  • don’t want to use Node.js for CPU-intensive operations 
  • Node.js operates on a single-thread, using non-blocking I/O calls
  • capable of handling a huge number of simultaneous connections with high throughput, which equates to high scalability
The main idea of Node.js: use non-blocking, event-driven I/O to remain lightweight and efficient in the face of data-intensive real-time applications that run across distributed devices.
Now,  that last phrase, Non-Blocking I/O. You will never hear anywhere, from anyone, that Node.js is non-blocking.

Further details:
avoiding the need for OS threads by simply refusing to wait. Rather than making blocking IO calls, wherein the thread stalls waiting for the call to return, almost all IO calls in Node.js are asynchronous, wherein the thread continues without waiting for the call to return. In order to handle the returned data, code in Node.js passes callback functions to each asynchronous IO call. An event loop implemented within Node.js keeps track of these IO requests and calls the callback when the IO becomes available.
It uses event driven concurrency

five talks learn more nodejs

Sunday, November 10, 2013

So it begins, on to NodeJs

I have been hearing for NodeJs for over a year now and I haven't gotten around to learning it. To me, the little I know about it, the value to me is that you don't need a full blown app server to serve up for a pretty straight forward web page. The fact that the code is written in  java script is neither here nor there,  as I can easily learn a new language if that is what is required.  I have been saving this link for a while. The nodejs download page says:
Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.
Within 5 minutes, i am able to execute npm at the command line.
npm -h quick help on  <cmd>
npm -l display full usage info 

npm faq commonly asked questions
npm help  <term> search for help on  <term>
npm help npm   involved overview

Now, that you have reached the node '>' prompt, you can execute any JavaScript code by entering your code in this command line mode. However, you don't have access to everything you do in a web page in command line mode.

More resources and info:

Friday, November 8, 2013

Nexus 5 Googlefied, Angular in a Day, Silicon Valley or NYC?

Nexus 5 is Googlefied :
Of course, there's nothing wrong with turning the Nexus from the premiere Android phone into the Google phone, but it does change things for Google and for the rest of the Android ecosystem. KitKat is about "polishing," "refining," and providing a "long tail set of features," but it's also about honing and sharpening. The result is a new edge, Google's services, which reach their highest and best form on the Nexus 5.
Nice site such as how you can tell if you have internet access from javascript.

Learn Angular in a day

Boostrap3 experience

Silicon Valley or NYC for tech ?

Thursday, November 7, 2013

Harvard Building Mobile Applications Course Week 3 iOS6

On to the week 3 lecture transcript  and video of the Harvard Building Mobile Applications Course . The lecture slides , code slides as pdf , and code supplement the presentation.

UI Kit : API for UI related things


  • Empty Application
  • Single View Application
  • Utility Application
  • Master-Detail Application 
  • Tabbed Application
Program #1:
program flow : main.m -> AppDelegate:
@class ViewController - forward declaration to avoid circular references

didFinishLaunchingWithOptions method  :
self viewController  given ViewController class
self window rootViewController given the self viewController

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
19. {
20. self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
21. self.viewController = [[ViewController alloc] initWithNibName:@"ViewController" bundle:nil];
22. self.window.rootViewController = self.viewController;
23. [self.window makeKeyAndVisible];
24. return YES;
25. }

Program #2:
Master-Detail application  example -see View Controller types:

The App Delegate header file which provides a navigation controller:
@interface AppDelegate : UIResponder <UIApplicationDelegate>
16. @property (strong, nonatomic) UINavigationController *navigationController;

example created a instance of class MasterViewController in AppDelegate.
- The root controller here is navigation controller  with  master controller:
- self navigationController which is a UINavigationController which is initialized with MasterViewController instance

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
18. {
19. self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
20. MasterViewController *masterViewController = [[MasterViewController alloc] initWithNibName:@"MasterViewController" bundle:nil];
21. self.navigationController = [[UINavigationController alloc] initWithRootViewController:masterViewController];
22. self.window.rootViewController = self.navigationController;
23. [self.window makeKeyAndVisible];
24. return YES;

MasterViewController -> UITableViewController -> UIViewController

Te header file shows MasterViewController provides a detailViewController:

@interface MasterViewController : UITableViewController
18. @property (strong, nonatomic) DetailViewController *detailViewController;
20. @end

The implementation of MasterViewController has a init method for nib:
- the method is passed from the AppDelegate: @"MasterViewController" bundle:nil];
- The top of the navigation list shows a title of Master

22. - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
23. {
24. self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
25. if (self) {
26. self.title = NSLocalizedString(@"Master", @"Master");
27. }
28. return self;
29. }

- method viewDidLoad invoked when the particular view loads such as adding things to view
- method numberOfSectionsInTableView is how many sections in table
- method numberOfRows inSection is how many entries in section
NSIndexPath is row and section
UIBarButtonSystemItemAdd  constant of enum  of UIBarButtonItem
UITableViewCell is the cell in view
- When view loads adds edit button after calling parent and drags item into navigation bar

- (void)viewDidLoad
32. {
33. [super viewDidLoad];
34. self.navigationItem.leftBarButtonItem = self.editButtonItem;
36. UIBarButtonItem *addButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:@selector(
37. self.navigationItem.rightBarButtonItem = addButton;
38. }

sections are grouping of rows.
 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
53. {
54. return 1;
55. }

how many rows

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
58. {
59. return _objects.count;
60. }

add new row (method from the selector when creating nib). Index path is section and row.

- (void)insertNewObject:(id)sender
41. {
42. if (!_objects) {
43. _objects = [[NSMutableArray alloc] init];
44. }
45. [_objects insertObject:[NSDate date] atIndex:0];
46. NSIndexPath *indexPath = [NSIndexPath indexPathForRow:0 inSection:0];
47. [self.tableView insertRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationAutomatic];lectures/3/src3/MasterDetail/MasterDetail/MasterViewController.m
48. }

Cell population:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
63. {
64. static NSString *CellIdentifier = @"Cell";
66. UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
67. if (cell == nil) {
68. cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
69. cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
70. }
72. NSDate *object = _objects[indexPath.row];
73. cell.textLabel.text = [object description];
74. return cell;
75. }

Program #3 (storyboards)
storyboard - simply user interface process
started with utility application
Looks like 2 nibs same time with transition in middle (known as segue)
specify in code what you want to make happen
Right side of scene you can see transition details : identifier: ShoAlternate, type is Modal, FlipHorizontal
There is an action on button
inform Destination Controller that delegate will be self

Program #4 (Gestures)

Added the images to the project
Have the UIImageView in the nib

@interface ViewController ()
// private properties

@property (nonatomic, readwrite, weak) IBOutlet UIImageView *imageView;
@property (assign, nonatomic, readwrite) int index;
@property (nonatomic, readwrite, strong) NSArray *robs;

// private methods
- (void)alertView:(UIAlertView *)alertView didDismissWithButtonIndex:(NSInteger)buttonIndex;
- (void)handleLongPress:(UILongPressGestureRecognizer *)sender;
- (void)handleSwipe:(UISwipeGestureRecognizer *)sender;



- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
        // prepare Robs
        self.robs = [[NSArray alloc] initWithObjects:@"rob1.jpg", @"rob2.jpg", @"rob3.jpg", nil];
        self.index = 0;
    return self;


- (void)viewDidLoad:

// load image
    self.imageView.image = [UIImage imageNamed:[self.robs objectAtIndex:self.index]];

- (void)handleSwipe:(UISwipeGestureRecognizer *)sender
    // handle swipe
    UISwipeGestureRecognizerDirection direction = [(UISwipeGestureRecognizer *)sender direction];
    switch (direction)
        // ignore up, down
        case UISwipeGestureRecognizerDirectionUp:
        case UISwipeGestureRecognizerDirectionDown:
        // left
        case UISwipeGestureRecognizerDirectionLeft:
            self.index = (self.index + 1) % [self.robs count];
        // right
        case UISwipeGestureRecognizerDirectionRight:
            self.index = (self.index + [self.robs count] - 1) % [self.robs count];
    // update Rob
    self.imageView.image = [UIImage imageNamed:[self.robs objectAtIndex:self.index]];


Gestures -UI*GetsureRecognizer .i.e. UIPinchGestureRecognizer


NSDefaults - interface for storing persisently, settings, configurable items
SqlLite store using api, written in c
xml, json
Core Data
Property Lists - dictionary of strings , plist files - xml, key value pairs:

PList program

Wednesday, November 6, 2013

Who Knew - Coding competitions have gone mainstream

I never have been one for certifications or test taking. I do enjoy challenges. Such as it gets you focused at the specific skill at hand. For example, I have done fitness challenges over the past few years. Also, I am a regular at playing fake sports challenges known as Fantasy Sports. Anyway, with all these self learning resources available on the web it was bound to happen. Coding challenges. A sites in that space is Top Coder what even has resources to practice up on their wiki . Or how about javascript under pressure ? Moreover, Stanford has a course Introduction to Competitive Programming Contests, and Google has codejam .

Monday, November 4, 2013

Conferences, Conferences,...

Do you remember a time when a conference like Java One was the only game in town?  Luckily in this day and time, the options of enhancing your skills and learning about new trends and techniques in software industry is plentiful.  Especially with the web, the software skills of today are transferable across many different companies and industries. It's just fun learning new things.

javascript online summit

NCDEVFEST conference

Sunday, November 3, 2013

Harvard Mobile Course Lecture on iOS6 MVC

I finally got around again to the Harvard Building Mobile Applications Course, finishing up the lecture #2 on the Apple iOS6  MVC material. The lecture (pdf) and souce code (pdf) ,The entire zipped up code can be found here.

this lecture goes over the basics of a Single View Application (MVC) implemented with a nib , along with introducing the UIAlertView

XCode - New Project -> new empty application (delegate and window), MasterDetailApplication, SingleViewApplication, Tab Application

main.m : function - it returns  UIApplicationMain() which passes in reference to AppDelegate

#import <UIKit/UIKit.h>
#import "AppDelegate.h"
int main(int argc, char *argv[])
@autoreleasepool {
return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));

AppDelegate.h file:
inherits from UIResponder  - conforms to UIApplicationDelegate protocol
- has properties UIWindow *window  & ViewController  *viewController 

#import <UIKit/UIKit.h>
 @class ViewController;
 @interface AppDelegateUIResponder <UIApplicationDelegate>
@property (strong, nonatomic) ViewController *viewController;
@property (strong, nonatomic) UIWindow *window;

AppDelegate.m file: 
AppDelegate (.m file) - has EVENT callbacks:

  • applicationWilResignActive ()
  • ApplicationDidEnterBackground()
  • applicationWillEnterForeground()
  • applicationWillTerminate()
  • ApplicationDidBecomeActive()
  • didFinishLaunchingWithOptions()

#import "AppDelegate.h"
#import "ViewController.h"
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
self.viewController = [[ViewController alloc] initWithNibName:@"ViewController" bundle:nil];
self.window.rootViewController = self.viewController;
[self.window makeKeyAndVisible];
return YES;


UIKit - ui sdk
UIView - something on screen (the V)
UIViewController - (the C but called ViewController)
plist is preferences files (xml).

- circle is the event loop : sit waiting for you to do something or something external
- main function calls UIApplicationMain() function
- first initialization such as examples such as top scores, reference items, etc application:willFinishLaunchingWithOptions() call back
- restore ui state if you paused for example
- final ui initialization application:didFinishLaunchingWithOptions() callback
- activated app, wit for user to do something applicationDidBecomeActive ()callback
- handle events

program running - an apple thread can interrupt go sleep (i.e phone call)

police battery life better, may get notifications (i.e.) but have to load app

built in iOS mail more tightly coupled with the operating system

nonatomic - dont bother thread safe code, atomic - multiple threads - i.e. printing, readonly - getter, no setter

 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
. {
// refer to the window property (i.e UIWindow), allocate it, init with arguements, call mainScreen()
// bounds returns dimensions
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
self.window.backgroundColor = [UIColor whiteColor] ;
// visible and key means important and return success
return YES;

AppDelegate (.h file) - inherits from UIResponder  - conforms to UIApplicationDelegate protocol
- also has property (strong,nonatomic) ViewController * viewcontroller
- ViewController inherits from UIViewController, viewDidLoad() for any setup after when controller is loaded, didReciveMemoryWarning()

self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
// @ViewController : associate Nib file with Controller
20. self.viewController = [[ViewController alloc] initWithNibName:@"ViewController" bundle:nil];
// the most important controller
21. self.window.rootViewController = self.viewController;
22. [self.window makeKeyAndVisible];
23. return YES;

SingleViewApplication , add text field (inspector shows UITextField), add button

Create an IBOutlet property to connect GUI action to Controller UITextField

Nib: hold file owner(who owns the view) and click control (extension cord) to nib file textfield (64bit memory address), gives few outlets available, select textfield

need cable from nib back to code (opposite of outlet is IBAction)

- (IBAction)go:(id)sender

have to wire from nib to this code (ctrl from button to code i.e. file owner) go methed is presented for selection (touch up inside shown if you ctrl click button afterward)

implement the go method in .m file

- (IBAction)go:(id)sender {
    // wired up text field to action did 'end on exit' to owner in nib file
    NSLog(@"here %@", self.textField.text);


[textField resignFirstResponder]

keyboard input  - Go - alertview

Here are code take aways:

The UI Alert view

On entering text in the text field and clicking go button we get an UI Alert:

- (IBAction)go:(id)sender {
    // wired up text field to action did 'end on exit' to owner in nib file
    NSLog(@"here %@", self.textField.text);
    // put text field away
    [self.textField resignFirstResponder];
    NSString *textToDisplay = [NSString stringWithFormat:@"here %@", self.textField.text];
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Hi: " message:textToDisplay
                                             delegate: self cancelButtonTitle:@"Bye" otherButtonTitles: nil];
    [alert show ];

As far as NIB file:

the button had an event of 'Touch Up Inside' with file owner of go
 the text field had an event of 'Did End On Exit' with a file owner of go , along with an Outlet of delegate.

As, the controller has a protocol as follows:
@interface ViewController : UIViewController <UIAlertViewDelegate>

Moreover, the controller had to implement this method:

- (void) alertView:(UIAlertView *)alertView didDismissWithButtonIndex:(NSInteger)buttonIndex{

    self.textField.text = nil;


Thus,  you enter chars in the text box, click go button, get a UIAlert presented, whereby the keyboard goes away via the call to resign first responder. At that point, the user is able to click the button on Alert and then it resets the text field.

Saturday, November 2, 2013

Got a IPhone 5S Silver

Well, I am eligible for my next phone on November 1 of 2015. As, I purchased an IPhone 5S on my lunch hour yesterday. I scouted my choices over past few months and both Verizon and AT&T were in play. As far as what phone I was considering, it was always going to be an IPhone. As, I had gone down the Android path before. I had a Samsung Galaxy I in 2009 and the battery life was grueling . For me, the phone plans between the two carriers were relatively identical.

I also got this Mophie Juice Pack Helium case and charger for extended battery life.