Forem: Sameer Katija

How we can learn a technical skill efficiently and quickly?

Sameer Katija — Thu, 22 Jul 2021 11:45:49 +0000

Imagine you want to develop a program, which is smart enough to predict bitcoin prices and can invest on your behalf and let you keep the profit. Wouldn't it be great? To develop these kind of programs, one must have technical skills to continue. I too want to develop a program for my self. Similarly you too may have plan, may be you want a job in next four months or you just want to spend your time on something productive. To execute our plans, we both need to learn some technical skills.

So, How we can learn a technical skill efficiently and quickly? You might have asked this question to yourself, at least I have asked my self. Learning is easy and fun when it is done properly. Now a days world is getting advance at a high pace then it used to be in past. Humans are trying to build a colony on mars. Someone is trying to make machines learn as efficiently as humans, and to match ourselves we have to keep our learning pace synchronized with world’s changing pace. You might be thinking, this is bullsh*t. Believe me, this article will be worth reading, if your are struggling with learning.

Problems I faced, when i was learning.

When I was learning, I faced too many problems, Let me mention some of them below.

University is teaching outdated content.
It’s hard to find good resources and courses.
On an average human’s attention span is 8 sec which is less then a goldfish (9 seconds).
You get overloaded by too much information.
You lose motivation.
You need someone to push you.
You get confused by too many choices out there.
The industry is changing too fast.
You don’t have enough time.
I just finished a course, now what’s next.

These were some problems which i was able to jot here. There might be 100 others which I am unaware of. So what is the best way to tackle these problems and make our learning effective. As saying goes, experience is the best teacher. so i learned how to tackle these problems and learn faster.

Solution, which i learned from my experience

I have taken more then 100 courses both offline and online. When we take a online course usually our main focus becomes finishing the course. You just learn from lectures and skip those lectures which you can’t understand, and you loose motivation. It has happened to me. When you are part of a boot-camp or any other institution,taking the time out to go there can be hard and challenging and more often will power consuming. So, let’s discuss one by one to grasp the concepts thoroughly.

Selecting Course or Resource

In past, I just used to enroll in courses, what ever they are I used to find free coupons and some pirated courses to learn. This is one thing, which I often regret. Never ever go for free course (unless you are confident that it will not waste your time) or pirated course (you are violating basic principle of ethics). and you actually never learn by doing this.

One more problem is that people don’t know what to buy they get persuaded by some of their friends (Hy, Take this course, this is the best course) or by the hype created by course instructors (Which is normally too short).

Instead when ever I learn something, first thing is I go to YouTube and search for best courses online. After finding the courses, I search road maps. Let’s take a example of data science. I will search for best data science course online and the i will try to find the road map. After that i sync the road map with the course content and then i decide. should i go for this or not.

Focusing on single resource

Sometime we just enroll for single course and try to gulp it’s content over night and call our self as Data Scientist. Don’t do this instead always opt for one more resource of different author. Doing this offers a diverse thought which can help you build your mindset and learn faster.

Learning too much

As i alluded, when we take course our main motive becomes completing course instead of learning through it. Never plan to complete the course in one week or two. Instead think of it as long-term, learn just enough. Don’t overload your self with too much information. Which you can’t implement or don’t have time to implement. Instead learn enough and then practice.

Building Real-World Project.

When I started learning JavaScript, I thought I will only be able to make a real-world project, once I fully grasped the language. I was wrong, because I am still learning JavaScript, but I also have built some project. So, Implement what you know, this is the real thing. The knowledge in your head is not useful, the knowledge which you can implement is useful.

Practice, Practice and Practice actively

Repetition is the mother of all skills. You might have heard to be best at something, you have to do it for 10,000 hours. I guess that’s completely absurd, there are a lots of people doing one thing from years but still are not perfect at that thing. Just because they are repeating it passively. Instead repeat it actively, be aware of what you are doing and where you need improvement, Questioning the way you are doing is the real key to success.

Don’t take repetition here as trying to implement for loop 10000 times and saying, i have just master it. No, A big No! instead repeat the concepts by building totally different projects.

Finding a buddy

Well, let me name a online course community which personally has helped me a lot; Zero to mystery academy. They have such an amazing community, when ever you take their course they encourage you to find a accountability buddy. Basically, the whole concept is that you are accountable for his/her progress and same he/she is yours. This is such an amazing concept. Instead find a person, he can be anyone and set some rules and you both have to encourage yourselves to learn and push more.

Challenging your mindset.

I always wanted to do #100daysofcode but i always thought, no it’s impossible for me to take sometime out to do it daily. Believe me I was wrong. You should try these challenges, doing so will make you push yourself and you will also find some amazing people out there who are willing to help you and contribute in your life. With that to break the status quo, I am here announcing to complete #66daysofData challenge. I have committed in front of you guys this will build some momentum and now I have no option left except to compete. Like me you can do it, just challenge yourself and start what
you think is necessary.

Questioning

Just look at newton, one question made him famous all over the world for a millennium. May be your question can do the same for you. Make use of online communities, like stack overflow and there is an entire list of communities from which you can join yours and ask your questions. Believe me no body is going to judge you.

Conclusion

So, to conclude learning is fun when it is done properly, try to figure out what works best for you, don’t just follow the fame. Instead do some research. All these points were based on my experience so there might be anything which you guys can add and you guys can correct me, if you think I have mention something which shouldn’t be here. Thanks for reading, I wish you Happy Learning and Good luck.

What is Node Why you should use it.

Sameer Katija — Thu, 22 Apr 2021 15:37:04 +0000

Node Js is an Open-Source, cross Platform and JavaScript runtime environment which is built on Chrome’s V8 engine for executing JavaScript code outside of a browser. Mostly we use Node Js for building backend services and Application Programming Interfaces (APIs). Node js is used to create Highly Scalable, Data-Intensive, and real-time applications.

There are quite other frameworks for building back-end Services, like Asp.Net, Django, Flask, Rails, PHP, and so on. So why Node? Well, Node is easy to get started and is used for prototyping and agile development. It is also used to create super fast and highly scalable Applications. Many large companies like use Node Js in their productions.

The fact that Node is Open Source is what makes it great and most of the programmers or companies can modify and adjust it according to their liking and usage. Second, it’s cross-platform which means it is available to almost every programmer no matter what their operating system is.

Advantages of Node JS

Node JS is very famous among developers and is acquainted with many great companies. So what makes Node Js so special? There are some benefits that come along with Node Js. So let’s discuss them.

Node Js is Fast

Node js is a lightweight framework and the main reason that NodeJS is fast is because of its non-blocking I/O model. It utilizes a single asynchronous thread to handle all requests. Which as a result makes Node Js fast and responsive.

Node Js is Scalable

Node Js is scalable because it can handle several concurrent connections and another feature of it is load balancing. Node JS can handle multiple jobs which out any burden and this makes it scalable.

JavaScript EveryWhere

Node js behind the scene uses JavaScript which makes it great for the developers out there. Nobody prefers to learn two different languages for backend and frontend. We can use javascript for frontend as well as backend development. This makes it easy to learn and use.

Community Support

One of the main reasons behind every language, framework, or library’s popularity is Community. Node Js has great community support and almost we can find any help and support we want in Node Js. There is code available for almost most of the cases, which makes Node JS preferable to use. With less amount of code, we can create highly scalable and efficient applications.

Which Companies use Node Js

As I alluded Node Js is a preferable choice in the industry. That’s why almost most of the programmers use Node Js in their production Apps. Some of the companies that use Node Js are Uber, Netflix, Udemy, Trello, and a lot of other companies that use node Js. By the way, you can check Stack Share’s List to see which other companies use Node JS in their Stack.

Conclusion

There are quite other frameworks available and they may be best, but I prefer Node Js and if you have any framework of your preferred choice, you should go with that. But, If you have started learning to code and looking for a framework then Node may be a great choice for you. As most of the companies have made a shift to Node Js.

Once again I am not against any other framework. Everyone has their own preferred choice and I respect that. With all that Thanks for reading and I wish you good luck with your programming career. Cheers!

How to run Linux bash in Windows OS

Sameer Katija — Fri, 09 Apr 2021 17:22:48 +0000

I use windows for most of my daily tasks, and almost all the software I prefer for my daily tasks, are windows based. Almost 90% of my time is spent on Windows, but still, the gap is there which can only be filled by Linux. Being a developer, I needed Linux for most of my tasks, one of them is deployment. Unlike Windows, Linux is free and most of the Linux versions are open-source.

As the need for Linux came, I completely made a shift to ubuntu. After shifting, I realize that there are plenty of reasons I should shift back to windows. Well, my favorite software which I used in my free time was missing there especially Adobe illustrator(I seriously love this software and this lets you explore your creativity). I came back to windows and opted for the virtual machine.

Think of a Virtual machine as a machine inside your real machine. It’s basically a concept, where most of the resources are split and are made available as a new virtual machine, though this new machine is totally virtual and acts as a real machine. This new virtual machine can be used to install another OS inside your main machine. I hope that now you have a concept of the virtual machine but as a reference, you can also read this definition by Wikipedia.

In computing, a virtual machine is the virtualization/emulation of a computer system. Virtual machines are based on computer architectures and provide functionality of a physical computer. Their implementations may involve specialized hardware, software, or a combination.

Virtual Machine is better when it comes to dual boot. As every tool has some flaws too. Virtual machine too has some cons. As I alluded, a virtual machine runs on your real machine. So each and every hardware resource which our virtual machine will need have to request from the main machine. It means that our main machine will access hardware indirectly, thus its performance will be impacted. So, what is the alternative which can be the best fit for our needs? It’s Windows Subsystem for Linux (WSL).

What is Windows Subsystem for Linux(WSL)

The WSL is a type of resource within windows OS that allows users to run a Linux command-line interface(CLI) in windows. In WSL, you can do almost all the tasks which you can perform on Linux Terminal.

WSL is based on a Virtual machine. When we download a preferred Linux distro, we are not creating a VM instance. Instead, WSL provides a layer for translating Linux system calls to Windows system calls. Thus Linux binaries are able to run in windows unmodified. We can also have the Linux process communicate with Windows Process. WSL also maps Windows services, like the filesystem and networking, as devices that Linux can access.

Why WSL is better than Virtual Machine

Instead of using a VM instance, WSL virtualizes a Linux kernel interface on top of the Windows kernel. it means that running WSL only requires a small amount of memory. And when it’s not in use, the WSL driver isn’t loaded into memory, making it much more efficient than a solution based on a VM.

How to setup and install WSL

In order to use WSL in windows, you have to set up and install it first to do that we need some configuration and some Linux kernel installed in our machine, Don’t worry this isn’t as tedious as it sounds.

Step 1 — Enable the WSL

WSL is a Windows feature and it is by default off and to enable it you need to open powershell as administrator and run the following command

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

