Cordova Command Does Nothing on Ubuntu 14.04 LTS

Hi,

If you install Apache Cordova and find running the Cordova command does nothing and rule out all the usual suspects (not installing Ant, not installing Java, clearing the npm cache etc.) the problem is that the cordova script references node instead of the nodejs command. Changing it doesn't help unless you change all the scripts.

Run which nodejs and which node and you will see the problem

See this post for a description:

http://stackoverflow.com/questions/22457834/what-is-the-difference-between-node-vs-nodejs-command-in-terminal

What needs to be done is to symlink the /usr/sbin/node to the /usr/bin/nodejs file . See the following for a description of the problem.

http://stackoverflow.com/questions/22457834/what-is-the-difference-between-node-vs-nodejs-command-in-terminal

Hope this helps someone

Love the Stateless Nature of the Web and Be Happy

Hi,

(This is a technical article about the history of web programming. It may prove interesting to a non-programmer, however.)

The stateless nature of the web is the key to happiness as a developer.

By stateless, I mean that one web page without effort on the part of the programmer (or effort on the part of the framework the programmer is using), does not remember or recall anything when you go to the next web page.

(HTTP is the foundation for web programming, not Framework A or Language B or Abstraction C)

Most programmers did not become programmers to do "plumbing" or "wiring". Most programmers have passions like solving deep technical problems or algorithms or just getting things to work. Most problems do not like solving trivial issues. "Hooking things up" for example, moving data from point A to point B is not why most programmers got degrees or experience or spend their hours late hacking away. But it is exactly the thing to embrace, to master and to be happy with for professional success and personal satisfaction.

And indeed, frameworks and platforms attempted to abstract away the plumbing and mundane tasks and impose a stateful model to increase programmer productivity and still do. For example, the ASP.NET Webforms technology abstracted away the nature of the web. It continued and continued and continued until Microsoft saw the light and created ASP.NET MVC. MVC isn't new pattern. It's been around for decades (or so I've been told). But Microsoft abandoned its page lifecycle model in favor for the loosely coupled MVC model because they finally saw the light.

Moving data from point A to point B is exactly the key to happiness as a (web) developer in every way. Accept the stateless nature of the web as the fundamental problem, and all the fun and wonderful things happen to your life and career.

Those who embraced the stateless nature of the web, and did so from top to bottom, faced success in the past fifteen years. Those who ignored the stateless web, suffered, unless they were lucky. One obvious example is MySpace versus Facebook. ASP.NET Webforms is great, and was good for its time. It allowed COBOL or C programmers to transition to web programming with very little effort or investment of time upfront to learn but more importantly accept the nature of the Internet.

(Courtesy of Google Trends)

But we all know what happened to MySpace. This is not a knock on Microsoft at all. I happen to like and love Microsoft, and like and love Linux as well. But, eventually Microsoft arrived to the same conclusion that everyone else did; that the stateless nature of the web can only be avoided so long until you pay the price.

No matter what frameworks come and go, no matter what technology comes and goes, the web will always be stateless. You've got a few choices.

• Fight this. Draw a line and refuse to accept this, much less like it. Ignore how the Web works and the Internet works. Use frameworks, use abstractions, use layers, use everything and anything to ignore the fact that you need data to move from point A to point B but more importantly understand how that works. One day, the world will catch up (if it hasn't already). Out of all the options, this is the only one which ultimately leads to failure 100%. Better to get another career.
• Fight this, but in an old fashioned way. This means mingling the client-side and server-side together to the point moving data from point A to point B is trivial. For example, avoiding strict Model-View separation and rendering everything all at once so everything is accessible to you all at once. An example of this is using technology which mingles the model and view, for example PHP, or the old ASP.NET Webforms. If you can handle spaghetti code or messy code, this is the way for you.
• Fight this, but in a modern way (2015). This means using modern or cutting edge techniques like client-side JavaScript applications (so-called single page JavaScript applications). Bring order to chaos with frameworks like Backbone.js to keep data squarely on the client side except when absolutely necessary. But eventually, you will need to move data to the server. The problem is just being pushed off until later.
• Accept this. Work the way the Web was intended. This can take several forms.
• Create a mini-framework to move data from point A to point B. This does not have to start from scratch. For example, you could make AJAX requests with jQuery instead of raw JavaScript (and should). The key point is to not depend on state when moving between webpages. The disadvantage of this approach is 
• Use someone else's gargantuan framework to move data from point A to point B. Use only the features you want, when you want them, and keep an eye on performance. However, the risk is one day the framework is obsolete, or the framework's designers or implementers don't have the same vision for you or your best interests at heart. 
• Work at a very fundamental level right with bare HTTP. Become a master at DOM manipulation, become a master at JavaScript and learn the cross-browser differences (or at the least have caniuse.com handy). Working at this level, you will never become dated or obsolete. The problem with working at this level is speed. Can you create deliverables as fast as the guy who uses Framework of the Day to crap things out faster than you can blink? 

So, there are many choices available for those who want to develop for the web. Which one will you choose? Which one will make you happy? That is a question only you can decide.

MySQL Stored Procedure Not Using IN variable

Hi,

I came across a trivial problem in MySQL today. I hope this helps someone (should apply to Oracle and MS SQL as well).

When defining a MySQL stored procedure and executing it, instead of the correct result set I got all rows of the table.

DELIMITER //
CREATE PROCEDURE testproc
(
  IN id INT
)
BEGIN
  SELECT *
  FROM `Test`
  WHERE `ID` = id;
  END //
DELIMITER ;

On closer inspection in phpMyAdmin and fooling around with the definition of the stored procedure, I discovered the issue. The column is called id, and of course id is always equal to id. It doesn't resolve to the IN variable id.

On further thought, this makes sense. Scope should be the smallest possible, and if one defines an IN or OUT or INOUT variable the same as a column name, there be dragons.

See the following for more information:
https://dev.mysql.com/doc/refman/5.7/en/local-variable-scope.html (local variables)
https://dev.mysql.com/doc/refman/5.1/en/set-statement.html (session variables)

PyCharm Interactive Command Line / Debugger

Hi,

Didn't find this on Google so here it is.

If you are looking for the Interactive Command Prompt when you are debugging for the PyCharm Python IDE Community Edition (the open source free version) go to Tools -> Open Debug Command Line. Somewhat hidden since you would expect it to be under the Debug menu.

Other answers I found told me to click on a non-existent icon on the Debug Toolbar, which either doesn't exist in the Community Edition or was moved / removed.

Hope this helps someone.

jQuery AJAX 500 Error with ASP.NET MVC

Hi,

Just wanted to drop a quick note for anyone using jQuery with ASP.NET MVC and experiencing 500 Internal Server errors when debugging with the browser's network monitoring feature.

In order to send a proper AJAX call with jQuery's $.ajax function, you must use JSON.stringify . Suppose you are sending one field to the MVC backend.

var data = $('#inputBox').val();
$.ajax({
  method: "POST",
  url: "@Url.Action("ActionName", "ControllerName")",
  data: JSON.stringify({"data" : data }),
  success: function (data) {
    if (data.valid)
    {
        alert('Success:' + data.message);
    }
  }
});

In the ControllerName controller,

public JsonResult ActionName(string data) {
  // do something with data
  return Json(new { valid = true, message = "Success" });
}

Basically, if you receive a 500 error from the server but are never able to hit a break point in Visual Studio, look at the way the data is sent and the way the data is received. More likely than not there is an error with the data or dataType or mimeType parameters (cross-domain requests are a different beast too).

The key difference is the difference between a JSON string and a JavaScript object. JSON strings aren't JavaScript objects just because they look like JavaScript objects; they have a stricter syntax. It is not a limitation or error of ASP.NET MVC or the backend if it refuses to parse incorrectly formed JSON.

Thanks for visiting and comments are welcome.

Missing 64-bit from Oracle Virtualbox in Microsoft Windows

Hi,

Just wanted to make a note for people,

If you find you can't create a 64-bit Virtual Machine with Oracle Virtualbox, disable Windows Hyper-V through Windows Features.

Another requirement is to enable VT-x (Intel) or AMD-V (AMD) in the computer's BIOS. You might have to hard reboot after.

Hope this helps someone.

Getting Started with Cocos2d-JS 3.0 Part 1 - First Sprite

Prerequisites

• Knowledge of how to download, unzip and install software packages and software on your computer and how to change environment variables for your operating system of choice (Linux / Windows)
• Basic knowledge of JavaScript (should know what closures are, what a callback function is, etc.) in other words not a complete beginner. If you need a refresher on JavaScript I suggest this tutorial.
• Some experience using Eclipse-like IDEs would be helpful (although not necessary). If you can step through a debugger you will be fine.

Introduction

Cocos2d-JS 3.0 is an html5 framework derived from cocos2d-x. It was recommended to me by a coworker as a JavaScript framework. This will be a tutorial on how to get started with Cocos2d-JS with the most basic type of rendering -- a 9-slice sprite from the very beginning (downloading, installing, configuration and code sample). Proper scaling is crucial to resolution independent and mobile development. Later tutorials will cover event handling, physics and more advanced topics.

Because installation, configuration and setup is often the first major hurdle, much of Part 1 will be spent on creating your environment (stick with it, trust me it pays off) or at least pointing you in the right direction.

As of June 1st, 2014 Cocos2d-JS is still in beta stage so not ready for production. But it is looking very promising and is just a few weeks/months away from production (already been through alpha). Since cocos2d-JS 2.0 was rock solid for years and the team appears dedicated I have no reason to doubt 3.0 will eventually be released production ready.

This tutorial will assume you have an Ubuntu-like system. If you are familiar with unzipping and changing environment variables on Windows, you should also be able to follow along since the code will be compatible.

Advantages of Cocos2d-JS 3.0 (as of June 1st, 2014) or Why Use Cocos2d-JS?

• HTML5 compatible so mobile friendly with wrappers like Intel Crosswalk (Android) or Ejecta (iOS). Also has JSB (JavaScript bindings) to compile with cocos2d-x to native, though the JSBs lag behind the main trunk for now.
• JavaScript for fast development (debatable)
• MIT License

Disadvantages (few, but worth mentioning) or Why Not to Use Cocos2d-JS

• A little more difficult to use compared to other JavaScript frameworks. This is being resolved by the cocos2d-JS team (they acknowledge this).
• Cutting edge (as of June 1st, 2014) so not ready for production. Not a big deal since it will be ready eventually.
• Not too many tutorials or examples (one of the reasons I'm writing this, plus will get solved eventually when the framework is out of beta).
• JavaScript (for people who hate / can't stand JavaScript)

The goals of this tutorial will be to setup your environment and create reusable sample code for a 9-slice sprite. A 9-slice sprite is a sprite which scales properly on all devices without distorting the image, crucial for mobile friendly games and apps.

Step 1 - Downloading Cocos2d-JS

Download the Cocos2d-JS v3.0 beta. By the time you read this, cocos2d-js may be out of beta.



The setup will ask you a few questions, mainly about Android NDK and SDK locations and ant locations. You should have ANT properly installed and setup; if not, run sudo apt-get install ant and rerun the cocos setup. We will be building for web only, so we will not bother with Android for now.

If you are having trouble setting the environment variables or downloading the prerequisites (Python 2.7.6 32-bit, not Python 3, Ant) see the section SETUP here. Unfortunately installing Python, Ant and so on is outside the scope of this tutorial; however your distro should have these preinstalled. If this is a problem for some people I can write another article about how to install packages in Ubuntu.

Step 2 - Downloading Aptana Studio

Download the Aptana Studio standalone version. Unfortunately Aptana Studio does not support OpenJDK (the default Java installation that comes with Ubuntu) so you will need to switch to Oracle JDK to use it. Switching from Open JDK to Oracle JDK is outside the scope of this tutorial; see this link for a comprehensive tutorial. If you are using Windows, Aptana Studio comes with a prepackaged JDK.

If you don't want to bother with the switch, or you hate Eclipse-style IDEs in general you can use Jetbrains Webstorm. However Jetbrains Webstorm is non-free. However Webstorm has much smarter autocompletion and if you are doing a serious project I would consider buying a license.

Note about Aptana Studio Bug #1: I encountered a bug when using Aptana Studio with Linux Mint (an Ubuntu variant) and found the solution here. It involves the default web browser and Firefox.

Note about Aptana Studio Bug #2: I encountered another bug when using Aptana Studio debugger with Firefox. If you see a window like below when running debug mode, uninstall the Firebug addon in Firefox, uninstall the Aptana Studio addon in Firefox, close all your browser windows and restart debug mode in Aptana Studio. The problem is with Firebug > 1.8.3 not being compatible with Aptana Studio (another reason to shell out the bucks for an IDE like Webstorm if you are doing a serious project, this bug has been around for quite some time).

Step 3 - Creating the Cocos2d-JS Project

Run the following from wherever you create new projects:

You should see the default Cocos2d-JS hello world screen now.

Step 4 - Importing into Aptana Studio

Start Aptana Studio from the folder you installed Aptana Studio in. It will prompt you for a workspace. Create a new folder and select a workspace for Aptana.

Click the "Import Project" button and go to "Existing Folder as New Project". Then pick the folder with the web application.

Step 5 -  Get a 9-slice Sprite

This is the easiest part of the tutorial. Get the 9-slice (9patch in Android) image for free courtesy of dibbus.com

Next, place the image in the res directory of the 01-sprite cocos2d-JS project (assuming btn_red_matte.9.png).

Now, add btn_red_matte.9.png to resource.js as one of the available resources.

Step 6 - Get the required information from the sprite

We require the following information from btn_red_matte.9.png in order to render the 9-slice sprite. Note that in Cocos2d-JS capInsets is a rectangular area, not margins of pixels to avoid scaling as in Cocos2d-x. Don't worry if you don't understand all of it; it makes more sense in Step 7 with the code.

• Bottom left x coordinate - Cocos2d-JS treats the bottom left corner as the origin point. We will pick a portion of the image to render. The image is larger than we need, since it comes from Android and Android uses the Draw 9-patch tool to create 9-slice sprites. We do not need the black marks or the margin because Cocos2d-JS will use capInsets to define the scalable area instead (explained below). Therefore, the portion should be the red area of the image and only the red area. You will create a rectangle with the bottom left x, bottom left y, width and height then pass it in as the second parameter to the cc.Scale9Sprite constructor. 
• Bottom left y coordinate - Same as above
• Width - Width of rectangular area of image to render
• Height - Height of rectangular area of image to render
• capInsets - The capInsets are a little different than in Cocos2d-x. In iOS and Cocos2d-x you would define the capInsets as the number of pixels of top, left, bottom and right of the selected area in that order to ignore scaling. In Cocos2d-JS the "capInsets" parameter is actually an instance of cc.rect which is the stretchable area within the sprite. The green area below is the "capInsets" parameter for Cocos2d-JS. You will create this rectangle and pass it in as the third parameter to the cc.Scale9Sprite constructor.

Using GIMP, we discover that the bottom left x-coordinate of the sprite we want is 2,2 and it is 44 pixels wide and 47 pixels high. Note that GIMP doesn't treat the bottom left as (0,0) like Cocos2d-JS does so you'll have to do some simple math.

As well, using GIMP we discover that the inner green rectangle (the area we want to allow to scale) has its origin at (8,7) and is 32 pixels wide and 36 pixels high.

Step 7 - Code

At long last, the code.

First, modify the project.json file to add the "extensions" module to the cocos2d-JS boot loader. cc.Scale9Sprite is an extension.


Open up app.js and delete all the text in the file. We will code from scratch.

Fill up app.js with the following (explanation below the code):
Lines 1 to 7 should be self-explanatory. HelloWorldScene is called by main.js by the boot loader. This is unmodified from the default HelloWorld application when you first create a Cocos2d-JS project. The scene is created, which is basically a container for layers. Then the layer is created, defined below.

Lines 11 to 34 are the object properties.

Line 39 to 42 is the constructor. It calls the init() function to initialize the layer.

Lines 48 and 49 set a couple instance variables of the layer (the width and height, which we will use to scale.)

Line 50 schedules a update every frame. The update function (ticker) will be called each frame. Usually the update function will have a delta time parameter (dt) to model physics. However in this tutorial we will simply use the update function once, to draw three sprites scaled without distortion.

Line 58 creates conditions to draw the buttons. We only want to draw the buttons once (since they don't move) and check whether the buttons have been created previously. If they haven't we enter the block.

Lines 60 to 62 create the buttons. Down at lines 90 to 94 you see the create button function. For simplicity sake we have hardcoded the dimensions of the delimitation zone (area of the .png file to render) and the capInsets (area of the sprite to allow to scale). Note that the Cocos2d-JS definition of capInset is different than the Cocos2d-x definition or indeed the iOS definition.

Lines 65, 68 and 71 draw the buttons on the screen. This is done using three functions, drawButton, getWidthPercent and getHeightPercent on lines 79, 97 and 101.

For the getWidthPercent and getHeightPercent functions, it is a simple calculation of number of pixels for a given percentage. If 20 is passed to the function, it calculates 20 percent of the pixels available on the width/height of the screen and returns it. If 50 is passed to the function, it calculates 50 percent of the pixels available on the width/height of the screen and returns it.

At line 80 the drawButton function first sets the anchor point to (0,0). An anchor point is the
 "origin" point in the sprite's internal coordinate system where all the transformations are applied. It is also where the sprite's position (its x and y coordinate) is centered.  The anchor point is by default (0.5,0.5). We want it at the bottom left of the sprite, (0,0), so that when the sprite is scaled up it is scaled to the right and upwards, not below and to the left.

At line 81 we use the setContentSize function to scale the image up and down without distortion. Note that using the setScaleX and setScaleY functions will distort the sprite, ruining the whole point of a 9-slice sprite. By using setContentSize we make sure the edges are not scaled upwards and only the center of the button is scaled.

At line 82 and line 83 we set the x and y position. Since we set the anchor point at line 80 to the bottom left of the sprite, the x and y position is fixed regardless of whatever scale we set at line 81 using setContentSize.

Finally at line 84 the button is added as a child to the current layer.

You should get a screen similar to the following

Note that the corners and edges are not distorted in any way. You can now create buttons and sprites without distortion of any size with a relative percentage of the screen. Congratulations.

The entire project is available here. Note you should do it yourself by reading the above blog post instead of downloading this, since the version of Cocos2d in that zip will be drastically outdated by the time you've read this.

The next tutorial will deal with basic physics and collision detection.