Hey guys 👋🏻, In this article, I will unveil My Top 3 Server Side Technologies that I work with.
Node.js
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
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)
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 :
⚡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.
Hey guys 👋🏻, In this article, let us understand the roadmap that will help you in becoming a Frontend Developer in 2021.
Step 1:
First learn HTML, CSS and JavaScript
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.
Step 3:
Pick and learn one frontend framework of your choice. Again go back to Step 2. After Step 2, proceed to Step 4.
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 :
⚡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.
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,
Explanation
In the above code, we have a calculateSimpleInterest function that takes on a principal value inside which we have functionuseRateAndTime 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
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 :
⚡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.
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.
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 :
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.
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 :
Create a text data property
Define a reverseText method to reverse the text.
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.
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.
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 ?
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 ..
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.
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
Introduction to Props
Props are used to make components configurable, dynamic and flexible. Every HTML element as we know has some attributes like input element has value, placeholder 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 props. props 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 :
Defining our Computer component which receives the brand prop.
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.
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.
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.
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
DON’T MUTATE THE STATE DIRECTLY, use setState
But there can be a problem, consider this …
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.
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.
