davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534
							<!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>
  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,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Required to make a valid HTML5 document. -->
<title>Blogging on Medium (archive) — David Larlet</title>
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/david/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="David Larlet">
<meta name="application-name" content="David Larlet">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- That good ol' feed, subscribe :p. -->
<link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://medium.com/inside/blogging-on-medium-95f1546bcd7d">

<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* http://practicaltypography.com/equity.html */
/* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
/* https://www.filamentgroup.com/lab/js-web-fonts.html */
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ConcourseT3';
  src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
       url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
body {
  /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  font-family: "EquityTextB", Palatino, serif;
  background-color: #f0f0ea;
  color: #07486c;
  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
pre, code, kbd, samp, var, tt {
  font-family: 'TriplicateT4c', monospace;
}
em {
  font-style: italic;
  color: #323a45;
}
strong {
  font-weight: bold;
  color: black;
}
nav {
  background-color: #323a45;
  color: #f0f0ea;
  display: flex;
  justify-content: space-around;
  padding: 1rem .5rem;
}
  nav:last-child {
    border-bottom: 1vh solid #2d7474;
  }
  nav a {
    color: #f0f0ea;
  }
  nav abbr {
    border-bottom: 1px dotted white;
  }

h1 {
  border-top: 1vh solid #2d7474;
  border-bottom: .2vh dotted #2d7474;
  background-color: #e3e1e1;
  color: #323a45;
  text-align: center;
  padding: 5rem 0 4rem 0;
  width: 100%;
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
}
  h1.single {
    padding-bottom: 10rem;
  }
  h1 span {
    position: absolute;
    top: 1vh;
    left: 20%;
    line-height: 0;
  }
    h1 span a {
      line-height: 1.7;
      padding: 1rem 1.2rem .6rem 1.2rem;
      border-radius: 0 0 6% 6%;
      background: #2d7474;
      font-size: 1.3rem;
      color: white;
      text-decoration: none;
    }
h2 {
  margin: 4rem 0 1rem;
  border-top: .2vh solid #2d7474;
  padding-top: 1vh;
}
h3 {
  text-align: center;
  margin: 3rem 0 .75em;
}
hr {
  height: .4rem;
  width: .4rem;
  border-radius: .4rem;
  background: #07486c;
  margin: 2.5rem auto;
}
time {
  display: bloc;
  margin-left: 0 !important;
}
ul, ol {
  margin: 2rem;
}
ul {
  list-style-type: square;
}
a {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.09em;
}
article {
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
}
  article.single {
    border-top: .2vh dotted #2d7474;
    margin: -6rem auto 1rem auto;
    background: #f0f0ea;
    padding: 2rem;
  }
  article p:last-child {
    margin-bottom: 1rem;
  }
p {
  padding: 0 .5rem;
  margin-left: 3rem;
}
  p + p,
  figure + p {
    margin-top: 2rem;
  }

blockquote {
  background-color: #e3e1e1;
  border-left: .5vw solid #2d7474;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin: 1.5rem;
}
  blockquote cite {
    font-style: italic;
  }
  blockquote p {
    margin-left: 0;
  }

figure {
  border-top: .2vh solid #2d7474;
  background-color: #e3e1e1;
  text-align: center;
  padding: 1.5rem 0;
  margin: 1rem 0 0;
  font-size: 1.5rem;
  width: 100%;
}
  figure img {
    max-width: 250px;
    max-height: 250px;
    border: .5vw solid #323a45;
    padding: 1px;
  }
figcaption {
  padding: 1rem;
  line-height: 1.4;
}
aside {
  display: flex;
  flex-direction: column;
  background-color: #e3e1e1;
  padding: 1rem 0;
  border-bottom: .2vh solid #07486c;
}
  aside p {
    max-width: 50rem;
    margin: 0 auto;
  }

/* https://fvsch.com/code/css-locks/ */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  font-size: 1rem;
  line-height: calc( 1.5em + 0.2 * 1rem );
}
h1 {
  font-size: 1.9rem;
  line-height: calc( 1.2em + 0.2 * 1rem );
}
h2 {
  font-size: 1.6rem;
  line-height: calc( 1.3em + 0.2 * 1rem );
}
h3 {
  font-size: 1.35rem;
  line-height: calc( 1.4em + 0.2 * 1rem );
}
@media (min-width: 20em) {
  /* The (100vw - 20rem) / (50 - 20) part
     resolves to 0-1rem, depending on the
     viewport width (between 20em and 50em). */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
    margin-left: 0;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
}
@media (min-width: 50em) {
  /* The right part of the addition *must* be a
     rem value. In this example we *could* change
     the whole declaration to font-size:2.5rem,
     but if our baseline value was not expressed
     in rem we would have to use calc. */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * 1rem );
    line-height: 1.5em;
  }
  p, li, pre, details {
    margin-left: 3rem;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * 1rem );
    line-height: 1.2em;
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * 1rem );
    line-height: 1.3em;
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * 1rem );
    line-height: 1.4em;
  }
  figure img {
    max-width: 500px;
    max-height: 500px;
  }
}

