Artificial Intelligence

Artificial intelligence (AI) is the broad branch of computer science. The goal of AI is to create systems that can function intelligently and independently. AI is the simulation of human intelligence processes by machines, especially computer systems. In computer science, artificial intelligence (AI), sometimes called machine intelligence, is intelligence demonstrated by machines, in contrast to the natural intelligence displayed by humans. It is a fact that chatbots perform tasks on the concept of Artificial Intelligence (AI) and machine learning. The traditional goals of AI research include reasoning, knowledge representation, planning, learning, natural language processing, perception and the ability to move and manipulate objects. There are two ways AI works i.e. symbolic based and data based in which we need to feed a lot of information before it can learn. Particular applications of AI include expert systems, speech recognition and machine vision. Much of speech recognition is statistically based hence it is known as statistical learning. Humans can see with their eyes and process what they see, whereas this is a field of computer vision. Computer vision falls under the symbolic way for computers to process information. It  does image processing which is even though not related to AI but is required for computer vision. It does pattern recognition as well. Machines are better at pattern recognition because they can use more data and dimensions of data. We can replicate the structure and function of human brain we might be able to get cognitive capabilities in machines. It is also a field of neural networks and deep learning and we use those to learn complex things. If we get a network to scan images from left to right and top to bottom the convolution neural network work. The CNN is used to recognize objects in a scene. This is how computer recognition fits in and object recognition is accomplished through AI. AI can be categorized as either weak or strong. Weak AI, also known as narrow AI, is an AI system that is designed and trained for a particular task. Virtual personal assistants, such as Apple’s Siri, are a form of weak AI. Strong AI, also known as artificial general intelligence, is an AI system with generalized human cognitive abilities. In AI, we can get the neural network to remember the limited past.

Animations on Scroll – Made Easy!

Have you ever wanted to rapidly increase the usability of your site or the application? It’s going to be an undoubted yes because that’s what every developer dreams of making it – right? There are various ways that we can experiment with our sites, some work better than others and some require more time to get working! Even if you’ve found the user experience challenging, you can make it better, and I’ll show you how!

Anything that doesn’t jump off the page as interesting, exciting, funny, or relevant is liable to get slashed user experience. Most people will at least have a glance throughout the page just by scrolling since they’re not intended to read the entire page content at first. So, scrolls are one of the perfect places to grab the attention of the users and to enhance the usability of them. If you make scrolling, an exciting and an addictive one, you can boost the user’s experience while being able to brand your site and keep them engaged!

Let’s jump right into the ways in which we can implement the animations on scrolling. Animation on Scroll (AOS) is a perfect library that makes animations really easy and fascinating while scrolling the page. I recommend taking a look at the AOS official docs which has ready to use templates with several use cases. So the idea of this blog is to cover the initial setup for implementing the scroll animations in your project which is not explained in their doc.

I’ve listed the initial setup for Angular, Vue.js and React projects since they’re the most popular amongst the biggest front end frameworks. Let’s get them done one by one. But in general, we need to add AOS to our dependencies.

Run npm install aos --save

Either run npm i or add the CDN sources for CSS and JS in your index.html file.

CSS: <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

JS: <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

Next comes the initialization part of AOS. A piece of common information on initialization of AOS is, we always need to import and init them in the app or any other parent level component of which we need to do animations. This is due to the fact that AOS has observers in it, so whenever a new element appears in DOM, it is supposed to animate them properly.

  1. Initialize AOS in Angular

    We need to initialize the AOS in your app.component.ts as follows,
    a. Import the AOS library in your component
import * as AOS from 'aos';

b. We need to initialize the AOS library during the initialization of your component. So let’s initialize AOS on the ngOnInit lifecycle hook.

AOS.init();
  1.   Initialize AOS in Vue.js

a. Import the AOS library in main.js file.

import * as AOS from 'aos';
import 'aos/dist/aos.css';

b. We need to initialize the AOS library during the creation of your component. So let’s initialize AOS on the Created() lifecycle hook. Add the following snippet in the new Vue portion of the main.js file.

