commonJS vs ES Module

for nodeJS, the server side is by default using commonJS for moduling.

//export data data.js
exports.staffs = [{
   name: "Bush",
   id: 1,
}, 
{
   name: "Forest",
   id: 2
}
];

//default export from module, default.js
module.exports = {name: "Gump"};

//then corresponding import
const { staffs, .... } = require('./data')
const anything = require('./default')


while client side is using ES modules:

//export
export const log = winston.createLogger({....});

//import 
import log from './logging/logger';

JS Frameworks

This crazy race has no winner at all since it is neverending. That’s it! Yesterday you were learning Backbone.js, jQuery, Knockout.js, Ember.js, then AngularJS and now ReactJS, Next.js, Vue.js, all Angular flavors. Today, up comes Ext JS and Aurelia, the new ones. And tomorrow another will come up. The framework array list is endless.

https://dev.to/blarzhernandez/why-you-should-learn-javascript-principles-first-not-the-hottest-frameworks-kb9

ES6 destructing and spread

http://www.typescriptlang.org/docs/handbook/variable-declarations.html#destructuring

destructuring is to auto map the source to the assigned variable, whether being array or object or tuple.


const [a,b,c] = ...

const {a,b,c} = …

const [a,b,c]= …

spread is to auto map any number of items in the array to a spread variable, vice versa. basically to repsent array as one (spread) variable.


const [a, ...b] = ...
const x = [a, ...b]

and in order to destruct array of objects

let o = [
{
a: "foo",
b: 12,
c: "bar"
},
{
a: "test",
b: 20,
c: "check"
}];

let [{a}] = o ====> “foo”

let [{a: a1},{a: a2}] = o ====> “foo”, test

timeout on android emulator

i was keep encountering this exception while pushing the code to android emulator:

47856057-7f798400-ddfb-11e8-9897-3c3914be463d
Annotation 2019-06-27 150813
similar to this
https://github.com/react-community/create-react-native-app/issues/144

turned out the solution was due to the firewall. after having added all android apps (android studio, emulator.exe, abd, avd etc) on the exception list of the firewall, the issue was sorted out.

react render empty

according to react doc

Booleans, Null, and Undefined Are Ignored

falsenullundefined, and true are valid children. They simply don’t render. These JSX expressions will all render to the same thing:

https://reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored

so



class x extends Component{
     render(){
       return(null);
    }
}


good summary for react redux thunk

source:
https://medium.com/@stowball/a-dummys-guide-to-redux-and-thunk-in-react-d8904a7005d3

  1. There is 1 global state object that manages the state for your entire application. In this example, it will behave identically to our initial component’s state. It is the single source of truth.
  2. The only way to modify the state is through emitting an action, which is an object that describes what should change. Action Creators are the functions that are dispatched to emit a change – all they do is return an action.
  3. When an action is dispatched, a Reducer is the function that actually changes the state appropriate to that action – or returns the existing state if the action is not applicable to that reducer.
  4. Reducers are “pure functions”. They should not have any side-effects nor mutate the state — they must return a modified copy.
  5. Individual reducers are combined into a single rootReducer to create the discrete properties of the state.
  6. The Store is the thing that brings it all together: it represents the state by using the rootReducer, any middleware (Thunk in our case), and allows you to actually dispatch actions.
  7. For using Redux in React, the <Provider /> component wraps the entire application and passes the storedown to all children.

https://codeburst.io/redux-a-crud-example-abb834d763c9

Chrome App with AnguarJS & JQuery

There are mainly 3 parts to build an chrome app:

Static Page

  1. popup.html, would be the popup view when you click on the icon of the app/plugin

here you define the view, and the binding to the controller/service functions

<div ng-controller="shortCutController" ng-model="option" class={...}

/>
<button id="configure" class="btn btn-info" ng-click="option = !option; initMap()">{{ option ? "Hide": "Show"}} Configure</button>

app.js

 

  1. which is the place to put your controller/services:
