fyi Bookmarklet

UPDATE: April 19, 2011 Project now hosted elsewhere, see fyi-bookmarklets on Github

I wrote a simple bookmarklet to make it very easy to share a snippet of a web page and the URL by email (see Install and Usage below). I was inspired by Mike Chamber’s “fyi” Firefox ubiquity command which has served me well for years.

The “fyi” command (and now the bookmarklet) is a very handy way to select some text on a web page and fire off an email quoting part of the page and including the URL– with minimal typing and no copy-and-paste work. As Mike put it in 2008:

I wrote the command because I am often finding myself forwarding URLs to friends and co-workers. This is normally much more tedious than it needs to be, involving the following steps:

  1. Copy the URL from the browser
  2. Switch to mail client
  3. Create new Email
  4. Paste URL into the email body
  5. Switch back to the browser
  6. Copy the post title
  7. Switch back to email
  8. Paste the title as the subject
  9. Switch back to the browser
  10. Copy a snippet from the page
  11. Switch back to the email
  12. Paste in the snippet
  13. Enter the TO email address
  14. Finally send the email

Phew…

 

Well, no more. By using the [ubiquity] “fyi” command, you can quickly and easily forward information about a page to anyone.

Unfortunately, ubiquity is now an inactive project of Mozilla Labs.

 

Fortunately, Mozilla Firefox Custom Keywords allow you to easily make bookmarks or bookmarklets that can act like a command with a dynamic parameter. If a bookmark has a keyword, you can type that keyword in the Location Bar (address bar) and Firefox opens the bookmark. Even better, you can type string of text after the keyword and that string is passed to the bookmark. Just edit your bookmark putting a %s where you want the string to be substituted. Asa Dotzler and Daniel Wang explain it well on the Firefox Custom Keywords page. So well, in fact, that I was able to whip up a work-alike bookmarklet in a few minutes (and then spend last night tuning it and drafting this post).

Install:

First, bookmark this fyi link in Firefox. To bookmark a link you can right-click on it and “Bookmark this Link” or drag the link to your bookmark bar.

 

Second, add fyi as a keyword property of the new bookmark. To add a keyword, use the “Bookmarks” menu to select the “Show All Bookmarks” menu item. In the resulting “Library” window, navigate to the new bookmark and highlight it. If necessary, us the control beneath the property labels to expand the property panel to reveal the field for “Keyword”. Finally, enter the keyword fyi.

Firefox Library, property panel with keyword attribute set to fyi

Close the “Library” to save your changes.

Usage:

fyi [to_email]

 

Activate the “fyi” bookmarklet by using the bookmark menu, or by clicking the bookmark in your bookmark bar, or (ideally) move the cursor into the Location Bar and type:

fyi

and hit enter. This opens the default email program and creates a new email with the page title in the email subject. The email body contains the page title and URL. If any text on the page is selected, then the selected text is also included in the body.

If typed, the command optionally takes 1 argument, that includes one or more email addresses, separated by semicolons. The email address(es) will be put in the TO field of the new email.

Requirements:

Version History:

Version 1.0 (April 6, 2011) more recent versions on Github

Known Issues:

Tested with Firefox 4.0 on Mac OS X 10.6 and Win XP. May or may not work with Chrome, IE or Safari. A version optimized for iOS Mobile Safari is also available.

License:

MIT

Source:

Source on Github

Use comments to report bugs or provide feedback. Thanks.

App Icons for iOS, AIR and Android

I’ve been making HTML5 apps with PhoneGap and helping co-workers using Flash CS5 with the iPhone & Android packagers. There are a bunch of icon sizes needed when you make a cross platform mobile app, especially if you want to cover the sizes for phones, tablets, normal and “@2x” retina display resolutions.

Here is a table I’ve I made of the various sizes needed for iPhone, iPad, Universal iOS, AIR 2.5 for desktop and AIR for Android. Hopefully this will be helpful for others, too.

 

Format

 

 

 

 

Size

iPad

iPhone

iOS

AIR 2.5

AIR Android

16×16

 

 

 

X

 

29×29

X

X

X

 

 

32×32

 

 

 

X

 

36×36

 

 

 

 

X

48×48

 

 

 

X

X

50×50

X

 

X

 

 

57×57

 

X

X

 

 

58×58

 

X

X

 

 

72×72

X

 

X

 

X

114×114

 

X

X

 

 

128×128

 

 

 

X

 

512×512

X

X

X

 

 

Manifest Generator for TextMate and Text Wrangler

I whipped up versions of the Coda extension “Manifest Generator” that run in TextMate and TextWrangler. See the previous post on a HTML 5 Manifest Generator for Coda.

