From 8a71d10c075d7fc4d09ac95eb3a915397afee6b2 Mon Sep 17 00:00:00 2001 From: Barrett Ruth Date: Tue, 18 Jun 2024 17:59:01 -0500 Subject: [PATCH] feat: new post, updates styles --- posts/algorithms/two-pointers.html | 2 - posts/software/designing-this-website.html | 93 ++++++++++++++++++++ posts/software/from-github-pages-to-aws.html | 3 +- scripts/index.js | 2 +- styles/common.css | 4 + 5 files changed, 99 insertions(+), 5 deletions(-) create mode 100644 posts/software/designing-this-website.html diff --git a/posts/algorithms/two-pointers.html b/posts/algorithms/two-pointers.html index cf5a41b..8ea0809 100644 --- a/posts/algorithms/two-pointers.html +++ b/posts/algorithms/two-pointers.html @@ -68,7 +68,6 @@ contained area can only increase if the height of the corresponding column increases.

-

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.

- 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. diff --git a/posts/software/designing-this-website.html b/posts/software/designing-this-website.html new file mode 100644 index 0000000..89455cc --- /dev/null +++ b/posts/software/designing-this-website.html @@ -0,0 +1,93 @@ + + + + + + + + + + Barrett Ruth + + +

+ +
+ barrett@ruth:~$ /software + +
+ +
+
+
+
+

Designing This Website

+

+ +

+
+
+

HTML, JavaScript, and CSS

+

That's all there is to it.

+

I thought about using the following frameworks:

+
    +
  1. React.js
    2. +
  2. Next.js
    3. +
  3. Hugo
    4. +
  4. Astro
    5. +
+

+ But I did not actually need any of them to make this site + look decent. +

+

What I've Learned

+

+ 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 + hosted this website on AWS. +

+

+ Building this website with truly bare-bones technologies has made me + appreciate why these web frameworks have emerged. +

+
    +
  • + Writing JavaScript to manipulate the DOM works just fine but lacks + the readability and composability that many JavaScript frameworks + bring to the table. +
    • +
  • + 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. +
    • +
  • + Reusing HTML, styles, and JavaScript feels extremely fragile. + Innovative type-safe, optimized, and composable solutions + definitely have their place in the web. +
    • +
  • + You can be efficient with HTML, JS, and CSS. 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. +
    • +
+
+
+
+ + + + diff --git a/posts/software/from-github-pages-to-aws.html b/posts/software/from-github-pages-to-aws.html index 7896436..d525d2c 100644 --- a/posts/software/from-github-pages-to-aws.html +++ b/posts/software/from-github-pages-to-aws.html @@ -30,7 +30,7 @@

-
+

pages begone

Though GitHub Pages may work for hosting your small, internal, @@ -38,7 +38,6 @@ anyone:

    -
  1. Bandwidth caps: scale your software by default
  2. Limited SEO control: not a downside if you don't want want diff --git a/scripts/index.js b/scripts/index.js index 5fc5e9b..0f1aa8e 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -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" }, ], ], diff --git a/styles/common.css b/styles/common.css index a7e5ada..72df91c 100644 --- a/styles/common.css +++ b/styles/common.css @@ -45,6 +45,10 @@ a { text-decoration: none; } +li { + margin-bottom: 10px; +} + .graph { background-image: linear-gradient( to right,