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.
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.
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.
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.
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
(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).
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
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.
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.
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 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.
I started developing my trap-watch project on an ESP32-CAM using the ESP IDF. Here is the newbie difficulties I ran into.
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.
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
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.
Finally got around to creating a SLD style for GeoServer to display bathymetric contour lines using the GEBCO gridded bathymetric data. Here's how.
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.
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.
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.
My latest litter pick target was Hoe Stream and the White Rose Lane Local Nature Reserve. Here's how it went.
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.
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.
As a birthday treat, I took the day off work to try out my electronerised litter picker. Here's how it went.
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.
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.
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.
Using tmux
for your terminal multiplexer but want an easy to reattach to a session? Here's a small bash script to do it.
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.
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.
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.
HTML5 number inputs aren't useful, but tel inputs, have all the power
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.
I have been receiving lots of emails saying that I've been hacked to my GitHub email addresses.
Hello,
I am a spyware software developer. Your account has been hacked by me in the summer of 2018.
I understand that it is hard to believe, but here is my evidence (I sent you this email from your account).
The hacking was carried out using a hardware vulnerability through which you went online (Cisco router, vulnerability CVE-2018-0296).
I went around the security system in the router, installed an exploit there. When you went online, my exploit downloaded my malicious code (rootkit) to your device. This is driver software, I constantly updated it, so your antivirus is silent all time.
Since then I have been following you (I can connect to your device via the VNC protocol). That is, I can see absolutely everything that you do, view and download your files and any data to yourself. I also have access to the camera on your device, and I periodically take photos and videos with you.
At the moment, I have harvested a solid dirt... on you... I saved all your email and chats from your messangers. I also saved the entire history of the sites you visit.
I note that it is useless to change the passwords. My malware update passwords from your accounts every times.
I know what you like hard funs (adult sites). Oh, yes .. I'm know your secret life, which you are hiding from everyone. Oh my God, what are your like... I saw THIS ... Oh, you dirty naughty person ... :)
I took photos and videos of your most passionate funs with adult content, and synchronized them in real time with the image of your camera. Believe it turned out very high quality!
So, to the business! I'm sure you don't want to show these files and visiting history to all your contacts.
Transfer $995 to my Bitcoin cryptocurrency wallet: ??????????????????????????????????
My system automatically recognizes the translation. As soon as the specified amount is received, all your data will be destroyed from my server, and the rootkit will be automatically removed from your system. Do not worry, I really will delete everything, since I am 'working' with many people who have fallen into your position. You will only have to inform your provider about the vulnerabilities in the router so that other hackers will not use it.
Since opening this letter you have 48 hours. If funds not will be received, after the specified time has elapsed, the disk of your device will be formatted, and from my server will automatically send email and sms to all your contacts with compromising material.
I advise you to remain prudent and not engage in nonsense (all files on my server).
Good luck!
The emails are both To
and From
my email addresses, but the Return-Path
is to Aaron@Smith???.edu
, where the ???
is three numbers. The emails are all the same expect for the servers that the emails went through and crypto wallet public keys.
Wanting to collate the servers and the wallet keys, I decided to run some grep
action on the emails. My emails are stored in a Maildir format, so it is nice and easy for me to find the emails and extract the servers from the headers using the Return-Path
email address as the search term.
$ grep -h 'Received: from' `grep -l Smith....edu *`
The email content is however Base64 encoded, so it is a little harder to extract. I ended up combining the power of grep and Node to extract the Base64 from the email files, decode them and then extract the public key
# DQpIZW... is the start of the Base64 block
grep -h -A1000 'DQpIZWxsbywNCj' `grep -l Smith....edu *` | grep -v '^--' > ~/emails.b64
The script file to extract out the keys
const fs = require('fs');
// Read the Base64 strings from the file
const file = fs.readFileSync('emails.b64').toString();
// Split on the double newline that splits the base64 strings
parts = file.split('\n\n');
const keys = [];
parts.forEach((string) => {
// Remove the newlines in the Base64 string, the make it into a Buffer
const match = Buffer.from(string.replace(/\n/g, ''), 'base64')
.toString('ascii') // Convert it back into a string
.match(/cryptocurrency wallet: (.{34})[\r\s]/); // Match on the wallet string
// If there is a match (there were some extra blank lines), print it out
if (match && keys.indexOf(match[1]) === -1) {
keys.push(match[1]);
}
});
console.log(keys);
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.