(Google, Amazon, Airbnb, Dropbox, Uber, Square, Twitter, Github, LinkedIn, Slack, Lyft, Apple, Facebook) Image Src

Introduction

I have been working as a Front-End Software Engineer at Twitter for three years. Prior to working in San Francisco, I had worked in startup companies in Vancouver, Canada, and prepared myself for interviews with big tech companies in Silicon Valley.

Interviews are difficult and it’s even more challenging when you are interviewing from another country. Being a candidate as well as an interviewer, I would like to highlight important tips on how to prepare for a front-end interview to maximize your time. I have separate blog posts on Relocating to the US from Canada on a TN Visa and…


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

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…


— what, how, why, and when we should use it?

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

Timeline before moving to the US

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

TN visa is a…


In the beginning of your career when learning React and ES6 JavaScript syntax, it can be confusing when to use curly braces { } and when to use parenthesis ( ).

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…


I spent sometime understanding the difference between absolute positioning and relative positioning. It was a confusing topic to me and I decide to illustrate their differences with pictures.

Before going further, we should know the default behaviour of position when we don’t specify any position property.

position: static

By default, position an element based on its current position in the flow. The top, right, bottom, left and z-index properties do not apply. — source MDN

position: relative

Position an element based on its current position without changing layout.

position: absolute

Position an element based on its closest positioned ancestor position.

Take an example

To start with, create a parent…

Leanne Zhang

Software Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store