Step 2 — Enable Virtual machine features

After enabling the WSL feature then we need to enable virtualization functionality to run WSL on windows. In order to enable VM features on your machine, you need to run the command given below in Powershell.

dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

Step 3 — Download Linux Kernal Package

Now, you need to download the Linux kernel package. you can download this package by clicking here. or you can also download this package from Microsoft's WSL documentation.

Step 4 — Setting WSL2 as your current version

Open Powershell and run the command given below, you can skip this command. If you don’t want to work with WSL2, you can also work with WSL1. In my case, I would prefer to go for WSL2.

wsl --set-default-version 2

Step 6 — Install your preferred Linux Distro

Open the Microsoft store and search for your preferred Linux distro. I would suggest going for ubuntu because you will find a lot of community support in case you needed any help.

After installing, you need to open ubuntu and for the first time, you have to give a username and a password which will only be for ubuntu and will be used afterward to login and do other sudo stuff in ubuntu. With all that congrats on installing and setting up WSL on your machine.

Conclusion

I am not against the dual boot, virtual machine instances, or anything else like that. I still use Virtual Machine for some of the Linux applications. The point I am trying to make in this article is that, if you need Linux to just fulfill your developer needs then WSL is the best choice to go for. If you still prefer some other tool and technology that’s totally fine. Choices are our own. With that thanks for reading this article and don’t forget to support me by clicking clap and sharing this with other developers. Cheers!

How can you become a good programmer?

Sameer Katija — Sun, 04 Apr 2021 18:49:21 +0000

The era I am living in is the era of technology. Everything we use nowadays is almost connected to somewhere with technology. The Bank we use, the ticket we book, the shows we watch, and even the food we order. Almost in every field, we have computers with us to make our tasks easier. Almost all of us use these products which are directly or indirectly attached to technology and still few of us know, how to code. Among those few, there are many peoples which aren’t as competent as they should be. I am one of them.

So, the question is how we should upgrade ourselves and make ourselves competent to make this world better than ever. What is that which we will need throughout our journey to become more competent and productive? In this article, we will breakdown some of the things and will try to understand what we should do and why we should do it. I will be sharing these things from my own experience and these might not work for everyone but this has worked for me.

Learn by Doing

Almost always, whenever we learn something we feel a sense of accomplishment and achievement. When we actually get to code something, we feel we are incompetent. This is known as “Tutorial Hell” and I have already covered this point in “How to Escape Tutorial Hell”.

You don’t learn to code by binge-watching. You have to get your hands dirty in order to learn something valuable to add value to the world.

I hear and I forget. I see and I remember. I do and I understand.
Confucius

Go Step-by-Step

One of the biggest issues with developers is that they think creating NetFlix, Amazon, Uber, and any other App like these require some extra skill which is only found in few peoples. One thing they forget is that they are humans like us and if they can create such things, so we can too.

What we do is we look at the bigger picture, while the developers who made these Apps possible are experienced in watching smaller pictures instead. Let me explain it more. It’s impossible to reach the top of the stairs before passing the preceding steps. Instead of focusing on reaching the top, focus on completing the next step first. As warren buffet stated that,

Focus on Making $1 First. Then Focus on $10 then $100, $1000, $10,000 and So On.
Don’t get Caught up in the Long Term when the Short Term needs Focus First.

Learn techniques, not tools.

Don’t focus on learning the tool, because programming languages, frameworks, and libraries come and go. Let me know, how many of you still use JQuery now? So, it always better to understand the basics. Everything may change but some basic things will be constant and focus on constant not on temporary.

Therefore, if you are learning how to code in JavaScript doesn’t mean that you should limit yourself to just JavaScript. Discover other tools and techniques and learn their core fundamentals, because there are multiple ways to do a single thing.

Collaborate With other developers.

There is a famous saying that is

If you want to go fast, go alone. If you want to go far, go together.
African Proverb

If you are willing to learn more then you should be willing to collaborate because It will help you to enhance your level of understanding, make you flexible, and open to teamwork.

I usually preferred solo tasks instead of teamwork until I discovered the benefits of working in a team with my fellow on a project. It helped me learn more and understand what I lack and what I should improve.

Don’t Just copy the code.

What I used to do was just copy the code. If it works, good to go otherwise find another solution. Lots of people do the same and there isn’t anything wrong with copying the code because the individuals who made their code public want you to copy their code and it’s like an achievement when you know someone is using your code and it just works fine.

What I am trying to say is if you copy a code and it works fine then this is not the “good to go” moment. It is the moment, where you should scrutinize the most. you should look for the reason, how this worked and why it worked. If you started looking for why then one thing is obvious, you are going to learn the most out of it. So, next time whenever you copy the code, learn it first and understand why it worked, before going ahead.

You can be wrong too.

One thing is obvious and that is “too err is human”. It doesn’t matter x number of years of experience you have. What matters is how you approach your code. If you think that your code is the best code and no one can write it better then it’s time for a reality check. Instead of trying to prove that you have written an outstanding code, try to write a test to prove there are flaws available in this code.

Sooner or later, the users will find a bug and they can misuse it. Before this happens you should consider your approach of seeing your code the best. Always look for vulnerabilities, because this will make you stand out.

Experimentation

one of the finest ways to understand things deeply is through experimentation. Experimentations help you learn about the strategies that work better than the others. Try different approaches to perform a single task. Who knows that you might discover something during experimentation.

