Friday, November 17, 2017

Useful JavaScript and More

My Day Job has been keeping me rather busy the last few days, so I haven't had a chance to wrap up the series of Shapes posts I was working on.  Instead, I'll give a quick shout out to a few useful bits of JavaScript I've done a little experimentation with for Day Job.

First off, there's jsTree.  jsTree is JavaScript for a tree-like user control.  It can be created and manipulated via script, or the script can be applied to a set of nested HTML lists or JSON data to "tree-ify" it.  For what I was prototyping, it took less than ten minutes to read the jsTree documentation, mock something up in an HTML file, and then apply the jsTree script to turn it into an interactive tree.  A stylesheet reference, two script references, and about eight lines of JavaScript was all it took.  Pretty sweet.

Second, there's the svg-pan-zoom script.  A single script reference and about six lines of JavaScript allowed me to take a large SVG diagram that was loaded onto a web page and make it possible to pan and zoom.  It was a very large diagram with many fine details.  Before the pan and zoom script was applied, the fine details were illegible.  With the script, it was easy to zoom in and navigate in the diagram.  It took me just a bit longer to get this working right, perhaps twenty minutes.

And third, we have ViewerJS.  ViewerJS offers the ability to easily view PDF and LibreOffice/OpenOffice files on a website, without the need for plugins or any special executable code to be placed on the server - its all pure JavaScript.  This took me about twenty minutes to figure out the basics.  Since many of you have files in Microsoft Office format, I should mention that LibreOffice can be run at command line, and scripted, to convert one or many files to formats ViewerJS supports.

The developers of these components have done an excellent job development, packaging, and providing useful demos and examples.  Nice work!  All three are also open source software. 

And finally, not JavaScript, but icons.  Google has a source of 900+ icons as part of its Material Design effort.  There initial Google icons plus a whole bunch more can also be found at the Material Design Icons web site.  I'm using a good number of them with the experiment; I just wish more of them were a good fit for the domain the program relates to.

No comments:

Post a Comment