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
|
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/style.css">
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1">
<meta content="#ffffff" name="theme-color">
<meta name="HandheldFriendly" content="true">
<meta property="og:title" content="nerdypepper">
<meta property="og:type" content="website">
<meta property="og:description" content="a static site {for, by, about} me ">
<meta property="og:url" content="https://nerdypepper.tech">
<body>
<div class="post posts">
<div class="date">31/12 2019</div>
<span style="font-size: 2rem; font-weight: 600">
Color Conundrum
</span>
<div class="post-text">
<p>This piece aims to highlight (pun intended) some of the
reasons behind my <a href="https://files.nerdypepper.tech/bF.png">color
free</a> editor setup.</p>
<p>Imagine highlighting an entire book because <em>all</em> of it is
important. That is exactly what (most) syntax highlighting
does. It is difficult for the human eye to filter out noise
in rainbow barf. Use color to draw attention, not diverge
it.</p>
<p>At the same time, a book devoid of color is <em>boring!</em> What
is the takeaway from this 10 line paragraph? What are the
technical terms used?</p>
<p>Prose and code are certainly different, but the fickle
minded human eye is the same. The eye constantly looks for a
frame of reference, a focal point. It grows tired when it
can’t find one.</p>
<p>The following comparison does a better job of explaining
(none, ample and over-the-top highlighting, from left to
right):</p>
<p><a href="https://files.nerdypepper.tech/lt.png"><img src="https://files.nerdypepper.tech/lt.png" alt="hi.png" /></a></p>
<p>Without highlighting (far left), it is hard to differentiate
between comments and code! The florid color scheme (far
right) is no good either, it contains too many attention
grabbers. The center sample is a healthy balance of both.
Function calls and constants stand out, and repetitive
keywords and other noise (<code>let</code>, <code>as</code>) are mildly dimmed
out. Comments and non-code text (sign column, status text)
are dimmed further.</p>
<p>I’ll stop myself before I rant about color contrast and
combinations.</p>
</div>
<a href="/index.html" class="post-end-link">‹ Back</a>
<div class="separator"></div>
</div>
</body>
</html>
|
