Wordpress, Drupal, Bootstrap Tutorials and How-to Tech guides. With SEO best practices in mind.

Bash snippet : Recursively delete node_modules, vendor, and .git folder from multiple laravel projects using .sh file

noreply@blogger.com (Aslam) — Sat, 29 Aug 2020 08:31:00 +0000

Usefull for recursively delete node_modules, vendor folders from multiple laravel projects, at once.

#!/bin/bash
# This is a recursive delete script for multiple laravel projects 
# @arguments:
#
# Deletes the folders inside the folder where this script.sh file is placed
# Example : If you have many laravel projects inside /var/www/, create script.sh with this contents and run from terminal, sudo bash script.sh
#
# @install: 
# $ chmod +x script.sh
# $ sudo bash script.sh
#
for D in ./*; do
    if [ -d "$D" ]; then
        cd "$D"
            for X in ./*; do
                if [ -d "$X" ]; then
                    #uncomment below line if you want to delete all .zip files in the projects root directory
                    #find . -name "*.zip" -type f | xargs rm -rf   
                    #uncomment below line if you want to delete .git folder in the projects root directory                                     
                    if [ "$X" == "./node_modules" ] || [ "$X" == "./vendor" ]; then 
                        echo "match found";
                        rm -rf "$X"
                        echo "match deleted";
                    else 
                        echo "not a match";
                    fi
                fi
            done
        cd ..
    fi
done
# script.sh;

Usage : create script.sh file in directory, where all projects are in. In terminal, run, sudo bash script.sh

Laravel homestead and vagrant-hostsupdater - Automate the hosts file updation in windows for your next homestead project!

noreply@blogger.com (Aslam) — Fri, 21 Oct 2016 11:17:00 +0000

Lets configure homestead.rb to update hosts file using hostsupdater plugin. in case if you have not yet added this plugin, run

vagrant plugin install vagrant-hostsupdater

from your command prompt.
Open homestead.rb file in your favorite text editor.
Find this block at the end, (You can set anywhere but i prefer to add my customizations at the end of the file.)

  # Configure Blackfire.io
    if settings.has_key?("blackfire")
      config.vm.provision "shell" do |s|
        s.path = scriptDir + "/blackfire.sh"
        s.args = [
          settings["blackfire"][0]["id"],
          settings["blackfire"][0]["token"],
          settings["blackfire"][0]["client-id"],
          settings["blackfire"][0]["client-token"]
        ]
      end
    end

And add following code snippet next to the code above.

# Updating the hosts file with all the sites that are defined in Homestead.yaml
if Vagrant.has_plugin?("vagrant-hostsupdater") && settings["hosts_file_additions"] == true
     hosts = []
     settings["sites"].each do |site|
      hosts.push(site["map"])
    end
     config.hostsupdater.aliases = hosts
 end

Save the file.
Now, lets add hosts in "Homestead.yaml" , usually located in (user.homestead) directory.
Find the site you want to update hosts for.

sites:
    - map: yourdevdomain.app
      to: /home/www/laravel/public
      hosts: 192.168.88.88

"hosts: 192.168.88.88" is the IP we want our "map: yourdevdomain.app" to be pointed to.
at the end of "Homestead.yml", Add

hosts_file_additions: true

Save the file.
Close vagrant if already opened with.

vagrant halt

Run the

vagrant up --provision

command.
And you will be able to access "yourdevdomain.app".
You can check the "hosts" file, to see the host is updated.

LARAVEL 5.2 - Using username instead of email in default auth scaffold

noreply@blogger.com (Aslam) — Tue, 17 May 2016 09:07:00 +0000

In laravel 5.2, you can use php artisan make:auth command to generate default auth scaffold.

And you will be able to use laravel's default auth system, which using email and password as credentials.

Now, you want to use "username" instead of "email" in login page, here is how you can do it.

STEP 1: OVERRIDING FUNCTION

Lets have a look at default authentication system files,

In line number : 191 of

vendor\laravel\framework\src\Illuminate\Foundation\Auth\AuthenticatesUsers.php

There will be this function loginUsername,

   /**
     * Get the login username to be used by the controller.
     *
     * @return string
     */
    public function loginUsername()
    {
        return property_exists($this, 'username') ? $this->username : 'email';
    }

As you can see, username: 'email';

Lets override this function in app\Http\Controllers\Auth\AuthController.php

Copy and paste same function from AuthenticatesUsers.php and Paste in AuthController.php

   /**
     * Get the login username to be used by the controller.
     *
     * @return string
     */
    public function loginUsername()
    {
        return property_exists($this, 'username') ? $this->username : 'username';
    }

STEP 2: UPDATING VIEWS

Lets update resources\views\auth\login.blade.php 's login form by replacing email label, email field to textfield with a username label.

<div class="form-group{{ $errors->has('username') ? ' has-error' : '' }}">
    <label class="col-md-4 control-label">Username</label>
    <div class="col-md-6">
        <input type="text" class="form-control" name="username" value="{{ old('username') }}">
        @if ($errors->has('username'))
            <span class="help-block">
                <strong>{{ $errors->first('username') }}</strong>
            </span>
        @endif
    </div>
</div>

We are done, now you can log in with username instead of email in laravel auth scaffold.

Drupal forgot password for admin - best method to reset with PHP file. (If you have FTP Access)

noreply@blogger.com (Aslam) — Mon, 04 Apr 2016 15:03:00 +0000

You have forgot your Drupal website's password! That's horrible. But dont worry, we have a better way to reset password if you have access to your files.

If you remember / have access to the admin email, its OK you can reset by going to forgot password page and by entering your email ID for admin account.

If not, you can try this method. I have combined snippets from around the web to make it work even if you have got blocked from login.

Before doing this , Make sure you have write access to your drupal root folder.

Create a .php file in your drupal root folder. i.e. "cpwd.php".

Copy and paste below contents to the file.

<?php
define('DRUPAL_ROOT', getcwd());
require_once DRUPAL_ROOT . '/includes/bootstrap.inc';
drupal_bootstrap(DRUPAL_BOOTSTRAP_FULL);
require_once DRUPAL_ROOT . '/includes/password.inc';
if (isset($_GET['pass']) && !empty($_GET['pass'])) {
  $newhash =  user_hash_password($_GET['pass']);
}
else {
  die('Retry with ?pass=yourpasswordstring  set in the URL');
}
drupal_flush_all_caches();
print "All cache cleared<br/>";
db_query("DELETE FROM {flood} ");
print "All floods cleared<br/>";
$updatepass = db_update('users')
  ->fields(array(
    'pass' => $newhash,
 // Uncomment the following lines to reset the administrative username and/or email address, if necessary.
        // 'name' => 'admin',
 //'mail' => 'admin@your-domain.com'
  ))
  ->condition('uid', '1', '=')
  ->execute();

print "Password changed! please delete this file immediately for security purpose!";
drupal_exit();

Save the file for once.

Open your web browser, and access the .php file with a pass=yourpasswordstring parameter

http://your-drupal-site.dev/cpwd.php?pass=password#123

If you have correctly called the script with parameters, it will change the password and show you success message.

If not, it will show "Retry with ?pass=yourpasswordstring set in the URL" message.

Please say "Thank you", if it helped.

IMPORTANT!

Dont forget to delete the created file. once you have changed password, delete this file immediately,

EXTRA

For those who interested, here is the code explanation,

define('DRUPAL_ROOT', getcwd());
//Instance url of the drupal website stores to "DRUPAL_ROOT".

require_once DRUPAL_ROOT . '/includes/bootstrap.inc';
// Calling the drupal bootstrap

drupal_bootstrap(DRUPAL_BOOTSTRAP_FULL);
//Setting the DRUPAL_BOOTSTRAP_FULL mode.

require_once DRUPAL_ROOT . '/includes/password.inc';
//getting the password.inc file that is necessary for updating the password.

if (isset($_GET['pass']) && !empty($_GET['pass'])) {
//Checking if "pass" parameter has passed in the url, and its not empty
  $newhash =  user_hash_password($_GET['pass']);
//If set, user_hash_password will convert the password to store in DATABASE and keep in $newhash variable.
}
else {
//If no "pass" parameter called, or its value empty,
  die('Retry with ?pass=yourpasswordstring  set in the URL');
//stopping the script from executing, with an error message
}

drupal_flush_all_caches();
// Clearing all drupal caches using drupal_flush_all_caches function.

db_query("DELETE FROM {flood} ");
// Deleting all in "flood" table.
// If you have tried login too many times, it will show a message like this
// "Sorry, there have been more than 5 failed login attempts for this account. It is temporarily blocked. Try again later or request a new password."

So, even if the login blocked, we need access once we reset the password. so we delete all from flush table where drupal checking if there any failed login attempts.

$updatepass = db_update('users')
  ->fields(array(
    'pass' => $newhash,
 // Uncomment the following lines to reset the administrative username and/or email address, if necessary.
        // 'name' => 'admin',
 //'mail' => 'admin@your-domain.com'
  ))
  ->condition('uid', '1', '=')
  ->execute();

Script update the users table with new hashed password that stored earlier.

That's it, you have changed your drupal password without forgot password option.

If you have suggestions, please put on discussion.

Installing composer manually and setting composer path in windows 7

noreply@blogger.com (Aslam) — Sat, 25 Jul 2015 08:47:00 +0000

Here is, How you can install composer from command prompt and access by composer command in WINDOWS 7.

Go to php.exe located folder. if you are using WampServer, probably

"C:\wamp\bin\php\php5.5.12\"

press and hold CTRL + SHIFT together and right click inside folder, and select "open command window here ".

Copy and paste this code in CMD.

php -r "readfile('https://getcomposer.org/installer');" | php

If everything's fine, it will show message like,
"

#!/usr/bin/env php
All settings correct for using Composer
Downloading...
Composer successfully installed to: C:\wamp\bin\php\php5.5.12\composer.phar
Use it: php composer.phar

you can see composer.phar file in same folder.

Go to C:/ drive and create a folder named composer

Move downloaded composer.phar to that folder.

Create composer.bat file in same folder and copy below contents to that file.

@ECHO OFF
php "%~dp0composer.phar" %*

create composer file. without any extensions, you can do this by opening CMD in this folder and typing type NUL > composer without Quotes.

and drag that file to your text editor, preferably notepad++ . and paste below contents.

