Forem: Ankit Tiwari

MLH Fellowship: A Life-Changing Experience

Ankit Tiwari — Mon, 24 Aug 2020 14:53:28 +0000

What is MLH Fellowship

According to MLH:

The MLH Fellowship is a 12-week internship alternative for aspiring software engineers. Our programs pair fun, educational curriculum with practical experience that you can put on your resume right away. It's collaborative, remote, and happens under the guidance of expert mentors.

The MLH Fellowship in my opinion is an unmatched experience. I like to think of it as good parts of tech internships, open-source, and mentorship. It is highly focused on the learning of fellows and the contributions to the project is only a bi-product of it.

Why I got In

I can’t be grateful enough for the open-source community. More than 50% of the tools I use daily are free and open source. Every framework, every library I use to build something was given to me just for free.

I have always wanted to contribute to open source since I joined this community. The number of things we get for free is unimaginable in any other industry. I also wanted to give back to this community which has given me so much.

The MLH Fellowship was a perfect opportunity to take my open source contributions to the next level under the guidance of a professional mentor.

First week in the fellowship

My Pod Reactive Sea-son's Logo (Credit: Kunal Kushwaha)

In the first week of the fellowship, I met some of the best people in my life (my pod mates and my mentor). I was part of the most OP Pod Reactive Sea-Son. It is a great

In the first week of the fellowship, I was placed in a pod with 10 awesome people including my mentor Jani Eväkallio. We named our pod Reactive Sea-Son which is the most OP Pod in the fellowship.

A screenshot of the MLH Fellowship kickoff call

The Orientation Hacktathon

In the first week, MLH organized an orientation hackathon where I hacked on a project called executely along with my pod mates Saurav and Yash. Our project won the first prize across all the pods. The best part of it was everyone getting a mug with our team logo. This mug will be a reminder of the great experiences we shared together.

Hackathon prize

My Project

During the fellowship, I along with my team contributed to react-native. We redesigned and revamped the RNTester app which is used in CI to test any changes to react-native. It is also a showcase app for all the features react-native provides. The RNTester team was probably the largest team in the fellowship working on a single project and we learned about so many best practices while working in a team.

react-native was new for me and working with RNTester had its own set of challenges but our project maintainer Ricky and pod mentorJani Eväkallio provided us an enormous amount of help and support to make this real.

My Learnings

When I first visited the official MLH website it said:

Spend 12 weeks leveling up your software engineering skills by contributing to the Open Source software the world depends on.

And initially, I thought it will all be about leveling up my software engineering skills and I found myself guilty of thinking in terms of issues, code, and PRs.

But later I realized that the skills we can learn here go way more beyond than “hard engineering skills”. Most of the things I learned in this fellowship were from the retrospectives, round-table discussions and show and tells. MLH also organized a large number of talks and educational events which were really great.

I also learned to play Skribble during the fellowship. Playing Skribble with my pod mates was one of the best moments of this fellowship.

A screenshot of a Skribble session with our Mentor Jani Eväkallio

My Mentor

Jani Eväkallio was my pod's mentor and he is the best mentor one could ever ask for. He was always there for everyone. He offered us all kinds of support we ever needed both inside and outside the fellowship. The fellowship experience would never be the same without him.

There is one story I like to share with anyone who asks - "what kind of support you can expect from mentors at MLH?".

Once, Jani had his calendar full (with meetings) for the day and he had exactly 15 mins of break time. I asked him if he was free and if we could get on a call for 15 minutes regarding my project and without any hesitation he offered the only break time he had. Thank you Jani ❤️

Final Words

This Fellowship is an unforgettable experience for me. The support, respect, and love I got from my pod mates and mentor is something you don't get often. Thank you to all of my pod mates for making it such a memorable experience ❤️

Thank you Team MLH for all of the hard work you did. It was well planned and perfectly executed.

If you are interested, the MLH Fellowship is back again. Read more about it here. Feel free to reach out to me on twitter for any questions regarding the fellowship. We also did a live-stream sharing our experiences. You can check that out here.

