DEV Community: codingfix

Announcing Language Switcher for Transposh plugin

codingfix — Mon, 22 Feb 2021 12:54:54 +0000

As many other developers, when I discovered Transposh plugin I immediately fell in love with it! It allows automatic translations out of the box but it also gives you a granular control on the translated text, allowing you to edit every single phrase.
Okay, you already know that so it's not necessary for me to repeat here why we all love Transposh so much.

But I have to confess something: I was not happy with the language switcher widget. I develop small websites and usually I need to use from 2 to 4 different languages. Building non-WordPress websites, I used to put just some flag in the main navigation menu and wished I could do the same using WordPress and Transposh.

The artisan way

At first, to get that result, I used a couple of useful plugins and just a bit of javascript.

I won't waste your time here to talk about this: if you're interested you can find a detailed description here and here

The WordPress way

The "artisan way" was absolutely boring to me: for each new website I had to repeat every step just to get 2 or 3 flags in my menu. I wanted to get my flags just installing a plugin and maybe adjusting some settings... But that plugin didn't exist, so I finally decided I had to go beyond my limits, meet the challenge head-on and create my own plugin.

Today I'm proud to present Language Switcher for Transposh. It's not magic, it doesn't do miracles but it gets the job done.

I'm very grateful to Ofer, who invited me to present my little creature in his blog: thank you, Ofer, for your kindness, I really appreciate this opportunity to let Language Switcher for Transposh be known.

So, what Language Switcher for Transposh actually does?

it reads Transposh settings and gets the list of languages used in the current website
it reads all menu locations available in the current theme and allows you to choose where the language switcher will show up through simple checkboxes
it allows you to add at the end of the chosen menu(s) a series of flags or a dropdown menu to select the language; Administrators, Authors and Editors will see an Edit translation button too which will allow them to activate the Transposh Translation Editor
if you choose to use only flags, it allows you to choose between Transposh flags or flags provided by Language Switcher for Transposh itself
if you choose to use a dropdown you can choose if using a select or an unordered list to build your dropdown: I added this option because unordered list give you much more options to customize their look and feel than a select
if you use an unordered list as dropdown, you can choose if the list items will show flag only, text only or both flags and text
it allows you set additional classes for your language switcher menu items: this allows you to make it look accordingly to your theme style using the same class your theme is using for navigation menu items
it allows you to totally customize your language switcher using a css editor with syntax highlighting: current stylesheet is loaded in the editor and you can just modify it and then save it or you can even create a totally new css file. with a custom name (it defaults to custom.css)

What about the future?

I already have a TODO list to add more features and maybe to create even a premium version, but I think that Language Switcher for Transposh will make your life easier in this first release already. Or at least, this is what I very much hope!

You can find Language Switcher for Transposh in WordPress.org website (or just searching for "transposh" in the admin dashboard of your WordPress installation): give it a try and feel free to contact me for any issues you can get into. And obviously, if you like it, don't forget to give it some star (I still didn't learn how to put in the dashboard those annoying invitations to rating LOL).

Thank you all for reading.

Good coding!

Sincerely,
Marco Gasi by Codingfix

How to develop locally a Laravel app using Laragon

codingfix — Tue, 24 Mar 2020 19:25:56 +0000

In this article I'll show you how to develop locally a new Laravel app using Laragon.
In the far 2017 I wrote an article about how to setup Laravel Homestead: the process is not as quick and easy as you can wish but following each step you can end up with a working development environment for Laravel. At that time, Laragon was already 2 years old but I never heard anything about it. And other 2 years should go by before I see the Laragon light.
As you can read in Laragon repo,

Laragon is a portable, isolated, fast & powerful universal development environment for PHP, Node.js, Python, Java, Go, Ruby.

In just a few clicks it will install in your Windows* machine everything you need to develop web applications in your local environment: Apache, Nginx, MySql and more (for a full detailed list refer to Laragon page, please). In other words, just forget WAMP, XAMPP or any other tool you've used till now: Laragon is incredibly fast and offers a range of tools and features that let you focus on develop your apps, doing all the dirty work for you. And you'll can access it using a pretty url like your-app-name.test not the horrible localhost/your-app-name.

Unfortunately, Laragon is available only on Windows. if you use a Linux box and you wish to take a look at this wonderful tool, you can use one of these packages to run Windows software on Linux

One of the features I love more is the Quick app command: with just a click you can get your new application up and running, ready to be developed by you. Today, I want to show how easy it can be start a new Laravel application using Laragon, and how to add Bootstrap to it.

Step 1: install Laragon

Go to Laragon download page, download the last version then just run the installer: Next, Next, Next...
Laragon starts instantly and I recommend to set it up to run when Windows starts.

