Problems & Solutions. or just how-to.

Main menu

Monthly Archives: April 2013

Introduction

Yeoman is a very good framework for doing three things 1) scaffolding 2) dependency management and 3) build, preview & test. Yo is the component which does the code scaffolding and we are going to look a bit deeper on how to tune the generators to suit our need and structure.

Installing Yeoman and Git Protocol Problems

When dependencies are pulled via github, the protocol followed is git:// and is blocked by firewall at few places. In order for that to resolve, you need to make sure git uses http(s) instead of git. So, please execute the following line to make sure GIT follows HTTP protocol.

git config--global url."https://".insteadOf git://

After the above steps you should not have problems when using npm install or bower install.

When you install angular generator using “npm install angular-generator”, it may not installed in the actual yo library for users in Mountain Lion (10.8) or greater. So, if you execute the command “yo angular:directive thing1″, you might get an error saying that generator is not registered. To fix, please execute the following commands.

cd/usr/local/lib/node_modules/yo
npm install generator-angular

As you can see from above, it creates two things: 1) the directive itself and 2) the test case for the directive. This is where Yeoman’s strength is.

Modify Generator Behavior

Ok, now that we have scaffolded out a directive, how do I make sure that we scaffold out in a proper structure that we wanted to? The answer is not simple and we have to modify generator’s source to achieve that. I know, this is extremely dangerous, but the path and other stuffs is “hardcoded” in the generator code. Before we dig deep into the generator code, please understand that the generator code is located at: /usr/local/lib/node_modules/yo/node_modules/generator-angular.

The line this.appTemplate generates the directive file inside script/directives folder. Now we wanted to pass in an extra argument to accomodate module parameter, so that the file gets dropped at scripts/module_name/directives folders (this is just an example and not a final structure). You need to modify the code above like this:

Introduction

This tutorial will help you learn many things – how to use MongoLab API for CRUD operations, how to get browser info and version and how to use google charts. What we are going to achieve is, to create a real-time page which keeps updating the hits with browser info and also renders the page with the stats.

Pre-requisite

You should at least know what MongoDB is and the flexibility it offers. You can read it right here. MongoLab is the cloud API provider for MongoDB. It also provides a REST interface for the same. Opening a account is free and so I would advise you to get one in case if you wanted to try MongoLab in your small projects. Do NOT try and use the key I used in my JavaScript. It’s not going to cost me anything because its a free account but again, I would have to manually login and clear those items if you use my ID for your demo apps :).

Storing browser info

The idea is to figure out the browser name and version and if it is already in DB, just increment the hit number else insert a new row.

Now you do have browser name and version after the above steps. The task is to figure out whether the row is already present in DB or not. Querying the DB is easy with JavaScript but it is a shame that you can’t do that for commercial website because people will use the key to query your DB directly.

Introduction

It’s been sometime I’ve been here. So, I will just get started off. Today, I’m going to write about how to develop tic-tac-toe using AngularJS. The demo is more to understand the possibilities and simplicity of the framework.

What’s needed in the UI

9 boxes arranged in a 3×3 fashion like below:

Each of these boxes are divs and each div is binded to the data behind as usual

Now, the logic is to make the JS think engine. It’s easy when you follow the strategy mentioned in wiki.

AI Algorithm:

Win: If the AI has two in a row, it will place a third to get three in a row.

Block: If the [opponent] has two in a row, the AI will play the third to block the opponent.

Fork: Creation of an opportunity where the AI has two threats to win (two non-blocked lines of 2).

Blocking an opponent’s fork:

The AI will create two in a row to force the opponent into defending, as long as it doesn’t result in them creating a fork. For example, if “X” has a corner, “O” has the center, and “X” has the opposite corner as well, “O” must not play a corner in order to win. (Playing a corner in this scenario creates a fork for “X” to win.)

If there is a configuration where the opponent can fork, the player should block that fork.

Center: AI marks the center. (If it is the first move of the game, playing on a corner gives “O” more opportunities to make a mistake and may therefore be the better choice; however, it makes no difference between perfect players.)

Opposite corner: If the opponent is in the corner, the AI plays the opposite corner.