A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 13KB

4 months ago
4 months ago
4 months ago
4 months ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  4. <!-- Has to be within the first 1024 bytes, hence before the <title>
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>Missing structure in technical discussions (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f0f0ea">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f0f0ea">
  26. <!-- Documented, feel free to shoot an email. -->
  27. <link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
  28. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  29. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <script type="text/javascript">
  36. function toggleTheme(themeName) {
  37. document.documentElement.classList.toggle(
  38. 'forced-dark',
  39. themeName === 'dark'
  40. )
  41. document.documentElement.classList.toggle(
  42. 'forced-light',
  43. themeName === 'light'
  44. )
  45. }
  46. const selectedTheme = localStorage.getItem('theme')
  47. if (selectedTheme !== 'undefined') {
  48. toggleTheme(selectedTheme)
  49. }
  50. </script>
  51. <meta name="robots" content="noindex, nofollow">
  52. <meta content="origin-when-cross-origin" name="referrer">
  53. <!-- Canonical URL for SEO purposes -->
  54. <link rel="canonical" href="http://kvark.github.io/tech/arguments/2020/06/30/technical-discussions.html">
  55. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">
  56. <article>
  57. <header>
  58. <h1>Missing structure in technical discussions</h1>
  59. </header>
  60. <nav>
  61. <p class="center">
  62. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  63. <a href="http://kvark.github.io/tech/arguments/2020/06/30/technical-discussions.html" title="Lien vers le contenu original">Source originale</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <main>
  68. <p>People are amazing creatures. When discussing a complex issue, they are able to keep multiple independent
  69. arguments in their heads, the pieces of supporting and disproving evidence, and can collapse this system
  70. into a concrete solution. We can spend hours navigating through the issue comments on Github, reconstructing
  71. the points of view, and making sense of the discussion. Problem is: we don’t actually want to apply this
  72. superpower and waste time nearly as often.</p>
  73. <h2 id="problem-with-technical-discussions">Problem with technical discussions</h2>
  74. <p>Have you heard of <code class="language-plaintext highlighter-rouge">async</code> in Rust? Ever wondered why the core team opted into a completely new syntax for this feature? Let’s dive in and find out! Here is <a href="https://github.com/rust-lang/rust/issues/57640">#57640</a> with 512 comments, kindly asking everyone to check <a href="https://github.com/rust-lang/rust/issues/50547">#50547</a> (with just 308 comments) before expressing their point of view. Following this discussion must have been exhausting. I don’t know how it would be possible to navigate it without the <a href="https://github.com/rust-lang/rust/issues/57640#issuecomment-456624074">summary</a> <a href="https://github.com/rust-lang/rust/issues/57640#issuecomment-456625030">comments</a>.</p>
  75. <p>Another example is the loop syntax in WebGPU. Issue <a href="https://github.com/gpuweb/gpuweb/issues/569">#569</a> has only 70 comments, with multiple attempts to <a href="https://github.com/gpuweb/gpuweb/issues/569#issuecomment-610041440">summarize</a> the discussion in the middle. It would probably take a few hours at the minimum to get a gist of the group reasoning for somebody from the outside. And that doesn’t include the call transcripts.</p>
  76. <p>Github has emojis which allow certain comments to show more support. Unfortunately, our nature is such that comments are getting liked when we agree with them, not when they advance the discussion in a constructive way. They are all over the place and don’t really help.</p>
  77. <p>What would help though is having a non-linear structure for the discussion. Trees! They make following HN and Reddit threads much easier, but they too have problems. Sometimes, a really important comment is buried deep in one of the branches. Plus, trees don’t work well for a dialog, when there is some back-and-forth between people.</p>
  78. <p>That brings us to the point: most technical discussions are <em>terrible</em>. Not in a sense that people can’t make good points and progress through it, but rather that there is no structure to a discussion, and it’s too hard to follow. What I see in reality is a lot of focus from a very few dedicated people, and delegation by the other ones to those focused. Many views get misrepresented, and many perspectives never heard, because the flow of comments quickly filters out most potential participants.</p>
  79. <h2 id="structured-discussion">Structured discussion</h2>
  80. <p>My first stop in the search of a solution was on <a href="https://www.discourse.org/">Discourse</a>. It is successfully used by many communities, including <a href="https://users.rust-lang.org/">Rust users</a>. Unfortunately, it still has linear structure, and doesn’t bring a lot to the table on top of Github. Try following <a href="https://users.rust-lang.org/t/rust-2020-growth/34956">this discussion
  81. </a> about Rust in 2020 for example.</p>
  82. <p>Then I looked at platforms designed specifically for a structured argumentation. One of the most popular today is <a href="https://www.kialo.com/">Kialo</a>. I haven’t done a good evaluation on it, but it seemed that Kialo isn’t targeted at engineers, and it’s a platform that we’d have to register in for use. Wishing to use Markdown with a system like that, I stumbled upon <a href="https://argdown.org/">Argdown</a>, and realized that it concluded my search.</p>
  83. <p>Argdown introduces a syntax for defining the structure of an argument in text. Statements, arguments, propositions, conclusions - it has it all, written simply in your text editor (especially if its VSCode, for which there is a plugin), or in the <a href="https://argdown.org/sandbox/html">playground</a>. It has command-line tools to produce all sorts of derivatives, like dot graphs, web components, JSON, you name it, from an <code class="language-plaintext highlighter-rouge">.argdown</code> file. Naturally, formatting with Markdown in it is also supported.</p>
  84. <p>That discovery led me to two questions. (1) - what would an <em>existing</em> debate look like in such a system? And (2) - how could we shift the workflow towards using one?</p>
  85. <p>So I picked the most contentious topic in WebGPU discussions and tried to reconstruct it. Topic was about choosing the shading language, and why SPIR-V wasn’t accepted. It was discussed by the W3C group over the course of 2+ years, and it’s evident that there is <a href="https://github.com/gpuweb/gpuweb/issues/847#issuecomment-642497578">some</a> <a href="https://news.ycombinator.com/item?id=23089745">misunderstanding</a> of why the decision was made to go with WGSL, taking Google’s Tint proposal as a starting point.</p>
  86. <p>I attempted to reconstruct the debate in https://github.com/kvark/webgpu-debate, building the <a href="https://github.com/kvark/webgpu-debate/blob/b28252ea99aef8989858ece09f74dc0758e3d46c/arguments/SPIR-V.argdown">SPIR-V.argdown</a> with the first version of the argumentation graph, solving (1). The repository accepts pull requests that are checked by CI for syntax correctness, inviting everyone to collaborate, solving (2). Moreover, the artifacts are automatically uploaded to Github-pages, rendering the <a href="https://kvark.github.io/webgpu-debate/SPIR-V.component.html">discussion</a> in a way that is easy to explore.</p>
  87. <h2 id="way-forward">Way forward</h2>
  88. <p>I’m excited to have this new way of preserving and growing the structure of a technical debate. We can keep using the code hosting platforms, and arguing on the issues and PR, while solidifying the core points in these <code class="language-plaintext highlighter-rouge">.argdown</code> files. I hope to see it applied more widely to the workflows of technical working groups.</p>
  89. </main>
  90. </article>
  91. <hr>
  92. <footer>
  93. <p>
  94. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  95. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  96. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  97. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  98. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  99. </p>
  100. <template id="theme-selector">
  101. <form>
  102. <fieldset>
  103. <legend>Thème</legend>
  104. <label>
  105. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  106. </label>
  107. <label>
  108. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  109. </label>
  110. <label>
  111. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  112. </label>
  113. </fieldset>
  114. </form>
  115. </template>
  116. </footer>
  117. <script type="text/javascript">
  118. function loadThemeForm(templateName) {
  119. const themeSelectorTemplate = document.querySelector(templateName)
  120. const form = themeSelectorTemplate.content.firstElementChild
  121. themeSelectorTemplate.replaceWith(form)
  122. form.addEventListener('change', (e) => {
  123. const chosenColorScheme = e.target.value
  124. localStorage.setItem('theme', chosenColorScheme)
  125. toggleTheme(chosenColorScheme)
  126. })
  127. const selectedTheme = localStorage.getItem('theme')
  128. if (selectedTheme && selectedTheme !== 'undefined') {
  129. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  130. }
  131. }
  132. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  133. window.addEventListener('load', () => {
  134. let hasDarkRules = false
  135. for (const styleSheet of Array.from(document.styleSheets)) {
  136. let mediaRules = []
  137. for (const cssRule of styleSheet.cssRules) {
  138. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  139. continue
  140. }
  141. // WARNING: Safari does not have/supports `conditionText`.
  142. if (cssRule.conditionText) {
  143. if (cssRule.conditionText !== prefersColorSchemeDark) {
  144. continue
  145. }
  146. } else {
  147. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  148. continue
  149. }
  150. }
  151. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  152. }
  153. // WARNING: do not try to insert a Rule to a styleSheet you are
  154. // currently iterating on, otherwise the browser will be stuck
  155. // in a infinite loop…
  156. for (const mediaRule of mediaRules) {
  157. styleSheet.insertRule(mediaRule.cssText)
  158. hasDarkRules = true
  159. }
  160. }
  161. if (hasDarkRules) {
  162. loadThemeForm('#theme-selector')
  163. }
  164. })
  165. </script>
  166. </body>
  167. </html>