Step 2: create a Laravel application

Just a right click on the Laragon window or on the Laragon tray icon to open a rich menu: just click on Quick app->Laravel, type the name of your new application (in this article I'll use "laraone") and let Laragon work for you.
A command prompt will be open and you'll see the process going on. If you have installed Laragon with the defaults, a new folder with your app name will be created in C:\laragon\www directory and everything will be installed there.
When the process is completed you should see something like this in your command prompt:

***** NOTE: Now, you can use pretty url for your awesome project :) *****
-------------------------------------------------------
(Laragon) Project path: C:/laragon/www/test
(Laragon) Pretty url: http://test.test
-------------------------------------------------------

Sometimes, in Windows the command prompt seems to stuck, with a blinking cursor in a black desert: if this is the case click on the Laravel tray icon and this should just fix the issue. Otherwise reload Laragon.

If you go to C:\laragon\etc\apache2\sites-enabled folder, you will see that Laragon has created a new configuration file called auto.laraone.test.conf. In this file is defined the Virtual Host for your new application. You can take a look just to see how Laragon works.

Step 2: install node_modules

Now Laravel is already installed and ready to start but I want to use Bootstrap and to install it I need to install npm first.
The Windows command prompt should already be in your new application directory: if this is not the case, move there manually or just open a new command prompt in C:\laragon\www\laraone directory and type

npm install --no-bin-links

This installs node_modules in your application

Step 3: fix package.json

Now we have to correctly set the path to cross-env.js in package.json file.
Open the file package.json and replace the constant "cross-env" with the actual path to cross-env.js: in my last installation cross-env.js was located in node_modules/cross-enc/src/bin.
The final result should look like:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "cross-env": "^5.1",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.13",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue-template-compiler": "^2.6.11"
    }
}

Step 4: installing Bootstrap

To install Bootstrap we just need to type some more commands in the command prompt:

a) composer require laravel/ui: it can takes some time
b) php artisan ui bootstrap: this will actually install bootstrap
c) as required, run npm install && npm run dev

That's all! Now Bootstrap is installed and all its stuff is in C:\laragon\www\laraone\resources\sass\app.scss and in C:\laragon\www\laraone\public\css\app.css.
Reload Laragon once ore time and type laraone.test in your browser.
Ready to go to write your code!

More about Laragon and its magic in a next article. Because this is important to notice: Laragon is not only Laravel: Wordpress, Joomla, Drupal, PrestaSHop, CakePhp... And it's not only about Php, not only about MySql, not only about... Okay, in a next article :)

How to use a custom language switcher with Transposh to build a multi-language Wordpress website

codingfix — Sun, 08 Mar 2020 12:01:33 +0000

In this article you’ll learn how to use a custom language switcher with Transposh to build a multi-language website with WordPress.

When it comes to build a multi-language website, WordPress offers a lot of different plugins: WPML, Polyglot and so on.

All these plugins have a free version with relevant limitations: if you want a fully functional plugin you must buy the Premium version.

But this is not true for Transposh: Transposh is totally free, forever, without any limitation (in number of languages, number of websites or anything else). And it works great:

install Transposh and activate it
set your default language in Worpdress Settings->General section
choose the languages you want to use in Transposh->Languages
In Transposh->Settings set who can edit translations (tipically they will be Administrators and Editors)
Enable url rewriting
Set WordPress Settings->Permalink to Post name (/%postname%/)
that’s all. Your text will be automatically translated in the selected language

In addition, Transposh let you fix any translation error in a quick and easy way! So I’ll show you How to use a custom language switcher with Transposh to build a multi-language website with WordPress.

But… Always there is a “but” First, to use the full widget you must upgrade to fully version: no problem, is free. Go to Transposh section of the dashboard and choose Settings, then check the “Allow upgrading to full version from http://transposh.org, which has no limit on languages used and includes a full set of widgets” checkbox and click Save changes button. After some time you’ll be notified there is an update available for Transposh: update and you are ok.

Once Transposh has been updated to the full version, you finally get the widget and… As usually, it happens that the widget probably doesn’t integrate in your website design, requiring a lot of work to add custom CSS, trying to style it in a coherent way with the rest of your styles. And last but not least, English language is represented by the United States flag! Don’t know why, after all english is english and it was born in UK. So, what to do? Well, we’re going to build our custom language switcher.

What exactly we need?

Let’s see how Transposh works. When you click on the flag of a non-default language, Transposh reloads the page and changes its own aspect. As you can see, a checkbox appears immediately under the flags: checking it will reloads the page in Edit mode. Depending on Transposh settings (leave them to default if you don’t have any specific issue with this), every text in the page will have a small yellow button appended: clicking on that button will show a popup to edit the translation or just approve them (approved translations will have a green button instead of a yellow one)

So, summarizing, first we have to provide our user an easy and possibly beautiful way to switch between languages; secondly, we have to provide to administrators and editors a quick way to put the website in edit mode to fix translations’ errors. To do this will follow these steps:

we’ll set some WordPress setting
we’ll upload to our WordPress installation the flags’ images we need
we’ll install a couple of plugins
we’ll write a bit of code

Custom language switcher step by step

Step 1: WordPress settings

First, as I said before, go to Settings->Permalink and set it to Post name (%postname%).

Then, go o Appearance->Menus, open Screen options clicking on the top-right tab and check the CSS Classes checkbox as shown in the image below.

Step 2: the flags

First we need to get our flag icons. Just google a bit and you’ll find a lot of free flag icons sets: choose your favorite one download it and upload the flags to your website using the Media section of WordPress dashboard. In thus article I’ll use three flags, english, spanish (because I live in Spain) and italian (because I’m from Italy), but obviously feel free to use the flags you really need to use.

Step 3: some plugins

In order to use our flags we’re going to use a couple of useful plugins (even these ones are totally free).

Plugin 1: Menu Icon by ThemeIsle

This small adorable plugin (https://wordpress.org/plugins/menu-icons/) allows you yo set any icon or image you want to associate it to a menu item. The plugin allows to choose if the menu item text must be visible or hidden, so we can add to our menu the 2 flags quickly and easily.

That’s all for now.

Plugin 2: If Menu

Now we have to add another menu item to switch on or off the option to edit the translation if we are not to happy with it. This function works out of the box with Transposh widget but since we’re not using it we’ll have to implement it manually.

Technically, the If Menu plugin is not strictly necessary: I use it because I don’t want visitors can change the website text as they want and I suppose that the majority of you will do the same. If Menu plugin just do this: it allows to add a conditional logic so you can show or hide single menu items depending on the user’s role.

Step 4: building the menu

Okay, now we’re ready to build our menu. Go to Appearance->Menus.

Settings for Menu Icon

When you are in Menus section, you’ll see a new element in Add menu items left side bar: Menu Icon Settings. Open it, uncheck the pre-selected option Dashicons (we don’t need it) and check the Images option like in the image to the left.

Then switch to the Current Menu tab and set Hide Label to Yes. Finally, just Save Settings!

Once we have completed these preliminary tasks, we can start to add menu items to our menu.

Adding the language switcher’s menu items

We’ll add 3 menu items with the flags to allow users to switch between our three supported languages. Then we’ll add a fourth item to enable/disable translation editing (for this menu item we’ll use the conditional logic offered by If Menu plugin. For each menu item we’ll use Custom links.

The image below shows you how to set the menu item for your default language (in our case it will be english). Choose Custom links as Menu item type, type the base url of your website as URL and ‘en’ (without quotes) as Link text.

Yes, it’s true! I’m implementing multilanguage feature for this blog writing this article: thrilling, isn’t it?

Okay, now the menu item should look like this:

Do you see? There is a row which says Icon: Select. Click on Select to upload your flag (or to select it from you Media library if you had already uploaded it).

Do you see the Union Jack?

Now, in the input box CSS Classes (optional) type ‘no_translate’ (again, without quotes).

Do the same for each language you want to use. The only thing you have to change is the URL in your Custom link: add ‘/it’ for italian, ‘/es’ for spanish and so on…

Save you menu and take a look at your website: it is already a multi-language website!!!

Creating the “Edit mode” menu item

But automatic translations are often poor, so we need a way to change and correct them. To do this, we’ll add a new Custom link to our menu: I called it Edit on/off. We won’t put anything in URL field and we’ll have to check the ‘ Enable visibility rules ‘ checkbox to make this item visible only to Administrators and to Editors. In addition, we have to add the class ‘.edit-translation’ which we’ll use to handle the click event and enable the edit mode.

Notice: this menu item will appear only when you browse the website in a secondary language: Transposh is smart enough to know that there is no translation to fix for the default language!

But this item has no URL, so it won’t do anything… To make it works we have to write a bit of javascript.

Step 5: a bit of coding

So we have our main menu with 3 flags (that already work fine: just give it a try) and the Edit on/off item to enable the manual editing of the translated text; this last menu item will be visible only if the user will be logged as Administrator or Editor.

But in order to make this menu item work correctly we need to add some javascript. Run your editor code of choice and create a new file; then write in this code:

    var urlParam = function (name) {
        var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.search);
        return (results !== null) ? results[1] || 0 : false;
    }

    jQuery(document).on('click', '.edit-translation', function (e) {
        e.preventDefault();
        var currentOrigin = window.location.origin;
        var currentPath = window.location.pathname;
        var param = urlParam('tpedit');
        var newUrl = ''; if (param === false) {
            newUrl = currentOrigin + currentPath + '?tpedit=1';
            jQuery(this).attr('href', newUrl);
        } else {
            newUrl = currentOrigin + currentPath;
            jQuery(this).attr('href', newUrl);
        }
        window.location.href = newUrl;
    })

Quick explanation: when the user clicks on our menu item ‘Edit on/off’, first we prevent the default event, that is reload the current page. Then the code uses window.location.origin and window.location.pathname to get current base url and current path.

For instance, if we are in https://codingfix.com/how-to-use-custom-flags-languages-switcher-with-transposh/ currentOrigin will be https://codingfix.com whereas currentPath will be how-to-use-custom-flags-languages-switcher-with-transposh/. But if we were in https://codingfix.com/es/how-to-use-custom-flags-languages-switcher-with-transposh/, currentPath would be es/how-to-use-custom-flags-languages-switcher-with-transposh/.

Once we have the components of the current url we check if the string ‘tpedit’ is present in the url as a parameter. This parameter is used by Transposh to enable edit mode for translations: when you use the widget and check the Edit translation checkbox the page is reloaded with the param ‘tpedit=1’ appended to the url. So we have to check if we are in edit mode: if we are, we create a new url using only currentOrigin and currentPath and we redirect the browser to this url (that is we reload the page removing the param ‘tpedit’); otherwise we build the new url appending the param ‘tpedit=1’ and reload the page in edit mode.

Now save the file with the name you prefer: I’ll use the name ‘myscript.js’ because I’ve no time to waste thinking to a nicer name

Now we have to upload this file into our theme folder, preferably in a subfolder called ‘js’. By the way, I strongly recommend you to use a child theme because any change you do to the theme files will be lost when the theme will be updated (if you don’t know what is a child theme you can read this: https://www.wpbeginner.com/beginners-guide/wordpress-child-theme-pros-cons/ To easily create a child theme from your current theme you can use the plugin Child Theme Configurator).

Step 6: loading our script

Now we have to modify the file functions.php in order to load our script. The code to be used is slightly different depending on wheter you use a child theme or not.

If you are using a child theme (recommended) you have to add to you functions.php the following code:

function load_custom_javascript() { 
    wp_enqueue_script( 'myscript', //script name
        get_stylesheet_directory_uri() . '/js/myscript.js', //complete path to the file
        array('jquery'), //array of dependencies
        '', //version number
        true //put script in footer
    ); 
}
add_action( 'wp_enqueue_scripts', 'load_custom_javascript' );

If you love to live dangerously and you’re not using a child theme, just replace get_stylesheet_directory_uri() with get_template_directory_uri().

One step more…

Currently, when the user clicks on a flag to change the language, our code will load the home page in the selected language. What about if we want to reload the current page allowing our visitor to continue browsing without interruption?

To achieve this we have to make some changes to both our menu and javascript code.

a) The menu

In the Wordpress dashboard go to Appearence→Menus and expand the menu item we use for the default language. First, replace the URL with the hashtag symbol #: we’ll write some javascript code to set the new url the user will be brought to. Then we have to add a couple of classes to manage the click() event; in the CSS class box, where we had added the no_translate class, add these 2 classes: flag and flag_en. Actually, we could skip avoiding the latter for the default language, but… Okay, I love the symmetry, so I add that class to the default language item too 🙂

Do the same for any other language switcher item you have in your menu. In our example they were Spanish and Italian: to the former add the classes flag and flag_es, for the latter add the classes flag and flag_it.

Don’t forget to replace each URL with the hashtag symbol.

With the menu we have done. Let’s going on!

b) The javascript

