<Hi/>I am Max,Frontend developer

About:

I am based in Singapore, have a project you'd like to discuss?

My Experience:

Udacity react nanodegree review

Recently I was graduated from react nanodegree with Udacity. The course was separated into 3 main course: 1) React Fundamentals 2) React & Redux 3) React Native Each course have their own assignment to complete, overall its about 4 or 5 months course, it only took me 1 month plus to complete 😉 since the […]

Read more

IntersectionObserver

IntersectionObserver is a very simple and powerful browser API, it really good to build such as lazy-load images, contents or whatever, the concept is really simple, it observer an element, when is visible and then you do something about it. One example, when this div is visible then load image. Outthought its not supported by […]

Read more

simple way to improve react applications performace

Before I start discussing some ways to improve the performance of react applicate, you should read the official doc from react site which already discussed about this topic. So in my own opinion few ways to improve the performance: 1) Use stateless/function component instead of writing class as component, using stateless component will eliminate “this” […]

Read more

server side react with next.js

After trying out next.js, totally lovely this tool, no reason not to use now with server side react render. One of the biggest benefit I felt is definitely the SEO part. As my screenshot below you can see that in source code which renders the contents, this is great for crawlers to quickly crawl your […]

Read more

Screenshot with google chrome without any plugin

Its new updates of Chrome 62 and its really easy to take screenshots with build in api, no longer require any plugins or extensions. Open up your chrome, usually I would use Chrome Canary which has latest versions. open up your console with

Read more

react 16 createPortal

React 16 introduced createPortal function which allows you to render elements outside react Dom, this become useful when you need to dynamically render some elements such as tooltip, modals… createPortal function can be used inside render method, and returns jsx as usual and where you want to render this element, as example below:

what […]

Read more

Easiest way to handling indexOf

Lets create a function that allow us to if string is available in array with this shortcode

using tilde operator will flip the bits in its operand. which is similar to

then use !! to convert this into boolen, this is easiest way to check indexOf and its more readable than …

Read more

Headless chrome puppeteer

Happen to try out this “Headless Chrome Node API” from chrome today, this npm allows you to write headless chrome directly which we used to do with phantomjs or other tools, it provides useful and easy APIs, I wrote a simple scripts allow me to check on CDC (ComfortDelGro Driving Centre) website to see if […]

Read more

Prevent table column resize/jump when you search table rows (React version)

Rendering with table in react is really easy, you just need to map through the result and return whatever should be shown as each TR, below is an example how you render table in react.

here comes a problem that I faced when working with table, lets say there is a search box somewhere […]

Read more

Reactive with react and meteor

If you been working with react and meteor, you will realised that both are reactive by nature of its framework/library, but when bridge them together, it does not work well in reactive way. fortunately Meteor team created a package called React Meteor Data.  To use React-Meteor-Data which is pretty easy, you just need to install […]

Read more