The Annoying Site aka "Power of the Web Platform"

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)

B498d33041627b07726dc29c28f02df7?s=128

Feross Aboukhadijeh

December 01, 2017
Tweet

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
  4. None
  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
  12. None
  13. None
  14. None
  15. "The web is ready to bring back ActiveX." — Feross

  16. None
  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

  20. None
  21. OPEN A NEW WINDOW ▸ window.open()

  22. None
  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

  27. None
  28. THEANNOYINGSITE.COM

  29. Support me on Patreon PATREON.COM/FEROSS

  30. None
  31. None
  32. Thanks! FEROSS.ORG PATREON.COM/FEROSS