# 5 things I love about my website (and how they're built)

This site is home to certain tech and web dev goodies that make me very happy. This post is about what they are, and how they work. 

## 1. It follows light/dark mode based on your preference

While most websites these days come with some type of dark/light mode toggle switch, I serve you content based on the setting that you've set on your system: if you use your phone/computer in dark mode, you get dark mode. If you use it in light mode, you get light mode.

![An example of dark mode switching on macOS](/img/blog/5-things-post/darkmode.gif)

This is made possible by the powerful [`prefers-color-scheme` media query in CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme). [Here's a code sample that makes that possible](https://github.com/TejasQ/tejaskumar.com/blob/d96da38f6fbb32c4b1be760d95d5226f4f482fe7/components/BlogPost.tsx#L49-L64).

## 2. It is a dream to develop

This website is built with [React](https://reactjs.org/) and [ZEIT](https://zeit.co/)'s popular framework [Next.js](https://nextjs.org/), which honestly is such a dream to work with. 😍 Next.js' opinionated-ness as a framework takes a lot of the mental overhead of structuring things away from me and, in many ways, _"just works"_. What's even better, is it's all magically ✨ server-rendered out-of-the-box, without extra work from me so search engines can pick it up and people can find it!

![An example of NON-server rendering](/img/blog/5-things-post/clientrender.gif)

### Server Rendering

What is server rendering? It's when a site is _"rendered"_ (think, _drawn_) on the server and then delivered to a browser. This way, you get the content _immediately_ from a _server_. This is a bit different than how many websites work on the web today. If you've ever opened up a website and seen spinners immediately before your content, it's quite likely that it was _not_ server rendered: it was _"drawn"_ (or _rendered_) in your browser (AKA the client, AKA _not_ a server).

The benefit of server-rendering for me is:
- You get your content immediately, instead of spinners
- Search engines can read it easier
- No jumpy and possibly unpredictable behavior: if you load a non-server-rendered-spinner-driven website on a train, or somewhere with intermittent internet, the user experience could end up in some strange, unpredictable state. This risk doesn't quite exist with server rendering.

Next.js gives me all of this _for free_, without having to do anything.

### Deployment

IT GETS BETTER! Using another product from ZEIT called `now`, I'm able to upload this site to the internet _magically_ by running _one_ command. And _just like that_, tejaskumar.com is up-to-date with the latest blog post and can scale infinitely and handle billions of readers at any given time.



What a time to be alive. 😍

## 3. Whimsy

I've tried to keep this website playful and _whimsical_, with the [silly photos of me](https://github.com/TejasQ/tejaskumar.com/blob/master/public/tejass/13.png) and [odd nicknames](https://github.com/TejasQ/tejaskumar.com/blob/master/util/tej-variants.ts). I feel like we can all sometimes get too serious. I'd like my little corner of the internet to be fun and not so [_langweilig_](https://www.google.com/search?rlz=1C5CHFA_enDE756DE756&ei=6PMlXt-LAoH6kwXZp5zoBQ&q=langweilig+in+english).

| Real Mac Dock | My Dock |
|--------|-------|
| ![An example of the Mac Doc effect](/img/blog/5-things-post/real-dock.gif) | ![An example of a copy of the Mac Doc effect](/img/blog/5-things-post/dock.gif) |

I even created a mouseover effect to mimic the [macOS dock](https://support.apple.com/guide/mac-help/dock-mh35859/mac) in CSS just for fun because _why not_. Let's make it playful and fun. If you have ideas for ways we can continue to boost the whimsy of this website, [let me know on twitter](https://twitter.com/TejasKumar_) and it could be a cool collaboration between us! 😄

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Working on a &lt;ConfettiGeyser&gt; component for my React Europe Whimsy Workshop :D this one&#39;ll be a ton of fun to build. <a href="https://t.co/JlTMUWaxad">pic.twitter.com/JlTMUWaxad</a></p>&mdash; 🌈 Josh (@JoshWComeau) <a href="https://twitter.com/JoshWComeau/status/1126575908754788354?ref_src=twsrc%5Etfw">May 9, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

I really appreciate Josh Comeau and [the things he creates](https://tinkersynth.com/) because they're creative and beautiful. It's this kind of flair/vibe that I appreciate on the web.

## 4. GitHub is my backend

I've had a number of conversations that go like this:

> I'm starting a blog. What stack should I choose? What should my backend be? 🤔

I've had this conversation with myself often. As with most things, I'd like to employ the KISS (Keep It Simple and Spectacular) principle.

I'm a huge fan of the [JAMStack](https://jamstack.org/): the **JavaScript**, **APIs**, **Markup** stack. That's entirely how this site works:

- the interactivity of this page is provided by **JavaScript**,
- via [GitHub's GraphQL **API**](https://github.com/TejasQ/tejaskumar.com/blob/111ae18633d2fd16aab9fdfaf9ccdba127d86302/util/getInitialBlogPosts.ts#L10), it retrieves [blog posts contained in this repo](https://github.com/TejasQ/tejaskumar.com/tree/master/blog) written in [markdown](https://en.wikipedia.org/wiki/Markdown), and finally
- renders [markup](https://en.wikipedia.org/wiki/Markup_language) in your browser via Next.js.

There are a number of different backends I could use. I could even go _"backendless"_ and have everything be statically generated using [Gatsby](https://www.gatsbyjs.org/) or similar. Why do I choose a GitHub backend? I'm glad you asked.

1. **The source code lives on GitHub.** Like... it's _there_. A database is essentially a folder containing files and things in a certain structure. There's no real reason my [blog folder](https://github.com/TejasQ/tejaskumar.com/tree/master/blog) couldn't be a database. It seems like the simplest solution. There _are_ limitations, but they don't matter much to me. 

2. **Static build time.** This blog has 3 posts on it at the time of writing. 3. Three. T h r e e. Drei. That's not a lot. But, when building something, I think of scenarios where it could have 3,000,000. 

    <blockquote class="twitter-tweet"><p lang="en" dir="ltr">Curious: what are y&#39;all&#39;s thoughts on using a static site generator (maybe like <a href="https://twitter.com/gatsbyjs?ref_src=twsrc%5Etfw">@gatsbyjs</a>?) at scale? <br><br>Say for example I have a project with 150k-200k articles. <br><br>What are your thoughts, concerns, etc. about this in terms of build time and deployment?</p>&mdash; Tejas Kumar (@TejasKumar_) <a href="https://twitter.com/TejasKumar_/status/1128028814829936645?ref_src=twsrc%5Etfw">May 13, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

    In this case, a static site _could theoretically_ take a [looooooong time](https://twitter.com/monicalent/status/1128030476780937217) to build, which could be problematic. **This is the reason I have not chosen a static site generator.** I love client/server because it scales better and allows more clearly defined, non-blocking boundaries between components.

3. **Enforced transferrable writing.** Realistically, GitHub has a rate limit. I think it caps out at 5K requests per hour (please don't [DDoS](https://www.cloudflare.com/learning/ddos/what-is-a-ddos-attack/) me). At some point, I might have to move my blog post writings out of this GitHub repository and somewhere else. How hard will this migration be?

    Copy. Paste.

    It's _all text_. Literally, it's [_all markdown_](https://github.com/TejasQ/tejaskumar.com/blob/master/blog/1579543554591__5-things-i-love-about-my-website.md). The images are externally hosted and can be polyfilled, but besides that, it's text. I can copy these files to any other backend that supports, well, _text_, and nobody will be able to tell anything changed. Having GitHub as my API enforces me writing this way (transferably) and I love it!

    In case I outgrow the GitHub backend, I'd consider [Fauna](https://fauna.com/) or similar as a DB. 
    
    It supports text.

## 5. It is community driven

Did Tejas build this site? Kind of. Tejas built this with [these wonderful people](https://github.com/TejasQ/tejaskumar.com/graphs/contributors). It's a team effort! This website is community driven.

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">📣 I have some stuff I want to add to my website. <br><br>I would like to help underrep’d people in tech and/or newcomers. Let’s build these together! 🙌🏾<br><br>1) 🍔 Burger menu for mobile<br>2) 🎙 Talks section<br><br>👨🏾‍💻 If you want to learn to code, please reach out.<br><br>I want to help you succeed.</p>&mdash; Tejas Kumar (@TejasKumar_) <a href="https://twitter.com/TejasKumar_/status/1217839590213660673?ref_src=twsrc%5Etfw">January 16, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

I also have a list of developers I plan to collaborate with in the near future. This list is composed of people with varying backgrounds (beginners through experts) and usually from underrepresented groups in tech. It's an honor and a privilege to use my little corner of the web as a platform to help others in the tech industry as it grows increasingly beautiful each day.

Ah, writing all this reminds me how much I have to be thankful for.

_brb_

5-things-i-love-about-my-website

# What I Learned From Getting Pushed Off My Bicycle

This post is about things I learned after being randomly attacked on the streets of Berlin when a stranger pushed me off my bicycle.

Last week, [I tweeted](https://twitter.com/TejasKumar_/status/1214970326695710721) about being at my end when someone
pushed me off my bicycle. I was _genuinely confused_ because I've never experienced such an act of random aggression.
This, coupled with my mental issues, led me down a depressive spiral wherein I questioned life, humanity, and our
behaviors. This blog post aims to summarize what I've found.

## The Context

For context, here are a few things you need to know about me:

- I have the most severe kind of [hemophilia](https://www.youtube.com/watch?v=BoXBuJSURTI).
- Because of this, I spent the first 23 years of my life in a very volatile state between life and death:
  - I would be healthy one day, and some insignificant, unnoticeable event (like _opening a door_) would cause me to
    bleed internally.
  - I would notice hours later that I had lost a significant amount of blood and _nearly die_.
  - I would then, fueled by a lot of adrenaline, **_hustle_** to the emergency hospital for urgent care.
  - I sometimes would spend weeks admitted in the hospital thereafter.
- I am not cured, I just have better healthcare. If I don't take my medicine every 48 hours, the same things can happen
  today.
- These mental gymnastics of swinging between _"OMG IM DYING!!!"_ and _"heh, life is pretty great 👍🏾"_ have given me
  prominent [bipolar disorder](https://en.wikipedia.org/wiki/Bipolar_disorder).
- The nearly dying on and off has given me
  [PTSD](https://www.mayoclinic.org/diseases-conditions/post-traumatic-stress-disorder/symptoms-causes/syc-20355967). I
  sometimes panic and think I'm dying even though I'm more or less fine nowadays.

## The Incident

I had woken up depressed and had a generally crappy day. This is not atypical for me since I have bipolar disorder. I
didn't feel like it, but I dragged myself to German class (it's one of my
[goals](https://twitter.com/TejasKumar_/status/1212085975050047490) for this year). On my way back, as I'm casually
riding my bicycle 🚴🏾‍♂️, someone walking alongside me on the street stretched out his arms and pushed me _off my bicycle_.
I fell. When I got up, I looked at him and said _"what's the problem?!"_.

Turns out, it was a pedestrian (zebra) crossing that I had not seen.

- The zebra stripes were yellow on a black asphalt road,
- it was night time, and
- the contrast ratio between the yellow street light and the zebra stripes wasn't ideal.

[Pay attention to a11y](https://www.youtube.com/watch?v=04DOp1F9Od4), y'all!

### It Was My Fault

The person who pushed me off my bicycle is _"in the right"_ in this case. **It was my fault.** I should have stopped and
let him pass. Perhaps he overreacted a bit, but most people who know me know I overreact a few times myself. It's part
of the human experience.

He also didn't know I have severe hemophilia. He probably would have exercised a little more restraint if he did.

## The Lessons

In retrospect, all of this makes perfect sense to me. In the moment though, it sent me down an exponentially darker and
more depressive emotional rabbit 🐇 hole than I was already on. I woke up depressed, this made it worse.

> "why are people like this?" "why is this city so evil?" "why do I overreact just like this?" "are we all just lost and
> angry"

I wonder if you can relate.

My good friend Dave 🧔🏻 says something I really appreciate often:

> We often want the mountaintop experiences in life, where everything is beautiful and where we're _happy_ –
> experiencing accomplishment from the climb and the breathtaking beauty on top of the mountain 🏔.
>
> What we keep forgetting though, is that nothing can really live on mountaintops: it's all dead up there.
>
> Life and growth happens in the valleys.

I love this. As someone who has spent an extraordinary amount of time in the valleys (you know,
[from _nearly dying_ all the time](#the-context)), I agree. People often say to me _"oh dear, you're depressed, that's
so sad! I hope it doesn't last long and you feel happy again soon!"_. I hear where they're coming from, _and_ I
appreciate it, but I'll feel happy again _when I feel happy_.

For me, it all happens in waves. Sometimes I'm happy, sometimes I'm not, but when I'm in a depressive state, it needn't
be _bad_ – [it serves me well](https://www.youtube.com/watch?v=TUIcTl9Hto4&t=8m40s)! When I'm happy, I'm too busy living
in the moment to reflect and re-evaluate the world and my place in it – I just want to have a good time. It's in the
depressive episodes, in the valleys, where I go looking for hope, truth, meaning, and purpose – and where I find it.

## The Outcome

Here's what came out of my depressive episode, triggered by my hemophilic-bipolar disorder, and amplified by a random
dude who threw me off my bike:

0. **I should start a blog to collect my thoughts** and share things LOL&nbsp;&nbsp;![party parrot](https://emojis.slackmojis.com/emojis/images/1471119458/990/party_parrot.gif)

1. **I am _thankful_ to have a community of friends who care for my well being.** I have received
   [so](https://twitter.com/gethackteam/status/1215170952876756992)
   [many](https://twitter.com/hdjirdeh/status/1215004323253555206)
   [messages](https://twitter.com/manjula_dube/status/1214997686102810624) from friends and family expressing a ~genuine
   concern~ _love_ 🔥 for me. _Little old me! The sick nobody! That odd hemophilia dude!_ I'd never want to take this
   incredible gift of community for granted. From the bottom of my heart, y'all, I am **_thankful_** to and _for_ y'all.
   ❤️

2. **People are hurting.** Would the d00d have pushed me off my bike if he was happy and content with the world?
   [Studies say most likely no](https://www.ncbi.nlm.nih.gov/pubmed/29279219). I wager that the reason we have things
   that make us cringe with disgust in the world today: gatekeeping, racism, mansplaining, etc. is because people are
   hurting.

   People are hurting from feeling like they're not _clever_ enough so they gatekeep using esoteric language that
   inflates the ego, because _they need it_ to feel important and ease the pain. I sometimes _mansplain_ (to my shame!)
   because I want people to think I'm smart. I don't do it to put people down, but rather to help me bring myself up!
   It's approval seeking because on some deep level, I feel inadequate and it _terrifies_ me.

   The (counterfeit) solution? Pretend. Fake it 'til you make it, no matter the cost.

   The _actual_ solution? Truth.

   I publicly acknowlege that **I fail** in one way or another, either technically or physically or whatever. I'm a
   flawed human. It is what it is. I'm trying to improve, but it's kind of a
   _[gradient descent](https://ml-cheatsheet.readthedocs.io/en/latest/gradient_descent.html)_ kind of thing. There will
   be error. It's unavoidable and that is okay.

3. **I have a mission.** I'm convinced the world is broken. You're welcome to disagree with me but I mean...
   [look](https://twitter.com/Silvie_Reichert/status/1216822288076681220)
   [around](https://twitter.com/chrstnplcnnn/status/1216376212823724033). And so, while I can occasionally get
   sidetracked with my depression and bipolar and PTSD and bleeding to death or whatever, there are people around me
   facing just as much hardship as I am.

   As one who has suffered possibly far more than most can imagine, my mission is clear: _restoration_.

   I want to help put the pieces back together however/wherever/whenever I am able. What a world it would be if the dude
   who threw me off my bike's hurt was healed. What if he would then go on to help others heal, and they'd help others
   and those people would help even _MOAR PEOPLE_ and exponential healing and wholeness would cascade through all that
   we know.

   This is kind of what I dreamed of in my depression.

   [I think we can do it.](https://twitter.com/TejasKumar_/status/1183038225717313538)

   <blockquote class="twitter-tweet"><p lang="en" dir="ltr">It&#39;s the mindset of &quot;I think I can, I think I can&quot; that ultimately makes you succeed. (3/8)</p>&mdash; Tejas Kumar (@TejasKumar_) <a href="https://twitter.com/TejasKumar_/status/1183038225717313538?ref_src=twsrc%5Etfw">October 12, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Better go get started.


TEJMAN

5 Things I Love About My Website 👉🏾

🚀

MOAR BLOG POSTS