DEV Community: Anand Amrit Raj

Learning Vim in Quarantine - Part 2

Anand Amrit Raj — Mon, 03 Aug 2020 19:03:15 +0000

Starting to use Vim was probably one of the best decisions of my life. It made me realise, how much time and effort I have wasted moving my hand back and forth between keyboard and mouse. Don't get me wrong, mouse is a really useful device and I don't plan on getting rid of it. But when it comes to coding it's just more natural to use a keyboard.

It took me some time to understand that Vim is actually making me efficient. Once you pass the whole "What keys I should press to get to that line?", "Why are there 3 modes!!", "I hate Vim so much!" and "Arrrgghhhhhh!!", believe me, after writing the first part, there was a time when I was frustrated with Vim so much that I did not use it for a whole week (We were on a break, and I might have used VSCode).

It made me realize the mistake I was making, I was trying to learn all of Vim at once. Like all of it! I wanted to be a master at Vim. It made me recall of a time from the Gym.

If you want to bench 80 Kgs on your first day of the Gym, you are going to fail. Miserably.

Just like benching 80 Kgs, you don't learn all of the Vim on the first day. You cannot. You start with 10 Kgs, and gradually improve yourself to 80 Kilograms. (For those who are wondering, I still can't lift more than 50 Kgs 😅).

Anyways, the point here is that if you want to learn Vim, start with the basic key movements. I know its really tempting to learn all the tricks and install all sorts of plugins to do the thing you want to do in 2 key-strokes, but that's not going to help in the long run. At least it did not help me. I realized that if I try to learn all 100+ combinations at once, I am not learning anything at all. You need to learn the basic movements first (start with 10 or so) and then gradually add more keys to your Vim arsenal. First, try to get it done using brute force.

Something which helped me

In your early days, if you are going to directly use Vim in your projects where you need to do a lot of thinking (like you are figuring out an algorithm or debugging a nasty bug from last 3 days), I would recommend not use Vim use at all (at least during the first few weeks). It will only make you more frustrated. Initially, I only used Vim for writing documentations, and blog posts like these. There's not a lot of mode switching and you are more or less in your comfort zone.

Also, I changed my Vim color theme to match my VSCode theme (which tricked my little brain to think I was still in VSCode).

If you want you can also install one of those VIM-mode plugins in your favourite editor and get started there. It personally felt a little weird to me, but I would recommend you to try.

Start with these keys

To start with, I would recommend with these ~10 keys to help you understand the movement and basic editing. Spend a week or 2 focussing on just these keys until you feel comfortable with them.

Also remember, this is going to be the hardest part of your Vim journey.

j and k to move up and down
h and l to move left and right
w to move forward by a word
b to move backward by a word

What should be your aim here? When can you say that you are good at using these keys?

The point when you can say that you have mastered these keys would be when you don't have to think about what keys to press when you want to "move 5 words forward" or "go 4 lines down". It should naturally come to you without thinking. We can then say that you are ready for the next keys!

These are a couple of keys to help you with the basic editing. You can learn them in parallel with the keys above.

yy Yank (Copy) a line
p paste the line you just yanked, a line below your current line (It will paste whatever is in your register (think of it as your clipboard))
dd delete the line that you just pasted (it will also move it to the register)
u will undo your last command

These are some very basic commands (and easy to learn) but very powerful. Take some time to master these.

Let's move to our final set of keys!

Many a times you might need to delete a block of text all at once. You can do dd dd dd dd to delete multiple lines (4 in this case), but you can also do this

Press Shift + v this will put you in "Visual Line mode" and now you can use the j and k keys to start highlighting lines and then press d to delete all the highlighted part at once!
There's one more "Visual mode". If you just press v it will put you in visual mode but only highlight your current character. From there you can perform your usual movements using w, b, h, j , k and l keys to highlight the parts you want to delete with d. (Or you can use y to yank that part and paste somewhere else using p)

Mastering h, j , k and l is coming handy now 😉

Writing text

Now probably at sometime in your coding, you would want to write your own stuff and not just copy paste from other files (I hate when this happens).

For those times we have the "Insert mode". Pressing i would put you into the insert mode and you can then write all the text you want just like any regular text editor.

Getting out of the insert mode

There are a couple of ways I found which take you out of the insert mode:

Escape key
Ctrl + c
Ctrl + [

I am yet to understand why there are 3 ways, but I mostly use the Escape key and Ctrl + c

Check the mode you are in

In the bottom left of your code window you should see an indicator about which mode you are in

INSERT for Insert Mode
VISUAL for Visual Mode
VISUAL-LINE for Visual line Mode
NORMAL means you are in the default mode which I like to call movement mode

Saving the file

Now that you have made edits, you would want to save those changes. Use :w to save the file.

Quitting Vim

I will update this section when I learn how to quit Vim 😂

You can use :q to exit Vim when you are in the NORMAL mode. This will fail if you have made changes to the file.

If you have made edits and don't want to save the edits, use :q! to quit without saving.

Final thoughts

I would recommend to spend around a week or two with just these commands till the point where you press these keys without thinking about them. (Just like you press Cmd + c and Cmd + v to copy and paste). Then once you are comfortable, incorporate a few more keys (or combinations) in your editing. Just keep them less than 4-5 keys/commands at a time.

Here's a quick Vim cheatsheet if you need one. Its not pretty but gets the job done: https://www.fprintf.net/vimCheatSheet.html

I will write part 3 of this series based on my personal experience once I am done with the current set of keys. Hope this is helpful!

Learning Vim in Quarantine - Part 1

Anand Amrit Raj — Sat, 16 May 2020 07:58:08 +0000

Wow, it has been a long time since I wrote anything on this blog. To be honest the last year was a bit too much. And surprisingly this year is no better.

Anyways, just like everyone, I am using this quarantine to skill up and make good use of it. I am picking up things I always wanted to do and one of those things was learning Vim.
I have seen a lot of tutorials with people using Vim which mostly confused me. Like why would you want to write in a command line tool. WITHOUT A MOUSE??? Are you kidding me. How are you even going to navigate around? That doesn't even make sense!

This is not a tutorial, rather my story of deciding to use Vim as my primary text editing tool.

Problems with IDEs

Well, turns out, if you start spending 10+ hours writing code everyday, you realise that using a mouse is actually slower. Like really slow. Hear me out. If you use VSCode/Any other editor it has some basic issues which become annoying.

You constantly have to switch your right hand between the keyboard and mouse. That takes around 0.75 seconds for me (This includes the time to position my hand properly on the mouse, move the mouse around and 0.5s more when I switch back my hand to keyboard).
You have to point your mouse to tiny icons on the screen, which at 4.30AM in the morning is just too much to ask of me.
On a good day, loading up IntelliJ easily takes 10 seconds out of my life. And then starts the indexing process which takes forever!
I spend a good amount of my time being SSHed into remote servers. Normally I would have at least 3 SSH sessions open into different servers. While it mostly involves checking logs, there are cases when I have to edit config files on remote servers and nano is not present. But Vim is always on each one of the servers. So yeah it makes sense to invest time in Vim.
Other editors are just not as cool as Vim. This is probably the biggest drawback. I like the minimal look of Vim(by default, even line numbers are not shown!)

But why Vim?

But what makes Vim so good that I want to learn it? Well I am still to experience the benefits myself as I have literally just started. But here are some good things I heard about it:

It is fast. It is always going to be faster than your normal IDEs since it has a lot less UI to process.
It is highly customizable. There are plugins for almost anything you can think of. Anything you can do in any other IDE, you can do it in Vim too and probably faster.
Since Vim is on almost all the servers, you can literally use the same Vim setup on any machine you SSH into by just downloading your .vimrc file and BOOM! you feel right at home.
You forget about your mouse. Since I started using it I have realised how fast I am without a mouse/trackpad.
Also, if you are staring up with Vim, DO NOT USE THE ARROW KEYS. I read this in a lot of posts. Well it is true. Hear me out. Time to switch to your arrow keys is easily 0.25s and if you are not a touch typer (I am not) you are even slower when you come back to the home rows because you have to position your hands back to where they were. But if you use h, j, k and l to navigate around, it really becomes easy to just keep your hands at one place and enjoy typing!
There are things called motions, tags and macros which make our life much easier. This is not a post about them since I am yet to use any of them, but yeah they are a big part of the Vim experience. Maybe we can talk about them in the next part.

I am sold, let's start!

Glad you are sold. Start by installing Vim (It should already be installed on most linux based OS) you can find tons of tutorials by just Googling Install Vim on X operating system

Okay, now that we have Vim installed, the first thing I did was complete the vimtutor file. It is a text file which gives you an idea about using Vim by actually asking you to editing the file while you are reading it. Felt like an episode of Bandersnatch to me. It is okay if you have to read it more than one to get the hang of commands.

Most of the commands are pretty intuitive, you want to quit? :q, you want to save(write)? :w Want to move a word forward? just press w. i puts you in insert mode. ciw changes inside word, ~~d deletes the character you are at~~ (Thanks to Amin NAIRI in comments for pointing it out, d actually waits for a motion before deleting anything. Like diw for delete inner word, this will delete a word when your caret is on any letter of the word). You actually don't have to memorise the commands, after sometime, they just flow naturally, like you are speaking... in Vim's language.

Okay, so one more thing. There is a thing called .vimrc I talked about, that is the configuration file for Vim. Which means any modifications/plugins you add to .vimrcconfigurations can and will be persisted across different Vim sessions. One benefit is that these can be persisted across different machines as well. Just push your .vimrc file to Github/any server from where you can download later. On the new server just download your .vimrc file, and you are in your familiar setup on the new machine as well, with all the syntax highlighting and all your plugins.

What all plugins to Install??

There are a lot of Vim plugins and a lot more .vimrc files available on the web. A quick search on Github returns around 19,519 repository results. This is just mind-blowing and you will never be able to go through all those .vimrc files.

The approach I am taking on is to create my own .vimrc file from scratch by adding plugins and settings on need basis rather than blindly copying/using someone else's .vimrc file. I am still looking at other people's vimrc's and adding bits and pieces here and there but only after understanding what it does and is it actually adding any value to my flow.

The ones I have added for now are Vundler, NerdTree and Enable Line Numbers! :D

Anyways for those interested, I am adding my .vimrc on Github hoping it would motivate someone to use Vim in 2020 and beyond (If we make it past 2020).

My super slim vim configuration

Photos+: A chrome extension to download photos from Google Photos in the best possible quality.

Anand Amrit Raj — Tue, 30 Apr 2019 05:01:42 +0000

If you are an Android user, chances are that you are using Google Photos to backup your photos. Google Photos is a great application and provides high quality unlimited free storage for your photos and has a lot of other neat features such as face recognition and great sharing options!

Recently, I have been spending a lot of time in Google Photos remembering past memories with a friend. I tried downloading some of the photos and realized that the quality of the photos was not that great.

I played around with the URL and changed some parameters to see if that changes the quality. To my surprise changing the parameters worked and I was able to download photos in much better quality than the default "Download" button provided.

So I made a chrome extension which adds a new button on each photo which will download the photos from https://photos.google.com in the best quality possible!

If you like it please consider dropping a ⭐. It would mean a lot to me!

Needless to say, PRs and suggestions are most welcome. ❤️❤️

anamritraj / google-photos-plus

A chrome extension that allows you to download photos from Google Photos in better quality than the default download option.

Google Photos Plus (Add to chrome)

A chrome extension that allows you to download photos from Google Photos in better quality than the default download option.

Why this exists?

If you are an android user, chances are you are using Google Photos app to backup your photos to cloud. Google Photos is a great application and provides high qualtiy unlimited free storage for your photos I was going through the web version (https://photos.google.com) and realized that even though they store our photos in slightly better quality, when you click download they don't serve the highest quality possible for a photo.

This extension adds a new button on each photo which allows us to download the photo in best possible quality as shown below.

How to use?

Clone this repository or download as a zip file.
If you download as a zip, unzip it.
Open Google Chrome.
Go to…

View on GitHub

How #100DaysOfFitness changed me?

Anand Amrit Raj — Tue, 26 Mar 2019 00:00:00 +0000

Disclaimer: The person in the cover image is not me!

I have successfully completed the #100DaysOfFitness challenge and it feels so great! It is a big deal for me since I suck at self-motivation when it comes to physical exercise. Making myself publically accountable for the workout was a great way to get me up from the chair and go to the gym.

The Start

It all started one day when after 2 months of gap I went to the gym again. You see, this was not the first time I tried to add exercise into my life. For the past 1 year, I was in an on-and-off relationship with the gym 😅. I always found excuses to skip the gym.

Then, I read somewhere about the #100DaysOfX challenge. I thought let’s give it a try, this seems like a great way to challenge myself! And hence I started.

I used Twitter to post my progress and hold myself accountable. I started on the 12th of November 2018. You can follow the journey here.

The Goal?

My goal from this challenge was to make it a habit to workout for 30-45 mins/day, 5-6 times a week. The goal was not to lose weight or gain muscle (though I actively tracked it). Also, gaining some strength was a priority of me instead of just focussing on the cardio.

The Plan?

I chose to workout in evenings since I am not a morning person and it would be tough for me to get up early and go to the gym. I wanted this to be as smooth as possible. Also, for me, mornings are very calm and I would prefer to study or code rather than sweating in the gym.

To track how many calories I was actually burning I got a Xiaomi fitness tracker (MI band 3). It did the job and counted calories almost accurately and worked pretty well for me. Also, it was cheap.

Removing the resistance

I had a gym membership before (of six months, 😝). Guess how many days I went to the gym? Turns out, the process of getting into the gym clothes and then going to the gym, which was at around 15 mins walk from my apartment, was way too much to ask from me.

To overcome this, I joined the gym in my society. There were no trainers and less equipment in this gym but I realized the trainers in the professional gym hardly had time for me after my 2 weeks in the gym. As for the equipment, they were enough for me. Once I am in my gym clothes, it took me less than a minute to get to the gym. So no more excuses!

Uhh Diet??

Again, this was not a part of my goal. I made absolutely no changes to my diet, though later I realized that I am automatically eating less junk now because now I know the calories I would need to burn to compensate for that.

Routine

I wake up at ~7.30 AM (on a good day), drink my coffee while checking my emails and going through the phone. After that first coffee of the day and a great sleep, I feel energized to do something productive. So I would spend the next two hours working on a side project or solve questions on Leetcode/Codechef (depends on the mood).

At around 11 AM I would get up and get ready for work. I get to work by 11.45 AM and would stay there till 5.30 PM. After that, I come back to my apartment and change into my Gym clothes and enjoy some YouTube/ Netflix along with coffee.

I would work out from 6 to 7 PM. More on the workout later. From 7.30 PM to 9 PM I usually have meetings which I attend from home. For me, 7 PM is too early to have dinner so I chug on a protein shake which keeps me full until dinner.

After which I usually study/work on a side project/Netflix till 12 AM and then go to bed.

The Workout

I knew I had to make it fun otherwise I would not be able to make it till 100 Days! And also, I (used to) hate running or walking or moving 😂. So choosing a workout plan which was fun was very important for me.

I stuck to a simple workout with more focus on the compound movements such as Deadlifts and Bench Press. This was my day-wise routine:

Monday- Chest and Triceps
Tuesday- Back
Wednesday- Cardio and Abs
Thursday- Biceps
Friday- Shoulders
Saturday- Legs

I watched some YouTube videos to customize each day’s workout based on the equipment I had. Then just followed it for 100 Days without changing much. My main focus was to progressively overload the weights for each of the workouts. Also, I made sure I was using the correct form since there was no trainer.

Results

This challenge changed me! Not only physically but mentally as well.

👉 Some of the direct effects:

I can now do 25 Pushups in one set😅. I know that’s not much, but when I started this number was 3. I was weak.
The same goes for almost every other exercise. I managed to get at least 5-6 times better in terms of weight or the reps.
I lost around 500 grams(lol) of body fat and converted it to muscles. My overall weight thus remained constant. Again this is not much but I am happy that I did not have to make any major changes to my diet.
I feel stronger now 💪.

👉 Apart from these, there were some indirect effects.

I don’t feel sleepy all the time.
After the workout, I expected myself to be tired and exhausted. But to my surprise, after the first week, after workout hours were my most productive hours! My concentration was on a whole another level.
I was eating healthy even though I did not plan for it. When I calculated how much I have to run for that KitKat I ate yesterday, I immediately stopped eating stuff I knew I wouldn’t be able to burn. I am lazy and would try to avoid extra workout at all costs.
I am more confident now.
I enjoy the workout and no longer see it as a thing I have to do every day. It has become a part of my life and it feels great.
I managed to get a 4 star rating on codechef. (My highest yet!)

My advice to someone who just started?

Just keep going. No matter what, just keep pushing. You might miss 2 days in a row or 3 days in a row. But make sure you workout as soon as you get a chance. Even if you don’t have a lot of time, just go to the gym and do it for 20 mins. Initially what’s important is that you are consistent and are making efforts to push yourself.

Don’t bother about the diet and doing all the complex exercises. Start with the basics, make it a habit and then improve over time. If you are not making progress then don’t lose hope.

I still feel like if I would have trained with a professional trainer at a gym and followed a strict diet I would have seen better results. But then I know its not practical for me to follow the diet or the workout for more than a month (I gave it a try once, didn’t end well).

Just do what works for you. Can’t do it in the evenings? Wake up half an hour earlier and hit the gym. Don’t have time for it in the morning and evening? Go at midnight. Can’t find a gym nearby? Go for a run. Just start.

Hope this was helpful. I don’t want to bore you with my body measurements 😅.

Here’s a photo of me after the challenge. I got up from the chair and took this photo for this article so please ignore the hair and my messy room 😝.

Let's create ReactJS from scratch- Part 2

Anand Amrit Raj — Wed, 23 Jan 2019 00:00:00 +0000

Recap

In this series of posts, we are creating major react functionalities from scratch. So far we have covered the render function. You can read more about it here: Let’s create ReactJS from scratch- Part 1.

Introducing JSX

Okay, so we got till this point where we have created our own render function which takes MyReact elements as arguments and renders them to DOM. While this is cool to render a link inside a div, if you have to render anything more than that, say navigation, it becomes annoying to write our HTML tags as javascript objects.

Let’s see an example,

const myElement = {
  type: 'div',
  props: {
    children: [
      {
        type: 'ul',
        props: {
          children: [
            {
              type: 'li',
              props: {
                children: [
                  {
                    type: 'TEXT_ELEMENT',
                    props: {
                      nodeValue: 'I want to use JSX',
                    },
                  },
                ],
              },
            },
            {
              type: 'li',
              props: {
                children: [
                  {
                    type: 'TEXT_ELEMENT',
                    props: {
                      nodeValue: "Its only second li and I'm annoyed!",
                    },
                  },
                ],
              },
            },
          ],
        },
      },
    ],
  },
}

The above lines will render this

<div>
  <ul>
    <li>I want to use JSX</li>
    <li>Its only second li and I'm annoyed!</li>
  </ul>
</div>

Introducing JSX! JSX is just syntactic sugar. Using a JSX transpiler you can convert your HTML looking syntax into elements which can be understood by javascript and rendered correctly by the browser.

As a JSX transpiler, you can use Babel. It has a great open-source community and easy to use CLI tool.

If you are working with React you are most probably using it. But JSX is not actually tied to react it can be used without react and is not very tough to understand and use.

If you want to learn more about JSX check out this article, Draft: JSX Specification and also JSX In Depth react documentation.

So in case of the above example, you can write something like below,

/** @jsx createElement */
const myElement = (
  <div>
    <ul>
      <li>I want to use JSX</li>
      <li>Its only second li and I'm annoyed!</li>
    </ul>
  </div>
)

If you are familiar with javascript you would be guessing if the above is a valid javascript: its not.

The first line is a comment which babel understands, the name createElement is the name of the function which babel is going to call for each tag it encounters. It is known as pragma in babel configuration.

Babel will transpile the JSX code into a bunch of function calls like this

const someJsx = (
  createElement(
  "div",
  { "class": "nav" },
  createElement(
    "ul",
    { "class": "nav-links" },
    createElement(
      "li",
      null,
      "Home"
    ),
    createElement(
      "li",
      null,
      "Profile"
    ),
    createElement(
      "li",
      null,
      "Logout"
    )
  )
);
)

So all we need to do now is implement createElement function. The first argument of the function is type of the element. The second element is props and the following elements are children. If you remember our implementation of the render function from here, you will remember that the render function takes the element in the form,

const myElement = {
  type: 'div',
  props: {
    ..
    children: []
  }
}

So what we need to do in createElement function is to move the third argument which contains the children under the props and return the resulting object which can be consumed by our MyReact.render function.

If I am not making sense there, let’s create the createElement function and let the code do the talking. Its similar to the React.createElement function. Check out this page to learn more.

The createElement function

I would just put it out there and explain the code.

function createElement(type, config, ...args) {
  const props = Object.assign({}, config)
  const hasChildren = args.length > 0

  props.children = hasChildren ? [].concat(...args) : []

  return { type, props }
}

The three arguments are provided to the function by the transpiler (which is babel in our case). The third argument will contain all of the children of the current node. We are simply assigning the props to the props object, children to props.children object. Then return the object, this is something our MyReact.render function can work with!

Well, that was pretty simple. But our render function MyReact.render expects the text elements to have a type of TEXT_ELEMENT and also a nodeValue prop. So let’s do that!

function createElement(type, config, ...args) {
  const props = Object.assign({}, config)
  const hasChildren = args.length > 0

  const allChildren = hasChildren ? [].concat(...args) : []
  // Filter all the children which are null,
  // we don't need to render them
  props.children = allChildren
    .filter(child => child !== null && child !== false)
    .map(child => (child instanceof Object ? child : createTextElement(child)))
  // For text nodes, child above is a string
  return { type, props }
}

// This function handles the creation of text nodes
function createTextElement(value) {
  return {
    type: 'TEXT_ELEMENT',
    props: {
      nodeValue: value,
    },
  }
}

Now our createElement function is complete and ready to use. A couple of things before you try to use this to create a web app. Since we are using JSX which is not a part of standard javascript, we need to transpile this code before we can use this. I am going to use Babel for transpiling the code into something which the browser can understand.

You can check out this REPL to see how babel converts the code into a bunch of createElement calls.

If you just want to see how this is used in a real-world application, I made a codepen demo to show the usage.

Making it work in the browser

The above codepen demo works since we are using babel as a preprocessor and it includes a bunch of plugins with it. If you want to make it work in your local machine you would have to include a couple of packages to transpile your JSX into createElement function calls.

We’ll start of by adding a bunch of npm packages,

npm i --save-dev @babel/cli @babel/core @babel/plugin-syntax-jsx @babel/plugin-transform-react-jsx @babel/preset-env

@babel/core is the core babel package
@babel/cli allows us to use babel as a CLI tool
@babel/plugin-syntax-jsx helps babel to understand the JSX syntax as babel does not support it out of the box
@babel/plugin-transform-react-jsx this is the main package which transpiles JSX into function calls. By default, this uses React.createElement as the pragma function. You can read more about it here.
@babel/preset-env is responsible for allowing us to use the latest JavaScript without needing to micromanage syntax transforms (and optionally, browser polyfills) that are needed by the browser. This is just a collection of plugins.

Now one final thing we need to do is add a .babelrc file which is just to tell babel which presets and plugins (which we installed above) to use. Let’s define one.

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-syntax-jsx", "@babel/plugin-transform-react-jsx"]
}

We are almost done, now all we need to do is run the babel-cli to compile our file containing JSX code into a which the browser can understand.

babel ./src/main.js -o ./dist/bundle.js

-o flag tells babel to output the file as a specified name in a folder.

Code & Demo

The entire code for this is available on Github.

You can check out this REPL to see how babel converts the code into a bunch of MyReact.createElement calls.

I also made a codepen demo to demonstrate how you would use this in a real-world application.

Endnotes

This is the second post in the series where we are creating a clone of ReactJs! As always, the entire code for this is available on Github.

If you see any errors then please let me know! I am also human and don’t know everything. Thanks for reading! :)

