SotB2021 notes

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 – /
  • https://usefathom.com/
  • https://plausible.io/
• 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)
    • https://whatdoesmysitecost.com/
• 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
  • https://www.thegreenwebfoundation.org

Most of the talk can be found here: https://www.wholegraindigital.com/blog/website-energy-efficiency/

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 https://www.456bereastreet.com/archive/200409/styling_form_controls/ (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?) https://aka.ms/popup-explainer
  • “whack tabs” hahahha
    • https://aka.ms/tabs-demo
    • https://aka.ms/anchor-pos
• Customizing controls UI
  • chrome, edge .open UI working group
  • proposals
  • MVC style
  • …
  • https://aka.ms/open-ui  YCG web incubator group
  • https://aka.ms/controls-explainer
• …

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”

role

name

state (if it has a state)

https://developer.mozilla.org/en-US/docs/Glossary/Accessibility_tree

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…)

https://developer.mozilla.org/en-US/docs/Web/CSS/contain

Heydon

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)