9 changed files with 1557 additions and 0 deletions
+ 192
- 0
cache/2023/3f4be4add2995420dc6be529f1032e46/index.html
View File
| @@ -0,0 +1,192 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Energy makes time (archive) — David Larlet</title> | |||
| <meta name="description" content="Publication mise en cache pour en conserver une trace."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://everythingchanges.us/blog/energy-makes-time/"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Energy makes time</h1> | |||
| </header> | |||
| <nav> | |||
| <p class="center"> | |||
| <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use> | |||
| </svg> Accueil</a> • | |||
| <a href="https://everythingchanges.us/blog/energy-makes-time/" title="Lien vers le contenu original">Source originale</a> | |||
| </p> | |||
| </nav> | |||
| <hr> | |||
| <p>BECAUSE I WORK WITH a lot of high performers, the kind of people who are frequently responsive to both the unending needs of their workplace and the unending needs of their kin, I often find myself listening as someone talks about being out of time. Even the most progressive and thoughtful organizations regularly cultivate situations where the amount of work outstrips the capacity of the people in place to do it. Combine that with our appalling lack of support for caretakers, the administrative burden of accessing your healthcare, the often thankless tasks of keeping house and home, and it’s no wonder that even the people most trained in solving tricky problems run into a hard wall with this one.</p> | |||
| <p>There are tactics, of course, and by the time people have come to me, they’ve usually tried them all. They’ve reorganized their calendar. They’ve blocked out time. They’ve sat down with their partner to talk about what they each need and who’s going to cook for mom next week. They’ve prioritized. They’ve delegated. They’ve told their boss what they’re going to stop doing. They’ve told their reports what they no longer have room for. They’ve automated those two tasks that were taking too long. They’ve asked for more budget. They’ve asked to push a deadline. They’ve time-shifted. They’ve hacked their bedtime. They’ve cut out tea/coffee/soda/gluten/swedish fish. They’ve <em>pomodoroed</em>, for fuck’s sake.</p> | |||
| <p>It hasn’t worked.</p> | |||
| <p>Often, when I’m listening to this, I get the picture of someone ensconced within the high walls of a castle, the ramparts lined with archers, the grounds protected by a moat, as they stare steely-eyed and resolute off into the distance—where an enormous catapult is preparing to launch a flaming rock as big as the moon their way.</p> | |||
| <p>I don’t mean to demean any of those time-management tactics—or any of the others out there either. My philosophy is to accept any and all tools, to tuck them into the toolbox until such time as they seem fit. Most of the recommended habits will work, at least some of the time. Sometimes blocking off some time on your calendar is exactly what you need. Sometimes shifting your schedule or skipping some meetings or putting yourself to bed on time does the trick. Knowing which trick you need now—and which one you’ll need next time—comes with experience and the kind of situational awareness that can be cultivated with (<em>wait for iiiiit…</em>) time.</p> | |||
| <p>But there’s something else I want to suggest here, and it’s to stop thinking about time entirely. Or, at least, to stop thinking about time as something <em>consistent.</em> We all know that time can be stretchy or compressed—we’ve experienced hours that plodded along interminably and those that whisked by in a few breaths. We’ve had days in which we got so much done we surprised ourselves and days where we got into a staring contest with the to-do list and the to-do list didn’t blink. And we’ve also had days that left us puddled on the floor and days that left us pumped up, practically leaping out of our chairs. What differentiates these experiences isn’t the number of hours in the day but the <em>energy</em> we get from the work. Energy <em>makes</em> time.</p> | |||
| <p>Here’s a concrete example, and perhaps a familiar one: someone is so busy with work and caretaking that they don’t make time for their art. At the end of the day they’re too tired to write or paint or make music or whathaveyou. So they don’t. Days, then weeks go by. They are more and more tired. They are getting less and less done. They take a mental health day and catch up on sleep but the exhaustion persists. Their overwhelm grows larger, becomes intolerable. The usual tactics don’t work. The catapult trundles closer.</p> | |||
| <p>Then one day they say fuck it all. They eat leftover pasta over the sink, drop mom off at her mahjongg game, and go sit in the park to draw. They draw for hours, until the sun goes down and they’re squinting under the street lights. And, lo and behold, the next day they plow through all those lingering to-dos. They see clearly that half of them were unnecessary when before they all seemed critical. They recognize a few others as things better handed off to their peers. They suddenly find time for attending to that one project they’d been procrastinating on for weeks. They sleep better. Their skin looks great. (Okay I might be exaggerating on that last one, but only mildly.)</p> | |||
| <p>It turns out, <em>not</em> doing their art was costing them time, was draining it away, little by little, like a slow but steady leak. They had assumed, wrongly, that there wasn’t enough time in the day to do their art, because they assumed (because we’re conditioned to assume) that every thing we do <em>costs</em> time. But that math doesn’t take energy into account, doesn’t grok that doing things that energize you gives you time back. By doing their art, a whole lot of time suddenly returned. Their art didn’t need more time; <em>their time needed their art</em>.</p> | |||
| <p>I’m using art here, because in my experience, most people have something shaped like that in their lives—some thing that when neglected siphons time and energy away but when attended to delivers it in droves. But you can substitute art for whatever activity or habit leaves you more energized, gives you that time back: puzzle night with your BFFs, organizing your colleagues, working a shift at the community garden, baking cookies for the block party, going to the woods, touching grass and all that.</p> | |||
| <p>The question to ask with all those things isn’t, “how do I make time for this?” The answer to that question always disappoints, because that view of time has it forever speeding away from you. The better question is, <em>how does doing what I need make time for everything else?</em> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use> | |||
| </svg> Accueil</a> • | |||
| <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use> | |||
| </svg> Suivre</a> • | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use> | |||
| </svg> Pro</a> • | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use> | |||
| </svg> Email</a> • | |||
| <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use> | |||
| </svg> Légal</abbr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 26
- 0
cache/2023/3f4be4add2995420dc6be529f1032e46/index.md
View File
| @@ -0,0 +1,26 @@ | |||
| title: Energy makes time | |||
| url: https://everythingchanges.us/blog/energy-makes-time/ | |||
| hash_url: 3f4be4add2995420dc6be529f1032e46 | |||
| <p>BECAUSE I WORK WITH a lot of high performers, the kind of people who are frequently responsive to both the unending needs of their workplace and the unending needs of their kin, I often find myself listening as someone talks about being out of time. Even the most progressive and thoughtful organizations regularly cultivate situations where the amount of work outstrips the capacity of the people in place to do it. Combine that with our appalling lack of support for caretakers, the administrative burden of accessing your healthcare, the often thankless tasks of keeping house and home, and it’s no wonder that even the people most trained in solving tricky problems run into a hard wall with this one.</p> | |||
| <p>There are tactics, of course, and by the time people have come to me, they’ve usually tried them all. They’ve reorganized their calendar. They’ve blocked out time. They’ve sat down with their partner to talk about what they each need and who’s going to cook for mom next week. They’ve prioritized. They’ve delegated. They’ve told their boss what they’re going to stop doing. They’ve told their reports what they no longer have room for. They’ve automated those two tasks that were taking too long. They’ve asked for more budget. They’ve asked to push a deadline. They’ve time-shifted. They’ve hacked their bedtime. They’ve cut out tea/coffee/soda/gluten/swedish fish. They’ve <em>pomodoroed</em>, for fuck’s sake.</p> | |||
| <p>It hasn’t worked.</p> | |||
| <p>Often, when I’m listening to this, I get the picture of someone ensconced within the high walls of a castle, the ramparts lined with archers, the grounds protected by a moat, as they stare steely-eyed and resolute off into the distance—where an enormous catapult is preparing to launch a flaming rock as big as the moon their way.</p> | |||
| <p>I don’t mean to demean any of those time-management tactics—or any of the others out there either. My philosophy is to accept any and all tools, to tuck them into the toolbox until such time as they seem fit. Most of the recommended habits will work, at least some of the time. Sometimes blocking off some time on your calendar is exactly what you need. Sometimes shifting your schedule or skipping some meetings or putting yourself to bed on time does the trick. Knowing which trick you need now—and which one you’ll need next time—comes with experience and the kind of situational awareness that can be cultivated with (<em>wait for iiiiit…</em>) time.</p> | |||
| <p>But there’s something else I want to suggest here, and it’s to stop thinking about time entirely. Or, at least, to stop thinking about time as something <em>consistent.</em> We all know that time can be stretchy or compressed—we’ve experienced hours that plodded along interminably and those that whisked by in a few breaths. We’ve had days in which we got so much done we surprised ourselves and days where we got into a staring contest with the to-do list and the to-do list didn’t blink. And we’ve also had days that left us puddled on the floor and days that left us pumped up, practically leaping out of our chairs. What differentiates these experiences isn’t the number of hours in the day but the <em>energy</em> we get from the work. Energy <em>makes</em> time.</p> | |||
| <p>Here’s a concrete example, and perhaps a familiar one: someone is so busy with work and caretaking that they don’t make time for their art. At the end of the day they’re too tired to write or paint or make music or whathaveyou. So they don’t. Days, then weeks go by. They are more and more tired. They are getting less and less done. They take a mental health day and catch up on sleep but the exhaustion persists. Their overwhelm grows larger, becomes intolerable. The usual tactics don’t work. The catapult trundles closer.</p> | |||
| <p>Then one day they say fuck it all. They eat leftover pasta over the sink, drop mom off at her mahjongg game, and go sit in the park to draw. They draw for hours, until the sun goes down and they’re squinting under the street lights. And, lo and behold, the next day they plow through all those lingering to-dos. They see clearly that half of them were unnecessary when before they all seemed critical. They recognize a few others as things better handed off to their peers. They suddenly find time for attending to that one project they’d been procrastinating on for weeks. They sleep better. Their skin looks great. (Okay I might be exaggerating on that last one, but only mildly.)</p> | |||
| <p>It turns out, <em>not</em> doing their art was costing them time, was draining it away, little by little, like a slow but steady leak. They had assumed, wrongly, that there wasn’t enough time in the day to do their art, because they assumed (because we’re conditioned to assume) that every thing we do <em>costs</em> time. But that math doesn’t take energy into account, doesn’t grok that doing things that energize you gives you time back. By doing their art, a whole lot of time suddenly returned. Their art didn’t need more time; <em>their time needed their art</em>.</p> | |||
| <p>I’m using art here, because in my experience, most people have something shaped like that in their lives—some thing that when neglected siphons time and energy away but when attended to delivers it in droves. But you can substitute art for whatever activity or habit leaves you more energized, gives you that time back: puzzle night with your BFFs, organizing your colleagues, working a shift at the community garden, baking cookies for the block party, going to the woods, touching grass and all that.</p> | |||
| <p>The question to ask with all those things isn’t, “how do I make time for this?” The answer to that question always disappoints, because that view of time has it forever speeding away from you. The better question is, <em>how does doing what I need make time for everything else?</em> | |||
+ 499
- 0
cache/2023/478260db4b078551676bf263cbeeaa52/index.html
View File
| @@ -0,0 +1,499 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Basics, Tips and Tricks on how to use Markdown (archive) — David Larlet</title> | |||
| <meta name="description" content="Publication mise en cache pour en conserver une trace."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://ia.net/writer/support/basics/markdown-guide"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Basics, Tips and Tricks on how to use Markdown</h1> | |||
| </header> | |||
| <nav> | |||
| <p class="center"> | |||
| <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use> | |||
| </svg> Accueil</a> • | |||
| <a href="https://ia.net/writer/support/basics/markdown-guide" title="Lien vers le contenu original">Source originale</a> | |||
| </p> | |||
| </nav> | |||
| <hr> | |||
| <p>Our apps use Markdown formatting. This lets you apply basic formatting by adding a few punctuation characters. You can also use the formatting buttons in the bottom bar of your text window on OS X or the formatting keys in the Keyboard Bar of iA Writer for iOS.</p> | |||
| <h2 id="basics">Basics</h2> | |||
| <p>If you are not familiar with Markdown, it might look a little scary at first. Once you get the basics, you will quickly love it as it allows you to format your text without taking your hands off the keyboard. iA Writer’s Auto-Markdown will give you instant feedback if you got the formatting right or not.</p> | |||
| <h3 id="headings">Headings</h3> | |||
| <p>You can use up to up to six levels by writing # at the start of a line; the number of hashtags defines the hierarchy of the heading.</p> | |||
| <pre><code># First level heading | |||
| ## Second level heading | |||
| ### Third level heading | |||
| </code></pre> | |||
| <h3>Emphasis and Importance</h3> | |||
| <p>Emphasis (“italics”) and important (“bold”) are written by putting * or _ around the text you want to see in a different format.</p> | |||
| <ul> | |||
| <li>Emphasis: <code>*example*</code> or <code>_example_</code> (<code>⌘I</code>)</li> | |||
| <li>Importance: <code>**example**</code> or <code>__example__</code> (<code>⌘B</code>)</li> | |||
| <li>Emphasis + Importance <code>***example***</code> or <code>___example___</code></li> | |||
| </ul> | |||
| <h3>Strikethrough</h3> | |||
| <p>You can use double tildes to make <del>strikethrough</del> text:</p> | |||
| <pre><code>~~strikethrough~~</code></pre> | |||
| <h3>Highlight</h3> | |||
| <p>You can use double equals signs to <mark>highlight</mark> text:</p> | |||
| <pre><code>==highlight==</code></pre> | |||
| <h3 id="lists">Numbered Lists</h3> | |||
| <p>Type <code>1.</code> then a space. Any number (followed by a full stop and space) can be used and the list items will be ordered from 1 when exported.</p> | |||
| <pre><code>1. Ordered list item | |||
| 2. Ordered list item | |||
| 3. Ordered list item | |||
| </code></pre> | |||
| <h3>Bulleted Lists</h3> | |||
| <p>Type <code>*</code>, <code>-</code> or <code>+</code> then a space. Create a bulleted list by using an asterisk (*), hyphen (-), or plus sign (+), followed by a space.</p> | |||
| <pre><code>* Bulleted list item | |||
| * Bulleted list item | |||
| * Bulleted list item | |||
| </code></pre> | |||
| <h3 id="task-lists">Task Lists</h3> | |||
| <p>Type <code>-[ ]</code> or <code>1.[ ]</code> then a space. Adding an <code>x</code> between the square brackets will tick off a task list item in the Preview. iA Writer for Mac and iOS also support clicking or tapping the list item marker to toggle it.</p> | |||
| <pre><code>- [ ] Unfinished task list item | |||
| - [x] Finished task list item | |||
| </code></pre> | |||
| <h3>Nesting Lists</h3> | |||
| <p>You can nest lists several levels deep, and combine them:</p> | |||
| <pre><code>* First level | |||
| * Second level | |||
| 1. First level | |||
| 1. Second level | |||
| * First level unordered list item | |||
| 1. Second level ordered list item | |||
| </code></pre> | |||
| <p>Nested list items are indented with four spaces or a tab. iA Writer for iOS includes keys to indent and outdent list items. They can be found by tapping the <code>⌘</code> button in the keyboard bar.</p> | |||
| <h3>Blockquotes</h3> | |||
| <p>Type <code>></code> plus a space (just like email):</p> | |||
| <pre><code>> A quoted paragraph | |||
| >> A quoted paragraph inside a quotation | |||
| </code></pre> | |||
| <p>iA Writer 5 offers a keyboard shortcut for blockquotes: <code>⌘</code>+<code>></code> These also now autocomplete in the same manner as lists.</p> | |||
| <h2 id="advanced">Advanced</h2> | |||
| <h3 id="links">Links</h3> | |||
| <p>Create a link by surrounding the link text in square brackets, followed immediately by the URL in parentheses:</p> | |||
| <pre><code>[text to link](http://example.com/) | |||
| </code></pre> | |||
| <p>You can also use reference links. Add the reference in square brackets after the text to link. Then, on a line by itself add the reference with a colon, space, and the URL:</p> | |||
| <pre><code>[text to link][ref] | |||
| … | |||
| [ref]: http://example.com/ | |||
| </code></pre> | |||
| <h3 id="cross-references">Cross-References</h3> | |||
| <p><strong>iA Writer for iOS, iPadOS and macOS</strong> support cross-references using the following syntax: </p> | |||
| <pre><code># My Level 1 Header | |||
| Some text and a link to [My Level 1 Header][]. | |||
| </code></pre> | |||
| <p>In a document where <code># My Level 1 Header</code> exists. </p> | |||
| <p>You can also use the following syntax: </p> | |||
| <pre><code># My Level 1 Header | |||
| Click here to [jump to section][My Level 1 Header] | |||
| </code></pre> | |||
| <p>You can define the label for a specific header by adding a space and <code>[Label]</code> following the header: </p> | |||
| <pre><code># My Level 1 Header [My Label] | |||
| </code></pre> | |||
| <p>This can be referenced by: </p> | |||
| <pre><code>Here is a link to [My Label][]. | |||
| or | |||
| Click here to [jump to section][My Label]. | |||
| </code></pre> | |||
| <p><strong>iA Writer for Windows</strong> supports cross-referencing headers using the following syntax: </p> | |||
| <pre><code># Header | |||
| [link text][Header] | |||
| </code></pre> | |||
| <p>You can use this like so:</p> | |||
| <pre><code># My Level 1 Header | |||
| Click here to [jump to section][My Level 1 Header]. | |||
| </code></pre> | |||
| <h3 id="images">Images</h3> | |||
| <p>Both local and web URLs are supported. Markdown uses the following syntax for images:</p> | |||
| <pre><code> | |||
|  | |||
| </code></pre> | |||
| <p>When using local images, they must be in a folder added as a Library location. This gives iA Writer permission to use the file. Folders can be added as Locations by clicking the + beside the label in the Organizer on Mac, or by dragging them from Finder into the Location section. iOS supports images from any location except From Other Apps. To add a Location, tap <samp>Edit</samp> and then <samp>Add Location…</samp></p> | |||
| <p><strong>Note:</strong> Markdown image syntax and HTML image filename rules are different from Content Blocks. When using Markdown syntax, spaces must be encoded as <code>%20</code>, and the leading slash must be omitted because it refers to the root directory of a device.</p> | |||
| <h3 id="code">Code</h3> | |||
| <p>You can mark up code in-line using backticks (<code>code</code>), or add a code block by adding at least four spaces to the start of a line:</p> | |||
| <pre><code> This is a code block | |||
| </code></pre> | |||
| <p>In iA Writer, it’s also possible to start a code block with a tab, as long as the text doesn’t start with list, header or blockquote syntax characters (<code>1.</code>, <code>*</code>, <code>-</code>, <code>+</code>, <code>#</code>, <code>></code>).</p> | |||
| <p>In addition, you can use Fenced code blocks, which begin and end with triple backticks, and don’t need indenting. <em>Note that inline formatting (like <code>_underscores_</code>) is ignored in code.</em></p> | |||
| <pre><code>``` | |||
| This is a fenced code block | |||
| ``` | |||
| </code></pre> | |||
| <p>Add a footnote in square brackets preceded by a caret. Then add the footnote content like a reference link, for example:</p> | |||
| <pre><code>Some text with a footnote[^1]. | |||
| … | |||
| [^1]: The linked footnote appears at the end of the document. | |||
| </code></pre> | |||
| <p>On Mac and iOS you can also add an inline footnote in the following manner:</p> | |||
| <pre><code>Some text with a footnote[^This is the footnote itself.]. | |||
| </code></pre> | |||
| <p>Note: Markdown was designed for web where there is no concept of pagination. As such footnotes are essentially endnotes. When rendered, these are placed at the end of the document.</p> | |||
| <h3 id="toc">Table of Contents</h3> | |||
| <p>Generating a table of content is as easy as it gets. Just add <code>{{TOC}}</code> wherever you want the table of content to appear and iA Writer generates it from the Headlines you use in your text. There is a custom key for it on iOS.</p> | |||
| <p>On Mac you can add it via the toolbar or the Format Menu. The TOC will become visible and clickable in preview.</p> | |||
| <h3 id="tables">Tables</h3> | |||
| <p>To make a table, use vertical bar characters to denote cells. Start with column headers, separate with a row of cells with hyphens, then add further rows of cells. For example:</p> | |||
| <pre><code>|Header |Column 1 | Column 2 | Column 3 | | |||
| |:--- |:---- |:----:| ----:| | |||
| |1. Row| is | is | is | | |||
| |2. Row| left | nicely | right | | |||
| |3. Row| aligned | centered | aligned | | |||
| </code></pre> | |||
| <p>Let’s be real. This is a mess. Markdown tables look more reasonable than HTML-Tables, but they are the weak point of Markdown. That being said, they still translate nicely when rendered:</p> | |||
| <p><img decoding="async" src="/wp-content/uploads/2023/05/mdtable.png" alt></p> | |||
| <p>iA Writer includes a menu option to automatically generate the cells for a table.</p> | |||
| <p>There is a trick though you can use when writing Markdown tables with a monospaced font. You can feign the correct column width by adding space characters to align the table:</p> | |||
| <p><img decoding="async" title="table.png" src="/wp-content/uploads/migration/table.png" alt="table.png"></p> | |||
| <p> In Writer for Windows you can clean up a Markdown table by selecting the whole table and using <samp>Format</samp> → <samp>Table</samp> → <samp>Reformat</samp>.</p> | |||
| <p><em>Note: If you find your table does not render correctly in Preview, please ensure Smart Dashes are turned off in <samp>Edit</samp> → <samp>Substitutions</samp>.</em></p> | |||
| <h3>Separating Paragraphs</h3> | |||
| <p>A line starting with a tab indicates a block of code. Because of this it is currently not possible to use a return-plus-tab to indicate a new paragraph in Writer. Instead, please use two returns to separate paragraphs.</p> | |||
| <h3>Line Breaks</h3> | |||
| <p>From the Markdown specification:</p> | |||
| <blockquote>When you do want to insert a <code><br /></code> break tag using Markdown, you end a line with two or more spaces, then type return.</blockquote> | |||
| <p>iA Writer also allows you to insert a <code><br /></code> into a paragraph by using Shift+Enter. This will add the spaces required at the end of the line for you.</p> | |||
| <h3>Horizontal Rules</h3> | |||
| <p>You can add a thematic break which will be represented by a dividing line (<code><hr></code>) when exported to HTML. To do so, add three or more asterisks (<code>*</code>), hyphens (<code>-</code>), or underscores (<code>_</code>) on a line by themselves, optionally separated with spaces. For example:</p> | |||
| <pre><code>* * * | |||
| </code></pre> | |||
| <p>or</p> | |||
| <pre><code>------------- | |||
| </code></pre> | |||
| <h3>Page Breaks</h3> | |||
| <p>Sometimes your document doesn’t flow exactly how you want it when printing or exporting to PDF. You can force a page break in iA Writer using three plus marks (<code>+</code>) on a line by themselves:</p> | |||
| <pre><code>+++ | |||
| </code></pre> | |||
| <p><em>Note: Manual page breaks are currently unavailable in iA Writer for Android.</em></p> | |||
| <p>Markdown doesn’t have an official syntax for comments. So we don’t try to make a bespoke one that will only render correctly in iA Writer.</p> | |||
| <p>Since HTML is completely valid in Markdown, you can use HTML comments instead:</p> | |||
| <pre><code><!-- This is a comment --></code></pre> | |||
| <h3>“Escaping” Formatting Characters</h3> | |||
| <p>If you want to type a formatting character and have Writer treat it as text not formatting, type a backslash first <code>\</code>. This means <code>\*</code> gives <code>*</code>, <code>\_</code> gives <code>_</code> etc. Escaping isn’t needed in code blocks.</p> | |||
| <h3 id="math">Math</h3> | |||
| <p>iA Writer supports TeX math expressions on Mac and iOS. These are easy to write in plain text and then formatted beautifully in the Preview. | |||
| For inline expressions, use <code>$</code> or <code>\\(</code> and <code>\\)</code>:</p> | |||
| <pre><code>An example of math within a paragraph --- \\({e}^{i\pi }+1=0\\) | |||
| Or use dollar signs instead --- ${e}^{i\pi }+1=0$ | |||
| </code></pre> | |||
| <p>For block format expressions, use <code>$$</code> or <code>\\[</code> and <code>\\]</code>:</p> | |||
| <pre><code>To show an expression by itself: | |||
| \\[ {x}_{1,2}=\frac{-b\pm \sqrt{{b}^{2}-4ac}}{2a} \\] | |||
| or: | |||
| $${x}_{1,2}=\frac{-b\pm \sqrt{{b}^{2}-4ac}}{2a}$$ | |||
| </code></pre> | |||
| <p>If using the dollar sign syntax, there must be no space between the <code>$</code> and the contents of the expression and there must be space on the outside.</p> | |||
| <p>iA Writer supports metadata at the beginning of documents. You can use it store important information about your documents, hidden from Preview. Metadata must be separated from the rest of the document by three dashes:</p> | |||
| <p>You can use metadata to build correspondence Templates.</p> | |||
| <p><img decoding="async" class="support-box-shadow" src="https://ia.net/wp-content/uploads/2020/05/bluth.png" alt></p> | |||
| <p>You can do this with two easy steps. First you define your metadata at the very top of your document, followed by an empty line. Let’s write “The Cat sat on the Mat” with metadata. Write:</p> | |||
| <pre><code>--- | |||
| Animal: Cat | |||
| Thing: Mat | |||
| --- | |||
| </code></pre> | |||
| <p>You can use the metadata in the text by putting it in brackets adding a % sign. Write:</p> | |||
| <pre><code>The [%Animal] sat on the [%Thing]. | |||
| </code></pre> | |||
| <p>The whole document should now look like this:</p> | |||
| <pre><code>--- | |||
| Animal: Cat | |||
| Thing: Mat | |||
| --- | |||
| The [%Animal] sat on the [%Thing]. | |||
| </code></pre> | |||
| <p>If you open Preview and compare the raw text and the rendered Markdown you will see this:</p> | |||
| <p><img decoding="async" class="support-box-shadow" src="https://ia.net/wp-content/uploads/2020/05/cat.png" alt></p> | |||
| <h2 id="smart-automation">Smart Automation</h2> | |||
| <p>Peppered throughout iA Writer’s documentation and settings you will see references to various “Smart” features. As a rule, these provide some form of automatic text completion or transformation so you can keep focused on writing instead of dealing with minutiae.</p> | |||
| <h3>Smart Lists</h3> | |||
| <p>Once you begin writing a list in iA Writer, a bullet/list marker of the same type will be created automatically when you hit return. Hitting return twice in a row removes the empty list item and exits the list so no further items will be created.</p> | |||
| <p>Blockquotes in iA Writer 5 now behave the same way.</p> | |||
| <h3>Smart Substitutions in the Editor</h3> | |||
| <p>These options are found in <samp>Preferences</samp> → <samp>Editor</samp> → <samp>Smart substitions</samp> on Mac and <samp>Settings</samp> → <samp>Editor</samp> → <samp>Text Input</samp> on iOS.</p> | |||
| <p>When <samp>Smart Copy/Paste</samp> is turned on, spaces are added around content pasted into the Editor automatically.</p> | |||
| <p>When activated, <samp>Smart Quotes</samp> will automatically replace any straight quotes written in the Editor with curly quotes, as you write. <samp>Smart Dashes</samp> works in a similar way, substituting a dash in the Editor whenever two hyphens are written consecutively.</p> | |||
| <h3>Smart Punctuation (Markdown)</h3> | |||
| <p>This option is found in <samp>Preferences</samp> → <samp>Templates</samp> → <samp>Markdown processing</samp> on Mac and <samp>Settings</samp> → <samp>Templates</samp> → <samp>Markdown processing</samp> on iOS.</p> | |||
| <p>When turned on, it will convert straight quotes and doubled hyphens in the typed in the Editor into curly quotes and dashes in the Preview, respectively.</p> | |||
| <p>Using this option will <em>not</em> affect text in the Editor, it only makes the change in the Preview as the Markdown is processed.</p> | |||
| <h3>Smart Tables</h3> | |||
| <p>New in iA Writer for Mac and iOS, you can use the syntax <code>=(…)</code> to perform mathematical calculations in your tables.</p> | |||
| <ul> | |||
| <li>You can also reference other cells in these calculations</li> | |||
| <li>Cell IDs start at A0 from the top-left, like in spreadsheets</li> | |||
| <li>Calculations are handled by <a href="http://mathjs.org/" rel="nofollow noopener" target="_blank">math.js</a></li> | |||
| </ul> | |||
| <table><colgroup> <col> <col> </colgroup> | |||
| <thead> | |||
| <tr> | |||
| <th>Editor Input</th> | |||
| <th>Preview Output</th> | |||
| </tr> | |||
| </thead> | |||
| <tbody> | |||
| <tr> | |||
| <td><code>1</code></td> | |||
| <td>1</td> | |||
| </tr> | |||
| <tr> | |||
| <td><code>=(2 + 2)</code></td> | |||
| <td>4</td> | |||
| </tr> | |||
| <tr> | |||
| <td><code>=(51 / 3)</code></td> | |||
| <td>17</td> | |||
| </tr> | |||
| <tr> | |||
| <td><code>=(B1 + B3)</code></td> | |||
| <td>18</td> | |||
| </tr> | |||
| <tr> | |||
| <td><code>=(TOTAL)</code></td> | |||
| <td>40</td> | |||
| </tr> | |||
| </tbody> | |||
| </table> | |||
| <p>N.B. To avoid formatting and calculation errors in Smart Tables, please use spaces on either side of arithmetic operators (<code>+</code>, <code>-</code>, <code>*</code>, <code>/</code>).</p> | |||
| <p>Additionally, you can make use of metadata variables:</p> | |||
| <pre><code>--- | |||
| Var: 1 | |||
| ---</code></pre> | |||
| <table><colgroup> <col> <col> </colgroup> | |||
| <thead> | |||
| <tr> | |||
| <th><strong>Editor Input</strong></th> | |||
| <th><strong>Preview Output</strong></th> | |||
| </tr> | |||
| </thead> | |||
| <tbody> | |||
| <tr> | |||
| <td><code>=([%Var] + 0)</code></td> | |||
| <td>1</td> | |||
| </tr> | |||
| <tr> | |||
| <td><code>=([%Var] + 1)</code></td> | |||
| <td>2</td> | |||
| </tr> | |||
| <tr> | |||
| <td><code>=([%Var] + 2)</code></td> | |||
| <td>3</td> | |||
| </tr> | |||
| </tbody> | |||
| </table> | |||
| <p>You can also perform unit conversion:</p> | |||
| <table><colgroup> <col> <col> </colgroup> | |||
| <thead> | |||
| <tr> | |||
| <th><strong>Editor Input</strong></th> | |||
| <th><strong>Preview Output</strong></th> | |||
| </tr> | |||
| </thead> | |||
| <tbody> | |||
| <tr> | |||
| <td><code>=(25 m/s to km/h)</code></td> | |||
| <td>90 km / h</td> | |||
| </tr> | |||
| <tr> | |||
| <td><code>=(2.2046226218487757 lbs to kg)</code></td> | |||
| <td>1 kg</td> | |||
| </tr> | |||
| <tr> | |||
| <td><code>=(460 V * 20 A * 30 days to kWh)</code></td> | |||
| <td>6624 kWh</td> | |||
| </tr> | |||
| </tbody> | |||
| </table> | |||
| <h2 id="preview">Preview</h2> | |||
| <p>Writer apps use Markdown formatting, so you can format your text just by typing. It’s familiar, and it’s also subtly formatted on-screen using Auto Markdown:</p> | |||
| <p><img decoding="async" src="/wp-content/uploads/migration/editor.png"></p> | |||
| <p>Writer also provides a formatted preview of your document:</p> | |||
| <h5>iA Writer for Mac</h5> | |||
| <p>Choose <samp>View</samp> → <samp>Show Preview</samp> or <kbd>⌘</kbd><kbd>R</kbd> or swipe to the left</p> | |||
| <h5>iA Writer for iPad and iPhone</h5> | |||
| <p>Tap the Preview button at the top right</p> | |||
| <h5>iA Writer for Windows</h5> | |||
| <p>Choose <samp>View</samp> → <samp>Preview</samp> or <kbd>ctrl</kbd><kbd>R</kbd></p> | |||
| <h5>iA Writer for Android</h5> | |||
| <p>Tap <span><samp>⋮</samp></span> → <samp>Preview</samp> or swipe to the left</p> | |||
| <h2 id="exporting">Exporting</h2> | |||
| <p>iA Writer supports exporting as plain text, HTML, Microsoft Word 2007 (.docx), and PDF via <samp>File</samp> → <samp>Export</samp>.</p> | |||
| <p>You can also export as PDF on Mac via either: | |||
| <samp>File</samp> → <samp>Print</samp> → <samp>PDF</samp> | |||
| <samp>File</samp> → <samp>Print Plain Text</samp> → <samp>PDF</samp></p> | |||
| <p>Finally, you can copy formatted text from Writer’s Preview to paste into other programs.</p> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use> | |||
| </svg> Accueil</a> • | |||
| <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use> | |||
| </svg> Suivre</a> • | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use> | |||
| </svg> Pro</a> • | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use> | |||
| </svg> Email</a> • | |||
| <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use> | |||
| </svg> Légal</abbr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 332
- 0
cache/2023/478260db4b078551676bf263cbeeaa52/index.md
View File
| @@ -0,0 +1,332 @@ | |||
| title: Basics, Tips and Tricks on how to use Markdown | |||
| url: https://ia.net/writer/support/basics/markdown-guide | |||
| hash_url: 478260db4b078551676bf263cbeeaa52 | |||
| <p>Our apps use Markdown formatting. This lets you apply basic formatting by adding a few punctuation characters. You can also use the formatting buttons in the bottom bar of your text window on OS X or the formatting keys in the Keyboard Bar of iA Writer for iOS.</p> | |||
| <h2 id="basics">Basics</h2> | |||
| <p>If you are not familiar with Markdown, it might look a little scary at first. Once you get the basics, you will quickly love it as it allows you to format your text without taking your hands off the keyboard. iA Writer’s Auto-Markdown will give you instant feedback if you got the formatting right or not.</p> | |||
| <h3 id="headings">Headings</h3> | |||
| <p>You can use up to up to six levels by writing # at the start of a line; the number of hashtags defines the hierarchy of the heading.</p> | |||
| <pre><code># First level heading | |||
| ## Second level heading | |||
| ### Third level heading | |||
| </code></pre> | |||
| <h3>Emphasis and Importance</h3> | |||
| <p>Emphasis (“italics”) and important (“bold”) are written by putting * or _ around the text you want to see in a different format.</p> | |||
| <ul> | |||
| <li>Emphasis: <code>*example*</code> or <code>_example_</code> (<code>⌘I</code>)</li> | |||
| <li>Importance: <code>**example**</code> or <code>__example__</code> (<code>⌘B</code>)</li> | |||
| <li>Emphasis + Importance <code>***example***</code> or <code>___example___</code></li> | |||
| </ul> | |||
| <h3>Strikethrough</h3> | |||
| <p>You can use double tildes to make <del>strikethrough</del> text:</p> | |||
| <pre><code>~~strikethrough~~</code></pre> | |||
| <h3>Highlight</h3> | |||
| <p>You can use double equals signs to <mark>highlight</mark> text:</p> | |||
| <pre><code>==highlight==</code></pre> | |||
| <h3 id="lists">Numbered Lists</h3> | |||
| <p>Type <code>1.</code> then a space. Any number (followed by a full stop and space) can be used and the list items will be ordered from 1 when exported.</p> | |||
| <pre><code>1. Ordered list item | |||
| 2. Ordered list item | |||
| 3. Ordered list item | |||
| </code></pre> | |||
| <h3>Bulleted Lists</h3> | |||
| <p>Type <code>*</code>, <code>-</code> or <code>+</code> then a space. Create a bulleted list by using an asterisk (*), hyphen (-), or plus sign (+), followed by a space.</p> | |||
| <pre><code>* Bulleted list item | |||
| * Bulleted list item | |||
| * Bulleted list item | |||
| </code></pre> | |||
| <h3 id="task-lists">Task Lists</h3> | |||
| <p>Type <code>-[ ]</code> or <code>1.[ ]</code> then a space. Adding an <code>x</code> between the square brackets will tick off a task list item in the Preview. iA Writer for Mac and iOS also support clicking or tapping the list item marker to toggle it.</p> | |||
| <pre><code>- [ ] Unfinished task list item | |||
| - [x] Finished task list item | |||
| </code></pre> | |||
| <h3>Nesting Lists</h3> | |||
| <p>You can nest lists several levels deep, and combine them:</p> | |||
| <pre><code>* First level | |||
| * Second level | |||
| 1. First level | |||
| 1. Second level | |||
| * First level unordered list item | |||
| 1. Second level ordered list item | |||
| </code></pre> | |||
| <p>Nested list items are indented with four spaces or a tab. iA Writer for iOS includes keys to indent and outdent list items. They can be found by tapping the <code>⌘</code> button in the keyboard bar.</p> | |||
| <h3>Blockquotes</h3> | |||
| <p>Type <code>></code> plus a space (just like email):</p> | |||
| <pre><code>> A quoted paragraph | |||
| >> A quoted paragraph inside a quotation | |||
| </code></pre> | |||
| <p>iA Writer 5 offers a keyboard shortcut for blockquotes: <code>⌘</code>+<code>></code> These also now autocomplete in the same manner as lists.</p> | |||
| <h2 id="advanced">Advanced</h2> | |||
| <h3 id="links">Links</h3> | |||
| <p>Create a link by surrounding the link text in square brackets, followed immediately by the URL in parentheses:</p> | |||
| <pre><code>[text to link](http://example.com/) | |||
| </code></pre> | |||
| <p>You can also use reference links. Add the reference in square brackets after the text to link. Then, on a line by itself add the reference with a colon, space, and the URL:</p> | |||
| <pre><code>[text to link][ref] | |||
| … | |||
| [ref]: http://example.com/ | |||
| </code></pre> | |||
| <h3 id="cross-references">Cross-References</h3> | |||
| <p><strong>iA Writer for iOS, iPadOS and macOS</strong> support cross-references using the following syntax: </p> | |||
| <pre><code># My Level 1 Header | |||
| Some text and a link to [My Level 1 Header][]. | |||
| </code></pre> | |||
| <p>In a document where <code># My Level 1 Header</code> exists. </p> | |||
| <p>You can also use the following syntax: </p> | |||
| <pre><code># My Level 1 Header | |||
| Click here to [jump to section][My Level 1 Header] | |||
| </code></pre> | |||
| <p>You can define the label for a specific header by adding a space and <code>[Label]</code> following the header: </p> | |||
| <pre><code># My Level 1 Header [My Label] | |||
| </code></pre> | |||
| <p>This can be referenced by: </p> | |||
| <pre><code>Here is a link to [My Label][]. | |||
| or | |||
| Click here to [jump to section][My Label]. | |||
| </code></pre> | |||
| <p><strong>iA Writer for Windows</strong> supports cross-referencing headers using the following syntax: </p> | |||
| <pre><code># Header | |||
| [link text][Header] | |||
| </code></pre> | |||
| <p>You can use this like so:</p> | |||
| <pre><code># My Level 1 Header | |||
| Click here to [jump to section][My Level 1 Header]. | |||
| </code></pre> | |||
| <h3 id="images">Images</h3> | |||
| <p>Both local and web URLs are supported. Markdown uses the following syntax for images:</p> | |||
| <pre><code> | |||
|  | |||
| </code></pre> | |||
| <p>When using local images, they must be in a folder added as a Library location. This gives iA Writer permission to use the file. Folders can be added as Locations by clicking the + beside the label in the Organizer on Mac, or by dragging them from Finder into the Location section. iOS supports images from any location except From Other Apps. To add a Location, tap <samp>Edit</samp> and then <samp>Add Location…</samp></p> | |||
| <p><strong>Note:</strong> Markdown image syntax and HTML image filename rules are different from Content Blocks. When using Markdown syntax, spaces must be encoded as <code>%20</code>, and the leading slash must be omitted because it refers to the root directory of a device.</p> | |||
| <h3 id="code">Code</h3> | |||
| <p>You can mark up code in-line using backticks (<code>code</code>), or add a code block by adding at least four spaces to the start of a line:</p> | |||
| <pre><code> This is a code block | |||
| </code></pre> | |||
| <p>In iA Writer, it’s also possible to start a code block with a tab, as long as the text doesn’t start with list, header or blockquote syntax characters (<code>1.</code>, <code>*</code>, <code>-</code>, <code>+</code>, <code>#</code>, <code>></code>).</p> | |||
| <p>In addition, you can use Fenced code blocks, which begin and end with triple backticks, and don’t need indenting. <em>Note that inline formatting (like <code>_underscores_</code>) is ignored in code.</em></p> | |||
| <pre><code>``` | |||
| This is a fenced code block | |||
| ``` | |||
| </code></pre> | |||
| <p>Add a footnote in square brackets preceded by a caret. Then add the footnote content like a reference link, for example:</p> | |||
| <pre><code>Some text with a footnote[^1]. | |||
| … | |||
| [^1]: The linked footnote appears at the end of the document. | |||
| </code></pre> | |||
| <p>On Mac and iOS you can also add an inline footnote in the following manner:</p> | |||
| <pre><code>Some text with a footnote[^This is the footnote itself.]. | |||
| </code></pre> | |||
| <p>Note: Markdown was designed for web where there is no concept of pagination. As such footnotes are essentially endnotes. When rendered, these are placed at the end of the document.</p> | |||
| <h3 id="toc">Table of Contents</h3> | |||
| <p>Generating a table of content is as easy as it gets. Just add <code>{{TOC}}</code> wherever you want the table of content to appear and iA Writer generates it from the Headlines you use in your text. There is a custom key for it on iOS.</p> | |||
| <p>On Mac you can add it via the toolbar or the Format Menu. The TOC will become visible and clickable in preview.</p> | |||
| <h3 id="tables">Tables</h3> | |||
| <p>To make a table, use vertical bar characters to denote cells. Start with column headers, separate with a row of cells with hyphens, then add further rows of cells. For example:</p> | |||
| <pre><code>|Header |Column 1 | Column 2 | Column 3 | | |||
| |:--- |:---- |:----:| ----:| | |||
| |1. Row| is | is | is | | |||
| |2. Row| left | nicely | right | | |||
| |3. Row| aligned | centered | aligned | | |||
| </code></pre> | |||
| <p>Let’s be real. This is a mess. Markdown tables look more reasonable than HTML-Tables, but they are the weak point of Markdown. That being said, they still translate nicely when rendered:</p> | |||
| <img decoding="async" src="/wp-content/uploads/2023/05/mdtable.png" alt> | |||
| <p>iA Writer includes a menu option to automatically generate the cells for a table.</p> | |||
| <p>There is a trick though you can use when writing Markdown tables with a monospaced font. You can feign the correct column width by adding space characters to align the table:</p> | |||
| <img decoding="async" title="table.png" src="/wp-content/uploads/migration/table.png" alt="table.png"> | |||
| <p> In Writer for Windows you can clean up a Markdown table by selecting the whole table and using <samp>Format</samp> → <samp>Table</samp> → <samp>Reformat</samp>.</p> | |||
| <p><em>Note: If you find your table does not render correctly in Preview, please ensure Smart Dashes are turned off in <samp>Edit</samp> → <samp>Substitutions</samp>.</em></p> | |||
| <h3>Separating Paragraphs</h3> | |||
| <p>A line starting with a tab indicates a block of code. Because of this it is currently not possible to use a return-plus-tab to indicate a new paragraph in Writer. Instead, please use two returns to separate paragraphs.</p> | |||
| <h3>Line Breaks</h3> | |||
| <p>From the Markdown specification:</p> | |||
| <blockquote>When you do want to insert a <code><br /></code> break tag using Markdown, you end a line with two or more spaces, then type return.</blockquote> | |||
| <p>iA Writer also allows you to insert a <code><br /></code> into a paragraph by using Shift+Enter. This will add the spaces required at the end of the line for you.</p> | |||
| <h3>Horizontal Rules</h3> | |||
| <p>You can add a thematic break which will be represented by a dividing line (<code><hr></code>) when exported to HTML. To do so, add three or more asterisks (<code>*</code>), hyphens (<code>-</code>), or underscores (<code>_</code>) on a line by themselves, optionally separated with spaces. For example:</p> | |||
| <pre><code>* * * | |||
| </code></pre> | |||
| <p>or</p> | |||
| <pre><code>------------- | |||
| </code></pre> | |||
| <h3>Page Breaks</h3> | |||
| <p>Sometimes your document doesn’t flow exactly how you want it when printing or exporting to PDF. You can force a page break in iA Writer using three plus marks (<code>+</code>) on a line by themselves:</p> | |||
| <pre><code>+++ | |||
| </code></pre> | |||
| <p><em>Note: Manual page breaks are currently unavailable in iA Writer for Android.</em></p> | |||
| <p>Markdown doesn’t have an official syntax for comments. So we don’t try to make a bespoke one that will only render correctly in iA Writer.</p> | |||
| <p>Since HTML is completely valid in Markdown, you can use HTML comments instead:</p> | |||
| <pre><code><!-- This is a comment --></code></pre> | |||
| <h3>“Escaping” Formatting Characters</h3> | |||
| <p>If you want to type a formatting character and have Writer treat it as text not formatting, type a backslash first <code>\</code>. This means <code>\*</code> gives <code>*</code>, <code>\_</code> gives <code>_</code> etc. Escaping isn’t needed in code blocks.</p> | |||
| <h3 id="math">Math</h3> | |||
| <p>iA Writer supports TeX math expressions on Mac and iOS. These are easy to write in plain text and then formatted beautifully in the Preview. | |||
| For inline expressions, use <code>$</code> or <code>\\(</code> and <code>\\)</code>:</p> | |||
| <pre><code>An example of math within a paragraph --- \\({e}^{i\pi }+1=0\\) | |||
| Or use dollar signs instead --- ${e}^{i\pi }+1=0$ | |||
| </code></pre> | |||
| <p>For block format expressions, use <code>$$</code> or <code>\\[</code> and <code>\\]</code>:</p> | |||
| <pre><code>To show an expression by itself: | |||
| \\[ {x}_{1,2}=\frac{-b\pm \sqrt{{b}^{2}-4ac}}{2a} \\] | |||
| or: | |||
| $${x}_{1,2}=\frac{-b\pm \sqrt{{b}^{2}-4ac}}{2a}$$ | |||
| </code></pre> | |||
| <p>If using the dollar sign syntax, there must be no space between the <code>$</code> and the contents of the expression and there must be space on the outside.</p> | |||
| <p>iA Writer supports metadata at the beginning of documents. You can use it store important information about your documents, hidden from Preview. Metadata must be separated from the rest of the document by three dashes:</p> | |||
| <p>You can use metadata to build correspondence Templates.</p> | |||
| <img decoding="async" class="support-box-shadow" src="https://ia.net/wp-content/uploads/2020/05/bluth.png" alt> | |||
| <p>You can do this with two easy steps. First you define your metadata at the very top of your document, followed by an empty line. Let’s write “The Cat sat on the Mat” with metadata. Write:</p> | |||
| <pre><code>--- | |||
| Animal: Cat | |||
| Thing: Mat | |||
| --- | |||
| </code></pre> | |||
| <p>You can use the metadata in the text by putting it in brackets adding a % sign. Write:</p> | |||
| <pre><code>The [%Animal] sat on the [%Thing]. | |||
| </code></pre> | |||
| <p>The whole document should now look like this:</p> | |||
| <pre><code>--- | |||
| Animal: Cat | |||
| Thing: Mat | |||
| --- | |||
| The [%Animal] sat on the [%Thing]. | |||
| </code></pre> | |||
| <p>If you open Preview and compare the raw text and the rendered Markdown you will see this:</p> | |||
| <img decoding="async" class="support-box-shadow" src="https://ia.net/wp-content/uploads/2020/05/cat.png" alt> | |||
| <h2 id="smart-automation">Smart Automation</h2> | |||
| <p>Peppered throughout iA Writer’s documentation and settings you will see references to various “Smart” features. As a rule, these provide some form of automatic text completion or transformation so you can keep focused on writing instead of dealing with minutiae.</p> | |||
| <h3>Smart Lists</h3> | |||
| <p>Once you begin writing a list in iA Writer, a bullet/list marker of the same type will be created automatically when you hit return. Hitting return twice in a row removes the empty list item and exits the list so no further items will be created.</p> | |||
| <p>Blockquotes in iA Writer 5 now behave the same way.</p> | |||
| <h3>Smart Substitutions in the Editor</h3> | |||
| <p>These options are found in <samp>Preferences</samp> → <samp>Editor</samp> → <samp>Smart substitions</samp> on Mac and <samp>Settings</samp> → <samp>Editor</samp> → <samp>Text Input</samp> on iOS.</p> | |||
| <p>When <samp>Smart Copy/Paste</samp> is turned on, spaces are added around content pasted into the Editor automatically.</p> | |||
| <p>When activated, <samp>Smart Quotes</samp> will automatically replace any straight quotes written in the Editor with curly quotes, as you write. <samp>Smart Dashes</samp> works in a similar way, substituting a dash in the Editor whenever two hyphens are written consecutively.</p> | |||
| <h3>Smart Punctuation (Markdown)</h3> | |||
| <p>This option is found in <samp>Preferences</samp> → <samp>Templates</samp> → <samp>Markdown processing</samp> on Mac and <samp>Settings</samp> → <samp>Templates</samp> → <samp>Markdown processing</samp> on iOS.</p> | |||
| <p>When turned on, it will convert straight quotes and doubled hyphens in the typed in the Editor into curly quotes and dashes in the Preview, respectively.</p> | |||
| <p>Using this option will <em>not</em> affect text in the Editor, it only makes the change in the Preview as the Markdown is processed.</p> | |||
| <h3>Smart Tables</h3> | |||
| <p>New in iA Writer for Mac and iOS, you can use the syntax <code>=(…)</code> to perform mathematical calculations in your tables.</p> | |||
| <ul> | |||
| <li>You can also reference other cells in these calculations</li> | |||
| <li>Cell IDs start at A0 from the top-left, like in spreadsheets</li> | |||
| <li>Calculations are handled by <a href="http://mathjs.org/" rel="nofollow noopener" target="_blank">math.js</a></li> | |||
| </ul> | |||
| <table><colgroup> <col> <col> </colgroup> | |||
| <thead> | |||
| <tr> | |||
| <th>Editor Input</th> | |||
| <th>Preview Output</th> | |||
| </tr> | |||
| </thead> | |||
| <tbody> | |||
| <tr> | |||
| <td><code>1</code></td> | |||
| <td>1</td> | |||
| </tr> | |||
| <tr> | |||
| <td><code>=(2 + 2)</code></td> | |||
| <td>4</td> | |||
| </tr> | |||
| <tr> | |||
| <td><code>=(51 / 3)</code></td> | |||
| <td>17</td> | |||
| </tr> | |||
| <tr> | |||
| <td><code>=(B1 + B3)</code></td> | |||
| <td>18</td> | |||
| </tr> | |||
| <tr> | |||
| <td><code>=(TOTAL)</code></td> | |||
| <td>40</td> | |||
| </tr> | |||
| </tbody> | |||
| </table> | |||
| <p>N.B. To avoid formatting and calculation errors in Smart Tables, please use spaces on either side of arithmetic operators (<code>+</code>, <code>-</code>, <code>*</code>, <code>/</code>).</p> | |||
| <p>Additionally, you can make use of metadata variables:</p> | |||
| <pre><code>--- | |||
| Var: 1 | |||
| ---</code></pre> | |||
| <table><colgroup> <col> <col> </colgroup> | |||
| <thead> | |||
| <tr> | |||
| <th><strong>Editor Input</strong></th> | |||
| <th><strong>Preview Output</strong></th> | |||
| </tr> | |||
| </thead> | |||
| <tbody> | |||
| <tr> | |||
| <td><code>=([%Var] + 0)</code></td> | |||
| <td>1</td> | |||
| </tr> | |||
| <tr> | |||
| <td><code>=([%Var] + 1)</code></td> | |||
| <td>2</td> | |||
| </tr> | |||
| <tr> | |||
| <td><code>=([%Var] + 2)</code></td> | |||
| <td>3</td> | |||
| </tr> | |||
| </tbody> | |||
| </table> | |||
| <p>You can also perform unit conversion:</p> | |||
| <table><colgroup> <col> <col> </colgroup> | |||
| <thead> | |||
| <tr> | |||
| <th><strong>Editor Input</strong></th> | |||
| <th><strong>Preview Output</strong></th> | |||
| </tr> | |||
| </thead> | |||
| <tbody> | |||
| <tr> | |||
| <td><code>=(25 m/s to km/h)</code></td> | |||
| <td>90 km / h</td> | |||
| </tr> | |||
| <tr> | |||
| <td><code>=(2.2046226218487757 lbs to kg)</code></td> | |||
| <td>1 kg</td> | |||
| </tr> | |||
| <tr> | |||
| <td><code>=(460 V * 20 A * 30 days to kWh)</code></td> | |||
| <td>6624 kWh</td> | |||
| </tr> | |||
| </tbody> | |||
| </table> | |||
| <h2 id="preview">Preview</h2> | |||
| <p>Writer apps use Markdown formatting, so you can format your text just by typing. It’s familiar, and it’s also subtly formatted on-screen using Auto Markdown:</p> | |||
| <img decoding="async" src="/wp-content/uploads/migration/editor.png"> | |||
| <p>Writer also provides a formatted preview of your document:</p> | |||
| <h5>iA Writer for Mac</h5> | |||
| <p>Choose <samp>View</samp> → <samp>Show Preview</samp> or <kbd>⌘</kbd><kbd>R</kbd> or swipe to the left</p> | |||
| <h5>iA Writer for iPad and iPhone</h5> | |||
| <p>Tap the Preview button at the top right</p> | |||
| <h5>iA Writer for Windows</h5> | |||
| <p>Choose <samp>View</samp> → <samp>Preview</samp> or <kbd>ctrl</kbd><kbd>R</kbd></p> | |||
| <h5>iA Writer for Android</h5> | |||
| <p>Tap <span><samp>⋮</samp></span> → <samp>Preview</samp> or swipe to the left</p> | |||
| <h2 id="exporting">Exporting</h2> | |||
| <p>iA Writer supports exporting as plain text, HTML, Microsoft Word 2007 (.docx), and PDF via <samp>File</samp> → <samp>Export</samp>.</p> | |||
| <p>You can also export as PDF on Mac via either: | |||
| <samp>File</samp> → <samp>Print</samp> → <samp>PDF</samp> | |||
| <samp>File</samp> → <samp>Print Plain Text</samp> → <samp>PDF</samp></p> | |||
| <p>Finally, you can copy formatted text from Writer’s Preview to paste into other programs.</p> | |||
+ 218
- 0
cache/2023/57c0b22f733354552de63db112f51b20/index.html
View File
| @@ -0,0 +1,218 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Introducing the 100-Year Plan: Secure Your Online Legacy for a Century (archive) — David Larlet</title> | |||
| <meta name="description" content="Publication mise en cache pour en conserver une trace."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://wordpress.com/blog/2023/08/25/introducing-the-100-year-plan/"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Introducing the 100-Year Plan: Secure Your Online Legacy for a Century</h1> | |||
| </header> | |||
| <nav> | |||
| <p class="center"> | |||
| <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use> | |||
| </svg> Accueil</a> • | |||
| <a href="https://wordpress.com/blog/2023/08/25/introducing-the-100-year-plan/" title="Lien vers le contenu original">Source originale</a> | |||
| </p> | |||
| </nav> | |||
| <hr> | |||
| <p>An exceptional new plan for those who want to secure their online legacy for a lifetime—and then some. </p> | |||
| <p>For almost 20 years, WordPress.com has been committed to providing a user-friendly and stable platform where anyone with a story to tell can do so freely and securely. Many of our customers have been with us from the beginning, and we’re proud to have been a partner in their digital journeys. </p> | |||
| <p>Now, we’re thrilled to announce something truly new and exceptional: a plan designed exclusively for those seeking the ultimate in security and longevity for their digital presence.</p> | |||
| <p>Safeguard your online legacy with the 100-Year Plan. This brand-new offering is for:</p> | |||
| <ul> | |||
| <li>Families who wish to preserve their digital assets—the stories, photos, sounds, and videos that make up their rich family history—for generations to come.</li> | |||
| <li>Founders who want to protect and document their company’s past, present, and future.</li> | |||
| <li>Individuals seeking a stable, flexible, and customized online home that can adapt to whatever changes the future of technology will bring.</li> | |||
| </ul> | |||
| <p>WordPress.com has played an integral role in creating and stewarding the software that powers nearly half the web and remains the most trusted CMS on the planet. Our managed hosting provides blazing fast load times, airtight security, privacy protection, and everything else you’ve come to expect from a top-of-the-line host. Those elements remain our north star and are a crucial foundation for the millions of customers who trust us with their online presence.</p> | |||
| <p>But the 100-Year Plan transcends conventional hosting. Included in this unique offer:</p> | |||
| <ul> | |||
| <li><strong>Century-Long Domain Registration: </strong>A domain is your most valuable digital asset. While standard domain registrations last a decade, our 100-Year Plan gives you an opportunity to secure your domain for a full century.</li> | |||
| <li><strong>Even More</strong> <strong>Peace of Mind: </strong>As guardians of your life’s work, we take our duty seriously. At the platform level, we maintain multiple backups of your content across geographically distributed data centers, automatically submit your site to the Internet Archive if it’s public, and will provide an optional locked mode.</li> | |||
| <li><strong>Enhanced Ownership Protocols: </strong>Navigate life’s milestones with ease. Whether you’re gifting a site to a newborn or facilitating a smooth transfer of ownership, we’re here to assist every step of the way.</li> | |||
| <li><strong>Top-Tier Managed WordPress Hosting:</strong> The very best managed WordPress experience with unmetered bandwidth, best-in-class speed, and unstoppable security bundled in one convenient package.</li> | |||
| <li><strong>Premier Support: </strong>The WordPress.com 100-Year Plan includes our highest level of support from WordPress experts that we call Happiness Engineers.</li> | |||
| </ul> | |||
| <p>The 100-Year Plan isn’t just about today. It’s an investment in tomorrow. Whether you’re cementing your own digital legacy or gifting 100 years of a trusted platform to a loved one, this plan is a testament to the future’s boundless potential.</p> | |||
| <p>The cost is $38,000. We hope people renew. If you’re interested in learning more, fill out the form found here: </p> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use> | |||
| </svg> Accueil</a> • | |||
| <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use> | |||
| </svg> Suivre</a> • | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use> | |||
| </svg> Pro</a> • | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use> | |||
| </svg> Email</a> • | |||
| <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use> | |||
| </svg> Légal</abbr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 67
- 0
cache/2023/57c0b22f733354552de63db112f51b20/index.md
View File
| @@ -0,0 +1,67 @@ | |||
| title: Introducing the 100-Year Plan: Secure Your Online Legacy for a Century | |||
| url: https://wordpress.com/blog/2023/08/25/introducing-the-100-year-plan/ | |||
| hash_url: 57c0b22f733354552de63db112f51b20 | |||
| <p>An exceptional new plan for those who want to secure their online legacy for a lifetime—and then some. </p> | |||
| <p>For almost 20 years, WordPress.com has been committed to providing a user-friendly and stable platform where anyone with a story to tell can do so freely and securely. Many of our customers have been with us from the beginning, and we’re proud to have been a partner in their digital journeys. </p> | |||
| <p>Now, we’re thrilled to announce something truly new and exceptional: a plan designed exclusively for those seeking the ultimate in security and longevity for their digital presence.</p> | |||
| <p>Safeguard your online legacy with the 100-Year Plan. This brand-new offering is for:</p> | |||
| <ul> | |||
| <li>Families who wish to preserve their digital assets—the stories, photos, sounds, and videos that make up their rich family history—for generations to come.</li> | |||
| <li>Founders who want to protect and document their company’s past, present, and future.</li> | |||
| <li>Individuals seeking a stable, flexible, and customized online home that can adapt to whatever changes the future of technology will bring.</li> | |||
| </ul> | |||
| <p>WordPress.com has played an integral role in creating and stewarding the software that powers nearly half the web and remains the most trusted CMS on the planet. Our managed hosting provides blazing fast load times, airtight security, privacy protection, and everything else you’ve come to expect from a top-of-the-line host. Those elements remain our north star and are a crucial foundation for the millions of customers who trust us with their online presence.</p> | |||
| <p>But the 100-Year Plan transcends conventional hosting. Included in this unique offer:</p> | |||
| <ul> | |||
| <li><strong>Century-Long Domain Registration: </strong>A domain is your most valuable digital asset. While standard domain registrations last a decade, our 100-Year Plan gives you an opportunity to secure your domain for a full century.</li> | |||
| <li><strong>Even More</strong> <strong>Peace of Mind: </strong>As guardians of your life’s work, we take our duty seriously. At the platform level, we maintain multiple backups of your content across geographically distributed data centers, automatically submit your site to the Internet Archive if it’s public, and will provide an optional locked mode.</li> | |||
| <li><strong>Enhanced Ownership Protocols: </strong>Navigate life’s milestones with ease. Whether you’re gifting a site to a newborn or facilitating a smooth transfer of ownership, we’re here to assist every step of the way.</li> | |||
| <li><strong>Top-Tier Managed WordPress Hosting:</strong> The very best managed WordPress experience with unmetered bandwidth, best-in-class speed, and unstoppable security bundled in one convenient package.</li> | |||
| <li><strong>Premier Support: </strong>The WordPress.com 100-Year Plan includes our highest level of support from WordPress experts that we call Happiness Engineers.</li> | |||
| </ul> | |||
| <p>The 100-Year Plan isn’t just about today. It’s an investment in tomorrow. Whether you’re cementing your own digital legacy or gifting 100 years of a trusted platform to a loved one, this plan is a testament to the future’s boundless potential.</p> | |||
| <p>The cost is $38,000. We hope people renew. If you’re interested in learning more, fill out the form found here: </p> | |||
+ 198
- 0
cache/2023/83c60dd85e9f0f07bf41821a2694a0e5/index.html
View File
| @@ -0,0 +1,198 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Shining a Light on the Digital Dark Age (archive) — David Larlet</title> | |||
| <meta name="description" content="Publication mise en cache pour en conserver une trace."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://longnow.org/ideas/shining-a-light-on-the-digital-dark-age/"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Shining a Light on the Digital Dark Age</h1> | |||
| </header> | |||
| <nav> | |||
| <p class="center"> | |||
| <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use> | |||
| </svg> Accueil</a> • | |||
| <a href="https://longnow.org/ideas/shining-a-light-on-the-digital-dark-age/" title="Lien vers le contenu original">Source originale</a> | |||
| </p> | |||
| </nav> | |||
| <hr> | |||
| <p>The Dead Sea scrolls, made of parchment and papyrus, are still readable nearly two millennia after their creation — yet the expected shelf life of a DVD is about 100 years. Several of Andy Warhol’s <a href="https://www.theverge.com/2014/4/24/5646554/andy-warhols-lost-amiga-computer-art-photo-essay?ref=longnow.org">doodles</a>, created and stored on a Commodore Amiga computer in the 01980s, were forever stranded there in an obsolete format. During a data-migration in 02019, millions of songs, videos and photos were lost when MySpace — once the Internet’s leading social network — fell prey to an <a href="https://mashable.com/article/myspace-data-loss?ref=longnow.org">irreversible data loss</a>.</p> | |||
| <p>A false sense of security persists surrounding digitized documents: because an infinite number of identical copies can be made of any original, most of us believe that our electronic files have an indefinite shelf life and unlimited retrieval opportunities. In fact, preserving the world’s online content is an increasing concern, particularly as file formats (and the hardware and software used to run them) become scarce, inaccessible, or antiquated, technologies evolve, and data decays. Without constant maintenance and management, most digital information will be lost in just a few decades. Our modern records are far from permanent.</p> | |||
| <p>Obstacles to data preservation are generally divided into three broad categories: <em>hardware longevity</em> (e.g., a hard drive that degrades and eventually fails); <em>format accessibility</em> (a 5 ¼ inch floppy disk formatted with a filesystem that can’t be read by a new laptop); and <em>comprehensibility</em> (a document with an long-abandoned file type that can’t be interpreted by any modern machine). The problem is compounded by encryption (data <em>designed</em> to be inaccessible) and abundance (deciding what among the vast human archive of stored data is actually worth preserving).</p> | |||
| <p>The looming threat of the so-called “<a href="https://longnow.org/ideas/category/digital-dark-age/">Digital Dark Age</a>”, accelerated by the extraordinary growth of an invisible commodity — data — suggests we have fallen from a golden age of preservation in which everything of value was saved. In fact, countless records of previous historical eras have all but disappeared. The first Dark Ages, shorthand for the period beginning with the fall of the Roman Empire and stretching into the Middle Ages (00500-01000 CE), weren’t actually characterized by intellectual and cultural emptiness but rather by a dearth of historical documentation produced during that era.</p> | |||
| <p>Even institutions built for the express purpose of information preservation have succumbed to the ravages of time, natural disaster or human conquest. The famous library of Alexandria, one of the most important repositories of knowledge in the ancient world, eventually faded into obscurity. Built in the fourth century B.C., the library flourished for some six centuries, an unparalleled center of intellectual pursuit. Alexandria’s archive was said to contain half a million papyrus scrolls — the largest collection of manuscripts in the ancient world — including works by Plato, Aristotle, Homer and Herodotus. By the fifth century A.D., however, the majority of its collections had been stolen or destroyed, and the library fell into disrepair.</p> | |||
| <p>Digital archives are no different. The durability of the web is far from guaranteed. <a href="https://longnow.org/ideas/a-long-bet-on-link-rot-is-resolved-but-questions-about-the-durability-of-the-web-still-remain/">Link rot</a>, in which outdated links lead readers to dead content (or a cheeky dinosaur icon), sets in like a pestilence. Corporate data sets are often abandoned when a company folds, left to sit in proprietary formats that no one without the right combination of hardware, software, and encryption keys can access. Scientific data is a particularly thorny problem: unless it’s saved to a public repository accessible to other researchers, technical information essentially becomes unusable or lost. Beyond switching to <a href="https://www.planetanalog.com/the-hottest-data-storage-medium-ismagnetic-tape/?ref=longnow.org">analog alternatives</a>, which have their own drawbacks, how might we secure our digital information so that it survives for generations? How can individuals, private corporations and public entities coordinate efforts to ensure that their data is saved in more resilient formats?</p> | |||
| <p>Organizations like The Long Now Foundation are among those working to combat the Digital Dark Age (Long Now in fact coined the term at an early <a href="https://longnow.org/events/01998/feb/08/time-and-bits/">digital continuity conference</a> in 01998), drawing on open-source software, coordinated action across platforms, transparency in design, innovative technologies, and a long view of preservation. From thought experiments and industry analysis to more concrete projects, these organizations are imagining preservation on a massive time scale.</p> | |||
| <figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://static.longnow.org/2023/07/ROSETTA_DISK_02.jpg" class="kg-image" alt loading="lazy"><figcaption>The Rosetta Disk is just one possible way that we can preserve linguistic data for future generations.</figcaption></figure> | |||
| <p>Consider the <a href="http://rosettaproject.org/?ref=longnow.org">Rosetta Project</a>, Long Now’s first exploration into very long-term archiving. The idea was to build a publicly accessible digital library of human languages that would be readable to an audience 10,000 years hence. “What does it mean to have a 10,000-year library?” asks Andrew Warner, Project Manager of Rosetta. “Having parallel translations was enough to unlock the actual Rosetta Stone, so we decided to construct a ‘decoder ring,’ figuring that if someone understood one of the 1,500 languages on our disk, they could eventually decipher the entire library.” Long Now worked with linguists and engineers to microscopically etch this text onto a solid nickel disk, creating an artifact that could survive millennia. More symbolic than pragmatic, the Rosetta Project underscores the problem of digital obsolescence and explores ways we might address it through creative archival storage methods. “We created the disk not to be apocalyptic, but to encourage people to think about our more immediate future,” says Warner.</p> | |||
| <p>Indeed, the idea of a 10,000 year timescale captures an anxious public imagination that’s very much grounded in the present. How will technological innovation such as generative artificial intelligence change the way we interpret (and govern) the world? What threats — climate change, pandemics, nuclear war, economic instability, asteroid impacts — will loom large in the next decamillennium? Which information should we preserve for posterity, and how? What are the costs associated with that preservation, be they economic, environmental or moral? “Long Now will be a keeper of knowledge,” says Warner. “But we don’t want to end up erecting a digital edifice in a barren wasteland.”</p> | |||
| <hr><p>As personal computing and the ability to create digital documents became ubiquitous toward the end of the 20th century, preservation institutions — museums, libraries, non-profits, archives — and individuals — were faced with a new challenge: not simply how to preserve material, but <em>what</em> to collect and preserve in perpetuity. The astonishingly rapid accumulation of data has led to a problem of abundance: digital information is accumulating at a staggering rate. Scientific, medical and government sectors in particular have amassed billions of emails, messages, reports, cables and images, leaving future historians to sift through and categorize an enormously capacious collection — one projected to <a href="https://www.networkworld.com/article/3325397/idc-expect-175-zettabytes-of-data-worldwide-by-2025.html?ref=longnow.org">exceed hundreds of zettabytes by 02025</a>. The Clinton White House, by one estimate, churned out 6 million emails per year. NASA’s sky surveys rely on over 2 billion uploaded images. The endless proliferation of junk-content, both human and A.I.-generated, makes sifting through all this data even trickier.</p> | |||
| <p>The term of art for this sorting is known as <em>appraisal</em>: deciding whether or not something should be preserved and what resources are required to do so. “One ongoing challenge is that there’s so much to preserve, and so much that can help diversify the archival record and reflect the society we live in,” says Jefferson Bailey, Director of Archiving & Data Services at the <a href="https://archive.org/about/">Internet Archive</a>, a digital library based in San Francisco that provides free public access to countless collections of digitized materials.</p> | |||
| <figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://static.longnow.org/2023/07/Internet-Archive-servers.jpg" class="kg-image" alt loading="lazy"><figcaption>Servers housed at the Internet Archive's San Francisco headquarters.</figcaption></figure> | |||
| <p>The organization began in 01996 by archiving the Internet itself, a medium that was just beginning to grow in use. Like newspapers, the content published on the web was ephemeral — but unlike newspapers, no one was saving it. Now, the service has more than two million users per day, the vast majority of whom use the site’s <a href="https://archive.org/web/">Wayback Machine,</a> a search function for over 700 billion pages of internet history. Educators interested in archived websites, journalists tracking citations, litigators seeking out intellectual property evidencing or trademark infringement, even armchair scholars curious about the Internet’s past, all can take a ride on this digital time travel apparatus, whose mission is “to provide Universal Access to All Knowledge.” That includes websites, music, films, moving images and books.</p> | |||
| <div class="kg-card kg-callout-card kg-callout-card-white"><p class="kg-callout-emoji">💡</p><div class="kg-callout-text"><strong>WATCH</strong><p> Brewster Kahle's 02011 Long Now Talk, "</p><a href="https://www.youtube.com/watch?v=RV_ALlJGU_c&ref=longnow.org">Universal Access to All Knowledge</a><p>," on how the Internet Archive, deemed "impossible" when he founded it in 01996, became an essential part of the web. </p><strong>WATCH</strong><p> Jason Scott's 02015 Long Now Talk, "</p><a href="https://youtu.be/kugg_fewUgQ?ref=longnow.org">The Web in an Eye Blink</a><p>," which details Scott's project at the Internet Archive to save all the computer games and make them playable again inside modern web browsers.</p></div></div> | |||
| <p>Some of the services provided by the Internet Archive enable institutions to document their own web properties or older materials, but the frequency of this backup varies. “We archive many widely-read and frequently-changing websites multiple times a day, whereas other sites may only be archived once or twice a year,” says Bailey. Web scrapers allow for easy archiving, but then there’s the problem of storage. A single copy of the Internet Archive library collection occupies more than 99 petabytes of server space (the organization stores at least two copies of everything). Safely storing any long-lived data requires significant emissions, energy and cost.</p> | |||
| <p>The Internet Archive also takes multi-century preservation energy costs into account: “We own and operate and run all our own data centers,” says Bailey. “That’s partly because we’re an archive and don’t want to be dependent on corporate infrastructure, and partly because we can then run less expensive climate control operations.”</p> | |||
| <figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://static.longnow.org/2023/07/ignite-project-silica-superman-closeup_1920x1280.jpg" class="kg-image" alt loading="lazy"><figcaption>Microsoft Research’s Project Silica storage device.</figcaption></figure> | |||
| <p>Microsoft’s <a href="https://www.microsoft.com/en-us/research/project/project-silica/?ref=longnow.org">Project Silica</a> aims to tackle the problem by providing an alternative to traditional magnetic media, which degrades over time. The company created a low-cost, durable WORM media (an acronym for Write Once, Read Many, which means that data is written to a storage medium a single time and cannot be erased or modified). Considered immutable, WORM storage plays a pivotal role in meeting data security and compliance requirements and protecting against ransomware and other threats. Project Silica’s media is also resistant to electromagnetic frequencies: stored in quartz glass, the lifetime of data can be extended to tens of thousands of years. This has important implications for sustainability, because users can leave data in situ, eliminating the costly cycle of periodically copying data to a new media generation.</p> | |||
| <figure class="kg-card kg-gallery-card kg-width-wide kg-card-hascaption"><figcaption>The Arctic Code Vault in Svalbard.</figcaption></figure> | |||
| <p>Another option is to store data in Earth’s most remote places. GitHub created an <a href="https://archiveprogram.github.com/arctic-vault/?ref=longnow.org">Arctic Code Vault</a>, a data repository preserved in the Arctic World Archive (AWA), a very-long-term archival facility 250 meters deep in the permafrost of an Arctic mountain. Such cold storage is meant to last at least 1,000 years and shield data from the outside world’s effects. Arctic archiving strategies could have potential as much of the world warms. Eliminating the need for costly HVAC filtration or cooling systems, building for redundancy, putting in place multiple failovers, storing data in remote or unconventional locations — these are certainly laudable measures, but more will need to be done to mitigate the enormous ecological impact of all this storage. <a href="https://www.theguardian.com/tv-and-radio/2021/oct/29/streamings-dirty-secret-how-viewing-netflix-top-10-creates-vast-quantity-of-co2?ref=longnow.org">Streaming</a>, <a href="https://www.nytimes.com/interactive/2021/09/03/climate/bitcoin-carbon-footprint-electricity.html?ref=longnow.org">cryptocurrency</a>, and day-to-day <a href="https://www.bbc.com/future/article/20200305-why-your-internet-habits-are-not-as-clean-as-you-think?ref=longnow.org">Internet use</a> already make up nearly 4% of global CO2 emissions — a statistic that rivals the carbon footprint of the aviation industry. Sustainability must be a paramount concern of digital preservation technologies.</p> | |||
| <hr><p>For individual users worried about data preservation, the answer may lie in a switch to better systems with more robust methods of encoding, or investing in mechanisms that permit a kind of time travel to older formats. <a href="https://archive-it.org/?ref=longnow.org">Archive-It</a>, Internet Archive’s web archiving service, offers subsidized and grant-funded services to organizations, including over 1,500 libraries, archives, governments and nonprofits, enabling users to create a personalized cultural heritage storage system. There’s also <a href="https://www.permanent.org/?ref=longnow.org">Permanent Legacy Foundation</a>, a cloud service backed by a nonprofit that allows consumers to permanently store and share their digital archives with loved ones, community members and future generations. “The most distinctive component of Permanent is our legacy planning feature,” says Robert Friedman, Executive Director at Permanent. “We have a very robust vision for memorialized content — what people can do with their archives once they’re no longer able to maintain them.” For a one-time fee, Permanent will convert a user’s files (documents, video, image, audio) to more durable formats; a Microsoft Word document might be converted to a PDF, for example. “The purpose is to make sure there exists at least one copy of every file that isn’t tied to a proprietary format,” says Friedman.</p> | |||
| <div class="kg-card kg-callout-card kg-callout-card-white"><p class="kg-callout-emoji">💡</p><div class="kg-callout-text"><strong>READ</strong><p> our </p><a href="https://longnow.org/ideas/the-permanent-legacy-foundation-wants-to-preserve-your-digital-legacy-for-future-generations/">02020 profile</a><p> of the Permanent Legacy Foundation and its goal to preserve individuals' digital legacies for future generations.</p></div></div> | |||
| <p>Not being tied to a corporate entity or the commercial cloud means many of these organizations can have a direct stake in the sustainability of their operations. “If you need your data available consistently, then you have to keep running the operation at idle,” says Friedman. But for many people, their data will never be needed again after death, in which case, those personal archives can be sealed and deleted. “We don’t strip you of your rights,” he adds, “but we do need to know what to do with that data, including whether to destroy it.” Permanent is also conservative in its appraisals, and its subscription model encourages individuals to be selective about what they choose to preserve. (Fees collected by Permanent are used to fund the ongoing cost of storage and operations.)</p> | |||
| <p>“This challenge is not something that one organization is going to solve: it has to be a collective effort,” says Bailey. Federal agencies, public libraries, research institutions and private corporations, each with different budgets and mandates, must come together to address the issue of storage and associated concerns. And, as technology accelerates and emulation of older systems becomes more difficult, Digital Dark Age preppers may need to consider not just the survival of data, but the possibility that it may be misunderstood. Getting future readers to parse what we’ve preserved, and to make sense of that information, is an existential challenge without easy answers.</p> | |||
| <p>The basic lingua franca of the internet is bits: zeroes and ones that lack intrinsic meaning without software and hardware. These bits are effectively linguistic symbols, which can be transmitted over long distances and represent wildly different objects — a string of ones and zeros might represent a photograph, video, sound or text. Barring the invention of some extraordinary universal translation system, making sense of these binary codes without knowing how they were intended to be read is impossible. Also consider online disinformation, spread either by humans or artificial intelligence. Many digital archives already struggle to exclude or annotate content, not to mention living websites like Wikipedia, Twitter or Facebook, which must be continuously monitored for harmful or fraudulent content. “If you exclude fake news, does that mean you run the risk of a non-representative archive?” asks Bailey. “We are open to removal if there’s a reason, and we do it.”</p> | |||
| <p>Public and private organizations and policy-makers will need to decide what content should be restricted, embargoed, or scraped from the web entirely, and design robust digital repositories that can weather the ravages of time. People with limited resources must also be ensured the ability to preserve their data; long-term storage should be designed for equity as well as for sustainability. Finally, we must be judicious in what we store and preserve, creating a meaningful collection for future historians. Our future — and our past — depend on it.</p> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use> | |||
| </svg> Accueil</a> • | |||
| <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use> | |||
| </svg> Suivre</a> • | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use> | |||
| </svg> Pro</a> • | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use> | |||
| </svg> Email</a> • | |||
| <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use> | |||
| </svg> Légal</abbr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 17
- 0
cache/2023/83c60dd85e9f0f07bf41821a2694a0e5/index.md
File diff suppressed because it is too large
View File
+ 8
- 0
cache/2023/index.html
View File
| @@ -71,6 +71,8 @@ | |||
| <li><a href="/david/cache/2022/e44bfaaecad989f67cb2032fac000276/" title="Accès à l’article dans le cache local : The Hippocratic License">The Hippocratic License</a> (<a href="https://firstdonoharm.dev/" title="Accès à l’article original distant : The Hippocratic License">original</a>)</li> | |||
| <li><a href="/david/cache/2022/83c60dd85e9f0f07bf41821a2694a0e5/" title="Accès à l’article dans le cache local : Shining a Light on the Digital Dark Age">Shining a Light on the Digital Dark Age</a> (<a href="https://longnow.org/ideas/shining-a-light-on-the-digital-dark-age/" title="Accès à l’article original distant : Shining a Light on the Digital Dark Age">original</a>)</li> | |||
| <li><a href="/david/cache/2022/e1a26da20c603d214d0f844d5836569e/" title="Accès à l’article dans le cache local : my mind is full of webs">my mind is full of webs</a> (<a href="https://winnielim.org/journal/my-mind-is-full-of-webs/" title="Accès à l’article original distant : my mind is full of webs">original</a>)</li> | |||
| <li><a href="/david/cache/2022/5b35e3f3639ceb7d9f684aa81979f304/" title="Accès à l’article dans le cache local : The Market for Lemons">The Market for Lemons</a> (<a href="https://infrequently.org/2023/02/the-market-for-lemons/" title="Accès à l’article original distant : The Market for Lemons">original</a>)</li> | |||
| @@ -85,6 +87,8 @@ | |||
| <li><a href="/david/cache/2022/f6e269f9a6e16436827169039d551623/" title="Accès à l’article dans le cache local : Discord, or the Death of Lore « ASCII by Jason Scott">Discord, or the Death of Lore « ASCII by Jason Scott</a> (<a href="http://ascii.textfiles.com/archives/5509" title="Accès à l’article original distant : Discord, or the Death of Lore « ASCII by Jason Scott">original</a>)</li> | |||
| <li><a href="/david/cache/2022/57c0b22f733354552de63db112f51b20/" title="Accès à l’article dans le cache local : Introducing the 100-Year Plan: Secure Your Online Legacy for a Century">Introducing the 100-Year Plan: Secure Your Online Legacy for a Century</a> (<a href="https://wordpress.com/blog/2023/08/25/introducing-the-100-year-plan/" title="Accès à l’article original distant : Introducing the 100-Year Plan: Secure Your Online Legacy for a Century">original</a>)</li> | |||
| <li><a href="/david/cache/2022/f8b7c3246cf1d4e06c735ee163be32a0/" title="Accès à l’article dans le cache local : The Content Management System of my Dreams (part 2) - The trouble with dynamic publishing">The Content Management System of my Dreams (part 2) - The trouble with dynamic publishing</a> (<a href="https://www.padawan.info/en/2023/02/the-content-management-system-of-my-dreams-part-2-the-trouble-with-dynamic-publishing.html" title="Accès à l’article original distant : The Content Management System of my Dreams (part 2) - The trouble with dynamic publishing">original</a>)</li> | |||
| <li><a href="/david/cache/2022/78d79db0da7f60c48a02cfd088885085/" title="Accès à l’article dans le cache local : The (extremely) loud minority">The (extremely) loud minority</a> (<a href="https://andy-bell.co.uk/the-extremely-loud-minority/" title="Accès à l’article original distant : The (extremely) loud minority">original</a>)</li> | |||
| @@ -221,6 +225,8 @@ | |||
| <li><a href="/david/cache/2022/fb08217a583922fd319fabb55f34a4f3/" title="Accès à l’article dans le cache local : A community isn’t a garden, it’s a bar.">A community isn’t a garden, it’s a bar.</a> (<a href="https://powazek.com/posts/3571" title="Accès à l’article original distant : A community isn’t a garden, it’s a bar.">original</a>)</li> | |||
| <li><a href="/david/cache/2022/478260db4b078551676bf263cbeeaa52/" title="Accès à l’article dans le cache local : Basics, Tips and Tricks on how to use Markdown">Basics, Tips and Tricks on how to use Markdown</a> (<a href="https://ia.net/writer/support/basics/markdown-guide" title="Accès à l’article original distant : Basics, Tips and Tricks on how to use Markdown">original</a>)</li> | |||
| <li><a href="/david/cache/2022/3b05eb0d7d0409bcfd53b4cdf6c20daa/" title="Accès à l’article dans le cache local : The yaml document from hell">The yaml document from hell</a> (<a href="https://ruudvanasseldonk.com/2023/01/11/the-yaml-document-from-hell" title="Accès à l’article original distant : The yaml document from hell">original</a>)</li> | |||
| <li><a href="/david/cache/2022/afa0aae212698b71118868d36d50a747/" title="Accès à l’article dans le cache local : We need to talk about your Github addiction">We need to talk about your Github addiction</a> (<a href="https://ploum.net/2023-02-22-leaving-github.html" title="Accès à l’article original distant : We need to talk about your Github addiction">original</a>)</li> | |||
| @@ -237,6 +243,8 @@ | |||
| <li><a href="/david/cache/2022/669f9d9d8f0c6cfb8131887c17eecfa9/" title="Accès à l’article dans le cache local : Why the super rich are inevitable">Why the super rich are inevitable</a> (<a href="https://pudding.cool/2022/12/yard-sale/" title="Accès à l’article original distant : Why the super rich are inevitable">original</a>)</li> | |||
| <li><a href="/david/cache/2022/3f4be4add2995420dc6be529f1032e46/" title="Accès à l’article dans le cache local : Energy makes time">Energy makes time</a> (<a href="https://everythingchanges.us/blog/energy-makes-time/" title="Accès à l’article original distant : Energy makes time">original</a>)</li> | |||
| <li><a href="/david/cache/2022/6c69f245e09fb696b43afa54240b4148/" title="Accès à l’article dans le cache local : Ces stéréotypes qui nuisent aux femmes au travail">Ces stéréotypes qui nuisent aux femmes au travail</a> (<a href="https://koalie.blog/2023/03/11/ces-stereotypes-qui-nuisent-aux-femmes-au-travail/" title="Accès à l’article original distant : Ces stéréotypes qui nuisent aux femmes au travail">original</a>)</li> | |||
| <li><a href="/david/cache/2022/7ff62009f21336b8eb54ea18261bcfb7/" title="Accès à l’article dans le cache local : JavaScript, Community">JavaScript, Community</a> (<a href="https://www.zachleat.com/web/javascript-community/" title="Accès à l’article original distant : JavaScript, Community">original</a>)</li> | |||
Loading…