Apps for Business

freelancer-763730_640

Mobile Applications are easy, and provide a convenience that nothing else does. They help us get a lot of jobs done without moving an inch. And as humans are creatures of convenience, the world of Mobile apps comes with a tagline – The more, the merrier.

This concept is something that will help you, as a business owner to understand the market, improve your sales, to build a brand value, as well and increase your client base. But, as any smart business owner, you will have your doubts. There are innumerable apps available at the play store, and some even providing the same services that you are, so how do you make yours stand out? Well, we’ll take care of that.

First, let us tell you why you need a mobile App. Earlier, when people commuted, they either spoke to one another, or read a book. Now, they just browse the internet on their mobile phones. Now this could mean using the browser, but more than that, it could be listening to music on a mobile App, texting a friend through a mobile App, buying a pair of shoes, booking a cab from the bus stop to their doorstep, filling in their to-do list and even looking up a recipe for dinner – all on a mobile app!

This level of usage means, that almost every idea has a client base in the online world. So, as a business owner, you can improve your clientele without an expensive marketing gimmick, by providing the option of a mobile App.

A mobile app will ensure your presence in the customers minds when they want a service or product that they may require. It will make you more approachable, easily available, hence the more probable option to do business with. And if we go by statistics, then Enterprise mobile apps and services revenue is labelled to hit $430 million by 2021!

Squash Apps has been providing business owners with a custom made Mobile App to suit their business strategy, long term plan, as well as their client base. So, get in touch with us if you are looking to take your business to the next level, and be assured that your end product will not be one in many, but unique, and useful, for both your business as well as the customer.

Evolution of Business

office-620822_1920

Change is constant and it isn’t surprising to know that it applies in the ever-changing world of technology and business. There was a time when business meant setting up shop at a location convenient to your target audience. Later on, with the introduction of Computers, and the magic of the Internet, we saw the birth of Online based business forums. We saw applications, and websites setup specifically to target the online audience, but the actual offices still worked up to an extent.

Then, with the introduction of portable computers, people were hooked to the online world, preferring to be connected to the internet whenever possible. By carrying laptops, because it helped them stay connected to their work, and it gave the business owners a chance to stay connected with their customers.

Businesses had a huge change as well. From traditional services, on-demand services took precedence. E-commerce sites provided the convenience that travelling long distances to shop did not. You could sit at home, browse online, and buy what you want, and it would be easily delivered to your door-step.

But we didn’t stop there, did we. Technology, and the ever-inquisitive human mind gave us the smart phone, and that is a maze in which we are still stuck in. The smart phone, as addicting as it may be, has given life to various small-time entrepreneurs, be it commercial, or social. Smart Phones meant no more carrying your heavy laptop around, and getting all the benefits and more, at the click on a button.

From connecting friends, to buying that electronic device on a flash sale, to booking a cab or even your flight, everything is now happening in a jiffy, at any time of the day or night. This is the beauty of Mobile Applications. These Applications now rule our day-to-day lives. Right from setting up multiple alarms a day to remind us of many things, to storing our list for grocery shopping later in the day, to reading the news on our way home, and switching on the torch light when there’s no current, Mobile Applications be it for any use, have taken up a big part of our lives, and will continue to do so.

 

Tips to Avoid Stage Fear

     Stage Fear is a common issue that every one of us face at some point in life. It could be during when we do a session or seminar or even when we have a job interview.

    We all talk in our day to day life to another person or a group of people.Then why do we get stage fear when we do a presentation? The answer is because in our daily lives we are being ourselves, we are not self conscious on what we talk with a friend/family. So why let other people bother us? We could suppress our stage fear with few changes to our mind set. I hope the following factors changes yours.

  1. Love your work
  2. Have confidence on yourself
  3. Start with a joke
  4. Acceptance of the worst
  5. Know what you are doing
  6. Just 5 minutes
  7. Be Punctual
  8. Take care of yourself
  9. Use your Imagination

And Last but not the least

  1. Don’t forget to breathe 😛

Love your work

      This is the most important part of avoiding your stage fear. Remember the time you were talking about a movie you just watched and loved or your favourite book? You would be feeling so overwhelmed with passion, that you forget about everything around you. If you could bring out this passion during your presentation. Then voila!!!! you’ll be surprised on how you pulled off a magical perfect speech.

