aboutsummaryrefslogtreecommitdiff
path: root/docs/posts/color_conundrum
diff options
context:
space:
mode:
Diffstat (limited to 'docs/posts/color_conundrum')
-rw-r--r--docs/posts/color_conundrum/index.html72
1 files changed, 72 insertions, 0 deletions
diff --git a/docs/posts/color_conundrum/index.html b/docs/posts/color_conundrum/index.html
new file mode 100644
index 0000000..f504918
--- /dev/null
+++ b/docs/posts/color_conundrum/index.html
@@ -0,0 +1,72 @@
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <link rel="stylesheet" href="/style.css">
5 <meta charset="UTF-8">
6 <meta name="viewport" content="initial-scale=1">
7 <meta content="#ffffff" name="theme-color">
8 <meta name="HandheldFriendly" content="true">
9 <meta property="og:title" content="nerdypepper">
10 <meta property="og:type" content="website">
11 <meta property="og:description" content="a static site {for, by, about} me ">
12 <meta property="og:url" content="https://nerdypepper.tech">
13 <body>
14 <div class="posts">
15 <div class="post">
16 <div class="date">
17 31/12 2019
18 <span class="commit-hash">
19 <a href="https://github.com/nerdypepper/site/blob/master/posts/color_conundrum.md
20" style="text-decoration: none">
21 e991ba5
22 </a>
23 </span>
24 </div>
25 <span class="post-title">
26 Color Conundrum
27 </span>
28 <div class="post-text">
29 <p>This piece aims to highlight (pun intended) some of the
30reasons behind my <a href="https://files.nerdypepper.tech/bF.png">color
31free</a> editor setup.</p>
32
33<p>Imagine highlighting an entire book because <em>all</em> of it is
34important. That is exactly what (most) syntax highlighting
35does. It is difficult for the human eye to filter out noise
36in rainbow barf. Use color to draw attention, not diverge
37it.</p>
38
39<p>At the same time, a book devoid of color is <em>boring!</em> What
40is the takeaway from this 10 line paragraph? What are the
41technical terms used?</p>
42
43<p>Prose and code are certainly different, but the fickle
44minded human eye is the same. The eye constantly looks for a
45frame of reference, a focal point. It grows tired when it
46can&#8217;t find one.</p>
47
48<p>The following comparison does a better job of explaining
49(none, ample and over-the-top highlighting, from left to
50right):</p>
51
52<p><a href="https://files.nerdypepper.tech/lt.png"><img src="https://files.nerdypepper.tech/lt.png" alt="hi.png" /></a></p>
53
54<p>Without highlighting (far left), it is hard to differentiate
55between comments and code! The florid color scheme (far
56right) is no good either, it contains too many attention
57grabbers. The center sample is a healthy balance of both.
58Function calls and constants stand out, and repetitive
59keywords and other noise (<code>let</code>, <code>as</code>) are mildly dimmed
60out. Comments and non-code text (sign column, status text)
61are dimmed further.</p>
62
63<p>I&#8217;ll stop myself before I rant about color contrast and
64combinations.</p>
65
66 </div>
67 <a href="/" class="post-end-link">⟵ Back</a>
68 <div class="separator"></div>
69 </div>
70 </div>
71 </body>
72</html>