Implemented a javascript function to animate a given DOM element to right by the given distance smoothly.
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!
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.
Notes and references:
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!
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.
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.
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