davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>Writing for distributed teams (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<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>
<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>
<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>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://veekaybee.github.io/2021/07/17/p2s/">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
  <header>
    <h1>Writing for distributed teams</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://veekaybee.github.io/2021/07/17/p2s/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>This week was my first anniversary since I started at Automattic in the spring of 2020,  and I was going through my work artifacts to reflect on what I’ve done so far this year. One thing that completely surprised me was that it turns out that I only sent 11 emails this entire year.</p>

<p>How is it possible? The answer is P2s.</p>

<p>For those not familiar with <a href="https://automattic.com/">Automattic</a>, the company behind WordPress.com and <a href="https://photomatt.tumblr.com/post/186964618222/automattic-tumblr">Tumblr</a>, which I now work on as a machine learning engineer, one of the big MOs of the company is that <a href="https://automattic.com/creed/">we communicate as much as possible in durable written format</a> since we’re distributed.</p>

<p>How does no email square with complete distributed communication? The answer is <a href="https://automattic.com/creed/">P2</a>.  P2 is the name of a WordPress theme <a href="https://ma.tt/2009/05/how-p2-changed-automattic/">that every team at Automattic</a> uses internally for documentation. Essentially, we have (probably) hundreds of P2s, for current teams, for teams that used to exist, for special interest groups, and events.</p>

<p>When you “P2” something, you’re writing a blog post, where you can tag in coworkers and cross-post to other P2s.  What do teams use P2s for? <a href="https://p2guides.wordpress.com/best-practices/writing-useful-posts/">Absolutely everything</a>. Checklists for onboarding, status reports on projects, thoughts about detailing projects, discussions about best coding practices, architectural diagrams, marketing data analyses, and more. The best part is that the entire company’s history of P2s is available to search through. Also, you can subscribe to literally any P2, and comment on it as necessary, starting with your own team’s.</p>

<p>Why P2s? Because they capture fleeting one-off written communication: you can read a P2 at your own speed, in your own timezone, which is key since we operate across all timezones.</p>

<p>Here’s Matt <a href="https://distributed.blog/2020/06/18/distributed-faq-p2-automattic/">with more on it:</a></p>

<blockquote>
  <p>P2 is the evolution of the blog for the purpose of working within and across teams. It’s organized much like a Yammer or Facebook stream, but on the back end it still operates like a blog, allowing for archiving, advanced search, and rich media embeds.</p>
</blockquote>

<p>Here’s a great post on the company MO and <a href="https://nomad.blog/2020/12/08/you-might-not-love-working-at-automattic-if/">more detail</a>:</p>

<blockquote>
  <p>Most of our company communication is done on what we call “p2s”. You can actually create your own here. Think of them as free flowing, chronological sites where people can share updates, tag others for feedback, cross post to other p2s, and more. I’m on the more talkative and connected side of things which is reflected in the stats you see below (almost at the 1.5 million word mark!):</p>
</blockquote>

<blockquote>
  <p>Conversations on P2s take place in line, update in real time, and provide space for threaded replies. We’ve stuck with P2 for years now, and it has ultimately evolved into a rich source of institutional wisdom and collective company memory.</p>
</blockquote>

<p>If you want to know what the team worked on last week, it’s in a P2. If you want to look for the results of a meeting from last year, you can do a keyword search.</p>

<p>A saying around the company is that you should “P2 something or it didn’t happen”, aka it doesn’t get surfaced to a place where everyone can read about it, lost languishing in an email thread.</p>

<h1>What works for me about P2s</h1>

<p>This is a completely different paradigm than I’ve ever worked in, which has been a world usually riddled with information lost to Slack, Confluence, and dozens of email re:re:res.</p>

<p>It’s true that I still spend an enormous amount of time in Slack, but the company’s focus on P2 as THE place where institutional memory lives, and where other people can interact with your work, means that there is an internal incentive to get stuff out of Slack and into P2s, where they can live forever and be collected with other P2s to form a cohesive view of how a team, project, or division operates over time. In this way, the company also owns its own institutional knoweldge instead of having it locked away in third-party tools.</p>

<p>The nature of reading P2s means even if you only write one or two P2s a month, you can send them around in meetings or Slack conversations as solid anchors and points of reference. (Another note is that we definitely do still have meetings, and I spend a good deal of my day in Slack, but I don’t come away from these times feeling like the information is lost, because I’m always building towards a P2 on whatever was discussed in either format.)</p>

<p>I’m super biased on this, but as someone who spends a lot of time processing things in writing, and who enjoys writing, I love P2s. I love that they make me clearly state what was jumbled in my head, I love that I now have a concrete trail, with links, of things that I’ve worked on. I love that I essentially am encouraged to blog internally, about things that I’ve worked on, my thoughts on projects, my progress, and ideas I have, and that I can do it mostly at a pace that works for my own work schedule.</p>

<p>Of course, as with any technology, P2s come with their own tradeoffs: <a href="https://automattic.design/2020/09/29/how-not-to-start-a-job-at-automattic/">it can be easy to get lost</a> reading through hundreds of P2 posts every day and responding unless you have a very good P2 strategy and focus on the ones relevant to you. It can be hard to synthesize a lot of technical information into a post that’s relevant enough to both engineers and business people and offer enough context and value to continue the conversation. It can be hard to go back far enough to find all of the historical context you need for your own P2s.</p>

<p>But, in spite of these issues, I really love the P2 as a medium for institutional knowledge and will definitely take the idea of P2s wherever I am in my career from now on.</p>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>