#dev 2020-05-19

2020-05-19 UTC
leg, joshghent, nickodd, KartikPrabhu, d0gfart, [jeremycherfas] and loicm joined the channel
#
jacky https://newcss.net/
jacky, d0gfart, swentel, nickodd, garrettw and [tantek] joined the channel
#
[tantek] ooh that's pretty slick. newcss++
#
Loqi newcss has 1 karma over the last year
moppy joined the channel
#
[tantek] I really like the concept, and the execution is quite slick too. I've had something like that as part of my cascade in my blog, "elementica.css"
#
[tantek] largely unchanged since 2010: https://tantek.com/2010/elementica.css
KartikPrabhu and [prtksxna] joined the channel
#
Zegnat Hmm, I feel like the contrast on the form elements is bad. I almost didn’t notice them.
#
Zegnat 1.11 contrast ratio between background color (#000) and form field background color (#111). And no borders around the form field unless focussed.
[tantek] joined the channel
#
Zegnat Oh, yikes, when I go to light mode the contrast drops even further to 1.06! (website background #FFF, form background #F6F8FA)
#
Zegnat So newcss looks great, but please don’t use the form styling 😅
d0gfart joined the channel
#
swentel hmm I kind of like the form styling
#
swentel but a11y isn't perfect then?
#
Zegnat Did you even see the form elements?
#
Zegnat Wonder what contrast your screen is set to then, swentel :P
#
Zegnat https://github.com/xz/new.css/issues/21
#
Loqi [Zegnat] #21 Hard to distinguish form fields
#
swentel yep, looked the demo
#
swentel seems fine to me
#
Zegnat The form fields are so vague to me when I just scrolled through the page that I almost missed them
#
Zegnat A contrast of 1.06 to distinguish elements from eachother, I would think, is not going to pass any a11y check.
#
swentel this is how it looks on my screen: https://postimg.cc/9R3SDkmw
#
swentel now, to be fair, it could be a little better though
#
swentel I might have been biased by your remarks so I /was/ looking for form fields :)
#
Zegnat Max brightness 2019 MacBook Pro screen from a somewhat normal screen reading distance: https://photos.app.goo.gl/DBYAh4A7BFsEqtgL8
#
Zegnat Can I see the form fields? Sure, when I am looking for them (which I was not when I first scrolled through the demo page).
#
Zegnat Do I think everyone will immediately grasp those fields as places to click on and enter text in? Nope.
#
Zegnat (Clearly I need a media endpoint and Indigenous for photo sharing.)
#
swentel hehe
#
swentel mm yeah, night theme is way harder
#
Zegnat Which is interesting, because the pure mathemetical contrast ratio is actually better on the dark theme.
#
swentel ok, yeah, need to keep looking for a better starting point for the desktop version of indigenous - tips welcome for other basic light / dark mode css :)
#
Zegnat Google found that enclosed text fields work the best. And they settled to have *at least* a stroke at the bottom of the box was necesary. For visibility reasons they stuck with a 3:1 contrast ratio. https://medium.com/google-design/the-evolution-of-material-designs-text-fields-603688b3fe03
#
Zegnat As a data point if people are thinking about form design :)
KartikPrabhu, loicm and [LewisCowles] joined the channel
#
[LewisCowles] jacky++ newcss++ I like that it's sans-serif by default.
#
Loqi jacky has 22 karma in this channel over the last year (82 in all channels)
#
[LewisCowles] zegnat++ for contrast
#
Loqi zegnat has 17 karma in this channel over the last year (51 in all channels)
#
[LewisCowles] I run WAVE by WebAIM, but recently was told by a room of accessibility consultants the automated tools for a11y are only 30-40% at best effective. Been updating some accessibility for my site by including extra text as content and hiding that for only those who I believe will not want / need to see it using positioning, translation & masks.
#
[LewisCowles] I've also "slowly" been going through posts to try to make content more approachable or clear
[grantcodes], [aimee] and [prtksxna] joined the channel
#
beko !tell [snarfed] I think you were looking for https://trivial.observer/blog/mastodon-comments/
#
Loqi Ok, I'll tell them that when I see them next
#
Loqi [Basil] Mastodon Comments on Hugo
shimmy1996 joined the channel
#
shimmy1996 I also ran WAVE on my site a while back - and as a result I just gave up specifying colors entirely XD
loicm and KartikPrabhu joined the channel
#
[LewisCowles] shimmy, do you just use browser defaults?
[jgarber] joined the channel
#
shimmy1996 yeah - those normally pass all the contrast tests already
#
[LewisCowles] I really like having a purple site that passes Wave.
#
[LewisCowles] passes with warnings lol
KartikPrabhu, [aimee], [KevinMarks] and [tantek] joined the channel
#
[tantek] I didn't see the form elements at all on https://github.com/qwebirc/qwebirc/
#
[tantek] err I mean https://newcss.net/ obviously
#
[tantek] (aside: that github repo is for the online IRC client used by irc.w3.org)
#
Zegnat [tantek]: the form elements weren’t shown off on the homepage. Did you look at https://newcss.net/demo/ ?
#
Zegnat Either way: got a reaction to my issue and they are planning to fix it in an upcoming minor release! <3
#
[LewisCowles] 7 errors from WAVE by webAIM
#
[LewisCowles] 10 alerts
#
Zegnat [LewisCowles]: the newcss demo?
#
[LewisCowles] yeah
#
[LewisCowles] that's without dark-mode
#
[LewisCowles] which to be clear, I hope someone class-actions all the OS vendors for supporting. I hate it
#
[LewisCowles] "hey things are not going well... How about we put more garbage out there to make things even worse"
#
[LewisCowles] there seems to be very little sweeping of floors
#
[LewisCowles] hmm. In dark mode it looks identical
#
[tantek] Thanks Zegnat, I'll check out the demo!
#
Zegnat I love dark mode. It has become my default.
#
Zegnat Although it was a pain to get it supported in my browser extension, hehe
#
[LewisCowles] Oh. Did you write that up? Someone asked me about support and other than linking them things so they can fix themselves, I've not touched mine
#
Zegnat In the end I found a way around it, I include Firefox’ own browser chrome CSS into my view
#
Zegnat https://github.com/Zegnat/browserext-window-merger/blob/master/preferences.html#L7
#
Zegnat They say there is a native styling thing you can enable in browser extension config, but in my experience that ends up needing lots of custom code
[prtksxna] and nickodd joined the channel
#
[LewisCowles] Ah. Mine is just for the icon AFAIK
#
Zegnat Oh, yeah, mine does not really have an icon that I feel needs tweaking depending on dark/light modes
#
Zegnat But by default the preferences screen did not follow the browser UI it gets embedded within. So I spent time on that.
#
[LewisCowles] It's getting filed in my memory banks. Thank you Zegnat++
#
Loqi Zegnat has 18 karma in this channel over the last year (52 in all channels)
#
[LewisCowles] btw, has anyone ever accidentally replied zergnet. Perhaps my internal relation engine busted but it keeps trying to auto-correct you to zergnet
#
Zegnat I do not think so. Not that I recall at least.
#
[LewisCowles] must be something I've done to my PC. It doesn't seem like it should be in a dictionary
#
Zegnat I have been called Zegnat at IndieWeb events a few times, which is always interesting as I basically never go by that name outside of IRC :D
#
[LewisCowles] Ah, unless someone tells me their preferred contact, I try to avoid using their name in-case.
#
[LewisCowles] what you picked on irc is good enough for me 😛
nickodd joined the channel
#
sebsel iA Writer’s demo just came out, and fixes both Micropub issues. No idea how fast the cycle goes from here, but I think all is good soon :)
#
sebsel Demo = beta*
[chrisaldrich], loicm, d0gfart and Salt[m] joined the channel
#
[KevinMarks] https://twitter.com/tomcoates/status/1262615126001082368?s=20
#
@tomcoates What’s the best way to post updates from an RSS feed to a Twitter account? /cc @genmon (twitter.com/_/status/1262615126001082368)
[grantcodes], gxt, [aimee], [KevinMarks], loicm, KartikPrabhu and [tantek] joined the channel; nickodd left the channel
#
[tantek] What is NPM?
#
Loqi npm is the Node package manager (although the npm project maintains it is not an acronym), though it can be used to manage javascript package for any type of javascript project (not limited to node.js or server-side js) https://indieweb.org/npm
#
[tantek] [KevinMarks] can you add an example of a ~ username path to ^^^
KartikPrabhu joined the channel
#
[KevinMarks] I should find a better one than my blank one
#
Loqi definitely
#
jacky interesting new flow for applying for a twitter app creds https://developer.twitter.com/en/application/use-case
#
jacky oh wow
#
jacky I'm in
[tw2113], xsteadfastx, slinging-divs and [tantek] joined the channel; slinging-divs left the channel