I would love to know what features would you want me to implement next. Though I have only started, I plan to make this as close to original React as possible. It may never be production ready but I will learn a lot.

See you next time!

Let's create ReactJS from scratch- Part 1

Anand Amrit Raj — Fri, 18 Jan 2019 00:00:00 +0000

Being a React fanboy, I have always wondered how it is so performant even in heavy data-driven applications. Also, I have always wanted to contribute to ReactJS on GitHub but somehow, I feel that the repository can be overwhelming for someone who has never contributed to open-source apart from creating issues.

Right now I am brushing up my Data Structures and Algorithmic skills and was thinking where to apply what I have learnt. Implementing your own linked lists and hashmaps is cool but what next? This is when I thought to create my own version of ReactJS.

This would help me with a couple of things:

Understand how React works internally.
Apply my little knowledge of data structures to re-create something which I currently use as a black box.
Make me a better Javascript developer.
Helping me in contributing to the original ReactJS library.

Let’s also list out the features which I am planning to add to MyReact

Render DOM elements
Possibly explore JSX and use it to render DOM elements.
Custom Class components and state
And the MVP virtual DOM!
Also, I want to understand the Fiber Architecture and re-create it

So let’s get started, first of all, we need a name. I am really not good at naming things. So I named it MyReact. Pretty innovative eh?

