A place to cache linked articles (think custom and personal wayback machine)
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

index.html 16KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="en">
  4. <!-- Has to be within the first 1024 bytes, hence before the `title` element
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>Software is a medium of setbacks, but a medium’s limitations don’t define the artist (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Is that even respected? Retrospectively? What a shAItshow…
  28. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  29. <meta name="robots" content="noai, noimageai">
  30. <!-- Documented, feel free to shoot an email. -->
  31. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  32. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  33. <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>
  34. <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>
  35. <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>
  36. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  37. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  38. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  39. <script>
  40. function toggleTheme(themeName) {
  41. document.documentElement.classList.toggle(
  42. 'forced-dark',
  43. themeName === 'dark'
  44. )
  45. document.documentElement.classList.toggle(
  46. 'forced-light',
  47. themeName === 'light'
  48. )
  49. }
  50. const selectedTheme = localStorage.getItem('theme')
  51. if (selectedTheme !== 'undefined') {
  52. toggleTheme(selectedTheme)
  53. }
  54. </script>
  55. <meta name="robots" content="noindex, nofollow">
  56. <meta content="origin-when-cross-origin" name="referrer">
  57. <!-- Canonical URL for SEO purposes -->
  58. <link rel="canonical" href="https://www.baldurbjarnason.com/2024/software-is-a-medium-of-setbacks/">
  59. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  60. <article>
  61. <header>
  62. <h1>Software is a medium of setbacks, but a medium’s limitations don’t define the artist</h1>
  63. </header>
  64. <nav>
  65. <p class="center">
  66. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  67. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  68. </svg> Accueil</a> •
  69. <a href="https://www.baldurbjarnason.com/2024/software-is-a-medium-of-setbacks/" title="Lien vers le contenu original">Source originale</a>
  70. <br>
  71. Mis en cache le 2024-02-21
  72. </p>
  73. </nav>
  74. <hr>
  75. <p><img src="https://www.baldurbjarnason.com/img/hveragerdi-dither-experiment.png" alt="A view of the waterfall in Varmá. The picture is dithered and blocky. Reminiscent of how the original mac computers rendered pictures."></p>
  76. <p>Much of the time, progress in software development comes coupled with a matching regression.</p>
  77. <p>“We’ve made it better.”</p>
  78. <p>(Whispered) <em>“But we’ve also made it worse."</em></p>
  79. <p>The evolution of Apple’s computing devices makes for a decent example.</p>
  80. <p>The original Mac? Huge leap in the usability and effectiveness of the desktop computer. Also didn’t come with a programming language and, initially, software for it had to be developed on an entirely different, much more expensive system (the Apple Lisa).</p>
  81. <p>Over time that situation improved with Hypercard and various forms of scripting and automation, as well as a decent set of tools for making software with Pascal and later C++.</p>
  82. <p>MacOS X arrived, and we got the power of the unix-compatible ecosystem finally coupled with a usable desktop environment.</p>
  83. <p>We also lost many of the scripting capabilities that were unique to Mac “Classic”, but that was sorta-kinda offset by the wealth of new command-line tools and built-in support for popular scripting languages such as Python.</p>
  84. <p>Sucked if you were all-in on AppleScript, but great for the rest of us.</p>
  85. <p>Swift is a modern programming language designed for the development of complex but reliable systems. But when it was first launched it both was substantially less capable than Objective-C, and it sucked all the air out of the room for the entire Objective-C ecosystem. Apple had to spend years both maintaining an old language, one it was clearly trying to get rid of, and evolving a new language to the point where it could replace the old. The innovation came with a built-in setback that took years of effort to overcome.</p>
  86. <p>Not that Swift is a true replacement for Objective-C. Its goals are clearly <em>very</em> different from Objective-C which leaned heavily into late binding and runtime dynamism. Swift leans the other way, focusing instead on correctness and performance. The differences between the two languages that most end-users or even developers notice are more down to the framework and environment and not the languages, per se, but there is a <em>flavour</em> difference – that vague sensation that both spoken and programming languages leave you with, an added dimension of meaning that hangs around it like a meal’s smell in a kitchen.</p>
  87. <p>Progress is an ongoing act of myth-making. Most of the time the true story is a mixed one. Things are lost. Others gained. A happy ending is when you come out ahead. A story full of setbacks is a tragedy.</p>
  88. <p>It feels like we’re experiencing more setbacks than progress in software and tech at the moment.</p>
  89. <p>Lay-offs are having a noticeable effect on the software the tech industry is shipping. I know I’m finding buggy updates to be more common than they were a couple of years ago. <em>(Setback.)</em> The decline in search engines over only a few months is as undeniable as a sack hammers swung at your face. <em>(Setback.)</em></p>
  90. <p>And that brings up the other setback. In studies LLM-aided coding is <a href="https://visualstudiomagazine.com/Articles/2024/01/25/copilot-research.aspx">not</a> <a href="https://arxiv.org/abs/2211.03622">having</a> a <a href="https://arxiv.org/abs/2108.09293">great</a> <a href="https://arxiv.org/abs/2208.09727">effect</a> on the <a href="https://softwarecrisis.dev/letters/ai-and-software-quality/">quality</a> or <a href="https://arstechnica.com/information-technology/2024/01/ai-poisoning-could-turn-open-models-into-destructive-sleeper-agents-says-anthropic/">safety</a> of the code. <em>(Setback.)</em> Sure, they’re more “productive” in that they’re writing more lines of code, but the industry discovered decades ago that measuring coding productivity this way is a very bad idea as it inherently promotes poor coding. <em>(Setback.)</em></p>
  91. <p>Defenders say that in actual practice nobody actually commits LLM-generated code directly so this is all just scare-mongering, except – because we, as an industry, is so utterly foolish as to commit completely to a Microsoft-owned development environment through and through <em>(Setback)</em> – Microsoft can track the code generated by Copilot, through Visual Studio Code, all the way to being committed in a GitHub repository, and it turns out that <a href="https://www.microsoft.com/en-us/Investor/events/FY-2023/Morgan-Stanley-TMT-Conference#:~:text=Scott%20Guthrie%3A%20I%20think%20you%27re,is%20now%20AI%2Dgenerated%20and%20unmodified">at least 40% of the code generated is committed unmodified.</a></p>
  92. <p>That was a year ago. That ratio is almost certainly higher today. <em>(Setback.)</em></p>
  93. <p>Now we have Apple’s shenanigans with Progressive Web Apps in the EU and, no matter whether you’re gullible enough to buy Apple’s line or whether you’re a rabid everything-Apple-sucks hater who is incapable of seeing the good that Apple occasionally does, losing such an important capability <a href="https://www.thisdot.co/blog/the-renaissance-of-pwas">only a few months after they first managed to make it truly usable</a> is, well, <em>a setback</em>. A dispiriting one at that.</p>
  94. <p>Between the obvious cycle triggered by the lay-offs and the generally inhospitable environment that the software industry has evolved into, it’s hard to feel excited or motivated by software development.</p>
  95. <p>And we do need to feel motivated, at least in part. The word “passion” is almost always a red flag for any given industry, but software development is a <em>creative</em> business. You may all go around cosplaying engineers, but your average coder is about as close to being an engineer as a fan cosplaying as Hugh Laurie playing House is to being a medical doctor.</p>
  96. <p><em>Software is a creative industry with more in common with media production industries than housebuilding.</em></p>
  97. <p>As such, a baseline intrinsically-motivated curiosity about the form is one of the most powerful assets you can have when doing your job. It helps you solve problems and come up with new ideas.</p>
  98. <p>The current cycle of decline and disinvestment in people makes that hard – probably next to impossible – but we can try to find our own ways forward where we can.</p>
  99. <hr>
  100. <p>The weekend before I wrote this, I was feeling lost – unsure about my place and future in the industry.</p>
  101. <p>A walk helped. Doing something creative like photographing what I saw around town helped as well.</p>
  102. <p>But what reminded me of how much <em>fun</em> you can have with software was having a go at porting this excellent implementation of the <a href="https://github.com/andrewstephens75/as-dithered-image">Atkinson Dithering algorithm</a> to use the <a href="https://sharp.pixelplumbing.com/"><code>sharp</code></a> node.js library and then playing around with processing and laying my photos into what you see in this essay. The image at the beginning is of the one wall that remains of the old wool factory by the waterfall in Varmá.</p>
  103. <p><em>Villikettir Suðurlands</em> specialise in rescuing cats, both feral and abandoned housecats, here in the south of Iceland. The picture below is of the house where they keep some of the cats waiting for somebody to adopt them. They’re in from the cold.</p>
  104. <p>Not everything is a setback.</p>
  105. <p><img src="https://www.baldurbjarnason.com/img/hveragerdi-7-1-dithered.png" alt="A high key, heavily dithered image of a small house covered with corrugated iron. In the window there are two cats loafing."></p>
  106. </article>
  107. <hr>
  108. <footer>
  109. <p>
  110. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  111. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  112. </svg> Accueil</a> •
  113. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  114. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  115. </svg> Suivre</a> •
  116. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  117. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  118. </svg> Pro</a> •
  119. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  120. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  121. </svg> Email</a> •
  122. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  123. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  124. </svg> Légal</abbr>
  125. </p>
  126. <template id="theme-selector">
  127. <form>
  128. <fieldset>
  129. <legend><svg class="icon icon-brightness-contrast">
  130. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  131. </svg> Thème</legend>
  132. <label>
  133. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  134. </label>
  135. <label>
  136. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  137. </label>
  138. <label>
  139. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  140. </label>
  141. </fieldset>
  142. </form>
  143. </template>
  144. </footer>
  145. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  146. <script>
  147. function loadThemeForm(templateName) {
  148. const themeSelectorTemplate = document.querySelector(templateName)
  149. const form = themeSelectorTemplate.content.firstElementChild
  150. themeSelectorTemplate.replaceWith(form)
  151. form.addEventListener('change', (e) => {
  152. const chosenColorScheme = e.target.value
  153. localStorage.setItem('theme', chosenColorScheme)
  154. toggleTheme(chosenColorScheme)
  155. })
  156. const selectedTheme = localStorage.getItem('theme')
  157. if (selectedTheme && selectedTheme !== 'undefined') {
  158. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  159. }
  160. }
  161. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  162. window.addEventListener('load', () => {
  163. let hasDarkRules = false
  164. for (const styleSheet of Array.from(document.styleSheets)) {
  165. let mediaRules = []
  166. for (const cssRule of styleSheet.cssRules) {
  167. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  168. continue
  169. }
  170. // WARNING: Safari does not have/supports `conditionText`.
  171. if (cssRule.conditionText) {
  172. if (cssRule.conditionText !== prefersColorSchemeDark) {
  173. continue
  174. }
  175. } else {
  176. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  177. continue
  178. }
  179. }
  180. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  181. }
  182. // WARNING: do not try to insert a Rule to a styleSheet you are
  183. // currently iterating on, otherwise the browser will be stuck
  184. // in a infinite loop…
  185. for (const mediaRule of mediaRules) {
  186. styleSheet.insertRule(mediaRule.cssText)
  187. hasDarkRules = true
  188. }
  189. }
  190. if (hasDarkRules) {
  191. loadThemeForm('#theme-selector')
  192. }
  193. })
  194. </script>
  195. </body>
  196. </html>