Create a JavaScript Framework using Mootools – Part 4: Use Packager

Use Packager

“Packager is a PHP 5.2+ library to concatenate libraries split in multiple files in a single file. It automatically calculates dependancies. Packager requires a yml header syntax in every file, and a package.yml manifest file, as seen on the MooTools project.”

Clone Packager using git command line:

git clone https://github.com/kamicane/packager.git

Framework tree so far:

YourFramework/
–|-mootools-core/
–|-mootools-more/
–|-yourLibrary/
–|-packager/
—-|-packager (Command line file)
—-|-packager.php (Core Library)

Update your .yml file

Open your .yml file: YourFramework/yourLibrary/package.yml and insert the required properties:

name: yourLibrary
sources:
 - "Source/MyFirstClass.js"

Name is the “Package” name used by Packager to reference your files.
Sources is the list of Classes you want your Framework to reference.

Update MyFirstClass.js

You now know that in order for the packager to work you will need to add yml header syntax in every Classes you create. Open your file and add the header:

/*
---
name: MyFirstClass
description: The description is not required
requires: [Core/Element, More/URI, /MySecondClass]
provides: [MyFirstClass]
...
*/

var MyFirstClass = new Class({
	// Class constructor
	initialize : function()
	{

	}
});

Please note how to reference another class from another package. Core/Element will get the Element Class within the Core package. You can also reference your own package using yourLibrary/MySecondClass or /MySecondClass

Build your Framework

Everything is now setup for you to use packager. You have two choices, either use the command line or create a php file that will handle everything for you.

