Browse Source

collapsible ToC, stub "get you a shell" section

Brennen Bearnes 4 years ago
parent
commit
44e6c156f2
9 changed files with 10417 additions and 133 deletions
  1. 18
    0
      footer.html
  2. 1
    0
      header.html
  3. 47
    78
      index.html
  4. 4
    8
      index.md
  5. 10308
    0
      js/jquery-1.11.1.js
  6. 1
    0
      js/jquery.js
  7. 9
    3
      literary_environment/index.md
  8. 17
    28
      userland.css
  9. 12
    16
      web/index.md

+ 18
- 0
footer.html View File

@@ -1,2 +1,20 @@
1
+<script>
2
+$(document).ready(function () {
3
+
4
+  // TODO: generalize this.
5
+
6
+  var $toc_full = $("#toc-full");
7
+  var $clicker  = $('<button id=toc-clicker>+/-</button>');
8
+  $("#toc").find('h2').append($clicker);
9
+  $toc_full.hide();
10
+  $clicker.show();
11
+
12
+  $clicker.click(function (e) {
13
+    $toc_full.toggle({
14
+      duration: 550
15
+    });
16
+  });
17
+});
18
+</script>
1 19
 </body>
2 20
 </html>

+ 1
- 0
header.html View File

@@ -3,6 +3,7 @@
3 3
   <meta charset="utf-8">
4 4
   <title>userland: a book about the command line for humans</title>
5 5
   <link rel=stylesheet href="userland.css" />
6
+  <script src="js/jquery.js" type="text/javascript"></script>
6 7
 </head>
7 8
 
8 9
 <body>

+ 47
- 78
index.html View File

@@ -3,6 +3,7 @@
3 3
   <meta charset="utf-8">
4 4
   <title>userland: a book about the command line for humans</title>
5 5
   <link rel=stylesheet href="userland.css" />
6
+  <script src="js/jquery.js" type="text/javascript"></script>
6 7
 </head>
7 8
 
8 9
 <body>
@@ -10,67 +11,6 @@
10 11
 <h1 class=bigtitle>userland</h1>
11 12
 <hr />
12 13
 
13
-<div id=toc>
14
-<p><a href="#contents">contents</a></p>
15
-<div id=toc-full>
16
-<div class=contents><ul>
17
-<li><a href="#a-book-about-the-command-line-for-humans">a book about the command line for humans</a>
18
-
19
-<ul>
20
-<li><a href="#copying">copying</a></li>
21
-<li><a href="#contents">contents</a></li>
22
-</ul>
23
-</li>
24
-<li><a href="#the-command-line-as-literary-environment">1. the command line as literary environment</a>
25
-
26
-<ul>
27
-<li><a href="#terms-and-definitions-twisty-little-passages">terms and definitions / twisty little passages</a></li>
28
-<li><a href="#cat">cat</a></li>
29
-<li><a href="#wildcards">wildcards</a></li>
30
-<li><a href="#sort">sort</a></li>
31
-<li><a href="#options">options</a></li>
32
-<li><a href="#uniq">uniq</a></li>
33
-<li><a href="#standard-IO">standard IO</a></li>
34
-<li><a href="#code-help-code-and-man-pages"><code>&ndash;help</code> and man pages</a></li>
35
-<li><a href="#wc">wc</a></li>
36
-<li><a href="#head-tail-and-cut">head, tail, and cut</a></li>
37
-<li><a href="#finding-text-grep">finding text: grep</a></li>
38
-<li><a href="#now-you-have-n-problems-regex-rabbit-holes">now you have n problems: regex + rabbit holes</a></li>
39
-</ul>
40
-</li>
41
-<li><a href="#a-literary-problem">2. a literary problem</a></li>
42
-<li><a href="#programmerthink">3. programmerthink</a></li>
43
-<li><a href="#script">4. script</a>
44
-
45
-<ul>
46
-<li><a href="#learn-you-an-editor">learn you an editor</a></li>
47
-<li><a href="#d-i-y-utilities">d.i.y. utilities</a></li>
48
-<li><a href="#heavy-lifting">heavy lifting</a></li>
49
-<li><a href="#generality">generality</a></li>
50
-</ul>
51
-</li>
52
-<li><a href="#general-purpose-programmering">5. general purpose programmering</a></li>
53
-<li><a href="#one-of-these-things-is-not-like-the-others">6. one of these things is not like the others</a>
54
-
55
-<ul>
56
-<li><a href="#diff">diff</a></li>
57
-<li><a href="#wdiff">wdiff</a></li>
58
-</ul>
59
-</li>
60
-<li><a href="#the-internet-for-humans-and-how-the-command-line-can-help">7. the internet for humans, and how the command line can help</a>
61
-
62
-<ul>
63
-<li><a href="#reading-the-web">reading the web</a></li>
64
-<li><a href="#writing-the-web">writing the web</a></li>
65
-</ul>
66
-</li>
67
-<li><a href="#further-reading">8. further reading</a></li>
68
-</ul>
69
-
70
-</div>
71
-</div></div>
72
-
73
-
74 14
 <h1><a name=a-book-about-the-command-line-for-humans href=#a-book-about-the-command-line-for-humans>#</a> a book about the command line for humans</h1>
