Złe strony JavaScriptu – new oraz this

Cześć!

Słowem wstępu…

Obiecałem wam ostatnio, że dodam wpis w ciągu dwóch tygodni. Jednak pisząc ostatniego posta zapomniałem, że za chwilę mam ślub i podróż poślubną…

Ah ten czas szybko leci! Wydarzenia te wydłużyły proces produkcji tego artykułu. Za co z góry przepraszam!

Co dzisiaj?

Rozważymy dwa problematyczne elementy JavaScriptu. Operator new oraz słowo kluczowe this.

Brak operatora new

Konstruktor to zwykła funkcja. Co się stanie gdy pominiesz operator new?

Czytaj dalej Złe strony JavaScriptu – new oraz this

ESLint – install and config – PhpStorm/WebStorm and git pre commit hook

Hello there! It’s been awhile since last post. Sorry 🙁

Let’s talk about JavaScript linting. If you don’t know what is it – go to wikipedia.

Quick Introduction

Currently we have four linting tools available:

Czytaj dalej ESLint – install and config – PhpStorm/WebStorm and git pre commit hook

Running and debugging Karma in PhpStorm / WebStorm

Hello!

Recently I wrote a post about configuring the Karma with RequireJS and PhantomJS (http://damian.dziaduch.pl/2015/09/12/karma-among-with-jasmine-requirejs-and-phantomjs/).

Today I’d like to move on and use the Karma inside the IDE instead of terminal. Before we start make sure you have installed & enabled Karma plugin and JavaScript debugger plugin in PhpStorm. I’m going to work on my previous example.

Czytaj dalej Running and debugging Karma in PhpStorm / WebStorm

PhpStorm Refactoring tutorial, part 3 – moving the class

Welcome in third part of my tutorial!

Today we are going to learn common thing while code refactor – class movement.

What I always did was to manually move the file in the Finder and then changed it’s namespace in the IDE. Finally I had to search whole project for class name etc. But PhpStorm can do all of that with one simple action.

I’m going to move the class \app\models\User to \common\models\User (Yii2 project).

Let me show you the beginning of my class:

<?php
namespace app\models;

use yii\base\Exception;
use yii\base\Model;
use yii\base\NotSupportedException;
use yii\web\IdentityInterface;

class User extends Model implements IdentityInterface
{

<?php

namespace app\models;

use yii\base\Exception;

use yii\base\Model;

use yii\base\NotSupportedException;

use yii\web\IdentityInterface;

class User extends Model implements IdentityInterface

{

First thing what you need to do is to move the cursor into class name and open refactor menu (right click -> refactor, or press ctrl + t) and choose Move.

Fill the target namespace. I always check two checkboxes, Search in comments and string and Search for text occurrences. This will allows us to refactor the PHPDoc, comments and other places where the class name exists.

Before pressing the Refactor button, I recommend to Preview the changes. All found places you will see on the list like this:

With second mouse button you can exclude results from refactoring. When you’re done, press Do Refactor. Now run your tests. Everything should work like as a charm!

Thank you for reading. Have a good day!

PhpStorm refactoring tutorial – part 2 – method extraction

Hello again.

This will be quick. Let’s take an example:

public function testAction($firstName, $lastName, $address)
{
    $data = ['firstName' => $firstName, 'lastName' => $lastName, 'address' => $address];
    $filteredData = [];
    foreach ($data as $key => $value) {
        $filteredData[$key] = str_replace('!@#$%^&*(', '', $value);
    }

    return $this->render('test', [
        'data' => $filteredData
    ]);
}

public function testAction($firstName, $lastName, $address)

{

$data = ['firstName' => $firstName, 'lastName' => $lastName, 'address' => $address];

$filteredData = [];

foreach ($data as $key => $value) {

$filteredData[$key] = str_replace('!@#$%^&*(', '', $value);

}

return $this->render('test', [

'data' => $filteredData

]);

}

This method is doing too much. We want to extract new method which will filter the data and return the result. Please highlight the marek lines and press Refactor This button (ctrl + t). Choose Extract method. New window will appear. You can now customise your new method – parameters order, visibility, PHPDoc and many many more. Im most cases you only need to add new method name and press enter – IDE fills all needed data for you. In this example I named new method filterData. Here’s the code after quick refactor:

public function testAction($firstName, $lastName, $address)
{
    $data = ['firstName' => $firstName, 'lastName' => $lastName, 'address' => $address];
    $filteredData = $this->filterData($data);

    return $this->render('test', [
        'data' => $filteredData
    ]);
}

/**
 * @param $data
 *
 * @return array
 */
private function filterData($data)
{
    $filteredData = [];
    foreach ($data as $key => $value) {
        $filteredData[$key] = str_replace('!@#$%^&*(', '', $value);
    }

    return $filteredData;
}

public function testAction($firstName, $lastName, $address)

{

$data = ['firstName' => $firstName, 'lastName' => $lastName, 'address' => $address];

$filteredData = $this->filterData($data);

return $this->render('test', [

'data' => $filteredData

]);

}

/**

* @param $data

* @return array

private function filterData($data)

{

$filteredData = [];

foreach ($data as $key => $value) {

$filteredData[$key] = str_replace('!@#$%^&*(', '', $value);

}

return $filteredData;

}

And that’s all :). Enjoy and tuned for next part. Cheers!

PhpStorm refactoring tutorial , part 1

PhpStorm like all JetBrains IDEs has o lot of built in features. And you can add even more with plugins. It provides many refactoring features.

This will be a first part of refactoring tutorial.

We will start from the simple things.

Lesson 1: Extracting a variable and renaming it.

Example code to be refactored:

'use strict';

$('#container').addClass('example');

$('#container').on('click', function () {
    alert('hello');
});

$('#container').remove();

'use strict';

$('#container').addClass('example');

$('#container').on('click', function () {

alert('hello');

});

$('#container').remove();

This code is bad. If you use jQuery object more than once, assign it to variable.

First let’s extract variable. Move cursor to any occurrence of $(‚#container’) in the code and press ctrl+r. Menu will appear, now select Extract variable. IDE gives you ability to replace all occurrences or just the highlighted one. We want to replace all of them. Choose it. Now we have ability to name the variable. IDE suggest names by the code, in most cases it gives correct name, but we can change it :).

Code after refactor:

'use strict';

var $container = $( '#container' );
$container.addClass('example');

$container.on('click', function () {
    alert('hello');
});

$container.remove();

'use strict';

var $container = $( '#container' );

$container.addClass('example');

$container.on('click', function () {

alert('hello');

});

$container.remove();

Next thing. We have extracted the variable but later we decide that current name is not obvious. Naming is very important so we want to change it. Move cursor to any occurrence of variable $container and again press ⌘+r (on Mac) or ctrl+r (on other os). In the menu choose first position, Rename. Place a new name in the popup and do refactor.

'use strict';

var jQueryContainer = $( '#container' );
jQueryContainer.addClass('example');

jQueryContainer.on('click', function () {
    alert('hello');
});

jQueryContainer.remove();

'use strict';

var jQueryContainer = $( '#container' );

jQueryContainer.addClass('example');

jQueryContainer.on('click', function () {

alert('hello');

});

jQueryContainer.remove();

You have ability to search the whole project for occurrences of the variable name in the string / comment and text . Try it by yourself, it’s very handy :).

That’s all for today. See you in the next part.

Karma among with Jasmine, RequireJS and PhantomJS

This time something about JavaScript. Everybody likes JavaScript :P.

I’d like to write quick guide how to set up working tests environment.

First, what we need:

Let get all required things by NPM. Create a package.json with content:

{
  "name": "tests",
  "description": "tests",
  "dependencies": {
    "karma-jasmine": "*",
    "karma-cli": "*",
    "karma-requirejs": "*",
    "karma-phantomjs-launcher": "*"
  }
}

{

"name": "tests",

"description": "tests",

"dependencies": {

"karma-jasmine": "*",

"karma-cli": "*",

"karma-requirejs": "*",

"karma-phantomjs-launcher": "*"

}

Now run the command:

npm install

1	npm install

Great. We have now all required dependencies.

Next thing is to configure Karma. There are two ways of doing this, manually by creating a karma config file or using karma creator (karma init command). I prefer doing it manually. Create a new file and name it karma.conf.js. Here’s my file with comments:

module.exports = function ( config ) {
    config.set( {

        // base path that will be used to resolve all patterns (eg. files, exclude)
        basePath: '.',

        // frameworks to use
        frameworks: [ 'jasmine', 'requirejs' ],

        // list of files / patterns to load in the browser
        files: [
            'tests/main.js', // this is a main file which is booting up our test
            { pattern: 'tests/**/*.js', included: false }, // this is where are your specs, please do not include them!
            { pattern: 'src/**/*.js', included: false } // this is where are your source files, please do not include them!
        ],

        // list of files to exclude
        exclude: [],

        // test results reporter to use
        // possible values: 'dots', 'progress'
        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
        reporters: [ 'progress' ],

        // web server port
        port: 9876,

        // enable / disable colors in the output (reporters and logs)
        colors: true,

        // level of logging
        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO ||
        // config.LOG_DEBUG
        logLevel: config.LOG_INFO,

        // enable / disable watching file and executing tests whenever any file changes
        autoWatch: true,

        // start these browsers
        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
        browsers: [ 'PhantomJS' ],

        // set this to true when your want do to a single run, usefull to CI
        singleRun: false
    } )
};

module.exports = function ( config ) {

config.set( {

// base path that will be used to resolve all patterns (eg. files, exclude)

basePath: '.',

// frameworks to use

frameworks: [ 'jasmine', 'requirejs' ],

// list of files / patterns to load in the browser

files: [

'tests/main.js', // this is a main file which is booting up our test

{ pattern: 'tests/**/*.js', included: false }, // this is where are your specs, please do not include them!

{ pattern: 'src/**/*.js', included: false } // this is where are your source files, please do not include them!

// list of files to exclude

exclude: [],

// test results reporter to use

// possible values: 'dots', 'progress'

// available reporters: https://npmjs.org/browse/keyword/karma-reporter

reporters: [ 'progress' ],

// web server port

port: 9876,

// enable / disable colors in the output (reporters and logs)

colors: true,

// level of logging

// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO ||

// config.LOG_DEBUG

logLevel: config.LOG_INFO,

// enable / disable watching file and executing tests whenever any file changes

autoWatch: true,

// start these browsers

// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher

browsers: [ 'PhantomJS' ],

// set this to true when your want do to a single run, usefull to CI

singleRun: false

} )

};

Basically what you need to change is basePath and files / exclude. But that’s not all. We need to create another file which will run asynchronous our test with RequireJS. Let’s place this file in the tests and name it main.js. This is the only file which is included by karma. Content of the file:

// RequireJS deps
var deps = [];

// Get a list of all the test files to include
Object.keys( window.__karma__.files ).forEach( function ( file ) {
    if ( /(spec|test)\.js$/i.test( file ) ) {
        deps.push( file );
    }
} );

require.config( {
    // Karma serves files under /base, which is the basePath from your config file
    baseUrl: '/base/src',

    // dynamically load all test files
    deps: deps,

    // we have to kickoff jasmine, as it is asynchronous
    callback: window.__karma__.start
} );

// RequireJS deps

var deps = [];

// Get a list of all the test files to include

Object.keys( window.__karma__.files ).forEach( function ( file ) {

if ( /(spec|test)\.js$/i.test( file ) ) {

deps.push( file );

}

} );

require.config( {

// Karma serves files under /base, which is the basePath from your config file

baseUrl: '/base/src',

// dynamically load all test files

deps: deps,

// we have to kickoff jasmine, as it is asynchronous

callback: window.__karma__.start

} );

Variable window.__karma__.files comes from karma.conf.js files section. We need to filter them as we want to require only tests files. The source files will be declared as dependencies of each test file.

Let’s create a example test file tests/exampleSpec.js and put in it:

define( [ 'example' ], function ( example ) {
    "use strict";

    describe( 'example', function () {
        it( 'is defined', function () {
            expect( example ).not.toBe( undefined );
        } )
    } );
} );

define( [ 'example' ], function ( example ) {

"use strict";

describe( 'example', function () {

it( 'is defined', function () {

expect( example ).not.toBe( undefined );

} )

} );

We are defining a spec which has source file as a dependency. RequireJS injects it’s to our spec and we can now test it with Jasmine. How cool is that?

Let’s define our example via src/example.js:

define( function () {
    return {};
} );

define( function () {

return {};

} );

The last thing which need to be done is to export the variable which will tell Karma where PhantomJS binary is:

export PHANTOMJS_BIN=./node_modules/.bin/phantomjs

1	export PHANTOMJS_BIN=./node_modules/.bin/phantomjs

Now let’s run Karma:

node ./node_modules/.bin/karma start karma.conf.js

1	node ./node_modules/.bin/karma start karma.conf.js

Finally you should see something like this:

If you have any problems with PhantomJS – maybe you need to install some libs required by it. Check it’s website for more info. Other solution is to try different browser – Chrome, Firefox etc. But this can’t be done via SSH… 🙂

Any problems, suggestions, feel free to comment.

SSH + XDebug + PhpStorm

Hi.

CLI debugging. I never did that. Until today. My tests started to fail and I had no idea why.

So that’s my story why I started to debug tests in the CLI via SSH.

Here’s a list of ingredients:

PhpStorm,
remote SSH (I’m using Vagrant),
PHP + XDebug.

First thing what we need to do is to configure the PhpStorm.

Open your setting and go to Languages & Frameworks > PHP > Debug > DBGp Proxy.

Fill the field IDE key with key you choose (I chose PHPSTORM and I recommend it).
In the Host field put the IP which is seen by remote (run echo $SSH_CLIENT on the remote to see it).
Default Port is 9000 and you should not change it.

Next thing to configure is Language & Frameworks > PHP > Servers.

Put the server Name.
In the Host field type the IP address, same as on DBGp Proxy.
If you set other Port for DBGp Proxy then change it here.
As we are working on XDebug you don’t have to change the Debugger :).
My remote has different folders structure so I had to set path mapping, probably you will have to do the same.

Ok PhpStorm is ready to go.

Now go to SSH and run this command:

export PHP_IDE_CONFIG="serverName=VAGRANT"
export XDEBUG_CONFIG="remote_host=10.0.2.2 idekey=PHPSTORM remote_connect_back=0"

1 2	export PHP_IDE_CONFIG="serverName=VAGRANT" export XDEBUG_CONFIG="remote_host=10.0.2.2 idekey=PHPSTORM remote_connect_back=0"

In the first line put your Server Name which you’ve just set. In the second just update the remote_host with the IP address and change the idekey to yours.

The last thing to do is to enable listening for debug connections in the PhpStorm. Just click the button in the top right corner:

Ah I forgot, please add some breakpoints! And then you can run your tests / scripts etc.

Enjoy 😀

DevDocs – because your current docs sucks

I’m pretty sure that you use many documentations, for frameworks, languages and libraries. You have to add many pages to favourites or google for them. But there is a solution for this. And it’s ultra practical.

Just go to http://devdocs.io.

Quick info:

multiple docs,
stores all data in the browser storage,
support fuzzy search, yaay!
dark / light theme,
ultra quick.

How to use it? Simply choose docs which you want to have in the left sidebar. Then type something in search bar and instantly you will have the results 🙂 How cool is that?

So scrap all your favourites and start using DevDocs!

Everyday practise

Hi.

As you may know, all programers who want to more effective and productive should train. There are small tests that are called Kata. You should do them every single day.

Here’s my latest discover, excellent site with many Katas.

www.codewars.com

Enjoy! 🙂