DEV Community: Arihant Verma

Interfaces, Polymorphism, Symbols and Iterators in JavaScript

Arihant Verma — Thu, 22 Aug 2024 11:40:00 +0000

Workaround for _next/data URLs throwing 404, for multiple Next.js Apps Running On Same Domain

Arihant Verma — Mon, 19 Jul 2021 12:49:37 +0000

If you have to use multiple Next.js apps on a simple domain, the only straightforward way for you to do that is to have baseUrl option set in next.config.js. But the problem with that is, you'll have different URLs for different apps on your domain:

example.com/app-1/some-route
example.com/app-2/some-other-route

If you want to do have them as so:

example.com/some-route ( from app-1 )
example.com/some-other-route ( from app-2 )

you're a little out of luck. My first hunch was that it'd be possible to use the baseUrl but change the anchor links from

/app-1/some-route-on-some-page
/app-2/some-route-on-some-page

some-route-on-some-page
some-route-on-some-page

by using the as property of next/link by masking the URLs that users will see, while still being able to request the correct base-path-added url from next server. As much as I could google, it's not possible. If you've made it work, please tell me on the twitter, I'd be very grateful 🌻.

I ended up making it work at my job by doing a bunch of things.

Using asset prefix to make a distinguishing factor between assets of different next.js apps, along with a next.js re write rule.

// next.config.js
module.exports = {
  assetPrefix: BASE_PREFIX_FOR_APP,
  async rewrites(){
    return [
      {
        source: `${BASE_PREFIX_FOR_APP}/_next/:path*`,
        destination: '_next/:path*'
      }
    ]
  }
}

With this, the client will request assets from ${BASE_PREFIX_FOR_APP}/_next/:path*, but it'll reach your app at a path that it serves assets from /_next/:path* ( /_next/static/* to be more precise ).

In a similar fashion, you'd handle images and api request paths

// next.config.js
module.exports = {
  assetPrefix: BASE_PREFIX_FOR_APP,
  async rewrites(){
    return [
      {
        /** ASSET PREFIX */
        source: `${BASE_PREFIX_FOR_APP}/_next/:path*`,
        destination: '/_next/:path*'
      },
      {
        /** IMAGE PREFIX */
        source: `${BASE_PREFIX_FOR_APP}/images/:query*`,
        destination: '/_next/image/:query*'
      },
      /** API PREFIX */
      {
        source: `${BASE_PREFIX_FOR_APP}/api/:path*`,
        destination: '/api/:path*'
      }
    ]
  }
}

For images you'll have to wrap next/image component in your own component, to request your images with the prefix BASE_PREFIX_FOR_APP, using a custom Next.js image loader

// CustomImage.tsx
import Image from 'next/image'

const CustomImage: typeof Image = props => {
  const finalProps = {
    props,
    loader({ src, width, quality } {
      const urlQuery = `?url=/images${src}`
      return `/${BASE_PREFIX_FOR_APP}/images${urlQuery}&w=${width}&q=${quality ?? 75}`
    })
  }
}

export default CustomImage;

All was well and good, and the apps were running fine with the requirements that we had: not having to change our links with app specific base path prefix. But there was still a problem.

When you use a next/link to navigate to another route, and that upcoming route has a getServerSideProps method implemented, Next.js will send an API request to the server, which will run getServerSideProps and return a JSON containing the result. You can read about this in Next.js docs here. That resulted JSON fetch request data is used to render the upcoming route. Those data fetch requests have a path that looks like this: _next/data/<build-id>/<route-slug>.json.

The problem with that for our context — to be able to run multiple Next.js apps on same domain without base url prefix — is that Next.js doesn't give us a way to control this path. Which is to say there's no data fetch request path URL prefix which Next.js gives as a configuration option. Because of that we have a hard time finding a distinguishing factor for data URLs for multiple apps.

The fix we ended up using is as follows:

Remember that the data fetch url looks like _next/data/<build-id>/<route_slug>.json. If we could have a way generate unique <build-id> for all our apps, we could use that and write a re write rule at load balancer level to distinguish the request between multiple Next.js apps. By default the <build-id> is a random id generated by Next.js build process for each build. Thankfully they give us a way to control the build id.

We ended up using a package called next-build-id to configure a custom build id where we gave a app-1-<git-commitSHA> signature and added a re write rule in our load balancer for incoming request host name having app-1 for first app, app-2 for second app and so on and so forth, to solve this.

Hope this was helpful.

The Problem With Rockstar Culture In Tech