Now we have to add an event handler to our script in order to manage the click() event on our language switchers.

Here there is the fully commented code you have to add to your script:

      jQuery(document).on('click', '.flag', function (e) {
        //first we prevent the default click event
        e.preventDefault();
        //next we declare the variable selectedLang and we give it a value accordingly to its CSS class
        var selectedLang = '';
        if (jQuery(this).hasClass('flag_es')) {
          selectedLang = 'es';
        } else if (jQuery(this).hasClass('flag_it')) {
          selectedLang= 'it'
        }
        // the variable newUrl will hold the url the user will be redirected to
        var newUrl = '';
        //in the supportedLang we put supported languages except the default language: this because for the default language no prefix is added to the URL by Transposh. We also add a final slash but don't worry: I'll explain why soon :)
        var supportedLang = ['es/', 'it/'];
        //in currentUrl variable will put the full url of the current page (e.g. https://mydomain.com/it/how-to-cook-fried-eggs)
        var currentUrl = window.location.href;
        //window.location.origin give us the base url, in our example htpps://mydomain.com
        var currentOrigin = window.location.origin;
        //window.location.pathname gives us the rest of the currentUrl, i.e. /it/how-to-cook-fried-eggs
        var currentPath = window.location.pathname;
        //the second and the third character of the currentPath will but we want event the fourth to be sure it be a slash. Why? Okay, suppose we are in our default language and we are reading an article called "estimation-of-non-liear-equation-system". The currentUrl would be https://mydomain.com/estimation-of-non-liear-equation-system and the currentPath would be /estimation-of-non-liear-equation-system; so, if we used only the second and the third character to get current language we'd get 'es' while we are in the English section of the website! So we take even the fourth character and then we'll use this value to see if it is in the supported languages array
        var currentLang = currentPath.substring(1, 4);
        //then we want to save in a variable the current page without any language prefix
        var currentPage = jQuery.inArray(currentLang, supportedLang) != -1 ? currentPath.substring(3, currentPath.length) : currentPath;
        //finally we can build the url the user will be redirected to checking currentLang and selectedLang values; this code is quite self-explanatory
        if (jQuery.inArray(currentLang, supportedLang) !== -1 && jQuery.inArray(selectedLang +'/', supportedLang) !== -1){
            newUrl = currentOrigin + '/' + selectedLang + currentPage;
        } else if (jQuery.inArray(currentLang, supportedLang) !== -1 && jQuery.inArray(selectedLang +'/', supportedLang) === -1) {
          newUrl = currentOrigin + currentPage;
        } else if (jQuery.inArray(currentLang, supportedLang) === -1 && jQuery.inArray(selectedLang +'/', supportedLang) !== -1) {
          newUrl = currentOrigin + '/' + selectedLang + currentPage;
        } else if (jQuery.inArray(currentLang, supportedLang) === -1 && jQuery.inArray(selectedLang +'/', supportedLang) === -1) {
          newUrl = currentUrl;
        }
        window.location.href = newUrl;
      });

