I’m Just An Old Guard Dev In A New Guard World

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