@bytesnz
Jack Farley, Computer Engineer

  • home
  • about
  • CSS is Awesome

    11/26/2024

    Ok. CSS is in an awesome place now. We have functionality, including CSS variables and functions like color-mix() that make writing CSS so compact. Here's what I mean.

    • css
    • software
  • Boolean Attributes in Custom Angular Components

    12/18/2023

    I like clean code so being able to have boolean attributes like required in my custom Angular components makes me happy. To do it however you need an extra bit of javascript.

    • angular
    • javascript
    • software
  • 12/18/2023

    Before I loose it again, one of the best references for creating accessible web sites is the ARIA Authoring Practices Guide (APG). It has good examples of how to create some complex components like navigation with submenus and treegrids, as well as best practices.

    • accessibility
    • software
  • 12/11/2022

    Please! Stop with the mobile web sites! If you are using browser agent strings to change your CSS/layout don't! Use responsive CSS instead. There are other situations when you need a small window and devices that have a small screen where your web site does not work.

    • software
    • web
  • Minimal Accessible Tooltip

    12/2/2022

    Doing a lot of web accessibility fixes, I wondered what would be the minimum amount of code to create a WCAG 2.1 compliant custom tooltip. Unfortunately, it had to include Javascript. Here is what I came up with.

    • software
    • web
    • a11y
  • Day-to-day with Librem 5

    11/28/2022

    After quite a few years of waiting, I finally got my Librem 5 phone. I am now using it as my primary phone… using my work phone as a back-up. Here are the issues and whether I think using it as a primary phone is a good idea so far.

    • librem5
  • 11/28/2022

    If you are wanting to apply accessibility labels onto an image, here are the label (alt, title, aria-description, aria-label) priorities (highest first): aria-description (with aria-label, alt or title); aria-label; alt. Note aria description does not get read out if there is no other label attributes. (Tested on Windows, NVDA, and Firefox and Edge).

    • software
    • web
    • a11y
  • Email dates in Javascript

    11/24/2022

    Javscript is missing functions to format dates in some common formats, such datetime-local inputs and RFC 5322 (email dates) in a non-obsolete way. While Date.toUTCString() is close, the timezone is now obsolete (though it is handy for HTTP Date and other such headers). Here's the basic functions to get the right formats

    • software
    • javascript
  • Visibility and CSS Accordians

    11/24/2022

    When changing a reworked menu to have accordian animations, I came to the realisation that I have been missing a big issue when using max-height transition animations — accessibility. I detail a simple fix in this article.

    • software
    • web
    • a11y
    • css
    • javacsript
  • Can't touch list

    11/24/2022

    Turns out screen readers really don't like you playing with the display CSS property on lists, for example to change it to an inline list — it will cause lists items to be read like a paragraph. Here's how to do without upsetting the screen readers.

    • a11y
    • software
    • css
  • New Zealand Low Power Networks (LTE-M & NB-IoT)

    10/14/2022

    I have started experimenting with low power wide area networks (LP-WAN) in New Zealand using a u-blox SARA-R410-02B. Here is what I have experimented with so far.

    • electronics
    • software
  • JS Binary Decoder

    10/11/2022

    I have recently been dealing with parsing binary data packets from various sources, and have published two NPM libraries from it: binary-decoder and sbd-direct-ip. Here's how they came to be.

    • software
    • javascript
  • Starting with ESP32

    2/7/2022

    I started developing my trap-watch project on an ESP32-CAM using the ESP IDF. Here is the newbie difficulties I ran into.

    • esp32
    • electronics
    • software
    • trap-watch
  • VIM Window Rabbit Hole

    2/4/2022

    Developing ESP-IDF components I thought it would be great if I could make a command to open all the files for a component at once. What a rabbit hole it was. Here is how I did it.

    • linux
  • Parsing Arguments in Bash

    1/28/2022

    Making a script parse arugments in Bash took me way too long last time I did it, so here is a nice full example of how to do it using getopt

    • linux
  • Where's my bait gone?

    1/8/2022

    I have recently started trapping some introduced predators around my local area and have had baits and pre-feed disappear with nothing to show for it, so I decided to get sparky and see if I could catch the culprit in the act.

    • electronics
    • conservation
    • trap-watch
  • Bathymetric Contours

    3/26/2021

    Finally got around to creating a SLD style for GeoServer to display bathymetric contour lines using the GEBCO gridded bathymetric data. Here's how.

    • gis
    • geoserver
    • oceans
  • shm That Cache

    2/25/2021

    I am often trying to find more space on my hard drives and found today my own docker containers wasting space thanks to ! Here's how I fixed it.

    • yarn
    • docker
    • development
  • Blob blob blob blob Stayin' Alive Stayin' Alive

    2/2/2021

    Upon recently trying Deezer again, I found their web app ate all my memory when running in Firefox, so I decided to see if I could find out why. I got as far as memory-file-data/string and Blobs. Here's how.

    • software
    • javascript
    • debugging
    • memory
  • A new Litter Survey

    12/25/2020

    In a culmination of litter surveys and litter picks, linked data and data exploration, and remoteStorage and ActivityPub, I have created a web-based litter pick/survey app that I hope will allow federated citizen science.

    • software
    • litter
    • litter-survey
  • Hoe Stream Trash

    12/14/2020

    My latest litter pick target was Hoe Stream and the White Rose Lane Local Nature Reserve. Here's how it went.

    • litter
    • pi-trash-cam
    • litter-pick
    • environment
  • Release the Beast

    11/24/2020

    I just created a Gitlab CI job to create a release with information from a CHANGELOG.md file for some of my projects. Here's how I did it.

    • software
    • gitlab
    • ci
    • release
  • Gitlab CI Caching

    9/30/2020

    I noticed something strange happening during build process during a multi-tasking bug fix. Turns out I was using Gitlab CI's caching incorrectly. I should have been using artifacts. Here's what I saw.

    • gitlab
    • continuous integration
  • Birthday Trash

    9/22/2020

    As a birthday treat, I took the day off work to try out my electronerised litter picker. Here's how it went.

    • litter
    • pi-trash-cam
    • environment
  • Pi Trash Cam

    9/13/2020

    In preparation for a day of litter picking, I finally got round to a project idea - attaching a camera to a litter picker to record it all. Here's what I did.

    • raspberry pi
    • electronics
    • litter
    • pi-trash-cam
    • environment
  • yarn add --dev webdriverio

    8/25/2020

    I finally started implementing UI testing on first-draft using WebdriverIO. While writing tests was easy, getting the tests running was a little more difficult. Here is how I did it.

    • first-draft
    • software
    • testing
    • gitlab
  • 8/16/2020

    Hooray! My new blog is live! Based on Sapper, using MongoDB and eventually ActivityPub and ActivityStreams, it will be my federated posting hub to the world.

    • software
    • blog
  • Removing EXIF Data from Photos

    8/9/2020

    Creating this new blog, I wanted to make sure there was no metadata data leaking personal information. Here's how I removed all the metadata tags except the ones I wanted from my photos.

    • exif
    • photos
  • tmux List and Reattach

    8/9/2020

    Using tmux for your terminal multiplexer but want an easy to reattach to a session? Here's a small bash script to do it.

    • tmux
    • bash
    • software
  • Selectable Shell Examples

    8/8/2020

    Here's how to help your readers save time by making your post's shell commands easy to select and copy - with a simple CSS property.

    • markdown
    • syntax
    • css
  • Be Dates You

    8/5/2020

    Making my new blog, I didn't initially set the published dates to be native dates in the database. Here what I did to change them …and do all the upgrades I needed.

    • mongodb
    • docker
  • Testing vue components

    7/8/2020

    I recently needed to test that some Vue components were creating the correct HTML. To do this, I decided to create snapshots of Object representations of the rendered HTML.

    • software
    • vue
    • testing
    • javascript
  • No More Numbers

    2/20/2019

    HTML5 number inputs aren't useful, but tel inputs, have all the power

    • javascript
    • html5
    • software
  • A Hacker "Hacked" Me

    12/21/2018

    I decided to look into the extortion emails I have been getting and wrote a small script to extract the bitcoin addresses that have been used.

    • security
    • email
    • grep
  • Mouse Surgery

    12/7/2018

    As part of my pledge not to upgrade, I decided to repair two of my failing mice instead of replacing them with a brand new model (as tempting as it was). Here's what I did.

    • pledge to not upgrade
    • electronics
  • Danger Danger, Highly Reactive

    10/29/2018
    • vue
    • reactive
    • graphing
    • data
  • Switching to SSR

    9/11/2018
    • react
    • ssr
    • react-loader
  • Clean Docker Registry

    8/10/2018
    • node
    • docker
    • console
    • javascript
  • Testing on the Filesystem

    2/1/2018
    • testing
    • javascript
  • Tag You Are

    1/26/2018
    • javascript
    • tags
  • NaN Got Me

    1/25/2018
    • rubber duck save
    • javascript
    • nodejs
    • json
  • All our app's tabs are belong to us

    4/28/2017
    • angular
    • javascript
    • localstorage
    • rxjs
    • sessionstorage
  • Developing NPM modules

    2/20/2016
    • nodejs
    • npm
  • Nfa + Nfb or N(f+fa+fb)

    2/20/2016
    • array
    • function
    • javascript
    • jsperf
  • Photo Layout

    10/31/2015
    • arranger
    • css
    • gallery hierarchy
    • html
    • javascript
    • photos
    • tinymce
    • wordpress
    • software
  • Browning Pass HideAway Web Site

    10/31/2015
    • css
    • gallery hierarchy
    • html
    • wordpress
  • Think Mobile

    10/17/2015
    • mobile
    • web
  • Pledge to Refuse and Not Buy Bottled Water

    10/13/2015
    • environment
    • pledges
  • Run PHP run!

    2/25/2015
    • maximum execution time
    • php
    • trial and error
  • Gallery Hierarchy

    11/26/2014
    • gallery
    • hierarchy
    • photos
  • Vim and functions

    10/3/2014
    • function
    • navigation
    • tags
    • vim
  • I'm making hierarchies

    9/26/2014
    • hierarchical data
    • hierarchy
    • php
  • Google Sheets fun

    9/4/2014

    So I am currently having to tinker with Google Sheets for some volunteer work I am doing. The organisation is currently using Google Sheets for management of volunteers etc (argh!). As an interim measure (will move to a database) to help make the sheets a little easier to use, I have created some scripts to do some fancy tricks.

    There are a few very cool things about Google Docs (not mentioning trying to use Docs over a bad link), one of which is Google Script (documentation is available here). The scripts are written in Javascript and can be run either at certain times or on certain events, including onEdit and onOpen.

    Below are the functions that I created.

    This is a function to send out email alerts if a date on a row is 7, 3 days away, the current day, or the date has passe. It will email the alert to email addresses specified in a cell range.

    function reminderAlert() {
      // Get Volunteer form and sheet
      var spreadsheet = SpreadsheetApp.openById('xxxxx');
      var sheet = spreadsheet.getSheetByName('Volunteer Summary'); 
    
      var recipients = removeBlanks(spreadsheet.getRangeByName('alert_emails_followup').getValues());
    
      var followupDates = spreadsheet.getRangeByName('volunteer_followup_date').getValues();
      var names = spreadsheet.getRangeByName('volunteer_name').getValues();
      var emails = spreadsheet.getRangeByName('volunteer_email').getValues();
    
      Logger.log('Checking Followup dates');
      // Go through (skipping the title row)
      for(var i = 1; i < names.length; i++) {
        if (names[i] != '') {
          if (followupDates[i] != '') {
            var when;
            var today = new Date().valueOf();
            var due = new Date(followupDates[i].toString()).valueOf();
            var count = due - today;
            count = Math.floor(count / 1000 / 60 / 60 / 24);
            if (count == 7 || count == 3 || count == 0 || count < 0) {
              if (count < 0) {
                when = 'was due ' + (count * -1) + ' days ago';
              } else if (count == 0) {
                when = 'is due today';
              } else {
                when = 'is due in ' + count + ' days';
              }
    
              var subject = 'NGO Taxi: Follow up with ' + names[i] + ' ' + when;
              var message = 'Hello,\n\nThe follow up with ' + names[i] + ' ' + when + '.\n' +
                'Their details are:\n' +
                  'Name: ' + names[i] + '\n' +
                    'Email: ' + emails[i] + '\n' +
                      'Comments:\n' + getComments(names[i], 5) + '\n\n' +
                      'For details, see: ' + spreadsheet.getUrl() + '\n' +
                        '[This is an automated message, do not reply.]';
    
              Logger.log('Sending email about ' + names[i]);
              MailApp.sendEmail(recipients, subject, message, { noReply: true });
            }
          }
        }
      }
    }

    This function gets all the comments (stored in a comments sheet) for a particular volunteer.

    function getComments(name, limit) {
      var c, comment = {}, commentDates = [];
      var spreadsheet = SpreadsheetApp.openById('xxxxx');
    
      var dates = spreadsheet.getRangeByName('volunteer_comment_dates').getValues();
      var names = spreadsheet.getRangeByName('volunteer_comment_names').getValues();
      var comments = spreadsheet.getRangeByName('volunteer_comments').getValues();
    
      for(var i = 1; i < names.length; i++) {
        if (names[i] == name) {
          var date = new Date(dates[i]).valueOf();
          comment[date] = (dates[i] + ': ' + comments[i]);
          commentDates.push(date);
        }
      }
    
      if (commentDates) {
        commentDates.sort(function (a, b) {
          if (a > b)
            return -1;
          if (a < b)
            return 1;
          // a must be equal to b
          return 0;
        });
        if (!limit) {
          limit = commentDates.length;
        }
        var commentParts = [];
        for (c = 0; c < limit; c++) {
          commentParts.push(comment[commentDates[c]]);
        }
        return commentParts.join('\n');
      } else {
        return '';
      }
    }

    This is a function to automatically insert a date into a cell of the active row if the row is modified. The date will be deleted if the rest of the row is cleared. You can specify what sheets/columns dates will be added to.

    function insertDate(sheet) {
      var dates = [
        {
           sheet: 'Comments', // Name of the sheet
           column: [2, 3], // Columns to check for content
           minRow: 4, // The start row (to ignore headings
           dateColumn: 1 // The column that the date should be inserted into
        },
        {
          sheet: 'Volunteer Summary',
          column: 6,
          minRow: 2,
          dateColumn: 7,
          baseDateColumn: 6, // Instead of adding the current date, use the value in this column
          addDays: 4, // Add this many days to the date
          overwrite: true, // Overwrite any values that are in there
          overwriteIfNewer: true // Only overwrite if is a newer date
        }
      ];
    
      var d, aCell, dCell, c;
      for (d in dates) {
        if (sheet.getName() == dates[d]['sheet']) {
          aCell = sheet.getActiveCell();
          var col = dates[d]['column'];
          if (col instanceof Array) {
          } else {
            col = [col];
          }
          for (c in col) {
            Logger.log('checking if col ' + col[c] + '(' + aCell.getColumn() + ')');
            Logger.log(dates[d]['minRow'] + ' >= ' + aCell.getRow());
            Logger.log('Offset will be ' + (col[c] - aCell.getColumn()));
            if (aCell.getColumn() == col[c]
                && (dates[d]['minRow'] ? (aCell.getRow() >= dates[d]['minRow']) : true)) {
              var value;
              // Check for and set value based on baseDate column
              if (dates[d]['baseDateColumn']) {
                var bDCell = aCell.offset(0, (dates[d]['baseDateColumn'] - aCell.getColumn()));
                value = new Date(bDCell.getValue());
                if (value && dates[d]['addDays']) {
                  value.setDate(value.getDate() + dates[d]['addDays']);
                }
              }
              // Set value to current date if we don't have one
              if (!value) {
                value = new Date();
              }
              // Current cell to change
              var dCell = aCell.offset(0, (dates[d]['dateColumn'] - aCell.getColumn()));
                  Logger.log('Current value is :' + dCell.getValue());
              if (aCell.getValue() != '' && (dates[d]['overwrite'] || dCell.getValue() == '')) {
                Logger.log('setting value');
                dCell.setValue(value);
                break;
              } else if (aCell.getValue() == '' && dCell.getValue() != '') {
                Logger.log('setting value');
                dCell.setValue('');
                break;
              }
            }
          }
        }
      }
    }

    This function hides rows of a sheet based on the value of a column in the row. When the value is changed, the function will hide the rows that aren't associated with that value (the value is in a specified column. It will also hide column that it looks for the value in. When a new row is started, the selected value will automatically be inserted into the specified column.

    function valueSpecificSheet(sheetObj) {
      var sheets = [
        {
          sheet: 'Comments', // The name of the sheet to monitor
          valueCell: [3, 2], // The cell to get the value of [col, row]
          column: 2, // The column number to look for the value (and to hide etc)
          startRow: 4,
          lastColumn: 3,
        },
        {
          sheet: 'Activity Tracker', // The name of the sheet to monitor
          valueCell: [7, 2], // The cell to get the value of [col, row]
          column: 1, // The column number to look for the value (and to hide etc)
          startRow: 4,
          lastColumn: 8,
        },
      ];
    
      var d, aCell, dCell, c, sheet, value;
      for (s in sheets) {
        sheet = sheets[s];
        if (sheetObj.getName() == sheet.sheet) {
          var lastRow = (sheet.lastRow ? sheet.lastRow : sheetObj.getLastRow());
          aCell = sheetObj.getActiveCell();
          var selectedValue = sheetObj.getRange(sheet.valueCell[1], sheet.valueCell[0]).getValue();
          if (aCell.getRow() == sheet.valueCell[1] && aCell.getColumn() == sheet.valueCell[0]) {
            // Check if the edited cell is the value Cell, if not check for new row
            // Unhide everything
            sheetObj.showRows(1, lastRow);
            if (selectedValue) {
              sheetObj.hideColumns(sheet.column);
    
              // Go through rows and hide the rows with a values not equal to selected value
              for (i = sheet['startRow']; i <= lastRow; i++) {
                // Check value
                value = sheetObj.getRange(i, sheet.column).getValue()
                if (value != '') { // Ignore empty row
                } else if (selectedValue != value) { // Hide
                  sheetObj.hideRows(i)
                } 
              }
            } else {
              sheetObj.showColumns(sheet.column);
            }
          } else if (selectedValue != '') {
            // Check if there are values in the row, if so make sure the value in column is correct
            var lastColumn = (sheet.lastColumn ? sheet.lastColumn : sheetObj.getLastColumn());
            var dCell = sheetObj.getRange(aCell.getRow(), sheet.column);
            var haveValue = false;
            for (i = 1; i <= lastColumn; i++) {
              if (i == sheet.column) {
                continue;
              }
              if (sheetObj.getRange(aCell.getRow(), i).getValue() != '') {
                haveValue = true;
                break;
              }
            }
    
            if (haveValue) {
              if (dCell.getValue() != selectedValue) {
                dCell.setValue(selectedValue);
              }
            } else {
              if (dCell.getValue() != '') {
                dCell.setValue('');
              }
            }
          }
        }
      }
    }

    This is just a simple function to remove blank rows from a array of rows.

    function removeBlanks(values) {
      var v = [];
      for (var i = 0; i < values.length; i++) {
        if (values[i] != '') {
          v.push(values[i]);
        }
      }
      return v;
    }
    • google
    • google script
    • google sheets
    • javascript
    • sheets
  • Travel Photos

    8/13/2014
    • photo management
    • photos
    • travel photos
  • Image managment scripts

    8/13/2014
    • photo management
    • photos
  • MeldCE logo

    7/31/2014
    • css
    • html5
    • javascript
    • svg
  • MoltenDB

    4/26/2014
    • database
    • moltendb
    • mongodb
    • nodejs
  • The Expensive Side

    10/29/2013
    • house
  • abcde

    9/22/2013
    • music
  • Energizer Power Plus Rechargeable Batteries

    7/16/2013
    • gadgets
  • USAR FOGTeX

    3/4/2013
    • fogtex
  • Personal Gear Bag

    2/21/2013
    • rescue
    • gear
  • Geocaching Stamp

    2/18/2013
    • stamp
    • geocaching
  • Call Record Presenter

    4/2/2007
    • parser
    • python
    • sqlite
    • web
  • Kimi Ora School

    9/25/2004
    • css
    • html
  • All About Catering Web Site

    6/25/2004
    • css
    • html
  • Quantum Accounting Web Site

    7/26/2003
    • css
    • html
Copyright BytesNZ 2025. Powered by Sapper
[matrix]