This way, when the user will click to a flag to change the website language, current page will be reloaded in the selected language instead of redirect the user to the home page.

Finally we’ve got it!

Okay, that’s all folks! Now you can start to fix automatic translations. Me too, I fear…

The post How to use a custom language switcher with Transposh appeared first on codingfix.

Installing phpDocumentor issues solved!

codingfix — Tue, 31 Jul 2018 13:36:46 +0000

Installing phpDocumentor should be easy. At least, I read here and there in the Internet, besides of course in the official website, that you have many options to install it, one easier of the previous one!

So I was absolutely confident that in a bunch of minutes I'd have been able to run phpDocumentor and create the documentation for my new Php class.

Do you know? I was wrong. This is what happened.

phpDocumentor.phar

The first thing I tried it has been to use the .phar file. I know the first way they suggest is to use PEAR, but I have had a positive experience about using .phar files just a day before: I wanted to have php-cs-fixer setup and running in Atom and after several attempts I ended up using php-cs-fixer.phar file. So, when ti came the moment to install phpDocumentor I told myself: "why should I have to struggle with the command line, dependencies issues and the rest when I can just download a single, wonderful file and put in my php directory?" Done! Once I had phpDocumentor.phar installed, I have opened the command prompt directly in my class folder and typed

phpdoc -d "." -t "./docs"

BUUUZZZZ!!!

Could not open input file: "phpDocumentor.phar"

Installing phpDocumentor with Composer

Wooops, what's this? Started googling a bit, but with no success, so I sadly abandoned the .phar file and I went on with Composer. worst than before!

phpdoc is not recognized as an internal or external command

To Google or not to Google? No, I don't want to waste time to understand why something is told to work doesn't work (not talking about Composer itself, which is a great tool I use in several occasions, just talking about installing phpDocumentor via Composer). Filed attempt.

Installing phpDocumentor with PEAR

I always had good experience installing php extensions through PEAR so I thought it would have worked even installing phpDocumentor. I typed the following command and I eagerly awaited the response:

pear channel-discover pear.phpdoc.org
pear install phpdoc/phpDocumentor

Wow, everything seemed to go fine! Once the process has finished, I have done another attempt to create my documentation typing the usual command:

phpdoc -d "." -t "./docs"

Aaarrghhh!!! The command prompt window has been filled with a lot of warnings and errors related to Smarty templates!

The solution

I will spare you the details. I just say that thirty/forty minutes of googling gave me the solution: downloading the version 2.9.0 directly from Github. I went to https://github.com/phpDocumentor/phpDocumentor2/releases/tag/v2.9.0 and clicked to the compressed file with the name phpDocumentor-2.9.0.tgz to download it and... Don't ask me why, maybe that day I was terribly unlucky, but the download was terribly slow, it stopped several times and once it has been completed, the archive was corrupted!

