For most developers, design is a nightmare. In my experience, developers are terrible at design. Not all of them, but many of them. And that’s okay because traditionally, it hasn't been a developer’s job. In today’s article, I will take a look at this subject.

What is design sense?

In other words, "Design sense means knowing what looks good and works well, almost like a natural feeling." So it doesn’t mean that you need to know everything about designing and such. You just need to know what looks good and where. Also, it’s not a curriculum thing; you need to train your mind to adopt this by exploring other good designs.

Do you need it?

This question depends on various factors, such as:

Preference

First of all, it’s purely based on your preference. If you don’t like it, you can just skip. If you love to design stuff or are excited about learning new stuff, then you can at least give it a try.

Job Role

If you want to be a front-end developer, then mark my words—you will need this for sure. Nowadays, companies expect that you will have at least a good design sense.

Job Place

If you plan to join a big established company, then if you don’t want to, you can skip this. You can just focus on your work.

If you plan to join a startup, then you will need it for sure. Because, as startup culture goes, most startups want developers to be a one-man army. And on top of that, if you also have good design sense, then it’s just a lucky jackpot for them.

If you want to work as a freelancer, then most of the time, you may not need it, but if you do, it can help you impress your clients.

Where to start?

Everything has its fundamentals. So, here are the top 5 fundamental topics I would suggest you study.

1. Typography

Typography is an essential thing in design. There are different types of fonts, and each of them has a purpose. Also, there are some standards for font size, spacing, and line height.

2. Colors

There are some standards for colors as well. It plays a great role in user accessibility. You need to know at least about:

• Different shades of color.

• What are the most common colors for designing user interfaces?

• What should we consider while building a color palette for any product?

• What do different colors mean?

3. Spacing

White space is a very important thing that we don’t notice often. People don’t like things that look cluttered or messy. To prevent that, the design should have enough white space.

4. Alignment

There should be a proper alignment that guides user flow. You shouldn’t just place elements randomly. This creates a negative impact on user flow.

5. Consistency

Everything should be consistent across the whole design. Even if changes are needed, the transition should be smooth.

You don’t need to master these concepts right away, but understanding them will help you make better decisions in the future. Along with these, start exploring designs on Behance, Dribble, or Figma Community. This is the main thing. You need to train your eyes to recognize good design. You also need to keep up with design trends, which will help you stay relevant to industry changes.

After completing the basics, you can start making some designs on your own. To make it easier, just open Behance, choose a design, and start copying it in Figma. This will help you gain hands-on knowledge and build your Figma skills as well. And that’s it! In your free time, just copy some designs, and after a few days, you will notice the improvements.

How I Improved My Design Sense as a Developer

As a self-taught developer, I didn’t have formal guidance on design. I’ve never been great at it, but I started noticing that many senior developers were saying that having a good design sense increases the chances of getting hired. So, I decided to learn the fundamentals and explore Figma. I copied several websites, and over time, my design skills started improving. I’m not claiming to be great at design yet, but I now know what kind of design suits each section of a website. I can take elements from multiple designs and combine them into a cohesive one. As a result, my clients have come to appreciate my design sense.

For reference, you can visit my Behance profile. I uploaded some of my works at that time. While learning these things, I got this YouTube playlist from Ansh Mehra, which helped me a lot to clear the basics.

Conclusion

If you’ve reached this point in the article, then I must say that you’re interested in learning about design sense. I’ve been working in this industry for the last 2 years, and based on that, I know that having a design sense will help you in a lot of places. It will also help you make a good impression at your company. There’s a line called "Appearance comes before qualities." This may sound harsh, but it’s the reality. So, having a good design sense is a plus point.

Now, if you’re not the type of person who likes design and such, don’t worry at all. Just focus on what you love and be good at that—that’s what matters most. As I said, having a good design sense is just a bonus, nothing else. With that, I’ll wrap up today’s blog. I’ll see you in the next article.

As a developer, for work purposes, we always need to work with multiple github accounts at once. If you have multiple systems then there is no problem with it but If you want to manage multiple github in one system then today's article is for you.

What is the problem?

The first problem comes when you need to access different repositories from different github accounts. Whenever you need to clone a repository or push any changes, you need to authenticate each account on your terminal, again and again.

The second problem is you need to commit codes with different accounts also. So the same thing again, you need to switch between different accounts again & again.

Now as you can see switching stuff again & again is a hassle.

What is the solution?

