Forem: Trent Yang

Git ABC - Start remembering and stop googling

Trent Yang — Mon, 27 May 2019 21:39:54 +0000

I was once a Git googler (I mean I google Git a lot :P) until one day I sit down and decide to spend a bit of time remembering the most common commands. My approach was to develop an easy-to-understand framework and use systematic aliases to replace Git commands. If that sounds interesting, I present you the Git ABC.

Git ABC

There are three stages a file change (for example adding a new line) need to go through in Git. I use A, B and C to represent them.

Stage A

Unstaged changes and untracked files are in stage A. git status will show them in red.

Stage B

Once we git add -A, changes will be moved to stage B. git status will show them in green.
In Git lingo, these changes are now 'staged'.

Stage C

After we git commit -m, changes will be moved to stage C (committed stage).

Alias

Now comes the fun part.

Move forward

Git users should already be familiar with git add and git commit so I choose the following aliases to move changes forward

alias ga='git add -A' (Git Add) move changes from stage A to B
alias gc='git commit -m' (Git Commit) move changes from stage B to C

Move backward

I use go to undo changes. We can think of it as 'go away' :)

alias go='git checkout' undo changes from A
alias gou='git clean -id' (GO Untracked) remove un-tracked files from A
alias gob='git reset HEAD' (GO from B) move changes from B to A
alias goc='git reset --soft HEAD~1' (GO from C) move changes from C to B
alias gocc='git reset --hard HEAD~1' (GO from C Confirm) remove the whole commit from C

Check differences between stages

I use gd (Git Diff) to check the difference.

alias gd='git diff' Difference between A and B
alias gdbc='git diff --cached' Difference between B and C
alias gdac='git diff HEAD' Difference between A and C
alias gdc='git diff HEAD^ HEAD' All changes from the last Commit

Here I listed all the aliases bellow so that you can copy and paste into your shell config files.

# move forward
alias ga='git add -A'
alias gc='git commit -m'

# move backward / undo
alias go='git checkout'
alias gou='git clean -id' # u means Untracked files
alias gob='git reset HEAD'
alias goc='git reset --soft HEAD~1'
alias gocc='git reset --hard HEAD~1' # c means Confirm

# check difference
alias gd='git diff'
alias gdbc='git diff --cached'
alias gdac='git diff HEAD'
alias gdc='git diff HEAD^ HEAD'

Bonus aliases

Some of my fun aliases do not fit into the framework above so I lump them here :)

# status
alias gs='git status'

# log
alias gl='git log'
alias glo='git log --oneline --decorate'

# stash and apply
alias gst='git stash'
alias gap='git stash apply --index'

# rebase
alias gr='git rebase'
alias grm='git fetch origin master:master && git rebase master'
alias grs='git rebase --skip'
alias grc='git rebase --continue'
alias gri='git rebase -i master'

Go above and beyond

At last, I encourage you to go crazy and create your own aliases for profit and fun :)

Who is the most liked author on dev.to? - Analysis of top 500 posts

Trent Yang — Wed, 09 Jan 2019 23:09:25 +0000

dev.to is a thriving community for programmers. Since 2016, a lot of good contents are created, shared and liked.

As a newcomer, I am curious what people care about on dev.to since I want my posts to be relevant.

So I decided to analyze the top 500 posts ever created on dev.to using javascript.

data gathering

There is no API provided by dev.to. But they do already have the ranked posts on this page https://dev.to/top/infinity. All I needed to do was to scroll down until I get 500 posts and scrap the data. Here is the script and data.

There are so many things we can extract from the data. I am interested in the following questions:

which author is most liked?
which author gets the most comments?
which tag is used most frequently?
do popular posts have numbers in their title?
vim vs emacs?

And I wrote a script to answer them. Are you also curious? Drumroll, please!

which author is the most liked?

Ali Spittel with 23 posts in top 500 is absolutely the darling of dev.to! I personally find her posts on the topic of blogging really informative and actionable.

Here are the top 10 most liked authors on dev.to!

name	likes	rank
Ali Spittel	9570	1
Ben Halpern	8876	2
Alex 👨🏼‍💻FullStack.Cafe	3099	3
Sarthak Sharma	2288	4
Max Antonucci	2156	5
Nikita Sobolev	1987	6
Emma Wedekind ✨	1941	7
Blaine Osepchuk	1698	8
Kim Arnett 	1691	9
Isaac Lyman	1594	10

which author gets the most comments?

As the founder of dev.to, Ben Halpern gets the most comments. Thank you, Ben, for your effort to create such an amazing community!

It should not be surprising that 5 out of top 10 here overlap with top 10 most liked authors.

name	comments	rank
Ben Halpern	1355	1
Ali Spittel	1114	2
dev.to staff	895	3
Kim Arnett 	452	4
Andrew Davis	301	5
Saurabh sharma	301	6
David Wickes	271	7
Sarthak Sharma	269	8
Dan Abramov	244	9
Max Antonucci	214	10

which tag is used most frequently?

Turns out that the most popular tags of the top 500 posts are very similar to the tags on https://dev.to/tags.

Front end engineering is very popular here #javascript, #react. The community seems to be very #beginners friendly.

Aha! I think I can create some react related posts for beginners to get more likes.😜

tag	used	rank
#javascript	128	1
#beginners	126	2
#career	116	3
#webdev	106	4
#productivity	75	5
#programming	49	6
#discuss	39	7
#learning	29	8
#react	26	9
#git	2	10

do popular posts have numbers in their title?

About 100 posts out of the top 500 have numbers in the title. There does not seem to be any strong correlation between numbers in post title and popularity.

vim vs emacs?

There are 6 #vim and 0 #emacs posts in top 500. For all the vim users out there, I want to say WE ARE THE CHAMPIONS on dev.to!

Just kidding. dev.to is a very inclusive community. It seems neither vim or emacs are very popular topics in the community. I think modern editors like VC code are much more popular.

That's it! And may the best posts win!

Here is the my blog https://trentyang.com/who-is-the-most-liked-author-on-dev-to-analysis-of-top-500-posts/ if you are interested.

Replace lifecycle with hooks in React

Trent Yang — Sun, 06 Jan 2019 06:03:34 +0000

If you have ever used React, you should be familiar with power of React lifecycles. The upcoming React hooks are about to change the way we handle lifecycles.

React hooks are a unification of existing features including state and lifecycles. In this post I am going to show you how to convert lifecycle class methods into React hooks to shine some light on React hooks.

For each of the three most common lifecycle methods (componentDidMount, componentDidUpdate, componentWillUnmount), I will demonstrate a class style implementation and a hooks style counterpart followed by an explanation.

componentDidMount

class Example extends React.Component {
  componentDidMount() {
    console.log('I am mounted!');
  }
  render() {
    return null;
  }
}

function Example() {
  useEffect(() => console.log('mounted'), []);
  return null;
}

useEffect is a React hook where you can apply side effects, for example, getting data from server.

The first argument is a callback that will be fired after browser layout and paint. Therefore it does not block the painting process of the browser.

The second argument is an array of values (usually props).

If any of the value in the array changes, the callback will be fired after every render.
When it's not present, the callback will always be fired after every render.
When it's an empty list, the callback will only be fired once, similar to componentDidMount.

componentDidUpdate

componentDidMount() {
  console.log('mounted or updated');
}

componentDidUpdate() {
  console.log('mounted or updated');
}

useEffect(() => console.log('mounted or updated'));

There is not a straight forward implementation in hooks to replace componentDidUpdate. The useEffect function can be used to trigger callbacks after every render of the component including after component mounts and component updates.

However this is not a big problem since most of the time we place similar functions in componentDidMount and componentDidUpdate.

Mimicing only componentDidUpdate can be a discussion of another post.

componentWillUnmount

componentWillUnmount() {
  console.log('will unmount');
}

useEffect(() => {
  return () => {
    console.log('will unmount');
  }
}, []);

When you return a function in the callback passed to useEffect, the returned function will be called before the component is removed from the UI.

As we discussed previously, we need to pass an empty list as the second argument for useEffect so that the callback will only be called once. This apply to the returned function too.

Normally we do cleanups in the componentWillUnmount. Let's say you want to create an event listener on componentDidMount and clean it up on componentDidUnmount. With hooks the code will be combined into one callback function.

We can create multiple hooks for different side effects and reuse them. Grouping correlated code together and making state management reusable is one of the main purpose of React hooks.

useEffect vs useLayoutEffect

Now we can convert componentDidMount, componentDidUpdate, and componentWillUnmount into React hooks, great!

Not so fast, there is a catch: the effects are not exactly the same between the two styles.

Unlike componentDidMount and componentDidUpdate, the function passed to useEffect fires after layout and paint, during a deferred event.

Normally this is not a problem. But if you want to manipulate DOM in the effect, and want to make sure it happens before browser paint, you need to use useLayoutEffect. The syntax is the same as useEffect.

Summary

To sum it up, we can use useEffect hook to replace lifecycle methods, but they are not exactly the same. Try to think in hooks when you use them!

References

If you enjoy reading this, here is my blog https://trentyang.com/replace-react-lifecycles-with-hooks/

How to setup google domain for github pages

Trent Yang — Wed, 02 Jan 2019 07:32:51 +0000

Intro

Github pages is easy to setup, but to attach a custom domain with google domains, you may run into problems. Here is how you can do it in 4 steps.

Prerequisites

