Loading…widgets in react-redux application

I got an interesting requirement for my React app to display multiple widgets with the following conditions:

  1. Number of widgets to displayed – UNKNOWN
  2. Content to be displayed – UNKNOWN
  3. API endpoints – UNKNOWN
  4. Only known thing was the placeholder in the widgets where data needs to be displayed
  5. Need to display loader for each API call

Fortunately, an API was available to get details such as the number of widgets and their endpoints.

As per the requirement to display loader for each API call, the first screen was:

main-widget Initial Loader screen

When the first API returns the response containing details regarding widgets such as the number of widgets and their endpoints, the above widget should turn into the following screen if there are 4 widgets data returned by initial API call:

widget-loaders
screen 2

And each of the widgets will call different APIs to get the data it needs…

View original post 524 more words

Advertisements
Posted in General | Leave a comment

Choosing testing framework for your React application

Let's make learning fun!

Recently, while working on a React/Redux based single page application, I was required to choose a testing framework. Since this was my first attempt at testing JavaScript based front-end applications, I started googling around to find the best possible tool to automate testing of my application. It was not long before I ended up being totally confused. Do you know why?

Because there are too many to choose from and it’s tough to decide, since they all do basically the same thing:

  1. Describe what you’re testing
  2. Set up what you’re going to test
  3. Assert whether the thing did what you expect

Having said that, when you have to choose, no matter how hard it is, you have to choose.

Test tools can be divided based on functionalities that they provide. Some provide us with only one functionality, and some provide us with a combination. It’s common to use a combination of…

View original post 755 more words

Posted in General | Leave a comment

AWS EC2: Increase volume size on the fly

The AWS documentation is pretty detailed and thorough, but sometime I feel it is overwhelming and at times some important steps/command are deep down somewhere, essentially very hard to find or perhaps missing!! I had a similar experience recently.

I hit upon a low disk warning for the root volume of a production instance. I was nervous, but thankfully AWS EC2 supports on the fly increase of volume size (for the kernel that supports on-line resizing, ofcourse). The other option is obviously to create a new instance with larger volume & switch. Not necessary though!!

The first step was to look for documentation and confirm if my instance type supports it. The very first link Google returned was what I was looking for. My Instances are running Ubuntu (mainly 16.04.2 LTS) and AWS does support on the fly volume changes for this. Hurrah!!

The steps in the AWS documentation are certainly detailed but elongated and scattered. It can take a couple of hours to go through and understand the actual set of steps. Additionally, some commands are missing. Let me put down the exact steps and save some trouble 🙂

  1. Increase the volume size: This can be done using “command line” or the “console“. I prefer the console. The steps on the console link are concise.
  2. Monitor the progress: In the AWS documentation go to the section “To monitor progress of a modification from the console”. Once the state is shown as “completed (100%)” proceed to step #3 below. Tip: I increased size from 30GB to 100GB.
  3. Extend the volume’s file system: To take advantage of the increased storage capacity.
    • Check the existing disk configuration by using the command ‘lsblk’. It will show something like below:
      xvda 202:0 0 100G 0 disk
       └─xvda1 202:1 0 30G 0 part /

      This denotes that disk size is 100 GB and allocated to xvda1 is 30GB. Usable is only 30GB, which is on the partition xvda1.

    • Now grow the xvda1 partition to the maximum available disk size. Important: Ensure to use the correct partition. Read ‘growpart’ command documentation, if need be.
      sudo growpart /dev/xvda 1

      you will see a message like below:

      CHANGED: partition=1 start=16065 old: size=62898462 end=62914527 new: size=209699102,end=209715167

      NOTE: The growpart command is missing from the AWS documentation on Extending a Linux File System after Resizing the Volume.

    • Verify that the allocation has changed using the ‘lsblk’ command again. It should now show the entire 100GB allocated to xvda1, as shown below. Tip: At this point the usable space is still ONLY 30GB though it shows 100GB.
      xvda 202:0 0 100G 0 disk
      
      └─xvda1 202:1 0 100G 0 part /
    • Finally tell the OS to use the additional space by resizing the partition.
      sudo resize2fs /dev/xvda1

      you will see a message like below:

      resize2fs 1.42.13 (17-May-2015)
      
      Filesystem at /dev/xvda1 is mounted on /; on-line resizing required
      
      old_desc_blocks = 2, new_desc_blocks = 7
      
      The filesystem on /dev/xvda1 is now 26212387 (4k) blocks long.
    • You will see 100GB allocated to your partition. Verify using ‘df’ command!!
  4. Done. Your volume is now having the increased size!!

IMPORTANT: It is not mandatory, but as a fail safe mechanism, always take an image of the instance that you intend to modify.

NOTE: The option to support on the fly increase in volume size is specific to OS (kernel should support on-line resizing). And, for EC2 the steps could vary as per instance type. However, using the steps above, I have successfully increased the volume size of both m4.xlarge and m4.large instances running ubuntu 16.04.2 LTS.

Posted in General | Leave a comment

Getting started with Android and Kotlin

Android Experience

With Google IO 2017, Google announced Kotlin as the officially supported language for Android.

Kotlin will be now shipped with Android Studio working out of the box, starting with version 3.0. No extra installations needed. No more incompatible plugins. All thanks to close collaboration between JetBrains and Google.

Why Kotlin?

Most importantly, it was because we think Kotlin is a great language that will make writing Android apps easier and more enjoyable.

Kotlin is also a great match for the existing Android ecosystem. It is 100% compatible with the Java programming language. We can add as little or as much Kotlin into our existing codebase as we want and mix the two languages freely within the same project.

A Quick Tour

here is a quick tour of some of the particularly appealing aspects of Kotlin:

1.Null Safety

One of the Kotlin’s best features is null safety. The Kotlin compiler enforces…

View original post 558 more words

Posted in General | Leave a comment

Feature Testing Using Capybara

techie

Feature testing is high level testing that allows us to go through our entire system, ensuring that each and every component is working perfectly fine. The test-cases written for it are termed as feature specs, which requires capybara.

In this blog, we will be focussing on writing feature specs using capybara with rspec. More specifically, we are going to look at capybara key features as well as, how capybara specs looks like.

We as a developer are mainly focussed about the underlying things, but we should also consider end user’s view. So, Capybara comes to rescue, it lets you write yours test-cases from user’s perceptive i.e, how end users would interact with your system. It is a ruby gem build on the top of underlying web-based driver and these drivers drive our browsers based on what our master ‘capybara’ says.

There are multiple web-drivers supported by capybara, some of…

View original post 568 more words

Posted in General | Leave a comment

Redirect HTTP to HTTPS when using ELB

Background – I have my site hosted on AWS EC2 server which is behind ELB (Elastic Load Balancing). I wanted my site to work on HTTPS. So I provisioned SSL certificate through AWS certificate manager and uploaded it on ELB. ELB receives traffic on both ports 80 and 443 and forwards it to single port 80 on server.

Setup – EC2 server, ELB, nginx, SSL certificate from AWS certificate manager, ROR

Problem – As port 80 is open on ELB, even non secure connection can be established to my site. To avoid this I had 2 choices

  1. Block port 80 and accept request only on port 443. But that is not a good user experience as he will always have to type https://  in url.
  2. Redirect all traffic coming to port 80 to port 443 so that connection gets converted to secure connection.

I decided to go with option 2 and then my search started on how to do it. After searching a lot I did not find single place which gave solution to my problem. But could get lot of pointers. After combining all these pointers I came up with following solution.

Solution –

Step 1- Forward traffic coming on port 80 of ELB and 443 to two different ports on server. In this example I am using port 8080 and 80. Forwarding traffic coming to port 80 of ELB to port 8080 of server and traffic coming on port 443 to port 80 of server.

Screen Shot 2017-06-21 at 11.08.35 AM

Allow inbound traffic for both ports 80 and 8080 on your server.

Screen Shot 2017-06-21 at 11.09.48 AM

Step 2 – Add 2 server blocks in nginx config as follows. Port 80 will serve actual site and port 8080 will be used to redirect traffic coming to it, to https.

server {

listen 80 default;
server_name http://www.mysite.com mysite.com;
root /www/mysite/current/public;
passenger_enabled on;
rails_env production;

. . . . . . . . .

}

server {

listen 8080;
return 301 https://www.mysite.com/$request_uri;

}

In case you have multiple domains then nginx server setup can be done as follows

server {

listen 80 default;
server_name sales.mysite.com sales.my-new-site.com;
root /www/mysite/current/public;
passenger_enabled on;
rails_env production;

. . . . . . . . .

}

server {

listen 8080;
server_name sales.mysite.com sales.my-new-site.com;
return 301 https://$host$request_uri;

}

I hope this will help you and save your time in doing this setup.

 

Posted in General | Leave a comment

SEO tricks to boost Rails application’s Google ranking

Planet Rails

You might be able to develop the greatest Ruby on Rails web application in the world… But is anyone going to find it?

The time is changing. Now your clients not only want well coded websites but they also need higher Google ranking for their website. In this blog, I intend to address how SEO can be done in RoR framework. Below are few techniques that can be used to improve website ranking.

Enable Server-side Compression

Website loading time plays an important role in Google Algorithm. The faster a web page loads, the better ranking it has on Google. Server-side compression is a simple way to speed up your website loading.

To implement this we need to add the following lines in nginx configuration file. Inside http block of your configuration file add the below lines.

I have used the most basic set of options for enabling Server-side compression. To…

View original post 605 more words

Posted in General | Leave a comment