Group session July 1st

This is in the works! Would you like to help flesh it out? Let's do it!

Whoever is talking is pretty funny.

The gents and the ladies / bold! haha

sotb means sex on the beach…. so – use SotB2021 haha

#HashTags that are Title case / will be read by screenreaders

Note – sponsor one of these next time…



Tom Greenwood:

A book apart: Sustainable Web Design:

The web is the “The biggest machine humans have ever created”  – consuming alllll day.

  • streamline user journey (less time online == less energy)  / wasting time – user time – more pages / using more energy
    • example used is a shopping cart – that is on every page / vs. go back and fourth…. : /
  • images:
    • use less — is it really really necessary? Is it really helping?
    • use vectors and CSS instead / if possible…
    • change the image /reduce detail / example: blurring edges — think creatively —  removing color — webp,  avif
  • video:
    • autoplay burning through data / lowest income have limited data –
    • reducing the time (data) –
      • (depends… right? do you want our videos to be shorter?)
  • System fonts
    • already preloaded – so, ‘free’ space-wise.
      • for many situations – fonts may not have the impact you expect. Whatever they’re used to is probably fine – right?
  • Optimize fonts
    • woff2 is smallest (check)
    • subset the fonts to what you are using –
    • use less weights
      • (compare with variable)
  • OLED
    • white – all energy!
    • black – none!  All switched off!
      • (but what uses it?)
  • Track less
    • more and more energy to get it from you / store it / track you – /
  • Efficient coding languages
    • best C Rust C++
    • least Perl, Python, Ruby
    • JS is 7x more efficient than PHP
      • 16x more efficient than RUBY
        • (need proper background on this) (how do the package managers fit in)
  • “Don’t drug the user”
    • Stop trying to addict people – and keep them around…
    • Let them out!
  • Consider your audience
    • Is it global?
    • The smallest amount of data
      • (Depends though, right)
  • What is the most common phone/device?
    • What should we really be testing on?
  • Green hosting
    • does the host have a commitment to renewable energy
    • Is it a direct connection?
      • local contracts… buying credits etc… how far away are they…
    • we don’t really know about anything between ….
      • What are all of the stops on the way?
    • Server caching… (less building of files)
    • firewall and things to block bots and traffic / for no reason
    • Stack technology for things like WP

Most of the talk can be found here:

How to choose a green web host



Stephanie Stimac:

webhint / pre lighthouse?

  • HTML form controls are kinda a mess…
  • example: Date
  • 1995: first set of standardized form controls / but standardized what they were supposed to do – but not how they should be built by browsers
    • No real way to style them… rely on the OS (look this up)
      • no standards / so they all got styled differently
  • 1997: CSS… really though 1999 ->
  • (form examples (check date with ^)
  • Browser vendors didn’t want to make them stylable / because they want them to match…
    • appearance property —
      • not so not / early 2000 with internet explorer…
  • present
    • still not hot
    • cant style them
      • note dark mode / prefers @media
    • not extendable
      • example: video element: all or none controls
    • What do developers really want? good to check!
    • New native elements
      • Looking into rebuilding select
      • popup –  / light dismiss behavior / — (so, an alert modal – but more respectful?)
    • “whack tabs” hahahha
  • Customizing controls UI
    • chrome, edge .open UI working group
    • proposals
    • MVC style
    •  YCG web incubator group


Alex Russell

more than a decade of mobile phones / being the future —

Healthy competition for browsers going UP on desktop / but down on phones

Most people starting out online today / will start from a phone — that sets norms which will define future –

Google, Apple, and Facebook —

If you want access to the Google Play store / you HAVE to put a google search input on the main screen -> no matter the default browser -> ends up in chrome

All browsers end up using safari / webkit – and the binary that is shipped with the device –

It was hard for me to keep up.

Facebook – can’t tell that I’m in a whole different web browser – “The Facebook Mobile browser may be the most popular browser that you’ve never heard of and never explicitly used.”

Disabling it is rough / and certainly, most people will not do that.

Web views aren’t evil and have good uses.

Allow developers to suggest / (demand) – two-sided opt-in  content-security-policy “don’t webview me bro”



implicit semantics / HTML / button  / text within  – becomes Name  (accessible name)  “sign up button



state (if it has a state)


explicit: aria / role

aria-pressed=’true’  (example) – (‘toggle’ – now that it has a state) /

JAWS = ‘region’. / another may call it “landmark”. /  she doesn’t think it’s an issue. “Hi vs. Hello

area-label=’website’ –  “Website navigation region”  area-label=’website navigation’. —- “Website navigation  navigation region”

ul, li – name = content — also gets numbers – bullet etc. – in the accessibility tree –  / a, b, c – etc….

if link in the item… then the name shifts –

aria-current=’true’ (mirrors active links)

input ‘type’ give it their implicit role — and the accessible name

table (caption give it it’s accessible name) td gives the name — th

It’s important how HTML works… because you’re going to have to fix all of your javascript that just spits out hundreds of span.


Interaction: keyboard support

implied: (it’s provided)

explicit –  – customize them / and you assume responsibility – – – and things you may not think of… like ESC to leave /



Rachel Andrew

Short history of tables > absolute things overlapping… >  floats clearing things > flex >

intrinsic sizing/default behavior of flexbox

flexbox based grid ends up being extrinsic by setting the parent boxes –

“Grid makes really good demo” –

minmax(0, 1fr)   Grid also allows for this

defining size and stuffing stuff into it vs. / allowing the

from the inside out —

Check out the intrinsic parts of Grid —


contain: layout (look this up…)










Amber Case

Slightly strange intro / – explaining – that


Future of Micropayments

3 options:

closed marketplaces / etsy kickstaters / facebook / IG etc … can go out of business…

reoocuring subsicciption…  patreon – netflix etc / and lots of them….

data selling / invasive advertising —


micropayments —

small  one-time purchases …

402 code….

protocols instead of Venmo  —- at the level of email / across different ledgers –    (with less or no fees)



Interested in web browsers —


A lot of people focus on really big changes “I’m going to make a huge browser – and it’s going to do this

In reality, all the newest biggest stuff – generally starts out really small. If just the smallest atoms shift in our experience of the web – by simply changing or creating new protocols / or just collaborating with what already exists – in a clever way. It doesn’t take a lot to create a giant shift over time.



“Glass is useful because it’s empty. You can put what you want into it. It’s an incredibly clever invention. But I see a lot of people inventing vessels that only hold one type of liquid. and they don’t work well with other glasses. They don’t bring people together. they split people apart.

6:48 (note WordPress)




Group session July 1st