Arihant Verma — Fri, 02 Jul 2021 19:05:34 +0000

Disclaimer

These points are made out of observation and experience and in no way attempts to generalise.

Let's Talk Rockstar Culture In Tech

It's draining, impersonal and segregating but monetarily rewarding.
Values only outputs rather than processes that enable tech innovations and helps multiple people reach results. In this process, the silent hard workers, who might have tremendous potential to make tech that makes business product development extremely easy are seldom recognized.
It's doesn't necessarily lead to collaboration.
It isn't a good motivator.
It's tightly coupled with performance based appraisal. It feels like school and college exams all over again.

Imagine being able to choose between two motivators
1. Having the privilege to work with the people who are much smarter than you.
2. Chasing a variable pay based on performance, where most of the work demands that you sit alone and code.
Which one would you choose? It's surprising – the amount of work that a company can get done if they hire top of the skill developers, drop the appraisal system altogether and just pay them properly instead, while leaving them to do wonderful things together.
It doesn't aid learning. But then again, most of the tech jobs are a tradeoff — making things just work, rather than doing things properly in the best way possible, because of course, the company doesn't have time to slow down the pace. If they do they tend to suffer. Maybe there's a middle ground? ( Hint: It's hiring people smarter than each other ).
It values hustling culture: late night working, celebrating achieving things quickly at the cost of mental and physical health. Of course HR and leadership in such companies would ask their employees to value their health first. But the stature in doing so silently slips through the back door, because in doing so, one wouldn't be able to perform as much as over working would help achieve.
It leaves people, especially programmers in this weird mental space where when once in a blue moon they get free time before their late bed time, they feel restless, jittery, not being able to rest, because they've gotten so used to working that they don't know what to do otherwise, anymore.

Observations and Experiences Earning Money Through Codementor

Arihant Verma — Tue, 04 May 2021 22:05:29 +0000

I don't remember when I started following Sunil on Twitter. He's a developer who — apart from his day job — invests a lot of time in curating development resources in Twitter threads. He has a significantly large Twitter following. He spends a lot of free time freelancing. He also writes ebooks about developer platforms, passive income generation, freelancing, his developer experiences, how to become a better developer, which he sells. Once, I saw him tweet about a platform called codementor.io. After that tweet I repeatedly saw him tweet about how easy it was and how nice it felt to just help someone out with their doubts or help debug somebody's code and make easy money out of it.

So I decided to try it out. And he was right. It really is easy pocket money coming in on the side. I earned a little over my rent's money in about a month, helping people with their doubts about JavaScript, React, Redux, Typescript and CSS styling in my free time.

I got to talk to a lot of people, ranging from different behaviours, cultures, hailing from different countries, with varied experience levels.

A couple of super humble and eager to learn university students. What I learnt observing how they learnt was how aggresive they were towards getting their code working, not minding if they were doing things properly, or if they were handling edge cases or doing error handling upfront.
A person who had taken a project from someone and was seeking out help on it. Kinda like subletting.
A person in his mid 30s or early 40s. A mobile app developer, who had just inherited a React Redux web app code in a Create React App setup. He took notes by hand old school. I was able to help him get a general understanding of React and JavaScript ecosystem at large, and give him detailed suggestions as we walked through the codebase – surprisingly well written and commented. The amount of research, learning and follow up that he conveyed through chat messages afterwards was inspiring. He came up with smart doubts and questions and I loved resolving them.
A bootcamp student, a woman, who was doing her last project assignment. React on frontend with a Ruby on Rails backend. She had trouble making sense of React state across components and React Router usage. She sounded polite but panicked. She had a southern US accent. It was the first time I'd talked and listened to someone with one, outside of Hollywood movies. It was inspiring that she was seeking help. But by the sound of her voice I sensed that nobody until then had been able to explain to her some of the concepts that I did. When I asked her if I could help her run VS Code live share session because zoom's remote control was excruciatingly slow, she got worried that the live session will be live for anybody to see, which was sweet. But by the amount of tension she seemed to be was evident, even though she did a good job to cover it up with her naturally calming and polite voice. She asked me if I'd be willing to help her learn JavaScript in a better way, since things got rushed, as they often do, in the bootcamp.
A machine learning veteran. Having sold a couple of technology companies in the US, he had decided to not start a new one and instead work with an existing company. Hailing from Malleshwaram in Bangalore, we bonded over having lived in the same city. He told me that he had gone to Kendra Vidyalaya there. He then went onto study in the US and eventually settled there. He was trying UI development with React for the first time, working on a personal project. Being the experienced person he is, he had already found a couple of hackish solutions, albeit wrong, to the problem he had approached on the platform for. When I helped him learn to resolve the problem in the most correct 'React-y' way, he was elated. He gave me his number and email id and asked me to talk with him in case I'd need a job in Bangalore anytime, with possibly the double income that I'd have in mind. I was humbled and felt a little shy. I told him, I'd definitely let him know when need be. I helped him once again with some layouting.

