Avin's Blog

Category: Javascript

  • Translink GTFS

    I recently became aware that Translink, Queensland’s public transport provider, openly publishes both a GTFS (General Transit Feed Specification) Static dataset and Realtime feed. The GTFS Static dataset provides information on routes, schedules, stops and pathing, while the Realtime feed provides information on current vehicle lat/long coordinates and delay information. I created a web app…

  • Offline web apps

    I was doing some work with a mobile web application that had to continue to operate in a disconnected scenario, as users may intermittently go in and out of areas with mobile network reception. Adding offline support was reasonably straightforward in web browsers that support: Online/offline status to determine whether to post content to an…

  • WebdriverIO with ChromeDriver headless without Selenium

    I was excited to discover that WebdriverIO supports the use of ChromeDriver running in headless mode without the use of Selenium (because ChromeDriver supports the WebDriver protocol). Here’s a starter guide (assuming Node.js is installed): Install Chrome Web Browser Download ChromeDriver Run ChromeDriver Install WebdriverIO by running npm i webdriverio Run the following file (based…

  • Multiple layouts with React Router v4

    I was searching for a way to add use multiple layouts with React Router v4. I could only find examples for v3, but was inspired by the Redirects (Auth) example in the docs. I created a simple wrapper component for a Route that allows a layout prop to be passed which renders the component as…

  • ASX 200 Market Cap

    I recently came across this /r/dataisbeautiful post and was wondering what the equivalent would look like using Australian stocks. I found historical market cap data for the ASX 200 and using D3 created a similar visualisation, experimenting with D3’s transitions, scales, areas and axis. Source code on GitHub.

  • Websockets are easy

    I was interested in getting a minimal example working for Websockets and it was surprisingly easy to get a demo working between Node.js and a browser. First install the ws library: Create an index.js file with the contents: Start the Node.js process: In a browser console, send a message to the Node.js process:

  • Re-rendering map layers

    I recently was optimising the performance of a Leaflet-based map that rendered TopoJSON layers via Omnivore. The layers were a visualisation using the ABS’s Postal Areas, and while there was only a single TopoJSON file, this resulted in a number of feature layers being displayed, with each bound to their own data. The data for…

  • Leaflet and Google Maps

    I’ve recently been developing an application that uses Leaflet to interactivity with a geographic map. One of the business requirements was to use Google Maps as a basemap, since it is pervasively used by our customers. A naive implementation used Leaflet’s tileLayer to render the tiles directly: This approach, while simple, does not conform to…

  • Combining DataTable’s Ajax and Javascript sources

    I often use DataTables as it provides a lot of out-of-the-box functionality for searching, ordering, paginating and use of Ajax data sources. However, using the server-side processing example means the HTML page will load, and then there is a short wait until DataTables fetches the data from the server using Ajax. This can make an…

  • HTML5 presentation with motion background

    I was recently looking for a way to present our church’s worship lyrics on top of a motion background. I naturally turned to PowerPoint, but quickly found out that the only way to achieve a seamless transition between slides is to combine all the lyrics on a single slide and use animations to show and…