Thank you for reading it.

Are let and const hoisted?

Ankit Tiwari — Wed, 22 Jul 2020 07:35:28 +0000

In this post, I will be talking about hoisting, temporal dead zone, and how hoisting works with let and const.

What is hoisting?

The JavaScript engine before parses the code before executing and during the parsing phase it shifts all the variable declaration to the top of the scope. This behavior of the JS engine is called hoisting.

Variable Hoisting

Consider the following code snippet -

console.log(greeting); // undefined

var greeting = "Hello";

We can see that the greeting variable can be accessed before its declared. This happens because the JS engine modifies our code snippet into something like this -

var greeting;
console.log(greeting); // undefined

var greeting = "Hello";

Function Hoisting

The formal function declarations in JavaScript are also hoisted to the top of the scope. For example:

greeting(); // Hello

function greeting() {
  console.log("Hello");
}

Note: The important distinction between variable hoisting and function hoisting is that a var variable is hoisted and then auto-initialized to undefined whereas a function declaration is hoisted and initialized to its function value.

Function declaration vs Function expression

Function hoisting only applies to formal function declarations and not to function expression assignments. Consider:

greeting(); // TypeError: greeting is not a function

console.log(greeting); // undefined

var greeting = function greeting() {
  console.log("Hello!");
};

Above, we can see that the greeting variable was hoisted but it was not initialized with the function reference. The engine throws us a TypeError: greeting is not a function and not ReferenceError: greeting is not defined. The function expression assignments behave very much like variable hoisting.

What about let and const?

So far, I have only talked about var and formal function declarations. What about the let and const. Let's see the following code snippet -

console.log(greeting); // cannot access 'greeting' before initialization

let greeting = "Hello";

We get a new kind of error, its not a ReferenceError, the engine knows about greeting but doesn't allow us to use it before its initialized. The JS engine doesn't allow us to access the variables declared with let and const before they are declared. This is called Temporal Dead Zone.

Let's consider this snippet -

let greeting;

console.log(greeting); // undefined

greeting = "Hello";

Above, we can see that we are able to access the greeting variable as soon as it was declared.

So, let and const are not hoisted?

After seeing the above two code snippets, I was pretty convinced too that let and const are not hoisted. But they actually are. We can prove this with the help of a few more examples -

console.log(typeof iDontExist); // undefined
console.log(typeof greeting); // cannot access 'greeting' before initialization

let greeting = "hello";

If the greeting variable was not hoisted, we would expect typeof greeting to be undefined similar to typeof iDontExist. This proves that the JS engine knows about our greeting variable but still doesn't allow us to access it just yet due to Temporal Dead Zone.

Let's see another example -

let x = 'outer value';
console.log(x); // outer value

 {
  // start TDZ for x
  console.log(x); // cannot access 'x' before initialization
  let x = 'inner value'; // declaration ends TDZ for x
 }

Accessing the variable x in the inner scope still causes the TDZ error. If the let x = 'inner value'; was not hoisted then on line 6, it would have logged outer value.

Conclusion

The var declarations are hoisted and initialized with undefined.
The formal function declarations are hoisted and initialized with their function reference.
let and const variables are hoisted too but they cannot be accessed before their declarations. This is called Temporal Dead Zone.

Getting Started With ES6 Modules

Ankit Tiwari — Tue, 23 Oct 2018 18:51:36 +0000

A Module is simply a javascript file with a bunch of variables or functions which can be imported and used in other javascript files. With ES6, working with modules has become fun. Let me tell you how.

Before ES6 Modules, we used to have script tags in our html file to import and use a library. Let's see the example below:

<!-- index.html -->
<html>
  <head>
    <title>Before ES6 Modules</title>
  <head>
  <body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
  <script src="./app.js"></script>
  </body>
</html>

// app.js

const numbers = [1, 2, 2, 3, 4, 3];

const uniqNumbers = _.uniq(numbers); // _.uniq is coming from lodash