figure.unsquared {
  margin-bottom: 1.5rem;
}
  figure.unsquared img {
    height: inherit;
  }


@media print {
  body { font-size: 100%; }
  a:after { content: " (" attr(href) ")"; }
  a, a:link, a:visited, a:after {
    text-decoration: underline;
    text-shadow: none !important;
    background-image: none !important;
    background: white;
    color: black;
  }
  abbr[title] { border-bottom: 0; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  img { page-break-inside: avoid; }
  @page { margin: 2cm .5cm; }
  h1, h2, h3 { page-break-after: avoid; }
  p3 { orphans: 3; widows: 3; }
  img {
    max-width: 250px !important;
    max-height: 250px !important;
  }
  nav, aside { display: none; }
}

ul.with_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_columns {
    column-count: 2;
  }
}
@media (min-width: 50em) {
  ul.with_columns {
    column-count: 3;
  }
}
ul.with_two_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_two_columns {
    column-count: 1;
  }
}
@media (min-width: 50em) {
  ul.with_two_columns {
    column-count: 2;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
  .gallery figure img {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .gallery figure figcaption {
    font-family: 'ConcourseT3'
  }

footer {
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
  border-top: 3px solid white;
  padding: 4rem 0;
  background-color: #07486c;
  color: white;
}
  footer > * {
    max-width: 50rem;
    margin: 0 auto;
  }
  footer a {
    color: #f1c40f;
  }
  footer .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
    margin-right: 2rem;
    padding: 2px 5px 5px 2px;
    background: white;
    border-left: 1px solid #f1c40f;
    border-top: 1px solid #f1c40f;
    border-right: 5px solid #f1c40f;
    border-bottom: 5px solid #f1c40f;
  }
</style>

<h1>
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  Blogging on Medium (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="https://medium.com/inside/blogging-on-medium-95f1546bcd7d">Source originale du contenu</a></h3>
    <p name="2bea" id="2bea" class="graf--p graf--first"><em class="markup--em markup--p-em">I’m an advisor to Medium and stepped in to run one of the product teams for a brief stint last year. On October 16, Ev sent me the following direct message on Twitter:</em></p>

<figure name="f25f" id="f25f" class="graf--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 236px;"><div class="aspect-ratio-fill"></div><img class="graf-image" data-image-id="1*1ZzVjUOGGww2I5FYal-TSQ.jpeg" data-width="2316" data-height="780" data-action="zoom" data-action-value="1*1ZzVjUOGGww2I5FYal-TSQ.jpeg" src="https://medium2.global.ssl.fastly.net/max/960/1*1ZzVjUOGGww2I5FYal-TSQ.jpeg"></div><figcaption class="imageCaption">This touched on something that had been bothering Ev for a while: <a href="https://medium.com/inside/casual-content-613b6ce4c2cc" data-href="https://medium.com/inside/casual-content-613b6ce4c2cc" class="markup--anchor markup--figure-anchor" rel="nofollow">https://medium.com/inside/casual-content-613b6ce4c2cc</a></figcaption></figure>

<p name="8e3e" id="8e3e" class="graf--p graf--last"><em class="markup--em markup--p-em">On October 30, 2014, I published this internally for Medium employees. It kicked off an effort to build “bloggy Medium,” the first part of which </em><a href="https://medium.com/the-story/a-less-long-more-connected-medium-c345db2d6a56" data-href="https://medium.com/the-story/a-less-long-more-connected-medium-c345db2d6a56" class="markup--anchor markup--p-anchor"><em class="markup--em markup--p-em">launched yesterday</em></a><em class="markup--em markup--p-em">. (</em><a href="https://medium.com/inside/hatching-inside-medium-5ae60292d655" data-href="https://medium.com/inside/hatching-inside-medium-5ae60292d655" class="markup--anchor markup--p-anchor"><em class="markup--em markup--p-em">More context on Inside Medium</em></a><em class="markup--em markup--p-em">.)</em></p>

<p></div></div></section><section name="bea6" class=" section--body"><div class="section-divider layoutSingleColumn"><hr class="section-divider"></div><div class="section-content"><div class="section-inner layoutSingleColumn"><h3 name="0123" id="0123" class="graf--h3 graf--first">Blogging on Medium</h3><p name="f062" id="f062" class="graf--p"><em class="markup--em markup--p-em">tl;dr: you can’t do it today. and i think you should be able to.</em></p><p name="a324" id="a324" class="graf--p"><strong class="markup--strong markup--p-strong">Hi. My name is Michael, and I’m a blogger. </strong>I’ve been blogging since before we called it that, putting words and links (and words about links) online for almost 20 years. Blogging is how I fell in love with the web, it’s how I met a bunch of my friends, it’s how I express myself, and it’s big part of how I connect and engage with the world.</p><p name="a18a" id="a18a" class="graf--p">There are a bunch of us, many many millions for sure. Writing about tech and politics and movies and music and crafting and family and religion and Star Trek. And I’d make the longview argument that what’s happening on Twitter and Facebook is just more blogging. Back when there were only a few dozen of us doing this, the notion that a billion+ people would every day use the web to update the(ir) world with what’s happening in their lives or what’s on their mind was mindblowing. And now it’s real.</p><p name="9cb8" id="9cb8" class="graf--p graf--last">So hi. I’m a blogger. And I’m not alone.</p></div></div></section><section name="376d" class=" section--body"><div class="section-divider layoutSingleColumn"><hr class="section-divider"></div><div class="section-content"><div class="section-inner layoutSingleColumn"><p name="a67b" id="a67b" class="graf--p graf--first">In the early adopter tech media echo chamber, there’s a little bit of a “blog renaissance” going on right now. (Which I’m enjoying, even though blogs never really went anywhere.) One of the sparks was Lockhart Steele’s post on The Verge back in August, “<a href="http://www.theverge.com/2014/8/20/6049259/the-future-of-blogging" data-href="http://www.theverge.com/2014/8/20/6049259/the-future-of-blogging" class="markup--anchor markup--p-anchor" rel="nofollow">The retro-futuristic future of blogging</a>,” timed with his reviving his <a href="http://lockhartsteele.com/blog/2014/08/back-to-the-blog/" data-href="http://lockhartsteele.com/blog/2014/08/back-to-the-blog/" class="markup--anchor markup--p-anchor" rel="nofollow">own blog</a>. I loved this line:</p><blockquote name="5917" id="5917" class="graf--blockquote">at a time where #longform is a hashtag known to all, perhaps it’s time for #blogging to reclaim its seat at the table, too</blockquote><p name="036d" id="036d" class="graf--p">While the people that never left just <a href="http://kottke.org/14/08/blogging" data-href="http://kottke.org/14/08/blogging" class="markup--anchor markup--p-anchor" rel="nofollow">shake their heads</a>, a <a href="http://tilde.club/~goldman" data-href="http://tilde.club/~goldman" class="markup--anchor markup--p-anchor" rel="nofollow">few</a> <a href="http://tilde.club/~mathowie/" data-href="http://tilde.club/~mathowie/" class="markup--anchor markup--p-anchor" rel="nofollow">of</a> <a href="http://tilde.club/~sippey" data-href="http://tilde.club/~sippey" class="markup--anchor markup--p-anchor" rel="nofollow">us</a> have come back to the table, using Wordpress, Tumblr, Medium or even a weird, retro <a href="http://tilde.club/" data-href="http://tilde.club/" class="markup--anchor markup--p-anchor" rel="nofollow">command-line</a> thing-a-ma-jig. Andy Baio, a contributor to The Message, is now blogging regularly again at <a href="http://waxy.org/" data-href="http://waxy.org/" class="markup--anchor markup--p-anchor" rel="nofollow">Waxy.org</a>, and he explained why in his (short) post <a href="http://waxy.org/2014/10/middling/" data-href="http://waxy.org/2014/10/middling/" class="markup--anchor markup--p-anchor" rel="nofollow">Middling</a>. I’ll quote from it, and it’s important, so I’ll make it big:</p><blockquote name="0e79" id="0e79" class="graf--pullquote pullquote">Twitter’s for 140-character short-form writing and Medium’s for long-form.</blockquote><p name="568b" id="568b" class="graf--p"><strong class="markup--strong markup--p-strong">I think this positioning is dangerous for Medium.</strong> It positions the product (and the company) as being about one type of story, and closes us off to different types of writing. And while I truly believe that Medium is the best place to write long-form stories on the Internet, I don’t think that’s enough.</p><p name="9cfb" id="9cfb" class="graf--p graf--last"><strong class="markup--strong markup--p-strong">Medium should be the best place to share stories on the Internet, regardless of length.</strong></p></div></div></section><section name="112f" class=" section--body"><div class="section-divider layoutSingleColumn"><hr class="section-divider"></div><div class="section-content"><div class="section-inner layoutSingleColumn"><p name="76e4" id="76e4" class="graf--p graf--first">I’ve been trying to blog on Medium the past couple of months in <a href="http://medium.com/stating-the-obvious" data-href="http://medium.com/stating-the-obvious" class="markup--anchor markup--p-anchor">Stating the Obvious</a>. And while I’ve loved <em class="markup--em markup--p-em">writing</em> the weekly filtered pieces, it really hasn’t felt like blogging. I couldn’t put my finger on why until Anil Dash posted a thing on dashes.com about the <a href="http://dashes.com/anil/2014/09/15-lessons-from-15-years-of-blogging.html" data-href="http://dashes.com/anil/2014/09/15-lessons-from-15-years-of-blogging.html" class="markup--anchor markup--p-anchor" rel="nofollow">15 lessons he’s learned from 15 years of blogging</a>. Here’s the one lesson that stuck with me:</p><blockquote name="7983" id="7983" class="graf--blockquote"><strong class="markup--strong markup--blockquote-strong">The scroll is your friend. </strong>If you write a bad post or something you don’t like, just post again. If you write something great that you’re really proud of and nobody notices, just post again. One foot in front of the other, one word after another, is the only path I’ve found to an overall body of work that I’m proud of. Push posts down the page, and the good and the bad will just scroll away.</blockquote><p name="7900" id="7900" class="graf--p">I’ve been blogging for a long time (and even ran product at a blogging company for a long time) and have read God knows how many blog posts (and books!) about blogging. And frankly this is the most profound thing I’ve ever read about blogging. Because not only is it about the process (just post again) it’s about the <em class="markup--em markup--p-em">outcome</em> of that process. And the outcome of that process is the stream.</p><blockquote name="87cc" id="87cc" class="graf--pullquote pullquote"><strong class="markup--strong markup--pullquote-strong"><em class="markup--em markup--pullquote-em">The fundamental unit of the blog is not the blog post. The fundamental unit of the blog is the </em>stream<em class="markup--em markup--pullquote-em">.</em></strong></blockquote><p name="3222" id="3222" class="graf--p graf--last">And <em class="markup--em markup--p-em">this</em> is why blogging on Medium has felt unnatural. Despite the kick-ass world-class editor, the simple distribution model, the fantastic emails that give me kudos; despite recommends and notes and stats; despite knowing that my stories will look great on desktop and mobile, it’s not blogging. And that’s because I’m not building a stream, there’s nothing to push down. While I’m building a corpus of standalone stories, there’s no way to read them together and have that <em class="markup--em markup--p-em">stream</em> tell a story.</p></div></div></section><section name="433c" class=" section--body"><div class="section-divider layoutSingleColumn"><hr class="section-divider"></div><div class="section-content"><div class="section-inner layoutSingleColumn"><p name="7886" id="7886" class="graf--p graf--first">So we started to brainstorm a bit about what blogging on Medium would look like, and how we could support both #longform and #shortform in one platform. And while publications could be great group blogs (and there are great use cases for shorter form in a publication context, see below), we started at the simplest place: the user profile.</p><figure name="b8de" id="b8de" class="graf--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 1250px;"><div class="aspect-ratio-fill"></div><img class="graf-image" data-image-id="1*-WhHEIYNclJIXl4qk0M9IA.png" data-width="700" data-height="1250" src="https://medium2.global.ssl.fastly.net/max/960/1*-WhHEIYNclJIXl4qk0M9IA.png"></div></figure><p name="3b55" id="3b55" class="graf--p"><strong class="markup--strong markup--p-strong">What’s in this?</strong></p><ul class="postList"><li name="9768" id="9768" class="graf--li">Reverse chron stream of writing and recommending activity. Infinite scroll.</li><li name="638f" id="638f" class="graf--li">Short posts (things that are &lt; 1 min read time or some short word count) are displayed inline, right there! If you can read it inline, you can recommend it inline. May or may not contain a title, may or may not contain an image</li><li name="9868" id="9868" class="graf--li">Longer posts are displayed like an inline bento listing, with social proof of recommends that they’ve received.</li><li name="8c66" id="8c66" class="graf--li">Recommend actions displayed inline. They’re 1-by-1 in this mock, but you can imagine coalescing them if need be.</li><li name="be8c" id="be8c" class="graf--li">Sidebar with profile lockup (following / follower count), and, if the writer is part of a publication, what they edit and what they contribute to.</li></ul><p name="78eb" id="78eb" class="graf--p">Then we started thinking about how you’d actually write shorter stuff. (This is related to the post a few weeks ago on a minimum viable editor.)What if there were a “Write” button directly on your profile, and instead of opening a new window, it just pushed down your content and opened up an editor right there?</p><figure name="c978" id="c978" class="graf--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 589px;"><div class="aspect-ratio-fill"></div><img class="graf-image" data-image-id="1*qSPK8Px0Kfc1g2gtrcucwQ.png" data-width="1400" data-height="1178" data-action="zoom" data-action-value="1*qSPK8Px0Kfc1g2gtrcucwQ.png" src="https://medium2.global.ssl.fastly.net/max/960/1*qSPK8Px0Kfc1g2gtrcucwQ.png"></div></figure><p name="9666" id="9666" class="graf--p graf--last">The mechanics here aren’t figured out (obviously), but you can imagine an option where you can explicitly “write a longer story” or after you’ve written a certain number of words the editor expands to fill the entire screen and you have access to the full suite of tools. If you write in the full editor, your story is displayed as a bento-style listing. If you write inline, it’s displayed inline.</p></div></div></section><section name="4e6e" class=" section--body"><div class="section-divider layoutSingleColumn"><hr class="section-divider"></div><div class="section-content"><div class="section-inner layoutSingleColumn"><p name="bb41" id="bb41" class="graf--p graf--first">There are a bunch of additional problems to solve / opportunities to address with short form:</p><ul class="postList"><li name="7e5c" id="7e5c" class="graf--li">How could publications take advantage of this? Magazines have front of the book / back of the book content as well as features — publications should, too!</li><li name="f4da" id="f4da" class="graf--li">How can we make the “permalink pages” for the short form posts really compelling? If you visit a Tumblr permalink page today that only has an animated gif or a quote or a link, they’re reaaaaally lame. How could we drop a user into the context of a stream when they’re coming from a link shared on Facebook, Twitter or email?</li><li name="aedb" id="aedb" class="graf--li">How could we integrate responses into this model? I think responses are a GREAT addition to Medium; is there an interesting way to have them feel natural as part of a stream?</li></ul><p name="3976" id="3976" class="graf--p">And there are real tensions…</p><ul class="postList"><li name="b077" id="b077" class="graf--li">Everything social on the Internet is trending towards this reverse chron model, with social feedback loops and notifications… While there really isn’t a product like this out on the Internet today (Facebook isn’t it, Twitter isn’t it, Tumblr is sort of it, but has two faces) is it <em class="markup--em markup--li-em">too much like everything else?</em></li><li name="1517" id="1517" class="graf--li graf--last">███████████████████████████?</li></ul></div></div></section><section name="3d8d" class=" section--body section--last"><div class="section-divider layoutSingleColumn"><hr class="section-divider"></div><div class="section-content"><div class="section-inner layoutSingleColumn"><p name="0f09" id="0f09" class="graf--p graf--first">So here’s what we’re going to do: <strong class="markup--strong markup--p-strong">prototype</strong>. On the product development side, we’re going to prototype a version of the profile page with this type of stream on it. Just to see how it feels, and if this is something that we think would work in the current product.</p><p name="451d" id="451d" class="graf--p">As a team we’d love to hear your feedback on this, especially these questions:</p><ol class="postList"><li name="04c5" id="04c5" class="graf--li">Is this a valuable problem for us to solve?</li><li name="84ea" id="84ea" class="graf--li">If you’re a publication editor on Medium, how would you use short form content, and would a “stream” be a useful thing to integrate?</li><li name="5a4d" id="5a4d" class="graf--li">How do we build a “stream” without becoming just like everything else on the Internet?</li></ol>
</div></div></section></p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://medium.com/inside/blogging-on-medium-95f1546bcd7d">Source originale</a> |
    <a href="/david/stream/2019/">Accueil du flux</a>
  </p>
</nav>

<footer>
  <div>
    <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
    <p>
      Bonjour/Hi!
      Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
      Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
    </p>
    <p>
      Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
    </p>
    
    <p>
      Voici quelques articles choisis :
      <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
      <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
      <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
      <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
      <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
      <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
      <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
      <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
      <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
      <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
      <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
      <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
      <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
      <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
      <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
      et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
    </p>
    <p>
      On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
    </p>
    <p>
      Je ne traque pas ta navigation mais mon
      <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
      conserve des logs d’accès.
    </p>
  </div>
</footer>
<script type="text/javascript">
  ;(_ => {
    const jumper = document.getElementById('jumper')
    jumper.addEventListener('click', e => {
      e.preventDefault()
      const anchor = e.target.getAttribute('href')
      const targetEl = document.getElementById(anchor.substring(1))
      targetEl.scrollIntoView({behavior: 'smooth'})
    })
  })()
</script>