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

4 yıl önce
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691
  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,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>All My Blogs Are Dead (archive) — David Larlet</title>
  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
  17. <link rel="manifest" href="/manifest.json">
  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">
  20. <meta name="apple-mobile-web-app-title" content="David Larlet">
  21. <meta name="application-name" content="David Larlet">
  22. <meta name="msapplication-TileColor" content="#da532c">
  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
  24. <meta name="theme-color" content="#f0f0ea">
  25. <!-- That good ol' feed, subscribe :p. -->
  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">
  27. <meta name="robots" content="noindex, nofollow">
  28. <meta content="origin-when-cross-origin" name="referrer">
  29. <!-- Canonical URL for SEO purposes -->
  30. <link rel="canonical" href="http://www.theawl.com/2015/02/all-my-blogs-are-dead">
  31. <style>
  32. /* http://meyerweb.com/eric/tools/css/reset/ */
  33. html, body, div, span,
  34. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  35. a, abbr, address, big, cite, code,
  36. del, dfn, em, img, ins,
  37. small, strike, strong, tt, var,
  38. dl, dt, dd, ol, ul, li,
  39. fieldset, form, label, legend,
  40. table, caption, tbody, tfoot, thead, tr, th, td,
  41. article, aside, canvas, details, embed,
  42. figure, figcaption, footer, header, hgroup,
  43. menu, nav, output, ruby, section, summary,
  44. time, mark, audio, video {
  45. margin: 0;
  46. padding: 0;
  47. border: 0;
  48. font-size: 100%;
  49. font: inherit;
  50. vertical-align: baseline;
  51. }
  52. /* HTML5 display-role reset for older browsers */
  53. article, aside, details, figcaption, figure,
  54. footer, header, hgroup, menu, nav, section { display: block; }
  55. body { line-height: 1; }
  56. blockquote, q { quotes: none; }
  57. blockquote:before, blockquote:after,
  58. q:before, q:after {
  59. content: '';
  60. content: none;
  61. }
  62. table {
  63. border-collapse: collapse;
  64. border-spacing: 0;
  65. }
  66. /* http://practicaltypography.com/equity.html */
  67. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  68. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  69. @font-face {
  70. font-family: 'EquityTextB';
  71. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  72. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  73. font-weight: 300;
  74. font-style: normal;
  75. font-display: swap;
  76. }
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: italic;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  89. font-weight: 700;
  90. font-style: normal;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'ConcourseT3';
  95. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  96. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  97. font-weight: 300;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  102. body {
  103. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  104. font-family: "EquityTextB", Palatino, serif;
  105. background-color: #f0f0ea;
  106. color: #07486c;
  107. font-kerning: normal;
  108. -moz-osx-font-smoothing: grayscale;
  109. -webkit-font-smoothing: subpixel-antialiased;
  110. text-rendering: optimizeLegibility;
  111. font-variant-ligatures: common-ligatures contextual;
  112. font-feature-settings: "kern", "liga", "clig", "calt";
  113. }
  114. pre, code, kbd, samp, var, tt {
  115. font-family: 'TriplicateT4c', monospace;
  116. }
  117. em {
  118. font-style: italic;
  119. color: #323a45;
  120. }
  121. strong {
  122. font-weight: bold;
  123. color: black;
  124. }
  125. nav {
  126. background-color: #323a45;
  127. color: #f0f0ea;
  128. display: flex;
  129. justify-content: space-around;
  130. padding: 1rem .5rem;
  131. }
  132. nav:last-child {
  133. border-bottom: 1vh solid #2d7474;
  134. }
  135. nav a {
  136. color: #f0f0ea;
  137. }
  138. nav abbr {
  139. border-bottom: 1px dotted white;
  140. }
  141. h1 {
  142. border-top: 1vh solid #2d7474;
  143. border-bottom: .2vh dotted #2d7474;
  144. background-color: #e3e1e1;
  145. color: #323a45;
  146. text-align: center;
  147. padding: 5rem 0 4rem 0;
  148. width: 100%;
  149. font-family: 'ConcourseT3';
  150. display: flex;
  151. flex-direction: column;
  152. }
  153. h1.single {
  154. padding-bottom: 10rem;
  155. }
  156. h1 span {
  157. position: absolute;
  158. top: 1vh;
  159. left: 20%;
  160. line-height: 0;
  161. }
  162. h1 span a {
  163. line-height: 1.7;
  164. padding: 1rem 1.2rem .6rem 1.2rem;
  165. border-radius: 0 0 6% 6%;
  166. background: #2d7474;
  167. font-size: 1.3rem;
  168. color: white;
  169. text-decoration: none;
  170. }
  171. h2 {
  172. margin: 4rem 0 1rem;
  173. border-top: .2vh solid #2d7474;
  174. padding-top: 1vh;
  175. }
  176. h3 {
  177. text-align: center;
  178. margin: 3rem 0 .75em;
  179. }
  180. hr {
  181. height: .4rem;
  182. width: .4rem;
  183. border-radius: .4rem;
  184. background: #07486c;
  185. margin: 2.5rem auto;
  186. }
  187. time {
  188. display: bloc;
  189. margin-left: 0 !important;
  190. }
  191. ul, ol {
  192. margin: 2rem;
  193. }
  194. ul {
  195. list-style-type: square;
  196. }
  197. a {
  198. text-decoration-skip-ink: auto;
  199. text-decoration-thickness: 0.05em;
  200. text-underline-offset: 0.09em;
  201. }
  202. article {
  203. max-width: 50rem;
  204. display: flex;
  205. flex-direction: column;
  206. margin: 2rem auto;
  207. }
  208. article.single {
  209. border-top: .2vh dotted #2d7474;
  210. margin: -6rem auto 1rem auto;
  211. background: #f0f0ea;
  212. padding: 2rem;
  213. }
  214. article p:last-child {
  215. margin-bottom: 1rem;
  216. }
  217. p {
  218. padding: 0 .5rem;
  219. margin-left: 3rem;
  220. }
  221. p + p,
  222. figure + p {
  223. margin-top: 2rem;
  224. }
  225. blockquote {
  226. background-color: #e3e1e1;
  227. border-left: .5vw solid #2d7474;
  228. display: flex;
  229. flex-direction: column;
  230. align-items: center;
  231. padding: 1rem;
  232. margin: 1.5rem;
  233. }
  234. blockquote cite {
  235. font-style: italic;
  236. }
  237. blockquote p {
  238. margin-left: 0;
  239. }
  240. figure {
  241. border-top: .2vh solid #2d7474;
  242. background-color: #e3e1e1;
  243. text-align: center;
  244. padding: 1.5rem 0;
  245. margin: 1rem 0 0;
  246. font-size: 1.5rem;
  247. width: 100%;
  248. }
  249. figure img {
  250. max-width: 250px;
  251. max-height: 250px;
  252. border: .5vw solid #323a45;
  253. padding: 1px;
  254. }
  255. figcaption {
  256. padding: 1rem;
  257. line-height: 1.4;
  258. }
  259. aside {
  260. display: flex;
  261. flex-direction: column;
  262. background-color: #e3e1e1;
  263. padding: 1rem 0;
  264. border-bottom: .2vh solid #07486c;
  265. }
  266. aside p {
  267. max-width: 50rem;
  268. margin: 0 auto;
  269. }
  270. /* https://fvsch.com/code/css-locks/ */
  271. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  272. font-size: 1rem;
  273. line-height: calc( 1.5em + 0.2 * 1rem );
  274. }
  275. h1 {
  276. font-size: 1.9rem;
  277. line-height: calc( 1.2em + 0.2 * 1rem );
  278. }
  279. h2 {
  280. font-size: 1.6rem;
  281. line-height: calc( 1.3em + 0.2 * 1rem );
  282. }
  283. h3 {
  284. font-size: 1.35rem;
  285. line-height: calc( 1.4em + 0.2 * 1rem );
  286. }
  287. @media (min-width: 20em) {
  288. /* The (100vw - 20rem) / (50 - 20) part
  289. resolves to 0-1rem, depending on the
  290. viewport width (between 20em and 50em). */
  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  292. font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
  293. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  294. margin-left: 0;
  295. }
  296. h1 {
  297. font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  298. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  299. }
  300. h2 {
  301. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  302. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  303. }
  304. h3 {
  305. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  306. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  307. }
  308. }
  309. @media (min-width: 50em) {
  310. /* The right part of the addition *must* be a
  311. rem value. In this example we *could* change
  312. the whole declaration to font-size:2.5rem,
  313. but if our baseline value was not expressed
  314. in rem we would have to use calc. */
  315. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  316. font-size: calc( 1rem + .6 * 1rem );
  317. line-height: 1.5em;
  318. }
  319. p, li, pre, details {
  320. margin-left: 3rem;
  321. }
  322. h1 {
  323. font-size: calc( 1.9rem + 1.5 * 1rem );
  324. line-height: 1.2em;
  325. }
  326. h2 {
  327. font-size: calc( 1.5rem + 1.5 * 1rem );
  328. line-height: 1.3em;
  329. }
  330. h3 {
  331. font-size: calc( 1.35rem + 1.5 * 1rem );
  332. line-height: 1.4em;
  333. }
  334. figure img {
  335. max-width: 500px;
  336. max-height: 500px;
  337. }
  338. }
  339. figure.unsquared {
  340. margin-bottom: 1.5rem;
  341. }
  342. figure.unsquared img {
  343. height: inherit;
  344. }
  345. @media print {
  346. body { font-size: 100%; }
  347. a:after { content: " (" attr(href) ")"; }
  348. a, a:link, a:visited, a:after {
  349. text-decoration: underline;
  350. text-shadow: none !important;
  351. background-image: none !important;
  352. background: white;
  353. color: black;
  354. }
  355. abbr[title] { border-bottom: 0; }
  356. abbr[title]:after { content: " (" attr(title) ")"; }
  357. img { page-break-inside: avoid; }
  358. @page { margin: 2cm .5cm; }
  359. h1, h2, h3 { page-break-after: avoid; }
  360. p3 { orphans: 3; widows: 3; }
  361. img {
  362. max-width: 250px !important;
  363. max-height: 250px !important;
  364. }
  365. nav, aside { display: none; }
  366. }
  367. ul.with_columns {
  368. column-count: 1;
  369. }
  370. @media (min-width: 20em) {
  371. ul.with_columns {
  372. column-count: 2;
  373. }
  374. }
  375. @media (min-width: 50em) {
  376. ul.with_columns {
  377. column-count: 3;
  378. }
  379. }
  380. ul.with_two_columns {
  381. column-count: 1;
  382. }
  383. @media (min-width: 20em) {
  384. ul.with_two_columns {
  385. column-count: 1;
  386. }
  387. }
  388. @media (min-width: 50em) {
  389. ul.with_two_columns {
  390. column-count: 2;
  391. }
  392. }
  393. .gallery {
  394. display: flex;
  395. flex-wrap: wrap;
  396. justify-content: space-around;
  397. }
  398. .gallery figure img {
  399. margin-left: 1rem;
  400. margin-right: 1rem;
  401. }
  402. .gallery figure figcaption {
  403. font-family: 'ConcourseT3'
  404. }
  405. footer {
  406. font-family: 'ConcourseT3';
  407. display: flex;
  408. flex-direction: column;
  409. border-top: 3px solid white;
  410. padding: 4rem 0;
  411. background-color: #07486c;
  412. color: white;
  413. }
  414. footer > * {
  415. max-width: 50rem;
  416. margin: 0 auto;
  417. }
  418. footer a {
  419. color: #f1c40f;
  420. }
  421. footer .avatar {
  422. width: 200px;
  423. height: 200px;
  424. border-radius: 50%;
  425. float: left;
  426. -webkit-shape-outside: circle();
  427. shape-outside: circle();
  428. margin-right: 2rem;
  429. padding: 2px 5px 5px 2px;
  430. background: white;
  431. border-left: 1px solid #f1c40f;
  432. border-top: 1px solid #f1c40f;
  433. border-right: 5px solid #f1c40f;
  434. border-bottom: 5px solid #f1c40f;
  435. }
  436. </style>
  437. <h1>
  438. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  439. All My Blogs Are Dead (archive)
  440. <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
  441. </h1>
  442. <section>
  443. <article>
  444. <h3><a href="http://www.theawl.com/2015/02/all-my-blogs-are-dead">Source originale du contenu</a></h3>
  445. <p>A couple of months ago, I pitched a feature on the music
  446. industry that I was totally qualified to write. But the editor
  447. questioned my experience: What exactly had I published about the
  448. music industry? By my count, over two thousand blogposts since
  449. 2009. But the links to my author pages bounced back because the
  450. websites had disappeared. Five of years work apparently evaporated
  451. from server racks somewhere in New Jersey, as if I had never
  452. written anything at all. Come to think of it, had I?</p>
  453. <p>Despite the pervasive assumption that everything online lasts
  454. forever, the internet is inherently unstable. Jill Lepore’s
  455. <a href="http://www.newyorker.com/magazine/2015/01/26/cobweb">recent
  456. <i>New Yorker</i> story</a> on archive.org’s Wayback Machine notes
  457. the average lifespan of a website is “about a hundred days.” Sites
  458. vanish with no explanation, or get overwritten without any
  459. traceable history. Media outlets, even those with salaried
  460. employees and editorial budgets can and do suffer the same
  461. fate.</p>
  462. <p>When a website dies, it’s usually the editorial that goes first:
  463. writers, both freelance and staff, then editors. Marketing and ad
  464. sales go next. Unlike print, where archive editions get filed away
  465. or become recycling, a website can be scrubbed out of existence
  466. because a company pulls it down or simply stops paying for hosting
  467. or domain rights. <i>Modern Farmer</i> went from National Magazine
  468. Award to pasture in a year. (Despite some <a href="http://www.capitalnewyork.com/article/media/2015/01/8561264/emmodern-farmerem-lives">
  469. assurances</a> it will still be around, check back in six months.)
  470. Hipster Runoff owner Carles, rather than pull his dormant site
  471. down, just <a href="https://flippa.com/3477214-famous-niche-hipster-pr-5-site-w-168-648-uniques-mo-making-1-300-mo-w-no-work">
  472. sold it</a> to an Australian investor for over twenty thousand
  473. dollars. Remember The Daily? <a href="http://thedaily.com/">The
  474. internet doesn’t</a>.</p>
  475. <p>Most of the media outlets I’ve written for have folded and then
  476. were flat-out deleted. In 2009, I had started blogging for AOL
  477. Music’s Spinner and The BoomBox, averaging three posts per day
  478. about indie rock and hip-hop. By 2010, I was writing approximately
  479. two print features and twenty blogposts per month on local music
  480. acts for New York <i>Press</i>. After that, in 2011, I joined the
  481. boutique MP3 blog RCRD LBL as the site’s lead editor/writer,
  482. publishing five posts per day. None of these outlets exist in 2014
  483. beyond stray citations, rotten links and Facebook apparitions.</p>
  484. <p>
  485. <span id="more-208257"/>
  486. </p>
  487. <p>Freelance writing for AOL Music in 2009 felt like a con. For two
  488. hundred words of music blogging, I earned fifty dollars per post.
  489. It was my only job, even though I was self-employed. I pitched my
  490. posts at Spinner, AOL Music’s rock and indie vertical, and The
  491. BoomBox; interviewed Ghostface a few times; and earned a relatively
  492. decent living without ever going to the office. In February 2011,
  493. AOL purchased The Huffington Post, which already had its own
  494. successful music section. Budgets were slashed and, in April,
  495. almost every <a href="http://www.theawl.com/2011/04/im-permalance-no-more-%25E2%2580%259Cthank-you-very-much-for-your-contributions-to-aol%25E2%2580%259D">
  496. permalancer writing for AOL Music</a>, including myself, was laid
  497. off and replaced by in-house editors who were tasked with
  498. publishing five to ten stories per day. The salaried model, despite
  499. hitting twenty-five million monthly visitors in 2012 and apparently
  500. costing less than paying dozens of freelancers on a per-post basis,
  501. did not generate enough ad revenue, and a 2013 hiring freeze
  502. foreshadowed the ultimate closure of all AOL Music properties on
  503. April 26, 2013. Spinner was its most-read music blog. But after
  504. shuttering AOL Music, the site, which averaged six million monthly
  505. visitors, was deleted entirely in August 2013. Spinner.com now
  506. redirects you to an AOL Radio homepage that won’t even load in my
  507. browser. And its Twitter account had been silent for so long enough
  508. that, in 2014, it was reset and claimed by a Japanese person named
  509. Sora, who has six followers.</p>
  510. <p>When I talked to Dan Reilly, former editor of Spinner, about the
  511. disappearance, he told me, “I assume that Spinner’s archives exist
  512. somewhere, but they’re definitely not readily accessible online
  513. anymore. AOL never gave us any explanation, but it seems obvious
  514. that they wanted to wash away any trace of AOL Music and promote
  515. AOL Radio instead. I’m not sure what the pros and cons are, but
  516. it’s definitely a shame that all that content is lost, even just
  517. for reference purposes. There have been times when I’ve needed to
  518. find a quote or information from one of our pieces, but they’re
  519. just not there anymore. “AOL continues to” <a href="http://www.theverge.com/2015/1/30/7949485/aol-shutting-down-tuaw-apple">simplify
  520. its portfolio of brands</a>. “Tomorrow, it will shut down both
  521. TUAW, the well-known Apple site and Joystiq, its pioneering
  522. videogame blog. For now, the company says it will archive the sites
  523. as channels under its Engadget umbrella” one of AOL’s few remaining
  524. flagship properties, but arguably its most precarious.</p>
  525. <p>As my AOL income evaporated in early 2011, I focused on
  526. freelance work for New York <i>Press</i>, which, in turn, suffered
  527. the fate of most alt-weeklies: Shrinking ad revenue lead to a
  528. smaller paper with smaller budgets and eventually, total collapse.
  529. With no meaningful online footprint, Manhattan Media, its
  530. publisher, had started focusing on growing its under-read blogs.
  531. I’d been writing sporadic music features for the paper since 2008,
  532. but this new online focus earned me and a few freelance writers
  533. promotions to associate editors and a weekly paycheck of a hundred
  534. dollars. I interviewed local bands and wrote about homophobia in
  535. rap. In July 2011, my longtime editor took a better job and they
  536. stopped paying me for months. Six weeks later, a new
  537. twenty-two-year-old “executive” was hired. She offered me a hundred
  538. dollars per month for the same amount of work.</p>
  539. <p>The paper, whose circulation peaked at a hundred thousand in
  540. 2006, published its last edition in September 2011 to a circulation
  541. just twenty thousand. That’s when I quit. The online archive stayed
  542. up until a redesign went live in February 2012. Developers must
  543. have forgotten about the blogs, as all of New York <i>Press</i>’s
  544. online articles disappeared and large swaths of the paper’s history
  545. either got lost or were migrated into the new CMS with broken copy
  546. and unreadable line breaks. Somehow, in January 2013, Nypress.com
  547. was sold to Straus News. The URL now redirects to Straus’s
  548. community newspaper site, which has nothing to do with the storied
  549. alt-weekly besides owning its domain name. The music blog, along
  550. with over three hundred posts from my nine months on the job, is
  551. offline.</p>
  552. <p>In June 2011, as I sensed the New York <i>Press</i> was
  553. crashing, RCRD LBL offered me a full-time editor position
  554. publishing blog posts that featured MP3 downloads and a few
  555. sentences of copy. I was tasked with leading a staff of four
  556. freelance writers. RCRD LBL—and MP3 blogs generally—began
  557. shriveling that same year as fans transitioned from downloading
  558. tracks to streaming them. Why deal with downloading and managing
  559. files when you can just click a link to play nearly any song in
  560. existence? Why bother wading through wordy recommendations from a
  561. dude who secretly just wants to listen to Pavement all day when
  562. your real friends constantly share music you actually like on
  563. Spotify and Soundcloud? With operating costs around three hundred
  564. thousand dollars per year on top of hosting for fifty thousand
  565. songs, RCRD LBL’s business model quickly became untenable. In
  566. September 2012, freelance budgets were cut, and in October, the
  567. entire staff, other than me, was laid off. I reduced the posting
  568. schedule to one piece per day, and revenue from the site’s ad
  569. network, SpinMedia, flatlined.</p>
  570. <p>On May 14, 2013, I published an interview with Austin, TX
  571. haze-rock trio Pure X and an MP3 by French post-punkers Le Femme,
  572. knowing those would be the blog’s final posts. They stayed at the
  573. top of the site for five months. Even though I felt an obligation
  574. to the readers, funding had dried up, so I just stopped. Hardly
  575. anyone noticed until October 2013, when the entire six-year
  576. archive, including my roughly eleven hundred posts, disappeared
  577. from the internet altogether. Facebook and Twitter provide the last
  578. evidence of blogs like RCRD LBL. Like profiles of dead friends, fan
  579. pages and reader messages sometimes float into my feed as ghostly
  580. reminders that my work once existed.</p>
  581. <p>We assume everything we publish online will be preserved. But
  582. websites that pay for writing are businesses. They get sold,
  583. forgotten and broken. Eventually, someone flips the switch and
  584. pulls it all down. Hosting charges are eliminated, and domain names
  585. slip quietly back into the pool. What’s left behind once the cache
  586. clears? As I found with that pitch at the end of 2014, my writing
  587. resume is now oddly incomplete and unverifiable. Ex-editors can
  588. provide references, but I have surprisingly few examples of
  589. published work to show beyond scanned print features from my early
  590. days, so I’ve started backing up my work.</p>
  591. <p>For media companies deleting their sites, legacy doesn’t matter;
  592. the work carries no intrinsic value if there is no business
  593. remaining to capitalize on it. I asked if RCRD LBL still existed on
  594. a server somewhere. It apparently does; I was invited to purchase
  595. it for next to nothing. I could pay for the hosting, flip the
  596. switch on, and all my work would return. But I’d never really look
  597. at it. Then, eventually, I would stop paying the bills, too.</p>
  598. </article>
  599. </section>
  600. <nav id="jumpto">
  601. <p>
  602. <a href="/david/blog/">Accueil du blog</a> |
  603. <a href="http://www.theawl.com/2015/02/all-my-blogs-are-dead">Source originale</a> |
  604. <a href="/david/stream/2019/">Accueil du flux</a>
  605. </p>
  606. </nav>
  607. <footer>
  608. <div>
  609. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  610. <p>
  611. Bonjour/Hi!
  612. 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>
  613. 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>).
  614. </p>
  615. <p>
  616. 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>.
  617. </p>
  618. <p>
  619. Voici quelques articles choisis :
  620. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  621. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  622. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  623. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  624. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  625. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  626. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  627. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  628. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  629. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  630. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  631. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  632. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  633. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  634. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  635. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  636. </p>
  637. <p>
  638. 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>.
  639. </p>
  640. <p>
  641. Je ne traque pas ta navigation mais mon
  642. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  643. conserve des logs d’accès.
  644. </p>
  645. </div>
  646. </footer>
  647. <script type="text/javascript">
  648. ;(_ => {
  649. const jumper = document.getElementById('jumper')
  650. jumper.addEventListener('click', e => {
  651. e.preventDefault()
  652. const anchor = e.target.getAttribute('href')
  653. const targetEl = document.getElementById(anchor.substring(1))
  654. targetEl.scrollIntoView({behavior: 'smooth'})
  655. })
  656. })()
  657. </script>