Hacking at 0300

I want to start using github pages for documentation, which would allow me to host them on github but still edit them locally and just push the edits. The problem is debugging. Anything that relies on AJAX is a security risk if I'm trying to get local files, so browsers reject any $.get('localfile.json'). I understand the restriction, but it makes development very annoying. There are proposals to allow some kind of package, with only descendents of the current file, but everyone is too scared that users will download something to their Documents folder and expose themselves.

So the only solution seems to be to set up a local http server and use that. The simplest I've found (not very fast, but I don't need that) is to use python's http.server. First, install python (choco install python works), and then in my PowerShell profile I have a line:

function svr { Start-Process "C:\tools\python\python.exe" "-m http.server" }

So I navigate to my desired folder, run svr, and it starts a python window running the server. localhost:8000 is the URL of the folder the server is running on.

I use Amazon S3 for static storage, since nearlyfreespeech.net charges for storage. I've written how I've set up my .htaccess and my PHP files to use it. But now my work has decided to block all access to S3 (as "personal storage sites"), so I can't use my bililite.s3.amazonaws.com sites any more.

But I'm smarter than that; I'll just use a CNAME DNS entry to point to the S3 site. They're not blocking cdn.bililite.com. Unfortunately, it's not that simple. Amazon uses the domain to determine the bucket, so cdn.bililite.com has to point to cdn.bililite.com.s3.amazonaws.com. (remember that external CNAME's have to have the extra period at the end!), meaning the bucket called cdn.bililite.com, and I have been using bililite as my bucket name.

You can't rename a bucket. So I have to create a new bucket called cdn.bililite.com, and now I have to copy all the files from the old one. That's also not so simple, since downloading from one bucket and uploading to another takes forever for thousands of small files. Luckily, Amazon has created a command line interface to S3 that lets you do in-the-cloud copying.

Download and install that, then go to Powershell. Enter

aws configure

and enter your AWS keys (you can enter a default region as well). Note that these are kept in plaintext in ~/.aws/credentials, so keep your computer safe!

Then, aws s3 ls will list all of your buckets, and aws s3api get-bucket-location --bucket bucketname will list the region. None as a region name means us-east-1, as far as I can tell.

To copy the entire bucket, do

aws s3 cp s3://source-bucket s3://target-bucket --recursive --region region-of-target-bucket --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers

(if the region is the default region you set up with aws configure, you can leave out the --region option. I wasn't smart enough to include the grants option, which makes the copied objects public (hence read=AllUsers), and I couldn't figure out how to change the permissions with the command line interface, so I had to go back to the online Amazon AWS console and set the permissions there (open the bucket, select all the folders, and select "Make Public"). That took more than an hour, but at least it was in the cloud, not running on my computer.

Now, in order to be able to load things like fonts which obey the cross origin restrictions (why fonts? I don't know. AJAX I can sort-of understand), in the AWS console, under Permissions select Edit CORS Configuration to:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
    </CORSRule>
</CORSConfiguration>

Now I have Amazon S3 access that is not blocked!

With my status plugin, I'd generally like the input element to take up the whole line, or at least the part that's not taken up by the prompt and by other messages. Evidently, that's a common concern, with a pure CSS solution that relies on overflow: hidden to create a new block formatting context that makes width: 100% mean "100% of the space not taken up by floats".

So the solution is to make sure that everything that is not the input element is floated, and that the input element is wrapped with an element that is display: block and overflow: hidden, and the input element is width: 100% (and box-sizing: border-box to make sure the border doesn't overflow).

It's unfortunate that we need the non-semantic wrapper to set the size that the input can be 100% of, but I don't see another option. It also requires that the floated elements come before the input element in the DOM, so my status plugin has to use prependTo for messages and appendTo for the input element.

As an example (the text is all editable):

<div>
  <span style="float: left" contenteditable>Prompt String:</span>
  <span style="float: right; color: red" contenteditable>Important Message</span>
  <span style="overflow: hidden; display: block; padding: 0 1em"> <!-- the padding isn't essential; it's just decorative -->
    <input style="width: 100%; box-sizing: border-box; -moz-box-sizing: border-box"/>
  </span>
</div>

Looking back at my line numbering plugin for Prism, I realized that it's working too hard by manipulating the DOM. Prism works by string manipulation anyway, so there's no harm in using that to wrap the lines rather than searching through elements. The code is now only 6 lines long. It still uses CSS and ::before pseudoelements to show the line numbers.

The Torah as traditionally written has two kinds of paragraph breaks: "open" and "closed". Open paragraphs are the same as in English typography: the next paragraph starts on the next line. Closed paragraphs start the next paragraph on the same line, after a 9-em gap. In the image on the page linked to above, there are 3 closed paragraph breaks, 2 open, then 1 closed.

I was thinking about representing this in CSS, with semantic HTML; something like <p class=open>First Paragraph</p><p class=closed>Second paragraph</p>. The Mechon Mamre tikkun uses a single <p> for the entire portion, then has <br>'s and  's hard-coded into the text. But there ought to be a better way.

See the final formatting.

I've noted in the past that the CSS pseudoelements represent inserted content in the element (i.e. span::before refers to a virtual element inserted within the <span> before the rest of its contents, not to content that is inserted before the <span> itself. That makes it useful for things like decorative guillemets for next and prev links ( a[rel=next]::before { content: '« '; } a[rel=prev]::after { content: ' »'; } ) (note using rel rather than classes to keep everything really semantic).

But you can insert content even in elements that can't have content, like <hr>. See the last two examples on CSS tricks; especially the last one that sticks a glyph in the middle of the horizonal rule:

hr {
    text-align: center;
}
hr::after {
    content: "§";
    display: inline-block;
    position: relative; 
    top: -0.7em;  
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
}

Or you can use the pseudoelement to create custom underlines. text-decoration: underline gives a solid underline in the text color. border-bottom gives far more options, but is generally too far away from the text for my taste. You can increase the distance with padding-bottom but you can't use negative values to decrease it. Instead, use a full-width ::after element with a bottom border, and move that:

a{
     position: relative;
     text-decoration: none;
}
a::after{
     position: absolute;
     left: 0px;
     bottom: 6px; /* or whatever looks right */
     content: '';
     width: 100%;
     border-bottom: 1px dotted green
}

Or for numbering paragraphs, use a CSS counter with the ::before element (this is what I used for my line numbering function, and for numbering quotes on kavanot.me):

p {
	margin-left: 10em;
	position: relative;
	counter-increment: p-counter;
}
p::before {
	content: counter(p-counter);
	font-weight: bold;
	position: absolute;
	left: -2em;
}

Typography

Butterick has a few rules for block quotations: Reduce the point size and line spacing slightly, and indent the text block be­tween half an inch and a full inch on the left side, and op­tion­al­ly the same on the right.

Since I'm using both Hebrew and English quotes, I'll indent on both sides. Rather indenting with margin, I set the width and use margin: auto to center it. That way, if the quote ends up wider than the fixed width (see the issues with comparing texts, below), it will remain centered.

blockquote {
  font-size: 92%;
  line-height: $linespacing;
  width: $linewidth - 1in;
  margin: 0 auto;
}

Note that I'm using SCSS, so I can use variables and math. I have to repeat the line-height since what is inherited is the actual amount of the line height, not the relative amount (I set line-height: 1.35 on the <body> which is 21px, but I want the <blockquote> line-height to be 1.35 times its own font-size).

I haven't been blogging or programming a whole lot over the past year, since I started teaching two Tanach (Bible) classes. Even two hours a week, irregularly, represents a lot of work, and pretty much has sucked up all my intellectual free time. So not much Javascript. But I have been recording the notes (sort of condensed essays, 1000–2000 words) online so I could refer to them, and I've learned something about creating a website that is text, not data or doing-stuff, oriented. The site is kavanot.me; the classes are Shiurim and Parasha.

I don't expect any reader of this blog to understand the Hebrew or the details of Biblical exegesis, but these notes are more about design issues and resources that would be relevant to almost anyone.

Well, I've finally decided to join the 21st century and get my projects on github. Some of them are useful enough that others have expressed an interest in extending them, and it will force me to have the discipline to use version control consistently. The projects I have on there are:

bililiteRange

Includes the original bililiteRange (for which I know there are some bugs, especially in IE and Opera; another advantage of github is to allow others to formally raise bug reports) and sendkeys, plus other associated libraries and jQuery plugins.

jquery-css-parser

My CSS parser, along with the demo page and ancillary functions.

flexcal

My jQuery UI date picker for multiple calendar systems, along with timepickr, a mouse-friendly time picker, and their dependencies.

Not sure when this happened, but google.load('jquery', '1') is frozen at 1.7.1. Now the official Google Libraries recommends loading the version explicitly: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>. That means I have to edit my pages by hand every time they come out with a new version. I suppose that makes things stabler; I don't upgrade until I want to. Annoying for me. Ah, well.