Martin Willitts

# Technical Notes

# Vuepress hamburger inactive on mobile (13 Mar 2024)

I was using Vuepress for https://jaguaryachts.uk and found the hamburger menu button was clickable on mobile but did nothing. This rendered all the other pages within the site more or less inaccessible. Seeing the Vuepress site itself worked fine I set up a basic vuepress at the same version and found that worked fine. Comparing that project with mine and making adjustments led me to find the key was step was to change the build command to not include the '--debug' i.e. it should be

"docs:build": "export NODE_OPTIONS=--openssl-legacy-provider; vuepress build docs"

# Simulate location in Xcode with GPX (25 Jan 2018)

I tried “Add GPX file to Project” in Xcode in the Debug > Simulate Location menu. I chose my file and clicked to proceed. The dialog box disappeared but nothing else seemed to have happened.

What did work for me was dragging and dropping a GPX file on to the project (in the panel showing list of files in fact). I went to https://gpxgenerator.com/ and generated a GPX file there. I stripped out the elevation and time and saved the file. Then I dropped that file into my Xcode project. The name of the location shown in the menu seems to be derived by Xcode from the filename of the GPX.

I had a file called addenbrookes.gpx:

<?xml version="1.0"?>
<gpx version="1.1" creator="gpxgenerator.com">
<wpt lat="52.17563249587351" lon="0.1436939835548401"></wpt>
</gpx>

After I added that the menu for “Simulate Location” includes “addenbrookes” as an option for a location to choose.

# Loopback automigrate sample code generating NaN ‘mysql’ (30 Nov 2017)

Using the automigrate sample code from near the end of the page at http://loopback.io/doc/en/lb3/Creating-a-database-schema-from-models.html I received back the text

NaN 'mysql'

This turns out to be from the console.log line that includes ‘-‘ (minus) signs in the line

console.log('Loopback tables [' - lbTables - '] created in ', ds.adapter.name);

using instead ‘+’ signs as in the following seemed to work

console.log('Loopback tables [' + lbTables + '] created in ', ds.adapter.name);

# Meteor-SemanticUI(embed) (20 Jul 2016)

