Frills - Blog

Life in Pictures

Frills — Fri, 16 Feb 2024 00:00:00 +0000

Life so far this year in delciously crunchy compressed pictures.

Celebrating my mum's birthday with cake.

Designing and purchasing our engagement and wedding rings.

Trying to wash my hair less, so styling it in donut buns.

Fiancé's current favourite craft beer flavour.

Appreciation for my daily driver keyboard.

Pancake day, when I am obligated to eat my weight in pancakes.

Fun with Effie and Orla.

A Welsh Valentine

Frills — Wed, 14 Feb 2024 00:00:00 +0000

Let me tell you the story of the Welsh version of Valentine's day, Dydd Santes Dwynwen. Saint Dwynwen or is the Welsh patron saint of lovers and is celebrated on the 25th of January. Her story is actually quite sad:

Dwynwen was the prettiest of King Brychan Brycheiniog's 24 daughters. She fell in love with a local lad called Maelon Dafodrill, but King Brychan had already arranged for her to marry another prince. Maelon took the news badly, so the distraught Dwynwen fled to the woods to weep, and begged God to help her. She was visited by an angel who gave her a sweet potion to help her forget Maelon, which happened to turn him into a block of ice.

God then granted Dwynwen three wishes. Her first wish was that Maelon be thawed; her second wish was for God to help all true lovers; her third wish was that she would never marry. In gratitude, Dwynwen became a nun and set up a convent on Llanddwyn Island, a beautiful little spot on Anglesey. Her name means, 'she who leads a blessed life'. Fall in love on St Dwynwen's Day - Visit Wales

There is a well named after her at the place that she founded the convent which became a place of pilgrimage after her death in AD 465. Visitors believed that the sacred fish or eels that lived in the well could foretell whether or not their relationship would be happy and whether love and happiness would be theirs.

Remains of Dwynwen’s church can still be seen today.

Dydd Santes Dwynwen is celebrated in much the same way that Valentines day is, people send cards, gifts and messages of love. It is becoming more commonly celebrated in Welsh speaking communities.

Welsh mythology is rich in stories and legends, if you're interested in learning more, look up the Mabinogion which is a collection of eleven tales full of myth, folklore, tradition and history of the Welsh lands.

This year for Dydd Santes Dwynwen, me and my fiancé visited our jeweler friend and designed our engagement and weddings rings. We have been engaged for 1 and a ½ years, but without any rings to show for it. 💍

Making ASCII art accessible

Frills — Mon, 12 Feb 2024 00:00:00 +0000

o           .'`/
    '      /  (
  O    .-'` ` `'-._      .')
      _/ (o)        '.  .' /
      )       )))     ><  <
      `\  |_\      _.'  '. \
        '-._  _ .-'       '.)
    jgs     `\__\

According to the w3c recommendation, there is a nice and simple way to make ASCII art accesible rather than a garbled mess of punctuation.

In this fishy example provided in the HTML-ARIA recommendation document, W3C have put the art inside a figure element with a figcaption, but you don't have to do this, as long as you have accurately described your ASCII art with an aria-label and added the role="img" onto the pre or code element, this is enough to make it work accessibly!

This will work any type of text based art, nopt just ASCII, it's easy to add and means that everyone can enjoy your i̐̽͑n͊̕͝ẗ́͊͒e̒̀̓r͊͒͊n̿̔͝e̽̒͌t͌͝͝ a̼̝e͉͕͉s͓͓͓t͍͍̦h̼͖͜e̦̘̫ț͓͔i̝̞̟c̘͖.

Using this method, this is what the ASCII art fishy will look like to assistive technologies, such as screen readers:

Copy the code below, add your art, and change the aria-label and you will have made your website more accessible!

<pre role="img" aria-label="Cute ASCII Fish with bubbles coming out of it's mouth">
o           .'`/
    '      /  (
  O    .-'` ` `'-._      .')
      _/ (o)        '.  .' /
      )       )))     ><  <
      `\  |_\      _.'  '. \
        '-._  _ .-'       '.)
    jgs     `\__\
</pre>

Happy ASCII arting!

ʕ•́ᴥ•̀ʔっ

This website is personal

Frills — Wed, 07 Feb 2024 00:00:00 +0000

It is easy to get overwhelmed by the fact that anything you put online can live forever. Even when you evolve and change as a person: your thoughts, your values, your opinions, your past-self still exists in this ephemeral space.
That is beautiful and terrifying.

I've been thinking a lot recently about what I share where on the internet. I sometimes toot consistently and conversationally on Mastodon for a week or so at a time; I post a couple of times a year on Instagram, moreso on stories but even that has petered out a lot; and here on my website I have started holding blog posts up on this pedastal as something that need to be substantial or at least a little bit interesting. Somehow, even here, the lure of professionalism and validation has kicked in.

i want to read your thoughts, your feelings, your perceptions of the world as it's happening around you. romanticize your life; tell me the minute details of your commute—your perception is yours, after all, and i've never experienced it before. Xandra: Everyone should blog

It's funny, because the blogs and articles that I want to read, like Xandra, are personal ones. Midnight musings, a day in the life of. Heck, I spend hours watching YouTube videos of artists just going about their daily errands. That's the feeling with which I started this website, with short posts (microblogs?) on my favourite tiny things and a deadly mushrooms. But that freeness of sharing quickly evaporated and was replaced with more developer-orientated content like a bookmarklet I made to edit everything and what I had learnt about in my CPD. I began to hold an expection that my content should be useful to someone, to have a clear and concise structure, and to leave the reader with something better at the end of it. But in doing so, I have sacrificed that cozy, personal-ness of my website.

As a long term word-struggler, I have always been on a quest to write things more succinctly or interestingly or more fancifully. Sometimes, I write micro-fiction that is full of mystery with no actual plot points or answers. Sometimes, I pick up a solo journalling game, like Be Like A Crow or Apothecaria, but abandon it before the story really achieves anything. I play in a 'Play by Post' game with some friends where I write 200-400 words or so every week. Sometimes, I come up with a banger of a blog post idea, only to find myself grappling with writing the content, and eventually adding it to my increasing pile of forgotten drafts.

But to heck with it. This website is personal. It can and will show my struggles with writing, my incoherence and inconsistency because that is my experience, it will also share my unique and interesting perspective on life because that is also my experience.
In the words of Keenan, share your big dumb beautiful self.

Footnotes

This blog post title was inspired by David Cox's 'This website is personal (in a a good way)' where he writes nice and cleanly about his new personal website and goals. A farcry from what this blog post is 😁

Bookmark dump

Frills — Tue, 09 Jan 2024 00:00:00 +0000

I have this huge folder that I have been collecting links in for several years. It's one of those folders that I use to catch anything that I find interesting, may need for reference or want to read in the future. The trouble is, I never (spare a few) really go back and review them. So I'm popping them all here as a sort of.. archive, but also to share with the world the random collection of interesting things I have found.

The general topic is web development, so bear that in mind before you begin.

Open WP Page - This is a bookmarklet, it sits at the top of the folder and I actually use it a lot to quickly navigate to the WordPress admin page, without really needing to think about it.
44x44 Cursor - Another little bookmarklet, which despite being near the top and theoretically very useful for accessibility testing, I never use it. Not sure where I found it, it made your cursor into a 44x44 square, which was the button/link/interactive element minimum size in WCAG 2.1 (it's been reduced to 24x24 now in WCAG 2.2 for Level AA).
Toggle CSS - A bookmarklet that does what it says on the tin. Toggles the CSS on a webpage so you can see its barebones HTML
Width overflow - A bookmarklet that runs a JavaScript command to check the webpage and spit out any element that overflow the width of the browser into the console.
Colour contrast checker - This is the WebAIM one. I would usually find this by typing it into the browser, rather than navigating my bookmarks. It's a solid one to use, but I prefer colourcontrast.cc these days as it's so visual.
The W3C Markup Validation Service - Every developer worth their salt will validate their code. The one run by the W3C is the only one, in my eyes.
CSSBattle - A silly game that helps you work on your CSS wizardry. You try to replicate a provided image with as little code as possible.
Images done right: Web graphics, good to the last byte — Martian Chronicles, Evil Martians’ team blog - An article I never read about web graphics and using SVGs
Revenge CSS - Bookmarklet that uses selectors to find bad markup, not sure I would trust this these days, it is not actively maintained 😛
buttonClub - A Codepen made by an old friend who loved collecting buttons with fun hovers. Not very accessible, so don't condone their use but they're fun to look at and inspire you to find ways of building them accessibly.
CSS Font stack - A complete collection of web-safe CSS font stacks.
&what; - A list of symbols and their HTML entity codes.
HTML Spec: 13.5 Named character references - The same as above but from the Web Hypertext Application Technology Working Group
Animate On Scroll - A library for easy animation on scroll. Haven't used this in a very very long time.
Screen Reader Keyboard Shortcuts and Gestures - A cheatsheet for how the heck to navigate using a screenreader, covers NVDA, JAWS, Narrator, VoiceOver and TalkBack
Tornis - A library that gives you a tonne of metrics about the browser being used and the positioning of the cursor. Can be used to make fancy position-based changes. Not sure how performant it is. Never really used it.
Umbraco documentation - Umbraco is a .NET CMS, and it has a huge community behind it that keeps it going. This is the wiki for their product.
Paul Seal YouTube - Paul Seal is The Guy for Umbraco tutorial videos.
jQuery docs: $( document ).ready() - Brain always struggled to remember how to initiate jQuery, so brain bookmarked it. I try to avoid using jQuery now because of the weight it adds to a webpage.
Accessible Autocomplete - Developed by the UK government, still in alpha, so not released officially but I have used it in a few projects because Accessible!!
Stacking Cards example - Reminds me of a university project one of my peers did, when you would scroll through pages, like into the screen.
Google Maps documentation: Markers - Reference this a lot when building maps with the Google Maps API.
Textures.js - JavaScript injected SVGs? Not sure I ever used this but I find the patterns visually appealing.
noUiSlider - Think I used this once? It's a range input that has multiple handles. Claims to be accessible to boot.
ChartJS starter examples - When I had to use ChartJS every other day and I just wanted somewhere quick to start from!
ChartJS plugin: chartjs-plugin-deferred - More ChartJS stuff, this one was to make the load in animation wait until a trigger (i.e. scrolling down)
Stackoverflow: Values above points - chart.js - When I had to get the values to sit above the point in the chart 😅
Stackoverflow: Random color generator - In the answers, there is a few ways of going about generating a rando colour using JavaScript
Plyr: A simple, accessible and customisable media player - Never used it, but what a cool tool.
Roslyn error - Lol. The Roslyn error comes up a lot when building Umbraco projects for the first time. This is just a snippet to fix it.
Useful :nth-child Recipes - Nth child magic! This article helps when brain can't brain.
WAS Sample Exam Questions - When I considered becoming a Web Accessibility Specialist but had no idea what I needed to know 100% before doing an exam. Exam fear, engage.
Laracasts - A tutorial website for Laravel (php) stuff.
Gitmoji - I have my own version of Gitmoji that I use for this website, nothing official, but just a visual way to show what the update consists of.
Daily.dev - A new tab dashboard for dev articles. Used this for a bit. Had a group with my colleagues but found only two of us were contributing. Also found it distracting every time I opened a new tab.
CSS shadows under adjacent elements - Article about how to deal with CSS shadows overlapping. A dumb frustration that I feel CSSWG should fix.
Create beautiful images of your code - Create completely inaccessible, but beautiful pictures of your code using several different colour themes. Usually made to share on social media or somewhere that people don't actually want to copy the code.
Modern CSS Solutions for Old CSS Problems - A project by Stephanie Eckles, whom I admire. Some really good tips and tricks, I recommend having a peruse.
Scribble Light Pattern - A cool repeatable background pattern.
overflow-x, overflow-y tests - An article that proved that I wasn't going absolutely potty. If overflow X or Y "is specified as ‘visible’ and the other is ‘scroll’ or ‘auto".
Dummy (or yummy!) paragraph generator using PHP - I had completely forgotten about this one. A friend created it for me and their choice of words is spot on. Here is a sample: Cupcake chocolate beans Gingerbread marzipan
Avoiding <img> layout shifts: aspect-ratio vs width & height attributes - I love using aspect ratio!! This was written before my obsession began.
Eric Bailey - Just Eric Bailey lol.
Hero banners - Not quite the hero we think they are - An article about sustainability, eco-developers and the role of lorge images.
custom-device-emulation-chrome - I had this project idea. And this library was gonna help. But honestly, it was so long ago I cannot for the life of me remember what the project idea was.
GTMatrix - What is this and why do I have it bookmarked? Looks like some SEO bullshit
File examples - Ah! File examples 😀 I have a collection of example files saved to my machine, this is a great resource.
URL-encoder for SVG - A converter for using SVGs are background images, border images or masks.
Neurodiversity Design System - A coherent set of standards and principles that combine neurodiversity and user experience design.
AccessibilityChecker - A free tool that gives you a report of the page and its accessibility sins. (I don't typically use this, my go-to is aXe by Deque University)
Hypermedia Systems - Recommended to read by a colleague. They describe it as 'a simpler approach to building applications on the Web and beyond with htmx and Hyperview'.

Ok! We made it! I took out a few links that were dead at the time of writing. And I am sure at some point this list will become a link graveyard of its own, but I feel refreshed, like a digital spring clean.

Time to delete the folder 🪠🧼🫧

Sharings from Sara Soueidan's Practical Accessibility course

Frills — Thu, 11 Jan 2024 00:00:00 +0000

As part of my CPD I have slowly been going through Sara Soueidan's Practical Accessibility course.

I've already learnt a bunch of things that I wasn't aware of, like if you add list-style: none to a list to override the bullets or numbers, it loses it's role as a list and becomes generic in Safari on MacOS (Bug 170179 - VoiceOver does not announce a list for groups of links when list-style: none;), except when it is inside a <nav> element.

A meme made by my colleague

To resolve this, I am styling the content property the ::marker pseudo element instead of overriding the list-style property on <ul> and <ol> elements.

There is a limited set of CSS properties you can apply to markers, which you can read more about on the MDN web docs.

Edit 11/01/2024

A toot from Starbreaker highlighted that this wasn't going to be the end of it:

So, I've been experimenting with `::marker` based on a blog post by @frills. The idea is that you should set the content property in the `::marker` pseudo-element because it provides better accessibility than setting `list-style-type` to "none". Particularly, the latter breaks Apple's VoiceOver screen reader unless you're doing it inside a nav element.
Unfortunately, Safari still doesn't support content in ::marker, according to WebKit bug 204163 bugs.webkit.org/show_bug.cgi?i…

Stuff like this is why I keep paraphrasing Spaceballs at work. You try to set content in ::marker to support VoiceOver and Safari, but Safari doesn't implement that. Dammit.

@starbreaker@libranet.de

Annoyingly, as previously mentioned, changing the content property was my workaround method, but it seems I didn't review the compatability table thoroughly enough as that property is listed as not yet being supported by Safari. Bah!

So back to square one with finding a cross-browser compatible option. That was, until I came across a blog post!

Removing list styles without affecting semantics by Manuel Matuzović.

In essence, instead of touching the ::marker go straight to the source and overwrite the list-style-type value.

ul {
  list-style-type: "";
}

Manuel conducted a fair amount of testing with 6 different browser and screen reader pairings, all coming up rosy.

So there you have it. That took a turn I didn't expect, onwards with the main thing I actually wanted to share on this post... 🥁

BingO Bakery

Sara shares in one of the chapters of the course is this lovely video produced by Microsoft. It is styled as a cute 8bit game, demonstrating the need for headings, landmarks and tab usability by showing how Hope, the 8bit sprite, is able (or not able) to order a pre-made birthday cake quickly. It's cute, it's fun and it gets the point across. Give it a watch!

BingO Bakery: Headings, Landmarks, and Tabs by MSFTEnable

Edit everything with this bookmarklet

Frills — Thu, 07 Dec 2023 00:00:00 +0000

In the dev world, you gotta test lots of stuff. One of those things is content and making sure what you have built will work for a myriad of different types and lengths of content.

I made a little bookmarklet for this to be done in the browser, all it does is toggle the contenteditable attribute on literally every element on the page and you can change the text to whatever you want.

To install the bookmarklet, drag and drop the button below into your bookmarks toolbar.

Edit everything!

The Silence Of The Girls

Frills — Thu, 09 Nov 2023 00:00:00 +0000

Finished my first book of 2023. I know, it's actually November. This year has not been the one for reading books. I have tried starting a few, but none seemed to stick. I've had The Silence of the Girls (written by Pat Barker) on my bookshelf since late 2018 when I read Circe by Madeline Miller (I am truly shook that was 5 years ago now).

I've tried reading the Illiad itself but it's not an easy read, it's very repetitive and uncomfortable, so I searched around for modern tellings, and found Silence Of The Girls. It's an excellent retelling of the Illiad, from the perspective of the women that were objectified, abused, killed and cast aside. You follow Breseis, Achilles 'prize' from the sacking of Lyrnessus, as she grapples with the loss of her home and family and new (lack of) status, gets stuck in the middle of a dispute between Achilles and Agamemnon, falls in (assumed platonic) love with those that then fall unnecessarily. The book explores the complex relationship between master and slave and the role of women near the end of the Trojan War.

It's a gritty book with lots of discomfort and sadness, but I am glad to have learned about the Trojan War through the eyes of the women.

How to deal with the change of seasons

Frills — Thu, 02 Nov 2023 00:00:00 +0000

Increasingly, over the last 5 years, when the seasons begin to change from Summer to Autumn (or Fall for you 'muricans), I notice a distinct change in my overall mood. The nights draw in, the temperature drops and rain is incessant. I feel like someone has taken my battery out, I'm low energy and begin to lose interest in things that previously gave me joy, and I struggle to climb out of bed to go to work. This collection of symptoms is termed Seasonal Affective Disorder, also known as winter depression.

It's not a surprise that I am susceptible to these issues, I have a family history of depression and my mum has always suffered badly from SAD. Having a day job makes it harder to get outside into the limited sun we are blessed with during these months and the change in clocks seems to hit like a hammer - suddenly the nights are already beginning as I log off my computer.

Low-effort coping mechanisms

I have a few low-effort coping mechanisms to help, especially in the seasonal transition period which seems to creep up on me in October:

Use a SAD lamp

I have a simple, USB-C powered SAD lamp. It's basically just a really bright light with some science behind it, it mimics the brightness of the sun, helping your body produce serotonin and melatonin. Ironically, my eyes are also sensitive to light, so I always have mine on the warmest yellow setting to offset headaches, it has few brightness settings so I can change it based on how sensitive I am that day. It's about the size of an A5 piece of paper and I have the light hooked over my monitor, I'll usually have it on for about 4 hours between 9am and 1pm.

SAD lamps should be used soon after you wake up, to help you get out of your sleepy funk, and for at least 30 minutes to get the benefits.

You can purchase them in a lot of places, and prices can vary wildly between £10 and £250. I purchased mine for £43 ($52) from Amazon in 2020.

Listen to happy music

Vibes, vibes, vibes! I get so much from music. I like to match my music with my mood, typically listening to a lot of drum and bass, electropop, synthwave, girl pop, lofi. But when I have the winter blues, I try to set my mood instead, specifically looking for happier music. Here is one I have listened to a few times this autumn:

Upbeat Music | Background Happy Energetic Relaxing Music | Work/Study Fast & Focus| Uplifting Music by Satisfyingly Relaxing on Youtube

Take vitamin D supplements

Vitamin D is the sunshine vitamin, it's something that your body produces when your bare skin is exposed to the sun, with the sun taking herself to bed early, we produce less of it and this can have knock-on effects on our health. Vit D helps your body absorb calcium which makes your bones stronger, your muscles also need it to move and your nerves need it to send messages between your brain and your body. Pretty important stuff.

I take an extra vitamin D supplement on top of my multivits during these months, it's fat-soluable so I eat it with some buttered toast.

You can get vitamin D from food as well, so make sure you're eating right.

Wear soft, warm and non-constricting clothes

As a cold-blooded human, when the sun goes in, I get cold. All I want to do is cosy up in a blanket all day on the sofa, but a girl got a job to do. So instead, I wear my blanket! Blanket jumpers are the best thing ever, please get one. I also have a hot water bottle belt (or 'wrap around hot water bottle'), intended for period pain relief, but I want to be warm all the time!

I hope some of these low-effort coping mechanisms can help you too, if you suffer the same or worse, or just want to stay warm, cosy and healthy in these sunless seasons. If you have any more tips to share on dealing with the seasons changing and seasonal mood changes, please share them. If you're having a rough time and just want to speak to someone, my email is always open fri11s@proton.me.

Weeknotes for October 2023

Frills — Tue, 31 Oct 2023 00:00:00 +0000

🐶 Orla monitoring

Spent a lot of time monitoring the pup, had a couple of follow-up blood tests, all of which are looking good. She is totally back to herself now, which is the biggest marker for things being OK. We certainly dodged a bullet. This month, I also took some time to make a shrine to her on Neocities.

🎂 Birthdays

Had several birthday celebrations this month. All with cake and merriment. My dad, my fiance's nan, and one of my good friends all turned a year older.

🍂 Made autumn wreaths at work

Part of my work's culture club activities was a group session making autumn wreaths. I used dried hydrangeas, craspedia, bunny's tail grass and eucalyptus to create mine. I've hung it indoors so it will last longer than being on the front door. Such seasonal vibes!

🌟 8 year anniversary with my boo

We aren't very good at celebrating and it fell inside a very very busy week, but we hung out, did a sunrise sea dip together to mark it.

🐶 Walking Murphy

Helping out my fiance's mum, who had knee surgery this month. We took her pup Murphy for a few evening walks whilst she was recovering.

🐶 Dog sat Effie

Love looking after the Spanador, Effie, Orla's bestie.

🌟 Work anniversary

It's been 4 years at my current place of work. A good time to take stock and see how far I've come. I wrote an article on my developer story and decided to...

💸 Became a Neocities supporter

Which also gives me access to a custom domain and all file types!

🌲 Walk in the woods

On a free (original plans fell through) weekend, we took the car out to a local woodland I hadn't been before. It was gorgeous, quiet, and earthy. The trees weren't quite as old and the canopy was not as thick, but it reminded me of the forests in Vancouver from our trip in April 2023.

👯 Rescheduled sister visit

My sister originally cancelled a visit earlier in the month because she was poorly. We haven't had a sisterly catch up (just me and her) in probably about a year, it was long long overdue. We had a lot of heavy, deep and meaningfuls. It was so good to catch up and want to do it more.

🎃 Halloween event at work

I hosted a Halloween event at work, getting people to submit photos, artwork and code based tools and games for a gallery. It was nerve-wracking to put myself out there and run it, and I sunk so much time into building the webpage for the gallery and writing poems and RPG style posts for the company channel to get everyone onboard, but I am super proud of hosting it and will be running one for Christmas too! Here is a screenshot of the gallery with the final submissions:

Names and identifying information has been pixelated using a picdefacer tool for privacy reasons. Image has been converted to base64 using base64 image.

Adding moderation to Virtual Observer's comment widget

Frills — Mon, 23 Oct 2023 00:00:00 +0000

A friend highlighted to me that my guestbook didn't have any moderation, I get emails every time someone submits a comment, but depending on my access to a device, a potentially harmful comment could be left exposed to others until I am able to delete it.

My guestbook is based on Virtual Observer's comment widget, which uses a Google sheet as a database, it's super clever and up until now I've only made a couple of minor modifications to fit my website. This modification is more functional and could benefit others significantly, so here is my walkthrough on how to do it yourself. To get to this point, you should already have followed the rest of Virtual Observer's instructions on how to install the comment widget.

How to do it

Go to the form that you set up for your comment widget and add a new short-answer text question at the bottom.
Name this question 'Moderated'. Don't forget the capitalise the first letter as the code is case sensitive.
From your Google form, press the three dots in the top left corner and then 'Get pre-filled link'. This will open a new tab with your form, as if you were answering it. Fill in every field with the same name as its respective title and then press 'Get link'.
Paste the link into a text editor and scoop out the number after the final entry. which should have the value that you filled in: 'Moderated'. It will look something like this:

&entry.123456789=Moderated

In the file that you originally downloaded from Virtual Observer, find the variable const s_textId = '123456789'; and paste the following on the line below, replacing the number with the number you scooped out in step 4.

const s_moderatedId = '123456789'; // The Moderated field ID

Now we need to add a hidden input field that automatically sets this value to false in your Google sheet. Find the textarea with id="entry.${s_textId}" and below this line, add the following.

<input name="entry.${s_moderatedId}" id="entry.${s_moderatedId}" type="hidden" readonly value="false">

Next, find name.className = 'c-name'; and below this line add the following:

if(data.Moderated == false) {
    name.innerText = 'Guest'; // Change 'Guest' to whatever you want
}

Next, find site.className = 'c-site'; and below this line add the following:

if(data.Moderated == false) {
    site.innerText = '';
}

Next, find text.className = 'c-text'; and below this line add the following:

if(data.Moderated == false) {
    text.innerText = 'This comment is awaiting moderation'; // Change this value to whatever you want
}

And you're done! If you already have comments stored in your Google sheet, change the 'Moderated' value to TRUE for them to show.

When a new comment is submitted the 'Moderated' value with be FALSE. Once you're happy for the comment to be displayed on your website, go into your Google sheet and change it to TRUE.

If you implement this, leave me a comment in my guestbook to let me know!
I'd love to know if this is useful to you.

My developer story

Frills — Sat, 21 Oct 2023 00:00:00 +0000

Like many young kids in the early 00s, I learnt to code using Myspace. Neopets (and even more so Geocities) was a thing before my internet access time, and when I did go on it I was playing all the arcade games not coding. On Myspace there was a hack where you could overwrite the normal Myspace page by forcing the html element to close, simply just a </html> tag, and from there you could completely design and build anything on a clean page, much like you have today on Neocities. Here, I learnt the basics of HTML and CSS, tinkering for hours. I would get home from school before anyone else, I'd plug in the modem to my dad's laptop and tinker away until I heard him coming home.

As well as coding, Myspace was a place where you would take emo/scene selfies and give yourself a name with an alliterative phobia. You could join 'whore trains', where you posted a bulletin with all the other people also in the train and you'd add everyone and collect friend requests, a little bit like Webring. I've tried to find my page on Wayback Machine, but to no avail.. probably for the best.

A few years later, Bebo was all the rage. Not as coding-focused but there was still a way to make your own graphics and themes, which I did extensively until Tumblr was launched. Tumblr quickly became my new coding playground, learning to use the templating system and the API to create an ever-evolving theme.

At this time I was focusing on studying, passing my exams and learning to be a human. I still coded into the night but it was just a hobby alongside playing World of Warcraft, underage house parties and working for some money. With the money from my job, I saved up to buy a MacBook so I could code on my own computer.

When school finished, I had good qualifications in my pocket but no idea what to do with my life. I was working 30 hours a week in a grocery store, collecting savings hoping that one day an idea would pop into my head for a career. Luckily that day did come. A chance chat with someone who was working overtime during my shift, I mentioned that I loved coding and they told me that they had a friend with a web design business. They put me in touch, and I became an intern at this business. This was my fork in the road and I sometimes wonder what would have happened if that discussion never happened. In many ways, it changed my life.

After a year of interning, my boss encouraged me to go to university and learn this stuff officially. This definitely isn't a requirement for getting into web development, especially now, but it helped me focus my path and take my hobby seriously as well as all the other soft skills you get from getting a degree.

At university, I already knew a lot of what they were teaching, so I spent most of my time teaching my peers and helping them with assignments - partly because I enjoyed it, partly because I was procrastinating doing my own. In my second year, I became a paid peer-assisted learning leader for the first-year students who enrolled and I loved it. My course covered lots of different technologies, web development, graphic design, game design (I learnt how to write a teleportation function in C# and used it to create a ton of mini-games), and the ethics of technology. I left university with a First and 3 years' worth of Dean's awards of excellence. This feels very horn-tooty but if I can't write that here where can I!?

After a stint working for a one-man band, I returned to where I did my internship as a junior web designer. Here I met my partner (now fiancé 💍) who had joined the company since I left for university (see what I mean about it being life-changing?). He taught me so much more than university did, I learnt about git versioning and Bootstrap and CSS preprocessors. After a while, he wanted to stretch his wings, so moved on to work in a local university IT team, inspired, I also looked for jobs there and found a User Experience Designer role in a different department.

Working in the public sector has different priorities than private. Work is slower and more intentional, pushing a single change would take weeks or even months of discovery and review. There is a budget for user testing and doing things properly. My time in this role coincided with UK law changes for the public sector regarding web accessibility. Having a fairly strong moral compass and seeing a knowledge gap, I took it upon myself to attend accessibility workshops and learn about the web content accessibility guidelines. This was the beginning of my expertise, and while no longer in the public sector, I am still the champion of accessibility in my current role in a private sector agency.

My passion lies in writing semantic, inclusive code; using HTML correctly and not reinventing the wheel where possible; keeping projects as small as I can to reduce our impact on the environment; and being an accessibility consultant, writing reports on accessibility issues. In my current role as a Frontend (it's one word, fight me) Developer, I sit as the glue between the Design team and the Backend Developer team. Working in an agency is fast and intense and I can touch upon 20 different clients and projects in a single week. I don't have as much time to pour (kinda a pun) into accessibility workshop attendance as I used to (I've reduced it to a single monthly meet up with the international Champions of Accessibility Network) and sometimes I burn out too much to even look at a screen after work hours, but I learn quickly and have grown exponentially as a developer in such a fast-paced environment.

One day, I hope to work in the public sector again, or for a not-for-profit, as this aligns with my life goals and aforementioned compass, but getting to work on such a myriad of clients on a daily basis is fulfilling. No day is the same.

I started this Neocities website in April 2023, after a colleague showed me Localghost's website, which is also hosted on Neocities. Since joining, I have found so much energy in this community, amateurs and seasoned developers alike. Even after a day of burning the candle at both ends, logging into Neocities and seeing everyone's fervour for web development, at whatever point along their journey they are at, has been a source of joy and motivation to me. Going back to the basics of HTML and CSS (no preprocessing) has taught me things I didn't know I was missing.

This is my developer story, and it is not over. It is something that will constantly evolve, chapters will always end and new ones will always begin. This industry never stops moving and you have to keep up. I have been in the industry for 8 years, plus my 3 years at university, and there is so much I still don't know yet.

Other people's stories

Vegan Banana Bread

Frills — Thu, 28 Sep 2023 00:00:00 +0000

A delicious vegan recipe that an old friend imparted with me before we moved away, handwritten inside a greetings card with a penguin on it.

⏰ Recipe time: 60 minutes
🔥 Cooking time: 45 minutes
🥣 Tools: Mixing bowl, wooden spoon, bread tin, foil.

Ingredients

3 to 4 ripe bananas
70 grams of sugar (white, brown or a mix - I do 50/50)
100 grams of bland oil (I use vegetable oil, but the recipe recommends rapeseed)
250 grams of self raising flour
1 teaspoon baking powder

Variants

Poppy seeds
Cocoa nibs
Chopped nuts
Chopped chocolate
Nutella (not vegan)

Instructions

Pre-heat the oven to 220°c (Gas Mark 7, 430°f)
Grease or line a bread tin
Mash the bananas roughly, leaving small blobs for texture
Add the sugar & oil and mix
Into this, beat the flour & baking powder
You then add your chosen variants, whatever you fancy!
Pour the cake dough into the bread tin
Bake in the oven for 15-20 minutes, then cover with foil and continue to bake for another 25 minutes, until a skewer comes out clean.

In the words of my friend:
Now nom it up :)

Weeknotes for September 2023

Frills — Fri, 01 Sep 2023 00:00:00 +0000

🧗🏻‍♀️ Went bouldering for the first time

Easier and harder than I thought it would be! My hands were sore afterwards, but that dopamine hit when you got to the top of one of the (admittedy totally beginner, VB) routes felt goooood.

🏖 Took the dog and her bestie to the beach

Ahead of her spay, we took Orla and her pal Effie to the seaside to run around, paddling in the sea and catch their balls.

🎭 Watched Pride & Prejudice outdoor theatre

The sun was out, the SPF was applied (multiple times), we had cream tea and watched P&P being performed by 5 people - so clever!!

🎲 Dinner & games night with friends

Delicious vegan thai green curry, bakery goods for pudding. Notable games that we played:

🐶 Shit went down with Orla

So Orla went in for her spay, all went well. But the following days she was very poorly. We took her back into the vets but it was brushed off as low pain tolerance. Following days she stopped eating food and vomiting 4 times a day, she became severely dehydrated, she was having regular muscle spasms on her head and jaw. On Sunday we rushed her off to the emergency vet hospital, they didn't know what the connection was between her vomiting and muscle spasms so ran some tests 'just to see'... it came back that she had an acute kidney injury - life threatening. Cue the worst week of my life, leaving her at the vets being pumped full of IV fluids, electrolytes, painkillers and antibiotics and just praying her body could recover. Not knowing if that Sunday was going to be the last day I would see her alive. She's only 1 and a half years old, it seemed so unfair! But she responded well to the fluids and her blood levels improved. She was able to come home on 3 days later for the night to trial being off fluids and she did OK.

We're still at the start of this journey and we won't know the full extent of the damage that has been done. She'll be having blood test for a while to monitor her progress. And my life could turn upside down again at a flip of a switch, but today she is happy and healthy.

Here is the hold music that was playing on the vet hospital phone when we called up for an update - my other half took most the calls and he says this music now reminds him of the place our girl got better:

👀 Perspective shift

This whole ordeal, whilst leaving me with some intense anxiety and always-on alertness to anything she does that could possibly be a symptom of deterioriation, has made me more present and made me want to celebrate more and take her for more adventures. I want to spend less time working, more time with her and people I love. Life is fragile, make the most of it now.

🍽 Sunday roast!!

Part celebration, part making the most of life, part really wanted a yorkshire pudding!

👨‍👩‍👧 Mum and dad popped over in the evening

Not usually a common occurance as they live over and hour and a half away, but they came over for the evening to see Orla (and us). We made them dinner and I gave them a little card with Orla's pawprint on it and a few photos I got printed of them with her as a thank you for looking after us the week before.

🐶 Dogsat Effie

Looked after Effie for the day. Orla loved it, but Effie got bored of Orla trying to play very quickly

🦠 COVID is going through the family

We missed visiting family last weekend as we were on Orla Watch, but during that weekend and this week, two of our family have been admitted to hospital with COVID. They say bad things come in threes, but I feel like we've gone beyond that count this month!

Looking forward to October, and hoping it brings far more health and happiness to everyone. This has been a monster of a month that I would like to not repeat.

Weeknotes for August 2023

Frills — Tue, 01 Aug 2023 00:00:00 +0000

🎉 Work's birthday party

Ate pizza and doughnuts and pranced around taking selfies together

💻 User testing at work

Took part in some user testing for our latest project - first time I've done it in years and it was so very satisfying.

🍝 Friend's birthday meal

Delicious (vegetarian!) food and fancy drinks

🤖 Binged Simone Giertz on Youtube

My dog seems to love her voice so I popped on a video for her and ended up rewatching her content for hours. If you haven't heard of her before, she is the Queen of Shitty Robots

✨ Redesigned and refactored this site

The design wasn't working for me any more and I wanted a cleaner look with more flexibility in space usage.

🎪 Festival season!

Music, sun, mud, camping. Green Man highlights: Voya, Melin Melyn, Self Esteem (obviously) and Sudan Archives.

🦠 Got sick

Caught COVID-19 at the festival. Second time I've been infected. Got it pretty bad, it was intense but quick.

🖥 Office tidy up and reshuffle

I took out the small crafting table, which I hadn't been using for anything other than junk, and replaced it with a rickety bookshelf that was stored in the garage. I've filled the bookshelf with some old notebooks, my collection of greeting cards, and my salt lamp. The room feels more intentional now and it's easier to get to the window

Accessibility master post

Frills — Mon, 31 Jul 2023 00:00:00 +0000

A living master post for accessibility resources:

Current guidelines

Web Content Accessibility Guidelines (WCAG) 2.2 - Published October 2023
Quick overview of "What's New In WCAG 2.2" explainer posts - Marcus Herrmann

People

Sara Soueidan (my hero) - Inclusive design specialist, engineer and trainer.
Adrian Roselli - Member of the various accessibility working groups.
A11y with Lindsey - Self taught web developer on a journey to becoming an anti-ableist.
Eevis - Accessibility Specialist (CPWA - Certified Professional in Web Accessibility) and software developer.

Sites

Learning

Fonts

Atkinson Hyperlegible - developed by The Braille institute.

Accessibility tools

Super visual colour contrast checker
Random accessible color combinations
axe DevTools, automated accessibility testing browser extension (I prefer this to the WAVE extension)

Articles

Web Accessibility: For people or profit? - Written by Sleepy Dev
5 ways to make your neocities site more accessible - Written by Sleepy Dev
An inaccessible web is not a free web - Written and curated by Foxpunk on Tumblr
Aria-Label is Not Always the Answer - Written by Eevis

Tiny things

Frills — Thu, 27 Jul 2023 00:00:00 +0000

tiny gatherings
tiny vases
tiny art
tiny tattoos
tiny poems
tiny websites
tiny bookshops
tiny blog posts
tardigrades

Things I don't like tiny

cups of tea
website text

Weeknotes for July 2023

Frills — Sat, 01 Jul 2023 00:00:00 +0000

🌕 Full moon sea dip

An amazing way to start off the month of July. Took a friend who was new to sea dipping me me. They were nervous af but came out beaming. Very wholesome. Very full heart.

🐘 Joined a Mastodon instance, finally

If you're on the fediverse, come toot hi! cutie.city/@frills.

🏠 More garage sorting

Made 'uuuge progress on the garage. Got the door hook on (massive quality of life update omg), shelves up, drawers in place and all the DIY stuff is now in there, not super tidy, but in one accessible place!

🦷 Dentist liked my teeth

Been on the local dental waiting list for years, and finally got assigned a practice!! Won't have to drive 2 hours to get to have my teeth poked ever again. yaaay

🏃‍♀️ Started running

Started (and stopped, due to joint pain) the NHS couch to 5k. Sarah Millican cooing northern motherly vibes into my ears as I jog in the rain is incredibly soothing.

🟩 Joined a new Minecraft server with pals

Built an iron farm instantly, using aJack's aesthetic tutorial. IT'S SO CUTE.

👯‍♀️ Seeing people IRL

Spent time with friends and family this month, saw lots of friends - some that I hadn't seen in at least 12 months!

👩🏼‍💻 Worked on the website

Done a few tweaks to the site, added a button wall and made my own button. Really need to write my manifesto so that I can align myself with it, mostly around my rules for using images (trying to avoid images entirely because of their file size). Already considering a redesign, but need way more content here first.

Deadly Mushrooms

Frills — Tue, 27 Jun 2023 00:00:00 +0000

Deathcap

Wild Food UK mushroom guide on Deathcap

Shiny. Not that remarkable. Gets slimy when it's wet.

There is no antidote. Symptoms start fairly quickly, with being sick, diarrhoea and stomach pain - that can last for days! Then you make a full recovery, then die from kidney and liver failure. Brutal. The poison, alpha-amanitin, kills liver cells and goes through the kidney to get recirculated to cause even more damage.

Destroying angel

Wild Food UK mushroom guide on Destroying angel

Supposedly very beautiful with it's pure white flesh, but is deadly. Apparently abundant in Scotland, take care my Scottish foraging friends!

Same symptoms as the Deathcap. Is that method just the Mushroom Way? Lure your victims into a false sense of recovery, then bang, liver failure.

Mushrooms are insane.

Thoughts on forest-bathing

Frills — Thu, 15 Jun 2023 00:00:00 +0000

I want to reflect on a recent research group that I was invited to join - to summarise, the idea (or research) is to have people in leadership or up-and-coming leaders to partake in forest-bathing, known in Japan as Shinrin-Yoku, to improve wellbeing and their ability to lead.

First of all, I was very happy to be invited. My role at work is not as a leader as such - more of a mentor to juniors and anyone willing to listen - so I don't have the pressures of needing to manage the politics and the wellbeing of people under me. However, it was valuable all the same as I believe everyone should be encouraged to tune in to nature on the reg (especially people in the IT industry).

Forest-bathing doesn't require you to get your kit off (my manager insisted when she extended the invitation), the practice when more akin to sun-bathing, you simply spend time in it. Being present with the smells, sights and sounds that come with being surrounded by nature. More scientifically, exposure to the phytocides released by trees increases the number and activity of a type of white blood cell (Immerse Yourself in a Forest for Better Health) which fight nasty cells like cancer. Big win for hugging trees, huh?

We did a variety of activities to get us in the zone: a silent, slow walk through the wood, being encouraged to look at colours and notice things. Then we stopped and picked a spot to take a detailed look at the foreground, midground and background. We carried on the walk after this, touching leaves and tree branches as we went - tree moss is super soft! We came into a clearing where were did some sniffing of things, snapping fallen twigs and leaves and huffing the earthy scent, some people dug the earth itself gave it a smell (honestly that just smelt like when I do potting in the garden). We stopped again to share what we had noticed with the group. This was fab because everyone noticed different things, it made me then look at those things too. One example was that people had looked up to see how the sunlight filtered through onto the leaf canopies to create beautiful patterns and shapes. We cupped our ears to increase what we could hear and I was actually blown away by how much detail I could hear when I did that. So give that a go next time you hear a bird in the distance. And finally, we sat in a circle and listened to an integrated meditation, which was basically a story of water and how it travels through it's different states. This one for me didn't do anything and tbh I would have loved to have just sat and listened to the sounds of the wood, but others reported it was soothing so perhaps it will work for you.

Afterwards I felt suuuper zen. Although a bit disheartened that we even have to do this, when in eras gone by, this would have just been the norm. We are animals after all. I would like to work outside more, spend more time by or in water. I really really enjoyed it, but not sure it's for everyone —

You need buy in. Not money buy in, like mind buy in. It feels weird to go round sniffing sticks or stroking a leaves, you need to be willing to give it a go. While I am pretty sold on the benefits of forest-bathing (can you tell?) not everyone would be, so I've compiled a little list of things you can do to weave Shinrin-Yoku into your everyday.

Decorate your surroundings with nature, bring the colours indoors, greens, browns, wood, house plants, essential oils.
Work outside if you can: take that meeting outside; bring your laptop into the garden; get some fresh air at lunchtime.
If you can't work outside, open that goddamn window! Especially when it's raining. Frills drools at the smell of petrichor
Go for a stupid little walk for your stupid mental health.
Look up, notice what isn't directly in your eyeline.
Touch grass. Honestly, just touch it.

Weeknotes for June 2023

Frills — Thu, 01 Jun 2023 00:00:00 +0000

🚣 Kayak training with the dog.

It was in the shallows but the water was rapid so I was nervous we were going to float away! The dog did amazing though, I thought she would be spooked because she is terrible in the car, and this is also a vehicle that moves, but she was excited and handled the kayak moving really well. Lots of treats were had. Next time we'll go on deeper but calmer waters.

🎨️ Finished painting the garden fence.

Just the gate fence to go now. The weather has really been in my favour and I need to hurry up to finish it because the rain will surely come back soon!

👩‍💻 Giving eleventy a go.

I have a github repo where it is very much the basic fork but it's progress. I've dabbled with Hugo in the past but the language and structure of 11ty (nunjucks) seems to make sense to me.

🌕 Moon sea dip.

I haven't sea dipped for about 8 months, since before the clocks went back for winter. Completely forgot about the happy chemicals it makes. I was buzzing after and slept very very well.

✅ Completed a follow up survey with the ONS.

Our answers had mostly not changed from March. But I found it really tough as someone with auditory processing difficulties, the bad phone line and the lady with the strong Spanish accent made my brain go ouch.

🕸️ Watched Spider-Man: Across the Spider-Verse in the cinema.

Adore the art styles. Big old set up for Spider-Verse 3. Threw a lot of popcorn at my face. 10/10.

🌊️ Sunrise sea dip.

Got up at 4am to dip in the sea for sunrise. Sea was so far out I nearly lost my crocs in the mud a few times on the wade in. The north easterly wind is brutal, and I ended up getting chill from being exposed for too long, had to wrap up in my oodie and a scarf for a few hours.

⛈️ Paddled in a waterfall pool in the shadow of a thunderstorm.

Atmospheric, hot, a little bit scary, wholesome. The dog finally learnt to swim as well!

🌲 Forest-bathing for research

I was lucky enough to be invited to join university fellows in research about forest-bathing and it's effects on people with a focus on leadership roles.

🏠 Clearing some furniture from the garage

I will reclaim the garage from all the clutter!

🐕 Dog sat for a poor old boy

Minded Murphy (mother-in-law's dog) after he had been in the vets for 2 days, he was so so so sleepy.

👨‍👧 Celebrated Father's day with my dad

Forever grateful for having him as my dad. We went to a carboot, ate nice food and had a paddle in the river!

🚣 Getting interested in Commonplacing

Making unthemed notes, lists, quotes, doodles. Some people notebook that way automatically, but I'm too precious. I want commonplacing to help me use analog processes more

🎨️ Work social!

Spending some IRL time with my remote colleagues, smashing some 9 year olds in laser quest lol

👩‍💻 Enjoying the summer solstice.

Didn't do anything special, but had a nice walk and was mindful of the turning of tides. Trying to be positive about the descent into darkness.

📚 Want to start reading again.

Still remember the absolute joy of reading The Priory of the Orange Tree and everything gets compared to that. I have been chatting to friends about the Wheel of Time TV series, and the books are supposed to be excellent, all 14 of them.

🕺 Fiancé is away for work

So I've been doing a tonne of washing.

💞 Date night with the bestie

It's been ages!

👨‍👩‍👧 Mum and dad popped over for the evening

I live 1.5h away from them in the car, so having them pop over for the evening is special. It was lovely to have their company, they took the dog for a walk before I finished work and we ate good food and chatted. They also brought me some poppy seeds!

🎨 Finished that half-painted wall in the utility room

I started painting the wall before we put up our clothes airers, because I didn't want to take them down againt to paint behind them. Fast-forward a year and it's still half painted. I just so happened to have the energy and motivation to finally finish that wall.. and maybe start another!?

A little dev rabbit hole

Frills — Thu, 25 May 2023 00:00:00 +0000

The rabbit hole

Umbraco UI - component library for cms tool
Storybook - the tool used by Umbraco UI
Say bye bye to bad javascript practices - Freddy Manrique
Front end roadmap
Why we're bad at CSS article - 100% agree with this
SmolCSS - Minimal snippets for modern CSS layouts and components
CoolCSS - Another CSS framework.
Challenges our reliance on BEM structure 👀
Also has a kitchen sink page where it displays everything
animation-timeline - Scroll based animations in CSS in draft