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

5 jaren geleden
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767
  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>Introduction à secure-scuttlebutt (SSB) (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="https://git.scuttlebot.io/%253qtmFApy1Es5BVA7JIhrlfahcWqBp%2F7I391i%2BxQ1HP8%3D.sha256">
  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. Introduction à secure-scuttlebutt (SSB) (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="https://git.scuttlebot.io/%253qtmFApy1Es5BVA7JIhrlfahcWqBp%2F7I391i%2BxQ1HP8%3D.sha256">Source originale du contenu</a></h3>
  445. <h1>Introduction à secure-scuttlebutt (SSB)</h1>
  446. <p>Vous trouverez mes autres repos git-ssb dans <a href="https://git.scuttlebot.io/%40dcWOOqyFtY1sEXv%2BrM0MzdINiYyIFFwom1NfmP4aMFo%3D.ed25519">ssb:millette</a>.</p>
  447. <p>Le document actuel se trouve à <a href="https://git.scuttlebot.io/%253qtmFApy1Es5BVA7JIhrlfahcWqBp%2F7I391i%2BxQ1HP8%3D.sha256">ssb, une intro</a>.</p>
  448. <h2>Préambule</h2>
  449. <p>Sautez à la section <strong>C'est quoi SSB?</strong> pour passer le préambule.</p>
  450. <h3>Décentralisé</h3>
  451. <p>J'ai toujours été attiré par les aspects décentralisés du web
  452. et de l'internet en général. J'hébergeais déjà un serveur web
  453. chez moi à partir des années 1990, sur ma petite ligne ADSL
  454. à 1Mbps et mon Pentium 90MHz et ses 24MiB de RAM. J'ai même été
  455. <em>slashdotté</em> comme on le disait à l'époque.</p>
  456. <h3>Silos</h3>
  457. <p>Avec le temps, le web s'est refermé sur lui-même, on a vu des silo
  458. de plus en plus gros marquer leurs territoires sur le web. On n'a
  459. qu'à penser à Google ou Facebook. J'ai toujours un compte Google,
  460. mais ça fait des années que j'ai détruit mon compte Facebook.</p>
  461. <h3>Expériences</h3>
  462. <p>Il y a quelques mois, j'ai un peu expérimenté avec <a href="https://zeronet.io/">ZeroNet</a>
  463. et plus récemment avec le <a href="https://datproject.org/">datproject</a>. Il y a quelques jours,
  464. je redécouvrais <a href="http://scuttlebot.io/">secure-scuttlebutt</a> suite au tapage
  465. entourant la sortie de <a href="https://mastodon.social/">mastodon</a>.</p>
  466. <h3>Mastodon et fédération</h3>
  467. <p>Mastodon et ses cousins GNU Social et StatusNet reposent
  468. tous sur le protocole OStatus, qui lui-même est composé
  469. de protocoles et standards plus anciens comme PubSubHubbub,
  470. Salmon, Webfinger et ActivityStreams. Je suis assez bien placé
  471. pour en parlé puisque j'étais un des développeur de StatusNet
  472. il y a une dizaine d'années.</p>
  473. <p>OStatus permet la fédération, au même titre que le email qu'on
  474. utilise couramment (on peut envoyer un mail du service de Google
  475. et il sera reçu par un utilisateur de Yahoo) ou encore les <em>pods</em>
  476. de Diaspora ou Jabber/XMPP pour <em>chatter</em>. Dans le cas de fédération,
  477. la relation P2P repose entre les serveurs et non les utilisateurs
  478. eux-mêmes, bien que ces derniers soient tout à fait libres
  479. d'héberger leurs propres serveurs.</p>
  480. <h3>P2P</h3>
  481. <p><a href="https://zeronet.io/">ZeroNet</a>, <a href="https://datproject.org/">datproject</a> et <a href="http://scuttlebot.io/">secure-scuttlebutt</a> quand à eux
  482. proposent de véritables réseaux P2P, au même titre que BitTorrent
  483. et Bitcoin par exemple. <strong>Dans les réseaux P2P, il n'y a plus de
  484. distinction entre les clients et les serveurs</strong>. Les utilisateurs
  485. prennent donc part entière aux échanges.</p>
  486. <h2>C'est quoi SSB?</h2>
  487. <p>SSB, scuttlebutt, secure-scuttlebutt, scuttlebot... c'est un peu mêlant.
  488. Sans trop aller dans les détails, disons pour commencer que les termes
  489. SSB, scuttlebutt et secure-scuttlebutt sont à peu près interchangeables.</p>
  490. <h3>Scuttlebutt</h3>
  491. <p>En gros, il s'agit d'une base de données <em>append-only</em> qui facilite la
  492. réplication et la consistence éventuelle. <em>Append-only</em> signifie
  493. que l'information n'est jamais modifiée ou effacée, mais seulement
  494. ajoutée.</p>
  495. <p>Cette base de donnée va contenir les données que vous y mettez
  496. ainsi que les données que vous allez répliquer à partir d'autres
  497. instances scuttlebutt.</p>
  498. <p>Quels genres de données? Des messages, des identifiants, des <em>blobs</em>,
  499. bref, un peu de tout.</p>
  500. <h3>Scuttlebot</h3>
  501. <p>Pour simplifier la réplication, le service scuttlebot est disponible.
  502. C'est le logiciel P2P responsable de partager vos données et de
  503. récupérer les données qui vous intéressent.</p>
  504. <p>En suivant des utilisateurs, scuttlebot s'occupera de recevoir
  505. les données de ces utilisateurs, et vice-versa.</p>
  506. <p>Le réseau P2P utilise <em>gossip</em>. Concrètement, les ordinateurs doivent
  507. être connectés entre-eux à un certain moment (mais pas tout le temps)
  508. pour échanger des données. Disons qu'on a les utilisateurs
  509. Pierre, Jean et Jacques.</p>
  510. <ul>
  511. <li>Pierre suit Jean et Jacques</li>
  512. <li>Jean suit Jacques</li>
  513. <li>Jean se connecte à Jacques et obtient ses données</li>
  514. <li>Pierre se connecte à Jean et obtient les données de Jean et Jacques,
  515. transitivement</li>
  516. </ul>
  517. <p>Dans ce scénario, Pierre ne s'est pas connecté directement à Jacques,
  518. mais il a quand même pu obtenir les données de Jacques, via Jean.
  519. C'est ce qu'on veut dire par <em>gossip</em>, ou commérages, potins, rumeurs.</p>
  520. <p>Mieux que des rumeurs, SSB est sécure et garanti que les données de
  521. Jacques obtenues via Jean seront intègres.</p>
  522. <h3>Patchwork</h3>
  523. <p>Si la réplication est basée sur un réseau social (ceux que vous
  524. suivez et qui vous suivent), une application évidente de SSB est
  525. un réseau social en bonne et due forme. Le logiciel patchwork est
  526. la réalisation de cette application.</p>
  527. <p>Jusqu'ici, scuttlebutt et scuttlebot sont des logiciels «système».
  528. Ils offrent une interface à la ligne de commande générique de
  529. bas niveau.</p>
  530. <p>Patchwork est une application desktop, un GUI qui donne forme au
  531. réseau social et permet de suivre et lire les messages, photos, <em>likes</em>
  532. des autres utilisateurs qui vous intéressent.</p>
  533. <p>C'est la façon recommandée de faire ses premiers pas dans le
  534. <em>scuttleverse</em>, bien qu'il existe d'autres clients plus légers
  535. comme on le verra plus loin dans ce document.</p>
  536. <p>Notez cependant qu'il s'agit d'un éxécutable de 50-70 MiB basé sur
  537. electron, qui lui-même est basé sur chromium et sur node, ces deux
  538. derniers reposant sur V8 pour l'engin JavaScript. Cette application
  539. inclut aussi scuttlebutt et scuttlebot. Autrement dit, ça prend
  540. pas mal de ressources en RAM et en CPU. Chez moi, ça fait monter
  541. la température de façon critique.</p>
  542. <h2>Installation</h2>
  543. <p>Nous allons installer quelques logiciels. Vous aurez besoin d'une
  544. version récente (6.x) de NodeJS.</p>
  545. <p>Si vous n'avez pas déjà node 6.x ou mieux, installez n pour gérer
  546. les versions de node:
  547. <code>curl -L https://git.io/n-install | bash</code></p>
  548. <p>Vous devez relancer le terminal pour utiliser n. Voir les détails:
  549. <a href="https://github.com/mklement0/n-install">https://github.com/mklement0/n-install</a></p>
  550. <h3>patchwork</h3>
  551. <p>Téléchargez patchwork à partir de <a href="https://github.com/ssbc/patchwork/releases">https://github.com/ssbc/patchwork/releases</a></p>
  552. <p>Au démarrage, une fenêtre devrait s'ouvrir sur votre <em>desktop</em> offrant
  553. le GUI.</p>
  554. <p><img alt="Capture d'écran Patchwork" src="patchwork-screenshot.jpg" /></p>
  555. <p>S'il y a d'autres utilisateurs de scuttlebot sur votre réseau local (LAN),
  556. peut-être en classe, au travail ou dans un café, votre instance
  557. commencera automatiquement à recevoir les données du réseau et vous
  558. pourrez chercher du contenu et des utilisateurs et les suivre,
  559. même s'il ne sont pas sur votre LAN. C'est l'effet <em>gossip</em>.</p>
  560. <p>Autrement, si vous êtes seul sur votre LAN, vous devrez vous connecter
  561. à un <strong>Pub</strong> public.</p>
  562. <p>Vous obtiendrez une invitation sur un des <a href="https://github.com/ssbc/scuttlebot/wiki/Pub-Servers">pubs publics sur le wiki</a>.</p>
  563. <p>Dans patchwork, cliquez sur «+ Join Pub» et copiez-y le code d'invitation
  564. que vous avez obtenu.</p>
  565. <p>Ainsi, vous suivrez ce <strong>Pub</strong> et vice-vera. Si vous n'avez pas encore
  566. synchronisé avec le réseau social, ça prendra quelques minutes pour
  567. vous mettre à jour.</p>
  568. <p>À partir d'ici, vous prenez par au scuttleverse. Vous pouvez me suivre:</p>
  569. <ul>
  570. <li>@dcWOOqyFtY1sEXv+rM0MzdINiYyIFFwom1NfmP4aMFo=.ed25519</li>
  571. <li><a href="http://viewer.scuttlebot.io/%25xLwTdQULCtpiRtRGKH3vETWDtaMPNrAc0ns4QjHrv3o%3D.sha256">http://viewer.scuttlebot.io/%25xLwTdQULCtpiRtRGKH3vETWDtaMPNrAc0ns4QjHrv3o%3D.sha256</a></li>
  572. </ul>
  573. <p>Personnellement, je n'utilise pas beaucoup le client Patchwork
  574. puisqu'il prend trop de ressources pour mon ordinateur. Les prochaines
  575. sections proposeront deux autres clients plus légers. Je mentionne
  576. quand même Patchwork puisque c'est une porte d'entrée facile.</p>
  577. <p>Le réseau supporte les messages publics et privés.</p>
  578. <h4>Messages publics</h4>
  579. <p>Tout ce que vous publierez sera disponible pour l'éternité sur le réseau,
  580. ainsi que les utilisateurs que vous mentionnerez, alors pensez-y bien
  581. avant d'écrire tout ce qui vous passe par la tête :-)</p>
  582. <h4>Messages privés</h4>
  583. <p>Vous pouvez aussi échanger des messages privés. Ces derniers ne pourront
  584. être lus que par leurs destinataires et la liste des destinataires
  585. demeure aussi privée (encryptée).</p>
  586. <p>Le réseau verra cependant que vous avez envoyé un message privé, sans
  587. connaitre son contenu ou destinataires, et pourra faire suivre ce
  588. message comme les autres en P2P avec <em>gossip</em>.</p>
  589. <h3>scuttlebot</h3>
  590. <p>Les prochains clients proposés reposent sur le logiciel scuttlebot,
  591. ou sbot à la ligne de commande. Node est installé? Parfait,
  592. on peut procéder à l'installer et démarrer le serveur:
  593. <code>npm install --global scuttlebot
  594. sbot server</code></p>
  595. <p>Si vous avez installé Patchwork à l'étape précédente, votre nouvelle
  596. instance de scuttlebot devrait se connecter et synchroniser en
  597. priorisant les utilisateurs suivis.</p>
  598. <p>Un <em>log</em> devrait rapidement remplir le terminal où vous avez lancé
  599. <strong>sbot server</strong>. Mais pas de GUI, c'est normal.</p>
  600. <p>Vous avez tout de même une interface complète pour accéder et participer
  601. au scuttleverse, à la ligne de commande. Pour obtenir la liste de
  602. toutes les commandes:
  603. <code>sbot --help</code></p>
  604. <p>Par exemple, pour confirmer que vous utilisez la bonne identité:
  605. <code>sbot whoami # afficher votre clé publique (identifiant)</code></p>
  606. <p>Vous pouvez lire des messages, en envoyer, suivre des utilisateurs
  607. et ainsi de suite, mais ça prend des commandes plutôt fastidieuses
  608. à taper.</p>
  609. <p>sbot offre aussi une interface RPC sur le port 8008 par défaut, qui
  610. sera utilisée par les prochains clients.</p>
  611. <h4>Plugins scuttlebot</h4>
  612. <ul>
  613. <li>ssb-notifier</li>
  614. <li>ssb-links</li>
  615. <li>ssb-query</li>
  616. <li>ssb-ws</li>
  617. <li>ssb-fulltext</li>
  618. <li>patchfoo</li>
  619. <li>dnssb</li>
  620. </ul>
  621. <h3>patchbay</h3>
  622. <h3>patchfoo</h3>
  623. <p>Client simple qui s'utilise via votre fureteur préféré (incluant dillo).</p>
  624. <h2>Plus qu'un réseau social</h2>
  625. <p>Si patchwork, patchbay et patchfoo offrent des représentations du
  626. scuttleverse de type réseau social, d'autres types d'applications
  627. sont possible, qui reposent sur la même architecture P2P.</p>
  628. <h3>ssb-git</h3>
  629. <p>git est un gestionnaire de code, décentralisé par nature. Pour accéder
  630. à un dépot, il faut en connaitre l'adresse, souvent par les protocoles
  631. http/https ou ssh. On peut cloner ce dépot plus ou moins manuellement à
  632. une autre adresse. Ainsi, on peut continuer de coder sur un vol de 5h
  633. sans wifi. Avant git, cvs et svn étaient la norme, mais avec ces derniers
  634. on ne pouvait faire de commit sans connection. C'était complètement
  635. centralisé.</p>
  636. <p>Par leur nature, les dépots ont chacun une forme de centralisation,
  637. c'est à dire un auteur, <em>maintainer</em> ou un groupe qui est responsable
  638. de ce qui sera commis dans la version dite officielle de dépot.</p>
  639. <p>Si un dépot est sur notre laptop et qu'un autre utilisateur veut
  640. en faire un clone, il doit y avoir accès d'une certaine façon. Peut-être
  641. par ssh ou un autre protocole. Mais le plus souvent, on fera nous
  642. même un clone de notre dépot qu'on tiendra à jour sur un service public
  643. (ou non) et accessibles en ligne. GitHub, GitLab et BitBucket sont des
  644. options fréquentes.</p>
  645. <p>Avec ssb-git, on fera un clone de notre dépot et on le publiera dans le
  646. scuttleverse.</p>
  647. <p>Pour installer ssb-git:</p>
  648. <p><code>npm install --global git-ssb</code></p>
  649. <h4>Usage</h4>
  650. <blockquote>
  651. <p>Tiré de <a href="https://github.com/clehner/git-ssb/blob/master/README.md#usage">https://github.com/clehner/git-ssb/blob/master/README.md#usage</a></p>
  652. </blockquote>
  653. <p>Vous pouvez utiliser un <em>remote</em> <code>ssb://</code> comme n'importe quel autre
  654. <em>remote</em> git. Un dépot sur ssb est identifé par un message ID.
  655. Pour créer un nouveau dépot git sur ssb, utilisez la commande
  656. <code>git ssb create</code>. Vous ne pouvez <em>pusher</em> que sur les dépots ssb git
  657. que vous avez créé et non sur les dépots des autres.</p>
  658. <h4>Exemples</h4>
  659. <p>Publier un dépot existant sur ssb:
  660. <code>cd repo
  661. git ssb create ssb my-cool-repo
  662. git push --tags --set-upstream ssb master</code></p>
  663. <p>Pour cloner un dépot à partir de ssb:
  664. <code>git clone ssb://&lt;msgId&gt; repo</code></p>
  665. <p>*Fork un dépot ssb git que vous avez cloné:
  666. ```
  667. cd repo
  668. git ssb fork mine</p>
  669. <h1>edit and commit, then push changes:</h1>
  670. <p>git push mine
  671. ```</p>
  672. <p>Démarrer un serveur web pour browser (à la github):
  673. <code>git ssb web</code></p>
  674. <h1>Alternatives</h1>
  675. <ul>
  676. <li>Matrix (riot)</li>
  677. <li>dat project (hypercore/hyperdrive)</li>
  678. <li>ZeroNet</li>
  679. <li>CouchDB (mécanisme de réplication éventuellement consistent)</li>
  680. <li>Et bien plus!</li>
  681. </ul>
  682. <h2>Todo</h2>
  683. <ul>
  684. <li>Liens ssb vs liens http</li>
  685. </ul>
  686. </article>
  687. </section>
  688. <nav id="jumpto">
  689. <p>
  690. <a href="/david/blog/">Accueil du blog</a> |
  691. <a href="https://git.scuttlebot.io/%253qtmFApy1Es5BVA7JIhrlfahcWqBp%2F7I391i%2BxQ1HP8%3D.sha256">Source originale</a> |
  692. <a href="/david/stream/2019/">Accueil du flux</a>
  693. </p>
  694. </nav>
  695. <footer>
  696. <div>
  697. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  698. <p>
  699. Bonjour/Hi!
  700. 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>
  701. 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>).
  702. </p>
  703. <p>
  704. 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>.
  705. </p>
  706. <p>
  707. Voici quelques articles choisis :
  708. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  709. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  710. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  711. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  712. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  713. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  714. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  715. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  716. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  717. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  718. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  719. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  720. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  721. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  722. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  723. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  724. </p>
  725. <p>
  726. 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>.
  727. </p>
  728. <p>
  729. Je ne traque pas ta navigation mais mon
  730. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  731. conserve des logs d’accès.
  732. </p>
  733. </div>
  734. </footer>
  735. <script type="text/javascript">
  736. ;(_ => {
  737. const jumper = document.getElementById('jumper')
  738. jumper.addEventListener('click', e => {
  739. e.preventDefault()
  740. const anchor = e.target.getAttribute('href')
  741. const targetEl = document.getElementById(anchor.substring(1))
  742. targetEl.scrollIntoView({behavior: 'smooth'})
  743. })
  744. })()
  745. </script>