Finally A Browser Without Cache – Web Developer Dream!

If you are reading this post (not by accident), I can safely assume that you share with me the frustration with browser cache. For normal users, browser cache is great since it speeds up website loading, save bandwidth…

But for web developers, it’s something different:

Well, imagine you have changed some CSS to your button, you reload your browser, nothing changed!

Despite the fact that you have:

  • Open developer tools, check clear browser cache
  • Installed the best cache browsing addon/extensions you can find and clicked the clear cache button hundred times

Still, your new style doesn’t show.

Browser cache is to blame.

If you feel the pain, read on.

I understand why browser makers implement caching. But, I wondered if there was a browser that doesn’t  have cache so I don’t have to spend hours working on my code, wonder why it isn’t working only to realize that there is nothing wrong with my code but browser’s cache?

The browser without cache didn’t exist, until now

I tried to find that browser but it didn’t exists (during my search). So, accidentally, I think of selenium. It’s a browser automation tool that let us do a lot of cool things with browsers. (SEO guys are more familiar with this concept). It turned out, selenium is the solution to my problem.

I ended up creating a small javafx app to let me spawn browsers without cache to load my development websites.

And it worked perfectly.

Let me show you how it works.

How does the browser without cache work

This is the application:

Main interface

Settings interface

As you can see that, on the main interface, you can enter your URL, select the browser you want to spawn and click on start browser. You have two choices of browser, Chrome or Firefox.

On the settings panel, you need to set the path to Chrome driver and Firefox driver. What are they? You can download Chrome driver here:

Download Chrome driver

And Gecko driver (Firefox) here:

Download gecko driver

Make sure you select the right version for your OS.

The favorite URL box is where you can enter list of URLs that you want to appear on the box on the left. Later, you can just double click on those URLs to open the browser.

Where to download the app

You can download the app here:

Download no browser cache app

If you want to develop further, feel free to get the source code here:

https://github.com/datmt/NO-FUCKING-CACHE-BROWSER

Questions and suggestions are welcome.

The Ultimate Nginx Configuration For WordPress Website

So recently I decided to move my server from HostGator to DigitalOcean droplets. In comparison, DigitalOcean has so many benefits over HostGator, especially for developer. The most notable are:

  1. Full root access
  2. You can install anything you want on DigitalOcean
  3. Free SSL (Let’s encrypt)
  4. Cheaper
  5. More powerful server (2GB of RAM, 50GB SSD, 2TB transfer for just $10/month)

My website was running on Apache server at HostGator. As I’ve heard so many good things about Nginx, I decided to make the change. Installing Nginx was easy. However, as I’m not familiar with Nginx, I spent more than a day to solve these two issues:

  1. Website is not accessible. I got 502 Bad Gateway error every time I try to access my site.
  2. When I was able to access my site. All pages/posts are 404 except the home page.

So, to save you time, I’m going to share my configurations so you can follow and get your site up and running fast on Nginx.

Configure PHP FPM

First, let’s edit you php-fpm www.conf file. I’m running php7.2 so the file is located here:

/etc/php/7.2/fpm/pool.d/www.conf

However, if you are running a different php version, you may have different path. The trick is to cd from /etc the ls to see the list of folders. For example, if you have php 7.3, the path would be:

/etc/php/7.3/fpm/pool.d/www.conf

Edit the file using your favorite editor. I’m using vim so I type:

vim /etc/php/7.2/fpm/pool.d/www.conf

Let’s navigate to the line says:

listen = /run/php/php7.2-fpm.sock

Comment that line by placing a ; at line start and type the following line below:

listen = 127.0.0.1:9000

Now it will look like this:

 

configure php-fpm www.conf

Save your file and restart php fpm. I’m on ubuntu 18.04 so my command to restart php fpm is this:

systemctl restart php7.2-fpm

However, if you are on a different server, the command could be different. You can google for the exact command for your system.

Configure your site’s server block

Let’s go to:

/etc/nginx/sites-available/

And create a file match your domain name. For example, my site is excelautocomplete.com, I’ll create file called excelautocomplete.com

vim excelautocomplete.com

then enter the following content to the file:

# WordPress single site rules.
# Designed to be included in any server {} block.
# Upstream to abstract backend connection(s) for php
upstream php {
        server unix:/tmp/php-cgi.socket;
        server 127.0.0.1:9000;
}

server {
        ## Your website name goes here.
        server_name domain.tld;
        ## Your only path reference.
        root /var/www/wordpress;
        ## This should be in your http block and if it is, it's not needed here.
        index index.php;

        location = /favicon.ico {
                log_not_found off;
                access_log off;
                expires max;
        }

        location = /robots.txt {
                allow all;
                log_not_found off;
                access_log off;
        }

        location / {
                # This is cool because no php is touched for static content.
                # include the "$is_args$args" so non-default permalinks doesn't break when using query string
                try_files $uri $uri/ /index.php$is_args$args;
        }

        location ~ \.php$ {
                #NOTE: You should have "cgi.fix_pathinfo = 0;" in php.ini
                include fastcgi.conf;
                fastcgi_intercept_errors on;
                fastcgi_pass php;
                fastcgi_buffers 16 16k;
                fastcgi_buffer_size 32k;
        }

        location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
                expires max;
                access_log off;
                log_not_found off;
        }
}

You need to pay close attention to two fields:

  • server_name
  • root

in server_name, type in your website address (without http or https). In the root field, enter the location of your site’s file (the folder that contains wp-content, wp-admin…)

Save the file and reload nginx.

systemctl reload nginx

Now, your site should be up and running without an error.

Conclusion

Moving my website from Apache to Nginx was a challenging but exciting experience for me. I lost a sales due to my customer cannot get to the download page of the product. However, I’ve learned a lot from this experience and next time when I need to move other sites, the whole process would be much faster and easier.

Hopefully, the post has been helpful to you. If you have questions, don’t hesitate to ask.

Create and verify password in PHP with new hashing functions

Previously, when creating a login system, I usually take users’ password input and md5 it and store in the database. Doing so seemed to be sufficient enough. However, no one can be sure that their system is not vulnerable to attacks. In the worst case when your site gets hacked, your database is stolen, using weak hashing algorithm on users’ passwords may enable hackers to easily decode such fields. Thus, since PHP 5.5, there are new functions available to help you create an verify password hash easily. Let’s learn what are they and how to use them.

Creating a password hash with password_hash

Creating a password hash in PHP > 5.5 is very simple.

$hash = password_hash('easy-password', PASSWORD_DEFAULT, ['cost' => 12]);

and if you echo the hash, you’ll see something similar to this:

echo "hash is: {$hash}";

If you run the script again (reload the browser in my case), you’ll get a new hash string (still same password input!):

This is quite strange for people who are familiar to md5. In md5, for one input, there is one output. In this case, one input generates multiple outputs. This makes the effort to create a dictionary to map easily-to-guess passwords and their hashes become worthless.

password_hash takes 3 parameters:

  1. The raw password. This is what the users enter along with their email/id to login to your application
  2. The hashing algorithms. There are a few of them you can find out here.
  3. Additional options. Additional options which most of the time consists of the cost option. In the example, I used cost = 12. Higher cost provides higher security but takes more time.

Verify the password with password_verify

To verify the validity of a password hash, we’ll use password_verify. Consider the case of user login, they will provide the raw password (without hashing). Our application will get the hash password in the database and verify if the raw password and the hash match.

If you used md5 before, the code may look like this:

if ( md5($raw_user_input) == $password_hash_in_database )
{
//ok to login
}

However, if you hash the password using password_hash, you’ll use password_verify to verify.

 

