search

vizhub-core / vizhub-feedback

VizHub feedback issue tracker
32 stars 3 forks source link

bundle.js not updating #760

Closed kalmdown closed 2 years ago

kalmdown commented 2 years ago

Am trying to work through the CSS Color - Radial lesson. I forked the CSS Named Color loader and started to edit it. Making changes in index.js is not changing the output. Looking at bundle.js it is still the same as before forking.

index.js image

bundle.js image

curran commented 2 years ago

Thanks for reporting!

If you open the console, are there any errors?

curran commented 2 years ago

Also, bundle.js is not editable, because it is a derived file. If you want to change it, change index.js and it will update automatically.

kalmdown commented 2 years ago

I understand that it is not editable but I assumed that bundle.js is what gets rendered, because what was being rendered was what was in bundle.js, not my code.

I had done a Clear Cache and refreshes and the problem stuck around. When I checked, there were a number of "Forbidden 403" error messages that suddenly cleared up ... so I can't pursue why it was happening now.

curran commented 2 years ago

Can you share a link to the viz that's causing the issues? I can investigate.

kalmdown commented 2 years ago

https://vizhub.com/kalmdown/5e90574ec98c44b58fdfb028b351fadf?edit=files&file=index.js

Nothing is rendering and I get no console output or errors. Get two issues: image

curran commented 2 years ago

Your program seems to be running just fine.

image

Try backgroundColor instead of backgroundcolor.

kalmdown commented 2 years ago

Changed, but still no joy.

image

curran commented 2 years ago

Try backgroundColor: d['RGB hex value'],

image

You had backgroundColor: d['RGB Hex value'],

The field name did not match - upper case vs. lower case H.

kalmdown commented 2 years ago

Any way to get better debugging tools - like something that can compare similar data names and point that out?

kalmdown commented 2 years ago

And...thanks for debugging. Sorry to have listed as a defect. The problem with browser based IDE's is knowing where the error is coming from - your code, the IDE, proxy issues, browser issues... Not knowing where issues like this come from is a huge blocker for learners and very discouraging. Having ways (teaching tools) to help get over "invisible" errors can help keep them/us on track and be less discouraged.

curran commented 2 years ago

Indeed, I agree. The Chrome developer tools are the best bet that I know of these days. I have made my best effort to have VizHub surface exact files and line numbers for errors (using sourcemaps), but yes, always looking for ways to improve it!

I don't think any debugging tool exists today that is sufficiently advanced to detect something like that bug you had with the capitalization, and suggest a fix. If you know of anything like that, I'd be curious to see it!

kalmdown commented 2 years ago

The reason I felt that particular defect was catchable is that the name came from the data. So the context to check is much smaller than any variable. Because it was under d the expected correct variables is a short list and if something is close but only off by capitalization or minor spelling it would be worth asking user if they meant something else. Similarly checking against variables within context and a few degrees outside (user's imports but maybe not external ones) to see if any are similar should be easy.