Hacker tab extension dark mode
Hacker tab extension dark mode
Hacker tab extension dark mode

Dark theme is one of the most requested features over the past few years. The most popular reason is that “it’s easier on the eyes,” followed by “it’s elegant and beautiful.” Apple in their Dark Mode developer documentation explicitly writes: “The choice of whether to enable a light or dark appearance is an aesthetic one for most users, and might not relate to ambient lighting conditions.”

Both Apple and Google made a dark theme an essential part of UI, more and more websites do the same to enable dark mode. …


Image for post
Image for post
Hacker Tab: Chrome extension to view GitHub trending projects on new tab 📈

If you are not sure how to write a chrome extension, you may first have a look at my previous story How to use React.js to create a cross-browser extension in 5 minutes. It teaches you how to use create-react-app to build a browser extension for the new tab.

The extension we built was good, but every time the user opens a new tab we will reload the latest trending repositories from API which could take a few seconds. Even if it just takes a second, it is still slow for a new tab opening.

What if we fetch data…


Image for post
Image for post
Image by https://undraw.co

I was looking for GitHub trending projects API, but unfortunately, GitHub does not provide an official API for it. I decided to build github-trending-api myself using cheerio.js.

In this article, I will share with you my experience using cheerio.js, writing tests, and pushing new changes to the API server Now automatically.

1. cheerio.js

There are a lot of tools when you want to scrape web using Javascript. Cheerio.js is one of them. The syntax is very much like old jQuery style, if you are familiar with jQuery, you should be able to familiar with cheerio.js very quickly.

For example, if you want…


Image for post
Image for post
Hacker Tab: Chrome extension to view GitHub trending projects on new tab 📈

Update: this blog post was originally targeted for Chrome extension, I have recently ported to Firefox and would like to share what I have learned here as well ✨.

Also Read:

Part 2: How to use background script to fetch data in Chrome extension

Recently I have tried to create a Chrome extension that replaces new tab screen with GitHub trending projects, and it got trending in Product Hunt. I built it using create-react-app and I would like to share how I did it, in 5 minutes.

1. Create the application

The Chrome extension I created replaces new tab screen to a custom page which I…


Image for post
Image for post
Photo by Hello I’m Nik

Recently I learnt Git In-depth in Frontend Masters by Nina, it was about 4 hours course, I tweeted some notes while learning and I think it is nice to convert them into a blog post.

Most useful

  • git add -p will add your changes in chunks, like what SourceTree is able to do, but git add -p is more powerful, you can even divide chunks into smaller pieces.
  • git show <SHA> will show all the details of a commit, which I did not know before.
  • git merge --no-ff will merge with a merge commit, even if there is no conflict and git…

Image for post
Image for post
Image by Jesus Kiteque

Recently, I decided to migrate my blog to Gatsby. Gatsby is a blazing fast static site generator based on React.

The Issue

Why do people love to write on platforms like Medium rather than using static site generator?

There are two kinds of people: people who write on platforms like Medium and people who code the blog themselves using static site generators.

There are lots of advantages to writing on public platforms like Medium over static site generators. If you write in public platforms, you can write on a laptop, and edit on your phone. Once you’ve finished writing, you just need to click the “Publish” button. …


What I need to focus on in my next 5 years

I was struggling for years to figure out what I want and what goals should be my top priorities.

I want to build an awesome startup; I want to meet more awesome people and know more people; I want to improve my design and frontend skills; I want to win design awards; I want to learn iOS development and Swift language; I want to finish reading books in my list; I want to improve my English; I want to travel around the world; I want to finish triathlon; I want to attend Boston marathon; I want to write stuff of…


The book “Get Things Done” said that people are more productive if they know what to focus in different contexts. To keep a reference, I am listing my list of things to do for different contexts.

Night

Night is the most important time to improve myself.

  • Work on a project
  • Read book
  • Improve or learn a new skill (including languages)
  • Exercise
  • Write blog
  • Plan for tomorrow

Saturday

Just do all the non-working stuff and relax for the whole day.

  • Sports
  • Movie
  • Outdoor activities
  • Video chat with parents
  • Shopping
  • Clean room
  • Hangout with friends

Sunday

Sunday is the only day which I have long block time, use it wisely and get something significantly done.

  • Eat a big frog
  • Write blog
  • Review and plan for next week

Hu Chen

Design and code for digital products. @huchenme http://huchen.dev

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