Week Beginning 23rd April 2018

I worked on a number of different projects this week.  Jane Stuart-Smith has secured some funding for me to redevelop a couple of old websites for her (Seeing Speech and Dynamic Dialects) so I spent some time working on this.  My first task was to add Google Analytics to the old pages so we can more easily track current usage and how things might change when we eventually launch the new sites.  It was a bit of a pain to add the code in as the current sites consist of flat HTML files (as opposed to using one template file), so every page had to be updated separately.  But with that in place I could begin to think about developing the new interface.  I decided that it would be a good opportunity to try out the Bootstrap front-end library (https://getbootstrap.com/).  I’d been meaning to look into this for a while and I spent a bit of time experimenting with it.  I like the way it provides a very straightforward grid-based layout system for responsive design, and some of the components such as tabs and drop-down menus are excellent too.  I do find that the documentation is a little haphazard, though.  I found myself having to find third party tutorials and explanations as a lot of stuff you can do with the library just isn’t very well explained in the documentation section.  The jQuery UI site, with its clear and extensive examples plus API seems a lot better to me.  However, I managed to get my head round how Bootstrap works and managed to create a number of different mock-up interfaces for the new websites.  I can’t really share them here, or even show screenshots yet, but I created 6 mock-ups and sent the URLs off to Jane and Eleanor Lawson at QMU for feedback.  Once I hear back from them I will be able to take things further.

I also continued with the new timeline feature for the Historical Thesaurus.  Last week I pretty much completed a version of the timeline that was ready to integrate with the live site, and this week I set about integrated it with a test version of the live site.  In this version a ‘Timeline’ button appears next to the ‘Cite’ button for each category / subcategory on the category browse page.  Pressing on this button opens up a jQuery UI modal popup containing the timeline, the sort options, the ‘save SVG’ option and the category heading / catnum and part of speech, as you can see in the following screenshot:

It took quite a bit of effort to implement this, as the timeline uses D3.js version 4 and the sparklines that are used elsewhere in the site (see http://historicalthesaurus.arts.gla.ac.uk/sparklines/) used version 3.  Rather than have two different versions I thought it would be better to upgrade the sparklines to version 4.  This took a couple of hours to sort out as the changes between versions are rather extensive, but thankfully I managed to get the sparklines working in the end.  Getting the timeline to work within a jQuery dialog box was also rather tricky.  The timeline just kept giving error messages and failed to work for ages until I worked out that the dialog box needs to be open and visible before the timeline loads, otherwise the timeline code falls over.  Previously all of my timeline code was contained in one PHP file, including database queries, working with the data in PHP, CSS styles, HTML and the actual processing of the final data outputted by PHP in JavaScript.  This all needed to be split up, with the PHP stuff going into the API, the JavaScript stuff getting added to the existing HT tree JavaScript file, CSS into the existing stylesheet and HTML into the existing category HTML page.  However, it’s all in place now. I still need to create mini-inline timelines for the category page, and I’m hoping to get some time to look into this next week.

Also this week I met with Luca to discuss changes to Joanna Kopaczyk’s project, and I had to spend some time deleting lots of old emails as I received an actual legitimate “your mailbox is almost full” message.  I was also sent a bunch of tweaks and some new song materials for ThePeoplesVoice website by Catriona MacDonald.  The project has now ended and these are the final updates.  You can view the website, the songs and the database of poems here: https://thepeoplesvoice.glasgow.ac.uk/.

My final project of the week was the REELS project, for which I added in the final bits of functionality for the front-end.  This included adding a ‘cite’ option to the record page and updating the API so that the formatting of the CSV for a record is more useable.  Rather than all of the data appearing on one very long row the file places each bit of data on a new row, with the item label in the first column and the corresponding data in the second.  Historical forms and sources now have separate rows for each of their bits of data rather than having everything joined in one field.

I’d also noticed that the ‘show on map’ link in the text list of results was failing to pan and zoom sometimes.  This was an intermittent fault that never produced any error messages and although I spent some time trying to figure out what caused it I didn’t manage to find an answer.  For this reason I decided to replace the feature that does a nice animation, zooming out from the current map location, panning to the new location and zooming back in.  Instead when you click on the ‘show on map’ link the map loads directly at the point.  It’s not as pleasing to look at as the animated version, but at least it works consistently.  I also updated the layout of the record page, splitting historical forms off from the rest of the record and placing them in their own tab, which I think works pretty well.  Other than some further formatting of pages, changing colour schemes and some other design tweaks I think that’s the front-end for the project pretty much sorted now.