
Here are a few things I did this year and some goals for the coming year.

## Work

With continued [tough times](https://techcrunch.com/2023/12/14/one-click-checkout-bolt-another-round-of-layoffs/) at Bolt, morale was understandably low, and I was feeling burnt out. The tech job market has [continued its slump](https://www.wired.com/story/tech-jobs-layoffs-hiring/) this year, and  I was nervous about the risk involved in finding a new job especially since I'm on a work visa. Fortunately, everything worked out for the best! In September, I began working as a full-stack software engineer at [Tremendous](https://tremendous.com). Tremendous enables organizations to send one-off payments to people around the world. It's only been a few months, but I feel deeply invested in the product and I am eager to give my best in building and improving it. The team is fully remote and that by default means a lot of focus on clear written communication because people are also spread across the globe. Since there are no offices, the entire company meets for a weeklong offsite a couple of times a year. I honestly feel like I've found the perfect place for me. 

The imposter syndrome hits hard sometimes, as everyone on the team seems to have more experience than me, both with the tech stack and in the tech industry. However, it's an incredible opportunity to learn from some really talented engineers. I'm very thankful and I'll keep doing my best.

Besides the job change, this year Artificial Intelligence has changed the way work gets done (at least in my bubble). I've been heavily using Github co-pilot and ChatGPT for many tasks. Like any tool, AI in its current state has its trade-offs. It's an invaluable resource for navigating unfamiliar codebases, providing boiler plate code, or summarizing context. It's still ways away from understanding the context an engineer does but I'm excited see how things shape up in the future.  

## Running

The first half of the year flew by, and I didn't run as much as I would have liked, except for the occasional 5k. Towards the end of the year, I registered for a half-marathon but struggled to train consistently due to a variety of circumstances, like interviewing for a new role and travel. While these might sound like excuses, they felt justified at the time.

I've been running for years now without much improvement, usually just running until I hit whatever random distance target I had in my mind before I started or till I'm completely out of breath. Training for the half-marathon was different. I tried following an automated Nike Running Club plan with interval, recovery, long runs, etc. Despite its flaws, I noticed a clear improvement in my endurance, pace, and overall fitness. I truly enjoy running and maybe it is time I stopped doing the same thing over and over again hoping for a different outcome. 

<iframe
    src="https://runstats.netlify.com/2023"
    className="responsive-iframe"
    frameBorder="0"
    scrolling="no"
></iframe>

For next year, my goal is to either run a 5k in under 25 minutes or finish a marathon. I haven't decided which one to focus on yet, but I'm hoping it will be one of these.

## Travel

I was fortunate to travel quite a bit this year and learnt a bit about the places I visited: 

- [Mexico](/trip-to-mexico)
- [Portugal](/portugal)
- [Brazil](/a-week-in-rio-de-janeiro)
- Dominican Republic

and some places in the US and India. 

![(landscape) A beach in the Dominican Republic](/images/posts/2023-12-29-year-in-review-2023/a_beach_in_dominican_republic.jpg)

## Reading

I started many books this year but finished only a small subset of them. I'm happy about it though because trudging through a boring book just because you need to "finish" it, in my opinion, is not the best use of time. Most of the books I read this year were ones I randomly stumbled across in bookstores. Here are a few I really enjoyed reading:

-   **Crime and Punishment** by _Fyodor Dostoyefsky_
-   **The Gene** by _Siddhartha Mukherjee_
-   **You are what you watch** by _Walter Hickey_
-   **Leonardo Da Vinci** by _Walter Issacson_

## Movies

While this year's hyped movies like Oppenheimer and Barbie weren't my favorites, I discovered plenty of amazing films that I loved:

- [Anatomy of a Fall](https://www.imdb.com/title/tt17009710/)
- [Past Lives](https://www.imdb.com/title/tt13238346/)
- [Talk to Me](https://www.imdb.com/title/tt10638522/)

I also discovered some gems from the past that I would highly recommend:
- [Tokyo Sonata](https://www.imdb.com/title/tt0938341/)
- [Grave of the fireflies](https://www.imdb.com/title/tt0095327/)
- [Yi Yi](https://www.imdb.com/title/tt0244316/)

[Pi](https://www.imdb.com/title/tt0138704/) and [Oldboy](https://www.imdb.com/title/tt0364569/) were celebrating their 25th and 20th anniversaries, respectively, so I got to see remastered versions with live Q&As. That was quite an experience. Clint Mansell, who scored Pi (also [Lux Aeterna](https://www.youtube.com/watch?v=oc3Cq89P97Y&ab_channel=ClintMansell-Topic) from 'Requiem for a Dream') said he had no formal training. Since they couldn't afford consultations from industry professionals, there was no one to stop them from making unconventional creative choices. This experimental approach clearly paid off.

## Music

Whenever I come across a song I like, I obsessively listen to it on repeat till I get sick of it. This year, Milky Chance and Inhaler were a huge source of that obsession. I actually attended a Milky Chance concert and loved their songs so much that I'm apparently a top 0.5% fan on Spotify. That is insane! Here are some of my most played tracks this year:

<iframe
    src="https://open.spotify.com/embed/playlist/5GGnVPjsJHSL73nYbN6vT4?utm_source=generator&theme=0"
    width="100%"
    height="80"
    frameBorder="0"
    allowtransparency="true"
    allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
    loading="lazy"
></iframe>

## Misc.

This year was also signifant personally. My partner and I got engaged and we made rings for each other over a few sessions. It was an amazing experience to share that with her and whenever I look at my ring, it reminds me of the time spent making it together. Celebrating our 5-year anniversary at Alinea in Chicago was another highlight.

Years ago, I read "Exhalation" -- a collection of short stories by Ted Chiang, and the very first story, "The Merchant and the Alchemist's Gate," left a lasting impression. It's a tale of a magical gate that lets you see twenty years in the future, but you can't alter anything. If you don't see yourself, that means you are no longer around. The narrator questions the Alchemist: if you see yourself alive in the future, does that mean you're safe until then? The alchemist agrees. The narrator then wonders, "Could I then face any danger without fear, knowing I'll survive?" The alchemist's response really stuck with me:

> quote: It is also possible that a man who would make use of such a guarantee would not find his older self alive when he first used the gate

All this to say that I'm not really adventurous but this year I tried a few new things like Surfing and  Scuba Diving and that is pretty much the limit of "adventure" for me. It was fun though.

Other than that, I managed to write in my journal every day and I'm quite proud of that. Last year, I started to feel that I've been writing way too much and each day I'm producing more. There is a good chance that I'll never read most of what I've written in there. Now I think differently about it. First off, the main purpose of the journal is not to be read but for me to get it out in writing so I can see things rationally and logically. Secondly, with the advent of large language models, once there is a powerful enough setup that can run locally on my machine, I have plenty of ideas to get positive use out of everything I have so far and everything I'd write in the future.

I've been doing this since 2017 and while things are vastly different now, one thing is clear from this pattern --  I have a hard time following any "resolutions" I make, but I am hoping this next one will be it.


Things I achieved in 2023 and expectations for 2024.

Year in review - 2023


For the engineering offsite, the entire team went down to Rio de Janeiro for a week. It was great to meet everyone and put an actual face to the Slack profiles and the Zoom windows I'm used to interacting with on a daily basis. Besides work, a few days were reserved for events around the city. It was my very first time in Brazil and I got to learn a bit about the country and experience a small slice with great people who call it their home.

Brazil was likely one of the very first countries I'd heard of as a toddler all thanks to the Venga Boys' single '[To Brasil](https://youtu.be/UQ6LGrr8iEg?si=QvJjvqpiODgnpVZx)' which was a [huge hit](https://www.reddit.com/r/india/comments/bz8kaq/hello_from_brazil_i_got_some_questions_about_that/) in India[citation:1](#citation-1). Earliest impressions of Brazil for me were the beaches, the Amazon rainforest, and the carnival. Growing up, I'd learn to note a lot of similarities and differences between India and Brazil. Both countries are developing economies with a growing technology sector and amazing advances like [Pix and UPI](https://blog.ebanx.com/en/india-upi-and-brazilian-pix/) while dealing with their own unique set of problems[citation:2](#citation-2). I'd always wanted to visit and the offsite was an amazing opportunity.

![(landscape) Copacabana beach, Rio de Janeiro](/images/posts/2023-12-05-a-week-in-rio-de-janeiro/copacabana_beach.jpg)

The way Rio de Janeiro got its name is an interesting story. According to [Briannica](https://www.britannica.com/place/Rio-de-Janeiro-Brazil):

> quote: The name was given to the city’s original site by Portuguese navigators who arrived on January 1, 1502, and mistook the entrance of the bay for the mouth of a river (rio is the Portuguese word for “river” and janeiro the word for “January”).

It was common for the Portuguese explorers to name new places based on georgraphical features and *when* they landed. The bay/river mistake however is a myth according to the tour guide who showed us around Sugarloaf mountain. The Portuguese were excellent navigators and were unlikely to make a mistake like that. The etymology of the word "Rio" isn't necessarily a river, but a large body of water. Based on what I learnt in [Portugal](/portugal), I'm inclined to agree with the guide. 

The Sugarloaf mountain also has plenty of interesting stories. Apparently, it serves as a backdrop in the 1979 James Bond movie [Moonraker](https://www.imdb.com/title/tt0079574/). The cable car ride up the mountain can get crowded but it is absolutely worth the view. 

![(landscape) View from Sugarloaf mountain](/images/posts/2023-12-05-a-week-in-rio-de-janeiro/view_from_sugarloaf.jpg)

Obviously, no trip to Rio de Janerio is complete without visiting Christ the Redeemer. It is regarded as one of the 7 wonders of the world and it can be seen from a lot of places in the city. Lisbon also has a doppelgänger statue but the one in Rio is far more impressive. While Chirst the Redeemer is not a church, it does have a small chapel at the base used for religious ceremonies. What is fascinating to me is that recently Taylor Swift fans were able to campaign a welcome message to be [projected on the statue](https://www.architecturaldigest.com/story/taylor-swift-fans-successfully-lobby-for-a-temporary-christ-the-redeemer-statue-makeover) for the artist's South American tour by making a donation to charity. 

The statue is definitely a bucket list item, but even in my limited time exploring the city, it wasn't my most amazing experience. It was extremely hot and crowded with essentially no cover from the sun. I constantly ran into people with extended arms and their designated photographers lying flat on the ground trying to capture a forced perspective image.

![(popup) statue of Christ the Redeemer](/images/posts/2023-12-05-a-week-in-rio-de-janeiro/christ_the_redeemer.jpg)

I particularly enjoyed the food and especially the wonderful meal at [Assador](https://assador.com.br/). Other things that I really liked was the Tapioca crepe, açaí bowls, and their famous lemonade. Overall, it was an amazing experience and I'm grateful for the opportunity.  

P.S. Tremendous is [hiring](https://tremendous.com/careers)! 

<Citation
    numbers={[1,2]}
    content="
  The Dutch band Venga Boys released the song in 1997 and it is actually a remix of the 1939 song 'Aquarela do Brasil'. Why it was such a hit in India is anyones guess but I really love it when different cultures connect in random positive ways. | https://hellogeekpodcast.wordpress.com/2021/05/27/brazil-vengaboys-samba/
  Specific to Rio, my first introduction to Rio's Favelas was the great movie 'City of God'. Despite all the challenges, the jugaad is impressive. | https://youtu.be/c3BRTlHFpBU?si=a5aG9FMfW89hLfDc
"
/>

A week in Rio de Janeiro


"Yash" is one of the most common names in India in my generation. "Agrawal" is a fairly common last name as well. In fact, I personally know two other people who share the same first and last name as me. More explicitly, if you run a quick search on any social network for "Yash Agrawal", you are bound to find overwhelimg results and you'd need an additional filter to narrow it down to the "Yash Agrawal" you are looking for like the company they work for, something they were involved with, etc. 

Other people with common names would relate to not being able to find @name handles on any popular service. For most cases, I end up using a misspelling of my first and last name so that it is unique and same across all platforms. "yash.works" (where this post is hosted as of November 2023) is certainly not my first preference as the TLD is not commonly recongnized, but the common ones are all taken. The worst part is, they are not even being used! I don't expect to ever own yash.com as there is a whole company that would make better use of it, but if you own yash.io, please reach out to me! I'm willing to pay an unreasonable (for a personal domain) amount for it.   

I've joked many times about how my parents weren't creative enough while naming me. When I heard the alternatives they were considering, I was very glad they decided to go with Yash. I don't mean to offend anyone, it's just that I wouldn't have been able to pull it off. Some people have a very deep connection to their name while I don't feel the same way, I can see where they are coming from. Most people in my life don't even use my name to refer to me and instead use versions of son, friend, nicknames, etc.

"Yash" means prosperity and success. I guess that is what any parent would want for their child. When I moved to the US, I was very explicit about pronouncing my name right but I did not expect anyone to be able to say it the right way. I definitely appreciate best efforts at it. I've seen people either shorten their names, opt for a western-friendly name, call themselves as the wrong pronunciation, or get outright offended when someone else is not able to say it the way it is pronounced in their local language. For close to a decade, I got used to people calling me "Yaa-sh". I honestly don't understand why that happens. It isn't like there are no sounds for a single "a". Where did the extra "a" even come from? Even more bizzare was the situation when I worked with another person from India and their name's pronunciation had an "a" that would be right if it was pronounced "aa". What ended up happening was that I was called with "aa" and he was called with "a". It was just a matter of flipping it! Since I don't feel so strongly about it, I never bothered to do anything about it.

Recently, I was filling out my Slack profile for a new job and it asked for any pronunciation help. I decided to look up some suggestions as I am not well versed with phonetics. Someone mentioned that the name rhymes with 'rush' and I thought it was genius! What a simple way to convey this information! I've only started using this, but a couple of interactions I've had so far got it right without any prompting from me. I can't even explain it to myself but I felt at ease the moment I heard it pronounced the way it was intended. 




Rhymes with 'rush'


I've mainly worked as a product engineer but on occassions I've had to modifiy `Dockerfile` and `kubeconfig` files. The keyword there is 'modify'. Everything was already setup by some awesome infra engineers and for the work I had to do, I told them exactly what I needed and they provided detailed instructions on how to get it done and reviewed all of my PR changes. It is a bit embarrassing to admit that I've never containerized and deployed an app from scratch before.

In this article, I hope to provide a guide that would anyone to deploy a simple node application to AWS as a dockerized container. Let's start with setting up the node application with:

```shell
npm init -y
npm i express
```

In the app folder, create an `index.js` file and add the following code to it:

```javascript{lineNumbers}
const express = require("express");
const app = express();

const port = process.env.PORT || 8000;

app.get("/ping", (req, res) => {
    res.send("pong");
});

app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});
```

Once the app is deployed, when a GET `/ping` request is made, the server will respond with 'pong'

> callout: You can install something like 'nodemon' to reload builds

![Ping request postman (landscape)](/images/posts/2023-07-15-deploying-a-containerized-node-app-to-aws/ping_postman.png)

To deploy this app to AWS, we will first need to set it up to run in a container. Docker is a popular option so let's go with that.

```Dockerfile
# Use the official Node.js base image
FROM node:14

# Set the working directory inside the container
WORKDIR /app

# Copy package.json and package-lock.json to the working directory
COPY package*.json ./

# Install app dependencies
RUN npm install --production

# Copy the app's source code to the working directory
COPY . .

# Expose the port that the app will run on
EXPOSE 8000

# Start the app
CMD ["node", "index.js"]
```

![Docker local (landscape)](/images/posts/2023-07-15-deploying-a-containerized-node-app-to-aws/docker_local.png)

You can confirm that this is working on Postman. A question may arise then, why do we need this extra boilerplate. Why not just run the app directly? With so many dependencies, there are a lot of possible situations where the problem could be "it works on my machine". Now how do you actually deploy this to AWS?


A guide to deploying node apps with a database to AWS

Deploying a containerized node app to AWS


I've been living in the Hell's Kitchen neighbourhood in New York City for over a year at this point. Even within this short timespan, I've noticed small things change about the neighbourhood. Extrapolate that over a couple of centuries and you would expect to find drastic changes.

I've used photos I've found by sifting through the [New York Times Archives](https://www.nytimes.com/search?dropmab=false&endDate=19200101&query=hell%27s%20kitchen&sort=best&startDate=18591231) and tried to place the location. Then, I've done my best to capture the same angle to see what the place looks like today.


A before/after account of changing history of a neighbourhood

Then & Now - Hell's Kitchen, New York


Whether it's fixing a CSV file or refactoring code, I often encounter situations that require repetitive text manipulation. If the task is relatively small, I simply handle it manually. However, there are times when manual execution becomes impractical. In those instances, I've found vim macros to be an amazing tool!

Vim macros enable you to record a sequence of keystrokes, which can be replayed as needed. Let's begin by looking at a straightforward task. Imagine you have a list of items separated by commas, and your goal is to place each item on a separate line. Here's the original list:

```text
apple,banana,orange,grape,kiwi
```

And here's the desired result:

```text
apple,
banana,
orange,
grape,
kiwi
```

In Vim, this can be accomplished by creating a macro with the following steps:

1. Place the cursor at the start of the line
2. Start recording a macro and store it in register `a` with `qa`
3. Press `f,` to find the first comma
4. Replace the comma with a newline: `r<Enter>`
5. Stop recording by pressing `q`
6. Finally, press `4@a` to replay the macro `4` more times for the rest of the words.

![(landscape) formatting comma separated list to a separate line with vim macros](/images/posts/2023-06-01-vim-macros/vim_macro_basic.gif)

Essentially, we created a macro for register `a` that finds the next comma and replaces it with a new line. It can be argued that this approach seems excessive since it can be easily accomplished in editors like VS Code.

![(landscape) formatting comma separated list to a separate line in visual studio](/images/posts/2023-06-01-vim-macros/visual_studio_basic.gif)

When you encounter situations that are a bit more complex, vim marcos really start paying dividends. For instance, consider the following sample code:

```go
func getUser() {
    // ...
    log.error("Failed to get user data", err)
    // ...
}

func getProduct() {
    // ...
    log.error("Failed to get product data", error)
    // ...
}

func deleteProduct() {
    // ...
    log.error("Failed to delete product data", parseError)
    // ...
}
```

Note the different variable names used for errors -- `err`, `error`, and `parseError`. This is a fairly common occurence, especially in a complex codebase involving multiple developers. These irregularities are generally inconsequential, and in my opinion, it is better to have a descriptive name for what the error actually represents in the context of that method. Now, suppose you need to include a `traceID` as a third parameter in all the error logs. This task can become quite intricate when using conventional text editors, but this is exactly where Vim macros excel.

The basic idea is to find a combination of actions in Vim that will specifically target the text you want to edit and modify it in a way that does not affect any unintended lines.

-   Record the Macro

    -   Position the cursor on the line containing `log.error(` in `getUser()`.
    -   Start recording a macro by pressing `qa` to record into register 'a'.
    -   Move to the end of the line by pressing `$`.
    -   Insert ', traceID' before the closing parenthesis by typing `i, traceID` and press ESC.
    -   Stop recording the macro by pressing `q`.

-   Apply the Macro to the Rest of the File
    -   Move the cursor to the next occurrence of `log.error(.` with `n`.
    -   Run `:.,$g/log.error(/norm @a` and press Enter. This command applies the macro in register 'a' to all lines matching `log.error(` from the current line (`.`) to the end of the file (`$`).

![(landscape) adding traceId to error logs with vim macros](/images/posts/2023-06-01-vim-macros/vim_macro_traceid.gif)

Let's try another example that employs other features of Vim macros -- switching the order of parameters of a method. Consider the following sample code continuing with the log scenario:

```js
function log(logLevel, message) {
    // ... function definition ...
}

log("INFO", "Server started");
log("DEBUG", "User login event");
log("WARN", "Potential security issue detected");
log("ERROR", "Server crashed");
```

Imagine that we want to make the `logLevel` parameter optional and if it isn't provided in future usage, we will just assume it to be `INFO`. However, that doesn't quite work as an optional parameter cannot preceed a required one. This means we need to switch the positions of the parameters in the function definition, as well as update all the method invocations accordingly. That seems like an extremely tedious task. Let's try to do it with vim macros.

-   Recording the Macro

    -   Open the file in Vim and navigate to the `log` function by searching `\log(`
    -   Record the macro into register `s` (for 'switch'): - Press `qs` to start recording
    -   Find the first opening parenthesis after `log` by typing `f(`
    -   Move to the first character of the first parameter/argument with `l`
    -   Enter visual mode by pressing `v` and select till the comma with `f,`
    -   Unselect `,` by moving back one character with `h`
    -   Now that we have the string we need visualized, we delete and store it to the clipboard with `d`
    -   Go to the end of the function with `f)` and enter insert mode `i`
    -   Add the comma and a space with `, ` and once that is done, go back to normal mode by pressing `<ESC>`
    -   `p` will paste the first parameter/argument from the clipboard
    -   Go back to the start of the line `0`
    -   Navigate to the extra comma by pressing `f,`
    -   Delete the comma and the extra whitespace with `xx`
    -   Finally, Stop the recording with `q`

This certainly seems like a complex process, but now the rest of the job is straightforward. In any file where you need to make this change, simply run `:g/log(/norm @s`. This command essentially applies the recorded macro to every instance of `log(` in the file.

![(landscape) switching order of arguments with vim macros](/images/posts/2023-06-01-vim-macros/vim_macro_switch_arguments.gif)

Hopefully, this post has provided an idea about the power of Vim macros. While I'm not sure how useful this skill will be in the future, considering that AI can handle these tasks with just a description in human language, it's still a pretty neat trick to have up your sleeve.


Vim macros


First thing I noticed when I got to Lisbon is the ubiquitous presence of blue tiles. These blue tiles, or "Azulejos" as they are known locally, derive their name from the Arabic word for "polished stone". They were intended to protect the walls from heat and moisture but soon became a popular decorative element.

The Great Lisbon Earthquake of 1755 required the reconstruction of the city. With that, the tiles became incredibly more exuberant and depeicted scenes to bolster the Portuguese way of life. They were used as a canvas to showcase Portugal's military prowess, to preach the Catholic faith, and to depeict scenes of poverty and social justice. Recently, the azulejos have been used as a medium to depict commentary on climate change and equal rights. Now these tiles are part of the cultural heritage and they are simply beautiful.

![(landscape) The blue tiles](/images/posts/2023-05-15-portugal/lisbon_blue_tile.jpg)

Lisbon feels very similar to San Francisco. Both cities sprawl across seven hills, offer cable car rides, have experienced devastating earthquakes in their histories, and boast stunning views of a bay. To top it all off, Lisbon even has its own doppelganger of the Golden Gate Bridge. Besides the iconic red color, the Ponte 25 de Abril also shares a similar length and an Earthquare-conscious design with the Golden Gate Bridge. Interestingly, the bridge on the Tagus river was actually built by a company called 'American Bridge Company' the same folks who constructed the Bay Bridge in the San Francisco Bay Area. If you look past the color, the bridge actually bears a closer resemblance to the Bay Bridge rather than the Golden Gate. Note the shape of the gaps between the main arches. Golden Gate has a square shape while both Bay Bridge and Ponte 25 de Abril display a diamond shape made by crossing metals.

![(popup) Tagus river and the Ponte 25 de Abril bridge](/images/posts/2023-05-15-portugal/tagus_river.jpg)

Later in the day, I ate dinner at the Timeout market before heading into the lively Barrio Alto neighbourhood. The energy in the area was infectious and it was in fact very difficult to go to sleep with the noises carrying on until about 5 AM. Actually, on an early morning run, I noticed quite a few people calling it a night, rounding off with their last beers.

As the day rolled on, I made my way to the Belem district of the city. There, standing tall, was the Padrão dos Descobrimentos or the Monument of the Discoveries. Erected to commemorate the Portuguese age of exploration during the 15th and 16th centuries, it was a tribute to those who dared to venture into the unknown using their advanced navigation skills. I was taught about Vasco Da Gama, third in line on the monument, at school because he was the first European explorer to reach India by sailing around the Cape of Good Hope. I must admit, it was a bit disconcerting seeing a glorified image of a figure who, according to [my textbook](https://ncert.nic.in/ncerts/l/hess102.pdf), was responsible for spreading diseases, religious intolerance, and overall devastation among the local populations. I'm curious to read about his portrayl in the Portuguese textbooks.

![(vertical) Explorer monument](/images/posts/2023-05-15-portugal/explorer_monument.jpg)

The 'Pasteis de Belem', a delicious egg custard tart pastry, is one must-have item on every Portugal travel list. A little like the difference between 'photocopiers' and 'Xerox'[citation:1](#citation-1), 'Pasteis de Belem' specifically refers to those baked at this renowned [pastry shop](https://pasteisdebelem.pt/en/history/), while 'Pastel de Nata' is the broader term for this dessert. Even with a seemingly long queue, you'll find it moves at a brisk pace. It is certainly worth the wait.

While Pastel de Nata may not be as widely recognized as popular desserts like Gelato or Doughnuts, it has gained global appeal. Its delicious taste certainly contributes to its growing popularity, but influences from colonialism and globalisation have also played a part. Beyond Portugal, Pastel de Nata has found appreciation in former Portuguese colonies like Brazil, Macau, and Goa. An example of its global reach is its presence on the menus of [KFC in Hong Kong](https://www.smartshanghai.com/articles/dining/eat-it-kfcs-egg-tarts), introduced via its proximity to Macau. It is fascinating to observe the effects of globalization in action, with an American company offering a Portuguese dessert, on its menu in Asia.

The next day, I took my first surfing lesson at the [Praia do Castelo](https://goo.gl/maps/dtyJDGQ6WnbcAkzo6) beach. This beach is truly beautiful, and the sand is so fine it feels as though it melts under your feet. As for the surf lesson, I fell multiple times and was entirely out of breath from just carrying the board back into the ocean against the waves. However, when I managed to catch a wave, it was amazing! The stance felt a bit unnatural at first, but I could feel myself improving with each attempt. I certainly want to try surfing again!

A few minutes away from Lisbon lies the beautiful town of Sintra, renowned for its castles. This place was a favored summer retreat for the royalty, who had a habit of bringing back seeds from unique trees during their overseas travels. That's why Sintra has a mix of trees you might not expect, such as Sequoia trees from California and Palm trees from the Caribbean.

![(landscape) Sintra national palace](/images/posts/2023-05-15-portugal/sintra_national_palace.jpg)

An interesting thing about the Sintra National Palace is the unique blend of architectural styles reflected in the windows. I don't know the first thing about architecture, but as you can see in the image below, each window is designed distinctly. According to the guide, this diversity reflects the influence of various cultures and periods on the palace's architecture[citation:2](#citation-2).

![(landscape) Windows Sintra national palace](/images/posts/2023-05-15-portugal/windows_in_sintra_palace.jpg)

There's an abundance of shops selling cork-based items in the area. Interestingly, Portugal is responsible for supplying over half of the world's cork[citation:3](#citation-3). Generally, sustainable cork practices are followed as only the bark is used and the tree is left unharmed. However, it's worth noting that a cork tree generally needs to be about 25 years old before its bark can be harvested for the first time. After the initial harvest, the tree's bark can be harvested every 9 to 12 years.

Pena Palace is another recommended spot in Sintra. One of its most unique elements is the [Triton Gateway](https://www.portugalresident.com/pena-palace-the-triton-gateway/), inspired by the Greek god of the sea. It certainly leaves a lasting impression, to say the least.

![(vertical) Pena castle sea monster gate](/images/posts/2023-05-15-portugal/sea_monster.jpg)

For lunch, I enjoyed a delightful spread of black pork loin, grilled octopus, duck rice, and green wine, which I was told embodies a traditional Portuguese meal. If you find yourself in Sintra, make sure to check out [Taverna dos Trovadores](https://tavernadostrovadores.pt/en/) for a memorable meal.

In my limited experience, it was evident that Portuguese culture embraces a leisurely and relaxed pace when it comes to meals. Dinners typically begin at 8 PM or even later. It's a delightful experience to indulge in occasionally, although I'm not sure if I could adjust to such a schedule on a regular basis.

The next stop was Cabo da Roca, the westernmost point of continental Europe.

![(popup) Cabo da Roca](/images/posts/2023-05-15-portugal/cabo_da_roca.jpg)

Another striking red lighthouse stands in Nazaré, a beautiful coastal town known for its colossal waves featured in the show [100 Foot Wave](https://www.hbo.com/100-foot-wave). The incredible waves in Nazaré, particularly during winter, stem from swells generated by powerful storms in the Atlantic Ocean. As these swells approach the coast, they encounter the Nazaré Canyon and the Nazaré Submarine Canyon, which act as natural amplifiers. These canyons, estimated to have depths exceeding 5,000 meters, magnify the energy of the incoming swells. Similar to compressing a water hose, this amplification increases the pressure, propelling the waves to heights that can surpass 30+ meters or 100+ feet. It's a remarkable phenomenon where the raw power of the Atlantic Ocean converges with the unique geography of Nazaré, resulting in the formation of captivating waves.

![(vertical) Nazaré lighthouse](/images/posts/2023-05-15-portugal/nazare_lighthouse.jpg)

The rest of my time in Portugal included visiting Óbidos, spending a day in Porto, and exploring wineries in the Duoro Valley renowned for their production of Port wine. Collectively, these experiences made for a truly memorable trip.

![(popup) sailboats on the Tagus river](/images/posts/2023-05-15-portugal/sailboats_on_tagus.jpg)

<Citation
    numbers={[1, 2, 3]}
    content="
  Xerox actually had to run an ad campaign in 2010 to discourage the use of 'Xerox' as a generic term for photocopying. I thought that when a brand name becomes synonymous with a product, it signifies the ultimate success. Apparently, there are drawbacks to this kind of recognition. When a brand name becomes commonly used to refer to the product it represents (like 'thermos'), it faces the risk of losing its trademark protection. Do you really notice if your 'band-aid' is actually made by 'Band-Aid®'? | https://www.hollywoodreporter.com/business/business-news/xerox-asks-hollywood-stop-xerox-63702/
  Moorish, Gothic, and Manueline styles | https://alongatravel.com/sintra-national-palace
  In 2021, Portuguese cork industry reported $1.269 billion in exports | https://100percentcork.org/record-year-for-portuguese-cork-industry/
"
/>


My vacation to Portugal -- Lisbon, Óbidos, Nazaré & Porto

Portugal


Midjourney, according to their landing page is:

> quote: ... an independent research lab exploring new mediums of thought and expanding the imaginative powers of the human species.

Today, that means interacting with the generative AI model via a [Discord](https://discord.gg/midjourney) bot by running the `/imagine` command and providing a text prompt. The model generates four low resolution variations which can be upscaled or rolled further to create more variations.

Playing around with the bot has become a new hobby at this point. It is frustrating at times but also very rewarding when the model comes up with something that is truly beautiful. I've been inspired by the creative people on the internet on [Twitter](https://twitter.com/hashtag/midjourney) and [Reddit](https://www.reddit.com/r/midjourney). Here are some experiments you can try to get started.

## Art styles

> callout: a painting of a hot air ballon in the style of [artist] --ar 16:9 --style raw --s 250

With Midjourney, you can explore various art styles while developing an image. Imagine choosing a hot air balloon as your subject. Through experimentation, Midjourney generates captivating images, offering a unique opportunity to learn about various art styles.

<Carousel
    images={[
        {
            src: "/images/posts/2023-05-04-experiments-with-midjourney/hot_air_ballon_da_vinci.png",
            alt: "Leonardo Da Vinci",
            style: "landscape",
        },
        {
            src: "/images/posts/2023-05-04-experiments-with-midjourney/hot_air_ballon_van_gogh.png",
            alt: "Van Gogh",
            style: "landscape",
        },
        {
            src: "/images/posts/2023-05-04-experiments-with-midjourney/hot_air_ballon_picasso.png",
            alt: "Picasso",
            style: "landscape",
        },
        {
            src: "/images/posts/2023-05-04-experiments-with-midjourney/hot_air_ballon_pollock.png",
            alt: "Pollock",
            style: "landscape",
        },
        {
            src: "/images/posts/2023-05-04-experiments-with-midjourney/hot_air_ballon_vermeer.png",
            alt: "Vermeer",
            style: "landscape",
        },
    ]}
/>

## Remix

With Remix, the general composition of the image can be modified to create a new image with updates to aspect ratio, Midjourney model version, and even the prompts.

> callout: a shot of a \{female, male\} model in a desert oasis fashion photography --ar 16:9 --style raw --s 250

<ImageSlider
    beforeImage="/images/posts/2023-05-04-experiments-with-midjourney/model_female.png"
    afterImage="/images/posts/2023-05-04-experiments-with-midjourney/model_male.png"
    altText="Model"
/>

## Chaos

As mentioned earlier, Midjourney offers four different variations for any prompt you provide. Sometimes, you might have a specific image in mind, and you'd like these variations to closely align with your desired outcome. On other occasions, you may want to explore creative possibilities, where a greater level of variety is preferred. To achieve this, you have the option to control the `chaos` or `c` parameter. By adjusting `chaos`, which ranges from 0 to 100, you can instruct Midjourney on how much it should vary the initial four images in the grid.

> callout: crowd in city square, 18th Century hyper-realistic image --ar 16:9 --chaos \{5, 95\}

![(landscape) a crowd in a city square during the 18th Century with chaos 5](/images/posts/2023-05-04-experiments-with-midjourney/crowd_in_a_city_square_18th_century_chaos_5.jpg)

Notice how all the variations are very similar to each other when chaos is low. They all share a similar perspective and only contain minor changes to the buildings and colors. On the other hand, when chaos is high, we get a variety of results for the same prompt.

![(landscape) a crowd in a city square during the 18th Century with chaos 95](/images/posts/2023-05-04-experiments-with-midjourney/crowd_in_a_city_square_18th_century_chaos_95.jpg)

## Seeds


Experiments with Midjourney


To celebrate the new year, I took a weeklong vacation to Mexico. The first thing I did was go on a guided food tour. The tour guide provided a lot of interesting facts about the city as I devoured some delicious tacos. An obvious observation as you move around the city is the overwhelming amount of people with dogs. Mexico City suffered a terrible earthquake on September 19, 2017 (weirdly, they had another huge one on the same date back in 1985). 'Frida', the dog named after the famous [Frida Kahlo](https://en.wikipedia.org/wiki/Frida_Kahlo), rescued close to 50 people, according to some reports. The city honored her with a mural and a statute. This event drove the adoption rates for dogs. Today, Mexico City has no street dogs making dog walking one of the coolest jobs around.

Later in the night, I roamed around Zocalo, taking in the New Year's celebrations. Some street artists were putting on a show, and a few fair-style games were set up around the main square.

The next day, I started with a run on Amsterdam avenue in the Condesa district. Back in the day, Amsterdam avenue was a horse racing track, and the urban planners integrated the original layout. It is readily apparent when you look at a [map](https://www.google.com/maps/place/Amsterdam,+Hip%C3%B3dromo,+06100+Ciudad+de+M%C3%A9xico,+CDMX,+Mexico/@19.4131244,-99.1706204,17z/data=!3m1!4b1!4m5!3m4!1s0x85d1ff40c033946f:0xbb6870ce170c2840!8m2!3d19.4131244!4d-99.1706204). Following that, I had a fantastic meal at [Rosa Negra](https://rosanegra.com.mx/en/sucursales/cdmx). It is one of the best Latin restaurants in the Polanco district of the city.

![(popup) Amsterdam Avenue](/images/posts/2023-01-11-trip-to-mexico/amsterdam_avenue.jpg)

Like most 90s kids, I grew up watching WWE, among other things. While I wasn't a huge fan, I distinctly recall being impressed by the wrestler -- [Rey Mysterio](https://en.wikipedia.org/wiki/Rey_Mysterio). He always wore a mask and had some incredible moves. I found out much later in life that the mask was an artifact of Lucha Libre, so I went to see one of those matches at Arena México. The energy in the stadium was palpable, and everyone was super excited. The main event for the night was a [cage match](https://www.instagram.com/p/Cm4cCioJWXb/) with 12 fighters. Once everyone got in the ring, a 3-minute timer started when the fighters would attempt to weaken their opponents. Following that, the goal is to escape the cage as the others try to pull you down. Finally, when the last two fighters remain, they must fight it out, and the loser must surrender their mask. Quite honestly, much of the fighting was overly dramatic and hysterical, although I would certainly commend some of the moves. In the end, the fighter who lost invited his son into the ring to surrender his mask, and that was quite a sad thing to witness.

Before the main event, I got a chance to chat with one of the wrestlers. He shared that Lucha Libre, at its core, is a dramatic play of good versus evil. As the translator relayed our conversation, he mentioned that this wrestler, who I won't name, usually plays the bad guy. But then the wrestler added something that made the translator pause. He said he was the bad guy—not just in the matches, but in real life too. The silence that followed was heavy. Was he joking? I'm still not sure.

![(landscape) Lucha Libre tournament](/images/posts/2023-01-11-trip-to-mexico/lucha_libre.jpg)

I highly recommend visiting the [National Museum of Anthropology](http://museu.ms/museum/details/16762/national-museum-of-anthropology) with a guide. There is so much to take in. It is the biggest museum in the country, with rooms full of artifacts from the Mayans and the Aztecs. I could go on and on about all the exciting things I learned here, but for brevity, here are my favorite exhibits.

Look at the circular wheel in the image below and guess what it might have been used for.

![(landscape) Aztec wheel](/images/posts/2023-01-11-trip-to-mexico/aztec_wheel.png)

My first thought was it was some kind of a grain mill. It turns out the Aztecs used it as a sacrificial stone. Every single day for 200 years, the Aztec empire sacrificed 52 people. Four Aztec warriors or priests would hold each of them down on the stone. Another priest would first slit their throat and then cut open their stomach. The priest would then remove the beating heart for the ritual. Psychedelics were used as a form of anesthetic for this entire torturous experience. We don't know the reasons behind these sacrifices for sure. Some believe it was to appease the gods, while others believe it was an act of assistance to the gods in maintaining the cosmos. Either way, it is fascinating and brutal at the same time.

Another exhibit I was fascinated by was a pyramid that displayed the hierarchy in Mayan society. On the very top was the emperor, followed by shamans, priests, or the connection between humans and gods. The third tier belonged to the noblemen and the rich. Following them were the commoners -- farmers, artists, soldiers, etc.; finally, the bottom level belonged to laborers, servants, and enslaved people.

![(landscape) Mayan hierarchy](/images/posts/2023-01-11-trip-to-mexico/mayan_hierarchy.jpg)

Finally, one of the most exciting artifacts was the Aztec sun stone. This was technically the whole plot behind the movie [2012](https://www.imdb.com/title/tt1190080/) (Although they credited Mayans instead of the Aztecs. More info on this topic can be found in [this article](https://www.scientificamerican.com/article/neither-maya-nor-world-calendar-ends-december-21-2012/)). Note the destroyed features on the center of the stone. Allegedly, after the conclusion of the [Mexican-American War](https://en.wikipedia.org/wiki/Mexican%E2%80%93American_War), some drunk American soldiers shot at the stone which was placed at the side of one of the buildings in the Main Square in Mexico City.

![(landscape) Aztec sun stone](/images/posts/2023-01-11-trip-to-mexico/aztec_calendar.jpg)

There is so much more to see -- the ball games, relics of cosmetic surgeries made by the rich to stand out, Mayan jewelry, pottery, and so on.

After Mexico City, I flew to Merida specifically to see Chichen Itza. Unfortunately, some protests were blocking the road to the pyramid, so instead, I went to see [Ek' Balam](https://en.wikipedia.org/wiki/Ek%CA%BC_Balam), which is ~50 kilometers northeast of Chichen Itza. Ek' Balam dates back to 700 - 300 BC, and the city fell down around 600 - 900 AD. This is one of the few places you can still climb up the pyramid. The best way to climb the narrow, steep pyramid is sideways and diagonally.

In the 1970s, drilling into the ground to make a well was rare in rural Mexico. Using shovels on the limestone bedrock is practically useless, so people used dynamite. Surprisingly, a family in a village found a [cenote](https://en.wikipedia.org/wiki/Cenote) (pronounced say·now·tay) in their backyard. The government has since prohibited drilling in the area, so now this family has discovered a gold mine on their land. Fortunately, our tour guide was friends with that family, and I had the opportunity to swim in it. Floating around in the refreshing water and looking at stalactites formed over millions of years was an incredible experience!

![(landscape) Cenote](/images/posts/2023-01-11-trip-to-mexico/cenote.jpg)

Finally, I wrapped up the trip to Merida by visiting Izamal -- the yellow city. The city was painted yellow to commemorate Pope John Paul II's visit in 1993. Why yellow? Because that is the color of the Vatican City flag.

![(landscape) Izamal monastery](/images/posts/2023-01-11-trip-to-mexico/izamal.jpg)

To end the trip, I headed to Cabo and stayed at one of the all-inclusive resorts. The beaches were excellent, and I saw some sunsets that my phone's camera couldn't do justice to capture. It was stunning!

![(vertical) A beach in Mexico](/images/posts/2023-01-11-trip-to-mexico/cabo_beach.jpg)

That was about it. I hope to return to Mexico again to see Chichen Itza and eat more delicious tacos soon.


My vacation to Mexico -- Mexico City, Merida & Cabo

Trip to Mexico


Here are a few things I did this year and some goals for the coming year.

![(landscape) New York, NY](/images/posts/2022-12-29-year-in-review-2022/new_york.jpg)

My most significant change was moving from San Francisco, CA, to New York, NY. New York is an amazing city to live in, but it is wasted on a homebody like myself. Apart from the relocation, this year has been relatively monotonous, with a few highs and lows sprinkled within.

## Work

This year has been challenging for the tech industry. From what I have read, the root cause seems to be an overestimation of trends from the pandemic era. According to [layoffs.fyi](https://layoffs.fyi), over 150k employees lost their jobs. I am grateful to have kept my employment through this turbulent time.

I had the opportunity to work on some exciting projects. Of course, like any other startup, there are shifting requirements, and these frequent changes bothered me a lot, but lately, I've adopted the mindset of embracing the chaos and treating it as a part of the process. This outlook has improved my work, and I hope to keep this attitude.

Towards the end of the year, I was promoted to senior software engineer! In the upcoming year, I plan to take on bigger projects and positively impact the engineering culture and progress as an engineer.

## Running

This year was practically a repeat of the last year. I only ran **170.3 KM**, but I have somewhat of an excuse this time. I suffered from an injury called [Plantar Fasciitis](https://www.mayoclinic.org/diseases-conditions/plantar-fasciitis/symptoms-causes/syc-20354846) because I ran multiples over my average mileage on a rainy day in a worn-out shoe. I can only blame myself for my poor decisions, but while waiting for the foot to heal, I realized that running is something I love and want to continue doing in the future.

<iframe
    src="https://runstats.netlify.com/2022"
    className="responsive-iframe"
    frameBorder="0"
    scrolling="no"
></iframe>

I have no set goals for next year apart from being consistent and injury-free.

## Travel

US consulates in India suffered from an unprecedented [backlog](https://www.forbes.com/sites/stuartanderson/2022/10/04/obtaining-a-visa-in-india-hasnt-been-a-practical-option/?sh=337956eb475f) this year, and since my visa had expired, I couldn't travel out of the country. I had the opportunity to visit some incredible places in the continental United States, including Yosemite National Park, Key West & Portland, Maine.

![(popup) Yosemite National Park](/images/posts/2022-12-29-year-in-review-2022/yosemite.jpg)

I got my visa renewed towards the end of the year, so I plan to travel out of the country soon -- starting with Mexico in January!

## Movies

I enjoy going to the theatres but dread the noisy and unruly crowds in most New York cinema halls. In that regard, [Alamo Drafthouse](https://drafthouse.com/nyc) has become one of my favorite places in the city. They have some quirky rules, so it might not be for everyone, but if you find an opportunity to check it out, give it a shot!

A lot of incredible movies were released this year. Here are some of my favorites:

-   [Everything Everywhere All at Once](https://www.imdb.com/title/tt6710474/)
-   [The Banshees of Inisherin](https://www.imdb.com/title/tt11813216/)
-   [The Whale](https://www.imdb.com/title/tt13833688/)
-   [Barbarian](https://www.imdb.com/title/tt15791034/)
-   [Navalny](https://www.imdb.com/title/tt17041964/)

## Music

My playlists had stagnated quite a bit, and I was listening to the same songs over and over again. I am primarily into rock music and have difficulty finding new artists I like. Then, I came across [Music Map](https://www.music-map.com/), a web app that maps similar artists, and I discovered a lot of new music that I love.

According to Spotify, I've listened to **26,105** minutes of music this year.

<iframe
    src="https://open.spotify.com/embed/playlist/7nOvYsi3HEhXZStM8n0BhO?si=50b44ff8c9a14c7e"
    width="100%"
    height="80"
    frameBorder="0"
    allowtransparency="true"
></iframe>

## Misc.

This year felt more monotonous, and I have a decent idea why that might be. Since the past few months, I have been spending an inordinate amount of time on my phone/TV, which is unproductive on most occasions. I'll pick up my phone and involuntarily scroll even though I can barely retain anything afterward. This behavior has had a considerable impact on my well-being. Unfortunately, my repeated attempts to moderate this habit have not worked out in my favor so far. In the coming year, I want to rectify this behavior.

On a positive note, I maintained my journal throughout the year. I was a tad inconsistent in the first couple of months, but I fixed it soon after. I have been using Notion as my primary source, but I have growing concerns from a privacy standpoint. I tried out [standard notes](https://standardnotes.com/), but their UI is not my favorite. With a lack of options for my particular needs, I started building a solution. It is a daunting task, and the more I work on it, the more I realize how much I still need to do. I am curious to see if it is possible to build this out and maintain it going forward, but I have learned a lot so far and want to give this an honest try.

![(landscape) journal screenshot -- colors adjusted for visibility](/images/posts/2022-12-29-year-in-review-2022/journal.png)

On paper, this was a very productive year. I moved to a new city, received a promotion at work, and had some clear personal wins. Most days, however, did not feel that way. Next year, my goal is to continue the things I am doing right and replace some detrimental habits with better ones.


Things I achieved in 2022 and expectations for 2023.

Year in review - 2022


This past weekend, I visited Portland, Maine, for the fall foliage. While the orange hues were beautiful, I particularly enjoyed learning about lobsters. Any menu across the continental United States with lobster on it would likely have 'Maine' preceding it, and there is a reason for that. According to the [NOAA](https://www.fisheries.noaa.gov/foss/), in 2021 United States fished around 134 million pounds of American Lobster (valued at $924 million), and Maine was over 80% of that amount.

Maine dominates the lobster market. It is interesting to note that despite these numbers, lobster fishing in Maine isn't commercialized. No corporate conglomerates are exploiting the waters to turn a short-term profit. The state regulates the number of lobster fishing licenses issued. The only way to get one is when a fisherman retires or does not renew their license.

There are plenty of other sustainable practices that maintain a healthy lobster population. For example, when a female lobster with eggs is caught in the trap, the fisherman must put a v-notch on the fin and throw it back in. As for the males, a lobster measuring gauge decides their fate. The measure has two sides -- the small (~3.25") and the large (~5"). If a male lobster is shorter than the small side, they are considered juvenile and need to be thrown back in. If they are longer than the large side, they are considered breeders and need to be released. These practices prevent the lobster population from dwindling.

![(landscape) lobster traps](/images/posts/2022-10-20-maine-lobsters/lobster_fishing.jpg)

There are plenty of amazing things to do in Maine besides lobsters. Here are some of my recommendations:

-   Check out the Portland HeadLight
-   Walk around Old Port
-   Get some pastries from [Standard Baking Co.](https://standardbakingco.com/)
-   Grab dinner at [Isa](https://www.isaportlandme.com/)

If you ever find an opportunity to visit the Pine Tree state, take it!

![(popup) Portland head light](/images/posts/2022-10-20-maine-lobsters/lighthouse.jpg)


Sustainable lobster fishing in Portland, Maine

Maine Lobsters


If you use git in any capacity, you must have observed that a few commands are used more frequently than others. Similarly, for some commands that have many options associated with them, you would more often than not use the same options for your workflow. Typing the entire thing out every time isn't the best use of your time. Git aliases are a powerful workflow tool that will make your git experience much more enjoyable.

Setting up a git alias is quite easy. For example, to set `ci` as an alias for `commit`, you would need to run:

```bash
git config --global alias.ci commit
```

Going forward, you can use `ci` and `commit` interchangeably in your workflow. If you want to delete the `ci` alias, all you need to do is:

```bash
git config --global --unset alias.ci
```

## config scope

The `--global` is the scope of the configuration. Some commonly used scopes are:

-   `--local` applies to a specific git repository and is used as default if no flag is provided.
-   `--global` applies to a user and is stored in the home directory `~/.gitconfig`.
-   `--system` applies to all users on a machine.

For most use cases, `--global` works best because it allows you to use your aliases across different repositories but doesn't restrict other users to your custom workflow.

## advanced tricks

While simply aliasing commands already saves a lot of time in the long run, it can be taken a step further with `!`. Prefacing commands with `!` tells git to run it as a shell command and allows the creation of aliases that combine multiple commands. One thing to note here is that when these commands are run, they set the working directory to the top level and not the current directory.

For my workflow, when I checkout the main branch, I also try to pull the latest changes -- `git checkout main` followed by `git pull`. This can be combined into an alias as:

```bash
git config --global alias.main !git co main && git pull
```

Note that I am actually using `co` instead of `checkout`. Git [allows](https://github.com/git/git/commit/c6d75bc17a045af8cadd2dce982f5737a5ca38bb) you to set an alias in other aliases.

Since it is ultimately a shell command, we can also set an alias as a bash function with positional parameters. This enables writing complex actions as simple aliased commands. For example, the alias to clean merged branches (referenced from [haacked](http://haacked.com/archive/2014/07/28/github-flow-aliases/)) can be written as:

```bash
bclean = "!f() { \
          DEFAULT=$(git default); \
          git branch --merged ${1-$DEFAULT} \
          | grep -v " ${1-$DEFAULT}$" \
          | xargs git branch -d; \
         }; \
         f; \
         unset f"
```

**NOTE**: I added the `\` for readability. This can all be added in a single line however, a case can be made to add a [git-newcommand](https://github.com/git/git/blob/v2.24.0/Documentation/howto/new-command.txt) instead when the alias becomes too complicated.

## recommended aliases

While this ultimately depends on your workflow, here are some sensible aliases for commonly used actions. You can directly copy this snippet to your `~/.gitconfig`:

```bash
[alias]
  ci = commit -m
  cv = ci --verbose
  co = checkout
  st = status
  br = branch

  # checkout 'main' branch and pull latest changes
  main = !git co main && git pull

  # see your staged changes
  staged = diff --cached

  # unstage a specific file. usage: git unstage <filepath>
  unstage = reset --

  # reset the last commit
  undo = reset HEAD~ --mixed

  # list all aliases
  aliases = !git config --get-regexp alias | cut -c 7-
```

The main takeaway is to keep an eye out for commands you use regularly, add aliases and make a conscious effort to use them in your workflow. Aliases will start paying dividends before you even realize it.


Supercharge your git experience with git aliases

Git aliases


[Olympus DAO](https://www.olympusdao.finance/), according to their website, is a "Decentralized Reserve Currency". They are trying to build a "community-owned decentralized financial infrastructure to bring more stability and transparency for the world." In this post, I'll try to break down what that actually means in the context of Olympus DAO and how they can afford to provide an unreal APY of ~500% at the time of writing this article. It used to be as high as 7,000%!

## A brief history of money

As humans developed and evolved, so did our needs. In order to fulfil those needs, often times you'd need to "buy" it from another person. Methods like the barter system, gift economy and debt handled these exchanges. Eventually, many cultures developed [commodity money](https://en.wikipedia.org/wiki/Commodity_money). Shells were a popular form of currency for a long time and then, rare metals like Gold and Silver came into play. With growing trade, it became extremely inconvinient to handle Gold. Say you want to buy a pack of chewing gum worth $1. If we were still trading with Gold, you'd have to shell out 1/60th of a gram. You can probably see this getting tedious extremely quickly and that is essentially what happened. With time, [representative money](https://en.wikipedia.org/wiki/Representative_money) gained popularity.

Representative money, (often paper money) is a medium of exchange that represents value but does not have any intrinsic value. For a long time, the US dollar was backed by gold meaning that for each dollar you own, you could get it exchanged for gold at a fixed rate on demand. Dollars could only be issued/printed if the country had the equivalent amount of Gold in its reserves. Today, US Dollar is a fiat currency meaning that it isn't backed by anything other than the trust in the US Government. Often times govenments print cash whenever a quick infusion is needed. This often leads to inflation and in some cases, hyperinflation like what happened in Zimbabwe and Venezuela.

## What is a DAO?

DAO stands for Decentralized Autonomous Organization. You can think of DAOs as a community with a shared bank account. All the decisions are made by the community from the bottom up, unlike traditional organizations where all the decisions come from the top down.

You might have heard about the [ConstitutionDAO](https://www.constitutiondao.com/), which set out to buy a rare copy of the US constitution. They ended up [raising $47 million](https://www.theverge.com/22820563/constitution-meme-47-million-crypto-crowdfunding-blockchain-ethereum-constitution) within days. While they ultimately were outbid, it was nonetheless a very interesting experiment to see what a community can accomplish together with the help of the blockchain. A DAO is governed by a smart contract which removes the trust involved within participating entities. It begins with a team developing a protocol and issuing tokens to the community in exchange of funding in form of ETH, SOL, etc. The tokens provide voting rights. Once the contract is deployed, the original developers have the same authority on the organization as other token holders. I plan to write more specifically about DAOs in the future but for now, all we need to proceed here is that Olympus is a DAO.

## 7000% APY, how?!

A ~7000% APY certainly sounds sketchy and unsustainable. How is that even possible? To answer this question, we need to first understand the problem. Within crypto, ETH, BTC, etc. are extremely speculative investments (to be fair, they do show promise) and cannot be relied upon to be a stable store for value just yet. On the other hand, stable coins like USDC, USDT, etc. aren't any better since their peg to the fiat currency puts their value at the whims of a government. Olympus is addressing this issue by creating 'Ohm', a "free-floating reserve currency".

Wikipedia describes reserve currency as:

> quote: a foreign currency that is held in significant quantities by central banks or other monetary authorities as part of their foreign exchange reserves.

While this definition doesn't completely apply to DeFi protocols, it provides a good benchmark. My comprehension of economics is limited to [ECON 103](https://blogs.illinois.edu/view/6869/486389) but from what I understand -- a "stable" and developed country (the United States) becomes a de facto provider of a currency (the US dollar) to facilitate international trade. A large number of commodities like oil and gold are priced in this currency on account of its stability and this facilitates trading without exchange rate risks. In the world of Crypto, BTC and ETH come close to this status and are often used as such but they are still pretty volatile.

There is still the "free-floating" part that needs to be addressed in order to understand 'Ohm'. Stable coins are **pegged** to traditional fiat currencies so their value is tied. Unlike stable coins, 'Ohm' is **backed** by crypto assets. For each 'Ohm' issued, the treasury contains one [DAI](https://makerdao.com/en/). DAI is a stable-coin pegged to the USD. Since 'Ohm' is not pegged, its value is decided by the market and protected by the Olympus protocol. If at any point, the value of Ohm falls below $1, the protocol buys back Ohm and burns it thus reducing the supply. On the other side, if Ohm trades above the value of the backed assets, the protocol mints and sells new tokens thus increasing the supply.

![(landscape) Crypto assets in the Olympus treasury](/images/posts/2022-05-30-intro-to-olympus-dao/treasury.png)

## Bonds

The Olympus treasury issues bonds and to incentivize buyers, the protocol provides the Ohm token at a discounted price. Let's say that the current market price for Ohm is $10. If you want to buy one Ohm through a bond, the protocol will sell it at a discounted price of $9 but the bond will require the buyer to provide $9 worth of assets in tokens such as wETH, DAI, etc and then wait 5 days to receive the Ohm.

During that period, if the price of Ohm stays the same or shoots up, the buyer of the bond has turned a profit. There is certainly the risk of the Ohm price going down. To combat that a bit, staking comes into play.

## Staking

You may remember that the Ohm token is supposed to be backed by 1 DAI (~$1) so when the bond for 1 Ohm was sold for $9 in our above example, $8 of that is technically a profit from the treasury's perspective. This will allow the treasury to mint 8 more Ohm tokens without the value falling below the backed assets and also provide them as staking rewards. To add to that, when Ohm is staked, it reduces the supply in the market and thus even with the increased number of Ohm tokens, the price is maintained.

There is a lot more stuff to discuss when it comes to Olympus -- LP Rewards, (3, 3), Inverse Bonds, etc. and they would require separate posts.

With the concepts discussed in this one, there are still a lot of questions about the legitimacy of the project. Does Olympus actually solves the problems it claims to solve or is it just an elaborate scam?

## Concerns

Olympus is a novel idea and the scale it has accomplished in such a short period of time is truly commendable. However, there are obvious concerns. For eg. the Ohm token has no utility and the demand is fueled by buyers wanting to get in on the insane APY. Essentially, the protocol is selling a token with no value so that the buyer can keep accumulating more of that token hoping that someone in the future will be willing to pay a higher price on it. That seems like a classic pyramid scheme model. To be fair, a lot of crypto works that way. People only buy crypto because they believe it has value. The same thing goes for the US dollar as well. If people suddenly stop believing that the dollar has no value, it won't!

In conclusion, the Olympus DAO is complicated, interesting and controversial. It could be a pivotal instrument in building a resilient decentralized currency or it could fizzle out like so many other promising DeFi protocols. Only time will tell but it is certainly worth keeping an eye on.


What exactly is Olympus DAO and how it works.

Intro to Olympus DAO


> **Update**: Rinkeby testnet has been [deprecated](https://blog.ethereum.org/2022/06/21/testnet-deprecation). I have not ported this application to the new testnet, so it no longer functions.

GM! I've been interacting with the crypto space for a few months as a consumer, and with this project, I wanted to experience the creator side of things. This post follows the development of a simple web 3.0 application that allows users to send ETH to a smart contract to read a fun fact. Of course, no one should have to pay for it, so this would operate on the Rinkeby network, one of the many testnets supported by the Ethereum blockchain.

I used React to build the web application. I kept it minimal in terms of styling to focus more on the contract/blockchain side. A prominent button in the middle of the landing screen signals the user to connect their wallet to the dApp. Generally, users connect to the Mainnet, but since this is a demo app, it would automatically switch over the network to Rinkeby so that no real ETH is involved. Once the wallet is connected, the dApp receives the wallet address.

The user can click the 'Get Fact' button to trigger a wallet action to transfer 0.01 ETH to the smart contract. After the user confirms the transaction, it runs the `generateFact` function on the smart contract. This function will withdraw 0.01 ETH from the user's wallet and emit an event on success. The dApp listens for the event and fetches a fact from a node server.

Here is a quick demo of the dApp:

<iframe
    src="https://www.youtube.com/embed/L0B42BUOicc"
    frameBorder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
    className="responsive-iframe"
></iframe>

The smart contract also includes additional checks and balances to provide additional controls to the owner. Initially, the wallet that deploys the contract `msg.sender` is set as the owner in the constructor. The `isOwner` modifier sets up a check for privileged functions in the contract, like pausing the contract, withdrawing ETH to a wallet, and setting another wallet as the owner.

The primary function is `generateFact()`, which will only work if the contract is not paused and the ETH sent to the contract is greater than or equal to 0.01. If the user sends more than 0.01 ETH, the difference is refunded, and a transaction confirmation event is emitted.

```solidity{lineNumbers}{fileExtension}
pragma solidity ^0.8.0;

contract Facts {
    address owner;
    bool paused = false;
    uint minAmount = 0.01 ether;

    constructor() {
        owner = msg.sender;
    }

    modifier isOwner() {
        require(owner == msg.sender, "You are not the owner");
        _;
    }

    modifier isUser() {
        require(tx.origin == msg.sender, "Contracts aren't allowed to interact with this method");
        _;
    }

    event MintFact(address from, uint amount, uint256 timestamp);

    function generateFact() payable public isUser {
        require(!paused, "This contract is currently paused");
        require (msg.value >= minAmount, "Not enough ETH sent for the transaction");

        uint refund = msg.value - minAmount;

        if(refund > 0) {
            payable(msg.sender).transfer(refund);
        }

        emit MintFact(msg.sender, msg.value, block.timestamp);
    }

    function setOwner(address newOwner) public isOwner {
        owner = newOwner;
    }

    function setPaused(bool value) public isOwner {
        paused = value;
    }

    function withdraw(address payable wallet, uint amount) public isOwner {
        require(amount >= address(this).balance, "Withdraw amount is greater that contract balance");
        wallet.transfer(amount);
    }

    function isWalletOwner() public view returns (bool) {
        if(msg.sender == owner) {
            return true;
        }
        return false;
    }

    function getOwner() public view returns (address) {
        return owner;
    }

    function isPaused() public view returns (bool) {
        return paused;
    }
}
```

This is a partially decentralized application as it still uses a node server to receive the 'fact'. Nevertheless, it was a fun exercise to build an end-to-end application based on the blockchain.

## Try it out

[dApp](https://blockfact.netlify.app/)  
[Contract](https://rinkeby.etherscan.io/address/0xd61b69ee839ab2d2d0fcf4f48a70625da418444d#code)


A simple application using Solidity & React on the ETH blockchain.

Building my first Web3 application


Ethereum is the second largest cryptocurrency by market cap today and with the introduction of smart contracts, it is regarded as a generation 2 cryptocurrency which allows a lot more utility than just a way to send and receive currency. To oversimplify, Ethereum introduced two different types of accounts — regular accounts operated by the owner of the private key and smart contract accounts which operate based on the code deployed to the network. Since any arbitrary code can be run on the Ethereum blockchain, to discourage unnecessary resource usage and to compensate the miners the concept of "gas" was introduced.

> **Note**: Ethereum is in active development and these things keep changing. The post below details "gas" before [the merge](https://ethereum.org/en/upgrades/merge/).

## Basics

To understand the specifics of gas, it is important to understand blocks and block size in context of Ethereum. Blocks can be thought of as a batch of transactions which are cryptographically secured and linked together in a chain to establish an open and shared ledger. Basically, any transaction that happens on the Ethereum blockchain needs to be added to a block in order for it to be confirmed. These blocks need to be limited in size because if they are allowed to be arbitrarily large without any limits, only the nodes that have the capability of processing that level of computation would be able to function.

You can think of a block as a train going from A to B every few seconds. You'll need to buy a ticket to get on this train. If at some point, a lot of people want to get on the train, the ticket prices shoot up. Travellers who can't afford the high ticket cost would need to wait till the rush hour ends. This very loosely abstracts the issue of high gas fees on the Ethereum network. Let's dive more into the specifics.

## Gas

Every transaction on the Ethereum blockchain requires gas so that the miners can be compensated and since Ethereum allows running actual code on the blockchain, gas discourages bad actors by making it economically infeasible to abuse the resources. The best analogy to understand gas would be to think about where the term comes from. Let's say you are travelling from San Francisco to Los Angeles. You'll need to cover a distance of ~600 KM. Imagine further that your car gives you a mileage of 60 KM per gallon. You'll need 10 gallons of gas to get to your destination. If the gas costs $3 per gallon, you'll end up paying $30 to get from SF to LA.

Similarly, on the Ethereum blockchain, each transaction has a required amount of gas units (limit). This is equivalent to the 10 gallons of gas required to travel 600 KM in our analogy. Unlike our distance analogy, you can potentially change it but it is best not to alter it and go with the wallet's suggestion. A standard ETH transfer requires 21,000 units of gas.

What you can alter is how much you are willing to pay for each unit of that gas. The cost per unit of gas is measured in `Gwei` and it keeps fluctuating based on network congestion (similar to prices of fuel shooting up when the demand is high and supply is low).

### Gwei

Gwei is simply a denomination of ETH equal to 0.000000001 ETH. Take a look at Etherscan's [gastracker](https://etherscan.io/gastracker). At the time of writing, the average gas price was 50 Gwei, meaning that each unit of gas is expected to cost 0.000000050 ETH.

If you wanted to transfer 1 ETH to your friend, you'll need 21,000 gas units each costing 0.000000050 ETH for a total cost of 0.00105 ETH. Before the London fork, 1.00105 ETH would be deducted from your balance. 1 ETH would be sent to your friend and 0.00105 ETH would be sent to the miner for their services.

## London upgrade

Based on [EIP-1559](https://eips.ethereum.org/EIPS/eip-1559), Ethereum's gas model was overhauled in favor of making gas prices predictable and Ethereum deflationary. With the upgrade, Ethereum introduced a block base fee and a priority fee. The block-sizes were also made variable.

Essentially, each block has a base fee which is the minimum price per gas unit required to be included in the block. It is determined by the network based on the activity in the previous block. The base fee gets burnt which reduces the overall supply of ETH making it deflationary. Since miners won't be receiving the base fee, the tip serves as their compensation for mining the blocks.

Consider the same example as above. You want to transfer 1 ETH to your friend. Let's say the base fee is 50 Gwei and you include a tip (priority fee) of 10 Gwei for the miner. You would need 21,000 gas units costing (base fee + priority fee) per unit. Total gas fee would amount to, 21,000 _ [(50 + 10) _ 0.000000001] = 0.00126 ETH. 1.00126 ETH would be deducted from your balance. 1 ETH would be sent to your friend, 0.00021 ETH will be sent to the miner and 0.00105 ETH will be burnt.

To further understand this, let's look at a real world example. Here's an interesting one involving [BAYC #3547](https://opensea.io/assets/0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d/3547). Essentially, the owner of this particular NFT set it for sale at a price of 0.75 ETH instead of 75 ETH and someone swooped in with a high fee to buy this unreal deal. This incident was covered by [Bloomberg](https://www.bloomberg.com/news/articles/2021-12-14/bored-ape-nft-sells-for-hundredth-of-300-000-by-mistake-cnet) and a bunch of other media outlets.

Take a look at the [transaction](https://etherscan.io/tx/0x716cc965cf3aa642bad16d3fa02f9629df2f63ede1eadce2921c0869cddcef19) on Etherscan.

![(landscape) 0.75 ETH BAYC Sale](/images/posts/2022-01-04-a-primer-on-ethereum-gas-fee/bayc_etherscan.png)

You may note that the value of the transaction was only 0.75 ETH whereas the Transaction Fee paid was ~8.5 ETH. The wallet originally suggested that this action would require 311,208 units of gas but only 256,075 (82.28%) ended up being used. The base fee of the block was 94.923309777 Gwei.

The amount burnt was 0.024307486551145275 ETH which is equal to:
256,075 (gas units used) _ 94.923309777 Gwei (base fee) _ 0.000000001 (convert Gwei to ETH).

The buyer added a maximum priority fee of 33,257.457060927 Gwei. This equates to 8.5 ETH tip for the miner based on the gas units used. With a tip that high, the miners are bound to include this transaction before anything else.

Hopefully, the concept of base fee and priority fee is clear by this point. How does all this make the gas fee predictable? Well, with the London upgrade, Ethereum supports variable block sizes. The target size of the block is 15 million gas. The block size limit is 30 million gas. For example, the above BAYC transaction would have occupied around ~0.85% of the block if the size was close to the limit.

If the included gas in the previous block exceeds the target amount, the base fee for the next block will be increased by a maximum of 12.5%. This allows a way of predicting the base fee for the next block. If the blocks continue to hit limits each time, because of exponential growth of the base fee, it would be economically infeasible for the block size to continue that trend forever.

## Adjusting Gas on MetaMask

Whenever you attempt to perform a transction on the Ethereum blockchain, whether it be minting a new NFT, staking a token or sending ETH to an account, you'll need to pay gas. You might have seen your MetaMask wallet suggest the gas amount and simply ask you to confirm. Here's the gas fee suggestion for an ETH transfer transaction.

![MetaMask gas suggestion](/images/posts/2022-01-04-a-primer-on-ethereum-gas-fee/metamask_suggestion.png)

MetaMask is suggesting that I allow a maximum of 86.3 Gwei for each of the 21,000 units of gas. This equates to 0.0018123 ETH. Since this is a transaction I don't need done urgently, I can actually reduce the suggested Max fee based on this week's gas trends. Based on this week's [average gas prices](https://etherscan.io/gastracker#historicaldata), I will try to find the lowest average gas fee. If you don't mind risking the transaction failing, you can even look at the absolute lowest gas fee paid this week.

![(landscape) Historical gas fee trends](/images/posts/2022-01-04-a-primer-on-ethereum-gas-fee/historical_gas_fee.png)

Based on the graph above, the minimum average gas fee was 51 Gwei and the absolute minimum for the week was 1 Gwei. Since I have no urgency for this transfer, I can actually reduce the Max fee from MetaMask's suggested 86.3 Gwei to 55 Gwei (avg. minimum + padding). Overnight when the network congestion decreases, the base fee will fall and my transaction will get picked up.

This may feel like a lot of work for a few cents but for more complicated transactions and for times when gas fees are high, you'd end up paying a lot more than you need to. Gas fees add up quite a bit and this is one way to avoid unnecessary overspending.

In the future, ETH 2.0's proof of stake model should eliminate these concerns and make this post obsolete.


A comprehensive guide explaining Ethereum's gas fees.

A primer on Ethereum gas fee


Here are a few things I did this year and some goals for the coming year.

## Work

This year, I had a few big changes from the work standpoint. I got promoted to senior software engineer at Braintree and soon after that, I started my new job at [Bolt](https://www.bolt.com/). The promotion certainly felt validating and provided a confidence boost that I couldn't imagine a change in title would. It essentially didn't change my day to day by much but my responsibilities towards the team definitely increased.

I always wanted to work on the frontend and I couldn't get that opportunity on a backend focused team. I also wanted to explore what working at a startup felt like so I went through the interview process with a few startups and eventually decided to join Bolt as a full-stack engineer on the checkout team. It was overwhelming to go from having a deep understanding of the system built over the last two years to training wheels again. I had to essentially learn everything from scratch because even the tech stack at Bolt is completely different. With about five months in, this is still work in progress but I think I am slowly and steadily getting there.

One other thing worth highlighting is Bolt's [four-day work week](https://www.bolt.com/blog/switching-four-day-workweek/) experiment. Over the past few months, Bolt has turned Fridays into something more like Saturdays or Sundays. This extra day has allowed me to explore interests beyond my normal work and I've started deep-diving into Crypto. In the coming year, I plan to more actively learn about blockchain/crypto related work. More on that later.

## Running

I almost gave up on running this year. I only ran a total of **165.1 KM** which is a distance I would have covered in less than two months last year. I didn't have any injuries that would have prevented me from hitting the road. The only excuses I can think of are an increase in workload and just sheer laziness.

<iframe
    src="https://runstats.netlify.com/2021"
    className="responsive-iframe"
    frameBorder="0"
    scrolling="no"
></iframe>

Towards the end of the year, I registered for a 5K to at least motivate me to get started again. There was no way I could have run anything more than that. I ended up running the [Golden Gate Half + 5K](https://www.runsf.com/) race and finished it in ~30 minutes. It is far from my best time but it was my very first in-person race and I am happy with how it went.

![(vertical) 5k run](/images/posts/2021-12-29-year-in-review-2021/run.jpg)

Next year, I want to keep an achievable target of 500 KM and focus on running better with a mix of recovery runs, long runs, progression runs and race days.

## Travel

Travel was a continuation of the past year. I didn't really go anywhere other than short trips to Tahoe, Seattle, Champaign and Chicago. Towards the end of the year, I went home to India for a couple of weeks but that is about it. I don't expect much will change the following year either so I have nothing planned just yet.

![left - Gum Wall, Seattle, WI, right - Engineering Hall, Champaign, IL](/images/posts/2021-12-29-year-in-review-2021/travel.png)

## Reading

I got a lot of reading (at least compared to the past) done this year. Here are some of the books I really enjoyed:

-   **The Selfish Gene** by _Richard Dawkins_
-   **Made in Japan** by _Akio Morita_
-   **Principles** by _Ray Dalio_
-   **Klara and the Sun** by _Kazuo Ishiguro_
-   **Company of One** by _Paul Jarvis_
-   **Stakeholder Capitalism** by _Klaus Schwab_
-   **Tuesdays with Morrie** by _Mitch Albom_

I've noticed that I sleep better if I end the day with reading a book in bed. I hope to make a regular habit out of it in this coming year.

## Movies

With the pandemic continuing for the second year, a lot of movie festivals allowed remote participation. I was able to watch quite a few movies that premiered at the [Sundance](https://www.sundance.org/) Film Festival and the Toronto International Film Festival ([TIFF](https://tiff.net/)). I really hope this trend continues even after the pandemic because it provides exposure to movies that wouldn't be as widely available otherwise. Here is a short list of some of my favorite movies of the year:

-   [Last Night in Soho](https://www.imdb.com/title/tt9639470/)
-   [The Humans](https://www.imdb.com/title/tt10023286/)
-   [The Father](https://www.imdb.com/title/tt10272386)
-   [Minari](https://www.imdb.com/title/tt10633456)
-   [Mass](https://www.imdb.com/title/tt11389748/)
-   [C'mon C'mon](https://www.imdb.com/title/tt10986222/)

## Music

According to Spotify, I've listened to **15,379** minutes of Music this year. Here are my top songs from 2021:

<iframe
    src="https://open.spotify.com/embed/playlist/37i9dQZF1EUMDoJuT8yJsl?si=45725ed36a8b4cb9"
    width="100%"
    height="80"
    frameBorder="0"
    allowfullscreen=""
    allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
></iframe>

## Misc.

This year went by in a flash and I felt like I barely even noticed it. I did end up doing some of the things I had planned last year but most of them didn't quite pan out. I read a fair bit, learned to cook a few dishes and moved to San Francisco from South Bay. I worked a lot on my job and barely had any time off in the first half of the year. The second half was spent stressing out to catch up with all the new things I needed to do. I didn't find a balance.

On a positive note, I maintained my journal throughout the year and altered the prompts like I had planned to last year. I saw decent results but I want to try something new. In addition to describing the day to day events, I also plan to capture gratitude. While it may sound like a self-help schtick, there is plenty of [research](https://sites.google.com/view/sources-dissatisfaction/) to back its benefits.

I started getting into crypto and NFTs quite a bit. From an investment standpoint, it does sounds very enticing (although speculative) but just from the technological standpoint, it is absolutely mind blowing. I have a tinge of remorse for not getting into it sooner, but better late than never. In the coming year, I plan to dive into it more seriously.

Overall, this year was certainly productive as far as work is concerned but other than that, I didn't really feel like I did anything. I hope to acheive balance in the coming year with the obvious goal of being happy doing things that make me and the people around me happy.


Things I achieved in 2021 and expectations for 2022.

Year in review - 2021


To secure an online account, the most popular choice is to use a password and username combo. The service where the account is hosted maintains all the username/password combinations in a database and serves as a central authority to allow or deny access. In the context of Bitcoin (or cryptocurrencies in general) a private key is used to achieve security in the absence of a central institution. A private key is essentially a secret number that proves ownership of a blockchain address. If someone has access to your private key, they can spend the contents of your wallet.

## Private Key

Consider the following example private key:

```{hideHeader}
FEF9CD8E97DBB9C7B6F4DF69B77371ED7D8CB86EBBBDCFCA53CDFE6A4EF0F526
```

This is a 64 digit number in the hexadecimal format. For Bitcoin specifically, this is encoded into a standardized [Wallet Import Format](https://en.bitcoin.it/wiki/Wallet_import_format) (WIF). For the purposes of this post, we can continue with the hex format. Converting this to more human "readable" decimal format yields:

```{hideHeader}
115,328,827,161,585,545,099,490,838,371,714,620,288,121,874,312,392,613,209,743,194,804,860,088,284,454
```

Just to cover all bases, in Binary, this number is:

```{hideHeader}
1111111011111001110011011000111010010111110110111011100111000111
1011011011110100110111110110100110110111011100110111000111101101
0111110110001100101110000110111010111011101111011100111111001010
0101001111001101111111100110101001001110111100001111010100100110
```

The associated [public key](https://www.crypto-lyon.fr/how-to-get-an-address-from-a-private-key-on-bitcoin.html) is generated using elliptic curve multiplication (one-way), sha256 (one-way) and some other encoding. The public key can always be generated from the private key but never the other way around. In essence, all we need is the private key to access the associated funds. It is being suggested here that 256 coin flips (heads - 1, tails - 0) result in a more secure system than what banks can provide. In fact, this is how some people actually generate their private keys.

This is certainly very unsettling the first time you hear about this. In theory, if you start to brute force numbers from 1 to 2^256, you will be able to unlock each and every cryptocurrency wallet there is. Doesn't sound very secure, does it? Well, with the resources we have today, only a moron would attempt to brute force this many possibilities. Part of the reason why this still feels preposterous is that human brains can't really comprehend how big a number 2^256 really is. It is so far removed from reality that even calling it astronomical is giving astronomy too much credit.

## Attempting to visualize 2^256

Since we are dealing with cryptocurrencies, the most apt analogy is to imagine a locker. Let's say you've kept your money inside a locker for safekeeping but the thing is, this locker can be opened by anyone. How secure can this possibly be? Not much.

Now imagine filling up the Empire State Building full of lockers and your funds are kept in one of them. You can begin to see this getting a little more tedious but someone who is motivated by money will eventually be able to find it. Let's quantify this a little bit more.

Since we are trying to visualize 2^256, let's assume that we have stashed in our money in one of those lockers. Our hacker is able to build a robot that can scan through 4 billion (~2^32) lockers per second. They further build an app that can control 4 billion such robots through an app. They are also somehow able to convince over half the world's population (2^32) to download this app. If we equate locker scanned per second to the computational power, we are already well beyond the available computational power in the world.

All of those robots keep scanning 2^96 lockers per second. To be able to brute force 2^256 possibilities, they would need to run for 2^160 seconds. The age of the Universe is estimated to be 13.8 billion years which is less than 2^60 seconds. They would still only have a 1 in 2^100 chance of finding the correct locker if they were running this entire time.

Another simple way of visualizing the vastness of this number is to consider the [grains of sand](https://alexaanswers.amazon.com/question/4AG2xp3Q0zFFn8T6ZUpnoJ) on Earth. Imagine that you picked a grain of sand anywhere on the planet. The probability that someone else can find that exact grain of sand is very roughly 1 / (7.5e18) which is 1 / 2^64. This number is nowhere close to the scale of 2 ^ 256.


Understanding the security behind private keys.

How secure is a Bitcoin private key?

Notes on ACH


When I worked at Braintree, I pair-programmed full-time. Braintree had developed custom tooling that was tailored for a hassle-free pair-programming experience. The basic setup was [vim](https://www.vim.org/) as a text editor running inside [tmux](https://github.com/tmux/tmux) with custom key bindings and aliases. Developers were expected to work in this setup. I joined as an intern and at the time, my experience with development tools was limited to [Atom](https://atom.io/). It was certainly overwhelming to have to learn vim shortcuts and spend an eternity on the simplest tasks but once I got a hang of it, I could really see my productivity increase. More details on how Braintree's vim/tmux setup works are on this [blog](https://www.braintreepayments.com/blog/vimux-simple-vim-and-tmux-integration/).

One thing I am a little sad to admit is that I never bothered to look into how any of it worked. I knocked off the 'setup tmux' item from my onboarding checklist and that was it. Now that I don't need to use this setup for work, I miss it. I decided to setup tmux on my machine and learn how to customize it. Here is an attempt at compiling a quick guide for others who may be interested in giving this a shot.

Before diving into it, I would just like to mention that I understand that getting used to tmux takes time. All the different commands can be overwhelming and in the beginning it might not seem worth the effort. I strongly believe that if you give this an honest try, it will pay off. The key bindings will become muscle memory. In fact, multiple times while I was onboarding new engineers, I would draw a blank when someone asked me a command to do something on tmux but my fingers would always know what to do.

## What is tmux?

tmux is a terminal multiplexer. It allows you to create multiple terminal windows, split panes vertically or horizontally, customize bindings/themes and it allows detaching/reattaching sessions which is extremely powerful when you have to work with remote boxes.

![A sample tmux session with windows and a few panes](/images/posts/2021-08-01-tmux-101-supercharging-the-terminal/tmux-demo.gif)

## Setting up tmux

On Mac, `brew install tmux` should do the trick. You can also get it from the Github repo directly by following the instructions [here](https://github.com/tmux/tmux#from-version-control).

To run, simply type `tmux` on your console and that should open up a new session with a new window. Initially, it isn't much to look at and might even be a little annoying but bear with me here. All commands on tmux need to be prepended by a "leader"/"prefix". By default, it happens to be `Ctrl + b` . If you want to create a new window, you'll first type in the leader (`Ctrl + b`) followed by a `c`. Just looking at the placement of `b` and `Ctrl` on the keyboard, it is pretty obvious that having to input this combo over and over again is very counterproductive. This is where customizations come in.

## Customizing tmux

tmux uses `~/.tmux.conf` to store configuration. Go ahead and create that file if it doesn't already exist. The very first thing to do is to get rid of the awkward prefix and change it to something more sane. I use `Ctrl + a` with my caps lock key [remapped](https://www.lifewire.com/remap-keyboard-on-a-mac-5181558) to `Ctrl` .

```bash
# set prefix to C-a
unbind C-b
set -g prefix C-a
bind C-a send-prefix
```

Since we are going to be experimenting quite a bit with the tmux configuration, it is a good idea to have a quick way to reload the tmux config.

```bash
# reload tmux config file
bind r source ~/.tmux.conf
```

Each time there's an edit to `~/.tmux.conf` , reload it using `prefix` + `r` .

Next up, we'd want to be able to split a window into vertical and horizontal panes. By default, tmux command to split a window/pane horizontally is `prefix` + `"` and vertically is `prefix` + `%`. This is pretty awkward too. I have personally gotten used to vim's split commands so I'm binding horizontal split to `s` and vertical split to `v`. This might not be very intuitive to people who haven't worked with vim before so feel free to use anything that makes sense. I've also seen `|` for vertical splits and `-` for horizontal as a visual reminder of the action.

```bash
# split windows like vim
bind s split-window -v -c "#{pane_current_path}"
bind v split-window -h -c '#{pane_current_path}'

unbind '"'
unbind %
```

The `-c` simply specifies the "target client" and `pane_current_path` is as the name suggests, the current pane.

Now that we can create new panes, we want to be able to move around them. By default, tmux uses `prefix` + `←` / `↓` / `↑` / `→` (arrow keys). While this isn't as bad as the ones above, I have personally gotten very used to vim's "arrow keys" `h`/ `j` / `k` / `l` so I bind the pane movement to these.

```bash
# move around the panes with hjkl
bind h select-pane -L
bind j select-pane -D
bind k select-pane -U
bind l select-pane -R
```

Note that I did not unbind the arrow keys so I can potentially use them too to move around the panes.

By default, tmux splits panes equally. If you want to have more space on a particular pane for a focused task and a side pane to tail logs (or whatever else your workflow requires), the provided way of doing that is `prefix` + `:` . That opens up a prompt at the bottom of the screen. There you can type `resize-pane` followed by a `-` , direction (`L` / `D` / `U` / `R`) and an optional number that represents how much you want to move a pane by (defaulted to 1).

`prefix` + `:` (then in the prompt) `resize-pane -L 10`

As you can see this is quite cumbersome but you can add a binding for this action to your `~/.tmux.conf`

```bash
# resize panes
bind -r < resize-pane -L 10
bind -r > resize-pane -R 10
bind -r - resize-pane -D 10
bind -r + resize-pane -U 10
```

The `-r` toggles the client read-only flag.

If at any point you feel like you've messed up the sizing and want to go back to equal splits, you can add the following to your configuration:

```bash
# switch to tiled layout
bind = select-layout tiled
```

`select-layout` applies a previously used layout. The `tiled` layout spreads out the panes as evenly as possible. Other supported layouts are `even-horizontal` , `even-vertical` , `main-horizontal` and `main-vertical` . You can flip around these layouts using `next-layout` which is bound to `space` bar by default.

There is also a way to swap panes using `prefix` + `{` / `}` . I personally haven't found a lot of use for it but depending on your needs, it could be helpful. One last thing that might be interesting is `prefix` + `q`. It displays the 'id' of the panes in the current window.

To zoom into a particular pane, try `prefix` + `z`. Getting out of the zoomed pane uses the same command. Finally, to kill a pane, all you have to do is `prefix` + `x` . tmux will ask you to confirm if you really want to kill the pane. Enter `y` and the pane is gone. If there are no panes on a window, the window will be removed too.

At this point, I would quickly like to mention that there is no need to memorize all these commands at once. Just knowing the existence of these commands, is good enough to get started. As you continue working, you'll have to look these up quite a bit in the beginning until your brain naturally starts to remember it and eventually it will become muscle memory so keep at it.

Now that we have covered panes, let's look into windows. As stated above, to create a new window, the default command is `prefix` + `c` . Tmux likes to be smart and update the name of the window based on the last command that was run. I usually like to name windows based on what they are running so the first thing I'll recommend doing here is stopping the auto-rename.

```bash
set-option -g allow-rename off
```

You can rename your windows with `prefix` + `,` then just type in the name and hit enter.

To switch between windows, you can simply type `prefix` + `<window number>`. Quite simply, if you want to go to window 2, `prefix` + `2` will do the trick. By default, tmux starts numbering windows from 0 and it is a hassle to have to go all the way to `0` each time you want to access that window. The following line in your configuration will make tmux start numbering from 1 instead.

```bash
# start numbering windows from 1 instead of 0
set -g base-index 1
```

## Styling your tmux

This part of the tmux configuration is highly subjective and yours might end up looking a lot different than what I have depending on your preferences and the changes you make overtime. I don't think diving deep into what each config line does is very helpful so I'm just going to add what I have and how it looks on my tmux. It is fairly straightforward but to understand what each command does, I would recommend playing around by tweaking things (for eg. change a config line to an outrageous color) and seeing what it impacts to then tailor it to your preferences.

```bash
# status bar theme
set -g status 'on'
set -g status-position bottom
set -g status-bg 'colour235'
set -g status-justify 'left'
set -g status-left-length '20'
set -g status-right-length '100'

set -g status-left '#[fg=colour255,bg=colour233] #S #[fg=colour232,bg=colour235,nobold,nounderscore,noitalics]'
set -g status-right '#[fg=colour237,bg=colour235,nobold,nounderscore,noitalics]#[fg=colour246,bg=colour235] %r  %a #[fg=colour243,bg=colour235,nobold,nounderscore,noitalics]#[fg=colour222,bg=colour238] #H #[fg=colour237,bg=colour238,nobold,nounderscore,noitalics]#[fg=colour235,bg=colour235] '

setw -g window-status-format '#[fg=colour241,bg=colour235,nobold,nounderscore,noitalics]#[fg=color235,bg=color=235] #I#[fg=color246,bg=color235]  #W #[fg=colour246,bg=colour235,nobold,nounderscore,noitalics]'
setw -g window-status-current-format '#[fg=colour237,bg=colour238,nobold,nounderscore,noitalics]#[fg=colour222,bg=colour238] #I  #W  #F #[fg=colour243,bg=colour235,nobold,nounderscore,noitalics]'
```

Here's what my status bar looks like:

![(Img 2) status bar](/images/posts/2021-08-01-tmux-101-supercharging-the-terminal/status-bar.png)

**Note**: I am using [MesloLGS NF](https://github.com/romkatv/dotfiles-public/tree/master/.local/share/fonts/NerdFonts) font on my iTerm which adds characters like the solid triangle (visible next to the session number, current window, etc. on my status bar). It will probably show up as a hollow rectangle on your system if you don't have fonts that support that character.

## Adding plugins

You can take your setup a step further by using a host of plugins that developers have already put out. You can use 'tpm' which can be easily setup by following the instructions [here](https://github.com/tmux-plugins/tpm#installation).

```bash
# Plugins
set -g @plugin 'tmux-plugins/tpm'

set -g @plugin 'tmux-plugins/tmux-sensible'
set -g @plugin 'tmux-plugins/tmux-resurrect'

# Initialize TMUX plugin manager
run '~/.tmux/plugins/tpm/tpm'
```

You can find a list of other available plugins [here](https://github.com/tmux-plugins), or better yet — you can create your own!

## In conclusion

There are plenty of customizations possible with tmux. For eg. you can even have the name of the song currently playing on your Spotify on the tmux status bar using [this plugin](https://github.com/robhurring/tmux-spotify) or even the current temperature of the CPU. You can make it look the way you want and hyper-personalize it to make you productive. The key takeaway from this would be to get started and do your own research. Figure out what works for you, customize it to your needs and supercharge your terminal experience!


A guide to get started with tmux and customize your terminal experience

tmux 101: supercharging the terminal


A quick search on "running in the rain" yields all sorts of articles on how to take precaution (which is fair) or how to run despite it. That to me is completely strange because running in the rain is one of my absolute favorite things to do. When I don't run on one of the infrequent rainy days in the Bay Area, it feels like a lost opportunity.

I have noticed that when I run in the rain, my stats are significantly higher than my average for the runs before and after it.

## Statistics

To back up the hypothesis, I looked at a few rainy day runs and compared it to 2 runs before and 2 runs after to see how the data stacks up.

A run in the rain that I remember as if it was yesterday was in Milwaukee, WI back in Sept, 2020. I was running regularly during that month and my mileage was higher than it usually is in any other month. Even then, the rain helped me boost my stats.

![(landscape) Statistics for a Rainy Day Run in Milwaukee, WI](/images/posts/2021-01-16-running-in-the-rain/run2.png)

There are plenty other examples showing the same trend and surprisingly there are no outlier rainy days where my stats were worse than the neighboring runs.

## Why?

So what exactly is it that makes me run easy in the rain? I tried reading more into it but there are no obvious reasons that would explain it. It doesn't even seem like a pattern most runners see.

I do know that I remember every rainy day run I've ever had. To be fair, there haven't been that many but each one of them was memorable in its own different way.

![(landscape) My favorite rainy day runs](/images/posts/2021-01-16-running-in-the-rain/memorable_runs.png)

When I run in the rain, it feels like I can go on forever. I only stop because it is the responsible thing to do in order to make sure I don't injure myself. When it rains there is barely anyone outside. I get to own the entire track, enjoy my music and take in the views.

I would highly recommend giving it a try (while taking the necessary & sensible precautions). Maybe you'll enjoy it too!

Here's hoping for many rainy day runs in the future! 🤞


Running in the rain


Here are a few things I did this year and some goals for the coming year.

## Work

This year, like many other software developers, I worked from home. I like working from home and [Braintree](https://www.braintreepayments.com/) had plenty of systems already in place to seamlessly allow that.

I felt an increase in my level of confidence and my productivity as an engineer. I think I understand the product a lot better now and I feel comfortable designing/building significant features to it. Onboarding new teammates and mentoring an intern over the summer helped me be more responsible and it also solidified my understanding of the architecture as I attempted to do my best to answer their questions. Braintree was also interviewing heavily during the pandemic and that afforded me the chance to learn how things worked at other companies.

Finally, I was also involved in dealing with a couple of significant production incidents over the year. There is no such thing as perfect code and things are bound to go wrong. Handling people's money is sensitive work and when something goes wrong, there is pressure to reconcile the situation as quickly as possible. Working through those incidents taught me how to stay calm and collected and work towards a solution no matter how tense the situation is.

![(landscape) WFH Setup](/images/posts/2020-12-29-year-in-review-2020/wfh_setup.jpg)

I worked on a couple of projects that I am moderately proud of -- A portal to manage [options](/options) and a chrome extension that logs [YouTube views](/a-chrome-extension-to-track-youtube-viewing-activity). For the next year, I hope to utilize my "side project time" to read some technical books, write as I learn on this blog, and work on building a portal to collect all my data (re: [Quantified Self](/quantified-self)) and analyze it.

## Running

The target I had for this year was to run **1000 KM**. I had also planned on running the [San Francisco Half Marathon](https://www.thesfmarathon.com/)
in late July. Both of those things did not end up happening.

In the first couple of months, I was on track towards the goal but then the lockdown started and I ended up taking a two-month-long break. I finally got back on track in May and continued to make progress until about mid-October. I suffered an [IT Band Injury](https://en.wikipedia.org/wiki/Iliotibial_band_syndrome) and I could barely run 2 KM before it started to feel like my knee caps would collapse. It was hard to take a long enough break to give my body some time to rest because I needed to finish my target.

<iframe
    src="https://runstats.netlify.com/2020"
    className="responsive-iframe"
    frameBorder="0"
    scrolling="no"
></iframe>

In the end, saner minds prevailed and I did take a month and a half long break. As of today, I have completed **708.9 KM**. That is of course nowhere close to my original goal of **1000 KM**. I also did not get to run the San Francisco Half Marathon but I did run a half-marathon on my own.

![(square) Half Marathon in San Mateo](/images/posts/2020-12-29-year-in-review-2020/half_marathon.jpg)

For the next year, I don't want to chase a mileage target because that forces me to run when I shouldn't and while I did improve my mileage, I haven't gotten particularly better at running itself. At the moment, I want to target a 25 minute 5K. I could have aimed higher -- a 20 min 5K, but I am aware that my body is not built for that.

In addition, I plan to try using [Moov Now](https://welcome.moov.cc/moovnow) or [Nurvv Run](https://www.nurvv.com/en-us/) to receive better feedback on my form.

## Travel

Travel was basically out of question this year. Early in the year when we didn't quite understand the seriousness of the COVID situation, I traveled to [South Africa](/south-african-vacation). I had plans to travel to Portugal in late April but that obviously didn't pan out as expected.

![(vertical) Cape Point](/images/posts/2020-12-29-year-in-review-2020/cape_point.jpg)

I did take some short trips within California to catch a break every now and then from the WFH life.

-   Santa Barbara
-   Joshua Tree
-   Monterey
-   Sonoma
-   Santa Cruz

At the moment, it is hard to comment on the next year and I can't even imagine things going back to the way they were anytime soon. I hope that it gets better soon.

## Reading

At this point, I am convinced that buying books and actually reading them are two different hobbies. This year, I found a lot of books that I was very excited to read but I just never got around to reading them. The books I did read were very enlightening. Some of my readings were tough to finish because either I lost interest in the material or simply got distracted. Here are the books I did end up reading:

-   **Exhalation : Stories** by _Ted Chiang_
-   **Homo Deus** by _Yuval Noah Harari_
-   **Outliers** by _Malcolm Gladwell_
-   **Utopia For Realists** by _Rutger Bregman_
-   **Why We Sleep** by _Matthew Walker_

I had convinced myself that reading a book required _finishing_ the book and now I think that it is counterproductive and inefficacious. For the next year, I simply plan to _read_. The basic philosophy will be to keep reading and if I get bored, I will move on to some other book. I might end up finishing a book, or I might not and that is okay.

![(landscape) Books I read this year: (From Top) **Outliers** _Malcolm Gladwell_, **Utopia For Realists** _Rutger Bregman_, **Homo Deus** _Yuval Noah Harari_, **Why We Sleep** _Matthew Walker_, **Exhalation : Stories** _Ted Chiang_](/images/posts/2020-12-29-year-in-review-2020/books.jpg)

## Movies

With movie theaters closed for the majority of the year, most of the good movies were never released. I did discover a few incredible movies that I had missed in the past:

-   [Calibre](https://www.imdb.com/title/tt6218358)
-   [Hillbilly Elegy](https://www.imdb.com/title/tt6772802/)
-   [The Guilty](https://www.imdb.com/title/tt6742252)
-   [The Tale](https://www.imdb.com/title/tt4015500)
-   [Private Life](https://www.imdb.com/title/tt5536610)

I am also a big fan of [A24 Movies](https://a24films.com/films) and since we were all in lockdown, I decided to watch every movie A24 has ever released. I didn't get through the entire movie library, but I did find many that I absolutely loved. In addition to [Midsommar](https://www.imdb.com/title/tt8772262), [Uncut Gems](https://www.imdb.com/title/tt5727208), and [Hereditary](https://www.imdb.com/title/tt7784604) that I had already included it in the previous years: [Waves](https://www.imdb.com/title/tt8652728/), [The Lighthouse](https://www.imdb.com/title/tt7984734), [The Farewell](https://www.imdb.com/title/tt8637428/), [The Killing of a Sacred Deer](https://www.imdb.com/title/tt5715874), [The Florida Project](https://www.imdb.com/title/tt5649144), [Good Time](https://www.imdb.com/title/tt4846232), [A Ghost Story](https://www.imdb.com/title/tt6265828), [Green Room](https://www.imdb.com/title/tt4062536), [The Witch](https://www.imdb.com/title/tt4263482), [Locke](https://www.imdb.com/title/tt2692904), are some of the A24 movies that I thoroughly enjoyed.

Simply based on my tracking, it is very clear that I watched a lot of mindless TV. I did enjoy watching (& rewatching) [Succession](https://www.hbo.com/succession) but other than that, TV was mostly something that played in the background while I did something else. I gave myself a pass, taking into consideration that there is nothing better to do in lockdown, but I hope to be better about this in the coming year.

## Music

According to Spotify, I've listened to **13,553** minutes of Music this year. Here are my top songs from 2020:

<iframe
    src="https://open.spotify.com/embed/playlist/37i9dQZF1EM8U79D4evWNK"
    width="100%"
    height="80"
    frameBorder="0"
    allowtransparency="true"
    allow="encrypted-media"
></iframe>

## Misc.

This year has been an onslaught of unprecedented events. I was very fortunate to have been able to keep my job during the pandemic even though my health suffered both in terms of physical and mental. In the coming year, I intend to do a better job of making health a priority.

I have maintained a journal for every day this year and it has been going on for the past 7 years now. I usually describe the day and the things that happened, but because of the lockdown, most of the days have the same monotonous journal entry. For the next year, I plan to answer prompts that would capture the uniqueness of the day instead of -- "I woke up, I worked, I went to sleep". I also plan to continue collecting the data that I do already and maybe look into gathering some more data points.

Despite all of the issues of this year, I believe that I discovered faults in the way I did things -- for eg, chasing the distance as the paramount metric for improvement in running, reading to finish books rather than simply enjoying the activity of reading, watching mindless TV, eating unhealthy food, unhelpful journaling habits, and a host of other things. Knowing what is wrong is half the battle, the next part now is to work on fixing it and that is what I hope to achieve in the coming year.


Things I achieved in 2020 and expectations for 2021.

Year in review - 2020


I am a firm believer in 'Quantified Self' but my motivation behind it isn't just improving myself. It could simply be something interesting about myself that I can find out. I've written about some of the the things I use to track data about myself in this [post](/quantified-self).

I enjoy watching videos on YouTube (mostly music videos, movie trailers and video essays on various topics) and I realized that a lot of times, I keep rewatching the same videos. For other streaming platforms like Netflix, Hulu, HBO, etc. a service like [trakt](https://trakt.tv) does a good job but for YouTube, there is no way to keep track of your personal viewing activity.

After researching for an existing solution for a while, I realized there was nothing available. YouTube does have a searchable playlist of your viewing 'History' but it seems unreliable. A lot of my viewing history doesn't seem to get added and I can't do much with that list. It is just there. Other solutions don't really exist so I decided to build something for myself.

## Expectations

I wanted this tracker to do the following:

-   Track how many videos I have watched on YouTube -- both unique views and rewatched views.

-   Keep a running list of my most rewatched videos (Top 10/Top 5).

-   Be focused for the browser because that is my primary way of accessing YouTube.

-   Be able to display my personal view count next to YouTube's view count.

-   Not be another application that sends data somewhere else (keep data on the client if possible, or end-to-end encryption).

-   Provide some control over pausing/unpausing the tracker.

-   If possible, be de-coupled from a YouTube/Google account.

## Research

There were a few different things I attempted to do which could cover most of my expectations. I quickly realized that there isn't a perfect solution available because no one really seems to care about this (which is fair), and YouTube's api on personal viewing history is non-existent.

I considered parsing the 'history' that YouTube provides but that didn't satisfy most of the expectations I had with this tracker. To be able to see the personal view count next to YouTube's count, there was only one possible solution (without having to create my own application that embeds YouTube videos) -- creating a Chrome Extension.

A chrome extension would be a lightweight addition which won't need to be tied down to a YouTube account to collect data and it could also modify the DOM of the page to add the view count. That seemed like the best solution in this particular case.

## Implementation

To describe the architecture of how chrome extensions should be written is a whole other post. I'll keep this one focused to how my YouTube tracker was made.

![Architecture of the Chrome Extension](/images/posts/2020-08-28-a-chrome-extension-to-track-youtube-viewing-activity/youtubeviews_architecture.png)

The background script uses the `tabs` API to track each time a YouTube video has finished loading on a tab. Once the tab url matches this regex:

```regex
/(?:https?:\/{2})?(?:w{3}\.)?youtu(?:be)?\.(?:com|be)(?:\/watch\?v=|\/)([^\s&]+)/
```

a listener first checks the localStorage (`storage` API) to see if this particular video was watched before. If the video was, the background script updates the view count, otherwise it adds the video to localStorage and sets the view count to 1.

The background script also sends a message to the content script which essentially runs in the context of the tab. The content script then modifies the DOM and adds individual view count next to YouTube's view count.

![(landscape) YouTube Screenshot to display the individual view count (gray dotted line added to the screengrab for visibility)](/images/posts/2020-08-28-a-chrome-extension-to-track-youtube-viewing-activity/youtube_screenshot.png)

The `popup.html` serves as the UI for the extension and provides the user some control over the tracker. You can pause the tracker or hide the count on the DOM. It also shows the top five most watched videos and their count on the carousel and also the total count of unique and re-watched videos. These are computed by iterating over the localStorage for all the videos watched so far.

![(Img 3) YouTube views chrome extension popup UI)](/images/posts/2020-08-28-a-chrome-extension-to-track-youtube-viewing-activity/youtubeviews_popup.png)

## Insights

This project was another experience in -- 'There is no perfect answer' and it is about trade-offs and choosing the best possible solution. There are issues with the approach I chose -- these are tied to a browser because of the localStorage. There is an option that chrome provides where you can sync localStorage throughout all devices with Chrome logged in on the same id, but then that ties it to the account. I picked the one that would retain all data on-device. Similarly, one thing that proved complex was to figure out the replay that comes up after a YouTube video ends, because the controls to access/modify the DOM of the video player were not available.

Nevertheless, I am happy with how it turned out and that it keeps on working in the background providing me with some interesting data about myself when I choose to see it.

## Recommendations

Here are some YouTube channel recommendations for those who are interested in watching video essays.

-   [CineFix](https://www.youtube.com/c/CineFix)
-   [Kurzgesagt – In a Nutshell](https://www.youtube.com/user/Kurzgesagt)
-   [Lessons from the Screenplay](https://www.youtube.com/c/LessonsfromtheScreenplay)
-   [Nerdwriter1](https://www.youtube.com/user/Nerdwriter1)
-   [Pursuit of Wonder](https://www.youtube.com/c/PursuitofWonder)
-   [Screened](https://www.youtube.com/c/Screened)
-   [Veritasium](https://www.youtube.com/channel/UCHnyfMqiRRG1u-2MsSQLbXA)

## Try it out

[Chrome Webstore](https://chrome.google.com/webstore/detail/youtube-views/nnhlpinbmbjmoofeifjibiipnbopahmg)  
[Github](https://github.com/yagrawl/youtubeviews)


A chrome extension to track YouTube viewing activity locally.

A Chrome extension to track YouTube viewing activity


About four years ago, I started working on a simple project — a Messenger bot that 'recommends' movies. I called it '[moviebot](/moviebot)'. It was written in JavaScript (node) and hosted on Heroku. At the time, Messenger bots seemed like an interesting avenue to explore and I was simply following a tutorial to set it up. I made none of the choices, from the language to the deployment platform. It did a variety of things like recommending a movie, displaying all movies by a particular person, genre-based search, and even showed theaters near a provided location.

![(Img 1) Moviebot features](/images/posts/2020-07-15-lessons-from-refactoring-an-old-project/moviebot.png)

I thought I had done a pretty good job simply because it worked. I actually had 500+ unique users at the time. In reality, it was a complete mess. It was a single file consisting of 1000+ lines, with no discernible order of methods. I had a lot of code duplication, no proper error handling, terrible commit history with a bunch of API keys all pushed upstream to public GitHub (All the API keys in the git history have now expired. It's all good). It was littered with whitespace and the comments were written more from the convention point of view than them actually being helpful. I was importing a bunch of libraries that I wasn't using and I did the same with a lot of variables. Simply put, anyone looking at it could easily point out how crappy it was.

Fast forward two years, I received an email from Facebook saying that they were sunsetting their original API for messenger bots and that all v1 bots would stop working if they weren't updated. I hadn't looked at this code in a while, but I decided to go ahead and refactor it — using what I had learnt since then. I actually improved a lot on the existing code. I modularized the code into different files, each with a specific purpose. I removed as much code duplication as possible and trimmed it down to 400 lines from 1000+ while keeping all the features from the first iteration. The variable names were much more informative and all the things that I wasn't using were now gone. I added some decent error handling so if something went wrong, it wouldn't crash the entire application. I was pretty happy with this iteration.

Two more years passed by. I picked it up again out of the blue. I had started to get into TypeScript and I wanted to start a new project to get some practice. I decided to just refactor my existing code and make it better. Now that I look at it with a fresh set of eyes and with some experience working as a full-time developer, I see a lot more issues.

The most important one — there were no tests. None at all. Generally when people work on a personal project, they don't tend to write tests, which is understandable. But I've started seeing tests as an important part of development, than an afterthought. The bot relies entirely on an external API called TMDb and if TMDb were to change their response structure at any point, my bot would start failing and I won't find out for a long time. On top of that, when I added a change, it was untested and I would deploy it to 'production' and see if it was working. If it wasn't then I would look at the logs in 'production' and push the fix and the cycle continued. This accounts for a bunch of commits all with the same message in the first two iterations. That is a terrible way to develop anything. I added integration tests and unit tests.

I was repeatedly making the same request to the TMDb API again and again. Rate limiting wasn't really an issue since the traffic on the bot is pretty low, but it definitely made it slower. I added a caching layer to make it faster. I then improved upon the existing modeling, added more extensive error-handling, implemented a better approach to the product itself, cleaned the whitespacing, made it more readable and numerous other things. I am pretty happy with this (for now). From this trend, I can safely say that it is going to change in the future.

![(Img 2) Refactor bullet points](/images/posts/2020-07-15-lessons-from-refactoring-an-old-project/refactor.png)

From this exercise, I learnt a few things:

-   There is so much more to learn. After each iteration, I felt like I had written the best possible solution to the problem at hand but in reality every refactor was suboptimal compared to the next. There are so many things I've learnt in the last two years and there is so much more to learn in the next two.

-   I have made progress as a developer. At no point while I was working on this project did I take this lightly. I thought I was writing clean code at each iteration. This gave me an objective insight into my growth in the last four years and I hope to continue the trend.

-   Helped me in understanding the value of writing clean & maintainable code. If the application I chose to begin with was complicated or indecipherable, the first refactor itself would have never happened — even though it was written by me. In a professional environment with multiple people working on the same piece of complicated code over a span of years, things are bound to get dicey. This refactoring exercise serves as another real-world example of the importance of clean code in action.

-   (Psychological) Tunnel vision is very real. While most of the things I oversaw in the prior iterations stem from a lack of experience, tunnel vision also had a part to play. Once I thought I knew what the problem was, I kept focusing on it without ever stopping and considering if I had even understood the problem correctly. While it isn't always practical to keep stepping away from the problem at hand, it is definitely worth a shot whenever possible.

I would highly recommend trying this with your own old projects. It is certainly a rewarding experience.

**UPDATE** : As of 12/24/20, I've shutdown the messenger bot because it was hard to keep up with Facebook's ever-changing API and because I deactivated my Facebook Account.


Things I realized on updating 'moviebot' twice over the span of four years.

Lessons from refactoring an old project


I had been aware of options as a trading instrument for quite some time and it always seemed fascinating. I very recently started trading options on Robinhood (Millennial's 'broker' of choice, despite all of its shortcomings). Robinhood clubs all the option positions together with the equity positions and it becomes hard to keep track of the returns on a particular instrument type. I have a long position on the stocks that I hold so I don't really care much for a combined view of my equity and options positions. Options by their very nature are time sensitive and I wanted to know if there was a vague co-relation between the types of options I buy and the returns I get on them. Also, this would be a fun project to work on during lockdown.

## Expectations

I wanted this application to be able to do the following things:

-   Consolidate all the trades made on a particular option to show the exposure, return and the net earnings for all positions that have been closed.

-   A simple UI to see potential returns on a currently open position, if the price of the option either goes up or down.

-   Notify if an open option is close to its expiry.

-   Be able to see the difference between the price of the underlying stock on the day of the option buy and the strike price.

-   Be able to sort options based on a variety of metrics to see if there are any obvious trends.

-   Import data from Robinhood by either scraping the web application or parsing the monthly statement report.

## Implementation

The very first challenge was a complete block. Scraping Robinhood's statements tab is non-trivial and parsing the monthly statement sort of defeats the purpose so to get it rolling, I manually entered the data. I decided to use a `json` file and it is modeled as follows:

```json
{
    "id": 19,
    "ticker": "UAL",
    "strike": 85,
    "type": "CALL",
    "expiry": "09/18/2020",
    "events": [
        {
            "eventid": 1,
            "action": "BUY",
            "date": "03/17/2020",
            "contracts": 1,
            "price": 1.0
        },
        {
            "eventid": 2,
            "action": "BUY",
            "date": "04/03/2020",
            "contracts": 10,
            "price": 0.16
        },
        {
            "eventid": 3,
            "action": "BUY",
            "date": "04/03/2020",
            "contracts": 20,
            "price": 0.12
        },
        {
            "eventid": 4,
            "action": "SELL",
            "date": "04/29/2020",
            "contracts": 1,
            "price": 0.15
        },
        {
            "eventid": 5,
            "action": "SELL",
            "date": "04/29/2020",
            "contracts": 20,
            "price": 0.16
        },
        {
            "eventid": 6,
            "action": "BUY",
            "date": "04/29/2020",
            "contracts": 5,
            "price": 0.17
        }
    ],
    "close": "",
    "high": 38.14,
    "low": 30.05
}
```

Since this application is going to be specifically for options, this modeling made the most sense to me. The constants in an option -- `ticker`, `strike`, `type` of the option and `expiry` define the entry. There can be multiple buy and sell `events` on the same option without following a pattern so I added an `events` attribute which is an array that contains details on the buy/sell. Finally, `close`, `high` and `low` were added to build new features.

Also, I was making this mostly for personal use so I decided to just keep it on my local machine and built it out in React.

Here is what it looks like (sample data):

![(landscape) Options Application](/images/posts/2020-05-08-options/closed_option.png)

## Features

A slider that updates the potential return on an open option if the price goes up or down.

![(landscape) Open Options potential demo](/images/posts/2020-05-08-options/open_potential.gif)

See all orders on a particular ticker:

![(landscape) Filter according to Ticker](/images/posts/2020-05-08-options/ticker_sort.png)

Sorting options based on different parameters.

![(landscape) Sorting Demo](/images/posts/2020-05-08-options/sorting.gif)

Additionally, the `Difference` is the percent difference between the strike price of the option and the average of the high and low for the day the option was bought. The red arrow signifies 'Out of the money' and green arrow represents 'In the money'. I hoped this would help me with gauging which options yield a better return and if the premium is actually worth it.

Timeline is the red progress bar that shows the days to expiry. When it gets to 75% on any option it would start blinking.

## Insights

Frankly, I didn't trade enough volume to draw any conclusions. I did see a pattern -- lower `Difference` results in higher `Returns`. This is pretty obvious because if the `Difference` is low, the option is bound to expire in the money (if the trend is in the favor). The main 'strategy' I went with was to not lose money so the potential range selector on the open options feature helped me set limit orders without being greedy. They are of course pretty optimistic but they have been making me decent returns so far. In essence, it feels like in options trading you win some, you lose some -- just need to make sure that you win more than you lose.


A web application to manage my options position

Options


More often than not, your backend server needs to talk to downstream services, third party APIs and the database. These calls are expensive both in terms of time and money. Consider for example, your API fetches popular movies from a movie API which charges you based on each call you make or, you need to get a user's joining date to your app to display on their profile. The list of popular movies is not likely to change in a span of few hours while the user's joining date is not bound to change at all.

For fetching the popular movie data, each time you'd call the third party API to get the same information that you got a minute ago. This would add noticeable performance issues and higher costs to your application. Similarly, for a profile that is being accessed frequently, the database is repeatedly being queried for the same data and would definitely rack up heavy bills.

There is a simple solution to this issue -- Caching.

## Caching

Caching is the process of storing data in a high-speed data storage layer (cache). The cache is generally stored in fast access hardware and is more efficient than fetching data from the primary data store that the application uses.

Here's a very basic example of Caching -- memoization. Note that memoization is a very specific form of caching which deals with storing the return value of a function based on its parameters.

Calculating the n<sup>th</sup> number in the [Fibonacci sequence](https://en.wikipedia.org/wiki/Fibonacci_number).

```js
const fibonacci = (n) => {
    if (n < 2) return n;

    return fibonacci(n - 1) + fibonacci(n - 2);
};
```

Basically, the snippet above recursively calls our method for (n - 1) and (n - 2) and adds it together. Let's break it down for n = 4.

Here's what the call stack would look like:

![(Img 1) Fibonacci normal call stack](/images/posts/2020-02-28-caching-api-with-redis-and-node/fibonacci_normal_call_stack.png)

As you can see, we compute `fibonacci(2)` which can be thought of as a relatively resource consuming operation, multiple times. We could have essentially stored the value for `fibonacci(2)` somewhere when we calculated it the first time and used the store's value the second time to speed up the process.

```js
const fibonacci = (n, cache) => {
    cache = cache || {};

    if (cache[n]) return cache[n];
    if (n < 2) return n;

    return (cache[n] = fibonacci(n - 1, cache) + fibonacci(n - 2, cache));
};
```

Here's the updated call stack with the memoization process:

![(Img 2) Fibonacci memoized call stack](/images/posts/2020-02-28-caching-api-with-redis-and-node/fibonacci_memoized_call_stack.png)

As you can see, we were able to reduce some compute time with memoization which is just a form of caching. Now, let's use this technique to cache responses from a third party API service using Redis.

## Redis

[Redis](https://redis.io/), according to its website,

> [Redis] is an open source, in-memory data structure store, used as a database, cache and message broker.

Find the instructions to download it on your local machine [here](https://redis.io/download).

## Demo

Let's set up a simple node project to test this out. In your project directory,
run `npm init` to start the node project. Answer all the prompts appropriately and then create a new file called `index.js` within the project directory.

Install all dependencies we will use for this demo:

```bash
npm i express redis node-fetch
```

We have a simple endpoint that provides details about SpaceX's latest launches.

```js
"use strict";

const express = require("express");
const fetch = require("node-fetch");

const app = express();
const PORT = process.env.PORT || 4000;

app.get("/spacex/launches", (req, res) => {
    fetch("https://api.spacexdata.com/v3/launches/latest")
        .then((res) => res.json())
        .then((json) => {
            res.status(200).send(json);
        })
        .catch((error) => {
            console.error(error);
            res.status(400).send(error);
        });
});

app.listen(PORT, () => console.log(`Server up and running on ${PORT}`));
```

After you run the server using `node index.js`, it should start up at `localhost:4000`.
I'm using [Postman](https://www.postman.com/) to test my API.

    GET localhost:4000/spacex/launches

results in,

![(Img 3) Postman screengrab with API response not cached](/images/posts/2020-02-28-caching-api-with-redis-and-node/without_cache.png)

Notice the time in the red box on the screengrab above. It is `489ms`. Now let's add caching using Redis. Make sure you have Redis running on your local machine. Run:

```bash
redis-server
```

on a new terminal window. It should look something like this.

![(Img 4) Redis Server](/images/posts/2020-02-28-caching-api-with-redis-and-node/redis_server.png)

Now, add middleware to check if the key exists in the cache, if not then get it from the third party API and update the cache.

```js
"use strict";

const express = require("express");
const fetch = require("node-fetch");
const redis = require("redis");

const PORT = process.env.PORT || 4000;
const PORT_REDIS = process.env.PORT_REDIS || 6379;

const app = express();
const redisClient = redis.createClient(PORT_REDIS);

const set = (key, value) => {
    redisClient.set(key, JSON.stringify(value));
};

const get = (req, res, next) => {
    let key = req.route.path;

    redisClient.get(key, (error, data) => {
        if (error) res.status(400).send(err);
        if (data !== null) res.status(200).send(JSON.parse(data));
        else next();
    });
};

app.get("/spacex/launches", get, (req, res) => {
    fetch("https://api.spacexdata.com/v3/launches/latest")
        .then((res) => res.json())
        .then((json) => {
            set(req.route.path, json);
            res.status(200).send(json);
        })
        .catch((error) => {
            console.error(error);
            res.status(400).send(error);
        });
});

app.listen(PORT, () => console.log(`Server up and running on ${PORT}`));
```

After you try GET on `localhost:4000/spacex/launches`, it would still take about the same time it did the first time we ran before adding Redis. This is because the cache doesn't have that key present and has now updated it. On running it a second time, you'll be able to see the difference.

![(Img 5) Postman screengrab with API response cached](/images/posts/2020-02-28-caching-api-with-redis-and-node/with_cache.png)

One very obvious pitfall in this implementation is that once we add it to the cache, we will never fetch the updated value from the third party API. This probably isn't the expected behavior. One way to counter this is to use `setex` which takes an expiry argument. It essentially runs two atomic operations. `SET` and `EXPIRE`. After the set expiry period, we fetch the data again from the third party api and update the cache.

## Conclusion

Caching is a powerful tool when used properly. Considering the type of data and how important the latest value is, cache can be added to improve performance, reliability and bring down costs.


Making faster responses and decreasing dependency on external APIs.

Caching API with Redis and Node


I went to South Africa for a week to celebrate my parents' 25th Wedding
Anniversary. My flight from San Francisco was delayed because of a technical
issue and I had to reschedule my connection to Johannesburg. According to our
itinerary, I was supposed to land at 7 in the morning and drive down to
Kruger National Park. The Orpen Gate apparently closes at 5 and my rescheduled
flight reaching at 12 PM was not going to cut it. After I landed at Johannesburg, I
took another domestic flight to [Hoedspruit](https://www.eastgateairport.co.za/)
and then headed over to Kruger National Park.

We were booked on a [night safari](http://greater.krugerpark.co.za/Kruger_Park_Game_Viewing_Activities-travel/kruger-night-game-viewing.html). Unfortunately, we didn't see any of
the big cats but I really enjoyed the ride through the Night sky. Also, the
safari had small spotlights on both sides, which definitely felt like
something that shouldn't be legal.

The next day we just drove around the park and saw the usual suspects -
Elephants, Giraffes, Zebras, Deer, Hyenas, Honey Badgers and some spectacular
views of the forest.

<iframe
    src="https://www.youtube.com/embed/pbqF0b9fN6A"
    frameBorder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
    className="responsive-iframe"
></iframe>

![(landscape) A Zebra in the Kruger National Park](/images/posts/2020-02-10-south-african-vacation/kruger_zebra.png)

The following day we went to [Lions Park](http://www.lionandsafaripark.com/) near
Johannesburg. It is essentially a reverse zoo where you sit inside a car and
drive inside enclosures. Then you also get to play with the cubs. I don't particularly think this is something that should be allowed to exist because the Cubs were clearly sedated. This cannot possibly be good for them.

![(landscape) Playing with Lion Cubs](/images/posts/2020-02-10-south-african-vacation/cubs.jpg)

Next stop was Cape Town. Its a short 2 hour flight from Johannesburg. The very
first place we went to in Cape Town was the Table Mountain. It is highly weather
dependent and one of the must visit places in South Africa. The Gondola ride up
the mountain is quite an experience in itself - it rotates around its axis
giving you a complete 360° view. From the top of the mountain you can
essentially see the entire city.

![(landscape) View from Table Mountain](/images/posts/2020-02-10-south-african-vacation/table_mountain.jpg)

Another interesting place in Cape Town is the Lion's Head Mountain, named so
because apparently it looks like a Lion's head. Honestly, I don't see it.
Nevertheless, it looks beautiful.

![(landscape) Lionhead Mountain during the Sunrise](/images/posts/2020-02-10-south-african-vacation/lion_head_mountain.jpg)

The next morning I ran across the Beach Road and it is absolutely stunning.

![(square) 5K run in Cape Town](/images/posts/2020-02-10-south-african-vacation/cape_town_run.jpg)

Shortly after breakfast we left for Boulders Beach commonly famous for
inhabiting Penguins. I had never actually seen a penguin in the 'wild' before
so this was quite an experience for me.

![(landscape) Boulders Penguin Beach](/images/posts/2020-02-10-south-african-vacation/boulders_beach.jpg)

Next stop was Cape Point -- also my favorite of all the places I've seen in
South Africa. Cape Point is the south western tip of the African Continent.
Our guide claimed that Cape Point was the place where the two oceans - the
Indian Ocean and the Atlantic Ocean met. On further research, I found that the
guide was misinformed and the official geographic divide is defined by
Cape Agulhas which is about a 100 miles South East of the Cape Point.
Nevertheless, it is simply breathtaking.

![(vertical) Cape Point Sign](/images/posts/2020-02-10-south-african-vacation/cape_point_sign.jpg)

The lighthouse atop the Cape Point was originally erected in 1860 and its white
flashing light could be seen by ships 67 kms out to sea. Since it was often
covered by cloud and mist, it was eventually destroyed by the Portuguese liner
'Lusitania' in 1911. This 'new' lighthouse was subsequently erected on a higher
ground.

![(vertical) Lighthouse at Cape Point](/images/posts/2020-02-10-south-african-vacation/lighthouse.jpg)

Near Cape Point, another spot to visit is the Cape of Good Hope. I do not have
strong sources to cite on this but apparently the first ever explorer to see
the Cape, Bartolomeu Dias, named it _Cabo das Tormentas_ or 'Cape of Storms' but
later changed it to _Cabo da Boa Esperança_ or 'Cape of Good Hope' at King
John II's suggestion since it optimistically opened up a sea route to the East.

The next day after another 5K run, we went to a spot called 'Maiden's Cove' which
has a great view of the Twelve Apostles. The day we went, it was outrageously
windy (outrageous even for the locals). I was quite literally being pushed back.
It was all fun and games till the sand from the beach started hitting my face.
The view made the entire thing worth it.

![(popup) Camps Bay](/images/posts/2020-02-10-south-african-vacation/camps_bay.png)

Another recommended spot was 'Seal Island'. We took a boat out there and it was
probably the worst hour of the entire trip. I was extremely sea sick and
couldn't be bothered to look at the Seals.

![(landscape) Seal Island](/images/posts/2020-02-10-south-african-vacation/seal_island.jpg)

The day after, we visited a few wineries in Constantia Valley and Stellenbosch.
It is hard to pick a favorite but I really liked [Steenberg Farm](https://www.steenbergfarm.com/)
because of how knowledgeable the servers were. One of the best wines I tasted
there is 'The Black Swan'. The story behind the name is actually quite interesting.
The Steenberg Farms were established in 1682 by Catherina Ustings Ras, a German
immigrant to the Dutch Cape Colony. It was originally named _Swaaneweide_ or
'Feeding place of the swans', probably because of her hometown of Lubeck,
Germany. Her first five husbands died mysteriously and this wine was dedicated
to her -- 'The Black Witch' but negative names don't play too well from a
marketing standpoint so they changed it to 'The Black Swan'. I really loved the
taste even though my palette isn't mature enough to pick up notes of lime,
gooseberry, blackcurrant and the coat of cold mountain-side breeze on the grapes.

![(landscape) Steenberg Winery](/images/posts/2020-02-10-south-african-vacation/steenberg_winery.jpg)

Other beautiful wineries worth checking out include -
[Meerlust Estate](http://www.meerlust.co.za/) and [Spier Wine Farm](https://www.spier.co.za/).

![(landscape) StellenBosch](/images/posts/2020-02-10-south-african-vacation/stellenbosch.jpg)

On the last day in Cape Town, we visited a neighborhood called 'Bo - Kaap'
which is known for its brightly colored homes and cobbled stone streets.

![(landscape) Bo - Kaap Neighborhood](/images/posts/2020-02-10-south-african-vacation/bo-kaap.jpg)

We couldn't get tickets to visit Robben Island which, according to over tour guide,
is another highly recommend spot to visit because of its historical importance.
Apart from the places above, we also saw the Grand Parade, Nelson Mandela's
statue at the City Hall, the V & A Waterfront, Two Oceans Aquarium
(which I felt was a waste of time) and some grocery stores to pick up some South
African snacks. _NikNaks Chilli Cheese_ is absolutely delicious.

We then flew back to Johannesburg. I only had half a day before I needed to be at
the airport to fly back to San Francisco, so we went to a place called
'Chameleon Village' to buy some souvenirs. Calling the sales' practices within
this flea market 'aggressive' would be an understatement. Based on an account of
ten stores within a span of 2 hours: they essentially pull you in their store
and assure you that you don't need to buy anything and invite you to just
'come in and look'. Next, they would try to 'gift' you something for
visiting their country. I politely declined but they essentially forced me to
take it. Then they want you to 'support' them in return. It got to a point where
I had to tell them that I'm willing to just give them the money and not get
anything in return because I didn't have enough space in my luggage to take
anything back. Of course I didn't want to disrespect them by just handing them
money so I just end up paying for the 'gift' that I never wanted.

Another tactic is basically when you actually buy something from one store, the
salesman would hand it over to someone else to wrap it up. They take you to
their store to 'come in and look' while they wrap it up and the whole cycle
continues. I find it hard to say 'No' to things and the entire enterprise feels
exploitative to people like me. I appreciate that it is hard to make a living by
selling souvenirs but the 'gift' approach makes the entire experience feel
deceiving and exhausting.

Apart from the very last experience, South Africa was amazing and the people
were extremely friendly and chilled out. Definitely one of the best places for
a family vacation!


South African vacation


There is no denying that data is well on its way to become the most valuable
commodity in the history of the world. Big corporations try to capture, even buy
as much data on their users as possible. The simple reason behind that is - it
lets them gauge their audience's interests. It has become almost impossible to
escape this phenomenon. Even your [Airbnb Messages](https://www.nytimes.com/2019/11/04/business/secret-consumer-score-access.html) and Food Orders on delivery apps aren't safe.

Unless you renounce everything and live off the land in the woods, it is
next to impossible to avoid your data being collected and targeted by these
corporations. I've decided to lean into it and collect as much data on myself as
possible so that at least I could personally benefit from it.

I've been tracking data about myself for about 4 years now. I don't claim that
this data reads like an open book version of myself. In most cases, it is
nothing more than mildly interesting but every now and then it shows a
non-obvious change that significantly improves my day to day life. That makes
all of this worth it for me. Collecting data has also instilled in me a certain
discipline that is required to stick with a not entirely undemanding activity.

## Data I Collect

Here's a list of the major categories I collect data in :

-   Health (obviously)
-   Places
-   Finances
-   Entertainment
-   Work

That pretty much covers everything I need to know and everything I do.

## Health

Health data has undoubtedly been the most helpful to me since I've started
collecting data. I log my weight every morning on the iOS [Health App](https://www.apple.com/ios/health/).
It also keeps tab on the steps I take everyday (when I have the phone on me, of
course) but it isn't something I actively do or want - still, nice to have.

![Weight Tracking in the iOS health app](/images/posts/2020-01-10-quantified-self/health_weight_tracking.png)

I also like running and I collect my running data on the [Nike Run Club](https://apps.apple.com/us/app/nike-running/id387771637) App. I would not recommend this app if you are just
starting out. The application itself is pretty great and does what it is supposed
to, but the API is closed and there is no way available to export your own data.
[Strava](https://www.strava.com/) is a better option. I used to live in Illinois and it gets extremely cold
so you have to run on the treadmill for half a year and for some reason Strava
doesn't track runs on the treadmill. Another workaround for this is to track
everything on Nike Run Club and use an app called [RunGap](https://www.rungap.com/) to
export it to Strava or wherever you want.

I have a somewhat complicated workflow wherein I record my runs on Nike Run Club, then use
RunGap to Export it to Strava and finally, use Strava's public API to feed data to a
personal React application I built to see the stats that I want.

<iframe
    src="https://runstats.netlify.com"
    className="responsive-iframe"
    frameBorder="0"
    scrolling="no"
></iframe>

I also track my food habits with an app called [LifeSum](https://lifesum.com/).
They have a very extensive database of ingredients and also support Barcodes.

![Food Tracking on LifeSum](/images/posts/2020-01-10-quantified-self/lifesum_food_tracking.png)

I've read about people collecting data concerning their mental health in apps where
you rate your mental state during the day. I've heard promising things
about it but I personally like a more detailed account of the day, so I maintain
a journal. I originally used to host it on [Evernote](https://evernote.com/) but
I've since moved it to [Notion](https://www.notion.so/). I've also tried to do
Intermittent Fasting for a few months and I used [Zero](https://www.zerofasting.com/)
to track the fasts.

I've been able to see direct correlations between what I eat and how I run the
next day, how my diet affects my productivity (recorded in the Journal) and how
intermittent fasting helped me lose weight. Data reassures you if you are doing
something right and gives you pause to reconsider and re-evaluate your day-to-day
activities if you are doing something wrong.

## Places

This stems from the obsession to collect data. I've not seen this be too useful
to me other than being able to recommend a restaurant in New Orleans to a
friend who's planning a trip. I use [FourSquare](https://foursquare.com/city-guide) to
add the places I've been to - restaurants, hotels, tourist attractions, etc.

Google Maps is always recording in the background anyway and while it is creepy,
I like being able to see that data about myself.

![Google Places Screengrab](/images/posts/2020-01-10-quantified-self/google_places.png)

## Finances

I have yet to come across a perfect solution for this issue which is again an
important category to track. I've tried several applications - [Clarity Money](https://www.marcus.com/us/en/clarity-money), [Mint](https://www.mint.com/), [Spendee](https://www.spendee.com/)
and a smattering of others. The automated ones don't always get the category of
the expense correctly and it becomes a hassle to go back and fix it. Also, the
descriptors provided by many banks are just outright incorrect and that is
extremely annoying. It is quite a challenge to automate this process, so while an
actual working app shows up, I simply track it manually on an application called
[Buddy](https://apps.apple.com/us/app/buddy-easy-budgeting/id936422955). It has
a clean no-bullshit UI and doesn't have any features that just 'kind of work'. I can
always export the data as a CSV file and use that data to see whatever I want.

For other details I use services like [Wealthfront](https://www.wealthfront.com/), [Credit Karma](https://www.creditkarma.com) and [Robinhood](https://robinhood.com/).
They have to maintain data for legal reasons and well, that's good enough for me.

## Entertainment

This is mostly for fun. I don't think I've gotten too much out of it except for
maybe - how much time I spend watching movies. I use [Trakt.tv](ttps://trakt.tv)
to monitor TV shows and Movies that I watch. It has to be entered manually and
I've been religiously following it for a while now. I would be able to answer
what my favorite genre is and it is nice to know that the data agrees. I also
maintain a list of movies I want to watch on an [IMDB](https://www.imdb.com/)
list and move it once I do.

![Trakt.tv screengrab](/images/posts/2020-01-10-quantified-self/trakt_tv.png)

I mostly listen to music on Spotify and I use [last.fm](https://www.last.fm/) to
keep track of the artists I often listen to and the song that I've played the most
number of times. Sometimes, it is pretty interesting when you discover non-obvious
things, for example, your preference to music coming out of a specific country
to others.

[Goodreads](https://www.goodreads.com/) is an obvious choice for tracking books.

[Screen Time](https://support.apple.com/en-us/HT208982) tracks my app usage
satisfactorily but I hoped for the Mac app to not include background apps in
that time because well, it isn't very accurate. I am currently working on a
chrome extension that would log browsing details locally.

## Work

Apart from JIRA boards and commit logs, I personally like to keep a version
controlled weekly account of things I've completed. It helps in framing the
year-end review and gives me time to reflect back upon the week.

Personal projects are also all version controlled and a good old to-do list
does the rest. I use [Todoist](https://todoist.com/).

## Conclusion

I have personally experienced the benefits of tracking data and I would highly
recommend others to give it a shot. Stick with it for a month and watch it
become a part of your daily routine. I am right at the brink of being obsessive
about collecting personal data - just enough to actually learn and grow with it
and not spend too much time collecting it. I should also mention that I pay for
premium models of most of these services and I've personally felt they are worth
it. I hope to stick with this for as long as I can and on the way, build my own
systems so I don't keep sharing **my** data with the corporations.


Some services I use to track data about myself.

Quantified self


Here are a few things I did this year and some goals for the coming year.

![(vertical) Graduation](/images/posts/2019-12-29-year-in-review-2019/graduation_cap.gif)

## Work

This year has been significantly different than any other in all of the 23 I've
had so far. I started my first full-time job this February after graduating
college. Working full-time is a very different experience as compared to college.
There are clear pros going for the working routine but it does take away some
amount of freedom. I could very easily stay up till 3 AM on a Tuesday night,
hanging out with my friends in college but I can't really do that now because
well, I have to go to work on Wednesday. I do however appreciate the weekends
free of worrying about deadlines.

I started working at Braintree as a Software Developer on the Bank Payments
team. I've learnt a lot of new things about how full stack development works at
a level much higher above my personal projects. I feel like the knowledge I have
about these systems is still very superficial and I aim to get more depth in the
coming year.

I worked on a couple of side projects but kind of left them halfway. I tend to
do this quite a bit. Next year, I want to make one side project but see it
completely to the end (or something that can be used by at least one person
other than me).

## Running

I have run consistently throughout the year and completed 585.1 KM. My pace has
improved steadily and even the distance that I can run has increased. I can run
a 10K without feeling dead afterwards.

<iframe
    src="https://runstats.netlify.com/2019"
    className="responsive-iframe"
    frameBorder="0"
    scrolling="no"
></iframe>

I plan to run a 1000 KM this year and hopefully the [San Francisco Half Marathon](https://www.thesfmarathon.com/)
in late July.

## Travel

I've been to a few places this year. Mostly before starting full-time work.

![(landscape) Deck in Maldives](/images/posts/2019-12-29-year-in-review-2019/maldives.jpg)

-   Thailand
-   Maldives
-   [Japan](/solo-trip-to-tokyo)

Also a bunch of places within the US and India. This year I have already planned
to travel to South Africa and a couple other countries (hopefully).

## Reading

I didn't get a lot of reading done over the year but I really liked the ones I
did end up reading.

-   **Shortest Way Home** by _Pete Buttegieg_
-   **Shoe Dog** by _Phil Knight_
-   **The God Delusion** by _Richard Dawkins_
-   **Sapiens: A Brief History of Humankind** by _Yuval Noah Harari_

I have a lot of books that I want to read this year already shortlisted and I
aim to spend some of the binging time on completing those books.

## Movies

I love watching movies and these are a few of the ones I really loved.

-   [Midsommar](https://www.imdb.com/title/tt8772262)
-   [Uncut Gems](https://www.imdb.com/title/tt5727208)
-   [Parasite](https://www.imdb.com/title/tt6751668)
-   [Ford V. Ferrari](https://www.imdb.com/title/tt1950186)
-   [Marriage Story](https://www.imdb.com/title/tt7653254)
-   [Good Boys](https://www.imdb.com/title/tt7343762)

This year I plan to collect data about my viewing activity on [trakt.tv](https://trakt.tv/).

## Music

According to Spotify, I've listened to **44,321** minutes of Music this year. It of
course does not include the time spent on YouTube and on my Vinyls.

<iframe
    src="https://www.youtube.com/embed/Odn-T9UgqZw"
    frameBorder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
    className="responsive-iframe"
></iframe>

## Misc.

I like collecting data about myself and this year I've tracked all my spendings
to the last cent and my weight every day to the last gram. I want to continue
doing it and build my own web applications to store my data. I also tried to
learn Spanish on DuoLingo for about a couple of months. I understand a little
bit now and I would love to get better at it.

I also want to focus more on my work and get a deeper/clearer understanding of
the work I am doing and frontend development in general.

This year turned out to be very productive and I hope to continue and improve
on this trend in the coming year.


Things I achieved in 2019 and expectations for 2020.

Year in review - 2019


Generally, a function is a sequence of instructions or a 'subprogram' that can be invoked by the code that is external (or internal) to that function. In essence, functions 'encapsulate' a particular task.

Functions are one of the fundamental building blocks in JavaScript and _really_ understanding functions can help tackle some of the JavaScript oddities.

## Functions in Javascript

An important thing to note about functions in JavaScript is that they are
_first-class objects_. This basically means that functions in JavaScript can be treated like any other JavaScript object and can be referenced as other variables or passed as arguments to a function. Functions can even have properties and other methods just like any other JavaScript object. The key difference between a function and other objects is that a function can be called.

Every function in JavaScript is a `Function` object. You can go into the console and try this out.

```javascript
function typeCheck() {}
typeCheck instanceof Function; // True
```

`Function` object has a few specific methods and properties like `apply`, `call`, `bind`, `isGenerator`, etc. that are not available on other Objects.

There are a few different ways in which a function can be defined in JavaScript and the way it is defined affects function behavior. Let's explore each way one by one.

### Function Declaration

This might be the most familiar way of defining a function. A function declaration consists of a name preceded by the mandatory `function` keyword and followed by an optional list of parameters inside a required pair of parenthesis `( )`.

```javascript
function sum(param1, param2) {
    return param1 + param2;
}
```

Two main things to be noted about this form of defining a function are:

-   A variable which holds the function object is created in the current scope with the same identifier as the function name provided. In our example, `sum`.

-   The variable is **hoisted** to the top of the current scope. You can read more on that [here](/hoisting-in-javascript).

To bring the second point home, lets look at an example :

```javascript
console.log(notYetDeclared()); // Logs 'Here!'

function notYetDeclared() {
    return "Here";
}
```

We were able to invoke the function `notYetDeclared` before we defined it.

### Function Expression

A function expression is very similar in syntax to a function declaration. The major difference is that a function expression does not need a function name.

```javascript
let sum = function (param1, param2) {
    return param1 + param2;
};
```

Function expressions are a part of another statement. In the example above, the function expression is part of the `sum` variable assignment.

Unlike function declaration, function expressions are _not_ **hoisted**.

```javascript
console.log(notYetDeclared); // Logs 'undefined'

let notYetDeclared = function () {
    return "Here";
};
```

An interesting use-case of Function Expressions is the ability to create IIFEs or Immediately Invoked Function Expressions. There are instances where we might want to define a function and invoke it right after the definition and never again. Sure, it can be done with function declaration but to make it more readable and to make sure that our program doesn't accidentally access it, we use an IIFE.

Consider this example,

```javascript
function callImmediately(foo) {
    console.log(foo);
}

callImmediately("foo"); // Logs 'foo'
```

We create a function called `callImmediately` which takes an argument and logs it and then we immediately call it. This same result can be achieved by doing this.

```javascript
(function (foo) {
    console.log(foo);
})("foo"); // Logs 'foo'
```

The key difference is that in the first case, the function declaration pollutes the global namespace and the named function `callImmediately` hangs around long after it is required. The IIFE is anonymous and hence cannot be called in the future.

### Arrow Functions

Arrow functions are an ES6 addition and are meant as a syntactically compact alternative to Function Expressions. Arrow functions are defined using a pair of parenthesis containing a list of parameters, followed by a fat arrow `=>` and then the function statements with curly braces `{}`.

```javascript
let sum = (param1, param2) => {
    return param1 + param2;
};
```

Since one of the main motivations behind the arrow function is syntax compactness, if the only statement in the arrow function is `return` we can remove both the curly braces and the `return` keyword, like so :

```javascript
let sum = (param1, param2) => param1 + param2;
```

Also the parens can be eliminated if we have only one parameter being passed to the arrow function.

```javascript
let double = (param1) => param1 * 2;
```

Some important things to note in this form of function definition are :

-   An arrow function does not have its own `this` and it uses the `this` value of the enclosing lexical scope.

    ```javascript
    let foo = {
        id: 10,
        logIdArrow: () => {
            console.log(this.id);
        },
        logIdExpression: function () {
            console.log(this.id);
        },
    };

    foo.logIdArrow(); // Logs 'undefined'
    foo.logIdExpression(); // Logs '10'
    ```

    In the above example, we have an arrow function and a function expression that logs `foo.id` using `this`.

-   An arrow function does not have the `prototype` property.

    ```javascript
    let foo = () => {};
    console.log(foo.prototype); // Logs 'undefined'
    ```

-   The `arguments` object is not available in an arrow function. You can read more about the `arguments` object [here](/parameters-&-arguments-in-javascript).

### Function Constructor

As mentioned earlier, every function in JavaScript is a `Function` object so to define a function we can also directly call the constructor of the `Function` object.

```javascript
let sum = new Function("param1", "param2", "return param1 + param2");
```

The arguments are passed as a list of comma separated strings `'param1', 'param2', ..., 'paramN'` and the last argument is the function body passed in as a string.

Performance wise, this way of defining a function is less efficient than function declaration or function expression. Functions defined using Function constructor are parsed each time the constructor is called because the function body string needs to be parsed each time unlike others which are parsed with the rest of the code.

One use-case of defining functions this way is to access the `global` object in node or the `window` object in the browser. These functions are always created in the global scope and do not have access to the current scope.

### Generator Function

Generators are an ES6 addition. Generators are special types of functions in the sense that unlike a traditional function, generators produce multiple values on a per request basis while suspending their execution between these requests.

```javascript
function* idMaker() {
    let index = 0;
    while (true) yield index++;
}

let gen = idMaker();

console.log(gen.next().value); // Logs 0
console.log(gen.next().value); // Logs 1
console.log(gen.next().value); // Logs 2
```

The `function*` and `yield` keywords are unique to a generator. Generators are defined by adding an `*` at the end of a function keyword. This enables us to use the `yield` keyword within the body of the generator to produce values on request.

You can read it in more detail [here](/generators-in-javascript).

## Conclusion

The choice of which definition type to use is dependent on the situation and what you are trying to achieve. A few general pointers to keep in mind:

-   If you want to leverage function hoisting use function declarations - for example in situations where you want to move the function implementation details to the bottom and just the abstracted flow on top for clarity.

-   Arrow functions are well suited for short callback functions and more importantly, when the desired `this` is the enclosing function.

-   Avoid using the Function constructor to define functions. If the annoying syntax wasn't enough to keep you away, it could potentially be a risk from a security standpoint.


Different types of function definitions in Javascript and their consequences

Defining functions in JavaScript


In this article I have tried to explain my method of adding dark mode to a
react app created using `create-react-app` and SCSS. This is my method and by no
means do I claim it to be the best possible way of adding dark-mode to your
react app.

The end goal is to add a dark mode button component which can be added anywhere
in the react application which then on click switches it to dark mode and back. It also keeps track of a user's preference using `localStorage` - so if a user returns to the website using the same browser, the previously selected mode will be directly applied.

Let's get started.

As per the official [documentation](https://facebook.github.io/create-react-app/docs/getting-started), carry out the following steps:

```bash
npx create-react-app dark-mode
cd dark-mode
npm start
```

This will launch the react app on `localhost:3000` and it should look something like this.

![(landscape) create-react-app initialized](/images/posts/2019-05-20-dark-mode-in-react-using-scss/basic_create_react_app.gif)

Now that we have the react app set up, we can start adding the dark mode. First, we will remove the styles set in `App.css`. Remove line 12 `background-color: #282c34;` and line 19 `color: white;`.

This is what it should look like:

![(landscape) Removing default styling from create-react-app](/images/posts/2019-05-20-dark-mode-in-react-using-scss/create_react_app_white_bg.gif)

As mentioned in the title, we will use SCSS so that it is easy to scale the styling when you want to add more dark mode featured styles instead of merely flipping text and background.

```bash
npm install node-sass --save
# or
yarn add node-sass
```

Create a new file and name it `style.scss`. This is where we will add our color schemes for light and dark mode. Add the following snippet to the file.

```css
$background-color-dark: #292a32;
$background-color-light: #fbfaf8;
$complimentary-color-dark: #393b43;
$complimentary-color-light: #feffff;

body {
    background-color: $background-color-light;
    color: $background-color-dark;
}

body.dark-mode {
    background-color: $background-color-dark;
    color: $background-color-light;
}
```

Create another file called `DarkModeToggle.js`.This will be the main component where we will implement the dark mode toggle.

Add the following code to that file:

```js
import React, { Component } from "react";

import "./style.scss";

class DarkModeToggle extends Component {
    constructor(props) {
        super(props);

        if (JSON.parse(localStorage.getItem("DARK_MODE")) === true) {
            document.body.classList.add("dark-mode");
        }

        this.state = {
            darkMode: JSON.parse(localStorage.getItem("DARK_MODE")),
        };

        this.handleModeChange = this.handleModeChange.bind(this);
    }

    handleModeChange() {
        if (!this.state.darkMode) {
            document.body.classList.add("dark-mode");
        } else {
            document.body.classList.remove("dark-mode");
        }

        this.setState({
            darkMode: !this.state.darkMode,
        });
        localStorage.setItem("DARK_MODE", !this.state.darkMode);
    }

    render() {
        return <button onClick={this.handleModeChange}>Change Mode</button>;
    }
}

export default DarkModeToggle;
```

Now, include this new `DarkModeToggle` component within the `App.js`. Include this component right below 'Learn React'.

```js
import React from "react";
import logo from "./logo.svg";
import "./App.css";

import DarkModeToggle from "./DarkModeToggle";

function App() {
    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <p>
                    Edit <code>src/App.js</code> and save to reload.
                </p>
                <a
                    className="App-link"
                    href="https://reactjs.org"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    Learn React
                </a>
                <DarkModeToggle />
            </header>
        </div>
    );
}

export default App;
```

Now we have a very basic dark mode working. We can add more specific styles to dark mode in the `style.scss`.

![(landscape) Dark Mode demo](/images/posts/2019-05-20-dark-mode-in-react-using-scss/dark_mode_demo.gif)

Here's the [source](https://github.com/yagrawl/dark-mode) & [demo](https://yagrawl.github.io/dark-mode/).


How to setup dark mode in create-react-app using scss.

Dark mode in React using SCSS


One of the easiest ways to debug anything in JavaScript is by logging stuff
using `console.log`. But there are a lot of other methods provided by the
console that can help you debug better.

Let’s get started.

The very basic use case is to log a string or a bunch of JavaScript objects.
Quite simply,

```js
console.log("Is this working?");
```

Now, imagine a scenario when you have a bunch of objects you need to log into
the console.

```js
const foo = { id: 1, verified: true, color: "green" };
const bar = { id: 2, verified: false, color: "red" };
```

The most intuitive way to log this is to just `console.log(variable)` one after
the other. The problem is more apparent when we see how it shows up on the
console.

![(Img 1) Console Log without variable names visible](/images/posts/2019-04-17-how-to-use-the-javascript-console/console_image1.png)

As you can see, no variable names are visible. It gets extremely annoying when
you have a bunch of these and you have to expand the little arrow on the left
to see what exactly the name of the variable is. Enter computed property names.
This allows us to basically club all the variables together in a single
`console.log({ foo, bar });` and the output is easily visible. This also
reduces the number of `console.log` lines in our code.

## console.table()

We can take this a step further by putting all of these together in a table to
make it more readable. Whenever you have objects with common properties or an
array of objects use `console.table()`. Here we can use
`console.table({ foo, bar})` and the console shows:

![(Img 2) console.table() in action](/images/posts/2019-04-17-how-to-use-the-javascript-console/console_image2.png)

## console.group()

This can be used when you want to group or nest relevant details together to be
able to easily read the logs.

This can also be used when you have a few log statements within a function and
you want to be able to clearly see the scope corresponding to each statement.

For example, if you’re logging a user’s details:

```js
console.group("User Details");
console.log("name: John Doe");
console.log("job: Software Developer");

// Nested Group
console.group("Address");
console.log("Street: 123 Townsend Street");
console.log("City: San Francisco");
console.log("State: CA");
console.groupEnd();

console.groupEnd();
```

![(Img 3) console.group() in action](/images/posts/2019-04-17-how-to-use-the-javascript-console/console_image3.png)

You can also use `console.groupCollapsed()` instead of `console.group()` if you
want the groups to be collapsed by default. You would need to hit the
descriptor button on the left to expand.

## console.warn() & console.error()

Depending on the situation, to make sure your console is more readable you can
add logs using `console.warn()` or `console.error()`. There’s also
`console.info()` which displays an ‘i’ icon in some browsers.

![(Img 4) console.warn() in action](/images/posts/2019-04-17-how-to-use-the-javascript-console/console_image4.png)

This can be taken a step further by adding custom styling. You can use a `%c`
directive to add styling to any log statement. This can be used to
differentiate between API calls, user events, etc by keeping a convention.

Here’s an example:

```js
console.log(
    "%c Auth ",
    "color: white; background-color: #2274A5",
    "Login page rendered"
);
console.log(
    "%c GraphQL ",
    "color: white; background-color: #95B46A",
    "Get user details"
);
console.log(
    "%c Error ",
    "color: white; background-color: #D33F49",
    "Error getting user details"
);
```

You can also change the `font-size` , `font-style` and other CSS things.

![(Img 5) Applying styles to console log](/images/posts/2019-04-17-how-to-use-the-javascript-console/console_image5.png)

## console.trace()

`console.trace()` outputs a stack trace to the console and displays how the
code ended up at a certain point. There are certain methods you’d only like to
call once, like deleting from a database. `console.trace()` can be used to make
sure the code is behaving the way we want it to.

## console.time()

Another important thing when it comes to frontend development is that the code
needs to be fast. `console.time()` allows timing of certain operations in the
code for testing.

```js
let i = 0;

console.time("While loop");
while (i < 1000000) {
    i++;
}
console.timeEnd("While loop");

console.time("For loop");
for (i = 0; i < 1000000; i++) {
    // For Loop
}
console.timeEnd("For loop");
```

![(Img 6) console.time in action](/images/posts/2019-04-17-how-to-use-the-javascript-console/console_image6.png)

Hopefully, the article provided some information on various ways to use the
console.


How to use the JavaScript console


After graduating from college and before starting work full-time I decided to travel a bit. On my way to San Francisco to start the job, I decided to take a layover in Tokyo for a few days. This was my first ever experience traveling alone.

The very first night, I decided to stay in a capsule hotel to experience what that is like. (Also, I was going to arrive at about 9 PM and didn't feel like spending a whole lot on a hotel to just sleep.)

![(landscape) 9Hours Capsule Hotel in Shinjuku](/images/posts/2019-02-21-solo-trip-to-tokyo/capsule_hotel.jpg)

This place is called 9Hours and its in Shinjuku's Korea town. After I lugged my huge overweight bag from HND on two different trains and a couple of stations with no escalators, I was very glad to have a quick and easy check-in. I stuffed my things in the lockers, showered, and went out for a walk.

I saw a bunch of vending machines just lying outside and that was interesting. I also got a bunch of snacks from 7 Eleven and most of it was amazing. I then called it a night and that was about it for day 1.

![(landscape) Vending Machines in an alley in Tokyo](/images/posts/2019-02-21-solo-trip-to-tokyo/vending_machines.jpg)

The next day I moved to the Hyatt Regency in Shinjuku and I asked for a room on a higher floor. The receptionist was very nice and gave me a room on the 19th floor. After settling in I decided to get some lunch. It is always daunting to go out and eat alone but I was in Tokyo and there was no way I was going to order in.

I went to a Tonkatsu restaurant called [Katsukura](https://www.yelp.com/biz/%E5%90%8D%E4%BB%A3%E3%81%A8%E3%82%93%E3%81%8B%E3%81%A4-%E3%81%8B%E3%81%A4%E3%81%8F%E3%82%89-%E6%96%B0%E5%AE%BF%E9%AB%98%E5%B3%B6%E5%B1%8B%E5%BA%97-%E6%B8%8B%E8%B0%B7%E5%8C%BA). It had almost an hour of waiting time. I guess that feels like a norm with good Japanese restaurants. The food was amazing. I couldn't do much after that lunch so I came back to the room and napped for a bit.

![(landscape) Katsukura Lunch](/images/posts/2019-02-21-solo-trip-to-tokyo/tonkatsu.jpg)

In the evening I had an _Airbnb experience_ booked to walk around in Shibuya. The tour was fun and very informative. I got to see the busiest crosswalk which apparently wasn't as busy as it usually is because it was some public holiday. I also went to one of the biggest Don Quijote. There are a bunch of Kit-Kats. Japan is famous for its different Kit-Kat flavors. Apparently, Kit-Kat coincidentally translates to "You'll surely win" in Japanese.

![(landscape) Kit Kats in a Don Quijote in Shibuya](/images/posts/2019-02-21-solo-trip-to-tokyo/kit_kat.jpg)

I decided to go to Akihabara and see what the fuss was about. I never got into Anime but that place was highly recommended. I went into a Pachinko parlor and I started playing the game. I definitely didn't plan it out because there wasn't a way to switch language on it so I was just randomly pulling levers. Suddenly the machine started blaring and I freaked out. What freaked me out, even more, was that no one batted an eyelid to even look up what the confused Indian kid did to the machine to make it scream so loudly. I kept a Pachinko ball as a keepsake. I hope that is allowed. I really should have watched [this video](https://www.youtube.com/watch?v=-tBy2jemw4s&ab_channel=AbroadinJapan) before I went.

![(landscape) A Pachinko Parlor in Akihabara](/images/posts/2019-02-21-solo-trip-to-tokyo/akihabara.jpg)

I roamed around a little bit more and got back to my room a little late so I just decided to order some room service. That ends day 2.

![(landscape) Room Service](/images/posts/2019-02-21-solo-trip-to-tokyo/room_service.jpg)

The next day I woke up early in the morning and walked to the park near the hotel. Shortly after I had a Sushi making class and it is safe to say that I am going to attempt to make it again on my own when I get back.

![(landscape) I made Sushi!](/images/posts/2019-02-21-solo-trip-to-tokyo/sushi.jpg)

Later in the evening, I went on a Sake and Ramen tour. I tried a bunch of
different ones and I think I found my new favorite - Dassai 50. The ramen was absolutely delicious and I can't wait to eat more.

![(landscape) Ramen in Tokyo](/images/posts/2019-02-21-solo-trip-to-tokyo/ramen.jpeg)

I also was raiding the 7 eleven at the ground floor of the hotel for new and different snacks and I think I found a new favorite coffee-flavored candy.

![(vertical) Coffeebeat](/images/posts/2019-02-21-solo-trip-to-tokyo/candy.jpg)

The next day I went to a park in the morning and then went to see the Sensoji Shrine. It was really peaceful in spite of tourists like me swarming the place.

![(vertical) Sensoji Shrine](/images/posts/2019-02-21-solo-trip-to-tokyo/sensoji.jpg)

![(popup) Sensoji Shrine in Black & White](/images/posts/2019-02-21-solo-trip-to-tokyo/sensoji_bw.jpeg)

After that, I went to Ginza and this part of town definitely feels like it is from the future. I bought some high-end chopsticks that I hope to use with the Sushi I plan to make when I get back. Hopefully, that happens.

![(landscape) Ginza, Tokyo](/images/posts/2019-02-21-solo-trip-to-tokyo/ginza.jpeg)

Another thing I wanted to see was a spot where The Killers shot the
'Read My Mind' music video. I found this street in Shinjuku that looks like
the video albeit 10 years later.

![(landscape) The intersection where The Killers shot the 'Read My Mind' Music Video](/images/posts/2019-02-21-solo-trip-to-tokyo/read_my_mind.jpeg)

And here's the [original](https://www.youtube.com/watch?v=zc8hbSM1zVo). Looks the same, right?

![(landscape) Screengrab from the original 'Read My Mind' Music Video](/images/posts/2019-02-21-solo-trip-to-tokyo/read_my_mind_original.png)

I also wanted to go see this place in Odaiba. It was a really interesting
building that I had seen pictures of and I really wanted to see it in person.
I only had a rough location so it took some effort to find the
exact place. It is apparently a co-working space and it is absolutely
spectacular.

![(landscape) A co-working space in Odiaba](/images/posts/2019-02-21-solo-trip-to-tokyo/odaiba.jpg)

Later I met a friend who is working in Tokyo and went to the New York Bar atop the Park Hyatt in Tokyo. I loved [Lost in Translation](https://www.imdb.com/title/tt0335266/) and I really wanted to go to that bar. The view from the top was spectacular.

![(landscape) New York Bar & Grill atop the Park Hyatt in Tokyo](/images/posts/2019-02-21-solo-trip-to-tokyo/new_york_bar.jpg)

The next day, I concluded my short trip to Tokyo and headed to the airport to fly to San Francisco to start my new job at Braintree.


Solo-trip to Tokyo


Here are a few things I did this year and some goals for the coming year.

## Work

I interned at Braintree Payments in San Francisco over the summer. It was an
amazing experience and I'll be starting full time in February next year. I
learnt a lot of new things in my internship but it definitely felt like a
knowledge dump. I hope to get a more in-depth understanding of the things I've
learnt in my internship once I start working full-time next year.

![(landscape) A Braintree Coffeecup](/images/posts/2018-12-29-year-in-review-2018/braintree_coffee_cup.png)

## College

I left the last semester of college for all the courses that I really wasn't
into but were a required part of the curriculum. A bunch of electrical courses
are required as part of the Computer Engineering coursework at UIUC. For senior
design my team ended up making a barely working prototype of a vest for the
visually impaired that uses ultrasonic sensors to detect where an obstacle is
and uses positional tones to provide feedback to the user. It looks like a mess,
but it definitely worked!

![(landscape) Senior Design Project demo](/images/posts/2018-12-29-year-in-review-2018/senior_design.gif)

I also worked on a full stack side project called [Ballot](/ballot) which is
basically a polling application written in React & Node.

<iframe
    src="https://www.youtube.com/embed/UsVOjNbTrYs"
    frameBorder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
    className="responsive-iframe"
></iframe>

## Running

I didn't run a lot. **251.79** KM in total. The last 6 months I only ran **24.46** KM.
I need to be consistent throughout the year.

<iframe
    src="https://runstats.netlify.com/2018"
    className="responsive-iframe"
    frameBorder="0"
    scrolling="no"
></iframe>

I plan to run 600 KM this coming year - basically 50 KM every month. I also want
to be able to run a 10 K. The max distance I've been able to do comfortably so
far is 5 KM and I definitely want to increase that.

## Travel

I've traveled to a few countries this year.

![(popup) Puerto Vallarta, Mexico](/images/posts/2018-12-29-year-in-review-2018/puerto_vallarta.jpg)

-   Mexico
-   [Sweden](/visit-to-stockholm)
-   [Italy](/short-trip-to-tokyo)
-   [Turkey](/layover-in-istanbul)

Also a bunch of places within the US and India. After graduation, I plan to
travel to Japan for a few days and hopefully more places.

## Movies

I love watching movies and these are a few of the ones I really loved this year.

-   [Capernaum](https://www.imdb.com/title/tt8267604)
-   [Hereditary](https://www.imdb.com/title/tt7784604)
-   [Shoplifters](https://www.imdb.com/title/tt8075192)
-   [Spider-Man: Into the Spider-Verse](https://www.imdb.com/title/tt4633694)
-   [Beautiful Boy](https://www.imdb.com/title/tt1226837)

## Misc

This year I saw Hamilton the musical at the Richard Rodgers Theatre in New York.
It was spectacular!

![(vertical) Hamilton Playbill](/images/posts/2018-12-29-year-in-review-2018/hamilton_playbill.png)

Next year will be vastly different than the last 4 years of college and I hope
to make productive use of my time in the coming year.


Things I achieved in 2018 and expectations for 2019.

Year in review - 2018


After I graduated from college, I decided to take a 3-day layover in Istanbul before I headed home. I landed at the airport and went straight to the hotel I was staying in. It was pretty cold and dark and I was tired of all the traveling so I called it a day.

The next day I woke up and went to a place that served Turkish coffee. Turks seem to take their breakfast very seriously and I would highly recommend trying as many different breakfast foods as possible.

![(landscape) Turkish Coffee](/images/posts/2018-12-22-layover-in-istanbul/istanbul_coffee.jpg)

The breakfast itself is a bunch of things and they all taste incredible. This is one of the places off Anthony Bourdain's 'No Reservations'.

![(landscape) 'Traditonal' Turkish Breakfast](/images/posts/2018-12-22-layover-in-istanbul/istanbul_breakfast1.png)

Later I went to see Hagia Sofia and the Blue Mosque. The Mosque was still under construction from the inside.

![(square) The Blue Mosque, Istanbul](/images/posts/2018-12-22-layover-in-istanbul/istanbul_monument1.jpg)

Hagia Sofia looks beautiful but it was too crowded and just felt like a lot of
effort to go through to see inside. I skipped that part of the tour.

![(landscape) Hagia Sofia, Istanbul](/images/posts/2018-12-22-layover-in-istanbul/istanbul_hagiasofia.jpg)

I also went to the Grand Bazaar and I spent hours roaming around looking at all the pretty things. I got a few souvenirs and stuff to take back with me. Highly highly recommended!

![(landscape) Pots in the Grand Bazaar](/images/posts/2018-12-22-layover-in-istanbul/istanbul_pots.jpg)

![(vertical) Pretty Lights in the Grand Bazaar](/images/posts/2018-12-22-layover-in-istanbul/istanbul_lights.jpg)

I visited a few more places here and there but I mostly stayed on the European side of Istanbul. Oh also worth mentioning, Istanbul is the only city in the world which spans two continents. Here's a bridge that connects Europe and Asia.

![(landscape) The Bosphorus Bridge](/images/posts/2018-12-22-layover-in-istanbul/istanbul_bridge.jpg)


Breakfast, Breakfast and some more breakfast.

Layover in Istanbul


This was a project for a course I took in college in the Fall of 2018 -- CS 411 (Database Systems) at the University of Illinois at Urbana-Champaign. I wrote this report as part of the submission.

The idea behind this project was to create a portal that allowed users to create polls and share them on their social networks in order to gather a crowdsourced opinion. Apart from that, the other goal of the project was to focus on the social aspect where people can vote on polls on a feed and also be able to see data on their polls. A few other features were also added that enhanced the experience.

The main goal was to make sure that a user can vote without having to login in order to encourage engagement and the challenge that posed was to make sure that each user gets only one vote. A wide range of metadata is collected just from the platform where the request originated. For eg. the IP address provides further information on the user’s location. In addition to that, device data, browser data and timestamp when each event was recorded. There's a statistics platform which includes all the stats like number of polls created, number of votes, number of events, number of distinct IPs, browser data, device data, endpoints accessed, then data on how the poll attributes were entered, timeline of event creation and poll creation, division of tags and finally map of where the events occurred.

Another feature was to decide tags based on a custom trained NLP model on DialogFlow.

## Usefulness

The very simple purpose of the app is for a user to be able to get a crowdsourced opinion on a question. The newsfeed function is both a source of information and fun. There are multiple narrow scoped uses for this application. For eg, crowdsourcing is a very important part of Human-Computer Interaction and there is extensive scope in the research for how people respond/provide feedback depending on different stimuli offered. I also added a feature where the creator of the poll can set poll behavior. For example - showing the status of the vote before the voter decides on a vote and see how popular vote sways the result as compared to a blind poll. Another important area of use could be corporations asking for feedback from their users to help them decide areas to focus on based on demand.

There are some websites which have some overlap to what I planned to achieve. Doodle is the first result on a quick Google search on the idea and they provide a polling service to coordinate meetings which is very different from this idea. The other websites that overlap are overly complicated and their designs seem like they haven't been updated since 2006 (when the use of Marquee wasn't ironic). I personally used the website to settle debates about whether Pineapple goes on Pizza and what the best operating system was.

## Data

Since the core of the project is surrounded by data, the application aims at collecting as much data as possible whenever users vote or create polls. At a high level, the application consists of the following data:

-   Poll data such as the question, options, poll creation time, IP address of the creator, the expiration time of the poll and a unique poll_id per poll.
-   Voters IP address, timestamp, and the option selected.
-   Users name, unique user_id, email id, and the profile picture from facebook.
-   Data regarding application usage. For example, endpoints accessed, browser used, operating system, operating system version etc. Tags assigned per poll depending on the question using DialogFlow.

## Data flow

The following steps show the flow of data on the website :

After the `/create` endpoint is accessed, the user is asked to log in to be able to create a poll. On clicking the login button oAuth is performed by Facebook and the API endpoint checks if the user already exists in the database. If they don’t the user details like name, email and a link to the profile picture is inserted into the database and the `log_count` is set to one. If they already exist in the database, the `log_count` is updated by one.

Once the user is logged in, they are granted access to the 'create a poll' screen. There are two steps to the form. First, the important details like ‘Question’ and the ‘Options’ are asked. A minimum of two options are required and a maximum of four are allowed. The second part has attribute details like feed privacy, analytics privacy and how long the poll needs to be active.

After the create button is clicked a post API call is made to the backend where I generate a random unique six-character `poll_id` to represent the poll. The IP address is obtained from express and the `creatorId` is essentially the Facebook id. The poll creation timestamp comes from the current time accessed by `Date.now()` in JavaScript. After the details are inserted in the database, a poll link is generated and shown to the user in order to be able to share it on their social networks.

On the link, the poll can be accessed. Each time the link is accessed, the polls table is queried for the `poll_id` and all the details are rendered on the page.

![(landscape) Creating a Poll demo](/images/posts/2018-12-12-ballot/create_poll.gif)

When the poll is inserted the question is processed through a custom trained NLP model on DialogFlow and based on that a tag is decided. In this case ‘Movies’. It is inserted in the ‘Tags’ table along with the confidence on the tag as decided by the NLP model. Before voting, the activity table is queried to check if the user’s IP has already voted on this current poll. More details about checking individual unique vote are mentioned in the Advanced Functions section. After making sure that the user hasn’t voted on the poll, the render screen appears and waits for an option to be clicked.

When an option is selected, the user's details like the IP address, the timestamp, `poll_id`, and the selected option are recorded in the activity table and then the table is queried to find all activity on that poll so far to display a pie chart.

Other features include the feed, the search, and the platform data which is generated using the data obtained from the browser, IP address, device and timestamps of when the events occur.

![(landscape) Poll Feed](/images/posts/2018-12-12-ballot/poll_feed.gif)

## Voting

One of the main goals for this project was to allow voting without logging in. If login is mandated to vote it becomes easier to account for uniqueness but since I wanted to allow voting without logging in, I needed to account for a lot of things to ensure uniqueness.

There are a few layers to each vote. Consider a scenario when a user first votes on a poll. After the vote is added, I use the browser’s persistent storage to log the `poll_id` and their selection. Next, I log in the IP address of the user and the `poll_id` in the activity table. Now there are a few possible ways for a user to be able to vote on the same poll again just based on these checks. If a user switches their network for example from their work to home, their IP address changes and so they would technically be allowed to vote again. Also, if a user uses a VPN to port their IP address to some other location they could technically be able to vote again.

To account for these I used the following measures :

-   The persistent browser storage is accessed to check if the `poll_id` for the user in play has already been voted on. If yes, then even though the network has been switched, the poll shows that it has already been voted on.
-   To crack down on VPN I followed what Netflix does. I used a service called ‘IPHub’ which keeps a running record of popular VPNs. Before a user can access a poll I run the IP address through IPHub’s API and find if the user is using a VPN. If they are, then I show a message saying VPN is being used and to vote on a poll they would need to switch it off.

![(landscape) VPN check](/images/posts/2018-12-12-ballot/vpn_check.gif)

Another challenge I had was to account for incognito mode. Incognito mode prevents access to the same local storage as the non-incognito mode and so all the checks for the network switch will be lost. In order to prevent multiple votes on the same poll from a user, I restrict voting on incognito mode. For this, I needed to be able to detect if a browser is being used in incognito mode. Another challenge here was that each browser is built differently so checking for incognito mode needed to be done in different ways based on what the browser was. For example, in Google Chrome on the `desktopwindow.requestFileSystem` returns false. After accounting for that, if the poll or feed is accessed in incognito mode, the website will detect that the user is browsing in incognito mode and display a message instructing the user to switch back to normal mode in order to vote.

![(landscape) Incognito Detection](/images/posts/2018-12-12-ballot/incognito_check.gif)

Finally as an additional check, for the users that did log in, I kept a running count of all the IP addresses they have logged in with. This allowed me to check if a user is voting on another poll by switching browsers if they were on another one of their commonly used IP addresses.

Also, I could make the feed personalized to a logged in user by showing them the polls that they haven’t voted on yet by joining the activity table and IPs table. Even for users that haven’t logged in, the feed can be tailored to their IP address based on if a vote has been logged in the activity table for that particular IP would be shown last.

I also created an event logger from scratch which accessed data about the browser and the user’s device. From the IP address I was able to obtain a user’s geographical location and finally, I logged in the time when it occurred. These loggers were placed in the constructors of various routes which were likely to be accessed the most and when hit, the event logger posted data to the events table.

All the extensive data I collected combined with the various tables in my database to find out all the statistics that would be important from a developer’s point of view.

The platform stats page shows :

-   Main Counts
    -   Total Votes
    -   Total Polls
    -   Total Events
    -   Total IPs
-   Device Data
-   Browser Data
-   OS Data
-   Endpoint Data
-   Poll Attributes Data
    -   Feed Privacy
    -   Number of Options
    -   Analytics Privacy
    -   Expiration Time
-   Returning v/s One-Time Users
-   Timelines
    -   Polls Created v/s Day
    -   Events Created v/s Day
    -   Votes v/s Day
-   Tag Data
-   Location Data

![(landscape) Statistics from the application](/images/posts/2018-12-12-ballot/poll_stats.gif)

## Challenges

I faced a lot of challenges during the course of this project. Initially, most of the challenges were because I had not worked with React before and understanding it and getting it to do what I wanted was hard. Also deploying the app to cPanel was annoying because its interface is archaic so I moved to Heroku instead. Another problem I faced was with deploying the react app with a node backend using the express framework. The server was running on port 5000 and react ran on port 3000. Getting both the ports to communicate required adding a proxy to the React which took some time to figure out.

After the template app was successfully deployed the form was the next challenge. I wanted the UI to be as seamless as possible while supporting thorough input validation so that the database doesn’t store corrupt data. These were mostly frontend based challenges that were cleared by reading articles online. Another problem I had was with the MySQL npm package I used. It requires the input in a certain way - for eg., table names need to be enveloped by apostrophes (‘poll’). If a user Added an apostrophe in their question or options, MySQL would throw a syntax error. To account for this I used RegEx to replace every apostrophe in the input with "§" and then replace it back again before displaying it on the frontend.

Figuring out all the aspects of a unique vote without having to log in was challenging and I needed to do a lot of research on how browser APIs worked to be able to detect incognito mode and also how tech companies like Netflix detect VPNs in order to follow suit for my application. Logging through Facebook also caused significant grief. Since their data breach, they have only made oAuth accessible on SSL. I hosted our app using a dyno plan in order to add Facebook login.

Another challenge was to create an embed endpoint in order to be able to embed a ballot poll anywhere on any website. This occurred because `<iframe>` basically embeds a webpage within another and for my case, I had a persistent login head from the `Route.js` page. It wouldn’t have context on another page and the app would crash. To account for this I added a handler function which was passed to the embed component on react and in the constructor I called the function which changed state in the parent. This allowed me to be able to embed polls within other websites.

## Try it out

[Website](https://theballot.herokuapp.com/)  
[Github](https://github.com/yagrawl/ballot)  
[Demo](https://youtu.be/UsVOjNbTrYs)


A polling web application made with React/Node/MySQL

Ballot


After Stockholm, I flew to Rome. Getting to the Airbnb was a little more hectic than I would have liked. As soon as I landed, I realized that my phone plan wasn't working. I got a new one as quickly as I could find because I had to run and catch a train. Obviously, the card takes around 2 hours to get activated so well, it was useless. I got on the train and apparently, it was the wrong one.

I got off at the station and in broken Italian, I kept asking for directions,
while dragging my luggage on my back and thirty minutes later I reached my Airbnb. Despite that hiccup, I was in Italy for only about three and a half days and I wanted to make the most out of it.

![(landscape) A random street in Rome](/images/posts/2018-09-07-short-trip-to-italy/rome_building.jpg)

After that, I ate a whole lot of Pizza and Gelato. It was obviously amazing! I walked around the city a little bit and honestly, after a while, it starts feeling like a theme park. Most cities have one old building with ancient architecture which has become a tourist attraction over time. Part of its charm is that it withstood the test of time, while buildings around it collapsed, it stayed up. In Rome, every other building is old and ancient and good enough to attract a huge tourist crowd just to see that one building.

One of the most interesting buildings I saw in Rome (apart from the Colosseum, obviously) was the Pantheon.

![(landscape) The Pantheon, Rome](/images/posts/2018-09-07-short-trip-to-italy/pantheon.jpg)

The next day I went on a tour of the Colosseum. There are a lot of interesting things about the Colosseum and I recommend everyone to read more about it.

![(popup) The Colosseum, Rome](/images/posts/2018-09-07-short-trip-to-italy/colosseum.jpg)

For the rest of my time in Italy, I attended a Pasta making class where I made pasta from scratch without a machine. I ate a bunch of pizza, pasta, and Gelato, and drank a whole lot of cappuccino and espresso.

I would highly recommend [Angelino ai Fori](https://www.yelp.com/biz/angelino-ai-fori-roma-4)
for Iced Coffee, [Pompi](https://barpompi.it/) for Tiramisu
and [Frigidarium](https://www.yelp.com/biz/frigidarium-roma) for Gelato.

The third day I headed to Florence on a train. The Airbnb wasn't going to be available till 2 PM and I got there at around 7:30 in the morning. To not lug my bag around till then I used something called [BagBnb](https://bagbnb.com/) to store my luggage. I also biked around Florence a bunch and it was a lot of fun.

<iframe
    src="https://www.youtube.com/embed/dV8vAxrqYq8"
    frameBorder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
    className="responsive-iframe"
></iframe>

Florence is really pretty and definitely worth a visit. I'm sure there are a lot of amazing places to visit in Italy that I can't attest to at the moment but from what I've seen, Florence is definitely one of them.

![(landscape) A Canal in Florence](/images/posts/2018-09-07-short-trip-to-italy/florence_canal.jpg)

I ate some more in Florence and the food was absolutely amazing. I think I gained at least 4 pounds in the last 3 days. The next day I flew back to Chicago to complete my last semester in college.


Short trip to Italy


Stockholm, Sweden is one of the most beautiful cities on this planet but doesn't necessarily come up on top of the list of places to visit in Europe. After my internship at Braintree, I was planning on a short trip to a couple of places in Europe with my friends. I really wanted to go to Rome but since the Schengen visa appointments are pretty scarce in the US I couldn't find one for Italy.

Schengen visa requires that the country you get it from is the place where you stay the longest during your visit. After scouring for appointments from all Schengen area countries, we decided to compromise and go to Stockholm in Sweden and I am really glad that happened.

![(landscape) Stockholm's "Skyline"](/images/posts/2018-09-04-visit-to-stockholm/stockholm_skyline.jpeg)

Stockholm is beautiful and it feels like a place from both the past and the future. As soon as I landed I headed over to our Airbnb in Gamla Stan. It was a beautiful little place full of Scandinavian design elements. I love Scandinavian design - it provides an instant feeling of _hygge_ or _mysig_ in this instance.

![(landscape) Airbnb in Gamla Stan, Stockholm](/images/posts/2018-09-04-visit-to-stockholm/stockholm_airbnb.png)

My absolute favorite thing about Sweden is the concept of _fika_. _Fika_ roughly translates to 'A coffee & cake break' but it is so much more than that. It is supposed to be the time of the day when Swedes slow down, take a break, and notice the beauty of life. You can do it anywhere and with anyone or no one. The important thing is to take that time out and pause. This is unlike other places in the world, where coffee happens more and more 'to go' as a fuel for the rest of the day. Obviously our body works differently than a machine and for us a pause is more of a fuel than a caffeine shot. Naturally, Stockholm is a big dessert place and there were a lot of cute little cafés serving coffee and cakes.

![(landscape) A cafe in Stockholm](/images/posts/2018-09-04-visit-to-stockholm/stockholm_cafe.jpeg)

Later at night, I went to a Viking Bar where they served Mead and some raw cold cuts. Elk, Reindeer, and Moose tasted really gamey and quite honestly I am not a fan.

![(landscape) Elk, Reindeer and Moose cold cuts](/images/posts/2018-09-04-visit-to-stockholm/stockholm_coldcuts.jpeg)

Gamla Stan, where our Airbnb was, is really pretty and probably the most touristy place in Stockholm. This building was literally a block away from where we stayed.

![(square) Iconic Stockholm buildings](/images/posts/2018-09-04-visit-to-stockholm/gamla_stan_buildings.jpeg)

Another really interesting thing about Stockholm is that it is home to the longest art gallery in the world. A lot of metro stations in Stockholm have art installations and I would highly recommend taking a day to just hop from one station to another, looking at the installations. I didn't quite get to do a lot of them because it was towards the end of our trip but I did get to see a few.

![(landscape) Stadion Metro Station](/images/posts/2018-09-04-visit-to-stockholm/rainbow_metro_station.jpeg)

![(landscape) Odenplan Metro Station](/images/posts/2018-09-04-visit-to-stockholm/neon_lights_metro_station.jpeg)

![(landscape) Solna Centrum Metro Station](/images/posts/2018-09-04-visit-to-stockholm/solna_centrum.png)

![(landscape) T-Centralen Metro Station](/images/posts/2018-09-04-visit-to-stockholm/t_centralen.jpeg)

I also went to a _Thirty Seconds to Mars_ concert at Gröna Lund, the first-ever IKEA store, the Nobel Museum, the Stockholm Palace, and a bunch of other really neat places.

![(vertical) Nobel Museum - Alfred Nobel bust](/images/posts/2018-09-04-visit-to-stockholm/nobel_museum.jpeg)

I can't wait to go back and see what else Stockholm and Sweden have to offer.

![(popup) Streets of Gamla Stan at Dawn](/images/posts/2018-09-04-visit-to-stockholm/gamla_stan_street.jpeg)


Visit to Stockholm


I was always fascinated by encryption and I wanted to know more about it so I decided to make a web application which would allow encryption and decryption with a key. It is written in node.js and uses ejs templating and css for frontend. Mostly, this was for me to keep myself acquainted with frontend development.

## Research

I read up on what really is required for encryption and how the blowfish algorithm works. So from what I understood, blowfish algorithm goes something like this:

![(vertical) Overview of the project](/images/posts/2018-04-17-encryptr/encryptr_basic_algorithm.png)

Diving a little bit deeper into the algorithm, I learnt more about how its round structure worked. We use 18 keys in blowfish. So the plain text of 64 bit is divided into two parts of 32 bits each. The left part XL will be XORed with the first key, and then the output is sent both towards the right side and down and then the output is again XORed with the right part XR. This keeps on trickling down and swapped till 16 keys and then the final two keys are processed without swapping. Then finally, they are combined again to return the cipher.

![(vertical) Blowfish Algorithm summarized](/images/posts/2018-04-17-encryptr/encryptr_blowfish_algorithm.png)

So what exactly is F? Well, the 32 bit input is further divided into 4 parts of 8 bits each and treated the following way.

![(square) Blowfish Algorithm detailed](/images/posts/2018-04-17-encryptr/encryptr_blowfish_algorithm_bits.png)

## Design

Initially I spent a few hours deciding what the web application would would look like. I used sketch to design the prototype. The design was fairly simple. The only purpose was to encrypt/decrypt so I tried to make it stand out. I just used #292929 and white color for the entire website to make it simplistic. This is what the design looked like.

![(landscape) Webapp design](/images/posts/2018-04-17-encryptr/encryptr_design.png)

## Implementation

So I initially set up the node app and wrote the frontend and then instead of actually implementing the algorithm I used the crypto library for nodejs. I added some more functionality such as touch to copy and then just added some animation to text and here's how it looks and works as of now.

![(landscape) Encryptr demo](/images/posts/2018-04-17-encryptr/encryptr_demo.gif)

## Try it out

[Website](https://encryptr.herokuapp.com/)  
[Github](https://github.com/yagrawl/encryptr)


A node.js webapp to encrypt/decrypt using the blowfish algorithm.

Encryptr


I like running but I'm not too motivated to do it everyday. I thought it would be a great idea to bet with people for a fixed duration of time. Whoever runs the most wins. Very simple concept and could have easily been done by straight up just keeping track of runs in a month and paying in person but this way, I could practice some full stack web development. There were also a lot of challenges involved, and this is still an in-progress app. Here's the process:

## Research

So, the application was supposed to do the following things:

-   Connect friends and set up a bet.
-   Keep track of the runs in that duration.
-   Notify users of the status.

Pretty straightforward. But, there were a lot of problems. Since I live in Champaign, IL it gets brutally cold in winters and running outside is not an option. There are a fair amount of runs that happen indoor on the treadmill. The two options I was looking at were Nike+ and Strava. Strava has no support for indoor runs so Nike+ was the obvious choice to track. Further problems came in when I realized that Nike+ doesn't have a public api. In fact there are no existing developer documents on this thing. That was a huge challenge. I also kept in mind that I was doing this as a fun project for me and a couple other friends so my priority was getting the job done. Even if I could create a manual input form application, that should solve my problem.

## Design

I spent a few hours on designing how the app would look like. Initially I wanted it to be an app because Nike+ is an app and its just easier to enter this data on a phone than on the computer.

![Initial Design for Runistics](/images/posts/2018-04-06-runistics/runistics_design.png)

So basically, users create an account with the app. I am no longer using Strava or Nike+. After they are logged in, they are prompted to add a few friends. Setting up a bet is again very straightforward. They just add the people they want on the bet, duration and the money. After they are added, the users get a notification and an option to either accept or reject the bet. Once a bet has started, the stats are shown in the far right screen. All the required information is visible at a glance. The data is added manually where a user will be notified everyday at a certain time to enter run data manually which could be tracked by either Nike+ or directly from the treadmill. Full disclosure - the finished (sort of) product looks nothing like the design. Not that it has bad UI, but I went in a different direction as the app progressed.

## Implementation

At this point I realized that adding data manually isn't really feasible. Also another big pivotal point was that we decided not to compete with each other anymore. Last time I was doing it, I increased my average mileage by more than 300% within 5 days and suffered a terrible case of Runner's Knee. Now, I decided that the competition would be with a target. For example, 500 kms a year is a decent target. I now wanted to pivot the app based on the target. Strava has a great public API so I decided to use that. I used NodeJs with a mongoDB database, Express and the frontend was written in EJS. The finished product looks something like this.

![(landscape) Screen grab of the actual project](/images/posts/2018-04-06-runistics/runistics_board.png)

Initially after going through the entire process of authorization and getting a token from Strava, I wanted to get some running data right out the bat with the same API call so I used a promise and generated the basic landing screen. The details button gets all the run data after 1st Jan 2018 UNIX epoch time. I used chartjs to create line graphs of speeds and runs. There's a progress bar which would be filled up at 500 kms. Now since the basic app was done, I still had another problem with getting the runs into Strava in the first place. It still doesn't record treadmill runs like Nike+ does and manual input is a chore. There had to be a better way.

## Challenges

Getting runs into Strava automatically was indeed a challenge because Nike+ has such a closed system. Sure there are a couple of websites that help with run transfers at a minimal charge but at times even they didn't work. I ended up adding another additional login page.

![(landscape) Nike Signup Page](/images/posts/2018-04-06-runistics/runistics_nike_credentials.png)

I plan use a headless browser, log in to Nike+ with the credentials and scrape all the runs and use the Strava post API to add these activities and create graphs. Or I could remove Strava out all together and just use the scraping to get all the data. There are more challenges because I can't just store login credentials in plain text. I'll need to encrypt it. Work in progress.


Keeping track of run data from Strava & Nike+.

Runistics


Here are a few things I did this year and some goals for the coming year.

## Work

I interned at Mastercard over the summer. It was my first experience as an intern working full-time. The team I was on focused on automating tasks that would drain resources internally. It was mostly about setting up bots to download reports, parse/process them, and get them to the relevant mailboxes. It was good, but I was more fascinated by the speaker series where I learnt a little bit about how Mastercard helps with payments and moving money around the world. Fintech is truly fascinating and I decided that I'd like to learn more about it. I've signed an offer at Braintree payments for an internship and I'm really excited be in San Francisco next summer! 

![(landscape) Mastercard office](/images/posts/2017-12-29-year-in-review-2017/mastercard_office.jpg)

## College

I naturally gravitate towards web development so some of the hardware ECE courses definitely took a toll on me. To balance it out, I managed to take a few design classes throughout the year and really enjoyed them a lot, specifically [CS 565](https://cs.illinois.edu/academics/courses/cs565).

I'm still glad that I choose ECE as a major because it makes me appreciate how building off of simple NAND gates gets you to the device you are currently reading this on. 

## Running

I only ran **179.3** KM in total. I tried to be consistent but the cold weather in Illinois makes it difficult to get out of bed in the morning.

<iframe
    src="https://runstats.netlify.com/2017"
    className="responsive-iframe"
    frameBorder="0"
    scrolling="no"
></iframe>

Next year, the plan is to beat this mileage by at least 50 KM.

## Travel

I've traveled to a few places this year.

-   [Peru](/trip-to-peru)
-   [Colombia](/viva-colombia)

Also a bunch of places within the US and India. I also visited New York over Thanksgiving break and really enjoyed being in the city. It would be cool to live there some day. 

![(popup) A restaurant in Bogota, Colombia](/images/posts/2017-12-29-year-in-review-2017/restaurant_in_bogota.jpg)

## Movies

I love watching movies and these are a few of the ones I really loved this year.

-   [Good Time](https://www.imdb.com/title/tt4846232/)
-   [Mother](https://www.imdb.com/title/tt5109784/)
-   [T2 Trainspotting](https://www.imdb.com/title/tt2763304/)
-   [Get Out](https://www.imdb.com/title/tt5052448/)
-   [The Florida Project](https://www.imdb.com/title/tt5649144/)

## Misc

Most of the year was spent dealing with a full 18 credit hour course load and while it was hectic, I enjoyed most of my classes and managed to find enough time to spend with friends. I probably could have handled some things better, but overall I'm happy with how things went. I hope to make productive use of my time in the coming year.


Things I did in 2017 and expectations for 2018.

Year in review - 2017


I was taking a database class in the Fall of 2017 and as part of the course I had to work in a group of 4 on a database related project. A team-member introduced me to the problems with IDN homographs. So what exactly is the issue with IDN homographs? According to wikipedia, 'The internationalized domain name (IDN) homograph attack is a way a malicious party may deceive computer users about what remote system they are communicating with, by exploiting the fact that many different characters look alike, (i.e., they are homographs, hence the term for the attack). For example, a regular user of example.com may be lured to click a link where the Latin A is replaced with the Cyrillic A.'

Try this [link](https://www.xn--80ak6aa92e.com/) for example. Don't worry it is safe. In Google chrome today (as of November 2017), it shows up in its original Cyrillic form but try Firefox, it looks exactly like apple.com. It even has an SSL certificate.

![(landscape) apple.com IDN Homograph example](/images/posts/2017-11-29-idn-homograph-detector/apple_idn_homograph_example.png)

What happens if someone does that to chase.com -- changing the 'a' to Cyrillic, and recreating the frontend. The account information of an unaware user is comprised that easy. There has actually been an attack which was discovered in September of 2017 where hackers used a homograph of adobe.com to deliver betabot trojan.

## Setup

Hopefully I have convinced you that this is a huge problem. Solution? Well, the browsers could start displaying Punycode. Chrome and Opera already do that. For the homographs that do exist which might be accessed by browsers that don't have this functionality as of now, companies need to make sure that their domains aren't attacked. A database to list all the possible homographs of a url and check if it is already registered and that is what we decided to build for this class.

## Implementation

We contacted Verisign to get the data for the existing .com TLDs. That was a 10 GB plus file. I wrote a parser that separated out all the Cyrillic domains and the domains with commonly messed up letter combinations like rn -> m. Since this class was a 4 month course and every person on the team had a full course load, we didn't aim too high. Just a simple search engine for existing homographs and ways to find their information. My main responsibility was the frontend and UI. This was the finished product we came up with.

![(landscape) Homepage for the project](/images/posts/2017-11-29-idn-homograph-detector/idn_homograph_search.png)

The landing screen had a big search bar in the middle to make it obvious what the purpose was. You could also choose the number of permutations of characters because each permutation adds a huge number of homographs.

![(landscape) Stats displayed on each IDN Homograph search](/images/posts/2017-11-29-idn-homograph-detector/idn_homograph_stats.png)

After a domain is searched, apple.com here for example, the details about that domain are displayed. Number of possible homographs, which scripts it might have problems in, existence of multi letter homographs and problematic fonts for them and based on scripts, a list of risky TLDs.

![(landscape) List of IDN Homographs](/images/posts/2017-11-29-idn-homograph-detector/idn_homograph_list.png)

Finally the list was displayed in a table form where each possible homograph was shown in its punycode, ASCII and unicode form. You could check the status to see if a domain was already registered and it would call our database and confirm. My main contribution to this project was the UI and the frontend. In addition to that I also worked on the APIs and the parsers for sorting out the Verisign data. This was a problem that I had never faced before but I do understand its impact and I hope that all the major browsers get this fixed.

## Try it out

[Github](https://github.com/yagrawl/Homograph)


Possible/Potential IDN homograph detection with DNS lookup.

IDN homograph detector


I flew to Bogotá, Colombia from Peru. I got into an Uber and headed to the Airbnb.
It was really cheap, had great reviews and seemed to be located at the center
of the city. The uber driver asked me if I was sure if the airbnb was legit
because according to him that area was sketchy, also, in the photos, the building
looked run down from the outside. I was a little skeptical about Colombia to
begin with, given its history and this definitely wasn't helping.

![(vertical) Airbnb in Bogota](/images/posts/2017-09-04-viva-colombia/bogota_airbnb.png)

I got to the Airbnb and it was indeed really nice from the inside and so were
the hosts. A little bit after dropping me, the uber driver texted me and asked
if I was safe and again this is just one instance of how nice I felt people
were to tourists in South America.

It was the 'Feast of Assumption' holiday so I went to the main square with the Airbnb hosts
and walked around taking in the artists putting up their shows and eating the
street food. Apparently, Mick Jagger at some point ate an _Oblea_ (Thin wafers
sandwiching dulce de leche) from a street vendor in Bogotá and now every
other cart claims Mick Jagger ate from their cart.

![(square) A cart selling Obleas in Bogota advertising with an image of Mick Jagger](/images/posts/2017-09-04-viva-colombia/bogota_mick_jagger_obleas.png)

Another thing I would highly recommend in Bogota is to get _chucula y almojábanas_ which
is basically hot chocolate with cheese and soft bread at [La Puerta Falsa](https://www.lonelyplanet.com/colombia/bogota/restaurants/la-puerta-falsa/a/poi-eat/419079/363308) located just off the _Plaza de Bolívar_. _La Puerta Falsa_ has been in service for over 200 years!

![(vertical) Chucula y Almojábanas from La Puerta Falsa](/images/posts/2017-09-04-viva-colombia/hot_chocolate_bogota.jpeg)

Another restaurant I would very highly recommend is [El Bembe](https://www.tripadvisor.com/Restaurant_Review-g294074-d3780825-Reviews-El_Bembe-Bogota.html). I had one of
the best meals of my life at this place.

I spent a couple more days visiting museums, art galleries, eating and well
then I headed over to Medellín.

![(vertical) A painting by Pablo Picasso](/images/posts/2017-09-04-viva-colombia/pablo_picasso_bogota.jpeg)

I just had a day in Medellín and I wanted to make the most out of it. I am a
huge fan of the Netflix series _Narcos_ and I wanted to take a tour of the sites
related to the show. The guide took me to _La Cathedral_ which was the prison
Pablo Escobar built for himself.

![(landscape) La Cathedral - Pablo Escobar's jail in Medellin](/images/posts/2017-09-04-viva-colombia/la_cathedral_medellin.jpeg)

I also saw Escobar's grave and a bunch of other places. I then ate some dinner
and prepared to head to Cartagena the next day.

Cartagena is a place where people come to relax. It is incredibly beautiful! By this point, travel fatigue had set in. I was definitely tired and wanted to go back home. I was sharing the Airbnb with a chef from Marriott Guatemala. He made some delicious fried rice with salsa and we ate it while watching 'Mayweather vs. McGregor' on pay-per-view and called it a day.

![(landscape) Streets of Cartagena](/images/posts/2017-09-04-viva-colombia/cartagena_streets.jpeg)

After another day in Cartagena, I headed back to Chicago.


Viva Colombia


After my internship at Mastercard ended, I had a couple weeks before my fall
semester started. I had always wanted to go to South America and this seemed
like the perfect time for the first trip to this continent. The plan was to go
to Bolivia, Peru and Colombia.

On 12th of August, I flew from Chicago O'Hare. The flight had a couple
connections Chicago -> Houston -> Lima -> La Paz. The flight from Houston to
Lima was delayed by a few hours and I missed my connection to La Paz. The airline
staff provided a hotel for overnight stay in Lima and business class tickets to
La Paz for the next day. I decided to skip Bolivia and just stay in Peru for a
longer time because I was already a day short and it didn't seem worth it to go
to a country like Bolivia just for 3 days.

The hotel was right next to the Supreme Court building in Lima.

![(landscape) View of the Supreme Court of Peru from the hotel room](/images/posts/2017-09-01-trip-to-peru/lima_government_building.jpeg)

The day I went, there was a protest. I think it was the teachers protesting
against low wages but I could be wrong. My Spanish literacy is nonexistent. The
dinner was complimentary by the hotel and there I found my new favorite soft
drink - Inca Kola. It tastes kind of like a cream soda but much better.

![(vertical) Inca Kola -- a source of national pride for Peruvians](/images/posts/2017-09-01-trip-to-peru/inca_cola.jpeg)

The next day I went on a food tour and they started with a drink at
[La Trastienda](https://www.thefork.com.pe/restaurante/la-trastienda-r491339), a restaurant in the Barranco district of Lima. They served the
traditional Pisco sour. I saw the bartender put some egg whites into the flask
and I expected it to taste like crap but it is surprisingly delicious. Also, it
is a legit Pisco sour only if it has those 3 dots of Angostura Bitters on top.
Chile has a different version of Pisco than Peru and the origins are disputed
to this day.

![(vertical) Pisco Sour with the traditional Angostura Bitters](/images/posts/2017-09-01-trip-to-peru/lima_pisco_sour.jpeg)

Next I made some Ceviche with plantains and fish at
[ámaz](http://www.amaz.com.pe/). It is essentially
[bhel](https://en.wikipedia.org/wiki/Bhelpuri) but with fish instead of puffed
rice. The last stop on the tour was at some place for desserts and they hosted
a bunch of famous people - including 'The Killers'.

![(landscape) The Killers visited the dessert place](/images/posts/2017-09-01-trip-to-peru/lima_the_killers.jpeg)

After eating the desserts, I roamed a bit in the Barranco district which is
considered to be the Bohemian epicenter of Lima. They have beautiful street art.

![(popup) Assorted Desserts](/images/posts/2017-09-01-trip-to-peru/lima_desserts.jpeg)

The Airbnb I stayed at in Lima was in the Miraflores district, right next to
the coast and it was really beautiful. The next few days in Lima were spent
visiting parks and tourist attractions and eating the local cuisine.

Interesting fact, in Peru they call Chinese food _Chifa_ which roughly
translates to 'cooking rice' in Cantonese. A guide told me that the language
barrier was the cause of this nomenclature. Some local at some point pointed
towards fried rice and asked what it was and the Chinese migrants said _Chifa_
because well, it was fried rice and then the local thought that this kind of food was
called _Chifa_ and that is how the name stuck. I don't know if I believe this particular
etymology.

![(landscape) Airbnb in Miraflores, Lima](/images/posts/2017-09-01-trip-to-peru/lima_airbnb.jpeg)

The next stop in Peru was Macchu Picchu. You need to book tickets before you go
to Macchu Picchu and booking it off that website is truly a hassle. That
website's UX is so bad that it almost seems intentional to prevent people from
booking tickets to avoid overcrowding and pollution of this wonder of the world.

I flew to Cuzco and had a train booked to go all the way to Macchu Picchu city.
What I didn't realize was that this train stop was at least an hour and a half
away from the airport. I didn't have an option so I quickly booked an Uber. My
train ride back was closer to the city but this part of the trip required a
taxi. The driver asked me when I was going to come back and I told him that my
train reached Cuzco sometime in the evening without giving him an exact time. He
told me to keep his number and call him when I get back. I didn't save that
number cause well why won't I find an Uber?

The train ride was really nice and relaxing. It was beautiful and when I
reached the town I quickly ate something and passed out at the hostel. The next
day I woke up at 3 in the morning and headed to hike up to Macchu Picchu. On the
way to the starting gate there is a towering mountain in front and above that a
clear sky with a billion stars visible. It is one of the most beautiful things I
have ever seen in my life.

The hike itself was okay. The first couple hours were in the dark with people
using the flashes on the phone to see the steps. Finally at about 7 I reached the summit.
The guide gave us a quick tour and then I got to catch a beautiful sunrise
which is apparently rare because it is mostly covered with fog.

![(landscape) Macchu Picchu](/images/posts/2017-09-01-trip-to-peru/macchupicchu.gif)

The hike back made me realize how beautiful the hike itself was. I couldn't see
anything at night. I also went into this river. The water was incredibly
refreshing.

![(landscape) River at the base of the Macchu Piccu Hike](/images/posts/2017-09-01-trip-to-peru/macchu_picchu_river.jpeg)

Then I got back on the train and reached Cuzco. I realized there were
literally no Ubers available at the time and I didn't know what to do. I walked
outside the station and I found the same driver carrying a board with my name on it.
He knew that I won't be able to find a ride to wherever I wanted to go so he
waited till the evening train came. On the way back I told him that I was
flying from Cuzco the next morning. He was visibly sad and told me that he would
quickly take me to see the touristy things before dropping me at the Airbnb so I
don't miss out on what his city has to offer. This and other such interactions
made me feel like Peruvians genuinely want you to have a great time in their
country.

![(landscape) Somewhere in Cuzco](/images/posts/2017-09-01-trip-to-peru/cuzco_attractions.jpeg)

After this, I was off to Bogota.


Trip to Peru


Javascript is a functional language meaning that functions are the primary
modular units of execution. Functions are obviously very important in
Javascript. When talking about functions, the terms parameters and arguments
are often interchangeably used as if it were one and the same thing but there
is a very subtle difference.

-   Parameters are variables listed as a part of the function definition.
-   Arguments are values passed to the function when it is invoked.

Why should we bother about this minute difference?

Well for starters, JavaScript does not throw an error if the number of
arguments passed during a function invocation are different than the number of
parameters listed during function definition. This should make it clear that
parameters and arguments should be treated as two different entities.

```js{lineNumbers}{fileExtension}
// Basic function with three parameters that logs the sum of all the parameters
function argCheck(parameter1, parameter2, parameter3){
  console.log(parameter1 + parameter2 + parameter3);
}

// Function with extra arguments
argCheck(1,2,3,4);
// Logs 6 (1 + 2 + 3, ignores 4)

// Function with missing arguments
argCheck(1,2);
// Logs NaN because by default if a corresponding argument is missing, it is set to undefined.
// parameter3 is assigned undefined and so 1+2+undefined = NaN

// Note that, no error is thrown
```

In the code snippet above the function `argCheck` takes three parameters
according to its function definition. On line 7 we call the function with an
extra argument and the code executes without any errors.

Similarly on line 11 we invoke the function with an argument less as compared
to the number of parameters and it still does not throw any error. Hopefully
this has convinced you that there is more to `arguments` and `parameters` and
this article would discuss some features JavaScript provides in this context.

Basically, when excess arguments are provided, they don’t get assigned to any
parameters. There are ways to access these excess assignments which we will
get to in a bit. On the other hand if we have more parameters than the
arguments, the parameters that have no corresponding arguments are set to
`undefined`. Lets explore JS features relating to arguments and parameters one
by one.

## The arguments parameter

No that is not a typo. The `arguments parameter` is implicitly passed just like
the `this` parameter. It is a local variable accessible within all functions
and contains an entry for each `argument` passed to that function. The
arguments object is an array-like construct which can be used to access
arguments passed to the function even if a matching parameter isn’t explicitly
defined.

```js{lineNumbers}{fileExtension}
function argumentVar(parameter1, parameter2, parameter3){
  console.log(arguments.length); // Logs the number of arguments passed.
  console.log(arguments[3]); // Logs the 4th argument. Follows array indexing notations.
}

argumentVar(1,2,3,4,5);
// Log would be as follows
// 5
// 4

// 5 is the number of arguments
```

See the code snippet above for the use of `arguments` object.
`arguments.length` indicates the exact number of arguments which does not
depend on the number of parameters in the function definition. Individual
arguments can be accessed using array-like indexing notation.

One interesting feature of the `arguments` object is that it aliases function
parameters in non strict mode. What this means is that changing `arguments[0]`
would change `parameter1`.

## Rest Parameters

Rest Parameter is an ES6 addition to JavaScript. To create a rest parameter
prefix the last parameter in a function definition with ellipsis(…).

```js{lineNumbers}{fileExtension}
function restParam(...restArgs){
  console.log(restArgs.length); // Logs the number of arguments passed
  console.log(restArgs[3]); // Logs the 4th argument
}

restParam(1,2,3,4,5);
// Log would be as follows
// 5
// 4

// 5 is the number of arguments
// 4 is the 4th argument
```

In the code snippet above `...restArgs` creates an array `restArgs` that holds
all the arguments passed to the function in an array. The rest parameter has to
be the last parameter otherwise it throws a `Syntax error : parameter after
rest parameter`.

Two major differences between the `arguments` object and rest parameters:

-   Rest Parameters is a real array and methods like `forEach` and `sort` can be
    applied. Even though the `arguments` object has the `length` method, it is not
    a real array and using array methods like `sort` would only bring us misery and
    sorrow.

-   Rest Parameters contain only the `arguments` that have no corresponding
    parameter while arguments object contains all the arguments passed to the
    function. Code snippet #3 could also be written as follows.

```js{lineNumbers}{fileExtension}
function restParam(parameter1, ...restArgs){
  console.log(restArgs.length); // Logs the number of arguments that do not have a corresponding parameter
  console.log(restArgs[2]); // Logs the 3rd argument after the number of arguments that do not have a corresponding parameter
}

restParam(1,2,3,4,5);
// Log would be as follows
// 4
// 4

// 4 is the number of arguments that do not have a corresponding parameter
// 4 is the 4th 3rd argument after the number of arguments that do not have a corresponding parameter
```

Hopefully the article provided some information on arguments and parameters and
why it is important to differentiate between the two.


Is a parameter and an argument one and the same?

Parameters & arguments in JavaScript


Generators are a cutting edge addition to ES6 JavaScript. Async code is harder
to manage with JavaScript’s single threaded execution model and Generators and
Promises are welcome inclusions in the JS arsenal. Let’s explore Generators in
detail in this article.

## Generators

Generators are special types of functions in the sense that unlike a
traditional function generators produce multiple values on a per request basis
while suspending their execution between these requests. During the pre-ES6
era, objects written as iterators served this purpose but the thing with those
objects is that they are harder to maintain mostly because of the challenges in
sustaining the internal state. Generators solve this problem by maintaining
their own state.

## How are generators implemented?

Look at the code snippet from the official MDN documentation below to just see
that it follows almost a similar syntax as a function but with some interesting
differences.

```js{lineNumbers}{fileExtension}
function* idMaker() {
  var index = 0;
  while(true)
    yield index++;
}

var gen = idMaker();

console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
// ...`
```

The `function*` and `yield` keywords are unique to a generator. Generators
are defined by adding an `*` at the end of a function keyword. This enables us
to use the yield keyword within the body of the generator to produce values on
request. Let’s breakdown the snippet line by line.

On **line 1**, we use the `function*` to create a generator. **Line 4** uses
the `yield` keyword which produces a value on request. At **Line 7**, we call
the generator function. Calling a generator function doesn’t execute it,
instead it creates an iterator object which helps us interact with the
generator. Follow the flowchart below to understand how it works.

![(landscape) Flow of how Generators work](/images/posts/2017-08-16-generators-in-javascript/generators_image1.png)

NOTE : In the code chunk we used, it would never reach `gen.done = True` since
it is inside an infinite loop.

## Behind the Scenes — Generator’s inner workings

The beginning of the article mentions how generators are ‘special’ functions in
the sense that they can suspend their execution.
A generator has the following states :

-   Suspended Start
-   Executing
-   Suspended Yield
-   Completed

Consider an easier code snippet to understand the states and execution context
of the generator function.

```js{lineNumbers}{fileExtension}
function* myGenerator() {
  yield '1';
  yield '2';
}

var gen = myGenerator();

const result1 = gen.next();
// result1 = {value = '1'; done = false}
const result2 = gen.next();
// result2 = {value = '2'; done = false}
const result3 = gen.next();
// result3 = {value = undefined; done = true}`
```

**Line 1** declares a generator which has two `yield` statements in it. On
**line 6**, an iterator object is created which executes the generator to the
point of it’s first `yield` statement. After that, at **line 8**, **line 10**
and **line 12**, generator is activated and a value is requested.

![(landscape) Generators Timeline](/images/posts/2017-08-16-generators-in-javascript/generators_image2.png)

As soon as the iterator is created, generator goes into a suspended start state.
After the first `gen.next()` the generator goes into execution mode and after
finishing the `yield` request, suspends its execution. When it gets another
`gen.next()` it executes and after being done with that request, it goes into a
suspended `yield`. This cyclic process continues till we reach the return
statement or till no more code is left to execute. At that point the generator
goes into a completed state.

## Execution Context and Generators

To better understand the inner workings of generators, we’ll have to analyze
how it affects the execution context. Take another look at code snippet 2
because the execution context below would be drawn based on that.

Figure 1 is a snapshot of how the execution context and the lexical
environments would look before Line 6 in code snippet 2. If you need to read up
on how execution contexts and lexical environments work, read my article on [variable hoisting](/hoisting-in-javascript/).

In Step 1, the global context executes and because of variable hoisting we
have the ‘result’ variables and the `gen` object initialized to `undefined`.

![(landscape) Generators Timeline - 1](/images/posts/2017-08-16-generators-in-javascript/generators_image3.png)

As **line 6** executes, an iterator object is created and the generator goes
into a suspended start state. See Figure 2.

![(landscape) Generators Timeline - 2](/images/posts/2017-08-16-generators-in-javascript/generators_image4.png)

After **line 6**, the generator context is popped off the execution stack but
isn’t discarded because `gen` keeps a reference to it. This is still at the
point before any of the `yield` statements are executed. See Figure 3 and
follow the dotted line in the environment to see how `myGeneration` is kept
active despite of being popped off the stack.

![(landscape) Generators Timeline - 3](/images/posts/2017-08-16-generators-in-javascript/generators_image5.png)

When the first call to `gen.next()` is made in the global execution context, unlike regular functions, generators reactivate the matching execution context. The `myGenerator()`
context is placed on the top of the stack to continue its execution from the
point it left off.

![(landscape) Generators Timeline - 4](/images/posts/2017-08-16-generators-in-javascript/generators_image6.png)

After it returns an object to return with the `value` property and the `done`
property, it is again popped off the stack but not discarded since `gen` holds
a reference to it. This time the generator goes into a suspended yield state
and patiently waits till another request is made. Figure 5 shows a snapshot
of how the context/environment look like at this stage.

![(landscape) Generators Timeline - 5](/images/posts/2017-08-16-generators-in-javascript/generators_image7.png)

After another call is made to `gen.next()`, the state reverts back to execution
and we see a similar picture as in figure 4. This goes on till the value passed
to `result.done` is `true`, signaling that the generator has completed its
execution.

Hopefully that provides a little insight into what generators are and how
they work in JavaScript.


Generators in JavaScript


Whenever I had a few chapters to read, I used to draw circles on a piece of paper and cross them out as I finished each chapter. Just something that got me to work and I used to do it every time. I thought of making it into a web application so I could practice my frontend skills. I wanted to focus on the frontend and didn't really want to bother with database so it was written in HTML, CSS and Vanilla JavaScript. The first step was obviously design.

## Design

I made a high-fidelity prototype in Sketch and that was my guideline to build the app.

![(landscape) Task -- original design](/images/posts/2017-08-10-task/task_design.png)

## Implementation

The Implementation was driven just like the design and it did make it pretty straight forward. I'll ask the user to name the task, how many tasks and how long they have to do it. After that, I wrote Javascript to make the interface as shown above. The final design was just like the design albeit with a few additions and small changes like background color and font.

![(landscape) Screengrab of Task](/images/posts/2017-08-10-task/task_frontend.png)

I changed the background to white and the font from Montserrat to Proxima Nova. I liked the red, so the colors are the same. I also added a progress bar which will be complete after all the tasks are done. I also added some animations to the click using `animate.css`, such as bouncy tasks and rotating logos.

## Storage

I didn't want to use a database or add log in and things like that because this was supposed to be for me to practice frontend. But then again, I needed it to be functional. I used the browser's local storage to save the data of completed tasks and the time and the name of the tasks. On load I check if local storage is defined and recreate the interface with the completed tasks. Otherwise the setup questionnaire is presented. Here's a video of how that works.

![(landscape) Demo](/images/posts/2017-08-10-task/task_demo.gif)

## Try it out

[Website](https://yagrawl.github.io/task)  
[Github](https://github.com/yagrawl/task)


A todo web application written in vanilla JS.

Task


LeapFlix was designed to be a Chrome Extension which would skip through intros of popular TV shows on Netflix. Some shows have a cold opening and some have terribly long intros. House of cards has a 90 second video of time lapses from Washington which gets a little old after a while, so I thought this was required.

![Netflix url pattern](/images/posts/2017-08-10-leapflix/leapflix_netflix_url.png)

Since I watch this in Chrome, building a chrome extension seemed like an obvious choice. I researched the topic further and got to a forum which suggested appending a `&t=300` at the end of the current URL to make the video skip by 5 minutes. It all seemed getting a bit more clear. I had to make an extension which would grab the URL and then would append the required amount of time as per the show. Seems pretty straightforward and easy. There was just one catch. I didn't know how to make a Chrome Extension.

## Setup

Before starting anything, I went straight to Affinity Designer and made myself a logo. Design is my first preference. People do judge a book by it's cover so whatever the app does or does not do, it has got to look good. In this case, it quite didn't look that good, but I had to make do. Then I started working on the tutorial and did the basic steps of making `popup.html` and `popup.js`. I worked on the basic design which wasn't anything special - just the logo and a button. Now that I had the basic setup completed, it was time to actually figure out how to make this work.

## Implementation

I tried testing it out on House of Cards because that's one of my favorite shows. After the click of the button, the extension would get the URL of the active tab and then append '&t=96' at the end and finally reload it.

![(vertical) Basic Leapflix design](/images/posts/2017-08-10-leapflix/leapflix_basic.png)

The first episode I played did not have a cold opening and so my extension worked perfectly. I skipped through the intro and reloaded exactly when the episode starts. The extension was working! Awesome! Well, not so much. When I tried testing it out on the very next episode, I waited till the intro began (This episode had a cold opening) so when it did I launched the extension and waited for it to reload. It just took me to 1 minute 36 seconds down the episode instead of skipping the intro. The time parameter obviously loads from t = 0.

I needed to somehow monitor the time from the beginning to when the intro starts so the first thing that came to my mind is adding a clock button which should be started as soon as the episode does. That also required looking up stuff online but it worked out quickly.

![(vertical) Leapflix with a start button](/images/posts/2017-08-10-leapflix/leapflix_with_start.png)

Challenges

After some research I found out how Netflix actually works. The sources I used are not too reliable because Netflix doesn't release any of this information officially. Since Netflix has such a huge library, it is physically impossible for an individual to go through every thing so instead of loading the entire library and requiring large amounts of memory and processing time, Netflix uses something called a [Sparse Matrix](https://en.wikipedia.org/wiki/Sparse_matrix).

So a sparse matrix as shown below is a matrix that contains a majority of zeros. So let's just say that each video title in the Netflix library is a number other than 0. I learnt about all this in my linear algebra class but I never thought I would get to see this used in real life.

![(square) Sparse Matrix](/images/posts/2017-08-10-leapflix/sparse_matrix.png)

Instead of carrying the entire matrix information, Sparse matrix just carries the information of the location where a number is non-zero thus saving considerable amount of processing effort. Also, these positions keep on changing each session so the trackID is nothing more than the position of the Title in a particular session for that particular user. Basically, my entire procedure of finding the show based on URL was flawed and hence the extension failed to serve it's purpose. This was an entire weekend worth of work that resulted into nothing, but it did teach me a lot. It taught how to make a basic chrome extension and get an insight on how Netflix might be working.

![(landscape) Leapflix on the Chrome Webstore](/images/posts/2017-08-10-leapflix/leapflix_on_chrome_webstore.png)

I updated the Chrome Web Store info of the extension to 'outdated' and I apologize to the 15 something people that installed it on the first day before the update.

I think the solution for this would be Netflix populating the details of the intro of a particular episode along with other metadata and showing a button to leap.

## Update

Checkout the bottom right corner. Netflix has finally introduced a 'skip credits' button making LeapFlix obsolete (it already was pretty useless). It still was a good experience and I learnt a lot about working with Chrome Extensions in the process. I look forward to working with a new chrome extension idea in the future.

![(landscape) Update: Netflix added a 'skip intro' button](/images/posts/2017-08-10-leapflix/leapflix_house_of_cards_intro.png)

## Try it out

[Github](https://github.com/yagrawl/LeapFlix)


A chrome extension that skips through intros of popular TV shows on Netflix.

Leapflix


Before ES6, `var` was the only keyword used to declare variables in JavaScript.
Unlike other languages like C, variables do not need to use different keywords
based on their type. For example in C, integers undergo a different treatment
as compared to strings but in JS we don’t need to specify the type of the
variable when declaring it. JavaScript is a loosely typed language and this
makes it simple to use but onerous to understand. More on that in another
article.

With ES6 JavaScript introduced two other variable declaration keywords —`let`
and `const`. Since JS follows a dynamic typing system, what’s the difference
between these keywords?

![(square) Venn Diagram covering Mutability and Scoping](/images/posts/2017-08-06-declaring-variables-in-es6-javascript/declaring_variables_venn_diagram.png)

If we were to divide variable declaration types based on their characteristics,
the Venn diagram above could be used a simplistic view.

Based on mutability, `const` is on one side and `var` & `let` on the other.
Based on scoping, `var` is on one side and `let` & `const` on the other. Let’s
explore this further.

## Mutability

A `const` variable is just like any other variable with some exceptions.

-   Need to initialize the value when declared. It throws an error otherwise.

![Syntax Error on not initializing a const variable](/images/posts/2017-08-06-declaring-variables-in-es6-javascript/declaring_variables_const_error.png)

-   A new value can’t be assigned afterward. Not very _variable_, is it?
    However we can still change its properties. Check out the gist below to see
    this more clearly. (Look into immutable.js for truly immutable datatypes).

```js
// Mutable properties of a const variable.
const check = {};
check.property = "value";

// This is totally fine.
// Also, if it is an array, it can be modified.

const check2 = [];
// check2.length = 0
check2.push(1);
// check2.length = 1`
```

Needless to say, `var` and `let` are 'normal' variables which do not need to be
initialized when declaring and can also be changed after initializing.

## Scope

The `var` falls under a different basket when scoping is considered. Unlike
`let` & `const`, the `var` is defined to the closest function or global lexical
environment. Consider the following code sample below.

```js
// Global Scope
var var1 = 1;
let let1 = 1;

function myFunction() {
    // Function Scope
    var var2 = 2;
    let let2 = 2;

    for (var i = 0; i < 1; i++) {
        // Block Scope
        var var3 = 3;
        let let3 = 3;
    }
}
```

Basically in every scope there’s a variable initialized using `var` and
a variable initialized using `let`. Just to reiterate, these are the lexical
environments of the above code sample.

![Detailing Scopes](/images/posts/2017-08-06-declaring-variables-in-es6-javascript/declaring_variables_scopes.png)

As mentioned earlier, `var` ignores the blocks and is defined to the closest
function or global scope. `let` and `const` on the other hand are block scoped
variables. We have a total of 6 variables defined across 3 scopes. Checking the
value of each variable across every scope gives us the following result.

![Status of variables in different scopes](/images/posts/2017-08-06-declaring-variables-in-es6-javascript/declaring_variables_table.png)

The highlighted cells show block scoping in action. `var3` and `let3` were both
defined within a `for` loop which serves as a block scope. Since `var` is
defined to the closest function or lexical environment, it ignores the block
and can be accessed within function scope. Since it hasn’t been initialized by
the time we are outside of the block scope but inside the function scope, its
value is `undefined`. `let` on the other hand is a block scoped variable and
isn’t accessible outside of the block lexical environment it is defined in.
Read more about lexical environments and variable hoisting [here](/hoisting-in-javascript/).

## What to use and when?

There isn’t a solid argument for why anyone should keep using `var` anymore in
ES6 JavaScript with the advent of the new and improved `let` and `const`.
If the value doesn’t need to be reassigned or to reference a fixed value, use
`const` so that the code doesn’t get bogged down with seemingly arbitrary
values. If a variable might need to be reassigned, use `let`.


Declaring variables in ES6 JavaScript


The term _Hoisting_ is used in a lot of JavaScript blogs to explain identifier
resolution. Using the literal meaning of the word as a metaphor, hoisting is
employed to explain how Variables and Function declarations are ‘lifted’ to the
top of a function or a global scope.

While this does provide a basic understanding of how JavaScript scoping works,
a deeper dive helps to build a stronger foundation.

To understand the fundamentals better, let’s recap on what exactly hoisting
means. Also, as a reminder, JS is an interpreted language which means that
unlike compiled languages JS code runs line by line.

Consider the following example.

```js{lineNumbers}{fileExtension}
console.log(notyetdeclared);
// prints out 'undefined'

var notyetdeclared = 'now it is declared';

hoisting();

function hoisting(){
  console.log(notyetdeclared);
  // prints out 'undefined'

  var notyetdeclared = 'declared differently';

  console.log(notyetdeclared);
  // prints out 'declared differently'
}
```

After overanalyzing the code sample above, there are several questions that
jump up.

-   How is the function being accessed before declaration on **line 6**?
-   How did **line 1** not throw an error since at this point no variable called
    `notyetdeclared` exists?
-   Why is **line 9** printing `undefined` when `notyetdeclared` has already been
    declared in the global scope?

Javascript is extremely logical and all of this weirdness has a clear
explanation.

Starting from the very top, when code is executed in Javascript, an _execution_
context is set up. There are two major types of execution contexts in
JS — *Global execution context* and _Function execution context_. Since
Javascript is based on a single threaded execution model, only one piece of
code can be executed at a time. For our code, the process is as follows :

![Execution stack for the above code snippet](/images/posts/2017-08-01-hoisting-in-javascript/hoisting_execution_stack.png)

This process is self explanatory but doesn’t really explain the anomalies we
saw during the execution of the code sample. While the execution context keeps
track of the execution of the code, Lexical environment keeps track of the
mapping of identifiers to specific variables. Lexical environment basically is
an internal implementation of the JavaScript scoping mechanism. Generally, the
lexical environment is associated with a specific structure of the JavaScript
code for example a function or a block of code like a `for` loop. Whenever a
function is created, a reference to the lexical environment in which it was
created is passed in an internal property named `[[Environment]]`.

Covered by all this jargon is a simple and an extremely logical concept. Lets
break it down. Lexical environment is a fancy name for something that keeps
track of variables and functions within a block of code. In addition to keeping
track of local variables, function declarations and parameters, each lexical
environment keeps track of its parent lexical environment. So the Javascript
Engine’s resolution of the above code sample would look something like this:

![Execution stack in more detail](/images/posts/2017-08-01-hoisting-in-javascript/hoisting_execution_stack_details.png)

To resolve an identifier within a lexical environment, the JS engine checks
the current environment for a reference. If no reference is found, it moves on
to the outer environment by using `[[Environment]]`. This goes on until either
the identifier is resolved or a ‘not defined’ error is thrown.

Basically, the execution of JS code happens in two phases. The first phase
registers all the variables and function declarations within the current
lexical environment. After that is done, the second phase — Javascript execution
begins!

So to elaborate on the first phase: it works in two steps.

1.  The current code is ‘scanned’ for function declarations. Function
    expressions and arrow functions are skipped. For every function that is
    discovered a new function is created and bound to the environment with the
    function’s name. If the identifier name already exists, its value is
    overwritten.

2.  Then the current environment is scanned for variables. Variables defined
    with `var` and placed outside other functions are found and an identifier is
    registered with its value initialized to `undefined`. If an identifier exists,
    the value is left untouched.

Note : `let` and `const` are block variables and have a slightly different
treatment than `var`. More on that in another article.

Now that you have a basic idea of what a lexical environment is, lets get back
to our sample code and deal with the questions.

When the global context is set up, the environment is scanned and the
`hoisting()` function is attached to an identifier. Then in the next step, the
variable `notyetdeclared` is registered and its value is initialized to
`undefined` per the steps.

_How is the function being accessed before declaration on **line 6**?_

The `hoisting()` function is already registered to an identifier in phase 1 and
when the JS code starts executing in the global context in phase 2, it looks up
the lexical environment for `hoisting` and finds the function even before its
definition.

_How did **line 1** not throw an error since at this point no variable
called `notyetdeclared` exists?_

Similarly, `notyetdeclared` is registered to an identifier and initialized to
`undefined` in phase 1 and hence no error is thrown.

Finally,

_Why is **line 9** printing `undefined` when `notyetdeclared` has already been
declared in the global scope?_

Now we are in the `hoisting` environment. In phase 1, `notyetdeclared` is
registered and initialized to `undefined` because in this lexical environment
the variable `notyetdeclared` has not been registered yet. If **line 12** did
not contain the `var` keyword, this would have been a different story.

Hopefully it is clear now that hoisting in JS is a simplistic view and
technically the functions and variables aren’t moved anywhere.


How function declarations/variables get ‘moved’ to the top.

Hoisting in JavaScript


The Daily UI challenge, as the name suggests, is a 100 day long user interface design challenge. Each day, a new prompt is sent to be designed so as to challenge, motivate and inspire.

I'm very interested in User Interface Interaction. I've already taken CS 465 - UI Design and I'm planning on taking ARTD 313 - Digital Design Interaction in the Spring of 2017 at the University of Illinois at Urbana-Champaign. Below are a few of my designs to the prompts.

## Day 1

**Prompt** Design a sign up page, modal, form, app screen, etc.  
**Design Approach** Inspired by the idea of space, I tried to incorporate light colors with some graphics relating to the topic.

![(vertical) Day 1 - Sign Up Screen UI](/images/posts/2016-12-22-10-day-ui-challenge/day1_signup.png)

## Day 2

**Prompt** Design a credit card checkout form or page. Don't forget the important elements such as the numbers, dates, security numbers, etc.  
**Design Approach** I like running and shoes were the most obvious choice for a product. I love the font credit card companies use to print numbers on the card so I thought that would be intuitive to the user.

![(landscape) Day 2 - Credit Card Checkout for an online Footwear Site UI](/images/posts/2016-12-22-10-day-ui-challenge/day2_checkout.png)

## Day 3

**Prompt** Landing Page. Hint: What's the main focus? Is it for a book, an album, a mobile app, a product? Consider important landing page elements (call-to-actions, clarity, etc.)  
**Design Approach** I was trying to learn meteorJS at the time so I tried to basically replicate their landing page on a similar idea.

![(landscape) Day 3 - MeteorJS landing page UI](/images/posts/2016-12-22-10-day-ui-challenge/day3_launch_page.png)

## Day 4

**Prompt** Design a calculator. Standard, scientific, or specialty calculator for something such as a mortgage? Is it for a phone, a tablet, a web app? (It's up to you!)  
**Design Approach** I was taking PHYS 213 and we were being taught about heat transfer so that was the first thing that came to my mind. I tried to use heat specific colors to better enhance the experience.

![(vertical) Day 4 - Heat calculator UI](/images/posts/2016-12-22-10-day-ui-challenge/day4_calculator.png)

## Day 5

**Prompt** Design an app icon. What best represents the brand or product? Or is it incredibly unique? Does it look great at a distance and does it stand out when put on your home screen alongside other apps?  
**Design Approach** I had an idea about making a run based betting app, so this basically serves as an app icon for that.

![(square) Day 5 - Runistics app icon](/images/posts/2016-12-22-10-day-ui-challenge/day5_app_icon.png)

## Day 6

**Prompt** Design a user profile and be mindful of the most important data, names, imagery, placement, etc. Is it for a serious profile? A social profile? (It's up to you!)  
**Design Approach** I tried to make a user profile for a band instead because I browsed through dribble for this challenge and almost every other person had the same thing.

![(vertical) Day 6 - An artist profile UI featuring Imagine Dragons](/images/posts/2016-12-22-10-day-ui-challenge/day6_profile.png)

## Day 7

**Prompt** Design settings for something. Is it for security or privacy settings? Game settings? What is it and what's important? (It's up to you!)  
**Design Approach** This is a weird settings page for a flight booking app. It has a lot of uncommon features but the UI is kind of similar to the iPhone settings app.

![(vertical) Day 7 - Plane tickets settings' UI](/images/posts/2016-12-22-10-day-ui-challenge/day7_settings.png)

## Day 8

**Prompt** Design a 404 page. Does it suit the brand's style? Is it user-friendly? (It's up to you!)  
**Design Approach** Building on to the Space theme from Challenge #01, this is kind of a lost in space design. Same colors with graphics to emphasize the purpose.

![(landscape) Day 8 - 404 Page UI](/images/posts/2016-12-22-10-day-ui-challenge/day8_404_page.png)

## Day 9

**Prompt** Design a music player. Consider the controls, placements, imagery such as the artist or album cover, etc.  
**Design Approach** The design is pretty standard actually, just with a voice form according to the status of the song. The bright colors look better with the dark background.

![(vertical) Day 9 - Music Player UI](/images/posts/2016-12-22-10-day-ui-challenge/day9_music_player.png)

## Day 10

**Prompt** Design a social share button/icon and be mindful of the size, imagery, placement, and purpose for sharing. (As always, it's up to you!)  
**Design Approach** I thought of making this one interactive because no one wants to see a bunch of share signs at each post. I don't really have much knowledge of interaction design using Framer or Sketch, so that's what I stopped here to get an idea of those skills.

![(landscape) Day 10 - Profile share button UI](/images/posts/2016-12-22-10-day-ui-challenge/day10_share_icon.png)

## Conclusion

At this point, I realized that I need to read into how interaction design works and how exactly to use tools like [Framer](https://www.framer.com/) to better understand interaction design.


My attempt at the '100 Day UI Challenge'.

10 day UI challenge


This is a project that me and a couple other people worked on at WildHacks 2016 hosted at Northwestern University. We decided to go for the 'best use of Clarifai's API' prize and went through a few ideas before finalizing one. The basic idea of our project was to provide background music for videos. Quite simply the videos would be passed through our own custom trained Clarifai agent and decide on a mood. Clarifai is an Artificial Intelligence with a Vision. Basically it's an image and video recognition API. We decided to work with a custom model and trained it on the images we scraped using Pixabay. We landed on 4 different categories for the video emotions - Action, Sad, Happy, Calm.

## Setup

![(landscape) Screengrab of Pixabay - a stock image site](/images/posts/2016-11-22-musify/musify_image1.png)

We obviously needed to train our agent on a huge dataset. Now this being a hackathon project, we needed to do it quickly. Scraping a free stock photo website seemed like the way to go. Since the entire project was in python, I used `BeautifulSoup` to scrape and download all the images in categories such as action, sad, happy and calm off of Pixabay. We later uploaded this to our custom agent on Clarifai. After uploading upwards of 1000 images in each category, our agent started giving out stable responses.

![(landscape) Clarifai custom trained agent with custom concepts](/images/posts/2016-11-22-musify/musify_image2.png)

## Implementation

One quick glance at our code makes it crystal clear that this was a hackathon project. We used a bunch of python libraries as we required. For example, we used `pydub` to manipulate sound according to video specifications.

```python
import imageio
from upload import sendImages
import binascii
from pydub import AudioSegment
from splice import splice
import sys
import pafy

def analyze(infile, outfile):
	filename = infile
	vid = imageio.get_reader(filename,  'ffmpeg')
	length =  vid.get_length()
	fps = vid.get_meta_data()['fps']
	images = []
	for num in range(0, length, int(5*fps)):
		try:
			frame = vid.get_data(num)
			images.append(imageio.core.util.asarray(frame))
		except RuntimeError:
			print('bad frame')

	images_bytes = []
	for i in range(len(images)):
		file_name = "temp/" + str(i)
		images_bytes.append(imageio.imwrite(imageio.RETURN_BYTES, images[i], "jpg"))

	base64 = []
	for image in images_bytes:
		base64.append(binascii.b2a_base64(image))
	rs = []
	for i in range(0,len(base64), 128):
		if len(base64) - i < 128:
			rs += [sendImages(base64[i:])]
		else:
			rs += [sendImages(base64[i:i+128])]

	print('--'*48)
	# the below is a list of n maps of labeled concepts and probabilities
	# for m images.
	word_counts = {}
	concept_counts = {}
	for r in rs:
		for image in r['outputs']:
			concepts = (image['data']['concepts'])
			word = ''
			value = 0.0
			for concept in concepts:
				#print(concept['id'], concept['value'])
				if concept['value'] > value:
					value = concept['value']
					word = concept['id']
				word_counts[concept['id']] = word_counts.get(concept['id'], 0) + concept['value']
			concept_counts[word] = concept_counts.get(word, 0) + 1
			#print (concept_counts[word])

	def argmax(concept_counts):
		return max(concept_counts.iterkeys(), key=(lambda key: concept_counts[key]))
	mx = argmax(concept_counts)
	#from word counts, determine if we want double words
	if(mx == 'action'):
		songf = ("songs/AA.mp3")
	elif(mx == 'happy'):
		songf = ("songs/HH.mp3")
	elif(mx == 'sad'):
		songf = ("songs/SS.mp3")
	elif(mx == 'calm'):
		songf = ("songs/CC.mp3")
	other = ''
	if(mx == 'sad' or mx == 'happy'):
		ratio = word_counts['calm']/word_counts['action']
		if ratio > 2:
			songf = songf[:6] + 'C' + songf[7:]
		elif 1/ratio > 2:
			songf = songf[:6] + 'A' + songf[7:]
	else:
		ratio = word_counts['sad']/word_counts['happy']
		if ratio > 2:
			songf = songf[:7] + 'S' + songf[8:]
		elif 1/ratio > 2:
			songf = songf[:7] + 'H' + songf[8:]

	song = AudioSegment.from_mp3(songf)

	vidLen = int(length/fps)
	songLen = int(song.duration_seconds)
	vidSong = song

	while(songLen < vidLen):
		vidSong += song
		songLen = int(vidSong.duration_seconds)

	if(songLen >= vidLen):
		vidSong = vidSong[:vidLen*1000]

	vidSong.export('temp.mp3', format="mp3")
	splice(filename, "temp.mp3", outfile)

def getfrurl(inurl):
	vid = pafy.new(inurl)
	video = vid.getbest()
	video.download(filepath='curvid')
	return 'curvid'

def main():
	if sys.argv[1] == '-u':
		analyze(getfrurl(sys.argv[2]), sys.argv[3])
	else:
		analyze(sys.argv[1], sys.argv[2])
if __name__ == '__main__':
	main()
```

Finally one of the main aspects of our project was to actually find the music suited to the video. We obviously didn't have enough time nor the skills to come up with a machine learning algorithm to actually make music on the fly so we relied on JukeDeck's music library. JukeDeck has an abundance of pre-made music sorted by similar titles as we had originally decided on. We built our own database and used that to add it to our videos. JukeDeck doesn't have a public API at the moment so we emailed the people there but since it was a weekend, we didn't hear back from them.

![(landscape) Screengrab from JukeDeck - an AI music generator](/images/posts/2016-11-22-musify/musify_image3.png)

When we did hear back from them, the response wasn't what we were hoping for. Maybe someday they will make their API public. (**Update**: Probably not since they've been [acquired by TikTok](https://techcrunch.com/2019/07/23/it-looks-like-titok-has-acquired-jukedeck-a-pioneering-music-ai-uk-startup/))

![(landscape) Jukedeck's response to my email](/images/posts/2016-11-22-musify/jukedeck_response.png)

## Result

Before :

<iframe
    src="https://www.youtube.com/embed/Yq2-oM5AkEU"
    frameBorder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
    className="responsive-iframe"
></iframe>

After :

<iframe
    src="https://www.youtube.com/embed/8kGR5jMhrDo"
    frameBorder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
    className="responsive-iframe"
></iframe>

## What's Next?

We also tried to design a proper front-end for the client side of the app but we didn't have enough time so we just submitted it as a command line interface.

![(landscape) Proposed Frontend for Musify](/images/posts/2016-11-22-musify/musify_image4.png)

I'm looking to make this into a fully functional webapp with more tags for videos and proper jukeDeck integration. Meanwhile try out the project below.

## Try it out

[Github](https://github.com/yagrawl/wildhacks2016)  
[Clarifai Blog](https://www.clarifai.com/blog/clarifai-featured-hack-musify-finds-the-perfect-background-music-for-your-videos/)  
[Devpost](https://devpost.com/software/musify-gr1zj6)


CLI tool that recognises the mood of the video to find appropriate background score.

Musify


I love watching movies. I have watched most of the IMDb top 250 and many of the popular ones, so it became really hard to find a new movie to watch. I hate to waste my time on an uninteresting movie and also despise trying to search for a good movie to watch so I thought of making something that would solve the problem. A couple of months ago, Facebook released the messenger platform and I was definitely interested. I decided to give this interface a try.

## Setup

I began with the basics. Making a Facebook page, setting up Webhooks, etc by simply following the documentation. Now I had a functioning but useless bot that returned back whatever was sent. That's it! I apparently started this on June 20th, 2016. So facebook requires all its communications with the messenger bot be done over a secure network. The easiest way to set that up was using nodeJs hosted on heroku.

![(landscape) Basic bot that echos input message](/images/posts/2016-07-12-moviebot/moviebot_image1.png)

Having had no prior experience in JavaScript it all came down to figuring out how things actually worked. I started working with the documentation and tried to send hard-coded image links and templates to make sure I actually knew how it was working. After trying, testing and reading, I finally figured out how to use all the basic tricks to send messages and templates. Now I had to actually have it send movie information using TMDb API. That took me a few days because I had never used an API before this. After a lot of trial and error I suddenly had a movie name that wasn't hardcoded, sent from the bot.

## Implementation

Now I could actually begin using the bot. I was using random numbers to create movieIDs to get information from the API. That was not a good way to work through the API because most of the times the API wouldn't return anything and when it did, it was a weird movie from the 1940s. That was a small hurdle though. I was using `Math.floor((Math.random() * 1000) + 1)`, then I just changed to a 'popular; movies API and kept using random numbers. I then implemented 'random' movies, genre based search and the movies playing in theaters. All these were handled by `postbacks` instead of user inputs. I made sure that I had a certain flow to the bot so that it would invite minimum interaction with the user's actual input. I didn't have any NLP capabilities added to the bot and if the input wasn't in the switch statement I was using, it would fail.

![(landscape) Moviebot help desk design](/images/posts/2016-07-12-moviebot/moviebot_image2.png)

I was essentially working on a bunch of if-else and switch statements. For example, If the user inputs 'Hi' or, 'Hey' my bot would return 'Hey!' but if someone were to say 'Hii', my bot would crash! I didn't actually figure this out until I gave this to a friend of mine to try. I tried to add a 'Help desk' that would be returned if the input wasn't a predefined statement. Now that I look at it with fresh eyes, the 'Help Desk' message I used was clunky, intimidating and plain useless. However, at this point I had the basic functionality.

## Progress

![(landscape) Moviebot template for movies](/images/posts/2016-07-12-moviebot/moviebot_image3.png)

The 'Genre Based' search however was horrible. It was a giant clunky list of major genres. It was annoying to look at and difficult to select from but that's all I knew at that moment.

![(landscape) Moviebot template for genre selection](/images/posts/2016-07-12-moviebot/moviebot_image4.png)

## Problems

I later figured out how to implement the bot on Watson's conversation API. The 'Genre Based' box was gone. A simple, 'Horror movie' input from the user would do it. I thought it was going well, until some days later there was this particular case.

![(landscape) Moviebot was sweared at](/images/posts/2016-07-12-moviebot/moviebot_image5.png)

One of my users wanted to watch a Tarantino movie. Well, my bot wasn't ready to understand or execute any of that. I figured that even if I didn't understand something, I won't throw out 'Help Desk' messages because they are annoying, so I kept on suggesting random movies. This definitely might have ticked them off. TLDR; My bot was sweared at.

![(vertical) Fix for the 'director' issue](/images/posts/2016-07-12-moviebot/moviebot_image6.png)

I implemented 'People Based Search'. I had to add a ton of people as entities to train Watson on when to Search for people. The API returned top 3 movies after a search query. Error handling was the toughest part because the API wasn't too forgiving. If a random search term was passed, the API would fail and so did the code. After this, I had similar encounters where a user would ask for something my bot couldn't do and I would find out about another new feature to implement.

![(landscape) Moviebot template for people search](/images/posts/2016-07-12-moviebot/moviebot_image7.png)

## Features

![(landscape) Notable Moviebot features](/images/posts/2016-07-12-moviebot/moviebot_image8.png)

## Statistics

I've learnt a lot of things with this project. I started from scratch and now I have a little experience with JavaScript and using APIs. I am not scared to my bones when I see the documentation anymore and I can find a new movie recommendation easily. The numbers below are the unique conversations by the bot in the last 28 days as of July 2016.

![(landscape) Some statistics on Moviebot usage from July 2016](/images/posts/2016-07-12-moviebot/moviebot_image9.png)

The next step for this bot would be to implement a database so it could handle accounts of each user and ask for a list of movies they have already seen and liked and then based on that data -- provide a movie suggestion that the user is bound to like.

**UPDATE** : As of 12/24/20, I've shutdown the messenger bot because it was hard to keep up with Facebook's ever-changing API and also because I deactivated my Facebook Account.

## Try it out

[Github](https://github.com/yagrawl/moviebot)  
[Demo](https://www.youtube.com/watch?v=pelad-hQSFY)


A messenger bot powered by Google’s Dialogflow that recommends movies.

Moviebot


During the summer of 2015, I worked as a research assistant with the Biophotinics Imaging Laboratory. I received the opportunity to stay back over the summer and work as a research intern because of a class I took -- ENG 198 JS2 'Introduction to Research'. From the choices I had for what I wanted to work on over the summer, I chose this one because it closely related to Diagnostics. My parents are both doctors and some part of me was always fascinated by medical sciences. I wanted to give this a try and see where it lead.

Basically, the goal of the research is to quantify the mechanical properties of materials (industrial materials or biological samples). While most nano indentation instruments are extremely expensive, this research intended to replace it with an imaging device named optical coherence tomography (OCT) which has a significantly lower cost.

OCT can be regarded as a optical analogue of ultrasound, while OCT has higher resolution (micron meter scale) and sensitivity (nm scale) but smaller penetration depth (~2mm). One application of OCT is a field called optical coherence elastography (OCE), which utilizes OCT to detect the mechanical response of the sample upon perturbation. Therefore, the mechanical properties can be obtained. Many approaches have been proposed for OCE (in-contact or non-contact force excitation, static or dynamic mechanical response, etc). In this study, magnetomotive OCE (MM-OCE) was used, where we have a non-contact force excitation induced by an alternating magnetic field and we are typically looking at the dynamic response such as resonance frequency or shear wave propagation velocity.

In the [paper](https://pubmed.ncbi.nlm.nih.gov/23649979/), a steel microbead was placed on the sample and served as the force excitation source. The displacement response of the sample can be imaged through OCT, and then the displacement spectrum can be obtained and hence the resonant frequency (which reflects the mechanical property of the sample).

My work involved reading the research papers and understanding what the actual research was about. That took up a majority of my time. Understanding parts of the research without any background in the topic was a challenge. After that, I summarized what I understood in my own terms and confirmed it with the graduate student I was working under. Finally, my contribution to the project was designing simulations in a software called COMSOL Multiphysics. The video on the left is a clip from the start of my project. Even this involved reading a lot of documentation and understanding how the software actually works and how to use it to the benefit of the research.

<iframe
    src="https://www.youtube.com/embed/bpSc_7pZgKs"
    frameBorder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
    className="responsive-iframe"
></iframe>

It was a productive summer because I can finally confirm that my interests don't lie in the biosciences and I can finally move on.


What it was like being a research intern in the Biophotonics Imaging Lab and what it told me about myself.

My experience as a research intern


Welcome to this sample blog post, which showcases a variety of content elements you might use in your own posts. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat malesuada odio, non tristique ante aliquam et. Nulla facilisi. Quisque ullamcorper purus id metus bibendum, ac sollicitudin mauris interdum.

## Heading

Leonardo di ser Piero da Vinci (15 April 1452 – 2 May 1519) was an Italian polymath of the High Renaissance who was active as a painter, draughtsman, engineer, scientist, theorist, sculptor, and architect. While his fame initially rested on his achievements as a painter, he also became known for his notebooks, in which he made drawings and notes on a variety of subjects, including anatomy, astronomy, botany, cartography, painting, and paleontology. Leonardo is widely regarded to have been a genius who epitomized the Renaissance humanist ideal, and his collective works comprise a contribution to later generations of artists matched only by that of his younger contemporary, Michelangelo

This also contains some [links](https://yash.works) by default.

## Paragraphs and Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat malesuada odio, non tristique ante aliquam et. Nulla facilisi. Quisque ullamcorper purus id metus bibendum, ac sollicitudin mauris interdum.

Default blockquote:

> This is a blockquote. It's great for highlighting important information or quoting someone else's words.

A quote from someone or somewhere:

> quote: I have been impressed with the urgency of doing. Knowing is not enough; we must apply. Being willing is not enough; we must do. - Leonardo da Vinci

A callout:

> callout: UPDATE: This is an important callout!

## Lists

You can use lists to organize information.

### Unordered List

-   Item 1
-   Item 2
    -   Subitem 2.1
    -   Subitem 2.2
-   Item 3

### Ordered List

1. Step 1
2. Step 2
    1. Substep 2.1
    2. Substep 2.2
3. Step 3

## Citations

Crime and Punishment [citation:1](#citation-1) is a novel by Fyodor Dostoevsky. The story is set in St. Petersburg, Russia, during the 19th century [citation:2](#citation-2). It is often cited as one of the greatest works of world literature [citation:3](#citation-3) and is considered a precursor to existentialism [citation:4](#citation-4).

## Code Snippets

You can also include code snippets in your posts.

Inline code: `const foo = 'bar'`

```scss
.className {
    margin: 20px 10px;
    padding: 2px 5px;
    position: absolute;
    font-weight: 400;
}
```

Some more code:

```go
type controller struct {
	db          *sql.DB
	runningJobs map[string]struct {
		job    *models.BackgroundJob
		comm   chan (jobOutput)
	}
    ...
}
```

code with line numbers:

```jsx{lineNumbers}{fileExtension}
const Component = () => {
    return (
        <form onSubmit={this.handleSubmit}>
            <label>
                Pick options:
                <select
                    value={this.state.value}
                    onChange={this.handleChange}
                >
                    <option value="grapefruit">Grapefruit</option>
                    <option value="lime">Lime</option>
                    <option value="coconut">Coconut</option>
                    <option value="mango">Mango</option>
                </select>
            </label>
            <input type="submit" value="Submit" />
        </form>
    );
}
```

## images

### Popup Landscape Image

![(popup) Local/Portland, Maine](/images/posts/sample/popup.png)

### Landscape Image

![Local/Portland, Maine (landscape)](/images/posts/sample/landscape.jpg)

### Vertical Image

![(vertical) Local/the sphinx](/images/posts/sample/vertical.jpg)

### Square Image

![(square) Local/cupcake](/images/posts/sample/square.jpg)

<Citation
    numbers={[1, 2, 3, 4]}
    content="
  Dostoevsky, F. (1866). Crime and Punishment. | https://example.com/crime-and-punishment
  Frank, J. (2002). Dostoevsky: The Miraculous Years, 1865-1871. | https://example.com/miraculous-years
  Terras, V. (1990). A Karamazov Companion. | https://example.com/karamazov-companion
  Bakhtin, M. (1984). Problems of Dostoevsky's Poetics. | https://example.com/dostoevsky-poetics
"
/>


Sample post that contains all the features available with MDX

scribbles_

Tag Ui