Online SaaS Peer Assessment / Grading / Polling

Have spent several hours looking for a web-based tool that allows students to vote for each others presentations; by the best free solution was https://www.poll-maker.com/

(p.s. last year spent half a day counting students votes; so decided to automate it this year).

Posted in Uncategorized | Leave a comment

java.lang.NoSuchMethodError: com.amazonaws.transform.JsonErrorUnmarshaller: method (Ljava/lang/Class;)V not found

Problem

An exception or error caused a run to abort: com.amazonaws.transform.JsonErrorUnmarshaller

java.lang.NoSuchMethodError: com.amazonaws.transform.JsonErrorUnmarshaller: method <init>(Ljava/lang/Class;)V not found

Solution

AWS had some strangely maintained libraries for lambda

"com.amazonaws" % "aws-lambda-java-core" % AWSLambdaLibsVersion,
"com.amazonaws" % "aws-lambda-java-events" % AWSLambdaLibsVersion,
"1.1.0" // https://github.com/aws/aws-lambda-java-libs

The error was fixed by replacing above with:

"com.amazonaws" % "aws-java-sdk-lambda" % "1.11.109",

 

Posted in Uncategorized | Leave a comment

No compatible version found: @types/react-dom@15.4.2

Solution

Was puzzled by the

No compatible version found: @types/react-dom@15.4.2

In the end chaning all of the react related vers to

"^15.4.1",

did the trick

also had an error (2nd one bellow); but that was due to a server already running on the same port

Problem

npm install
▌ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░╟
▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░╟
npm ERR! Linux 4.4.0-59-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "install"
npm ERR! node v4.2.6
npm ERR! npm v3.5.2

npm ERR! No compatible version found: @types/react-dom@15.4.2
npm ERR! Valid install targets:
npm ERR! 0.14.21, 0.14.20, 0.14.19, 0.14.18, 0.14.17, 0.14.16, 0.14.15, 0.14.14, 0.14.13, 0.14.12-alpha, 0.14.11-alpha, 0.14.10-alpha, 0.14.9-alpha, 0.14.8-alpha, 0.14.7-alpha, 0.14.2-alpha, 0.14.1-alpha
npm ERR! 
npm ERR! 
npm ERR! If you need help, you may report this error at:
npm ERR! <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR! /home/neil/MEGA/MEGAsync/docs/projects/patentBot/code/patentBotUI/npm-debug.log

 

npm start

> mobx-react-typescript-boilerplate@1.0.0 start /home/neil/MEGA/MEGAsync/docs/projects/patentBot/code/patentBotUI
> node server.js

events.js:141
 throw er; // Unhandled 'error' event
 ^

Error: listen EADDRINUSE 127.0.0.1:3000
 at Object.exports._errnoException (util.js:870:11)
 at exports._exceptionWithHostPort (util.js:893:20)
 at Server._listen2 (net.js:1237:14)
 at listen (net.js:1273:10)
 at net.js:1382:9
 at GetAddrInfoReqWrap.asyncCallback [as callback] (dns.js:63:16)
 at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:82:10)

