A presentation at An Event Apart Spring Summit by Jeremy Keith
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;
<a href=”…”> rel=”embed”>
<img src=”…”> … </img>
JPG
GIF
PNG
Flash
SVG
2001
2011
WebP
AVIF
<audio src=”…”> … </audio>
<video src=”…”> … </video>
Flash
animation vector graphics video
font centre width height
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
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
The World Wide Web has come a long way in its three decades of existence. There’s so much we can do now with HTML, CSS, and JavaScript: animation, layout, powerful APIs… we can even make websites that work offline! And yet the web isn’t exactly looking rosy right now. The problems we face aren’t technical in nature. We’re facing a crisis of expectations: we’ve convinced people that the web is slow, buggy, and inaccessible. But it doesn’t have to be this way. There is no fate but what we make. In this perspective-setting talk, we’ll go on a journey to the past, present, and future of web design and development. You’ll laugh, you’ll cry, and by the end, you’ll be ready to make the web better.
The following resources were mentioned during the presentation or are useful additional information.
for free. You
can too.