What is dependency injection pattern, how to understand it?

Dependency Injection (DI) is a design pattern commonly used by many frameworks, and, is a good practice in development.

Understanding dependency injection is like a child game… really!

Let’s take an example with your phone battery. If you have an Iphone you probably have a phone integrated battery that you can’t remove, and, in many other smartphones, you have removable batteries.
All of these phones depend on a battery.

So, dependency injection is the fact of injecting any battery (dependency) in your phone without worrying about its name, its emplacement, its content. We also say that it helps reducing couplage.

Integrated batteries = no DI = high couplage.
Removable batteries = DI = low couplage.

Live example:

//No dependency injection, high code couplage
function phone (){
    $battery = new batterry();
    $battery->on();
}

//With dependency injection, low code couplage
function phone(Service $service){
    $battery = $service->get('battery');
    $battery->on();
}

Without dependency injection, your dependency is integrated inside your method, we say that the dependency and method are coupled. But, what if you need to change the battery class and what if you have dozens of methods like this? Surely you won’t want to update parts of your code everytime.

With dependency injection, you call a kind of service which is binded to a generic battery class. Everytime you’ll have to change the mother class, you’ll have to specify it in your service configuration without modifying your working code.

Edouard Kombo // @edouardkombo. Never stop learning.

What is dependency injection pattern, how to understand it?

What should you expect from php5.5 engine refactoring ?

Maybe you’ve already heard these days about actual refactoring of php 5.5 engine by Zend team.

Even if php is the world leading language for development, more and more serious players are emerging like Facebook with its HHVM.
To stay the longer in the run, it is mandatory to go further than a simple syntax release, it is important to improve performance.

If typical real-life PHP application spends about 20% of the CPU time in memory manager, 10% in hash tables operations, 30% in internal functions and only 30% in VM, the team decided to focuse on memory representation of many data types that won’t impact the all language structure.
That improved some applications performance from 10% to 30%, check this link https://wiki.php.net/phpng.

If tests have shown 20% of improvement for CMS like WordPress (v3.6), 11.7% for Drupal (v6.1), published results concern old cms versions, and like Dmitry Stogov (Mr Performance inside Zend family) said, gain in performances will strongly depend of your application.

So, we are very excited about improvements in php and we’re waiting impatiently, but, this refactoring is only a contribution and we don’t have yet the certitude it will be finally part of php.

The refactoring is still in progress but is enough advanced to test it locally on your machine.
Depending on the framework or cms you work with, you will gain in performance or not.

One advice, just wait.

 

What should you expect from php5.5 engine refactoring ?

Github – Normalize repository line endings on both unix and windows

When all the members of your team assigned to a project are working on the same OS, everything goes fine, but when they are using different OS such as Linux and Windows, you will surely encounter line endings issues in the different commits, that will degrade comparisons tasks.

The solution by example, if your production server is under linux, is to tell your developers under windows to force Github and their IDE apply “LF” line endings (if you use netbeans, check for “show and change line endings”). We will see here how to force Github using LF line endings on Windows (I assume your IDE is configured to save your files in LF line ending).

First, open your console and type

git config --global core.autocrlf false

Go to Github directory


C:\Program Files (x86)\Git\etc

//Give write permissions (if necessary) to these files and open them
.gitattributes
.gitconfig

//In .gitattributes add this line, files you will check will now be normalized
* text eol=lf

//In .gitconfig, set autocrlf to false if it hasn't been done by the previous command
//This option will not set automatically files to Crlf even if in lf before
[core]
    symlinks = false
    autocrlf = false

 

Open your console and apply the generalization to Github core

git config --global core.eol lf

 

Now, every file you will work with, will be cached and committed with LF line endings.
But, maybe you want all your repository and its branches to be updated to correct line endings, right?

Let’s do this, open your console one more time and type this:

//These commands will remove cached files and normalise the current repo branch
git rm --cached -rf .
git diff --cached --name-only -z | xargs -0 git add .

//these ones will normalize all the repo branches
git ls-files -z | xargs -0 rm
git checkout .

That’s all, you will no more have line endings issues in your project.
On the other side, make sure that new developers integrating your team will follow this process.
PS: If no changes appear, reclone your repository.

Good work guys.

Github – Normalize repository line endings on both unix and windows

Symfony2 – how to send video response to twig view

In this tutorial we will learn a very basic tip, how to send a video to twig view, through a controller.

To perform this operation, I assume (for your comfort) that you work with knpGaufretteBundle (filesystem abstraction layer) and LiipImagineBundle if you need it. If you don’t have any of these packages, still get a look to Symfony Filesystem component documentation.

We will only use Symfony based Filesystem component. Let’s see our php function

    /**
     * Respond video source to twig view
     * 
     * @param object $video Video entity object
     *
     * @return \Symfony\Component\HttpFoundation\Response
     */
    public function videoResponse($video){
        //Target service filesystem
        $filesystem     = (object) $this->get('your_service_filesystem');
        
        //Get the video filetype
        $fileType       = (string) $video->getFiletype();
        
        //Fetch binary video content
        $content        = (string) $filesystem->read($video->getPath());
        
        return new Response($content, 200, array(
            'Content-Type'        => 'video/' . $fileType           
        ));
    }

What we’ve done here is that, we sent an http header with a content type of the video (mp4, ogg, webm…) containing the video content. When you’ll access this url, the video will be directly accessible in your browser.

