megacolorboy

Abdush Shakoor's Weblog

Writings, experiments & ideas.

25th July 2022 — Blogmarks

  • Beej's Network Guide — Beej has updated the classic Linux Network Programming Guide. Used to read back in my university days. Time to read it again 🤔
  • Qubes OS — A free open-source, security-oriented operating system. Quite interesting. I guess, it's targeted towards the paranoid 🤫
  • Every line of code is written without a reason, maintained out of weakness, and deleted by chance. — Jean-Paul Sartre's Programming in ANSI C

Built a new generative art pattern generator

Thought of giving a colorful touch to the site.

Ten days ago, I launched a new makeover for the blog and I felt that it needed a little bit of a colorful yet unique touch.

Recently, I started playing around with the concept of Generative Art and have been studying a lot of about various patterns like:

  • Bauhaus
  • Truchet Tiles
  • Piet Mondrian

So, I thought of writing a new pattern generator using CSS and JavaScript that would assign each article a unique, colorful pattern. Though, it's not yet quite complete, I would consider it to be an experimental feature to see if it goes well with the site.

What do you think about it? Does it look good? What kind of patterns should I add to my generator?

Interested on how it's implemented? Have a look at the source code.

Hope you found this article to be inspiring!

Download a webpage along with it's assets using wget

I wanted to download a webpage along with it's assets and scripts, I tried using Chrome's Save as... option but it wasn't working as expected.

I did a little googling and thought of using wget to do the job and it worked. Here's the command I used:

wget -p -k -H --nd https://www.example.com

Let's see what do those flags mean:

  • -p: Downloads all the necessary files to properly display the downloaded HTML page.
  • -k: After the download is complete, it converts the links in the document to make them suitable for local viewing.
  • -H: This would download files that spans different hosts.
  • --nd: While retrieving files recursively, it will not create a hierarchy of directories and downloads the files into a single directory instead.

If you open index.html directly on the browser, the assets might be broken as the -k flag doesn't seem to make the assets relative to the root directory. In order to view it, you can view it on a localhost server like WAMP, XAMPP or if you are using Python, you can type python -m http.server and view your downloaded file.

Might be a bit messy but gets the job done.

16th July 2022 — Blogmarks

  • Bear Blog — A privacy-first, no-nonsense, super-fast blogging platform. Not really needed for me but quite an interesting platform.
  • Becoming a good engineer is about collecting experience. Each project, even small ones, is a chance to add new techniques and tools to your toolbox. Where this delivers even more value is when you can solve problems by pairing techniques learned on one project with tools learned working on another. It all adds up. — Addy Osmani
  • Interactive Mechanical Contraption in pure CSS — Believe it or not, it's unreal. It doesn't even look like it's done using CSS. Love it! ❤️
  • Defensive CSS — I came across this site two days ago. I like how Ahmad Shadeed describes different CSS patterns in detail.

A new makeover for 2022

Function over fashion. Minimal. Scraped out the redundant and added some new features.

I have been reading a lot of articles and blogs than writing these days, thanks to my hectic schedule, I barely get the time to work on my blog.

Initially, I thought of porting my blog to Django or Hugo but I decided to tune up my blog engine by adding new features like Tags/Categories and Archives, optimizing the time-taken to convert Markdown to HTML files and making it more flexible for the future.

Also, I revamped the entire blog's layout by writing a new theme and making it a bit more responsive than it previously was. However, I retained the colors and the fonts used. Thank you Rasmus for the amazing Inter font ❤.

Still got some work to do

