Categories
backend javascript

Backend Developer Roadmap (2021)

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

Every website that we build these days need a backend to manage the business logic of the application. To manage huge data for an application you need a database along with a API that makes the interaction between the client and the backend possible. Then there are other aspects to it that you need to care about when your application scales.

Image description

So without a further ado, let us first go over the technologies and skills that you need to succeed as a backend developer.

As a pre-requisite, you do need the knowledge of:

  1. Internet and How the Web Works
  2. Operating Systems
  3. Frontend Knowledge is a plus
  4. Some programming experience is also a plus though it can be learned along the way.

Needless to say if you want to succeed as a backend developer, you must have some programming knowledge under your belt. You do need to improve your coding skills if you are just getting started. For starters, getting familiar with the constructs of programming is important. A language like Java would be good to get you started with programming. You can also go for other languages like JavaScript, Ruby, Python etc.

Some of the prominent backend technologies are :

  1. Golang
  2. Node.js
Image description
  1. Ruby on Rails
Image description
  1. Django
Image description

and more…

Next comes the knowledge of version control system, also called as VCS. Now this enables developers to collaborate and work on a project along with that it also also allows us to manage the versions by recording the snapshots of the project history and even allow us to backtrack if a wrong change was committed. This way it limits the risk of errors and provides an efficient workflow to collaborate on projects.

For backend development, you can use the following version control systems.

Image description
  1. Git
  2. GitHub
  3. GitLab
  4. BitBucket

Database

Next you need the knowledge of a database :

Image description

A database as we know is an organized collection of data which can be structured or unstructured. The database caters to the storage aspect of our application. So it is responsible for storing the data of our application. We can also make queries against our database and retrieve the data in the form that we need.
Knowledge of databases is very important and a must have if you want to succeed as a backend developer.

Backend developers either use relational or NoSQL databases. Some of them are as follows:

Relational Databases

  1. PostgreSQL
  2. MySQL
  3. MS SQL
  4. Oracle
  5. MariaDB

NoSQL Databases

  1. MongoDB
  2. RethinkDB
  3. DynamoDB
  4. CouchDB
  5. ArangoDB
  6. Neo4J
    (to name a few)

Along with the knowledge of some of the databases described above, you will also need to be familiar with the basic database principles like :

ORMs, Transactions and Batches, ACID, Data Normalization, Indexing, Cursors etc.

APIs

Image description

APIs (Application Programming Interfaces) are a type of intermediate that allows services to communicate with one another. APIs are used by backend developers to connect different apps or services in order to give a better user experience on the frontend.

You should be aware of the following APIs:

  1. REST (important)

If you want to learn about REST APIs in detail, I do have an article on same :

  1. JSON
Image description
  1. SOAP
  2. GSON
  3. XML-RPC
  4. AES

Caching

Caching is the process of storing copies of files in a cache, or temporary storage location, so that they can be accessed more quickly. So essentially it is a technique for storing a copy of a resource in a cache (temporary storage location) so it can be accessed quickly without any delays (basically for fast access). The main goal of caching is to improve data retrieval performance while reducing the need to contact the slow-to-process underlying storage layer.

Here is a list of caching techniques and tools you should be aware of.

  1. CDN
  2. Server Side
  3. Client-Side
  4. Redis

Testing

Backend Testing is a testing method that checks the server side or database of web applications or a software. Backend testing is also known as Database Testing. The data entered in the front end will be stored in the back-end database. Backend developers utilize the following testing methods:

  1. Integration Testing
  2. Unit Testing
  3. Functional Testing

I may cover more on Testing in a separate article.

Code Analysis Tools

Code analysis is the analysis of source code that is performed without actually executing programs. It involves the detection of vulnerabilities and functional errors in deployed or soon-to-be deployed software.

Some of the tools used for code analysis are:

  1. SonarLint
  2. JUnit
  3. JaCoCo
  4. PMD
  5. SonarQube
  6. Qualys
  7. Jenkins

Architectural Patterns

An architectural pattern is a reusable solution to repeated issues in software development within a given context. The following are some of the most regularly used architectural patterns:

  1. Monolithic
  2. SOA
  3. Microservices
  4. CQRS
  5. Event Sourcing
  6. Serverless

Message Broker

A message broker is a part of software that allows systems, apps, and services to communicate with one another. A message broker is a module that converts the server’s formal messaging protocol into the client’s formal messaging protocol (receiver). Here is a list of some of the message brokers.

  1. RabbitMQ
  2. Kafka
  3. Kinesis
  4. JBOSS messaging

Containerization

Image description

Containerization is the packaging of software code with all required components, such as frameworks, libraries, and other dependencies, in order to create services that are isolated from one another in a container. Backend developers use containerization to make it easier to move or execute containers depending of their infrastructure or environment.

Docker is one of the most commonly used containers that you should learn.

Design Patterns

