Categories
frontend javascript web development

JavaScript methods for finding elements

Hey guys,

Welcome back to a new article !

In this article, we will learn about different JavaScript methods that we can make use of for finding elements in an array. Arrays, as we know, is a data structure that is one of the key building blocks that we make use of for building data-based intensive web applications. With an array, we can easily store and manipulate elements within the array as and how we want to. Let us see the 4 methods that you can make use of for finding an element in an array.


find

The find() method returns the first element in the provided array that satisfies the provided testing function. So we specify a testing function as the callback and the find method will return the first item that returns true for the condition that we test within the specified callback. If no elements satisfy the testing function, then undefined gets returned. Let us see an example for the find method.

const numbers = [5, 12, 8, 130, 44];

const firstNumberGreaterThan10 = numbers.find(element => element > 10);

console.log(firstNumberGreaterThan10 );
// expected output: 12

findIndex

The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. So as a testing function, we pass a callback to the findIndex method and there we explicitly mention a condition and based on the truthiness of that condition, we get an element that satisfies that specified condition. In case, no element passes the testing condition then it returns -1.

const numbers = [1, 3, 4, 6, 10];

const greaterIndex = numbers.findIndex(element => element > 6); 
console.log(greaterIndex); // 4

const smallerIndex = numbers.findIndex(element => element > 10); 
console.log(smallerIndex); // -1 

Consider the above example in which we have a list of numbers that is given to us, let us say we want to find the index of the first occurrence of an element which is greater than 6. So for this case, we can make use of the findIndex method with the testing condition as element > 6. Next, let us say we want to find the index of the first occurrence of an element which is greater than 10. So we again make use of the findIndex method with the testing condition as element > 10. Now since there is no element that satisfies the above condition, hence we get a -1 for this.


indexOf

The indexOf() method returns the index of the first occurrence of the substring or element that we specify as the argument.

Let us see an example for the indexOf method, let us say we are given an array of elements and we want to find the index of some elements within that array. So see the below code :

const numbers = [1, 3, 4, 6, 10];

const indexOf10 = numbers.indexOf(10); // 4

const indexOf16 = numbers.indexOf(16); // -1

So if we try to search the index of the number 10 in the given array of numbers, then we get 4 because 10 is sitting at index 4 of the given array. Next, for the number 16 we get -1 because the number 16 is not present anywhere within the given array.


lastIndexOf

The lastIndexOf() method returns the index of the last occurrence of the specified substring or element that we specify as argument. The lastIndexOf method is similar to the indexOf method that we just discussed but the only difference being that it starts to look up from the trailing end of the array instead of the start of the array like we do in indexOf. So in essence, if you know for sure that the element that you are looking for lies in the latter half of the array, then using the lastIndexOf method makes more sense.

const numbers = [1, 3, 4, 6, 10];

const indexOf10FromLast = numbers.lastIndexOf(10); 

console.log(indexOf10FromLast); // 4

const indexOf16FromLast = numbers.lastIndexOf(16); 

console.log(indexOf16FromLast); // -1

So in above example, if we try to find the index of the last occurrence of a particular element, say 10, then we get 4. Since, 10 is present at index 4 and we only have one occurrence of 10 in the numbers array. Next, 16 is not present anywhere in the array so for that if we try to find the last occurrence of it using the lastIndexOf method, we get -1.


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

Categories
web design web development

Top 10 Tools for Web Design

Are you looking for magic tools to ease out your design process ?
Well, your search ends here. In this article, I am going to present you 10 tools that are a MUST to ease out your design process and make your overall workflow super efficient.

With me ? Amazing. Here we go.

The first tool is:

1. Pexels

Pexels.com is my top most preferred website to grab royalty free images for my projects. The best part of these images is that they are professional high grade images that you can use in your web designs.

Link: https://pexels.com

2. CSS Clip Path Maker (Clippy)

Clippy is another amazing tool that you can use for image clipping. It gives you different templates that you can apply on your images to make them look different and eases the clipping process. So you drag a couple of points here and there and it gives you the CSS property for same that you can directly paste into your project and you are DONE. Isn’t it dead simple ? Pretty awesome, right?

Link : https://bennettfeely.com/clippy/

3. CSS Gradient

CSS Gradient is another quality tool that helps you in creating amazing and sleek gradients to enhance the overlook look, feel and aesthetics of your website. This is another must have tool for web design.

Link: https://cssgradient.io/

4. Animista

