Forem: Manan Gouhari

Presentation goof-ups are humbling

Manan Gouhari — Sun, 22 Nov 2020 20:44:15 +0000

Not a tech post, but as this is the only place I blog, y'all will have to deal with this type of post until I get my own blog up and running. Here's to hoping y'all don't mind :)

Act 1: The Setup

We had an idea-pitching competition in our Uni, and about 20 teams participated. The top 7 were selected for the final round, and yay we were one of them.

In the finals, we had to present our idea in front of three judges through one of the most torturous software of this age, Microsoft Teams :p

Act 2: The goof-up

As you can recognize from the title, we bombed the presentation really hard.

Four of us ran into one disaster after another, non-stop.
The audio won't work, terrible lag, people speaking the wrong part, and whatnot.

By now you can guess that we didn't win _(--)/

Act 3: The Conclusion

To be honest, it was a humbling experience to go through. Being in tech usually detaches you from the reality of how fickle it is.

I mean in 2020 when companies are starting to build mind-blowing stuff in VR & AR, start-ups are working towards full-blow metaverse, here we're having audio issues due to our stupid internet.

But I value this experience, speaking in public scares me.
Right before my turn, my pulse starts to race.

This experience allowed me to tackle this low-key fear head-on and I've decided to keep on doing the same by seeking out as many opportunities as I can to speak/present in public.

Act 4: The Ask

While I'll probably stay away from idea-pitching competitions for a byte,
I'm looking forward to speaking at tech conferences, even if it's a small 5-10 minutes talk.

In case you're somebody who hosts a tech-conference or knows somebody who hosts a tech-conference, please let me know if you've scope to squeeze in one short talk.

If you've made it this far, thanks a lot for reading.
You can reach out to me on Twitter - @manangouhari

Comprehensive guide to HTML and CSS

Manan Gouhari — Fri, 12 Jun 2020 16:22:39 +0000

There are three components that go into frontend development - html, css and javascript.

HTML is the structure of the website.
CSS is the styles on the website.
Javascript brings in functionality to the website.

HTML and CSS are not programming language per se(people have been debating about it for ages.)
But Javascript is a programming language.

At a beginner level, you can create AMAZING, STUNNING websites with just HTML and CSS.

HTML and CSS are super easy to learn, believe me.
But it takes time to master the art of using them in websites to create compelling layouts like the one in the below photo.

First step is to get good at HTML and CSS, here are a few resources for you -

Learning Platforms -

Freecodecamp - Awesome platform to interactively learn web development, I can't stress on how complete it is. All for free.
Codecademy - It's mostly a paid platform but their basic HTML and CSS course is free! Worth giving a look.
Scrimba - An interesting platform for sure. Think of it as interactive courses. You can look at and edit the code while you're watching the course! Tons of free courses over here!

Crash courses on Youtube(GOLD) -

Basic tutorials through projects -

Best websites/blogs -

Instagram carousels worth checking out -

(I truly believe there's a lot of value all over Instagram, you just gotta dig it up)

Basics of HTML and CSS by @iamharsh.dev -CSS Crash Course by @iamharsh.dev

Tools -

Websites that can make your life easy as a frontend developer.

coolors.co - Generate beautiful color palletes.
Unsplash - Find stock images for your project.
Fontawesome - ICONS(free and paid)
Heroicons - ICONS(all free)
Google fonts - Find fonts for your website.
uiGradients - Amazing gradients for your UI!
Box shadow generator

Conclusion -

Once you're good at HTML and CSS, dive into Javascript and Javascript frameworks.
A nice way to practice is to pick up a Frontend Mentor Challenge and trying to solve those.
One other thing that works really well for me is watch youtube videos where a person is making a website, be it a tutorial or live stream, it really exposes the ideology that goes behind breaking the website into pieces and implementing it.

If any of y'all want to contact me, hit me up on Instagram at @manan.code.

All the best on your journey into frontend web development!

A peak into the architecture at covidfyi.in

Manan Gouhari — Sun, 17 May 2020 17:28:37 +0000

We've been working on covidfyi.in for almost 2 months now and have gone through significant-tech changes already.

What do we do?

We're a platform where the data for all the government released resources like hospitals, helplines, doctors, etc are aggregated by our dedicated data team and that's presented on our frontend in an easy to find manner.

v1 architecture -

We started with our backend made in Django and PostgreSQL and hosted on Heroku.
But quick enough, we started running into limitations.

Limitations of our initial architecture -

First was, Heroku dyno sleeps after 30 minutes of inactivity, hence, the first request after the server has gone to sleep takes too long to respond, upwards of 10 seconds.

The second limitation is more niche, our data team is using a google sheet to manage and collate the data - they felt a form-based admin dashboard would be too restrictive. So, whenever the data team updated the google sheet, we in the tech team downloaded the CSV and manually updated the database by running a pre-defined utility command. This was also limiting in another sense - whenever the data team wanted to add a new column, we would manually have to add that in the database schema inside our code - too tedious in my opinion.
We searched, but in no way, we could figure out how to include new columns in our schema at runtime. But this research wasn't fruitful at least when it was limited to the scope of an RDBMS.

Now, how did we overcome these limitations? Keep reading to find out :)

