Validations in Full Stack Development

Full Stack Development, a quite tough to explain in a couple of lines. It takes ownership of the entire application from top to bottom. If you see a person as Full Stack Developer, he must be an all-rounder to develop an application from zero to high excellence. Full Stack Development includes 2 layers of architecture :

  1. Front-End Development (aka Client-Side / Presentation Layer)
  2. Back-End Development (aka Server-Side / Business Logic Layer)

Each Layer should have a data validations. Let’s dive in deeper,

Client-Side Validations

Validation takes place on the client side(web browser). It would be more frustrating to wait for the server response and re-enter the form that has nearly 100 inputs. So it is mainly for formatting data instantly and for the quick error recovery process.
Client-side validation gives the user feedback ASAP without having to wait for the server. It is an added topping, but not necessary. This will avoid the majority of validation issues and unnecessary processing from the server to perform data validations.

Pros:

  • Faster than Server-Side Validation
  • Better user experience can be provided by responding quickly(like invalid phone number, required fields,etc..)
  • Saves network bandwidth, traffic API calls

Cons:

  • Not Secure and useless if client-side scripts are disabled(javascript disabled)

Server-Side Validations

It is all about the data validation takes place on the server-side using the server-side scripting language. If you use server-side validation, you are developing a more secure application. Because client-side validations can be bypassed easily.

Let’s take a scenario. If a user is a technical guy/ a malicious user, he can pass invalid inputs through API testing tool or he can disable the javascript in client script or some malicious attack to skip client side validations. In these cases, validation will not happen. This may lead to incorrect entries, server downtime if any serious errors, etc, So we should verify on the server as well.

There are few libraries(eg., express-validator, etc) available to validate the inputs. Better, write a few code snippets for validations before continuing your business logic like

router.post(‘/api’, async(req, res) => {

 let isValidationPassed= await validateAndHandleInputs(req);

 if(isValidationPassed){

  //continue the business logics

 }

})

Pros:

  • More Secure than Client-Side Validation
  • Validation Techniques and Logics cannot be viewed/modified by the user.

Cons

  • Comparatively slower execution

References:

  1. https://www.smashingmagazine.com/2009/07/web-form-validation-best-practices-and-tutorials/
  2. https://medium.com/@davidpetri/server-and-client-side-validation-with-javascript-html-and-hapi-js-eccc779e448a
  3. http://net-informations.com/faq/asp/validation.htm
  4. https://surajdeshpande.wordpress.com/2013/08/10/difference-between-server-side-validation-and-client-side-validation/

Dropbox exordium

Hi Readers,

The idea about this blog is to cover the basic steps which we have to do, to integrate Dropbox with our application. The readers should have a minimal understanding of access_token, webhooks.

Recently I have started to do integration for my web application. The one which I integrated first was Dropbox

The Requirements are:

Fetch the dropbox files.

Get the corresponding redirect link.

Get the shared users for a file.

To integrate Dropbox into our Application:

  1. Create a Dropbox box app in the Dropbox developers site.
  2. After creation, use the ClientId and Client Secret of the app for authentication.

How to authenticate a user ??

The auth process can be done in two ways:

1. By creating a separate login.

2. By Click on a particular redirect link.

Note: The API URL should be encoded with client ID obtained.

Example:

https://www.dropbox.com/oauth2/authorize?response_type=code&client_id=” ”redirect_uri=””’

Redirect URI  →  The endpoint to receive the auth credentials.

After successful authentication, the auth credentials can be obtained in the redirect_uri.

Ohh, Wait! We are not close to getting the files.

Use the auth code, to get the Access_token for a user. Hit the following API endpoint with the auth code. https://api.dropboxapi.com/oauth2/token

Sample code:

let options = {

               url:https://api.dropboxapi.com/oauth2/token,

               qs: {
                  
                   'code': authCode,(code obtained by authentication)

                   'grant_type': 'authorization_code',

                   'client_id': '',

                   'client_secret': '',

                   'redirect_uri': ''

               },

               method: 'POST',

               json: true

           }

           return request_promise(options);

I have used request_promise to get the results. The redirect_uri should be same as the redirect URI provided during authentication.

Things to remember:

1. Redirect URI should be the same.

2. The Dropbox Client Id and Client Secret should be entered.

Hooray! We completed the process
Heaven, the dropbox access token will never expire.

