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
|
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/syntax.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="Color Conundrum">
<meta property="og:type" content="website">
<meta property="og:description" content="a static site {for, by, about} me ">
<meta property="og:url" content="https://peppe.rs">
<link rel="icon" type="image/x-icon" href="/favicon.png">
<title>Color Conundrum · peppe.rs</title>
<body>
<div class="posts">
<div class="post">
<a href="/" class="post-end-link">Home</a>
<span>/</span>
<a href="/posts" class="post-end-link">Posts</a>
<span>/</span>
<a class="post-end-link">Color Conundrum</a>
<a class="stats post-end-link" href="https://git.peppe.rs/web/site/plain/posts/color_conundrum.md
">View Raw</a>
<div class="separator"></div>
<div class="date">
31/12 — 2019
<div class="stats">
<span class="stats-number">
14.39
</span>
<span class="stats-unit">cm</span>
 
<span class="stats-number">
1.4
</span>
<span class="stats-unit">min</span>
</div>
</div>
<h1>
Color Conundrum
</h1>
<div class="post-text">
<p>This piece aims to highlight (pun intended) some of the reasons
behind my <a href="https://u.peppe.rs/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://u.peppe.rs/lt.png"><img
src="https://u.peppe.rs/lt.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>
<div class="intro">
Hi.
<div class="hot-links">
<a href="/index.xml" class="feed-button">Subscribe</a>
</div>
<p>I'm Akshay, programmer and pixel-artist.
I write <a href="https://git.peppe.rs">open-source stuff</a>.
I also design fonts:
<a href="https://git.peppe.rs/fonts/scientifica/about">scientifica</a>,
<a href="https://git.peppe.rs/fonts/curie/about">curie</a>.
</p>
<p>Reach out at [email protected].</p>
</div>
<a href="/" class="post-end-link">Home</a>
<span>/</span>
<a href="/posts" class="post-end-link">Posts</a>
<span>/</span>
<a class="post-end-link">Color Conundrum</a>
<a class="stats post-end-link" href="https://git.peppe.rs/web/site/plain/posts/color_conundrum.md
">View Raw</a>
</div>
</div>
</body>
</html>
|
