Categories
frontend javascript web development

My Top 3 Server Side Technologies. What are yours ?

Hey guys 👋🏻,
In this article, I will unveil My Top 3 Server Side Technologies that I work with.

Image description

Node.js

Image description

Node.js is a JavaScript Runtime for building scalable network applications. It is blazing fast and it is best to use when we have large number of concurrent connections active at a given point of time and requires immediate response time.

Django

Image description

Django is a backend development framework that provides you a lot of things out of the box (authentication system for example). It allows you to focus on building the application without re-inventing the wheel.

Ruby on Rails (ROR)

Image description
Ruby on Rails is just like Django which uses batteries included approach. It helps developers to build scalable applications because it abstracts and simplifies common repetitive tasks.

What are your Top 3 ? Let me know in the comments section

So this is it for this article. Thanks for reading.

If you enjoy my articles, consider following me on Twitter for more interesting stuff :

Image description

⚡Twitter : https://twitter.com/The_Nerdy_Dev

Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Alt Text

Categories
frontend javascript web development

Best FREE resources for learning ES6

Hey everyone 👋🏻,

In this article, I will share some of the BEST FREE resources for learning ES6 along with the links to those articles.

ES6

Image description

let –
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

const –
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

Variables and Scoping in ES6 –http://2ality.com/2015/02/es6-scoping.html

Template Literals –
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Arrow Function Expressions – https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Arrow Functions VS Normal Functions –
http://exploringjs.com/es6/ch_arrow-functions.html#sec_arrow-func-vs-normal-func

for-of loop – https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for…of

default parameters –

named params –

http://exploringjs.com/es6/ch_parameter-handling.html#sec_named-parameters

rest params –

https://medium.freecodecamp.org/es6-tagged-template-literals-48a70ef3ed4d

Tagged Templates –

https://medium.freecodecamp.org/es6-tagged-template-literals-48a70ef3ed4d

De-structuring Assignment 

Shorthand Properties 

ES6 Modules
-> CommonJS
-> AMD

https://auth0.com/blog/javascript-module-systems-showdown/

Promises
-> then –
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then
-> catch –
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch
-> finally –
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally
-> all –
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

Classes in ES6 –
http://exploringjs.com/es6/ch_classes.html

Object.assign –
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Async Await –
http://exploringjs.com/es2016-es2017/ch_async-functions.html

Symbols –
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol

Maps and WeakMaps –

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap

Sets and WeakSets –

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet

Iterator Protocol –
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterator_protocol

Proxy –
https://codeburst.io/understanding-javascript-proxies-by-examining-on-change-library-f252eddf76c2

Generators –

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator

Iterators and Generators –
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators

function*
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*

yield
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield

yield*

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield*

So this is it for this article. Thanks for reading.

If you enjoy my articles, consider following me on Twitter for more interesting stuff :

Image description

⚡Twitter : https://twitter.com/The_Nerdy_Dev

Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Alt Text
Categories
frontend javascript web development

Frontend Developer Roadmap

Hey guys 👋🏻,
In this article, let us understand the roadmap that will help you in becoming a Frontend Developer in 2021.

Image description

Step 1:

First learn HTML, CSS and JavaScript

Image description

Step 2:

Work on your own projects to build skills and then work on LIVE projects. Go grab some internship to get some working experience on various technologies.

Image description

Step 3:

Pick and learn one frontend framework of your choice. Again go back to Step 2. After Step 2, proceed to Step 4.

Image description

Step 4:

Start applying for Frontend Developer jobs or become a Freelancer once you start to feel confident of your skills.

So this is it for this article. Thanks for reading.

If you enjoy my articles, consider following me on Twitter for more interesting stuff :

Image description

⚡Twitter : https://twitter.com/The_Nerdy_Dev

Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Alt Text
Categories
javascript

Demystifying Closures in JavaScript

Hey guys 👋🏻,
In this article, let us talk about Closures in Javascript.

In this article, we will understand
✔ What are Closures ?
✔ Code Example with explanation.
✔ Conclusion

What are Closures ?

Before understanding what a closure is, let us revisit the concept of functions. From what we know about functions in JavaScript is that every function in JavaScript has a reference to its outer lexical environment.

This means that it registers the outer lexical environment and the variables present in there and it remembers the values of these variables.

=> This also means that the reference that gets setup enables the code inside the inner function to see variables declared outside the inner function, regardless of when and where the function was called.

So let us see an example,
Image description

