JavaScript Notes

Behold this gem.

I was trying to make a simple (ISO8601) date display show up on a web page and I learned some very fun things.

Sometime, though rarely, it seems like a flat text file won’t do what you need; if you’re ever tempted to reach for XML, then JSON is probably appropriate. My Python notes cover dealing with JSON in Python programs.

JSON needs to use double quotes — it’s not optional like Python. For full details of just what comprises JSON formatting this is a good resource. Or check out https://jsonlint.com to see if your sample is valid.

But what if you’re just trying to sort out a mess on the command line? Then it’s good to use the program jq which does all JSON related things a command line person would ever want done.

With no fancy filters or other arguments, jq does a nice job of formatting and syntax highlighting JSON.

Of course it does a lot more than that! Here is an example of trying to find out the weather service’s grid values for a certain geographic location.

Just need to look at some big JSON file and want to use a pager and keep the nice syntax highlighting?

A nice overview of jq.

Here is a nice web interface to try jq syntax out live.

Often I need the simplest stupid little JSON thing and I just need to see a quick reference to make sure I don’t confuse anything with Python dict thinking. Here is that example with an example of how to get jq to check it.

Obviously a symlink is best, but sometimes you need for people to type a directory like http://xed.ch/r and see a PDF.

This is an interesting way to specify a URL. Just type this in the address bar of the browser.

HTML 5 is fully of fancy new features. One that caught my eye for a particular project I was working on is the new <input> attribute range. This basically allows slider bars to be an input method for HTML forms. That’s almost never useful (which is why I suspect I rarely see this in the wild) but when it is, it is very nice that it’s built in these days. Here’s the official docs.

Here’s an example I made that shows off a minimal use which updates the page, i.e. no form submission necessary for being useful.

The canvas feature of HTML5 really changed the potential of Javascript. Being able to arbitrarily put points on the screen changed Javascript, for me, from a clumsy form box "validation" system to a much more interesting tool capable of really anything.

Today the problem with the canvas tag is that there is these days often an even better solution, SVG. Javascript also can control that. There are a lot of similarities as far as the Javascript goes. The main difference seems to be performance in certain contexts. If you don’t need the browser (as opposed to your Javascript code) to keep track of entities, then canvas is a much quicker way to render vectors to bitmap. However, if you want to have the browsers keep track of things so that you can, for example, style an element with a style sheet, then SVG is the best method. More details about this decision can be found here.

It’s all the rage to have a web utility that has some kind of form box that just can’t wait until you’re done typing. It has to automatically suggest a list of possibilities which remain, based on the constraint of what you’ve typed so far. This functionality is pretty well implemented in jQuery and there’s no need to reinvent the specific JavaScript code. However, using this effectively can be somewhat tricky. Most web resources seem to focus on a language, which for search engine purposes I will not mention, that is infamous for being a disaster with respect to web security. There are alternatives! The autocomplete function of jQuery can operate in many ways and the mode where it requests an external link to give it hints can be crafted in any way you like. I’m going to show how to use autocomplete with straight Python with no frameworks or exotic dependencies whatsoever.

First you need your HTML:

First note that you need the jQuery software. Its location is outlined in the bottom part of the HTML. Just download this and keep a local copy. You’ll need the general jQuery stuff, the jQuery User Interface module and the jQuery style sheet (CSS) to make it all work.

The second thing to note is that the part of this web page that is important to us happens in the last <script> tag. This is where the autocomplete function is deployed. The important thing to notice is the source reference. This is where the completion routine will take its list of suggestions from. It turns out that you can put a static list there ( formatted either {"hint1":"rhino", "hint2":"rhesus monkey"} or ["ash","alder","aspen"] - but don’t use single quotes!).

In our example, the JavaScript will be having the browser call another URL and take the contents of what is delivered and make that into the suggestion list. So, you need a web resource that can produce the desired list. Again, this could be static, but just living on the remote server. There’s not much point to this. What you’re really after is spontaneously generating a list based on a sensible heuristic applied to your data set.

The obvious examples are to suggest all words that are in your master list which start with the letters the user just typed. For smaller lists, you could look for all records which contain the typed letters anywhere in them. You could do either of those things but with a cut off limit so no more than 10 or 50 suggestions are ever returned. If your data set is very big and contains other hints, you could do a quick sort by relevance (maybe most popular) before sending only the first 10.

Here is an example implemented in Python which will prompt with Unix commands (just from /usr/bin) which begin with the letters the user has typed in. Note that when the user types some stuff, there are some (controllable) parameters that tell the jQuery routines how long to wait and how persistent to keep submitting autocomplete attempts. When a request is made, however, the URI that you specify in the source field will be called with an additional CGI style argument appended. If the URI is ./tinysuggester.py as in our example and the user types "ps2", the client will make a request that looks like ./tinysuggester.py?term=ps2. Here’s what you can do with that.

As you can see the complex part is in the function getpossibles. This is the real essence of what the autocomplete is supposed to do for your application which is why you must make your own. Here’s an example of another one that uses a static list and no limits.

You could (and often will need to) write one that makes a database look up and returns the query results.