#!/bin/sh
dir=$(d=$(dirname "$0"); cd "$d" && pwd)
# see if we are running in cygwin by checking for cygpath program
if command -v 'cygpath' >/dev/null 2>&1; then
  # cygwin paths start with /cygdrive/ which will break windows PHP,
 # so we need to translate the dir path to windows format. However
 # we could be using cygwin PHP which does not require this, so we
 # test if the path to PHP starts with /cygdrive/ rather than /usr/bin.
 if [[ $(which php) == /cygdrive/* ]]; then
    dir=$(cygpath -m $dir);
   fi
fi
dir=$(echo $dir | sed 's/ /\ /g')
php "${dir}/composer.phar" $*

save.

Now 3 files will be there inside composer folder.

Now, set PATH to composer so we can access composer by just typing composer in CMD.

Show Desktop.
Right Click My Computer shortcut in the desktop.
Click Properties.
You should see a section of control Panel - Control Panel\System and Security\System.
Click Advanced System Settings on the Left menu.
Click Environment Variables towards the bottom of the window.
Select PATH in the user variables list.
Append your PHP Path (C:\composer) to your PATH variable, separated from the already existing string by a semi colon.
Click OK

Finally,
restart computer.
If you dont want to restart computer, there is an alternate way,

Open CMD and copy paste below lines.

taskkill /f /IM explorer.exe
start explorer.exe
exit

Open a new command prompt, and type composer

Now you should see composer is installed and working properly.

Feel free to be part of discussion.

Drupal webform + Bootstrap, 2 minutes to do it better.

noreply@blogger.com (Aslam) — Tue, 20 Jan 2015 16:48:00 +0000

When i was working on a drupal site that is designed in bootstrap 3, I wanted to design this webform to the one in bootstrap.

Here is how i did it, and this is the best and quickest way to integrate webform with bootstrap.

Follow these 4 simple steps to integrate bootstrap with Drupal Webform.

STEP 1 : Configure Webform and Components.

Create Webform and fields.

STEP 2 : Configure components.

For each component, follow this step.

Click on edit. and in Edit Component page, scroll to bottom.

You can find Wrapper Css classes.
Type form-group in that field.

Below that, You can find CSS Classes,
Type form-control in that field.

And click on save component.

STEP 3 : Customizing submit button.

Now you have customized drupal webform components to suite bootstrap styling. EXCEPT submit button!.

Lets see how to customize submit button for each webform in your Drupal project.

We will be using hook_form_FORM_ID_alter() to accomplish this.

Open your theme's template.php file.

At the end of the file, Add below code. DONT FORGET TO Change YOUR-THEME-NAME

to your theme's name, and nid==1234 here refers to webform with 1234 Id. so change that to suite your form's id.

[you can find forms id by looking at address bar while you are in that webform's configuring page.]

after /node/ ]

/**
 * Implements hook_form_FORM_ID_alter().
 */
function YOUR-THEME-NAME_form_webform_client_form_alter(&$form, &$form_state) {
  $node = $form['#node'];
  if ($node->nid == 1234) {
    $form['actions']['submit']['#attributes']['class'][] = 'btn-lg';
    $form['actions']['submit']['#attributes']['class'][] = 'btn';
    $form['actions']['submit']['#attributes']['class'][] = 'btn-success';
  }
}

STEP 4: See it in action.

Clear all caches, (including theme registry cache) and reload your contact form page.
-If styles are not overwritten, you will see a nice bootstrap themed webform. <3

Feel free to share your thoughts.

How to remove index.php from codeigniter URLs in two simple steps!

noreply@blogger.com (Aslam) — Wed, 13 Aug 2014 04:04:00 +0000

If you have downloaded codeigniter, and learning it from scratch, you might have been at a point where you search "How to remove index.php from codeigniter URLs"

Generally any function inside your controller will work only if you call it after index.php in your URL.

for example,
localhost/wamp/codeigniter-project/ will load the welcome page

and if you add a method/function inside the basic controller, eg:test, you will have to reach it by

localhost/wamp/codeigniter-project/index.php/test/

Now you want to achieve the URL like localhost/wamp/codeigniter-project/test/

Lets see how to make it possible to remove index.php from your codeigniter project.

first of all, i have edited controller, welcome.php

current content of welcome.php is below



<?php



* @see http://codeigniter.com/user_guide/general/urls.html

*/

public function index()

{

$this->load->view('welcome_message');

}



public function test()

{

echo "yay.. this is test controller";

}





}



/* End of file welcome.php */

/* Location: ./application/controllers/welcome.php */

?>

it will work only if i call like this.

localhost/wamp/codeigniter-project/index.php/test/

but if i remove index.php fromurl, it just wont work.

So lets solve this with two steps.

This is the folder anf files view inside basic codeigniter bundle



-application

-system

-user_guide

-.htaccess  = < edit this file

-.index.php

-license.txt

1st step:

Open above .htaccess in your favorite text editor
and add below lines into that .htaccess file to remove index.php from your codeigniter project.



RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^(.*)$ index.php/$1 [L]

Save it.

2nd step:

open cofig.php file inside /application/config/ folder.

search for the line "$config['index_page']".

Change $config['index_page'] to blank in config.php in application folder as below:

$config['index_page'] = '';

now, visit your page without index.php

eg: localhost/wamp/codeigniter-project/test/

if you could see functions content, this works for you.

If not, check rewrite module is on in Apache modules.

Wampserver:httpd exe The program can't start because msvcr110 dll is missing

noreply@blogger.com (Aslam) — Sun, 27 Jul 2014 03:25:00 +0000

If you are using windows 8 and installing wamp server, you might have got this error message.

"httpd.exe The program can't start because msvcr110 dll is missing"

If this error appearing after you open any programm in your computer then it is solved by going to below address and downloading the Visual C++ Redistributable for Visual Studio 2012 Update

http://www.microsoft.com/en-us/download/confirmation.aspx?id=30679

Go to that page and install Visual C++ Redistributable for Visual Studio 2012 Update.

and dont forget to restart your computer.

Your program will be running smoothly. and you will not get "The program can't start because msvcr110 dll is missing" error messages anymore ;)