75 15
 
76 16
 <p>Late last year, <a href="//p1k3.com/2013/8/4">a side trip</a> into text utilities got me
@@ -103,9 +43,11 @@ being please feel free to use it under the terms of Creative Commons BY-SA
103 43
 (Attribution / Share-Alike), whatever the latest version is.  I promise I will
104 44
 not license it under more restrictive terms than that.</p>
105 45
 
46
+<div id=toc>
106 47
 <h2><a name=contents href=#contents>#</a> contents</h2>
107 48
 
108
-<p><div class=contents><ul>
49
+<div id=toc-full>
50
+<div class=contents><ul>
109 51
 <li><a href="#a-book-about-the-command-line-for-humans">a book about the command line for humans</a>
110 52
 
111 53
 <ul>
@@ -116,7 +58,9 @@ not license it under more restrictive terms than that.</p>
116 58
 <li><a href="#the-command-line-as-literary-environment">1. the command line as literary environment</a>
117 59
 
118 60
 <ul>
119
-<li><a href="#terms-and-definitions-twisty-little-passages">terms and definitions / twisty little passages</a></li>
61
+<li><a href="#terms-and-definitions">terms and definitions</a></li>
62
+<li><a href="#get-you-a-shell">get you a shell</a></li>
63
+<li><a href="#twisty-little-passages">twisty little passages</a></li>
120 64
 <li><a href="#cat">cat</a></li>
121 65
 <li><a href="#wildcards">wildcards</a></li>
122 66
 <li><a href="#sort">sort</a></li>
@@ -159,7 +103,9 @@ not license it under more restrictive terms than that.</p>
159 103
 <li><a href="#further-reading">8. further reading</a></li>
160 104
 </ul>
161 105
 
162
-</div></p>
106
+</div>
107
+</div></div>
108
+
163 109
 
164 110
 <hr />
165 111
 
@@ -184,7 +130,7 @@ for working with English prose and prosody, and that maybe this will illuminate
184 130
 the ways it could be useful in your own work with a computer, whatever that
185 131
 work happens to be.</p>
186 132
 
187
-<h2><a name=terms-and-definitions-twisty-little-passages href=#terms-and-definitions-twisty-little-passages>#</a> terms and definitions / twisty little passages</h2>
133
+<h2><a name=terms-and-definitions href=#terms-and-definitions>#</a> terms and definitions</h2>
188 134
 
189 135
 <p>What software are we actually talking about when we say &ldquo;the command line&rdquo;?</p>
190 136
 
@@ -218,6 +164,10 @@ It&rsquo;s what you&rsquo;ll most often see in the wild.  Like most shells, Bash
218 164
 and stupid in more ways than it is possible to easily summarize.  It&rsquo;s also an
219 165
 incredibly powerful and expressive piece of software.</p>
220 166
 
167
+<h2><a name=get-you-a-shell href=#get-you-a-shell>#</a> get you a shell</h2>
168
+
169
+<h2><a name=twisty-little-passages href=#twisty-little-passages>#</a> twisty little passages</h2>
170
+
221 171
 <p>Have you ever played a text-based adventure game or MUD, of the kind that
222 172
 describes a setting and takes commands for movement and so on?  Readers of a
223 173
 certain age and temperament might recognize the opening of Crowther &amp; Woods'
@@ -272,7 +222,7 @@ can be used on many different files, or chained together with other programs.
272 222
 They tend to have weird, cryptic names, but a lot of them do very simple
273 223
 things.  Tasks that might be a menu item in a big program like Word, like
274 224
 counting the number of words in a document or finding a particular phrase, are
275
-often programs unto themselves.</p>
225
+often programs unto themselves.  We&rsquo;ll start with something even simpler.</p>
276 226
 
277 227
 <h2><a name=cat href=#cat>#</a> cat</h2>
278 228
 
@@ -2447,32 +2397,33 @@ called Night.  <del>So the</del>  <ins>And there was</ins> evening and <del>the
2447 2397
 <h1><a name=the-internet-for-humans-and-how-the-command-line-can-help href=#the-internet-for-humans-and-how-the-command-line-can-help>#</a> 7. the internet for humans, and how the command line can help</h1>
2448 2398
 
2449 2399
 <p>Web browsers are really complicated these days.  They&rsquo;re full of rendering
2450
-engines for layouts and graphics and fonts, audio and video players, one or
2451
-more programming languages, sophisticated development tools, databases &ndash; you
2452
-name it, and there&rsquo;s a fair chance it&rsquo;s in there somewhere.  The modern web
2453
-browser is kitchen sink software, and to make matters worse, it is <em>utterly
2454
-surrounded</em> by technobabble.  It takes smart, dedicated people <em>years</em> to
2455
-come to terms with the ocean of words about web stuff and sort out the
2456
-meaningful ones from snake oil and bureaucratic mysticism.</p>
2400
+engines, audio and video players, programming languages, development tools,
2401
+databases &ndash; you name it, and there&rsquo;s a fair chance it&rsquo;s in there somewhere.
2402
+The modern web browser is kitchen sink software, and to make matters worse, it
2403
+is <em>totally surrounded</em> by technobabble.  It can take <em>years</em> to come to terms
2404
+with the ocean of words about web stuff and sort out the meaningful ones from
2405
+the snake oil and bureaucratic mysticism.</p>
2457 2406
 
2458
-<p>All of which can make the web itself seem like an absurdly complicated
2459
-landscape, and obscure the simplicity of its basic design, which is this:</p>
2407
+<p>All of which can make the web itself seem like a really complicated landscape,
2408
+and obscure the simplicity of its basic design, which is this:</p>
2460 2409
 
2461 2410
 <p>Some programs pass text files around to one another.</p>
2462 2411
 
2463 2412
 <p>It&rsquo;s more complicated than that, of course, but the gist of it is that the web
2464 2413
 is made out of URLs, &ldquo;Uniform Resource Locators&rdquo;, which are paths to things.
2465
-If you squint, these look kind of like paths to files on your filesystem.  A
2466
-protocol called HTTP lets software like your browser send a request over the
2467
-network for the stuff that lives at a particular URL.</p>
2414
+If you squint, these look kind of like paths to files on your filesystem.</p>
2468 2415
 
2469 2416
 <p>Let&rsquo;s illustrate this.  I&rsquo;ve written a really simple web page that lives at
2470 2417
 <code>http://p1k3.com/hello_world.html</code>.</p>
2471 2418
 
2472 2419
 <h2><a name=reading-the-web href=#reading-the-web>#</a> reading the web</h2>
2473 2420
 
2421
+<p>{to come}</p>
2422
+
2474 2423
 <h2><a name=writing-the-web href=#writing-the-web>#</a> writing the web</h2>
2475 2424
 
2425
+<p>{to come}</p>
2426
+
2476 2427
 <hr />
2477 2428
 
2478 2429
 <h1><a name=further-reading href=#further-reading>#</a> 8. further reading</h1>
@@ -2484,5 +2435,23 @@ network for the stuff that lives at a particular URL.</p>
2484 2435
 
2485 2436
 
2486 2437
 <hr />
2438
+<script>
2439
+$(document).ready(function () {
2440
+
2441
+  // TODO: generalize this.
2442
+
2443
+  var $toc_full = $("#toc-full");
2444
+  var $clicker  = $('<button id=toc-clicker>+/-</button>');
2445
+  $("#toc").find('h2').append($clicker);
2446
+  $toc_full.hide();
2447
+  $clicker.show();
2448
+
2449
+  $clicker.click(function (e) {
2450
+    $toc_full.toggle({
2451
+      duration: 550
2452
+    });
2453
+  });
2454
+});
2455
+</script>
2487 2456
 </body>
2488 2457
 </html>

+ 4
- 8
index.md View File

@@ -1,9 +1,3 @@
1
-<div id=toc>
2
-<p><a href="#contents">contents</a></p>
3
-<div id=toc-full>
4
-{{contents}}
5
-</div></div>
6
-
7 1
 a book about the command line for humans
8 2
 ========================================
9 3
 
@@ -38,7 +32,9 @@ being please feel free to use it under the terms of Creative Commons BY-SA
38 32
 (Attribution / Share-Alike), whatever the latest version is.  I promise I will
39 33
 not license it under more restrictive terms than that.
40 34
 
41
-contents
42
---------
35
+<div id=toc>
36
+<h2>contents</h2>
43 37
 
38
+<div id=toc-full>
44 39
 {{contents}}
40
+</div></div>

+ 10308
- 0
js/jquery-1.11.1.js
File diff suppressed because it is too large
View File


+ 1
- 0
js/jquery.js View File

@@ -0,0 +1 @@
1
+./jquery-1.11.1.js

+ 9
- 3
literary_environment/index.md View File

@@ -20,8 +20,8 @@ for working with English prose and prosody, and that maybe this will illuminate
20 20
 the ways it could be useful in your own work with a computer, whatever that
21 21
 work happens to be.
22 22
 
23
-terms and definitions / twisty little passages
24
-----------------------------------------------
23
+terms and definitions
24
+---------------------
25 25
 
26 26
 What software are we actually talking about when we say "the command line"?
27 27
 
@@ -55,6 +55,12 @@ It's what you'll most often see in the wild.  Like most shells, Bash is ugly
55 55
 and stupid in more ways than it is possible to easily summarize.  It's also an
56 56
 incredibly powerful and expressive piece of software.
57 57
 
58
+get you a shell
59
+---------------
60
+
61
+twisty little passages
62
+----------------------
63
+
58 64
 Have you ever played a text-based adventure game or MUD, of the kind that
59 65
 describes a setting and takes commands for movement and so on?  Readers of a
60 66
 certain age and temperament might recognize the opening of Crowther & Woods'
@@ -107,7 +113,7 @@ can be used on many different files, or chained together with other programs.
107 113
 They tend to have weird, cryptic names, but a lot of them do very simple
108 114
 things.  Tasks that might be a menu item in a big program like Word, like
109 115
 counting the number of words in a document or finding a particular phrase, are
110
-often programs unto themselves.
116
+often programs unto themselves.  We'll start with something even simpler.
111 117
 
112 118
 cat
113 119
 ---

+ 17
- 28
userland.css View File

@@ -18,45 +18,21 @@ ul li {
18 18
   list-style: square;
19 19
 }
20 20
 