Explanation

In the above code, we have a calculateSimpleInterest function that takes on a principal value inside which we have function useRateAndTime that takes on rate and time and computes the simple interest for us. At the bottom of the calculateSimpleInterest function, we return the useRateAndTime function.

So for our calculateSimpleInterest function, useRateAndTime forms a closure with the lexical environment of the execution context which gets created when calculateSimpleInterest function is invoked, closing over the variables defined inside the outer function (if any).

Let us see the usage

Image description

With the invocation of calculateSimpleInterest function using a value of 10000 as principal, a new function useRateAndTime gets created and in it the value of principal gets locked and is returned. Now we have the useRateAndTimeFn constant in which we have the returned function having the principal locked in. So we call the inner function now by passing the value of rate and time. Lastly we store the returned value in a variable with the name of result.

Conclusion

✔ Use closures if you want a function to always have access to a private piece of state.
✔ In JavaScript, if you declare a function within another function, then the local variables of the outer function can remain accessible even after returning from the outer function.

So this is it for this article. Thanks for reading.

If you enjoy my articles, consider following me on Twitter for more interesting stuff :

Image description

⚡Twitter : https://twitter.com/The_Nerdy_Dev

Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Alt Text
Categories
javascript nodejs

Advanced Authentication and Authorization

Hey everyone 👋🏻,

In this article, let us learn about one of the most important concepts that you as a developer must have a solid knowledge of and that is Advanced Authentication and Authorization.

Image description

Advanced Authentication and Authorization

Let us consider the case of resetting of the user password.

Password Resetting

You have to implement authentication in a way that prevents users from resetting random user accounts. Reset tokens have to be random, unguessable atleast in a reasonable amount of time and unique. Therefore reset token is a great mechanism to identify the user for which we need to reset the password.

Whenever a user wants to reset his password, he can click on the reset password link and provide the email to which the reset link will be sent from there they can reset the password.
For that we have to create a unique token which also has some
expiration date which we will store in our database so that the link which the user clicks includes that token and we can verify that the user did get that link from us. This is an additional security mechanism for changing of password thereby ensuring that the user password can only be changed only the identity of the user has been verified and it is also ensured that the user who is trying to change the password is in fact the owner of the account and is authorized to do so.

Node.js has a core module which helps us in creating secure
unique random values. That core module is known as the crypto module.

Here is the link for same if you want to learn more about Crypto module :

https://nodejs.org/api/crypto.html

Working with Authorization

Not every authenticated user is allowed to do everything.

Authorization means that we restrict the permissions of the logged-in user. For example, to restrict that no one else is able to add items to our cart, no one can visit a certain protected route if they don’t have the required privileged levels

So to sum it up,
Authorization is an important part of pretty much every application. Locking down access for authenticated users.
Not every authenticated user should be able to do everything. Instead you want to lock down access by restricting the permissions of your users.

So this was all I wanted to cover about Advanced Authentication and Authorization.

Thanks for reading.
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Alt Text

Categories
javascript vuejs

Vue.js – Event Handling using v-on directive

Hey guys 👋🏻,
In this post, let us talk about Event Handling in Vue.js using the v-on directive.

For this post we will understand
✔ Event Handling using v-on
✔ One Code Example

Event Handling

For user interactions we can use a special directive called as v-on to attach event listeners that perform some code or invoke methods on our Vue instances. Let us see an example :

Example

Let us define some logic to reverse text on the click of some button. So the steps are :

  1. Create a text data property
  2. Define a reverseText method to reverse the text.
  3. Render it in the template.

Let us see the code for same :

So to attach an event on the button, we use the v-on directive and listen for the click event for the buttons – one is to reverse the text and other two buttons are for incrementing and decrementing some counter reactive property. Let us define the script where we house all our business logic for the component.

So this was all I wanted to cover about Event Handling.

Thanks for reading.
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Alt Text

Categories
javascript vuejs

Vue.js – Introduction

Hey guys 👋🏻,
In this post, I will be starting with a new series and it is on Vue.js. So in this first post, let us talk cover the Introduction to Vue.js

For this post we will first understand Props
✔ What is Vue.js ?
✔ How to Get Started ?
✔ Declarative Rendering

What is Vue.js?

Vue.js is a progressive JavaScript Frontend Framework for building modern, sleek and performant user interfaces. It is a very popular framework for building frontend applications just like Angular and React.js

How to get started ?

You can use Vue.js for building small widgets for your multi-page applications. For this you just need the CDN. For more complex applications, use the Vue CLI

Declarative Rendering

Vue.js provides a reactivity system that allows us to render content in a declarative manner right within the template using the mustache {{}} syntax.

Let us define the script where we house all our business logic for the component.

So this was all for the introduction. This is how we can create a basic Vue.js 3 application. We made the app reactive by connecting the data and the DOM.

Thanks for reading.
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Alt Text

Categories
javascript reactjs

React.js – Demystifying Virtual DOM

Hey guys 👋🏻,
In this post, let us talk about Virtual DOM in React.js.

For this post we will understand Virtual DOM
✔ What is Virtual DOM ?
✔ Why we need Virtual DOM ?
✔ Why Virtual DOM is faster and more efficient than real DOM ?

Image description

Why Virtual DOM ?

The DOM as we know represents the UI of your application. Every time there is a change in the state of your application UI, the DOM gets updated to represent that change. But the problem is that frequently manipulating the DOM affects performance, making it DEAD slow !

When changes are made to some element, the updated element and it’s children have to be re-rendered to update the application UI. The re-rendering of the UI is what makes it slow.

✔ More the UI components you have, more expensive will be the patches to the DOM as they would need to be re-rendered for every DOM update

👉🏻 Hence the need for Virtual DOM in React.

Now coming to question, what the heck is Virtual DOM 🤔?

The Virtual DOM is only a virtual representation of the DOM. Every time the state of our application changes, the virtual DOM gets updated instead of the real DOM.

Virtual DOM is faster and more efficient ..

Image description

When new elements are added to the UI, a virtual DOM is created which is a tree like representation. Each element is a node on this tree. If the state of any of any of these elements changes, a new virtual DOM tree is created. This tree is then compared or “diffed” with the previous virtual DOM tree.

Once this is done, the virtual DOM calculates the best possible method to make these changes to the real DOM. This ensures that there are minimal operations on the real DOM. Hence, reducing the performance cost of updating the real DOM. This updated tree is then batch updated to the real DOM.

So this is it for this article. Thanks for reading.
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Alt Text

Categories
javascript reactjs

React.js – What is Props ?

Hey guys 👋🏻,
In this post, let us cover what actually are props in React.js

For this post we will first understand Props
✔ What is Props ?
✔ Understanding Props
✔ Accessing Props in Functional and Class based Components
✔ Examples of Props

Image description

Introduction to Props

Props are used to make components configurabledynamic and flexible. Every HTML element as we know has some attributes like input element has valueplaceholder etc. It is dynamic content that you can configure from outside.

Understanding Props

Our components which are customized HTML elements can also be passed some arguments in form of attributes known as props so as to configure just like any other HTML element is configured and it is the parent component that passes these arguments to the child component.

Every child component receives props as an argument that is passed to it by React which is an object that holds the arguments that the parent component passed to the child component and that object is known as propsprops basically means all the properties that a component is receiving from outside.

When using functional components, you can access the props using the below syntax :

props.<propName>

When using class components, you can access the props using the syntax :

this.props.<propName>

EXAMPLES

Passing a prop of brand to the Computer component :

Image description

Defining our Computer component which receives the brand prop.

Image description

So this is it for this article. Thanks for reading.
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Alt Text

Categories
javascript reactjs

React.js – What is State ?

Hey guys 👋🏻,
In this post, let us cover an introduction to State in React.js.

For this post we will understand
✔What is State in React ?
✔ Example for creating State in React.
✔ Accessing the State
✔ Using setState and understanding its pitfall.
✔ Using setState with callback to resolve the pitfall.

Image description

Introduction to State

Every component manages its own state. With the introduction of React Hooks, you can also use state in functional components. But in this article, we will discuss about state in class components.

Example for creating state :

We define a state property inside the constructor function.

Image description

To access the state

To access the counter property defined in the state, we can access it in our JSX template by saying
this.state.counter

Image description

DON’T MUTATE THE STATE DIRECTLY, use setState

Image description

But there can be a problem, consider this …

Image description

setState does not always immediately update the component. It may batch or defer the update until later. Both the setState calls are enqueued when the value of counter is 0 thus causing the problem.

Let’s solve the above problem.

Image description

Use setState with callback because it is guaranteed to fire after the update has been applied. So first counter gets incremented by 1 by first setState call, once it is done, the counter is then incremented to 2. This update is done in a synchronous manner.

So this is it for this article. Thanks for reading.
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Alt Text