When I started learning to code, I usually preferred a single style to achieve the results but afterward when I discovered concepts like Big-O. I regretted my decision, I discovered that the other approaches I escaped were actually better than my current approach then I had to learn other approaches to solve the same problem and it was hard to challenge our own dogmas. Therefore it took a lot of time to unlearn and learn again.

Conclusion

There is always something new to learn. I guess life is another name of learning. These were some of my things, which I wish I had someone to told me. I think these were valuable for me and I guess so you will be benefitted from these rules.

It’s always better to experiment to find out what works best for you: What works best for me doesn’t mean, it will also be the best fit for you. Everything you find here is all based on my own opinions and your opinions can be different. I value everyone’s opinion, therefore it would be great if you mention your opinions below in the comment section. So, I can find someone who has similar thoughts as I have. With all that, I wish you to be a good programmer to contribute to this dearest World.

How to customize Windows Terminal

Sameer Katija — Tue, 30 Mar 2021 17:58:02 +0000

Terminals are always been there for greater deeds. Almost every Developer or programmer uses it daily to perform some tasks. There have been many options for developers like GNOME, Hyper, etc, and Windows Terminal is one of them.

The new Windows Terminal is a modern, powerful, fast, and efficient terminal for users of command-based tools and shells like WSL, Cmd, and PowerShell. Windows terminal has some extended features which make it stand-out Like it has multiple tabs, UTF-8 character support, GPU accelerated text rendering engine, customization, and configurations. Besides these, it is open-source, which makes it really intriguing.

Every Developer at one stage has to modify the tools to get the most out of them. There come customization and configurations. Today we will learn to customize our terminal to make it look better and work efficiently by adding some shortcut keys.

Installation of Windows Terminal

If you have windows Terminal installed then you might skip this part, otherwise go to windows store and search for “Windows terminal” and install it.

How to do it?

You will see a button with the text “Get” on it in the right-top corner. Press it and you will then see the next button on the same place with the text “Download” on it. Press that button and after 1–5 mins, the Windows terminal will be downloaded onto your machine.

Change Default Profile in Windows Terminal

By default, when you will open your Windows terminal you will see PowerShell as the default Profile. So, I am going to change it to cmd. Let’s see how we can change it.

How to do it?

Open the windows terminal and go to settings by pressing ‘ctrl+,” and there in JSON file "defaultProfile": "{Some hex code}" change the hex code of this to the hex code of cmd guid which you will find inside list section.

Add custom color schemes in Windows Terminal

I am the kind of person who always gets excited by the theme. Why? Because it makes me feel better. When I see the screen which looks better to me, I preferably work longer on that screen without getting bored. This is why I always prefer an exciting theme.

There are many themes available for the windows terminal and one of them I love is “SeaShells”.


 "schemes": [
    {
      "name": "SeaShells",
      "black": "#17384c",
      "red": "#d15123",
      "green": "#027c9b",
      "yellow": "#fca02f",
      "blue": "#1e4950",
      "purple": "#68d4f1",
      "cyan": "#50a3b5",
      "white": "#deb88d",
      "brightBlack": "#434b53",
      "brightRed": "#d48678",
      "brightGreen": "#628d98",
      "brightYellow": "#fdd39f",
      "brightBlue": "#1bbcdd",
      "brightPurple": "#bbe3ee",
      "brightCyan": "#87acb4",
      "brightWhite": "#fee4ce",
      "background": "#09141b",
      "foreground": "#deb88d",
      "cursorColor": "#fca02f",
      "selectionBackground": "#1e4962"
    }
  ],

There are many other options also available which you can check here.

How to do it?

After installing the windows terminal, open it and got to settings by pressing “ctrl+,”. you will see a JSON file, there navigate to scheme array and inside the array paste the code of color scheme.

After adding the color scheme now navigate to the list and look for the cmd section. You will see some code like,

{
"guid": "{0caa0dad-35be-5f56-a8ff-afceeeaa6101}",
"name": "Command Prompt",
"commandline": "cmd.exe",
"hidden": false,
},

After finding this code add "colorScheme": "nameOfSceme" . In my case, I will add seaShells like "colorScheme": "seaShells" and here you go, you have changed the theme of the Windows Terminal.
There is the official documentation of Color schemes in Windows Terminal, which you can check out to understand better.

Bonus

If you want to add some transparency to your Windows terminal then you can add these styles below the colorScheme

"useAcrylic": true,
"acrylicOpacity": 0.75

Add some custom keybindings

When working with a Windows terminal, you will need some keybinding to perform your task faster like opening new windows and closing current windows or things like that.

How to do it?

Go to settings and look for actions array inside the JSON file and you may already see some keybindings there. Add your preferred keybindings there according to your choice like

{
"command": "closeTab",
"keys": "ctrl+w"
},
{
"command": "newTab",
"keys": "ctrl+n"
},

There are other keybindings that you can add to your lists like tab shifting and others according to your need. The basic syntax will be the same.

Official Documentation of Windows Terminal

There is always some documentation of tools available. Likewise, Windows Terminal has also the official documentation. If you want to know more about the Windows terminal feel free to read the documentation.

Reading the documentation will help you discover the tool more deeply and learn about the tool which will help you discover which tool will be the best fit for your problem. Understanding the tool can also help you discover some flaws which you can fix by contributing to that project and get counted as a contributor for that tool.

Conclusion

These were some of the changes, I made and shared with you guys. There are a lot of other changes and configurations you can do to make your workflow easy. I usually customize things as I need to do. Otherwise, I go with the default ones. You can test and do some stuff, probably you will make something better, which will suit you.

