summaryrefslogtreecommitdiff
path: root/posts/2021-04-20-how-to-make-your-website-boring-and-why.html
blob: 8bbcfb61c76f4a65c5c075166752f568064b8261 (plain) (blame)
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="/includes/stylesheet.css" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      property="og:description"
      content="The World Wide Web pages of Adam Carpenter"
    />
    <meta
      property="og:image"
      content="https://nextcloud.53hor.net/index.php/s/Nx9e7iHbw4t99wo/preview"
    />
    <meta property="og:site_name" content="53hor.net" />
    <meta
      property="og:title"
      content="How to Make Your Website Boring and Why!"
    />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://www.53hor.net" />
    <title>53hornet ➙ How to Make Your Website Boring and Why!</title>
  </head>

  <body>
    <nav>
      <ul>
        <li>
          <a href="/">
            <img alt="home" src="/includes/icons/home-roof.svg" />
            Home
          </a>
        </li>
        <li>
          <a href="/info.html">
            <img alt="information" src="/includes/icons/information-variant.svg" />
            Info
          </a>
        </li>
        <li>
          <a href="https://git.53hor.net">
            <img alt="git" src="/includes/icons/git.svg" />
            Repos
          </a>
        </li>
        <li>
          <a href="/software.html">
            <img alt="software" src="/includes/icons/floppy-variant.svg" />
            Software
          </a>
        </li>
        <li>
          <a type="application/rss+xml" href="/rss.xml">
            <img alt="rss" src="/includes/icons/rss.svg" />
            RSS
          </a>
        </li>
      </ul>
    </nav>

    <article>
      <h1>How to Make Your Website Boring and Why!</h1>

      <p class="description">
        I took the time last year to make my website more boring. Here's how you
        can do the same and why you'd want to.
      </p>

      <p>
        Up until recently I was using a static site generator
        <a>(cobalt-rs)</a> and a fancy CSS framework/library <a>(Bulma)</a> to
        build my website. I also had one or two scripts to do various fiddly
        things in the browser. I took the time to gut it and now I have a much
        more boring website. I don't use anything but HTML to write all of the
        posts and pages. This eliminated the need for a static generator or
        script to turn something like Markdown into HTML for me. I also scrapped
        all of the customized CSS framework style sheets that I had been using
        for a very small (145 lines including whitespace and braces) single-file
        stylesheet. I also dropped all of the fancy links, banners, most of the
        icons, and any JavaScript that I had originally. Now, my site is much
        more boring. And it's so much better.
      </p>

      <h2>How does one make their website boring?</h2>

      <p>
        Typically, ask yourself whether you need something. If the answer is
        "no", you can safely remove it and you won't need it again. Your website
        will become more boring (read: simpler). Here are some of the things I
        evaluated:
      </p>

      <ul>
        <li>
          How many 3rd-party assets, templates, CSS libraries am I using? How
          big are they? Are they slowing down rendering or annoying to
          maintain/upgrade?
        </li>
        <li>Do I need a Sass interpreter to "build" my styles?</li>
        <li>
          Am I using a static site generator? Does it make my life easier or
          more difficult?
        </li>
        <li>
          Am I using a bunch of JavaScript? What does it do and does it really
          need to do it to make my site work better?
        </li>
      </ul>

      <p>
        Do you use a lot of third-party assets, templates, or CSS for your site?
        Do you have to run a SASS tool to generate your stylesheets? Are your
        stylesheets really big (> 1000 lines I think anyone would consider on
        the bigger side)? Consider whether or not you really need them.
        Oftentimes, with CSS, less is more. Especially if your site is just a
        collection of pages of text with links to other pages of text. You can
        make your site attractive and compatible with 100% of browsers by
        keeping things simple. And then you don't have to worry about rebuilding
        your output stylesheets or keeping up with libraries and frameworks.
      </p>

      <p>
        Do you have a lot of dynamically-generated content on your site? Does
        the document need to change based on user input? Do you have a large
        number of script tags importing minified files from third-party CDNs?
        Odds are you don't need those either and you can completely get rid of
        them. Now you don't have to worry about making sure all browsers can run
        those scripts, or whether or not the CDNs are online, or you're
        requesting the latest version.
      </p>

      <p>
        Do you use a static site generator to build your site? Is your content
        complicated enough to write that you can't write it in plain HTML? Is
        Markdown really easier or more powerful? Odds are, it's easier to write
        directly in HTML without having to tell your generator what to do with
        your tags. And for the oddball tag that Markdown doesn't directly
        support, you might often end up writing HTML into your Markdown files
        anyways. And, you can better control what the output formatting looks
        like, making your site's code more readable. Furthermore, you won't have
        two acting copies of your site, a pre- and post-generator one. For me,
        it was annoying having "source code" for my web site that was different
        from what I was actually hosting. It's so much nicer to have a 1:1
        mapping between what I write, test, and deploy.
      </p>

      <p>
        Still not convinced? Still need to automate some part of building your
        site, like generating an RSS feed? Is there any chance you can write a
        quick Makefile to do that for you? I was able to do just that, and it
        was way nicer not having to install and learn how a generator worked to
        automate assembling my site.
      </p>

      <p>
        If you answered "no" to any of the above "do you need"-s, you just found
        a way to make your site more boring. Boring equates with simplicity.
        Simplicity is a good thing.
      </p>

      <h2>Why should you make your website <s>boring</s> simple?</h2>

      <p>
        Not relying on a bunch of libraries and assets is a good thing. It
        seemed like every time I wanted to add a quick post, I would notice
        there was an update for some library I was using and I was spending time
        upgrading and learning about it. You know, that thing that computer
        programmers enjoy doing and are good at but often doesn't actually help
        them accomplish anything: fiddling with shiny new stuff that doesn't
        solve a problem. Now I get to just focus on adding things to my site and
        I'm never worried about whether it looks broken.
      </p>

      <p>
        I also didn't like having a pre- and post-build site. If I wanted to fix
        one typo I couldn't remote into my live site, fix it, and then leave it
        there. I had to do something like fix the typo in my Markdown, commit
        and push it, and then re-run the generator and upload the new "live"
        files. The generator step wasn't making things easier, it was making
        them more annoying.
      </p>

      <p>
        You'd also be surprised at how easy it is to make your site fast and
        reliable on all modern and old browsers when it's boring (read: simple,
        again). Internet Explorer doesn't care about my site, it's a breeze to
        render and there's nothing in it that hasn't been in existence for at
        least a decade. (Alright, I do have a few SVG icons which it probably
        wouldn't know what to do with. You can't tell the difference between
        Firefox's and Chrome's renders of my site. And Google's PageSpeed
        Insights score is a hilarious 99.
      </p>

      <p>
        My site is also more functional now. It's less distracting. It's really
        easy to navigate and read. There's no runtime, no JavaScript that has to
        execute before the reader sees the page they're looking for. And there's
        practically nothing to maintain except my posts. It's also really easy
        for crawlers to quickly ingest all of my posts and turn them into search
        results. Hopefully, it's also easier for the visually impaired to zoom
        in and not mess up the document, or use a screen reader that extracts
        the article tags.
      </p>

      <p>
        The benefits are through the roof. My site used to be about tinkering
        with tools and libraries and frameworks. Now it's just a boring website.
        That leaves me with time to focus on tinkering with other stuff that's
        more interesting, and only focus on writing when I'm working on this
        site. So make your life easier and go make your website boring today.
      </p>
    </article>
  </body>
</html>