Okay now, let’s really start. So our aim is to create a basic version of ReactJs first without worrying about performance, debuggability, portability etc. Although, we are going to improve it over time and soon replace the original ReactJS with MyReact. *laughs like a villain*

You can find more information about the implementation details or enjoy this talk by Paul O’Shannessy.

Let’s start by creating the render() function which is responsible for creating the DOM elements. You don’t need to be a pro with javascript to understand the document.createElement() function but for the sake of this tutorial, let’s revisit the basic DOM API available in the browser

// Get an element by its id,
var parent = document.getElementByID('app-root')

// Now create a new element of a given tag
var child = document.createElement('h1')

// Add properties to the DOM element
child.classList = ['bold', 'fancy-color']
child.innerHTML = 'Hello World!'

// Now append that element to the parent
parent.appendChild(child)

So far we haven’t defined anything new, all the operations above are supported in all browsers without any libraries.

As you can see in order to render tags on a webpage we are going to use the document.createElement(). That will take care of rendering tags on a page. Also, we can modify the properties and make it look like whatever we want using classes and custom inline CSS.

Now that we have a way to render tags on the webpage, let’s go a step back and define what an element may look like in MyReact.

// If we want to represent a DOM element as an object,
// following would be its properties
var element = {
  type: 'div',
  props: {
    // properties of the element
    id: 'body',
    // children can again contain elements,
    // which are going to have the same structure
    children: [
      { type: 'p', props: { nodeValue: 'If you want to know more ' } },
      { type: 'a', props: { href: '/home', nodeValue: 'Click here' } },
    ],
  },
}

Nothing fancy here, just a javascript object which represents the following structure in MyReact. Let’s call them MyReact Elements from now on.

<div id="body">
  <p>If you want to know more</p>
  <a href="/home">Click here</a>
</div>

MyReact elements are not really different from React Elements. You usually don’t use javascript objects to define and create elements in React and probably use JSX. We are going to do the same in future posts. For now, we are going to use the above javascript object to define and render MyReact elements as DOM elements.

The Render function

We have MyReact elements, let’s implement the MyReact.render function which is equivalent to ReactDOM.render. This function will create the DOM element defined by the javascript object and append it’s to its parent.

function render(element, parent) {
  // Get the props and type from element object
  const { type, props } = element

  // Check if there are any childrens of the given element
  const childElements = props.children || []

  // render those childrens recursively first
  childElements.forEach(el => render(el, dom))

  // finally append the element to the parent element
  parent.appendChild(dom)
}

This is the most basic version of the render function you’ll ever see. All this is doing is creating a DOM element and recursively adding all its children to the parent. This is still missing all the attributes and the eventListeners.

Let’s iterate over the props keys using Object.keys to get eventListeners & attributes and set them properly.

function render(element, parent) {
  // Get the props and type from element object
  const { type, props } = element

  // Filter for eventListeners in the props
  const isListener = name => name.startsWith('on')

  // Add eventListeners to the dom element
  Object.keys(props)
    .filter(isListener)
    .forEach(name => {
      const eventType = name.toLowerCase().substring(2)
      dom.addEventListener(eventType, props[name])
    })

  const isAttribute = name => !isAttribute && name !== 'children'

  Object.keys(props)
    .filter(isAttribute)
    .forEach(name => {
      dom[name] = props[name]
    })

  // Check if there are any childrens of the given element
  const childElements = props.children || []

  // render those childrens recursively first
  childElements.forEach(el => render(el, dom))

  // finally append the element to the parent element
  parent.appendChild(dom)
}