How to write CSS even Faster

Sameer Katija — Thu, 25 Mar 2021 17:41:28 +0000

While working on a project, experienced programmers tend to find shortcuts to save their time. They seem to hurry that they shifted to i++ instead of i = i + 1 to save time. There are many available options or plugins available to make your web development workflow easy. Emmet is one of them.

Emmet is a plug-in for text editors, which makes coding high-speed with the help of some abbreviations. Like in Html we write html:5 we will get this code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

This was HTML but you were here to learn how to write CSS faster not HTML. Don’t fret, I will guide you through some of the Emmet abbreviations for CSS which will help your workflow fast and smooth. So, let’s start.

Emmet for CSS

You might be thinking that emmet is useful for just HTML, but this isn’t the case. you can use Emmet with CSS. Emmet only provides you shorthands for CSS properties. For Example, if we write m0 we will get margin: 0; Let’s explore some other which are commonly used and can help us code faster.

Emmet Abbreviation for CSS

Emmet Comes with a bunch of shortcuts Like p is short for padding, w for width, h for height, and m is short for margin. There are some common use cases that we need to discuss before we start working with Emmet.

CSS Units

If you are typing default values with Emmet CSS abbreviations then you will get px as the default unit. If you want some other unit likes em, rem or percentage then you have to use the alias which are

e → em
r → rem
p → %
x → ex

Color Values

Emmet supports colors and we can use it to write color shortcuts. Like c#0 the generated output will be color: #000000. Some other use cases are

#1 → #111111
#e0 → #e0e0e0
#fc0 → #ffcc00

Separator

While writing many properties in a single line we use + to differentiate between properties.

Conclusion

So, we can see emmet makes CSS writing super easy with these shortcuts. Think of this you can write five lines using one statement. Isn’t this great? If you are interested in learning more check out the cheat sheet available here.

The 5 Things That Helped Me Escape Tutorial hell.

Sameer Katija — Sun, 21 Mar 2021 22:33:26 +0000

What is ‘Tutorial hell'?

As I started learning to code, I was stuck in tutorial hell. It felt like, I am learning a lot of the stuff. I have mastered Full-Stack web development. I know, how to create a beautiful and awesome-looking fully-fledged website. One day I thought, let’s build something on my own. What I discovered, pushed me into a state of the fret. I came to know that I don’t know anything, so I started another course and then the same happens and I opt-in for another course until I discovered that I was in tutorial hell.

Tutorial hell is really a hell, where most of the programmers get stuck while learning to code. So, what is this tutorial hell? Well, Tutorial hell is when you continuously keep on watching tutorials one after another and so on and you feel like, you are learning a lot of things and building some good projects. As soon as you start doing something on your own, you get to know that you don’t know anything. Isn’t this sound ludicrous? You have built some good and large projects and still, you don’t know anything, how is it even possible? and you start watching other tutorials and this chain goes on. This is what happens when you are in tutorial hell, you think you are learning, you are accomplishing something, but what you are actually doing is depending on tutorials to teach you to solve the only problem which you have watched. Tutorial hell stops you from learning how to solve problems.

I was learning full-stack web dev just because I wanted to learn as soon as possible and start building my preferred web apps. But it seems, all the odds were against me. I once thought I wasn’t able to learn so-called web development. It seems that it wasn’t my cup of tea. Totally disappointed, I left what I started and started blaming myself.

Insanity is doing the same thing over and over again and expecting different results.
Albert Einstein

I thought, instead of blaming myself, wouldn’t it be useful to change my strategy? After some time, I started again. I thought I should do something to really learn something valuable. I read many articles and watched a lot of youtube videos to escape tutorial hell, but all in vain.

I learned a valuable lesson, this isn’t certain that if something works for others should also work for me.

A question to ponder. The answer lies within the question. What worked for others, didn’t work for me. I thought I should change my strategy. I reinvented my whole strategy of learning to code and actually learned something valuable, which today I can contribute.

How I escaped tutorial hell

Today, I will be sharing the strategy that I used for escaping the tutorial hell. You should be glad that I am not here to ask you to solve a real-world problem and contribute to open source. Everybody does it. Right?

The thought-provoking question is that if I was able to do it, why would I consider myself in tutorial hell. I read somewhere that I should actually create something on my own to escape tutorial hell. Which I think is totally bullshit. Nobody starts learning to code and solve a real-world problem on the go. It takes time. So, what should we do instead?

1. Start small

Don’t just try to jump to the top at once. Nobody can do it. You will be motivated and going crazy for the first week or maybe two and after that, you will lose your willpower, and you lost track of what you started. It is better to do it small and step-by-step.

Let me explain it practically, I want you to open your code editor. Please do it now. If you didn’t open it. You should open it. After all, it’s a request. Okay now many of you have opened the text editor and you did it with ease. What if you guys were using a pc, which takes almost an hour to open a code-editor would you still have opened the code editor? or if instead of asking you just to open a code-editor, I would have asked you to open a code-editor and code an entire website. Would you have done that? I guess a big ‘NO’. If something exceeds your level of willpower, the chances are that you will quit it soon.

Same is the case with programming. When we are in tutorial hell, we are asked to solve real-world problems. Due to limited willpower, we think this is not our cup of tea and we quit. This is why start small, code daily for at least one 10 minutes without stressing out yourself.

2. Learn the basics

