SotB2021 notes
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?)
- autoplay burning through data / lowest income have limited data –
- 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?
- already preloaded – so, ‘free’ space-wise.
- 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)
- 16x more efficient than RUBY
- “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/
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
- No real way to style them… rely on the OS (look this up)
- 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…
- appearance property —
- 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)