I wanted to use the embed feature of SemanticUI (http://semantic-ui.com/modules/embed.html#/usage (opens new window)) in a Meteor app. A grey rectangle appeared with the HTML mark up done but the placeholder image and video were not there. I put in a ‘debugger;’ line and found this.$(‘.ui.embed’) returned an array containing the relevant div. Calling embed() on that returned a message in the console saying embed function is not found. Concluding that the embed methods from SemanticUI were not being added to the elements I needed to work out why not.

The javascript for my template snippet:

Template.indexBackground.onRendered(() => {
  this.$('.ui.embed').embed();
});

The answer was to import the embed.js file in from my main.js.

import '../imports/ui/styles/definitions/modules/embed.js';

Presumably the same would be true for the other dynamic elements of SemanticUI should I find I use them too.

# Marko 1500ms & no refresh with browser-refresh (1 Jun 2016)

I’ve been trying the Marko templating engine (opens new window) and was seeing the message

Waited 1500ms without receiving "online" from child process

on starting up the app with either browser-refresh or with node server.js. Turns out that was just due to my MacBook Pro being old and slow. The tortoise still ran the code just not as quickly as expected.

The more significant problem I was facing was that

browser-refresh wasn’t doing a browser refresh

as intended when I changed source code. This was driving me nuts going round in circles trying to understand this new technology in a language in which I wasn’t particularly familiar. Magic was at work and the tricks weren’t quite working. Worse was I couldn’t work out how to fix them.

I asked on gitter.im about the problem and, much to my surprise and absolute delight, the author of Marko, Patrick Steele-Idem (opens new window) answered. What’s more he took the time to troubleshoot the problem. I was fairly sure it would be something simple but the troubleshooting went deep into the cache refresh mechanism – illuminating and ultimately fruitful. Case sensitivity was the problem – as simple as that! The cache was being cleared of a file with a lower case name in the path whilst the file being retrieved for the browser had mixed case. Answer: use lower case with underscore in paths and filenames (and I’m quoting Patrick Steele-Idem here).

Now I’m underway again trialling Marko as part of a possible technology stack I’m exploring.

# Play Framework (Java, 2.3x) code coverage (14 Sep 2015)

I wanted to add code coverage to help me spot additional tests to write. Jacoco4sbt came up in the Google searches as the most likely solution to use. After a first attempt which just didn’t look promising I eradicated Jacoco from my project. I decided to try again after a while and, hey presto, it worked!

The two vital ingredients were:

https://github.com/sbt/jacoco4sbt/wiki (opens new window)

http://stackoverflow.com/questions/20480820/using-jacoco4sbt-with-play-2-2-x-with-alternate-conf-file (opens new window)

I added

addSbtPlugin("de.johoop" % "jacoco4sbt" % "2.1.6")

to project/plugins.sbt and

jacoco.settings

to build.sbt plus I wanted jacoco to use my testing configuration file.

testOptions in jacoco.Config += Tests.Setup( () => System.setProperty("config.file", "conf/testing.conf") )

parallelExecution in jacoco.Config := false

to build.sbt as well, with the blank lines included like that.

Then I ran

./activator jacoco:cover

When I saw the test debug log output in the application.log file I was most surprised and delighted.

# Java vs PHP (well actually why to prefer static typed languages) (3 Jul 2014)

I like this article very much. Whilst PHP is widely popular, Javascript is becoming so and such languages purportedly have a shallow learning curve, it still seems better to use a statically typed language and this article gives some very good reasons why.

http://arstechnica.com/information-technology/2014/06/why-do-dynamic-languages-make-it-difficult-to-maintain-large-codebases/ (opens new window)

# Vision Mobile article on developing for iOS, Android and HTML5 (20 Dec 2013)

A very interesting article comparing relevance of developing for iOS, Android and HTML5: http://www.visionmobile.com/blog/2013/12/developers-prioritise-platforms-ios-vs-android-vs-html5/?utm_source=VisionMobile+subscriber+list&utm_campaign=a6bdb3d361-2013_12+Newsletter&utm_medium=email&utm_term=0_efe0e34ffa-a6bdb3d361-398556193 (opens new window)

# Play DB going back in time (16 Dec 2013)

To undo the last evolution in dev mode with Play Framework 2 you can do the following:

  1. Use your favourite tool for directly accessing the database (e.g. psql)
  2. Directly run the ‘down’ change by copying and pasting the SQL
  3. Run ‘select max(id) from play_evolutions’
  4. Run ‘delete from play_evolutions where id = ‘ appending the value from the previous step
  5. Edit the evolution to want you wanted it to be
  6. Stop and restart play
  7. Browse to the webapp and you should see the usual message about needing to do a database evolution

# Drupal ate my content items (Drupal add content showing no content items) (18 Nov 2013)

Where did all my content items go? Ah, they are still there but just not showing up when I try ‘add content’. Not great but other posts suggest this is something to do with data not being updated in the database after moving a menu (and I had moved the navigation menu in passing just to tidy up). I found the menu_links table and selected the rows like ‘%node/add%’. I noticed some had a plid that didn’t correspond to the mlid for the ‘node/add’ row. I deleted those few rows (having done a backup first) and emptied the cache via the Drupal configuration/performance page. The content add page now showed the content items again.

# Obscure with Sencha Touch (21 Oct 2013)

Sencha Touch has great examples, samples and sales material. It’s not quite so shiny when you start combining samples and doing something semi- or properly serious. The various cases that the loose language allows don’t always, perhaps even rarely, work as might be expected. The flip-side of this is that there’s probably some value in having gained insight into how the code works (it’s great not having a black box to look at) and learning some of the idiosyncrasies.

The latest challenge has been looking at how hasMany (Ext.data.association.HasMany) cases are handled. These are handled with specialised use of Sencha’s Store object (Ext.data.Store). The ordinary use has code that detects existing records and discards them carefully taking into account ones that will be replaced. When it comes to hasMany this sophistication is missed. Maybe there is a reason for that but for me it meant that I was seeing the hasMany items for a record being duplicated each time I viewed the record. If Sencha ran my bank account then I wouldn’t mind payments-in as a hasMany on my account.

The answer seems to be to call removeAll() on the hasMany item’s data store i.e. in a beforeload listener function on the store that uses a model with a hasMany:

listeners: {
  beforeload: function(operation) {
    for(var i=0; i<this.data.all.length; i++) {
      if (this.data.all[i].hasManyStore)
        this.data.all[i].hasManyStore.removeAll();
    }
  }
}

# Play Framework concurrent.ExecutionException (4 Feb 2013)

If you see

A java.lang.RuntimeException has been caught, java.util.concurrent.ExecutionException: play.exceptions.UnexpectedException: Unexpected Error

when running a Play Framework test that is doing a POST or GET to a URL to access the app it's likely you've forgotten to add the URL as a route in the routes file and check the parameter names match with params map you pass to the POST/GET and remember the names are case sensitive, at least on some operating systems.