95 lines
3.9 KiB
HTML
95 lines
3.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="stylesheet" href="/styles/common.css" />
|
|
<link rel="stylesheet" href="/styles/post.css" />
|
|
<link rel="icon" type="image/webp" href="/public/logo.webp" />
|
|
<title>designing this website</title>
|
|
</head>
|
|
<body class="graph-background">
|
|
<site-header></site-header>
|
|
<main class="main">
|
|
<div class="post-container">
|
|
<header class="post-header">
|
|
<h1 class="post-title">designing this website</h1>
|
|
<p class="post-meta">
|
|
<time datetime="2024-06-18">18/06/2024</time>
|
|
</p>
|
|
</header>
|
|
<article class="post-article">
|
|
<h2>HTML, JavaScript, and CSS</h2>
|
|
<p>That's all there is to it.</p>
|
|
<p>I thought about using the following frameworks:</p>
|
|
<ol>
|
|
<li><a target="blank" href="https://react.dev/">React.js</a></li>
|
|
<li><a target="blank" href="https://nextjs.org/">Next.js</a></li>
|
|
<li><a target="blank" href="https://gohugo.io/">Hugo</a></li>
|
|
<li><a target="blank" href="https://astro.build/">Astro</a></li>
|
|
</ol>
|
|
<p>
|
|
But I did not actually <i>need</i> any of them to make this site
|
|
look decent.
|
|
</p>
|
|
<h2>What I've Learned</h2>
|
|
<p>
|
|
Of course, most people build simple websites like these to learn a
|
|
new technology or framework, not to use an optimal tool. That's
|
|
actually why I
|
|
<a
|
|
target="blank"
|
|
href="/posts/software/from-github-pages-to-aws.html"
|
|
>hosted this website on AWS</a
|
|
>.
|
|
</p>
|
|
<p>
|
|
Building this website with truly bare-bones technologies has made me
|
|
appreciate <i>why</i> these web frameworks have emerged.
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
Writing JavaScript to manipulate the DOM works just fine but lacks
|
|
the readability and composability that many JavaScript frameworks
|
|
bring to the table.
|
|
</li>
|
|
<li>
|
|
Re-using code is odd. For example, I created a
|
|
"common.js" with general utilities—there is zero
|
|
indication (both to me and my language servers) that these
|
|
functions are exposed to other scripts included by the same HTML
|
|
file.
|
|
</li>
|
|
<li>
|
|
JSX is great. Dynamically inserting HTML as raw strings or writing
|
|
them line by line with the DOM is a pain, and a verbose one at
|
|
that.
|
|
</li>
|
|
<li>
|
|
Similarly, CSS styling (inline/stylesheet) works at the small
|
|
scale. However, with styles being completely divorced from the
|
|
HTML itself, much is left to be desired.
|
|
</li>
|
|
<li>
|
|
Reusing HTML, styles, and JavaScript feels extremely fragile.
|
|
Innovative type-safe, optimized, and composable solutions
|
|
definitely have their place in the web.
|
|
</li>
|
|
<li>
|
|
<b>You can be efficient with HTML, JS, and CSS.</b> My iteration
|
|
speed on on this site versus other React.js/MDX blogs I have
|
|
worked on is the same if not faster. While this may be a testament
|
|
to my lack of JavaScript experience, I think people conclude too
|
|
early that their task is beyond the technologies that form the
|
|
foundation of the web today.
|
|
</li>
|
|
</ul>
|
|
</article>
|
|
</div>
|
|
</main>
|
|
<site-footer></site-footer>
|
|
<script src="/scripts/common.js"></script>
|
|
<script src="/scripts/post.js"></script>
|
|
</body>
|
|
</html>
|