npm ERR! Linux 4.4.0-59-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "start"
npm ERR! node v4.2.6
npm ERR! npm v3.5.2
npm ERR! code ELIFECYCLE
npm ERR! mobx-react-typescript-boilerplate@1.0.0 start: `node server.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the mobx-react-typescript-boilerplate@1.0.0 start script 'node server.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the mobx-react-typescript-boilerplate package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node server.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs mobx-react-typescript-boilerplate
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls mobx-react-typescript-boilerplate
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /home/neil/MEGA/MEGAsync/docs/projects/patentBot/code/patentBotUI/npm-debug.log

 

 

 

 

Posted in Uncategorized | Leave a comment

React (TypeScript): infinite scroll

Recently I had to use an infinite scroll (lazy loading).  It took me a while to find a solution that worked well for my very simple case (lazy loading items in an infinite scroll fashion).  Hopefully this will save somebody time.

https://github.com/joshwnj/react-visibility-sensor ended up being by far the best solution that worked flawlessly  (and is extremely easy to use).  Just add it to the end of your scrollable list and lazy load once it becomes visible (p.s. you can move its position slightly upward to lazy load in a more eager manner):

<VisibilitySensor
    onChange={(isVisible) => isVisible ? this.loadMoreData() : console.log("debug: became invisible")}
/>

p.s. make sure to use arrow functions otherwise you might have some problem with this binding etc.; more details: https://github.com/Microsoft/TypeScript/wiki/’this’-in-TypeScript#fixes

to avoid small amount of polling; you might also wan to set the `active` property to false; when your component is no longer visible.

Finally react-visibility-sensor could be used for other purposes other than infinite scroll – that requires to know whether your component is visible or not.

 

Other Libraries

Most of the problems with other libraries were due them estimating weather the component is visible or not based on the position of the scroll bar.  Some did by requiring you to specify the height of each of the component.  In part this was motivated by many of the infinite scroll packages aiming at the case were the number of items would be very large 10K+ (and would only keep a small portion of visible items; to improve memory usage).  In my case I had under 1,000 items (with images etc); so these types of solutions were not necessary.  None of the libraries bellow worked well for me (the firing events were not reliable).

 

https://github.com/brigade/react-waypoint

https://brigade.engineering/to-infinity-and-beyond-with-react-waypoint-cb5ba46a9150#.faad1tmuk

Problem: didn’t update its position; so was stuck in the middle after more elements were added.

“`js

