Web is Flux - Speaker Deck

Slide 1

Slide 1 text

Web is Flux

Slide 2

Slide 2 text

@souvikdg

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Hi!

Slide 5

Slide 5 text

1999

Slide 6

Slide 6 text

My rst exposure to HTML was as a 7th grader.

Slide 7

Slide 7 text

IE5, Netscape

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Tim Berners-Lee, 1989

Slide 10

Slide 10 text

~25 years

Slide 11

Slide 11 text

Have you ever wondered how has it managed to survive so long, and also improve over time?

Slide 12

Slide 12 text

Principles

Slide 13

Slide 13 text

Principle of Least Power

Slide 14

Slide 14 text

Tim Bernes-Lee Computer Science spent the last forty years making languages which were as powerful as possible. Nowadays we have to appreciate the reasons for picking not the most powerful solution but the least powerful. e less powerful the language, the more you can do with the data stored in that language.

Slide 15

Slide 15 text

HTML is forwards compatible. It has healthy fallbacks for things it doesn’t know yet.

Slide 16

Slide 16 text

As a result of many such excellent design principles…

Slide 17

Slide 17 text

824* di erent ways to connect to the web

Slide 18

Slide 18 text

7,063* kinds of web browsers access the web

Slide 19

Slide 19 text

432,102* kinds of devices access the web

Slide 20

Slide 20 text

1,180* di erently sized screens access the web

Slide 21

Slide 21 text

*cooked up facts

Slide 22

Slide 22 text

However, the point still stands.

Slide 23

Slide 23 text

Web is everywhere, and in many ways we’re dependent on it.

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

e clients are fragmented — a side e ect of ubiquity

Slide 26

Slide 26 text

How did we deal with this?

Slide 27

Slide 27 text

For a long time by Graceful Degradation

Slide 28

Slide 28 text

is site is best viewed on IE6 at 800×600.

Slide 29

Slide 29 text

Today?

Slide 30

Slide 30 text

BrowserStack claims to have 300+ browser versions.

Slide 31

Slide 31 text

In 2011 there were 20+ mobile browsers. http://www.quirksmode.org/presentations/USTourApril11/albany.pdf

Slide 32

Slide 32 text

How long can we continue doing things that way?

Slide 33

Slide 33 text

Looks are deceiving.

Slide 34

Slide 34 text

Because the web is tolerant, you can make any code “look” good on your preferred web browser.

Slide 35

Slide 35 text

Are we catering to just web browsers?

Slide 36

Slide 36 text

A whole bunch of services consume our websites — read-it-later, accessibility tools, search bots…

Slide 37

Slide 37 text

http://futurefriendlyweb.com Disruption will only accelerate. e quantity and diversity of connected devices—many of which we haven't imagined yet—will explode, as will the quantity and diversity of the people around the world who use them.

Slide 38

Slide 38 text

Fads will die, and new ones will be born.

Slide 39

Slide 39 text

:/ SEO

Slide 40

Slide 40 text

:/ Mobile is in

Slide 41

Slide 41 text

“Inclusive Web Design For the Future” Steve Champeon and Nick Finck, 2003

Slide 42

Slide 42 text

Progressive Enhancement

Slide 43

Slide 43 text

Content

Slide 44

Slide 44 text

Content HTML

Slide 45

Slide 45 text

Content HTML CSS

Slide 46

Slide 46 text

Content HTML CSS JS

Slide 47

Slide 47 text

People who are on basic browsers get a base experience, those on newer browsers get an enhanced experience.

Slide 48

Slide 48 text

No one’s excluded.

Slide 49

Slide 49 text

Christian Heilmann I am always amazed about the lack of support for progressive enhancement on the web. Whenever you mention it, you face a lot of “yeah, but…” and you feel having to defend something that should be ingrained in the DNA of anyone who works on the web.

Slide 50

Slide 50 text

:/ We know our customers.

Slide 51

Slide 51 text

:/ No one uses that browser.

Slide 52

Slide 52 text

:/ We build enterprise apps.

Slide 53

Slide 53 text

:/ But that’s too much work.

Slide 54

Slide 54 text

:/ Move fast, break things.

Slide 55

Slide 55 text

:/ We make “web apps”

Slide 56

Slide 56 text

:/ Who has Javascript disabled anyways?

Slide 57

Slide 57 text

:/ Relying on Javascript is not a problem for us. Today no one can complete an online transaction without Javascript anyways.” “

Slide 58

Slide 58 text

Dependence on Javascript is a mistake.

Slide 59

Slide 59 text

“Shoot this idiot down!”

Slide 60

Slide 60 text

Javascript can make your application a super-hero…

Slide 61

Slide 61 text

…but even Superman has legs http://www. ickr.com/photos/hajagosb/6264235487/

Slide 62

Slide 62 text

@andyhume Progressive enhancement is more about dealing with technology failing than technology not being supported. And you can quote me on that.

Slide 63

Slide 63 text

@GnrlMxms Most bugs I deal with on a daily basis are caused by some JavaScript library or the other randomly breaking :/

Slide 64

Slide 64 text

http://www. ickr.com/photos/vpickering/8777968566/

Slide 65

Slide 65 text

Q: Are we not encouraging people to continue using old browsers by supporting absence of Javascript?

Slide 66

Slide 66 text

People don’t use old browsers out of choice, and it is far more important for a website to ful l its purpose/promise.

Slide 67

Slide 67 text

In July 2013, there was a lot of discussion on the web about the relevance of progressive enhancement.

Slide 68

Slide 68 text

Some people have inaccurate notions.

Slide 69

Slide 69 text

Progressive enhancement is not about making websites for the most basic systems. It’s about starting with the most basic systems in mind.

Slide 70

Slide 70 text

So no one’s asking you to not use Javascript.

Slide 71

Slide 71 text

Brad Frost ere is a di erence between support and optimization.

Slide 72

Slide 72 text

:/ Our product should look the same everywhere.

Slide 73

Slide 73 text

It’s okay if a website looks di erent on di erent browsers.

Slide 74

Slide 74 text

We write code that run on client systems.

Slide 75

Slide 75 text

We shouldn’t ignore the known unknowns.

Slide 76

Slide 76 text

If we start listing the known unknowns, we’ll almost immediately start feeling helpless about the situation.

Slide 77

Slide 77 text

e thought of not being in control is scary.

Slide 78

Slide 78 text

How can you control something that is changing all the time?

Slide 79

Slide 79 text

Don’t control it, embrace it.

Slide 80

Slide 80 text

John Allsopp A Dao of Web Design e control which designers know in the print medium, and o en desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this exibility.

Slide 81

Slide 81 text

Je Bezos Find the things that won’t change in your business and invest heavily in those things.

Slide 82

Slide 82 text

Focus on functionality and content out design.

Slide 83

Slide 83 text

Uphold the core principles of web.

Slide 84

Slide 84 text

@lukew Perhaps ironically the more backwards compatible your web site is, the more future friendly it is.

Slide 85

Slide 85 text

Don’t be fad-friendly. Be web-friendly.

Slide 86

Slide 86 text

e web is an amazing platform.

Slide 87

Slide 87 text

“ e Power of Simplicity” Jeremy Keith border:none 2013

Slide 88

Slide 88 text

http://www. ickr.com/photos/theenmoy/9356165709/

Slide 89

Slide 89 text

e web is an amazing platform.

Slide 90

Slide 90 text

e web is an amazing stack.

Slide 91

Slide 91 text

e web is an amazing medium.

Slide 92

Slide 92 text

e state of web keeps going through continuous change.

Slide 93

Slide 93 text

Web is Flux

Slide 94

Slide 94 text

Web is Flux