The true solution!

Fortunately I have found another website which allows to download that file: https://fossies.org/linux/www/phpDocumentor-2.9.0.tgz/. Finally, I've got the file. I put it in a temporary folder, opened the command prompt and simply typed:

pear install phpDocumentor-2.9.0.tgz

A small adjustement to the file phpdoc.bat is still missing. Go in your php folder (In my Windows 10 partition I have installed xampp, so my php is located in C:\xampp\php folder) and open phpdoc.bat with a text editor. It should look like this:

@echo off
if "%PHPBIN%" == "" set PHPBIN=php.exe
if not exist "%PHPBIN%" if "%PHP_PEAR_PHP_BIN%" neq "" goto USE_PEAR_PATH
GOTO RUN
:USE_PEAR_PATH
set PHPBIN=%PHP_PEAR_PHP_BIN%
:RUN
"%PHPBIN%" "%PHP_PEAR_BIN_DIR%\phpdoc" %*

Just change the last line replacing "%PHP_PEAR_BIN_DIR%\phpdoc" with the plain full path to your phpdoc file. In my case, the resulting phpdoc.bat file looks liek this:

@echo off
if "%PHPBIN%" == "" set PHPBIN=php.exe
if not exist "%PHPBIN%" if "%PHP_PEAR_PHP_BIN%" neq "" goto USE_PEAR_PATH
GOTO RUN
:USE_PEAR_PATH
set PHPBIN=%PHP_PEAR_PHP_BIN%
:RUN
"%PHPBIN%" "C:\xampp\php\phpdoc" %*

That's all, now it works! And I've got my full documentation with my favourite template:

phpdoc -d "." -t "./docs" --template="responsive-twig"

If you have found useful this article, please share it through your social networks. If you want to leave me a comment, I'll be happy to hear from you!

The post Installing phpDocumentor issues solved! appeared first on codingfix.

Improving page speed: optimizing images

codingfix — Thu, 12 Jul 2018 19:00:03 +0000

Optimizing images for your web page images is a very important and strategically crucial task to improve the average page speed. Image size affects your page speed in several ways and we have to take care of different techniques to optimize page.

Resize your images

First, we have to take care about images' size, that is their width and height. If you're lazy, like I am ;), you're likely to let css do the job for you: you just upload your image and then you write a bunch of css rules to resize it (or maybe you still even set width and height as attributes of the <img> tag!!!). This is a huge mistake: hundreds of kilobytes can be saved serving scaled images. A tool like GTMetrix will sign this as a high priority task to improve page speed.

So if the image that is really displayed in the web page has a width of 300 px and a height of 120 px, don't use your original image by 1200 px x 480 px: resize it instead and use the one of the requested size. If the same image must be displayed in different sizes, upload to your server one image per each size, maybe appending a suffix which specifies width and height to the image name. And be sure to link the right image to the 'src' attribute of your <img> tags.

The golden rule here is: don't use CSS to resize your images!

Combine your images

Another useful technique to use in order to optimize the loading time of our images is to use sprites. This technique has born in video games development to create animations and it can be proficiently be used in web development too.

Let's say you're building a multi-language website. Probably you'll want to put somewhere in your page 2, 3 or more flags the user can click on to change language accordingly. The best way to do it is to build a unique image which holds all your flags you want to use and use css to make visible only one flag per time. Let's do it with an example.

Suppose to have 3 flags images like these ones:

The wrong way

We could be tempted to write something like this:

<ul id="flags">
    <li>
        <a href="#" class="lang active" id="es">
            <img src="images/flags/flag_es.png" width="32" height="32" />
        </a>
    </li>
    <li>
        <a href="#" class="lang" id="en">
            <img src="images/flags/flag_en.png" width="32" height="32" />
        </a>
    </li>
    <li>
        <a href="#" class="lang" id="it">
            <img src="images/flags/flag_it.png" width="32" height="32" />
        </a>
    </li>
</ul>

The right way

Instead to use the three images separately nested in the three <anchor> tags which presumably will trigger the language change event, we're going to use our image editor of choice to combine the three flags in only one image file. Each flag is 32 px x 32 px so we can build an image with a width of 32 px and a height of 96 px. We'll get something like this:

Now we can use the following html structure for our language menu:

<ul id="flags">
    <li>
        <a href="#" class="lang active" id="es"&gt;&lt;/a>
    </li>
    <li>
        <a href="#" class="lang" id="en"&gt;&lt;/a>
    </li>
    <li>
        <a href="#" class="lang" id="it"&gt;&lt;/a>;
    </li>
</ul>

Below you find the CSS rules for this piece of markup:

ul#flags{
    list-style-type: none !important;
    margin-bottom: 0 !important;
}
ul#flags li{
    display: inline !important;
}
ul#flags li a{
    display: inline-block !important;
    width: 30px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    text-align: center !important;
}
ul#flags li a#es{
    background: url(../images/flags/flags.png) 0 0 no-repeat;
}
ul#flags li a#en{
    background: url(../images/flags/flags.png) 0 32px no-repeat;
}
ul#flags li a#it{
    background: url(../images/flags/flags.png) 0 64px no-repeat;
}

Do you notice the last three rules? There we set the top property of the background image: 0 for the Spanish flag, 32 for English one and 64 for the Italian one. The result will look like this:

In this example, I have highlighted the active language with an orange circle (using the javascript to change the active item on click event, but I'll let this for another article about how to create a multi-language web pages using a couple of fantastic plugins for jQuery).

What is the advantage of using sprites? As GTMetrix explains,

Combining images into as few files as possible using CSS sprites reduces the number of round-trips and delays in downloading other resources, reduces request overhead, and can reduce the total number of bytes downloaded by a web page.

Compress your images

Option 1

Be whatever it be the techniques you're using to optimize your images, it's almost sure that PageSpeed Insights (or GTMetrix or whatever other tool you're using to measure your page performances) will tell you "Optimize images". The good news is that both GTMetrix and PageSpeed Insights allow you to download optimized images from their servers. PageSpeed Insights allows this even in a more comfortable manner: it optimizes your images for you, minifries your javascripts and Css and serves them in a compressed file ready to download: isn't it great?

About minified javascript and css used in prioritizing content process, you can learn more reading this article.

Option 2

You have even other options to compress and optimize your images, just to do your tests using already optimized content. The first option you have is to use online tools. For instance, compressor.io it's a fantastic tool which allow you to compress your images lossless and save hundreds of Kb, as they claim in their home page. If you use Wordpress, you can live without SmushIt plugin which optimizes your images while you are uploading them!

Option 3

You can also use a standalone software. The best one I have tried is certainly Riot (acronym which stands for Radical Image Optimization Tool): it is for Windows only, but you can easily run it from your Linux box using Wine. It does the magic! It can compress a 4500 x 3000 image of 19.4 Mb to a 5.09 Mb without resampling the image and without any visible loss of quality. If you resize the image to a more reasonable size in terms of width and height, let's say to a 1000 of width and 668 of height the new file weight will be 173.9 Kb!

I hope you have found useful this article. If you have some comment or some question, feel free to post a comment or to contact me through the Contact page. And if you really feel generous, don't forget to share this post on your social networks! Thank you!

The post Improving page speed: optimizing images appeared first on codingfix.

Improving page speed: prioritizing content

codingfix — Sun, 01 Jul 2018 20:04:58 +0000

Every web developer knows how important it is to optimize his websites' performances to offer the best user experience to our visitors. And probably almost every web developer knows what Google PageSpeed Insights is and how many aspects of our website we have to monitor and adjust to get the maximum loading speed from our server. This is the first of a series of articles where I want to explain you in detail how to improve your page performance. In this first article we'll see how to increase the page loading speed prioritizing content.

When you test your web page with PageSpeed Insigths, you're likely to get the following suggestion:

Reduce the size of the above-the-fold content

What does this mean? You can read this page to know what exactly Google means, but essentially it means that you have to change the way your html is rendered. In other words, you have to load first what the user see first and defer the download of the any other resource. If you want a step-by-step how-to, go on reading.

Identifying the above-the-fold content

The first thing we have to do is to identify the section of your page which is rendered first. Personally, I do this using a resolution of 1920 x 1080 in order to be sure to involve in optimizing process the major part of the users (if what I mean is not clear, I explain: in a monitor has a resolution of 1366 x 768, as the majority of notebook has, it will display a certain section of your page; but if the monitor resolution is higher, the section of rendered page will be larger so if you have optimized your page at a low resolution, in larger monitors will be present non optimized elements and this will slow down the rendering speed).

So, set your monitor resolution to the maximum value available, open your browser and navigate to your web page. Once the page is fully loaded, press F12 to open the developer tools and undock it.

In Chrome to undock the developer tools you just have to click the 3 dots at the top right corner and click the option shown in the below image

In Firefox the 3 dots are horizontally aligned and the menu show you 3 options: 'Dock to bottom', 'Dock to Left', 'Dock to right' and 'Separate window'

In Microsoft Edge you can just click on the icon

Once developer tools are undocked, you can see the full page section rendered by the browser and identify all that parts that are immediately available. The next step is to give the browser all the necessary information to render that content the right way, that is the css rules that must be applied.

Identifying the necessary css rules

Be sure to set the Elements tab active in Google Developer Tools window (the same in Edge, whereas in Firefox the right tab to use here is called 'Inspector'). This tab is splitted into 2 panels: at the left side you see the html markup of your document and at the rioght side the css rules that apply to the selected element. Just select each visible element of the page and be sure to copy all the rules that apply and paste them in a new css file. It doesn't matter the name you give this file, it's just a temporary file we use to collect all css rules we need to render the above the fold content.

Keep in mind that if in the visible section of the page you are using some icon (such as FontAwesome icons or Foundation icons) you have to get even the rules required to display those icons!

Minifying css in the head section

Once you have all the rules required to render the above the fold content, you need to minify them, that is delete any superfluous space or blank line you have in your temporary css file. To do this you can use a plugin of yout code editor of choice, a stand-alone program or even some online service. Personally, I have used this Css minifier: it's very easy to use and it doesn't require any installation. Just copy all the content of your temporary css file (Ctrl + A, Ctrl + C) and paste it in the left side box (Ctrl + V) called "Input CSS", then click the blue Minify button and in the right side box the minified css will appear almost instantly. Copy it and paste it in the head section of your page, immediately after the last meta tag, wrapping it with the <style> tag.

Deferring the download of other resources

Now we have to deal with the rest of the css we use in our web page. First, create a new css file and call it style.css. In this file we're going to past all and every css rule used in our web page. To be sure our new file preserve the right sort order of teh css rules, we'll use the sequence of the link to css files we have in our web page. If you use Bootstrap, you're likey to have the link to bootsrap before the links to any other css file, isn't it? Good, open your bootstrap.min.css, copy the whole content and paste it in your styles.css. Do the same with any other stylesheet you are using and be sure to delete the link to that file from your <head> section. If some of you css files is not minified yet, use the css minifier to minify its content and paste in your styles.css the minified version.

Once done, you should end up with a huge, unreadable css file: what to do with that? We'll write a small piece of Javascript to ensure that file will be downloaded only after the entire document has been loaded. Let's do it.

In the footer of your web page, immediately before the </body> closing tag, add this:

<script type="text/javascript">
    function downloadCssAtOnload(){
        var d=document.head, n=document.createElement("link");
        n.type="text/css", n.rel="stylesheet",n.href="css/styles.css",d.appendChild(n)
    }
    if (window.addEventListener){
        window.addEventListener("load", downloadCssAtOnload, false);
    }else if (window.attachEvent){
        window.attachEvent("onload", downloadCssAtOnload);
    }else{ 
        window.onload = downloadCssAtOnload;    
    }
</script>

Let's analyze it. First we have the function downloadCssAtOnload(). This function is simple indeed: it just create a <script> element and sets all its attribute to the desired values, then it appends it to the document. Practically, when this function will be called, the following lines of code will be written in the <head> section of our document:

<link type="text/css" rel="stylesheet" href="css/styles.css">

The rest of the code just sets how to call the function downloadCssAtOnload() when the document has been loaded: accordingly to the user's browser features, we'll use the window.addEventListener() method, the window.attachEvent() method or the window.onload() method.

What about the javascript?

Good point! You can do exactly the same with your javascript. First create a new javascript file which holds all the javascript your web page uses (don't forget to minify it). Then remove alll script elements from your document footer except our small snippet above. Finally add similar code to defer the loading of the javascript. The final result should look like this:

<script type="text/javascript">
    function downloadCssAtOnload(){
        var d=document.head, n=document.createElement("link");
        n.type="text/css", n.rel="stylesheet",n.href="css/styles.css",d.appendChild(n)
    }
    function downloadJSAtOnload(){
        var d=document.createElement("script");
        d.src="js/javascript.js",document.body.appendChild(d)
    }
    if (window.addEventListener){
        window.addEventListener("load", downloadJSAtOnload, false);
        window.addEventListener("load", downloadCssAtOnload, false);
    }else if (window.attachEvent){
        window.attachEvent("onload", downloadJSAtOnload);
        window.attachEvent("onload", downloadCssAtOnload);
    }else{ 
        window.onload = downloadJSAtOnload; 
        window.onload = downloadCssAtOnload;    
    }
</script>

The new code will append following line in the footer of your document:

<script src="js/javascript.js"></script>

That's all. Now retry to test your page with PageSpeed Insights and you should be able to see a relevant improvement of your score.

What else?

To further improve our page performance we have still a lot of work to do but for the moment just take a break. In the next articles of this mini-series we'll see how to optimize our images and how to setup the .htaccess.

If you have some comment, feel free to write it down here: I'll be happy to hear your thoughts :)

The post Improving page speed: prioritizing content appeared first on codingfix.