<Waypoint
onEnter={() => console.log(“waypoint: on enter” )}
onLeave={() => console.log(“waypoint: on leave”)}
onPositionChange={() => console.log(“waypoint: on onPositionChange”)}
/>
“`

https://github.com/CassetteRocks/react-infinite-scroller

PROBLEM: `loadMore` often doesn’t fire 🙁

needed to `useWindow={false}` in order to get `loadMore` to fire

`NodeView.tsx`

“`tsx
<InfiniteScroll
pageStart={0}
loadMore={() => console.log(“requested: loadMore ………………”)}
hasMore={true}
loader={<div className=”loader”>Loading …</div>}
useWindow={false}
>
{this.props.items.map(
(data) =>
<Item data={data} />
)}
</InfiniteScroll>
“`

Other Notes

list for react:
https://github.com/brillout/awesome-react-components#infinite-scroll

Many of the infinite scroll libraries are aimed at efficiently rendering 1K+ results; that is not the case for me; since I mostly just need paging/on-demand fetching; so don’t need to add virualization managing (which complicates things).


https://github.com/orgsync/react-list

a newer fork: https://github.com/CassetteRocks/react-infinite-scroller
original (not updated for 3 years) https://github.com/guillaumervls/react-infinite-scroll

https://github.com/jasonslyvia/react-lazyload

keywords: react simple non virtualized infinite scroll with page fetching loading lazy load

 

 

Other Notes

unrelated issue that I’ve experienced with http://www.material-ui.com/#/components/drawer is that having a property

height: window.innerHeight

would make the other component unresponsive/loose focus; removing that property fixed it.

 

 

 

Posted in Uncategorized | Leave a comment

ReactJS: Uncaught TypeError: Cannot read property of undefined

Problem

You get: Uncaught TypeError: Cannot read property of undefined

This is due to react trying to render components that rely on variables that haven’t yet been set (quite a common occurence).

Solution

You can use conditional rendering shortcut to get rid of this annoyance; this is possible due to react treating undefined as false; so you can then add the following:

{this.props.MyComponentsVar && <MyComponent />}

p.s. this will only be rendered if this.props.MyComponentsVar is defined

https://facebook.github.io/react/docs/jsx-in-depth.html

 

 

keywords: react

Posted in Uncategorized | Leave a comment

VM54310:600 Uncaught TypeError: _XXXXX2.default is not a constructor

Problem

VM54310:600 Uncaught TypeError: _XXXXX2.default is not a constructor

Solution

need to export default class e.g.:

export default class StateController { ...

 

 

 

 

keywords: typescript VM54310:600 Uncaught TypeError: _XXXXX2.default is not a constructor ts js webpack

 

 

Posted in Uncategorized | Leave a comment

Gradual Migration from JavaScript to TypeScript

Task

You have an existing project in which you’d like to use TypeScript.

Solution

Simply remove the outDir from tsconfig.json, e.g.:

{
  "compilerOptions": {
         "allowJs": false,
    "outDir": "./tsDist/",
    "module": "es6",
    "target": "es6",
    "experimentalDecorators": true,
    "moduleResolution": "node"
  },
  "exclude": [
    "node_modules",
    "tsDist",
    "dist",
    "webpack.config.js"
  ]
}

Everything should work now (since ts file will be compiled to a JS file at the same location; so all the imports etc will work just fine).

Sometimes things get out of sync between ts and js files (might have something to do with IntelliJ); in that case I just manually execute tsc command.

Alternative approach didn’t work well for me; e.g. due to the 100+ errors that would need to be resolved (when I simply renamed the js -> ts files).

keywords: mixing ts js typescript javascript in the same project incremental

 

Posted in Uncategorized | Leave a comment

enabling decorators for mobx

mobx is really great for state management (I prefer it over redux)

it is even handier if you can use decorators; to do that its probably easier to use babel 6 (due to some of the issues described here).

using npm install –save you should end add the following packages:

 "babel": "^6.5.2",
 "babel-core": "^6.18.0",
 "babel-loader": "^6.2.7",
 "babel-plugin-transform-decorators-legacy": "^1.3.4",
 "babel-preset-es2015": "^6.18.0",
 "babel-preset-react": "^6.16.0",
 "babel-preset-stage-1": "^6.16.0",

and then just add the following to .babelrc

{
  "presets": [
    "react",
    "es2015",
    "stage-1"
  ],
  "plugins": ["transform-decorators-legacy"]
}

 

refs:

http://jamesknelson.com/using-es6-in-the-browser-with-babel-6-and-webpack/

 

 

 

keywords:

// —- ESNext syntax with decorators —-

ES6 decorators babel

Enabling decorators (optional) Decorators are currently a stage-2 ESNext feature. How to enable them

Posted in Uncategorized | Leave a comment

webpack issues

may need to run ‘sudo npm install’ first

install missing dependencies with `sudo npm install <DEP>`
“`
Module parse failed: /home/neil/Dropbox/w540-bak/bitbucket/sa-client-ui/src/app.js Unexpected token (199:40)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (199:40)
“`

This seems to fix above: `sudo npm install –save-dev babel-loader` as mentioned in https://github.com/HenrikJoreteg/hjs-webpack

`Module not found: Error: Cannot resolve module ‘react’`

seems that packages have to be installed with `sudo nmp install …`

may need to run ‘sudo npm install’ first

Posted in Uncategorized | Leave a comment

DynamoDB: An AttributeValue may not contain an empty string (Exception)

Problem

com.amazonaws.AmazonServiceException: One or more parameter values were invalid: An AttributeValue may not contain an empty string (Service: AmazonDynamoDBv2;

Solution

This cryptic message basically says that dynamodb is not able to save fields with empty strings (or null) (a rather inconvenient and artificial limitation); but doesn’t say which ones …

This post suggest a related solution that works quite nicely.

implicit class RichJsObject(original: JsObject) {
  def omitEmpty: JsObject = original.value.foldLeft(original) { 
    case (obj, (key, JsString(st))) if st.isEmpty => obj - key
    case (obj, (key, JsArray(arr))) if arr.isEmpty => obj - key
    case (obj, (_, _)) => obj
  }
}

Then you can just apply it to your jsObj as: jsObj.omitEmpty

Often you may actually have a jsVallue; which could be converted to jsObj:

js.as[JsObject].omitEmpty.toString()

 

keywords: scala play json dynamodb empty null string insert

Posted in Uncategorized | Leave a comment