app.controller( 'shortCutController', ['$scope', '$rootScope', 'mapStore', function( $scope, $rootScope,mapStore ) {
}
I am using chrome storage, so did a sync on each update
$scope.update=function(key, value) {//update the storage

//mapStore.update(key, value);

$rootScope.mappers[key] =value;

chrome.storage.sync.set({"mapper":$rootScope.mappers}, function(){

console.log("check the updated mappers: "+$rootScope.mappers);

});


 

background.js

this is the place, for your plugin to listen to registered actions. for this case, it’s listening omnibox:

chrome.omnibox.onInputEntered.addListener(

function(text) {

vardata= {};

chrome.storage.sync.get("mapper",function(keys){

......

chrome.tabs.query({
.............
}}

 

Here is the link for the app: https://chrome.google.com/webstore/detail/short-cut-for-url-mapper/lafchflokhmpcoaondfeffplkdnoaelh

Android React native app

Have played around react native, and published an android app earlier.

some thoughts:

  1. navigator

    this would normally be the entry point, which define the landing page, and how routing to different pages works.


<Navigator
    initialRoute={{ title: 'Tap Scene', id: 'default' }}
    renderScene={this.navigatorRenderScene}
/>

 

Scene

2. For each scene, its a Component, where the life cycle of constructor, componentDidMount, componentUnmount, can be used to trigger specific actions. on each scene, you can use JSX to create the page/view, which could link to functions, like normal js binding:

onActionSelected
onIconClicked
handleClick() {
    if(!this.state.favnumber)
        LocalToastAndroid.show('Please set up your favorite number first', LocalToastAndroid.SHORT);
    else
        LocalToastAndroid.call(this.state.favnumber);
};

Additional actions

3. native react native modules wont cover all functions you request, to create custom module, you can register additional

ReactContextBaseJavaModule

then exposing the method to JS

@ReactMethod
public void call(String number){
.....
}
module.exports = NativeModules.CustomizedModule;

here is the app: https://play.google.com/store/apps/details?id=com.best2lwjj

AI for system support

Have tried to build an AI bot since almost 3 years back, finally did a prototype, in case anybody would like to do something similar:

Technologies:

Java, Spring Boot, Spring, SQLlite, PostGre, Scala, Python, Anaconda, Scikit Learn,  EWS, BootStrap, AngularJS/JQuery/HTML/CSS, Symphony API, Cisco API,

Components:

Data Set

  1. I have built a scala web crawler, to download all historical support issues.
  2. at the same time, have manually cleaned up/read through each of the thousand of support issues, put in corresponding resolutions corresponding to each
AI
  1. have leveraged on anaconda & scikit learn, to NLP, to tokenize each support issue (text), remove stop words, stemmed each, remove punctuations
  2. have leveraged on anaconda & scikit learn, bag each token of the text as feature vs class, to feed into linear regression classifier, tried SLDA, so far working at 72% accuracy
AI Exposer
  1. have exposed AI as a service
Issue Feeder
  1. have leveraged EWS to read in all issues, post to AI service
UI
  1. have built a web user interface, on top of HTML5 + JQuery + Bootstrap, to show the support emails + AI responded resolutions
  2. have a option on UI, to provide user feedback to AI, to keep its intelligence updated
Notifier
  1. leverage on Java Mail API, EWS, Chat API, phone API, to post alerts for critical issues

JVM 7

http://docs.oracle.com/javase/7/docs/webnotes/tsg/TSG-VM/html/memleaks.html

3.1.1 Detail Message: Java heap space

The detail message Java heap space indicates that an object could not be allocated in the Java heap. This error does not necessarily imply a memory leak. The problem can be as simple as a configuration issue, where the specified heap size (or the default size, if not specified) is insufficient for the application.

In other cases, and in particular for a long-lived application, the message might be an indication that the application is unintentionally holding references to objects, and this prevents the objects from being garbage collected. This is the Java language equivalent of a memory leak. Note that APIs that are called by an application could also be unintentionally holding object references.

3.1.2 Detail Message: PermGen space

The detail message PermGen space indicates that the permanent generation is full. The permanent generation is the area of the heap where class and method objects are stored. If an application loads a very large number of classes, then the size of the permanent generation might need to be increased using the -XX:MaxPermSize option.

Interned java.lang.String objects are no longer stored in the permanent generation. The java.lang.String class maintains a pool of strings. When the intern method is invoked, the method checks the pool to see if an equal string is already in the pool. If there is, then the intern method returns it; otherwise it adds the string to the pool. In more precise terms, the java.lang.String.intern method is used to obtain the canonical representation of the string; the result is a reference to the same class instance that would be returned if that string appeared as a literal.

When this kind of error occurs, the text ClassLoader.defineClass might appear near the top of the stack trace that is printed.