I am based in Singapore, have a project you'd like to discuss?
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 […]
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 […]
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” […]
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 […]
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
|
1 |
Shift + Control/Command + I |
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:
|
1 2 3 4 5 6 7 8 |
render() { return createPortal( <div className="tooltip"> <p>this is a tooltip</p> </div>, document.getElementById("tooltip") ) } |
what […]
Lets create a function that allow us to if string is available in array with this shortcode
|
1 2 3 |
function checkStringInArray(arrayItem, stringItem) { return !!~arrayItem.indexOf(stringItem); } |
using tilde operator will flip the bits in its operand. which is similar to
|
1 |
-(x+1) |
then use !! to convert this into boolen, this is easiest way to check indexOf and its more readable than …
|
1 |
arrayItem.indexOf(stringItem) > -1 |
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 […]
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.
|
1 2 3 4 5 6 7 8 9 |
YourObjectArray.map((item, index) => ( <tr> <td>{item.name}</td> <td>{item.birth}</td> <td>{item.age}</td> </tr> )); |
here comes a problem that I faced when working with table, lets say there is a search box somewhere […]
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 […]