TextMate plugin bundle icon HTML5 Manifest Generator for TextMate

To install the bundle- just download, unzip, and double-click. TextMate will open and install the bundle as “Mobilemind” with a command, “Generate Manifest”. Usage is as you would expect in TextMate. Feel free to move it to a more appropriate bundle grouping, like say HTML.

Shell script plugin icon HTML5 Manifest Generator A ‘Shebang’ menu Filter for TextWrangler

To install the Shebang (Shell) menu item- first download, then unzip the shell script. Finally, move the script file into the directory:

~/Library/Application Support/TextWrangler/Unix Support/Unix Filters

Then make sure the script is executable by doing the following in Terminal:

chmod 755 "$HOME/Library/Application Support/TextWrangler/Unix Support/Unix Filters/Manifest Generator"

Then to use it the first time TextWrangler:

  • Open the HTML file that you want to use as the basis for generating a manifest
  • In TextWrangler, hold down the Cmd key while you use the “!#” (Shebang) menu to select the sub-menu “Unix Filters” and choose ‘Manifest Generator‘.
  • In the dialog box set the “Filter Options” as follows; Output STDERR to: New Window Output STDOUT: Windows used for STDERR
  • Then click the button “Run” to execute the filter command.

The options should “stick” for next time you run the Filter.

If you want to use it as a raw shell command, I’d recommend copying the file “Manifest Generator” to “manifest-gen” and putting the copy in the directory “/usr/local/bin“. That will save you typing lots of quotes and/or long paths.

Coda Plugin- HTML5 Manifest Generator

Offline web content is readily done with an HTML5 Cache Manifest, as well described and demonstrated by Mark Pilgrim. Though the manifest file itself is simple, creating it can require some tedious work. This Coda Plugin attempts to address that. The guts of the plugin are a relatively simple perl script that gathers relative URL references from the open HTML file and generates a manifest. I wrote the perl script so that it can also be used as a stand-alone shell command too. From the manifest-gen script’s “-h” option

Generates a default HTML5 ‘cache manifest’ file from HTML input.

The manifest includes items referenced by HTML tags with attributes for href, longdesc, and src. The items are sorted with duplicates removed.

The manifest excludes items that specify a protocol scheme, i.e. non-relative URLs.

To install the plugin- just download, unzip, and double-click. Coda will open and install the plugin.

Coda plugin icon HTML5 Manifest Generator

To use, open an HTML file and use the Coda Plugins menu to select Manifest Generator. The command will open a new document with a sample manifest. Remember to save the file and add the manifest attribute to the <html> tag of the main HTML file. See Mark Pilgrim’s excellent book for details.

Given sufficient interest I can also make the bare command/shell script of the command available for download. It works on a named file or you can pipe in standard input.

PhoneGap Lessons Learned- Windows Edition

The first lesson learned is that there is a lot of stuff to install to get a Windows machine ready to roll with Eclipse‑Android‑PhoneGap development. Second, I learned it is all really finicky regarding version of Ruby, paths, order of install, etc. Third, I learned that getting a stable setup for this on Windows can take a few hours.

You will need to download and install the following:

  1. Java JDK (I got the latest Java at the time; Java SE 6 Update 23. Regardless of the version, be sure to Download JDK not the JRE.)
  2. Apache ANT (Instructions aren’t too clear, I just downloaded and unzipped to c:\android-sdk-windows)
  3. Ruby ** DO NOT GET THE LATEST RUBY (currently v 1.9.2); get 1.9.1 **
    Check PhoneGap docs to see if/when 1.9.2 or later ruby for Windows may work.)
  4. Git (msysgit)
    (Here I felt comfortable getting the latest, 1.7.3.1, since it is not directly in the build process.)
  5. Android SDK
  6. Eclipse IDE for Java Developers* (Eclipse ‘Helios’ version 3.6.1 worked well for me)
  7. Eclipse Web Developer Tools* see paragraph below
    (Not mentioned in PhoneGap Docs, but the ADT  Plugin has a dependency on the Eclipse Web Developer Tools. Another option is to get Eclipse IDE for Java EE developers which already includes the Web Developer Tools).
  8. ADT (Android Developer Tools) Plugin for Eclipse
  9. PhoneGap-Android (Long term you’ll be better off cloning via git instead of downloading. Later instructions help with using git clone…)

You can dive in and do the installs like I did, using the instructions from Getting started with Android PhoneGap in Eclipse. Note that there are a quite a few potential gotchas. I’ll try to call out some major ones. Some are alluded to above, like “Gotcha #0“— ruby version sensitivity.