Moving towards our new architecture -

The first step was to shift from Django to Flask, because flask is lightweight and Django is an elephant, we didn't want a huge framework standing in the way of what we wanted to accomplish.

In the second step, we shifted from PostgreSQL to MongoDB, this is the change that brought the MOST return on investment. But why? it simplified our workflow by at least 100 times.

It's simple what we did, and makes me think how we were stupid enough to not think of this in the first place.
I wrote a script that extracts the JSON from our google sheet, sanitized the response, and inserted it into our MongoDB database as is and this script runs every 12 hours to update our DB.
This does two things - simplifies the workflow, and also at the same time allows for a dynamic schema.

Thirdly, we shifted from Heroku to a VM on GCP, this eliminated most of our performance issues.
And did I mention, we've a caching layer setup using Redis which caches most of our API responses, hence makes it super quick.

TLDR -

In short, our current architecture is - Flask + MongoDB + Redis + GCP.

Contribute -

If you would like to contribute to our project, hit me up on Instagram at @manan.code, we're looking for both React and Flask dev.
Our git repos - covidfyi.

If you've got any suggestions of how we could improve our architecture, drop in a comments please.

Flexbox: flex-direction and justify-content

Manan Gouhari — Wed, 13 May 2020 12:32:33 +0000

This post will dive into these two flexbox properties - flex-direction and justify-content.
For a more practical demonstration of building layouts with flexbox, take a look at the previous post of mine -

How do you build houses with Flexbox?

Manan Gouhari ・ Mar 22 ・ 4 min read

#css #html #tutorial

We're going to see all three properties in action with the help of three boxes.

1. `flex-direction` -

By default, flex-direction is set to row if nothing is specified.
Here's what happens when you set flex-direction to column.

flex-direction can be set to following values -

row
column
row-reverse
column-reverse

But mostly you'll find yourself using either row or column.

2. `justify-content` -

It is used to define how is content spaced out along the main-axis(main-axis is set by flex-direction).

It can be set to following values -

flex-start - items are placed from the start of axis
flex-end - items are placed at the end of the axis
center - items are placed at the center of the axis
space-between - items are spread out with the space between them being equal, first item is at start of the axis and the last element is at end of the axis.
space-around - items are spread out with equal space on either side
space-evenly - items are spread out with each empty space being equal.

Let's also take a look at how these properties behave when flex-direction is set to column.

Well, that is everything that I know about these two properties.
Which more flexbox properties would you like me to explore in future posts?

Also, a reminder: for more practical demonstration of how to build layouts with flexbox and what's the thought process behind it, check out my other blog post -

How do you build houses with Flexbox?

Manan Gouhari ・ Mar 22 ・ 4 min read

#css #html #tutorial

How do you build houses with Flexbox?

Manan Gouhari — Sun, 22 Mar 2020 20:00:50 +0000

I recently learned Flexbox, now it's time to give a practical demonstration for you people, the lovely DEV Community.

A layout is a website's house😂

Let's build this blog layout.

Now let's think of this step by step.

Nav covers approximately 1/10th area of the whole screen vertically and the rest of it goes to the main area.

<body>
<nav>NAV</nav>
<main>MAIN</main>
</body>

Styles -

*{
    padding: 0;
    margin: 0;
}
body{
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: 100vw;
}
nav{
    flex-grow: 1;
}

main{
    flex-grow: 10;
}

First, on the body we add display: flex, this is necessary as flexbox has to be activated on the parent container, to layout the elements inside it using flexbox.
Now there are two main ways flexbox can be aligned, row or column. Row is horizontal, column is vertical.
In this case, we want them horizontally aligned so we add flex-direction: row
Now talking about flex-grow, it defines how much the item will grow relative to the other elements in the flex container.
We want the main area to take up 10x space compared to the nav so we add flex-grow: 10 to main and flex-grow: 1 to nav.

Another point to keep in mind, the flex properties of the parent container concerns only its direct children, not the elements inside the children elements.
Now moving on to the main area, this is what we want to do -

Now, what would we do to achieve it?

Both header and content are children of the main, we need to turn flexbox on, on main element.

header and content are aligned vertically, i.e. in a column with header taking up about 1/8th space and rest of it to the content container.

<body>
    <nav>NAV</nav>
    <main>
        <header>HEADER</header>
        <section class="content">CONTENT</section>
    </main>
</body>

/* styles */
main{
    flex-grow: 10;
    display: flex;
    flex-direction: column;
}
header{
    flex-grow: 1;
}
.content{
    flex-grow: 8;  
}

When you see the first layout image, you'll notice the posts area and aside are under the .content area, so now we gotta turn up the flex on .contents
container. This is how we want it to be -

        <section class="content">
            <section class = "posts">
            POSTS
            </section>
            <aside>ASIDE</aside>
        </section>

.content{
    flex-grow: 8;   
    display: flex;
}

.posts{
    flex-grow: 5;
}
aside{
    flex-grow: 1;
    height: 40vh;
}

Again, following the same drill that we've in the previous parts of this layout added display: flex to .contents and then decided what proportions should its children be in by using flex-grow.
Now moving onto the last part of this layout,
the individual posts under the .posts container. I think this is the simplest one out of all others in this tutorial till now.

Now .posts will be our parent flex container.

            <section class = "posts">
                <section class="post">POST</section>
                <section class="post">POST</section>
                <section class="post">POST</section>
            </section>

.posts{
    flex-grow: 5;
    display: flex;
    flex-direction: column;
}

.post{
    flex-grow: 1;
}

All we gotta do is turn up the flex on .posts and specify flex-direction to column. We specif flex-grow: 1 on .post to indicate that each post should take up equal space, there are other ways to do this too, by using justify-content and align-items but I find flex-grow to be the most intuitive.

Now that we're done with our layout, here's the final code -

<body>
    <nav>NAV</nav>
    <main>
        <header>HEADER</header>
        <section class="content">
            <section class = "posts">
                <section class="post">POST</section>
                <section class="post">POST</section>
                <section class="post">POST</section>
            </section>
            <aside>ASIDE</aside>
        </section>
    </main>
</body>

*{
    padding: 0;
    margin: 0;
}
body{
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: 100vw;
}
nav{
    flex-grow: 1;
}

main{
    flex-grow: 10;
    display: flex;
    flex-direction: column;
}
header{
    flex-grow: 1;   
}
.content{
    flex-grow: 8;    
    display: flex;
}

aside{
    flex-grow: 1;
    height: 40vh;
}

.posts{
    flex-grow: 5;
    display: flex;
    flex-direction: column;
}

.post{
    flex-grow: 1;
}

Conclusion

Once you understand flexbox, building layouts in it comes to you almost intuitively. The best tip to get better at it is to practice.
Top-down approach works very well with Flexbox, first think of your major containers, how are they related and then the content inside them, step by step.
There's much more to flexbox that hasn't been explored in this post like justify-content, align-items, flex-basis, flex-shrink etc. Go on explore!

Side note - Of course for a normal layout, there would be padding, margin, and colors involved which were forgone in this post for the sake of focusing solely on flexbox.

How do you scrape Instagram?

Manan Gouhari — Sat, 21 Mar 2020 12:29:26 +0000

Recently, there have been talks of Instagram closing down its API and leaving access to only corporate partners.
Data scraping becomes even more important in this scenario because of Instagram's large user base. Instagram is a platform full of data in its every nook and cranny.
I decided to start by scraping whatever data we can find on a person's account page, which you can access at https://instagram.com/

Let's take a look at my page for example at https://instagram.com/manan.code

This is the main area I am interested in, what all could we scrape from here and how? Right-click on the page and click view page source to see the source file behind it.
You'll see something like this -

Now at first look, this seems incomprehensible and it seems almost impossible to find any data from this, it's just sea of link and script tags.
But the data is there somewhere for sure.
I did some digging and found out the script tag that consists basically everything we need.

Now that we know where the data is, let's move on to the code.
We'll use the requests module and BeautifulSoup.

So till this point in the code, we've requested Instagram and got the source, after that we've converted it to a BeautifulSoup object to make it easy to find the script tag we need. After converting it to BeautifulSoup object, we've used the find_all function in the BeautifulSoup library and found all the script tags, by a little trial and error, I discovered, the script tag we need is the 5th one, so we index it appropriately and find the script tag we need.
But, we need to do one more thing, right now what we have is not a string, we can't slice it to find what we need. Hence, we access the contents of the script tag.
The next step is to find out where's the part we need.

Now what we've done is, if you remember, the javascript object having all the data started from {"config":, I've simply used a little string processing to slice out the whole javascript object and having it isolated, convert it to a JSON object using loads from the json package in the standard library.
If you print data_json, this is what you get -

On looking closely, I figured out all the right keys to the data we need, here is the result.

and this marks the end of our journey to scraping Instagram!
Check out my video where I go over the same thing -

Flexbox changed my life, bye bye boostrap

Manan Gouhari — Sun, 15 Mar 2020 20:48:20 +0000

How do you build houses with Flexbox?

Manan Gouhari ・ Mar 22 '20 ・ 4 min read

#css #html #tutorial

Learning flexbox changed my life.

Well, you could say it's an overstatement, but worth it.
To add a little context, I am a developer focused on backend web development, so I simply used to use a framework like Bootstrap for two major reasons -

Responsiveness
Creating layouts using the grid system

But recently I had been getting frustrated with how ugly and generic my sites would end up looking because of Bootstrap. I knew it in me if I could conquer a beast like backend development, how tough could CSS be? This initiated my foray into the pure custom wrote CSS.

I honestly never felt that I would have fun writing CSS and designing UIs, but man it is addictive.
When you combine basic CSS skills with a sprinkle of aesthetic sense, it's a combination worth moving people. Non-tech people can't usually appreciate what goes on at the backend of a software, UI, the frontend is all they see, the cover of the book does have quite a lasting impact.

Flexbox provided me the power to tackle both, mobile-responsiveness and making layouts through pure CSS, now I won't ever use Bootstrap unless it's forced upon me.
Flexbox has a few core concepts, when applied top-down, help you in creating great layouts with ease.
What do I mean by applying the flexbox concepts top-down?
Think of your whole layout as a flexbox container, then drill down on the individual components. Your navigation bar, lay it out using flexbox. Your main area, lay it out using flexbox. Information cards, yes, flexbox will help you lay them out too.

Resources I found most effective -

Stay tuned, I am planning to write a blog post explaining the intricacies of Flexbox.
Edit - Here's the promised blog post -

How do you build houses with Flexbox?

Manan Gouhari ・ Mar 22 '20 ・ 4 min read

#css #html #tutorial

If you find anything in this post that requires correction, please let me know. (this was a very quick and spontaneous write.)

Forem: Manan Gouhari

Presentation goof-ups are humbling

Act 1: The Setup

Act 2: The goof-up

Act 3: The Conclusion

Act 4: The Ask

Comprehensive guide to HTML and CSS

First step is to get good at HTML and CSS, here are a few resources for you -

Learning Platforms -

Crash courses on Youtube(GOLD) -

Basic tutorials through projects -

Best websites/blogs -

Instagram carousels worth checking out -

By @thecodercoder

By @thecodecrumbs

By @duanecreates

Tools -

Conclusion -

A peak into the architecture at covidfyi.in

What do we do?

v1 architecture -

Limitations of our initial architecture -

Moving towards our new architecture -

TLDR -

Contribute -

Flexbox: flex-direction and justify-content

How do you build houses with Flexbox?

Manan Gouhari ・ Mar 22 ・ 4 min read

1. flex-direction -

2. justify-content -

How do you build houses with Flexbox?

Manan Gouhari ・ Mar 22 ・ 4 min read

How do you build houses with Flexbox?

Conclusion

How do you scrape Instagram?

Flexbox changed my life, bye bye boostrap

How do you build houses with Flexbox?

Manan Gouhari ・ Mar 22 '20 ・ 4 min read

Learning flexbox changed my life.

Resources I found most effective -

How do you build houses with Flexbox?

Manan Gouhari ・ Mar 22 '20 ・ 4 min read

1. `flex-direction` -

2. `justify-content` -