-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
193 lines (180 loc) · 7.28 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/png" href="data:image/png;base64," />
<title>The Best SFW Website</title>
<meta name="title" content="The Best SFW Website">
<meta name="description" content="A satirical (Safe For Work) website poking fun at the state of modern websites.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://bestsfw.website/">
<meta property="og:title" content="The Best SFW Website">
<meta property="og:description"
content="A satirical (Safe For Work) website poking fun at the state of modern websites.">
<meta property="og:image" content="https://bestsfw.website/bestsfw.website.png">
<meta property="twitter:card" content="https://bestsfw.website/bestsfw.website.png">
<meta property="twitter:url" content="https://bestsfw.website/">
<meta property="twitter:title" content="The Best SFW Website">
<meta property="twitter:description"
content="A satirical (Safe For Work) website poking fun at the state of modern websites.">
<meta property="twitter:image" content="https://bestsfw.website/bestsfw.website.png">
<style>
@media (prefers-color-scheme: dark) {
body {
color: #fff;
background: #000;
}
a:link {
color: #9cf;
}
a:hover,
a:visited:hover {
color: #cef;
}
a:visited {
color: #c9f;
}
}
body {
margin: 1em auto;
max-width: 40em;
padding: 0 0.62em;
font: 1.2em/1.62 sans-serif;
}
h1,
h2,
h3 {
line-height: 1.2;
}
@media print {
body {
max-width: none;
}
}
</style>
</head>
<body>
<article>
<header>
<h1>This is <em>the best</em> (<abbr title="Safe For Work">SFW</abbr>) website</h1>
<aside>And it's perfect.</aside>
</header>
<h2>Seriously, what else do you want?</h2>
<p>You keep forgetting. Let me describe this website:</p>
<ul>
<li>Lightweight and loads fast</li>
<li>Fits on all screens</li>
<li>Looks the same in all browsers</li>
<li>Accessible to everyone visiting your site</li>
<li>A perfect <a
href="https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fbestsfw.website%2F"
title="Google Lighthouse Score of 100">Google Lighthouse score of 100</a></li>
<li>
Legible and gets the point across (if you had one instead of just a
5MB background video of hipsters poking at their iPhones)
</li>
</ul>
<p>
You do it every day. You take
<a title="Motherf**king Website" href="http://motherfuckingwebsite.com/">a (<abbr
title="Not Safe For Work">NSFW</abbr>) masterpiece</a>
and incrementally
<a href="http://bettermotherfuckingwebsite.com" title="Better Motherf**king Website">ruin it</a>
for the sake of design. Let me remind you: design is
<dfn title="design">to plan and make something for a specific purpose</dfn>. The most basic purpose of text
on a website is to be read. Yet you
keep doing stuff that gets in the way.
</p>
<h3 id="grey-text">Quit messing around with grey text</h3>
<p>
<a title="Contrast Rebellion" href="http://contrastrebellion.com/">Text contrast is not a bad thing</a>. The
print on your newspaper is not true black, nor is the text on
your screen. These are limitations, not ideals. Stop making it worse.
</p>
<h3 id="remote-fonts">Remote fonts are wasting your time and mine</h3>
<p>
Why are you loading 500kB of font to render 50kB of content? Are your
users even going to notice that it's not their default serif or
sans-serif? Why do you even bother when Chrome is going to render it
poorly anyways? Use a
<a href="http://www.awayback.com/index.php/2010/02/03/revised-font-stack/" title="Revised Font Stack">font
stack your users already have</a>.
</p>
<h2>Your website is more than just HTML</h2>
<h3 id="use-https">You have no excuse for using HTTP.</h3>
<p>
Why are you still delivering sites over HTTP? An Atom 330 CPU from 2008
can perform aes-256-cbc encryption via OpenSSL at 110 megabits per
second. An Xeon E5-2670 CPU without AES-NI enabled hits 444 megabits per
second. With AES-NI enabled it hits a staggering 2.2 gigabits per
second. Your server probably can't even load your JavaScript framework's
dependencies that fast.
</p>
<p>
TLS certificates are cheap. Seriously, you can
<a href="https://www.namecheap.com/security/ssl-certificates/comodo/positivessl"
title="COMODO PositiveSSL Certificate via Namecheap">get them for US$6</a>. You paid twice that much for
your idiotic domain name. You can even
get them for free from
<a href="https://letsencrypt.org/" title="Let's Encrypt Free Certificate Authority">Let's Encrypt</a>.
</p>
<p>
HTTPS
<a href="https://webmasters.googleblog.com/2014/08/https-as-ranking-signal.html"
title="Google announces HTTPS support to affect pagerank">improves your search ranking</a>
so people are more likely to find your ramblings on the Google. It's
also required for
<a href="https://http2.github.io/faq/#does-http2-require-encryption"
title="HTTP/2 Frequently Asked Questions">HTTP/2 support</a>
which allows browsers to fetch resources more efficiently.
</p>
<h3 id="compression">This is gzipped</h3>
<p>
Your webserver is perfectly capable of compressing HTML. An Atom 330 CPU
can perform single-core <code>gzip -6</code> on random data at 51
megabits per second. An Xeon E5-2670 from 2012 can do this at 216
megabits per second. Your meme website isn't as random as you think it
is and will compress much faster.
</p>
<h3 id="caching">Cache is Money</h3>
<p>
It's bad enough you're forcing users to load 5MB of hero image and
JavaScript framework. Why are you making them reload it every time they
visit your website? Bandwidth is cheap but it isn't free. Via data
charges or waiting, someone is paying for your laziness.
</p>
<h2>This is a website. Look at it. You've never seen one before</h2>
<p>
Like the man who's never grown out his beard has no idea what his true
natural state is, you have no idea what a website is. All you have ever
seen are skeuomorphic mutations of what should be text communicating a
message. This is a real, naked website. Look at it. It's beautiful.
</p>
<h3>Yes, this is satire</h3>
<p>
I'm not actually saying your site should look like this. What I'm saying
is that all the problems we have with websites are
<strong>ones we create ourselves</strong>. Websites aren't broken by
default, they are functional, high-performing, and accessible. You break
them.
</p>
<h2>Even the best can be improved</h2>
<p>
If you can bring this website further beyond perfection,
<a href="https://github.com/desholmes/bestsfw.website.github.io"
title="desholmes/bestsfw.website on GitHub">send a pull request on GitHub</a>.
</p>
<h2>Credits</h2>
<p>
This <abbr title="Safe For Work">SFW</abbr> website was generated from the <abbr
title="Not Safe For Work">NSFW</abbr>
<a href="https://github.com/KeenRivals/bestmotherfucking.website"
title="Best Motherf**king Website">bestmotherf**king.website</a>
by
<a href="https://github.com/KeenRivals/bestmotherfucking.website"
title="KeenRivals/bestmotherf**king.website on GitHub">KeenRivals</a>.
</p>
</article>
</body>
</html>