Gotcha #1: Order can matter.
Solution: For better results, download and install the the Java JDK first. See gotcha #2 for some tips relating to the Android SDK, Apache ANT, and where you put the phonegap‑android directory.

Gotcha #2: Paths (and names) matter, especially if they contain spaces or special characters (or if environment variables have an unneeded trailing ‘\’)
Solution: The PhoneGap wiki mentions the work-around in numerous places, but I found it easiest to install key components to C:\ (the root) rather than deal with the hassles caused by paths with spaces in the names (ie, C:\Program Files\…). Thus,

  1. When running the Android SDK installer, change the install folder to:

    C:\android-sdk-windows

  2. Extract or move the Apache ANT directory to the root (e.g., c:\apache-ant-1.8.1)
  3. Change to the root of the C: drive when you are ready to:

    git clone https://github.com/phonegap/phonegap-android.git

  4. Really make sure all the environment variables are set properly— proper names, proper distinctions use of User and System Environment variables, and proper syntax (e.g., no trailing ‘\’).
  5. When you are ready to

    droidgap gen projectname

    do NOT use hyphens, spaces or underscores in the project name… weird things will happen as the ruby scripts don’t quote the names and also rely on some implicit naming conventions and use of the underscore.

Gotcha #3: The ADT Plugin requires Eclipse Web Developer Tools, but the basic Eclipse Java IDE doesn’t include those.
Solution: After Eclipse is installed, if you picked the basic Eclipse Java IDE you can add the Web Developer Tools as follows:

  1. Launch Eclipse
  2. Use the Eclipse drop-down menu for Help to pick Install New Software…
  3. In the dialog for “Install” use the drop-down list to select “Helios – http://download.eclipse.org/releases/helios”. Then scroll down to “Web, XML, and Java EE Development”. Expand that item and then check the boxes to add at least Eclipse Web Developer Tools, Eclipse Web Developer Tools, Eclipse XML Editors and Tools, and Javascript Development Tools. The image below may help.
    Eclipse Install New Software dialog
  4. Select “Next” and continue on, accepting the agreements (if you agree).
  5. Be sure to quit and restart Eclipse before Installing the ADT Plugin (see instructions at that link).

Gotcha #4: Environment variables matter. (aka “Gotcha #2 Returns: Paths Redux”)
Solution: Make sure you properly set the necessary environment variables and verify them at the command prompt.

  • Set (or do a preliminary verification of) the Environment variables by right-clicking on My Computer and selecting Properties. Then select the Advanced tab and click the Environment Variables button. See image below for an example.
    Environment variables dialog
  • The following User Environment variables should be set (example values from my machine)

    ANDROID_HOME=C:\android-sdk-windows
    ANT_HOME=C:\apache-ant-1.8.1
    JAVA_HOME=C:\Program Files\Java\jdk1.6.0_23

  • Verify that the System Environment Variable PATH somewhere contains an excerpt like:

    C:\Ruby191\bin;C:\apache-ant-1.8.1\bin;C:\Program Files\Java\jdk1.6.0_23\bin

  • TIP: As a convenience, append the following to the end of the System Environment Variable PATH

    C:\android-sdk-windows;C:\android-sdk-windows\tools;

    followed by

    C:\phonegap-android;C:\phonegap-android\bin

    Then you will be able to use common Android SDK and phonegap-android commands without concern for the full path or current working directory.

  • Open a new command window and confirm the settings. It must be a new window for it to reflect the changes you just made. In the new window enter the following command and press Enter:

    set | more

    The set command will list the current values of all the environment variables and piping (‘|‘) the output through more causes it to display one screen at a time pausing until you hit the space bar to advance to the next screen. Verify the values again.

  • Test your verified setup by entering a phonegap utility command. (NOTE: this assumes you’ve already cloned phonegap-android using git… see Gotcha #5 below). The command below will generate a new project called ‘myproj’.

    droidgap gen myproj

    You shouldn’t get any errors. If you do verify, versions and paths That’s about the best help I can offer, other than the Getting started with Android-PhoneGap in Eclipse docs.

Gotcha #5: Proxy settings may be needed and seem to conflict. Settings for msysgit aren’t obvious, and seem to interfere with Eclipse proxy settings (creating “msysgit proxy misery“). I discovered this one at the workplace yesterday, where using the proxy server is a must.
Solution: The proxy settings for Eclipse are fairly straightforward (eg, use the drop-down menu Window to select Preferences. Then expand the tree control for General and select Network Connections.)

Not-so-obvious are the proxy settings for msysgit, nor is it obvious that they can clash with the Eclipse settings. To set the proxy for msysgit, you use environment variables. I set these using User Environment Variables (see above) and setting the following variables:

HTTP_PROXY=proxyserver.com:portnum
HTTPS_PROXY=proxyserver.com:portnum

Where proxyserver.com is the fully qualified name or IP address of a proxy server and portnum is the active port for said proxy server. After setting those two variables, I was able to successfully clone phonegap-android using this command with the prompt already set to c:\ as the current directory:

git clone https://github.com/phonegap/phonegap-android.git

Unfortunately, I needed to go back, and “un-set” (delete) the User Environment Variables for the proxies in order for Eclipse to work with updates, installs, etc. In hindsight, I might have been able to leave those environment variables in effect and set Eclipse to connect “Natively” or “Directly” without a proxy, instead of removing the variables and using my Eclipse manual proxy settings.

UPDATE:

  1. Errors in Tip about PATH. I left some elements out in the PATH tip above. I updated it and forced a line break for clarity. You may find PhoneGap docs that contradict my tip, but it works well for me as is.
  2. Proxy settings. Earlier today I was able to get Eclipse to work just fine with the HTTP_PROXY environment variables in place and the Eclipse preference for General > Network set to Active Provider “Manual” with proper proxy server address and port values.

Whew. I’m not going to make this even longer. Much of the rest of the installation and usage is relatively well documented elsewhere.

I’ll watch comments for feedback on this lengthy post. A follow-up post will address turning a generated phonegap-android project into an Eclipse project. In the interim, I’ll likely post something shorter about getting phonegap-iphone going in Xcode.

PhoneGap Lessons Learned- Mac edition

In the last week I’ve learned quite a bit about using PhoneGap-Android with Eclipse on Mac and Windows. Earlier this month I spent alot of time using the iUI library with PhoneGap to make stand-alone iPhone apps from HTML. I thought I’d share my experiences. I’ll begin with using the Mac with PhoneGap for Android. Future posts will address Mac set-up of PhoneGap for iPhone, Eclipse set-up, and Windows set-up of PhoneGap for Android.

First lesson— update PhoneGap early and often. Learn to use git, learn how to use PhoneGap utils to update existing projects and check PhoneGap documentation. It has changed dramatically since last March when I first experimented with it, especially on the Eclipse + Android SDK side. I went down quite a few dead-end paths based on old assumptions and some seemingly helpful blog posts I found from last summer. Please apply my lesson and double check the docs if any of my “tips” below don’t seem to work for you.

Second lesson– Make sure the user you are signed in as has administrative permissions. If you’re unsure, launch the Settings application, look in the System category and open the settings panel for Accounts. Make sure the box is checked for “Allow user to administer this computer”. Don’t worry, you can turn it off after you’ve done the setup. As a little security step, I rarely run as Admin on my own computer.

Basic Setup
Git- Your installation will begin by getting git if you don’t already have it. On Mac the easiest way is to download and run the installer from:
https://code.google.com/p/git-osx-installer/

PhoneGap Repositories- Next, I cloned some repositories from the phonegap repository on github to my Mac Home directory. With git already installed this is as easy as starting Terminal.app and immediately entering:

git clone https://github.com/phonegap/phonegap-iphone.git

git clone https://github.com/phonegap/phonegap-android.git

Those two commands will copy down the latest PhoneGap iPhone and Android frameworks, respectively. Note: As a convenience, we’re getting the iPhone repo while we’re at it, even though it won’t be used in this post. Watch for a future post on “PhoneGap for iPhone – Basic Xcode Setup.”

Environment variables for paths- Since Terminal is running, we’ll skip ahead and add some path information to the shell environment. These updates are only needed for the Android and PhoneGap-Android toolchain. Again, in Terminal, enter:

open .profile

In the resulting editor window, add the following lines to the .profile file.

# add Android_Home for Eclipse builds
export ANDROID_HOME=$HOME/android-sdk-mac_86
# add tools directory for shell access to SDK tools
export PATH=$PATH:$ANDROID_HOME/tools

# add PhoneGap bin for shell access to PhoneGap tools
export PATH=$PATH:$HOME/phonegap-android/bin

Save the .profile file. Close the editor. Quit Terminal. [Really do quit Terminal, because that will help ensure the .profile changes are applied when we get to testing things below.

Android SDK for Mac- Download the Android SDK for Mac from here:
http://developer.android.com/sdk/

Unzip the downloaded archive and move the whole android-sdk-mac_86 folder to your home folder. There should now be a folder named android-sdk-mac_86 at the root level of your home folder. [There are more Android SDK setup instructions found at http://developer.android.com/sdk/installing.html if you need them.]

Test your basic PhoneGap setup- We can test the basics now, without even installing Eclipse and the ADT (Android Developer Tools) Plugin or using Xcode.

First we’ll test the PhoneGap Android command tools by creating mysample as a sample project. Open the Terminal again. Enter:

droidgap gen mysample

NOTE: Don’t get fancy and use a different name for testing. I found out the hard way that you’ll get ruby script errors if the name includes a hyphen. I suspect spaces and other special characters may also wreak havoc with PhoneGap ruby scripts.

It will take a minute to do its work. If all worked well, it should have made a new sub-directory named mysample inside of your Home directory. Verify this by looking in Finder or typing ls in Terminal and looking for mysample in the list of files.

Debugging PhoneGap Android command tools- If it didn’t work, then some likely possibilities are that something got copied to the wrong place or an environment variable (a path) was set wrong. Make sure your Home folder contains the following folders:

android-sdk-mac_86
phonegap-android
phonegap-iphone

Check your paths by examining the current value environment variables. To do this, enter the following in Terminal:

set

Scan the output and make sure the line with PATH= includes something like:
/Users/yourUserName/phonegap-android/bin

Edit .profile again or move folders if necessary. Quit Terminal, re-open it and try again. That’s about the best help I can offer, other than the PhoneGap Android docs.

Test your basic Android SDK setup- Now we can try the Android SDK. Again, in Terminal, enter:

android

If all goes well in a few moments you should see a window that looks like the small thumbnail below, and you can continue on to Install Android SDK Packages.

Debugging Android SDK Basic Setup- You should know the drill by now; check the folder structure and names and check the environment variables. In this case the key folder is android-sdk-mac_86 and the corresponding environment variable is ANDROID_HOME which should contain something like:
/Users/yourUserName/android-sdk-mac_86

Install Android SDK Packages- In the Android SDK and AVD Manager Window (shown above), scan the list in the left column and select Available packages. Check the box next to Android Repository and also check the box next to Third party Add-ons.

At this point, I was tempted to be conservative and download the bare minimum. It turns out better if you just downloading everything. That way you can easily publish for a broad range of Android devices by having the most basic and the most current APIs available.

With everything checked, click on the button for Install Selected. It may take awhile.

If you’ve got this far you’ve got all the basics and are ready to proceed to Eclipse or get started with PhoneGap for iPhone with Xcode. Both of those are separate posts though.

If you want to jump ahead, you can make use of the Android Developers Installing the SDK instructions. That will help you with installing Eclipse and the ADT (Android Developer Tools) for Eclipse.

Keep in mind that you have already completed their steps #2 (Downloading SDK) and #4 (Adding Platforms and Other Components).

Quickly Open Directories or Files

Here are a set of “Finder Droplet” utilities that I found very helpful when working with PhoneGap, and lots of other things too. Consider this a follow-up to my previous post on shell commands for Coda and TextMate.

Finder Droplets for Coda, git, TextMate, Xcode, and Terminal
Finder Toolbar showing droplets

Having these utilities in the Finder Toolbar utilities gives quick access in Terminal to any directory I can see from Finder. They also let you easily use a specific editor to open one or more files. This is very handy if the default association isn’t convenient for the task at hand— especially so if there are multiple files involved.

The handiest of these utilities has been OpenTerminal. I am going to describe that second because the Shiny Droplets utilities have much better set-up instructions.

Shiny Droplets
What can I say? They are good. They are open source. The 52 second demo/how-to video explains it all. Apps like Expresso, BBEdit and others are supported as well as my favs– Coda and TextMate. Go get the Shiny Droplets now, watch the video, install and come back for more.

http://blog.shinyfrog.net/2008/06/07/finder-droplets-mac-editors/

Open Terminal
Same concept, with detailed instructions in a PDF instead of a video. I copied Open Terminal to the same folder as Shiny Droplets. Once added to the Toolbar of your Finder window, simply click the Open Terminal icon. Bam! You are there, without doing a bunch of cd ~/Documents/folder/subfolder/sub-subfolder typing. Go get it and be sure to read the PDF.

http://homepage.mac.com/thomasw/OpenTerminal/

Open in Git GUI
Last, but not least is a droplet to open the Git GUI for the current folder in Finder (or the dropped item). You can get it here:
https://code.google.com/p/git-osx-installer/wiki/OpenInGitGui

If you prefer GitX then you might try a similar droplet;
https://code.google.com/p/git-osx-installer/wiki/OpenInGitX

That’s it. Enjoy.