To solve the first problem we need to use SSH key-based authentication other than the regular traditional Personal access tokens way. While cloning a private repository we need to use the SSH method instead of the HTTPS URL method.

To solve the second problem we need to use folder-based git config. Where a git config will apply to a specific folder only.

Multiple Github account using SSH

Before getting started with some commands you need to make sure ssh-keygen is installed in your system. In most of the Linux operating systems, it’s already installed by default, and for Windows, you need to enable Open SSH Client from optional features.

If everything is set correctly then let’s get started

For example, I’ve two emails user1@email.com and user2@email.com. Both accounts have separate github accounts also. Now I would like to authenticate both accounts on my machine.

Step 1: Generate SSH Key

Execute this command in your terminal to generate an SSH key for user1@email.com but make sure you have a .ssh folder in your home directory. If not then create one.

ssh-keygen -t rsa -C "user1@email.com" -f ~/.ssh/user1

Explanation

• ssh-keygen is The command to generate an SSH key.

• t rsa Specifies the key type as RSA (Rivest-Shamir-Adleman), a widely used public-key cryptosystem.

• C "user1@email.com" Adds a comment (usually an email) to help identify the key.

• f ~/.ssh/user1 Specifies the file name and location for storing the key:

  • ~/.ssh/ is the default SSH directory inside the user's home folder.

  • user1 is the custom filename for the private key (instead of the default id_rsa).

What happens after running this command?

1. You might be prompted to set a passphrase and to confirm the passphrase for added security. You can just press enter and skip them.

2. If everything goes correctly then it will generate two files:

   • ~/.ssh/user1 → The private key (keep this secret).

   • ~/.ssh/user1.pub → The public key (sharable with github).

Step 2: Registering SSH Key

In this step, we will register our generated SSH public key to github. To do that first we need to get the public key.

cat ~/.ssh/user1.pub

Explanation:

• cat Reads and displays the contents of a file.

• ~/.ssh/user1.pub This is the public key file generated earlier with ssh-keygen.

What happens after running this command?

After executing this command you will get something like this in the terminal.

ssh-rsa AAAAB3NzaC1yc2EDDDDDAQABAAABgQDRaOTJKD8oa7ZKdCYoiE9fXjR9XFWL8mejeBLRt7KKLhVBshl5IZPu4cwkzpe+ALbjDP2QLOKeNP13jfTqH+mDqTXQUOswtOOgdyQiTWn6w4dyW4C0W4HN5gwkSsqqWpF9jBp9fkkL15gB9yas8VHFI9uyhAHgSYzi4RwOtSYN/duK5ZtiT4qSSivxLfMbRt8LHBHKs+IdkmT5EdtDDEVsSWR4RutjOvAdQbdakMQT+z/5C/JijS9p8XdqWi2J55owDHP2DLHWpYxL5CqZW/ulf/LFMeQmF35L7HqNBODY/x5zWCiIAtzngltppL5yoecxAWTER8nzU0OnwdNTj+QCLemKcPgpAif/kZd0MO9/1lYdOt6AS/hXb8f7IRRqLzS9js2TFvUXGIYGQtrbYKq0jIWowauQryt6caPkvRLZBUWVIfpgU4Xii1Hmh7crwospOvKUJZjXtXaygHa+U/abV+yUWitBk7+cA6BSHgdkuZCE0YBZ4eYOeYPpdluCKrk= user1@email.com

Copy that key and go to this **SSH & GPG keys** github **page using user1@email.com and click on the **New SSH Key button. Now give this key a title (maybe your device name), the key type will be Authentication Key, and paste the earlier copied public key content into the key field. After that click on Add SHH Key button and save the key.

Step 3: SSH Config

We have successfully authenticated our device with Github. Now, the last thing we need is a config file where we will write all the rules to ensure that the correct SSH key is used for authentication. So create a file called config in the ~/.ssh folder and put these lines in the file.

Host    github.com-user1
    HostName github.com
    User git
    IdentityFile ~/.ssh/user1

Explanation:

• Host github.com-user1 This defines a shortcut (github.com-user1) for connecting to GitHub using user1's SSH key.

• HostName github.com Specifies the actual hostname, which is github.com.

• User git The user for SSH authentication is git. This is required when using SSH for GitHub.

• IdentityFile ~/.ssh/user1 Specifies the SSH key to use (~/.ssh/user1) when connecting with this alias.

What does it do?

So basically when we clone a repository or push some changes to a repository using SSH URL, It looks like this.

git@github.com:user1/latebro.git

Here github.com is the remote host. Now this config file created a shortcut hostname called github.com-user1. Now if we use this then it will still connect to the github.com remote host but for authentication, it will use the user1 public key. So the URL will look like this.

git@github.com-user1:user1/latebro.git

And as I said you can now access any private repository of user1 . You just need to use this format in the SSH URL.

Now you can do the same steps for your all other accounts and you are done with setting up multiple github accounts on one device. In my case, I’ve two accounts so my SSH config file looks like this.

Host    github.com-user1
    HostName github.com
    User git
    IdentityFile ~/.ssh/user1

Host    github.com-user2
    HostName github.com
    User git
    IdentityFile ~/.ssh/user2

I think you already guessed that for user2 repositories I’m going to use an SSH URL like this.

git@github.com-user2:user2/webcamio.git

Folder-Based Git Profile

Now our authentication problem is solved & we can clone, and push changes using a specific formatted URL. But still, we have a problem that we can clone from different accounts but our commit is going from one profile.

To solve that we will use the Folder-Based Git profile technique. Here we will define a Git profile for a specific folder only. Let’s say I’ve two working folders called user1-projects and user2-projects . Now I want to have the user1 git profile in the user1-projects folder & user2 git profile in the user2-projects folder. So whenever I work on the user1-projects folder, My commit history will contain the user1 git profile & If I work on the user2-projects folder, then My commit history will contain the user2 git profile.

First of all, we need to create separate gitconfig files for each profile. In my case user1 & user2. To organize stuff better I’m creating them inside a folder called gitconfigs in the home directory.

# user1
[user]
    name = User One
    email = user1@example.com

# user2
[user]
    name = User Two
    email = user2@example.com

Now to set up everything & define the rules to use which config file when? We need to create an index config file in our home folder called .gitconfig. If you already worked with git then you most probably already have it. So just put these lines in your git config file.

[includeIf "gitdir:~/user1-projects/"]
    path = ~/gitconfigs/user1

[includeIf "gitdir:~/user2-projects/"]
    path = ~/gitconfigs/user2

What It Does?

This tells Git:

• If I’m working on ~/user1-projects directory then use git config from ~/gitconfigs/user1

• If I’m working on ~/user2-projects directory then use git config from ~/gitconfigs/user2

That’s it we are done with setting up the Folder-Based Git Profile. Now all you need to do is modify stuff as per your need and you're good to go for building projects.

Conclusion

Dealing with multiple GitHub accounts on one machine can be tiring, but with SSH-based authentication and folder-specific Git profiles, you can simplify the process significantly. The need for repetitive authentications when switching accounts is mitigated by configuring the custom SSH micro for each account. Moreover, it's possible to set up folder-based Git profiles so that commits are made to the appropriate GitHub accounts.

With this enabled, you are free to work on as many repositories as you desire without needing to authenticate, masticate, or switch between accounts to cloud this environment to blend or make the invites. This tactic helps keep the development environment untangled while optimizing time for other matters. Happy coding! 🚀

Problem 1: Video Being Slow to Load

When you attempt to play a video file in an HTML video player, your browser buffers the whole video file before beginning playback. Whatever the size file and whatever your network condition were, you'd wait for a good while. The bigger the file size, the longer you'd be waiting for—definitely a user experience killer.

Problem 2: Quality Switching Is Inefficient

For this purpose, possible solutions to the above problems seem to involve the conversion of video files into various quality formats, where users can finally select the best based on their network speed or preference. It sure is a good idea but fails miserably in execution. Why?

Here's a user waiting for the video to be loaded in full. After watching half the video, if they change their mind and switch quality, then from the beginning of the video, the player reloads and starts playing, thus stalling itself for a bit longer. Frustration, inefficiency. Very much so.

Now, let us delve further into how Adaptive Bitrate Streaming successfully addresses these issues by allowing for streamlined viewing.

Solution: Adaptive Bitrate Streaming

This is a method where video streaming dynamically switches qualities depending on client network speed and instead of loading the whole video file at once, it loads a small portion of the video chunk by chunk. After all of this users can experience smooth video streaming. let’s deep dive into this.

Segmented Video Streaming

The whole video is divided into smaller segments (2-10 seconds each). and to track all the segments there is one playlist file that takes care of the serialization of the segments. So at the end, we pass this playlist file to the user and the user loads the video segment by segment. There is no need to wait for the whole file to fetch

