davidbgk
/
larlet-fr-david-cache
Прати 1
Волим 0
Креирај огранак 0
Код Издања 0 Activity
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.
224 Комити
1 Грана
Дрво: f8f4c58548
Гране Ознаке
${ item.name }
Create branch ${ searchTerm }
from 'f8f4c58548'
${ noResults }
larlet-fr-david-cache/cache/b004d327e5e9f70a5003c91b6eb.../index.html

index.html 48KB
Датотека Blame Историја

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529 
  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>64 Ways To Think About a News Homepage (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. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="https://medium.com/thelist/64-ways-to-think-about-a-news-homepage-223c01952d26">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   64 Ways To Think About a News Homepage (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="https://medium.com/thelist/64-ways-to-think-about-a-news-homepage-223c01952d26">Source originale du contenu</a></h3>

  463.     <div class="section-inner layoutSingleColumn"><p name="24a5" id="24a5" class="graf--p graf--first">Last September, I went to Chicago for a conference. On the third day of the conference, I slipped away to my friend Max’s apartment on a mission. The mission was to gather together a lot of very smart people who don’t work in news — and ask them to design a new news homepage.</p><p name="fd4e" id="fd4e" class="graf--p graf-after--p"><strong class="markup--strong markup--p-strong">By news homepage, I mean any way for a user to first encounter content.</strong> A push notification could very well be the new news homepage. (<em class="markup--em markup--p-em">Related: </em><a href="http://www.melodyjk.com/what-does-a-better-push-notification-feel-like/" data-href="http://www.melodyjk.com/what-does-a-better-push-notification-feel-like/" class="markup--anchor markup--p-anchor" rel="nofollow"><em class="markup--em markup--p-em">Ways to think about push notifications</em></a><em class="markup--em markup--p-em">.) </em>An app is a news homepage. <strong class="markup--strong markup--p-strong">An article or a newsletter is a news homepage.</strong> If you listen to the news, Overcast or Soundcloud or the iTunes store may be your homepage. YouTube can be your homepage. Homepage, to me, is simply a shorthand version for any of these things. You can substitute any of the words I mentioned for homepage below.</p><p name="9021" id="9021" class="graf--p graf-after--p">There are lots of ways to think about a news homepage. We’ll start with the basics. <strong class="markup--strong markup--p-strong">1. </strong>You can have a list of stories curated by a person, arranged by topic, the way the New York Times homepage does:</p><p name="868e" id="868e" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">2. </strong>You can automate this process and feature <a href="http://product.voxmedia.com/2014/12/17/7405131/algorithmic-design-how-vox-picks-a-winning-layout-out-of-thousands" data-href="http://product.voxmedia.com/2014/12/17/7405131/algorithmic-design-how-vox-picks-a-winning-layout-out-of-thousands" class="markup--anchor markup--p-anchor" rel="nofollow">algorithmically-generated</a> cards, the way Vox properties do:</p><p name="5d4d" id="5d4d" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">3. </strong>You can have a news website that was created for one story: the homepage is the story and the story is the homepage, like this piece called <a href="http://www.themostnorthernplace.com/" data-href="http://www.themostnorthernplace.com/" class="markup--anchor markup--p-anchor" rel="nofollow">The Most Northern Place</a> (h/t <a href="http://www.twitter.com/eteare" data-href="http://www.twitter.com/eteare" class="markup--anchor markup--p-anchor" rel="nofollow">@ETeare</a>) or this piece that the Awl made, which was located at <a href="http://theholenearthecenteroftheworld.com/" data-href="http://theholenearthecenteroftheworld.com/" class="markup--anchor markup--p-anchor" rel="nofollow">theholenearthecenteroftheworld.com</a>. (h/t <a href="http://www.twitter.com/substockman" data-href="http://www.twitter.com/substockman" class="markup--anchor markup--p-anchor" rel="nofollow">@substockman</a>) or these <a href="http://kottke.org/08/02/single-serving-sites" data-href="http://kottke.org/08/02/single-serving-sites" class="markup--anchor markup--p-anchor" rel="nofollow">single-serving sites</a> (h/t <a href="http://www.twitter.com/esd" data-href="http://www.twitter.com/esd" class="markup--anchor markup--p-anchor" rel="nofollow">@esd</a>)</p><p name="d4db" id="d4db" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">4. </strong>You can arrange content like an email newsletter (Quartz does a nice job of this.)</p><p name="c084" id="c084" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">5. </strong>You can publish a homepage in reverse chronological order, so that the newest stories are at the top.</p><p name="6db3" id="6db3" class="graf--p graf-after--p"><strong class="markup--strong markup--p-strong">6. </strong>You can geotarget and localize material based on where someone is located. NPR does this, with localizing a member station for you to listen to. (See also: <a href="http://socialmediadesk.tumblr.com/post/104267872711/social-sandbox-tiny-desk-contest-commenting-and" data-href="http://socialmediadesk.tumblr.com/post/104267872711/social-sandbox-tiny-desk-contest-commenting-and" class="markup--anchor markup--p-anchor" rel="nofollow">Plague</a>, which adds anonymity and a gaming component to this.)</p><p name="5a9a" id="5a9a" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">7. </strong>You can figure out the last time someone visited a site, and adapt the news on that site for that particularly person. (<em class="markup--em markup--p-em">Example: Melody last visited the Washington Post on Tuesday, and since then, the Washington Post has published three large investigative pieces that Melody should see, because of her interests or because they cost the Washington Post a lot of money to produce and shouldn’t spend the same amount of time on the homepage as a quick blog post.</em>)</p><p name="0416" id="0416" class="graf--p graf-after--p"><strong class="markup--strong markup--p-strong">8. </strong>You can show a person news, podcasts, or information their friends have recommended. <strong class="markup--strong markup--p-strong">(</strong>like on <a href="http://nuzzel.com/" data-href="http://nuzzel.com/" class="markup--anchor markup--p-anchor" rel="nofollow">Nuzzel</a>, <a href="http://www.knomad.com/" data-href="http://www.knomad.com/" class="markup--anchor markup--p-anchor" rel="nofollow">Knomad</a>, a Facebook news feed, Twitter, or Medium’s homepage, which shows you articles people you know have recommended in some way.)</p><figcaption class="imageCaption">News people have recommended in my Twitter feed.</figcaption></figure><p name="d0ce" id="d0ce" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">8a. Even more curated news: </strong>If you don’t want the firehose, you can now see one website or article someone you know or trust has recommended per day (<a href="https://this.cm/" data-href="https://this.cm/" class="markup--anchor markup--p-anchor" rel="nofollow">This.cm</a>) or websites/articles favorited by people you know or trust (<a href="http://stellar.io/" data-href="http://stellar.io/" class="markup--anchor markup--p-anchor" rel="nofollow">stellar.io</a>) or news articles people you know have bookmarked (<a href="https://delicious.com/" data-href="https://delicious.com/" class="markup--anchor markup--p-anchor" rel="nofollow">delicious.com</a>, <a href="https://pinboard.in/t:news" data-href="https://pinboard.in/t:news" class="markup--anchor markup--p-anchor" rel="nofollow">pinboard.in</a>.)</p><p name="6e63" id="6e63" class="graf--p graf-after--p"><strong class="markup--strong markup--p-strong">9. </strong>You can arrange material by emotion or activity, like the way Songza currently does. “Stories that will make you happy,” or “Podcasts to listen to while cooking breakfast.” (Remember, no one listens to audio in a vacuum.)</p><p name="f7ff" id="f7ff" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">10. </strong>You can aggregate lots of news together, from lots of different sources and display them based on an algorithm. (Google News does this.)</p><p name="946b" id="946b" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">11. </strong>Information can go horizontally as well as vertically, like with <a href="http://fold.media.mit.edu/" data-href="http://fold.media.mit.edu/" class="markup--anchor markup--p-anchor" rel="nofollow">FOLD</a>.</p><p name="3121" id="3121" class="graf--p graf-after--p"><strong class="markup--strong markup--p-strong">12. </strong>Information can be conveyed through peer-to-peer, and private. (<a href="http://www.bbc.com/news/world-africa-29573964" data-href="http://www.bbc.com/news/world-africa-29573964" class="markup--anchor markup--p-anchor" rel="nofollow">BBC WhatsApp Ebola Service</a>, <a href="http://socialmediadesk.tumblr.com/post/93501200856/social-sandbox-npr-on-snapchat-now-you-see-it" data-href="http://socialmediadesk.tumblr.com/post/93501200856/social-sandbox-npr-on-snapchat-now-you-see-it" class="markup--anchor markup--p-anchor" rel="nofollow">NPR on Snapchat</a>.)</p><p name="6a92" id="6a92" class="graf--p graf-after--p"><strong class="markup--strong markup--p-strong">13. </strong>You can have the community decide which stories should appear, in which order, like the way Reddit does — -through simple up/down voting. (Related, more specialized: <a href="https://lobste.rs/" data-href="https://lobste.rs/" class="markup--anchor markup--p-anchor" rel="nofollow">lobste.rs</a>, <a href="https://news.ycombinator.com/" data-href="https://news.ycombinator.com/" class="markup--anchor markup--p-anchor" rel="nofollow">hackernews</a>)</p><p name="8a38" id="8a38" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">14. </strong>You can think of news as a timeline, and show events in relation to one another in terms of time, like <a href="http://techcrunch.com/2015/01/15/timeline-launches-news-app-to-give-you-the-context-behind-the-days-headlines/" data-href="http://techcrunch.com/2015/01/15/timeline-launches-news-app-to-give-you-the-context-behind-the-days-headlines/" class="markup--anchor markup--p-anchor" rel="nofollow">Timeline</a> or the <a href="http://www.theguardian.com/tone/minutebyminute" data-href="http://www.theguardian.com/tone/minutebyminute" class="markup--anchor markup--p-anchor" rel="nofollow">Guardian Liveblogs</a>.</p><p name="e829" id="e829" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">15. </strong>You can think of a homepage as a guide or DJ created by someone you trust, either on a topic or curating the news overall. (<a href="https://twitter.com/sixfoot6/status/523857390689869825/photo/1" data-href="https://twitter.com/sixfoot6/status/523857390689869825/photo/1" class="markup--anchor markup--p-anchor" rel="nofollow">SNDMakes hack</a>, <a href="http://www.theskimm.com/" data-href="http://www.theskimm.com/" class="markup--anchor markup--p-anchor" rel="nofollow">The Daily Skimm</a>, <a href="http://tinyletter.com/hotpod" data-href="http://tinyletter.com/hotpod" class="markup--anchor markup--p-anchor" rel="nofollow">HotPod</a>.)</p><p name="b705" id="b705" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">16. </strong>You can think of a homepage as a way to get really quick summaries or updates of the news, if you’re the kind of person who doesn’t have a lot of time but wants to stay informed. (<a href="http://cir.ca/" data-href="http://cir.ca/" class="markup--anchor markup--p-anchor" rel="nofollow">Cir.ca</a>, <a href="http://usegist.com/" data-href="http://usegist.com/" class="markup--anchor markup--p-anchor" rel="nofollow">Gist</a>, <a href="http://clipped.me/" data-href="http://clipped.me/" class="markup--anchor markup--p-anchor" rel="nofollow">Clipped</a>, <a href="http://bitofnews.com/" data-href="http://bitofnews.com/" class="markup--anchor markup--p-anchor" rel="nofollow">Bit of News bot</a>, etc.)</p><p name="a10b" id="a10b" class="graf--p graf--startsWithDoubleQuote graf-after--p">“Okay, okay, Mel,” you’re probably thinking. “These are all well and good — but I’m fully aware that all of these exist. You’ve shown me nothing new.”</p><h4 name="936f" id="936f" class="graf--h4 graf-after--p">Okay fine. Now it’s time for some homepages or ways to think about news you haven’t seen before….because we made them up. (And by we, I mean <a href="http://www.melodyjk.com/" data-href="http://www.melodyjk.com/" class="markup--anchor markup--h4-anchor" rel="nofollow"><strong class="markup--strong markup--h4-strong">me</strong></a><strong class="markup--strong markup--h4-strong">, my better half A — who prefers to remain offline, </strong><a href="http://maxistentialism.com/" data-href="http://maxistentialism.com/" class="markup--anchor markup--h4-anchor" rel="nofollow"><strong class="markup--strong markup--h4-strong">Max Temkin</strong></a><strong class="markup--strong markup--h4-strong">, </strong><a href="http://www.chadkouri.com/" data-href="http://www.chadkouri.com/" class="markup--anchor markup--h4-anchor" rel="nofollow"><strong class="markup--strong markup--h4-strong">Chad Kouri</strong></a><strong class="markup--strong markup--h4-strong">, </strong><a href="http://pitchdesignunion.com/" data-href="http://pitchdesignunion.com/" class="markup--anchor markup--h4-anchor" rel="nofollow"><strong class="markup--strong markup--h4-strong">Margot Harrington</strong></a><strong class="markup--strong markup--h4-strong">, </strong><a href="https://twitter.com/bethcorzoduke" data-href="https://twitter.com/bethcorzoduke" class="markup--anchor markup--h4-anchor" rel="nofollow"><strong class="markup--strong markup--h4-strong">Beth Corzo-Duchardt</strong></a><strong class="markup--strong markup--h4-strong">, </strong><a href="http://www.winterbureau.com/" data-href="http://www.winterbureau.com/" class="markup--anchor markup--h4-anchor" rel="nofollow"><strong class="markup--strong markup--h4-strong">Veronica Corzo-Duchardt</strong></a><strong class="markup--strong markup--h4-strong">, </strong><a href="https://twitter.com/chiconfidential" data-href="https://twitter.com/chiconfidential" class="markup--anchor markup--h4-anchor" rel="nofollow"><strong class="markup--strong markup--h4-strong">Melissa Harris</strong></a><strong class="markup--strong markup--h4-strong">, </strong><a href="http://www.veronicaberns.com/" data-href="http://www.veronicaberns.com/" class="markup--anchor markup--h4-anchor" rel="nofollow"><strong class="markup--strong markup--h4-strong">Veronica Berns</strong></a><strong class="markup--strong markup--h4-strong">, </strong><a href="https://twitter.com/chmcavoy" data-href="https://twitter.com/chmcavoy" class="markup--anchor markup--h4-anchor" rel="nofollow"><strong class="markup--strong markup--h4-strong">Chris McAvoy</strong></a><strong class="markup--strong markup--h4-strong">, </strong><a href="https://twitter.com/musingbouche" data-href="https://twitter.com/musingbouche" class="markup--anchor markup--h4-anchor" rel="nofollow"><strong class="markup--strong markup--h4-strong">Tania deLuzuriaga</strong></a><strong class="markup--strong markup--h4-strong">, </strong><a href="https://twitter.com/bellwak" data-href="https://twitter.com/bellwak" class="markup--anchor markup--h4-anchor" rel="nofollow"><strong class="markup--strong markup--h4-strong">Kim Bellware</strong></a><strong class="markup--strong markup--h4-strong">, &amp; </strong><a href="https://twitter.com/tehawesome" data-href="https://twitter.com/tehawesome" class="markup--anchor markup--h4-anchor" rel="nofollow"><strong class="markup--strong markup--h4-strong">Henry Birdseye</strong></a>.) For demographic purposes, some of us are journalists, some are designers, some are scientists, some are academics, and some of us work at <a href="http://cardsagainsthumanity.com/" data-href="http://cardsagainsthumanity.com/" class="markup--anchor markup--h4-anchor" rel="nofollow">Cards Against Humanity</a>. As you can see, putting people together in a room who work in all different fields (and adding a bit of liquor) sparks some pretty awesome ideas….</h4><p name="e93a" id="e93a" class="graf--p graf-after--h4">Here’s what we came up with:</p><p name="95ac" id="95ac" class="graf--p graf-after--p"><strong class="markup--strong markup--p-strong">17. </strong>The homepage that changes<strong class="markup--strong markup--p-strong"> </strong>on a hourly basis, shown visually through a clock or circle</p><p name="2f08" id="2f08" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">18. </strong>The homepage<strong class="markup--strong markup--p-strong"> </strong>categorized by things that are awesome. (Like the <a href="http://librarylab.law.harvard.edu/blog/2012/05/17/awesome-box-pilot/" data-href="http://librarylab.law.harvard.edu/blog/2012/05/17/awesome-box-pilot/" class="markup--anchor markup--p-anchor" rel="nofollow">Awesome Box</a>, but for news.)</p><p name="1121" id="1121" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">19.</strong> The homepage of interconnected stories, displayed as nodes</p><p name="26ff" id="26ff" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">20. </strong>The homepage as a choose your own adventure story, based on how much information you want to know.</p></div>

  464. 

  465. <div class="section-inner layoutSingleColumn"><p name="6972" id="6972" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">21. </strong>The homepage as audio cone for people waiting at bus stops. (The homepage as accessible news for anyone who happens to be in public space.)</p><p name="abd2" id="abd2" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">22. </strong>The homepage as time-sensitive, and aware of your interest and preference for medium.</p><p name="23f3" id="23f3" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">23. </strong>The homepage for people who want to see research or related research along with news written for a lay audience.</p><p name="bfd8" id="bfd8" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">24.</strong> A homepage for ex-pats who care about local news from lots of areas. (Related: <a href="http://www.melodyjk.com/yo-philly-wheres-my-ex-pat-news/" data-href="http://www.melodyjk.com/yo-philly-wheres-my-ex-pat-news/" class="markup--anchor markup--p-anchor" rel="nofollow">Ex-Pat news</a>.)</p><p name="d407" id="d407" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">25. </strong>Homepage as treasure map to explore topic areas</p><p name="9049" id="9049" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">26. </strong>Homepage to allow you to see the world through someone else’s eyes for a day (or maybe many days in a row.) Pretend you’re living somewhere else for a day.</p><p name="485d" id="485d" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">27.</strong> Homepage or news as gamified experience, based on how many stories you’ve read.</p><p name="ba17" id="ba17" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">28. </strong>Homepage<strong class="markup--strong markup--p-strong"> </strong>as a series of book spines that you can choose from. Or choose a book, and related news will be provided based on the book you choose. (Yo Jeff Bezos, this would be an easy tie-in for you.)</p><p name="53fc" id="53fc" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">29.</strong> Homepage as a random experience, based on some action you take.</p><p name="a6ee" id="a6ee" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">30. </strong>The homepage that’s medium agnostic, and gives you quick or in-depth news.</p><p name="22b6" id="22b6" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">31.</strong> A homepage (and an algorithm) that surprises or enlightens you!</p><p name="8dc3" id="8dc3" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">32.</strong> A homepage that finds stories that connect two seemingly unrelated topics. The Kevin Bacon 6-Degrees of News Stories, based on linked data.</p><p name="7509" id="7509" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">33. </strong>A homepage that shows you what noteworthy people are reading.</p><p name="c886" id="c886" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">34. </strong>Grindr for news. Or Tinder for news. Basically, swiping images to select stories.</p><p name="3436" id="3436" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">35. </strong>News orgs pay other sites to display their headlines on sites, like the way you can see Zappo’s ads following you around the internet like cookies. Basically, a way to show the news in that way.</p><p name="dc6a" id="dc6a" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">36.</strong> Pick a topic, your amount of time, and your level of knowedge. Bam!</p><p name="6dbf" id="6dbf" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">37. </strong>Stories from where I’m from / Stories from where I live now. (Related: <a href="http://www.melodyjk.com/yo-philly-wheres-my-ex-pat-news/" data-href="http://www.melodyjk.com/yo-philly-wheres-my-ex-pat-news/" class="markup--anchor markup--p-anchor" rel="nofollow">Ex-Pat news</a>. Public media, I’m looking at you. )</p><p name="f002" id="f002" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">38.</strong> What if the NPR homepage looked like Reddit and showed you who was on duty? That’d be cool.</p><p name="397e" id="397e" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">39</strong>. This is after I was a little inenbriated but the gist is this: the stories ask you what you learned, and share those facts as headlines to future people who would see the those facts instead of the initial headlines — but there would be some mechanism built in to make sure they were legit (crowd voting?) At least, I think that’s what I was thinking. Apologies for the handwriting.</p><p name="89e8" id="89e8" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">40.</strong> A homepage that provides a story, context, relevancy, background, and evergreen related stories.</p><p name="cc0d" id="cc0d" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">41.</strong> A homepage based on the weather or the calendar. You know, habitual things. What should I read today, based on the weather?</p><p name="b110" id="b110" class="graf--p graf-after--p"><strong class="markup--strong markup--p-strong">42. </strong>You take one story. You zoom in (perhaps to the individual) and zoom out (perhaps to larger economic / political / social issues.</p><p name="e28b" id="e28b" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">43.</strong> A homepage that provides headlines and then links back or shows you all of the sources that were used to substantiate the article, so you know exactly the way the reporter sourced the piece before clicking. Perhaps this also provides additional background reading material.</p><p name="82ec" id="82ec" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">44. </strong>What’s the TIL of this topic? Perhaps that leads me into an article that will lead me down a new pathway. Think about Wikipedia’s rabbit hole.</p><p name="28d5" id="28d5" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">45. </strong>A homepage or story that asks for future sources and has a better way to interact than a simple comment / annotation section. Asking a direct question means people know how to comment, or how to structure their comments.</p><p name="4173" id="4173" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">46. </strong>News stories often focus on the trials and tribulations of specific individuals. But what happens if you zoom out and show the systems and contexts in which those individuals are embedded?</p><p name="277a" id="277a" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">47. </strong>Putting a story in context by giving the reader the ability to find out more about the people or places in the story. Making a web from a story. Building out. Structuring data.</p><p name="48c3" id="48c3" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">48.</strong> The homepage as peer pressure.</p><p name="a006" id="a006" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">49.</strong> The homepage as a contextual timeline.</p><p name="74f7" id="74f7" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">50.</strong> Homepage that ensures you’ve read something before sharing it. (Note that homepage here can refer to podcast, article, a news app, a homepage, an aggregation, or a text. The idea is that every bit of content is a potential homepage.</p><p name="b4bf" id="b4bf" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">51.</strong> The backside of card 50.</p><p name="a58c" id="a58c" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">52</strong>. The homepage that doesn’t overwhelm you, because it shows you 3 stories (one local, one national, one international) plus the option to see more related stories.</p><p name="15e0" id="15e0" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">53.</strong> A homepage that is just a really good news search engine.</p><p name="ad2c" id="ad2c" class="graf--p graf-after--figure">54. A homepage that aggregates your hyperlocal neighborhood news, with local news, and then news from other places. Basically, a place-based news site — with the ability to cater to time limitations.</p><p name="4df7" id="4df7" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">55. </strong>A homepage that lets you focus because it takes away everything else as soon as you click on a story, so you can fully focus on the piece you’re reading.</p><p name="d94a" id="d94a" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">56.</strong> Melody Joy Kramer’s ideal homepage, which is based on how she consumes the news. (Question to ask yourself: how do you consume the news?)</p><p name="36c6" id="36c6" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">57.</strong> First, pick your piece based on your mood.</p><p name="106d" id="106d" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">57a.</strong> Depending on your mood and your story selection the story will give you a little more info. A condensed version, if you will.</p><p name="cffc" id="cffc" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">57b.</strong> If you decide to open the story, you get more of the story.</p><p name="9e0c" id="9e0c" class="graf--p graf-after--figure">57c. As well as links to other stories that are of the same emotional quality of the story you picked.</p><p name="9b20" id="9b20" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">58. </strong>All stories, linked to background and summaries, which then link to more contextual information.</p><p name="2df4" id="2df4" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">59.</strong> This is one of my favorites. It’s self-explanatory.</p><p name="1e64" id="1e64" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">60. </strong>News embedded in a game! I LOVE THIS.</p><p name="b653" id="b653" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">61.</strong> What do the people within a block read? A mile? Two miles? My city? My state? My country? Can I see other blocks? Other countries? Is this creepy? I’m not sure. It’s in my handwriting.</p><p name="2511" id="2511" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">62. </strong>No one listens to audio in a vacuum, my friends.</p><p name="3c20" id="3c20" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">63.</strong> News placed on a Google map. EveryBlock, but for news.</p><p name="28dd" id="28dd" class="graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">64.</strong> A news story that explains everything you see on a graph, chart, or other data viz. You click on each portion for a full explanation, in words — in case you prefer words to pictures.</p><h2 name="b72e" id="b72e" class="graf--h2 graf-after--figure">So you might be asking yourself, why we sketched these out?</h2><ol class="postList"><li name="9163" id="9163" class="graf--li graf-after--h2">To say: People who don’t work in news think a lot about the news.</li><li name="7c2c" id="7c2c" class="graf--li graf-after--li">To say: People who work in news should talk to people who don’t work in news. (Related: my series, <a href="http://www.melodyjk.com/category/how-do-you-get-the-news/" data-href="http://www.melodyjk.com/category/how-do-you-get-the-news/" class="markup--anchor markup--li-anchor" rel="nofollow">Talking To People Who Don’t Work In News About The News</a>.)</li><li name="95f7" id="95f7" class="graf--li graf-after--li">To say: If you’re trying to come up with new ideas, invite people in who DO NOT work in your profession.</li><li name="2c42" id="2c42" class="graf--li graf-after--li">Also: It was fun.</li><li name="2c23" id="2c23" class="graf--li graf-after--li">I thought it would be helpful. Thinking about human-centered design, algorithms, and structured metadata is good for lots of fields, not just journalism. All of this stuff is applicable to libraries, software, civic tech, teaching, etc.</li><li name="736a" id="736a" class="graf--li graf-after--li">Diverse people + diverse backgrounds = ideas you haven’t thought about yet. (That’s why it’s good, from a business perspective, to make sure your entire company doesn’t look the same.)</li><li name="9fb0" id="9fb0" class="graf--li graf-after--li">To hopefully inspire you to think about one of these, or to conduct an experiment like this. What if you gathered together a group of people and asked them to sketch ideas before building? I’m not talking about hiring a third-party to do this. I mean, the people building the product should be interacting with the audience — in person, not through data. Real people — the people who read or listen or interact with your stuff.</li></ol><p name="dd60" id="dd60" class="graf--p graf-after--li">If you’d like to talk more about this or any of these, email <a class="__cf_email__" href="/cdn-cgi/l/email-protection" data-cfemail="4b262e27242f3220392a262e390b2c262a22276528242665">[email protected]</a> ☺ Have a good one! Mel</p><p name="c257" id="c257" class="graf--p graf-after--p graf--last"><em class="markup--em markup--p-em">Melody Joy Kramer spent the majority of her career in public media, where she directed, produced, edited, and wrote stuff for several shows, including Wait Wait…Don’t Tell Me and Fresh Air with Terry Gross. Most recently, she worked as a digital strategist at NPR, where she launched and then directed projects that helped NPR make better decisions and build audiences online and on-air. She is a Poynter columnist and a 2014–2015 visiting Nieman Fellow at Harvard University, where she is working on new ways to think about membership. Mel blogs at </em><a href="http://www.melodyjk.com/" data-href="http://www.melodyjk.com/" class="markup--anchor markup--p-anchor" rel="nofollow"><em class="markup--em markup--p-em">www.melodyjk.com</em></a><em class="markup--em markup--p-em">, codes in Python, and tweets @mkramer. Her email is </em><a href="/cdn-cgi/l/email-protection#2b464e47444f5240594a464e596b4c464a424705484446" data-href="mailto:melodykramer@gmail.com" class="markup--anchor markup--p-anchor"><em class="markup--em markup--p-em"><span class="__cf_email__" data-cfemail="f39e969f9c978a9881929e9681b3949e929a9fdd909c9e">[email protected]</span></em></a><em class="markup--em markup--p-em"> and she writes a TinyLetter with stuff she’s thinking about. </em><a href="http://www.tinyletter.com/melodykramer" data-href="http://www.tinyletter.com/melodykramer" class="markup--anchor markup--p-anchor" rel="nofollow"><strong class="markup--strong markup--p-strong">Please subscribe.</strong></a></p></div>

  466.   </article>

  467. </section>

  468. 

  469. 

  470. <nav id="jumpto">

  471.   <p>

  472.     <a href="/david/blog/">Accueil du blog</a> |

  473.     <a href="https://medium.com/thelist/64-ways-to-think-about-a-news-homepage-223c01952d26">Source originale</a> |

  474.     <a href="/david/stream/2019/">Accueil du flux</a>

  475.   </p>

  476. </nav>

  477. 

  478. <footer>

  479.   <div>

  480.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  481.     <p>

  482.       Bonjour/Hi!

  483.       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>

  484.       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>).

  485.     </p>

  486.     <p>

  487.       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>.

  488.     </p>

  489.     

  490.     <p>

  491.       Voici quelques articles choisis :

  492.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  493.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  494.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  495.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  496.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  497.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  498.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  499.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  500.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  501.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  502.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  503.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  504.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  505.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  506.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  507.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  508.     </p>

  509.     <p>

  510.       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>.

  511.     </p>

  512.     <p>

  513.       Je ne traque pas ta navigation mais mon

  514.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  515.       conserve des logs d’accès.

  516.     </p>

  517.   </div>

  518. </footer>

  519. <script type="text/javascript">

  520.   ;(_ => {

  521.     const jumper = document.getElementById('jumper')

  522.     jumper.addEventListener('click', e => {

  523.       e.preventDefault()

  524.       const anchor = e.target.getAttribute('href')

  525.       const targetEl = document.getElementById(anchor.substring(1))

  526.       targetEl.scrollIntoView({behavior: 'smooth'})

  527.     })

  528.   })()

  529. </script>