Render DOM Text Nodes

Now, this looks like a pretty complete render function. Except for one thing. The pure Text Nodes. Let’s define how a text element will look like as a javascript object.

const textElement = {
  type: span,
  props: {
    children: [
      {
        type: 'TEXT_NODE',
        props: { nodeValue: 'Hello World!' },
      },
    ],
  },
}

The above definition would define something like this when passed through our render function

<span> Hello World! </span>

Notice how we defined a new type TEXT_ELEMENT which we will use in our render function. Let’s see how we use that. Instead of using createElement we are going to use createTextNode function. The nodeValue property will be set in the same way as before and we don’t need to pass it explicitly in the createTextNode function.

function render(element, parent) {
  // Get the props and type from element object
  const { type, props } = element

  // Check if it is a text element
  const isTextElement = type === 'TEXT_ELEMENT'

  // Create a new dom element or TextNode based on the type
  const dom = !isTextElement
    ? document.createElement(type)
    : document.createTextNode("")

  // Filter for eventListeners in the props
  const isListener = name => name.startsWith('on')

  // Add eventListeners to the dom element
  Object.keys(props)
    .filter(isListener)
    .forEach(name => {
      const eventType = name.toLowerCase().substring(2)
      dom.addEventListener(eventType, props[name])
    })

  const isAttribute = name => !isAttribute && name !== 'children'

  Object.keys(props)
    .filter(isAttribute)
    .forEach(name => {
      dom[name] = props[name]
    })

  // Check if there are any childrens of the given element
  const childElements = props.children || []

  // render those childrens recursively first
  childElements.forEach(el => render(el, dom))

  // finally append the element to the parent element
  parent.appendChild(dom)
}