Multiple Quality

The video file is stored in multiple-quality with smaller segments. To track all the qualities there will be a master playlist file that lists all the quality options to the user and the user can select from the options. All the quality video is stored in smaller segments so the user can switch quality whenever he wants. only the current chunk will be loaded again.

Realtime Quality Adjustments

on the master playlist file, there is a property called BANDWIDTH. Using that system will automatically switch video quality based on user network speed.

How to implement ABR?

There are primarily two ways to implement adaptive streaming

HTTP Live Streaming (HLS)

Developed by Apple, HLS uses .m3u8 playlists and is widely supported on iOS/macOS. It originally used MPEG-TS but now supports fMP4 and has a low-latency variant (LL-HLS).

Dynamic Adaptive Streaming Over HTTP (DASH)

An open-standard streaming protocol that uses .mpd files and supports fMP4. It offers broader codec support (H.265, VP9, AV1) and is widely used on Android, Windows, and web platforms.

For today's article, I’ll continue with the HLS method. So enough talking dive into some examples.

Implementing HLS AVR

Tools

Before diving into examples let me just quickly introduce our main tool.

FFmpeg: As we are talking about encoding & decoding stuff. We will need ffmpeg for this media file encoding. so make sure you’ve installed it on your device. for reference, you can follow this documentation.

Now we are ready to dive into examples.

Step 1: Convert Media Files Into HLS Format

In this step, we will convert media files to small segments in HLS format. To achieve this we need to run this command.

ffmpeg -i input.mp4 -codec: copy -start_number 0 -hls_time 5 -hls_list_size 0 -f hls output.m3u8

Explanations:

• -i input.mp4 specifies our input file for this command

• -codec: copy this specifies to copy the input file codec instead of re-encoding for the output file

• -start_number 0 specifies the starting number for the segments

• -hls_time 5 specifies each segment duration in seconds. in our case, it’s 5 seconds.

• -hls_list_size 0 This specifies how many segments should be stored in the output playlist file. to store all the segments we need to use 0 value.

• -f hls output.m3 This specifies output format as hls format and file name as output.m3u8

After executing this command you will see multiple .ts file was generated based on your input file size and one output.m3u8 file is generated. This file is our playlist file that tracks all the segments & this file is served to the client.

Step 2: Playing HLS Format File

In general, we just pass the file URL to the HTML video element & that’s it, we can play the video file. However, we don’t have any native support for the HLS format file. we need to use a third-party package called hls.js. Here is a simple example of that

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HLS Video Preview</title>
    <script src="<https://cdn.jsdelivr.net/npm/hls.js@1.4.12/dist/hls.min.js>"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
    </style>
</head>
<body>

    <h2>HLS Video Preview</h2>

    <video id="hls-video" controls width="640" height="360"></video>

    <script>
        const video = document.getElementById('hls-video');
        const hlsUrl = "./output.m3u8"; // Replace with your HLS URL

        if (Hls.isSupported()) {
            const hls = new Hls();
            hls.loadSource(hlsUrl);
            hls.attachMedia(video);
        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
            // Fallback for Safari (which supports native HLS)
            video.src = hlsUrl;
        } else {
            alert("Your browser does not support HLS playback.");
        }
    </script>

</body>
</html>

If we try to preview (use vs code live server extension) this file on the browser we will see the video is playing as it is. If your video size is large, you will notice the difference between normal video file streaming & hls encoded video file streaming. If you want to explore more you can open the Network Tab from browser developer tools. We will see that the video segments are loaded one by one.

Step 3: Converting Into Multiple Qualities

Currently, we’re providing video chunk by chunk which is already lot optimized but we need to give a quality switching feature to users also. to achieve that we need to customize our command a little bit.

