Le Low Tech Web - Speaker Deck

Slide 1

Slide 1 text

Le Low-Tech Web

Slide 2

Slide 2 text

github: acailly twitter: @AntoineCailly Dev @ Zenika Rennes Antoine Cailly

Slide 3

Slide 3 text

C’est quoi Low-Tech ? Gauthier Roussilhe http://www.gauthierroussilhe.com/ fr/posts/une-erreur-de-tech Low Technology, High Technics

Slide 4

Slide 4 text

C’est quoi Low-Tech ? Gauthier Roussilhe http://www.gauthierroussilhe.com/ fr/posts/une-erreur-de-tech - Technologie, + Savoir faire

Slide 5

Slide 5 text

C’est quoi Low-Tech ? Low-Tech Lab https://lowtechlab.org/ - Utile - Accessible - Durable

Slide 6

Slide 6 text

Un exemple les grid beams https://gridbeam.xyz /

Slide 7

Slide 7 text

https://gridbeam.xyz/ https://theawesomer.com/grid-beam-construction-system/446653/

Slide 8

Slide 8 text

mais impossible de faire...

Slide 9

Slide 9 text

https://unsplash.com/photos/jDEP1mv1Apk

Slide 10

Slide 10 text

Le Low-Tech... Web ?

Slide 11

Slide 11 text

http://www.astrodigital.org/space/intbean.html

Slide 12

Slide 12 text

Le Web aujourd’hui

Slide 13

Slide 13 text

Tout est insupportablement lent, énorme et finit par devenir obsolète Programmer, c’est le même bordel Software disenchantment Nikita Tonsky - 2018 https://tonsky.me/blog/ disenchantment/ The web is bloated by user “experience” JavaScript has a cost Design for resilience The Cost Of JavaScript Addy Osmani - 2018 https://medium.com/@addyosmani /the-cost-of-javascript-in-201 8-7d8950fbb5d4

Slide 14

Slide 14 text

I've embedded A Tale of Two Cities by Charles Dickens on this page in its entirety, and you probably didn't even notice. Yes, all of it (260 pages). Unbearable News Zain Amro - 2019 https://zainamro.com/notes/ unbearable-news

Slide 15

Slide 15 text

Le monde du logiciel est en train de se détruire Olivier PHILIPPOT - 2018 https://greenspector.com/fr/le -monde-du-logiciel-est-en-trai n-de-se-detruire-manifeste-pou r-un-developpement-plus-durabl e/ On attend (trop) la solution miracle On s’amuse (trop) et on ne se remet pas (assez) en cause On perd (trop) souvent le but final : l’utilisateur

Slide 16

Slide 16 text

Alors on fait quoi ?

Slide 17

Slide 17 text

On optimise ! ça nous fera de la place pour ajouter plein de trucs !

Slide 18

Slide 18 text

T’as essayé le Server Side Rendering ? vous reprendrez bien une dose de complexité ?

Slide 19

Slide 19 text

Tout le monde fait la même chose donc on s’en fout

Slide 20

Slide 20 text

On va renoncer à certaines choses hein ? y’a des gens qui font ça ?

Slide 21

Slide 21 text

Des exemples !

Slide 22

Slide 22 text

Le Low-Tech Magazine https://solar.lowtechmagazine.com/ L’exemple que tout le monde cite

Slide 23

Slide 23 text

Le Low-Tech Magazine https://solar.lowtechmagazine.com/ L’exemple que tout le monde cite

Slide 24

Slide 24 text

Les versions lite

Slide 25

Slide 25 text

Facebook Basic https://mbasic.facebook.com/

Slide 26

Slide 26 text

CNN Lite http://lite.cnn.com/en

Slide 27

Slide 27 text

Youtube Feather https://blog.chriszacharias.com/ page-weight-matters 1.2 Mo => 98 Ko La latence moyenne augmente !!???

Slide 28

Slide 28 text

minimal https://addons.mozilla.org/fr /firefox/addon/minimal-intern et-experience/

Slide 29

Slide 29 text

Des sites populaires Low-Tech ça existe ?

Slide 30

Slide 30 text

craigslist https://www.craigslist.org/ Since 1996

Slide 31

Slide 31 text

Hacker News https://news.ycombinator.com/ Créé par Paul Graham, co-fondateur de Y Combinator

Slide 32

Slide 32 text

Hacker News Chiffres de 2015 : https://news.ycombinator.com/ item?id=9220098 Roughly 2.6M views a day, 300K daily uniques, 3 to 3.5M monthly uniques. One single server : 2 x 3GHz Intel DecaCore 8 x 16GB DDR3 2.2 Ko de JavaScript non minifié

Slide 33

Slide 33 text

Hacker News Témoignage en 2019 https://news.ycombinator.com/ item?id=20854214 Thank you for not trying to ‘fix’ what isn’t broken

Slide 34

Slide 34 text

Le cas Medium

Slide 35

Slide 35 text

Medium https://medium.com/

Slide 36

Slide 36 text

Medium https://medium.com/

Slide 37

Slide 37 text

Medium https://medium.com/

Slide 38

