https://sarajoy.dev

Sara JoySara's homepage, blog, portfolioSara Joy Skip to Content Sara Joy sara stuff blog find sara Hi! Welcome :) I am a techy, creative person with a front end develop­ment 'Schwer­punkt' :) 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. If it is all a bit much, there is a simpler version to be found at sarajoy.dev/basic What's new /now? Code Skills I have varying experience using: stuff color-scheme: dark × color-scheme: dark I had already written a blog post about color-scheme, and another which had a section on contrast levels and what they mean for different people - in this talk I smash those together into something hopefully coherent about how easily you can cater to lots of people at once :) Another shorter version of this talk can also be found on youtube as part of the 11ty conference in 2024 - see also the janky online slide deck. Benjamin Dickson × 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 × 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. × W.I.P. I have many works in progress going on... Whimsic​a11y × Whimsic​a11y Via my CSS webring, I've come across a whole new world of hobbyist websites, and they're just wonderful! A lot of them are however not very accessible. I'm not going to call anyone out - because this is people building their own stuff 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. Very much a work in progress! ASCII Art × 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 light mode 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 × 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 × 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 × /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! Swing​tänzerin × Swing​tä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 Brink​mann × Yasmin Brink​mann 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 × 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! CSS JOY Web​ring × CSS JOY Web​ring I set up a webring for people who enjoy CSS! MK time​lapse × MK time​lapse 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 × 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! Blog​ger × Blog​ger An even older blog than my Tumblr! Feel free to browse. Again, lots of swing dance related content but other stuff too. blog Weak Notes Weak notes are like #weekNotes but less regular. 2023++; Short Thorts A collection of shorter posts not big enough for their own article. Very likely also posted to Mastodon. 2022++; Doug Engelbart or: How We Learned to Stop Commanding and Love the Mouse How Apple's Macintosh design philosphy affects the web. 30 Sept 2024 How 'Senior Generalist' Sara Side-Stepped from Childhood to Techy Generalist to Mother to Front End Developer 20 Jan 2023 Do you know color-scheme? It will certainly look familiar, as prefers-color-scheme has been around for longer and is clearly related. 14 Jan 2023 Sara Uses A list of some of the things I use at my desk. 10 Sept 2024 Everybody's Free (To Write Websites) My rewrite of Baz Luhrmann's hit, for the revival and indie web. 16 Jul 2024 This Is My Church. I used to be part of a church. Maybe I still am, just not a Christian one. 16 Dec 2023 A11y: Semantics, Contrast and... Anxiety? It's a lot. It's tempting to pretend we didn't read that very confronting article telling us we need to Do Better. 7 Jun 2022 The web changed. 28 Sept 2023 Musings on 'What Screens Want' 16 Aug 2023 Building sliding cards with position: sticky; 27 Jun 2023 #100DaysOfCode 8 Jan 2023 Job Application Tips 9 Sept 2022 Other posts... How We All Benefit from Accessibility 21 May 2022 Using html

tag as navigation 27 Mar 2022 Mechanical Watches 24 Aug 2021 Why I Dance, Nov 2012 28 Nov 2012 Blogroll RSS find Sign my Guestbook! I'm not tracking, analyzing, or feeding you cookies. If you want to tell me something about this website, please sign! Find me elsewhere: @sarajw /sarajw /sarajw /sarajw Email me: Name Email address Subject (please skip this field if you're real) Are you sure you want to type in here? I won't get your message! Message I consent to Netlify Forms receiving this message and passing it through Akismet spam filtering. Privacy policy. Send Email Or, find others! CS.Sjoy.lol webring ← Prev · Random · Next → a11y-webring.club ← Prev Random Next → ←  An IndieWeb Webring 🕸💍 → The Claw 🦋 Webring ooh.directory PERSONALSIT.ES Privacy Policy I do not track you, I do not run analytics, I do not set cookies. I do write to session storage, so that you don't get surprised when your chosen high contrast or dark/light modes turn on or off as you navigate around the site. This disappears the moment you close the tab, or browse away. The only data I receive from you, is that which you freely give me through the email or guestbook forms. Because doing contact forms properly is surprisingly complicated, these are powered by Netlify Forms, which sends the input through Akismet spam filtering. Should you want a copy or would like me to delete anything you sent me, I will happily oblige - contact me in whichever way you prefer to ask for this. Alternatively, you can directly email me if you add contact@ to the beginning of the domain of this website :) Accessibility Statement This is very much a hobby website built in my spare time, with many "to do's". I do however fully welcome any advice about where I need to fix something because something is inadvertently inaccessible. I am extremely interested in making the web accessible to *everyone*. I read a lot of material related to a11y, and am learning so much while doing my best to apply as much of it as I can in my day job. The Web Content Accessibility Guidelines (WCAG) defines requirements for designers and developers to improve accessibility for people with disabilities. It defines three levels of conformance: Level A, Level AA, and Level AAA. My personal website is partially conformant with WCAG 2.2 level AA. Partially conformant means that some parts of the content do not fully conform to the accessibility standard. As the default site doesn't fully satisfy contrast requirements, I have an added contrast toggle available for those who need or prefer to view the site with high contrast. I welcome your feedback on the accessibility of this website. Please let me know if you encounter accessibility barriers by contacting me via your preferred contact method. Site Map You can find a whole set of these little anti-AI badges on Andy Carolan's Ko-Fi 😊

en

en

1729163405

https://sarajoy.dev

¿Editar su sitio?

¿Qué estás haciendo?