From this experience I observed a very alarming fact – I had come across with all the people who had either started themselves out, or somebody else had started them out to learn web development in a way that might be misleading. I say that because I was started with learning web development the same way — through focussing too much on frameworks and not stressing more on the underlying foundations.

The coming of a new bare bones React framework called Remix felt surprisingly liberating, because using it, one would actually be forced to code in a way that takes care of progressive enhancement (an app would work fine end to end even without JavaScript with all the forms and things and what have you). Inspired by remix and Sarah Drasner's Github tagline

Comprehension Over Configuration

Over the next several weeks I'm going to embark on the journey to read through the web.dev codebase and share my learnings from there.

Stay tuned!

When I Woke Up To ₹ 28,000 Bill From Google Cloud Not Knowing Why

Arihant Verma — Sat, 13 Feb 2021 07:00:30 +0000

Until recently, like many of us, the first thing I used to do in the morning would be to check my mobile phone. I realised that it was taking about 20 mins to half an hour of my morning time. So I stopped doing it and replaced it with keeping my eyes closed and meditating instead for 15-20 mins. But the incident I'm going to tell you about happened when I still used to look up for my mobile phone first thing in the morning, in half asleep state, with one eye open and the other closed, hid behind the pillow contour.

On 3rd September, 2020, I woke up to an automated email from Google Cloud Platform. First response – shock. It was a bill of $377. That amount meant a lot because I didn't earn much in INR, and it was a significant portion of my salary. Without even opening my Google Cloud console, I started a chat with Google Cloud support. In about a couple of hours, they told me in detail what I was billed for.

I was billed for a Google Cloud project which had used Google Maps JavaScript APIs for over 2 months. I was so sure that I had done nothing wrong that I started telling this to the customer support over emails and chat messages. But they kept reiterating that my project had infact used Google Maps JavaScript APIs, for which I was charged.

I worked for Goibibo at the time. Goibibo is one of the largest online travel agencies in India. Two months before this happened, I was working on the hotels details page's Google Maps project — you know — to show the location of the hotel in the map, and all the points of interest around that hotel, and the ability to search for any location in reference to the hotel.

I read a partiular line in one of the Google Cloud support communication emails:

Just a quick disclaimer, we cannot reveal domain information if the usage is from a domain outside of your authorized ones due to our privacy and security policy.

And then it hit me.

Goibibo's google cloud account didn't have localhost added to their whitelist of allowed domains. So it was impossible to for me to develop locally. To avoid the round trip of having to find the required person, and request them to add localhost to the whitelist, and then start developing, I created a google cloud project from my personal account and started developing locally. I created an API key and enabled Google Maps JavaScript APIs against that key in my project. Here's how I kept both of the Goibibo's and my API keys in the code while developing:

/* Only use this key for production, comment the one below */
// export const googleMapsApiKey = `<goibibo account's api key>`;

/*
 * WARNING: Do not push the key to production. Is only meant
 * for development purposes only
*/
export const googleMapsApiKey = `<my personal account's api key>`;

I frantically checked the code in the main branch to see if I had accidetally forgotten to follow my own advice. That was in fact the case, and I did a big: 🤦🏽‍♂️

I git blamed the file to find the pull request which had enabled this blunder. Then I sent its screenshot to both the google cloud support, apologizing for an honest mistaken, and to my team's slack channel to blare loudly at them for not having done a decent code review.

I had also forgotten to restrict my personal account's API key to allow requests to Google Maps APIs from only localhost domain.

That meant that

2 months worth of Goibibo's Details Page traffic was charged against my personal account's project. Good thing that we had lazy loaded map, which meant that all the JavaScript and other files necessary to render google maps was loaded only when the user had scrolled down to the location section. It'd have cost a lot more, if the resources loaded as soon as the details page loaded.
Had someone extracted that API key by watching the API request from browser developer tools, they could have potentially bombarded requests to Google Maps APIs billed against my personal account from any domain.

