We Keep Coding

How to avoid '#' sign expansion in `vega#3`

In an HTML script, a call to fetch a package ending in vega#n where n is a version number, is being incorrectly expanded and causing a 404 error. I'm trying to find out why, and to prevent this.
Apologies in advance for the long-winded explanation, but I'm not sure where the problem lies so I'm trying to be as specific as possible.
I'm following the user guide to try and load a vis into a jupyter notebook. This executes the script in-browser, I believe, but for some reason has support for requireJS, which means that global modules aren't correctly loaded when using the import method, which basically uses html's <script> tags to load the module.
This can be worked around by calling define, as described in a similar problem with D3, here: https://github.com/mpld3/mpld3/issues/33#issuecomment-32101013.
I've written this gist to show a working example:
https://gist.github.com/lJoublanc/439e2f687b7aedd6fbdea5adab5cee0f
However, for some reason (either requireJS or something else - my JS knowledge is limited), expands URLs of the form https://cdn.jsdelivr.net/npm/vega#3 into something like https://cdn.jsdelivr.net/npm/vega#3.js?v=20180324103700 which results in a 404 error.
Using the github URL (i.e. without the #3) works fine though.
Any idea if this is requireJS doing this, or the CDN? How would I work around it?

How to get javascript variables in a debugger when using webpack

I am developing a react application with the bundler Webpack.
I would like to debug this application with a browser console (here i use chrome).
I have used source-maps and equivalent in my webpack config:
devtool = 'inline-source-map';
Now errors are displayed with the exact line of the original file.
The problem is that i want to access to live variables with the console.
So far I found two ways to display them:
1- Add a library in webpack.config.js
output: {
library: "lib"
},
export variable in the code export var foo = 34; and finally inside the browser console use lib.foo.
2- use breakpoint and access to variable set in the file
Is there another solution to access live variables?
Thanks

There are other solutions, but that means defining global variables and that should be avoided as it can have side effects in the code you're trying to debug, so you might run into problems that are not identical with and without exposing the variables, which makes your debugging experience very frustrating.
Using breakpoints is the best you can do for debugging purposes. The browser debuggers, especially the Chrome devtools, are extremely powerful and it's absolutely worth spending some time to get familiar with them.
Because pausing the app at every breakpoint you set for getting to a certain point can be tedious, you can use conditional breakpoints. One way is to use the debugger statement in your code, in that case you can guard it by any JavaScript you like, for instance this will only pause when the input to the function is 5:
function debug(input) {
if (input === 5) {
debugger;
}
// Other code
}
Another way is to add conditional breakpoints in the Chrome devtools. As you've configure source maps, you can set the breakpoints in the original source under Sources > top > webpack:// > .
To set a conditional breakpoint you simply right-click a line and choose Add conditional breakpoint... and enter the condition, e.g. input === 5. You can also Edit breakpoint... to change or add a condition to an existing breakpoint. For more information about breakpoints in Chrome see Pause Your Code With Breakpoints.
In the Sources tab you can also right click anywhere and Add folder to workspace so you can edit the sources directly and save the changes to disk (in older versions of Chrome it's a bit more complicated to add a folder to the workspace). To let Chrome know that the source maps of webpack correspond to your workspace, you can right-click any webpack source map and select Map to File System Resource... and you simply choose the correct file of the workspace. After that, all the sources of webpack should automatically be mapped to the correct files. Now you can set the breakpoints there and when you change something and save it (Ctrl + S or Cmd + S), webpack will recompile it. See also Set Up Persistence with DevTools Workspaces.
Sometimes setting a breakpoint might be too much effort for only getting values of variables. With just console.log you probably end up with a lot of different messages. To make it easier to find the messages you need, you can use console.group which lets you put messages inside a group, that can be expanded and collapsed. The groups can also be nested. Use console.groupCollapsed if you want the group to be collapsed initially.

Meteor cannot read property 'click' of undefined

I'm having an issue where in production only (not development) I get hundreds of cannot read property 'click' of undefined with 3-30 on each click, and a few cannot read property 'submit' of undefined. This very well may not be an issue with Meteor but with my code, so I'm just looking for any ideas why this may be happening or how I can debug it. All my events are either in Template.events or Template.rendered. It happens on every page and no matter where I click.

There are a couple of things that can cause this.
The first is that in production mode latency is a lot higher. So if you've automatically assumed that when a template is rendered the data is ready you could get all sorts of undefined as the object's are null for a very short time when meteor initally loads.
You could check your code to see if you've used any findOne or find. You need to ensure that the result of your query is properly handled in the case that there aren't any results, for that initial load. i.e
var data = myCollection.findOne(...);
if(data) {
....
}
or
var data = myCollection.find(...);
if(data.count()>0) {
....
}
The other thing that might cause it are atmosphere packages that you're using that might not be mapped correctly.
To check this have a look at your network tab in the chrome inspector:
Look through for files whos extensions don't match their content (js & css files).
If a file is a .js file it might have HTML content (Meteor doesn't serve up 404 errors, instead giving them html whichever path is called, so no explicit errors are given).
If this is the case figure out which file it is and map it correctly. (You might be calling click to a plugin that didn't load correctly). In production mode files are minified and the package paths change so this might also be it.

How do I include the CLDR.js library in my Ember application?

I'm building an Ember application which started using the ember-skeleton (which means I'm using Rake Pipeline as my build toolchain). I'm using ember-i18n, and that constantly throws warnings about not having the CLDR.pluralForm function.
I've added the CLDR plural functions which ember-i18n uses to the app/vendor/ directory and added that file to my Assetfile. I've verified that the code is included in my app.js before the ember-i18n code. I've also added the appropriate require lines in my main.js:
require('plurals');
require('ember-i18n');
Still, ember-i18n is giving warnings. This is the code where it's happening:
if (typeof CLDR !== "undefined" && CLDR !== null) {
pluralForm = CLDR.pluralForm;
}
if (pluralForm == null) {
Ember.Logger.warn("CLDR.pluralForm not found. Em.I18n will not support count-based inflection.");
}
How do I make sure CLDR is defined in my app?

Because no-one else has, I will suggest a few things I might look at if I were debugging the problem myself.
If the message you see in your site is the same as in the fiddler, it is due to the files just load out of order. Pretty much "plural" must load before the "i18n" plugin. If you flip the order of the linked files it will work (I forked the error-ing example).
I would try validating I am wrong by throwing some debugger; statements into each file to see which actually gets loaded first on the browser.
Because of your require('plurals') I am going to assume you are using requirejs (github is down for maintenance so I can't actually examine ember-skeleton at the moment... so this might get an edit in the future). If this assertion is true, you need to declare that 'plurals' is a dependency of 'i18n'.
"If you do not express the dependencies, you will likely get loading errors since RequireJS loads scripts asynchronously and out of order for speed." - RequireJS API
This means you probably will end up wrapping the two calls into one, adding a define or making a "shim"; these (and more) examples can be found on the RequireJS site.
Sorry if this does not help you but without seeing it actually broken; it is hard for me to debug the problem.
EDIT: Looking at the ember-skeleton, I don't see requireJS. I have never used rake (we ended up writing our pipeline in nodeJS) so I am not quite sure if you were actually trying to concat the files with require "blaw" in rake or if you actually trying to use both.... So now I assume this answer might not be super helpful.

Why does html5 boilerplate use Twipsy and Prototype when it builds jQuery code?

So I just finished writing a single page with html5 boilerplate and everything is find with the dev code (the original one I just finished writing). Google Chrome and Firefox love it and display it well.
So I use the ant script ( ant build or ant text to skip jpeg/png optimization ) and browse to /publish/ to view it. And I got a javascript error :
Uncaught TypeError: Cannot read property 'Twipsy' of undefined
But the fact is I never used Twipsy or prototype, just jQuery ... so I run a javascript debug console and see in the generated javascript file a reference to Twipsy and Prototype. But I never use any of those in my code. So what's wrong ? and what can I do ?

Html5Boilerplate use a kind of very strong cache which actually keep the files you already delete in your project and always inline / include it in future build. You must delete publish and intermediate forlder to kepp your builder up to date.