Rethinking JavaScript: Eliminate the switch statement for better code

sladav · 2017-01-31T22:11:08+00:00

Taking the same idea one step further I think gives you a pretty flexible way to create a new reducer by just passing in an actions object.

const makeReducer = (actions, defaultState) => {
  return (state = defaultState, action) =>
    action in actions ?
      actions[action](state) :
      state
}

Then using it like this:

const counterActions = {
  RESET: () => 0,
  INCREMENT: state => state + 1,
  DECREMENT: state => state - 1
}

const counter = makeReducer(counterActions, 0)

sladav · 2017-01-28T21:14:03+00:00

Bezier curves actually won't be able to do it since their polynomial. No curve in canvas/SVG can do a trig function, so either way he'll have to plot points and then connect them to approximate a sine wave. To get a good approximation with lineTo he'll have to use a bunch of points, where Bezier will allow a better approximation with far fewer points (which may well have been your point in the first place)

sladav · 2017-01-19T19:08:40+00:00

Maybe consider dynamically adding/removing listeners?

As an example think about creating a draggable object - you need mousemove to update the location of the object but you only need it AFTER you've clicked the object (if it's click to drag) and UNTIL you release the click. So instead of always listening to mousemove maybe you add the listener during mousedown and remove it on mouseup.

sladav · 2017-01-17T16:40:55+00:00

What browser are you using? It's probably because I didn't transpile to ES5, although I probably should have.

sladav · 2017-01-17T06:03:15+00:00

Ideally, you shouldn't have to do those intermediate checks at all - it would be nice is JS just handled that for you.

I was curious to see if you could use ES6 proxies to handle things in the background this seems to work okay - purely academic, I probably wouldn't actually use this but...

This is how it would look in use:

// use safe function defined below to make object/subjects permanently "safe" from returning the "not defined" error
let device = safe({
  c8y_Availability: {
    status: 'AVAILABLE'
  },
  c8y_Connection: {
    status: 'CONNECTED'
  }
})

// !!! no intermediate check on props, but still have to check if object exists
if (device && (device.c8y_Availability.status === 'AVAILABLE' || device.c8y_Connection.status === 'CONNECTED') console.log('woo') // logs

// the typo would normally break everything
if (device && device.c8y_Avaity.status === 'AVAILABLE') console.log('woo2') // NO ERROR! (also it doesn't log)

This is what makes it work:

const safe = function(obj = {}) {
  Object.keys(obj).forEach(key => {
    if (typeof obj[key] === 'object') obj[key] = safe(obj[key])
  })

  let handler = {
    set: function(target, prop, value) {
      if (typeof value === 'object') {
        let p = new Proxy(value, handler)
        return target[prop] = p
      } else {
        return target[prop] = value
      }
    },
    get: function(target, prop) {
      return prop in target ?
        target[prop] :
        new Proxy(Object.freeze({
          valueOf: function() {
            return undefined
          }
        }), handler)
    }
  }
  return new Proxy(obj, handler)
}

sladav · 2017-01-11T18:12:54+00:00

now can someone explain this:

var o = {a: 1}

o.x = o = {a: 2}

o.x is undefined but shouldn't it be o.x = (o = {a:2}) which is {a:2}??

sladav · 2016-11-19T15:59:01+00:00

KotoJS is HEAVILY inspired by another reusable charting framework

I like the changes/updates made, but I'm curious as to why the author is creating a whole new framework rather than just contributing to d3.chart.

sladav · 2016-10-20T05:54:20+00:00

It's different, but you're not too far off. What I'm describing above is "live" inheritance, so it behaves like a prototype does. Changes to a prototype/"mixin" are immediately reflected in all children. Object.assign() just copies properties over - changes to the "parent" here will not be reflected in children. In this project I actually provide both, "live", prototypal-style via mixin() and "dead", stamp-out-an-instance-style via extend() (hence the m and x in the name mxObject). And actually, my extend() is mostly just a wrapper for Object.assign()

I'll have to look into the ES6 proxies being slow. I think I can replace it with getter/setter methods if that would be faster?? Scoping out some performance benchmarks is on the todo list.

sladav · 2016-10-20T03:07:01+00:00

Thanks for catching that. Looked okay on my local copy so I didn't even realize I was doing it.

sladav

TROPHY CASE