Have confidence in yourself

      Hmmm confidence…. the thing we lack most during a speech, which makes us screw  our presentation. The best way to tackle this is by, encouraging yourself. And hey who can judge you better than yourself !! So boost up your confidence level and say ‘All is well’ 😉

Start with a joke

      People forget the important aspect of life when they are stressed out, LAUGHTER.

laugh

      So throw in a joke when you start a presentation. It would ease your fear and the mood of the audience . And you are up with a kick start to the presentation.

Acceptance of the worst

      Did you know that there is no such thing as a ‘Perfect Presentation’? Weird right? So why do we have to worry over it? Have a prior mindset that there are possibilities of mistakes. Even if you make mistakes, who cares? There’s always a next time. But be bold to accept your mistakes.

Know what you are doing

prepare

      Choose a topic which you are comfortable with, for the presentation. Prepare the content  beforehand( It’s not necessary to be as perfect as ‘Hermoine’ :P, but at least be ‘Harry’ and not ‘Ron’ 😉 , forgive my ‘Harry Potter’ reference ) . Knowing that you have done all your best to prepare will make your nerve calm down a bit.

Just 5 minutes

      Studies show that, the stage fear is at the peak during the first five minutes of the presentation. If you did a good job during this 5 minutes, then nothing can stop you from giving you best presentation ever.  You could go through this 5 minutes by interacting with the audience or starting off with a funny story. But don’t forget that you should never be critical of the audience.

Be Punctual

      Be at the venue at least 15 mins before the presentation, so that you could avoid last minute traffic or you could also socialise with the audience before the speech, you would make some friends and talking with friends never freaks us out right?

Take care of yourself

      Concentrate on keeping yourself fit for the presentation. A healthy body boosts up your confidence rate through the roof. Most importantly, eat a Banana.

banana

      Yeah, you heard me right!. Eat a banana before your presentation. Because eating something nutritious and not too filling will help with the butterflies in your stomach.

Use your imagination

      Remember the person who sat beside you in your kinder garden. The person sitting in the last row could be them or it couldn’t? But hey, if it helps you that someone you know is listening to you, won’t you feel better? So run wild with your imagination,it will help you reduce your fear.

Don’t forget to breathe

Yeah I know it’s silly

              .meditation

      But people when stressed, do forget to breathe. They just want to get the presentation to be over with as soon as possible and so they start reciting the summary they prepared with a fast pace. They think it will help with the stage fear. But actually it makes them worse. Taking deep, long breaths and going slow on the presentation is a much better way of avoiding the stage fear.

 

“The brave man is not he who does not feel afraid, but he who conquers that fear.”

                                                                                                                                   –Nelson Mandela

So as Mandela says, ‘Lets go conquer the fear ‘

AngularJs SEO with Prerender.io

Built a beautiful, snappy, user-friendly website using AngularJS, and now you want more users to start browsing it. But, AngularJS which fully embraces the asynchronous model creates problems for Google’s crawlers and this is how the google indexes an angularJs sites:

Angular Seo

Obviously, this is not what you want your users to view. Now what do we do?

What to do?

Thought a lot 🙄 but still no success???? 🙁

Nevermind 🙂 , here’s how to get your site to the top of the search results.

Lets start  by setting up your prerender server :

1.git clone https://github.com/prerender/prerender.git. Then cd Prerender, to go to the directory
2. npm install Instal module dependencies
3. node server.js Run the service (available nohup node server.js & so that it runs in the background)

Client Side: Follow Google’s Javascript crawling protocol with hashbang

For reference, the full protocol is here.

Google’s Javascript crawling protocol is meant for websites that render using Javascript or need to wait on AJAX calls to complete. If you follow Google’s protocol, Google will send a request to your server with a modified url so that you can return the static HTML version of the page rendered by prerender server. Here’s how:

If you use urls with #

Nothing after the hash in the url gets sent to your server. Since Javascript frameworks originally used the # as a routing mechanism, that’s the main reason why Google created this protocol.

Change your urls to #! instead of just using #.

angular.module('exampleApp').config([  
    '$locationProvider',
    function($locationProvider) {
        $locationProvider.hashPrefix('!');
    }
]);

