Web Clerks Communiy Conf 2019

  • Charlie Owen
  • sonniesedge.net
  • @sonniesedge

Who are you?

  • I’m Charlie. You might know me from the World Wide Web.

Berlin

  • I live in Berlin. The most sophisticated place on earth.

sonniesedge

  • sonniesedge.net is where I live online.
  • I’m a big believer in the indieweb.
  • “sonniesedge” is also my handle on every locked in platform

Grandma

  • I’m here to confess to you that I’m a grandma.
  • I’ve been in this industry for over 20 years now.

Cool grandma

  • Not the cool kind of grandma.

Bad grandma

  • But the bad kind of Grandma
  • The one who likes to remind you how bad her leg feels, how you never visit her.
  • I’m a miserable old grandma because of all I’ve experienced.

Woman in tech

  • Things such as being a woman in tech. Still not that many of us.

Older woman in tech

  • And being an older woman in tech.
  • I’m in my 40s now. Which is absolutely ancient for tech people.
  • There are almost no women my age in this industry. :(

Non-neuronormative woman in tech

  • I’m non neuronormative.
  • I suffer from severe depression and anxiety
  • I have ADHD.
  • For these I take a lot of medication just to get to the same level as the rest of you.

Gay non-neuronormative woman in tech

  • I’m very very gay
  • Which we’d love to think is happy and accepted.
  • But you try working at a gay woman with a bunch of insecure straight boys and you’ll see what it’s like.

Gay transgender non-neuronormative woman in tech

  • I’m trans
  • I transitioned medically and socially when I was 18.
  • We generally don’t do that well or live that long due to severe discrimination and mental health, so I am grateful to be here still over 2 decades later.
  • I’m out about this because there’s so much hate against us. - I want to show we’re everyday idiots just like everyone else.

Win

  • All of this together gets me some kind of prize at intersectionality bingo

Damn Social Justice Warriors

  • Why mention all these? We’re talking about tech, no?
  • To be honest, it’s because it makes some of you deeply uncomfortable.
  • And more importantly, they are part of me. They have informed my work life.
  • All my career has to be viewed through that lens.

I've seen webpages on fire off the shoulder of Orion

  • And what a time I’ve had in this career. I’ve seen some stuff since I started in this industry in the 90s.

The 1990s

  • And we should talk about the 90s. I know it’s trendy now But to those of us who lived in that era… well, it was shit.

Friends

  • We had absolutely fucking awful sitcoms.

Windows 95

  • We had ugly ass operating systems.
  • I know this was innovative back then. But it’s awful to look at now.

Video tape

  • And the only way to watch anything recorded was via spinning loops magnetised tape at high speed.

WIndows 95 Video Guide, featuring Matthew Perry and Jennifer Aniston

  • If you were REALLY unlucky you experienced all of these at the same time.

Could this BE any more Microsoft?

  • Go look this video up if you ever get chance. Absolutely fantastically awful.

The WWW in the 1990s

  • The web back then was just as awful
  • I guess “Awful” is unfair. It was only just born! How many of you were amazing at only 1 year old?

Font tags

  • But it WAS really different. Can’t deny that.
  • No CSS! HTML itself dictated how page looked.

3 Column Layouts

  • We actually used to use HTML for layout. Again, no CSS.

3 Column Layouts using tables

  • We used tables. Which is awful from an a11y perspective.

Widths in table cells

  • There were many problems. But a big one was setting width on a column. No browser honoured it.

Shims and table cell widths

  • So we had to prop them open.
  • See the img tag? We used it as a “shim”.
  • A tiny 1x1 pixel gif.
  • Because browsers did honour widths on images.

Jacking open table cells with images

  • We had to jack open our awful table layouts.
  • Right from the start we were having to use hacks.

This is still used

  • Actually this layout technique is still used! Where?

Emails still use table layouts

  • Email templates!
  • Because we have apparently cursed ourselves as an industry and earned a thousand years of Email engine hell.

Java Applets

  • So, when I first started this was the only way to get interactivity.
  • This was a chunk of a Java app that we dumped onto a page.
  • Seriously: Java. Not JavaScript.

Java Applets

  • We used to use it for really important things like this.
  • We had to compile a java app manually, and upload it to the server.

Object

  • New standard: OBJECT.
  • Remember, JS still non existent or shit around this time.
  • Any app could now be inserted.

Macromedia Flash

  • In reality only Macromedia flash.
  • It was a GUI app - multimedia based applications.
  • Had to compile the resulting file.
  • But was first time that actual designers were drawn to the web.
  • Suddenly interesting layouts, typography, interactions possible.

Loading screens

  • Sadly most of their skills seemed to go on making loading screens.

Background images

  • We loved background images.
  • BRING THEM BACK.

Tiled background images

  • We loved tiling those backgrounds.
  • Again, you should be doing this more.

Animated gif images

  • We loved animated gifs.

Tiled background animated gif images

  • We loved animated gifs as background
  • All with the bgimage html attribute as no CSS for this

  • We had amazing typography back then.
  • Oh, sorry, can you not see that?

  • Can you see it now? No?

  • We had absolutely zero clue about accessibility back then.
  • The use of tables for layout could be forgiven. But things like this were widespread and it only takes a seconds thought to realise 11px fonts might not be legible to all.

Framesets

  • Framesets were the only way to not repeat things like navigation
  • Had to create a separate navigation document and pages and them mash them together with frame sets

Cascading Style Sheets

  • So, HTML tables and FONT elements were it when I started.
  • But the same year I started Something called “Cascading Style Sheets” was invented.

CSS was shit

  • Sadly, it was also shit.

CSS 1.0 - colors

  • We could set the colour of text and background.

CSS 1.0 - fonts

  • We could set text properties.

CSS 1.0 - floats, padding, and margins

  • And we could float things!
  • We could also… - oh, sorry. That’s it.
  • Because that wasn’t a sample
  • That was the ENTIRE LANGUAGE.
  • But was a HUGE step up from HTML font tags.
  • We got classes! Can’t tell you how amazing these were. - Defining reusable styling code was INCREDIBLE.

CSS specificity and source order

  • But compared to now, CSS was so limited.
  • No preprocessors.
  • No modularisation.
  • Everyone wrote CSS by adding to the end of a CSS file, overriding specificity if they had to.

CSS Zen Garden

  • But more progressive web devs realised we could separate semantic HTML from styling
  • They started to convince people about power of CSS.
  • Sites like this started to appear

Responsive CSS

  • The short timescales amaze me.
  • Responsive CSS only appeared only NINE YEARS AGO.

Typography

  • And when it came to typography we didn’t have web fonts We had only whatever was installed on a users computer

Websafe Fonts

So practically we got to use: - Helvetica/Arial - Times New Roman - Georgia - Courier New, - Verdana - Trebuchet MS - Comic Sans

Scalable Inman Flash Repalcement

  • Again, no way to load web fonts
  • had to use weird shit like SIFR.

Javascript

  • And talking of javascript Which we didn’t call it JS…

DHTML

  • We called it DHML again, fuck knows why
  • Most JS back then generated by apps, if used at all

Macromedia Dreamweaver

  • We didn’t know how to code well so we had GUI apps to do it for us.

Brendan Eich is a homophobe

  • JS the language famously written in 10 days By this guy, Brendan Eich
  • Who donates to prevent same sex couples from marrying in the USA
  • So fuck this homophobic guy

"JavasSript is for idiots"

“Javascript is for idiots”

  • Everyone hated JS initially
  • The software engineers saw it as a joke
  • And given the complete lack of standardisation that was understandable.
  • Every browser did things in a very different way

ECMAScript 1, 2, and 3

  • 3 versions quickly emerged in one or two years.

Too many differing implementations

  • Then all innovation stopped
  • ECMAscript 3 sat there for the best part of a decade
  • But everyone’s implementation of ES3 was different

ECMAScript 4

  • They did try to standardise once as ES4
  • But it failed
  • All browsers were fighting Browser Wars. That was when MS, - the biggest tech giant at the time - tried to dominate with its browser - and make it the web default.

Chrome dominating the web ecosystem

  • Which doesn’t sound familiar AT ALL.

ECMAScript 3.1

  • Browser folk realised that fighting is BAD and tried again.
  • Standardised bits of it into ECMASCRIPT 3.1, which was a HUGE change.
  • I think they got embarrassed that they didn’t figure ES4.

ECMAScript 5

  • Because they jumped straight to ES5.
  • Which we all know today as the legacy compile target that is broadly compatible with both IE11 and every other browser.

Engingeering Culture

  • But this standardisation of the scripting language had a downside
  • The web suddenly switched from a medium dominated by designers To an Engineers medium

"I'll show you!"

  • You know how people laughed about Javascript initially?
  • I honestly sometimes think all this is a massive overcompensation.

Nerd

  • Which is how we find ourselves in an industry that has gone from was JUST starting to become user-centric to To one that venerates engineering over users
  • NOT saying engineering is bad!
  • Some of my best friends are engineers
  • But we’ve perhaps lost our way

Artisan

  • When I started out we were way more small scale and artisan.
  • Which I’m not saying is a great thing.
  • We had way too many manual processes and a complete lack of standards.
  • No way for this to scale even to the team level.

Production Line

  • But we’ve somehow overshot
  • And embraced production line mentality.
  • We’re all about boot camps And standardised frameworks

Model T

  • I think this is just temporary.
  • We’re still in the Model T days of the web’s history.

"Do you like anything about the modern web, Grandma?"

  • So, do I like anything about the modern web?
  • Good question, as I’ve just had a big old reminisce about the past

Yes!

  • The past that I’ve just been talking about is one that I’m damn happy to get away from
  • While I don’t like the new Engineering culture, I think that’s a temporary thing
  • A symptom of capitalism
  • We’ll get over that soon
  • But I’m so excited by all the new amazing stuff in our world

Responsive and Dynamic

  • When I started it was all tables and fixed with layouts. 640x480 at best.
  • But now we think in a dynamic and responsive way from the start.
  • Thinking about how will a component look on different screensizes, orientations, densities is the default!
  • As well as the size media queries that have transformed how we work…

Srcset

  • …we have srcset and <picture> that allow us to send only images of the correct dimensions to a browser.
  • No more wasting a users bandwidth by sending desktop size images to a mobile device.

User Preferences and OS integration

  • We can now listen for user preferences
  • When I started “user preferences” meant “write your own local stylesheet” (which you can still do).
  • But now it’s now something more.
  • Now it’s about expose OS and user preferences via APIs in CSS and JS.

MS Edge's Dark Mode

MS Edge now allows you to set a global dark or light mode.

MS Edge's Dark Mode via CSS

CSS can listen for that and honour it.

Prefers Reduced Motion

iOS allows a user to “prefer reduce motion”

MS Edge's Dark Mode via CSS

  • Safari exposed that via a media query. And now other browsers are implementing it.

Chrome Data Saver

  • Chrome and data saver
  • Which allows a user to explicitly say that they’re trying to reduce data.

Chrome Data Saver via JavaScript

  • Now we can listen for that and deliver smaller javascript files Or no javascript at all!
  • We can now respond when a user effectively states their needs.
  • We’ve allowed that mature conversation to take place between the user and the developer.
  • Of course, we need to do our part and honour those settings. Go and do it after reading this!

Accessiblity

  • We had no concept of a11y initially.
  • You saw we made designs that hated people with disabilities.
  • But we learned.
  • And we started to bake accessibility in to the very language.
  • Since HTML5 emerged with semantics and ARIA roles built in this has become more and more important. And thank god it has.
  • It shows a fundamental maturing of our industry.

Evergreen Browsers

  • Do you know how incredible this is for anyone who has worked in the industry for more than a decade?
  • Major Browsers used to be heavily tied to the OS. To update IE you had to update windows.
  • It caused the whole industry to move at a snails pace.
  • Now it’s only Safari on MacOS and iOS that is tied in.
  • All others, even the ones from MS, have been liberated.

Native Lazy Loading

  • Evergreen browsers mean we can roll things out progressively.
  • Lazy load was such a simple genius move
  • Totally progressive enhanced and polyfillable

Web Fonts

  • When we design for these browsers no longer do we have to limit ourselves to basic fonts.
  • Or to use bizarre hacks like we saw earlier.
  • We have small font files, and we know about amazing font loading techniques.

Variable Fonts

  • And things like Variable Fonts are gonna make things even more amazing.

Components and Modular Coding

  • Small, modular, reusable chunks of code.
  • We used to have spaghetti code everywhere. Random scripts that no-one knew how they worked.
  • Now these code modules are self-contained, limited, documented.

JavaScriot Frameworks

  • I know I have a reputation for being down on javascript But I absolutely love it.
  • The frameworks we’ve made from it are genuinely amazing and useful.

React

The criticisms I have are only with the dominance of one single framework

  • I’m looking at you, React.
  • A diverse ecosystem is vital.

Cowpaths and Standards

  • And all these things together have led to something amazing
  • A true balance between standards and cowpaths.
  • Because every time we innovate with JS and CSS in the client, we show the need for a feature in the browser.

CSS Grid

  • CSS Grid only came about because it was demonstrated over years by women like Rachel Andrew and Jen Simmons that layout was important.
  • So many CSS layout libraries before then.

jQuery

  • Powerful selectors in JS only came about because of jQuery’s Sizzle engine..

Balance

  • But we’ve got to keep that balance.
  • We could let just one vendor dominate everything.
  • But we’ve tried that,
  • that’s how we ended up with the crap of the 90s.

Ivory Towers

  • We could let the standards people invent and browsers implement.
  • But that would be too slow
  • standards folk would have no direction without cowpaths.

Developer Chaos

  • We could let the engineers go wild and build things with no standards
  • But then nothing would interoperate
  • Everything would fragment into chaos

Communication

  • Like any good relationship, the balance between standards and innovation is about communication.
  • We need to keep talking and listening to what our fellow devs, designers, and most importantly, users, need.
  • So, keep talking
  • Keep communicating
  • Keep being amazing.

Thank you