Development

Using Xdebug on windows and PhpStorm

Check which php.ini you are using with  php --ini

Install Xdebug

  • Check which version of PHP are you using, thread safe or not? php -i|grep "Thread"
  • Download the right version for your php version from xdebug.org
  • Copy the downloaded dll into your php extensions, in my case C:/wamp/bin/php/php7.0.7/ext/
  • Edit the php.ini file by adding this :
    ; XDEBUG Extension
    zend_extension="C:/wamp/bin/php/php7.0.7/ext/php_xdebug-2.4.0-7.0-vc14-x86_64.dll"
    
    ; Xdebug features two ways of enabling the profiler, depending on the type of 
    ; application we want to profile. Setting the xdebug.profiler_enable directive 
    ; enables profiling for any application. For web applications, profiling can be 
    ; enabled on demand by specifying a special GET/POST variable or a cookie. 
    ; This can be done using the PhpStorm bookmarklets (or one of the Browser Debugging Extensions) 
    ; and setting the xdebug.profiler_enable_trigger directive to 1 in php.ini.
    ; More at https://confluence.jetbrains.com/display/PhpStorm/Profiling+PHP+applications+with+PhpStorm+and+Xdebug
    
    [Xdebug]
    xdebug.remote_enable=1
    xdebug.remote_port=9000
    
    ; If it is set to 1, then you can enable the profiler by using a GET/POST or 
    ; COOKIE variable of the name XDEBUG_PROFILE. xdebug.profiler_enable needs 
    ; to be set to 0
    xdebug.profiler_enable_trigger=1
    
    xdebug.profiler_enable=0
    xdebug.profiler_output_dir="C:/wamp/logs/profiling"
    xdebug.idekey=PHPSTORM

Using Grunt with requirejs

When using the grunt-contrib-requirejs module, it takes a lot of time to compile the final file. I needed a solution a quicker solution which uses grunt copy to copy files from bower modules folder to my target assets directory.

I can do this manually but I have to update 2 files each time I add a new requirejs dependency; I have to include it in main.js and also in the Gruntfile.js.. That’s a lot of work 🙁

So I finally came up with this approach that does those process above: A nice snippet that allows faster requirejs development.

In the main.js I have a sctructure like this:

require.config({
    paths: {
        /* jQuery */
        'jquery': '../../.build/bower_components/jquery/dist/jquery.min',

I want this to become:

require.config({
    paths: {
        /* jQuery */
        'jquery': 'vendor/jquery.min',

Also, I need the files to be copied to the vendor folder. So In the Gruntfile.js I have:

module.exports = function (grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        www: "../theme/",
        bower: "bower_components/",
        assets: "../.assets/",
        jsFromBower: "",
...
...
// Update paths in main.js
replace: {
    mainjs: {
        options: {
            patterns: [
                {
                    match: /..\/..\/.build\/bower_components\/.*\//mg,
                    replacement: 'vendor/'
                }
            ]
        },
        files: [
            {
                expand: true,
                flatten: true,
                src: ['<%= assets %>scripts/main.js'],
                dest: '<%= www %>assets/scripts/'
            }
        ]
    }
},
...

...
/**
* The dev task.
*
* It checks the main.js file to get bower_components and replaces the entries
* inside of the main.js file. This allows quicker theme developpement.
*/
grunt.registerTask('dev', 'description', function () {
var path = require('path'),
files = 0,
www = grunt.config.get('www'),
assets = grunt.config.get('assets'),
mainjs = grunt.file.read(assets + 'scripts/main.js'),
regexPattern = /(bower_components\/.*)'/gm,
matchArray;

/**
* Loop the main.js file: Since our regular expression uses the "g" flag,
* we can use the exec() method multiple times to find successive matches
* in the same string
*/
while ((matchArray = regexPattern.exec(mainjs)) !== null) {
if (matchArray.index === regexPattern.lastIndex) {
regexPattern.lastIndex++;
}

var filePath = matchArray[1] + '.js',
file = path.basename(filePath);
grunt.file.copy(filePath, www + 'assets/scripts/vendor/' + file);

files++;
}
//grunt.config.set('jsFromBower', files.join())

grunt.log.ok('Coppied ' + files + ' js scripts from "bower_components" to "theme/assets/scripts/vendor/"');

grunt.task.run(['imagemin', 'copy', 'replace', 'compass:dev', 'cssmin', 'watch']);
});

Perfect!

Quick Tip: Search shell for command-line history

While using Babun (a windows shell) sometimes I need to retype a previous command, so i just use the up/down arrow keys to navigate the commands. This is a nice feature, but what about retyping a command that you have used long time ago? no need to keep pushing the arrow keys to get it, just use this quick keyboard shortcut to search through previous commands:

  1. Open your shell and press ctrl + r
  2. Start typing a command
  3. You will have some suggestions
  4. Type again ctrl + r to narrow the suggestions

This is called reverse-i-search and it is available in terminal and bach etc.

From Stackoverflow.com:

Press Ctrl+R and type ssh. Ctrl+R will start search from most recent command to old one (reverse-search). If you have more than one command which starts with ssh, Press Ctrl+Ragain and again until you find the match.

Once you’ve found the match you can press Enter to execute the command or left / right cursor to just select the text of the command.

There is no default reverse option for Ctrl+R to invert the direction of the search but here you will find some suggestions about it.