Google looks for #! urls and then takes everything after the #! and adds it as a query parameter called _escaped_fragment_. That way, Google effectively fixes the problem of everything after the hash not being sent to your server.

Google finds urls like this:

http://www.example.com/#!/product/123

Google sends a request to your server like this:

http://www.example.com/?_escaped_fragment_=/product/123

, intercept the request on the nginx server like this (imagine the prerender server resides on port 3000 whereas your backend server on port 4000) :

server {
 listen 80;
 server_name www.example.com example.com;
 location ~* / {
   set $prerender 0;
   if ($http_user_agent ~* "baiduspider|
       twitterbot|facebookexternalhit|
       rogerbot|linkedinbot|embedly|
       quora link preview|showyoubot|
       outbrain|pinterest|slackbot") {
   set $prerender 1;
 }
 if ($args ~ "_escaped_fragment_") {
   set $prerender 1;
 }
 if ($uri ~ "\.(js|css|xml|less|png|jpg
     |jpeg|gif|pdf|doc|txt|ico|rss|zip|
     mp3|rar|exe|wmv|doc|avi|ppt|mpg|
     mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|
     swf|dat|dmg|iso|flv|m4v|torrent)") {
   set $prerender 0;
 }
 if ($prerender = 1) {
  rewrite .*/$scheme://$host$request_uri?break;
  proxy_pass http://localhost:3000;
 }
 if ($prerender = 0) {
   proxy_pass http://localhost:4000;
 }
}

Thats it!

SEO issue solved

Now you’re well on your way to lots of new users, courtesy of the search engines! Good luck  😉

NodeJs Essentials: How to restart your nodeJs server programmatically in the event of a failure

You are excited about your new found love for NodeJs and you start creating an application. You have some REST apis wired up and you are all set to change the world! But for some reason, you have some unhandled error in your code and your nodeJs server crashes! Now you got to restart it to make sure it stays up. Ever crossed this scenario? If so, this is for you.

To demonstrate this, let’s look at the below scenario


http.createServer(function (request, response) {
console.log('Ready to accept request');
response.writeHead(200, {
'Content-Type': 'text/plain',
'Access-Control-Allow-Origin' : '*'
});
response.end('Hello World\n');
}).listen(1337);

This is a very simple http server that sends ‘Hello World’ as a response to the requester. To run this program,

  • Save the code above to a file (e.g. hello-world.js)
  • Go to terminal and locate the file. Run node hello-world.js
  • Access ‘http://localhost:1337’ to see the response on your browser/REST client like below
    NodeJs hello world http server

What a happy world!

Your nodeJs program worked!

Now all is fine, until there is an error in your code and your app crashes! Lets simulate this by the below code. Notice, how I am trying to access a property of variable ‘i’ which is not defined.

var http = require('http');
http.createServer(function (request, response) {
console.log('Ready to accept request');
// This line below is going to break your server!
var j = i.someProperty;
response.writeHead(200, {
'Content-Type': 'text/plain',
'Access-Control-Allow-Origin' : '*'
});
response.end('Hello World\n');
}).listen(1337);

Run this code, and hit the http://localhost:1337 url and you will see that the server fails with the below message.

ReferenceError: n is not defined
at Server. (/Users/srijithradhakrishnan/Desktop/httpServer.js:5:17)
at emitTwo (events.js:106:13)
at Server.emit (events.js:191:7)
at HTTPParser.parserOnIncoming [as onIncoming] (_http_server.js:543:12)
at HTTPParser.parserOnHeadersComplete (_http_common.js:105:23)

So, how do we recover from a failure like this and keep the server running? For this, we could use the cluster module from nodeJs. Here is how it could be used.