In software engineering, a design pattern is a general repeatable solution to a commonly occurring problem in software design. Design patterns are used to represent some of the best practices adapted by experienced object-oriented software developers. The following is a list of different design patterns that you should be familiar of.

  1. Singleton
  2. Factory
  3. Observer
  4. Decorator
  5. Adapter
  6. Mediator
  7. Composite
  8. Facade
  9. Iterator
  10. Proxy

WebHook

Webhooks are automated messages sent from apps when something happens. They have a message—or payload—and are sent to a unique URL—essentially the app’s phone number or address. Webhooks are almost always faster than polling, and require less work on your end.

They’re much like SMS notifications

A webhook, often known as a reverse API, is a method for an app to give real-time data to other apps. Webhooks, unlike APIs, do not require a request to be sent after a response. Instead, webhooks provide data as soon as it becomes available, without the need for a request or specific callbacks. The webhook’s fundamental characteristic makes it useful for both users and providers.

WebSocket

WebSockets is a next-generation bidirectional communication technology for web applications which operates over a single socket and is exposed via a JavaScript interface in HTML 5 compliant browsers.

The WebSocket API is a reducing technology that allows a two-way interactive communication session to be established between a user’s browser and a server. You can use this API to send messages to a server and obtain event-driven responses instead of asking the service. A WebSocket is a persistent link between a client and a server. It uses a TCP/IP socket connection to create a full-duplex, bi-directional communication channel over HTTP. Simply put, it’s a thin, lightweight layer over TCP that allows subprotocols to be used to lodge messages.

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 reactjs web development

React.js – How to use Refs in React.js

Using refs in React.js

Hey guys 👋🏻,
In this article, let us cover the topic of How to use Refs in React.js

Let us investigate why React.js, a library that keeps your code away from DOM manipulation, keeps its doors open for you to access. React rethinks a view as a result of a state of a component. It provides JSX, a syntactic sugar over JavaScript, to design the view layer and then modifies the DOM itself rather than giving the control to the developer.

Still, the React team provided escape routes and kept the library open for certain situations that go beyond the scope of what React is designed for.

Creating Refs

Refs are escape routes and it’s better to avoid them whenever possible. When we obtain a DOM element using ref and then later modify its attribute, we might enter into a conflict with React’s diff and update approach.

Let’s start with a simple component and grab a DOM element using ref, assuming that you already know how to set up a basic react app.

In the above piece of code, we are using a react hook useRef to create and initialize a variable called buttonRef. We then assign buttonRef to ref attribute on button JSX element.

Using React refs

As we discussed earlier in this article we are declaring views based on the state, and though we are still altering the state using functions, we are not in direct control of the DOM changes. But in a few use cases, it makes sense to introduce refs in your code.

Focus Control

To better understand the problem statement let’s storify the situation.

Alex is a software development intern at Metflix Inc. and his manager has given him the task of creating contact forms. The manager has asked him to focus on the first input element in the form when a modal is opened. Alex is confused about how he can achieve this in React.js. Let’s help Alex out.

The first thing we need to do is to get a reference to the input.

Next, when our modal loads, we imperatively call focus on our input ref.

Note: You need to access the element through the current property of the ref you declare.

Detect if an element is contained

Similarly, we would want to take an action in the app when an event is dispatched. Like close the modal when the user clicks outside of it.

Here, we are checking if the user click is out of the modalRef limit. If it is we are calling close() function from props to close the modal.

Integrating DOM-based libraries

Like React, there are other utilities and libraries outside its ecosystem that have been in use for years. To use such libraries, refs come in handy.

GreenSock library is a popular choice for animation examples. To use it, we need to send a DOM element to any of its methods.

Let’s go back to our modal and add some animation

Forwarding Refs

Refs are useful for specific actions. The examples shown are a little simpler than what we usually find in a real-life web application. We need to deal with complex components and we barely use plain HTML elements directly. It’s common to use a ref from one component in another component.

The issue now is that passing a ref to this component will return its instance, a React component reference, and not the input element we want to focus on like in our first example.

React provides forwardRef, which allows you to define internally what element the ref will point at.

Now, when a parent component passes a ref value, it’s going to obtain the input, which is helpful to avoid exposing the internals and properties of a component and breaking its encapsulation.

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.

Alt Text

Categories
javascript web development

Understanding Primitives and Reference Types in JavaScript

Hey guys 👋🏻,
In this article, let us cover the topic of Understanding Primitives and Reference Types in JavaScript.

Image description

Primitive value is stored directly in the location that the variable accesses. And the Reference values are objects that are stored in the heap. Reference value stored in the variable location is a pointer to a location in memory where the object is stored. This is something that I will demonstrate just a bit later. So stay with me.

Basic Primitive Types and Reference Types

JavaScript supports 5 primitive data types: number, string, Boolean, undefined, and null.

These types are referred to as primitive types because they are the basic building blocks from which more complex types can be built. Of these five, only number, string, and boolean are real data types in the sense of actually storing data.

Undefined and null are types that arise under special circumstances. The primitive type has a fixed size in memory. For example, a number occupies eight bytes of memory, and a boolean value can be represented with only one bit.

