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 15KB

2 jaren geleden
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  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` element
  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>Workplace serendipity, invention, and lessons from Prohibition 1920-1933 (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="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <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>
  31. <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>
  32. <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>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <meta name="robots" content="noindex, nofollow">
  53. <meta content="origin-when-cross-origin" name="referrer">
  54. <!-- Canonical URL for SEO purposes -->
  55. <link rel="canonical" href="https://interconnected.org/home/2022/03/14/saloons">
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  57. <article>
  58. <header>
  59. <h1>Workplace serendipity, invention, and lessons from Prohibition 1920-1933</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://interconnected.org/home/2022/03/14/saloons" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <div class="f5 f4-l measure-wide" id="social-select-root">
  71. <p class="measure-wide f6 f5-l lh-copy black-80">Behold the power of lubricated thinking and general hanging out:</p>
  72. <blockquote class="bl bw2 pl2 b--orange ml0 italic i">
  73. <p class="measure-wide f6 f5-l lh-copy black-80">closing the saloons during prohibition reduced patenting by ~15%.</p>
  74. </blockquote>
  75. <p class="measure-wide f6 f5-l lh-copy black-80">This is from the blog <em>Marginal Revolution</em> summarising a paper by Mike Andrews.</p>
  76. <p class="measure-wide f6 f5-l lh-copy black-80"><em>(<a href="https://en.wikipedia.org/wiki/Prohibition_in_the_United_States">Prohibition in the US</a>: alcoholic beverages were banned from 1920 to 1933.)</em></p>
  77. <p class="measure-wide f6 f5-l lh-copy black-80">Saloons! The all-conquering social media of their day: <q>By 1897 there were roughly a quarter of a million saloons, or 23 for every Starbucks franchise today.</q> (Saloons combined drinking with other services such as a telegraph station and a payday lender.)</p>
  78. <p class="measure-wide f6 f5-l lh-copy black-80">The convincing bit of evidence considers women…</p>
  79. <blockquote cite="https://marginalrevolution.com/marginalrevolution/2021/09/saloons-of-invention.html" class="quoteback bl bw2 pl2 b--orange ml0 italic i" data-author="Marginal Revolution" data-title="Saloons of Invention (2021)">
  80. <p class="measure-wide f6 f5-l lh-copy black-80">Andrew’s compares countries that were forced dry by state prohibition laws with previously dry counties, so the estimates are local and from across the country. He has significant patent data including the location of inventors and a variety of important robustness tests. Women, for example, didn’t typically patronize the saloons but also continued to patent at similar rates in wet and dry counties.</p>
  81. </blockquote>
  82. <p class="measure-wide f6 f5-l lh-copy black-80"><em>Ref.</em></p>
  83. <p class="measure-wide f6 f5-l lh-copy black-80">Andrews, Michael, <a href="https://ssrn.com/abstract=3489466">Bar Talk: Informal Social Interactions, Alcohol Prohibition, and Invention</a> (November 18, 2019).</p>
  84. <p class="measure-wide f6 f5-l lh-copy black-80">You can grab the PDF at that link. Absolutely read the introduction (p2) but honestly it is all good.</p>
  85. <hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white">
  86. <p class="measure-wide f6 f5-l lh-copy black-80">The paper itself is about where <strong>new ideas</strong> come from: <q>the importance of informal interactions on the rate and direction of inventive activity.</q></p>
  87. <p class="measure-wide f6 f5-l lh-copy black-80">Two key takeaways:</p>
  88. <blockquote class="bl bw2 pl2 b--orange ml0 italic i">
  89. <p class="measure-wide f6 f5-l lh-copy black-80">social interactions are important for invention because they facilitate the exposure to new ideas, in addition to simply making it easier for individuals to find collaborators.</p>
  90. </blockquote>
  91. <p class="measure-wide f6 f5-l lh-copy black-80">Serendipitous exposure to ideas! The ability to find collaborators!</p>
  92. <p class="measure-wide f6 f5-l lh-copy black-80">Also: you need saloons <strong>in addition to</strong> collaboration at work. There is evidence that <q>informal interactions in bars and formal interactions in the workplace are complements in the invention production function.</q></p>
  93. <p class="measure-wide f6 f5-l lh-copy black-80">All was not lost when the saloons were shut: <q>while disrupting these existing networks can have negative effects, people will form alternative networks</q> – but it takes time.</p>
  94. <p class="measure-wide f6 f5-l lh-copy black-80">Finally – there is a question about whether alcohol itself is responsible for invention, rather than serendipitous social interactions. In a sublime bit of analysis (section 5), Andrews looks at per-county cirrhosis death rates (because actual alcohol consumption was not reported, due to the legal situation) and finds that, for patents, it’s the bars and not the booze.</p>
  95. <hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white">
  96. <p class="measure-wide f6 f5-l lh-copy black-80">Going remote over lockdown is like prohibition and the saloons closing, right?</p>
  97. <p class="measure-wide f6 f5-l lh-copy black-80">So much of being in the office is about bumping into people as a meeting room turns over, and you catch the end of a conversation or see who’s there, and that reminds you of something, so you get to drop in some extra information. Or the lunches, or the geography of nearby desktops and being pulled into a fortuitous chat, and so on…</p>
  98. <p class="measure-wide f6 f5-l lh-copy black-80">Could this kind of serendipity be achieved in software?</p>
  99. <p class="measure-wide f6 f5-l lh-copy black-80">Last year I was speculating about <a href="/home/2021/06/15/doorways">video call software and anterooms</a> and now I want to extend this idea to anterooms where people can have chance encounters…</p>
  100. <p class="measure-wide f6 f5-l lh-copy black-80">IMAGINE your Zoom icon on your phone is the anteroom. You leave your last call of the day, but notice the icon still pulsing with muffled sound. So you tap to peek in – and find that the people from your previous two meetings have randomly spotted each other and are still there, white-boarding on the wall, swapping notes.</p>
  101. <p class="measure-wide f6 f5-l lh-copy black-80">Given places like Pixar and Xerox PARC shaped their physical architecture to select for serendipitous mixing and corridor conversations, to great success, why aren’t we using information architecture to do the same?</p>
  102. <p class="measure-wide f6 f5-l lh-copy black-80"><em>(Hey this is a little of what I’m working on in the day job. We’re not building a virtual office as the primary use case but even so, we have our meetings on-platform now – and one of the incidental features is that you bump into people between calls, and can spot people hanging out and choose to swing by to say hi. It’s minor but effective and super neat. <a href="https://twitter.com/genmon/status/1501147689886564352">BTW we’re hiring.</a>)</em></p>
  103. <p class="measure-wide f6 f5-l lh-copy black-80">The supplementary question is how you build trust and help people feel confident enough to share their half-baked ideas with people they half know. It’s not <em>just</em> about bumping into people outside meetings, but repeated encounters to build familiarity, and the environment of the bar or the liminal quality of the corridors, and having gregarious friends and colleagues to connect conversations, and so on and so on.</p>
  104. </div>
  105. </article>
  106. <hr>
  107. <footer>
  108. <p>
  109. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  110. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  111. </svg> Accueil</a> •
  112. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  113. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  114. </svg> Suivre</a> •
  115. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  116. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  117. </svg> Pro</a> •
  118. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  119. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  120. </svg> Email</a> •
  121. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  122. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  123. </svg> Légal</abbr>
  124. </p>
  125. <template id="theme-selector">
  126. <form>
  127. <fieldset>
  128. <legend><svg class="icon icon-brightness-contrast">
  129. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  130. </svg> Thème</legend>
  131. <label>
  132. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  133. </label>
  134. <label>
  135. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  136. </label>
  137. <label>
  138. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  139. </label>
  140. </fieldset>
  141. </form>
  142. </template>
  143. </footer>
  144. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  145. <script>
  146. function loadThemeForm(templateName) {
  147. const themeSelectorTemplate = document.querySelector(templateName)
  148. const form = themeSelectorTemplate.content.firstElementChild
  149. themeSelectorTemplate.replaceWith(form)
  150. form.addEventListener('change', (e) => {
  151. const chosenColorScheme = e.target.value
  152. localStorage.setItem('theme', chosenColorScheme)
  153. toggleTheme(chosenColorScheme)
  154. })
  155. const selectedTheme = localStorage.getItem('theme')
  156. if (selectedTheme && selectedTheme !== 'undefined') {
  157. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  158. }
  159. }
  160. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  161. window.addEventListener('load', () => {
  162. let hasDarkRules = false
  163. for (const styleSheet of Array.from(document.styleSheets)) {
  164. let mediaRules = []
  165. for (const cssRule of styleSheet.cssRules) {
  166. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  167. continue
  168. }
  169. // WARNING: Safari does not have/supports `conditionText`.
  170. if (cssRule.conditionText) {
  171. if (cssRule.conditionText !== prefersColorSchemeDark) {
  172. continue
  173. }
  174. } else {
  175. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  176. continue
  177. }
  178. }
  179. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  180. }
  181. // WARNING: do not try to insert a Rule to a styleSheet you are
  182. // currently iterating on, otherwise the browser will be stuck
  183. // in a infinite loop…
  184. for (const mediaRule of mediaRules) {
  185. styleSheet.insertRule(mediaRule.cssText)
  186. hasDarkRules = true
  187. }
  188. }
  189. if (hasDarkRules) {
  190. loadThemeForm('#theme-selector')
  191. }
  192. })
  193. </script>
  194. </body>
  195. </html>