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>
|