ffmpeg -y -i "input.mp4" \\
  -vf scale=w=-2:h=720:force_original_aspect_ratio=decrease:force_divisible_by=2 -c:a aac -ar 48000 -c:v h264 -profile:v main -crf 26 -sc_threshold 0 -g 48 -keyint_min 48 -hls_time 4 -hls_playlist_type vod -b:v 3000k -maxrate 3600k -bufsize 6000k -b:a 128k -hls_segment_filename "720p_%03d.ts" -f hls "720p.m3u8" \\
  -vf scale=w=-2:h=480:force_original_aspect_ratio=decrease:force_divisible_by=2 -c:a aac -ar 48000 -c:v h264 -profile:v main -crf 28 -sc_threshold 0 -g 48 -keyint_min 48 -hls_time 4 -hls_playlist_type vod -b:v 1500k -maxrate 1800k -bufsize 3000k -b:a 128k -hls_segment_filename "480p_%03d.ts" -f hls "480p.m3u8" \\
  -vf scale=w=-2:h=360:force_original_aspect_ratio=decrease:force_divisible_by=2 -c:a aac -ar 48000 -c:v h264 -profile:v main -crf 30 -sc_threshold 0 -g 48 -keyint_min 48 -hls_time 4 -hls_playlist_type vod -b:v 800k -maxrate 960k -bufsize 1600k -b:a 96k -hls_segment_filename "360p_%03d.ts" -f hls "360p.m3u8" \\
  -vf scale=w=-2:h=240:force_original_aspect_ratio=decrease:force_divisible_by=2 -c:a aac -ar 48000 -c:v h264 -profile:v main -crf 32 -sc_threshold 0 -g 48 -keyint_min 48 -hls_time 4 -hls_playlist_type vod -b:v 400k -maxrate 480k -bufsize 800k -b:a 64k -hls_segment_filename "240p_%03d.ts" -f hls "240p.m3u8"

Explanations:

• -y This is to allow automatically all operations. in some cases, ffmpeg might ask you for your confirmation (like overwriting a file)

• -i "input.mp4" This specifies the input file

• -vf scale=w=-2:h=720 This resize video into 720p while maintaining the aspect ratio (using w=-2 it automatically calculates the width)

• force_original_aspect_ratio=decrease This prevents the video from stretching while resizing

• force_divisible_by=2 Ensures video dimension is always even number, to prevent runtime encoding error.

• -c:a aac -ar 48000 Encode audio format in ACC format with 48 kHz sampling rate.

• -c:v h264 -profile:v main Encoding video in H.264 format main profile

• -crf 26 Constant Rate Factor (CRF) controls video quality

  • Higher Value = low quality, small file size

  • Lower Value = better quality, large file size

• -sc_threshold 0 Ensures uniform keyframe spacing

• -g 48 Sets Group of Pictures to 48

• -keyint_min 48 Ensure minimum keyframe interval 48

• -hls_time 4 Each segment duration is set to 4 seconds

• -hls_playlist_type vod Generates a fixed playlist with all segments

• -b:v 3000k Sets video bitrate to 3Mbps

• -maxrate 3600k -bufsize 6000k Controls bitrate fluctuations for better stability

• -b:a 128k Sets auto bitrate to 128kbps

• -hls_segment_filename "720p_%03d.ts" Defines segment file name. We will generate segments for different qualities so to differentiate them we need to use a specific file name format.

• -f hls "720p.m3u8" Specifying playlist output file path

The same command options are applied for other qualities also with different values for sure. Now we need to create a master playlist file to track different quality playlists. here is an example of the master playlist.

#EXTM3U
#EXT-X-VERSION:3

# 720p Stream
#EXT-X-STREAM-INF:BANDWIDTH=3600000,RESOLUTION=1280x720
720p.m3u8

# 480p Stream
#EXT-X-STREAM-INF:BANDWIDTH=1800000,RESOLUTION=854x480
480p.m3u8

# 360p Stream
#EXT-X-STREAM-INF:BANDWIDTH=960000,RESOLUTION=640x360
360p.m3u8

# 240p Streamjust 
#EXT-X-STREAM-INF:BANDWIDTH=480000,RESOLUTION=426x240
240p.m3u8

Explanations:

• #EXTM3U Marks this as an HLS playlist.

• #EXT-X-VERSION:3 HLS version 3, widely supported.

• ****#EXT-X-STREAM-INF ****Each section defines a video quality option:

  • BANDWIDTH=3600000 Maximum bitrate for this stream (in bits per second). this helps with auto video quality switching based on the user network connection speed

  • RESOLUTION=1280x720 Video resolution.

  • 720p.m3u8 Points to the playlist file for that resolution.

Now to preview this video provide this master.m3u8 file path in the preview example and open in a browser. Now to test whether the auto quality switching is working or not you can use the Network Throttle option from the Browser Network Tab. If you choose Slow 4G from there then you will notice the video player automatically reduces the video quality. if you disable the throttle option then video quality will be switched back to high quality automatically.

Step 4: Manual Quality Switching

