CSS is Awesome
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.
-
-
Boolean Attributes in Custom Angular Components
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.
-
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.
-
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 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.
-
Day-to-day with Librem 5
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.
-
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,altortitle);aria-label;alt. Notearia descriptiondoes 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-heighttransitionanimations — 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
displayCSS 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.
-
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
tmuxfor 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
I am currently travelling with my partner for at least two years. Being keen at taking pictures, we knew that we were going to have a battle on our hands organising, sharing and backing up our snaps while we were on the road. As such, I have done quite a bit to try and keep things organised and I thought I would should share some of the still that I have found.
Equipment and Initial Plan
We started off the journey equipped with two canon cameras - a G15 and a 450D, an 1TB external hard drive and some tablets (mine is a Asus Transofrmer TF300). The plan was to regularly sort through the photos on the transformer, then store the photos on the external hard drive and have an online back of them in the cloud somewhere. We are taking photos on the highest detail JPEG settings on the camera, which means each photo is about 4MB. Given that on our previous trip (to Laos and Cambodia), we created around 3000 images (still unsorted), we knew that we would have to be pretty on to it sorting photos and would need a bit of storage to backup the photos online.
We also are writing a blog, on which we want to be able to share our photos with our friends, families and anyone who is interested. The current chosen engine for the blog is Wordpress. I chose the Nexgen Gallery plugin for photos as the media library built-in didn't have enough ways to keep the photos organised. Unfortunately, Nextgen has been a little difficult to deal with at the best of times, so I ended up creating my own plugin (Gallery Hierarchy), which is working well, if needing a few more features.
Online storage
I looked two main storage options in the cloud - Google Drive and Dropbox. The free accounts give you 15GB and 1GB respectively. For Drive, you can pay \$1.99US/month for 100Gb of storage. For Dropbox, you can pay $9.99US/month for 100GB of storage. My pick was Google Drive for the 15GB free, which I hoped would at least last us a while (after 3 months of travelling we are sitting at 10GB - uh oh). Google Drive is also well integrated into Android phones, so it was very easy to upload images to it. Unfortunately, they are not so switched on when it comes to Linux and have as yet not got around to making the Linux app, though it is in the pipeline. There is a app called Grive that is available for syncing folders using the Drive API. Though it is still in its infancy, it shows good potentional. Dropbox also has a Android app and has a Linux client, which is a bonus.
Another option I did slightly look at was Mega.co.nz, which offers a lot of storage (50GB) for free, though apps weren't around at the time and the last project the guy ran went a little sour.
Photo Organisation
One of the toughest things has been figuring out how to keep all the photos organised. With plans to visit lots of places in different countries and different continents, it could get very messy. We initialy used the Android Gallery app for sorting though the photos. We quickly deviseda plan to help decide the photos we wanted to keep and the ones we wanted to delete by rating the ones wi we wanted to deletee 1 star. This meant one person could go through all the photos, mark the ones they wanted to delete. The second person could then go through and delete the ones they agreed with and remar the ones they wanted to save. A final go through by the first person removed any phtos they greedcould be deleted. The initial we had with it was that it took a long time to find new photos that were copied to the tablet (due to to its reliance on the media scanner and its database). There is an app that can force the media scanner to rescan for media, which can take a little while, but works ok (no status update, so you have to guess when it's finished). Another issue was tht it didn't have any abilities to add metadata to the photos, such as tags or a comments on what the photo was of, which I really wanted so that we didn't forget.
After a look on the Google Play Store, I found F-Stop - a fantastic photo manager. It has its own builtin media scanner, which detects changes nearly instantly. It also has the ability to easily view metadata, add tags, which could be written to the photo (only in the pro version though :() add comments (though it wasn't easy). It also made going through images slightly easier, in particular going to the next image while zoomed in. This wasn't great, but it made dealing with the photos slightly easier. Once I started oading photos onto the TF300, it quickly became unusable. With deciding to volunteer at an NGO doing web site development, I decided to buy a second-hand laptop instead of trying to use the TF300\. Once bought and loaded with Linux, I had a search for photo management software and found DigiKam and haven't ever looked back. DigiKam is absolutely packed with features and has absolutely everything I need including easy editing of tags, comments and titles, which it can write back to the image, hierarchical tags, if you wanted, and batch processors for things like resizing images (see below).
Putting it all together
So once the photos are downloaded from the cameras, arranged into folders, tagged and (still on the todo list) helpful titles and comments are put on the photos, using DigiKam, a copy is made to the external hard drive using rsync. This means that any photos that have been updated (for example if we put some more titles on some photos), they will be automatically updated on the hard drive. The photos are then synced with Google Drive using a in development Linux application called grive (still waiting for the Linux client Google!). Smaller, upload and web friendly, versions of the images are then created using some simple scripts and are then rsynced onto the web server. A rescan job is then started on Gallery Hierarchy and presto, images up on web to be included in blogs.
Improvements
I have gotten the process of handling the photos to a pretty good state. The only thing that I am wanting to change now is getting the original photos onto the web server. As such, one of the future features of Gallery Hierarchy will allow you to automatically keep folders of photos synced between Google Drive and your Gallery Hierarchy images folder (if a new image appears on Google Drive, it will be downloaded to the web server, resized and added to the gallery automagically. I just need some time to implement it.
-
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