Yes, new layout and all but there's still few left in pending and hopefully, I'd complete it by the end of July 2022. But here's what's left:

  • Thanks to Simon Willison's Blog, I took the idea of Blogmarks and it's basically a collection of articles and quotes that I find interesting and would share it here.
  • Planning to move all project/widget based posts to a section called "Projects", which would also have a different layout.
  • Book reviews and a new resume template
  • Dark theme with a better color palette (I wasn't happy with the color scheme that I wrote previously.)

Wait, where's megacolorboy?

For the time being, I thought of removing my username "megacolorboy" from the Masthead for the sake of professionalism and hey, I ain't a kid no more, so time to grow up, you know?

I'd like to thank my beautiful wife for letting me work on my passion even though it might annoy her at times, I love her for that ❤!

Hope you like the new makeover!

Extract private key and certificate from .pfx file

Ever wondered what's a .pfx file? It's just a combination of both private key and the certificate and this file is usually used in Microsoft IIS Servers.

However, you can't use this file in Linux servers as both private key and the certificate are supposed to be individual files.

Here's how you can extract both private key and certificate files:

openssl pkcs12 -in file.pfx -nocerts -out privatekey.pem -nodes
openssl pkcs12 -in file.pfx -nokeys -out certificate.crt

Hope this tip helps you out!

Install NGINX and PHP on Windows

Thought of writing a small tutorial on how to install NGINX and PHP on Windows. You can also use this as a reference if you wanted to install them on Windows Server too.

Note

This tutorial won't teach you how to configure both PHP and NGINX configurations as there are a lot of tutorials focusing on that topic.

Setting up NGINX

  1. Download NGINX for Windows
  2. Go to C:/ directory and create a folder named C:/nginx.
  3. Unzip the downloaded .zip file in C:/nginx directory.
  4. Go to C:/nginx and create two new folders named sites-available and sites-enabled.
  5. To test, if it's working, double-click on C:/nginx/nginx.exe and type localhost in the browser. You should be able to see a Welcome page.
  6. Kill the NGINX process from Task Manager.

Setting up PHP

  1. Download PHP 8.1 for Windows.
  2. Go to C:/ directory and create a folder named C:/php or if you wanted to have multiple versions, C:/php8.1.
  3. Unzip the downloaded .zip file in C:/php directory.
  4. Add PHP to your system environment variables by adding the path C:/php
  5. Open Command Prompt and type php -v. You see should be able to see the version if it's installed correctly.

Run NGINX and PHP as separate services

Generally, it's good practice to run both PHP and NGINX as background services or else, you might have to start the processes manually every time the server goes down.

As I was looking for a way to do that, I stumbled upon this post on StackOverflow and it was quite helpful.

Install NSSM Service Manager

NSSM Service Manager is a free open-source alternative that helps you create a service with the help of GUI. Below are the steps that I followed:

  1. Download NSSM Service Manager
  2. Go to C:/ directory and create a folder named C:/nssm.
  3. Unzip the downloaded .zip file in C:/nssm directory.

Install NGINX as a service

  1. Open Command Prompt as an Administrator.
  2. Go to C:/nssm/win64/ directory.
  3. Type nssm install nginx
  4. Define the path of the nginx.exe file.
  5. Click on Install Service.
  6. Press Win+R and type services.msc.
  7. Look for nginx and start the service.
  8. Open your browser and type localhost to see if it's working correctly.

Install PHP as a service

  1. Open Command Prompt as an Administrator.
  2. Go to C:/nssm/win64/ directory.
  3. Type nssm install php
  4. Define the path of the php-cgi.exe file.
  5. Add the arguments: -b 127.0.0.1:9000
  6. Click on Install Service.
  7. Press Win+R and type services.msc.
  8. Look for php and start the service.

Test to see if it works!

Before you proceed with the following steps, ensure that you include the *.conf files from the sites-enabled folder in your nginx.conf file.

Add the line include "C:/nginx/sites-enabled/*.conf"; in your nginx.conf file and follow the steps below:

  1. Go to C:/nginx/sites-available directory and create example.com.conf.
  2. Go to C:/nginx/html and create directory.
  3. Refer to the sample configuration provided and make the necessary changes.
  4. To enable the site, you have to create a symlink: mklink "C:\nginx\sites-available\example.com.conf" "C:\nginx\sites-enabled\example.com.conf".
  5. Ensure the configuration doesn't have any errors by typing nginx -t in C:/nginx directory.
  6. Restart the NSSM service.
  7. Add an entry in your hosts file: 127.0.0.1 example.com.
  8. And you're done!

Tip

If you get a "Connection Refused" or error that is similar to that, it's most probably due to firewall or maybe the PHP service isn't running.

Useful commands while using NSSM

# Start a service
nssm start "servicename" 

# Restart a service
nssm restart "servicename" 

# Stop a service
nssm stop "servicename" 

# Install a service
nssm install "servicename" 

# Remove/Uninstall a service
nssm remove "servicename" 

Sample NGINX Virtual Host Configuration

server {

    # Your Domain Name
    listen 80;
    server_name example.com;

    autoindex off;
    add_header X-Frame-Options "SAMEORIGIN";
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
    add_header X-Content-Type-Options "nosniff";
    add_header X-XSS-Protection "1; mode=block";
    add_header Access-Control-Allow-Origin *;

    if (!-e $request_filename) {
        rewrite  ^/[_0-9a-zA-Z-]+(/wp-(content|admin|includes).*) $1 break;
        rewrite  ^/[_0-9a-zA-Z-]+(/.*\.php)$ $1 break;
    }

    # Uncomment these lines if SSL is provided
    #==========================
    #listen 443 ssl;
    #ssl_certificate your-ssl.pem;
    #ssl_certificate_key your-ssl.key;
    #ssl_protocols TLSv1 TLSv1.1 TLSv1.2; 
    #ssl_prefer_server_ciphers on;
    #ssl_ciphers 'EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH';
    #==========================

    # Log files for Debugging
    access_log logs/example-access.log;
    error_log logs/example-error.log;

    # Directory
    root "C:/nginx/html/example.com";
    index index.php index.html index.htm;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ /\.(?!well-known).* {
        deny all;
        access_log off;
        log_not_found off;
    }

    # Deny yaml, twig, markdown, ini file access
    location ~* /.+\.(markdown|md|twig|yaml|yml|ini)$ {
        deny all;
        access_log off;
        log_not_found off;
    }

    # PHP-FPM Configuration Nginx
    location ~ \.php$ {
        fastcgi_pass   127.0.0.1:9000;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        include        fastcgi_params;
    }
}

Conclusion

If you've gotten this far, give yourself a pat in the back.

Hope you've found this tutorial useful and please share it with your friends and colleagues if they really need it!

I switched to Fedora 35

Switched from Void Linux to Fedora 35

Yes, I distro-hopped again but I guess it's a meaningful decision.

I was using Void Linux with an i3wm tiling manager setup to see if it would improve my programming productivity.

I've got to say that i3wm is an amazing tiling manager and if you are into tiling windows, this should be something worth of your time.

On the other hand, I thought of trying out Void Linux because I was tired of Ubuntu and it's bloat, whereas Void Linux is quite minimal and lightweight.

Then, why leave it?

It has a good package manager that is similar to Arch's AUR repository but the lack of documentation and updates made me feel that there's barely contributions for it.

I had issues using docker and virtualbox in it, often giving me compatibility issues at times, which left me frustrated.

Hello, Fedora!

When I decided to distro-hop, I had to give myself some time and research as to which distro would really suit me as a programmer and that would just work out of the box.

I wanted something that:

  • is developer-oriented.
  • stable but bleeding-edge.
  • just works out-of-the-box.
  • has a minimal and clean looking interface.

That's when Fedora came into the picture and according to what I have researched especially on forums like Reddit, it's directed towards programmers and sysadmins.

Another sellout point for me was RedHat because I use CentOS at my workplace to configure and deploy web applications.

RedHat developers are really dedicated and ensure that they push the stable yet bleeding-edge releases.

The installation process was smooth and the new Gnome 41 is a bliss.

I didn't want to use i3wm this time because I felt that I always tiled multiple terminal windows, so I thought I would replace that with tmux instead. And besides, I don't really want to spend a lot of time tinkering each and every part of my UI, I'd rather spend that time writing code that solves problems instead.

Let's see how long Fedora would last!

Until next time, then!