Windows 8 and Wamp server - Troubleshooting errors

noreply@blogger.com (Aslam) — Sun, 27 Jul 2014 03:22:00 +0000

To get rid of the wampserver 403 Forbidden error on Windows 8, you should take these steps first.

Modify the Apache HTTPD.CONF file.

Change "Listen 80" to "Listen 0.0.0.0:80"

If it is already "Listen 0.0.0.0:80" , then leave it as it is..

Second thing,

Install Apache service,and Install MySQL service.
To do this,
- right click on wampserver tray icon
- go to Apache > Service > Install Service
- go to MySQL > Service > Install Service

If you get an error message, saying "Your port 80 is actually used!", then follow this ways to solve it.

WAMP and Windows 8 - solving error "Your port 80 is actually used!"

Thats it.

[Solved] - WAMP and Windows 8 - Your port 80 is actually used!

noreply@blogger.com (Aslam) — Sun, 27 Jul 2014 03:12:00 +0000

If you see "Your port 80 is actually used" error in your windows 8 here is the solution.

The simple reason behind that would be, IIS.

If you turn off IIS , it would solve the problem.

Got to "Control Panel"
If the view is in classic mode, click "System And Security" and select "Administrative Tools"
Else select "Administrative Tools".
and double click "Component Services" icon.
select "Services (LOCAL)" from leftside pane.
Now, we are going to stop IIS here.
If you are sure you want to use WAMP and not IIS, disable the "World Wide Web Publishing Service" and the "Web Deployment Agent Service".

If it doesn't work, check whether you installed skype on your computer.

Windows 8: Enable .NET Framework 3.5 (includes .NET 2.0 and 3.0) - (NetFx3) feature in Offline mode!

noreply@blogger.com (Aslam) — Sun, 27 Jul 2014 03:05:00 +0000

Inside your windows installation disk, or USB, there will be a folder named "source".

Open it and inside it you can see a folder named "sxs"

Copy that folder to any root drive (for example, inside C:/)

Now search for cmd (Command prompt) and right click it and select run as administrator

and type command below into the cmd (Dont ignore spaces!)

Dism.exe /online /enable-feature /featurename:NetFX3 /All /Source:E:\sources\sxs

Change drive letter as you copied it.

if you have copied sxs folder to d:/ then change E:\sources\sxs to D:\sources\sxs

and hit ENTER.

it will take some time and you can see progress in command prompt.

After it says success, close cmd
and go to control panel
left side you can see "turn windows features on / Off"
Click on it

There you can see .NET Framework 3.5 (includes .NET 2.0 and 3.0) is checked.

Now,restart your computer! everything's perfect ;)

Revert to old gmail interface (HTML Version) with this simple url hack!

noreply@blogger.com (Aslam) — Sat, 05 Jul 2014 15:12:00 +0000

In slow connections, loading standard Gmail will be time consuming, the we will have to revert to old Gmail interface for easy access to inbox and other Gmail features.

So here is the URL trick that will help you to access old Gmail interface anytime.

All you have to do is to add a "?ui=html" at thend of Gmail address.

So you will be served with old gmail interface which will load 50 times faster than standard Gmail interface!

"http://mail.google.com?ui=html" will take you to the old Gmail interface.

Feel free to share your experiences!

HTACCESS | Redirect naked domain to WWW - [NON WWW to WWW with htaccess]

noreply@blogger.com (Aslam) — Wed, 18 Jun 2014 18:04:00 +0000

Here is how you can redirect your named domain address to www Using .htaccess

RewriteEngine On
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Code explained:



RewriteEngine On :

Enable URL rewriting


RewriteCond %{HTTP_HOST} !^www\. [NC] :

Condition Checking whether the current requested address contains WWW or not.


RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301] :

If there is no WWW , adding WWW in front of domain name and appending requested address, then redirecting to that address with a permanent redirect.

If you wish to know what is a naked domain - Here is an article on that.

What is a naked domain? - Naked Domain,Top Level Domain and subdomain Explained!

noreply@blogger.com (Aslam) — Wed, 18 Jun 2014 18:03:00 +0000

What is a naked domain?

Naked domains are those domains without a WWW in front of it.
for example : domain.com is a naked domain where www.domain.com is a top level domain,
and blog.domain.com com is a sub-domain and not naked.

Quick Samples for named Domain, Top Level Domain and Sub Domain

aslamise.com - Naked or bare domain
www.aslamise.com - Top level domain - Not Naked
apps.aslamise.com - Sub-domain - Not Naked

Does it affect SEO to point my site to naked domain?

It Doesn't matter which one you pick but you should be consistent on it.
Because search engines consider both as different sites.

http://aslamise.com
http://www.aslamise.com

Which should I choose? Naked Domain or Top level Domain?

Some says that using naked domain is better. and some other says its just time consuming so they are avoiding it.

Arguments for using WWW :

WWW does mean something - That means WWW is a host name, and it defines the service being used computer network.

Using WWW allows to easily understand the file structure in website.

More flexibility with DNS - Zone records of your domain, controls the traffic to your site. and using the non WWW version of your site can make things complicated.

Cookies Problem - If you are using a naked domain, your cookies are sent to all your sub domains.
but if you use WWW, it wouldn't happen.

An Argument for not using WWW is that, as n no-www.org quotes, using WWW is waste of time because without WWW , address is shorter.

The point is that you should stick with your choice.

Once you made your decision on that, to overcome duplicate content issues, you can set up canonical URL.

Set your preferred domain as the canonical link and redirect to that when accessing the other URL.

Here is How you can redirect from naked domain(NON WWW) to WWW.

Installing Drupal - Step by step tutorial

noreply@blogger.com (Aslam) — Sun, 01 Jun 2014 14:46:00 +0000

In this Drupal tutorial, i will explain how to download and install Drupal.

Requirements:

Drupal package
Development server with php and mysql

For this tutorial, i have used wamp server in my windows 7 OS.

Lets begin!

Download Drupal package

https://drupal.org/project/drupal

Download latest bundle

Extract bundle to any folder inside your server

for testing in local, i have extracted to C:/wamp/www/study/drupal/site/

so i can access it in my web browser using localhost/study/drupal/site/

Open browser and access installation.

You can see the page titled as "Select an installation profile".

Select standard and click on save and continue button.

Select language (built in language English) and click continue.

In next page, you can see panel for configuring database.

Fill-in database information

If you have not yet setup database,lets do it now!

Go to your phpmyadmin

http://localhost/phpmyadmin

and create database // drupal //. you can name database as you wish but you will have to point out it in installation.

Now that we have filled-in our database informations. and click on continue.

After the progress is complete next page will ask you to configure your site!

Click on save and continue button. and if everything worked fine, it will show you installation complete page. like in figure below.

visit your new site.

Thats it! You have successfully completed your drupal installation!

Remove blog name from Title of Blogger blog - [SOLVED]

noreply@blogger.com (Aslam) — Thu, 08 May 2014 16:37:00 +0000

Blogger is the easiest blogging platform to customize ,if you understand the right way.
In this article,I will tell you "How to remove blog name from Title". and how to optimize it for better SEO.

How to remove blog name from title of blogger blog?

Lets see how default blogger templates generating Title for blog post page.
At the time of blog creation, Blogger will ask you to write a title for your blog.
Then, after you create a post and publish it with blogger blog, you will have to type in your post's title.
Now, as default, blogger will generate a title for your blogpost, as below.
BlogTitle:Title of your great blog post.
When you look for its code in template, you can see code as below.
<data:blog.pagetitle/>
Lets see how to customize it and remove blog name from title.
Here comes help of <data:blog.pagetitle/>
<data:blog.pagetitle/> generates > YourblogTitle:Your Post title
<data:blog.pagetitle/> generates > Your Post title.
Now, lets make it looking good, with below code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>  <b:else/>
<title><data:blog.pageTitle/></title> </b:if>

What we do here is replacing Blogger blog title with Blog Title only, and replacing Blogger blog post title with post name followed by blog name.

Helps?? Leave your thoughts in comment section!
Have a wonderful day!

How to disable javascript in Google Chrome

noreply@blogger.com (Aslam) — Wed, 09 Apr 2014 08:00:00 +0000

In this article, I will explain more than 3 methods to disable JavaScript in Google Chrome Browser.

There are more than three methods that are available to disable JavaScript in Google Chrome.
you can use any of these to disable JavaScript in chrome as you find easiest for you.

Method 1. Disable JavaScript in Google Chrome with Chrome Developer tools.

HIT F12 (OR right click in any opened page and select inspect element)
It will bring chrome developer tools screen. see screen shot below.

Now,We want to disable JavaScript in chrome using this chrome developer tools settings.
for that, click on the gear icon that you can see upper side of the developer tools window.

settings panel will appear, in its general tab, you can see a check box labelled as "disable JavaScript".

Tick it and you are done.

Method 2. Disable JavaScript in Google Chrome in settings

Type this in chrome's address bar
chrome://chrome/settings/content
or you can reach in content settings by navigating through the chrome browser's menu.
click on > settings, and click to > show advanced settings at the bottom of the page. and click on > content settings button.

Under JavaScript,there are two options labelled as
Allow all sites to run JavaScript (recommended)
and
Do not allow any site to run JavaScript
check second option to disable JavaScript for all websites we visit through chrome.
OR
if you want to disable JavaScript only for one page, you can select first one and click on manage exceptions, and configure it there.
I recommend you using first method if you want to disable JavaScript for temporary purpose.

Method 3. Disable JavaScript in chrome on open

If you are running chrome from command line,then you can make use of the --disable-javascript flag by adding it at the end of command.

easiest way to browse websites without JavaScript is to make two shortcuts in desktop, leave first one as normal. use it to browse in normal state.

Now, for once, right click on the second shortcut,select properties, and edit the target field.

Append --disable-javascript flag at the end of existing target, as you can see in screenshot, click OK.
You are done.

Now you can double click on that shortcut and browse any website disabling JavaScript.

These are the easiest methods that work now. I will be updating any new method that are found. Hope this helps you.

Please leave your suggestions and feedback here in discussions.

Blogger conditional tag, best way to check whether it is mobile version or Desktop version

noreply@blogger.com (Aslam) — Fri, 04 Apr 2014 09:27:00 +0000

You may have seen this :

<b:if cond='data:blog.isMobile'>
//Mobile contents goes here
<b:else/>
//Desktop contents here
</b:if>

So, is there any other way without this else condition we can check if mobile version or desktop version is being accessed?

Yes, You can use `true` or `false` statements in blogger conditional tags in this case. This is the best way you can insert custom scripts or stylesheets for mobile version and desktop version seperately!

<b:if cond='data:blog.isMobile == "false"'>
//Contents inside this, will only appear in Desktop version.
</b:if>

PageSpeed : Prefer asynchronous resources

noreply@blogger.com (Aslam) — Sun, 08 Sep 2013 12:16:00 +0000

Fetching resources asynchronously prevents those resources from blocking the page load.

It is always a recommended tip to follow asynchronous method for loading external script files. thus it will speed up loading of page.

Why Asynchronous?

<script> tags will block HTML renderer if they are found in between any other elements.

If you are loading a huge JavaScript file with a blocking <script> tag at the top of markup, you will not see any progress on the page as the mentioned script is getting loaded and evaluated.
Here adding async tag will help the performance.
if we tag with a aync, the browser will no longer stop the html renderer process,and it will load and evaluated the script block asynchronously.

How to asynchronously load a script?

Adding an async attribute will do this job.

<script async="async" src="http://path-to-the-javascript-file.js"></script>

PageSpeed : Put CSS in the document head

noreply@blogger.com (Aslam) — Wed, 21 Aug 2013 15:26:00 +0000

Moving inline style blocks and <link> elements from the document body to the document head improves rendering performance.

Why should you put CSS in the document head?

External stylesheets and inline style blocks inside the document body will affect page rendering performance.
because the webpage has to download all external stylesheets first to render the page effectively.
Putting stylesheets or style tags inside <body> </body> tags will cause the page to behave strange.


<html>
<head>
Call stylesheets here inside head tag.
</head>
<body>
Don't call stylesheets here.
</body>
</html>

Solutions / Recommendation

As required by the HTML 4.01 Specification (section 12.3), always put external stylesheets in the section using the in the tag.
Don't use @import. Also make sure that you specify the stylesheets in the correct order with respect to scripts.
Put <style> blocks in the <head> section.

PageSpeed : Optimize images

noreply@blogger.com (Aslam) — Wed, 21 Aug 2013 15:07:00 +0000

Properly formatting and compressing images can save many bytes of data.

Images are the essential parts of a good webpage. but serving non-optimized images can result in a negative feedback from users.

What it means by Optimize Images?

Optimize images means Reducing the file size and make the image progressive to ensure it is loading faster in browsers.

Why Should you optimize Images?

If you are making a graphic from scratch, or you are taking a snap in your cam, you make some edits before you upload it. but most of don't know how to optimize and reduce the size of images or we just dont care about the size.
But when it comes to our site's health, it does matter. loading huge images can result in slow loading of page.
and if a user with slow connection visit the page, can leave as soon as he see such huge images that takes much time to load.

Solutions to optimize images.

There are many tools available there just to optimize images.
or you can use Photo editors like "Photoshop" and GIMP to make images progressive and optimized.

Here I list some of cool Image optimizers.

For Windows OS

PageSpeed Image optimizer Command line tool

http://page-speed.googlecode.com/files/pagespeed_optimize_image.exe [Direct Link]

Usage : pagespeed_optimize_image.exe
Example : pagespeed_optimize_image.exe myimage.png myimage_optimized.png

For Linux OS

Gimp

http://www.gimp.org/

For MAC OS

ImageOptim

http://imageoptim.com/

Online Image optimization Tools

Smush.it

http://www.smushit.com/ysmush.it/

Recommendations.

Use PNG if you want trasperacy with image. PNG-8 is the best option than PNG-24 as PNG-24 will be larger in file size.
Use JPGs for all photographical images, and for gradient images.
Use GIF for much smaller images. (eg:less than 10x10 pixels)
Never use BMP or TIFF images in webpage

PageSpeed : Optimise the order of styles and scripts

noreply@blogger.com (Aslam) — Wed, 21 Aug 2013 13:57:00 +0000

Correctly ordering external stylesheets, and external and inline scripts, enables better parallelisation of downloads and speeds up browser rendering time.

Browser : Come on you guys..
JavaScript : Let me in first .
Browser : Come on JavaScript file.., But one thing though. Because you can alter the layout and contents in this page, I will NOT allow any other download activity till you completely Downloaded,parsed ,and executed.
JavaScript : (Downloaded,Parsed,and executed. it took some time)
And other stylesheet guys were waiting outside to be downloaded.
- Once the execution of JavaScript files are complete,
Browser : Come on you stylesheet guys..
Stylesheets : So sad.. but we will load. you didn't allow us to load in parallel.

What happens here?

