GUI Client tool for Closure Compiler

Google built some excellent tools for JavaScript development. One of them is the Closure Compiler. A common development scenario is at the end of every project when we finally deploy the code in production we usually minify and merge all .js files into single or fewer numbers of files. To do this I normally use Closure Compiler, but there is a small problem like if you use the closure compiler’s online version you can’t actually minimize the .js files on your local machine, there is of-course a offline version of the compiler but you have to use that from command line, and which is not much user friendly specially if you are in a hurry or not using any automated build tool, So I decided to fill this gap, and built this GUI wrapper for the great Closure Compiler.

You can use this from your pc, to run this you will need java (jre) in your pc, i built this using java 7 so earlier versions of java will NOT be able to run it.

Download:

No installation required just download and click. Grab the tool from here, the jar version is for all operating system, but i also built an exe of it but it will still require java. (jre 7)

How it works:
At first i tried to reverse engineer the whole compiler just like i did for the css-minimizer but well its a huge thing, thousands of Classes inside it. I felt lost, but there was a easy way out, Google provides a REST api for it, and I decided to use it. So that means this GUI tool can’t work offline (unless you select the merge option), when you select .js files and press the compile buttons it merge all the js files and requests Google and then saves the response.

One important thing, closure compiler checks for errors and warning. So if there is any error or warning in your JavaScript it will be included in to the response. So always check the compiled file before including into the project.

Tips: Hold Ctrl button to add multiple JavaScript files in the list.

Okay now try it. and give me feedback and suggestions. Thanks

GUI tool for Google Closure Compiler
Requires Java 7 to run.

Changes in HTML5

There are lots of excitement about new HTML5 among developers. HTML5 is still under specification, and is currently in the Working Draft stage in the W3C, but many aspects of HTML5 are now stable and can be implemented in browsers

Document Type
The <doctype> for an HTML document has changed from its verbose DTD reference to a much simpler format, simply stating the document is an HTML document type:
<!doctype html>

Character Encoding
The <meta> tag for a document allows you to set the character encoding using the simple charset attribute, replacing declarations such as:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
with
<meta charset="UTF-8">

Script and Link Elements
The <script> element has been stripped down, removing the need for the type attribute. The reason for this is that scripts are typically written in JavaScript. The <link> element has lost its type attribute due to the prevalence of CSS.

Some of the new elements in html5 here:

<article> An independent piece of content for a document e.g. blog entry,forum entry
<aside> A piece of content that is somehow related to the rest of the page
<audio> Audio media content
<canvas> A component for rendering dynamic bitmap graphics on the fly. e.g games
<command> A command that the user can invoke: a button, radio button or checkbox
<datalist> Together with the new list attribute for the <input> element can be used to make combo boxes
<details> Additional information or controls that the user can obtain on demand, to provide details on the document, or parts of it
Used for plug-in content
<figure> A piece of self-contained flow content referenced as a single unit from the main flow of the document
<figcaption> Caption for a <figure>
<footer> Footer for a section; may contain information about author, copyright information, etc.
<header> A group of introductory or navigation aids
<hgroup> Header of a section
<keygen> A key pair generation control for user authentication in forms
<mark> A run of text in one document marker or highlighted for reference purposes
<meter> A measurement, such as disk usage, when the minimum and maximum values are known.
<nav> A section of the document intended for navigation
<output> Output such as a calculation done through scripting
<progress> Represents progress of a task such as downloading or performing other expensive operations
<section> A generic document or application section
<source> Used to specify multiple media resources on elements such as <audio> and <video>
<time> Date and time definition
<video> Video media content

NOTE: The input element’s type attribute now has these new attributes: color, date, datetime, datetime-local, email, month, number, range, search and tel.

REMOVED ELEMENTS
The following elements have been removed from HTML5 because they are more effectively represented using CSS: basefont, big, center, font, s, strike, tt and u.

Other elements have been removed because they have a negative effect on usability and accessibility. These include: frame, frameset and noframes.

This last set of elements has been removed due to their lack of frequent use. They also caused confusion at times:
acronym (use abbr for abbreviations), applet (object replaces its use), isIndex and dir (use ul instead).

Creating a FaceBook like profile badge

You know what a facebook profile badge is, right? (if no, just look here on sidebar my facebook profile badge). Well creating a profile badge like that is really easy. Here i created a small script to show the basic of how this thing works. So, here is the profile badge class