Using command line (Does not work on Windows)

  1. Register packages:
    $ packager/packager register mootools-core
    the packager Core has been registered
    
    $ packager/packager register mootools-more
    the packager More has been registered
    
    $ packager/packager register yourLibrary
    the packager yourLibrary has been registered
    
  2. Build yourlibrary.js:
    //  Includes all Classes from Core, More and yourLibrary
    $ packager/packager build Core/* More/* yourLibrary/* > yourlibrary.js
    
    // Includes only few Classes and their dependencies
    $ packager/packager build Core/Core More/Fx.Accordion yourLibrary/MyFirstClass > yourlibrary.js
    

You will find more information about how to use the command line in the packager repository.

Using php

Create a build.php file in the root of your framework and insert the following lines inside.

<?php
// include the packager library
require dirname(__FILE__) . '/packager/packager.php';

// List of Package needed
$packages = array('mootools-core', 'mootools-more', 'yourLibrary');

// Register all the packages needed to create your Framework
$pkg = new Packager($packages);

// List of Component needed for Core. These are just examples, you might need more
$core = array('Core/Core', 'Core/Array', 'Core/String');

// List of Component needed for More. These are just examples, you might need more
$more = array('More/Fx.Accordion', 'More/URI', 'More/Fx.Scroll');

// List of Component needed for More
$yourlibrary = array('yourLibrary/MyFirstClass', 'yourLibrary/MySecondClass');

// List of all Component needed
$components = array_merge($core, $more, $yourlibrary);

// Create the yourlibrary.js file
$pkg->write_from_components('yourlibrary.js', $components);
?>

Sources

Create a JavaScript Framework using Mootools – Part 3: Create your first Class

Create your first Class

Let’s create our first Class named MyFirstClass. For this example I will reuse a code from a previous post: Mootools Tutorial: Create a Class.

var MyFirstClass = new Class({
	// Class constructor
	initialize : function()
	{

	}
});

Framework tree so far:

YourFramework/
–|-mootools-core/
–|-mootools-more/
–|-yourLibrary/
—-|- Source/
——|- MyFirstClass.js
—-|- package.yml (explained step 4)

Create a JavaScript Framework using Mootools – Part 2: Create your Package

Create your Package

Now it is time for you to create your own package.

  1. Create your library folder (yourLibrary/)
  2. Create a “Source” folder inside
  3. Create an empty package.yml file (explained Part 4)

Framework tree so far:

YourFramework/
–|-mootools-core/
–|-mootools-more/
–|-yourLibrary/
—-|- Source/
—-|- package.yml (explained Part 4)

Create a JavaScript Framework using Mootools – Part 1: Clone Mootools Repositories

I always wanted to know how to create a JavaScript framework based on Mootools. I decided to create one during an internal contest in my company to show my peers how simple and how valuable it could be to our web internal projects.

I decided to divide this article into 5 parts:

Clone Mootools Repositories

Mootools Core Classes

Core contains useful classes such as Element(Control the DOM), Request(Ajax requests) or Fx(for special effects). The first thing you will need to do is create a folder for you framework (YourFramework/), get inside and clone Core using git command line:

cd YourFramework/
git clone https://github.com/mootools/mootools-core.git

Framework tree so far:

YourFramework/
–|-mootools-core/
—-|- Source/
—-|- package.yml (explained Part 4)

Mootools More Classes

More is more UI based and contains classes such as Accordion, Tip, URI or Spinner. Same thing as for Core, you will need to clone using git command line:

git clone https://github.com/mootools/mootools-more.git

Framework tree so far:

YourFramework/
–|-mootools-core/
–|-mootools-more/
—-|- Source/
—-|- package.yml (explained Part 4)

Xampp – Open SSL – Don’t know how to get public key from this private key

When enabling OpenSSL you might get this error message if you use Xampp on Windows. Follow this steps to resolve the problem:

  1. Stop your Apache.
  2. In the folder `xamppphp` you will find two DLL: libeay32.dll and ssleay32.dll. Copy them into the folder `xamppapachebin`
  3. Open the `xamppphpphp.ini` file and remove the semicolon in front of `extension=php_openssl.dll`
  4. Start you Apache

Dependency injection

The Dependency Injection is a complicated term that define a simple idea everybody is using with or without knowing it.

I will try in this post to share the essential and explain it as simple as possible.

What is Dependency Injection (DI)?

A DI is a popular design pattern for large scale Software. The purpose is to simplify the deployment and the Unit tests. However to do so you will need to create a more complex architecture! Before using this design pattern ask yourself if you need it. If your Software can be used on different platforms and configurations you probably need it, if not then it is up to you.

Exemple using PHP

Let’s say your Software is about boats and in order to create a boat Object you need to establish a Database connection.

You naturally create

Class Boat
{
	public function __construct()
	{
		$this->db = new Database('myHost', 'myDb', 'myUser', 'myPassword');
	}
}

As you can see in that example the Boat Class instantiate itself the Database instance with its own parameters. Boats Objects are dependant on the Database Class and its four hard-coded parameters. Without them the database connection is corrupted.

In the future let’s say that you have more Objects that use the same code across your platform. You have Boat, Car, Bus, Plane etc. with the same hard-coded dependency.

If you want to change the Database parameters you will need to go to all your files and change the dependency. This is really bad behaviour when it comes to fair large Software.

Class Boat
{
	public function __construct(String $host, String $db, String $user, String $pass)
	{
		$this->db = new Database($host, $db, $user, $pass);
	}
}

Now we added parameters to the constructor. The same four values are now provided by the piece of code that creates the Boat instance. If you want to change the Database parameters in the future you will not have to change Boat code.

Are we done? Well this is a bit better but our Boat Class is still depending on the Database Class and the four same values.

What happen if in the future you want to use another Database Class? Well once again you will need to change your code…We can do better than that!

Class Boat
{
	public function __construct(Object $db)
	{
		$this->db = $db;
	}
}

In this example our Boat Class is no longer dependent on the Database Class or the four previous values! The piece of code that creates a Boat Class has to inject the Database Object.

Sources

3 awesome CSS Frameworks [UPDATED]

1. Bootstrap

Bootstrap is a CSS Framework created by ex-Twitter Engineers: @mdo and @fat. For me it is the best Open Source CSS Framework that you could find, it includes a 12 columns grid system, base CSS (For cross browser compatibility), HTML components and a lot of useful JavaScript.

Bootstrap is fully Responsive, Cross Browser compatible and have the biggest community (around 14000 fork) working to improve it. Some companies are even surfing on Bootstrap popularity such as bootswatch that creates Free customization for Bootstrap or jetstrap that helps you create usable mockups.

Grid System

Bootstrap is based on a width of 940 pixels(Depend on the @media queries you use: The screen size) with a 12 columns grid.

Here is the html if you want to create a three columns row.

<div class="container">
    <div class="row">
        <div class="span4">1/3</div>
        <div class="span4">1/3</div>
        <div class="span4">1/3</div>
    </div>
</div>

Base CSS

All the basic CSS stuff: Typography, Form, Button, Table etc. The purpose being to have the same style across different Browsers (IE, Chrome, Firefox, Safari etc.).

Components

  • Dropdowns: Toggleable, contextual menu for displaying lists of links.
  • Button groups
  • Button dropdowns
  • Navs: tabs, pills, and lists.
  • Navbar: Support for a project name and basic navigation.
  • Breadcrumbs: Helps you navigate through your website
  • Pagination
  • Labels and badges
  • Typography: Hero unit, Page header etc.
  • Thumbnails: Grids of images, videos, text, and more
  • Alerts: Styles for success, warning, and error messages.
  • Progress bars: For loading, redirecting, or action status
  • Media object: Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.
  • Misc: Lightweight utility components.

JavaScript

All Bootstrap JS plugins require Jquery.

By using Bootstrap you have natively access to all those plugins:

  • Transitions: For simple transition effects.
  • Modal: Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
  • Dropdown: Add dropdown menus to nearly anything.
  • Scrollspy: Automatically updates menus based on scroll position.
  • Tab: Add quick, dynamic tab functionality to transition through panes of local content.
  • Tooltip: Basic tip.
  • Popover: Add small overlays of content.
  • Alert: Add dismiss functionality to all alert messages.
  • Button: Do more with buttons. Control button states or create groups of buttons
  • Collapse: Accordion
  • Carousel: Slideshow
  • Typeahead: Auto-completion
  • Affix: Add a fixed position to certain elements.
Button and Tooltip plugins conflict with JQuery UI Button and Tooltip plugins. Fortunately Bootstarp includes a no conflict mode that you can use like this $.fn.button.noConflict(); before using Jquery UI.

If you want to know more about Bootstrap you can read and share my PPT presentation: Introduction to Twitter’s Bootstrap PPT


2. Foundation

foundation

Foundation is one of the best CSS Framework out there. It includes more or less the same functionality as Bootstrap (Grid System, Typography, fully Responsive, Cross Browser compatible etc.) but is still less popular (8 times less Fork on GitHub).

Grid System

Foundation is based on a width of 1000 pixels(Depend on the @media queries you use: The screen size) with a 12 columns grid.

Here is the html if you want to create a three columns row.

<div class="row">
	<div class="four columns">.four.columns</div>
	<div class="four columns">.four.columns</div>
	<div class="four columns">.four.columns</div>
</div>

3. Blueprint

Blue print is the CSS framework that I used to create this template. It contains css files to create your page scaffolding, to handle typography and beautiful forms. It is base on a 950px width with 24 columns to fit all the modern computer screen.

http://www.blueprintcss.org/

Example

Here is the html if you want to create a three columns page.

<div class="container">
    <div class="span-7 colborder">Here's a box...</div>
    <div class="span-8 colborder">And another box...</div>
    <div class="span-7 last">This box...</div>
</div>

Result


Demo


If you want to go further, a complete comparison of those three CSS Frameworks is available here.

Mootools Tutorial: Create a Class

Step one: Create your HTML/CSS page.

You page must contain a place to instantiate your new class. It happens line 5.

<html>
<head>
<script type="text/javascript">
	window.addEvent('domready', function() {
		var myClass = new MyClass();
	});
</script>
<style type="text/css">
.odd, .even {
	display: block;
	height: 100px;
	width: 100px;
	float:left;
}
</style>
</head>
<body>
	<div id="container">
		<div class="odd"></div>
		<div class="even"></div>
		<div class="odd"></div>
		<div class="even"></div>
	</div>
</body>
</html>

Step two: Create your Mootools Class.

All you need is the initilize function (or constructor).

var MyClass = new Class({
	// Class constructor
	initialize : function()
	{

	}
});

Step three: Let’s add some colors.

In this step we will create a setElementsColor function. The purpose of it is just to give colors to elements in order to be able to see them.

var MyClass = new Class({
	// Class constructor
	initialize : function()
	{
		// Set the element colors
		this.setElementsColor();
	},
	
	setElementsColor : function ()
	{
		// Get odd elements and set the background-color
		$$('.odd').setStyle('background-color', 'yellow');

		// Get even elements and set the background-color
		$$('.even').setStyle('background-color', 'orange');
	}
});

Step four: Let’s set Options.

I want to add options to my Class. The proper way is to add an Object as you can see line 4.

<script type="text/javascript">
	window.addEvent('domready', function() {
		var myClass = new MyClass( {
			message:'this is a specific message'
		});
	});
</script>

To be able to use setOptions() function in your class you will need to implement the Mootools Options Class. Line 12 don’t forget to add a parameter that will get Options from the instance creation. Line 15 set the Options and overwrite options line 7,8 and 9.

var MyClass = new Class({

	// Implement Mootools Options Class
	Implements : [Options],
	
	// create options Object
	options : {
		message:'this is a default message'
	},

	// Class constructor
	initialize : function(options)
	{
		// Set the options
		this.setOptions(options);
		// Set the element colors
		this.setElementsColor();
	},
	
	setElementsColor : function ()
	{
		// Get odd elements and set the background-color
		$$('.odd').setStyle('background-color', 'yellow');

		// Get even elements and set the background-color
		$$('.even').setStyle('background-color', 'orange');
	}
});

Step five: Let’s Play with Options.

Now that options are setup, I want to use them. In this step we will create a function that returns the option “message”

var MyClass = new Class({

	// Implement Mootools Options Class
	Implements : [Options],
	
	// create options Object
	options : {
		message:'this is a default message'
	},

	// Class constructor
	initialize : function(options)
	{
		// Set the options
		this.setOptions(options);
		// Set the element colors
		this.setElementsColor();
	},
	
	setElementsColor : function ()
	{
		// Get odd elements and set the background-color
		$$('.odd').setStyle('background-color', 'yellow');

		// Get even elements and set the background-color
		$$('.even').setStyle('background-color', 'orange');
	},
	
	getMessage : function ()
	{
		// return the message
		return this.options.message;
	}
});

Now let’s use this new function.

<script type="text/javascript">
	window.addEvent('domready', function() {
		var myClass = new MyClass( {
			message:'this is a specific message'
		});
	});
	// Result: 'this is a specific message'
	alert(myClass.getMessage());
</script>

Download

mootools_create_class.zip

Sources

WordPress add_image_size cropping problem: How to enable GD library

While trying to enable the image resizing option in WordPress I figured that the cropping feature of the function below (located in /wp-includes/media.php) did not work on my localhost.

function add_image_size( $name, $width = 0, $height = 0, $crop = false )

Using the code below in functions.php I was able to resize images (really badly though) but unable to crop them.

//This feature enables post-thumbnail support for a Theme
add_theme_support( 'post-thumbnails' );
add_image_size( 'post-image',  708, 400, true );
add_image_size( 'post-image-large',  708, 200, true );
add_image_size( 'post-image-small',  330, 150, true );

After some research I found a solution. In order to solve the cropping problem you will need to install the GD Library. GD is an open source code library for the dynamic creation of images. It supports JPG, PNG and XPM formats. Here is how to install it:

For Windows

All you need to do is to uncomment (remove the semi-colon at the beginning of the line) the line below on your php.ini

;extension=php_gd2.dll

Once it is done save it and do not forget to restart your Apache server.

For Linux

At first I tried to follow the Windows step but I got this error message:

Warning: PHP Startup: Unable to load dynamic library
'/opt/lampp/lib/php/extensions/no-debug-non-zts-20090626/php_gd2.dll'
 - /opt/lampp/lib/php/extensions/no-debug-non-zts-20090626/php_gd2.dll:
 cannot open shared object file: No such file or directory in Unknown on line 0

For Linux it is a little bit more complicated than only uncomment a line. To get it work you will have to install the library with the line below.

apt-get install php5-gd

Then restart Apache and it should work fine.

/etc/init.d/apache2 restart

or if you are using LAMPP/XAMPP

/opt/lampp/lampp restart

Once you have done all of this cropping should work for newly uploaded images. Unfortunetly you will need to re-process old pictures. To do so a great solution is to use the Regenerate Thumbnails plugins for WordPress.

Sources: