Apply for the next session

This is in the works! Right now, it's just holding place to help us game out the Study Hall system. : )

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)




Apply for the next session