|
|
|
@@ -0,0 +1,612 @@ |
|
|
|
<!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> |
|
|
|
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,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> |
|
|
|
<!-- Required to make a valid HTML5 document. --> |
|
|
|
<title>Thinking about the past, present, and future of web development (archive) — David Larlet</title> |
|
|
|
<!-- Generated from https://realfavicongenerator.net/ such a mess. --> |
|
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> |
|
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> |
|
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> |
|
|
|
<link rel="manifest" href="/manifest.json"> |
|
|
|
<link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> |
|
|
|
<link rel="shortcut icon" href="/static/david/icons/favicon.ico"> |
|
|
|
<meta name="apple-mobile-web-app-title" content="David Larlet"> |
|
|
|
<meta name="application-name" content="David Larlet"> |
|
|
|
<meta name="msapplication-TileColor" content="#da532c"> |
|
|
|
<meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> |
|
|
|
<meta name="theme-color" content="#f0f0ea"> |
|
|
|
<!-- That good ol' feed, subscribe :p. --> |
|
|
|
<link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> |
|
|
|
|
|
|
|
<meta name="robots" content="noindex, nofollow"> |
|
|
|
<meta content="origin-when-cross-origin" name="referrer"> |
|
|
|
<!-- Canonical URL for SEO purposes --> |
|
|
|
<link rel="canonical" href="https://www.baldurbjarnason.com/past-present-future-web/"> |
|
|
|
|
|
|
|
<style> |
|
|
|
/* http://meyerweb.com/eric/tools/css/reset/ */ |
|
|
|
html, body, div, span, |
|
|
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
|
|
|
a, abbr, address, big, cite, code, |
|
|
|
del, dfn, em, img, ins, |
|
|
|
small, strike, strong, tt, var, |
|
|
|
dl, dt, dd, ol, ul, li, |
|
|
|
fieldset, form, label, legend, |
|
|
|
table, caption, tbody, tfoot, thead, tr, th, td, |
|
|
|
article, aside, canvas, details, embed, |
|
|
|
figure, figcaption, footer, header, hgroup, |
|
|
|
menu, nav, output, ruby, section, summary, |
|
|
|
time, mark, audio, video { |
|
|
|
margin: 0; |
|
|
|
padding: 0; |
|
|
|
border: 0; |
|
|
|
font-size: 100%; |
|
|
|
font: inherit; |
|
|
|
vertical-align: baseline; |
|
|
|
} |
|
|
|
/* HTML5 display-role reset for older browsers */ |
|
|
|
article, aside, details, figcaption, figure, |
|
|
|
footer, header, hgroup, menu, nav, section { display: block; } |
|
|
|
body { line-height: 1; } |
|
|
|
blockquote, q { quotes: none; } |
|
|
|
blockquote:before, blockquote:after, |
|
|
|
q:before, q:after { |
|
|
|
content: ''; |
|
|
|
content: none; |
|
|
|
} |
|
|
|
table { |
|
|
|
border-collapse: collapse; |
|
|
|
border-spacing: 0; |
|
|
|
} |
|
|
|
|
|
|
|
/* http://practicaltypography.com/equity.html */ |
|
|
|
/* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ |
|
|
|
/* https://www.filamentgroup.com/lab/js-web-fonts.html */ |
|
|
|
@font-face { |
|
|
|
font-family: 'EquityTextB'; |
|
|
|
src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), |
|
|
|
url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); |
|
|
|
font-weight: 300; |
|
|
|
font-style: normal; |
|
|
|
font-display: swap; |
|
|
|
} |
|
|
|
@font-face { |
|
|
|
font-family: 'EquityTextB'; |
|
|
|
src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), |
|
|
|
url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); |
|
|
|
font-weight: 300; |
|
|
|
font-style: italic; |
|
|
|
font-display: swap; |
|
|
|
} |
|
|
|
@font-face { |
|
|
|
font-family: 'EquityTextB'; |
|
|
|
src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), |
|
|
|
url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); |
|
|
|
font-weight: 700; |
|
|
|
font-style: normal; |
|
|
|
font-display: swap; |
|
|
|
} |
|
|
|
|
|
|
|
@font-face { |
|
|
|
font-family: 'ConcourseT3'; |
|
|
|
src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), |
|
|
|
url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); |
|
|
|
font-weight: 300; |
|
|
|
font-style: normal; |
|
|
|
font-display: swap; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ |
|
|
|
body { |
|
|
|
/* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ |
|
|
|
font-family: "EquityTextB", Palatino, serif; |
|
|
|
background-color: #f0f0ea; |
|
|
|
color: #07486c; |
|
|
|
font-kerning: normal; |
|
|
|
-moz-osx-font-smoothing: grayscale; |
|
|
|
-webkit-font-smoothing: subpixel-antialiased; |
|
|
|
text-rendering: optimizeLegibility; |
|
|
|
font-variant-ligatures: common-ligatures contextual; |
|
|
|
font-feature-settings: "kern", "liga", "clig", "calt"; |
|
|
|
} |
|
|
|
pre, code, kbd, samp, var, tt { |
|
|
|
font-family: 'TriplicateT4c', monospace; |
|
|
|
} |
|
|
|
em { |
|
|
|
font-style: italic; |
|
|
|
color: #323a45; |
|
|
|
} |
|
|
|
strong { |
|
|
|
font-weight: bold; |
|
|
|
color: black; |
|
|
|
} |
|
|
|
nav { |
|
|
|
background-color: #323a45; |
|
|
|
color: #f0f0ea; |
|
|
|
display: flex; |
|
|
|
justify-content: space-around; |
|
|
|
padding: 1rem .5rem; |
|
|
|
} |
|
|
|
nav:last-child { |
|
|
|
border-bottom: 1vh solid #2d7474; |
|
|
|
} |
|
|
|
nav a { |
|
|
|
color: #f0f0ea; |
|
|
|
} |
|
|
|
nav abbr { |
|
|
|
border-bottom: 1px dotted white; |
|
|
|
} |
|
|
|
|
|
|
|
h1 { |
|
|
|
border-top: 1vh solid #2d7474; |
|
|
|
border-bottom: .2vh dotted #2d7474; |
|
|
|
background-color: #e3e1e1; |
|
|
|
color: #323a45; |
|
|
|
text-align: center; |
|
|
|
padding: 5rem 0 4rem 0; |
|
|
|
width: 100%; |
|
|
|
font-family: 'ConcourseT3'; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
} |
|
|
|
h1.single { |
|
|
|
padding-bottom: 10rem; |
|
|
|
} |
|
|
|
h1 span { |
|
|
|
position: absolute; |
|
|
|
top: 1vh; |
|
|
|
left: 20%; |
|
|
|
line-height: 0; |
|
|
|
} |
|
|
|
h1 span a { |
|
|
|
line-height: 1.7; |
|
|
|
padding: 1rem 1.2rem .6rem 1.2rem; |
|
|
|
border-radius: 0 0 6% 6%; |
|
|
|
background: #2d7474; |
|
|
|
font-size: 1.3rem; |
|
|
|
color: white; |
|
|
|
text-decoration: none; |
|
|
|
} |
|
|
|
h2 { |
|
|
|
margin: 4rem 0 1rem; |
|
|
|
border-top: .2vh solid #2d7474; |
|
|
|
padding-top: 1vh; |
|
|
|
} |
|
|
|
h3 { |
|
|
|
text-align: center; |
|
|
|
margin: 3rem 0 .75em; |
|
|
|
} |
|
|
|
hr { |
|
|
|
height: .4rem; |
|
|
|
width: .4rem; |
|
|
|
border-radius: .4rem; |
|
|
|
background: #07486c; |
|
|
|
margin: 2.5rem auto; |
|
|
|
} |
|
|
|
time { |
|
|
|
display: bloc; |
|
|
|
margin-left: 0 !important; |
|
|
|
} |
|
|
|
ul, ol { |
|
|
|
margin: 2rem; |
|
|
|
} |
|
|
|
ul { |
|
|
|
list-style-type: square; |
|
|
|
} |
|
|
|
a { |
|
|
|
text-decoration-skip-ink: auto; |
|
|
|
text-decoration-thickness: 0.05em; |
|
|
|
text-underline-offset: 0.09em; |
|
|
|
} |
|
|
|
article { |
|
|
|
max-width: 50rem; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
margin: 2rem auto; |
|
|
|
} |
|
|
|
article.single { |
|
|
|
border-top: .2vh dotted #2d7474; |
|
|
|
margin: -6rem auto 1rem auto; |
|
|
|
background: #f0f0ea; |
|
|
|
padding: 2rem; |
|
|
|
} |
|
|
|
article p:last-child { |
|
|
|
margin-bottom: 1rem; |
|
|
|
} |
|
|
|
p { |
|
|
|
padding: 0 .5rem; |
|
|
|
margin-left: 3rem; |
|
|
|
} |
|
|
|
p + p, |
|
|
|
figure + p { |
|
|
|
margin-top: 2rem; |
|
|
|
} |
|
|
|
|
|
|
|
blockquote { |
|
|
|
background-color: #e3e1e1; |
|
|
|
border-left: .5vw solid #2d7474; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
padding: 1rem; |
|
|
|
margin: 1.5rem; |
|
|
|
} |
|
|
|
blockquote cite { |
|
|
|
font-style: italic; |
|
|
|
} |
|
|
|
blockquote p { |
|
|
|
margin-left: 0; |
|
|
|
} |
|
|
|
|
|
|
|
figure { |
|
|
|
border-top: .2vh solid #2d7474; |
|
|
|
background-color: #e3e1e1; |
|
|
|
text-align: center; |
|
|
|
padding: 1.5rem 0; |
|
|
|
margin: 1rem 0 0; |
|
|
|
font-size: 1.5rem; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
figure img { |
|
|
|
max-width: 250px; |
|
|
|
max-height: 250px; |
|
|
|
border: .5vw solid #323a45; |
|
|
|
padding: 1px; |
|
|
|
} |
|
|
|
figcaption { |
|
|
|
padding: 1rem; |
|
|
|
line-height: 1.4; |
|
|
|
} |
|
|
|
aside { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
background-color: #e3e1e1; |
|
|
|
padding: 1rem 0; |
|
|
|
border-bottom: .2vh solid #07486c; |
|
|
|
} |
|
|
|
aside p { |
|
|
|
max-width: 50rem; |
|
|
|
margin: 0 auto; |
|
|
|
} |
|
|
|
|
|
|
|
/* https://fvsch.com/code/css-locks/ */ |
|
|
|
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { |
|
|
|
font-size: 1rem; |
|
|
|
line-height: calc( 1.5em + 0.2 * 1rem ); |
|
|
|
} |
|
|
|
h1 { |
|
|
|
font-size: 1.9rem; |
|
|
|
line-height: calc( 1.2em + 0.2 * 1rem ); |
|
|
|
} |
|
|
|
h2 { |
|
|
|
font-size: 1.6rem; |
|
|
|
line-height: calc( 1.3em + 0.2 * 1rem ); |
|
|
|
} |
|
|
|
h3 { |
|
|
|
font-size: 1.35rem; |
|
|
|
line-height: calc( 1.4em + 0.2 * 1rem ); |
|
|
|
} |
|
|
|
@media (min-width: 20em) { |
|
|
|
/* The (100vw - 20rem) / (50 - 20) part |
|
|
|
resolves to 0-1rem, depending on the |
|
|
|
viewport width (between 20em and 50em). */ |
|
|
|
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { |
|
|
|
font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); |
|
|
|
line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); |
|
|
|
margin-left: 0; |
|
|
|
} |
|
|
|
h1 { |
|
|
|
font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); |
|
|
|
line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); |
|
|
|
} |
|
|
|
h2 { |
|
|
|
font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); |
|
|
|
line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); |
|
|
|
} |
|
|
|
h3 { |
|
|
|
font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); |
|
|
|
line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); |
|
|
|
} |
|
|
|
} |
|
|
|
@media (min-width: 50em) { |
|
|
|
/* The right part of the addition *must* be a |
|
|
|
rem value. In this example we *could* change |
|
|
|
the whole declaration to font-size:2.5rem, |
|
|
|
but if our baseline value was not expressed |
|
|
|
in rem we would have to use calc. */ |
|
|
|
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { |
|
|
|
font-size: calc( 1rem + .6 * 1rem ); |
|
|
|
line-height: 1.5em; |
|
|
|
} |
|
|
|
p, li, pre, details { |
|
|
|
margin-left: 3rem; |
|
|
|
} |
|
|
|
h1 { |
|
|
|
font-size: calc( 1.9rem + 1.5 * 1rem ); |
|
|
|
line-height: 1.2em; |
|
|
|
} |
|
|
|
h2 { |
|
|
|
font-size: calc( 1.5rem + 1.5 * 1rem ); |
|
|
|
line-height: 1.3em; |
|
|
|
} |
|
|
|
h3 { |
|
|
|
font-size: calc( 1.35rem + 1.5 * 1rem ); |
|
|
|
line-height: 1.4em; |
|
|
|
} |
|
|
|
figure img { |
|
|
|
max-width: 500px; |
|
|
|
max-height: 500px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
figure.unsquared { |
|
|
|
margin-bottom: 1.5rem; |
|
|
|
} |
|
|
|
figure.unsquared img { |
|
|
|
height: inherit; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@media print { |
|
|
|
body { font-size: 100%; } |
|
|
|
a:after { content: " (" attr(href) ")"; } |
|
|
|
a, a:link, a:visited, a:after { |
|
|
|
text-decoration: underline; |
|
|
|
text-shadow: none !important; |
|
|
|
background-image: none !important; |
|
|
|
background: white; |
|
|
|
color: black; |
|
|
|
} |
|
|
|
abbr[title] { border-bottom: 0; } |
|
|
|
abbr[title]:after { content: " (" attr(title) ")"; } |
|
|
|
img { page-break-inside: avoid; } |
|
|
|
@page { margin: 2cm .5cm; } |
|
|
|
h1, h2, h3 { page-break-after: avoid; } |
|
|
|
p3 { orphans: 3; widows: 3; } |
|
|
|
img { |
|
|
|
max-width: 250px !important; |
|
|
|
max-height: 250px !important; |
|
|
|
} |
|
|
|
nav, aside { display: none; } |
|
|
|
} |
|
|
|
|
|
|
|
ul.with_columns { |
|
|
|
column-count: 1; |
|
|
|
} |
|
|
|
@media (min-width: 20em) { |
|
|
|
ul.with_columns { |
|
|
|
column-count: 2; |
|
|
|
} |
|
|
|
} |
|
|
|
@media (min-width: 50em) { |
|
|
|
ul.with_columns { |
|
|
|
column-count: 3; |
|
|
|
} |
|
|
|
} |
|
|
|
ul.with_two_columns { |
|
|
|
column-count: 1; |
|
|
|
} |
|
|
|
@media (min-width: 20em) { |
|
|
|
ul.with_two_columns { |
|
|
|
column-count: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
@media (min-width: 50em) { |
|
|
|
ul.with_two_columns { |
|
|
|
column-count: 2; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.gallery { |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
justify-content: space-around; |
|
|
|
} |
|
|
|
.gallery figure img { |
|
|
|
margin-left: 1rem; |
|
|
|
margin-right: 1rem; |
|
|
|
} |
|
|
|
.gallery figure figcaption { |
|
|
|
font-family: 'ConcourseT3' |
|
|
|
} |
|
|
|
|
|
|
|
footer { |
|
|
|
font-family: 'ConcourseT3'; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
border-top: 3px solid white; |
|
|
|
padding: 4rem 0; |
|
|
|
background-color: #07486c; |
|
|
|
color: white; |
|
|
|
} |
|
|
|
footer > * { |
|
|
|
max-width: 50rem; |
|
|
|
margin: 0 auto; |
|
|
|
} |
|
|
|
footer a { |
|
|
|
color: #f1c40f; |
|
|
|
} |
|
|
|
footer .avatar { |
|
|
|
width: 200px; |
|
|
|
height: 200px; |
|
|
|
border-radius: 50%; |
|
|
|
float: left; |
|
|
|
-webkit-shape-outside: circle(); |
|
|
|
shape-outside: circle(); |
|
|
|
margin-right: 2rem; |
|
|
|
padding: 2px 5px 5px 2px; |
|
|
|
background: white; |
|
|
|
border-left: 1px solid #f1c40f; |
|
|
|
border-top: 1px solid #f1c40f; |
|
|
|
border-right: 5px solid #f1c40f; |
|
|
|
border-bottom: 5px solid #f1c40f; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
|
|
|
<h1> |
|
|
|
<span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> |
|
|
|
Thinking about the past, present, and future of web development (archive) |
|
|
|
<time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> |
|
|
|
</h1> |
|
|
|
<section> |
|
|
|
<article> |
|
|
|
<h3><a href="https://www.baldurbjarnason.com/past-present-future-web/">Source originale du contenu</a></h3> |
|
|
|
<p class="decking">You're supposed to talk about the past, present, and future in the new year, right?</p> |
|
|
|
|
|
|
|
<p>Here is a disconnected, rambling list of thoughts spurred by reviewing the passing year.</p> |
|
|
|
|
|
|
|
<ul> |
|
|
|
<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> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
<ul> |
|
|
|
<li>TypeScript smells like Java.</li> |
|
|
|
<li>The complexity of npm packages harkens back to painful Java packaging monstrosities.</li> |
|
|
|
<li>JavaScript build systems are about as much fun as Java build systems, even though they are doing very different things.</li> |
|
|
|
<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> |
|
|
|
</ul></li> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
<li><p>I’m more and more leaning towards the idea that the future of digital publishing is the web.</p></li> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
<li><p>All current modes of digital distribution are unsustainable and are likely to change over the coming ten years.</p> |
|
|
|
|
|
|
|
<ul> |
|
|
|
<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> |
|
|
|
<li>The web is being hit hard by the world’s swing towards authoritarianism.</li> |
|
|
|
<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> |
|
|
|
<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> |
|
|
|
<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> |
|
|
|
</ul></li> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
<li><p>In other words: ‘open’ is a labour management strategy; not a wealth redistribution strategy</p></li> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
<li><p>The US and UK are screwed. <strong><em>So</em></strong> screwed.</p></li> |
|
|
|
</ul> |
|
|
|
</article> |
|
|
|
</section> |
|
|
|
|
|
|
|
|
|
|
|
<nav id="jumpto"> |
|
|
|
<p> |
|
|
|
<a href="/david/blog/">Accueil du blog</a> | |
|
|
|
<a href="https://www.baldurbjarnason.com/past-present-future-web/">Source originale</a> | |
|
|
|
<a href="/david/stream/2019/">Accueil du flux</a> |
|
|
|
</p> |
|
|
|
</nav> |
|
|
|
|
|
|
|
<footer> |
|
|
|
<div> |
|
|
|
<img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> |
|
|
|
<p> |
|
|
|
Bonjour/Hi! |
|
|
|
Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> |
|
|
|
Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>). |
|
|
|
</p> |
|
|
|
<p> |
|
|
|
Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>. |
|
|
|
</p> |
|
|
|
|
|
|
|
<p> |
|
|
|
Voici quelques articles choisis : |
|
|
|
<a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, |
|
|
|
<a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, |
|
|
|
<a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, |
|
|
|
<a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, |
|
|
|
<a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, |
|
|
|
<a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, |
|
|
|
<a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, |
|
|
|
<a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, |
|
|
|
<a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, |
|
|
|
<a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, |
|
|
|
<a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, |
|
|
|
<a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, |
|
|
|
<a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, |
|
|
|
<a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, |
|
|
|
<a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, |
|
|
|
et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> |
|
|
|
</p> |
|
|
|
<p> |
|
|
|
On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>. |
|
|
|
</p> |
|
|
|
<p> |
|
|
|
Je ne traque pas ta navigation mais mon |
|
|
|
<abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> |
|
|
|
conserve des logs d’accès. |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</footer> |
|
|
|
<script type="text/javascript"> |
|
|
|
;(_ => { |
|
|
|
const jumper = document.getElementById('jumper') |
|
|
|
jumper.addEventListener('click', e => { |
|
|
|
e.preventDefault() |
|
|
|
const anchor = e.target.getAttribute('href') |
|
|
|
const targetEl = document.getElementById(anchor.substring(1)) |
|
|
|
targetEl.scrollIntoView({behavior: 'smooth'}) |
|
|
|
}) |
|
|
|
})() |
|
|
|
</script> |