Don’t even dare to build a skyscraper without building a strong base. You need to understand the basics before you go toward the advanced stuff. I have seen a lot of peoples planning to hack NASA with HTML. Isn’t this sound crazy? Therefore, Learn the basics first.

3. Repetition is the key

Who doesn’t knows that,

Repetition is the mother of skill.
Tony Robbins

Practice it too often, but keep in mind don’t go crazy. You will lose track.

4. Teach others

If in doubt about any specific topic, teach it to others. In one study in Applied Cognitive psychology, researchers set out to check if teaching improves the teacher’s learning and they found it does. Teaching compels the teachers to retrieve what they have previously studied. Recalling back what we have learned leads to the deeper and longer-lasting acquisition of that information than more time spent re-studying. So, what are you waiting for?

5. Write it down

Indeed, Reading and writing is the best form of meditation. when you start writing something, you set a deeper connection to your thoughts. Which help you get the whole overview of what you actually know and what you don’t. When you are confused about whether you know or you don’t, you should start writing then you will get to know.

Conclusion

This was my strategy, which I used to escape tutorial hell and learn better. This will for sure help many and this will be useless too for many. This isn’t necessary that it should work for you, just because it worked for me. With all that, I wish you Good Luck.

If you liked my article, give it a like and let me know if you had a similar problem and how you escape it. It will help the people. Share it with your friends, because Sharing is caring.

Firefox can help you learn CSS better.

Sameer Katija — Fri, 19 Mar 2021 13:57:42 +0000

Yeah, you have read it right. Stop using chrome or any other browser. Most of you might get offended, but I know what I am talking about. Chrome is the best choice when it comes to javascript and other stuff. Even I am writing this article using chrome. So, why should you stop using chrome? Well, I usually suffer a lot when CSS doesn’t work the way I want it to work. It’s totally my fault, but how can I get help? or how can I know the CSS I am applying is invalid here? Sometimes, these small CSS tweaks can make you suffer a lot.

After a lot of searches, I found a valuable resource to help me understand these CSS tweaks. I found the Firefox browser. I will explain to you, why you should reconsider your browser and start using Firefox while learning CSS.

If something doesn’t work, it will tell you why.

While learning CSS, you might experiment with CSS. Sometimes, something didn’t work and you have no idea that why it didn’t work. Here come’s Firefox, to let you help in this situation. Let me tell you how.

Above is the Developer tool of chrome and you can see that I have applied vertical-align property to the button and it didn’t work. As you might know that why it didn’t work. What about beginners, who are just learning now? For them, it might be arduous. Now let’s see Screen Shot of the Firefox developer tool.

You can see that it’s telling me what was the mistake, I was using display flex for the button, changing it to display inline will work.

What are the fonts, the website is using?

As a beginner web developer, you might be wondering about different fonts of different websites. When I started, I was so curious to know about the different kinds of fonts, some famous websites were using. Unfortunately all in vain, until I found Firefox. In the firefox developers tools, you can actually for fonts. Here’s how.

Go to the Website, then open the Firefox developer tool. Navigate to Fonts and then select All fonts on Page. There you will be able to see the list of fonts.

If you want to see the font of a specific header or any paragraph, select that paragraph and then see repeat the same process.

FlexBox inspector

CSS flexible box model is commonly known as flexbox model, it is CSS layout model. The flexbox layout allows responsive elements within a flex container to be automatically arranged depending upon screen size.

If you are working with flexbox and want to inspect the flexbox container then Firefox FlexBox inspector may be your friend in need.

You just need to open the inspector and there navigate the flex item. Go to the Styles tab and you might see the property of display flex. In front of flex, you may see a small grid icon just click on that and you will see that the flex container got highlighted. It is very useful when you are working with flexbox properties like flex-wrap etc.

CSS Grid inspector

How important it is to keep track of rows and columns in CSS Grid and Firefox CSS inspector helps you do that very easily. To open CSS inspector, you just need to follow the process as you did to open flexbox inspector. After opening grid inspector you can see the highlighted rows and columns.

This website used in the image is not affiliated with me. I just opened it to show you as an example.

Accessibility Inspector

One of the best ways to fix your website Accessibility is to inspect it through the Firefox accessibility inspector. Open the developer tool and navigate the accessibility or you can use the shortcut (shift + F12). Where you can scan for issues and it will also let you know, how you can fix these issues.

Conclusion

As you can see, how helpful Firefox can be while learning CSS. There are a lot more to just these, but I guess these features are pretty much used every time. So, I hope you are okay with my opinion now.

If you liked my article, give it a like and let me know if you know any other feature of firefox which can help the people. Share it with your friends, because Sharing is caring.

Make your web development workflow smooth with these 5 VS Code Extensions

Sameer Katija — Sun, 14 Mar 2021 15:18:34 +0000

It’s awful when you are working on a project, but unnecessary things start to interrupt you. I was recently working on a project, where I had to create a front-end responsive design. Along CSS hectic, my HTML formatting was disturbed and things got messed up and made me angry. There was only one option left for me, leave what you are doing and start from scratch. It is always easy to start from scratch than to fix something which is perplexed. I had extensions installed that were needed to help me, but they were not working in the way they were supposed to work. Obviously, they needed some configuration.

After configuring, It became easy for me to start working again. So, I thought let’s share this with other fellows to help them make their web development workflow easy. Here are some of the extensions from my list. Let’s start.

Cobalt2 Theme Official

