Chen Jian's Java Blog 

React Component: A pair of componentDidMount() and componentWillUnmount() may cause infinite loop if error is thrown from render

by Chen Jian

Posted on 2019-04-18 12:00 in Frontend

The following will cause an infinite loop. The render() method will be called again and again. class ToDoItemEditComponentContainer extends React.Component { componentDidMount() { this.props.loadItem(); //load item remotely and...

JSON.stringify() won't work for ES6 Set

by Chen Jian

Posted on 2019-04-17 12:00 in Frontend

It will just return "{}", no matter if the Set is empty. This also means deep clone based on JSON won't work. If JSON.stringify() matters to you, use Array instead of Set

Material-UI: avoid RadioGroup if there are complex elements inside each radio

by Chen Jian

Posted on 2019-03-03 12:00 in Frontend

Just use seperate Radios The problem with RadioGroup with nested elements under Radios is that it messes up with your layout. RadioGroup is a child of FormGroup, which does a lot of styling itself. If you use it, you will lose a lot of freedom...

My practice of fetching data for List/Detail components in React/Redux

by Chen Jian

Posted on 2019-02-17 12:00 in Frontend

The user experience it should have When you go to a detail page from the list page or with a direct URL, the detail page should show the up-to-date data When you go to the list page with a direct URL, the list page should show the...

What happens to the redux store if I refresh the browser?

by Chen Jian

Posted on 2019-01-19 12:00 in Frontend

It will go away, and then be initialised. If you have this question, it means you have no exact idea of the lifespan of client-side state in a browser. First of all, a document is created under current tab of the browser when a url is first...

flexbox's "justify-content:center" doesn't do text-align

by Chen Jian

Posted on 2018-12-15 12:00 in Frontend

It only aligh the "items" to the center axis. Text inside each item is not aligned in center Here is an example provided by w3schools . You can see "1" is not in the center of the pink box.

Load data from backend before rendering a React component - best practice

by Chen Jian

Posted on 2018-12-02 12:00 in Frontend

Where to put the data fetching code? componentWillMount() ? Not any more. It's been deprecated. You have no choice but put it inside componentDidMount() , which is recomendded by React. However ther is a big issue. ...

Things to do for a serious Java website when using Elastic Beanstalk

by Chen Jian

Posted on 2018-11-25 12:00 in Java

Before you start Get a domain If you haven't got one, you can buy one. You can get it from AWS Route 53 Get a SSL certificate for your domain You can get it from AWS Certificate Manager. Create an IAM User You will need this...

Date types for createdAt and updatedAt in MySQL

by Chen Jian

Posted on 2018-11-19 12:00 in Database

If you really want them work well, : 1. Make sure your mysql's version is 5.6.5+ 2. The two columns exact data types must be createdAt timestamp not null DEFAULT CURRENT_TIMESTAMP, updatedAt timestamp null DEFAULT NULL ON UPDATE...

"model" doesn't work but "it" works when using sitemesh + jersey mvc + jsp

by Chen Jian

Posted on 2018-11-18 12:00 in Java

When I use "model" for the attribute name in the Jsp views, it only works in the original view, but not in other parts of the whole, merged view. But when I use "it" instead, everything works. I don't know why. Maybe Jersey removes "model" from...

Tools in Ubuntu

by Chen Jian

Posted on 2018-08-28 12:00 in Linux/Unix/Windows

DBeaver - Much better than MySQL Workbench and it serves all kinds of DBMS-es

html5 localStorage pitfalls

by Chen Jian

Posted on 2018-07-11 12:00 in Frontend

It doesn't disappear after window closed It doesn't expire The old standard of it only allow string to be saved. New standard is not like so, but all mainstream browsers still use the old standard.

Why is there white space above the header?

by Chen Jian

Posted on 2018-06-24 12:00 in Frontend

I set no margin or padding at all, but there is white space above the header. <header style="background-color:gray"> <h1>Test margin collapsing</h1> </header> There is no margin in the "header" or...

Ajax in Redux with Thunk - Can't be more weird

by Chen Jian

Posted on 2018-06-22 12:00 in Frontend

How can a ajax call fit into Redux paradigm? State: The state will be updated after ajax call is over. No problem. Reducer: Reducer will change the state when ajax call is over. No problem. Action: Action can be...