Open chrome from command line

To start a new chrome window without any userl profile loaded run cmd and type:

start chrome

You can also simply call the run interface and type “chrome” then enter to have the same effect.

Now, more interesting, if you want to open a new chrome windows with an alternative profile, or simply a different user:

C:\Users\user1>runas /user:alternative_profile_name "C:\Program Files (x86)\Google\Chrome\Application\Chrome.exe"

replace “alternative_profile_name” with the user name you want to use. It is usefull if you engage in multilanguage SEO activity to have profile set with different languages as default. Or if you work in a different language that the one you use for your everyday account, you can have a “professional” profile setting with all the appropriate default.

You might also need to open Incognito window to check website without your browser cache. Emptying your cache everytime can be cumbersome, so you can simply open an incognito window:

start chrome /incognito

For that matter I rather use a Firefox developer installation set to not cache anything.

Adding Recaptcha to registration page on Laravel framework

In the app folder, create a Rules folder. Save the following code as GoogleRecaptcha.php:

<?php
namespace App\Rules;
use GuzzleHttp\Client;
use Illuminate\Contracts\Validation\Rule;
class GoogleRecaptcha implements Rule
{

    /**
     * Determine if the validation rule passes.
     *
     * @param  string  $attribute
     * @param  mixed  $value
     * @return bool
     */
    public function passes($attribute, $value)
    {
        $url='https://www.google.com/recaptcha/api/siteverify';
	$data = array(
       		'secret' => env('GOOGLE_RECAPTCHA_SECRET'),
		'response' => @$_POST['g-recaptcha-response']
        );
	$ch = curl_init($url);	
	curl_setopt($ch, CURLOPT_POST, 1);
	curl_setopt($ch , CURLOPT_POSTFIELDS, http_build_query($data));
	curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	$json = curl_exec($ch);
	curl_close($ch);
	$response = json_decode($json,true);
	var_dump($response);
	if ($response['success'] != false) {
		return 'success';}
	else{return false;}
	#$response= $obj ->{"success"};
	#var_dump($response[0]);
        #$response = $client->post('https://www.google.com/recaptcha/api/siteverify',
         #   [
          #      'form_params' => [
           #         'secret' => env('RECAPTCHA_SECRET_KEY', false),
            #        'remoteip' => request()->getClientIp(),
             #       'response' => $value
              #  ]
            #]
        #);
        #$body = json_decode((string)$response->getBody());
        #return $body->success;
    }
    /**
     * Get the validation error message.
     *
     * @return string
     */
    public function message()
    {
        return 'Are you a robot?';
    }
}

In app/Http/Controllers/Auth/RegisterController.php 

use App\Rules\GoogleRecaptcha;
/**
 * Get a validator for an incoming registration request.
 *
 * @param  array  $data
 * @return \Illuminate\Contracts\Validation\Validator
 */
protected function validator(array $data)
{
    return Validator::make($data, [
        'name' => 'required|string|max:255',
        'email' => 'required|string|email|max:255|unique:users',
        'password' => 'required|string|min:6|confirmed',
        'g-recaptcha-response' => ['required', new GoogleRecaptcha]
    ]);
}

Original code was with guzzle but it leads to the following issue:

Issue: “cURL error 60: SSL certificate problem: unable to get local issuer certificate (see http://curl.haxx.se/libcurl/c/libcurl-errors.html)”

https://stackoverflow.com/questions/42094842/curl-error-60-ssl-certificate-in-laravel-5-4

in resources/views/auth/register.blade.php

Add in the registration form:

                      @if(env('GOOGLE_RECAPTCHA_KEY'))
                        <div class="form-group row">
                             <div class="g-recaptcha offset-md-4 col-md-6"
                                  data-sitekey="{{env('GOOGLE_RECAPTCHA_KEY')}}">
                             </div>
                         </div>
                       @endif

in the views/layouts/app.blade.php or in the register.blade.php files add the following line:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

In .env

GOOGLE_RECAPTCHA_KEY=site_key
GOOGLE_RECAPTCHA_SECRET=site_secret

to avoid issue with guzzle, let’s consider making the curl REST API call manually: https://weichie.com/blog/curl-api-calls-with-php/ 

$jsonurl =""
$curl_handle=curl_init();

The CURL manual call worked perfectly

Upload webp images to wordpress

wordpress and webp: “Sorry, this file type is not permitted for security reasons.”

Error message when uploading a webp image in wordpress media library

Certain image type like svg, jpeg2000 or webp raises an error when you try to upload them in wordpress as shown in the picture above.

We have already covered how to implement webp in wordpress but there might be some cases where you might want to upload this image manually and serve them to supporting browser via your own script if necessary (that’s not the case for svg though).

Add the following snippet of code to the functions.php file of your template. Comment out or delete the line for the mime type you are not interested in.

function add_mime_types( $mimes ) {
$mimes['webp'] = 'image/webp'; 
$mimes['svg'] = 'image/svg+xml';
$mimes['jpeg2000'] = 'image/jp2'; 
return $mimes; }
add_filter( 'upload_mimes', 'add_mime_types'  );

Troubleshoot BOM issue

BOM: Byte Order Mark

What does it look like:

On the page an invisible element push the html element out of there normal place, messing up alignment.

In the developper code, in firefox it looks like a red dot that display /ufeff on mouse hover.

In a php file it the BOM might cause the header to be sent prematurely, leading to a “header already sent” error.

What is the BOM and why does it causes issue:

BOM is usually invisible in browser but can cause issue by displacing html elements on the page.

W3 consortium write in their dedicated resource on BOM:

At the time this article was written, if you include some external file in a page using PHP and that file starts with a BOM, it may create blank lines.

This is because the BOM is not stripped before inclusion into the page, and acts like a character occupying a line of text. See an example. In the example, a blank line containing the BOM appears above the first item of included text.

https://www.w3.org/International/questions/qa-byte-order-mark#problems

The byte order mark is not present in UTF-8 but some text editor such as Microsoft notepad add it systematically (at the time of writing).

Solution to identify the file starting with BOM:

To find out the php file that included the BOM I SSH into the shared hosting, and found the file using this code: 

find -type f|while read file;do [ "`head -c3 -- "$file"`" == $'\xef\xbb\xbf' ] && echo "found BOM in: $file";done


I downloaded the file through FTP and encoded it in UTF-8 with notepad++ and uploaded back to the server.

Notepad++ offers to format the file in UTF-8 with or without the BOM in the encoding tab.

Use of css sprite

Prepare your css sheet in an image editor. The final format will be in png to keep your images as sharp as possible, webp is also a good candidate if you take care of the brower support.

When laying out your images on the css sprite image, make sure to use consistent spacing between the images. It will help when styling your sheet and keeping it minimal.

You indicate the size of the portion of the picture of the sprite you want to show in the css code. If you want to reuse the height and width of your styling as much as possible, make sure that the image are at least height and width apart from each other (measure from their top left corner as this is the coordinate you will use to display the proper part of the CSS sprites.

Note that this is a cylinder system of coordinate which means if the height you set is larger than the height left between the top left corner of your image and the bottom of the sprite sheet, the remnant will be carried over at the top of the sprite and everything within that value will be displayed. In other words, the sprite repeats itself until it covers the entire height you set.

It works in a similar pattern for the width.

As mentioned above, you indicate what part of the sprite to display by entering the coordinate of the top left corner of your image on the sprite. The top left corner of the sprite is the origin of the coordinate system. Along the top of your image you will have the y axis and along the left side of your image you will have the x axis. So every point in your image will have negative coordinate.

I choosed x and y, because the coordinate along the height of the image will be entered first while the coordinate along the width, second. This match the usual (x,y) way of representing 2D coordinate so that’s why I use this terminology.

Create and hold your private key securely.

The best way to securely create and hold your private key is to do so on an encrypted drive. In that way only you will have access to the data even in the event your drive get lost or stolen.

Why creating a private key directly on an encrypted drive is more secure?

In case you stored your private key on a non encrypted drive, keep in mind that, even if you delete the key from the drive, the data will still be accessible through data recovery process. The only way to make sure the data is not accessible after you erase them is to write zero to the drive, which means you will lose any other data stored on that drive in the process.

That’s the main reason why you should create your private key securely directly on an encrypted drive and don’t move them around. Backup of the key should be also held on an encrypted drive.

To generate your SSL key pair, download and install openSSL.

Generating self signed certificate:

On a windows machine after installing and setting up openssl:

run cmd

cd C:\OpenSSL-Win32\bin

change the path after the cd command to your OpenSSL installation path

openssl genrsa -des3 -out server.key 4096
enter pass phrase for server.key:

Important: enter a password here, nothing will be displayed on screen, you will be ask to confirm this password that will be used during the next step

openssl req -config C:\OpenSSL-Win32\bin\cnf\openssl.cnf -new -key server.key -out server.csr 

enter pass phrase for server.key:

This is the pass phrase you created at the previous step.

Important: leave challenge password blank, virtuemart won’t be able to validate the certificate if anything is entered as chanllenge password. Leave it blank.

Generate certificate: 

openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt

For 2048 bits long certificate so first line become:

openssl genrsa -des3 -out server.key 2048

Flexbox

A Complete Guide to Flexbox

Flexbox is perfect to manage nice and responsive layout in modern browser. Let’s see how we can integrate it with horme 3 template for virtuemart, together with lazyloading.

Our first implementation does not give desirable result.

The step I took so far:

1- remove matchHeight script

2- change the row div to a flex-container class

3- change the product column

<div class="product vm-col<?php echo ' vm-col-' . $products_per_row . ' ' . $cellwidth ;?>">

to

<div class="product flex-item>" >

The issue is that there is only 3 items per row, leaving an empty column. The add to cart button seems to go all over the place as soon as the third row is reached.

The add to cart button need to be pushed at the bottom of the div. It seems the div height change depending on the scrolling. Everything is fine when the css load but if scrolling down then up, then the div might be displayed with a “too short” height, hiding the add to cart button in the process.

@media query not working under certain screen size

Issue: CSS @media query are not working under a certain width (in my case it was under about 900px).

@media screen and (max-width: 600px) {
  body {
    background-color: olive;
    color: white;
  }

Solution: check that you have set the view port in your page head meta:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Implementing lazy loading in Virtuemart

[UPDATE] Now joomla 4 uses native lazy loading thanks to the loading attribute.

Exemple:

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

https://github.com/joomla/joomla-cms/issues/27761

Let’s start this a quick refresh on lazy loading:

https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/

To implement lazy loading (with this method) in virtuemart category page, you will need to add a class to the thumbnail <img> element, which is easily done in /com_virtuemart/sublayouts/products.php

Look for the line:

echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false);

and add the desired class to the displayMediaThumb() function:

echo $product->images[0]->displayMediaThumb('class="browseProductImage lazy"', false);

In your theme template, create an override for the index.php and add the javascript in the footer:

 document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.srcset = lazyImage.dataset.srcset;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Possibly fall back to a more compatible method here
  }
});

At this stage your code won’t work and no image will be displayed. For the code to work you need to have a data-src defined in the <img> element.

One way to do this is to locate where the <img> html for the thumbnail is generated and create an override to define a data-src instead of the usual src.

I didn’t find any documentation as to where this code is generated, so I add to search for it. I used eclipse IDE and added a local copy of my virtuemart installation as a workspace in the IDE then search the function in the folder. It was located in:

/administrator/components/com_virtuemart/helpers/mediahandler.php

The html per say is generated by the displayIt() function. We change src to data-src in the file for the moment as it is not clear to me how I’ll be able to override this function in my theme.

My first test after settings all this is not running properly. Actually it does even seem to act the opposite it should, with the picture first loaded and that disappear when it crawls into view.

Let’s debug that. First, I checked that all my code is properly loaded, namely the class for the image and the data-src to prevent the picture to load before it come into view.

At that stage the “lazy” class is properly added to the source code but the image source is not changed to data-src as expected.

Changing this in the developer console does not solve the issue (picture still not showing) unless the srcset=”undefined” is deleted. This srcset attribute is added by the lazyload js.

By searching for <img in the mediahandler.php file I found the function displayImage(). I changed the src attribute to data-src and remove the srcset line from the lazyload javascript before running another test.

Changed src to data-src in evey img element in displayImage() and displayIt() function. Now the lazy loading function is working except for some css issue (product name appearing on overlay on the image instead of displaying below the image). Some pictures do not appear at all.

Product img elements have now data-src attribute instead of src but , they don’t have the “lazy” class so they are not displayed when they come into the view port. This might be changed in the single product view.

Product image has no class set but they don’t load. The lazy load script should not prevent image without the lazy class to load, so the issue might be that I changed the src attribute to data-src.

So the displayIt() function in /administrator/components/com_virtuemart/helpers/mediahandler.php handles picture in the product view as well as in the category view.

