if you have SQL or MySQL on your learning journey, check out my SQL course on udemy

In this blog post i am going to touch on some of the things you need to know or work with as a developer along your journey. These are my personal. If you are a senior developer, You might have a list of your own or have your own preferences and that is ok. In short, in this article, i am going to briefly go through the building blocks of the web (front end, backend end, networking... and more) and why they are crucial?

So with that out of the way let's get started :)

Table of Contents

• The Basics of The Web (html + css + javascript)

• APIs

• Git & Github

• Databases

• Network Basics

• MVC

• Chrome Dev Tools

The Basics of The Web (html + css + javascript)

These are your friends throughout your career as a web developer more like your best friends if not siblings. Almost every website uses them. Well, maybe a lot of websites use a "Template Engine" Like "jinja, blade,..." or whatever. These template engines are really similar to HTML. Like they all instantiated from it. And if you are not familiar with template engines, they are basically like Html but more dynamic. Backend developers mostly use them to build dynamic backend applications. So HTML is just a markup language nothing dynamic about it, that is why it is not a programming language. CSS is the beauty and magic added to Html to make it great looking. CSS is not just about colors, it is about positioning, styling and animation and a whole a lot more. You can make interactive games with only HTML and CSS. When we take about more interactivity javascript comes to show. Javascript is the language of the browser. Its main function is to make interactive UIs, but it is more than that nowadays. Today you can make anything with it. You create mobile, web, desktop, machine learning apps.

APIs (Application Programming Interface)

APIs are extremely important to grasp as a web dev. Even if you are a front end developer you need to know what APIs are, how they work, and why we use them. Here is briefly, what you need to know about them. Think of an "API" as a waiter in a restaurant. You order your food. You get it and you eat it without questioning what are the recipes and the ingredients are or more accurately what is happening in the kitchen. Not quite satisfied with the explanation yet? API stands for an application programming interface. It makes it easy for your application to connect and to talk to another (applications, servers, databases). There are various types of APIs. Your fridge can contain one!!

Here is a real-world example, let's see you want to build this weather app. Its main function is to show the weather if enter a city in an input, the weather of this city will pop up. So you might ask yourself how am i going to get this weather data? And where? And if it is changing all the time, how am i going to scale my app to get real-time data? Well, that is the role of an API. It will get you real-time data to include in your app without worrying about anything or coding from scratch. A similar example is the stock market, bitcoin price and the currencies exchange Refer to this post if you know to dig deep.

A Gentle Introduction to APIs

Vikram Sharma ・ Mar 15 '20 ・ 6 min read

#api

Git & Github

Git is such a handy tool to learn. So what is it? Git is just a command-line tool with more superpowers than your normal boring windows terminal. You can upload, update, version, maintain, and manage your source codes to websites that host them like GitHub. And it is not just Github. There are a lot of websites out there you can host your code with like GitLab (recognized as the best alternatives to GitHub), bitbucket, beanstalk, SourceForge, GitKraken, and AWS CodeCommit. So git is not just related to Github.

Databases

The world operates on data in this age. Data is the virtual gold, so to speak. So a database is any container that contains data. Your phone, your pc, even your shopping list is just another form of a database. Some databases are relational and these called obviously, relational databases like (MYSQL, MS SQL SERVER, IBM, ORACLE, POSTGRESQL) and some are non-relational like (MONGOBD, FIREBASE,....). They are different in terms of structure, operations, size, and functions. Even if you are a front end dev, i still think some database knowledge is going to be extremely beneficial.

Network Basics

This is a must, especially if you are working on the back end, because you may want to get into to something like DevOps later in your career. You need to know what are IPs, TCP, UDP, DNS, NAT, ROUTERS, and the difference between HTTP and HTTPS. How does the internet work? What happens when type a domain on your search bar? What are ports? If these names and initialisms sound scary to you, it is ok. Everyone has been there. Of course, you do not want to get advanced because this field is huge. It is a whole spectrum. Here is the best post i found on medium.

Developers Need to Learn Basic Network Engineering | by Tate Galbraith | Better Programming | Medium

Tate Galbraith ・ Feb 9, 2020 ・ 5 min read

Medium

MVC

MVC stands for Model View Controller. It is used to structure, manage, organize your web app. It is a design pattern. If you are not familiar with the term "design pattern", Think of it as a common solution to frequent problems in software design. You might ask are there any other design patterns? Of course, Remember it is not code. It is just a way of creating apps. Design patterns are commonly used with OOP languages like (java, c#, PHP,.....).Now, what are models, views, and controllers?

Models: Deal with the data, database, and migrations so basically the data business.

Views: handle the interface (HTML + CSS + Javascript) to display the data in a friendly way that a user can deal with easily.

Controllers: Think of it as a middleware. They tell which data to display in which interface. They process HTTP responses (POST-GET-UPDATE-DELETE). They handle requests and URLs.

Let's wrap up with a simple example: If you want to like this post (which i think you should :) ), you will click the heart button. And what is going to happen is you send a "POST" request through a controller to the server which will increment the number of likes of my post by 1 in the database (MODEL) and the icon will be red (VIEW). And you might ask why the page does not load? Well, because of (AJAX: a javascript related technology that makes asynchronous requests to the page to perform certain actions without refreshing). You do not need to worry about AJAX at least for now.

Chrome Dev Tools

You probably like Mozilla, but when it comes to the development you want to use Chrome. Did you know that Chrome is mostly used by developers? Maybe it has its downsides like consuming your rams, but it is still a go-to. What is so great about Chrome is coming with handy tools to speed up the development process, easy debugging, testing the responsiveness of the website and editing (HTML or CSS)on the fly. To open the Chrome Dev Tools press (CTRL+SHIFT+I).

Here are some tricks.

Access any file through a project with (CTRL+P).

Search the source code of the current page with (CTRL+SHIFT+F).

Add multiple cursors with (CTRL+CLICK).

Test the responsive design with (CTRL+SHIFT+M).

And the list goes on and on. Do you want more? Click here.

Conclusion

If you reached this far, you should be proud of yourself. Well, this was my reflection on the subject and remember there will be a lot of things you need to learn either you are a junior or a senior dev.You will always be learning and growing. Sorry if this was a bit boring. I hope you have a successful career and thanks for reading :)