Tag Archives: JavaScript

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/

Tagged

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/

Tagged , , , , ,

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/

Tagged , , , , ,

Brackets…. recent-projects… another useful extension

When (or if) you start using Brackets now, you see that its still very early stuff.

This is deliberate and with full intend of the team behind it, in order to truly make it a community driven effort and to ensure that the project stays aligned with its commission: developed for developers by developers.

This also means that its far from the IDE you may be used to still has a long way to go before its a fully fletched code editor at the level we are used to from other tools…

Anyways, one of things you will start missing is the management of Projects, now luckily Narciso Jarmilo (member of the Brackets team and employee at Adobe), has implemented a simple way of maintaining a list of the most recent projects.

Not only does it provide you with a shortcut to the most recent projects you have been working on, but it also illustrates how simple it is to add functionality that you find necessary.

Image

Having a rich extensibility model has proven over and over again to be more critical to the viability of a tool than having it being springloaded with code-editor-killer features out of the box… and Brackets has done exactly that.

If there is something you see missing, you can easily build it yourself and share it back into the community… thats the groove of Brackets and that’s actually pretty cool…

A 3rd thing Narciso’s extension does, is to illustrate how its possible to integrate your extension with the ProjectManager… now this was what actually brought me to his extension in the first place, because I will now start building my own extension using the notion of projects…

Check out Narciso’s extension here…
https://github.com/njx/brackets-recent-projects

Tagged , ,

brackets… another extension… annotation

To get into extending and adding functionality for Brackets is impressively easy…

David Deraedt has undertaken the feat of implementing an Annotation Extension which will provide developers with shortcuts to adding comments to their Brackets files…

Here is how it looks when I run it on my machine…

Obviously, the comment inserted is very simple, however remember this is very very early work and if you take a look at the code for generating this, you will appreciate the simplicity of the Brackets Extensibility Model and see that the entire extension is a mere 133 lines of JavaScript code at this point (including comments).

Check out the extension here…
https://github.com/davidderaedt/annotate-extension

…or have a look at other extension initiatives here…
https://github.com/adobe/brackets/wiki/Brackets-Extensions

…and please don’t forget, if you dont see what you like or need, its simple to just do it yourself using HTML, CSS and JavaScript combined with the elegant Extensibility API’s of Brackets.

Tagged , ,

BRACKETS… Your First Extension

…at the core of Brackets, you find an unparalleled open ness and tremendously awesome technology stack !

On top of the awesomeness of the technology stack and in the middle of some tremendously cool features build into Brackets by the team, you find a very simple extensibility model which allows anyone with knowledge of the basic Web Technologies, to write their own custom extensions in Brackets itself and using the same technologies we are using for the system we are making with Brackets…

Basically, every developers wet dream come true…

To get you started, the team behind Brackets has made a Quick-Start tutorial for getting started writing you own extension… it’s naturally a Hello World extension.

It will take you less than 5 mins to go through every step in the tutorial (including downloading the only 34 MB Brackets binary) and tweaking Mr. Hello World to say your name and make another or two small tweaks…

You can find the tutorial here…
https://github.com/adobe/brackets/wiki/How-to-Write-Extensions

The source code for the tutorial are made available, and can be found here…
https://github.com/adobe/brackets/wiki/Simple-%22Hello-World%22-extension

Now, obviously popping up an Alert in response to a MenuClick is poor UI, so don’t make that mistake; but instead take a look at the Extension UI Guidelines:
https://github.com/adobe/brackets/wiki/Extension-UI-Guidelines

If you’re working on anything big, its recommended you post to the brackets-dev Google group or the #brackets IRC channel on freenode early on so you can get feedback (there may be others working on similar ideas!).

For more detail on Brackets internals, see Brackets Development How Tos.
If you’re interested in contributing to the core Brackets codebase, see How to Hack on Brackets.

Tagged , , ,

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

Tagged ,

How to implement a BLINK tag in AngularJS

One of the features of early HTML that is so uncool that it’s so extremely cool now that it has taken epic proportions, is that much celebrated as well as hated BLINK tag…

Now, it disappeared from most implementations due to the massive criticism it received, In 1996 Jakob Nielsen even described the element as “simply evil” in his Alertbox column Top Ten Mistakes in Web Design.

Anyways, its back for the ones who think it could be a fun little thing to add anywhere, and now with AngularJS… let me just add, that I think it would be a horrible idea to put it in any website short of being a tribute website to horrible websites from the 80′s…


var blink = angular.module('blink', [])
    .directive('blink', function($timeout) {
    return {
        restrict: 'E',
        transclude: true,
        scope: {},
        controller: function($scope, $element) {
            function showElement() {
                $element.css("display", "inline");
                $timeout(hideElement, 1000);
            }

            function hideElement() {
                $element.css("display", "none");
                $timeout(showElement, 1000);
            }
            showElement();
        },
        template: '<span ng-transclude></span>',
        replace: true
    };
});​

Using it from HTML would be as simple as this…


<div ng-app="blink">
    <blink>Forward Thinking</blink>
</div>​

You can check out the JSFiddle here…
http://jsfiddle.net/qy7Bt/59/

The initial implementation was created by Søren Kyndi-Wiuff and it was then later refined to support a more mature version of AngularJS by Misko Hevery, both guys heavy-weight contributors to AngularJS… helped along the way by Mr. Ganaraj who was kind enough to point out and illustrate deprecated parts of the AngularJS…

Check out AngularJS if you haven’t done so yet and you are in the process of working on HTML systems, this is how HTML would have been if it had been created for Applications…
angularjs.org

Tagged , , ,

Trello… now with an API (Beta)

Trello is not only a very useful task management system, incorporating SCRUM board approach with HTML5 and an exceptional nice look and feel… now it also has a very elegant REST API.

Check it out…
https://trello.com/docs/

Here is a quick sample on how to retrieve the cards for the current user… using the Client.js JavaScript class that Trello is providing asn easy way to get started…
http://jsfiddle.net/nNesx/

They have opened up their development plans in the form of their internal development board…
https://trello.com/api

Tagged , ,

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/

Tagged , ,
Follow

Get every new post delivered to your Inbox.

Join 522 other followers