Slide 38 text

Medium https://medium.com/

Slide 39

Slide 39 text

Medium https://medium.com/

Slide 40

Slide 40 text

et si on ne gardait que l’essentiel ?

Slide 41

Slide 41 text

Telegraph https://telegra.ph/

Slide 42

Slide 42 text

txti.es http://txti.es/

Slide 43

Slide 43 text

txti.es https://motherfuckingwebsite.com/

Slide 44

Slide 44 text

txti.es http://bettermotherfuckingwebsite.com/

Slide 45

Slide 45 text

itty bitty https://itty.bitty.site

Slide 46

Slide 46 text

itty bitty https://itty.bitty.site/ #About/XQAAAAI9BwAAAAAAA AAeHMqHyTY4PyKmqfkwr6ooC XSIMxPQ7ojYR153HqZD3W+ke Vdvwyoyd+luwncAksvskG/my 97qDaUEyfDGB0QDbdURMwS0L

Slide 47

Slide 47 text

itty bitty https://bit.ly/3bVsm8k

Slide 48

Slide 48 text

Les Wikis

Slide 49

Slide 49 text

Wikipedia https://fr.wikipedia.org

Slide 50

Slide 50 text

Tiddly Wiki https://tiddlywiki.com/

Slide 51

Slide 51 text

Tiddly Wiki https://classic.tiddlywiki.com/a rchive/firstversion.html Première version en 2004

Slide 52

Slide 52 text

Tiddly Wiki http://www.climate-change-two.net/ Autre exemple de 2007

Slide 53

Slide 53 text

L’Open Source

Slide 54

Slide 54 text

Un github low-tech ?

Slide 55

Slide 55 text

sourcehut https://sourcehut.org/ Almost no JS Git repository

Slide 56

Slide 56 text

sourcehut Continuous Integration https://sourcehut.org/ Almost no JS

Slide 57

Slide 57 text

sourcehut Code review https://sourcehut.org/ Almost no JS

Slide 58

Slide 58 text

sourcehut Issue tracking https://sourcehut.org/ Almost no JS

Slide 59

Slide 59 text

sourcehut Wiki https://sourcehut.org/ Almost no JS

Slide 60

Slide 60 text

https://sr.ht/projects Annuaire de projets sourcehut https://sourcehut.org/ Almost no JS

Slide 61

Slide 61 text

https://sourcehut.org/blog/2019-10-23-srht-puts-users-first/ sourcehut

Slide 62

Slide 62 text

Accessibility through simplicity https://sourcehut.org/blog/2020-05-27 -accessibility-through-simplicity

Slide 63

Slide 63 text

Accessibility through simplicity https://sourcehut.org/blog/2020-05-27 -accessibility-through-simplicity

Slide 64

Slide 64 text

Simplicity improves performance and reliability https://sourcehut.org/blog/2020-04-20 -prioritizing-simplitity/

Slide 65

Slide 65 text

Simplicity improves performance and reliability https://sourcehut.org/blog/2020-04-20 -prioritizing-simplitity/

Slide 66

Slide 66 text

- Technologie, + Savoir faire

Slide 67

Slide 67 text

L’effet RGPD

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

D’autres exemples plus exotiques

Slide 70

Slide 70 text

LibreTaxi https://libretaxi.org/

Slide 71

Slide 71 text

LibreTaxi Un village sibérien Personne ne connaît Uber Pas de filtres sur les groupes Telegram Un chatbot !

Slide 72

Slide 72 text

LibreTaxi Un village sibérien Personne ne connaît Uber Pas de filtres sur les groupes Telegram Un chatbot ! https://twitter.com/LibreTaxiOrg/ status/904556328693112832/photo/1

Slide 73

Slide 73 text

Yo https://www.justyo.co/ Zero characters communication

Slide 74

Slide 74 text

Yo API http://dev.justyo.co/ Yo quand il va pleuvoir Yo quand ton équipe favorite marque un but Yo quand ta commande à emporter est prête ...

Slide 75

Slide 75 text

Scuttlebutt https://scuttlebutt.nz/ Nouveau site en construction : https://ssb-landing.netlify.app/

Slide 76

Slide 76 text

Scuttlebutt @Antoine Cailly @UP7zpmox0RbLL1wMZO0xtYbpwmc/ AQtmiX5zbDLh0P8=.ed25519 https://www.youtube.com/watch? v=ymDi-gwWvrc

Slide 77

Slide 77 text

Scuttlebutt Offline first %hFnMpqI1w3iKdQ0XxYD/s1FU7 t8D+fDxgyPkWssSmKk=.sha256

Slide 78

Slide 78 text

https://www.manyver.se/

Slide 79

Slide 79 text

Gopher http://gopher.quux.org:70/ Software/Gopher The other web

Slide 80

Slide 80 text

Gopher Né en même temps que HTTP Présent initialement dans les navigateurs (Mosaic, Firefox, IE...) Utilisable aujourd’hui : - proxys - extensions navigateurs - applications mobiles https://gopher.floodgap.com/ overbite/

Slide 81

Slide 81 text