Who can forget Animista ? It is literary one of the best CSS tools that I have used so far for creating amazing, smooth and clean animations. IMO it is the best tool that you can use to animate your CSS elements. It lets you go crazy and creative at the very same time. It also provides tons of COOL animations out of the box which can be useful for most of the cases. You can even tweak them a bit to generate animations with the desired effect that you are looking for.

Link: https://animista.net/

4. ColorHunt

Color Hunt is a free and open platform for color inspiration with thousands of trendy hand-picked color palettes. So use these palettes for colors that look great to the eye.

Link: https://colorhunt.co/

5. Filter CSS Generator

A filter CSS generator that helps you quickly generate filter CSS declarations for your website. It comes with many options and it demonstrates instantly.

Link: https://cssgenerator.org/

5. Keyframes.app

Keyframes helps you write better CSS. It provides dead simple visual tools to help you generate CSS for your projects.It is a pretty new tool but I feel it has tremendous potential. Currently it allows you to play with animations, colors and shadows. So feel free to try this tool as well.

Link: https://keyframes.app/

6. Bounce.js

Bounce.js is a handy JavaScript library that enables you to create complicated animations. Bounce.js has a mature user interface that allows you to either add different components – such as easing, duration, delay, and number of bounces – manually to your animation, or select a ready-to-use preset, then play the animation, and fine-tune the properties if it’s necessary.

Link: https://bouncejs.com

7. Single Element CSS Spinners

Looking for enhancing your CSS designs with simple yet awesome looking animated loading spinners ? If the answer is yes, this CSS spinner library may be the perfect choice for you.

Link: https://projects.lukehaas.me/css-loaders/

8. Normalize.css

A HTML5-ready alternative to CSS resets. It preserves some useful browser default settings, normalizes styles for a wide range of HTML elements, corrects some common browser inconsistencies, and is well commented for easier use.

Link: https://necolas.github.io/normalize.css/

9. Voxel.css

Voxel.css is a CSS library for 3D rendering. Voxel is flexible enough to be used for everything from 3D web animations to full-on video games. It exposes 4 different classes – Scene, World, Editor and Voxel. So it offers a customization that is as close as a full 3D animation website.

Link: http://www.voxelcss.com/

10. Blush

Easily create stunning and beautiful illustrations with collections made by artists across the globe

Link: https://blush.design/

Those are my 10 favorite resources which I use in countless projects, go ahead and try those and let me know what you think of them!

👉🏻 Follow me on Twitter : https://twitter.com/The_Nerdy_Dev

👉🏻 Check out my YouTube Channel : https://youtube.com/thenerdydev

Categories
Uncategorized web development

Top Web Development Tools in 2022

The demand for web developers is increasing exponentially as new, optimal and efficient ways are popping up for creating websites. To accelerate the pace at which websites are created and at the same time ensuring that the websites that we create are progressive, more and more tools are coming up. With improved technologies and modern workflow, we can now create modern websites at much faster pace than what we used to when these tools were not there or were in in developing phase.

Let’s discuss some tools that we can use in 2022 to improve our development skills.

Text Editors

As a developer, the first thing we need to get started with development is an editor of choice. You can use a text editor like Sublime Text or an IDE like Webstorm for building your web applications. The editor that I recommend using for building web applications is Visual Studio Code. With Visual Studio Code, you have an option to plug extensions into it to make it behave like an IDE so that it can provide us with great development experience. The only tools that we need for writing our code is a text editor and a web browser to execute our code and see the output for it.

1. Sublime Text Editor

Sublime Text is a commonly-used text editor used to write code in more than 20 programming languages. Sublime Text’s slick user interface along with its numerous extensions for syntax highlighting, source file finding and analyzing code metrics make the editor more accessible to new programmers than some other applications like Vim and Emacs.

2. Visual Studio Code

Visual Studio Code is a streamlined code editor with support for development operations like debugging, task running, and version control. It aims to provide just the tools a developer needs for a quick code-build-debug cycle and leaves more complex workflows to fuller featured IDEs, such as Visual Studio IDE.

Web Framework

A web framework is a software library that enables developers to write software that runs on the web. Common areas where developers use web frameworks are:

  • Backend: The software that runs on servers and serves web sites, web apps, and also APIs for the exchange of data.
  • Frontend: The software that runs on clients, in web browsers and provides content and interactivity to the user.

Web frameworks may be written in different languages and using different methodologies. The term ‘stack’ is applied to refer to the collection of different languages, software, and frameworks in use behind a specific service

As the web-development is divided into two main ends, known as front-end and back-end, so developers have created various frameworks for both ends.

