Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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)

Feross Aboukhadijeh

December 01, 2017
Tweet

More Decks by Feross Aboukhadijeh

Other Decks in Technology

Transcript

  1. Every system has two sets of rules: The rules as

    they are intended or commonly perceived, and the actual rules ("reality"). — Paul Buchheit
  2. 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 ...
  3. ▸ Service Worker ▸ Web Audio ▸ Web Payments ▸

    Web Push Notifications ▸ WebAssembly ▸ WebGL ▸ WebRTC ▸ WebVR
  4. ▸ Java Web Start / Flash ▸ <embed> and <object>

    ▸ <marquee> ▸ <bgsound> ▸ <plaintext> ▸ String.prototype.big ▸ String.prototype.quote
  5. OPEN A NEW WINDOW const win = window.open('', '', 'width=100,height=100')

    MOVE IT AROUND win.moveTo(10, 10) win.resizeTo(200, 200)
  6. "USER INITIATED" EVENT HANDLER document.addEventListener('click', () => { const win

    = window.open('', '', 'width=100,height=100') win.moveTo(10, 10) win.resizeTo(200, 200) })
  7. NOW, LET'S ADD THE FUN PART let i = 0

    setInterval(() => { win.moveTo(i, i) i = (i + 5) % 200 }, 100)