davidbgk
/
larlet-fr-david-cache
Следить 1
В избранное 0
Форкнуть 0
Код Релизы 0 Активность
A place to cache linked articles (think custom and personal wayback machine)
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
169 коммитов
1 ветка
Дерево: df9a5c5108
Ветки Теги
${ item.name }
Создать ветку ${ searchTerm }
из 'df9a5c5108'
${ noResults }
larlet-fr-david-cache/cache/203650d02bde8c120ff702cf04e.../index.html

index.html 31KB
Исходник Blame История

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576 
  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>WDRL 270 (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://wdrl.info/archive/270">

  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.   WDRL 270 (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://wdrl.info/archive/270">Source originale du contenu</a></h3>

  463.     <p>Hey,</p>

  464. 

  465. <p>Today take some time to have a deep breath and remember what happened this week. Go through it day by day and apprecuate the actions, the negative ones as well as the positive ones. Accept that negative things happen in our lives as well, otherwise we would also not be able to feel good. It’s a helpful excercise to balance your life, to have a way of invalidating the feeling  of “I did nothing this week” or “I was quite unproductive”. It makes you understand why you might not have worked as much as you’re used to — but it feels fine, because there’s a reason for it.</p>

  466. 

  467. <p>All the climate change news is overwhelming, politicians not acting in the interest of our planet can create anger. But remember that everything starts with yourself. If you start a business, <em>you</em> need to do it. If you are sick, you need to take action to get well again — even if the best action is to do nothing but relax and sleep. How do you build a successful business, how do you get well again? You give it time, you care about it and yourself and you tell people about it with passion. If you do the same about climate change — instead of moaning that no one does anything — but talk to people and tell them why buying less, driving less with the car, flying less (especially for bussiness) are chances to improve the own life, that’s how people change their minds. We’re living in a luxury society where we buy so many things that don’t make us really happy, e.g. TVs, computers, smartphones, smart home devices, cars. Of course they have some benefits but we usually forget about the benefits of a simple, natural life. Sitting under a tree in a park or in the forest can be way more relaxing than watching another action TV series. It’s unconvenient the first time you do it but after experiencing the difference, we might think differently about it. We will value nature much more, and therefore need to care more to preserve our environment. No matter what action you do, if it’s talking to others, retweeting something, building a environmental project, ditching the car to walk or bike next time you go shopping or for dinner, it has a positive impact on yourself — and the environment.</p>

  468. 

  469. <p>We should direct our attention to find ways to solve problems affecting our own health, our environment, the world we live in. A good example of action for developers is <a href="https://fixathon.io/?ref=WDRL.info">the world's first online hackathon to help fix the climate</a>, running between today and end of August. In order to attract people you can win quite some nice prices as well. What to do?  Use your tech skills to build and launch projects intended to help fix the climate and submit them.</p>

  470. 

  471. <h3>News</h3>

  472. 

  473. <ul id="news">

  474.     <li has-linktools="" id="earth-overshoot-day-2019-signals-strain-on-planet-s-resources">Last week <a href="https://www.fastcompany.com/90381219/weve-officially-exhausted-the-earths-natural-resources-for-the-year">we officially exhausted the earth’s natural resources for the year</a> — with four months left in 2019. <a href="https://www.overshootday.org/">Earth Overshoot Day</a> is a good indicator of where we’re currently at to fight climate change and it’s a great initiative by people who try to give helpful advice on how we can move that date so one day in (hopefully) near future we reach overshoot day again at the end of the year or even in a new year.<a class="save-service-link" target="_blank" href="https://getpocket.com/save?url=https%3A%2F%2Fwdrl.info%2Farchive%2F270%2Fearth-overshoot-day-2019-signals-strain-on-planet-s-resources&amp;title=Earth+Overshoot+Day+2019+signals+strain+on+planet%27s+resources"><svg viewbox="0 0 48 48" class="save-service-link-icon pocket"><use xlink:href="/assets/icons/getpocket.svg#getpocket"/></svg></a></li>

  475.     <li has-linktools="" id="new-in-chrome-76-web-google-developers"><a href="https://developers.google.com/web/updates/2019/07/nic76">Chrome 76</a> brings <code>prefers-color-scheme</code> Media Query for e.g. dark mode support, and multiple simplifications for PWA installation.<a class="save-service-link" target="_blank" href="https://getpocket.com/save?url=https%3A%2F%2Fwdrl.info%2Farchive%2F270%2Fnew-in-chrome-76-web-google-developers&amp;title=New+in+Chrome+76+%C2%A0%7C%C2%A0+Web+%C2%A0%7C%C2%A0+Google+Developers"><svg viewbox="0 0 48 48" class="save-service-link-icon pocket"><use xlink:href="/assets/icons/getpocket.svg#getpocket"/></svg></a></li>

  476. </ul>

  477. 

  478. <h3>UI/UX</h3>

  479. 

  480. <h3>Privacy</h3>

  481. 

  482. <h3>Web Performance</h3>

  483. 

  484. <ul id="webperformance">

  485.     <li has-linktools="" id="fast-software-the-best-software-by-craig-mod">Craig Mod shares <a href="https://craigmod.com/essays/fast_software/">why people prefer to choose and are happy to pay for fast software</a>. People are grateful for it, and are easily annoyed if the app takes half too many seconds to start up or is showing a laggy or even blocked user interface.<a class="save-service-link" target="_blank" href="https://getpocket.com/save?url=https%3A%2F%2Fwdrl.info%2Farchive%2F270%2Ffast-software-the-best-software-by-craig-mod&amp;title=Fast+Software%2C+the+Best+Software+%E2%80%94+by+Craig+Mod"><svg viewbox="0 0 48 48" class="save-service-link-icon pocket"><use xlink:href="/assets/icons/getpocket.svg#getpocket"/></svg></a></li>

  486.     <li has-linktools="" id="i-used-the-web-for-a-day-on-a-50-mb-budget-smashing-magazine">Some experiments sound silly but in reality, they’re not: <a href="https://www.smashingmagazine.com/2019/07/web-on-50mb-budget/">Chris Ashton used the web for a day on a 50MB budget</a>. In Zimbabwe, for example, where 1 GB cost an average of $75.20, ranging from $12.50 to $138.46, 50MB is incredibly expensive. So reducing your app bundle size, image size and website cost is directly related how happy users are being on your site. If it costs them $3.76 (50MB) to access your new sports shoe teaser page, it’s unlikely that they will buy or recommend it.<a class="save-service-link" target="_blank" href="https://getpocket.com/save?url=https%3A%2F%2Fwdrl.info%2Farchive%2F270%2Fi-used-the-web-for-a-day-on-a-50-mb-budget-smashing-magazine&amp;title=I+Used+The+Web+For+A+Day+On+A+50+MB+Budget+%E2%80%94+Smashing+Magazine"><svg viewbox="0 0 48 48" class="save-service-link-icon pocket"><use xlink:href="/assets/icons/getpocket.svg#getpocket"/></svg></a></li>

  487. </ul>

  488. 

  489. <h3>JavaScript</h3>

  490. 

  491. <h3>Work &amp; Life</h3>

  492. 

  493. <ul id="worklife">

  494.     <li has-linktools="" id="five-simple-actions-to-help-you-gain-more-time-yellowstroke-com">How to gain more time during your work day? Of course it depends on how you currently spend your time but a couple of tips shares in this <a href="https://yellowstroke.com/2019/07/18/protect-your-time/">Protect your time</a> article are worth trying them out: Try to cancel unnecessary meetings, reduce meeting times by even only 10 minutes, and strictly prioritize them.<a class="save-service-link" target="_blank" href="https://getpocket.com/save?url=https%3A%2F%2Fwdrl.info%2Farchive%2F270%2Ffive-simple-actions-to-help-you-gain-more-time-yellowstroke-com&amp;title=Five+simple+actions+to+help+you+gain+more+time+-+Yellowstroke.com"><svg viewbox="0 0 48 48" class="save-service-link-icon pocket"><use xlink:href="/assets/icons/getpocket.svg#getpocket"/></svg></a></li>

  495.     <li has-linktools="" id="how-to-onboard-a-new-hire-signal-v-noise" class="is-highlight">So you hired someone for your company. That already was hard work in most cases but what’s even harder is how to onboard people so they feel comfortable at their new job, but also can work effectively and without doubts in their first weeks. Claire Lew shares a great article about it: <a href="https://m.signalvnoise.com/how-to-onboard-a-new-hire/">How to onboard a new hire</a>.<a class="save-service-link" target="_blank" href="https://getpocket.com/save?url=https%3A%2F%2Fwdrl.info%2Farchive%2F270%2Fhow-to-onboard-a-new-hire-signal-v-noise&amp;title=How+to+onboard+a+new+hire+-+Signal+v.+Noise"><svg viewbox="0 0 48 48" class="save-service-link-icon pocket"><use xlink:href="/assets/icons/getpocket.svg#getpocket"/></svg></a></li>

  496.     <li has-linktools="" id="smcllw-me" class="is-highlight">Sam Clulow’s <a href="https://smcllw.me/green/">Our Planet, Our Problem</a> is a great piece of writing that reminds us of <em>who we are</em> and <em>what’s important for us</em> and how to live in a city and switch to a better, more thoughtful and natural life.<a class="save-service-link" target="_blank" href="https://getpocket.com/save?url=https%3A%2F%2Fwdrl.info%2Farchive%2F270%2Fsmcllw-me&amp;title=%F0%9F%93%B0+-+smcllw.me"><svg viewbox="0 0 48 48" class="save-service-link-icon pocket"><use xlink:href="/assets/icons/getpocket.svg#getpocket"/></svg></a></li>

  497.     <li has-linktools="" id="this-is-what-aviation-s-busiest-air-travel-day-looks-like" class="is-highlight">You know, climate change is a topic all around the world now and it seems that many people are concerned about it and want to act on it. But then, <a href="https://www.fastcompany.com/90382380/this-is-what-aviations-busiest-air-travel-day-looks-like">last week we had the busiest air-travel day ever in history</a>. Airplanes are accountable for one of the biggest part of climate active emissions, so it’s key to reduce air travel as much as possible <em> from today on</em>. Coincidentally, this was also the hottest week measured in Europe ever. We as individuals need to cut down flights finally, regardless how tempting the next holiday flight for $50 is to a nice holiday destination, regardless if it’s an important business meeting. What do we have video conferencing solutions for? Why do people claim to work remotely if they then fly around the world dozens of times in their life? There are so many nice destinations nearby, reachable by train or if needed by car.<a class="save-service-link" target="_blank" href="https://getpocket.com/save?url=https%3A%2F%2Fwdrl.info%2Farchive%2F270%2Fthis-is-what-aviation-s-busiest-air-travel-day-looks-like&amp;title=This+is+what+aviation%27s+busiest+air-travel+day+looks+like"><svg viewbox="0 0 48 48" class="save-service-link-icon pocket"><use xlink:href="/assets/icons/getpocket.svg#getpocket"/></svg></a></li>

  498.     <li has-linktools="" id="what-happened-when-our-team-switched-to-only-asynchronous-meetings">Synchronous meetings are a problem in nearly every company. They take a lot of time from a lot of people and disrupt any schedule or focused work. So here’s <a href="https://open.buffer.com/asynchronous-meetings/">how Buffer switched to asynchronous meetings</a>, including great tips and insights on why many tools out there don’t work well.<a class="save-service-link" target="_blank" href="https://getpocket.com/save?url=https%3A%2F%2Fwdrl.info%2Farchive%2F270%2Fwhat-happened-when-our-team-switched-to-only-asynchronous-meetings&amp;title=What+Happened+When+Our+Team+Switched+to+Only+Asynchronous+Meetings"><svg viewbox="0 0 48 48" class="save-service-link-icon pocket"><use xlink:href="/assets/icons/getpocket.svg#getpocket"/></svg></a></li>

  499. </ul>

  500. 

  501. <h3>Go beyond…</h3>

  502. 

  503. <ul id="gobeyond">

  504.     <li has-linktools id="cutting-through-indecision-overthinking-zen-habits">Leo Babauta shares a tip on <a href="https://zenhabits.net/overthink/">how to stop overthinking by cutting through indecision</a>. We will never have the certaincy we’d like to have in our lives so a strategy to deal with uncertaincy is quite good to have. As I’m struggling with this a lot, I found the article helpful.<a class="save-service-link" target="_blank" href="https://getpocket.com/save?url=https%3A%2F%2Fwdrl.info%2Farchive%2F270%2Fcutting-through-indecision-overthinking-zen-habits&title=Cutting+Through+Indecision+%26+Overthinking+%3A+zen+habits"><svg viewBox="0 0 48 48" class="save-service-link-icon pocket" width="18" height="18"><use xlink:href="/assets/icons/getpocket.svg#getpocket"></use></svg></a></li>

  505.     <li has-linktools id="ethiopia-plants-350m-trees-in-a-day-to-help-tackle-climate-crisis-world-news-the-guardian">What can you do to fight climate change, especially if you’re in a dry and hot area that will be affected a lot by rising temperatures? Well, <a href="https://www.theguardian.com/world/2019/jul/29/ethiopia-plants-250m-trees-in-a-day-to-help-tackle-climate-crisis">Ethiopia just planted 250 million trees in a day</a> during a government supported, people-led initiative to reduce carbon emissions.<a class="save-service-link" target="_blank" href="https://getpocket.com/save?url=https%3A%2F%2Fwdrl.info%2Farchive%2F270%2Fethiopia-plants-350m-trees-in-a-day-to-help-tackle-climate-crisis-world-news-the-guardian&title=Ethiopia+plants+350m+trees+in+a+day+to+help+tackle+climate+crisis+%7C+World+news+%7C+The+Guardian"><svg viewBox="0 0 48 48" class="save-service-link-icon pocket" width="18" height="18"><use xlink:href="/assets/icons/getpocket.svg#getpocket"></use></svg></a></li>

  506.     <li has-linktools id="implementing-the-one-viable-solution-to-climate-change">In order <a href="https://www.forbes.com/sites/stevedenning/2019/07/21/implementing-the-one-viable-solution-to-climate-change/">to fight climate change a new moon shot project and innovation would be a desired goal</a>&#8202;—&#8202;and why we’re currently not doing it.<a class="save-service-link" target="_blank" href="https://getpocket.com/save?url=https%3A%2F%2Fwdrl.info%2Farchive%2F270%2Fimplementing-the-one-viable-solution-to-climate-change&title=Implementing+The+One+Viable+Solution+To+Climate+Change"><svg viewBox="0 0 48 48" class="save-service-link-icon pocket" width="18" height="18"><use xlink:href="/assets/icons/getpocket.svg#getpocket"></use></svg></a></li>

  507.     <li has-linktools id="visual-business-intelligence-ethical-data-sensemaking" class="is-highlight">The ethical practices that can serve as a code of conduct for data sensemaking professionals are built upon a single fundamental principle. It is the same principle that medical doctors swear as an oath before becoming licensed: Do no harm. Here’s <a href="http://www.perceptualedge.com/blog/?p=2914">Ethical Data Sensemaking</a>.<a class="save-service-link" target="_blank" href="https://getpocket.com/save?url=https%3A%2F%2Fwdrl.info%2Farchive%2F270%2Fvisual-business-intelligence-ethical-data-sensemaking&title=Visual+Business+Intelligence+%E2%80%93+Ethical+Data+Sensemaking"><svg viewBox="0 0 48 48" class="save-service-link-icon pocket" width="18" height="18"><use xlink:href="/assets/icons/getpocket.svg#getpocket"></use></svg></a></li>

  508. </ul>

  509. 

  510. <p><strong>If you like what I write, please <a href="https://wdrl.info/donate">contribute with your money</a>.</strong> If you want to read some inspiring stories on how to shape our society by working in tech, how to build better collaborations, how to not get trapped by media, I recommend to <a href="https://www.offscreenmag.com/issues/21?ref=WDRL.info">have a look at the Offscreen Magazine No. 21</a></p>

  511. 

  512. <p><em>—Anselm</em></p>

  513.   </article>

  514. </section>

  515. 

  516. 

  517. <nav id="jumpto">

  518.   <p>

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

  520.     <a href="https://wdrl.info/archive/270">Source originale</a> |

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

  522.   </p>

  523. </nav>

  524. 

  525. <footer>

  526.   <div>

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

  528.     <p>

  529.       Bonjour/Hi!

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

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

  532.     </p>

  533.     <p>

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

  535.     </p>

  536.     

  537.     <p>

  538.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  555.     </p>

  556.     <p>

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

  558.     </p>

  559.     <p>

  560.       Je ne traque pas ta navigation mais mon

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

  562.       conserve des logs d’accès.

  563.     </p>

  564.   </div>

  565. </footer>

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

  567.   ;(_ => {

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

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

  570.       e.preventDefault()

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

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

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

  574.     })

  575.   })()

  576. </script>