Gopher RFC 1436 : Simplicity is intentional Pas d’hyperliens Protocole orienté texte Organisé comme une arborescence de fichier

Slide 82

Slide 82 text

Gopher Simple à implémenter et maintenir (parfois utilisé le 1er avril) Bande passante et puissance de calcul limitée Accessible “by design” https://gopher.floodgap.com/ overbite/relevance.html

Slide 83

Slide 83 text

Et si on conceptualise tout ça ?

Slide 84

Slide 84 text

Progressive enhancement Tous les navigateurs supportés (lecteurs d’ écrans compris) HTML sémantique CSS et JS pour améliorer l’expérience utilisateur https://www.gov.uk/service-manual/technology/ using-progressive-enhancement

Slide 85

Slide 85 text

Designed to last - Return to vanilla HTML/CSS - Don't minimize that HTML - Prefer one page over several - End all forms of hotlinking - Stick with the 13 web safe fonts +2 - Obsessively compress your images - Eliminate the broken URL risk https://jeffhuang.com/designed_to_last/

Slide 86

Slide 86 text

Choose boring technology - Embrace boredom - Optimize globally - Choose new technology, Sometimes - Just ship https://mcfunley.com/choose-boring-technology http://boringtechnology.club/

Slide 87

Slide 87 text

Brutalist Web Design - Content is readable on all reasonable screens and devices. - Only hyperlinks and buttons respond to clicks. - Hyperlinks are underlined and buttons look like buttons. - The back button works as expected. - View content by scrolling. - Decoration when needed and no unrelated content. - Performance is a feature. https://brutalist-web.design/

Slide 88

Slide 88 text

Brutalist Web Design “By default, a website that uses HTML as intended and has no custom styling will be readable on all screens and devices. Only the act of design can make the content less readable, though it can certainly make it more.” https://brutalist-web.design/

Slide 89

Slide 89 text

Resilient Web Design “Here’s a three‐step approach I take to web design: - Identify core functionality. - Make that functionality available using the simplest possible technology. - Enhance!” https://resilientwebdesign.com/

Slide 90

Slide 90 text

Et dans les outils de dev ?

Slide 91

Slide 91 text

La réhabilitation du fait maison - Technologie, + Savoir faire

Slide 92

Slide 92 text

https://twitter.com/tjholowaychuk/status/1256180687088111616?s=20

Slide 93

Slide 93 text

http://john.ankarstrom.se/html/

Slide 94

Slide 94 text

https://carter.sande.duodecima.technology /javascript-page-navigation/

Slide 95

Slide 95 text

Patchbay.pub IFTTT Lite

Slide 96

Slide 96 text

patchbay.pub https://patchbay.pub/ Poor man’s web

Slide 97

Slide 97 text

patchbay.pub curl https://patchbay.pub/cz4e-t64w -d "Bonjour" curl https://patchbay.pub/cz4e-t64w Consumer - Producer

Slide 98

Slide 98 text

patchbay.pub curl https://patchbay.pub/ pubsub/cz4e-t64 w -d "Bonjour" curl https://patchbay.pub/ pubsub/cz4e-t64 w Subscriber - Publisher

Slide 99

Slide 99 text

patchbay.pub - hébergement statique - partage de fichier - notifications - webhooks - reporting d’alertes - job queues - chat - bots - ...

Slide 100

Slide 100 text

Recutils La BDD low-tech

Slide 101

Slide 101 text

Recutils https://www.gnu.org/software /recutils/ Fred & George

Slide 102

Slide 102 text

Recutils Données lisibles par un humain. Données modifiables directement par un humain. Indépendant d’un logiciel quelconque. Facilement géré par les gestionnaires de version (Git, SVN...)

Slide 103

Slide 103 text

Conclusion ? une histoire de choix

Slide 104

Slide 104 text

Conclusion ? choisir c’est renoncer

Slide 105

Slide 105 text

et vous ? vous renoncez à quoi ?

Slide 106

Slide 106 text

peut-être à ...

Slide 107

Slide 107 text

Élargir l’audience et réduire la fracture numérique Applications plus résiliente en environnement dégradé, UX plus sobre et plus compréhensible

Slide 108

Slide 108 text

Améliorer l’accessibilité Utilisation du texte en priorité sur les autres média

Slide 109

Slide 109 text

Respecter la vie privée Limitation des trackers et publicités gourmands en ressources

Slide 110

Slide 110 text

Satisfaire et fidéliser des utilisateurs UX centrée sur les fonctionnalités essentielles

Slide 111

Slide 111 text

Assurer la pérennité des applications Simplification fonctionnelle et technique, moins de ressources nécessaires

Slide 112

Slide 112 text

prendre conscience de ses choix

Slide 113

Slide 113 text

prendre conscience de ce à quoi on renonce

Slide 114

Slide 114 text

et n’oublions pas...

Slide 115

Slide 115 text

There is no silver bullet choisir c’est renoncer

Slide 116

Slide 116 text

There is no silver bullet choisir c’est renoncer Merci ❤ twitter: @AntoineCailly

Slide 117

Slide 117 text

No content