Style sheets couldn't load in parallel because they couldn't load while JavaScript is getting downloaded.
BUT
If they loaded first, JavaScript would have loaded in parallel with them.

I have experimented this with 3 scripts and 3 stylesheets.


<head>
<link rel="stylesheet" type="text/css" href="stylesheet_1.css" />
<script type="text/javascript" src="script_1.js"></script>
<script type="text/javascript" src="script_2.js"></script>
<script type="text/javascript" src="script_3.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet_2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet_3.css" />
</head>

With the above code, Result is shown below.

Next, after moving stylesheets above all external scripts,


<head>
<link rel="stylesheet" type="text/css" href="stylesheet_1.css" />
<link rel="stylesheet" type="text/css" href="stylesheet_2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet_3.css" />
<script type="text/javascript" src="script_1.js"></script>
<script type="text/javascript" src="script_2.js"></script>
<script type="text/javascript" src="script_3.js"></script>
</head>

Above code produced following results.

As you could see in above results, it is very clear that, moving external stylesheets before external JavaScript can help load the page quicker.

Another problem occurs when there is an inline script block comes in between stylesheets.

This prevents execution of the script untill the stylesheets are downloaded.


<head>
<link rel="stylesheet" type="text/css" href="stylesheet_1.css" />
<script type="text/javascript">
 document.write("Page modified by JavaScript.");
</script>
<link rel="stylesheet" type="text/css" href="stylesheet_2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet_3.css" />
<script type="text/javascript" src="script_1.js"></script>
</head>

It will it prevent execution of the script untill the stylesheets are downloaded.
So the code should be in an order like below.


 <head>
<link rel="stylesheet" type="text/css" href="stylesheet_1.css" />
<link rel="stylesheet" type="text/css" href="stylesheet_2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet_3.css" />
<script type="text/javascript" src="script_1.js"></script>
<script type="text/javascript">
 document.write("Page modified by JavaScript.");
</script>
</head>

Solutions/Recommendations

Put external scripts after external stylesheets if possible.

Browsers execute stylesheets and scripts in the order in which they appear in the document. If the JS code has no dependencies on the CSS files, you can move the CSS files before the JS files. If the JS code does depend on the CSS contained in an external file — for example, styles that are needed for output you are writing to the document in the JS code — this isn't possible.

Put inline scripts after other resources if possible.

Putting inline scripts after all other resources prevents blocking of other downloads, and it also enables progressive rendering. However, if those "other resources" are external JS files on which the inline scripts depend, this might not be possible. In this case, it's best to move the inline scripts before the CSS files.

PageSpeed : Minimize request size.

noreply@blogger.com (Aslam) — Wed, 21 Aug 2013 12:33:00 +0000

Keeping cookies and request headers as small as possible ensures that an HTTP request can fit into a single packet.

What is an HTTP Request?

Whenever your browser fetches a file(maybe an html page, image, stylesheet,javascript or any other resource that can be received by a browser) , it does so using http Request.

http request is a request that made by client browser to server, to get a resource from server.

Browser : Hello server dude.. Get me that file named "index.html".
Server : Ok . Browser dude.. I have the file. Take it..

That s happening for each file that is in a webpage.

HTTP request headers include:

Cookies.

For resources that must be sent with cookies, keep the cookie sizes to a bare minimum.
To keep the request size within this limit, no one cookie served off any domain should be more than 1000 bytes. Recommendation is that the average size of cookies served off any domain be less than 400 bytes.

Browser-set fields

Many of the header fields are automatically set by the user agent, so you have no control over them.

Requested resource URL (GET and Host fields)

URLs with multiple parameters can run into the thousands of bytes. Try to limit URL lengths to a few hundred bytes at most.

Referrer URL

URL from where the page referred.

Solutions / Recommendations

Limit Cookie size.

Make it small as you can. less than 400 bytes good.

Try to limit URL length.

if you are using additional parameters you can try cut down the length by NOT using self-explainig parameters.
for example,
If you use something like below
http://example.com/?name=myname&age=myage&country=mycountry
try to use other version like below.
http://example.com/?n=myname&a=myage&c=mycountry

PageSpeed : Minimise redirects

noreply@blogger.com (Aslam) — Wed, 21 Aug 2013 11:23:00 +0000

Minimising HTTP redirects from one URL to another cuts out additional RTTs and wait time for users.

What is an HTTP Redirect?

Definition For HTTP Redirection from Wikipedia

URL redirection, also called URL forwarding, is a World Wide Web technique for making a web page available under more than one URL address. When a web browser attempts to open a URL that has been redirected, a page with a different URL is opened. For example, www.example.com is redirected to example.iana.org. Similarly, Domain redirection or domain forwarding is when all pages in a URL domain are redirected to a different domain, as when wikipedia.com and wikipedia.net are automatically redirected to wikipedia.org. URL redirection can be used for URL shortening, to prevent broken links when web pages are moved, to allow multiple domain names belonging to the same owner to refer to a single web site, to guide navigation into and out of a website, for privacy protection, and for less innocuous purposes such as phishing attacks.

Sometimes its necessary to issue http redirects. like in below cases

To indicate new address of a resource that has moved from it's previous location.
To track clicks and impressions and log referring urls.
To catch misspelled urls, and redirect to vanity url's or to user friendly url's.
To issue secure browsing . http to https.
To add different country-code top-level domains as per the country of visitor. ".com" to ".in" or to ".uk"
To add a trailing slash to URL directory names to make their contents accessible to the browser.