The entire code for this is available on Github.

I made a codepen demo to demonstrate how you would use this in a real world application.

Endnotes

This was really fun! The entire code for this is available on Github. This will be a series of posts where I will incrementally add features and post about my findings.

I would love to know what features would you want me to implement next. Though I have only started, I plan to make this as close to original React as possible. It might never be production ready but I will learn a lot.

See you next time!

Update here's the part 2!

How to create a mobile-first super-fast Gatsby.js blog

Anand Amrit Raj — Wed, 26 Dec 2018 16:32:21 +0000

Recently I created this amazing, super fast, mobile-first, super-responsive website for myself and I was amazed by its performance. It took me some time to get it right but the process was not that tough and once I completed it I thought I would document it so others can benefit.

My Blog: https://anamritraj.tech

What did I use?

The whole blog is a server-side rendered static website powered by Gatsby.js. If you are not living under a rock for the past few months you must have heard about it. Gatsby.js is an amazing piece of technology which lets you create super-fast websites with minimal code.

It uses the power of React.js, web pack and modern JavaScript and CSS to build powerful web apps. As the backend you can use anything, for my case I will be using simple MarkDown files. Gatsby.js will automatically (read magically) convert you markdown files into HTML and load them as blog posts. And there are tons of plugins available to build additional features to your website. For instance, there are plugins which will convert your website into a Progressive Web App without you having to do anything.

Gatsby.js will generate static assets which can be served through any server which can handle HTML, CSS and JavaScript. This means that you can use Github Pages to host your website for free, forever. There are other free ways to host a Gatsby.js website but I will cover what I am using for this awesome website.

