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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605
  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>Weeknote 18 - Uncertainty and Discomfort (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://www.baldurbjarnason.com/weeknote-18/">
  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. Weeknote 18 - Uncertainty and Discomfort (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://www.baldurbjarnason.com/weeknote-18/">Source originale du contenu</a></h3>
  445. <p>Idle thoughts on the consequences of success.</p>
  446. <h2 id="work">Work</h2>
  447. <p>I’ve often referred to my current project at work here in these weeknotes. I’ve generally avoided naming it or giving any detail because IMO it still isn’t ready for the full promotional push. Which will hopefully happen November-ish.</p>
  448. <p>In broad strokes, the idea we had over three years ago was to create an alternative approach to digital reading, one that embraced the web, was delivered on the web as a progressive web app, and tried to address use cases that aren’t being covered that well by existing solutions, closed or open.</p>
  449. <p>By going all-in on progressive web apps we could circumvent the native app platforms which have a deserved reputation for being closed silos that aren’t particularly friendly to open source and open communities.</p>
  450. <p>Our research showed that academia, in particular, isn’t particularly well served by existing solutions and is more or less stuck using PDFs.</p>
  451. <p>Others agreed, so we got funding to build a progressive web app with the goal of selling it as a service that university libraries could offer to students and staff alike.</p>
  452. <p>The fact that we’re likely to fail has never worried me much. Trying deliberately to create something new that works differently from the norm is always risky—in addition to a healthy dollop of implementation risk you are also likely to start off much much lower on the <a href="https://en.wikipedia.org/wiki/Technology_adoption_life_cycle">adoption curve</a> than your competitors.</p>
  453. <p>Basically, we’ve picked a task that’s both implicitly harder to do and is less likely to be broadly accepted than many other approaches to similar problems.</p>
  454. <p>Which, honestly, makes the job all the more interesting. Even if we fail, there’s a decent chance that others will find value in what we do. Some of our crazy ideas will be revealed to be obviously crazy so others will know not to bother. Some of them might turn out to be practical enough to be copied by other projects. Some of them will inevitably be half-baked but interesting enough for others to take on and fully bake.</p>
  455. <p>Because it’s a research project that’s making an open source web app, failure is still valuable and worthwhile. Unlike the work of most closed source start-ups, ours won’t be flushed down the toilet if we run out funding.</p>
  456. <p>So, failure? Not that scary, even if it would mean having to search for a new job.</p>
  457. <p>Which means that it’s all upside, right? Failure being the worst case scenario, right?</p>
  458. <p>That’s the weird part. Because of how much the academic and tech landscape has changed over the past three years, there’s actually a lot <em>more</em> uncertainty in success than in failure. (Which is obvious when you think about it, there aren’t any error bars when the result is a zero. But I digress.)</p>
  459. <ul>
  460. <li>The relationship between academic libraries and other university institutions and many Software-as-a-Service providers have gone from contentious but cordial to almost openly hostile.</li>
  461. <li>It’s become clearer and clearer that it’s extremely hard to deliver a Software-as-a-Service business that preserves and protects the user’s privacy.</li>
  462. <li>Students, especially, often aren’t in the position to deny consent to privacy-invasive services that have been bought by their teaching institutions.</li>
  463. <li>Any given SaaS, if successful, has very strong business incentives to become privacy-invasive in the long run.</li>
  464. <li>Your reading is <em>extremely</em> sensitive private information and changing political circumstances have only made reading data more sensitive. It’s easy to imagine a university expelling a student just for the act of reading ‘The Anarchist Cookbook’ in a university-provided reading app.</li>
  465. <li>‘Open’ in particular has turned out to be a little bit too morally neutral as a general approach—often all too easily leveraged by unethical and manipulative corporations.</li>
  466. <li>And it turns out Apple, at least, had a good point about the value of locking down the platform somewhat, letting it provide its users with more privacy guarantees than a progressive web app can realistically deliver. Even a die hard web nut like me has to admit that they might be on to something.</li>
  467. </ul>
  468. <p>If, in a year’s time, we are substantially successful and our web app has been adopted by numerous libraries and academic institutions, that puts us in a very uncertain situation. We will need to have a clear idea about how to protect readers both from us and from the institutions that will be paying us. We’re likely to have every incentive not to and the institutions that will be our clients are likely to be <em>very</em> opposed to the idea that students and staff need to be protected from them. We’ll likely be under pressure to ‘tone down’ the app to make it more broadly accessible. Finally, odds are that we will have to build native apps <em>anyway</em>. Not because they provide a better experience but because many institutions actually like the control that closed native app platforms provide.</p>
  469. <p>Success, for any project, always requires a shift from fast-paced experimentation to a more conservative focus on stability and integrations. Which is interesting in its own right. It could be fun. The privacy and power dynamics involved with selling a SaaS to universities while serving a very vulnerable student population, however, are very worrying.</p>
  470. <p>You could say that if universities are going to buy into a SaaS, you’d want it to be one run exactly by people who are uncomfortable with the burden and who actively worry about the power they’ve been given.</p>
  471. <p>Possibly true. Still stressful. And power has a way of corrupting those that get it.</p>
  472. <h2 id="books">Books</h2>
  473. <p>I’ve been reading a <em>lot</em> of comics over the past few days:</p>
  474. <p>Read two-thirds of Warren Ellis’s <em>The Wild Storm</em> which looks pretty good so far and honestly owes more to cyberpunk sci-fi than it does to the superhero genre. Which is good because the superhero genre is getting a bit tired.</p>
  475. <p>Read a few Gaston LaGaffe albums, in both Icelandic and French. I’m struggling somewhat with the French but having the Icelandic versions when possible helps a lot.</p>
  476. <p>Read three books in Schuiten and Peeter’s <em>The Obscure Cities</em> series. All are technically excellent and marvellously structured. <em>Samaris</em> is enticing and weird—intentionally confusing in an entertaining way. <em>The Leaning Girl</em> is an technical marvel that’s full of references to Jules Verne and the like. But it’s also a work that is totally ruined by the entire story building up to a scene where a middle-aged author stand-in has sex with the teenage girl protagonist.</p>
  477. <p>Ick.</p>
  478. <p>I mean, really? That’s what you were building up to this entire time? That’s the big climax? It turned a potentially interesting, if overly intertextual and partially overwrought story into a self-indulgent piece of incoherent nonsense.</p>
  479. <p>I almost didn’t read <em>The Theory of The Grain of Sand</em> as a result, but that turned out to be much, much better. Thoroughly indecipherable and weird in an extremely entertaining way.</p>
  480. <p>None of these three books are for those who prefer their stories to have coherent plots and <em>The Leaning Girl</em> is <strong>definitely</strong> not for anybody who’s had their fill of self-indulgent middle-aged men writing wish-fulfilment fantasies about bedding teenage girls. But if you like brilliantly illustrated weird stories, <em>Samaris</em> and <em>The Theory of The Grain of Sand</em> are a lot of fun.</p>
  481. <h2 id="photography">Photography</h2>
  482. <p>I’ve been digging through my archives to find old photos and came across a few that were quite tolerable, despite being a few years old and, in many cases shot on an iPhone 6 Plus.</p>
  483. <p class="FullWidth"><img src="https://www.baldurbjarnason.com/images/weeknote-18/clifton-down-adb88a5d80c5ca75.jpg" alt="Heading into the light at the Clifton Down park in Bristol"/></p>
  484. <p class="FullWidth"><img src="https://www.baldurbjarnason.com/images/weeknote-18/tourists-DSCF2941.jpeg" alt="A silhouette of a group of tourists in Iceland"/></p>
  485. <p class="FullWidth"><img src="https://www.baldurbjarnason.com/images/weeknote-18/snæfellsjökull-6dd8e30ddc8c0653.jpeg" alt="Heading up the Snæfellsjökull peak"/></p>
  486. <p class="FullWidth"><img src="https://www.baldurbjarnason.com/images/weeknote-18/snæfellsjökull-03a333f6e2b8c75f.jpeg" alt="Heading down the Snæfellsjökull peak"/></p>
  487. <p>These last two are interesting as they are taken at the peak of the glacier that you can see on the horizon in this picture I posted a couple of weeks ago.</p>
  488. <p class="FullWidth"><img src="https://www.baldurbjarnason.com/images/weeknote-16/DSCF2856.jpg" alt="Snæfellsjökull visible by Garðsviti"/></p>
  489. </article>
  490. </section>
  491. <nav id="jumpto">
  492. <p>
  493. <a href="/david/blog/">Accueil du blog</a> |
  494. <a href="https://www.baldurbjarnason.com/weeknote-18/">Source originale</a> |
  495. <a href="/david/stream/2019/">Accueil du flux</a>
  496. </p>
  497. </nav>
  498. <footer>
  499. <div>
  500. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  501. <p>
  502. Bonjour/Hi!
  503. 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>
  504. 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>).
  505. </p>
  506. <p>
  507. 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>.
  508. </p>
  509. <p>
  510. Voici quelques articles choisis :
  511. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  512. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  513. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  514. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  515. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  516. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  517. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  518. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  519. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  520. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  521. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  522. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  523. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  524. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  525. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  526. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  527. </p>
  528. <p>
  529. 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>.
  530. </p>
  531. <p>
  532. Je ne traque pas ta navigation mais mon
  533. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  534. conserve des logs d’accès.
  535. </p>
  536. </div>
  537. </footer>
  538. <script type="text/javascript">
  539. ;(_ => {
  540. const jumper = document.getElementById('jumper')
  541. jumper.addEventListener('click', e => {
  542. e.preventDefault()
  543. const anchor = e.target.getAttribute('href')
  544. const targetEl = document.getElementById(anchor.substring(1))
  545. targetEl.scrollIntoView({behavior: 'smooth'})
  546. })
  547. })()
  548. </script>