new Vue({
   created () {
       AOS.init()
   },   
   router,
   store: Store,
   render: h => h(App)
}).$mount('#app');
  1. Initialize AOS in React

The steps are apparent now so let’s just have a glance at the following code snippet to understand the flow in React.

import AOS from 'aos';
import 'aos/dist/aos.css';
.
.
.
 componentDidMount(){
   AOS.init({
     duration : 2000
   })
 }

Initialization is now complete! Try adding data-aos=”fade-up” to any of your HTML element and admire the animations on scrolling. Refer the AOS docs for more customized scroll animations.

Reference

  1. https://michalsnik.github.io/aos/

An Intro into webpack

Among various module bundlers, webpack turns out to be the most popular and powerful one due to its many features like improved performance and load time, to name a few! If you’re not familiar with it, I hope this blog will get you started with this powerful tool.

So, What exactly is a webpack?

A webpack is a powerful module bundler for JavaScript applications that packages all the modules in your application into one or more bundles (often, just one) and serves it to the browser. However, Webpack is more than just a module bundler. With the help of loaders and plugins, it can optimize, transform and minify all types of files before serving them as one bundle to the browser. 

It takes in various assets, such as JavaScript, HTML, CSS, Fonts, and Images and then transforms these assets into a format that’s convenient to consume through a browser. And I think this is fair enough to go ahead with webpack.

Understanding core concepts:

There are 4 key concepts in webpack that will cover an overall view of webpack and it’s configuration. Let’s get started.

  1. Entry Point:

An entry point indicates which module, the webpack should use to begin building out its internal dependency graph. webpack will figure out the entry point’s dependencies. By default, its value is ./src/index.js, but you can specify a different (or multiple entry points) by configuring the entry property in the webpack configuration.

Include the following in the webpack.config.js file

module.exports = {
  entry: './path/to/my/entry/file.js'
};
  1. Output:

Output defines where to emit the bundled files and assets. The following snippet tells out how the output can be configured in webpack.config file.

const path = require('path');
module.exports = {
   entry: './path/to/my/entry/file.js',
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: 'my-first-webpack.bundle.js'
  }
};
  1. Loaders: 

webpack understands only JS and JSON files, so in order to allow webpack to identify other file types, Loaders came into the picture. It defines the webpack to transform other types. It has two main properties, test, a regex pattern for testing the type of files and use for using the specific loaders for that type.

const path = require('path');
module.exports = {
   output: {
     filename: 'my-first-webpack.bundle.js'
},
module: {
    rules: [{ 
            test: /\.txt$/
            use: 'raw-loader' 
    }]
};
  1. Plugins: 

While loaders are used to transform various modules, plugins can be used to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables. Plugins are customizable through options. We need to require() a plugin and need to create an instance of that using the new operator.

const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const webpack = require('webpack'); 
module.exports = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
};

How webpack works?

Webpack seems to be a mystery in the JavaScript world. So let’s go ahead and get some working examples to understand how it works. But before that, let’s make some basic setup to proceed with.

npm i -D webpack webpack-cli

Also, add build scripts to package.json

  1. Bundling JS

Create an src folder because webpack always looks for a source folder and index.js file before bundling JS. Now, if you run the npm run build, a dist folder will be created along with a main.js file that bundles your source file.

  1. Bundling HTML

Create an index.html file under the source folder and add the created index.js file into the script tag. Now, if you run build, you’ll get a syntax error. By now, you should have probably known the reason behind it. Yes! webpack doesn’t recognize any other type except JS. So let’s configure webpack for fixing this.

Create a webpack.config.js file and pre-install a loader to allow webpack to transform HTML files.

npm i -D html-webpack-plugin html-loader

Then configure the installed loader into the webpack config file and after that, now webpack will be able to bundle the HTML files as well.

  1. Bundling Image

Webpack neither bundles images so that we need to install a loader to allow webpack to do that.

npm i -D file-loader

