MathJax – beautiful math in all browsers

Having come across this and having the regular need to represent complex math in web… I was happy to be introduced to MatchJax….

MathJax is an open source JavaScript display engine for mathematics that works in all modern browsers.

This means no more setup for readers. No more browser plugins. No more font installations… It just plain works.

MathJax

 

 

 

It’s the most elegant way currently available to include math in your markup… check it out…
http://www.mathjax.org/

JQPLOT – A Versatile and Expandable jQuery Plotting Plugin

jqPlot is a plotting and charting plugin for the jQuery Javascript framework.

Image

jqPlot produces beautiful line, bar and pie charts with many features:

  • Numerous chart style options.
  • Date axes with customizable formatting.
  • Up to 9 Y axes.
  • Rotated axis text.
  • Automatic trend line computation.
  • Tooltips and data point highlighting.
  • Sensible defaults for ease of use.

jqPlot is an open source project by Chris Leonello

Check it out…
http://www.jqplot.com/

FLOT – Attractive JavaScript plotting for jQuery

Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.

FlotCharts Homepage

Who’s behind this?

Flot is the combined result of countless suggestions, patches and bug reports by the people using Flot.
It was started by Ole Laursen, sponsored by IOLA, an agile little Danish web-development house with a keen eye for Python/Django and jQuery. If you need commercial support, you’re welcome to contact us – read more here.
It is currently being maintained by David Schnur.

Check it out…
http://www.flotcharts.org/

AngularJS Directive… preloader experiment

I’m still a newbie to AngularJS development, however I have to admit that I’m having a lot of fun thinking of new directives and exploring increasingly better ways to implement them, mostly inspired by the lively and vital AngularJS community.

I’m posting one of my most recent experiments which was to have a very simple way to add preloading functionality to an AngularJS application… and this i what I came up with.

Please note that this is purely experimental and the reason for me posting it is to allow others to start thinking of their own directives as well as learn something in the process..

Now… one of my objectives was that I wanted to be able to point to an external file for the preloader content, however the preloader content should also be able to contain AngularJS itself.

This lead me to the use of the AngularJS-native “include” directive and the “$compile” service.

The actual implementation of the loading was out of scope for this small experiment, so I decided to fake it with a simple timer using the relatively new “$timeout” service, which recently replaced the “$defer” service as a way of postponing function calls.

Furthermore, since basically every application I build contains some level of DOM manipulation, I have no problem with having jQuery as a pre-requisite, so the implementation is using jQuery for the DOM manipulation, however it would be trivial to remove or replace this requirement.

AngularJS Community Member, Glen Maddern, has been so kind to post my experiment as a executing sample in the form of a Gist on GitHub:
http://2886724.run-a-gist.herokuapp.com/

The contents of the splash.html is very crude for this example, however it could be any HTML content…

<h1 ng-click="clickHandler(event)" ng-controller="PreloaderController">
	Loading, please wait...still loading {{percentCompleted}}%
</h1>

As you can see in the the snippet above, the preloader HTML is driven by a PreloaderController… and it has a clickHandler for demo purposes to shurtcut the preloading…

function PreloaderController( $scope, $timeout ) {

	$scope.percentCompleted = 0;

	$scope.applicationProgressMock = function() {

		if( $scope.percentCompleted == 100 ) {
			$scope.$emit( "applicationComplete" );
		}
		else
		{
			$scope.percentCompleted += 5;
			$timeout( $scope.applicationProgressMock, 100 );
		}
	}
	$timeout( $scope.applicationProgressMock, 100 );

	$scope.clickHandler = function( event ) {
		$scope.percentCompleted = 100;
	}
}

The directive itself is fairly simple and straightforward JavaScript…

PreloaderFactory = function( $compile ) {

	var directive = {

		restrict : "A",

		link : function( scope, elm, attrs ) {

			scope.preloader = jQuery( "<ng-include />" );
			scope.preloader.attr( "src", "'"+ attrs.preloader +".html'" );

			$compile( scope.preloader )( scope );

			jQuery( "body" ).append( scope.preloader );

			scope.$on( "applicationComplete", function( event ) {

				jQuery( scope.preloader ).remove();
			});
		}
	}
	return directive;
}

Now, my main HTML looks like this, pretty advanced app…

