davidbgk
/
larlet-fr-david-cache
Beobachten 1
Favorisieren 0
Fork 0
Code Releases 0 Aktivität
A place to cache linked articles (think custom and personal wayback machine)
Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
249 Commits
1 Branch
Struktur: 17f244ae89
Branches Tags
${ item.name }
Erstelle Branch ${ searchTerm }
von „17f244ae89“
${ noResults }
larlet-fr-david-cache/cache/644b40ac5152c5ca46c214daf4b.../index.html

index.html 23KB
Originalformat Blame Verlauf

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573 
  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>Stay close to your people: here are the mailing lists! (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://blog.alwaysdata.com/2018/12/11/stay-close-to-your-people-here-are-the-mailing-lists/">

  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.   Stay close to your people: here are the mailing lists! (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://blog.alwaysdata.com/2018/12/11/stay-close-to-your-people-here-are-the-mailing-lists/">Source originale du contenu</a></h3>

  463.     <p>As a French team at <em>always­da­ta</em>, we con­sid­er good things are like good wine: they need time to be nice. Mailing-lists sys­tem is final­ly here, and we’re both hap­py and proud to release it to you!</p>

  464. 

  465. <figure class="embed-media__giphy">

  466.     <video id="giphy-${token}" autoplay="" loop="" muted="" playsinline="">

  467.         <source src="https://media.giphy.com/media/xT9GEDy5eIjBnCKiEU/giphy.mp4" type="video/mp4">

  468.         <img src="https://media.giphy.com/media/xT9GEDy5eIjBnCKiEU/giphy.gif" alt=" @Giphy"/>

  469.     </source></video>

  470. </figure>

  471. 

  472. <p><hr/><h2 id="why-a-mailing-lists-feature">Why a mailing-lists feature?<a class="anchorlink dashicons-before" href="#why-a-mailing-lists-feature"/></h2>

  473. <p>Because we can!</p>

  474. <p>More seri­ous­ly, because it’s a fea­ture many peo­ple ask for a while now. We already host a full e-mail stack for our cus­tomers. You can eas­i­ly cre­ate as much e-mail box­es as you need, redi­rect to oth­er address­es, serv­er-side fil­ter­ing with <a href="http://sieve.info/">Sieve</a>, enable anti-virus scan and anti-spam, <a href="https://help.alwaysdata.com/my-account/emails">and many more</a>. There is no rea­son not to offer a full mail­ing-list solu­tion.</p>

  475. <p>The sec­ond rea­son is that it is manda­to­ry for who­ev­er wants to not rely on exter­nal providers or large busi­ness solu­tions for their com­mu­ni­ca­tion, or team orga­ni­za­tion. Nowadays, if you want to use an e-mail based dis­cus­sion sys­tem, the only ready-to-use solu­tion is Google Groups or Mailchimp-like offers. Not that good in term of pri­va­cy or auton­o­my. And <a href="https://blog.alwaysdata.com/2018/01/28/why-does-privacy-matter/">we trust in pri­va­cy</a>.</p>

  476. <p>For both rea­sons, it is time to give you the abil­i­ty to self-host and man­age your mail­ing-lists direct­ly from your <em>always­da­ta</em>’s account. Until now, a lit­tle trick was to cre­ate a new e-mail address that redi­rects to many address­es. Even if it works well, it doesn’t offer a clean solu­tion to let peo­ple to sub­scribe to it, nor to mod­er­ate it.</p>

  477. <h2 id="take-my-money">Take My Money!<a class="anchorlink dashicons-before" href="#take-my-money"/></h2>

  478. <p>It won’t be nec­es­sary; this is not an option, it’s a fea­ture!</p>

  479. <p>Just log in to your account, and go to the new <a href="https://admin.alwaysdata.com/mailinglist/">Mailing-list</a> sec­tion, it’s enabled by default, as every ser­vice we offer.</p>

  480. <figure class="embed-media__ad__medium">

  481.     <img src="https://blog.alwaysdata.com/wp-content/uploads/2018/12/administration-interface_mailman_lists_EN.png" alt="Administration Panel: Mailing Lists" class="aligncenter size-full wp-image-"/>

  482.     <figcaption>Administration Panel: Mailing Lists</figcaption>

  483. </figure>

  484. <p class="inset" data-title="Note">We labeled it as <i>Beta</i> for now, because hav­ing this fea­ture enabled means we had to add a new soft­ware in our stack. Even if we test­ed it a lot, new users might encounter unex­pect­ed behav­iors. Report them using our <a href="https://admin.alwaysdata.com/support/?status=open">tick­ets</a> sys­tem if you’re fac­ing one.</p>

  485. <p>To cre­ate a new mail­ing list, fill the form view behind the <em>add a mail­ing-list</em> but­ton. You have to indi­cate the mail­ing list name as the form of the local part<sup id="footnote_plugin_tooltip_1" class="footnote_plugin_tooltip_text">1)</sup><span class="footnote_tooltip" id="footnote_plugin_tooltip_text_1"/> of an e-mail address; and mail­ing list’s domain. It forms the mail­ing-list pub­lic e-mail address, like <code>infos@alwaysdata.com</code>.</p>

  486. <figure class="embed-media__ad__medium">

  487.     <img src="https://blog.alwaysdata.com/wp-content/uploads/2018/12/administration-interface_mailman_create-list_EN.png" alt="Administration Panel: Create a new Mailing List" class="aligncenter size-full wp-image-"/>

  488.     <figcaption>Administration Panel: Create a new Mailing List</figcaption>

  489. </figure>

  490. <p>Then, like with our databases<sup id="footnote_plugin_tooltip_2" class="footnote_plugin_tooltip_text">2)</sup><span class="footnote_tooltip" id="footnote_plugin_tooltip_text_2"/>, cre­ate one or more users you want to bound to the cre­at­ed mail­ing list. You can spec­i­fy their role<sup id="footnote_plugin_tooltip_3" class="footnote_plugin_tooltip_text">3)</sup><span class="footnote_tooltip" id="footnote_plugin_tooltip_text_3"/> per list.</p>

  491. <figure class="embed-media__ad__medium">

  492.     <img src="https://blog.alwaysdata.com/wp-content/uploads/2018/12/administration-interface_mailman_create-user_EN.png" alt="Administration Panel: Create a new Mailing User" class="aligncenter size-full wp-image-"/>

  493.     <figcaption>Administration Panel: Create a new Mailing User</figcaption>

  494. </figure>

  495. <p>No more set­up need­ed. All mail­ing-list oper­a­tions are doable in the <a href="https://mailman.alwaysdata.com/postorius/">Postorius inter­face</a>, like bulk adding/removing mem­bers.</p>

  496. <p>Each mail­ing-list come with sev­er­al asso­ci­at­ed address­es, in the form of <code>[listname]-[xtra]@[domain]</code>. Here are few <em>extras</em> avail­able:</p>

  497. <ul><li><code>owners</code>: use it to send an email to the mod­er­a­tors and admin­is­tra­tors of the giv­en list</li>

  498. <li><code>request</code>: per­form actions on your mail­ing-list account; send <code>help</code> in the sub­ject to get the list of avail­able com­mands</li>

  499. <li><code>confirm</code>: man­age the sub­scrip­tions to the list</li>

  500. <li><code>bounces</code>: sends con­fir­ma­tion of actions on the list</li>

  501. </ul><p>Our mail­ing-list sys­tem is pow­ered by <a href="http://list.org/">Mailman</a>. You can rely on <a href="https://mailman.readthedocs.io/en/latest/">its doc­u­men­ta­tion</a> to get some infor­ma­tion about how to use and man­age your lists. Keep in mind that lists’ admin­is­tra­tors and mod­er­a­tors are only set­table in your <em>always­da­ta</em>’s inter­face.</p>

  502. <figure class="embed-media__giphy">

  503.     <video id="giphy-${token}" autoplay="" loop="" muted="" playsinline="">

  504.         <source src="https://media.giphy.com/media/l0HlPMCRbaq5To91e/giphy.mp4" type="video/mp4">

  505.         <img src="https://media.giphy.com/media/l0HlPMCRbaq5To91e/giphy.gif" alt=" @Giphy"/>

  506.     </source></video>

  507. </figure>

  508. <hr/><p>We promised it for a while. It took time, but we keep our promis­es. Mailing-lists are now a real­i­ty for all <em>always­da­ta</em> users. Because we eat our own dog food, we plan to release a newsletter<sup id="footnote_plugin_tooltip_4" class="footnote_plugin_tooltip_text">4)</sup><span class="footnote_tooltip" id="footnote_plugin_tooltip_text_4"/> in 2019, <a href="mailto:infos-join@alwaysdata.com?subject=Subscribe">feel free to sub­scribe</a>!</p>

  509. <p>We have a few more sur­pris­es before the end of the year, so stay tuned!</p></p>

  510.   </article>

  511. </section>

  512. 

  513. 

  514. <nav id="jumpto">

  515.   <p>

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

  517.     <a href="https://blog.alwaysdata.com/2018/12/11/stay-close-to-your-people-here-are-the-mailing-lists/">Source originale</a> |

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

  519.   </p>

  520. </nav>

  521. 

  522. <footer>

  523.   <div>

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

  525.     <p>

  526.       Bonjour/Hi!

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

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

  529.     </p>

  530.     <p>

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

  532.     </p>

  533.     

  534.     <p>

  535.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  552.     </p>

  553.     <p>

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

  555.     </p>

  556.     <p>

  557.       Je ne traque pas ta navigation mais mon

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

  559.       conserve des logs d’accès.

  560.     </p>

  561.   </div>

  562. </footer>

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

  564.   ;(_ => {

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

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

  567.       e.preventDefault()

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

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

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

  571.     })

  572.   })()

  573. </script>