Pappmaskin.no : Aka Morten Skoglys nerdcave
×

Quickest way to poll a changing json and update a row in a Google spreadsheet

november 29th, 2017 by

Aka "a poor mans database".

A user asked for a playlist for one of our streaming radiochannels. We have no official playlist for that channel, and being pressed for time I hastily created a Google Spreadsheet and added a simple script for polling a json-script. It uses Google's inbuilt trigger solution for running the script every five minute. The script lacks any checks and failsafes and is meant for demo purposes.

Tip: Use http://www.jsonquerytool.com/ to figure out how to query your json.

Todo: Parse unix timestamp to make it human readable

function pullJSON() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheets = ss.getSheets();
  var sheet = ss.getActiveSheet();

  var url="http://psapi.nrk.no/channels/urort/liveelements/now"; // Paste your JSON URL here
  
  var response = UrlFetchApp.fetch(url); // get feed
  var dataAll = JSON.parse(response.getContentText()); //
  var dataSet = dataAll;
  
  var rows = [],
      data;
  
    //wrap in for if you need to at more rows per pass
    data = dataSet[1]; //spesific for my json. Only needs the value for currently playing. 
    rows.push([data.relativeTimeType, data.title,data.description,data.startTime,data.duration]); //change this to match your JSON entities 


  sheet.insertRowBefore(1).getRange("A2:E2").setValues(rows); //change D2 to match the number of entities you need to insert

}

Does it grow with a new line every five minutes? Yes it does!


(External link)

Posted in Code

Future project: 3d printed replacement part for sink drain

november 28th, 2017 by


Todo:

Useful tutorials

Posted in DIY

Web accessibility test using wave.webaim.org

november 10th, 2017 by

The purpose of this post is to add different types of content to check if it validates when running it through Wave (web accessibility evaluation tool), available at http://wave.webaim.org or as a google extension.
Update: The online Wave tool isn’t able to reach my site, due to a bug related to http/https. Soon to be fixed according to Jared Smith at WebAIM.org, who also recommended the chrome extension as an alternative.

Want to learn more about accessibility? Check out this free course on Udacity, made in collaboration with google.

Alt text and linked images:

Via https://webaim.org/blog/alt-text-and-linked-images/

General rules:

  1. Decorative images should be given empty or null alt text. (they will then be skipped by screen readers)
  2. When the content presented in an image is conveyed elsewhere, such as in a caption, the image may also be given empty alt text.
  3. However, any time an image is the only content within a link, the image MUST be given alternative text that presents the function of that link.
  4. However, if a link following the image has text that is identical to the image alt text, you should consider adding aria-hidden=»true» to the image, to prevent repetitiveness. Or change one of the texts to differentiate.

Test 1
If the content of the image is presented in the caption (aka in text directly succeeding the image), the image may be given empty alt text:

Photo of an amazing lightning storm

Wave test-result: Feature. All good. And empty alt is ignored by screen readers.

Test 2: Linked image, with alt, no caption. Should validate.

Party & bullshit

Wave test-result: Feature. All good. Has alt, and no identical caption.

Test 3: Linked image, url has title, image has empty alt, no caption

Wave test-result: Error: An image without alternative text results in an empty link.

Test 4: Linked image, no title on link, has alt tekst, and has caption.

Party & bullshit
This image shows some people.

Wave test-result: Feature. All good.

Test 5
Image inserted with wp, with caption and clickable image

This is an alt text

This is an image caption

Wave test-result: Feature. All good.

Test 6
Image inserted with wp, without caption, without alt, without link on image

Test 7:
Image inserted with wp, where the alt and caption is identical (very common)

This is caption

This is caption

Wave test-result: Yellow alert: The alternative text for an image is the same as nearby or adjacent text.

Test 8
P3.no main frontpage plug, original:

Swifts kledelige stilskifte

Swifts kledelige stilskifte

Vellykket lek med form på hennes nye album.

Wave test-result: Yellow alerts: The alternative text for an image is the same as nearby or adjacent text. + Adjacent links go to the same URL.

Possible solution 1: Set aria-hidden=»true» on image.

Swifts kledelige stilskifte

Vellykket lek med form på hennes nye album.

Wave test-result: Nope, even with aria-hidden=»true» on the linked image the yellow alerts are still there. The alternative text for an image is the same as nearby or adjacent text.+ Adjacent links go to the same URL.

Possible solution 2: Empty alt-text on image. Should make a screenreader ignore the image and the link.

Swifts kledelige stilskifte

Vellykket lek med form på hennes nye album.

Wave test-result: Nope. Red error. An image without alternative text results in an empty link. AND An image without alternative text results in an empty link.

Possible solution 3:
Put all content within one ahref. No value in alt. (In html5 it is also allowed to wrap an ahref around a div)
Read https://www.w3.org/TR/WCAG20-TECHS/H2.html



Swifts kledelige stilskifte

Vellykket lek med form på hennes nye album.

Wave test-result: All good.

Testing same solution on original plug. Ahref around everything, no alt-text on image role=»text» on h1 plus ingress (to allow for no visual cue that it is a link??)

Swifts kledelige stilskifte

Vellykket lek med form på hennes nye album.

Wave test-result: Jesus.
Red errors: An image without alternative text results in an empty link + A link contains no text.
Yellow alerts: Adjacent links go to the same URL x2.

Test 9
Nrk.no frontpage plug.

Wave test-result: Red error: A link contains no text. + Yellow alert: Adjacent links go to the same URL.

Posted in Testing