<html ng-app="application" preloader="splash">
  <head>
    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <title>Preloader Experiment</title>
    
    <script src="http://code.angularjs.org/angular-1.0.0rc10.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="preloader-0.0.1.js"></script>
    
    <script>
    
    	angular.module( "application", [] )
    	
    	.directive( "preloader", PreloaderFactory );
    	
    </script>
    
  </head>
  <body>
  
  </body>
</html>

That’s it, a faily simple and crude implementation of a preloader tag… comments are much appreciated, however please note that this was purely intended as an inspiration and not a cookbook recipe…

In any case I decided to put it on GitHub… I sincerely hope to be able to get much more samples up there and that they will increase in quality…
https://github.com/pmoelgaard/labs/tree/master/angular/preloader-directive

AppJS… Build Cross-Platform Applications

…for desktop using HTML, CSS, Javascript !

It’s still very early stuff, however its interesting to see how a lightweight container like this may develop into something pretty useful, at least the stack of technologies used is entirely aligned with how I would set out to build a lightweight app container…

Why AppJS?

Because it is simple and yet powerful. Using AppJS you don’t need to be worry about coding cross-platform or learning new languages and tools. You are already familiar with HTML, CSS and Javascript. What is better than this stack for application development? Beside, AppJS uses Chromium at the core so you get latest HTML 5 APIs working. So relax and focus on the task your application should do.

HTML 5

AppJS allows you to use HTML 5 APIs to create attractive applications from Word Processors to 3D Games. You are no longer limited to default GUI widgets that plaforms force you to use. Creating custom UIs is now only limited to your imagination!

CSS 3

Using CSS you can decorate widgets as you like. Create a custom widget in HTML and complete your work with decorating it. Adding shadows, animating elements and transforming objects in 3D space are a few examples of what you can do with CSS 3.

Node.js

The interesting part of AppJS is that it uses Node.js as the backbone. Node.js has been built to ease the process of developing scalable network applications. But today, you can see Node nearly everywhere! It has a nice API and lots of modules.

Check it out…
http://appjs.org/

FixieJS… a tremendously cool html utility

Fixie.js is an open source tool that automatically adds filler content to HTML documents.

Image

Adding lorem ipsum text to HTML documents involves copy-pasting, manual editing, and increasingly unwieldy code.

By interpreting your semantic HTML5 tags, Fixie will automagically add the right type of content in the right places. Headings, paragraphs, links, images, sections… trust me, it’s all there. That way you can focus on your design, instead of finding the right filler content.

A nice example on how this can be useful can be found in the equally clever utility: FlickHoldr
http://flickholdr.com/

Image

FlickHoldr simply gets placeholders related to the site you are developing, by pulling images from flickr based on tags… very simple and elegant…

AngularJS… a selection-change directive… an early implementation

having run into some issue implementing a change handler on the select control without setting the model property… I decided to see how it could be to implement a selectionHandler directive…

I started out with this implementation which obviously is far from best practice and far from ideal yet… next step will be to find the best practice to implement a tag for an entire “combobox”…

HTML

<select ng-datasource="candidateContacts" ng-selection-change="selectContact">
	<option ng-repeat="candidateContact in candidateContacts" ng-selected="candidateContact.id == contact.item.id">
		{{candidateContact.name}}
	</option>
</select>

JavaScript

.directive( "ngSelectionChange", function( $compile ) {
		return function( $scope, $element, $attrs ) {

			jQuery( $element ).change( function( e ) {

				var target = jQuery( e.target );

				var datasourceKey = target.attr( "ng-datasource" );
				var datasource = $scope.$eval( datasourceKey);

				var actionKey = target.attr( "ng-selection-change" );
				var action = $scope.$eval( actionKey );

				var selectedIndex = target.prop( "selectedIndex" );
				var selectedItem = datasource[ selectedIndex ];

				action.call( $scope, selectedItem );
			});
		}
	})

UPDATE
I just stumbled upon the concept of using accessor’s in the directive scopes, that will help me get rid of the redundancy in the declaration of the datasource/iterator…
http://jsfiddle.net/ADukg/10/

UPDATE
I came across this directive when browsing the recently updated documentation system, this will do fine so there is no need to implement a ComboBox since the functionality is covered by the native select directive… http://docs.angularjs.org/api/angular.module.ng.$compileProvider.directive.select