<?php
class profile_badge{
	public static function calc_image_height($strs,$limit){
		$total_line=0;

		foreach($strs as $str){
			$len=strlen($str);
			$div=(int)($len/$limit);
			$mod=$len%$limit;
			if($mod>0){
				$total_line=$total_line+$div+1;
			}else{
				$total_line=$total_line+$div;
			}
		}

	return ($total_line*15)+40;
	}

	public static function get_badge($text_name,$text_email){
	$CHARLIMIT=19;
	$label_name='Name:';
	$label_email='Email:';

	$logo="http://127.0.0.1/logo_fade.jpg";
	$extra=profile_badge::calc_image_height(array($text_name,$text_email),$CHARLIMIT);

	list($width,$height)=getimagesize($logo);
	$im=imagecreatefromjpeg($logo);

	$bg=imagecreatetruecolor($width,$height+$extra);

	$black=imagecolorallocate($bg,0,0,0);
	$white=imagecolorallocate($bg,255,255,255);
	$gray=imagecolorallocate($bg,124,124,124);
	$bdr=imagecolorallocate($bg,218,218,218);

	imagecopymerge ($bg,$im,0,0,0,0,$width,$height,100);

	imagefilledrectangle ($bg,0,$height,$width,$height+$extra,$white);
	imagerectangle ($bg,0,0,$width-1,$height+$extra-1,$bdr);

	$font='tahoma.ttf';
	$pad=15;
	$text_pos=$height+$pad;
	imagettftext($bg, 10,0,5, $text_pos, $black, $font, $label_name);
	$text_pos=$text_pos+$pad;

	if(strlen($text_name)<=$CHARLIMIT){
		imagettftext($bg, 10,0,5, $text_pos, $gray, $font, $text_name);
		$text_pos=$text_pos+$pad;
	}else{
		$name_array=str_split($text_name,$CHARLIMIT);
		foreach($name_array as $text_name){
			imagettftext($bg, 10,0,5, $text_pos, $gray, $font, $text_name);
			$text_pos=$text_pos+$pad;
		}
	}

	imagettftext($bg, 10,0,5, $text_pos, $black, $font, $label_email);
	$text_pos=$text_pos+$pad;

	if(strlen($text_email)<=$CHARLIMIT){
		imagettftext($bg, 10,0,5, $text_pos, $gray, $font, $text_email);
		$text_pos=$text_pos+$pad;
	}else{
		$email_array=str_split($text_email,$CHARLIMIT);
		foreach($email_array as $text_email){
			imagettftext($bg, 10,0,5, $text_pos, $gray, $font, $text_email);
			$text_pos=$text_pos+$pad;
		}
	}

	return $bg;
	}
}
logo_fade.jpg

Notice, at line 25, yes that’s my site’s logo image url. Also notice at line 43, yes this my font file. you can use your own font of choice in there. Ok now include that class and call its get_badge function, this way,

$name='Mahabubul Hasan';
$email='uzzal.me@gmail.com';

$bg=profile_badge::get_badge($name,$email);

header("Content-type: image/png");
imagepng($bg);
imagedestroy($bg);

and it generates a output like this:

isn’t it cool? 😉

Installing SVN Server with XAMPP(Apache) on Windows

SVN is the most crucial tool for collaborative development. Many of us like to use for opensource project http://kenai.com or http://code.google.com for SVN but there is a problem if your project is not open source and you might want to setup your own svn server. I am here just showing how simply you can setup a SVN server with XAMPP. Well i am saying about XAMPP just because this is the most popular package(Filezilla, MySql, Apache, Mercury) for php development. If you have a xampp installed (if not go here, download and install) in you machine then follow the steps below:

step1: get a SVN server from here.  This SVN server bundled with an Apache server. Skip that as you already have a Apache server installed in your pc with xampp. Before starting installation it will ask for a repository path, give it a path. (like c:\svn_repository). Continue reading “Installing SVN Server with XAMPP(Apache) on Windows”

Forbidden (deprecated) HTML tags and attributes

There are some older html tags and attributes which has declared deprecated or forbidden by W3C consortium, though all modern browsers still support them but in future they may not. So it is best to know about those deprecated tags and attributes, and best practice is avoid them in your code.

Here is the list of deprecated tags:
<applet>, <basefont>, <center>, <dir>, <embed>, <font>, <isindex>, <menu>, <noembed>, <s>, <strike>, <u>
Here is the list of deprecated attributes: Continue reading “Forbidden (deprecated) HTML tags and attributes”