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?

Printable Vue Full Calendar?

We're porting over our old Full Calendar (FC) implementation to vue and was trying to restore the printable functionality that we utilized. But upon inspecting the FC Node modules I didn't see any CSS related to printing.
After several Google searches that yielded no results, I began to get a little nervous at the thought of having to code it out myself.
Is there a piece that I'm missing here? perhaps a separate node module that I missed in the documentation?

The upgrade guide at https://fullcalendar.io/docs/upgrading-from-v3 says
No need to use a separate tag for a print-only stylesheet. It will be automatically included within the normal core/main.css, by use of media queries
So based on that in v4 you should be able to print correctly by default without including any extra files.

Attach PDF to PDF as attachment (not as a page) via Javascript in HTML (not in Acrobat)

I would like to generate a PDF portfolio using JS from an HTML/CSS page on a local machine. I would use a PDF template file which includes a PDF portfolio Navigator in SWF form. I have successfully accomplished this using C# and a command line program, but can not identify the proper Javascipt components to do this browser-side or pseuo-server with Node.js. Basically, I am looking for something which will allow me to append a PDF to a new or existing PDF via configuration choices and an 'assemble' action using a JS or HTML button. iTextSharp provides the required PDF interaction functionality, but I can not figure out to run this inside an HTML to allow configuration via the HTML/CSS DOM (i.e. checkboxes, text field desciptors, etc...). Does a library with this type of functionality exist?

So you want to create a PDF using JavaScript?
On a quick google search, I found what appears to be a javascript library for creating and manipulating PDFs call jsPDF
If you want information on how to upload files with JavaScript alone, here is an article on how to do that. It also shows you how to use the file element.
For style, I recommend using a CSS Framework is you don't know much about CSS. I personally use Twitter Bootstrap for quickly prototyping things. It's quick and easy, and has good documentation. You can also use this to see how to make a form in HTML. I haven't got any good starter tutorials for HTML off the top of my list, sorry.
If you don't know much about JavaScript, when it comes to getting the options from the form, so that you can use them as configuration options, I'd suggest using the jQuery framework. It'll help you get up and running quickly enough
Note, all of this shouldn't replace basic training in JavaScript and HTML/CSS. Frameworks make things simpler, but if you don't know how to do something without a framework, you're going to have a hard time with a lot of the more complicated things. This goes for every language

How to handle string localisation in jQuery mobile?

I am making an android app using phonegap and jQuery mobile.The app will also have option for displaying text in other languages like Tamil,Kannada and Telugu.I want to change all the text displayed when the user clicks on these options for changing the language. What is the best way to do that?

I would look at i18next, a JS library that runs entirely in browser and whose localizations are stored in JSON. It works with jQuery and has several other nice features. Seems like it would cover your needs.

I'm running a Application which supports around 5 European languages. I manually created a language file in the format of JSON. I wrote custom functions to replace the UI element's labels in a separate file which triggers when a page loads.
It just works fine for me.

check out the HTMLed.js framework for jquery mobile localization on GitHub link

What is the best way to convert HTML into Excel

I have an HTML page which has a flash chart(FusionCharts) and HTML table. I need to convert this whole thing into Excel. HTML table should be displayed in cells of excel sheet. Flash chart can be displayed as an image.
Is there any open source API that we could use for achieving this. Could you let me know what are the possible options.
Can this be done by using javascript alone.

The HTML table is relatively easy. You can download the page, parse the HTML (there are various HTML parsing libraries available), extract the table and convert it into CSV (which Excel can load), or directly create an Excel file, e.g. using Java POI, as suggested above.
The Flash part is significantly harder. There are quite a few tools available to capture flash to an image, you'd need to use one of them. This can be tricky, as Flash might be interactive, so you'd possibly have to remote-control the Flash part so it shows the right image before capturing. Hard to tell without more info.
That said, screen-scraping (which is what you're doing) is always labour-intensive and fragile. You should really push for a better interface to get your data from, it will save loads of hassle in the long run.

Just set the content type of the page to "application/vnd.ms-excel". If the html page is just a table it will open with excel and look perfect. You can even add background colors and font styles.
Try some of these content types
application/excel
application/vnd.ms-excel
application/x-excel
application/x-msexcel

Excel can convert HTML tables by default. The easiest way to force it to do this is to save the HTML file with an XLS extension. Excel will then open the XLS as if it were its native workbook.

There's a very good Java POI api that would let you do that, but it's Java.
http://poi.apache.org/
If you're on Win32 you can also use Excel's COM api, there are quite a few tutorials on the net.

I cannot offer any advice on the Flash part, but I have done HTML table to Excel many times. Yes, Excel can open HTML tables but most HTML tables out there have extraneous crap in them that can make it fragile to consistently parse the tables.
CPAN module HTML::TableExtract is a wonderful module that allows you to focus on the non-presentation specific aspects of the table you are trying to extract. Just specify the column headings you are interested in and maybe specify the title or class of the table and you are mostly set. You might have to post process the rows returned a little, but that is considerably easier than dealing with the underlying tag soup in all its glory.
Further, for output to Excel format, stick with Spreadsheet::WriteExcel rather than the OLE interface. That way, you do not depend on having Excel installed for your program to work and things go a little faster.
Make sure you specify the data type of cells if you do not want content to be changed automatically by Excel upon opening the files (another reason I do not like sending around CSV files). Use a configuration file for formatting information so that you can change how the spreadsheet looks without having to change the program.
You can always use Excel's built-in charting facilities to replace the web site graphs.
This combination has enabled me to generate pretty good looking documents comprising several hundreds of megabytes of scraped data (with logos and image links etc) using just a few hundred lines of Perl and a couple of days' work.

What you're trying to do is fragile and difficult to maintain. You should attempt to create a csv feed to fetch the data. All it takes is for someone to come along and modify the HTML and your scraper will throw up on it (probably years after anyone remembers how your program works).
Try to get CSV and image data from the original source (ie, database or whatever) and build the Excel file from that.

I will add to SpliFF's answer that when you have your data as a CSV file you can set the mime type of the page to application/vnd.ms-excel which will open the page in Excel