Beware the bloated browser!
NB: you need a browser with
JavaScript enabled
to watch this presentation!
tripu
name: cover # <br /> Beware the<br />bloated browser! .footnote[[T3chfest](https://t3chfest.es/2019/) <br /> Copyright © 2019 [tripu](https://tripu.info/) <br /> <br /> .nb[(Press `→` or swipe left)]] --- name: agenda .footer[*Beware the bloated browser!*] ## Agenda * [`$ whoami`](#me) * **[The web in the beginning](#supposed)** * **[What is the web *today*?](#what)** * **[What is the big deal?](#deal)** * **[The strengths of the web](#strengths)** * **[“The UNIX philosophy”](#unix)** * **[Enter the *semantic web*](#semantic)** * **[What to do *as users*?](#users)** * **[What to do *as engineers*?](#engineers)** * [Resources](#resources) * [Questions & comments](#qa) --- name: me .footer[*Beware the bloated browser!*] ## $ whoami .twoCols[ .column[ .center[ .center[.portrait[]] **Antonio Olmo Titos** *software engineer* 4 years at the [.logow[]](https://www.w3.org/) [`https://`**`tripu.info`**](https://tripu.info/) ] ] .column[ .center[ .center[.logo7[]] *CTO in residence* at .company[7r Ventures] (we are hiring!) [`https://`**`7r.ventures`**](https://7r.ventures/) ] ] ] --- name: supposed .footer[*Beware the bloated browser!*] ## The web in the beginning * 1989 * HTTP (protocol) + HTML (language) + URL (identifier) * Documents * Hypertext * Images --- class: center, middle, empty [`https://www.w3.org/History/1989/proposal.html`](https://www.w3.org/History/1989/proposal.html) <br /> <br /> <br /> [`http://info.cern.ch/hypertext/WWW/TheProject.html`](http://info.cern.ch/hypertext/WWW/TheProject.html) --- class: img, empty background-image: url("./amazing.jpeg") --- class: img background-image: url("./old.jpeg") --- class: img background-image: url("./old.gif") --- class: center, middle, empty [`https://worldwideweb.cern.ch/browser`](https://worldwideweb.cern.ch/browser) --- class: img, empty background-image: url("./amazing2.gif") --- class: img background-image: url("./contract.png") --- name: what .footer[*Beware the bloated browser!*] ## What is the web today? * The web ~ the internet (~ Google!) (~ my computer!!) * Videogame console * Streaming platform * Shopping centre * Social communication tool * Runtime environment (a universal emulator) * Distribution platform * Our CV * Our bank * [A human right](https://www.nytimes.com/2012/01/05/opinion/internet-access-is-not-a-human-right.html)? * …*Everything* --- name: deal .footer[*Beware the bloated browser!*] ## What is the big deal? → Complexity * [`https://www.w3.org/TR`](https://www.w3.org/TR/) lists today “1,169 specs” * …most of them, still “valid”! * Some APIs on browsers: [`https://caniuse.com/#index`](https://caniuse.com/#index) * This leads to: - Fragmentation - Unpredictability - Security holes - Bugs - Developers: cognitive overload * Compare to more homogeneous platforms out there --- .footer[*Beware the bloated browser!*] ## What is the big deal? → Web fingerprinting * Tracking users, identifying devices * Works even without cookies (eg, canvas fingerprinting) * [`https://panopticlick.eff.org/`](https://panopticlick.eff.org/) --- .footer[*Beware the bloated browser!*] ## What is the big deal? → Web fingerprinting * The [*Battery Status API*](https://www.w3.org/TR/battery-status/) was [“leaking”](https://eprint.iacr.org/2015/616.pdf) > *“Privacy implications of the Battery Status API, with a focus on its implementation in Firefox for Linux operating system: […] the high precision battery level readings provided by Firefox can lead to an unexpected fingerprinting surface: the detection of battery capacity. In short time intervals, Battery Status API can be used to reinstantiate tracking identifiers of users, similar to evercookies. Moreover, battery information can be used in cases where a user can go to great lenghts to clear her evercookies.”* --- .footer[*Beware the bloated browser!*] ## What is the big deal? → Resource hijacking * The [*Service Workers API*](https://w3c.github.io/ServiceWorker/) makes it possible * [Help Net Security:<br />*“Modern browser APIs can be abused for hijacking device resources”*](https://www.helpnetsecurity.com/2019/02/27/modern-browser-apis-can-be-abused-for-hijacking-device-resources/) * [Reuters:<br />*“U.S., UK government websites infected with crypto-mining malware: report”*](https://www.reuters.com/article/us-bitcoin-cyber/u-s-uk-government-websites-infected-with-crypto-mining-malware-report-idUSKBN1FV0VO) --- .footer[*Beware the bloated browser!*] ## What is the big deal? → Redundancy .center[Web apps today have to look and feel *“as native”*. But… *why!?*] .center[.screenshots[]] --- .footer[*Beware the bloated browser!*] ## What is the big deal? → Stalled performance .center[.screenshots2[]] --- name: strengths .footer[*Beware the bloated browser!*] ## The strengths of the web * Interoperability * Immediacy (updates are simple) * Linkability, shareability (*deeply*) * Simplicity (no dependencies) * “Open source” almost by definition --- name: unix .footer[*Beware the bloated browser!*] ## The UNIX philosophy * A set of tools that are: - small - dedicated - interchangeable * A few common formats * A simple way to “connect” inputs and outputs --- class: img background-image: url("./documents.jpeg") --- .footer[*Beware the bloated browser!*] ## The UNIX philosophy ```bash grep -ERhio 'project [a-z]+\s' . | sort -f | uniq -ci | sort -nr > projects.txt ``` Produces this file, `projects.txt`: ```bash 761 project neptune 444 project haumea 318 project gaspra 179 project mathilde 150 project callisto 122 project dia 107 project mneme 64 project helike ``` --- .footer[*Beware the bloated browser!*] ## The UNIX philosophy on the web: imagine… .center[.screenshots[]] ```bash get {skyscanner.net, hipmunk.com, google.com/flights} | filter '#flight, date=2019-03-22, price<=120E' | pick price,company,time | sort -n -f price > flights.txt ``` --- name: semantic .footer[*Beware the bloated browser!*] ## Enter the Semantic Web, and Linked Data * *World Wide Web* → *Giant Global Graph* * [`https://www.w3.org/standards/semanticweb/`](https://www.w3.org/standards/semanticweb/) <br /><br /> .center[.screenshots[[](https://upload.wikimedia.org/wikipedia/commons/a/a9/LOD_Cloud_2014-08.svg)]] --- name: users .footer[*Beware the bloated browser!*] ## What can we do as users? * Support free software * Support open formats * Block ads * Report bugs * Be willing to pay when it makes sense * Resist surveillance and tracking * Resist centralisation --- .footer[*Beware the bloated browser!*] ## What can we do as users? .center[ .screenshots[] Be responsible consumers ] --- name: engineers .footer[*Beware the bloated browser!*] ## What can we do as engineers? Those same things, plus… * Support web standards ([.logow[]](https://www.w3.org/)!) * Resist the hype of shiny things * Embrace what is useful * Think performance * Think *A11Y* * Think *i18n* * Think of the future * Think of the past --- name: resources .footer[*Beware the bloated browser!*] ## Resources * [Tim Berners-Lee: *“30 Years On, What’s Next #ForTheWeb?”*](https://onezero.medium.com/30-years-on-whats-next-fortheweb-6ce844ed147f) * [Peter-Paul Koch: *“Stop pushing the web forward”*](https://www.quirksmode.org/blog/archives/2015/07/stop_pushing_th.html) * [*“Do we need browsers?”* (apocryphal)](http://blog.justletit.be/posts/do_we_need_browsers/) --- name: credits .footer[*Beware the bloated browser!*] ## Credits * [`https://commons.wikimedia.org/`](https://commons.wikimedia.org/wiki/File:Copies_of_documents_at_European_Parliament_in_Strasbourg.jpg) * [`https://www.publicdomainpictures.net/`](https://www.publicdomainpictures.net/en/view-image.php?image=97848&picture=portrait-of-boy-amazed) * [`https://medium.com/mozilla-tech/the-search-for-the-goldilocks-browser-and-why-firefox-may-be-just-right-for-you-1f520506aa35`](https://medium.com/mozilla-tech/the-search-for-the-goldilocks-browser-and-why-firefox-may-be-just-right-for-you-1f520506aa35) * [`https://imagexmedia.com/blog/2017/01/native-or-web-which-app-me`](https://imagexmedia.com/blog/2017/01/native-or-web-which-app-me) --- name: qa class: middle .footer[*Beware the bloated browser!*] ## Questions,<br />comments,<br />debate --- name: hiring class: middle .footer[*Beware the bloated browser!*] ## We are hiring!<br />[`https://`**`7r.ventures`**](https://7r.ventures/) .center[.logo7b[]]