var http = require('http');
var cluster = require('cluster');
// The master's job to spawn workers initially and when they die
if (cluster.isMaster) {
// Get the number of processor cores
var cpuCount = require('os').cpus().length;

// Create a worker for each CPU
for (var i = 0; i < cpuCount; i += 1) { cluster.fork(); } // When a worker exits, fork a new one cluster.on('exit', function(worker) { console.log('Worker %d died', worker.id); cluster.fork(); }); } else if (cluster.isWorker) { // The real work here for the worker http.createServer(function (request, response) { console.log('Ready to accept request'); // This will cause the server to crash var i = n.start; response.writeHead(200, { 'Content-Type': 'text/plain', 'Access-Control-Allow-Origin' : '*' }); response.end('Hello World\n'); }).listen(1337); // Exit the process when there is an uncaught exception console.log('Worker %d running!', cluster.worker.id); process.on('uncaughtException', function() { console.log('Handled the exception here'); process.exit(1); }); }

  • Now, run the code.
  • See that the master has spawned as many workers are there are cores in your cpu. So if you have a four code CPU, you should see 4 workers spawned!
  • hit the 'hello world' api, you would see that one of the workers died but was respawned again by the master.

Thus your nodeJs server can live on for eternity!

(ok that was too much, but you get the point!)

Overview of Amazon Lambda

Before we start with amazon lambda, what all things do we need to do in the production env to run our service.
1) We setup a machine ( say a VM), with certain configurations like os, ram, space etc.
2) You setup a server there.
3) You deploy your app.
4) You start the server.

Now your application is live and ready to serve requests, but what happens when the number of requests increase from few hundred to thousands per seconds, you server begins to blow up!!!!!.
What do you do next? Yes!!!, Scale!!!!.
You will probably repeat all the above steps again to maybe start a new server. Then configure a load Balancer to route the requests to the servers.
This is really painful.

Amazon Lambda can take care of lot of things which I mentioned above.

So, what is Amazon Lambda?
Amazon Lambda is a service which runs your code that you upload to the AWS Lambda infrastructure. AWS lambda infrastructure takes care of everything, managing servers, OS maintenance, Scaling, logging etc.

When does your code run?
Amazon lambda runs your code in response to
1) events that occur at different event sources, e.g adding or deleting object in S3 or some change in DynamoDB.
2) http requests.

What languages does it support?
Node.js, Java, Python.

So as I mentioned above the lambda function is run in response to events (like adding, deleting updating etc) that occur in various event sources (Amazon s3, Amazon DynamoDB) etc. So the event based execution can be done using the Push or the Pull model.
Pull Model: Amazon lambda (your code) polls the event source(e.g S3) to check for the occurrence of the event. So the association of the lambda function (your code) to the event source is maintained at the Lambda side
Push Model: The event source has the information about the lambda function, and calls the function when the event occurs.

Using https: You can also invoke your lambda code using the https request. When you send an HTTPS request to the API endpoint, the Amazon API Gateway service invokes the corresponding Lambda function. see http://aws.amazon.com/api-gateway/

We will basically talk about writing lambda in Node.js.
Basic Components of Lambda:
Handler function: This function is the starting point of your lambda function. In node you make this function available to the lambda infrastructure using the typical exports keyword.

e.g:
exports.myHandler = function(event, context, callback) {
...
}

Parameters in the handler function:
1) event: using this parameter event data is passed to the handler e.g S3 may pass the object added in bucket for processing.
2) context: using this parameter you get the information about the timeout for your lambda, the log streams associated with your lambda etc.
3) callback: this is optional and used to send information to the caller. It has the typical callback format: callback( <error>, <success object>).

Following is a image showing the triggering of lambda expression on image upload in S3, and then resizing the image and storing it in other S3 bucket:
lambda_image_thumbnail_creation
image describing the workflow is taken from AWS Documentation

This is the basics of Amazon lambda. To get started with your first lambda function visit http://docs.aws.amazon.com/lambda/latest/dg/getting-started.html.

What really is Javascript’s Event Loop

All of us know Javascript is a “single-threaded non-blocking asynchronous concurrent language, It has a call stack, an event loop, a callback queue, some other apis and stuffs” . We have also heard about V8 – Chrome’s Javascript runtime engine.

Many of us have known already about Javascript’s Event loop, but for the newbies this must be a good read.

Putting the big picture,

Squashapps-chrome-runtime

Let’s see what happens when this piece of code is executed,


console.log('hi');
setTimeout(function cb() {
console.log('JSC');
},5000);
console.log('how are you');

The result in the console would be,
hi
how are you
JSC

How this code is manipulated in V8 is,

  • When that piece of code is executed, console.log(‘hi’) is pushed onto the stack and “hi” is printed in the console.

Eventloop

  • The next thing is, the timeout function is triggered. The timeout function is not in the stack so a timer is kicked off in the webapis  which will run for 5 secs.

Eventloop-timeout

  • Since the timer is run by the webapi and also the stack is empty, console.log(‘JSC’) is pushed onto the stack and “JSC” is printed in the console.

Eventloop-2

  • After 5 sec, once the timer is done the function is queued up in the task queue

Event loop

  • Here is where the event loop comes into picture, the job of the event loop is to execute the task queue in a FIFO manner only when the stack is empty.

So, you may have a question “What if some process is taking place in the stack and the timeout is done?”  The answer is the timeout function will be put onto the queue and it will wait until the stack is empty, no matter how many seconds timeout you gave.

What do you think will be the output for this code?


for(var i=0; i<1000000000; i++) {
console.log(i);
if(i===0){
setTimeout(function cd() {
console.log('hi');
},2000);
}
}

I was asked the same question by my CEO one day in my office, the next moment i replied
0,1,2,3 and so on and after 2 secs some where in between
‘hi’ and then all the way to
…. 1000000000

But that’s not right, I totally forgot about the event loop. The exact output would be
0,1,2,3, … ….. …… , 1000000000
hi

You may ask me, what if I give a timeout(function(), 0); , even then the timeout function is going to go to the task queue and it should wait until the event loop is triggered and will be triggered  when the stack is empty 😉

“Go through this wonderful presentation by Philip Roberts which was my inspiration”.

Beware of the Event loop!

Happy coding!

How to implement SwiperJs slides with IONIC 1.x using ion-slides

With the release of V1.2, ionic announced the support for SwiperJs with the new directive ion-slides. The older ion-slidebox will be deprecated over the new ion-slides. As there was very less documentation and a lot of developers confused on how to get an instance of the swiper in your controller, I decided to write this blog post.

Here’s the forum where I posted the original answer

AngularJS Controller

 

How to use ion-slides in IONIC
AngularJS Controller


HTML

Screen Shot 2016-07-05 at 11.38.31 AM
HTML part

REFERENCES

  1. It can be made much more extensible. The different options available for
    the swiper like effect, speed ..etc is here (Look under Swiper parameters)
  2. Take a look at the api docs here
  3. Awesome Swiper Demos here
  4. Here’s an example gist

With IONIC 1.2 release’s support of swiper, the mobile hybrid developers could now unleash the power of SwiperJS!

Happy coding!

Top 9 mistakes to avoid for Angular v1 developers

AngularJs has seen a tremendous improvement over the last couple of years. With a strong core team, thousands of supporting modules in the ecosystem and backed by Google, AngularJs is the most favourite UI javascript library currently!

