ethan-deng

Bust Client Cache with SPUtility.MakeBrowserCacheSafeLayoutsUrl

    <script src="<%=SPContext.Current.Site.ServerRelativeUrl + SPUtility.MakeBrowserCacheSafeLayoutsUrl("folderUnderLayouts/js/MedInsight.EzInList.js", false)%>"></script>
    <link href="<%=SPContext.Current.Site.ServerRelativeUrl + SPUtility.MakeBrowserCacheSafeLayoutsUrl("folderUnderLayouts/css/easyquery.css", false)%>" rel="stylesheet" type="text/css"  />

ethan-deng

• https://dsgnwrks.pro/7-javascript-basics-many-developers-arent-using-properly/
• https://lacke.mn/reduce-your-bundle-js-file-size/

ethan-deng

React Pitfalls

1.React JSX attribute is case sensitive.

For example, this is valid attribute "colSpan". This is not "colspan".

2.When use array to build component JSX, don't set array length to 0 to re-initiate array. Always set array to []. Set array length to 0 will keep the array reference.

3.Don't do this

ethan-deng

jQuery ajax and ASP.NET Web Services and Web API 2.0

1. Web Services

Get data

$.ajax({
  type: "POST",
  url: "ServiceName.asmx/WebMethodName",
 data: "{}",

ethan-deng

Browser	App URL	Ajax URL	Works?	Reason
IE 11	http://localhost:9000	http://localhost:9001	Yes	Port number is ignored by IE
Chrome	http://localhost:9000	http://localhost:9001	No	different origin and doesn't handle 401 and make popup
IE 11	http://127.0.0.1:9000	http://localhost:9001	No	IE block cross origin calls
Chrome	http://127.0.0.1:9000	http://localhost:9001	No	different origin and doesn't handle 401

ethan-deng

ATOM Editor

Instal linter-eslint package

https://alligator.io/vuejs/vue-eslint-plugin/

Change "Fix errors on save"
Add "text.html.vue" to "List of scopes"

source.js, source.jsx, source.js.jsx, source.babel, source.js-semantic, text.html.vue

ethan-deng

Use SASS

1. Install SASS: npm install SASS -g --save-dev
2. Run SASS: node_modules\.bin\node-sass --source-map true scss\app.scss build\app.css

ethan-deng

NPM

Update NPM

npm install -g npm

NPM Scripts

NPM Scripts run command using binary from the packages in the current location and doesn't use the globally installed package. When using NPM scripts to run build commands, it is not necessary to install build package globally.

List currently installed package versions

npm list --depth=0

ethan-deng

The case that you have to use Immutable.js in React

In React, there are scenarios that you have to use Immutable.js if you want to use shouldComponentUpdate to improve performance.

For example if your state is an object or array in a flux data store

  this.var1 = {a:1, b:2};
  this var2 = [1,2,3];

ethan-deng

Async Loading of Initail Content with Flux-Alt

The best approach to aysnc load content into data store in Flux-Alt is to

Defined an export method in data store. This is to make sure that all sub components have subscribe the change of the store.

    this.exportPublicMethods({
      load: this.load
    });