In your twig, just write this:

    <video id='video' autoplay loop controls='true'>
        <source src="{{my_video_path}}"  type="video/mp4">
        <source src="{{my_video_path}}" type="video/webm">
        <source src="{{my_video_path}}"  type="video/ogg">
    </video>

 

That’s all :).

Symfony2 – how to send video response to twig view

VanillaJS framework – Tutorial

You wanna have fun, right? I’ll give you fun :).

VanillaJS is not a framework, it is your native javascript embed in your browser, everyone already use it from Google to Yahoo and Facebook and… everyone who develops with Javascript.

You wanna learn more on it? Go to official VanillaJS website (lol) http://vanilla-js.com/

That’s all guys, have fun and a great great great day :).

VanillaJS framework – Tutorial

3 reasons a good developer should start blogging

The true question is why wouldn’t you start blogging?

Blogging as a developer gives you a lot of opportunities to serve new generations and your carreer.

1. Blog what you’ve learned, blog problems and solutions

To get where you are, someone got to teach you something. This person can be a teacher or simply a person like you, who has learned something from someone else and just wanted to share his knowledge with you.
If you share what you’ve learned, someone else will always benefit from you, and will be incited when time will permit, to share himself his knowledge.
This is how works open source community.

2. Keep up to date

In order to learn something, you would have encountered some problems that needed to be solved. When you’re in a search of resolving a problem, you allow yourself to discover new practices, new methods, new languages, new opinion leaders, new frameworks… you stimulate your brain and keep up to date, and this is the unique condition to last in this work, and, maybe to become an opinion leader.

3. Your blog is your cv

Imagine you just have finished learning a new framework, and want to share one or many tutorials on it. This is an excellent way to make all your experiences in your cv be easily verified. The more you will publicly share your aptitude in new tools and methods, the more you will gain reputation.

These are quick advantages I see for developers who want blogging. There are many other advantages, but i don’t want to go further on them.

Also, a blog isn’t enough, you have to be on Github, stackoverflow, twitter or any other social network made for.

Would you now start blogging?.

Edouard Kombo // @edouardkombo. Never stop learning.

3 reasons a good developer should start blogging

AngularJS – your first Hello world tutorial

Hello there, today, we will start a basic entry to the AngularJS framework.

But, before that, I encourage you to learn the origins of the framework on Wikipedia here http://en.wikipedia.org/wiki/AngularJS, the differences between JQuery and AngularJS i have posted here https://creativcoders.wordpress.com/2014/05/11/differences-between-jquery-and-angularjs/.

This first tutorial is very simple and basic, we will just show our first “Hello world” with AngularJS, later I will show you more complex tips.

We will not use css in this example, just create a specific folder in which you will create an index.html file and a simple helloWorld.js file in a directory called “js”, like this.


js/helloWorld.js
index.html

Your index.html template must look like this:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Angular - first hello world</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
</head>
<body>
    <!--[if lt IE 7]>
        <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <section>
        <header id='header'>
            <h1></h1>
        </header>
    </section>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script src="js/helloWorld.js"></script>
</body>
</html>

Ok, you see in this example that we already have included angular.js from Google and our helloWorld.js script.
Our job will be to update h1 tag and apply it a dynamic text… “Hello world!”, let’s go!

To tell AngularJS that we will work in the body, we have to decorate it with a directive called ‘ng-app’, let’s name it ‘hello’, just like this:

<body ng-app='hello'>

Then, we have to create in js/helloWorld.js, an empty ‘hello’ Angular module that will initiate angularJSin the body.

var app = angular.module('hello', []);

AngularJS now knows that we will manipulate the body with the hello module, but we want the “Hello world!”text in the h1 tag to be dynamically modified.
We will then target he head tag “section” upon h1, and decorate it with a controller directive we will name ‘helloController’, just like this.

<section ng-controller='helloController'>

Now, we will attach to hello module, a helloController.

var app = angular.module('hello', []);

//$scope means that we attach directly the view in the controller
//We will be able to do DOM manipulations with $scope
app.controller('helloController', function($scope)(){
});

Right! you know how to attach an Angular module to a body and a controller to a tag, now, we need to attach a dynamic data (model) to h1 tag.

To do this, we will work with models, models in AngularJS help you manipulate datas through ng-model directive in the view. You only have to change datas in the specified controller through the scope.

Simple example, if you have to change a tag var or an input value, you have to specified a directive called ng-model to it, and a corresponding var like this “{{myModel}}” in the value field.

Concrete example, we specify a model directive we name “welcome”.

//Like many other templating engines we use double brackets to define vars
//When defined in the controller, the var model "{{welcome}}" will be dynamically replaced
<h1 ng-model='welcome'>{{welcome}}</h1>

In the controller, we simply add this to the scope

var app = angular.module('hello', []);

//$scope means that we attach directly the view in the controller
//We will be able to do DOM manipulations with $scope
app.controller('helloController', function($scope)(){
    $scope.welcome = 'Hello World!';
});

This is how your complete html code must look like.

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Angular - first hello world</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
</head>
<!-- ng-app is a directive that specifies that we are using angular.js -->
<body ng-app='hello'>
    <!--[if lt IE 7]>
        <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <section ng-controller='helloController'>
        <header id='header'>
            <h1 ng-model='welcome'>{{welcome}}</h1>
        </header>
    </section>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
     <script src="js/helloWorld.js"></script>
</body>
</html>

Congratulations, you’ve just done with success your first hello world tutorial with AngularJS, wasn’t it so simple?

More tutorials will come soon, keep in touch.

AngularJS – your first Hello world tutorial