megacolorboy

Abdush Shakoor's Weblog

Writings, experiments & ideas.

On learning new technologies

Sharing my tips on how I learn new technologies at work and home nowadays.

If you're a programmer, you already know that it's quite a daunting task to keep up with the latest stream of technologies:

  • Frameworks
  • Libraries
  • Programming Languages
  • Programming Paradigms

And there's never an end to it, it's just an ever-growing thing.

So, whenever I'm walking or commuting, sometimes, these questions pop up in my head:

  1. How can I learn something new without wasting my free-time?
  2. How can I learn all of the existing technologies out there? Is it possible?

Well, it's technically impossible for me to know about everything — in and out. Computer Science is such a broad field and has a lot of branches and sub-branches.

However, you can learn a piece of technology just enough to know that it exists and know when to learn more about it when the time arises.

Don't try to learn everything out there

In my years of developing web applications, I have seen two types of programmers:

  1. One who has deep knowledge of a particular technology
  2. An all-rounder but also not-so-deep knowledge about multiple technologies

Where do I fall ? Personally, I feel that I belong to the latter kind because I believe that spending a lot of time trying to specialize or being an expert in one technology is just too time-consuming and given the fact that everyday there's a new framework or programming language released out there, it's better to put yourself in the middle ground.

Why you ask? Here's why:

  1. Technology dies fast. For example, there was a time when jQuery used to be really popular amongst the Front End Developers but today, most of them move towards libraries like ReactJS, VueJS and NextJS to build their projects and sooner or later, another framework will come out to replace ReactJS and become the next thing.
  2. I don't think most of the technologies out there are relevant to the problem that you are trying to solve. Like why do I need to look into an API about geospatial analytics unless I'm trying to build an application that needs such a requirement, you get it right?

Basically, trying to learn every single piece of technology out there, it's just basically wasting time.

Ways and source of learning new stuff

Whenever I wanted to learn a new programming language, I would often go to Project Euler to flex my skills and that would help me learn more about it's features. Recently, I started LeetCode and Advent of Code - 2021. It's quite interesting solving these challenges as it helps you to learn more about the technology and feels good after solving a problem.

The next thing I would recommend is following a tech news feed like Hacker News but it can get quite addicting and distracting at times. Another good source of information are weekly newsletters. If you don't really know which one to follow, here's a repository filled with Awesome Newsletters that spans various areas like DevOps, Front end, Back end and Data Science. Try signing up on one of them and see how it goes.

Time is costly, use it wisely

The brain can only do so much in about 9 to 10 hours a day and in order for you to be efficient and productive in learning new stuff, try the following:

  1. Spend an hour learning, reading or practicing a new tool.
  2. Interesting stuff but not needed yet? Try bookmarking or make a note of it, so that you can revisit it again.
  3. If it fits your needs and project requirements, then go ahead and learn it!

If you found this article useful, please share it with your friends and colleagues.

Stay tuned for more!

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!