The access token can be removed by only revoking.

How to drag the files from Dropbox to our App ??

The files  can be obtained by hitting the  following API endpoint :

https://api.dropboxapi.com/2/files/list_folder

The API returns the folders and files in a one-way tree. Nested files and folders can be obtained by setting the recursive field to true in the API hit.

Webhooks hit:

The Webhook hit can be configured in the Dropbox app which we created. Specify the corresponding webhooks URL. For authentication, the App will verify the URL by hitting with a challenge parameter. The app should be responded back with the challenge parameter.

Once the authentication is done, the webhooks hits the URL whenever the user of our app drops some files in their Dropbox.

References:

The dropbox also provides an API Explorer where the developers can view the live functioning of the API Endpoints

https://dropbox.github.io/dropbox-api-v2-explorer/

To know more about Dropbox  integration visit this link: https://www.dropbox.com/developers

 

 

Materialise your Angular App

As much as I love Angular, I also recognize that there are a few things that could make your Angular App look even more stunning without much effort! So, let’s go ahead and change your life in about 5 minutes by getting productive with Material Design using Angular Material in your Angular CLI app.

So, What Exactly is Angular Material?

Angular Material Design is a design language for web and mobile apps which was developed by Google in 2014. Material Design makes it easy for developers to customize their UI while still keeping a good-looking app interface that users are comfortable with and also you’ll get a well-organized format along with the flexibility to express your brand and style. For an example of Material Design, check out Airbnb, Gmail, and Houzz. These apps make the best use of Material Design to fit its many features into the limited mobile device. Going through the official Material design documentation is quite an experience. I recommend taking a look at the docs, but I will summarize it here.

Setup the Environment for Angular

To work with Angular, you will need Node.js and Angular CLI (Command Line Interface) installed in your development environment. Proceeding further, you can use the following command to set up a new Angular project.

ng new angular-material-app

Step 1: Install Angular Material and Cdk

Head over to your terminal, navigate inside your created Angular front-end application and then run the following commands to install Angular Material 6 and Angular 6 CDK.

npm install --save @angular/material @angular/cdk

Step 2: Install Angular Animations

In order to add enable support for animations in your Angular 6 front-end application, head back to your terminal and run the following command to install the Angular animations module and import the BrowserAnimationsModule and add it to the list of imports.

npm install --save @angular/animations

Step 3: Angular Material Theme

Angular Material comes prepackaged with several pre-built theme CSS files. To configure the basic theme, open the src/styles.css file and import any one of the available themes in Material Themes.

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

Step 4: Angular Material Gesture

Some components like Slide Toggle, Slider, and Tooltip rely on a library called HammerJS to capture touch gestures. So, you will need to install HammerJS and import it into our application.

npm install --save hammerjs

Step 5: Angular Material Icons (Optional)

If you want to use the mat-icon component with the official Material Design Icons, load the icon font in your index.html. For more information on using Material Icons, check out the Material icons guide.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

And yeah, Now you are good to go!

Note:  You can create an app-material module file for importing the angular material components and export them wherever necessary! Let’s write clean code and be a Better programmer!

What Will You Build with Angular Material?

After setting up the project structure and some dependencies, you will be able to start developing apps. You could try out some examples with the built-in components that are provided in Material docs. In this blog, to know about Angular material implementation, we will be implementing it with some small examples that play a major role in any webpage! The idea of this blog is to show how cool and easy it is to use Angular Material.

Example 1: Layout

The most widely used layout is cards. The most basic card needs only an <mat-card> element with some content. However, Angular Material provides a number of preset sections that you can use inside of an <mat-card>. For now, just copy the following code into your HTML file and you could witness a card display!

<mat-card> Simple Card</mat-card>

Example 2: Navigation

Next comes the navigation part of a webpage. <mat-menu> is a floating panel containing the list of options. By itself, the <mat-menu> element does not render anything. The menu is attached to and opened via application of the matMenuTriggerFor directive as follows.

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
 <mat-menu #menu="matMenu">
   <button mat-menu-item>Item 1</button>
   <button mat-menu-item>Item 2</button>
 </mat-menu>

Example 3: Progress Bar

    “Boredom, according to psychologists, is merely lack of stimulation,the unfulfilled desire for satisfying activity. So what if we use the interface to give them that stimulation?”

