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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  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>Mourning Loss of a Team Member as a Remote Team (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://www.sofuckingagile.com/blog/mourning-loss-as-a-remote-team">
  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>Mourning Loss of a Team Member as a Remote Team</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://www.sofuckingagile.com/blog/mourning-loss-as-a-remote-team" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p>This is a hard one to write about. Last year our team lost Pete, a long time engineer. Pete took his own life. He had battled mental health issues for some time. </p>
  71. <p>Our team was tight, fully remote for a decade, and Pete was part of it for 7 years. In the software engineering world, 7 years at the same job is a lifetime. The thing was, we’d never met Pete. Only a few of us had actually met in person. He was several time-zones away and I don’t think I could pick him out of a lineup. When we connected for meetings, we didn’t use cameras so I’d only seen a few images of Pete in family photos that we’d shared between us. I was the person who hired him and even during the interview process we didn’t use cameras. Nonetheless, I felt like we were in sync, we were friends, and he was a crucial part of the team. We talked frequently about music, family, video games and his love of Disney. I learned about his local politics and his views on the world. I loved Pete.</p>
  72. <h2>His Wife Had to Create a Support Ticket</h2>
  73. <p>We fucked up. We had no connection to the people in Pete’s life, like his wife and kids. Pete was a full time contractor. This was a typical arrangement for over half of our team. We were scattered all over the world and we got started with a global team in the easiest way, which was hiring engineers as contractors. Pete had no HR, no health benefits, and no employee record with alternate or emergency contacts. We had 600 people in the company, but he was only known to about 10. And from the perspective of his family, they only knew the name of the company he was contracted with and my first name, but nothing else.</p>
  74. <p>When he passed away, his wife had no way to contact me or anyone on his team. When I arrived in the morning, I got a message from our customer support team lead. Pete’s wife had used the technical support chat to get a message to me. She was put in a queue with every other customer user who couldn’t login or forgotten how to access the mobile app. I was gutted by the eventual news and by the fact that Pete’s passing had become a support ticket. This made it so much more devastating.</p>
  75. <p>If you work with full time remote employees or contractors, please put channels in place to communicate with family or alternate contacts. Make sure emergency contact info is shared on both sides.</p>
  76. <h2>Make Sure the Broader Organization Knows You Are Mourning</h2>
  77. <p>The team was lost. Because he was a full time contractor and not an employee, there was no HR intervention to help. I honestly don’t know if HR does help in these situations, but I like to think they could schedule grief counseling or something. We initially didn’t know what to do, or how to mourn.</p>
  78. <p>We started by letting the organization know that we were all struggling. We ran this all the way up to the CEO. Because of his remote contractor arrangement, nobody outside of our team would have known that anything happened. We’d be postponing releases, this sprint was fucked, the next one too and maybe more to come. We needed time to pull it together. We’d lost a real one. </p>
  79. <p>Messaging the broader company and other teams was key. Some people are pros at what to do in these situations and they can operate with a clear head. Before long we had UberEats delivering to Pete’s family on the other side of the world, kind memories and words circulating and we had donations going to Pete’s local mental health organization. Our team, in our current state, could not have pulled this together without the help of the broader company.</p>
  80. <h2>/Pete Easter Egg</h2>
  81. <p>As a squad, we decided the best memorial was an Easter Egg in the app. Pete was all over this app. He was prolific. This team and teams to come would be maintaining his code for years.</p>
  82. <p>Pete deserved his own route. We created<strong> /Pete</strong> and put a page there memorializing him in code. This wasn’t a traditional hard-to-find easter egg. It was top level. Just add /Pete to your address bar and you’re there. This seemed right. </p>
  83. <h2>Did We Ignore the Signs?</h2>
  84. <p>It’s easy to think that we could have prevented Pete’s death. Our team spent the most time with him on a daily basis. I remember doing a ‘share photos of your workspace’ with the team, and being shocked by Pete’s workspace. 3 keyboards stacked on top of each other, heaps of peripherals, old broken monitors, headphones, piles of trash, a total mess. After seeing this, I began to learn a little bit about the scope of Pete’s challenges.</p>
  85. <p>Pete would ask to work more hours. He claimed he could use the money. He was a contractor remember, so more hours means more money, and I could reconcile this without thinking twice. Who doesn’t want more money? After he passed I learned that work was a distraction for him. It gave him something to obsess over and he could think less about the mental and emotional struggles that were plaguing him. His wife sent photos of a bunch of handwritten notes of JavaScript that were lying around his room. She had went looking for a note, a clue as to why. She said ‘<em>maybe you can make sense of these</em>.’ I couldn’t, but I knew people who could. It was an iframe dynamic height function. It was work.</p>
  86. <p>Could I have pushed harder to make him an employee? Prior to getting acquired, the process was underway to sponsor Pete to become an employee. After the acquisition, this sort of stalled and wasn’t something our new owners had interest in at the time. I could have pushed harder. I don’t know if it would have helped, but the thought still lingers that some things may have helped, such as having HR oversight, health benefits, and mental health affordances.</p>
  87. <h2>Caught a Wobbler</h2>
  88. <p>Pete was Scottish and he had his own slang which I loved and miss dearly. When he found a bug, he’d say ‘<em>Caught a wobbler!</em>’ I loved this. Pay attention to your team. Build closeness. Get to know about everyone’s family and private life. Take mental health seriously and talk openly about it. It may seem like prying, but you might catch a wobbler with a team member that you can address early.</p>
  89. <p>RIP Pete.</p>
  90. </article>
  91. <hr>
  92. <footer>
  93. <p>
  94. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  95. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  96. </svg> Accueil</a> •
  97. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  98. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  99. </svg> Suivre</a> •
  100. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  101. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  102. </svg> Pro</a> •
  103. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  104. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  105. </svg> Email</a> •
  106. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  107. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  108. </svg> Légal</abbr>
  109. </p>
  110. <template id="theme-selector">
  111. <form>
  112. <fieldset>
  113. <legend><svg class="icon icon-brightness-contrast">
  114. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  115. </svg> Thème</legend>
  116. <label>
  117. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  118. </label>
  119. <label>
  120. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  121. </label>
  122. <label>
  123. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  124. </label>
  125. </fieldset>
  126. </form>
  127. </template>
  128. </footer>
  129. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  130. <script>
  131. function loadThemeForm(templateName) {
  132. const themeSelectorTemplate = document.querySelector(templateName)
  133. const form = themeSelectorTemplate.content.firstElementChild
  134. themeSelectorTemplate.replaceWith(form)
  135. form.addEventListener('change', (e) => {
  136. const chosenColorScheme = e.target.value
  137. localStorage.setItem('theme', chosenColorScheme)
  138. toggleTheme(chosenColorScheme)
  139. })
  140. const selectedTheme = localStorage.getItem('theme')
  141. if (selectedTheme && selectedTheme !== 'undefined') {
  142. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  143. }
  144. }
  145. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  146. window.addEventListener('load', () => {
  147. let hasDarkRules = false
  148. for (const styleSheet of Array.from(document.styleSheets)) {
  149. let mediaRules = []
  150. for (const cssRule of styleSheet.cssRules) {
  151. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  152. continue
  153. }
  154. // WARNING: Safari does not have/supports `conditionText`.
  155. if (cssRule.conditionText) {
  156. if (cssRule.conditionText !== prefersColorSchemeDark) {
  157. continue
  158. }
  159. } else {
  160. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  161. continue
  162. }
  163. }
  164. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  165. }
  166. // WARNING: do not try to insert a Rule to a styleSheet you are
  167. // currently iterating on, otherwise the browser will be stuck
  168. // in a infinite loop…
  169. for (const mediaRule of mediaRules) {
  170. styleSheet.insertRule(mediaRule.cssText)
  171. hasDarkRules = true
  172. }
  173. }
  174. if (hasDarkRules) {
  175. loadThemeForm('#theme-selector')
  176. }
  177. })
  178. </script>
  179. </body>
  180. </html>