Solutions / Recommendations

Eliminate unnecessary redirects

Avoid adding urls that are known to redirected to another url. instead add the absolute url where the redirection ends.

Use server rewrites for user-typed URLs.

many servers supports URL rewriting mechanism. make use of rewriting to serve correct urls or mistyped urls.

Prefer HTTP over JavaScript or meta redirects.

There are several ways to redirect a page to another.

Using JavaScript.

We can redirect a page to another one using window.location object.

Using Meta tag

http-equiv="refresh"

Using Server Side mechanism

This is recommended to follow this way to redirect your page to another.
Because in JavaScript and meta ways, browser will have to parse the document in client browser to redirect .
but if it is done server side, client will not have to download the document. thus it reduces latency and page loads faster.

PageSpeed : Minify Javascript

noreply@blogger.com (Aslam) — Wed, 21 Aug 2013 08:11:00 +0000

Compacting JavaScript code can save many bytes of data and speed up downloading, parsing, and execution time.

Minifying JavaScript means removing unnecessary bytes such as spaces, comments, line-breaks, and indentation in your JavaScript code.

It will reduce the total size of the JavaScript file.

If you are inlining your JavaScript files inside html, compressing it will help reduce the total size of the page thus the browser download it quick than before.
and if you are using external javascript files, it can be loaded,parsed,and executed faster than before.

How to minify JavaScript

There are several tools available to minify JavaScript.

"Closure Compiler" from Google is the better option to minify JavaScript.

http://closure-compiler.appspot.com

Wordpress, Drupal, Bootstrap Tutorials and How-to Tech guides. With SEO best practices in mind.

Bash snippet : Recursively delete node_modules, vendor, and .git folder from multiple laravel projects using .sh file

Laravel homestead and vagrant-hostsupdater - Automate the hosts file updation in windows for your next homestead project!

LARAVEL 5.2 - Using username instead of email in default auth scaffold

STEP 1: OVERRIDING FUNCTION

STEP 2: UPDATING VIEWS

Drupal forgot password for admin - best method to reset with PHP file. (If you have FTP Access)

Create a .php file in your drupal root folder. i.e. "cpwd.php".

Save the file for once.

Open your web browser, and access the .php file with a pass=yourpasswordstring parameter

IMPORTANT!

EXTRA

Installing composer manually and setting composer path in windows 7

Drupal webform + Bootstrap, 2 minutes to do it better.

STEP 1 : Configure Webform and Components.

STEP 2 : Configure components.

STEP 3 : Customizing submit button.

STEP 4: See it in action.

How to remove index.php from codeigniter URLs in two simple steps!

Wampserver:httpd exe The program can't start because msvcr110 dll is missing

"httpd.exe The program can't start because msvcr110 dll is missing"

http://www.microsoft.com/en-us/download/confirmation.aspx?id=30679

Windows 8 and Wamp server - Troubleshooting errors

[Solved] - WAMP and Windows 8 - Your port 80 is actually used!

Windows 8: Enable .NET Framework 3.5 (includes .NET 2.0 and 3.0) - (NetFx3) feature in Offline mode!

Revert to old gmail interface (HTML Version) with this simple url hack!

HTACCESS | Redirect naked domain to WWW - [NON WWW to WWW with htaccess]

If you wish to know what is a naked domain - Here is an article on that.

What is a naked domain? - Naked Domain,Top Level Domain and subdomain Explained!

What is a naked domain?

Quick Samples for named Domain, Top Level Domain and Sub Domain

Does it affect SEO to point my site to naked domain?

Which should I choose? Naked Domain or Top level Domain?

Arguments for using WWW :

Installing Drupal - Step by step tutorial

Requirements:

Download Drupal package

Open browser and access installation.

Fill-in database information

visit your new site.

Remove blog name from Title of Blogger blog - [SOLVED]

How to remove blog name from title of blogger blog?

How to disable javascript in Google Chrome

Method 1. Disable JavaScript in Google Chrome with Chrome Developer tools.

Method 2. Disable JavaScript in Google Chrome in settings

Method 3. Disable JavaScript in chrome on open

Blogger conditional tag, best way to check whether it is mobile version or Desktop version

PageSpeed : Prefer asynchronous resources

Why Asynchronous?

How to asynchronously load a script?

PageSpeed : Put CSS in the document head

Why should you put CSS in the document head?

Solutions / Recommendation

PageSpeed : Optimize images

What it means by Optimize Images?

Why Should you optimize Images?

Solutions to optimize images.

Here I list some of cool Image optimizers.

For Windows OS

PageSpeed Image optimizer Command line tool

Adobe PhotoShop.

JPEG for windows

RIOT(Radical Image Optimization Tool)

For Linux OS

Gimp

For MAC OS

ImageOptim

Online Image optimization Tools

Smush.it

Recommendations.

PageSpeed : Optimise the order of styles and scripts

What happens here?

I have experimented this with 3 scripts and 3 stylesheets.

With the above code, Result is shown below.

Above code produced following results.

Another problem occurs when there is an inline script block comes in between stylesheets.

Solutions/Recommendations

Put external scripts after external stylesheets if possible.

Put inline scripts after other resources if possible.

PageSpeed : Minimize request size.