if (password_verify($raw_user_input, $password_hash_in_database )
{
//ok to login
}

For example, in my case:

$verified = password_verify('easy-password', '$2y$12$06uHkyogkUveLLLVIFhvsOFzpBrYkZ8XIegVdwj0RtE/zI/dzfHnq');

echo "verify is: {$verified}";

The output is:

You can see that the hash was successfully verified.

That’s what I learned today. This is a part of 7 days challenges to learn one topic every day. Thanks for reading

Quick Composer Tutorial – Learn Composer PHP in 10 Minutes

I’ve been writing code in PHP for more than 5 years and it’s a shame to admit that I didn’t know composer until recently. I’ve read some tutorials but couldn’t get my head around it. I  have to admin that since I code mostly small web projects (WordPress plugins…) I don’t find the need for a package manager. However, to call myself a PHP developer, I have to know its most popular package manager. In this post, I’m going to share my understanding with composer, how to get started with it so you might benefit from my experience too.

What is composer?

Composer is a package manager tool that helps you deal with PHP dependencies. Previously, when I didn’t use Composer, I mostly use include_once to include the libraries. In addition, I had to download the libraries and put to my project all by myself. It’s no longer the case with composer.

Let’s see how it works.

Installing Composer

Installing composer is simple for all environment. If you are on Windows, you can download the installation file and go through the process in just a minute. I’m not going too much into details here since there directions on https://getcomposer.org is detailed enough.

Using composer

Using composer is a very straightforward process. We first tell composer what library to include and it will get that library for us.

Start a fresh project with composer
Now we have composer installed, let’s get started and create an empty folder and type in

composer init

The console will walk you through various steps to get information about the project you want to create. I use the default option for most of the question. After finishing all the steps, composer will create a composer.json file. Open this up and you’ll see the content you’ve just entered.

Here is the content of the composer.json

{
    "name": "myn/lab",
    "description": "This is a test composer project",
    "license": "MIT",
    "require": {}
}

As you can see, the “require” element is just an empty object. When we include dependencies, all of them will be listed here.

Adding libraries to composer

Now, we have a composer project. Let’s add a library and use it. I’m going to include a logging library called monolog in the project. You can find details about that project here.

To get the monolog library, simply run:

composer require monolog/monolog

Composer will go ahead and get monolog and also its dependencies (if any) for us.

If you check the composer.json, you’ll see it is updated:

{
    "name": "myn/lab",
    "description": "This is a test composer project",
    "license": "MIT",
    "require": {
        "monolog/monolog": "^1.24"
    }
}

Now, let’s write some code to use monolog.

Include the autoload.php file

If you notice, composer also created a folder called vendor. Inside it lies the libraries and one file called autoload.php. When creating php script, you simply include the autoload.php file to have access to all dependencies you installed.

I’m going to create an index.php in the root folder and include the autoload.php file.

<?php

require 'vendor/autoload.php';

use Monolog\Logger;
use Monolog\Handler\StreamHandler;


$log = new Logger('test-logger');
$log->pushHandler(new StreamHandler('C:\\xampp\\htdocs\\lab\\log.txt', Logger::WARNING));

$log->warning("Testing monolog");

If I run the file now, there will be a log.txt file created at C:\xampp\htdocs\lab with the below content:

 

[2018-12-10 09:55:15] test-logger.WARNING: I do some test [] []

You may wonder how do I know to type in the code in the php file? Well, the maker of monolog provides example code on the library page on packagist.

Conclusion

Now I have a basic understanding of composer, the PHP package manger. I hope this post can help you understand composer a bit better. I still have a lot to learn and I’ll share all my findings here with you.

 

How To Change PHP Configurations in Bitnami and Make Them To Take Effects

Recently, I had to change the value of max_input_vars in php settings due to a requirement from a WordPress plugin. My site is running on EC2 server, installed by bitnami. Followed by the instructions, I went to /opt/bitnami/php/etc and edit the file php.ini.

I successfully located the line max_input_vars. Sure enough, that line was commented so the settings take its default value, 1000. I uncommented that line and set the limit to 3000.

Finally, I saved the file and restart apache.

However, still no luck. I tried to find other places where this settings could be set. After a while, I couldn’t find any other places.

What is the solution?

The solution is to run this script:

sudo /opt/bitnami/ctlscript.sh restart php-fpm

And you can guess, the limit was increased.

Conclusion

It seems that when you make changes in php.ini, you need to restart php-fpm, not apache. The system I’m working on, as mentioned at the beginning of the post, is EC2 and managed by bitnami.