Why did I choose Gatsby.js?

It's simple, easy to deploy and hot right now! Apart from that it is super fast, SEO friendly, responsive and provides a PWA out of the box without having to do much.

You can see pretty high numbers in the Google Lighthouse Audit tool. Those are some pretty high scores and great for SEO and Mobile.

How can I build my own?

So you want to build your own blog like this? You are at the right place! Let's cover that!

I will assume you have the following things already, if not please search the internet on how to get them.

Git
A GitHub Account
A text-editor (use VS code)
A Travis-CI account. (This is optional)

Step 1: Clone

Clone this repository

git clone https://github.com/anamritraj/anamritraj.tech.git

Step 2: Make changes

Now that you have cloned this repository, move into that folder using you cmd/terminal and run

yarn
# or if you are an npm user
npm install

This will install all the project dependencies in your machine. Now, let's test this..

yarn dev 
# or 
npm run dev

This will start the development server on http://localhost:8000.

Go to /src/pages/ and create a new file. Keep an eye on your browser. As soon as you hit save, the post will be reflected in the browser. This is Hot-reloading and one of the features I love the most. This is by far my favourite feature of Gatsby.js.

Now before deploying a website with my name and photo on it (which I would love, but you probably don't want to) let's make some changes.

I will list the exact places where you may want to make the changes.

README.md
package.json
script/deploy-to-gh-pages.sh
gatsby-config.js
src/components/Bio.js
src/templates/blog-post.js
static/CNAME

Note: If you are not planning to use a custom domain delete that static/CNAME file. Otherwise, add your domain there.

There's one particular change which I would like to talk about. If you check the /gatsby-config.js file. There is a parameter called pathPrefix. If you are not planning to use a custom domain then you need to set it to /REPO_NAME. This will tell Gatsby.js to add the necessary path to links while navigating around your website.

These are all the files where you will have make changes to customize the names and some variables. I'll leave the exact changes for you to explore.

Step 3: Deploy!

Now that you have made changes to your site. Let's deploy it for the world to see. We are going to use Github Pages for this.

If you don't have a Github account then its probably a good idea to create one now.

Now let's create a new repository on Github.
Goto https://github.com/YOUR_USERNAME?tab=repositories

Click that big green button which says New. Give your repo a name and keep it Public. Don't select anything else and click Create Repository.

From your terminal, run

# Rename any old origins if you have any
git remote rename origin destination
# Point to the newly created repository
git remote add origin https://github.com/YOUR_USERNAME/REPO_NAME.git
git push -u origin master
# Now the usual stuff
git add .
git commit -m "Initial commit"
git push -u origin master

Reload the page on GitHub and you should see the code there.

Now, there are 2 ways to deploy code and both use GitHub Pages to serve the static files.

Use your terminal to deploy to gh-pages branch
Use Travis-CI to deploy your static assets

WAY 1: The easy way

If you look at the package.json file there is a npm script git-deploy. This will build the project and push everything in the /public directory to the gh-pages remote branch.

From there you can go to repository settings here https://github.com/YOUR_USERNAME/REPO_NAME/settings and enable GitHub pages to use gh-pages branch.

Congratulations! You have successfully deployed your code and your website is live at

https://YOUR_USERNAME.github.io/REPO_NAME

WAY 2: The cool way, and less annoying, and less manual

Let's setup a Travis-CI account for this repository. Goto https://travis-ci.com and SignUp / Sign In. Go ahead and setup your Github Repository with Travis-CI.

Now that you have this setup, go to Travis dashboard, choose your repository, Goto settings for that repository and then go to the section of Environment Variables

Let's add a couple of environment variables which are used in our /script/deploy-to-gh-pages.sh script.
The first one is the path of your repo

repo_path = YOUR_GITHUB_USERNAME/REPO_NAME
# In my case it is anamritraj/anamritraj.tech

The second one is a GitHub API key. Goto this page and click generate new token. Select the first checkbox which says repo. Give your token a name. Now make sure you save this somewhere safe, treat it like your password and don't share it with anyone.

Now, back to the Travis settings page, add another environment variable.

github_token = YOUR_TOKEN

Also, make sure that the Display value in build log is off. This will prevent this token to show up in build logs.

Now all you have to do is make changes and push the code to master. Travis will automatically build it for you and deploy the code to gh_pages branch.

The script for this is written in /script/deploy-to-gh-pages.sh. You can tweak the settings if you want to.

Step 4: Iterate!

This was in no way a complete tutorial and only scratches the top of what you can achieve with Gatsby.js. If you know basic React.js then you can make it do whatever you want.

I feel like writing more stuff on this blog just because it feels so snappy while reading it. I probably will write more.

Till then Merry Christmas and Happy New year!