ethan-deng

• wunderlist.com
• trello.com
• Asana.com
• Zapier.com
• Microsoft Flow

https://mailgun.com https://context.io

ethan-deng

• npm install express

• npm install -g node-inspector

• npm install -g devtool

• devtool app.js --watch

• npm install mongodb

ethan-deng

SharePoint Rest API

• Get to know the SharePoint 2013 REST service
• Complete basic operations using SharePoint 2013 REST endpoints
• Access SharePoint 2013 data from add-ins using the cross-domain library
• Develop SharePoint Add-ins
• Working with lists and list items with REST
• Working with folders and files with REST
• Use OData query operations in SharePoint REST requests
• Determine SharePoint REST service endpoint URIs

ethan-deng

ES6 Promises

• ES6 Promises
• Promise MDN
• es6-promise
• Promises for asynchronous programming
• Promise Patterns & Anti-Patterns
• Understanding JavaScript’s async await

ethan-deng

RichTextEditor

• Awesome Draft.js
• DRAFTJS EXAMPLES
• element-resize-event
• react-component-width-mixin
• react-resizable-and-movable
• react-resizable

ethan-deng

React stuff

• Brunch
• Brunch
• classnames
• class-autobind
• css-modules-require-hook
• css-modules
• Local scope
• CSS Modules - Welcome to the Future

ethan-deng

• An NPM module could be loaded from either dist or lib folder. It is defined in the package.json file "main".
• Change made directly to lib or dist folder will cause the wrong lines in debugger.
• Example to build the dependencies

1. Download draft-js-export-html-master
2. Run "npm install".
3. Change the source code
4. Run "npm run build" to build the code to lib folder.
5. Download react-rte

ethan-deng

• Unusable on small screens
• http://www.quirksmode.org/mobile/viewports.html
• http://www.quirksmode.org/mobile/viewports2.html
• Bad repositioning when closing keyboard after editing a TextField on mobile
• http://www.kylejlarson.com/blog/iphone-6-screen-size-web-design-tips/
• https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
• https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
• http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
• https://github.com/contra/react-responsive

ethan-deng

Trello Like

• https://github.com/panzi/react-dnd-touch-pointer-events-backend
• https://github.com/gaearon/react-dnd
• https://gaearon.github.io/react-dnd/docs-tutorial.html
• http://gaearon.github.io/react-dnd/
• https://github.com/gaearon/react-hot-boilerplate
• mui/material-ui#3103
• https://gist.github.com/jlroettger/2d6d7ae572f985fa176c27a63cadf292
• http://react-trello-board.web-pal.com/

ethan-deng

React Performance

Immutable.js

To summarize, the performance managment of React is about using shouldComponentUpdate with "Deep Change" and "Shallow Change" of state object.

First, when implementing shouldComponentUpdate, we always want to do shallow comparason only, since deep comparason is expensive.

Second, based on the first assumption, when we do "Deep Change" for example when we change an array in place using array push, pop, splice ... or change an object property value, the state objecct's reference never change and since the shouldComponentUpdate will be blind to these changes and thus it will always return false.