OSX Terminal: alt-left jump word ctrl-left go to start and more

By default OSX Terminal doesn't let you use many standard OSX text-editing shortcuts. For example, CMD or Control Left normally jumps to the start of the line. Alt-left jumps left one word. Also forward delete doesn't work.

Happily it's possible, though slightly confusing, to add these shortcuts back.

Here's how:

• Open Terminal Preferences
• In the Settings Pane, select Keyboard

• Click the + button

• Now let's add those shortcuts back.

For jump-to-start-of-line:

• Key: Cursor Left
• Modifier: Control
• Action: send string to shell: (the default)
• Click in the empty white box and press CTRL-A. \001 will appear

For jump-to-end-of-line:

• Key: Cursor Right
• Modifier: Control
• Action: send string to shell: (the default)
• Click in the empty white box and press CTRL-E. \005 will appear

To re-activate forward delete

• Key: forward delete
• Modifier: none
• Action: send string to shell: (the default)
• Click in the empty white box and press CTRL-D. \004 will appear

To move forwards one word at a time

• Key: cursor left
• Modifier: option
• Action: send string to shell: (the default)
• Click in the empty white box and press Escape+b. \033b will appear

To move backwards one word at a time

• Key: cursor right
• Modifier: option
• Action: send string to shell: (the default)
• Click in the empty white box and press Escape+f. \033f  will appear.

I find adding these shortcuts in makes terminal much more usable. 

Editing a Phonegap app directly on your device without reinstalling or rebuilding

How often have you built a large Phonegap app, copied it to your device, played with it for a while and then discovered a tiny bug? Something that you just know is just a single line, or even a single character change...

Normally to test your fix you'd need to make the change in your IDE, and re-build and re-upload the app to your device using Xcode. This can take ages if your app has a lot of content.

If you're using Phonegap build, it can take even longer as you'll have to wait for the whole app to build and then download again.  This can be particularly painful if your one line change takes a few goes to get right (especially anything UI or animation-related).

So what's the solution? Well, it's actually possible to connect your iPhone to your Mac, edit your JS file (or any other file) and re-save, and run the app again.

I was surprised to discover that this is possible - I'd assumed the code signing verification system built into the iDevice would notice that the bundle had changed and refuse to run but it doesn't. At least not in my experience.

Here's how to do it (note commercial software required, though the demo does actually work. I don't work for them and am not paid!)

• Download iExplorer 3 from here 
• Connect your device
• Open the Apps folder and find your app.
• Right-click the app and choose 'Mount as Disk'

• A new drive will appear. Open it.
• Inside you'll see a bundle, e.g. com.example.myapp.
• Right-click the bundle and choose 'view package contents'

• Open the www folder (or whichever folder your app uses for PhoneGap content)

• Open the JS file you want to change in your favourite text editor (we use Sublime Text 2.app)
• Save changes. This writes it straight back to the device!

The above instructions are for Mac, but I suspect pretty much the same process will work for PC too.

Now you can re-start your app and the new code should be live! 

This technique works for HTML, JavaScript, CSS and other text files. It most likely won't work with PNG files as the app build process compresses them into a proprietary Apple format (you can convert, but it is fiddly). I haven't tried JPG, MP4, files etc. Your milage may vary.

Dealing with Cacheing issues

Note that quite regularly you'll find the iDevice still runs the old version of your JS file. This is due to the UIWebView caching the JS file.

The easier way to fix this is to force the iDevice to reload the Javascript file by changing the link to the JS file.   To do this, edit your main HTML file using the technique above.

Change the link from (for example)

<script src="myfile.js" type="application/javascript"></script>

To:

<script src="myfile.js?_cache=123" type="application/javascript"></script>

Each time you change the myfile.js, also update the _cache=123 number and you'll always get the latest version. _cache doesn't actually mean anything, you can choose whatever you want.

A kaleidoscope built using (almost) pure CSS3

Here's a kaleidoscope made using pure CSS3. Ok, almost pure CSS.
The only bit of JavaScript is used to kick off the animations. I could have done this is CSS too, but ran out of time.
The way it works is there's a 500px square div containing a triangular -webkit-mask-image (defined by the SVG file). This mask image ensures that regardless of the size and position of the background image, you only ever see a triangular shaped section. You can think of it as a 'cutout'.
This div is duplicated, flipped and rotated eight times to create the effect. We then animate the resulting 'scope by simply moving the position of the background image.
I think it's quite neat. Unfortunately this fairly simple page actually crashes iPad and iPhone devices running (at least) 5.1.1 after a while. Very frustrating!

View Demo

Source Code