dsmcclain.github.io/little-programs.html at master · dsmcclain/dsmcclain.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
  <title>little programs -- a closer look</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto|Source+Code+Pro&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
  <script src="w3.js"></script>
</head>
<body>
  <div class="article-container">
    <div role="navigation" w3-include-html="partials/navbar.html" class="nav-wrapper"></div>

    <div class="article-wrapper">

      <div class="article-title">
        <h1>Little Programs</h1>
      </div>

      <div class="article-by-line">
        <p>Built Spring 2020 - Ongoing</p>
      </div>
      <div class="article-hero">
        <div class="article-hero-wrapper">
          <div class="article-hero-image">
            <img src="images/little-programs.jpg">
          </div>

          <div class="info-block">
            <div class="info-block-wrapper">
              <h2><span class="info-category">What it is: </span>My homemade homepage.  The website I built to showcase my work, present my writing and research, and practice the foundations of web development.</h2>
              <h2><span class="info-category">How it's built: </span>This is a static website, built using HTML5, CSS, and a little JavaScript. It is deployed with GitHub Pages.</h2>
              <h2><span class="info-category">How to use it: </span>You're using it right now! Welcome!</h2>
            </div>
          </div>
        </div>
      </div>

      <h3 class="article-subtitle">THE STORY</h3>

      <p>
        Little programs is a static website that I built from scratch.  It uses a very limited set of technologies to serve an easy-to-use, welcoming site with a homemade feel.
      </p>
      <p>
        By limited set of technologies I mean HTML5, CSS, and Github’s built-in deployment service.  There is a little bit of JavaScript as well, but only to make my life a little easier.
      </p>
      <p>
        I think it’s a good idea to make things easy on myself, whenever feasible.
      </p>
      <p>
        For example, every CSS class that this website uses sits in one file.  <em>That’s insane!</em> I imagine you saying. But I’m not ashamed of it.
      </p>
      <p>
        For starters, it means there is at least one important dimension of the website where I can see the whole thing in one look. Don’t underestimate the value of this – it simply makes everything <em>feel</em> more manageable.
      </p>
      <p>
        Another advantage is that I never have to hunt across files to find the inheritance heirarchy. I don’t have to track through the import of the import to find what class inherits from what.  When relationships are broken up across files, it makes them harder to see.
      </p>
      <p>
        Another unexpected gain comes whenever I introduce another developer to the project.  If someone is trying to understand my codebase, there aren’t many questions to ask about what styling belongs where.  It’s just one sheet, kept tidy.
      </p>
      <p>
        And of course, it’s only about 500 lines.  If I had a much larger site with many, many more pages I would inevitably need more structure. But just as more stuff means bigger containers, sometimes a smaller container leads to less stuff.
      </p>
      <p>
        The single CSS sheet is just an example of my approach in building this site.
      </p>
      <p>
        If you look at the code for <em>little programs</em> you will see a lot of HTML5 standards and CSS grid. I use JavaScript to load the navigation bar you see at the top so I don’t have to include that markup on every page.  If you are viewing this on a phone, the hamburger menu in the top left is a little JavaScript exercise too.
      </p>
      <p>
        But like sprinkles on a cupcake, those are just extra touches. I want this website to be something I can maintain for decades, and that means building it on a technology stack that is not constantly shifting under my feet. Did I need to go as basic as possible to acheive that? Not necessarily. But I hope there are people out there who can appreciate
      </p>
      <p>
        As developers, we operate in an industry where new solutions are arriving on the market constantly.  And that has some good effects. It expands the range of problems we can solve. It accommodates more diverse solutions. And, for better or for worse, it helps us conceive new problems.
      </p>
      <p>
        But it’s worthwhile to remember that many problems don’t need a cutting-edge solution.  A ton of value can be built with the most basic tools. <em>little programs</em> is my arena for mastering those basic tools.  Then, when the time comes to reach for something new, there will be a solid foundation to build on.
      </p>
    </div>
  </div>
  <div w3-include-html="partials/footer.html" class="footer"></div>
  <script>
    w3.includeHTML();
  </script>
</body>
</html>