Then configure the loader in webpack and create an image folder and put an image inside that. Also, include the image in img tag inside the index.html file and run npm run build. Now webpack bundles your images as well.

  1. Bundling Scss

I hope now there is no need to say that again. So let’s get straight towards installing loaders for bundling styles and see it bundled after configuring that in webpack.

npm i -D node-sass style-loader css-loader sass-loader mini-css-extract-plugin

webpack.config.js

Let’s have a look into the final code structure of webpack.config.js after all the above configurations.

const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
   module: {
       rules: [{
               test: /\.html$/,
               use: [{
                   loader: "html-loader",
               }]
           },
               test: /\.(png|svg|jpg|gif)$/,
               use: [
                   'file-loader'               
           },
               test: /\.scss$/,
               use: [
                   'style-loader', 'css-loader', 'sass-loader'
           },
   },
   plugins: [
       new HtmlWebpackPlugin({
           template: "./src/index.html",
           filename: "./index.html"
       }), 
       new MiniCssExtractPlugin({
           filename: "[name].css",
           chunkFilename: "[id].css"
       })
}

References

  1. https://webpack.js.org/
  2. https://www.youtube.com/watch?v=TzdEpgONurw

Speech Recognition with Javascript

Have you ever wondered how marvelous the technology is growing and has brought tremendous improvements in our lives? The rise of Artificial Intelligence and Machine Learning indicates that Robots and machines are our new human model in the future. So, what else we’ll do in this tech world without getting updated with technology. Let’s get started with the most popular AI technology i.e., Speech Recognition.

Voice is the future as well as the present. So anything that you brand with voice is going to be a massive hit. Because humans are fascinated by a machine that can understand us! Let me bring some statistics of voice recognition used almost everywhere.

According to Adobe Analytics, 71% of owners of smart speakers like Amazon Echo and Google Home use voice assistants at least daily, and 44% using them multiple times a day.

Over 76% of smart speaker owners increased their usage of voice assistants in the last year.

So, 50% of searches will be voice by 2020.

A little while ago, I got an opportunity to implement the Speech recognition to one of our Applications. I was really overwhelmed to work on the most talked technology and bumped into the google search about the possible ways to implement the same. I’ve come across several npm modules, most of them are really cool to proceed with. Amongst various npm modules and technologies, I found this JavaScript web speech API is so simple and accurate to go with the speech recognition process.

It is a very powerful browser interface that allows JavaScript to have access to a browser’s audio stream and convert that to text. The Web Speech API is actually separated into two independent interfaces. We have SpeechRecognition for understanding human voice and turning it into text (Speech -> Text) and SpeechSynthesis for reading strings out loud in a computer-generated voice (Text -> Speech). 

The first thing that we need to do is to check the Browser compatibility table carefully before using this in your work or else you would be jammed with errors. 

Note: I’ll list down the things that are implemented in Angular application and I don’t think there will be much difference in implementing this in other frameworks of JS.

Voice to Text

Step:1

Let’s create an interface for the webkitSpeechRecognition like this,

export interface IWindow extends Window {
    webkitSpeechRecognition: any;
}

Step:2 

Now initialize the webkitSpeechRecognition to a variable like this,

const { webkitSpeechRecognition }: IWindow = window as IWindow;

   this.recognition = new webkitSpeechRecognition();

Step:3

There are some properties to make the speech API to function as per the configuration of that.  

The continuous property controls whether continuous results are returned for each recognition or only a single result. It defaults to single results (false.)

The interimResults property controls over the display of results. If set true, the results will be streaming live. The default value for interimResults is false which displays the text at the end.

We could also set the language, grammar and various others through its properties.

this.recognition.continuous = true;

this.recognition.interimResults = true;

this.recognition.lang = 'en-US';

All set. We’re done with the initial setup without any installations. We made it too simple and Now it’s good to go! 

Event Handlers

There are many event handlers in this API where you can track every event and perform whatever you want to. The following are the most used events.

  • onstart: This event is triggered when speech recognition is started. This is where we could show some notifications to the user that they can start speaking.
  • onresult: This is the most important event where we could track this and get the text string that is processed from a user’s speech recognition.
this.recognition.onresult = (event) => {

     let interimTranscript = '';

     let finalTranscript = '';

     for (let i = event.resultIndex; i < event.results.length; ++i) {

       if (event.results[i].isFinal) {

         finalTranscript += event.results[i][0].transcript;

       } else {

         interimTranscript += event.results[i][0].transcript;

        }

     }

     this.message += finalTranscript; // Processed message

   };
  • onerror: This is as important as handling onresult because the user might not know when their process stopped due to some reasons. So notify the user regarding this error and try to restart or stop the recognition or do whatever!
  • onend: A simple event that gets triggered when our recognition is stopped. 

Methods:

There are three important methods in web speech API which is highly useful to invoke the actual speech recognition functions. Just keep reminded that only after calling methods, the respective events will get triggered. So let’s know when to call a method.

  • start(): It starts the speech recognition service listening to incoming audio with intent to recognize grammar associated with the API.
  • stop(): It stops the speech recognition service from listening to the incoming audio and attempts to return a result using the audio captured so far.
  • abort(): It stops the speech recognition service from listening to the incoming audio and doesn’t attempt to return a  result.

Text to Speech

Actually, text to speech is really very easy. It is accessible through the speechSynthesis object and there are a couple of methods for playing, pausing and other audio related stuff like changing the pitch, rate, and even the voice of the reader. But we can do it simply with the speak() method. Here is the entire code needed to read out a string.

textToSpeech(message) {

   const speech = new SpeechSynthesisUtterance();

   // Set the text and voice attributes.

   speech.text = message;

   speech.volume = 1;

   speech.rate = 1;

   speech.pitch = 1;

   window.speechSynthesis.speak(speech);

When this function is called, a robot voice will read out the given string, doing its best human impression.

Conclusion:

It was cool. Isn’t it? Since conversational user interfaces and voice assistants are becoming more popular, we can build that with this simple and cool web speech API. I hope this blog has given some quick and simpler ways to implement speech recognition. Adding voice-based user interaction to your application would be a great form of user experience. So what are you waiting for? Just go ahead and do some wonder with voices.

References:

  1. https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition
  2. https://www.google.com/intl/en/chrome/demos/speech.html
  3. https://shapeshed.com/html5-speech-recognition-api/

 

Routing in nativescript-vue

I’m a big fan of Vue JS. So, when heading into mobile app development, Native script was the one thing which made me excited to work on. For those who are new to this, Nativescript is an open source framework which is used to create true native mobile apps for both Android and IOS. Nativescript supports Angular, Vue, Vanilla JS and Typescript. It is known for its performance, compared to other mobile app development frameworks like react native and ionic.

Here in this blog, we are going to focus on nativescript-vue routing…

Nativescript-vue is basically, Nativescript core combined with Vue JS.

nativescript

 

How do we implement routing in nativescript-vue?

The shocking news here is, Vue routing is not supported in nativescript-vue. The Nativescript community is currently working on it. But for now, we have to go with manual routing methods.

oh my god

 

Let’s go ahead with manual routing…

To implement manual routing, you just need to know the following three methods:

  1. $navigateTo
  2. $navigateBack
  3. $showModal
  • $navigateTo:

The functionality of $navigateTo is to redirect from one component to another. This method can be used in the view and in the methods like given below:

Consider a scenario where the current component should be redirected to homePage component on click of the “Go” button. We use the $navigateTo methods like:

<Button text="Go" @tap="$navigateTo(homePage)" />

Or we could add in the method like :

<Button text="Go" @tap="goToHomePage" />

goToHomePage() {

    this.$navigateTo(HomePage);

}

There might be a scenario where we need to pass data from one component to another component. In that case, the data can be passed as props using the $navigateTo method by.

this.$navigateTo(ComponentName, {

  props: {

   // pass the data as an object here

 }

});

 

What else we can do with “$navigateTo”?

This method also gives us properties to apply transitions while navigating to the next page.

There are three ways to set the transition:

  1. transition: Applies on all platforms.
  2. transitioniOS: Applies only to IOS.
  3. transitionAndroid: Applies only to Android.

The default transition is “platform”.

this.$navigateTo(NextComponent, {

  transition: {

     name: 'flip',

    duration: 2000,

   }

});

The below listed are the available transitions:

  1. curl (same as curlUp) (iOS only)
  2. curlUp (iOS only)
  3. curlDown (iOS only)
  4. explode (Android Lollipop(21) and up only)
  5. fade
  6. flip (same as flipRight)
  7. flipRight
  8. flipLeft
  9. slide (same as slideLeft)
  10. slideLeft
  11. slideRight
  12. slideTop
  13. slideBottom

Another important property is clearHistory.

“clearHistory” is used to clear the navigation history. It accepts a boolean value. Setting it to “true”, clears the navigation history.

There are still a few other things that $navigateTo method can do. Refer here for the properties that are accepted by this method.

  • $navigateBack:

This method is used to navigate back to the previous page. It is used like:

<Button text="Back" @tap="$navigateBack" />
  • $showModal:

This method is used to display the component inside a modal.

For closing the modal we use “$modal.close”. Props are passed as an option to the $showModal as the following:

this.$showModal(Component, { props: { message: “Props is passed here”  }});

That’s it…. We have now mastered manual routing in nativescript-vue by learning simple three methods. Hope this blog was helpful and let me know your thoughts on this in the comments!

Thanks for reading!

Reference:

https://nativescript-vue.org/en/docs/routing/manual-routing

 

Array methods in Javascript

Array is one of the most important and frequently used concepts in JS. If someone raises the question “What is an array?”, we used to say,

“An array is a homogeneous collection of elements”.

My own definition of the array is,

It is a data structure used for arranging the elements or data as a group and each element can be accessed through its index.

To develop a JS enabled application, we should know this basic concept of arrays and the methods to be used.

For e.g:

const sampleArray = [  ‘HTML’  ,  ‘JavaScript’  ,  ‘ES6’ ]

where,

sampleArray [ 0 ] – ‘HTML’

sampleArray [ 1 ] – ‘JavaScript’

sampleArray [ 2 ] – ‘HTML’

Now, let us see some most commonly used array methods with simple examples

  • length:

To find the length or size of a particular array.

Eg: console.log(sampleArray.length); 

Output: 3
  • Adding an element to an array:
  1. push:

    To add an element at the end of an array.

    Eg: sampleArray.push(‘NodeJS’); 
    Output:  [  ‘HTML’  ,  ‘JavaScript’  ,  ‘ES6’ ,  ‘NodeJS’ ]
  2. unshift:

    To add an element at the front of an array.

    Eg: sampleArray.unshift(‘NodeJS’); 
    Output:  [ ‘NodeJS’ ,   ‘HTML’  ,  ‘JavaScript’  ,  ‘ES6’  ]
  • Removing element(s) from an array:
  1. pop:

    To remove the last element from an array.

    Eg: sampleArray.pop(); 
    Output:  [  ‘HTML’  ,  ‘JavaScript’ ]
    

    Here ES6 is removed as it was at the end of the array.

  2. shift:

    To remove the first element in the array.

    Eg: sampleArray.shift(); 
    Output:  [  ‘JavaScript’  ,  ‘ES6’  ]
    

    Here HTML is removed as it was the first element in the array.

  3. Remove an item by index position – splice(pos,1)

    To remove an element by index position.

    Eg: sampleArray.splice(2, 1);
    Output:  [  ‘HTML’ ,  ‘JavaScript’  ]
    

    Here ES6 is removed as it was present in the index 2 and the second parameter specifies the number of elements to be removed.

  4. Remove multiple items – splice(pos,n)

    To remove more than one elements based on the index position.
    Here n specifies the number of elements to be removed from the specific index pos.

    Eg: const removedItems = sampleArray.splice(1 , 2);
    Output:  sampleArray = [  ‘HTML’  ]
    removedItems = [  ‘JavaScript’ , ‘ES6’  ]
    

     Here both Javascript(index-1)  and ES6(index-2)  are removed and pushed to removedItems.

  • Copying an array:
  1. slice:
    To make a copy of an array with all its elements.

    Eg: const copyOfArray = sampleArray.slice();
    Output:  copyOfArray = [  ‘HTML’  ,  ‘JavaScript’  ,  ‘ES6’ ,  ‘NodeJS’ ]
  • Find the existence of an element:
  1. includes():
    To find whether an element present in an array or not.

    Eg: var isPresent = sampleArray.includes(‘ES6’);   // returns true
    var isPresent = sampleArray.includes(‘MongoDB’);   // returns false
  • Merging of arrays:
  1. concat():
    To combine/merge two or more arrays to form a new array.

    Eg:  var array1 = ['a', 'b', 'c'];
    var array2 = ['d', 'e', 'f'];
    
    console.log(array1.concat(array2));
    Output:  [ 'a', 'b', 'c', 'd', 'e', 'f' ];
  • Operations/Functions that return a new array:
  1. filter:
    This returns a new array with the elements that pass the conditions given in the function.

    Eg:
    const filteredArray = sampleArray.filter(element => element.length < 5);      
    Output:  [  ‘HTML’   ,  ‘ES6’  ] , Here the length of each element is less than 5.
  2. map:
    Here, the given function is executed for each element of the array and the result will be pushed to a new array.

    Eg:     const sampleArray = [ 4, 2, 34, 50 ]
    const mappedArray  = sampleArray.map(element => element*2); 
    Output:  [ 8 , 4  , 68 , 100 ]
  • Looping through an array:
    1. for loop.
    2. forEach
    3. for of
    4. for in
    5. Map
    6. Filter

These are some of the methods which we can use to loop through an array.

And yes…We came to an end and I hope this blog on frequently used array methods will be useful to develop a js-based application. For more methods, refer the below link.

Reference:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

Gitlab Runner

Hi, folks,

This blog contains the steps on how to implement continuous integration and continuous deployment using the Gitlab runner.

Here in the following example, we have two separate servers.

Install Gitlab Runner in Linux Server:

To install Gitlab runner use the following command :

sudo apt-get install gitlab-runner

Once the git lab runner is installed, we should register the runners of the project.

  1. To register the runner, run the command,
sudo gitlab-runner register
  1. Once you hit enter it asks for instance URL,
  2. Next, It will ask for of token of the runner. This token can be seen in the repository.
Path for the token ----> Settings > CI/CD > Runners > Token

There are two types of runners in the Gitlab runners. They are

  • Specific Runners
  • Shared Runners

Specific Runners :

These runners are useful for the job of a project which has specific requirements.

Shared Runners:

These runners are useful for a job of different projects which has similar requirements.

4. Next, It will ask for the description for the runner.

5. Next, it will ask for tags associated with the runner ( these tags can be changed later in the UI)

6. Finally, it will ask for runner executor: ( Here I use Shell script for runner executor)

Now the Gitlab runner is registered successfully in the server.

Next, .gitlab-ci.yml file needs to be created by which the Gitlab runner is executed.

This .gitlab-ci.yml file should be created in the project root. This file triggers when the code is needed to push to the server.

Stages in .gitlab-ci.yml File:

Stages are a series of steps to reach the final destination. Gitlab allows you to define any number of stages with any names. Gitlab allows to run the stages one by one.  If anyone of the stages fails, it prevents the other ones to run.

Stages

  • build
  • test
  • staging
  • production

Example script for .gitlab-ci.yml

stages

    -deploy

deploy_to_prod

stage: deploy

script : “echo deploy to production && ssh of your server in which code needs to be deployed && commands to deploy the code in the server.

only:

   -master

To deploy the code in the server using Gitlab runner we should add the ssh key of the server to the repository.

Steps to add server ssh in the repository’s deployed key.

  1. Use cat ~/.ssh/id_rsa.pub command to get the ssh key of the server.
  2. Open your repository in the Gitlab and go to Settings > Repository > Deployed Keys(Expand). Add the ssh key of the server in the deployed keys.

Now, when a new code is pushed to master branch the code is deployed to the server successfully.

 

Squash Apps Named Among Top App Developers in India by Ranking and Review Website Clutch.co!

Squash Apps is dedicated to working with our clients to deliver the best, most robust web apps on the market. Our company started in 2015 headquartered in Coimbatore, India where we work primarily on custom software development for small businesses. We specialize in mobile app development, specifically using a single team to create IONIC Hybrid apps to run on multiple platforms, and scaling servers to meet the needs of our clients. The IONIC platform has been praised by many app developers and as The World Beast magazine states, it is useful to our company because “The Ionic framework is powered by a huge community of developers, and you can get an extensive range of resources on the web” to accomplish any task and build the vision that our clients ask for.

Clutch has just recently granted their 2019 leader awards and we are fortunate to receive a position on their list of Top App Developers in India. It is no secret that there are many other companies in India who specialize in similar services as Squash apps. It can sometimes be difficult to differentiate our services from others, however, we are honored and thankful for the immense research and data collection that Clutch has performed in order to highlight our company as one of the best mobile app development companies in India.

At its core, Clutch is a ratings and review website to help facilitate business to business interaction in order to best pair businesses to the agencies or consultants they need to tackle their next big challenge. The level of detail in clutch’s reviews is exceptional compared to other sites and the statistics and tools such as their leader matrix can reveal important information on the potential experience you may have hiring a particular company.

On top of this, they also host two sister sites, The Manifestand Visual Objects, which periodically perform rankings of service providers based on a range of factors including past clients and experience, verified client reviews, and market presence. The Manifest is designed to guide users to tackle business projects and keep up to date with tech news for the purposes of successfully growing a business and overcoming challenges. Visual objects is specifically intended to help prospective clients visualize the possibilities of creative app development projects by displaying a digital portfolio of prior work.

The team at Squash Apps is excited to announce that our company has been ranked among the Top 50 Web Development Companies in India by The Manifest, and among the Top Mobile App Developers in India by Visual Objects. We have even been recognized for a few of our notable projects on The Manifest (As displayed below) and are excited to continue to receive praise and recognition from our satisfied clients.

Clutch Review

Our company is immensely thankful for all of their support and work done by clutch to help connect us to our potential clients and build a powerful network of satisfied customers. We are lucky to have such a dedicated company such as clutch to improve business relations around the world and we look forward to growing our profile and watching the reviews pile up!

 

 

 

 

Reactive Forms (Angular)

We all know that Angular Application is a reactive system. We have two categories of form structures in Angular:

  1. Reactive Forms
  2. Template Driven Forms.

In template driven forms, the template directives are used. Whereas in reactive forms, we could build our own representation of the form in the components. Thus, we could always opt for Reactive Forms.

Let’s begin by knowing the terminologies of reactive forms.

  • formControl
  • formGroup
  • formArray
  • controlValueAccessor

In this blog, we are going to look through formControls and formGroup.

Before beginning, do not forget to import the module (ReactiveFormsModule) and import the classes (FormControl, FormGroup, FormBuilder, Validators)

Imagine you have a form with the following fields:

  1. Name
  2. Age
  3. School
  4. Class
  5. Rank

So here, each field will be having different data types (such as alphabets, numbers, etc). Thus, in reactive forms, validating the fields become very easy using the built-in properties. Also, it is very easy for us to group the individual forms and make the necessary changes.

Let’s start with formControl:
Each field is recognized using the formControls for validation. Thus, we will be setting formControl for each field. Also, default values to the fields can also be set up initially.

Illustration:
In .html file, add:

<input type="text" [formControl]="name">

In .ts file, add:

name = new FormControl('any default values');

And then we go for formGroup:
These individual form controls can be grouped together for better handling of validation stuff and named as formGroup.

Illustration:
Let the HTML file remain the same.
In .ts file, add:

formGroupVariable = new FormGroup({
name = new FormControl('Smith Katana'),
age: new FormControl(12),
});

Now using the formGroupVariable, several validations, customizations can be done using the inbuilt methods. Following are some of them:

Illustration:
In .ts file, add :

name = new FormControl('any default values', {validators: Validators.required, updateOn: 'blur'});

Here, in the second parameter, we could use the Validators Object for validations. Refer the following link for Validators API reference:
https://angular.io/api/forms/Validators

Also updateOn key will intimate the validators to validate only after every blur to avoid validations for every keystroke.

We could also add our own customized method validator by adding the method instead of Validator object as follows:

Illustration:

In .ts file, add :

name = new FormControl('any default values',validatorMethod);

function validatorMethod(name: FormControl) {
//custom validations
}

Note* This method will be called for every keystroke

If you want to have a validation like to submit the form if any of the validations have been passed and it is not necessary that all the fields should be passed. But how do we do that?

formGroupVariable.patchValue('name', { onlySelf: true });

….Simple right?

To enable or disable the form use,

formGroupVariable.enable() && formGroupVariable.disable()

And also to disable a particular form control initially we could use the disabled attribute,

Illustration:

name: new FormControl({ disabled: true, value: null })

Reference Links:

Asynchronous Generators

For all the asynchronous challenges that we face in our code, would be solved by either Async-Await or Promises. Here comes another powerful alternative module which we call them as Generators!!!

There is a mysterious secret behind these generators which I will reveal it in the final section of our blog.

Let’s define Generators in simple:

1. What are they?

They are generally function with a * notation

2. Why do we need them?

They are just like normal Javascript functions with the motive of pausing and resuming the required particular function executions, thereby achieving better execution control

Illustration:

   asyncGenerator(function* () {

     let promises=yield apiService.get("asyncDb/promises.json");

     console.log(promises);

     let callbacks=yield apiService.get("asyncDb/callbacks.json");

     console.log(callbacks);

     let asyncAwaits=yield apiService.get("asyncDb/asyncAwaits.json");

     console.log(asyncAwaits);

   })


   function asyncGenerator(generator){

     let a=generator();

     function handle(yieldObject){

       if(!yieldObject.done){

         yieldObject.value.then(function(data){

           return handle(a.next(data))

         })

       }

     }

     return handle(a.next());

   }

Illustration Explanation:

Here asyncGenerator is the generator. The keyword “yield” will pause the execution inside the function. Calling next() method each time will invoke the yield expressions separately one by one.

And most importantly the yield expression will return an object containing the keys value and done. The object is like,

{

value: {Promises…..} (the yielded return value will be here) 

done: false (states whether the generator execution have reached the end or not)

}

The above code looks almost the same as that of Async/await implementation. But what makes the difference is most important thing. Async/await returns a Promise, whereas Generators returns an object {value: X, done: Boolean}. Meanwhile yield returns a stream of values from the generators.

The error handling parts are very easier in generators when they are used along with RXJS filtering operators. Instead of using next() we could also use throw(error). Even we could force the generator to stop by using return() in place of next() methods.

When you are tired of using the next() method again and again, we could simplify it by using the setImmediate () method. This will make all the promises unwrap one by one and wait for them to resolve before calling the next iteration.

Example:  

“setImmediate(() => next())”

The mysterious secret will be revealed now. Do we really need to learn generators and use them in handy?

The answer is NOOOO!

generators

Because we have a more power tool “Async/await” which holds best due to its powerful features. Async/await is built using generators. Without these generators, Async/await will not work at all. But that doesn’t mean we do need to use and learn generators in our code. Generators are more complex. Let the framework and library developers use these generators to create more powerful modules like Async/await. The side benefit from the generator what we could say is “Easier Testing”. The famous bundler ”Brunch”, the interpreter “Co” and “Redux-Saga” make use of these generators specifically.

async-await

Reference Links: