DEV Community: Rounak Polley

Building my very first minimum value product

Rounak Polley — Thu, 08 Feb 2018 17:34:17 +0000

For more technical details regarding the project : Hasura Hub Submission

A Minimum Viable Product is the version of a new product which allows a team to collect the maximum amount of validated learning about customers with the least effort. And the task assigned to us was App clone of Splitwise. This app makes it easy to split bills with friends and family. It allows you to organize all your shared expenses and IOUs in one place, so that everyone can see who they owe.
We had an initial set back as our react-native developer was inactive which left behind only two members in the subgroup myself a ReactJS developer and a Node.js developer at the backend.

So as a react developer I started off by checking out the user interface and features of the original web-app. I made rough designs of the pages on paper then, I decided which of the features to include in the MVP. Also, there were some guidelines provided provided by Hasura.
Up next, was making the action plan which included our deadlines wireframes and database designs. The rest was a journey from wireframes to MVP.

Features of this MVP

Users sign up using email, "username - password" based registration (Hasura Auth API).
Users log in into their accounts, and are authenticated with the help of Hasura Auth API.
After logging in, users can select from a list of other registered users on the app and add them to their friend-list.
Users can create groups of 5 members by selecting friends from their friend-list and can share/split their expenses equally with other members in the group.
There is also provision of adding notes and uploading an attachment (image/pdf) of the bill with the help of Hasura Filestore API.
After a bill is added all the other members of that group owe the user (who paid the bill in physical world and added it in the app).
The bills are always split equally and groups can't be modified (i.e. adding more friends or changing the group name) because then it would have become tougher to maintain the group history.
Every logged in user is associated with a randomly generated Hasura auth-token which is unique for every login session and is used to maintain important user credentials in the Auth API.
For all other purposes we used the Hasura Data-API

Creating the UI using ReactJS and Material-UI

I simply stuck to the wire frames in most cases except one where I had trouble opening two dialog boxes side by side so I ended up merging the contents into one.
I divided up the interface into several parts so that I had more control over the components.
The UI has two distinct parts the navbar (AppBar) and rest of the body. The login and signup pages are interchangeable and the only other page is the dashboard. Dashboard is the place where all the action takes place : adding friends, groups, bills etc. For adding friends, groups, bills I used three material-UI dialogs and for displaying the friends, groups, expense history I used material-UI lists and menus. All the displays are dynamic each time user makes some changes the display is
updated in a fraction of second as soon as the api-calls are finished under the hood. It took me some time to use the use the react life-cycle methods to achieve the same.

Also it was the first time that I had to write a detailed description (Readme) for my project on github. And, also it was the first time I was working with APIs seriously. So, it was a lot of first timers and I'm glad I could pull through.

Challenges We Faced

To be honest it's no fun if it isn't difficult. To me the real thrill of programming is solving these problems. This task was challenging in many ways...
we had to deviate from the database design that I had initially though off. We had to add new columns to the tables because of new situations arising like for example in the groups table we added no_of_members because otherwise I would have had to write more code in ReactJS each time I handled the groups.
I got some logical errors that I couldn't understand and after being stuck for days I finally got rid of those portions and rewrote with a different approach altogether.
But, the biggest challenge was not actually implementing these features it was communicating with other group members. Because, to convey your ideas to a random person takes a bit to patience if not communication skills. Most of our communication was no Slack as it's very convenient in-terms of code sharing adding comments to images etc. Fortunately, my teammate was active on slack so even we faced errors we resolved it together.

Overall it was a great learning experience for me.

For the next task we are going to extend the MVP by adding some more features such as selecting user-avatars currently the user avatar is randomly picked out of 5 choices. Also, I plan on refining the UI and UX etc.

Learning ReactJS and using Material-ui for HPDF Task 1

Rounak Polley — Thu, 28 Dec 2017 21:22:23 +0000

My project on the hasura cluster

So, here I'm at my first internship and this is a summary of week 1...
Before that I have to mention that all interns were divided into four groups!
ReactJS, React-Native, NodeJs-express & Python-Flask.
And according to my preferences I got frontend NodeJS.

HPDF Task 1

The task of week 1 was simple (even though I struggled with it here and there).
I had to clone (make copies or imitate) two twitter pages using ReactJS and material-ui. Before I get into any detail I will like to show you the outcome.

You can check-out the code here GitHub Link : Twitter Pages it's clean and understandable. And, here are the screenshots.

The Learning Phase

I started learning new skills from the internet exactly an year ago because the semesters were delayed and I was already done with my studying. And since then I have been learning new and wonderful things whenever I feel like. But, learning through all these things the one this that stuck was front-end web development. Because I like to design things and will waste extra time adjusting the colour codes the sizes making the pages responsive and checking for all possible screen orientation.
In front-end I started from HTML5, CSS3, JS6 then Bootstrap, jQuery I even did a course on web design in Photoshop. I was planning on learning React and then it happened I ended up learning it.

At first I tried out edx then udemy because these are the places I had learned from previously. But, finally finished up with Egghead learning react was fun the virtual DOM, single page applications and all that. Then I moved on to Material-ui now here there are no tutorials I just had to read the documentation and experiment with it. Took 2-3 days with each of it..
I tried out almost all the components of material-ui.

Cloning Twitter

I actually had to open an account on twitter as I previously didn't had one. I used twitter for a while to familiarise with it or may be because it felt nice to join a new social media / micro-blogging platform.

And now comes coding

As the code is already there on GitHub here I will tell you how I approached this task. I decided to make break down the pages into common part and then assembly them together. I used a simple Lifting State Up to navigate between the pages.
So if you type 'Aadhaar' in the search box you are taken to the Aadhar page and then when you click the Home button on the tab you land on my twitter page again
(Pressing the browser back button will not help as it is not on a different url instead it is a single page react application)

Here, how I broke it down..

The App.js rendered one of the two pages depending on its state (this.state.page) and it simply passed on the state as a props to the next stage down the line twitter_base.js here is where all the assembling takes place based on the props.

theme.js it had separate muiTheme that I customized for the whole app as well as it contained the specific style attributes that were common across the react elements of this project (kind of global variables) like muiTheme.palette.primaryTextColor: grey50. And I imported in into all other ReactJS components.

I made a separate components folder that contained the parts of pages like..
AppBar.js, Follow.js, Related.js, Trends.js, User.js so on..
Each of these files exported one react element by default which I then imported into the twitter_base.js.
I didn't use any explicit stylesheets I used only inline styles in almost all cases I used the colours from material-ui itself and I refrained from using colour codes like I usually do.

And, this project it's designed to be responsive because material-ui doesn't have a responsive feature and I didn't wanted to use bootstrap or write media-queries. In fact the actual desktop version of twitter isn't much responsive either.

Actually using material-ui for the first time was not a smooth experience because a lot of things were not working as expect in other cases mostly stackoverflow would answer my queries but this time I got most of the help from the GitHub issues of the ReactJS. And, when none of it helped I would go to the Hasura Slack Community to get help.

I completed the task comfortably within the deadline (I didn't had to stay awake all night like I had to for some of my previous projects.

Bad Things happen

Already, due to semester I was running late but then I had the festive season on my cards as well. But, the worst was about to come..
I have used windows OS all my life and hence I though that I should get working with Linux this time. Because, it's quite embarrassing for me as a computer science student not to be familiar with Linux. Hence, I installed the latest version of Ubuntu on my old laptop and because of my sheer carelessness I ended up deleting the partition-tables and all my data ..

Actually I had no idea that the data on my D , E dives would also be affected. I'm still looking for a way to recover my stuff because it had some pretty important things on it. I couldn't find any way to recover it yet

If someone knows a solution to my data-recovery problem please let me know in the comments section.

I will write a separate blog about it later...

Horror of a Windows user on Linux

Discovering IMAD and road to HPDF

Rounak Polley — Thu, 28 Dec 2017 16:58:27 +0000

Computer Science Love at First Sight

I will start by saying a little something about myself I come from a non IT background. What I mean by that is I had no relation to computer science (no family or relations were in that field). My father didn't got me a computer because he though it would spoil me. But, I finally got a laptop in class 7 or 8. And surprisingly all I used my laptop in my teenage years was for playing games, watching movies and surfing the web. Then I took computer science in senior secondary because even though biology was a great subject because I had this preconceived notion it took a lot of mugging up! Not to mention that I studied in Kendriya Vidayalaya and there was not much of a computer education.

So, in class 11th I learned C++ and the CBSE syllabus was easy! Until then I always had found physics fascinating (still do). But, then I felt that this thing computer science (I describe it as a 'thing' because I didn't know its actual meaning then) there is a world of possibilities here. And therefore I'm now perusing a BTech in Computer Science and Engineering. In college I learnt many things but as in most cases programming attracted. So, I learnt various things on the internet this was probably me using internet for productive purpose for the first time.. just kidding!

Discovering IMAD

One fine day I was looking for some online courses to learn some new things because clearly I had nothing better to do. I had done free as well as paid online courses already by that time. I had heard about NPTEL : National Programme on Technology Enhanced Learning, I didn't knew the full-form. So anyways I came across this course IMAD : Introduction to Modern Application Development I read some reviews saw introductory videos and registered right away. IMAD is a course offered by IITM and Hasura and the instructors are Dr Gaurav Raina a faculty in the Department of Electrical Engineering at IITM, Tanmai Gopal the CTO & co-founder of Hasura.
Here is link for those of you may be interested Introduction to Modern Application Development.

IMAD journey

The lecture videos were all top notch, it covered basics of application development we did live projects. Lots of coding sessions and interesting MCQ assignments. But, the way the theoretical aspect of application development was nothing I had seen before I realised that as a computer science student I actually didn't know some of these concepts.
They have a discussion forum for the students where we resolved our queries. After a few weeks I came to know about the internship (HPDF) that would be given to top 5% in the exams what more there was a appear from home exam in addition to the NPTEL exam (I took both of them).

Getting my very first internship

For those of you who don't know.. Hasura is a platform that helps any developer build, develop and scale their apps. It has instant APIs for rapid development, and it helps create a to-do app in within three minutes.

Then, after some time the results of both the exams were out. And guess what? I got in top 1% of the students. And, some time later I got the offer letter and I was secretly celebrating!
I think about 500 people have got this internship this time.

The product development fellowship is an 8 weeks internship. Interns are assigned application development that we need to implement them using Hasura as part of a team. There are individual tasks as well. This is my first internship hence I didn't know what to expect but..
Damn, no one told me it will be this awesome!!! The Hasura slack community is super amazing so many people helping each other out makes me feel there is still goodness left in the world.

I will like to thank Hasura for giving the students extensions because of semester exams

I will be writing more blogs about the learning experience and collaborating with my fellow interns.

I'm having a great time working as an intern at Hasura.

Making landing page with background video

Rounak Polley — Sun, 20 Aug 2017 18:06:17 +0000

See the Pen A landing page with background video by Rounak Polley (@cfjr) on CodePen.

This pen I have created only to showcase how to effectively embedded youtube videos as backgrounds. Heads up ! while we can use any video for experimental purposes for actual webpages always use videos with copyrights.

Lucky for me I used a video from my own youtube channel (My channel).

A landing page is the first thing the user lands on when visiting a website which makes is extremely important to leave a positive impression at first sight. Perhaps you want to showcase your brand or products or add a content relating to your website.
There are many ways of creating it but I think that creating one with underlying video is more challenging than other ones.

Here's what I found out...

If we just copy and paste the embedded code and set the <iframe> to take up the entire screen we are going to end up with lots of black space around the video which adjusts itself as we resize the browser window obviously nobody wants that! (not specially on a landing page).
So, I tried another way I tried adding the background as an animated gif (compromising on the sound & I haven't seen landing pages with audio actually but I wanted audio as well).
Alas, I couldn't get any online resource to create a gif of longer than a minute and even my photoshop got upset in converting a 2min 32sec video into gif.
I tried some other things like styling the <video> element created within the <iframe> until I realized that I needed to make my embedded iframe responsive.
But, it too breaks down at extremely narrow browser size revealing white background underneath so I added a fixed positioned bottom centred gradient as background.
One thing that beats me is that I can't get the youtube video to loop (which user will probably find-out if he/she stays on the page for long enough) I did what the official sources said YouTube Embedded Players and Player Parameters (other sources give same info.) which is loop=1.

Further more colour or gradient overlays can be added on top of the background video like I added a curtain for framing.
I also added some simple text (with text shadow to improve readability) on the page with Log in & Sign up buttons with complimentary button styles.
And adding the usual Bootstrap classes to the required foreground components wraps up the thing.

And, as usual for complete code ...

See the Pen A landing page with background video by Rounak Polley (@cfjr) on CodePen.

Creating an Article Page.

Rounak Polley — Sun, 20 Aug 2017 16:17:07 +0000

See the Pen Semantically correct Responsive Design of an Interactive Article Page by Rounak Polley (@cfjr) on CodePen.

Sometimes we forget the importance of writing correct html
Though almost every thing can be achieved by using <div> and <span> tags but it doesn't tell us what the content is actually on the page and where it is.
Semantic html is using html to reinforce structural meaning. It’s about using tags, class names, and ids that reinforce the meaning of the content within the tags. By adding semantic tags to our document, we provide additional information about that document, which aids in communication. Specifically, semantic tags make it clear to the browser what the meaning of a page and its content is. This clarity is also communicated to the search engines, ensuring that the right pages are delivered for the right queries.
(Now, that's really important everybody wants their website to rank higher in search engine results.)

Read more at HTML5 Semantic Elements .

(Here, in this example I haven't added the <nav>, <header> or <footer> as they can be separately designed).

Now, actually getting in the making of the article page. Article pages have been extremely common on the internet since the beginning and continue to do so weather in form of blogs, news etc.
When the article in itself is big it must be broken down into sections using <section> tags with individual <headers> and the <article> itself needs an <header>. Placing the images in <figure> with optional <figcaption> is a good practice and of course, <img> must have an alt attribute.

But, we can do much more, because for web design magic is in the details.
We can facilitate the user in finding the right content within our article it can be done by adding an in-page navigation a way to do that is using <aside> with role="navigation" (simplifies things for assistive technologies). Again instead of using simple anchors with links we can use jQuery to indicate the part of article the user is currently on and scroll smoothly through individual parts.

Next, a responsive design (using Bootstrap) is always great !

If you are still using table layout it's time you learn Bootstrap because using table to layout pages is an extremely bad practice.
(Why the web-developer walked out of the café ? Because he didn't like the table-layout !)

When using Bootstrap instead explicitly specifying the width and/or height of images we can just add another 'row' in the present column (or group of columns) and specify how much width we want the image to take within that (adding appropriate Bootstrap call to the <img> tag) and by default aspect ratio is maintained.
It's like nesting Bootstrap rows (rows within rows).

We should always check our design in the developer tools emulator and by resizing the browser in every way possible. Also, among Chrome, Mozila, Edge and IE I have found that IE gives more troubles (no doubt folks hate it creating all the memes & posts on IE). So, check on IE as well (because people out there still use it and it's not that bad actually).
So, I found that the fixed positioned <aside> was actually getting partially hidden so I had to add an overflow-y : auto.

Simple design is sometimes more elegant and appropriate. Instead of using lot of colours and fancy fonts simple and clear fonts and various shades of well matched grey usually does the trick.

Last, but not the least we can add <summary> here, I have put some quotes (using <q> instead of regular " ").

For more details ...

See the Pen Semantically correct Responsive Design of an Interactive Article Page by Rounak Polley (@cfjr) on CodePen.

Designing a simple Home Page

Rounak Polley — Thu, 17 Aug 2017 20:54:24 +0000

See the Pen Simple Home Page by Rounak Polley (@cfjr) on CodePen.

Firstly, there is no specific way a homepage should look it all depends on personal taste and the purpose of making the website. Even though some features tend to remain more or less constant. Like all home pages have a navigation bar, a hero area, call to action buttons, gorgeous background image and perhaps a tag line.

So, we first need to decide how much content we want on our home-page. According to that we can determine how many tabs we need in the navigation bar do we need a search box or perhaps a drop-down list etc. Other deciding factors are the call to action buttons (like Log-in, Sign-up, Explore etc).

After deciding on all the 'primary requirements' there are still some simple yet cool effects that we can use to make our Home Page look great and can be incorporated in almost all design scenarios. A few of these I will describe here.

Navbar

The most important part of our home page. Sometimes we want the nav-bar to stick on top of our page or maybe change the font size of nav-bar links (For example - the font size is bigger initial at the top of the and as the user scrolls down it gradually becomes smaller etc).

$(document).scroll(function() 
    {
            scroll_position = $(this).scrollTop(); //current vertical position of the scroll bar 
            if(scroll_position > threshold)
            {   
                //style of navbar after crossing 'threshold'
            } 
            else 
            {   
                //style of navbar before crossing 'threshold'
            }
     });

Here, the threshold can be a value in pixels or something like $('#threshold__element_id').offset().top such that crossing a particular element triggers the change in style.
Using the Bootstrap frame work makes the life a lot more easier because we can easily resize the nav-bar to a Hamburger menu button for mobile devices.
Note : for a more gradual effect we can use if else if .. else ladder andd change the styling step by step.

Background

Certainly a beautiful and appropriate background image or graphics works nicely be adding a subtle effect like parallax effect. Parallax effect when the background image moves at a different speed than the foreground content while scrolling and the background image smoothly transforms.
The trick is to keep the foreground content's height much smaller than the actual viewpoint height.

Scroll Assist or Auto Scroll

Again this is very common because most of the webpages features some sort of buttons or icons like 'Top' or 'Back to Top'. This can be done easily be using an anchor element <a href="#target_id">Auto Scroll</a>.
But this makes the scroll abrupt what we can do to make it more elegant is by adding a simple animation to the click event handler of the desired element.
$('html, body').animate({ scrollTop: $('#scroll_to_id').offset().top }, 1000);
1000 is nothing but the time period of animation in miliseconds (i.e. 1s).

For the entire code and explanation...

See the Pen Simple Home Page by Rounak Polley (@cfjr) on CodePen.

Finding Path of Packets

Rounak Polley — Mon, 14 Aug 2017 12:31:19 +0000

We know data travels across the internet in small packets. But it does not fly from one computer to another computer instead it passes through various network devices. But, can we determine an approximate path through which the packets travel ?
The answer is yes!

For example the path of accessing www.facebook.com form Kolkata (India) looks like this.
(Note : Here I have joined server locations with straight lines for simplicity)

It can be done by using tracert command on Windows which is equivalent to traceroute command on Mac and Linux.
Note : These commands take some time to execute so be patient or to cancel mid-way press ctrl+c.

tracert or traceroute displays the route taken by packets from a local system to reach a remote server/host over an IP network (network that uses IP to send and receive messages between one or more computers).

tracert sends ICMP (Internet Control Message Protocol) echo packets to the destination and listens for the reply.
Trace route sets the TTL to 1 and increments it for every hop. The routers receiving the message decrement this value and when it reaches 0 they reply a message that the TTL has reached zero. This reply then tells client (which executed the command) from where it has returned. This process continues until the Destination is reached.

Following is a tracert on www.facebook.com. That I have used to plot the map shown above.

C:\Users\ROUNAK POLLEY>tracert www.facebook.com

Tracing route to star-mini.c10r.facebook.com [157.240.13.35]
over a maximum of 30 hops:

  1     2 ms     1 ms     1 ms  192.168.0.1
  2     4 ms     3 ms     3 ms  172.17.149.1
  3     7 ms    21 ms    13 ms  node-203-171-243-1.alliancebroadband.in [203.171.243.1]
  4     7 ms     7 ms     8 ms  192.168.199.109
  5     4 ms     4 ms     4 ms  node-203-171-240-1.alliancebroadband.in [203.171.240.1]
  6    42 ms    45 ms    46 ms  172.31.180.57
  7    42 ms    43 ms    42 ms  ix-ae-4-2.tcore1.CXR-Chennai.as6453.net [180.87.36.9]
  8    84 ms    77 ms    78 ms  if-ae-3-3.tcore2.CXR-Chennai.as6453.net [180.87.36.6]
  9    74 ms    75 ms    75 ms  if-ae-6-2.tcore2.SVW-Singapore.as6453.net [180.87.37.14]
 10    94 ms    81 ms    77 ms  180.87.15.246
 11    77 ms    78 ms    77 ms  po121.asw02.sin1.tfbnw.net [173.252.64.50]
 12    78 ms    77 ms    78 ms  po224.psw04.sin6.tfbnw.net [157.240.34.51]
 13    77 ms    76 ms    79 ms  157.240.36.117
 14    78 ms    76 ms    76 ms  edge-star-mini-shv-02-sin6.facebook.com [157.240.13.35]

Trace complete.

Output of the command :

The output is divided into columns which are

hop Number, RTT 1, RTT 2, RTT 3 Domain Name and IP Address
RTT stands for Round Trip Time.

Here 192.168.0.1 is the IP address of my router. And alliancebroadband.in is my ISP (Internet Service Provider) etc.
If a router does not respond within a timeout (TTL) then asterisk is printed. For example :

 3     *        *        *     Request timed out. 
 4     5 ms     *        *     node-203-171-243-1.alliancebroadband.in[203.171.243.1]

Generally when we use a IP location finder on the IP addresses returned by tracert we see that some of the IP(s) are private. This is due to the fact that these are the internal IP(s) of servers/gateways of some organizations.

'Hops' are nothing but the computers, routers, or any devices between the source and the destination.
For using different options with tracert type 'tracert' and press 'enter' (In the command prompt). It will show all the available syntax.

To visualize the physical locations we just use any IP Geolocation service like https://www.iplocation.net . And then simply plot them on the map.