Skip to content

Updated $.fn.status

I've added the ability to use the console with my status plugin, so you can do

$(console).status({
  run: $.post(url, {data: data}).then(
    function() { return 'Data Saved' },
    function() { return new Error('Data Not saved') }
  )
});


And the output will go to the console rather than to an element on the page.
For simple output to the console, this is far more complicated than console.log, but it works with the rest of the status options. Input is with window.prompt, since I don't know how to get input from the console.

Rethinking $.fn.sendkeys

See the demo.
See the source code, which depends on bililiteRange.

Modern browsers won't let synthetic events (triggered with dispatchEvent) execute their default actions (meaning the action that would occur if the event was triggered by a user action). The Event object has a read-only field called isTrusted that is false for anything but unmodified user-initiated events. These are called "trusted events", and I understand the justification, but they go too far. It makes it impossible to implement a virtual keyboard, since triggering keydown or keypress events aren't trusted and won't insert the character (the default action).

Fortunately, bililiteRange and especially bililiteRange.sendkeys can insert characters and do other manipulations on the page. So I created a jQuery plugin that uses bililiteRange.sendkeys to catch keydown events and implement them as well as possible.
Just include the source code and keydown events get a new default handler (so it can be cancelled by preventDefault) that looks at the key field. If it is a single character, that character is inserted at the selection. If it is more than one character long, it is assumed to be a sendkeys command like ArrowLeft and is sent as sendkeys('{'+key+'}').
I used the modern Event.key rather than Event.which, so I don't have to translate keyCodes. If you need to use the old way, see my keymap plugin.

Thus now, $('textarea').trigger({type: 'keydown', key: 'A'}) will work as expected, as will $('textarea').trigger({type: 'keydown', key: 'Backspace'}).

The actual plugin

