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

The correct way to use your own NSError objects in your app

Thanks to Mike Abdullah @mikeabdullah for pointing out the 'deliberate' (ahem) mistake in this post the first time around. Oops.

Take an iPhone or iPad Screenshot from the Command-line

Here's another tip using the great libimobiledevice library http://www.libimobiledevice.org/, originally built to manage iOS devices on Linux.

Taking app screenshots is a bit of a pain. We tend to do the following:

• Run the app
• Press Home+Power together to take a photo,
• Go to the photo library
• Find the photos
• Email them to ourselves.

Using this method you can type a Terminal command, and have the screen appear directly on your computer. Much easier.

Here's how:

• Grab the libimobiledevice binary for Mac OS X from my github account athttps://github.com/benvium/libimobiledevice-macosx/zipball/master
• Follow the install instructions here:
  https://github.com/benvium/libimobiledevice-macosx/blob/master/README.md

Connect your device, open up Terminal.app and type:

idevicescreenshot

It'll save a .TIFF file to the current directory. Easy!

View the log output of any app on iPhone or iPad

Here's another tip using the great libimobiledevice library http://www.libimobiledevice.org/, originally built to manage iOS devices on Linux.

This method shows you how you can view the log output (e.g. what you see in Xcode when running in debug mode) on any app, whether it's an AppStore build or an AdHoc build.

Some apps are more talkative than others - it all depends on how careful the developers were to remove log messages in release builds.

I find this most useful for debugging issues in release versions of our apps. If a user reports a sequence of actions causes a crash, you can try this out while watching the log from your app.

Here's how:

• Grab the libimobiledevice binary for Mac OS X from my github account athttps://github.com/benvium/libimobiledevice-macosx/zipball/master
• Follow the install instructions here:
  https://github.com/benvium/libimobiledevice-macosx/blob/master/README.md

Connect your device, open up Terminal.app and type:

idevicesyslog

Up pops a real-time display of the device's system log.

With it being a console app, you can filter the log using unix commands, such as grep


For instance, see all log messages from a particular app:

idevicesyslog | grep myappname

Install iPhone / iPad / iOS App IPA without iTunes or Xcode

Using the great libimobiledevice library http://www.libimobiledevice.org/, originally built to manage iOS devices on Linux, it's possible to do a bunch of cool things, including installing an app directly on a connected device without needing to use iTunes or Xcode.

Here's how:

• Grab the libimobiledevice binary for Mac OS X from my github account at https://github.com/benvium/libimobiledevice-macosx/zipball/master
• Follow the install instructions here:
  https://github.com/benvium/libimobiledevice-macosx/blob/master/README.md

Now connect your iDevice, open Terminal.app and type:

ideviceinstaller -i myApp.ipa

Note: Your IPA will need to have a valid code signature and mobileprovision file for the install to succed. This system is NOT a way around iOSs security!