~ Alice Kotlyarenko

Yeah! The UI progress bar will make you enjoy the wait! Angular Material made it easy to display a progress bar with customizable modes.

<mat-progress-bar mode="indeterminate"></mat-progress-bar>

Conclusion

I hope this blog has helped you understand how to use the power of Material Design in your app for a top-notch UI. For more information about Material Design in Angular 6, check out the official docs which contain ready-to-use templates. It’s a great place to learn about Angular. Thus Angular Material components create a beautiful application without investing too much time thinking about styles. Awesome, right?

Reference:

SwitchMap in rxjs

Let’s dive deep into switchMap with an example, so it helps as to understand what is it and when to use it.

Say we need to implement functionality for traffic signal which consists of 4 roads(A, B, C, D) meeting at a junction. The signals of these roads can be controlled either manually or automatically. The signal change is asynchronous(Observable- data stream).

const roadSignals = Observable.from(['Road SignalA', 'Road SignalB', 'Road SignalC', 'Road SignalD' ]);

roadSignals.subscribe((signal)=>console.log(signal));

Output: 

Road SignalA 

Road SignalB

Road SignalC

Road SignalD

Here comes the next part. We have to allow vehicles to pass through the junction when the signal is ON. Let’s try doing this with the help of the map. (Map -transform the items emitted by an Observable by applying a function to each item. Click here to learn about map )

roadSignals.pipe(

    .map((signal) => changeSignal(signal)),

    .map((allow) => allow.allowVehiclesObservable())

    ).subscribe((vehiclesObservable) => {

        vehiclesObservable.subscribe((vehicle) => console.log(vehicle))

    });

Here the vehicles in roads refer to an observable. So the output will be an Observable inside an Observable. We have to subscribe them in order to get vehicles individually.

In our case, allowVehiclesObservable is the outer Observable and vehiclesObservable is the inner Observable. We need to subscribe the vehiclesObservable(inner Observable) in order to get the vehicles individually. This method is called as FLATTENING.(subscribe inside a subscribe).

Come on let’s do flattening to get vehicles individually.

roadSignals.pipe(

    .map((signal) => changeSignal(signal)),

    .map((allow) => allow.allowVehiclesObservable())

    ).subscribe((vehiclesObservable) => {

        vehiclesObservable.subscribe((vehicle) => console.log(vehicle))

    });

Let a1, a2,.. b1, b2,.. be the vehicles in Road A, B, ..respectively.

Output :

a1

a2

a3

b1

b2

a4

Yes! Now we get vehicles individually. Flattening works:)

Wait a sec. What’s happening. Vehicles from Road A  as well as Road B is also moving. There are chances for accidents. After a few seconds, Signal C and Signal D will go ON. What if the vehicles from all the roads are moving.

 

Oh no. We should stop this. How to do this?

Whenever flattening is used we should use a Flattening Strategy.

  1. We need to store a subscription to the current vehiclesObservable subscription.
let subscription; (declare at top);

subscription = vehiclesObservable.subscribe(vehicle => console.log(vehicle));
  1. If new vehiclesObservable comes in we need to unsubscribe from the previous subscription before we subscribe to the new observable.
if(subscription) subscription.unsubscribe();

subscription = vehiclesObservable.subscribe(vehicle => console.log(vehicle));

Let’s apply the above steps:

let subscription;

roadSignals.pipe(

    map((signal) => changeSignal(signal)),

    map((allow) => allow.allowVehiclesObservable())

).subscribe((vehiclesObservable) => {

    if(subscription){

        subscription.unsubscribe();

    }

    subscription = vehiclesObservable.subscribe((vehicle) => console.log(vehicle))

    });

Output :

a1

a2

b1

b2

b3

c1

c2

SignalA comes first. Initially, the subscription is undefined.  RoadA-vehiclesObservable is stored in the subscription(local variable) and is subscribed. Vehicles from roadA start moving. When SignalB comes in, the subscription is defined (RoadA-vehiclesObservable). The if condition becomes true. Unsubscribe the existing subscription(RoadA-vehiclesObservable) and store the new subscription(RoadB-vehiclesObservable) to get vehicles from road B.No more vehicles from Road A..! When SignalC comes in, the existing subscription (RoadB-vehiclesObservable) is unsubscribed and new RoadC-vehicleObservable is subscribed.

As soon as the outer observable changes we kill the most recent observable and switch to new observable to replace it. Thus unsubscribing from the previous observable before subscribing to the new one is called as SWITCH Strategy.

Yes, we have achieved our desired result. But now,  the problem is the code became complex with observables, two subscribes, subscription, unsubscribe and all of these.

What to do?

Here comes switchMap for our rescue. We can replace the map and inner subscription with switchMap.

roadSignals.pipe(

    map((signal) => changeSignal(signal)),

    switchMap((allow) => allow.allowVehiclesObservable())

).subscribe((vehicle) => {

console.log(vehicle)

    });

Output :

Signal A

   vehicle a1

   vehicle a2

Signal B

   vehicle b1

   vehicle b2

Signal C

   vehicle c1

   vehicle c2

The main difference between switchMap and other flattening operators is the cancellation effect. On each emission, the previous inner observable (the result of the function you supplied) is canceled and the new observable is subscribed. You can remember this by the phrase switch to a new observable.

When to use and avoid switchMap?

switchMap can be used, when a new search is made, pending results are no longer needed; And should be avoided in scenarios where every request needs to complete, think writes to a database. switchMap could cancel a request if the source emits quickly enough.

References:

The Art of Chunking!!

How to make sense of any mess? 

Chunking makes content easier to comprehend and remember. It helps to understand the relationship between content elements and information hierarchy. By grouping each piece into a large whole, you can improve the amount of information you can remember. Chunking is one way to your product to stand out from the other competitors.

For example, a chunked phone number (+61–955–345–1234) is easier to remember (and scan) than a long string of un-chunked digits (9553451234).

Why chunking is important in UX?

Chunking Content in UX: Why chunking is important in UX?

Chunking is a concept that originates from the field of cognitive psychology. UX professionals can break their text and multimedia content into smaller chunks to help users process, understand, and easily remember within a quick span.

Presenting content in chunks makes scanning easier for the user and can improve their ability to comprehend and remember it. In practice, chunking is about creating meaningful, visually distinct content units that make sense in the context of the larger whole.

 

Key info is chunked to give clarity about the company.

Simply chunking your text isn’t enough — you also need to support scanning by making it easy to quickly identify the main points of the chunks. Some of the most commonly used methods of chunking text content are:

  1. Headings and subheadings that clearly contrast with the rest of the text (bolder, larger, etc.)
  2. Highlighted keywords (bold, italic, etc.)
  3. Bulleted or numbered lists
  4. A short summary paragraph for longer sections of text, such as articles
  5. Short paragraphs, with white space to separate them
  6. Short text lines of text (around 50–75 characters)
  7. Clear visual hierarchies with related items grouped together
  8. Distinct groupings in strings of letters or numbers such as passwords, license keys, credit card or account numbers, phone numbers, and dates (for example, 14487324534 vs 1 (448) 732 4534)

 

The contents are chunked with an illustration to give clear visual hierarchy!

The Mythical Number Seven:

Magical number seven,’ made famous by cognitive psychologist George Miller. In 1956, Miller found that most people can remember about 7 chunks of information in their short-term memory. People could remember 7 individual letters, or 28 letters if they were grouped into 7 four-letter words in a meaningful way. Designers often misunderstand the concept of Mythical Number Seven.

It doesn’t mean to give the things not more than seven to the user. Even they can still find easy to use with more than seven things at the given time.

 

Chunked infographics draw attention to the passed value here.

For UX professional, the real takeaway from Miller’s is that people with short-term memory are limited. So, if you want the people to remember more information just group them into Chunks.

Source: https://www.nngroup.com/articles/chunking/

Conclusion:

Presenting content in chunks makes scanning easier for the users and can improve their ability to comprehend and remember it.

Understanding CSS: Precedence & Specificity

Have you faced a situation where you are trying to apply the CSS style to an element, but it does not apply? It seems the webpage is ignoring your code. This could be caused by conflicts in the cascade order.

Things will discuss here:

  1. Origins of Stylesheets
  2. Specificity
  3. Importance
  4. Cascade Order

Origins of stylesheets:

  1. Author stylesheet (Styles set by the web developers)
  2. User stylesheet (Custom styles set by a user – Browsers give you the option of extending the browser’s default style sheet)
  3. Browser stylesheet / User-agent style sheet (Browser defaults – if the author of a web page didn’t apply any styling, the styling details present in the default stylesheet installed within the browser is applied)

Specificity:

        An HTML element can be targeted by multiple CSS rules. If there are two or more conflicting CSS rules, the browser will apply the rule which is more specifically mentioned. Specificity will only apply when one element has multiple declarations to it. To understand in a better way, the specificity is expressed in the form (a, b, c, d). Lets see in detail,

Specificity Hierarchy (High to Low):

  • Inline style

o   ‘style’ attribute rather than a rule with a selector

o   The position ‘a’ – (a, b, c, d) – (1, 0, 0, 0)

  • ID Selectors

o   Eg. The element with id attribute, id=’example’(#example)

o   The position ‘b’ – (a, b, c, d) – (0, 1, 0, 0)

  • Class Selectors(.example), Attribute selectors([type=radio]) and pseudo-classes(:hover)

o   The position ‘c’ – (a, b, c, d) – (0, 0, 1, 0)

  • Type Selectors(h1) and pseudo-elements (::after)

o   The position ‘d’ – (a, b, c, d) – (0,0,0,1)

Example:

Selectors Specificity
*{ } 0,0,0,0
li{ } 0,0,0,1
li:first-line { }   0,0,0,2
ul li{ }   0,0,0,2
ul ol+li{ } 0,0,0,3
h1 + *[rel=up]{ } 0,0,1,1
ul ol li.red  { } 0,0,1,3
li.red.level  { } 0,0,2,1
#exampleId{ } 0,1,0,0
style=”” 1,0,0,0

No Specificity:

  1. The universal selector (*,+, -,>, ~) has no specificity value.
  2. The pseudo-class :not() adds no specificity. The negation ‘ pseudo-class: not’ is not considered a pseudo-class in the specificity calculation. It counts as normal selectors

Origin Hierarchy:

Below is the priority order from highest to lowest for normal styles when there is equal specificity for the declarations. If it was an important style (! important), it is just the reverse.

  1. Author style sheet
  2. User style sheet
  3. User-agent (browser) stylesheet

Importance:

  1. Normal declaration (p {color: red} )
  2. Important declaration (p {color: red !important} )

!important

The !important value appended in a declaration along with the property value in any of the ruleset/rules will be taken as the most priority even if the rule has less specificity.

Override !important:

Either add Specificity to the declaration or have only one !important declaration, remove others.

Cascade Order:

        The cascading order depends on origin, specificity, importance and source order. Below is the precedence order from low to high,

  1. Declarations in user agent style sheets (e.g. the browser’s default styles, used when no other styling is set).
  2. Normal declarations in user style sheets (custom styles set by a user).
  3. Normal declarations in author style sheets (these are the styles set by the web developers).
  4. Important declarations in author style sheets
  5. Important declarations in user style sheets

Note:

  • Declaration with Same Importance and Same-Origin: More specific selectors will override more general ones
  • Source Order – Declaration with the Same Importance, Same Specificity, and Same-Origin: the later rule takes precedence

Best Practices:

  • Use Class selectors instead of ID selectors.
  • Avoid using multiple CSS rules that target the same HTML elements.
  • Do not use inline styles.
  • Use specificity before even considering !important .
  • Although ‘!important’ works, it is generally bad practice. It can make debugging a difficult process
  • Only use !important on page-specific CSS that overrides foreign CSS (from external libraries, like Bootstrap or normalize.css).

Reference:

1) https://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade
2) https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
3) https://css-tricks.com/precedence-css-order-css-matters/
4) https://vanseodesign.com/css/css-specificity-inheritance-cascaade/
5) https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance
6) http://tutorials.jenkov.com/css/precedence.html

Learn RxJS in 1 Blog…(Disclaimer: Javascript basics are highly recommended)

RxJS (stands for Reactive Javascript) is actually a well-known library that is used to handle asynchronous calls with multiple events. There are plenty of other reactive libraries written in other platforms. Some of them are RxJava, Rx.NET, UniRx, RxScala, RxClosure, RxCpp, RxPY, RxDart, RxNetty, RxAndroid, RxCocoa etc.

Sample RxJS Implementation:

const interval = new Observable(observer => {

 let count = 0;

 const interval = setInterval(() => {

   observer.next(count++);

 }, 1000);

 // once we stop listening to values clear the interval

 return () => {

   clearInterval(interval);

 }

});

interval.subscribe(value => console.log(value));

// —-1—-2—-3—->

The functional units of RxJs are,

Observable:

Observables are collections of a stream of values or events. It can hold either synchronous or asynchronous stream of values or events.

Observer:

After fetching the necessary values from observables, callbacks are implemented to perform the required actions based upon the values. These set of collections of callbacks are called observers.

Subscription:

Subscription is the way to return the value when the asynchronous function is completed.

Operators:

RxJs Operators can be considered as Lodash for events. It provides the ease of RxJS implementations through enabling functional programming.

Subject:

A subject is simply a unit that can act as both Observable and Observer simultaneously.

Schedulers:

Schedulers help us to define in what execution way does an observable deliver its values to the observer.

Basically, the RxJs Observables can be compared with Promises in a better way as they have the major similarities.

Reference Links:

A dive into “Vuex” !

Let’s meet our hero – “The Vuex”!

Vuex is a state management library that is used commonly in vue.js. But why do we use it? Vuex is very much useful in passing the data from one component to another component.

We can pass data from the parent component to child component using props, but when the child component has many nested siblings, the data passing between the child components becomes difficult and that’s where “Vuex” comes into play !!

Store :

A store is a global object that keeps track of all the state changes of the app across the components.

But what makes it different from other objects?

  • Vuex stores are reactive – every state changes are updated efficiently in the store
  • Vuex stores are read-only – It is not possible to change the state properties directly in the store. The only way to change a store’s state is by explicitly committing mutations.

We can create a store by creating an instance of vuex like :

const store = new Vuex.Store({ state: {} })

In order to integrate vuex with vue, we have to add the store in the vue instance by :

const App = new Vue({ store })

In order to keep track of the state changes, we have to access the state in the “computed” property in vue component

Now we have created a store, but how do we access the store data?

We access the store by the following methods :

  • Mutations
  • Getters
  • Actions

Mutations :

These are functions used to update the state. They behave like events and we have to use “commit” in order to invoke them.

To be clear, we define the mutation by :

const store = new Vuex.Store({

mutations: {

  yourMutationFunction (state, payload) => {

     }

   }

});

We invoke the above mutation by:

this.$store.commit(MUTATION_NAME, {payloadData});

Getters :

Applicable to a scenario where we have to get a value from the store that is obtained by manipulating the state data, then we use “Getters”. Having these manipulations in the store makes the “Getters” reusable in other components as well.

Getter functions are created by :

const store = new Vuex.Store({getters: { yourGetterFunction : (state) => ( ) } });

And we invoke the getters by,

this.$store.getters.yourGetterFunction

We also have a helper method called “mapGetters” to invoke a getter function in the component.

Example :

import { mapGetters } from ‘vuex’

export default {
 // some code ..
 computed: {
   …mapGetters([   // we use spread operator to append the mapGetters to the computed object
    ‘yourGetter’
   ])
 }
}

But when we have no manipulation in the state, we have to use mapState helper to fetch the data in the store directly from the store.

computed: {

  …mapState([‘yourStateName’]);

}

Actions :

They are generally functions, that is invoked to perform some backend calls or any other asynchronous operations before mutations. Actions keep track of the mutation changes correctly in case of asynchronous operations.

actions: {
 yourActionMethod({ commit }) {
   commit(‘mutationMethod’)
 }
}

Actions are invoked by dispatching them using store object or mapActions helper function

Example :

   this.$store.dispatch(‘actionName’)

Or in components by :

methods: {
   …mapActions([‘actionName’])

}

Thus, the flow for the state from component to store will be like :

Sources :

We are reviewed on Clutch!

Squash Apps Receives 5-star Ratings for Development Services!

We are proud to announce our partnership with Clutch, the leading B2B ratings, reviews and research platform. Clutch lists over 7,000 IT companies all around the world in over 500 industries. The ratings platform helps potential buyers find in-depth testimonials in order to find the best fit software developers, UI/UX designers, and web developers for their next projects.

We’re extremely happy to announce the amazing feedback that has been received by some of our most esteemed clients. With 4 reviews, Squash Apps has a close to perfect score. Our clients have been saying the most delightful things about our services on Clutch, commending Squash Apps for our outstanding communication skills, our flexibility and our superior technology skills.

Their team is extremely proactive in finding alternatives or solutions to obstacles….Squash Apps understood our direction and asked for clarification when needed”– CEO, StayLocal.co

They come highly recommended.” – Partner, 707 Ventures

I don’t know how many projects they have going on, but they give me the feeling as if my project is the only project they’re working on.” – CEO, Shelly Apps

Based on the feedback received, Squash Apps is listed amongst the top software development companies in India on Clutch’s sister site, The Manifest. Our team prides themselves on building the cleanest code possible while completely avoiding any and all shortcuts to ensure that our clients get the highest quality of work. Our top priority is keeping our clients happy with low costs and high quality service.

We like to develop a relationship with our clients so that we can help them maximize the potential in every project. When we work with our clients, communication is the most important tool. We place a strong emphasis on consistent and clear communication so that there is never any confusion at any time. I think you’ll see that commitment if you check out our extensive profile on Clutch.

If you’d like to learn more about our highly rated services, make sure to check out our website and contact us for any inquiries.

Debounce And Throttle in Javascript

The greatest concern faced by UI developers is the performance issues in situations where functions are being executed excessively and in some cases unnecessarily


There are two ways in order to control the execution of functions using Debounce and Throttle, which come in handy when on handling events such as mouse scroll or window resizing.

A simple explanation of debounce and throttle is that the number of times a function is executed over a period of time is throttle and the time passed between each execution of a function is implemented as debounce.

 

Real Time Example:

Debounce: The perfect example for debounce would be resizing of the window in a desktop. Imagine we are to get the value of the screen size, but it would be useless to execute the function as the user drags on the size of the screen but we would be interested only in the final value of the screen size after it has been resized, as explained in the link(https://css-tricks.com/debouncing-throttling-explained-examples/)

debounce

Throttle: An example of throttle can be explained through the infinite scroll, where we have to determine the scroll position and load data before the user reaches the bottom. In this case, it wouldn’t be advisable to use debounce, as it would allow us to call the function only after the user stops scrolling. But throttle would ensure that we constantly check how far is the user from the bottom and act accordingly.

throttle

The major advantage of throttle over debounce is that we have the option to store ignored executions and execute them at last after all the function calls are made

Implementation:

A code sample for implementation of debounce

//original code from  Jhey Tompkins blog

//https://medium.com/@_jh3y/throttling-and-debouncing-in-javascript-b01cad5c8edf

var debounce = function(func, delay) {

var inDebounce = undefined;

return function() {

  var context = this,

    args = arguments;

  clearTimeout(inDebounce);

  return inDebounce = setTimeout(function() {

    return func.apply(context, args);

  }, delay);

}

}

 

The above function could be linked to a click event as follows:

 

debounceBtn.addEventListener(‘click’, debounce(function() {

return console.log(‘Hey! It is’, new Date().toUTCString());

}, 3000));

 

In the above code, when the button click event is called the function gets executed with the delay of 3 seconds, but if another click event is triggered before the execution of first click, then it is replaced by the second event.

 

Similarly, a code implementation for throttle would be

 

//original code from comment of maninak

//https://gist.github.com/makenova/7885923

function throttle(func, msWait) {

var time = Date.now();

return function() {

if ((time + (msWait || 100) – Date.now()) < 0) {

func();

time = Date.now();

}

}

}

Can be used as:

window.addEventListener(‘scroll’, throttle(myOnScrollFunction), false);

The above code ignores execution of the function for the events that are being called within 100ms of execution of the previous function call.

Conclusion:

Debounce and Throttle are techniques used to optimize the event handling.Both throttling and debouncing will rate-limit execution of a function.

In Summary:
Debounce will bunch a series of sequential calls to a function into a single call to that function. It ensures that one notification is made for an event that fires multiple times.

Throttle will delay executing a function. It will reduce the notifications of an event that fires multiple times.

References:
1.https://css-tricks.com/debouncing-throttling-explained-examples/
2.https://medium.com/@_jh3y/throttling-and-debouncing-in-javascript-b01cad5c8edf
3.https://gist.github.com/makenova/7885923

4.https://stackoverflow.com/questions/25991367/difference-between-throttling-and-debouncing-a-function

5.http://reactivex.io/documentation/operators/debounce.html#collapseRxNET

6.http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-throttleTime