When the Ide which you are using for coding doesn’t attract you, you are not gonna stick with it. The same is the case with me, all the pre-installed themes were kinda boring to me. So, I started looking for a theme, which is attractive and suits my eyes.

So, I found the Cobalt2 Theme official. I really liked this theme and thought to share it with other you guys.

You just need to install it and reload the window, you will see the changes. If you didn’t see then you should try changing from CTRL+ K and CTRL+ T simultaneously (If you are using a mac, then replace ctrl with command key). You will see a pop-up, there select the cobalt 2.

Auto Rename Tag

This extension is used to automatically rename the HTML closing tag when you change the opening tag and vice versa.

If you are working on a big project, finding the tags can be difficult and time-wasting. So, isn’t it better to let the auto rename tag do it for you?

Live Server

While working on projects whenever we change something, we have to reload the web browser to see the changes. There comes the Live Server to do this job for you.

To use the live server, open the workspace, and then at the bottom-right corner, you will find “Go live”. Click on that and you will see the live changes.

Another great advantage of using a Live server is that if you are connected to the same network, there is some good news for you. You can Remote Connect through WLAN. To do that you need to open a command prompt or terminal, depending on the OS you are using, and type.

ipconfig (for windows)
ifconfig (for mac and Linux)

If you are connected with wifi, navigate to “Wireless Lan adapter Wi-Fi” or if you are using ethernet then you must see in “Ethernet adapter Ethernet”. There you will see your IPv4 address. As my Ipv4 is highlighted Yellow.

If you are Linux or Mac user, you will see almost the same result with different commands. Same, I am using wifi, so I will check it in wifi0.

After finding your IP, go to the mobile browser and type your Ip and the port number in the search bar. Like http://<IP Address> : <Port> . The port number is what you see after localhost:0000, in this case, 0000 is your port number and if you see something else, that is your port number.

Prettier — code formatter

Prettier is what helps me most. It automatically formats the code, adds alignments, removes spaces, and all that extra stuff to make it look beautiful.

If Prettier, after installing isn't working then there are some settings, which you need to do after installing it. First set “Format on save” and second set Prettier as a default formatter. to do that open settings by typing “Ctrl+,” for windows, and “command key +,” for mac.

There search for “Format on save” and check the box. (If the box is already checked, leave it as it is.)

After that search for default formatter, and choose “esbenp.prettier-vscode” your default formatter. (If this is already selected, leave it as it is.)

Bracket Pair Colorizer

Bracket Pair Colorizer is useful a lot when you working with functions, nested if, and a lot more. This extension turns the color of brackets of the same function, loop, or if statement in the same color. Which help’s us to identify which bracket belongs where.

Live Share (Bonus Extension)

Live share is very useful much useful if you are working in a team or want to collaborate with someone. This extension allows us to share our code space with others and they can use and type code.

If you are a beginner and start learning to code, you might need this extension.

Conclusion

These were some extensions from my list, which I found useful, and it helped me code better without getting interrupted and that’s why I am sharing this with the world. One thing, I want to clear is that this list is not structured as most favorite to least. Every extension has a different job to do for me, therefore all have the same place here.

P.S. Time to ask something. If you liked or didn’t like my article, give me a like 😜 and share it with your fellows because sharing is caring.

Github markdown cheat sheet: Everything you need to know to write README.MD

Sameer Katija — Fri, 12 Mar 2021 12:39:00 +0000

As I was starting out with Github, I always wondered that how can people get to learn about markdown? It seemed to me, like completely whole alien’s language using “#” or “##”. I thought I would never be able to learn this language, at least not in this life. Who knew I was going to be wrong. If you are like me and you think that you too can’t learn Github markdown syntax, you might be wrong. So, in this article, we will learn about markdown syntax and what is markdown in general. So, let’s start.

What is Markdown?

Before we start learning anything, we must know what it is. Markdown is a lightweight markup language that we can use to add formatting to a plain-text document on the web. We can transform the text to italic, bold, or underlined and we can create lists, links, and heading using alpha-numeric characters like ‘*’ and ‘#’. Sometimes, we also use markdown as a utility to convert the files into HTML(Hyper-text markup language).

It was developed by John Gruber in 2004 and is almost the world’s most popular markup language. Markdown is often used to format README.md files, for writing messages in the online discussion forums, and to create rich posts, Like In Dev. to, you can only write and format posts using markdown.

P.S. Don’t forget to follow me there. 😜

Github Flavored Markdown (GFM).

Github has released its own markdown language based on the original markdown. GFM provides an additional set of useful features, many of which make it easier to work with content on GitHub.com. Most of It is almost the same as markdown.

Markdown Syntax

Heading

Almost in the every-text document, you will see the headings. Like Html in markdown, we also have six headings based on their size(H1-H6). The syntax of the headings is ‘# ’.

# heading 1
## heading 2
### heading 3
#### heading 4
##### heading 5
###### heading 6

Bold text

In Markdown, we use “**….**” to make the text bold.

**This will be Bold**

Italic text

In Markdown, we use “*….*” to make the text italic.

*This will be italic*

Italic and bold text

In Markdown, we use “***….***” to make the text italic.

***This will be both bold and italic***

Lists

Like Html in markdown, we also have two types of lists.

Ordered List
UnOrdered list

So let’s discuss both of them.

Ordered List

In markdown, we can easily create an ordered list in the way given below.

1. item 1
2. item 2
3. item 3
   1. sub-item 1 of item 3
   2. sub-item 2 of item 3

UnOrdered List

