Senseful Solutions: January 2010

Here's an online tool to quickly create iPhone Web Apps that are stored entirely in the URL so that they can be run offline. It encodes the entire web app in a base 64 encoded data URI. Be warned, it might not work for very large Web Apps, it all depends on the iPhone's URL limit.

Data to encode:

Prefix:
Name (optional):

Instructions:

You need JavaScript enabled for this to work.
If you want it to automatically generate the link for you, enter a name that will be used as the link text.
Once you encoded the Web App, simply set it as the href target of a link on your website so that people with iPhones can click on it (e.g. <a href="data:text/html;charset=utf-8;base64,dGVzdA==">My Web App</a>). Then once they opened up the data: url in Safari, they simply need to press the Add button in Safari and choose to add it to their home screen.

This doesn't work for iOS 4 with a non-black background. Once I get some free time, I'll try to find a solution. Although the image used is indeed transparent, it seems that iOS 4.0 doesn't allow this and forces a black background to be used. If you are using a background other than black, you shouldn't use this. For iOS 4, I created something similar to this: Folder Background Home Screen Icons.

iPhone Blank Icon

Version 1.2 (2010-10-29)

Examples:

Features:

Completely invisible icon (pure black icon, no text).
Doesn't open up Safari if you accidentally click the black icon.
Has a link which links back to this page in case you want to add more blank icons.
Uses a data: url so that if you are in airplane mode, you can still see the details for the "web app" (e.g. name and version number).
Doesn't require jail breaking your iPhone.
Completely free, no ads.

Instructions:

Ensure you have a black background on your device. (For more information, see the comment at top of this post.)
Open up this page in Safari on your iPhone. (You can simply type http://tinyurl.com/blankicon instead of the full URL.)
Click the iPhone Blank Icon link (in blue) at the top of this post.
Press the plus (+) button.
Press Add to Home Screen.
Press Add.
Press and hold any icon on your home screen to position the blank icon wherever you would like.

Tips:

Add as many blank icons as needed by repeating the steps above.
When you no longer need a blank icon, simply remove it by pressing and holding the icons and clicking the x on top of the black icon.
To quickly add additional place holder icons, tap an existing one on your home screen, and click the link contained inside. It will link you back to this page which has all the instructions.
If you don't see Add to Home Screen in step 4, it's because you have used up all the space for icons on your home screens. You must delete icons in order to add additional ones.
If you would rather see the blank icons, you could give them a subtle name such as "." or "•" right before step 5. By default it uses a space character so it won't show up on your home screen.
After step 5, you won't see the icon, but it's there, just press and hold on any icon and you will see all blank icons as well.

What can this be used for?

Keep icons grouped by categories: Let's say you have a page dedicated to utilities and you have 3 different calculators (e.g. standard calculator, graphing calculator, tipping calculator), if you want to keep these icons on the first row, you could simply add a blank icon at the end of the row which will cause all the rest of the icons to start at the second row.
Position icons precisely where you want them: The iPhone does not allow you to place icons wherever you want (i.e. free form placement), as a workaround, you can use blank icons to position apps exactly where you want them. If most of the time you hold your phone with your right hand, it is easiest to reach icons on the bottom right of the home screen, so you could place your most used icons on the bottom right of every page, without needing to add additional apps on each page. You could, for example, have your Settings application on the bottom right corner of your home screen.
Keep icons in the same place: I remember reading somewhere (can't find the link) that people tend to remember where an icon is located and it's much faster than searching for the icon's image to find what you need. So let's say you have had an app in a certain location on a page for a few months, it's very likely that you know exactly where the icon is located even without looking at your home screen. Now let's say you want to delete an app that comes before it on the same page. If you were to delete this app, you will be modifying the location of up to 15 additional apps (assuming a full screen and you delete the first one). Instead of having to remember the new locations of all these icons, you could use this blank icon as a placeholder to keep all the apps where they originally were. Once you find a new app to install, you can replace this placeholder with the new app and everything will have remained in it's place.
Preventing a screen from collapsing: Say you want to have games on your 11th screen separated by all the other screens by several empty pages. If you try to do this by saving an empty page, the empty page will collapse after you finish positioning your icons. Empty pages can be achieved by placing a single blank icon on the page.

10/29/2010:
- Fixed a bug that didn't allow a blank title to be used, thanks @Omnifico.
1/7/2010:
- Added instructions on the blank icon page.
- Uses a transparent icon instead of a black icon in case the SDK changes to support these (looks exactly the same right now).

Senseful Solutions

Friday, January 29, 2010

Show File Type Bookmarklet

Thursday, January 14, 2010

Color Generator (Hue, Saturation, Brightness variations)

Sunday, January 10, 2010

iPhone Offline Web App Creator (Data URI Base64 Encoder)

Wednesday, January 6, 2010

iPhone Blank Home Screen Icon

Saturday, January 2, 2010

Show All Regex Matches

Results: