Category: Web Programming

  • List Global Git Aliases

    Here is a quick & easy way to list all Git global aliases.

    git config --list | grep alias
  • WordPress: Underscore And Lodash Conflict

    In one of the projects that I’m working on, I recently encountered a conflict between Underscore library used within WordPress and the Lodash library used with the Theme I was working on.

    I knew from the console errors that the conflict arises because both use _. syntax. I knew that I must use _.noConflict() but I didn’t know where to.

    One of my fellow developers came up with the following solution to solve the issue.

    wp_enqueue_script( 'et-onboarding', $BUNDLE_URI, $BUNDLE_DEPS, (string) $cache_buster, true );
    
    wp_add_inline_script( 'et-onboarding', '_.noConflict(); _.noConflict();', 'after' );
    
    wp_localize_script( 'et-onboarding', 'et_onboarding_data', self::get_onboarding_helpers() );

    I’m fortunate to be part of a team of brilliant folks.

  • Javascript: Remove Duplicates From Arrays — A Simple Way

    Let us dive right away with an example.

    const urls = [
        "https://example.com/premade/wp-content/uploads/sites/4/2023/11/800x800.jpg",
        "https://example.com/premade/wp-content/uploads/sites/4/2023/11/800x800.jpg",
        "https://example.com/premade/wp-content/uploads/sites/4/2023/11/800x800.jpg",
        "https://example.com/premade/wp-content/uploads/sites/4/2023/11/800x800.jpg",
        "https://example.com/premade/wp-content/uploads/sites/4/2023/11/800x800.jpg",
        "https://example.com/premade/wp-content/uploads/sites/4/2023/11/800x800.jpg",
        "https://example.com/premade/wp-content/uploads/sites/4/2023/11/800x800.jpg",
        "https://example.com/premade/wp-content/uploads/sites/4/2023/11/800x800.jpg"
    ];
    
    const uniqueUrls = [...new Set(urls)];
    
    console.log(uniqueUrls);
    

    Now the question is — how does a Set object remove duplicates? Set objects are collections of values. A value in the set may only occur once; it is unique in the set’s collection.

    Note that our array urls must be converted to set and then back to array. The conversion is very simple.

    const myArray = ["value1", "value2", "value3"];
    
    // Use the regular Set constructor to transform an Array into a Set
    const mySet = new Set(myArray);
    
    mySet.has("value1"); // returns true
    
    // Use the spread syntax to transform a set into an Array.
    console.log([...mySet]); // Will show you exactly the same Array as myArray
    
  • WordPress: The server cannot process the image — How To Fix?

    WordPress: The server cannot process the image — How To Fix?

    The server cannot process the image. This can happen if the server is busy or does not have enough resources to complete the task. Uploading a smaller image may help. Suggested maximum size is 2560 pixels.

    The above seen error swept a couple of hours out of my day. At the end, I’ve figured out what went wrong and I’m about to share how I fixed it.

    Solution

    1. Find out which php.ini is loaded by running the following command.
    php -i | grep 'php.ini'
    # Result
    
    Configuration File (php.ini) Path: /etc/php/7.x/cli
    1. Bump up the upload_max_filesize value. In my case, I bumped to 8M. I had to make this change in the /etc/php/7.4/fpm/php.ini file.
    ; Maximum allowed size for uploaded files.
    ; http://php.net/upload-max-filesize
    upload_max_filesize = 8M
    1. Restart PHP FPM service by running the following command.
    sudo systemctl restart php7.4-fpm.service

    By now the maximum upload file size displayed in the WordPress dashboad must have been set to the value you set in the php.ini file.

    Behind The Scenes

    If you’re interested in knowing what I tried before I arrived at the above solution then keep reading.

    1. Since the issue is obvious and related to file uploads, I tried to increase the memory limit using `wp-config.php`. But this did not solve the problem.
    define('WP_MEMORY_LIMIT', '256M');
    define('WP_MAX_MEMORY_LIMIT', '512M');
    1. Next I tried changing the upload_max_filesize value in php.ini file. I’m running a LEMP stack. However, changing the php.ini file did not solve the problem.

    The loaded php.ini can be found by running the following command.

    php -i | grep 'php.ini'
    # Result
    
    Loaded Configuration File: /etc/php/7.4/cli/php.ini

    I restarted the PHP service for the changes in php.ini file to take place using the following command.

    sudo systemctl reload php7.4
    1. I disabled gd PHP module and installed imagemagick PHP module. However, this did not solve the problem.

    You can run the following command to list all the installed PHP modules.

    php -m

    Today, I’m grateful to my two beautiful dogs who keep me sane by offering love licks when I’m busting through the roof.

  • How To Use Date Query With WP CLI?

    If you’re reading this post, I’m sure you don’t need an introduction on WP CLI.

    Inclined to use some stats in my monthly review post, I wanted to find out the total number of spam comments my blog received for the month of April.

    Thinking that WP CLI would make my task easier, I started looking at the documentation to find out the appropriate syntax to be used with the wp comment list command.

    To my surprise I found out that date query isn’t possible with WP CLI. I realized that I could leverage RESTful WP CLI and apply the date query.

    RESTful WP CLI query looks like the following.

    wp rest comment list

    Using the help command, I figured out the options to be passed.

    wp help rest comment list

    In order to get the list of spam comments for the month of April, I arrived at the following command.

    wp rest comment list --after='2022-03-31T23:59:59' --before='2022-05-01T00:00:00' --status='spam'

    Problems

    However, there were a couple of problems.

    • Authorization: In order to use the status option, authorization is must. Otherwise only the default value approve will be taken in to account.
    • Readability: The output contains all the comment table fields cluttering the entire console.
    • Getting the total count: A tabular display of data doesn’t output the total number of records.

    Authorization

    I solved the authorization problem using the user option in the command like shown below.

    wp rest comment list --after='2022-04-27T23:59:59' --before='2022-05-01T00:00:00' --status='spam' --user='admin'

    Readability

    I solved the readability problem using the field option in the command like shown below.

    wp rest comment list --after='2022-04-27T23:59:59' --before='2022-05-01T00:00:00' --status='spam' --user='admin' --field='id'

    Total Count

    You can obtain the count by using the --format=headers option.

    wp rest comment list --after='2022-04-27T23:59:59' --before='2022-05-01T00:00:00' --status='spam' --user='admin' --field='id' --format='headers'

    References

  • [Ubuntu] curl: (6) Could not resolve host

    By changing a domain’s DNS I ended up with curl: (6) Could not resolve host issue. I lost a couple of hours before I resolved. The post is all about how resolved the issue.

    I recently installed Vanilla forum on TapThatBrain.com. I wanted Vanilla to send out emails when I register users from Vanilla’s dashboard.

    The cloud web hosting that I use doesn’t come with a mail server out the box. So I thought of using a SMTP relay service. Using a SMTP relay service demanded changing the domain’s DNS eventually leading me to the issue — curl: (6) Could not resolve host issue.

    I took the following approach before I finally resolved the issue.

    1. At first, I thought I messed up my nginx configurations. But my configuration was set up to listen both locations — tapthatbrain.com and www.tapthatbrain.com. So my nginx config was good. Did you know? You can use command line to verify if nginx configurations are in place before reloading the nginx server. Learn how.
    2. I noticed that when I go to tapthatbrin.com, I was redirected to www.tapthatbrain.com and I wanted to find out where the redirection comes from — nginx, certbot or WordPress. Did you know? You can use curl -I tapthatbrain.com to identify the HTTP response using the command line.
    3. The redirection was clearly not from my nginx configuration.
    4. WordPress may possibly cause the redirection. The values of WP_HOME and WP_SITEURL in WordPress were www.tapthatbrain.com. But I wasn’t sure if WordPress caused the redirection. So I used WP CLI to update the value to tapthatbrain.com. But the redirection continued to happen.
    5. Finally, Certbot’s configuration in nginx made the redirection. In that case I know I should be able to access the website using www.tapthatbrain.com. But I was not able to access using the www version.
    6. So, my next thought was the router’s DNS cache. Since I use Jio Fiber connection, I followed the steps listed at https://www.reliancedigital.in/solutionbox/how-to-change-your-dns-to-browse-faster-and-safer/ to clear the DNS cache at router level. But clearing the DNS cache at router level didn’t help.
    7. I thought of accessing the both versions (www and the non-www) of the website using a different internet connection. Fortunately, I was able to access both versions using my mobile data.
    8. That meant something went wrong at Ubuntu (or system) level. Ubuntu couldn’t resolve the DNS. A quick search on Stack Overflow reveled a solution that worked.

    Once I updated the /etc/resolve.conf file, I was able to access both versions of the website tapthatbrain.com from my Ubuntu machine.

    This issue could seem naive for someone with decent Ubuntu skills. However, I don’t feel I’m put to shame for sharing this instance. Instead, I see this as learning opportunity.

    Today, I’m grateful to all my mentors for all their motivation. They made me stronger each day.

  • Vanilla — Pretty Permalinks

    Being a long time user of WordPress, I love the pretty permalink feature. This feature in WordPress works out of the box.

    I started using Vanilla recently on a website that I run and manage and found that the forum application is not using pretty permalinks.

    I could have used nginx server blocks to rewrite the URLs using the rewrite directive but before that I wanted to find out if Vanilla ships with this feature, out of the box.

    Turns out that Vanilla’s pretty permalink feature can be enabled using the config like shown in https://stackoverflow.com/a/53923139/5569979

    Set the following config in /conf/config-defaults.php

    $Configuration['Garden']['RewriteUrls'] = true;

    That’s all you need to do. If pretty permalinks don’t work for you then make sure to get the nginx configuration right. Read Vanilla — A BBPress Alternative to learn more about nginx configuration for Vanilla.

  • Vanilla — A BBPress Alternative

    I needed a searchable knowledge base, a forum, to use on Tap That Brain website. At first, BBPress looked like a great option. But it turned out to be ineffective with the block based theme I use called Quadrat.

    Stack Overflow for Teams was next on my list. However, I didn’t like the fact that my users have to leave my website to find information. So I had to explore further.

    I ran into thread, titled “Looking for alternatives“, on BBPress forum. Crazy, isn’t it? However, that thread made me realize how a forum can foster community interactions.

    I found Ipstenu’s comment in the thread. Ipstenu is a well known name in the WordPress space. So I was more inclined to explore her list of alternatives. Out of the many options, I chose to go with Vanilla. I like the fact that Vanilla is a open source software.

    Things to consider

    1. TapThatBrain.com is powered by WordPress. I have installed WordPress application on the root directory. For the sake of understanding, let us assume that the root directory is /var/www/tapthatbrain.com/
    2. I would like to have a forum at TapThatBrain.com/forum

    Installation

    Download the Vanilla application from https://open.vanillaforums.com/download. From their documentation, installation appeared to be simple. But it wasn’t the case with me.

    Unzip the downloaded file at /var/www/tapthatbrain.com/forum and navigate to TapThatBrain.com/forum on the browser to complete the installation.

    Setting up the nginx server block was quite challenging. Vanilla’s documentation has listed the config to be included with nginx. However, I had to tweak it a bit to get it working with my setup.

    NGINX configuration

    Here’s how I got Vanilla working alongside WordPress. In my case, I know all forum requests are routed through TapThatBrain.com/forum/

    NGINX cannot process PHP files. We use FastCGI to handle PHP processing. I shall talk more about this in a minute. But let us see how I handle all /forum/ requests before that.

    Handling the /forum/ requests.

    location /forum/ {
      try_files $uri $uri/ index.php$is_args$args;
    }

    The above statement matches all requests made to /forum/ and executes the file. If the file isn’t available, it executes the folder. If the folder isn’t available then it executes index.php and passes any $args received.

    The above block worked great at first. However, I needed to handle requests like /forum/categories/, /forum/discussions/, etc.

    location /forum/ {
      try_files $uri $uri/ @vanilla;
    }
    
    location @vanilla {
      rewrite ^/forum/(.*)$ /forum/index.php?p=$1 last;
    }

    The goal of the above block is to rewrite the URLs like /forum/categories/ and /forum/discussions/ and rewrite them as TapThatBrain.com/forum/index.php?p=discussions and you get the idea.

    We want the rewrite to happen because these URLs are dynamic and are not actual pages. You can read more about the last keyword mentioned in the rewrite directive.

    FastCGI PHP processing

    In order to process PHP files, we use FastCGI. Pass the fastcgi_pass value and the processing should kick in.

    location /forum/ {
      location /forum/index\.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_param SCRIPT_NAME /forum/index.php;
        fastcgi_param SCRIPT_FILENAME $realpath_root/index.php;
        fastcgi_param X_REWRITE 1;
        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
      }
    
      try_files $uri $uri/ @vanilla;
    }
    
    location @vanilla {
      rewrite ^/forum/(.*)$ /forum/index.php?p=$1 last;
    }

    A nested location block is added for the FastCGI processing. The nested location block looks for the /forum/index.php. Now I have to re-route all requests via index.php file.

    I would soon update this post about re-routing requests via index.php

    With this current setup, I will be able to let Tap That Brain users access a forum without leaving the website.

    If you’re curious, checkout the forum at https://www.tapthatbrain.com/forum/