Browser compatibility ... ES6 ... FileReader ...!

[nfreear]

Hi @timcoughlan,

A few thoughts ... You're obviously pushing the boundaries with things like FileReader etc. — which is great!

I just wondered how we should let the user know ... perhaps have a link at the top of the page to https://browsehappy.com, which is shown/ hidden based on feature-detection?

Also, I noticed a bit of ES6/ES2015 (or 7 or 8 ... I loose track!):

document.addEventListener('keydown', (event) => {
  const keyName = event.key;
  ...
});

(https://github.com/IET-OU/our-journey/blob/master/src/our-journeys.js#L79)

If you want to go that route, its currently best practice (?) to compile from ES6 to ES5 for the browser. We can use a tool like Babel (https://babeljs.io/). (I've not done much ES6, but colleagues used it a fair bit for the new nQuire, with compilation).

Of course, if you're developing for Node, it's less of a problem.

Actually, it may not be necessary to Transpile/compile ?!

• Medium: you might not need to transpile..., 2017
• https://caniuse.com/#search=ES6

I hope that helps.

Ta,

Nick

[timcoughlan]

Hi Nick,
Best to talk this through at some point soon. I've just been developing it for Chrome and aware that it may not work elsewhere but it was important to have a save function up and running as quickly as possible!
The approach to keyboard navigation may be improved upon as well. Still figuring out the best way to support the shift between the svg area and the form.

[nfreear]

Hi,
Yes, the save function should be v. useful!

Just something to consider post-workshop ...

N.

[nfreear]

I suggest we put something developer-oriented in the README, e.g. based on,

• https://godban.github.io/browsers-support-badges/

(Start off just saying, e.g. Chrome + Firefox ?)

And, something very simple in the HTML — https://browsehappy.com/, etc.

N.

[nfreear]

Compatibility requirements

Via :~ https://caniuse.com/#index

• Promises ~ https://caniuse.com/#feat=promises
• FileReader API ~ https://caniuse.com/#search=FileReader
• SVG foreignObject ~ https://caniuse.com/#search=foreignObject
• Inline SVG ~ https://caniuse.com/#feat=svg-html
• Base-64 en/decode ~ https://caniuse.com/#feat=atob-btoa
• Accept ~ https://caniuse.com/#feat=input-file-accept
• Form val. / required ~ https://caniuse.com/#feat=form-validation
• ES6 const ~ https://caniuse.com/#feat=const
• Let ~ https://caniuse.com/#feat=let
• ... ?
• WAI-ARIA ~ https://caniuse.com/#feat=wai-aria

Do NOT use

• Arrow => functions ~ https://caniuse.com/#feat=arrow-functions
• Async/ await ~ https://caniuse.com/#feat=async-functions

---

• Gist: Can I Use multi-features page 3db04..
• https://npmjs.com/package/eslint-plugin-compat
• https://browserl.ist/?q=last+1+version%2C+%3E+1%25%2C+not+ie+%3C+12

{
  "browserslist": [
    "last 1 version",
    "> 1%",
    "not ie < 12"
  ]
}

---

Browser support / testing

1. Most testing/ support :- latest Chrome;
2. Should work / minimal testing :- latest Firefox, Edge(?), Safari, Opera;
3. May work / no testing :- Baidu, QQ, UC, Opera Mini, Android browser ... (https://browserl.ist/?q=last+1+version)
4. No compatibility :- all Internet Explorer versions (displays a 'no compatibility' message!)