web devs forgot the philosophy of web development.
web used to be open source, it started with a universal, standardized markup language HTML. it was extended with a styling language CSS and later with a scripting language JavaScript. along the way we also saw some short term embedded dynamic elements like Flash and Java Applets.
but the core idea of web was: its open standard for building web sites.
websites used to be readable. this is classical web programming:
<!DOCTYPE html>
<html>
<head>
<title>new site</title>
<style>
button {
color: purple;
background: green;
}
</style>
</head>
<body>
<h1>new site</h1>
<p>new pagraph</p1>
<scipt>
//...
button.onclick = function(){
alert("button clicked")
}
//...
</scipt>
</body>
</html>
modern web programming looks different. lets start with the fairly readable index.html:
<!doctype html>
<html lang="en">
<head>
<title>Jumble</title>
<script type="module" src="/assets/index-InYr1OgR.js"></script>
<link rel="stylesheet" href="/assets/index-BAa5jtg8.css">
<body>
<!-- there is nothing here, everything is rendered in javascript -->
<div id="root"></div>
</body>
</html>
the javascript:
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/cashu-4P5hBhcT.js","assets/cashu-ts.es-C3veBYtP.js"])))=>i.map(i=>d[i]);
var Yme=Object.defineProperty;var PR=t=>{throw TypeError(t)};var Gme=(t,e,n)=>e in t?Yme(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n;var ue=(t,e,n)=>Gme(t,typeof e!="symbol"?e+"":e,n),kC=(t,e,n)=>e.has(t)||PR("Cannot "+n);var de=(t,e,n)=>(kC(t,e,"read from private field"),n?n.call(t):e.get(t)),mn=(t,e,n)=>e.has(t)?PR("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,n),Lt=(t,e,n,r)=>(kC(t,e,"write to private field"),r?r.call(t,n):e.set(t,n),n),yt=(t,e,n)=>(kC(t,e,"access private method"),n);var L2=(t,e,n,r)=>({set _(o){Lt(t,e,o,n)},get _(){return de(t,e,r)}});function Zme(t,e){for(var n=0;n<e.length;n++){const r=e[n];if(typeof r!="string"&&!Array.isArray(r)){for(const o in r)if(o!=="default"&&!(o in t)){const a=Object.getOwnPropertyDescriptor(r,o);a&&Object.defineProperty(t,o,a.get?a:{enumerable:!0,get:()=>r[o]})}}}return Object.freeze(Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}))}(function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const o of document.querySelectorAll('link[rel="modulepreload"]'))r(o);new MutationObserver(o=>{for(const a of o)if(a.type==="childList")for(const i of a.addedNodes)i.tagName==="LINK"&&i.rel==="modulepreload"&&r(i)}).observe(document,{childList:!0,subtree:!0});function n(o){const a={};return o.integrity&&(a.integrity=o.integrity),o.referrerPolicy&&(a.referrerPolicy=o.referrerPolicy),o.crossOrigin==="use-credentials"?a.credentials="include":o.crossOrigin==="anonymous"?a.credentials="omit":a.credentials="same-origin",a}function r(o){if(o.ep)return;o.ep=!0;const a=n(o);fetch(o.href,a)}})();function yc(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var xC={exports:{}},Z1={},jC={exports:{}},ln={};/**....
what?
the stylesheet:
*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-grad....
what?
why did web developers quit using open code? instead they replaced run time interpreted code with compiled-runtime interpreted code: its the worst of all worlds:
- runtime interpreted code is code that is interpreted at runtime, it does not require compiling
- compiled code is compiled into machine code to make it run on native hardware
compiled-runtime-interpreted code takes worst of both:
compiled, makes it unreadable
yet, its not compiled into hardware native instructions, instead its compiled into obfuscated intepreted code: its still interpreted at runtime.
this is what "modern" web dev uses, thats what facebook brought us: react.