Contrary to this, reference types can be of any length. They don’t have a fixed size.

For primitives, they are always copied as a whole value whereas for reference types they are copied by reference.

For variables that hold values we only compare their values whereas in case of reference types like objects, it is not the case.

Consider this example :

Image description
Image description

The above log gives true because both a and b are referencing to the exact same memory location. So let us say the memory for the arrow was allocated at some memory address of say 4k. So a is a reference that will point to the array object that is sitting at memory address 4k. So if you then assign a to b like we do above, then we have a new reference that points to the exact same object in the memory. So therefore since both the references point to the exact same object in the memory that is why it gives true for the strictly equality comparison between a and b (for the above log).

But if I declare another array with the exact same content say c.

and then do this :

Image description

Then the above log will resolve to false because this new array will get allocated at a different memory location say 5k. So if we compare a and c using a strict equality comparison, then it will resolve to false because both the references a and c point to different memory locations namely 4k and 5k respectively and hence you get false.

Now consider example for primitives. For this case you just compare the values. So if we have :

and then we say :

Then for the above log we make sure that both the type and the value are equal for the things (primitives under comparison). Both are 3 and both are numbers so hence we get true for this.

Next if we say

This will resolve to false because 3 and 4 are not equal.

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
backend frontend javascript web development

What, Why and How to Validate ?

Hey guys 👋🏻,
In this article, let us learn about validation in case of application and learn about What, Why and How to Validate ?.

What, Why and How to Validate ?

To ensure that the data that you work with is the data in correct format, you need validation for it.

Let us answer these questiions :

Why should we use validation ?

Why would you add data validation to your application ?

When we have a user interacting with our website we typically have forms in any web application that we build. The bigger your application is the more data you will need from your users at some point of time. So we have that form which the user of the website interacts with and in the end this form is submitted with the POST request.

Then a request to the backend is sent along with the form data.
On our backend, we typically interact with the database using our server side logic or we may typically write our data into a file using the fs core module of Node.js. But in the end we take that data we receive and want to store it. This is why the need for data validation and sanitization arises.

If a user in our application would try to login with something that is not a valid email address, we should not allow access to the user, so we should prevent the user from entering something incorrect and getting access for that.

This is where we want validation to kick in.

How to validate and provide a good user experience ?

Obviously we got a user entering some data onto the form (Form Input) and let us say a Node.js application running on the server. We got a couple of places where we can validate, for example, we can validate on the client side of our application.

So right before any request hits the server, we can write some JavaScript, that for example checks the input at every keystroke and checks the input whilst the user is working on the form and then you can display an error right in the browser and this can greatly enhance the user experience on the client side for us.

This type of validation is totally optional because the user can see that code, user can change the validation and user can disable the JavaScript in the browser.

👉🏻This is not the protection that can secure you against incorrect data being sent to the server. This is not a secure solution it just is there to improve the user experience thing, so just to render proper error messages.

So,

we will focus on Server Side Validation. This is what we do with Node.js. This code can’t be used by the user, the user cannot disable this validation code that we define on the server side because this happens on the server not in the browser and this is the crucial part where we need to have validation to filter out incorrect values and this is what we will focus on. This ensures that we work with valid data in our node application and if we do plan on storing it ultimately we do store correct data in our database. There is also built in validation which we can use in databases like Mongo. This can be last resort. If we have strong validation on the server side no invalid data will be able to reach the database because you already filtered the incorrect data in the server side validation.

Validation at database level is also optional.

You must have to validate at server side at all means. If the validation fails, you must have to return an error message in user interface with helpful message and do not reload the page with the user input intact with the correct error message rendered in our user interface. This is because reloading offers a horrible experience to the end user and this would clear up all your form data and you would have to enter all the data again !

Example – Discussion on Validation for a Registration Page :

Some common validations for validating the form controls of a registration page are these :

✔ Check for the correctness of the mail. It is according to the format (must not be in bad format). It also must possess @ symbol
✔ Password must be atleast 6 characters long.
✔ Password and ConfirmPassword fields must match.

etc. etc.

Please note
You are not just restricted to above validations, you could have other validations as well for your form controls.

If you want to perform validation for your APIs that you have written using Express, you can make use of packages like

1. Express Validator

Image description

Though you could also make use of another npm package which is Joi for performing validation.
2. Joi

Image description

Now typically we want to validate for NON-GET requests because generally these are the cases in which the user will send some data to the server.

Sanitizing user input

We can ensure as an example that there is no extra whitespace in the string that is passed by the user on the left or on the right
You can normalize the email that is converted to lowercase or things like that. There is a couple of things that you can ensure that the data you get back is valid but is also stored in the uniform way without any extra whitespace or anything like that.
This is what we mean by Sanitization.

Sanitizing input is also that makes sense to be done. For sanitizing the email we can make use of the normalizeEmail method that is available on express-validator

Image description
Similarly, for sanitizing the password we can make use of the trim method that is also provided to us by the express-validator

Sanitizing data is important to ensure that your data is stored in the uniform format.

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

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