To add the lazy class to the product image and additional thumbnails, we need to modify default_images.php and default_images_additional.php in templates/your_template_name/html/com_virtuemart/productdetails/

in defaut_images.php look for the following code:

if(!empty($width) or !empty($height)){

            echo $image->displayMediaThumb("",true,"rel='vm-additional-images' class='block'", true, true, false, $width, $height);

        } else {

            echo $image->displayMediaFull("",true,"rel='vm-additional-images' class='block'");

        }

and change it to:

if(!empty($width) or !empty($height)){

            echo $image->displayMediaThumb("class='lazy'",true,"rel='vm-additional-images' class='block'", true, true, false, $width, $height);

        } else {

            echo $image->displayMediaFull("class='lazy'",true,"rel='vm-additional-images' class='block'");

        }

And in default:images_additional.php

 if(VmConfig::get('add_img_main', 1)) {
            echo $image->displayMediaThumb('class="product-image thumbnail" style="cursor: pointer"',false,false);
            echo '';
        } else {
            echo $image->displayMediaThumb("class='thumbnail'",true,"rel='vm-additional-images'",true,false);
        }

becomes:

if(VmConfig::get('add_img_main', 1)) {
            echo $image->displayMediaThumb('class="product-image thumbnail lazy" style="cursor: pointer"',false,false);
            echo '';
        } else {
            echo $image->displayMediaThumb("class='thumbnail lazy'",true,"rel='vm-additional-images'",true,false);
        }

Note: that you must override these two files in your template if you don’t want to see your changes deleted by the next update.

At that point we are left with the issue that thumbnails div does not have the appropriate height which leads to the product name to overlay on the picture, which in our case is not desirable. It seems to be handled in the products.php sublayouts and the class of the div we are looking for is vm-product-media-container. The div is indeed located in this file but it does not have the style attribute that causes the issue, nor does it call a variable for this, that suppose that the inline style is added through a filter on the server side or through js or jquery on the client side.

In our case, the following inline style is injected and cause display issue: style=”height: 42px;”

 Line 1165  $imgHeight = VmConfig::get('img_height','');

        if(!empty($imgHeight)){

            $imgHeight = 'height:'.VmConfig::get('img_height',90).'px;';

        } else {

            $imgHeight = '';

        }

To be specific the issue in on the div wrapping the image:

<div class=”vm-product-media-container” data-mh=”media-container” style=”height: 63px;”>

This code is generated in : /html/com_virtuemart/sublayouts/products.php

function displayMediaThumb($imageArgs='',$lightbox=true,$effect="class='modal' rel='group'",$return = true,$withDescr = false,$absUrl = false, $width=0,$height=0)

Let’s see where the display MediaThumb() is called and find out where the 42px height is defined.

in default_images.php

if (!empty($this->product->images)) {
    $image = $this->product->images[0];
?>
displayMediaThumb("",true,"rel='vm-additional-images'", true, true, false, $width, $height);
} else {
echo $image->displayMediaFull("",true,"rel='vm-additional-images'");
        }
?>

This div height is related to the thumbnails height settings in the template configuration panel. In the current state, the height takes various value each time the page is refreshed. Setting the width and height to zero or empty in the configuration panel leads to no image being displayed, dynamic resizing being off.

With dynamic resizing on and a value of 100 we got a good rendering, without issue.

200 leads to some issue. This might have to do with the dynamic resizing. Let’s try to locate this code to check what’s happening there.

The style does not appear in the source code. It appears in the DOM only (chrome and firefox). This tend to show that the inline style is generated by javascript. To try to spot the script causing the issue, we will add <script>debugger</script> after the element to debug. Reload the page and add a breakpoint by following the instruction here:

https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints

Results: Paused on attribute modification: jquery.min.jsmedia/jui/js/jquery.min.js

Stack frame:

style (jquery.min.js?105ec84b263645980d07d0cf26df4607:2)
(anonymous) (jquery.min.js?105ec84b263645980d07d0cf26df4607:2)
Q (jquery.min.js?105ec84b263645980d07d0cf26df4607:2)
Q (jquery.min.js?105ec84b263645980d07d0cf26df4607:2)
css (jquery.min.js?105ec84b263645980d07d0cf26df4607:2)
(anonymous) (jquery.matchHeight-min.js:8)
each (jquery.min.js?105ec84b263645980d07d0cf26df4607:2)
each (jquery.min.js?105ec84b263645980d07d0cf26df4607:2)
r.apply (jquery.matchHeight-min.js:8) t.fn.matchHeight (jquery.matchHeight-min.js:7) (anonymous) (jquery.matchHeight-min.js:11) each (jquery.min.js?105ec84b263645980d07d0cf26df4607:2) r._applyDataApi (jquery.matchHeight-min.js:11) u (jquery.min.js?105ec84b263645980d07d0cf26df4607:2) fireWith (jquery.min.js?105ec84b263645980d07d0cf26df4607:2) ready (jquery.min.js?105ec84b263645980d07d0cf26df4607:2) (jquery.min.js?105ec84b263645980d07d0cf26df4607:2)

