Develop Reference

Getting Custom Widgets, Static Javascript, and Voilà to all play nicely with each other in Jupyter Notebook

I’ve been working on a Jupyter Notebook for the last month and put together a very nice toolkit for my DevOps team out of it. I want to be able to containerize this tool, or at least host it on our own intranet, so that the rest of the team can use it without having to go through a long install/configuration sequence on their own machines. Voilà seems to be the best tool for doing that, as my tool uses the Python kernel extensively and this seems to be a way to host it on a remote machine while still retaining the ability to use the kernel.
My tool involves a couple of custom widgets. They’re very simple and there to communicate information better through the UI - they’re an image object and a label object that can slowly fade out over the course of several seconds to indicate that an operation (such as saving) was either recently completed or done so long ago that the information is likely no longer relevant. (I don’t want the user to see a ‘Data saved!’ message from 15 minutes ago, for example.) I managed to put these custom widgets together just fine - but like all custom widgets, they needed additional Javascript code to display on the Notebook.
Putting the relevant javascript in a cell with the ‘%%javascript’ magic tag causes the custom widgets to work perfectly - however, I do not want to rely on this as a long-term solution for two reasons. One reason is that I want the javascript to be able to be easily rewritten, stored to a repository, and viewed on tools outside the notebook itself - I don’t want to commit a new version of the notebook every time I need to change the Javascript, and I certainly don’t want to go digging through the .ipynb file when I want to read the code itself.
The other problem is that Voilà does not seem to support the ‘magic %%Javascript’ tag, at least at the moment. Putting the javascript code inside a cell before the cell containing the application and then running the entire notebook through Voilà does not seem to execute the Javascript code, only injecting it into the HTML - errors pop up throughout the Javascript console, and all of my custom widgets fail to render.
Is there some accepted way to create a Javascript file, one that would be kept in a /static folder or something like that to match up with images and HTML files, and then configure some Python code so that the Javascript file is imported and executed at the very least before my application’s widgets are created? I’ve looked at the custom.js option inside the root Jupyter settings, and would like something more local to the project if at all possible. I’ve also tried to move the files I created into an existing /static folder inside Voila and import them in the template with the following lines of code:
<script type=“text/javascript” src="{{resources.base_url}}voila/static/image_extra_features.js"></script>
<script type=“text/javascript” src="{{resources.base_url}}voila/static/label_extra_features.js"></script>
But this seems to just include, but never actually execute, the relevant code.
I’m sure I must be missing something. (I thought I found something promising when I chased the ’ _view_module_version’ section of the Python model of the custom widget down, as the version of the custom widget isn’t specified anywhere in the Javascript file, but that seemed to be a dead end- where is the module version supposed to be listed? Is it only in the Python file?)
Does anyone have any idea as to what could be the issue?

Why isn't including this 'bigInt' script working? (p5.js web editor)

I'm following The Coding Train and learning about the p5.js library. In this particular exercise, I want to work with potentially massive integers, so I looked around and found peterolson/BigInteger.js.
I attempted to include this script in my project in the same way the p5.js library itself is included, and as suggested in BigInteger's readme:
<script src="http://peterolson.github.com/BigInteger.js/BigInteger.min.js"></script>
However, after doing so, I still get bigInt is not defined errors when I try to reference it from my script.js.
Could anyone help me understand what I'm missing? You can see my project in the p5.js web editor here!

Questions like these are best answered by looking at your developer tools. Check out the JavaScript console and the network log to see the error you're getting.
Basically, you can't reference files on GitHub the way you're trying to reference BigInteger.min.js. You either need to find a CDNS that hosts the file for you, or you need to upload it to your sketch and reference it via a relative url.

Need help p5.js and Atom Text Editor

Well I recently started off with atom and p5.js well I am very new to JavaScript. Here comes my problem : When I try to run the file it shows me "sketch.js is not a .py file, exit" . I checked the the selection is set to JavaScript but can't figure out what is wrong.. Please Help !
Well the "sketch.js" is the default one which comes with "p5.js" and yes I have installed "node.js" so no issues with that and the problem comes when I edit the "Sketch.js" template and try to run it , it shows saving and after that it says "sketch.js is not a .py file, exit"

You need to isolate your problem. Is the problem in the Atom editor, or is it with P5.js?
Try running your sketch as a standalone .html file that you create with a basic text editor (like JEdit or Notepad, not with Atom). Can you get that working by itself?
Then try running a more basic JavaScript application in Atom. Try simply printing something to the console. If you're still getting the error, then you know it has nothing to do with P5.js.
Isolating your problem like this will help you refine your Google searches, and it will make it easier for people to help you.
Note that P5.js does not require node.js, which runs on a server. It requires regular client-side JavaScript.
I'll also just note that if you're having trouble with stuff like this, it's a good idea to stick with a basic text editor and write and run your code by hand for a while. Code editors hide a lot from you, which can be nice, but not if you're still learning the fundamentals.

You are likely using an editor like Genie or something which runs python programs by default. Have you installed node.js? If not install it and then browse to the directory using command prompt. Then run "C:\Program Files\nodejs\node.exe" file.js

Adding JQuery/Javascript Files to Project

I have a project I am working on at work that is ASP.NET in TFS. I have checked out the solution and have made some adjustments to the code behind with no issues. When I try to add JQuery and a Javascript file to the project, it does it fine in Visual Studio 2012. But when rebuilding and running it won't execute the javascript code. It's like it ignores it. When I put breakpoints in the Javascript file I get the message 'The breakpoint will not currently be hit, no symbols have been loaded for this document'. I simply cannot get the web page to acknowlegde either the JS file, or the JQuery file.
(And yes, I have scoured StackOverflow.com and tried all the suggestions mentioned)
Any suggestions appreciated!

Can i use Bootstrapping to style single pages within a web-app?

I'm developing a web application, and I recently discovered the need of a basic input form. The rest of my application does not have much of this, mostly single input-fields. I figured I would try to use a javascript library for validation, and ended up choosing parsley.js.
in this youtube tutorial, the tutor uses bootstrapping, a term I have come across a lot lately, but have no experience with. I figured I'd try it out in the single page of my web app.
However I get errors on the first character of the css I try to import, stating that < is an illegal token. This is of course the start of the file <!DOCTYPE html>. So in other words, the .css is found and included, it is just not accepted. This error has been repeated with a couple of different import sources now.
I've tried to look a little outside the box, to figure out why. I read posts like these:
What is bootstrapping?
Setup bootstrup file in java web application
These have led me to suspect that bootstrapping might not be meant for importing a style sheet, for a single page which is only a part of a web app, like I am trying to do.
So, is it wrong to think that I can use bootstrapping as I would import a .css file, for a single page? If not, what else might my problem be?
EDIT:
I forgot to tell that I am importing the css and js libraries through their online url's. If i copy them to my workspace, and import them from there, I get this error:
PWC6199: Generated servlet error:
The code of method _jspService(HttpServletRequest, HttpServletResponse) is
exceeding the 65535 bytes limit