A place to cache linked articles (think custom and personal wayback machine)
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  4. <!-- Has to be within the first 1024 bytes, hence before the <title>
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>Thinking about the past, present, and future of web development (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="#f0f0ea">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f0f0ea">
  26. <!-- Documented, feel free to shoot an email. -->
  27. <link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
  28. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  29. <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>
  30. <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>
  31. <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>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <script type="text/javascript">
  36. function toggleTheme(themeName) {
  37. document.documentElement.classList.toggle(
  38. 'forced-dark',
  39. themeName === 'dark'
  40. )
  41. document.documentElement.classList.toggle(
  42. 'forced-light',
  43. themeName === 'light'
  44. )
  45. }
  46. const selectedTheme = localStorage.getItem('theme')
  47. if (selectedTheme !== 'undefined') {
  48. toggleTheme(selectedTheme)
  49. }
  50. </script>
  51. <meta name="robots" content="noindex, nofollow">
  52. <meta content="origin-when-cross-origin" name="referrer">
  53. <!-- Canonical URL for SEO purposes -->
  54. <link rel="canonical" href="https://www.baldurbjarnason.com/past-present-future-web/">
  55. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">
  56. <article>
  57. <header>
  58. <h1>Thinking about the past, present, and future of web development</h1>
  59. </header>
  60. <nav>
  61. <p class="center">
  62. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  63. <a href="https://www.baldurbjarnason.com/past-present-future-web/" title="Lien vers le contenu original">Source originale</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <main>
  68. <p class="decking">You're supposed to talk about the past, present, and future in the new year, right?</p>
  69. <p>Here is a disconnected, rambling list of thoughts spurred by reviewing the passing year.</p>
  70. <ul>
  71. <li><p>Charitable or social benefit startups are screwed up in a special kind of way. Most of them target a specific industry from the outset—hoping to fix it in some way, even though the reasons for systemic dysfunction tend to be, well… systemic and not something a startup or charity can fix.</p></li>
  72. <li><p>Organisations of this kind—like Rebus, my employer—are effectively prevented from using the most powerful tool available to entrepreneurs: picking your market based on research; guided by what you know to be your organisation’s strengths and capabilities. We’ve already picked our market; we’ve already picked our tools; and building a sustainable business <strong>without</strong> the ability to revisit those choices is an enormous handicap.</p></li>
  73. <li><p>That handicap increases our dependance on grants and outside financing, which in turn makes us—and every organisation like us—dependent on the whims, agendas, and politics of America’s wealthiest. And that class is <em>never</em> interested in addressing systemic issues: they always choosing to patch up the cracks with ‘innovative’ software or ‘disruptive’ business models.</p></li>
  74. <li><p>Any sensible business that chose its focus based on what <em>sustainable</em> good they could do, would likely leave the education industry proper.</p></li>
  75. <li><p>The education industry is kind of screwed no matter what happens. Their options for tech and software are: idealists burning money on ideas that will never be sustainable, greybeards raking in money for maintaining clunky, outdated, legacy tech, sociopaths looking to extract value from the system (stripmining) through ‘innovation’ and ‘disruption’, or entrepreneurs seeking to ‘fix’ education by establishing monopoly dominance over some vital cornerstone that everybody relies on (because they know better than everybody else).</p></li>
  76. <li><p>That the fastest path to sustainability for an education startup is often to stop being an education startup tells us something. Not sure what, but it’s definitely telling us something.</p></li>
  77. <li><p>The web developer community, in social media at least, seems to have hit a transition point last year. Most of it has become full of intolerable nonsense where the plans and ideas of an advertising company (and its employees) dominate the social media discourse. The discourse itself has completely ceased to reflect what most people are actually doing, both end users and web developers.</p></li>
  78. <li><p>Once you step outside of the social media bubble, however, vanilla JS and more ‘modest’ approaches like Svelte or Stimulus/TurboLinks seem to have reached critical mass in terms of sustainability. Irrespective of those newer trends, jQuery and PHP-driven, un-hydrated, old-fashioned server-side rendering still utterly dominate the web that people use.</p></li>
  79. <li><p>Web dev driven by npm packages, frameworks, and bundling is to the field of web design what Java and C# in 2010s was to web servers. If you work in enterprise software it’s all you can see. Web developers working on CMS themes (or on Rails-based projects) using jQuery and plain old JS—maybe with a couple of libraries imported directly via a script tag—are the unseen dark matter of the web dev community.</p></li>
  80. <li><p>What should worry you is that npm- and framework-driven web development <em>feels</em> just as painful as enterprise software dev because it <em>is</em> enterprise development.</p>
  81. <ul>
  82. <li>TypeScript smells like Java.</li>
  83. <li>The complexity of npm packages harkens back to painful Java packaging monstrosities.</li>
  84. <li>JavaScript build systems are about as much fun as Java build systems, even though they are doing very different things.</li>
  85. <li>Deployment, as implemented in the Kubernetes and Docker ecosystems, is exactly as hard to understand and use as its Java predecessors because those <em>are</em> their predecessors.</li>
  86. </ul></li>
  87. <li><p>Some of use work exclusively with SMBs (Small-/Medium-sized Businesses) and shouldn’t need to run the enterprise anti-productivity gauntlet. Our needs in terms of frameworks, bundling, and packages are very different from those working in enterprises with hundreds or thousands of employees.</p></li>
  88. <li><p>It is not rational to expect us to be using enterprise-oriented tools and environments or to demand that we be happy about being saddled with your need for complexity.</p></li>
  89. <li><p>The divide between what you read in developer social media and what you see on web dev websites, blogs, and actual practice has never in my recollection been this wide. I’ve never before seen web dev social media and forum discourse so dominated by the US west coast enterprise tech company bubble, and I’ve been doing this for a couple of decades now. The pre-2000 dot-com bubble comes close although that one came attached to an actual financial bubble and happened before social media had evolved into its current form.</p></li>
  90. <li><p>I’m more and more leaning towards the idea that the future of digital publishing is the web.</p></li>
  91. <li><p>As much as people keep harping on the death of the web, it has matured enormously as a medium and is at a point now were a massive flowering of artistic and creative expression is possible.</p></li>
  92. <li><p>Whether that bloom happens or not is no longer a question of technological capacity but of social and cultural factors that are hard to predict or anticipate. (This wasn’t, in my opinion, a realistic possibility even as recently as a couple of years go.)</p></li>
  93. <li><p>Most of the criticisms web developers throw at Safari concern its usefulness as an <strong>app platform</strong> while the browser itself has become fully-featured and powerful as a medium for design and storytelling.</p></li>
  94. <li><p>This means that ebooks will fall further and further behind and continue to be limited to being a modern replacement of the mass market paperback, with largely the same design limitations.</p></li>
  95. <li><p>This creative expression might be distributed as web sites, apps, web apps, web publications, packages, or all of the above. I don’t know how it will pan out.</p></li>
  96. <li><p>All current modes of digital distribution are unsustainable and are likely to change over the coming ten years.</p>
  97. <ul>
  98. <li>App stores don’t scale and can’t reflect cultural and social variation. We do not have a unified global culture and never will.</li>
  99. <li>The web is being hit hard by the world’s swing towards authoritarianism.</li>
  100. <li>On the other end, it’s also being strip-mined by unregulated and uncontrolled tech companies—most of the ballooning download sizes and biggest performance monstrosities are entirely down to advertising and privacy-violating tracking.</li>
  101. <li>Many of these things are coming under increased government scrutiny for both sensible (anti-trust, pro-competition) and for scary (authoritarianism, nationalism) reasons.</li>
  102. <li>Some of these things will swing back. Some of them won’t. We can’t tell which way things will go from our current vantage point. We’ll have to wait and see as most of these changes are taking place at such a high level that it’s well beyond the ability of any one of us to meaningfully affect. But it’s safe to say that things will change.</li>
  103. </ul></li>
  104. <li><p>If you’re personally invested in the dominance of the browser over all other forms of digital media (<strong>cough</strong><em>Google</em><strong>cough</strong>) then the uncertainty regarding distribution is likely to terrify you.</p></li>
  105. <li><p>But the rest of us will probably (hopefully?) be able to adapt to whatever happens. However it gets packaged and distributed, it’ll either be made using some variation of HTML, HTTP, CSS, and JS or something substantially better (like a mature SwiftUI).</p></li>
  106. <li><p>I’m excited about the web as a creative and narrative medium—we might be in for great things in that regard. I’m less excited about the web as an app platform because, from a purely utilitarian perspective, most productivity apps should be native apps. A native app platform is capable of providing much greater privacy assurances without compromising functionality than the web ever can.</p></li>
  107. <li><p>Conversely, a native app platform that has been captured by an advertising company, like Android has, is much much worse for privacy than the web will ever be. At least on the web you can usually add content and privacy blockers. That said, even on Android, you can still go against the grain of the platform and create a client-side only app that is more powerful and more <strong>private</strong> than anything the web can realistically offer.</p></li>
  108. <li><p>Native Mac, Windows, or even Desktop Linux apps (whether they’re Electron-based or ‘proper’ native) are still unbeatable when it comes to delivering a pragmatic balance of productivity, privacy, and value.</p></li>
  109. <li><p>I have a hunch that as Chrome’s dominance over the web increases, the web’s association with Android and Google will strengthen in people’s minds. The web on other platforms like iOS and Windows will be seen by end users as a ‘Google compatibility thing’ instead of an independent and open platform. Whether that perception will be a correct one is an entirely different thing.</p></li>
  110. <li><p>I have very complicated and conflicted feelings about all of the things in tech and education that are labelled ‘open’. Too often its a label used to manipulate people into working for free, or as cover for extracting profit from community effort. Communities dedicated to ‘open’ causes all too easily veer into manipulation and abuse while <em>still</em> funnelling most of the value into the hands of the few.</p></li>
  111. <li><p>In other words: ‘open’ is a labour management strategy; not a wealth redistribution strategy</p></li>
  112. <li><p>Most mature open platforms are dominated by a profit-taking enterprise of some sort, for example the web is dominated by Google and Amazon. Whenever you do anything to strengthen the web as a platform, the majority of the value and benefit will end up in their pockets, no matter what you do. If the buck stops on the web, it stops at either Google or Amazon.</p></li>
  113. <li><p>Most of the time, when a system is truly open, it’s open to being taken over by the powerful and the rich. The rest of us will never have the resources to protect the commons so any time the playing field is even, the rich will win.</p></li>
  114. <li><p>The Free Software movement distinguishes itself a bit from the rest of the ‘open’ crowd in that they do care about, and take steps to protect, developer freedoms.</p></li>
  115. <li><p>They still throw the non-coding end user under the bus <strong>by design</strong>. Implicit in their manifestos is the idea that you are only free if you code.</p></li>
  116. <li><p>The US and UK are screwed. <strong><em>So</em></strong> screwed.</p></li>
  117. </ul>
  118. </main>
  119. </article>
  120. <hr>
  121. <footer>
  122. <p>
  123. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  124. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  125. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  126. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  127. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  128. </p>
  129. <template id="theme-selector">
  130. <form>
  131. <fieldset>
  132. <legend>Thème</legend>
  133. <label>
  134. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  135. </label>
  136. <label>
  137. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  138. </label>
  139. <label>
  140. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  141. </label>
  142. </fieldset>
  143. </form>
  144. </template>
  145. </footer>
  146. <script type="text/javascript">
  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>