|
|
|
@@ -0,0 +1,215 @@ |
|
|
|
<!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>Notes from “An approach to computing and sustainability inspired from permaculture” by Devine LuLinvega (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)"> |
|
|
|
<!-- Is that even respected? Retrospectively? What a shAItshow… |
|
|
|
https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ --> |
|
|
|
<meta name="robots" content="noai, noimageai"> |
|
|
|
<!-- 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://blog.jim-nielsen.com/2024/notes-from-computing-sustainably/"> |
|
|
|
|
|
|
|
<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>Notes from “An approach to computing and sustainability inspired from permaculture” by Devine LuLinvega</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://blog.jim-nielsen.com/2024/notes-from-computing-sustainably/" title="Lien vers le contenu original">Source originale</a> |
|
|
|
<br> |
|
|
|
Mis en cache le 2024-01-15 |
|
|
|
</p> |
|
|
|
</nav> |
|
|
|
<hr> |
|
|
|
<p class="image-container"><img src="https://cdn.jim-nielsen.com/blog/2023/mcdonalds-tech.jpg" alt="Patent-application-like drawing with a person on a sofa looking at a TV with a hamburger on it and a caption bubble that says, “Say 'McDonalds' to end commercial”"> |
|
|
|
|
|
|
|
</p> |
|
|
|
<blockquote> |
|
|
|
<p>I am interested in computers as a way to do more than consume.</p> |
|
|
|
</blockquote> |
|
|
|
<p>That’s how Devine starts <a href="https://www.youtube.com/watch?v=T3u7bGgVspM">their talk from Strangeloop</a>. <a href="https://blog.jim-nielsen.com/2023/precarious-modern-computing/">I’ve linked to them before</a>, as they have an interesting perspective on computing in the 21st century (given, in part, their environment of living on a boat).</p> |
|
|
|
<p>I liked Devine’s warning about equating newer with better:</p> |
|
|
|
<blockquote> |
|
|
|
<p>If the new software no longer runs on old hardware, it is worse than the old software.</p> |
|
|
|
</blockquote> |
|
|
|
<p>Or this reminder about the flip-side of computers:</p> |
|
|
|
<blockquote> |
|
|
|
<p>We should be careful of who makes the bicycle for your mind.</p> |
|
|
|
</blockquote> |
|
|
|
<p>But there were two things in particular I wanted to write about that stood out to me.</p> |
|
|
|
<h2 id="the-value-of-absence">The Value of Absence</h2> |
|
|
|
<blockquote> |
|
|
|
<p>The best phrasing I've seen for [defining] elegance is: articulating the value of absence. </p> |
|
|
|
</blockquote> |
|
|
|
<p>It’s easy to fall into the trap of only seeing what is lacking — “This can’t do X” or “If only we added Y” — which, perhaps unknowingly, makes us perceive everything around us as never being enough.</p> |
|
|
|
<p>But this idea of being able to “articulate the value of absence” cuts against this natural inclination to always be adding more.</p> |
|
|
|
<p>Steve Jobs once said that at Apple they are as proud of the things they <em>haven’t done</em> as the things they <em>have done</em>. They’re proud of their ability to give a million “No”s to the one “Yes”.</p> |
|
|
|
<p>And I think this runs in a similar vein. Can you say “no” and articulate <em>why</em>?</p> |
|
|
|
<p>Instead of a knee-jerk acceptance of addition, “This would be so much better if we added X!” A good exercise might be to try articulating the value of subtraction, “The absence of X would be beneficial because…”.</p> |
|
|
|
<p>As Devine has said <a href="https://blog.jim-nielsen.com/2023/the-cost-of-avoiding-annoyance/">elsewhere</a>, “I don't think we've even begun to scratch the surface with what can be done with little.”</p> |
|
|
|
<h2 id="systems-that-foster-solutions-vs-knowledge">Systems That Foster Solutions vs. Knowledge</h2> |
|
|
|
<blockquote> |
|
|
|
<p>To give people power over the technology that rules their lives and take them apart is extremely important if you want to have a system that goes beyond solutions and includes knowledge.</p> |
|
|
|
</blockquote> |
|
|
|
<p>I think that statement becomes more profound the longer you ponder on it.</p> |
|
|
|
<p>So many software and hardware services encourage dependency through their solutions — they give you a fish, but don’t teach you how to fish. Devine’s illustration of this idea through the analogy of tap water is interesting.</p> |
|
|
|
<p>When you’re getting water out of a tap and cannot see the source (for example in your home) it produces a sense that there is an unlimited amount that can come out. </p> |
|
|
|
<p>Contrast that with a tap hooked up to water tanks that are visible each time you get water (for example, on boat). Every time you get more water, you see the tanks drop and you are reminded how much is left. Behavior changes when usage produces immediate, noticeable consequences.</p> |
|
|
|
<p>So many companies have made a business out of deliberating hiding limitations, which alters behavior and usage.</p> |
|
|
|
<p>This insight seems to come from Devine’s experience of living on a sailboat, which is an environment that is constantly imposing limitations.</p> |
|
|
|
<p>For example, Devine notes that on a boat you have a limited supply of power. When you can’t do something on a boat because you don’t have the power, people’s natural inclination is to respond, “Well then just add more power”. Devine notes that is a possibility, but there’s a tradeoff: it produces more weight on the boat which means (for example) that it will be harder to outrun storms and they’ll therefore need more power to move the boat at the same speed as before. There’s a balance to it all.</p> |
|
|
|
<p>Going back to the original quote, the insight here (I think) is: systems that preserve transparency into the mechanisms of their inner workings encourage more mindful, deliberate use based in reality because people develop knowledge through use. (This stands in contrast to a system whose inner workings are opaque and therefore antithetical to developing knowledge because they reveal no <a href="https://adactio.com/journal/6786">seams</a> to their true nature.)</p> |
|
|
|
<p>I think there’s a parallel here to the abstractions we use in software (like web frameworks) and how they choose to reveal their own inner workings (or not). But I will leave that as an exercise for the reader — and myself, perhaps in another post.</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> |