Now if you want to give a feature to your users to switch video quality manually then you can just update our preview example with the following code.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HLS Video Preview with Quality Selector</title>
    <script src="<https://cdn.jsdelivr.net/npm/hls.js@1.4.12/dist/hls.min.js>"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }

        #quality-selector {
            margin-top: 10px;
            padding: 5px;
        }
    </style>
</head>

<body>

    <h2>HLS Video Preview</h2>

    <video id="hls-video" controls width="640" height="360"></video>
    <br>
    <label for="quality-selector">Select Quality:</label>
    <select id="quality-selector" disabled>
        <option>Auto</option>
    </select>

    <script>
        const video = document.getElementById('hls-video');
        const qualitySelector = document.getElementById('quality-selector');
        const hlsUrl = "./master.m3u8"; // Replace with your .m3u8 URL

        if (Hls.isSupported()) {
            const hls = new Hls();
            hls.loadSource(hlsUrl);
            hls.attachMedia(video);

            hls.on(Hls.Events.MANIFEST_PARSED, () => {
                const levels = hls.levels.map((level, index) => ({
                    index,
                    label: level.height ? `${level.height}p` : `${level.bitrate / 1000} kbps`
                }));

                qualitySelector.innerHTML = `<option value="-1">Auto</option>`;
                levels.forEach(level => {
                    qualitySelector.innerHTML += `<option value="${level.index}">${level.label}</option>`;
                });

                qualitySelector.disabled = false;
            });

            qualitySelector.addEventListener('change', (event) => {
                const selectedLevel = parseInt(event.target.value);
                hls.currentLevel = selectedLevel;
            });
        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
            // Fallback for Safari (which supports native HLS)
            video.src = hlsUrl;
        } else {
            alert("Your browser does not support HLS playback.");
        }
    </script>

</body>

    </html>

Here first we list all the available quality options and then let the user select his desired video quality and enjoy.

Explanation

After loading the master playlist file it provides available quality options in hls.levels and for changing quality we can set the level index in hls.currentLevel. By default, it’s -1 means automatic switching based on network bandwidth

Real-world Implementation

This article covers only required commands but in Real-world applications, you might need to implement various technologies. to demonstrate that I made a project using Nest JS & React JS. You will find the source code here. again it’s not production-grade code or something, it’s just an example of using the commands in your project.

Conclusion

If you've followed this guide, congratulations! 🎉 You now understand Adaptive Bitrate Streaming (ABR) and how to implement HLS with FFmpeg. While this article covers the basics, real-world applications require additional considerations like backend integration and optimization strategies. Once you're comfortable with these fundamentals, you can explore low-latency HLS (LL-HLS) for even better performance.

Stay tuned for more advanced topics!

It’s another day, and we are still here. As software developers, we always find ourselves being asked to learn, be it a new tool, framework, or programming language. But today, let's step away from that for a moment. I want to talk about something different: things we learn to stay abreast of the industry trends or enhance our careers even though we might not have a legitimized need for these right now.

You may be just starting out, laying down a foundation for some good job opportunities. Or you may be in the game for quite a while, but still seeking for the next skill to stay fresh. But I would pose a more critical question to you: Are we, in fact, learning effectively? Is all this knowledge of real value; or are we just filling our heads with information that serves no purpose? Let us go check that.

My Experience

Speaking from personal experience, I'm a self-taught developer who has primarily worked with JavaScript. Lots of time, I learned other languages like Python and Rust. But that did not really help me.

Why? That is because I had no real purpose for learning them.

It's just that I got caught up in the hype of learning them and after a week I lost the fervor to continue.

The same goes for other technologies. While I was learning React.js, someone suggested I use React-Query since it was something that would impress a recruiter in an interview. I tried it and I learned pretty much all the basics, but if you asked me to write some code with it right now I would not be able to do it.

Why? Because there was never a real case to use it. I learned it, but not using it in practice allowed that information to slip away. That's the whole wasted learning.

Learning Hell

Many developers find it hard to get out of Tutorial Hell-a death spiral where videos are found constantly playing on a side of the screen while the student never executes their knowledge on the opposite side. Learning Hell is another variant of this trap.

In this stage, you’re running on a treadmill of perpetual learning. You will never feel ready to apply your thing, so instead, you keep stacking up the knowledge. It feels like progress, but, in truth, you're merely overwhelming your brain with information that you will never use.

If you can't really use what you've learned, what is the point of it all? In real-life problem-solving, you don’t need not know everything. The best way to learn is still through working on a project, and thereby solve whatever problem may arise, rather than benching yourself for life with a hundred tutorial courses on theory alone.

The Consequences

Perhaps you are wondering: "If learning is such a good thing, then why are you discouraging it?" No, I'm not discouraging it. Learning must be done every day. However, I have seen many aspiring developers lose themselves in Learning Hell and, as a result, abandon their development careers. The entire experience leaves them so disillusioned that they can hardly continue.

Despite their good education, many programmers can't hold down a job because they're always questioning themselves. So they just keep learning instead of putting their knowledge to use. A few manage to get jobs but change careers for the mere reason of being utterly frustrated with the perpetual openness of learning.

Solution

So, what should you do instead?

1. Start Building: Instead of learning everything at once, try to apply your knowledge by building real projects. Try to find some problems that you face regularly & solve them using your existing knowledge.

2. Learn as you go: When you’re building stuff, you might realize that your existing knowledge is not enough. You might need additional knowledge to complete a feature in your project. then go and learn it. at first, no need to dig deep. try to solve your problem first.

3. Find Purpose: Focus on the technologies that align with your work or goals. Ignore the unnecessary hype. If you find something that you don’t need today but is useful in the future then you can invest time and try to apply that with your regular life. so your investment won’t go wrong.

Conclusion

Learning is important, but purposeful learning pays off your effort. So don’t just learn—try to apply what you learn and find a purpose for why you're learning. Is it really important to you?

I’m also a victim of this, but I tried to overcome it, and I hope this article will help you overcome the problem as well. If you found this helpful, don’t forget to share it with other developers who might be struggling with the same issue.

As developers, we live in a world of constant evolution. Every day, new tools, frameworks, and technologies emerge, reshaping the way we work. To stay relevant, it's essential to embrace change and adapt to these innovations. In this blog, I want to share my journey of adapting to new technologies and reflect on why mastery goes beyond just using a tool—it’s about integrating it into our daily workflow.

My Journey with JavaScript and React

I still remember when I started learning React JS. At the time, I was deeply attached to raw JavaScript. It was familiar, efficient, and something I had spent years mastering. I could solve almost any problem in minutes because of how comfortable I was with it. React, on the other hand, felt new and challenging. Every time I built something with it, I encountered countless errors and roadblocks.

Despite the initial struggle, I stuck with React. Over time, as I worked on more projects, the challenges turned into opportunities to learn. Eventually, React became my go-to framework, and now, whether it’s a simple app or a complex system, I’m confident in building it with React.

This journey taught me an important lesson: mastery comes from consistent practice. Until you integrate a technology into your regular workflow, it remains unfamiliar and intimidating. Adapting to new tools is never easy, but it’s the only way to truly grow as a developer.

The Role of AI in Development

In today’s AI-driven world, tools like ChatGPT have revolutionized development. They allow us to write code, debug issues, and research solutions faster than ever before. But there’s an important distinction between using AI and mastering a technology.

AI can help you build prototypes, automate repetitive tasks, and provide quick answers. However, creating production-level applications requires more than just writing code. Real-world scenarios are filled with unique challenges, and solving them demands experience, creativity, and problem-solving skills.

For example, you may have seen YouTube videos claiming, “I built a million-dollar app using AI.” While impressive, these developers often have years of experience and use AI as a tool to accelerate their workflow—not as a crutch. Mastery comes from understanding the nuances of your tools, and that level of understanding only comes with practice and adaptation.

Why Adapting Matters

Adapting to new technologies isn’t just about learning the basics; it’s about incorporating them into your workflow. For instance, when I first started with React, I struggled to let go of my JavaScript habits. But over time, I realized that by adapting React into my daily projects, I could unlock its true potential.

The same applies to AI tools. While they’re excellent for speeding up tasks, they can’t replace the depth of knowledge you gain through hands-on experience. Building expertise requires consistent effort—reading documentation, solving problems, and experimenting with real-world projects. You don’t need to master every tool, but for the ones you want to excel at, make them part of your routine.

Conclusion

AI is a powerful ally for developers, but it’s not a replacement for expertise. To truly master a technology, you need to adapt it into your daily life and face the challenges it brings. Mastery is not just about knowing how to use a tool—it’s about understanding its intricacies, solving unique problems, and growing with it. The art of adaptation is what keeps us evolving in this ever-changing field of development.