You have a github pages repository, e.g. https://github.com/Chun-Yang/Chun-Yang.github.io
You purchased a domain on google domain, e.g. trentyang.com

STEP 1/4: Let gitHub pages know your custom domain

Go to your github repository settings page
Add you custom domain name at Settings > GitHub Pages > Custom domain

STEP 2/4: Let your custom domain (trentyang.com) points to your github pages

Go to registar page on your google domains, select your domain
Go to DNS > Custom resource records
Add the record shown in the screenshot bellow. Note that you need to use the "+" button to add more urls.

Here is the list of ips in the screenshot:
- 185.199.111.153
- 185.199.110.153
- 185.199.109.153
- 185.199.108.153

Incase these are outdated, you can also find the latest ones at github.

To confirm that your DNS record is set up correctly, use the dig command to do a lookup of your domain ```console

$ dig trentyang.com +noall +answer
trentyang.com. 3600 IN A 185.199.111.153
trentyang.com. 3600 IN A 185.199.110.153
trentyang.com. 3600 IN A 185.199.109.153
trentyang.com. 3600 IN A 185.199.108.153




Once the above is successful, your custom domain should work correctly. Go to your domain and take a look!


  
  
  STEP 3/4: Let your www sub-domain (www.trentyang.com) point to your github pages



Add the following CNAME record



You can use the following dig command to confirm that your setup is correct







$ dig www.trentyang.com +nostats +nocomments +nocmd

  www.trentyang.com.      IN      A

  www.trentyang.com. 1263 IN      CNAME   chun-yang.github.io.

STEP 4/4: (optional but HIGHLY recommended) Enable HTTPS for your github pages

Go to your github repository settings page, under Settings > GitHub Pages > Custom domain remove your custom domain and save.
Then add it back and save again.
Now you should be able to check the "Enforce HTTPS" checkbox and secure your site!

If you enjoy reading it, here is my blog https://trentyang.com/how-to-setup-google-domain-for-github-pages/

From a self-taught developer to Facebook engineer

Trent Yang — Wed, 02 Jan 2019 07:29:59 +0000

If you are an experienced software developer without a CS degree like me, here is how you can get a job from top tech companies like Facebook.

Background

I had been working at Poetic Systems, a Houston based consulting company, for three years before I applied for Facebook. Here is my Linkedin if you want to know more about me.

Timeline

05/11/2017 I submitted my resume on Facebook Careers.
08/21/2017 I was contacted by a Facebook recruiter and we setup the phone interview.
09/26/2017 Phone interview.
09/29/2017 The recruiter informed me that I passed the phone interview and we setup the on-site interview.
10/16/2017 On-site interview.
10/23/2017 I was told that Facebook need an additional phone interview to decide on my case and we scheduled another phone interview
10/30/2017 Phone interview.
11/09/2017 Recruiter told me I was hired.

Find the right job

The job I applied for was "Software Engineer, Enterprise". In my previous company, I was exposed to different kinds of web applications. One project I was really proud of was a custom enterprise application builder. And I thought my expertise on this area can give me a better chance since this project is relevant to what they are trying to hire.

Write a concise resume

Here is the resume I submitted to Facebook Careers. My awesome friend Jerry Shi at Google helped me a lot on my resume. One important thing I learnt was that my resume should be a one pager. Recruiters do not have enough time to go over every projects that I worked on. I needed to help the recruiter by condensing my value into quickly consumable pieces of info.

I have a habit of documenting projects I worked on on Linkedin. This helped me prepareing my resume. Also before in-person interviews I reviewed my previous projects in order to bring up interesting problems I solved and lessons I learnt. The preparation calmed me down and boosted my confidence. Both the recruiter and the interviewers asked about my previous experience on some level of details. Being able to talk about some interesting projects was definitely a plus for me.

Interviews preparation

Read an algorithem book

I did not have a CS degree, but I did read one algorithm book (Algorithms by Robert Sedgewick and Kevin Wayne) and finished several CS courses on Coursera and Udacity even before my first job. I would definitely recommend any software engineer to read an algorithm book especially when you do not hold a CS degree. This is not just tremendously helpful for the interviews, a software engineer absolutely need to know the fundamentals if he/her wants to develop decently complicated programs.

Preparation strategy

I mainly used leetcode to prepare for the interview questions since they have real interview questions. Geeksforgeeks is another website I used to understand the fundamentals of algorithm implementations.

I started preparing for the coding interviews around October 2016. Initially I was preparing for a Google interview around March 2017. It was a close call but unfortunately I did not get an offer.

In the first two weeks my preparation strategy was to bang my head on the questions. I tried to solve the questions by myself "organically". This was definitely not the right mentality. This approach was just too time consuming. And I did not learn too much since I just tried to solve those problems by myself.
After about two weeks I realized that there was just no way I can solve a significant amount of questions (300 was my goal) with my hard core strategy. I decided to read the solutions from leetcode forums. The leetcode forum is an absolute gold mine! The top solutions are very elegant, a lot of the solutions contain detailed explanation and some authors summarize and generalize for a class of problems!
After about one month, I realized that there are different topics for the problems, for example, dynamic programming, binary search, etc. I can cover more types of problems to go over each of the topics instead of just try to solve the problems by their index number which in hindsight seems sort of arbitrary. So I started to solve several problems from each topics.

There was a lot of back and forth from solving leetcode problems and brushing up my basic algorithm skills from re-reading the algorithm book. I felt it's a harding process for my understanding of algorithms. When I first read the book and followed the courses, I never solved an extensive amount of algorithm problems with real code. The leetcode challenges felt a long over due exercise.

Algorithm training was a time consuming process. And I had a full time job to do and a new born baby to take care of. Luckily for me, my family were super supportive! My mother-in-law and my wife took care most of chores at home. I was really grateful!

I end up coding the first 400 problems more than two times in python and Java. As a result the coding problems in the interviews did not feel too hard for me. Some of the interview questions actually were very similar to those from Leetcode.

Code in Java

I would recommend Java if you are not familiar with C or C++ already. Here are the reasons:

During my Facebook interview, the language did not matter. But it mattered for my Google interview. At Google, core languages, such as Java, C or C++, were required skills which I was only aware of at the last interview.
Java contains a very extensive built-in data structures. For example the TreeMap class is an implementation of Red-Black tree. This data structure is not built-in for Javascript, Python or Ruby.
Most of the folks working at the top tech companies hold CS degrees and more often than not they know Java because of their education. Using Java makes things easier for them.

What I could have done better

Spend less time stuck on a problem, get solution from the forum quicker (Spend 15 mins without any clue is a good indication to seek for help)
Spend more time reading solutions in the forum since the best solutions are very elegant and worth learning even if I solved the problem my self
Spend more time reviewing the previous solved questions instead of trying to conquer more problems, reviewing systematically and following a plan focused on the algorithms when reviewing instead of coding the solution again which is really time consuming
Buy the subscription and use the categorization by company feature

Talk out loud in interviews

Surely I could not have guess what the questions would be in the interviews, but I could prepare a strategy. One important thing to keep in mind is that the interviews are meant to evaluate your capability. And the best way you can help interviewers is to talk out loud. Whatever you are thinking, you should make it explicit. Coding correctly with the most efficient algorithm on a white board is very important, but conveying our thought process is also very valuable in an interview since this send more helpful signals to the interviewer, expecially when you are not doing very good at coding.

Interviews process

Phone interview

Phone interview is a screening process. It seems Facebook use this interview to quickly filter out unqualified candidates. I was asked to solve a algorithm problem in a coding environment like Google Docs. This interview is not too changeling for me.

On-site interview

After I passed the phone interview I was invited to the onsite interview. Since I lived in Houston, I had to fly to Menlo Park just for the interview. Facebook scheduled and paid for the entire trip which was very generous of them.

Here is the schedule on the day of the on-site interview:

system design interview
coding interview
lunch with a engineer (I was not evaluated during lunch)
coding interview
coding interview
coding interview

Each interview lasted around 45 mins. The whole process was intensive.

coding interviews

The coding interviews are similar to leetcode problems just on a white board. I thought I did OK on three of them. And for one of them I presented several non-optimal solutions but eventually was guided to the optimal solution.

system design interviews

I did not prepare too much for the system design interview except went through this.

One reason was that it would be hard to prepare for a very interactive, fluid and relatively high level conversation from reading articles.
The other reason was that I have several projects under my belt. This interview actually went well for me.

Additional phone interview

The additional phone interview was rare. The reason for this interview was to gather more signals for the hire committee did not agree on the hiring decision. This interview was exactly like the first phone interview I was given.

Tips during interviews

It's easy to be nervous when under pressure and the stake is high. I was more excited than nervous this time. Here's what I did to reduce the anxiety:

Be prepared. Having a plan is always a good thing even the plan did not end up working.
Be relaxed. Getting rejected is really not a big deal. You may already had a job that you like. And you could always apply again. Do not get discouraged when rejected (And I was rejected by Google previously). There was a lot of luck involved including the interview questions, interviewers and the company's hiring plan.
Be cooperative. The goal of the interviewer is to evaluate your capability as accurate as possible. Tell the interviewer what you think and listen for subtle cues when you get stuck.

Summary

I tried to document my experience of getting a job at Facebook. The process should be very similar to the other tech giants. It would be my pleasure if you can get any value out of this post. Never stop improving!

If you enjoy reading it, here is my blog https://trentyang.com/from-a-self-taught-developer-to-facebook/