But ‘with great powers comes great responsibilities!‘ More and more developers are flocking to AngularJs everyday and it becomes more important to understand the nuances and code accordingly.  Here are some top mistakes developers make while coding in AngularJs and the steps to avoid them!

  1. Modularity

    Keeps angularjs code modular - By Srijith Radhakrishnan, SquashApps
    Keeps angularjs code modular

    Oh please! Please put stuff where they belong! We all have our tendencies to piece together a quick app for a client demo or something and put all stuff in the controllers. You wont believe me how many times I have seen a controller go beyond 500 lines of code!

    • Use Services/Factories wherever required
    • Directives are meant for DOM related stuff. Use them!
    • Keep a watch on the size of the file. Its sometimes as simple as that. If you think it is getting big, time to refactor!
  2. Overloading the RootScope
    Dont overload the rootscope
    Don’t overload the rootscope

    Lot of us think that rootScope in the angular world is some kind of a goods train and we could load all the stuff we want to on it and it would be delivered at the right spot! (Forgive my analogy!) Hope you get the point. When we want to share information between controllers or other modules, the first thing that comes to the mind is ‘Why not use rootscope!?

    • Well, at first, its all going to be fine
    • Then one day, rootScope is going to be a huge datastore on your client side application
    • This could overload angular’s digest cycle in watching these variables and cause a performance degradation
    • You could argue that the performance hit is going to take a while, but hey! It is going to happen!
    • Check out this wonderful explanation on SO about this
  3. Too many watchesDont have too many watches in AngularJSKind of relates to my previous point. Watch is usually used to ‘watch’ a variable and do operations when its value changes. The problem is that ‘watch expressions’ are run multiple (!) times during angular’s digest cycle. Boils down to a simple math. If 1 watch expression is triggered multiple times during a digest cycle, just imagine the performance hit that an app with 100 watch expressions takes!
  4. Broadcasting (events) like a radio station!
              There may be scenarios where broadcasting an event is the right way to go. But sometimes, we tend to solve the problems in the easiest way. After all, we are humans. (or are we??) . If there is a need to transfer data from modules within the app, you could use a factory, or a location parameter in the url or rootscope (sparingly!) or session/local storages or using controller inheritance (so in your child controller you would just do $scope.$parent.getSomeData())
  5. Cancelling Timeouts/IntervalsThere might be a scenario where you might need to add a $timeout to perform some actions after a stipulated time.
    Although timeouts could be totally avoided, if you really have to deal with them, cancel them after the controller is destroyed. You could listen to the controller’s destroy event like this and cancel the timeouts/intervals you created within the controller

    // Creating a timeout
    $scope.timer = $timeout(function() {
           doSomething();
    }, 1000 );

    // Cancel it when the controller is destroyed
    $scope.$on(‘$destroy’, function (){
        $timeout.cancel($scope.timer);
    });

     

  6. DOM manipulations

    DO NOT absolutely do DOM manipulations in controller. Why?

    • DOM manipulations are slow
    • Controllers are not meant for DOM manipulations!
    • Directives are meant for just that.
    • And if you have a directive for DOM manipulation you could reuse it in any other controller. But you cant reuse it if its within the controller itself
  7. Understanding callbacks
    Understand callbacks before you jump into Angular. A lot of times timeouts have been created for the lack of understanding on callbacks. Take for example this simple scenario

    • You want to call a REST api and get a response
    • Then print something on the html. Simple.WRONG: $http.get(some_URL, function(success){}, function(error){});
      $timeout(function(){
      #Hey it takes 5 secs for the above call to complete. Let me just do a timeout!
      $scope.message  = ‘Call success’;
      }, 5000);Btw, this does not exactly execute in 5 seconds. There will be a blog soon on why! (I know you know it already, but we still want to write about it!)RIGHT : 1)  $http.get(some_URL, function(success){$scope.message = ‘Call success’;}, function(error){$scope.message = ‘Call failed’;});(OR)2) var promise = $http.get(some_URL);
      promise.then(function(success){$scope.message = ‘Call success’;}, function(error){$scope.message = ‘Call failed’;});Read more about promises here and about callbacks here
  8. Dependency Injection
    • We found this the hard way but dont inject dependencies for your angular module like thisBAD app.controller(‘MyController’, function(Dep1, Dep2){
      });GOOD app.controller(‘MyController’, [‘Dep1’, ‘Dep2’, function(Dep1, Dep2){
      }]);ok Why do I have this redundancy? Why are my dependencies first injected as inline array annotations and then as parameters to the controller?
      Simple answer
      : Minification
      Detailed: JS minifiers rename the arguments before minification and then  Angular has no absolute idea of what those arguments are! There are two solutions to this
    • Either follow the implementation in the ‘Good’ section above (or)
    • Use tools like ng-annotate which would automatically do the inline array annotations for you.Read more here
  9. JSHINT (static code anaylis) and Tests!

    JS Linting and TESTS are your friends!
    JS Linting and TESTS are your friends!


    Often times, we ignore these guys as we need to meet that one deadline or go to the market before the other guy does! So much that we forget the good stuff that they bring. I am just going to jot down the advantages

    • JSHINT has caught more bugs than all the fish ever caught in human history (Crazy Analogy again. Forgive!)
    • If you had a friend who would sit with you all day while you code and test all your stuff, would you be happy?
      1. If the answer is YES, Karma is the name! Not the literal meaning, but this awesome test runner
      2. If the answer is NO, you need some socializing 😉(Note: if you have a large inherited codebase with no absolutely no tests, dont go about making that your priority! Of course tests are important but not more than the core business! Allocate may be 20% of your time weekly to write tests for the old code and dont write any new code without tests. Eventually you would be boasting a decent test coverage!)I am planning to do a blog later on how Panitr maintains near perfect test coverage

Following good coding practices not only enriches your knowledge but also helps the future app maintainer to not go mad and file a lawsuit against you 😉