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.
-
-
Minimal Accessible Tooltip
Doing a lot of accessibility (a11y) 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 can up with.
-
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
(witharia-label
,alt
ortitle
);aria-label
;alt
. Notearia description
does not get read out if there is no other label attributes. (Tested on Windows, NVDA, and Firefox and Edge). -
Email dates in Javascript
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
-
Visibility and CSS Accordians
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. -
Can't touch list
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. -
New Zealand Low Power Networks (LTE-M & NB-IoT)
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.
I am currently experimenting with integrating a low power wide area networks (LP-WAN) modem with a microcontroller. In New Zealand, we have two operators offering LP-WAN services. Vodafone offers both LTE-M/Cat-M1 and narrowband Internet of thing (NB-IoT) networks. Spark offers only a LTE-M/Cat-M1 network (they also have a LoraWAN network, but coverage is very limited).
To do the experimentation, we purchased a Mikroe LTE IoT Click, which uses the u-blox SARA-R410-02B-01 NB-IoT/LTE-M module. The module uses an AT command set for control over a USB or a (voltage-level selectable) UART serial port.
Accessing LP-WAN Networks
To access the LP-WAN networks, you have to get a SIM card that has been set up for them.
Spark makes this amazingly easy - you simply request a IoT starter kit referral code, sign up with the referral code and they will send you five IoT SIM cards ready to be activated (see below).
Vodafone on the other hand, makes it amazingly impossible. No one on their non-business teams, and few on their business teams even know what NB-IoT or the fact that Vodafone offers it. They have an email address which you are supposed to email and someone will contact you… four weeks on I have had nothing from them.
Setting Up The SARA-R4 (and Linux) To Connect
Once I received the Mikroe module, put the Spark IoT SIM card in and plugged it into my computer's USB port with a big smile on my face. I soon found out it wasn't quite as easy as I was hoping.
First off, with the Spark SIM cards, you have to activate them before they can connect to the network.
If you are using Linux to control the module, Linux has a ModemManager service which should be disabled to stop it from trying to take control of the device.
# systemctl stop ModemManager.service
To connect to the New Zealand networks, you have to: change the mobile network operator (MNO) profile to the standard Europe profile (as this has the most flexibility); then change the bandmask to the bands used by your chosen networks (LTE bands 28, 3 and 7 for Vodafone, and LTE bands 28, 3, 1 and 7 for Spark).
# Disable the radio AT+CFUN=0 # Select the Standard Europe MNO profile AT+UMNOPROF=100 # Restart the modem for the MNO profile change to take effect AT+CFUN=15 # Update the NB-IoT bandmask to 1, 3, 7 and 28 AT+UBANDMASK=0,134217797 # Update the LTE-M bandmask to 1, 3, 7 and 28 AT+UBANDMASK=1,134217797
Once this is done, you should be able to see the Vodafone and Spark networks, and the module should automatically connect to them.
# Scan for available networks AT+COPS=? +COPS: (1,"530 01","530 01","53001",7),(2,"530 05","530 05","53005",7),(1,"530 05","530 05","53005",9),(1,"530 01","530 01","53001",9),,(0,1,2,3,4),(0,1,2) # Check of the modem has connected AT+COPS? +COPS: 0,0,"530 05 Spark NZ",7 # (Shows currently connected to the Spark LTE-M network)
HTTP Requests
To send requests to HTTP servers, you have to configure a HTTP server profile first (see the SARA-R4 AT Commands Manual for a full reference for the HTTP AT Commands).
# Set the server domain name of profile 0 AT+UHTTP=0,1,"example.com" # Use HTTPS (and port 443) for profile 0 (think very hard if you choose not to use this option) AT+UHTTP=0,6,1
Once the profile is set up, you can use it to send a request to the server
# Send a GET /hello request to the server in profile 0, saving the response to the file "response" AT+UHTTPC=2,1,"/hello","response" # Read the contents of the file "response" AT+URDFILE="response"
Even though, the SARA-R4 documentation documents an option to manually set the server name indication (SNI), it does not seem to be supported on the SARA-R410-02B-01 out of the box (even though it should be) as it responds with an operation not supported error. This means if you want to use HTTPS, you will have to find a server that doesn't require SNI (for example Nginx configured for virtual hosts does require SNI, so will produce a secure socket connect error HTTP error code 73 on the module).
MQTT Messages
Sending MQTT messages is similar to sending HTTP request with an additional step of connecting to the server after its configured (see the SARA-R4 AT Commands Manual for a full reference for the MQTT AT Commands).
# Configure the client ID AT+UMQTTC=0,"CLIENT123456789" # Configure the hostname and the port AT+UMQTTC=2,"example.com",1883 # Configure the keepalive (timeout time) in seconds for the connection (REQUIRED for mosquitto) AT+UMQTT=10,36000
Once configured, you can save the configuratin in non-volatile (NV) memory.
AT+UMQTTNV=2
Then connect to the server
AT+UMQTTC=1 +UMQTTC: 1,1
Then publish a message
# Send "hello" on the "/user/hello" topic AT+UMQTTC=2,0,0,"/user/hello","hello"
The mosquitto server can be used as a test sever. They also have a test instance you can use for testing at test.mosquitto.org.
-
JS Binary Decoder
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.
-
Starting with ESP32
I started developing my trap-watch project on an ESP32-CAM using the ESP IDF. Here is the newbie difficulties I ran into.
-
VIM Window Rabbit Hole
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.
-
Parsing Arguments in Bash
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
-
Where's my bait gone?
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.
-
Bathymetric Contours
Finally got around to creating a SLD style for GeoServer to display bathymetric contour lines using the GEBCO gridded bathymetric data. Here's how.
-
shm That Cache
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.
-
Blob blob blob blob Stayin' Alive Stayin' Alive
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.
-
A new Litter Survey
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.
-
Hoe Stream Trash
My latest litter pick target was Hoe Stream and the White Rose Lane Local Nature Reserve. Here's how it went.
-
Release the Beast
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.
-
Gitlab CI Caching
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.
-
Birthday Trash
As a birthday treat, I took the day off work to try out my electronerised litter picker. Here's how it went.
-
Pi Trash Cam
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.
-
yarn add --dev webdriverio
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.
-
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.
-
Removing EXIF Data from Photos
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.
-
tmux List and Reattach
Using
tmux
for your terminal multiplexer but want an easy to reattach to a session? Here's a small bash script to do it. -
Selectable Shell Examples
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.
-
Be Dates You
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.
-
Testing vue components
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.
-
No More Numbers
HTML5 number inputs aren't useful, but tel inputs, have all the power
-
A Hacker "Hacked" Me
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.
-
Mouse Surgery
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.
-
Danger Danger, Highly Reactive
-
Switching to SSR
-
Clean Docker Registry
-
Testing on the Filesystem
-
NaN Got Me
-
All our app's tabs are belong to us
-
Developing NPM modules
-
Nfa + Nfb or N(f+fa+fb)
-
Photo Layout
-
Browning Pass HideAway Web Site
-
Think Mobile
-
Pledge to Refuse and Not Buy Bottled Water
-
Run PHP run!
-
Gallery Hierarchy
-
I'm making hierarchies
-
Google Sheets fun
-
Travel Photos
-
Image managment scripts
-
MeldCE logo
-
MoltenDB
-
The Expensive Side
-
abcde
-
Energizer Power Plus Rechargeable Batteries
-
USAR FOGTeX
-
Personal Gear Bag
-
Geocaching Stamp
-
Call Record Presenter
-
Kimi Ora School
-
All About Catering Web Site
-
Quantum Accounting Web Site