Tu navegador está roto
criticism of the web
NB: you need a browser with
JavaScript enabled
to watch this presentation!
tripu
name: cover # Tu navegador está roto ### *Criticism of the web* <br /> <!-- ### 👉 .blink[[`github.com/tripu/Events`](https://tripu.github.io/Events/2020-02-08_Valladolid-Spain_UVA-browsers/)] 👈 --> .footnote[[WeCodeFest](https://wecodefest.com/2020) <br /> Copyright © 2020 [tripu](https://tripu.info/) <br /> <br /> .nb[(Press `→` or swipe left)]] --- name: agenda .footer[*Tu navegador está roto*] ## 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[*Tu navegador está roto*] ## $ whoami .twoCols[ .column[ .center[ .portrait[] <br /> **Antonio Olmo Titos** <br /> *software engineer* <br /> [`https://`**`tripu.info`**](https://tripu.info/) ] ] .column[ .center[ 4 years at the [.logow[]](https://www.w3.org/) <br /> <br /> <br /> .center[.logo7[]] *software engineer* at .company[Devo] <br /> <br /> (we are hiring!) [`https://`**`devo.com`**](https://www.devo.com/careers/openings/) ] ] ] --- name: supposed .footer[*Tu navegador está roto*] ## 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`](https://web.archive.org/web/20200202061041/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[*Tu navegador está roto*] ## 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[*Tu navegador está roto*] ## What is the big deal? → Complexity * [`https://www.w3.org/TR`](https://www.w3.org/TR/) lists today “1,207 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[*Tu navegador está roto*] ## 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[*Tu navegador está roto*] ## 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[*Tu navegador está roto*] ## 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[*Tu navegador está roto*] ## What is the big deal? → Redundancy .center[Web apps today have to look and feel *“as native”*. But… *why!?*] .center[.screenshots[]] --- .footer[*Tu navegador está roto*] ## What is the big deal? → Stalled performance .center[.screenshots2[]] --- name: strengths .footer[*Tu navegador está roto*] ## The strengths of the web * Interoperability * Immediacy (updates are simple) * Linkability, shareability (*deeply*) * Simplicity (no dependencies) * “Open source” almost by definition --- name: unix .footer[*Tu navegador está roto*] ## 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[*Tu navegador está roto*] ## 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[*Tu navegador está roto*] ## 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, to=IT' | pick price,company,time | sort -n -f price > flights.txt ``` --- name: semantic .footer[*Tu navegador está roto*] ## 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[*Tu navegador está roto*] ## 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[*Tu navegador está roto*] ## What can we do as users? .center[ .screenshots[] <br /> Be responsible consumers ] --- name: engineers .footer[*Tu navegador está roto*] ## 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[*Tu navegador está roto*] ## 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[*Tu navegador está roto*] ## 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[*Tu navegador está roto*] ## Questions,<br />comments,<br />debate --- name: hiring class: middle .footer[*Tu navegador está roto*] ## We are hiring!<br />[`https://www.devo.com/careers/`](https://www.devo.com/careers/openings/) .center[.logo7b[]]