Under the hood, this uses a very simple jQuery plugin that just calls bililiteRange.sendkeys(). It also turns '\n' in the string into '{Enter}', which I thought would be useful but has actually not turned out that way. Putting the '\n' in braces ('{\n}' prevents the replacement.
The plugin itself is:

$.fn.sendkeys = function (x){
  x = x.replace(/([^{])\n/g, '$1{enter}'); // turn line feeds into explicit break insertions, but not if escaped
  return this.each( function(){
    bililiteRange(this).bounds('selection').sendkeys(x).select();
    this.focus();
  });
};



Demo


$('.selectoutput').click(function(){
	$('.output').removeClass('selected');
	var index = $(this).parents('th').index();
	$('.output').eq(index).addClass('selected').focus();
});
$('div.test input:button').click(function(){
	$('.output.selected').sendkeys($('div.test input:text').val());
});
$('div.wrap input:button').click(function(){
	var tag = $('div.wrap select').val();
	$('.output.selected').sendkeys('<'+tag+'>{selection}{mark}</'+tag+'>');
});
$('.phonepad input').click(function(){
	$('.output.selected').trigger({type: 'keydown', key: this.name || this.value});
});
$('.output').each(function(){
	bililiteRange(this); // initialize the selection tracking
}).on('keydown', function(evt){
	if ($('#overridepad').is(':checked')){
		alert (evt.key);
		evt.preventDefault();
	}
}).on('keypress', function(evt){
	$('#keypress').text($('#keypress').text()+' '+evt.which);
}).on('sendkeys', function(evt){
	$('#sendkeys').text($('#sendkeys').text()+' '+evt.which);
}).on('focus', function(){
	var index = $(this).parents('td').index();
	$('.output').removeClass('selected');
	$('.output').eq(index).addClass('selected')
	$('.selectoutput').eq(index).attr('checked',true);;
});

<div>
	<table style="width: 100%" border="2" id="demo" >
		<thead>
			<tr>
				<th><label>
					<input type="radio" class="selectoutput" name="selectoutput" checked="checked" />
					<code>&lt;input&gt;</code>
				</label></th>
				<th><label>
					<input type="radio" class="selectoutput" name="selectoutput" />
					<code>&lt;textarea&gt;</code>
				</label></th>
				<th><label>
					<input type="radio" class="selectoutput" name="selectoutput" />
					<code>&lt;div contenteditable&gt;</code>
				</label></th>
				<th><label>
					<input type="radio" class="selectoutput" name="selectoutput" />
					<code>&lt;div&gt;</code>
				</label></th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><input type="text" class="output selected" /></td>
				<td><textarea class="output"></textarea></td>
				<td><div class="output" contentEditable="true"></div></td>
				<td><div class="output" >This is not editable text</div></td>
			</tr>
		</tbody>
	</table>
<div class="phonepad">
<input type="button" name="ArrowLeft" value="&larr;"/><input type="button" name="ArrowRight" value="&rarr;"/><input type="button" name="Backspace" value="BS"/><input type="button" name="selectall" value="All"/><br/>
<input type="button" value="7" /><input type="button" value="8" /><input type="button" value="9" /><br/>
<input type="button" value="4" /><input type="button" value="5" /><input type="button" value="6" /><br/>
<input type="button" value="1" /><input type="button" value="2" /><input type="button" value="3" /><br/>
<input type="button" value="*" /><input type="button" value="0" /><input type="button" value="#" /><input type="button" name="Enter" value="&crarr;"/>
</div>
<label>Alert on keydown event: <input type=checkbox id=overridepad /></label>
<div class="test"><input type="text" /><input type="button" value="test"/></div>
<div class="wrap"><select><option>em</option><option>strong</option><option>del</option></select><input type="button" value="Wrap Selection"/></div>

<div id="keypress">keypress event.which:</div>
<div id="sendkeys">sendkeys event.which:</div>
</div>
<div style="clear:both" />

The phone pad keys use $().trigger({type: 'keydown', key: key}). The test button does $().sendkeys(textbox.value). The wrap button does $().sendkeys('<tag>{selection}{mark}</tag>'). Note that the trigger code does not affect the non-editable DIV, while sendkeys does.
The "Alert on keydown event" checkbox attaches a handler to the keydown event which calls event.preventDefault, showing that the text entry and keypress events do not occur.

bililiteRange.sendkeys

bililiteRange.text() works well to insert text into ranges, but I wanted to be able to simulate other keys, ala Microsoft's SendKeys. bililiteRange.sendkeys() does exactly that. It basically executes text(string, 'end') but interprets any text between braces ('{key}') as a command representing a special key. For security reasons, the browser won't let you do anything outside of the text of the page itself, but I've implemented the following (the key names are from the proposed DOM3 standard)::

Backspace
Delete backwards
Delete
Delete forwards
ArrowRight
Move the insertion point to the right
ArrowLeft
Move the insertion point to the left
Enter
Insert a newline, with bililiteRange.insertEOL(). Warning: In contenteditable elements, Enter is flaky and inconsistent across browsers. This is due to the flakiness of contenteditable itself; I can't figure out what to do about this.

For backwards-compatibility with older versions, the following synonyms also work: backspace, del, rightarrow, leftarrow and enter.

So, for example, bililiteRange(el).sendkeys('foo') replaces the current range with 'foo' and sets the range to just after that string. bililiteRange(el).sendkeys('foo{Delete}{ArrowLeft}{ArrowLeft}') replaces the current range with 'foo', removes the character just after that string and sets the range to between the 'f' and the 'o'.

To manipulate the selection, use the usual bililiteRange methods. Thus, to simulate a backspace key, use bililiteRange(el).bounds('selection').sendkeys('{Backspace}').select().
To insert a '{', use an unmatched brace, bililiteRange(el).sendkeys('this is a left brace: {'), or {{}, as in bililiteRange(el).sendkeys('function() {{} whatever }');.

If anyone knows how to implement an up or down arrow, or page up/down, please let me know.

Other Commands

To make life easier for me, there are a few other "keys" that implement specific actions:

selectall
Select the entire field
tab
Insert a '\t' character. $().sendkeys('\t') would work just as well, but there are circumstances when I wanted to avoid having to escape backslashes.
newline
Insert a '\n' character, without the mangling that {enter} does.
selection
Inserts the text of the original selection (useful for creating "wrapping" functions, like "<em>{selection}</em>").
mark
Remembers the current insertion point and restores it after the sendkeys call. Thus "<p>{mark}</p>" inserts <p></p> and leaves the insertion point between the tags.

So to wrap the text of a range in HTML tags, use range.sendkeys('<strong>{selection}</strong>'). To create a hyperlink, use range.sendkeys('<a href="{mark}">{selection}</a>') which leaves the range between the quote marks rather than at the end.

Plugins

Adding new commands is easy. All the commands are in the bililiteRange.sendkeys object, indexed by the name of the command in braces (since that made parsing easier). The commands are of the form function (rng, c, simplechar) where rng is the target bililiteRange, c is the command name (in braces), and simplechar is a function simplechar (range, string) that will insert string into the range. range.data().sendkeysOriginalText is set to the original text of the range, and rng.data().sendkeysBounds is the argument for bililiteRange.bounds() that will be used at the end.

So, for example:

bililiteRange.sendkeys['{tab}'] = function (range, c, simplechar) { simplechar(rng, '\t') };
bililiteRange['{Backspace}'] = function (range, c, simplechar){
  var b = rng.bounds();
  if (b[0] == b[1]) rng.bounds([b[0]-1, b[0]]); // no characters selected; it's just an insertion point. Remove the previous character
  rng.text('', 'end'); // delete the characters and update the selection
};
bililiteRange.sendkeys['{selectall}'] = function (range, c, simplechar) { rng.bounds('all') };

So to have a reverse-string command:

bililiteRange['{reverse}'] = function (range, c, simplechar){
  simplechar(range, range.sendkeysOriginalText.split('').reverse().join(''));
};

Or, to annoy the anti-WordPress crowd, a Hello, Dolly command:

bililiteRange['{dolly}'] = function (range, c, simplechar){
  var lyrics = [
    "Hello, Dolly",
    "Well, hello, Dolly",
    "It's so nice to have you back where you belong",
    "You're lookin' swell, Dolly",
    "I can tell, Dolly",
    "You're still glowin', you're still crowin'",
    "You're still goin' strong"];
  simplechar (range, lyrics[Math.floor(Math.random() * lyrics.length)];
};

Events

After each printing character (not the specials, unless they call simplechar) it triggers a keydown event with event.which, event.keyCode and event.charCode set to the Unicode value of the character.
After the entire string is processed, it triggers a custom sendkeys event with event.which set to the original string.

Rethinking $.keymap

Download the code.

See the demo.

See the hotkeys demo.

Dealing with keydown events is a pain, since the event object has always encoded the key as an arbitrary numeric code, so any program that deals with key-related events has something like:

var charcodes = {
	 32	: ' ',
	  8	: 'Backspace',
	 20	: 'CapsLock',
	 46	: 'Delete',
	 13	: 'Enter',
	 27	: 'Escape',
	 45	: 'Insert',
	144	: 'NumLock',
	  9	: 'Tab'
};

And so on. There is a proposal to add a key field that uses standardized names for the keys, but only Firefox and IE implement that right now. The time is ripe for a polyfill to bring Chrome and Safari into the twenty-first century, and I'd already worked on something similar with my $.keymap plugin.

So I updated that plugin to simply implement the key field in keydown and keyup events. Now just include the plugin and you can do things like:

$('textarea').keydown(function(event){
  if (event.key == 'Escape') { do something useful }
});

Continue reading ›

Scribblish

We love playing Scribblish. It's like the old Telephone game but with pictures, with players alternating writing captions for pictures and drawing pictures for the captions. It's most fun as a non-competitive party game, just reading the cartoons at the end of each round. It's useful as well: we taught it to my daughter's then-boyfriend and said not to take so much time on detailed drawings; they should look like XKCD. And he knew what I was talking about! Obviously a perfect match. They were married the next year.

Unfortunately no one else seemed to share my family's passion, and the game was discontinued. You can't get replacement pads any more. So I printed my own (it's just a bunch of lines on a sheet of paper cut in thirds). And I wanted to leave it here so I could find it again:

Scribblish-style pad

Running Windows XP in Windows 8

I wanted to run some of my old games (notably Riven) on my shiny new Windows 8.1 machine, but it wouldn't even try to install on a 64-bit operating system. Luckily, Oracle offers VirtualBox to run virtual machines, and Microsoft offers a Windows XP virtual hard drive (.vhd file) through its Windows XP mode for Windows 7. Note that it won't run directly on Windows 8, but you can extract the .vhd file as outlined by lifehacker:

Then use 7-Zip open the EXE file as an archive.

Within that archive, find the sources/xpm file within it, and extract that folder to your hard drive.

Finally, in the extracted xpm file, you'll find a file called VirtualXPVHD. Export it and rename it to VirtualXPVHD.vhd

In VirtualBox, create a new virtual machine running Windows XP, and instead of creating a new virtual hard drive, use the one created above.

This will give you a new virtual machine that will require you register within 30 days, which you can't do (since Windows XP isn't supported anymore). We'll fix that later.

Start up the virtual machine, deal with the craziness of mouse capturing (toggle the right control key to get the mouse back) until you install "Guest Additions":

In the "Devices" menu in the virtual machine's menu bar, select "Insert Guest Additions CD image" then run that installer in the virtual machine. Now the mouse should integrate smoothly.

In the VirtualBox Manager, in the Network tab, unclick "Cable Connected". You don't want this virus-friendly operating system talking to the internet!

To activate Windows XP, you can try the file named KEY in the exe file with the virtual hard drive, but the comments on lifehacker indicate it won't work. I got a new bios from vmlite, and install it as:

path\to\VirtualBoxFolder\VBoxManage.exe setextradata your-vm-name "VBoxInternal/Devices/pcbios/0/Config/BiosRom" "path\to\pcbios.bin"

And it all seems to work. I don't feel guilty about using a pirated operating system license, since I am running Windows 8 legally, and Microsoft won't sell me XP.

Installing CD's is a pain, and Riven wants to keep swapping them, but making them virtual images makes it much easier. Install ISORecorder (the Windows 7 version works with Windows 8) and now the contextual menu (right-click) for CD's includes a "Create Image from CD" option. Save with the iso extension, and VirtualBox will mount them just fine.

Unfortunately, I now do not have any time to play anything.

Setting up git

Now that I have my computer working, I want to get back at my github repositories. I could type my password with every push, but it's easier to use SSH with a key pair. Since I'm using Putty for shell access, I use Puttygen that comes with it. The problem is that Puttygen's format is not the right one for git. There are recommendations online to set $GIT_SSH to use plink with Pageant, which does use Puttygen's format, but I read that github won't support that, so I ended up doing the following:

Create a key pair with Puttygen. In the conversion menu, create a file in openSSH format. Create the file ~/.ssh/config:

Host github.com
	User git
	IdentityFile /path/to/openssh-format-privatekey

At github.com add the public key that you created. Back in Powershell, in the directory with the local repository, do

git remote set-url origin git@github.com:username/repo-name.git

to use SSH. Now git push origin master will push the local master branch back up to github without needed a password (if you created the private key with a passphrase, you will have to enter that.

In putty, for each host, set Host Name in the Session tab and select the private key (in Puttygen format!) in the Connection->SSH->Auth tab.

Working with Amazon S3

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!

Setting up a New Computer

It's been more than six months since I've posted; I'm still alive and well but haven't had the time to be hacking. Plus our house was robbed and the only thing of value that was taken was my computer, and it's taken me a while to replace it. One of the nice things about the cloud is realizing how little I needed my own machine to get everyday work done; the biggest inconvenience was changing all the passwords that I had stored locally.

But now I have a new Windows 8.1 machine (in my heart I'm a Mac, but I'm cheap). So these next few posts will be my own notes on how to set up a machine that does what I want, so I don't have to remember it all again.

First of all, in Remove Programs, get rid of all the cruft (including the "free trial" software including antivirus). If it's not obvious, you're not gonna use it. Activate Windows Defender.
Go to the Start screen and delete just about everything (a lot of right-clicking). The goal is to create a simple screen of what I want.

Next, install Chocolatey. That makes installing everything so much easier, and lets me rely on open-source-minded people to install useful things without cruft. In a cmd.exe window, run:

@powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

It's kind of annoying that Powershell itself makes running things harder, but Microsoft is trying to save me from myself.

From now on, I want to run in Powershell. Create a shortcut to it in C:\ProgramData\Microsoft\Windows\Start Menu\Programs (that seems to be the only way to pin a shortcut to the Start screen, though I may be wrong. Didn't do enough experimenting on that; this worked, so I was done). Use the properties on that to set the initial directory and the screen colors (I wanted a black background, since the red and green colors that git uses look terrible against the royal blue default), and the initial screen size. Pin that shortcut to the Start screen.

Create a file named profile.ps1 in My Documents/WindowsPowerShell and include a line of $env:Path += ";C:\Program Files (x86)\Git" so that I can use git commands directly from the command line (no more separate git bash). Any other startup code goes there.

Note that scripts, including the profile, will not be run until the Execution Policy is reset below.

Right click that shortcut to Run as Administrator, and start installing:

Set-ExecutionPolicy RemoteSigned

choco install git
choco install putty
choco install filezilla
choco install notepadplusplus
choco install CloudBerryExplorer.S3
choco install gnucash
choco install libreoffice
choco install 7zip

Evidently I could have used

choco install google-chrome-x64
choco install firefox
choco install itunes

But I didn't realize that at the time and downloaded them from their respective websites.

Then find all those programs on the Start screen (just start typing the name) and pin them, then move them where I want.

Then enter the SFTP settings for all my websites in Filezilla and Notepad++ NppFTP, copy over the documents I wanted from my old (thankfully unstolen) computer, and I had a working machine.

One thing to note is that Filezilla stores passwords in ~\AppData\Roaming\FileZilla in plaintext, which is great for changing computers and for finding passwords you've forgotten, but it means that if your computer is stolen or infected, you could lose everything. There are ways to avoid this, but for now I'm relying on hope, which is not a strategy.

Javascript Syntax-Highlighting Code Editor

I suppose everyone knows about this, but I just discovered CodeMirror, a javascript, drop-in (not dependent on any other library) text editor that does syntax highlighting. It's smooth and fast. I'm still going to be playing with my editor (as part of the bililiteRange package), since it's been a useful learning experience, but if you want a professional-level editor, go there. I won't be insulted.