brennen
/
userland-book
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 1 Wiki Activity
Browse Source

collapsible ToC, stub "get you a shell" section

pull/1/head
Brennen Bearnes 7 years ago
parent
e1eea2808d
commit
44e6c156f2
9 changed files with 10417 additions and 133 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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 @@
<script>
$(document).ready(function () {
// TODO: generalize this.
var $toc_full = $("#toc-full");
var $clicker = $('<button id=toc-clicker>+/-</button>');
$("#toc").find('h2').append($clicker);
$toc_full.hide();
$clicker.show();
$clicker.click(function (e) {
$toc_full.toggle({
duration: 550
});
});
});
</script>
</body>
</html>

+ 1
- 0
header.html View File

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


+ 47
- 78
index.html View File

@ -3,6 +3,7 @@
<meta charset="utf-8">
<title>userland: a book about the command line for humans</title>
<link rel=stylesheet href="userland.css" />
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
@ -10,67 +11,6 @@
<h1 class=bigtitle>userland</h1>
<hr />
<div id=toc>
<p><a href="#contents">contents</a></p>
<div id=toc-full>
<div class=contents><ul>
<li><a href="#a-book-about-the-command-line-for-humans">a book about the command line for humans</a>
<ul>
<li><a href="#copying">copying</a></li>
<li><a href="#contents">contents</a></li>
</ul>
</li>
<li><a href="#the-command-line-as-literary-environment">1. the command line as literary environment</a>
<ul>
<li><a href="#terms-and-definitions-twisty-little-passages">terms and definitions / twisty little passages</a></li>
<li><a href="#cat">cat</a></li>
<li><a href="#wildcards">wildcards</a></li>
<li><a href="#sort">sort</a></li>
<li><a href="#options">options</a></li>
<li><a href="#uniq">uniq</a></li>
<li><a href="#standard-IO">standard IO</a></li>
<li><a href="#code-help-code-and-man-pages"><code>&ndash;help</code> and man pages</a></li>
<li><a href="#wc">wc</a></li>
<li><a href="#head-tail-and-cut">head, tail, and cut</a></li>
<li><a href="#finding-text-grep">finding text: grep</a></li>
<li><a href="#now-you-have-n-problems-regex-rabbit-holes">now you have n problems: regex + rabbit holes</a></li>
</ul>
</li>
<li><a href="#a-literary-problem">2. a literary problem</a></li>
<li><a href="#programmerthink">3. programmerthink</a></li>
<li><a href="#script">4. script</a>
<ul>
<li><a href="#learn-you-an-editor">learn you an editor</a></li>
<li><a href="#d-i-y-utilities">d.i.y. utilities</a></li>
<li><a href="#heavy-lifting">heavy lifting</a></li>
<li><a href="#generality">generality</a></li>
</ul>
</li>
<li><a href="#general-purpose-programmering">5. general purpose programmering</a></li>
<li><a href="#one-of-these-things-is-not-like-the-others">6. one of these things is not like the others</a>
<ul>
<li><a href="#diff">diff</a></li>
<li><a href="#wdiff">wdiff</a></li>
</ul>
</li>
<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>
<ul>
<li><a href="#reading-the-web">reading the web</a></li>
<li><a href="#writing-the-web">writing the web</a></li>
</ul>
</li>
<li><a href="#further-reading">8. further reading</a></li>
</ul>
</div>
</div></div>
<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>
<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
(Attribution / Share-Alike), whatever the latest version is. I promise I will
not license it under more restrictive terms than that.</p>
<div id=toc>
<h2><a name=contents href=#contents>#</a> contents</h2>
<p><div class=contents><ul>
<div id=toc-full>
<div class=contents><ul>
<li><a href="#a-book-about-the-command-line-for-humans">a book about the command line for humans</a>
<ul>
@ -116,7 +58,9 @@ not license it under more restrictive terms than that.</p>
<li><a href="#the-command-line-as-literary-environment">1. the command line as literary environment</a>
<ul>
<li><a href="#terms-and-definitions-twisty-little-passages">terms and definitions / twisty little passages</a></li>
<li><a href="#terms-and-definitions">terms and definitions</a></li>
<li><a href="#get-you-a-shell">get you a shell</a></li>
<li><a href="#twisty-little-passages">twisty little passages</a></li>
<li><a href="#cat">cat</a></li>
<li><a href="#wildcards">wildcards</a></li>
<li><a href="#sort">sort</a></li>
@ -159,7 +103,9 @@ not license it under more restrictive terms than that.</p>
<li><a href="#further-reading">8. further reading</a></li>
</ul>
</div></p>
</div>
</div></div>
<hr />
@ -184,7 +130,7 @@ for working with English prose and prosody, and that maybe this will illuminate
the ways it could be useful in your own work with a computer, whatever that
work happens to be.</p>
<h2><a name=terms-and-definitions-twisty-little-passages href=#terms-and-definitions-twisty-little-passages>#</a> terms and definitions / twisty little passages</h2>
<h2><a name=terms-and-definitions href=#terms-and-definitions>#</a> terms and definitions</h2>
<p>What software are we actually talking about when we say &ldquo;the command line&rdquo;?</p>
@ -218,6 +164,10 @@ It&rsquo;s what you&rsquo;ll most often see in the wild. Like most shells, Bash
and stupid in more ways than it is possible to easily summarize. It&rsquo;s also an
incredibly powerful and expressive piece of software.</p>
<h2><a name=get-you-a-shell href=#get-you-a-shell>#</a> get you a shell</h2>
<h2><a name=twisty-little-passages href=#twisty-little-passages>#</a> twisty little passages</h2>
<p>Have you ever played a text-based adventure game or MUD, of the kind that
describes a setting and takes commands for movement and so on? Readers of a
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.
They tend to have weird, cryptic names, but a lot of them do very simple
things. Tasks that might be a menu item in a big program like Word, like
counting the number of words in a document or finding a particular phrase, are
often programs unto themselves.</p>
often programs unto themselves. We&rsquo;ll start with something even simpler.</p>
<h2><a name=cat href=#cat>#</a> cat</h2>
@ -2447,32 +2397,33 @@ called Night. <del>So the</del> <ins>And there was</ins> evening and <del>the
<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>
<p>Web browsers are really complicated these days. They&rsquo;re full of rendering
engines for layouts and graphics and fonts, audio and video players, one or
more programming languages, sophisticated development tools, databases &ndash; you
name it, and there&rsquo;s a fair chance it&rsquo;s in there somewhere. The modern web
browser is kitchen sink software, and to make matters worse, it is <em>utterly
surrounded</em> by technobabble. It takes smart, dedicated people <em>years</em> to
come to terms with the ocean of words about web stuff and sort out the
meaningful ones from snake oil and bureaucratic mysticism.</p>
engines, audio and video players, programming languages, development tools,
databases &ndash; you name it, and there&rsquo;s a fair chance it&rsquo;s in there somewhere.
The modern web browser is kitchen sink software, and to make matters worse, it
is <em>totally surrounded</em> by technobabble. It can take <em>years</em> to come to terms
with the ocean of words about web stuff and sort out the meaningful ones from
the snake oil and bureaucratic mysticism.</p>
<p>All of which can make the web itself seem like an absurdly complicated
landscape, and obscure the simplicity of its basic design, which is this:</p>
<p>All of which can make the web itself seem like a really complicated landscape,
and obscure the simplicity of its basic design, which is this:</p>
<p>Some programs pass text files around to one another.</p>
<p>It&rsquo;s more complicated than that, of course, but the gist of it is that the web
is made out of URLs, &ldquo;Uniform Resource Locators&rdquo;, which are paths to things.
If you squint, these look kind of like paths to files on your filesystem. A
protocol called HTTP lets software like your browser send a request over the
network for the stuff that lives at a particular URL.</p>
If you squint, these look kind of like paths to files on your filesystem.</p>
<p>Let&rsquo;s illustrate this. I&rsquo;ve written a really simple web page that lives at
<code>http://p1k3.com/hello_world.html</code>.</p>
<h2><a name=reading-the-web href=#reading-the-web>#</a> reading the web</h2>
<p>{to come}</p>
<h2><a name=writing-the-web href=#writing-the-web>#</a> writing the web</h2>
<p>{to come}</p>
<hr />
<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>
<hr />
<script>
$(document).ready(function () {
// TODO: generalize this.
var $toc_full = $("#toc-full");
var $clicker = $('<button id=toc-clicker>+/-</button>');
$("#toc").find('h2').append($clicker);
$toc_full.hide();
$clicker.show();
$clicker.click(function (e) {
$toc_full.toggle({
duration: 550
});
});
});
</script>
</body>
</html>

