Development

Disable Xdebug when installing Composer packages

Find  the folder where composer is installed:

which composer

Open the composer file and replace:

php "${dir}/composer.phar" $*

with

php -n -d extension=C:/wamp/bin/php/php7.0.7/ext/php_openssl.dll -d extension=C:/wamp/bin/php/php7.0.7/ext/php_pdo_sqlite.dll -d extension=C:/wamp/bin/php/php7.0.7/ext/php_mbstring.dll "${dir}/composer.phar" $*

The parameters we passed to php are:

  • -d foo[=bar] => Define INI entry foo with value ‘bar’
  • -n => No configuration (ini) files will be used

I passed to the -d parameter the extension that I need php to load whenever it executes the composer command, feel free to change those to your needed extensions.

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.