I didn't detect this blunder for a month, because for the first month, google had used the $100 free credit that I had gotten from somewhere. So in the first month's billed it showed $0. It was only a month later that that month's $277 showed as amount charged on my credit card.

On multiple requests the Google Cloud team refunded that amount after taking confirmations from me that I had read and now understood all the ways to restrict access of api keys, and to set billing alerts on google cloud projects. After giving multiple assurances and acknowledgements that I had indeed read up all the docs that taught how to do all these things, I found peace. 🕊✌🏼☮️

Thinking About Writing As A Means Of Livelihood

Arihant Verma — Sat, 13 Feb 2021 06:48:39 +0000

History

In May 2015, during the last days of college, I kept expressing a wish which no body cared to reply or attend to. They had no reason to. I casually wished to my friends I wish we had something of our own, some of us, so that we wouldn't have to go away from each other and these memories and friendship. Some of my batchmates ended up doing their things. None of my close friends did. Ever since, I've been dreaming to start something of my own.

Thinking about starting something of one's own, Arjit Raj comes to mind. We were neighbours in final year of college in 2014-15. I remember our constant brain storming sessions. He was fondly called Andaman ( where his folks lived back then ). He was the topper of mechanical engineering batch. Always dreamt big. Right from the first year, he set targets, achievable goals. He'd sleep at 9pm, get up at 4am, and work towards whatever he wanted to do.

I remember in 2014, early on, as we entered our final year of engineering, he set a target to become a Quora top writer by December. He did it by September. In 2nd year, he had a bad internship experience. He decided to do something about it so that no Indian student would ever have to face what he did. He started curating internship experiences on internfeel. He included me in his endeavour and for some time I edited and posted internship experiences on the wordpress website.

He made udemy courses before it was cool and earned from them. He quit his first job out of college in about a couple of years and just started making stuff. Arjit always pampered me. I knew I didn't deserve his praise, but he still kept at it. I don't know what he initially saw in me. But he eventually decided to stop.

We had a fallout when I promised re making internfeel.com from scratch but never did. He was the first person to call me out on my tendency to over commit and not deliver at a consistent rate. After that I never promised anybody anything I couldn't do for them. In fact, I almost stopped committing. I haven't talked with him in years. Now that I've quit my job and have actively started a thought process to figure out ways of making a good living without being employed, only Arjit comes to the mind.

Scratch To Quit Job

I'm not special to have urges to quit job. I'm not even one of those people who have it hard with their bosses. Yet, I've constantly felt the urge to quit. In the last 2.4 years, I've had to have a staggering amount of commitment to not quit. I'm glad I did, and I learnt a lot along the way. Most of all, I learnt a very important skill in life – how to keep at something you do not particularly enjoy doing, with a sense of responsibility, ownership and gratefulness.

Though lesser salary has been a reason to constantly mull over if all the work that I was putting up was worth it, something bigger drove the urges to quit, more than getting paid less. To feel free is the simplest I can put it. If I can find ways to monetize the things I love to do, what better than that? That's what started to make me think a couple of months ago. Even if there'd be an initial struggle, wouldn't long term benefits come more quickly?

Ever since December last year, I've established one thing – whatever I do, if I don't find ways to earn an income on my own by the side, I'm going to keep having constant urges to quit. So this year I decided to start.

Taking A Serious Look At Writing

I love to write. I write short stories, poetry, essays and technical articles about code gymnastics. But I never wrote consistently. So I made two goals for myself. I want to get paid writing two kinds of articles.

Writing for news / literary magazines.
Writing for tech / coding magazines.

I want to write about stories and books that I read and hear. This way I'll get to read and listen more, and possibly get paid. Sounds really cool, doesn't it? I'm going to make it possible, and document everything – failures and successes, as I do so.

I want to write about the code that I read, because I want to read more code. So basically I'm just playing deals with myself.

I recently pitched an article to Smashing Magazine and got accepted. They pay for each article you write. Getting paid to do something of my own is the best incentive for me there has ever been.

Meanwhile, I'm working hard to bring to life an idea I've had for quite a while. That'll be the first ever end to end product I'd have worked on :) In all honestly, apart from all the reasons for trying to make this product — having a sustainable passive income while I sleep being one of them — I'm doing this to show it to Arjit, so that we could collaborate like we used to, but with me putting as much effort, life and vigour as he does.

This year I only have one resolution — establish this cycle:

make something self sustaining ➡️ earn through it ➡️ invest it back in learning ➡️ make something else with that learning ➡️ ∞