TIP: Add AngularJS Package to Sublime Text 3

Standard

Follow below steps to add syntax highlighting and completion for AngularJS to Sublime 3 (windows installation):

  1. open the Sublime console using the View Menu or shortcut  [ctrl+`].  Step (2 and 3) can be skipped if Package Control already installed.
  2. paste below script to install the Package Control
    import urllib.request,os;
    pf = 'Package Control.sublime-package';
    ipp = sublime.installed_packages_path();
    urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) );
    open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
    
  3. After the Package Control is installed, open the command palette using the Tools Menu or shortcut [ctrl + shift + p] and search for Package Install and Enter.
  4. Type AngularJS to install the AngularJS Package and  Enter. This will install the package
  5. Enable AngularJS syntex using the View Menu -> Syntax -> AngularJS (HTML). A faster way is to use the command palette and search and type AngularJS.
  6. Start enjoying AngularJS with HTML syntax highlighting and completion!.
Advertisements

EnableSorting([tableConfig]) – Add sorting capability to HTML Table

Standard

I was having fun learning JavaScript and jQuery for a while now, at the same time I was trying to develop some utility functions that I might use or need in a future project that I’m planning to develop.

One of the things that I thought to be useful is adding a sorting capability to HTML table. Although there are a lot of open source plugins or widgets that I can simply use but my intention is to build it from scratch myself to get a depth experience in the language and related JavaScript technologies. I like to share my experience developing the function and the related source code in this post.

The function accept two parameters:

  • table selector: either the table id or class (follow the same jQuery selector standards).
  • sortingConfig: optional parameter that can be passed to define which column is sortable and also define a default sorting after the table is first rendered.

the function returns an object that includes below public members:

  • sort: a function that can be used to dynamically sort the table from the code, passing the column selector and a sort order (asc | desc).
  • toString: override the object prototype toString function, when called it return the selector used (useful for debugging).
  • selector: the selector passed to the EnableSorting function object.

below is the JavaScript source code for the function. I encapsulated the code inside a function object and extended  the prototype object to share the public members. I also added the function to jQuery functions set in order to be  used directly from jQuery by using the jQuery.fn.extend() feature.

"use strict";
/**
 * @author Rjawad-admin
 */
//EnableSorting constructor function, accept tableId and optional tableConfig
function EnableSorting(tableSelector, sortingConfig) {

	this.selector = tableSelector;

	var table = $(tableSelector);

	var tableHeaderRow = $("thead", table).children("tr");
	var tableHeaderColumns = tableHeaderRow.children("th");

	//check if sortingConfig.columnsConfig exists
	if (sortingConfig !== undefined) {
		// check if the SortingConfig is exists
		if (sortingConfig.columnsConfig !== undefined && sortingConfig.columnsConfig.length > 0)
			tableHeaderColumns = tableHeaderColumns.filter(function(index) {
				return sortingConfig.columnsConfig.some(checkIfSortable, this);
			});
		//check if default sortsing is specified
		if (sortingConfig.defaultSort !== undefined)
			this.sort(sortingConfig.defaultSort.columnSelector, sortingConfig.defaultSort.sortOrder);
	}

	//check if the column is listed in the sortable columns
	function checkIfSortable(element, index, array) {
		return (element.id != undefined && element.id.toLowerCase() === $(this, tableHeaderRow).attr('id').toLowerCase()) && element.sortable;
	}

	//Add the sort click event to the sortable columns
	tableHeaderColumns.each(function(index, columnElement) {

		var eventData = {
			sortOrder : "asc",
			sortColumnIndex : $(columnElement, tableHeaderRow).index() // the column index of the original columns set
		};

		$(columnElement).on("click", null, eventData, function(event) {
			applySortToColumn(event);
		});
	});

	//Private: applySortToColumn
	function applySortToColumn(event) {

		var tableBody = $("tbody", table);
		var tableData = tableBody.find("tr").toArray();

		//copy to a temp map by extracting the column values from the table to sort it.
		var map = tableData.map(function(e, i) {

			var trColumns = $(e, this).children("td");
			var elementValue = trColumns.eq(event.data.sortColumnIndex).text().toLowerCase();

			return {
				index : i,
				value : elementValue
			};
		}, tableData);

		if (event.data.sortOrder.toLowerCase() === "asc") {
			//ascending sort
			//sorting the map containing the reduced values
			map.sort(function(a, b) {
				// if Numberic then apply (a-b),
				if ($.isNumeric(a.value) && $.isNumeric(b.value))
					return a.value - b.value;
				else
					//if string then (a > b)
					return a.value > b.value ? 1 : a.value < b.value ? -1 : 0;
			});
			event.data.sortOrder = "desc";
		} else {
			//descending  sort
			// sorting the map containing the reduced values
			map.sort(function(a, b) {
				// if Numberic then apply (b-a)
				if ($.isNumeric(a.value) && $.isNumeric(b.value))
					return b.value - a.value;
				else
					//if string then apply (a < b)
					return a.value < b.value ? 1 : a.value > b.value ? -1 : 0;
			});
			event.data.sortOrder = "asc";
		};

		// map the sorted map to the original array
		var sortedData = map.map(function(e) {
			return tableData[e.index];
		});

		// empty the table body tag (all rows/cells) and populate it based on the sorted TR array.
		tableBody.empty();
		tableBody.append(sortedData);
	};
}

//Sort: public method to override the current sorting and specify a new sort
EnableSorting.prototype.sort = function(columnSelector, sortOrder) {

	var tableHeaderRow = $("thead", this.selector).children("tr");
	var sortColumnIndex = $(columnSelector, tableHeaderRow).index();

	var tableBody = $("tbody", this.selector);
	var tableData = tableBody.find("tr").toArray();

	//copy to a temp map by extracting the column values from the table to sort it.
	var map = tableData.map(function(e, i) {

		var trColumns = $(e, this).children("td");
		var elementValue = trColumns.eq(sortColumnIndex).text().toLowerCase();

		return {
			index : i,
			value : elementValue
		};
	}, tableData);

	if (sortOrder.toLowerCase() === "asc") {
		//ascending sort
		//sorting the map containing the reduced values
		map.sort(function(a, b) {
			// if Numberic then apply (a-b),
			if ($.isNumeric(a.value) && $.isNumeric(b.value))
				return a.value - b.value;
			else
				//if string then (a > b)
				return a.value > b.value ? 1 : a.value < b.value ? -1 : 0;
		});
	} else {
		//descending  sort
		// sorting the map containing the reduced values
		map.sort(function(a, b) {
			// if Numberic then apply (b-a)
			if ($.isNumeric(a.value) && $.isNumeric(b.value))
				return b.value - a.value;
			else
				//if string then apply (a < b)
				return a.value < b.value ? 1 : a.value > b.value ? -1 : 0;
		});
	};

	// map the sorted map to the original array
	var sortedData = map.map(function(e) {
		return tableData[e.index];
	});

	// empty the table body tag (all rows/cells) and populate it based on the sorted TR array.
	tableBody.empty();
	tableBody.append(sortedData);
};

//override the toString function to display the table Id associated with the LiveTable object
EnableSorting.prototype.toString = function() {
	return "<EnableSorting: " + this.selector + ">";
};

//extend to JQuery function prototype
jQuery.fn.extend({
	enableSorting : function(sortingConfig) {
		return new EnableSorting(this.selector, sortingConfig);
	}
});

The function (EnableSorting) can be used either by creating a new object of EnableSorting function or by calling it directly from a jQuery object.

below is a sample table to show how the enableSorting method can be used. The implementation assume a well formatted HTML5 table (for the sake of simplicity).

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>EnableSorting</title>
		<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
		<script src="EnableSorting.js"></script>
		<script src="AppLogic.js"></script>
	</head>
	<body>
		<table id="classes">
			<thead>
				<tr>
					<th id="ClassName">Class Name</th>
					<th id="StartDate">Start Date</th>
					<th id="MaxNoOfAttendies">Max No of Attendies</th>
					<th id="Status">Status</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Math</td><td>10/05/2013</td><td>15</td><td>Open</td>
				</tr>
				<tr>
					<td>Chemistry</td><td>10/15/2013</td><td>20</td><td>Open</td>
				</tr>
				<tr>
					<td>Physics</td><td>09/05/2013</td><td>20</td><td>Closed</td>
				</tr>
				<tr>
					<td>English</td><td>10/20/2013</td><td>30</td><td>Cancelled</td>
				</tr>
				<tr>
					<td>History</td><td>10/05/2013</td><td>25</td><td>Registration Closed</td>
				</tr>
				<tr>
					<td>Computer Skills</td><td>09/20/2013</td><td>10</td><td>Open</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

Below is a sample code showing the two ways of using the enableSorting function on above table.

$(document).ready(function() {

/*Using the EnableSorting Function:
create a new object of
EnableSorting and pass the id of the
HTML table (# must be used for ID,
following jQuery selector standards)*/
var tableClasses= new EnableSorting("#classes");

/*Using the enableSorting function from
a jQuery object (as extended function)
after selecting the table*/
var tableClasses = $("#classes").enableSorting();

});

The function accepts optional parameter (sortingConfig) object to define the sortable columns and also specify a default sorting after the table is first rendered. Below example shows how the sortingConfig is used to add sorting to specific columns and disable it on other columns.

$(document).ready(function() {

	var sortingConfig = {
		columnsConfig : [{
			id : "ClassName",
			sortable : false
		}, {
			id : "StartDate",
			sortable : true
		}, {
			id : "MaxNoOfAttendies",
			sortable : false
		}, {
			id : "Status",
			sortable : true
		}],
		defaultSort : {
			columnSelector : "#Status",
			sortOrder : "asc"
		}
	};

	var classes = $("#classes").enableSorting(sortingConfig);
});

The function returns an object that has “sort” method that can be invoked to sort the table based on the passed sorting column and sort order (asc | desc). below example shows how the sort function can be used

var classes = $("#classes").enableSorting(sortingConfig);
classes.sort("#StartDate", "asc");

EnableSorting is tested with Chrome, Firefox and latest version of IE and it seems work fine. I noticed it did not work on browsers that does not support the JavaScript array.some method that I used in the function.

I’m still working to optimize the function but so far I had so much fun developing it and learn new stuff, nothing more beneficial than experience and practice, reading gives me knowledge while practicing solidify my knowledge and push my knowledge limits.

Feel free to use the code and modify it.

I’m sure there might be better ways to add sorting to a table, appreciate any feedback or criticism to enhance it or fix any encountered bugs.

Happy coding!

Learning JavaScript: (grab the book and install a development tool for a kickoff)

Standard

So finally I had some free time to sit and open my JavaScript book and start learning JavaScript. The book I’m reading is JavaScript: The Definitive Guide (6th Edition) by David Flanagan.

Its a great book that covers almost everything related to JavaScript language,  focusing on the standard language specification.  It can be considered as a JavaScript Bible and a reference book about the language. The sixth edition covers ECMAScript 5.0 (the latest JavaScript standard). I don’t recommend this book for someone new to programming, it is more suitable for people who already have experience in other programming languages (at least this is my opinion). I’m planning to write a brief review and feedback about the book once I finish it.

There are other books that might be easier to follow and cover the basics of the language without getting into the details of the language specification and advanced topics.

Obviously a JavaScript Interpreter is needed to execute JavaScript programs in order to try out the book example and any experimental code. The good news is that almost all web browsers come with a built in JavaScript Interpreter that compiles the code and executes it within the web browser host environment and its run-time.

Any editor can be used to write JavaScript code. For example in windows, notepad can be used to create a simple HTML file and embed the JavaScript code inside it then open the file in the web browser. The only caveat is that  in order for the browser to recognize the JavaScript code, it must be surrounded by//

A better option is to use a debugging tool or a development tool that integrate with the web browser that I can interact with directly without the need to use external HTML file.

Lucky enough, all web browsers comes with a development tools that are integrated with the browser and available for free to web developers to inspect HTML, CSS and also trace and debug JavaScript code of the current opened file in the browser. In addition to that, it allows interacting with the web browser run-time through a console by writing JavaScript code and view the output through the console output window.

This provide a great learning environment for me as I don’t need to leave the web browser to try out the book examples and experiment with the language, both the interpreter and development tools are integrated nicely with the browser and they all self contained. For production code, a more robust specialized integrated development environment (IDE) must be used as the development tools that come with the browsers are not meant for developing production solutions.

In this post I will cover Firefox web browser and its development tools options. Almost all browsers have similar development tools and comes with a built in JavaScript Interpreter with different flavors and can differ slightly in the UI layer but the framework is the same: Web Console to interact with the browser and write JavaScript code or commands, run the code and view the output either in the browser or using the console output window.

I personally prefer Firefox for below reasons:

  1. It is created by Mozilla, the same company that invented JavaScript and created the first web browser. So they are in the heart of web technologies. I like their policy and vision to keep the web open and supported by open source communities rather than bound it by cooperate greed.
  2. It supports ECMAScript 5.1 language standard. it also supports HTML5 and CSS3.
  3. It has more than one development tool or option to try out JavaScript code:
  • Web Console is the most basic tool which allow interacting with the browser through simple commands.
  • Scratchpad editor is some sort of simple lightweight JavaScript editor that I can write JavaScript code and execute it then see the results in the output window or embedded within the same code window.
  • Finally there is a cool open source add-on called Firebug that is well known among web developers community, it has comparable features as Mozilla Scratchpad and web console debugging tools.

I liked Scratchpad, it is straight forward basic editor and works perfectly for the purpose of trying out the book examples. Sometimes I may use Web Console for simple statements evaluations (i.e. built in JavaScript functions) or in case I want to view and inspect the JavaScript, HTML or CSS of an opened page. in regards to Firebug Add-on, I installed before I figure out there is Scratchpad, it seems provide similar functionality maybe with more advanced debugging feature. I will play with both before I settle on using one of them.

so let’s try out a sample JavaScript code and see how it can be run using Firefox development tools.

  1. Open Firefox web browser.
  2. Then using the main menu, choose Web Developer – > Scratchpad (or use the shortcut Shift+F4).
    Scratchpad
  3. the Scratchpad tool will be shown and opened in a separate window. There are few JavaScript comments to direct the user how to use the tool.
    Scratchpad Window
  4. Paste below code into the Scratchpad window. It is a simple function to calculate the summation of a series of the integer numbers less and equal to the input number, then I used console.log function to call the function and send the output to the web console output window. console.log is a handy function to debug and log code results.
    function sum(n) {
      var s = 0;
      for(var i=1;i<=n;i++)
        s = s + i;
        return s
        }
    
    console.log(sum(5));
    console.log(sum(10));

    function code

  5. In order to run the code, either use the Execute menu then click Run or use ” CTRL + R” shortcut. The result will be shown in the Web Console Logging window (because I used console.log function). Note (if Firebug add-on is installed and enabled , the output will be shown in the Firebug output window).
  6. Make sure the Web Console window is opened in order to see the console.log output after the program is run.  To open the window use “Ctrl+ Shift + k” shortcut.
  7. After the program is run, the output will be shown in the Web Console window. As shown in the output window the two console.log function calls with the corresponding function sum output.output

Firefox web browser and Firebug add-on can be installed from below links:

  1. http://www.mozilla.org
  2. http://www.getfirebug.com

Lets not to get confused, JavaScript is not JAVA.

Standard

Most of us, the programmers are less confused about JavaScript brand name, we can figure out quickly that JavaScript is a completely different language than Java, once we start using it.

On the other hand, people who are first introduced to the language; mostly end users or clients are more confused about JavaScript sometimes, the perception or first impression of the language based on its name, is that it is a subset or another flavor of Java. That actually turned out to be a good thing for us and we got lucky to get paid for just explaining the differences and resolve the confusion to clarify to that there is no relationship whatsoever between the two, it is just a weird intruder instance of “Java” word that stuck in a brand name of a totally different language.

So here is part of the historical story on how we ended up with this mess of naming conflicts or intentional mix.

JavaScript is invented by Brendan Eich at Netscape (now Mozilla)The language originally known as Mocha then changed to LiveScript and finally it becomes JavaScript which happened to be the most controversial language name in programming history (though I like the name). Is might be the marketing team who decided to have the Java word in the brand name of JavaScript to push it out the door and takes part of that the glory that surrounded Java language at that time.

Java was getting popular and viral for its portability and flexibility during that time on both the server and client environments. Web browsers supported Java through Applets (local Java run inside a web browser). So JavaScript was meant to be a lightweight complementary language that is easier to learn and pick up by beginners to develop dynamic web content without the need to use Applets or learn Java.

To pour more confusion to the mix, Microsoft has its own implementation of JavaScript called JScript because they did not want to run into trademark dispute problems. So here we go, we have now JScript and JavaScript which represent the same core language but in different dialects.

Netscape worked on standardizing the language specification through Ecma International (an international standards organization for information and communication systems). The standard number for the specification is “ECMA – 262 Specification”. Obviously neither Microsoft nor Sun Microsystems (who own the license for the JavaScript trademark) were willing to give up or donate the trademark so Ecma through its own innovative naming creativity came up with another name!! and they called the language ECMAScript which Eich sarcastically commented about its name saying: so they ended up inventing ECMAScript, which sounds a little like a skin disease”.

ECMAScript is used now more to refer to the standard edition of the JavaScript language, and JavaScript is still the common used name to refer to the dialect implementation of the language. Since then both the standard committee and dialects implementers of the language feed each other and (try to agree) to enhance the standard language and enrich its features which eventually reflected in new editions of the standard and its new dialects implementation version, with that cycle the language continued its evolution since then.

below diagram is some sort of an object oriented diagram (hope the abstraction makes sense) of how Ecma organization, the standard, ECMAScript and various dialects are related.

image

JavaScript is a standalone language and has nothing to do with Java language except that it uses some of the design concepts and programming style, in reality JavaScript major influence came from Scheme, Self and C programming languages.

Also Java compiles eventually to a native code (sort of) that can be executed by its own JVM and runtime while JavaScript needs a host environment in order to run and execute (like a web browser or Node.js process in case of Node network applications) and it depends on its host for IO operations.

I always try to embrace and talk about the powerful features of the language like dynamic typing, closure, Lambda, and its prototype-based aspects which are design concepts and features brought from other languages like Scheme, Self, C and Java too which collectively may exceed the capability of those individual languages in certain scenarios.

I also try to expose how the language got standardized, matured and grown in recent years. By doing that I hope I can change the inherited dominant wrong perception of the language which is: JavaScript is a scripting language at the end so its not as fast and powerful as other native languages. Sometimes bad names or nicknames have really terrible consequences on things!!.

That being said, JavaScript has some inheritance of bad features and practices that sometimes make it harder for developers to maintain and spot silent errors at compile time and can only be discovered at runtime during program execution; but those errors can be minimized and totally eliminated by following best practices and design patterns that protect the application or program from language design and implementation flaws.

Also there are some code analysis tools like JSLint that helps writing standard code that follow best practices and help eliminating using a language feature or construct that might cause problems at runtime.

I intentionally did not put any timeline or associated dates to when those different evolutionary steps happened to the language because there are many resources online and references that talk in depth of the history of the language. I listed below the resources that I used for this post in case your inner history nerd wants to dig into further details.

Happy Coding!

The reason I’m getting obsessed with JavaScript

Standard

The main reason that I’m taking JavaScript seriously is that I got inspired by the rapid adoption of JavaScript and the related evolved vibrant frameworks built on top of it, in addition to that, the attraction and support JavaScript is getting from both the open source community and the majority of cooperate software companies a like.

I was amused by the language and its features when I started learning and experimenting with Node.js networking platform that is based on JavaScript event loop concurrency model. I got hooked instantly on Node.js lean approach to develop scalable lightweight server applications and its use of Google V8 JavaScript Engine and adoption of JavaScript as the main programming language for the platform. Until recently JavaScript was only popular and always attached to client side environments and never thought to be leveraged by server platforms.

But the main pragmatic reason I choose JavaScript over other languages is the vibrant ecosystem and frameworks build on top of it. It appeals to me the fact that I can use one portable language that is platform independent and spans both the client and server platforms cohesively which does not require a mind shift to switch between two different languages which is the case with the current traditional web applications development (use a different native language on the server “i.e. C#, JAVA ..etc).

The JavaScript and related frameworks had been always the de facto portable programming language and platform running on client side. But the JavaScript users took an innovative leap steps recently to be adopt and leverage it beyond the browser support and use it as a viable option to develop applications that can run on a server platform (in the case of Node.js); and also to develop native applications that run outside of the browser (for example in the case of Windows 8 applications). Microsoft also supports JavaScript language to write Map/Reduce jobs that run on Windows Azure HDInsight Service which is an implementation of Apache Hadoop running on Azure.

Netscape the company that invented JavaScript worked with ECMA International to standardized the language under the name ECMAScript. With the latest stable release of ECMAScript 5.0 standard and the rapid support by modern web browsers with the parallel evolution of HTML5 API, JavaScript becomes no longer a scripting language living in the web browser focusing only on dynamic interactions; it becomes a powerful tool to build modern web applications and be part of a vibrant ecosystem and platform that empower both the client and server environments seemingly. it makes the programming experience a more cohesive and consistent process.

I believe JavaScript has a promising future and it is happening now already and for that I got inspired to learn it and experience its capabilities and the mechanics of its vibrant ecosystem.

My core experience in the last years has been in .NET platform and C# language, I also used VBScript, VB.NET, C++ and even FORTRAN and Pascal in collage but something about JavaScript dynamic nature and portability is appealing. I can relate to it more than other languages though they can be more sophisticated and faster at runtime but I see it more relative to the real world and how it functions, its treatment of functions as first class citizens and its dynamic nature makes it closer to our brain functional model that depends on input/output to process and model data rather than objects abstractions through inheritance and hierarchical relationship as it the case in traditional object oriented programming languages.

The evolution of JavaScript is happening beyond the competition of major players in the software industry as it was born around the same time the internet was born so it becomes part of the web platform DNA and since then it continued to be implemented in each new generation of web browsers as a the default language regardless of the web browser brand or type. Its ECMAScript standards compliance assured portability and enforced consistency to some extent across all browsers and platforms, mutations may happen during its life-cycle of the language evolution but it always picked up by ECMA and everyone rush to catch up and support new emerged features. Its becoming a win win case for competitors to support it in their ecosystems and development platforms, it raises above their proprietary languages and technologies. And this by its own makes it a sustainable programming language that provides a safe heaven for programmers at least for the near future.