• Rules
• Log - click here to see my progress
• FAQ
• Resources

Implemented a javascript function to animate a given DOM element to right by the given distance smoothly.

Codepen

Notes:

• It's important to use setTimeout function to send the task out of the main thread i.e. send to EventLoop
• There is a very good talk about the event loop: https://www.youtube.com/watch?v=8aGhZQkoFbQ
• Use javascript to manipulate DOM element style

Today I have played around React synthetic event handling and normal DOM event handling, and it turns out the DOM event handling has more priority than the React synthetic event handling!

Codepen Twitter

Notes:

• Looks like DOM event will go to native event handling first then React component event handling (Still need to find out why)

Use SVG to implement the angle edge.

Codepen Twitter

Notes and references:

• 3 Ways to Create Angled Edges With SVG

Today I have implemented a simple carousel/slider with pure React and CSS (without any other 3rd party libraries than React). Still has some CSS and refactoring to do, will continue on Day 5!

Codepen

Notes and references:

Simple Swipe with Vanilla JavaScript

Today I continued on yesterday's simple carousel/slider with pure React and CSS. Some refactoring, centre the left, right control, made the content of the carousel/slider to be generic, i.e. react.children.

Codepen

Today I continued to improve the simple carousel/slider built with pure React and CSS from day 4 and 5: added event listener to make it slidable with mouse.

Codepen

Today I have added the touch support (for usage in mobile devices) in my simple carousel/slider built with pure React and CSS from day 4 - 6, I have put my source code in my github simple-react-carousel

Notes and references:

Simple Swipe with Vanilla JavaScript

Log all my previous days into github repo: 100-days-of-code and start building my own (blog)[https://github.com/nluo/my-blog] with GatsbyJS