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