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

Le Low Tech Web

Le Low Tech Web

Vidéo : https://www.youtube.com/watch?v=w6BmIX564gk

Je vous propose un voyage dans le web d'aujourd'hui.

C'est un voyage qui vous fera découvrir des sites ou des applications qui ont décidé de ne pas suivre les tendances actuelles en terme de technos, de design et de fonctionnalités.

Ce "Low Tech Web", qu'est ce que c'est ?

Est-ce un retour aux années 2000 ?

C'est peut-être plus profond que cela, un appel à nous reposer des questions dont nous avions oublié l'existence.

De3b2ef28385b01a1b44a9debc66dd6e?s=128

Antoine CAILLY

June 23, 2020
Tweet

Transcript

  1. Le Low-Tech Web

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

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

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

    + Savoir faire
  5. C’est quoi Low-Tech ? Low-Tech Lab https://lowtechlab.org/ - Utile -

    Accessible - Durable
  6. Un exemple les grid beams https://gridbeam.xyz /

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

  8. mais impossible de faire...

  9. https://unsplash.com/photos/jDEP1mv1Apk

  10. Le Low-Tech... Web ?

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

  12. Le Web aujourd’hui

  13. 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
  14. 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
  15. 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
  16. Alors on fait quoi ?

  17. On optimise ! ça nous fera de la place pour

    ajouter plein de trucs !
  18. T’as essayé le Server Side Rendering ? vous reprendrez bien

    une dose de complexité ?
  19. Tout le monde fait la même chose donc on s’en

    fout
  20. On va renoncer à certaines choses hein ? y’a des

    gens qui font ça ?
  21. Des exemples !

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

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

  24. Les versions lite

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

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

  27. Youtube Feather https://blog.chriszacharias.com/ page-weight-matters 1.2 Mo => 98 Ko La

    latence moyenne augmente !!???
  28. minimal https://addons.mozilla.org/fr /firefox/addon/minimal-intern et-experience/

  29. Des sites populaires Low-Tech ça existe ?

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

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

    Combinator
  32. 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é
  33. Hacker News Témoignage en 2019 https://news.ycombinator.com/ item?id=20854214 Thank you for

    not trying to ‘fix’ what isn’t broken
  34. Le cas Medium

  35. Medium https://medium.com/

  36. Medium https://medium.com/

  37. Medium https://medium.com/

  38. Medium https://medium.com/

  39. Medium https://medium.com/

  40. et si on ne gardait que l’essentiel ?

  41. Telegraph https://telegra.ph/

  42. txti.es http://txti.es/

  43. txti.es https://motherfuckingwebsite.com/

  44. txti.es http://bettermotherfuckingwebsite.com/

  45. itty bitty https://itty.bitty.site

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

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

  48. Les Wikis

  49. Wikipedia https://fr.wikipedia.org

  50. Tiddly Wiki https://tiddlywiki.com/

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

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

  53. L’Open Source

  54. Un github low-tech ?

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

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

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

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

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

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

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

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

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

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

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

  66. - Technologie, + Savoir faire

  67. L’effet RGPD

  68. None
  69. D’autres exemples plus exotiques

  70. LibreTaxi https://libretaxi.org/

  71. LibreTaxi Un village sibérien Personne ne connaît Uber Pas de

    filtres sur les groupes Telegram Un chatbot !
  72. 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
  73. Yo https://www.justyo.co/ Zero characters communication

  74. 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 ...
  75. Scuttlebutt https://scuttlebutt.nz/ Nouveau site en construction : https://ssb-landing.netlify.app/

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

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

  78. https://www.manyver.se/

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

  80. 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/
  81. Gopher RFC 1436 : Simplicity is intentional Pas d’hyperliens Protocole

    orienté texte Organisé comme une arborescence de fichier
  82. 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
  83. Et si on conceptualise tout ça ?

  84. 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
  85. 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/
  86. Choose boring technology - Embrace boredom - Optimize globally -

    Choose new technology, Sometimes - Just ship https://mcfunley.com/choose-boring-technology http://boringtechnology.club/
  87. 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/
  88. 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/
  89. 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/
  90. Et dans les outils de dev ?

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

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

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

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

  95. Patchbay.pub IFTTT Lite

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

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

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

    w Subscriber - Publisher
  99. patchbay.pub - hébergement statique - partage de fichier - notifications

    - webhooks - reporting d’alertes - job queues - chat - bots - ...
  100. Recutils La BDD low-tech

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

  102. 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...)
  103. Conclusion ? une histoire de choix

  104. Conclusion ? choisir c’est renoncer

  105. et vous ? vous renoncez à quoi ?

  106. peut-être à ...

  107. É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
  108. Améliorer l’accessibilité Utilisation du texte en priorité sur les autres

    média
  109. Respecter la vie privée Limitation des trackers et publicités gourmands

    en ressources
  110. Satisfaire et fidéliser des utilisateurs UX centrée sur les fonctionnalités

    essentielles
  111. Assurer la pérennité des applications Simplification fonctionnelle et technique, moins

    de ressources nécessaires
  112. prendre conscience de ses choix

  113. prendre conscience de ce à quoi on renonce

  114. et n’oublions pas...

  115. There is no silver bullet choisir c’est renoncer

  116. There is no silver bullet choisir c’est renoncer Merci ❤

    twitter: @AntoineCailly
  117. None