jquery.matchHeight is a jQuery library to achieve equal height between div. In modern browsers, there are css solutions that achieve the same results: check Flexbox and CSS Grid.

Horme3 template uses /js/jquery.matchHeight-min.js

So matchHeight library does not handle properly the height of the div with the lazy loading technique I am using at the moment. The script is called in the index.php file of the template. Let’s have a look how the site behave without this script.

jquery.matchHeight catch the data-mh=”media-container” attributes to perform its operation. I tried to remove it from the thumbnail wrapper and add it to the product wrapper but the result is a mess. I will check if I can rewrite the template to support Flexbox instead.

So the issue of height not being set when the src is missing or invalid has also caught the attention of css-tricks which wrote a nice article about the topic. Let’s see if we can implement their options.

Preventing Content Reflow From Lazy-Loaded Images
Lazy loading draw back: Content Reflow

The solution I will try is to give a svg source at the right size and aspect ratio encoded in base64 (or not: https://css-tricks.com/probably-dont-base64-svg/ )

I got to work out how to configure the viewport attribute in image to get the right aspect ratio.

Also the number of line of the short description is now an issue with the div height. Got to trouble shoot that.

Maybe best would be to restore all changes and reimplement lazy loading and psvg place holder from the ground up to avoid errors introduced when fiddling in the code to find out how to fix the height :)

This is my base64 placeholder (<svg></svg> method did not work):

src=”data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzgyMSIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMTQ2Ljg0Mzc1IDkzLjkyNzA4NiIKICAgaGVpZ2h0PSIzNTUiCiAgIHdpZHRoPSI1NTUiPgogIDxkZWZzCiAgICAgaWQ9ImRlZnM4MTUiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhODE4Ij4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZwogICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTIwMy4wNzI5KSIKICAgICBpZD0ibGF5ZXIxIj4KICAgIDxyZWN0CiAgICAgICByeT0iMC4yNjcyNjk1MiIKICAgICAgIHk9IjIwMi45NDg3NiIKICAgICAgIHg9Ii01LjgxNjU0NjVlLTAwOCIKICAgICAgIGhlaWdodD0iOTQuMDA1MzQxIgogICAgICAgd2lkdGg9IjE0OS42NzA5NCIKICAgICAgIGlkPSJyZWN0NDUwOSIKICAgICAgIHN0eWxlPSJvcGFjaXR5OjAuOTgwMDAwMDQ7ZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDowO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1kYXNob2Zmc2V0OjA7c3Ryb2tlLW9wYWNpdHk6MSIgLz4KICA8L2c+Cjwvc3ZnPgo=”

Current issue is due to single line description not being correctly adjusted by matchHeight. Otherwise all the rest is working.

Issue was caused by some script being disabled in virtuemart configuration panel. Virtuemart CSS, jquery and Fancybox were disabled.

The place holder should have a height matching the height of the highest thumbnails. Working with normalized thumbnail picture (in terms of dimension) would make things way easier and cleaner.

Overriding templates of admin component takes place in administrator/templates/html/com_virtuemart/helpers/mediahandler.php

Check which admin theme you are using.

Log in the admin dashboard and check the page source, search for

/administrator/templates/your template name/css/template.css?105ec84b263645980d07d0cf26df4607

So at that point all issues have been solved. We need to check why plain SVG failed to load correctly. Specially even with encoding an inkscape file saved as plain svg in base64, we have a file size that have nearly double compared with our current page size. Off course we don’t need to load pictures that are not in the view port which is saving bandwidth and we even gained a smoother experience as the element are already placed properly on the page thanks to the svg place holder which is inline which means no loading time and no recalculation.

That seems to be a win. We need to ensure that the file that needs changes can be overriden properly and also browser compatibility to avoid bad experience.