YaC 2013
Bruce Lawson
Open Standards Evangelist, Opera
Literature and Drama degree
6502/ Z80/ COBOL/ FORTRAN/ BASIC
Web Standards P...
How to destroy
the Web
Bruce Lawson
Yevgeny Zamyatin
The principles of universality of access irrespective of hardware or
software platform, network infrastructure, language, ...
Why destroy the Web?
There is a problem called Twitter
right now and you can find every
kind of lie there. The thing that is
called social medi...
There is a problem called Twitter
right now and you can find every
kind of lie there. The thing that is
called social medi...
The Web
● Damages trade
● Promotes social unrest
● Encourages mistrust of authority
Therefore...
The Web must be destroyed.
32% developers want monoculture
urtak.is/vOtBLj
Hippy BS Way
-webkit-destroy: web;
-moz-destroy: web;
-ms-destroy: web;
-o-destroy: web;
destroy: web;
(or use pre-process...
Only allow users with the
right devices in
Do browser sniffing
A short sad history of browser sniffing
webaim.org/blog/user-agent-string-history/
Mosaic NCSA_Mosaic/2.0 (Windows 3.1)
Ne...
New kids on the block ...
Opera 16
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.32 (KHTML, like
Gecko) Chrome/29.0....
Script: https://github.com/404
(27 Jan 2011)
// Detect if the browser is IE or not.
// If it is not IE, we assume that the...
China
“The proportion of [people] accessing the Internet
by mobile increased enormously from 39.5% in late
2008 to 46% in ...
There is one bank branch for every 14,000 people, one ATM for every
5000 people but a mobile for every 2.3 people in India...
“One Web means making, as far as is reasonable, the same
information and services available to users irrespective of the d...
Require script support or
specific plugins
koreatimes.co.kr/www/news/biz/2010/05/123_52401.html
Ahn Cheol-soo
Active X has “led to international
isolation
of Korean IT” and “inconvenience
for users.”
Quoted in
Wall St ...
Require specific types of
hardware
Assume a mouse
foo:hover bar {
display:block;
}
Hippy BS Way
foo:hover bar,
foo:focus bar
{display:block;}
*:focus {
outline:none;
}
Assume a visual display
Assume a visual display
<SPAN id=:rg class=toxOdd role=link tabIndex=0
closure_hashCode_l16mgm="177">
Create a filter
</SP...
Assume a visual display
<SPAN id=:rg class=toxOdd role=link tabIndex=0
closure_hashCode_l16mgm="177">
Create a filter
</SP...
Assume a visual display
<SPAN id=:rg class=toxOdd role=link tabIndex=0
closure_hashCode_l16mgm="177">
Create a filter
</SP...
Hippy BS Way
<a href=...>Create a filter</a>
(Enhance with Ajax for JS users if you want)
Semantics are wasteful
Semantics are wasteful
<DIV id=:rk class="J-K-I J-J5-Ji L3 J-K-I-JO" tabIndex=0
unselectable="on" closure_hashCode_l16mgm=...
Semantics are wasteful
<DIV role=button id=:rk class="J-K-I J-J5-Ji L3 J-K-I-JO"
tabIndex=0 unselectable="on" closure_hash...
Hippie BS Web Components way
<button is=kewl-button>Search Mail<button>
document.register('kewl-button', {
extends: 'butto...
<body></body>
Break the URL addressing
system
The reason the web is so powerful is that it is a web of information. One piece
of data is linked with another piece of da...
#!
See isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs
NYSE Euronext prohibits ... unauthorized hypertext
links by others to the NYSE Euronext Web-site.
NYSE Euronext reserves t...
Use of any Web browsers (other than generally available third-
party browsers), engines, software, spiders, robots, avatar...
You may print or download a single, unaltered, permanent copy
or one temporary copy in a single computer’s memory of any
C...
You agree to review this Agreement each time you access the
NYSE Euronext Web-site so that you are aware of any and all
mo...
cybertriallawyer.com/user-agreement
Censor the Web
Clitheroe
Lightwater
Penistone
Clitheroe
Lightwater
Penistone
Scunthorpe
“We believe that if access to the Web
increases dramatically, there will be
significant social development and
greater pol...
The Internet contributes 3.4 percent to Gross
Domestic Product (GDP) averaged over the 13
countries covered by the report ...
The Internet creates 2.6 jobs for each lost to
technology-related efficiencies
Most of the economic value created by the Internet falls
outside of the technology sector, with 75 percent of the
benefits...
●
There’s a 10% increase in productivity for small
businesses from Internet use
●
Small businesses heavily using Web techn...
“An increase in Internet maturity similar to the one
experienced in mature countries over the past 5 years
creates an incr...
It took the Industrial Revolution of the 19th century
50 years to produce the same result.”
WWW
opera.com/developer
bruce.lawson@opera.com
brucelawson.co.uk
twitter.com/brucel
Image/ screenshot credits
●
Erdoğan photo http://en.wikipedia.org/wiki/File:Tayyip_Erdoğan.JPG
●
http://twitter.com/#!/dhh...
"How to Destroy The Web". Bruce Lawson, Opera Software
"How to Destroy The Web". Bruce Lawson, Opera Software
"How to Destroy The Web". Bruce Lawson, Opera Software
"How to Destroy The Web". Bruce Lawson, Opera Software
"How to Destroy The Web". Bruce Lawson, Opera Software
"How to Destroy The Web". Bruce Lawson, Opera Software
"How to Destroy The Web". Bruce Lawson, Opera Software
"How to Destroy The Web". Bruce Lawson, Opera Software
"How to Destroy The Web". Bruce Lawson, Opera Software
"How to Destroy The Web". Bruce Lawson, Opera Software
"How to Destroy The Web". Bruce Lawson, Opera Software
"How to Destroy The Web". Bruce Lawson, Opera Software
"How to Destroy The Web". Bruce Lawson, Opera Software
"How to Destroy The Web". Bruce Lawson, Opera Software
"How to Destroy The Web". Bruce Lawson, Opera Software
"How to Destroy The Web". Bruce Lawson, Opera Software
"How to Destroy The Web". Bruce Lawson, Opera Software
"How to Destroy The Web". Bruce Lawson, Opera Software
"How to Destroy The Web". Bruce Lawson, Opera Software
"How to Destroy The Web". Bruce Lawson, Opera Software
"How to Destroy The Web". Bruce Lawson, Opera Software
"How to Destroy The Web". Bruce Lawson, Opera Software
"How to Destroy The Web". Bruce Lawson, Opera Software
"How to Destroy The Web". Bruce Lawson, Opera Software
"How to Destroy The Web". Bruce Lawson, Opera Software
"How to Destroy The Web". Bruce Lawson, Opera Software
"How to Destroy The Web". Bruce Lawson, Opera Software
"How to Destroy The Web". Bruce Lawson, Opera Software
Upcoming SlideShare
Loading in …5
×

"How to Destroy The Web". Bruce Lawson, Opera Software

6,170 views

Published on

The future of the Web is a dangerous Babylon: people talking to each other to do business, express their feelings, meet their friends, transcend their disabilities, organise revolutions, and economically empower themselves. Obviously, this must be stopped. Bruce will show you his top tips and tricks that you can employ to destroy the web.

Published in: Technology

"How to Destroy The Web". Bruce Lawson, Opera Software

  1. 1. YaC 2013
  2. 2. Bruce Lawson Open Standards Evangelist, Opera Literature and Drama degree 6502/ Z80/ COBOL/ FORTRAN/ BASIC Web Standards Project Front-end lead, The Law Society Likes punk rock, Les Paul, vodka
  3. 3. How to destroy the Web Bruce Lawson
  4. 4. Yevgeny Zamyatin
  5. 5. The principles of universality of access irrespective of hardware or software platform, network infrastructure, language, culture, geographical location, or physical or mental impairment are core values Tim Berners-Lee
  6. 6. Why destroy the Web?
  7. 7. There is a problem called Twitter right now and you can find every kind of lie there. The thing that is called social media is the biggest trouble for society right now. — Tayyip Erdoğan, PM of Turkey
  8. 8. There is a problem called Twitter right now and you can find every kind of lie there. The thing that is called social media is the biggest trouble for society right now. — Tayyip Erdoğan, PM of Turkey
  9. 9. The Web ● Damages trade ● Promotes social unrest ● Encourages mistrust of authority Therefore...
  10. 10. The Web must be destroyed.
  11. 11. 32% developers want monoculture urtak.is/vOtBLj
  12. 12. Hippy BS Way -webkit-destroy: web; -moz-destroy: web; -ms-destroy: web; -o-destroy: web; destroy: web; (or use pre-processor or prefix-free)
  13. 13. Only allow users with the right devices in
  14. 14. Do browser sniffing
  15. 15. A short sad history of browser sniffing webaim.org/blog/user-agent-string-history/ Mosaic NCSA_Mosaic/2.0 (Windows 3.1) Netscape Mozilla/1.0 (Win3.1) IE: Mozilla/1.22 (compatible; MSIE 2.0; Windows 95) Firefox: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.1) Gecko/20020826 Konqueror: Mozilla/5.0 (compatible; Konqueror/3.2; FreeBSD) (KHTML, like Gecko) Opera: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; en) Opera 9.51, or Mozilla/5.0 (Windows NT 6.0; U; en; rv:1.8.1) Gecko/20061208 Firefox/2.0.0 Opera 9.51, or Opera/9.51 (Windows NT 5.1; U; en) Safari: Mozilla/5.0 (Macintosh; U; PPC Mac OS X; de-de) AppleWebKit/85.7 (KHTML, like Gecko) Safari/85.5 Chrome: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13
  16. 16. New kids on the block ... Opera 16 Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.32 (KHTML, like Gecko) Chrome/29.0.1547.57 Safari/537.36 OPR/16.0.1196.73 IE11 Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; rv:11.0) like Gecko
  17. 17. Script: https://github.com/404 (27 Jan 2011) // Detect if the browser is IE or not. // If it is not IE, we assume that the browser is NS. var IE = document.all?true:false; // If NS -- that is, !IE -- then set up for mouse capture if (!IE) document.captureEvents(Event.MOUSEMOVE); (Lots more fun at https://github.com/miketaylr/Snort/blob/master/snort.yml)
  18. 18. China “The proportion of [people] accessing the Internet by mobile increased enormously from 39.5% in late 2008 to 46% in June 2009, while the proportion of using desktops and laptops decreased”. (close to 150 million people). Statistical Report on Internet Development in China, p25-26, July 2009, www.ccnic.cn
  19. 19. There is one bank branch for every 14,000 people, one ATM for every 5000 people but a mobile for every 2.3 people in India (563.73 million) . India has more mobile phones than toilets.
  20. 20. “One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using. However, it does not mean that exactly the same information is available in exactly the same representation across all devices.” W3C Mobile Web Best Practices http://www.w3.org/TR/mobile-bp/#OneWeb
  21. 21. Require script support or specific plugins
  22. 22. koreatimes.co.kr/www/news/biz/2010/05/123_52401.html
  23. 23. Ahn Cheol-soo Active X has “led to international isolation of Korean IT” and “inconvenience for users.” Quoted in Wall St Journal Image by Jinho Jung http://en.wikipedia.org/wiki/File:Ahn_Cheol-Soo.jpg
  24. 24. Require specific types of hardware
  25. 25. Assume a mouse foo:hover bar { display:block; }
  26. 26. Hippy BS Way foo:hover bar, foo:focus bar {display:block;}
  27. 27. *:focus { outline:none; }
  28. 28. Assume a visual display
  29. 29. Assume a visual display <SPAN id=:rg class=toxOdd role=link tabIndex=0 closure_hashCode_l16mgm="177"> Create a filter </SPAN>
  30. 30. Assume a visual display <SPAN id=:rg class=toxOdd role=link tabIndex=0 closure_hashCode_l16mgm="177"> Create a filter </SPAN>
  31. 31. Assume a visual display <SPAN id=:rg class=toxOdd role=link tabIndex=0 closure_hashCode_l16mgm="177"> Create a filter </SPAN>
  32. 32. Hippy BS Way <a href=...>Create a filter</a> (Enhance with Ajax for JS users if you want)
  33. 33. Semantics are wasteful
  34. 34. Semantics are wasteful <DIV id=:rk class="J-K-I J-J5-Ji L3 J-K-I-JO" tabIndex=0 unselectable="on" closure_hashCode_l16mgm="182" act=""> <DIV class="J-J5-Ji J-K-I-Kv-H" unselectable="on"> <DIV class="J-J5-Ji J-K-I-J6-H" unselectable="on"> <DIV class=J-K-I-KC unselectable="on"> <DIV class=J-K-I-K9-KP unselectable="on">&nbsp;</DIV> <DIV class=J-K-I-Jz unselectable="on">Search Mail</DIV> </DIV></DIV></DIV></DIV>
  35. 35. Semantics are wasteful <DIV role=button id=:rk class="J-K-I J-J5-Ji L3 J-K-I-JO" tabIndex=0 unselectable="on" closure_hashCode_l16mgm="182" act=""> <DIV class="J-J5-Ji J-K-I-Kv-H" unselectable="on"> <DIV class="J-J5-Ji J-K-I-J6-H" unselectable="on"> <DIV class=J-K-I-KC unselectable="on"> <DIV class=J-K-I-K9-KP unselectable="on">&nbsp;</DIV> <DIV class=J-K-I-Jz unselectable="on">Search Mail</DIV> </DIV></DIV></DIV></DIV>
  36. 36. Hippie BS Web Components way <button is=kewl-button>Search Mail<button> document.register('kewl-button', { extends: 'button' }); Use Shadow DOM to add markup for styling reasons.
  37. 37. <body></body>
  38. 38. Break the URL addressing system
  39. 39. The reason the web is so powerful is that it is a web of information. One piece of data is linked with another piece of data is via a URL. Directly addressable content is what makes web apps better than desktop apps. danwebb.net/2011/5/28/it-is-about-the-hashbangs
  40. 40. #! See isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs
  41. 41. NYSE Euronext prohibits ... unauthorized hypertext links by others to the NYSE Euronext Web-site. NYSE Euronext reserves the right to disable any unauthorized links.
  42. 42. Use of any Web browsers (other than generally available third- party browsers), engines, software, spiders, robots, avatars, agents, tools or other devices or mechanisms to navigate, search or determine the NYSE Web-site is strictly prohibited.
  43. 43. You may print or download a single, unaltered, permanent copy or one temporary copy in a single computer’s memory of any Content for your personal, non-commercial use only
  44. 44. You agree to review this Agreement each time you access the NYSE Euronext Web-site so that you are aware of any and all modifications made to this Agreement since your last visit
  45. 45. cybertriallawyer.com/user-agreement
  46. 46. Censor the Web
  47. 47. Clitheroe Lightwater Penistone
  48. 48. Clitheroe Lightwater Penistone
  49. 49. Scunthorpe
  50. 50. “We believe that if access to the Web increases dramatically, there will be significant social development and greater political representation among the billions of people who currently have no voice.” - Timbo
  51. 51. The Internet contributes 3.4 percent to Gross Domestic Product (GDP) averaged over the 13 countries covered by the report (21% of GDP growth for the most developed countries) McKinsey Global Institute report, 2012
  52. 52. The Internet creates 2.6 jobs for each lost to technology-related efficiencies
  53. 53. Most of the economic value created by the Internet falls outside of the technology sector, with 75 percent of the benefits captured by companies in more traditional industries
  54. 54. ● There’s a 10% increase in productivity for small businesses from Internet use ● Small businesses heavily using Web technology grow and export twice as much as others
  55. 55. “An increase in Internet maturity similar to the one experienced in mature countries over the past 5 years creates an increase in real GDP per capita of $500 on average during this period.
  56. 56. It took the Industrial Revolution of the 19th century 50 years to produce the same result.”
  57. 57. WWW
  58. 58. opera.com/developer bruce.lawson@opera.com brucelawson.co.uk twitter.com/brucel
  59. 59. Image/ screenshot credits ● Erdoğan photo http://en.wikipedia.org/wiki/File:Tayyip_Erdoğan.JPG ● http://twitter.com/#!/dhh/status/32471503853322241 ● xkcd app catoon http://xkcd.com/1174/ ● Quora being stupid http://www.flickr.com/photos/41894155216@N01/8750997471 ● Address book photo http://www.flickr.com/photos/anderspee/5243086788/ ● Sharks with lasers http://www.flickr.com/photos/starstreak007/3416655056/sizes/l/in/faves-24374884@N08/ ● Browser sniffing http://www.flickr.com/photos/timdorr/2096272747/ ● Indian mobile phones http://www.flickr.com/photos/worldbank/3492673512/ ● Telegraph report (Indian mobile subscribers) 15 April 2010, http://www.telegraph.co.uk/news/worldnews/asia/india/7593567/India-has-more-mobile-phones-than-toilets-UN-report.html ● McKinsey report cited in 'What good is the web? Some numbers' brucelawson.co.uk/2012/what-good-is-the-web-some-numbers/ Good ideas, hard labour, heroism by Vadim Makeev (@pepelsbey)

×