DEV Community: Mudit Mishra

Backend Development Is Not Hard

Mudit Mishra — Mon, 25 Apr 2022 08:06:22 +0000

Hey👋 everyone, today we are going to talk about backend development. I have seen many people who are afraid of backend development and think it's really hard and out of their league. Even though most of these people have not even tried, and have just assumed that backend is difficult. I think that's how the image of the backend development is: difficult, boring, and very mathematical. Well, we are going to bust few myths today. Through an example, I will show you folks, that backend is not as intimidating as it sounds.

We are going to create our own web server using "express". But before we do that I want to make a few things clear,

If you are an intermediate or experienced backend developer, this is not for you.
I'm not saying that backend development is easy. The goal of this article is to make backend development less intimidating for folks thinking to start learning backend and bust a few myths.
And when I say "web-server" I am not talking about a physical hardware server. I am talking about the software side of the web server.

With that said, let's start building our own server! But first, you should know what is a web server(HTTP server).

What is a web server?

In layman's language, a web server is a program that stores, processes, and distributes web pages to the end-user(client-side). Let's discuss the working of the web server in brief because we will need it further in the article.
When a browser(a website) needs a file that is hosted on a web server, the browser requests the file via HTTP(the protocol your browser uses to view webpages). When the request reaches the correct web server, the server accepts the request, finds the requested document, and sends it back to the browser, through HTTP. (If the file does not exist in the server, it returns a 404 response.)
The browser makes a GET request through HTTP and the server processes that GET request and send the response accordingly.
See the image(credit: mdn docs) below to get more clear understanding.

So, now you have a gist of what is a server and how it works. Now let's start our tutorial.

Step 1️⃣: Install Node.js

First, we need to install the node.js in our systems(if you haven't). Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that executes JavaScript code outside a web browser. Go on this link to install the LTS version of node.js.

Step 2️⃣: Create a project folder

Create a project folder for this tutorial. I'm naming it "building server" and creating a server.js file in it.

Step 3️⃣: Initialize NPM:

Node js comes bundled with a package manager called npm(node package manager). We will use npm to install the express that we are going to use further in our tutorial.
Open the terminal inside your project folder and initialize npm:

write

npm init

Then it will ask you several questions like the package name, version, description, keywords, and other things. You can leave them all default by pressing enter after every step. You can give a description and the author's name if you want.
In the end, it'll ask you "Is this OK?" press "y" and then enter.
This will create a package.json file in your project folder. This JSON file will keep track of all the packages that you'll install in this project.

Step 4️⃣: Install Express

Express is a Node.js web application framework that makes making web applications easier. To install express, open the terminal inside your project folder and write

npm install express

It will take a couple of minutes to install express after that we'll move to the next step.

Step 5️⃣: Creating our first server

Now it's time for the real action. Open the server.js file in the code editor.
Let's first see the complete code then an explanation:

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (request, response) => {
     response.send('<h1>Hey👋</h1>');
})
app.listen(port, () => {
     console.log(`Server is running at port ${port}`);
})

In the first line of the code we are requiring the express module in our program. We do this whenever we use any package.
As mentioned at the beginning of the article when we open a website our browser makes a GET request to the website's server and then the server sends a response back and that response is displayed in our browsers.
In line number 4 of the code we are responding to the GET request made by the browser. Using response.send we send back the response we want. - Inside app.get() the first parameter we pass is the route address. This is the address where the GET request is made and where our response will be loaded. The second parameter is a callback function with two parameters: request and response. - And at the end, we are stating where the server is running.

Step 6️⃣: Compile and run your code

Compile and run server.js using node. Open terminal and type

node server.js

Now when you'll open http://localhost:3000/ in your browser you'll see the response you passed in your server.js.

You just loaded a page using server🎉🎉🎉

That's all, in just seven lines of code you made your own HTTP server and sent a response to a GET request made by the browser.

This is very basic, we can do many more things. Look through this express documentation to know what else you can do.

Conclusion:

The article was not supposed to make you a backend developer. The aim of the article was to increase your interest in backend development and bust the myths you have regarding it. Backend development is way more than this. This was not even the tip of the iceberg. However, this should not intimidate you, backend development is just like any other skill, the more you'll practice the better you'll get at it. For some of you who don't know javascript yet, this might have been complex. But as soon as you'll clear your basics this will be a cakewalk for you.

I want to emphasize something here, don't skip the fundamentals. In this tutorial, I have used the express-a framework of the node. But if you are planning to become a backend developer first study the basics - javascript and node.js.

If you are still here, thanks for reading and let me know your feedback and tell me your opinion about backend development in the comment section.
Follow me on hashnode, @muditwt on Dev.to, and @muditwt on twitter.

How To Learn And Get Better At Web Development

Mudit Mishra — Thu, 31 Mar 2022 07:04:36 +0000

First ask yourself, what do you want to do? Do you just want to know about the basics of web development or want to get really good at it? If you just want to know about it, you’ll not face many problems, learning resources are very easily accessible. The real task is getting better at development.

If you want to get better at the development you need to do three things:

Keep learning new technologies.
Apply
Teach others and document

1. Keep Learning New Technologies:

Once you choose tech as your career, the one thing that is never going to stop is learning. You will always be a student. You can not be rigid in this space it’s always changing, there is always something new to learn. But this should not scare you, because once you learn a technology and get good at it, moving to a new tech becomes easier. After all, the fundamentals of every tech are somewhat the same.

So first you need to pick a domain (in our case it’s web development).

Learn its basics i.e., the minimum amount of knowledge you need to get started (HTML, CSS, JavaScript).

Practice what you have learned by building projects

Start with small ones and then move to bigger projects

Once you get hold of the fundamentals you can switch to any new technology.

✨ So first you have to learn the fundamentals and then keep an eye on the new trends and learn what excites you the most.

Learning Resources:

We have discussed how you have to learn, so now lets see from where you can learn:

freeCodeCamp
YouTube
Udemy
Technical Blogs: Hashnode | Dev.to | Medium | freecodecamp
Documentation: MDN docs | https://www.w3schools.com/

1. freeCodeCamp

freecodecamp is a non-profit organization that provides quality courses on various domains including web development. It’s one of the best resources that are present out there, they also have a YouTube channel that is full of educational videos on various topics and they provide all of this for free. It’s a gold mine for learners. If you are a beginner then I would highly recommend you to check out their website and YouTube channel.

2. YouTube

This is something that’s obviously not new for anyone. But you know what, YouTube has more than just music and cute cat videos. I’ll list down some quality channels for you to learn web development and web designing.

G.O.A.T and beginner-friendly
Fireship (New tech information)
Coder Coder (Web Dev)
Programming with Mosh(Everything)
Kevin Powell(CSS)
Wes Bos (New tech and tips)
Codevolution (Code along tutorial)
Adrian Twarog (Mostly for web design)
Dev Ed (Web Design and Dev)
DesignCourse (UI | UX)

I don’t think you’ll need anything more than this. I have listed quite a few channels to learn from but keep in mind not to get lost in these videos(Just stick to one or two channels courses). If you really want to grow as a developer then just watching the videos is not going to help you.

✨ Learn enough to start a small project and then learn along with the project.

3. Udemy

On Udemy you can get quality paid courses to learn web development. Few of these courses might be from educators you already know through YouTube. The courses are on-demand and self-paced, so you can watch them anytime and at your own pace.

These are a few popular courses on Udemy for full-stack web development:

By Colt Steele

By Angela Yu

4. Technical Blogs

Technical blogs are not only a good resource for new tech news and trends but also a great way to learn. These blogs are written by fellow learners like you. Blogs will teach you a specific concept in very less time.

You need to have a profile on these blogging websites and have to keep them checking from time to time:

Hashnode
Dev.to
Medium
freecodecamp

5. Documentation

If you don’t like learning through watching videos or you want to quickly revise, then learning through documentation can be your path.

Some documentation websites that you need on your bookmark bar:

MDN Web Docs
w3schools
Eloquent JavaScript (A eBook not a documentation)
javaScript.info

Other than these, you can also refer to the tech-specific documentation like react.js and node.js documentation.

2. Application:

This is the most important step and ironically most people fail here. Just mugging up the information will not make you a developer. If you want to get better at development, then you need to practice development. A developer is not someone who knows everything about tech, you don’t have to mug up every single concept of web development. You’ll forget things and that’s okay. You have google, you don’t have to memorize things.

You only need to retain the core concepts. You have to know how exactly a certain thing works and that will only happen when you’ll apply what you know.

✨Don’t just make those tutorial projects, work on projects that you can use in your daily life. Contribute to open-source.

There are a few websites that you can use to practice frontend web dev:

3. Teach others and document:

This is also a very important part and can give you an edge over other people who are at the same experience level as you. Through teaching others and documenting, I mean learning in public and building in public. Learning a new technical skill can be tough, you will face many problems and you’ll need help from other people, this is where learning in public will help you. When you learn in public you network with people in that space, people who are at the same level as you and might be facing the same problems as you, people who are more experienced and have gone through those issues and know how to solve them. You connect with a very supportive tech community and this community will not just help you when you get stuck, it’ll also be a boon to your knowledge.

Learning in public has huge benefits, you might end up getting an internship, freelancing project, or even a job offer. Your profile will be proof of your work.

There are many ways by which you can share your work and learning. You can write blogs on the very website you read them(as you are doing right now), you can tweet about it and if you have more free time to spare, you can even make videos.

✨ So build/learn in public. Let others know what are you working on or learning. Open yourself to the opportunities waiting for you.

Conclusion:

Learn enough to get started and then learn while building. There are a plethora of resources to learn don’t get confused, pick any one or two, and stick to it. Try not to fall into tutorial hell and focus more on creating projects. Open yourself to the world and share what you know, be more discoverable.
If you are still here, thanks for reading.