The State Of The Web

What a terrible year!

1968

Lovell Borman Anders

fi Th Th Th Hey, don’t take that, it’s not scheduled. 😉you… Hand Oh my meGod! that You Wow! Oh, Look got roll Quick! aman! of colour atcolour that at’s Quick! pretty! picture at’s… quick, lm, Jim? would over there! ere’s the Earth coming up.

Vannevar Bush

Vannevar Bush

memex

memex hypertext

hypertext Ted Nelson

Tim Berners-Lee

Douglas Engelbart

networks

arpanet

arpanet

arpanet

internet

internet + hypertext

World Wide Web

#663399

#663398

#663399

rgb(102,51,153)

rgba(102,51,153,1)

hsl(270,50%,40%)

hsla(270,50%,40%,1)

hwb()

hwb() lab()

hwb() lab() lch()

color()

sans-serif

sans-serif

sans-serif

serif

serif

; text-indent: -1000px background: url(bg.gif);

sIFR

cufón

fi “ It is not done well but you are surprised to nd it done at all.”

EOT

WOFF

WOFF2

light regular italic bold extra bold

variable fonts

100 Thin 200 Extra Light 300 Light 400 Normal 500 Medium 600 Semi Bold 700 Bold 800 Extra Bold 900 Ultra Bold

“ One of the reasons we chose to use three-digit numbers was to support intermediate values in the future.” —Håkon Wium Lee

“ And the future is now :)” —Håkon Wium Lee

; font-family: your-choice font-weight: 467;

<icon>

<embed>

<a href=”…”> rel=”embed”>

<img>

<img src=”…”>

<img src=”…”> … </img>

<img src=”…” alt=”…”>

JPG

GIF

PNG

Flash

SVG

2001

2011

WebP

AVIF

<img src=”…” alt=”…” srcset=”…”>

<img src=”…” alt=”…” loading=”lazy”>

<audio src=”…”> … </audio>

<video src=”…”> … </video>

<audio> <video>

Flash

animation vector graphics video

font centre width height

<table> <img src=”spacer.gif”>

CSS

fl oat: left

640px

640px 800px

640px 800px 960px

%

640px 800px 960px %

@media all and (…)

@media %

responsive

responsive

fl exbox grid

fl animation exbox video SVG grid web fonts

HTML5

e problem is that of programming language. You need something really powerful, but at the same time ubiquitous. Remember a facet of the web is uni ersal readership. ere is no uni ersal interpreted programming language.” v Th —Tim Berners-Lee v Th “

LiveScript

JavaScript

DHTML

document.layers() document.all()

DOM

document.getElementById() document.getElementsByTagName()

#id { … } element { … }

$(‘#id’) $(‘element’)

document.querySelector() document.querySelectorAll()

Sass

fi poly lls

APIs

native apps

fi geolocation input type=”image” web noti cations service workers

“ By the end of the year, I would predict that any major native mobile application could be instead built using native web capabilities/APIs.” —Ire Aderinokun

fl hex oats system fonts

fl fl svg ajax web fonts rgba exbox hex oats system fonts hsla grid variable fonts media queries

fi fl fl houdini service workers geolocation svg ajax web fonts rgba exbox hex oats system fonts hsla grid variable fonts media queries device APIs noti cations web components

advertising

behavioural advertising

contextual advertising

behavioural advertising

tracking

stateless

cookies JavaScript

third-party cookies JavaScript

stateful

tracking blockers

advertising blockers

websites

websites web apps

single page apps

rendering routing responding

complexity

<select> <input type=”date”>

<button>

software

dependencies

expectations

expectations

expectations

intentions

verschlimmbessern

user needs

“ Stop sol ing problems you don’t yet have.” v —Rachel Andrew

fi poly lls

developer convenience

user needs developer convenience

expectations

“ If you have something wonderful, if you do not defend it, you will lose it.” —Zeynep Tüfekçi

If you have something wonderful, if you do not defend it, you will lose it.”

“ I’m helping put a man on the moon.”

thank you