Front-End Web-Frameworks

1. Angular

Angular is a modern frontend framework for building amazing and sleek user interfaces.

Angular is a development platform, built on TypeScript. As a platform, Angular includes:

  • A component-based framework for building scalable web applications
  • A collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more
  • A suite of developer tools to help you develop, build, test, and update your code

With Angular, you’re taking advantage of a platform that can scale from single-developer projects to enterprise-level applications. Angular is designed to make updating as straightforward as possible, so take advantage of the latest developments with a minimum of effort. Best of all, the Angular ecosystem consists of a diverse group of over 1.7 million developers, library authors, and content creators.

2. React.js

React.js is a JavaScript library for building user interfaces.

React.js is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It’s used for handling the view layer for web and mobile apps. React allows developers to create large web applications that can change data, without reloading the page.

3. Vue.js

Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. It is yet another frontend framework that you can use for building amazing and sleek user interfaces. Vue follows the MVVM architecture and it is also a great alternative for building frontends. It also has an easier learning curve compared to other frameworks like Angular and React.

Backend frameworks

1. Django

Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of web development, so you can focus on writing your app without needing to reinvent the wheel. It’s free and open source

2. Ruby on Rails

Rails is a full-stack framework. It ships with all the tools needed to build amazing web apps on both the front and back end. Rendering HTML templates, updating databases, sending and receiving emails, maintaining live pages via WebSockets, enqueuing jobs for asynchronous work, storing uploads in the cloud, providing solid security protections for common attacks. Rails does it all and so much more.

4. Express.js

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. With a myriad of HTTP utility methods and middleware at your disposal, creating a robust API is quick and easy. Express provides a thin layer of fundamental web application features, without obscuring Node.js features that you know and love.

Package Managers:

package manager or package-management system is a collection of software tools that automates the process of installing, upgrading, configuring, and removing computer programs for a computer in a consistent manner.

A package manager deals with packages, distributions of software and data in archive files. Packages contain metadata, such as software’s name, description of its purpose, version number, vendor, checksum (preferably a cryptographic hash function), and a list of dependencies necessary for the software to run properly. Upon installation, metadata is stored in a local package database. Package managers typically maintain a database of software dependencies and version information to prevent software mismatches and missing pre-requisites. They work closely with software repositories, binary repository managers and app stores.

Package managers are designed to eliminate the need for manual installs and updates. This can be particularly useful for large enterprises whose operating systems typically consist of hundreds or even tends of thousands of distinct software packages.

1. NPM

Relied upon by more than 11 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of JavaScript code sharing, and with more than one million packages, the largest software registry in the world. Our other tools and services take the Registry, and the work you do around it, to the next level.

2. pip

pip is a package-management system written in Python used to install and manage software packages. It connects to an online repository of public packages, called the Python Package Index. pip can also be configured to connect to other package repositories, provided that they comply to Python Enhancement Proposal 503.

3. Yarn

Yarn is a new package manager that replaces the existing workflow for the npm client or other package managers while remaining compatible with the npm registry. It has the same feature set as existing workflows while operating faster, more securely, and more reliably.

Git Clients

Git is a DevOps tool used for source code management. It is a free and open-source version control system used to handle small to very large projects efficiently. Git is used to tracking changes in the source code, enabling multiple developers to work together on non-linear development.

1. GitHub Desktop

It is a software by GitHub which helps you to create and manage GitHub repository on your desktop. GitHub Desktop is currently available for macOS and Windows Operating Systems. If you do not like to work with git commands or terminal you can simply download GitHub desktop and use its interactive interface to commit and manage your GitHub repository.

2. GitKraken

Millions of developers and teams around the world choose GitKraken Client to make Git work for them. It makes Git more visual and accessible with an intuitive UI, the flexibility to switch between a GUI or a terminal, and a seamless experience across operating systems. Integrations with GitHub, GitLab, Bitbucket, and Azure DevOps make it swift and simple to clone, fork, and add remotes. You can even create, view and manage pull requests.

API Testing tools

API stands for Application Programming Interface, and API testing tools are the software which is used to test the quality of the API and the tool check whether the API stands on all the expectation or there are some shortcomings in that API.

1. Postman

Postman is an API platform for building and using APIs. Postman simplifies each step of the API lifecycle and streamlines collaboration so you can create better APIs—faster.

Thanks for reading the article !

Categories
backend database frontend javascript mongodb web development

New FULL Web Developer Course on YouTube