In markdown, we can easily create an unordered list in the way given below.

* item 1
* item 2
* item 3
   * sub-item 1 of item 3
   * sub-item 2 of item 3

Links

In markdown, we can create links using “[Name of Website](address of the website)”

[Github](https://www.github.com)

Images

In markdown, we can create links using “![Alt-text for image](address of the image)”

![Github logo](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)

BlockQuotes

In markdown, we use “>” for writing quotes.

As Albert Einstein said:
> Insanity is repeating things and excepting different results.

Escape Sequences

In markdown, there are some words that are the syntax of markdown, and what if we need them in our text? To write the words which are the syntax of markdown we have to use “\” in front of that words and those words are

\ backslash 
` backtick 
* asterisk 
_ underscore
{} curly braces 
[] square brackets 
() parentheses 
# hash mark 
+ plus sign 
— minus sign (hyphen) 
. dot 
! exclamation mark

Conclusion

These were some important syntax that you will need most of the time. This is not the complete markdown cheat sheet, there may be some more left. I guess these are quite enough to get your work done and most people never go beyond these. I hope you have learned something from my article. If you want to learn more about markdown, check out this cheat sheet by Github, where you will also learn some of the GFM Syntax. To practice the markdown, feel free to check out this app.

This article was originally published at medium

What is the difference between Scripting languages and programming languages?

Sameer Katija — Tue, 09 Mar 2021 16:56:34 +0000

If you are learning to code or already an experienced programmer, then you might have heard of scripting language and programming language. Although many of us use scripting and programming synonymously, in-depth they both have differences. All scripting languages are programming languages but not all programming languages are scripting languages.

Scripting languages and programming languages, both are high-level languages and are used to instruct the machines. If these both are used for the same purpose, then why do we need both of them? Today in this article we will try to breakdown both a scripting language and programming language and will try to understand them and their purpose.

As far as their language structure is concerned, they both are the same as I mentioned above all scripting languages are programming languages. The major difference is that scripting languages don’t require pre-compilation, instead, they are interpreted. Some of the interpreted languages are Javascript, PHP, and shell. While Programming languages are c++, C#, and java.

Difference between compilation and interpretation.

Now let’s discuss what is compilation and interpretation. Complier takes the source code and converts it all to gather in machine code. then the linker will take all the object codes and will link them together and generate an executable file. This executable file is platform-dependent and will learn on the platform for which it has been generated.

Interpreter does the same job, it also converts the source code to object code but, it does it line-by-line at runtime. Whenever it will interpret any line of code, it will also execute that.

Advantages and disadvantages of Compilation

Everything comes with advantages as well as disadvantages. The major advantage of compilation is that it is fast. As it takes all the code and compiles it all together, so it is fast.

The disadvantages of compilation are that they are platform-dependent and require an extra step for compilation.
The executable requires to run on a mac and on a Linux will be different. We also need an extra step to compile our code and sometimes, it can be time-consuming for some cases like debugging.

Advantages and disadvantages of Interpretation

The advantages of Interpreter are that it is cross-platform and doesn't require an extra step for compilation.

The disadvantage of Interpreter is that it is slow because the conversion to machine code happens on the go.

use case of both.

Programming languages are more powerful and are used to design more complex application which can run independently.
On the other hand, scripting languages are easy to learn and provide fast implications. They are mainly used to automate a series of tasks.

Conclusion

Now, as we know what is a scripting language and programming language. We should never again use these both synonymously. These both are important according to their use-cases and there may be some languages that have both compiler and interpreter available for them Like, python.

Basic Operations in Git

Sameer Katija — Tue, 09 Mar 2021 15:57:24 +0000

In my previous articles, I have covered An intro to Git and Github and How to Push a Project to GitHub. Today we will learn about the basic operations of git. There are almost five basic operations in Git.

Initializing
Add
Commit
Pull
Push

If you have followed my previous articles, you might have an idea about these operations. Let's discuss them but before that, if you don't know about Git then do read my article on "An intro to Git and Github" first and then continue with this article. If you have the know-how of git. Let's continue.

Initializing

Initializing in Git is used to convert a simple folder to a Git repository. To initialize the folder as a Git repo you need to navigate the folder which you want to be initialized as git and start the Git terminal and run the command given below.

git init

Now, your folder is initialized as a Git repo and it will have a folder named ".git", it may not be visible but you can see if you change the setting to "show hidden folders". The initialized repo is also known as the "Working directory".

The root folder of your project is often called the "Working copy" or "Working director". It is the directory on your local computer that contains your project's files.

Add

The Add operation is used to adds a change in the working directory to the staging area. A staging area is a virtual place that collects all the files you want to include in the next commit.

It Git add operation tells the git that you want the updates of a particular file, included in the next commit. However, add operation doesn't really affect the repository in any way and changes are not actually recorded until you commit the code. Add operation is performed using

git add <filename> (for specific file)
git add -a (for all files)

Commit

Commit operation in git is used to save all changes present in the staging area along with a short description from the user in a local repository. Commits are very much important in Git. You can think of every commit as a snapshot of your project, where a new version of that project is created in the current repository. Git commit is performed using

git commit -m "user message"

Pull

The pull operation is used to fetch and download data from a remote repository and merge it into the local repository to match that code or data. Git pull is performed using

git pull

Push

Push operation is used to upload local repository data to a remote repository. Git push is performed using

git push origin main

Now, you know about the basic operation of git. In the next article, we will focus on advance Git operations. Don't forget to share, if you find out helpful.