Forem: Rohit Singh Rana

The 10 Most Important Web Developer Resources You Need to Know

Rohit Singh Rana — Mon, 31 May 2021 08:04:16 +0000

Did you recently start your web development journey?

As exciting as this may sound to create your first web application but soon things will quickly become repetitive when you have to build everything from scratch for different projects.

It means that it's time for you to familiarize yourself with some tools that will help you to build projects more efficiently.

In this post, we’re going to examine 10 incredibly useful web development resources and how you can get benefit from them.

Every resource on this list is free for personal use and will help you to become more productive.

Here are the different categories under which I am going to fit all the resources.

Wireframing
Online editor
Design ideas
General tools
Deploying

Wireframing

Wireframing is the process of creating a layout for your website.

It tells you where and how each element will get placed.

Many people underestimate the power of wireframing but it's a good practice to visualize what your website will look like in the end.

It gives you more clarity when making several decisions, saving you from a lot of problems.

Although there are many tools for wireframing out there in the wild. But the best tool which most developers use is Figma.

Figma

With annual revenue of more than 130.5 million dollars, Figma is probably the most valued company on the list.

Figma is a web-based tool and design platform that is build to help you make a blueprint for your website.

Figma has a million plugins, themes, and UI kits that you can work with but its greatest strength is that it provides real-time collaboration with your project partners.

It allows you to build up libraries of reusable components which your project partners can access.

Online Editor

Most developers do not use an online code editor instead they just set up the project in their local machine.

But for a person who is starting out setting up a big project and installing all the dependencies may be a bit overwhelming.

When I started learning React, I used the code sandbox as it’s fast and easy to work with.

CodeSandbox

CodeSandbox is an online code editor which accelerates your process of creating web applications.

But I think it's much more than just an online editor it allows you to share your code and collaborate with other partners.

This is a simple and effective solution for creating small web applications quickly.

30 seconds of code

30 seconds of code is not an online code editor instead it provides you the most popular used code snippets for your preferred language.

Currently, it supports many front-end languages including JavaScript and ReactJS.

You can search for any specific code snippets like shown below and it will give you an idea of how to use that snippet in your code.

Design ideas

If like me you also struggle with design and creativity this section will be extremely beneficial for you.

One thing to keep in mind is that some of these UI ideas will overwhelm you as these are created by experienced professional developers and you will get there in some time.

Bootstrap Studio

Bootstrap Studio is a desktop application intended to help designers create beautiful and appealing website experiences.

It has a beautiful and powerful interface, which is built around the simplicity of drag and drop.

Because it's built using the well-known Bootstrap framework, Bootstrap studio provides clean and straightforward exportation choices, allowing any developer to easily create websites.

Dribbble

With more than 6 million active users and a revenue of 61 million dollars, this is the largest platform where designers flaunt their work.

Dribble is an online community where designers exhibit their work and made networks with like-minded people.

In short, Dribble is LinkedIn for designers and goldmine for developers looking for design ideas.

UI Design Daily

This website will soon become your daily driver once you start implementing its UI components in your projects.

It provides every sort of components such as login page, donation page, and forms which you can embed smoothly and speed up your project.

General Tools

This section covers up almost everything a web developer needs for his project from royalty-free images to great illustrations and icons.

If I will put all these things in this blog then, it’ll become too obnoxious to read.

Therefore, I have linked a GitHub repo of Brad Traversy in which you’ll find all those resources in an organized way.

If you don’t know Brad Traversy, he makes awesome programming tutorials you can check out his YouTube channel.

Now, Whenever you build your website there is a high possibility that it will throw error 404 for some pages.

Make sure you have a custom-designed 404 page it’ll give you a good impression.

Many developers are proud of how beautiful they have designed their 404 pages and therefore, it’s a good practice for you also to design your website 404 page.

The tools which you can use for that are 404 illustrations and Google Fonts.

Deploying

To present yourself more as a professional developer it is very important to deploy your project so, that everyone can see what you have made.

There are many hosting services out there like Vercel, Firebase, and Cloudflare pages.

You can check them out too but the most popular ones that developers use for hosting their projects are Netlify and Heroku.

Netlify

Netlify has hosted projects for more than 800,000 developers and it’s a very reliable resource that you can trust.

It’s biggest feature is that it’s simple to use and provides you a 10x faster path to host and secure your web apps.

However, netlify only hosts front-end projects and not full stack projects.

But don’t worry I have got you covered on everything.

