The Annoying Site aka "Power of the Web Platform"

LIVE DEMO at https://theannoyingsite.com

The web platform in 2017 is powerful. What if we used that power for evil? What kind of terrible UX could we create if our goal was to build the worst web page in the world?

This is a fun and playful talk where we'll learn about many different web platform features. There will be live coding, demos, and lots of fun with web platform APIs, new and old!

---

There were many links referenced in the talk, here they all are in a single list:

- HOW TO: Spy on the Webcams of Your Website Visitors (https://feross.org/webcam-spy/)
- Fill Disk (http://www.filldisk.com)
- HTML5 FullScreen API Attack (https://feross.org/html5-fullscreen-api-attack/)
- WebTorrent homepage (https://webtorrent.io)
- Standard JS homepage (https://standardjs.com)
- window.open() - MDN Docs (https://developer.mozilla.org/en-US/docs/Web/API/Window/open)
- window.moveTo() - MDN Docs (https://developer.mozilla.org/en-US/docs/Web/API/Window/moveTo)
- The Annoying Site (DEMO) (http://theannoyingsite.com)
- Support Feross on Patreon – get rewards! (https://www.patreon.com/feross)
- Feross's blog (https://feross.org)

Transcript

1. THE ANNOYING SITE aka "The Power of the Web Platform"
2. Every system has two sets of rules: The rules as they are intended or commonly perceived, and the actual rules ("reality"). — Paul Buchheit
3. TAKING ADVANTAGE OF A GAP BETWEEN ▸ The written rules ▸ The actual rules
5. HOW TO: Spy on the Webcams of Your Website Visitors
6. FLASH SETTINGS MANAGER
7. Fill Disk
8. EVERY DOMAIN CAN STORE 5 MB 1.filldisk.com 2.filldisk.com 3.filldisk.com 4.filldisk.com 5.filldisk.com 6.filldisk.com 7.filldisk.com ... and so on ...
9. Full Screen API Phishing Attack
10. WebTorrent
11. ▸ Service Worker ▸ Web Audio ▸ Web Payments ▸ Web Push Notifications ▸ WebAssembly ▸ WebGL ▸ WebRTC ▸ WebVR
15. "The web is ready to bring back ActiveX." — Feross
17. ▸ Java Web Start / Flash ▸ <embed> and <object> ▸ <marquee> ▸ <bgsound> ▸ <plaintext> ▸ String.prototype.big ▸ String.prototype.quote
18. MOVE A WINDOW AROUND ▸ window.moveTo() ▸ window.moveBy() ▸ window.resizeTo() ▸ window.resizeBy()
19. SAME ORIGIN POLICY
21. OPEN A NEW WINDOW ▸ window.open()
23. OPEN A NEW WINDOW const win = window.open('', '', 'width=100,height=100') MOVE IT AROUND win.moveTo(10, 10) win.resizeTo(200, 200)
24. "USER INITIATED" EVENT HANDLER document.addEventListener('click', () => { const win = window.open('', '', 'width=100,height=100') win.moveTo(10, 10) win.resizeTo(200, 200) })
25. NOW, LET'S ADD THE FUN PART let i = 0 setInterval(() => { win.moveTo(i, i) i = (i + 5) % 200 }, 100)
26. DEMO
28. THEANNOYINGSITE.COM
29. Support me on Patreon PATREON.COM/FEROSS
32. Thanks! FEROSS.ORG PATREON.COM/FEROSS