From being a musician of a symphony orchestra to a web developer.
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 🦋
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…
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:
— Email validation makes a headache sometimes 🧊
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 ️
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:
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
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.
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…