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