Named modules, Diffing + legacy code

[montogeek]

I just finished the first tutorial, amazing stuff! Been waiting for doing something like this but never found a good place to start, now I have it. Thanks for coming up with this academy!

I want to leave some feedback after finishing it:

• webpack plugin for named modules on HMR, this would help apprentices to debug quickier
• It would be great to see changes easier, this is called Diff Highlighting, after investigating a bit how it could be done, I found 2 ways:

1. This project is using Ocular, that also uses PrismJS, this is an example that hooks on Prism to add CSS classes to lines that you want to diff: https://github.com/survivejs-sites/survivejs-es/blob/master/utils/highlight.js
2. Ocular is using marked (good decision!), this is an example using Marked renderer.code hook: https://gist.github.com/choxi/6fa98f7b203bf2dfdcfa (source highlight as diff and language highlightjs/highlight.js#480)

• In https://uber-common.github.io/vis-academy/#/building-a-geospatial-app/4-a-basic-chart, a component called Spinner is used but never imported
• In the same page an object called hoveredObject is used in render, but never declared, same with a function called _onHover
• In the same page it says: "This code produces this output:", but there is no example

I could contribute to some of those changes if you agree with them :)

[jckr]

Hi thanks for the feedback! @apercu I'll let you weigh in on the first half
On the 2nd half - we just gave this tutorial live and this part of the app (4) seems to have trouble. so I'm going to touch it up today and take your remarks into account. thanks!

[balthazar]

Hey! Yeah definitely for the named modules, I'll add that thanks! About the diff highlighting though I'm a bit concerned we will have to show all the components at every stage to do a complete diffing of it and that might be a bit big, unless you had a better idea?

[montogeek]

@apercu Yeah, it could take a lot of space, maybe just show 2 or 3 lines above and below the change? Check for example webpack docs pages: https://webpack.js.org/guides/code-splitting/

[nharrisanalyst]

Thanks for the tutorials and thanks for deck.gl it is great but in the basic chart we add the Spinner component it is giving me an error ReferenceError: Spinner is not defined.
I don't see where Spinner is imported when I delete the Spinner component the app compiles but with the Spinner component the app does not work and I get the error.

[montogeek]

@nharrisanalyst Check parent folder contents, everything is there, just copy and paste it to your folder

[nharrisanalyst]

thanks