Introduction — why I started weight training

In 2019, I was hit with the sudden news that my mother became ill. I was shocked and confused about how she got sick as none of my family members has the illness. I also noticed that in terms of my own health, I was not sleeping well and lacking the energy to go through my day.

I started weight training in May 2019 with the goal to be stronger and healthier. Like most women, I was afraid of looking too bulky and skeptical about the whole process, but with guidance and trust, I slowly ease into the bulking phase…

Getting started

This is a simple authentication tutorial for building a Twitter Authentication web application using Passport API. It’s a side project that I worked on for education purposes.

I broke down this tutorial into two parts. The first part focuses on building authentication routes in the backend. The second part focuses on building UI components in the front-end using React.

Tech Stack

• Server Side: Node.js, Express.js, Passport Twitter API, MongoDB,
• Client: ReactJS

What are we going to build?

• User clicks on login button which redirects to Twitter OAuth authentication page.
• Once the OAuth has been successfully authenticated to Twitter, the user will be redirected back to the web application…

1) What is a render prop?

“render prop” is a design pattern. It simply means that the component has a render prop that takes in a function as a value, and the component uses that function to render whatever the function provides.

Chances are you already have used render props without knowing it. Considering React-router library, <Route /> holds the behavior of navigating to different pages. It renders the component when the path matches.

<Route path='/page' component={Page} />const extraProps = { color: 'red' }<Route path='/page' render={(props) => (
  <Page {...props} data={extraProps}/>
)}/>

As you can see in this example, <Route /> takes in a…

It has been a year now since I moved to San Francisco after accepting a job offer in the US. It has been an exciting journey so far. However, I remember it was a nerve-racking experience to wait for the TN visa approval and relocating to the US. I will describe below my progress of relocating to the US so to provide a clearer picture for those who are planning to move to the US for work. Please note that I’m not a lawyer or an accountant. It would be advisable to speak to them personally.

Before moving to the US

1. Getting your TN Visa ( 3–4 weeks )

TN visa is a…

How braces { } are used

Curly braces { } are special syntax in JSX. It is used to evaluate a JavaScript expression during compilation. A JavaScript expression can be a variable, function, an object, or any code that resolves into a value.

Let’s take an example.

• Evaluating a JavaScript variable

const yellowStyle={color: 'yellow'} <Star style={yellowStyle} />

which is same as

<Star style={{color: 'yellow'}} />

• Evaluating a function or an event handler

class PopUp extends React.Component {  // es7 way of setting default state
  state = {
    visible: true;
  }  render() {
    return <Modal onClose={this._handleClose}/>;
  }  _handleClose = () => {
    this.setState({ visible: false });
  }…

I have worked in Vancouver, Canada as a Software Engineer for about a year. Prior to that I was a Salesforce Consultant. In December 2016, I started looking for new opportunities in United States specifically in the Silicon Valley. It took me some period of intense preparation to land a Software Engineer job at a well known public traded company that I’m happy with. It has now been 6 months since I move to San Francisco, and I love working here. Several friends asked me how I applied jobs offshore from Canada. In this blog post, I would like to…

At work, we use many testing tools to test our React projects. Some of them can be confusing for beginners to understand what exactly they are used for. Below I clarified the different tools and what they are primarily used for.

chai

• This is an expectation / assertion library
• expect/should/assert are function given by chai

Mocha / Jasmine

• This is a test runner, used to run your tests and log your test results

describe/it/beforeEach

• Functions by mocha/jasmine and used to organized your test
• describe → Describe a function
• it → Specify what certain conditions are met. Lives inside the describe
• beforeEach → Setup tests before…

.bind(), .call(), and .apply() are some important JavaScript concepts.

What are they?

bind(), call(), and apply() are used to change the reference of ‘this’ for a given function.

Why do we use it?

It’s good to borrow a function and change the reference to a new object.

Definition

func.call(): calls the given function and allows you to pass in an object with arguments

func.apply(): same as call except the arguments you pass must be an array of arguments

func.bind(): returns a new function and allows you to pass in an object with arguments in an array or any number of arguments

Example

First, let’s set up bubble tea objects and…