console.log(uniqNumbers); // [1, 2, 3, 4]

Above, we are including lodash in the index.html file. And we are using uniq function provided by lodash to find the unique numbers. Here, the _ was not defined explicitly and someone looking at only the app.js file would have no idea from where the _ is coming from. So, is there a better way to do it? Well, yeah!

NPM - Node Package Manager

NPM is where all the javascript libraries are hosted. If you ever want to use one, you would have to install it from here. You must have NodeJS installed in your system to use it. NPM comes with NodeJS.

Let's create a directory called es6Modules and cd into it. Create an index.html and an app.js file inside the directory.
Now, run the command npm init in your terminal inside this directory. It will ask a few questions about your project. After answering all the project related questions. It will generate a package.json file which contains the details about your project and also the libraries that you have installed from npm.

The directory structure would look something like below:

├── app.js
├── index.html
└── package.json

To install a package from NPM, you just have to type the command npm install <package-name> in your terminal.
For installing lodash, it would be npm install lodash. After running this command, you will see a folder called node_modules appear in your directory. It will contain all the libraries or packages that you have installed. Also, in your package.json file, lodash will be added to the dependencies section.

Now, that lodash is installed. Let's use it.

// app.js
import _ from 'lodash'; // this is how you import an es6 module

const numbers = [1, 2, 2, 3, 4, 3];

const uniqNumbers = _.uniq(numbers);

console.log(uniqNumbers);

Now, let's reference app.js file in the index.html to run it.

<!-- index.html -->
<html>
  <head>
    <title>ES6 Modules</title>
  <head>
  <body>
  <script src="./app.js"></script>
  </body>
</html>

Now, open the index.html file in the browser and check your console. Instead of seeing the unique Numbers, you are seeing an error something like below:

ES6 Modules are not supported in browsers

Well, it turns out that browsers don't support ES6 Modules just yet. But that doesn't mean we can't use it. We can use package bundlers like webpack or parcel to compile our ES6 Modules syntax to something that our browsers understand.

For this tutorial, I am going to use webpack. To install webpack execute the command given below:

npm install webpack webpack-cli --save-dev

Now, create a webpack.config.js file in your root directory to configure webpack.

// webpack.config.js

const path = require('path');

module.exports = {
  entry: './app.js', // entry point of our project
  output: {
    filename: 'bundle.js', // The name of the output file
    path: path.resolve(__dirname, 'dist') // The folder where output file will be generated
  }
};

Now, we need to add a script to our package.json file to run webpack and bundle our code. Open up package.json file and a script as given below:

// package.json

"scripts": {
  "build": "webpack --config webpack.config.js"
}

Here, --config is used to specify our configuration file webpack.config.js.

Now, run the build script by running npm run build in your terminal. After running this script, you will see that webpack has generated a file called bundle.js inside dist folder.
This file contains the code that we have written in app.js but in way that our browsers will understand. So, we now have to reference this file in index.html

<!-- index.html -->
<html>
  <head>
    <title>ES6 Modules</title>
  <head>
  <body>
    <script src="./dist/bundle.js"></script>
  </body>
</html>

If you open the index.html file in your browser, you will see the unique Numbers as below:

Bundled code by webpack works fine in the browser

This is all for this post. In the next post, I will talk about writing and using our own ES6 Modules. Until then read the documentation of webpack to learn more about all the awesome things it does.

Project Ideas for a Hackathon (Going for the first time)

Ankit Tiwari — Mon, 02 Apr 2018 03:07:04 +0000

I am a CSE sophomore in India. There is a hackathon being organized by AngelHack next month in which I want to participate.

They are asking us to build something that solves a social or environmental problem and positively impacts our local community.

I will be going to the hackathon with 2 of my friends. I have experience in MERN stack (1 year), one guy knows ML (doesn't have a lot of experience) and the other has done Frontend work.

We are ready to learn new things (that's the goal) if our project requires us to. As it is our first ever hackathon so we are not sure what to build.

It would be a great help if you guys can give us some suggestions. Thanks.