I decided to create a full Web Developer Course that will cover all the technologies that you need to kickstart your Full Stack Developer Journey. No bullshit, everything practical and relevant will be covered.

We will delve into following topics –

  1. HTML
  2. CSS
  3. JavaScript
  4. Node.js
  5. MongoDB

Check out the first video of this series where we cover the introduction to World Wide Web and the Evolution of the World Wide Web. The code for the video (if any) can be found on GitHub.

⭐ Check out the 10 JavaScript Projects in 2 Hours Video of my JavaScript Series where we build 12+ Projects using JavaScript :

Follow me on:
👉 Twitter: https://twitter.com/The_Nerdy_Dev
👉 Instagram: https://instagram.com/thenerdydev

Categories
css frontend html web development

Web Dev Made Easy

Hey everyone 👋🏻,

In this article, I will tell you about a website using which you can use as a resource for learning Web Development.

So the website name is this :

web.dev

https://web.dev

Image description

Now some of the featured courses on their website are :

Image description

1. Learn Responsive Design

Image description

This course takes you on a journey through the many facets of modern responsive web design. The first few modules will ease you in with a history of where responsive design came from and a look at the fundamentals of responsive layouts. From there, you’ll learn about responsive images, typography, accessibility and more.

Along the way you’ll find out how to make websites responsive to user preferences and device capabilities. By the end, you’ll also have an understanding of what the future might hold for responsive design.

Each module has demos and self-assessments for you to test your knowledge.

This course is created for beginner and intermediate designers and developers. A basic understanding of HTML and CSS should be enough. You don’t need to know any JavaScript. If you’re completely new to making websites, there’s an introduction to HTML and another course to help you learn CSS.

2. Learn Forms

Image description

This course breaks down HTML forms into easy to understand pieces. Over the next few modules, you’ll learn how an HTML form works and how to use them effectively in your projects. Use the menu pane by the Learn Forms logo to navigate the modules.

You’ll learn how to build a basic HTML form, about HTML form elements, styling forms, help users re-entering data, ensuring the form is accessible, and secure, how to test your forms, and about specific form types.

Each module is full of interactive demos and self-assessments for you to test your knowledge.

This course is suitable for beginners and advanced HTML developers. The first few modules help you get started with building HTML forms, the other modules give more detail. You can go through the series from start to finish to get a general understanding of HTML forms, or pick a specific module you want to learn more about.

3. Learn Progressive Web Apps

Image description

This course covers the fundamentals of Progressive Web App development into easy-to-understand pieces. Over the following modules, you’ll learn what a Progressive Web App is, how to create one or upgrade your existing web content, and how to add all the pieces for an offline, installable app. Use the menu pane by the “Learn PWA” logo to navigate the modules.

You’ll learn PWA fundamentals like the Web App Manifest, Service Workers, how to design with an app in mind, what’s different from a classic web app, how to use other tools to test and debug your PWA. After these fundamentals, you’ll learn about integration with the platform and operating system, how to enhance your PWA’s installation and usage experience, and how to offer an offline experience.

Each module includes interactive demos and self-assessments for you to test your knowledge. You will be able to test and try demos on your mobile phone, tablet, or laptop while playing with the code to understand the fundamentals of what makes a Progressive Web App.

This course is created for a beginner and advanced web developers alike. You can go through the series from start to finish to get a general understanding of PWA from top to bottom, or you can use it as a reference for specific subjects. For those new to web development you will need a grounding in HTML, CSS, and JavaScript to follow along. Check out Learn CSS, and the HTML and JavaScript courses on MDN.

4. Learn CSS

Image description

This course breaks down the fundamentals of CSS into digestible, easy to understand pieces. Over the next few modules, you’ll learn how the core aspects of CSS work and how to use them effectively in your projects. Use the menu pane by the “Learn CSS” logo to navigate the modules.

You’ll learn CSS fundamentals like the box model, cascade and specificity, flexbox, grid and z-index. And, along with these fundamentals, you’ll learn about functions, color types, gradients, logical properties and inheritance to make you a well-rounded front-end developer, ready to take on any user interface.

Each module is full of interactive demos and self-assessments for you to test your knowledge. In addition to learning through reading and demos, there is an accompanying podcast episode for each topic as another way to learn and continue expanding your knowledge.

This course is created for beginner and advanced CSS developers alike. You can go through the series from start to finish to get a general understanding of CSS from top to bottom, or you can use it as a reference for specific styling subjects. For those new to web development overall, check out the intro to HTML course from MDN to learn all about how to write markup and link your stylesheets.

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