barrett/barrettruth.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: new post, updates styles

Browse source
This commit is contained in:
Barrett Ruth 2024-06-18 17:59:01 -05:00
parent e1a9e58386
commit 8a71d10c07
5 changed files with 99 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

2
posts/algorithms/two-pointers.html
View file

@ -68,7 +68,6 @@
contained area can only increase if the height of the contained area can only increase if the height of the
corresponding column increases. corresponding column increases.
</p> </p>
<!-- TODO: add footnote -->
<p> <p>
The following correct solution surveys all containers, initialized The following correct solution surveys all containers, initialized
with the widest columns positions, that are valid candidates for a with the widest columns positions, that are valid candidates for a
@ -108,7 +107,6 @@
"people" yields an intuitive solution in this case. "people" yields an intuitive solution in this case.
</p> </p>
<p> <p>
<!-- TODO: footnote -->
Since only two people can fit in a boat at a time, pairing up Since only two people can fit in a boat at a time, pairing up
lightest and heaviest individuals will result in the least amount lightest and heaviest individuals will result in the least amount
of boats being used. of boats being used.

93
posts/software/designing-this-website.html Normal file
View 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&apos;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&apos;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&apos;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>

3
posts/software/from-github-pages-to-aws.html
View file

@ -30,7 +30,7 @@
<time datetime="2024-06-15">15/06/2024</time> <time datetime="2024-06-15">15/06/2024</time>
</p> </p>
</header> </header>
<article> <article class="post-article">
<h2>pages begone</h2> <h2>pages begone</h2>
<p> <p>
Though GitHub Pages may work for hosting your small, internal, Though GitHub Pages may work for hosting your small, internal,
@ -38,7 +38,6 @@
<i>anyone</i>: <i>anyone</i>:
</p> </p>
<ol> <ol>
<!-- TODO: cite -->
<li>Bandwidth caps: scale your software by default</li> <li>Bandwidth caps: scale your software by default</li>
<li> <li>
Limited SEO control: not a downside if you don't want want Limited SEO control: not a downside if you don't want want

2
scripts/index.js
View file

@ -3,7 +3,7 @@ const postMapping = new Map([
"Software", "Software",
[ [
{ name: "from github pages to aws", link: "from-github-pages-to-aws" }, { 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" }, { name: "working in the terminal" },
], ],
], ],

4
styles/common.css
View file

@ -45,6 +45,10 @@ a {
text-decoration: none; text-decoration: none;
} }
li {
margin-bottom: 10px;
}
.graph { .graph {
background-image: linear-gradient( background-image: linear-gradient(
to right, to right,