Explore
Register
Log in

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

A presentation at Web Clerks in November 2019 in Vienna, Austria by Charlie Owen

Web Clerks Communiy Conf 2019 — Web Clerks Communiy Conf 2019
Charlie Owen
sonniesedge.net
@sonniesedge

Who are you? — Who are you?
I’m Charlie. You might know me from the World Wide Web.

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

sonniesedge — 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 — 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 — Cool grandma
Not the cool kind of grandma.

Bad 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 — Woman in tech
Things such as being a woman in tech. Still not that many of us.

Older woman in tech — 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 — 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 — 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 — 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 — Win
All of this together gets me some kind of prize at intersectionality bingo

Damn Social Justice Warriors — 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 — 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 — 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 — Friends
We had absolutely fucking awful sitcoms.

Windows 95 — 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 — 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 — 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? — 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 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 — Font tags
But it WAS really different. Can’t deny that.
No CSS! HTML itself dictated how page looked.

3 Column Layouts — 3 Column Layouts
We actually used to use HTML for layout. Again, no CSS.

3 Column Layouts using tables — 3 Column Layouts using tables
We used tables. Which is awful from an a11y perspective.

Widths in table cells — 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 — 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 — 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 — This is still used
Actually this layout technique is still used! Where?

Emails still use table layouts — 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 — 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 — 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 — Object
New standard: OBJECT.
Remember, JS still non existent or shit around this time.
Any app could now be inserted.

Macromedia Flash — 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 — Loading screens
Sadly most of their skills seemed to go on making loading screens.

Background images — Background images
We loved background images.
BRING THEM BACK.

Tiled background images — Tiled background images
We loved tiling those backgrounds.
Again, you should be doing this more.

Animated gif images — Animated gif images
We loved animated gifs.

Tiled background animated gif images — 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
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 — 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 — CSS was shit
Sadly, it was also shit.

CSS 1.0 - colors — CSS 1.0 - colors
We could set the colour of text and background.

CSS 1.0 - fonts — CSS 1.0 - fonts
We could set text properties.

CSS 1.0 - floats, padding, and margins — 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 — 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 — 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 — Responsive CSS
The short timescales amaze me.
Responsive CSS only appeared only NINE YEARS AGO.

Typography — 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 — 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 — Scalable Inman Flash Repalcement
Again, no way to load web fonts
had to use weird shit like SIFR.

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

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

Macromedia Dreamweaver — 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 — 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" — "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 — ECMAScript 1, 2, and 3
3 versions quickly emerged in one or two years.

Too many differing implementations — 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 — 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 — Chrome dominating the web ecosystem
Which doesn’t sound familiar AT ALL.

ECMAScript 3.1 — 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 — 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 — 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!" — "I'll show you!"
You know how people laughed about Javascript initially?
I honestly sometimes think all this is a massive overcompensation.

Nerd — 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 — 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 — Production Line
But we’ve somehow overshot
And embraced production line mentality.
We’re all about boot camps And standardised frameworks

Model T — 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?" — "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! — 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 — 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 — 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 — 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's Dark Mode
MS Edge now allows you to set a global dark or light mode.

MS Edge's Dark Mode via CSS — MS Edge's Dark Mode via CSS
CSS can listen for that and honour it.

Prefers Reduced Motion — Prefers Reduced Motion
iOS allows a user to “prefer reduce motion”

MS Edge's Dark Mode via CSS — 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 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 — 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 — 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 — 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 — 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 — 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 — Variable Fonts
And things like Variable Fonts are gonna make things even more amazing.

Components and Modular Coding — 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 — 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 — 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 — 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
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 — jQuery
Powerful selectors in JS only came about because of jQuery’s Sizzle engine..

Balance — 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 — 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 — 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 — 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

Link for this presentation:

HTML code for embedding:

<p data-notist="sonniesedge/CduqpM">View <a href="https://noti.st/sonniesedge/CduqpM">I’m Just An Old Guard Dev In A New Guard World</a> on Notist.</p><script async src="https://on.notist.cloud/embed/002.js"></script>

Share on social media:

Tweet

Charlie Owen
@sonniesedge

1 / 98

Charlie puts presentations on Notist

Notist

for free. You can too.

Important stuff
Help & support
Terms of use
Privacy policy

And more
Pro accounts
Notist for teams
Credits

Elsewhere
Blog
Twitter
Newsletter