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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  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>On meet-ups moving online (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="https://www.ripplet.org/weeknotes/2020/4/26/week-17-2020-on-meet-ups-moving-online">
  55. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">
  56. <article>
  57. <header>
  58. <h1>On meet-ups moving online</h1>
  59. </header>
  60. <nav>
  61. <p class="center">
  62. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  63. <a href="https://www.ripplet.org/weeknotes/2020/4/26/week-17-2020-on-meet-ups-moving-online" title="Lien vers le contenu original">Source originale</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <main>
  68. <p>It's been another quiet week, not bad from a productivity standpoint considering the level of hay fever symptoms that can put me out of action on a bad day. </p>
  69. <p>Most professional events have moved online, and it's been interesting to see what happens when geographical constraints are gone. I've been attending about one every two weeks since the confinement began, which is at least double my usual pace. </p>
  70. <p>The remote nature of events gives us access to more free content than ever before, and from the comfort of home, the barrier to trying an event is considerably lower. It's exciting to be more adventurous with choosing topics and communities of interest, or luck out with a free talk by a known speaker who is unlikely to visit our city. </p>
  71. <p>It comes with the "liberty" to be late, not show up, have dinner while attending the event, or quietly drop out if something better comes along. The flip side is that the chances of establishing a deep-enough connection with someone to follow-up on, even if it's an encounter at a later event, is much lower. </p>
  72. <p>From a speaker's point of view, the commodotization of content can be tough. With boundaries of an audience - who they are, why they're here, what they expect - evaporating, we need to put more care in setting expectations before we attempt to surpass them. It takes more work to understand an audience, and then to hold their attention. </p>
  73. <p>I believe the biggest changes are for community organizers. If I invest in my meetup as a way to contribute to my local scene and my place within it, what is my motivation to organize an event that anyone from around the world can join? If first-timers become more numerous than my regulars, how does it affect the shape of the space I try to hold? What is it I'm actually asking of, and offering to my speakers? If the long-timers can't have casual-yet-intimate conversations over drinks, where will they go instead? <strong>Who are "we" and why are we doing this? </strong> </p>
  74. <p>It's time to re-visit the nuances of what we mean by building community. Having the technical and facilitation expertise to run online events is just one piece of the puzzle. Honestly, organizing events takes too much effort to simply move existing activities online without having chewed on these questions. I fear that community organizers will burn out faster than before, as it becomes more difficult to tangibly feel the fruits of our efforts. </p>
  75. <p>My accelerated experiences as an attendee has been invaluable in teasing out a point of view for these three roles. With <a href="https://www.ripplet.org/design-research-tokyo">Design Research Tokyo</a>, we haven't run any events since pausing planning for a physical one in February but I think we're close to re-opening with something that's designed to be - dare I say - online-first. In parallel, I've been working with <a href="https://twitter.com/stonecrops_?lang=en">Dave</a> towards an event next Thursday for the ResearchOps Berlin community called "<a href="https://www.meetup.com/ResearchOps-Berlin/events/270235620/">Using the Research Skills Framework</a>". </p>
  76. <p>Meetups can take on a wide spectrum of flavors but its key concern is always grounded on the quality of connections established, for which the underlying principle remains the same: Listen carefully to the signals coming from the vast and increasingly noisy networks around us, and tune what we ourselves send out. </p>
  77. <p>p.s.
  78. The wider DRT audience includes plenty of (?) young mothers whose household schedules aren't compatible with coming out to a multi-hour event after hours. Offering babysitting services is beyond our reach but perhaps a shorter online event could be the right mechanism that brings learning opportunities to them. Was one of the first things that we discussed internally! </p>
  79. </main>
  80. </article>
  81. <hr>
  82. <footer>
  83. <p>
  84. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  85. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  86. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  87. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  88. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  89. </p>
  90. <template id="theme-selector">
  91. <form>
  92. <fieldset>
  93. <legend>Thème</legend>
  94. <label>
  95. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  96. </label>
  97. <label>
  98. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  99. </label>
  100. <label>
  101. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  102. </label>
  103. </fieldset>
  104. </form>
  105. </template>
  106. </footer>
  107. <script type="text/javascript">
  108. function loadThemeForm(templateName) {
  109. const themeSelectorTemplate = document.querySelector(templateName)
  110. const form = themeSelectorTemplate.content.firstElementChild
  111. themeSelectorTemplate.replaceWith(form)
  112. form.addEventListener('change', (e) => {
  113. const chosenColorScheme = e.target.value
  114. localStorage.setItem('theme', chosenColorScheme)
  115. toggleTheme(chosenColorScheme)
  116. })
  117. const selectedTheme = localStorage.getItem('theme')
  118. if (selectedTheme && selectedTheme !== 'undefined') {
  119. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  120. }
  121. }
  122. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  123. window.addEventListener('load', () => {
  124. let hasDarkRules = false
  125. for (const styleSheet of Array.from(document.styleSheets)) {
  126. let mediaRules = []
  127. for (const cssRule of styleSheet.cssRules) {
  128. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  129. continue
  130. }
  131. // WARNING: Safari does not have/supports `conditionText`.
  132. if (cssRule.conditionText) {
  133. if (cssRule.conditionText !== prefersColorSchemeDark) {
  134. continue
  135. }
  136. } else {
  137. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  138. continue
  139. }
  140. }
  141. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  142. }
  143. // WARNING: do not try to insert a Rule to a styleSheet you are
  144. // currently iterating on, otherwise the browser will be stuck
  145. // in a infinite loop…
  146. for (const mediaRule of mediaRules) {
  147. styleSheet.insertRule(mediaRule.cssText)
  148. hasDarkRules = true
  149. }
  150. }
  151. if (hasDarkRules) {
  152. loadThemeForm('#theme-selector')
  153. }
  154. })
  155. </script>
  156. </body>
  157. </html>