21
-#toc {
22
-  position: fixed;
23
-  left: 15px;
24
-  top: 15px;
25
-}
26
-
27
-#toc p {
28
-  display: block;
29
-  padding: 1em;
30
-  border: 2px solid #ddc;
31
-  border-radius: 3px;
32
-  background: white;
33
-  margin: 0;
21
+#toc-clicker {
22
+  margin-left: 20px;
23
+  vertical-align: middle;
34 24
 }
35 25
 
36 26
 #toc-full {
37
-  display: none;
38 27
   background-color: white;
39 28
   border-left: 2px solid #ddc;
40 29
   border-bottom: 2px solid #ddc;
41 30
   border-right: 2px solid #ddc;
31
+  border-top: 2px solid #ddc;
42 32
   border-radius: 3px;
43 33
   padding: 1.5em;
44 34
 }
45 35
 
46
-#toc:hover #toc-full {
47
-  display: block;
48
-}
49
-
50
-#toc:hover p {
51
-  border-bottom: none;
52
-}
53
-
54
-@media (max-width: 1000px) {
55
-  #toc {
56
-    display: none;
57
-  }
58
-}
59
-
60 36
 hr {
61 37
   margin-bottom: 2em;
62 38
   margin-top: 2em;
@@ -118,3 +94,16 @@ img {
118 94
   right: 20px;
119 95
   top: auto; /* default */
120 96
 }
97
+
98
+blockquote.callout {
99
+  margin-top: 0;
100
+  margin-left: 2em;
101
+  margin-right: 0;
102
+  float: right;
103
+  font-size: 1.1em;
104
+  width: 30%;
105
+}
106
+
107
+blockquote.callout p {
108
+  margin-top: 0;
109
+}

+ 12
- 16
web/index.md View File

@@ -2,35 +2,31 @@
2 2
 =============================================================
3 3
 
4 4
 Web browsers are really complicated these days.  They're full of rendering
5
-engines for layouts and graphics and fonts, audio and video players, one or
6
-more programming languages, sophisticated development tools, databases -- you
7
-name it, and there's a fair chance it's in there somewhere.  The modern web
8
-browser is kitchen sink software, and to make matters worse, it is _utterly
9
-surrounded_ by technobabble.  It takes smart, dedicated people _years_ to
10
-come to terms with the ocean of words about web stuff and sort out the
11
-meaningful ones from snake oil and bureaucratic mysticism.
5
+engines, audio and video players, programming languages, development tools,
6
+databases -- you name it, and there's a fair chance it's in there somewhere.
7
+The modern web browser is kitchen sink software, and to make matters worse, it
8
+is _totally surrounded_ by technobabble.  It can take _years_ to come to terms
9
+with the ocean of words about web stuff and sort out the meaningful ones from
10
+the snake oil and bureaucratic mysticism.
12 11
 
13
-All of which can make the web itself seem like an absurdly complicated
14
-landscape, and obscure the simplicity of its basic design, which is this:
12
+All of which can make the web itself seem like a really complicated landscape,
13
+and obscure the simplicity of its basic design, which is this:
15 14
 
16 15
 Some programs pass text files around to one another.
17 16
 
18 17
 It's more complicated than that, of course, but the gist of it is that the web
19 18
 is made out of URLs, "Uniform Resource Locators", which are paths to things.
20
-If you squint, these look kind of like paths to files on your filesystem.  A
21
-protocol called HTTP lets software like your browser send a request over the
22
-network for the stuff that lives at a particular URL.
19
+If you squint, these look kind of like paths to files on your filesystem.
23 20
 
24 21
 Let's illustrate this.  I've written a really simple web page that lives at
25 22
 `http://p1k3.com/hello_world.html`.
26 23
 
27
-
28
-
29
-
30 24
 reading the web
31 25
 ---------------
32 26
 
27
+{to come}
28
+
33 29
 writing the web
34 30
 ---------------
35 31
 
36
-
32
+{to come}