Heroku

Heroku is a cloud-based platform that lets you build, host, and scale your full-stack web applications without worrying about infrastructure headaches.

The thing which l like most about Heroku is that it supports many languages like Node, Python, PHP, Ruby, Java, Go, Clojure and Scala.

Heroku will get your job done in most cases.

Other than these two you can also use firebase and Vercel they also provide very credible services.

Now, these are the tools that will help you to become a much more efficient web developer.

Although I have told about all the useful resources, there is a strong suggestion that you should document your journey of being a developer.

If, you ask me what’s the best way to do it I’d say write some blogs, not much just write once in a month and simply write down what you have learned in that month.

For writing blogs, you can use dev.to it’s free and super easy to use.

Conclusion

Learning a skill requires both time and effort. You need to understand the differences between when to start a project from scratch and when to slip in the code snippets.

Make sure you know that how these code snippets work before you copy them down for your projects.

If you find my work interesting and enjoyed reading you can appreciate me on LinkedIn and Twitter.

Would you like to add any other tools to this list? Do you have any experience with any of these tools? Share your thoughts with us.

What is the difference between Library vs Framework?

Rohit Singh Rana — Fri, 21 May 2021 12:51:38 +0000

While the terms Library and Framework may sound similar, they both work differently.

Many people use these two words interchangeably without knowing the profound meaning behind them.

Before we dig into the key differences between Library and Framework, let's look at the common purpose that they both serve.

Both Library and Framework are code written by some developer to solve a complicated problem efficiently.

They both give you an excellent approach to write DRY (don't repeat yourself) code.

Their purpose was to increase the reusability of the code so that you can use the same piece of code or functions again in your various project.

What is Library?

A Library is a set of code that was previously written by a developer that you can call when you are building your project.

In Library, you import or call specific methods that you need for your project.

In simple words, a bunch of code packed together that can be used repeatedly is known as Library.

Reusability is one of the main reasons to use libraries.

Let's understand this more clearly with the help of an example.

Think of you as a carpenter who needs to build a table.

Now, you can build a table without the help of tools, but it's time-consuming and a long process.

Whereas, if you choose the correct tools, you'll be able to build a table more quickly and that too without any hardship.

Think of here tools as a library. You can write your program without them.

But it will be a long process, and chances are your program will get buggy, while if you use Library, it'll be much easier for you to work with the program.

For example, if you use the in-built JavaScript fetch () method to fetch the data from API and you feel that it's not the ideal solution.

Then you can use Axios Library for the same purpose to make your work easier.

axios.post('/login', {
  firstName: 'Monica',
  lastName: 'robinson '
})
.then((response) => {
  console.log(response);
}, (error) => {
  console.log(error);
});

Some common examples of Library are:

React

React is a JavaScript library for building user interfaces.

Redux

Redux is an open-source JavaScript library for managing application state.
It's most commonly used with React

Three.js

It's another super cool JavaScript library used to create and display 3d computer graphics.

Lodash

Lodash is a JavaScript library that provides utility functions for common programming tasks.

It's more of a productivity kit in node.js

jQuery

jQuery is a JavaScript library that does the things like event handling and HTML document manipulation.

What is Framework?

A framework is a supporting structure that gives shape to your code.

In the Framework, you have to fill the structure accordingly with your code.

There is a specific structure for a particular framework that you have to follow, and it's generally more restrictive than Library.

One thing to remember here is that frameworks sometimes get quite large, so they may also use the Library.

But the Framework doesn't necessarily have to use Library.

Let's get back to our carpenter and table example for a better understanding of the Framework.

Here, if you want to build a table, then you need a model or skeleton for how the table looks, like the table has four legs and a top slab.

Now, this is the core structure of the table and you have to work accordingly to build the table.

Similar to this, Framework also provides the structure, and you have to write the code accordingly.

Let's take the example of Express and understand the restrictive nature of the Framework.

var express = require('express')
var app = express()


app.get('/', function (req, res) {
  res.send('welcome to dev.to!! ')
})
app.post('/', function (req, res) {
  res.send('POST request to the dev.to homepage')
})

Here express is designed in such a way that it is going to look only for specific methods (get/post) and specific parameters.

You can't name the methods whatever you want to, and you have to name the methods as per the documentation.

Some common examples of Framework are:

Angular

Angular is a JavaScript framework for web and mobile development.

Django

Django is a fully featured server-side web framework written in
Python.

Express

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

Rails

Rails is a web application development framework written in the Ruby programming language.

Spring

Spring Framework is an open-source framework for building web applications with Java as a programming language.

Key Difference between Library vs Framework

The main key difference between the Library and Framework is something known as inversion of control.

Let's understand this inversion of control more in detail.

When you import a library, you have to call the specific methods or functions of your choice so, and it's up to you when and where to call the Library.

Here, you are in charge of flow.

On the other hand, Framework itself makes a call to your code and provide you with some space to write down details.

So, while using framework your framework is in charge of flow.

In Library, your code is going to call the Library whereas, in Framework, your code is being called by Framework.

Conclusion

I know it's getting too confusing but stay with me. I'll end this with one last crucial point.

Here is a simple thing to remember Framework is often more restrictive and generally have a more set of rules.

Whereas, Library is not bounded by many rules.

I hope you get a broader perspective of what's the difference between Library and Framework.

If you find my work interesting and worth reading you can appreciate me on Twitter and LinkedIn.

All kinds of Feedback are welcomed in comments.

Why React is winning over Angular?

Rohit Singh Rana — Thu, 06 May 2021 21:58:30 +0000

Do you want to skip the article and want to know what’s my top preference for beginners to start with? The simplest answer is React.

But if you are curious to know why I preferred to react, grab a cup of coffee and sit around to read the article.

When working with JavaScript you’ve got a lot of solid options in frameworks to choose from and oftentimes, it gets confusing to choose a one and get started.

Here, I’ll introduce you to the two most popular frameworks of JavaScript i.e. Angular and React.

We will find the best fit for your situation and will discover why react is gaining huge popularity.

By the end of this article, you will be on your way to start working with one of these frameworks/libraries.

Introduction

In this article, I’ll be talking about Angular 2 and not about Angular.js.

Angular 2 is a general term used to refer to all versions of Angular after Angular.js.

One thing to be mentioned in this article I’ll be using Frameworks and Library very often inter-exchangeable, for ease of readability.

But this doesn’t mean that both the words have the same meaning.

Library and Frameworks both share very different properties and in fact, it is one of the core differences between React and Angular.

React is a Library whereas, Angular is a fully-fledged Framework.

Before disclosing the reasons for the popularity of React.

Let’s understand more about these two Frameworks with the help of few points.

Brief overview

React

React is a JavaScript library for building User Interfaces.

It’s a component-based library and makes it super easy for developers to create User Interfaces.

It was managed and created by Facebook and a group of open source developers and was introduced in May 2013.

Angular

Angular is a JavaScript framework for web and mobile development.

It is a typescript-based language, managed by Google’s Developer community and was launched in 2016.

It is one of the most important factors that work in favour of Angular that it is built and updated by some of the most credible persons on earth.

Learning curve

React Possess a low learning curve when compared with Angular.

However, react itself is not complete and you generally have to use some state management libraries like Redux and Flux for managing states in a complex React application.

We can combine react with any other framework out there and start working on it, even we can combine react with Angular.

Angular is quite opposite of React and possesses a high learning curve as it is a very large framework.

Performance

Performance could be the turning point for most developers to change their minds from Angular to React.

React uses Virtual Dom, whereas Angular uses a traditional Dom.

Now, In traditional Dom, if you want to update specific information of your user, Angular will rewrite the whole structure of the Html Tree.

Whereas, React Virtual Dom allows you to update the changes without rewriting the entire HTML.

In short, React Virtual Dom is faster than the Angular Traditional Dom.

But angular has something called change detection which updates the DOM whenever data is changed.

Due to this angular DOM performed as effectively as virtual dom.

React Uni-directional data flow ensures that the state change takes place meticulously even in complex projects.

Data flow control is very simple in react even for large projects.

Opposite to React Uni-directional nature Angular Bi-directional data flow makes it even complex for large applications to deal with data quickly.

However, Bi-Directional binding is easier to work with.

Uses

Here is the list of companies that uses Angular and React to give you an idea of their Market Value.

Angular

React

Reasons why React is winning?

React is declarative in nature:

This means that when you write a component in react you just need to tell the react what do you want your component to look like.

You need not worry about its different states and the other elements on the web page.

React will handle that for you.

React is easy to learn:

React is pretty much simple JavaScript with some extra functions and therefore.

It’s much simpler to understand React in comparison to Angular where you have to learn a full framework.

Although, it’s come with the cost of learning several external libraries.

React is very minimal:

React is a very minimal language that does not focus on too many things and just focuses on one simple thing building user interfaces.

Remember this statement works in both ways.

It can be used in favour of React as well as against react.

React has been a top choice for developers to work with and even in a
stackoverflow survey done by 90,000 developers in 2020.

React is still one of their top preference with 68.9 percent of developers voting for react.

Conclusion

While JavaScript is already a complex programming language I think its ease of readability and working can be increased by using a framework or library.

React has an easier learning curve whereas Angular has many built-in functionalities to work with.

React is used pretty much everywhere whereas Angular is mostly used by Enterprises.

I think while React is my choice of preference to get started with there is no harm in learning Angular as well.

If you want to know more about these two frameworks you can always head to their official documentation for a more detailed comparison.

Also, tell me below which framework are you using or going to use.

If you find my work interesting and enjoyed reading you can appreciate me on Twitter and LinkedIn.

Cover by - Anna Shagova on Dribbble.

How does the web works

Rohit Singh Rana — Sat, 24 Apr 2021 18:34:25 +0000

Have you ever wondered what happens when you browse your favourite websites?

How those attractive websites get to load up in your browser within a fraction of a second.

There is an epic journey happening every time you clicked that search button on your browser.

In this article, you and I are going to shift from an average internet user to the person who still uses the internet all the time but knows a little bit about what’s going on behind the scenes.

Defining Technical terms

Understanding, the web can be arduous due to a lot of technical terms. Unfortunately, some of them are mandatory and you will have to deal with them.

These terms will not make much sense to you in the beginning, but just read them and you will see the dots connecting later in this journey.

I have tried to explain these terms in the simplest way for better understanding so that you and I can continue on this journey -

URL - Uniform Resource Locator
It’s basically something that we use to tell the browser what we actually looking for.

For our reference, we will use our favourite website https://www.udemy.com/

Protocols
Protocols are the certain set of rules that the client-side (browser) and server-side follow to communicate with each other.

HTTP - Hypertext Transfer Protocol
It’s the first part of a URL indicates which protocol the browser will follow.

This part is known as HTTP

ISP - Internet Service Provider
They connect the client to the servers and are usually a company or operators.

IP Address - Internet Protocol
An IP address is a unique address that identifies a device on the internet or on the local network.

Every computer on the internet has an IP address that it uses to identify and communicate with other computers.

It looks like this 104.16.66.85

Domain Name
A domain name is the address of your website that you type in the URL bar to visit.

The domain name is used by the DNS to look up the corresponding IP address.

DNS - Domain Name System
It’s a decentralized database that converts the domain name (https://www.udemy.com/ )into their corresponding IP address (104.16.66.85).

It’s like the phonebook of the internet having the name (domain name) and phone number (IP address) of everyone

when you click on the name it will directly call the phone number you do not need to memorize the IP address.

Now, as we know all the mandatory technical terms that we are going to use.

Let’s recommence with our Journey.

How the web works

When you type or click a URL into your browser, a request is sent to your Internet Service Provider.
The Internet Service Provider then communicates with DNS (Domain Name System) and checks the IP address for the server that hosts your website.
Internet service providers after receiving the IP address of the destination server sends it to your browser.
Now, the browser sticks this request into a virtual envelope called packets and wraps it with specific information for your request including the IP address of that server.
The IP address of the packet tells that where is the server located.
After reaching the packet to the server.
The server then reads the request and if the web page exists it ready the web page to send by pulling its information from the database.
But there’s a catch too, that web pages made of images and text are too heavy to send in one go.
Likewise, for the internet to work efficiently the heavy page got polarised into many tiny packets.
Packets of data each one wraps with all the information needed to rebuild itself on the client-side.
Now, the journey to the destination begins, and it's not a direct one.
It requires hopping from server to server until the webpage gets arrived on the client-side.
Once arrived the browser then converts all the code into human-readable content.

This embarks the end of an epic journey that happens within a fraction of a second along with many trillions and trillions of similar journeys.

Conclusion

In Synopsis, that’s how all the website works behind the Internet.

I did not dive deep into much technical explanation. Otherwise, it'll become too obnoxious to read.

But if you are a technophile like me and want to know more about working with the web and are ready to get your head around with these things.

You can always refer to these great Mozilla docs for a better understanding of Concepts.

If you find my work interesting and worth reading you can appreciate me on Twitter and LinkedIn.

All kind of Feedbacks are welcomed in comments.