megacolorboy

Abdush Shakoor's Weblog

Writings, experiments & ideas.

How to create an ISO image from CDs/DVDs?

I used to create ISO images using DAEMON Tools but I wanted to try something different and see if there's a way to create it using the Linux CLI.

Turns out, you can do in just a single line using the dd utility like so:

dd if=/dev/cdrom of=/path/to/your/directory/image.iso

The if stands for input file and of stands for output file.

Looks like, I don't have to use DAEMON Tools for stuff like this, I guess.

Hope you found this tip useful!

Truncate a file using redirection in Linux

Simply put, sometimes, there are situations in where you just want to clear the contents of a file without deleting it.

This could be for many reasons like to avoid permission related issues, or maybe the file could be having useless logs that amasses to a size that measures in GBs.

So, the easiest solution is to clear it away from a terminal is by shell redirection like so:

:> filename

Let me break down the command here:

  • The : symbol means true and doesn't produce any output.
  • The '>' symbol is used for redirecting the output of the preceding command (in this case, it's empty!)
  • filename is the file that you want to truncate. If it doesn't exist, the file will be created.

Alternatively, you can do the same by using the cat command to output the contents of the /dev/null device (which only contains a EOL character) to empty a file:

cat /dev/null > filename

Hope this comes in handy!

How to identify which Linux distribution is running in your system?

If you've read my earlier post, I was using Ubuntu, at that time, and I thought that was how you identify which distro is running in your system but using lsb_release -a is not always going to work as some distributions may not have it installed.

Try the following command to identify the distribution you are running in your system:

cat /etc/os-release

And you'll get the following output:

NAME="XXXX"
ID="XXXX"
DISTRIB_ID="XXXX"
PRETTY_NAME="XXXX"

Hope this helps you out!

Display list of files with their extension and file sizes

Last month, I was trying to free up some space in my company servers and I realized that there were a lot of .zip files taking up a lot of space.

So, I wrote the following command to list files by their extension:

find . -iname \*.extension -exec du -sh {} \; > file-list.txt

And later to determine which files are the largest, I executed this command to sort the list by file size:

sort -rh file-list.txt > newfile.txt

Hope this tip helps you too! 😄

Dark/Light mode with CSS and JavaScript

A simple guide on how to implement a dark/light theme switcher with CSS and JavaScript

It's quite common these days that many websites let their users to decide their preferred color scheme(s). Giving this sort of customizability offers good user experience.

In this article, I'll provide a simple step-by-step guide on how to implement a dark/light theme switcher with HTML, CSS and JavaScript.

Prerequisites

This article assumes that the reader has a basic know-how on HTML, CSS, JavaScript and basic knowledge on using the command-line.

Using CSS variables

I always wanted to implement one for this website too and I thought of making use of CSS variables as I found it to be quite straight forward and I don't have to worry too much about browser support.

Try adding the below CSS to your stylesheet:

    :root {
        --background-color: white;
        --font-color: black;
        --accent-color: red;
        --alt-background-color: black;
        --alt-font-color: white;
        --alt-accent-color: yellow;
    }

    html {
        background-color: var(--background-color);
        color: var(--font-color);
    }

    a {
        color: var(--accent-color);
    }

    html[data-theme="dark"] {
        background-color: var(--alt-background-color);
        color: var(--alt-font-color);
    }

    html[data-theme="dark"] a {
        color: var(--alt-accent-color);
    }
   

The :root selector contains a set of default values and in this case, these are just different colors, kind of like how we initialize variables in other programming languages.

For example, whenever the data-theme attribute is set to dark, the default values will be overidden by the html[data-theme="dark"] CSS rule for the theme to take effect.

Really, it's that simple!

Add some markup

That depends on what you really want to have in your website but for this tutorial, you can just place a simple button somewhere in your navigation bar or anywhere you like:

<button class="themeSwitcher">Dark/Light</button>

Toggle between light and dark themes

Yes, we are getting there and you just have to write a simple logic that checks if whether the current theme is dark or light based on the class used on the <body> element.

$('.themeSwitcher').on('click', function(){
    switch($('body').attr('data-theme')){
        case "dark":
            $('body').attr('data-theme', 'dark');
            break;

        case "light":
        default:
            $('body').attr('data-theme', '');
            break;
    }
});

Save user's preference in their browser

If your button works as expected, good! Now, once you refresh the page, the background would return to it's default mode but that's not what we wanted, right?

But why does it return instead of staying dark? Because your "preference" is not stored in your browser.

Modify your code to store your preferences in your browser:

<script>
$('.themeSwitcher').on('click', function(){
    switch($('body').attr('data-theme')){
        case "dark":
            $('body').attr('data-theme', 'dark');
            localStorage.setItem("theme", "dark");
            break;

        case "light":
        default:
            $('body').attr('data-theme', '');
            localStorage.setItem("theme", "");
            break;
    }
});
</script>

This should work fine but you'll want to avoid the "flickering" issue while changing themes or refreshing the page, in order to do that, make sure that you check the user preference before the page is completely loaded:

<script>
    if(localStorage.theme){
        document.documentElement.setAttribute('data-theme', localStorage.getItem("theme"));
    }
</script>

Conclusion

Well, if you've noticed, I wrote a simple theme switcher for my blog too. Try it out and you can inspect the code to see how it works.

Hope you enjoyed this article!

Stay tuned for more!

View your wget progress even after closing your SSH session

Few days back, I ran a wget command to download a file and accidentally closed the SSH client.

I logged in again and checked the list of active processes and thankfully, the wget process was still running except that I wasn't able to know the current progress of it.

So, I did a little research and found a way to view the progress, so I tried the following command:

tail -f wget_log

And, I was able to view it's current download progress again.

Hope this helps you out!

How to use GitHub Personal Access Token to authenticate your git commits?

On November 2020, GitHub had announced that they would no longer accept basic username/password to authenticate git commits and it would be deprecated by Mid 2021.

Instead, they recommend you to authenticate your git commits using a Personal Access Token from your GitHub account.

Generate a personal access token

  1. Unset your credentials from your remote repository: git config --local --unset credential.helper
  2. Login to your GitHub account and go to Settings
  3. Then navigate to Developer Settings -> Personal Access Tokens
  4. Click on Generate new token
  5. Give a name to your Personal Access Token and the necessary permissions required.
  6. Once done, hit on Generate token
  7. The token will be shown once, so make sure to copy it and store it somewhere that you can remember.

Update your remote repository

Once you've generated a token, you just have to update your remote repository by following the below steps:

1. Update remote repository URL

git remote set-url origin https://<your_access_token>@github.com/<your_git_repo_url>

2. Just git pull once

Now, just perform git pull operation once and you should be good:

git pull https://<your_access_token>@github.com/<your_git_repo_url>

Hope this helps you out!

How to fetch a JSON object from an array of JSON objects by property value?

Say, for example, you have an array of JSON objects that contains the following data:

var arrOfObjects = [
    {
        name: "John Doe",
        age: 20,
        email: "john.doe@email.com"
    },
    {
        name: "Bob Smith",
        age: 56,
        email: "bob.smith@email.com"
    },
];

Hmm, that's pretty basic but how will get the information of "Bob Smith" using his email? Well, that's where the Array.find() method comes into the picture.

Try reading the Mozilla Documentation on Array.prototype.find() and implement the following:

var key = "email";
var valueToFind = "bob.smith@email.com";
var result = arrOfObjects.find(obj => {
    return obj[key] == value;
});

//This should give you the record of Bob Smith.
console.log(result) 

This works fine on all browsers except Internet Explorer (I mean, it sucks anyways!), which is okay!

Hope you found this useful!