feat: new post, updates styles
This commit is contained in:
parent
e1a9e58386
commit
8a71d10c07
5 changed files with 99 additions and 5 deletions
|
|
@ -68,7 +68,6 @@
|
|||
contained area can only increase if the height of the
|
||||
corresponding column increases.
|
||||
</p>
|
||||
<!-- TODO: add footnote -->
|
||||
<p>
|
||||
The following correct solution surveys all containers, initialized
|
||||
with the widest columns positions, that are valid candidates for a
|
||||
|
|
@ -108,7 +107,6 @@
|
|||
"people" yields an intuitive solution in this case.
|
||||
</p>
|
||||
<p>
|
||||
<!-- TODO: footnote -->
|
||||
Since only two people can fit in a boat at a time, pairing up
|
||||
lightest and heaviest individuals will result in the least amount
|
||||
of boats being used.
|
||||
|
|
|
|||
93
posts/software/designing-this-website.html
Normal file
93
posts/software/designing-this-website.html
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
<!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>Barrett Ruth</title>
|
||||
</head>
|
||||
<body class="graph">
|
||||
<header>
|
||||
<a
|
||||
href="/"
|
||||
style="text-decoration: none; color: inherit"
|
||||
onclick="goHome(event)"
|
||||
>
|
||||
<div class="terminal-container">
|
||||
<span class="terminal-prompt">barrett@ruth:~$ /software</span>
|
||||
<span class="terminal-cursor"></span>
|
||||
</div>
|
||||
</a>
|
||||
</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>
|
||||
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>
|
||||
<script src="/scripts/common.js"></script>
|
||||
<script src="/scripts/post.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
<time datetime="2024-06-15">15/06/2024</time>
|
||||
</p>
|
||||
</header>
|
||||
<article>
|
||||
<article class="post-article">
|
||||
<h2>pages begone</h2>
|
||||
<p>
|
||||
Though GitHub Pages may work for hosting your small, internal,
|
||||
|
|
@ -38,7 +38,6 @@
|
|||
<i>anyone</i>:
|
||||
</p>
|
||||
<ol>
|
||||
<!-- TODO: cite -->
|
||||
<li>Bandwidth caps: scale your software by default</li>
|
||||
<li>
|
||||
Limited SEO control: not a downside if you don't want want
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ const postMapping = new Map([
|
|||
"Software",
|
||||
[
|
||||
{ name: "from github pages to aws", link: "from-github-pages-to-aws" },
|
||||
{ name: "designing this website" },
|
||||
{ name: "designing this website", link: "designing-this-website" },
|
||||
{ name: "working in the terminal" },
|
||||
],
|
||||
],
|
||||
|
|
|
|||
|
|
@ -45,6 +45,10 @@ a {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.graph {
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue