From being a musician of a symphony orchestra to a web developer.

The memory,water drops through stone, dreams can come true
The memory,water drops through stone, dreams can come true
Water drops through stone, dreams can come true — 水滴石穿

Since I was a child, my parents focused on cultivating my music literacy. My father is a famous musician and my mother is a doctor. Yes, I am also talented, my ears are born with absolute hearing. I can tell the exact pitch with closed eyes when people press any key on the piano. It would make sense that music should be my future career, right?

Going to a foreign country to continue music studies

After high school, I was admitted to the Shanghai Conservatory of Music where…


— a css trick that may save your time 🦋

Knowledge is the torch of wisdom — 知识是智慧的火炬

Implementing responsive background-image is very simple, but combining it with additional background-color and linear-gradient is not as simple as imagined, and if you also have to make the background image light and transparent, and also with some text on it that should not be transparent …

Yeah, it sounds cumbersome 🙈, but this is the task I encountered in my current project, let me explain the purpose with pictures first.

We have two different images ( I’m using example images here ) that need to be displayed according to the…


Are you familiar with this error? 💻

Every day is a miracle 🌸

In the project I am working on recently, I need to create a “Dialog” as an overlay that contains a basic “input form”. Within this overlay, there is also a clickable button which can open an “email confirmation” overlay.

In order to make it clearer, let’s take a look at the “input form” overlay first, it should look like this below:


— css trick in a React component🧚

As long as the road is right, you are not afraid of the road far — 只要路是对的,就不怕路远

Recently I encountered an interesting problem, let’s say, there are some list items to display using the basic React code like below 👇


— Email validation makes a headache sometimes 🧊

No pain no gain — 一分耕耘,一分收获

I always feel that form validation is a headache, but it is always needed in the real world, in one of my recent projects, I created two overlays ( an email enter overlay where user can enter email address and get a confirm overlay after submit ).

To make it simple, let’s take a look at the email enter overlay first, it is displayed by clicking a button on the page ( I’m using reakit which is one of my favorite UI library ) 📖


— Geolocation API ️

Long way to go, keep learning — 路漫漫其修道远,吾将上下而求索

In a recent React project of mine, I needed to find the location closest to the user from multiple locations of worldwide medical research institutes (Trials) and display its content.

This sounds complicated. It felt messy at first, but after careful consideration, I noticed there are actually 4 points here:

  • current user position 📍
  • worldwide Trials 📍
  • locations from each Trial 📍
  • closest location from those locations 📍

🤯

But let’s simplify the thing step by step:

First, get our user current position with Geolocation API in order to be able to compare with all trial…


Learn Gatsby Step 2

Make persistent efforts — 再接再厉

In my last article, I started with the most basic steps and created two simple pages that can be linked to each other.

But Gatsby is based on React and GraphQL, combined with the most advanced tools in the front-end field such as webpack, babel, react-router, etc., which can give developers very good development experience, since this is the case, it should not just be limited to writing hardcoded data directly in the components.

Gatsby provides data pre-reading, which reads the page content corresponding to the link in advance when the browser is idle.

The sources…


Baby steps, yes.

Life-long learning — — 学无止境

Last week, our company launched a new project, it is set up with Gatsby — React (frontend), Laravel (backend), SQL (database).

In the beginning, I thought I would have a headache because, with my 1-year coding experience, I had only heard about GatsbyJS but never really worked with it deeply. But after reading the official docs patiently, I found that it was not as complicated as I imagined.

I want to share the basic steps in this article because everything must start with building a solid foundation.

From a technical point of view, GatsbyJS is a hybrid system of React…


A junior’s advice — give it a try.

I have been in contact with React for nearly 10 months and my opinion is that React hooks not only make code cleaner but also improves readability and reduces the amount of the code. For juniors like me who don’t have much experience, getting started is not difficult.

If you haven’t used hooks yet, you should try and add them to your project, because it can really make your programming simple and interesting.

In this blog, I would like to share 5 React hook libraries with you which I tried in some…

Xiaomin Zhu

JavaScript is my ride or die

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