sara
Hi! Welcome :)
I am a techy, creative person with a front end development 'Schwerpunkt' :)
I'm learning everything I can about Web Accessibility (a.k.a. a11y), because the internet is for *everyone*.
This site is built with vanilla HTML, CSS and just a little JS in Astro.
What's new /now?
Speaking
I have found myself getting into giving talks within the web development industry.
Please find some links to slides and videos at slides.sarajoy.dev.
Code Skills
I have varying experience using:
stuff
Benjamin Dickson
My friend Ben needed a new responsive website to replace an ageing Wordpress site which was not responsive at all. I love building sites with such interesting content!
I built this site with Astro.
QR Code Card
I had an idea to make a digital business card, to use at my very first web-development conference.
In the end, it wasn't really used - but no matter, it was fun to make :)
W.I.P.
I have many works in progress going on...
Whimsica11y
Via my CSS webring, I've come across a whole new world of hobbyist websites, and they're just wonderful!
A number of them are however not very accessible. I'm not calling anyone out - because this is people building their own stuff for fun, not as a service for people to use. But, many of them actually do want to be more inclusive, while also finding themselves bewildered by the advice and resources available out there. This is my attempt to be helpful.
This project has indeed stalled out for now - BUT - it's given rise to a talk also named Whimsica11y. So, all is not lost and I do hope to move forward on this eventually!
ASCII Art
When I was 15 or so I frequented several USENET newsgroups,
particularly alt.fan.eddie-izzard and alt.ascii-art.
If in dark mode, consider switching to to see it properly!
______
_.-=,-" _... """-.,_
/" .- "'-.,-- " ' _ \
,' - . -'" _",- -" . \ '.
/ / / __ -" /)_)\ (\ '. \
/ / ( _( \ )\/ )/ |/) \
( - _\ /' /') )
/ ' " ) / /
| / ( ( ')(
\ | / / _.,,. _,,._ /
\ - // .:'`'_```' '``_`''./
\ /"\_: /<(8)_>) (<(8)>' |\
|/|\T: ".'/ `-_" ||
| LJ|' | ||
`\ * . ` /
>\_, (_ | J
<' \ `'/' |
<_\ /
<\ `<-':'-':'- /
_/\|A .,___,- /
/ / |'M. ``` /
_.,/ < | ''M. /\-.._
_/'` | | o . '''A. _-`\ ( `-,
" sjw / >./o ' '''''''''' |o \ \ '.
| \ o ' ' ' ' ' o ) \
\ \ o ' ' ' o / )
| / | o o .' /
\ ( \ o o o .". /
\\ \ ) / _ \ /
"\ ( / (:) ) /
\ / /" Self-portrait!
\_/ \\
--(_)-- < "_)
/ \ .--.-.--. / /
V /#/
______________/(/
)\ _,--,/ .-/#/\
"\"-._.oo ' / \)/_\\
"-.___. ./____________________\
\__ | ( ) |__| |__| |
,-,\_|_|__|_____________|__,-,
| |________________________| |
L L________________________J J
_.'._.'._.'T T________________________P P_.'._.'._.'._
\ \______________________/ /
'._.'._.'._.'._\ \____________________/ /'._.'._.'._.'
sjw ","-.______________.-","
"-._""--------""_.-" Noah's Ark
""--------""
\) /\__/\ (/
_.-:-._ (<|><|>) _.-:-._
_.-' / \ '-._'(VV)'_.-' / \ '-._
.-' / \ . . / \ '-.
'-. / \ . . / \ .-'
\ / _.._ \ .\ /. / _.._ \ /
|/.-` `.\' '))' '/.' '-.\|
' (( '
sjw )) Cat-bat? Erm...
"
__..-----')
,.--._ .-'_..--...-'
'-"'. _/_ / ..--''""'-.
_.--""...:._:(_ ..:"::. \
.-' ..::--""_(##)#)"':. \ \) \ _|_ /
/_:-:'/ :__(##)##) ): ) '-./' '\.-'
" / | :' :/""\///) /:.' --( )--
/ :( :( :( (#//) " .-'\.___./'-.
/ :/|\ :\_:\ \#//\ / | \
|:/ | ""--':\ (#//) '
\/ \ :| \ :\ (#//)
\:\ '.':. \#//\
':| "--'(#///)
(#///)
(#///)
\#///\
(##///)
(##///)
(##///)
(##///) Mmm desert island...
\##///\
(###///)
(sjw////)__...----....___
(#/::''' ""--.._
__..-''' "-._
__...--"" '._
_____..--""" "-.._______
(_ ""---....___ ___...--"" _)
"""--... __"""""----.......__________.......-----"""" --"""
"""" ---..... ___....----
__________________________
| |
| NO LIVE TURTLES OR | _,,.------..,
| _|-'`-``_//\/'/-_ `\
| FROGS ARE TO LEAVE ((_,.-,.-'' '`\|
| ||-''` \
| THE STORE. / / / \.
| / /)/}T /\ \_
| ZXZXZHXHZXZHXZHXZHXH | ) ) | { ('( \(',- <
| [ /|/)-') | |
|_____________________| / | )
| | _,.,,_ . .:'`: L (
\ / '`/(o)\`: \/(o)>\ L /
\ | --_'` : |`'''` |/
|| Y|
\ . '. |J
|\ [* _-*/ |
',\ || |
_L `_.,::--::,. |
,/ | - ... - /
_,/ |\ _ _ :`'\
,/ / /'`|VA /\ \,_
_sjw/~ / ( |:VAa. ,, . /| |\ `\
,-' / ( \_-/\ ::OHAa.___,.-' | / \ `\
/ / \ \ : :VHHHH: :' / \| \\
/ \-._ () \ : : : / :_ \
| | `'\ \ _/ _ / \
/ __.. | \ \. _/'` '_,/ \
/ _,-' \ \ \ () \_/ _,.-'`
'` \( \ /-'`
) \ _/| EDDIE IZZARD
/ | /
/ |() |
/ | |
:.__:
_ __ __ _ __ _|_
.-""-/ (o) \\ (()) /| ()() ."__". / | T
/ ' /\\ |\\ "" /|| Y--T / T__) \ \\|
-||====\/ /__\\ | \\ / || |_. | |\\ | '|,
\ || / \\ | \\/ || | ' \ J \\ / |\\
'-..-'/\ /\ /\ V /\ L--J ".__." L | /
_ __ "|"__ _
sjw (o) ." ". ." _". ,|, ,|, V () () ()()
/\\ / T // \ / // T \ || || \/ \\ \/ Y--T
"GAMERS ARCHIVE" /__\\ | |// | | || | ||==||- || \\ / |_.
/ \\ \ J__) / \ \\_. / || || || \\ / | '
/\ /\ ".__." ".__." /\ /\ /\ \/ L--J
()
_,..,_
/::::::\
/::::::::\
/::::/\::::\
/::::/ \::::\
/::::/ \::::\
/::::/ \::::\
/::::/ \::::\
/::::/ \::::\
/::::/ \::::\
/::::/ \::::\
/::::/WW/ww/ \::::\
/::::/ _0000ooo, \::::\
/::::/ C0000000000000000o \::::\
/::::/ V00000000000000 \::::\
/::::/ 000000000000000o\::::\
/::::/ V000V""""000V"00 \::::\
/::::/ A0 VA oAV 00 \::::\
/::::/ AV "0oAV" \::::\
/::::/ oAV o0"Vo \::::\
|::::/__________________________________\::::|
\::::::::::::::::::::::::::::::::::::::::::::/
'-;;;;;;;;;;;;;;;;;;sjw;;;;;;;;;;;;;;;;;;;-'
|:. |
|:. | Warning, Moose!
|:. | Se upp, älg!
|:. |
|:. |
.ee._
, /$$$$$$e.
'. /$$.$'$$$$$.
\ |$/$$$$$$$$$\
""--._|_ |/$'$$$$$$\"*'
.ee. .-" . ""*$$$$$$)"-'
/$$$$ee/ //\|'-/""V"\"**'
|$$$$$/|/ ' e$*- _\ \"-.
/$$$$$|" $$.- ."\'\ \ '.
|$$$$$|\ (_$/ / /.-"\ \ ), \
\$A/\|"-_"' -" '\ \ |/ \
/-"" " \-"| / \
.-"""""- | || \
.-" |_|/ \
.' _.sjw. |/ / . \
/ .e$$$$$$$$) | / | \
| .e$$$$$$$$$$/ .-._/ | | \
\ \$$***$$/ ) \ / / / \
\ '*( \/ ."__ \/ ,"/ / |
/"-._) "" \ .-"." / / |
/ -"/__. --./--".-" | / |
| /../\ )--"" |. , / /
\ ""/| "-" , /\ /||\/ /
"-.__.-" | | |\| /-, /
/ | \ ) / /|
| |, \ . --"| / / /
/ \\ '.'-." / / /
|| \\ "" / .' /_
|\ . \ . /." ".'
|/\ \ . \ . / . / _.-'
MUTTLEY!!! ' \ \ |\, |, /|/| /|,/__,7
\|\|\\\ |\|/ | |/ "V
.-',' \ '-.\ V / V
>-. "-.\ |" /_..--.
( /". | .-._)
V _A "-. \
"---""" ". )_."
'-.."
__ __ __ __ __ __ __ __
(// \\) __(// __ (// \\) __(// __ (// \\)
sjw /" / __ \\)" \\)_ /" / __ \\)" \\)_ /" / __
'|-..__..-''\_''-.\__..-'' '|-..__..-''\_''-.\__..-'' '|-..__..-''\
(\\ \_ _(\\ _/ (\\ \_ _(\\ _/ (\\ \_ //)
"" (\\ //)"" //) "" (\\ //)"" //) "" (\\ ""
"" "" "" "" "" "" ""
_.._ * .\_|_/.
*/ /` _._ * _._ _-/ \-_
{ | *//`\\..-..//`\\ -\_ _/-
\_\._* \\_ ` ` _// `/ | \`
* `` __`| |_| |`__
________/ \\__// \__// \sjw_____
|**- \_|/ \___/ \|_/ -**|
|* Sara Joy ------, ICQ# 32690270 *|
|| sara(a)------.as ||
|____________/ \_/ \____________|
\\_\/ \/_//
___ ___
_.-' '/? '-.
_.-' _ --\/ _ \ `'\
/ _ - _--\/ \ \ `\
/ / _L \ |
| / .,-''' \ \ \
/ / / | |.
/ ,' ' | \ |
| | | : | | \
/ | | | | | |
/ / | | \ \ \ `|
J / / | | \ \_ |
| | / ) _.,,. \_ \ .>
\ .:'`'_```' /''\_ _ _->\
\ __.-` /<808_>| |<808>`\`' ,\
|/|\T / / `-_ |/ ||
| LJ| | || /
`\ * . ` /'
> \_, (_ | *J |
<'` \ `'/' - |{
_<`' < \ /| |
_> < \ `<-':'-':'- / | }
_/\ < < |A .,___,- /| \/
/ < < |'M. ``` /| |\|
_., < < | ''M. / -'\_ old
/'` / |/| o . '''A. _-`-/ \_ `-, self
/ >'/o ' ''''''''' | \ '. portrait
/ \ o ' ' ' 'o| |
| \_ \ o ' ' '. o' / |
/ \__\_o o`|/ / `\
|,._ \o o / _/ \
\ |oo o |` / |
\,._ \ oo o / / \
sjw `'|_ \ oo o / _/ |
\ \ o | / |
:::,
'::::'._
'. '. __.,,.
'. '. _..-'''':::"
\ \,.--""""--.,-'' _:'
/\ \ . . .-'
/ \ \ ':'
/ \ : :
/ \: :
\ : :
\ : ,--, ,-, :
\ : |(_) | |() | :
\ : __'--' __ '-'_ :
\ : / \ \/ / \ :
\ : ( ) \_/ :
.-'' . : \__/ '--''--' :
\ . .-:'. .:
\' :| / '-.__ ___...-' :
\::|: '''''' '.
.,:::'/ : '.
\::\: : '._
\:: : / '-._ '.
\: : / . :-._ :-'
: : / : : ''
: .' )'. : :
sjw : : .' '. : :
: '..' : _.' _.:
'._ :..---'\''' _)
'':---''_) '-'-'
'-'-' PIKACHU!
_,-""--.__ ___
/' __ '' '\_
,' \ __ '\
) \ ___ (
,' _.--._ \ __ \
/ / " \_.-.___ )
/ ( \,_ |
\ / / /\_ \
// ,,_ /// \
/\ '=, /\ /
|| \_ \ _.,,._ /) (
(| "" ) / _ '" / _/
| / ',__.- / ,/)
| ",/ /
| ( \ ' /,\
_____\ , '-"-' .' )
_,-" \ ' -.__ ' . ,' )
,-' \ \'-."-. ) ,-' < )_
/ \ '-.-' / \ ," "-._
/ ''._ _,-| '< "-._
,' '.__----:" \ '. "-.
/ / | """' / | '.
/ / \ ,-' | '._
/ / \ / \ '-.
/ / \ / \ '-,
/ / / \ '-
/ sjw | an old boyfriend (eyes closed) \
_,-""--.__ ___
/' __ '' '\_
,' \ __ '\
) \ ___ (
,' _.--._ \ __ \
/ / " \_.-.___ )
/ ( \,_ |
\ / / /\_ \
// ,,_ /// \
/\=.,._=, /\ /
|| YMMMMM. / .._,,._ /) (
(| MMMMMM)=,_.,,.. '" / _/
| `"""/ qMMMMML /,,/)
| MMMMMM>-""',/ /
| ( \ '"""' ' /,\
_____\ '-"-' .' )
_,-" \ -,-.__ ' . ,' )
,-' \ \'-."-. ) ,-' < )_
/ \ '-.-' / \ ," "-._
/ ''._ _,-| '< "-._
,' '.__----:" \ '. "-.
/ / | """' / | '.
/ / \ ,-' | '._
/ / \ / \ '-.
/ / \ / \ '-,
/ / / \ '-
sjw/MJP/LS and a diddle for sunglasses! \ 
RSS JOY Aggregator
This little RSS aggregator is built with Astro. It outputs a fast, static page.
It randomises the list of supplied feed URLs each time it rebuilds, as well as updating the entries. Rebuilds are triggered at least every 6 hours via a Netlify build hook and a GitHub Action.
A slower-loading client-side RSS-parsing version is available at /live :)
Mega-Zine
This is a mock-up in HTML and CSS of an old and slightly strange Channel 4 Teletext page I used to read avidly as a teen, Mega-zine.
With thanks to The Mega-zine Museum and teletext art for the great quality almost-source materials I could copy!
/basic
I got an itch to start redoing my website in a more basic, elegant way.
I'm not sure I'm succeeding with elegant visuals, but either way you can see the work-in-progress here!
Swingtänzerin
There is a lot of stuff on this old tumblr of mine:
Swing dance DJ sets, lindy-hop discussion, photography and crochet projects. Enjoy!
Yasmin Brinkmann
A friend from swing dancing needed a new landing page, and gracefully agreed to my coding it from scratch as a learning exercise.
Written in pure "vanilla" HTML, CSS and a smattering of JavaScript :)
tabs 2022
I had an idea about using the behaviour of the CSS property "position: sticky" to make a stack of cards that would land on top of each other when scrolling. Well, I made it and immediately applied it to my landing page :)
First written in Notepad++ in HTML and CSS only!
MK timelapse
I worked for MK timelapse GmbH, which in 2019 really needed an updated website. I hopped on to Wix, chose a template and then modified it heavily to reflect the feel of the new (at the time) MK logo.
In its current state it looks like it needs some love!
Light/Dark Mode
I discovered the CSS property color-scheme and then ran with it.
People still really don't use it much, so this experimenting of mine has now also morphed into a blog post and talk!
Blogger
An even older blog than my Tumblr!
Feel free to browse. Again, lots of swing dance related content but other stuff too.
blog
-
-
Short Thorts
A collection of shorter posts not big enough for their own article. Very likely also posted to Mastodon.
-
-
-
-
-
-
Farmors Chokladkaka
I've been wanting to save this recipe in digital form for a while. Why not here?
-
-
-
-
Do you know color-scheme?
It will certainly look familiar, as prefers-color-scheme has been around for longer and is clearly related.
-
-
-
-
-
-
Other posts...
find
Find me elsewhere:
Email me:
Or, find others!
You want to thank me for something?
You mean, in more than just words (because they're enough, honestly)?
Then donate a little to your favourite cause, or to Oxfam on my behalf.
If you then message me to let me know, I'll get to enjoy some warm and fuzzies 🌞