+ 4
- 8
index.md View File

@ -1,9 +1,3 @@
<div id=toc>
<p><a href="#contents">contents</a></p>
<div id=toc-full>
{{contents}}
</div></div>
a book about the command line for humans
========================================
@ -38,7 +32,9 @@ being please feel free to use it under the terms of Creative Commons BY-SA
(Attribution / Share-Alike), whatever the latest version is. I promise I will
not license it under more restrictive terms than that.
contents
--------
<div id=toc>
<h2>contents</h2>
<div id=toc-full>
{{contents}}
</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 @@
./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
the ways it could be useful in your own work with a computer, whatever that
work happens to be.
terms and definitions / twisty little passages
----------------------------------------------
terms and definitions
---------------------
What software are we actually talking about when we say "the command line"?
@ -55,6 +55,12 @@ It's what you'll most often see in the wild. Like most shells, Bash is ugly
and stupid in more ways than it is possible to easily summarize. It's also an
incredibly powerful and expressive piece of software.
get you a shell
---------------
twisty little passages
----------------------
Have you ever played a text-based adventure game or MUD, of the kind that
describes a setting and takes commands for movement and so on? Readers of a
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.
They tend to have weird, cryptic names, but a lot of them do very simple
things. Tasks that might be a menu item in a big program like Word, like
counting the number of words in a document or finding a particular phrase, are
often programs unto themselves.
often programs unto themselves. We'll start with something even simpler.
cat
---


+ 17
- 28
userland.css View File

@ -18,45 +18,21 @@ ul li {
list-style: square;
}
#toc {
position: fixed;
left: 15px;
top: 15px;
}
#toc p {
display: block;
padding: 1em;
border: 2px solid #ddc;
border-radius: 3px;
background: white;
margin: 0;
#toc-clicker {
margin-left: 20px;
vertical-align: middle;
}
#toc-full {
display: none;
background-color: white;
border-left: 2px solid #ddc;
border-bottom: 2px solid #ddc;
border-right: 2px solid #ddc;
border-top: 2px solid #ddc;
border-radius: 3px;
padding: 1.5em;
}
#toc:hover #toc-full {
display: block;
}
#toc:hover p {
border-bottom: none;
}
@media (max-width: 1000px) {
#toc {
display: none;
}
}
hr {
margin-bottom: 2em;
margin-top: 2em;
@ -118,3 +94,16 @@ img {
right: 20px;
top: auto; /* default */
}
blockquote.callout {
margin-top: 0;
margin-left: 2em;
margin-right: 0;
float: right;
font-size: 1.1em;
width: 30%;
}
blockquote.callout p {
margin-top: 0;
}

+ 12
- 16
web/index.md View File

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

Write Preview
Loading…
Cancel
Save