Listful.cc Manual
Table of Contents
1. Introduction
Listful is a simple, carefully crafted application for creating and using lists.
Figure 1: The actual To Do list I used once I got a working version
I use Listful every day for my personal to-do lists as well as our family's shared grocery list. Because I share the grocery list with my wife, we both see the same information and can add to it on our own phones when we run out of something.
There are no accounts to manage. Each list is identified by an unguessable ID, which you can share, or not, with whoever you like.
I have made every effort to get Liseful as close to "just right" as I know how. The interface is minimal, with carefully-considered interactions for navigating, entering text, and performing routine actions. It is also intentionally stable, meaning that to the best of my ability, nothing jumps around while you are typing, tapping, or scrolling. Listful is designed to feel calm, predictable, and respectful of your attention and time.
1.1. Support and Feedback
If you have a question about Listful.cc, email support@listful.cc and I will try to answer it in a timely fashion.
I welcome feedback on the application itself as well as this manual. Each paragraph in this document is numbered to make it easy to reference the right section when providing feedback. Please email feedback@listful.cc with your suggestions, comments, and criticisms.
2. Overview
2.1. Index Page
Figure 2: Index Page
This page is for managing your lists. Whenever you open (visit) a list for the first time, the list's ID is saved so the list can be linked from this page. List can be given a name, which is shown here if one has been given. Otherwise, list ID is shown instead.
The next text box allows you to type in a list ID. List IDs are twenty digits, so this text box prefers numeric entry on a mobile device, which should bring up a keyboard that makes it easy to type numbers. As you type, a formatted version of the list ID will show up below the box to make the numbers easier to read.
The last digit of the list ID is a check digit. Similar to the Luhn algorithm used to validate a credit card number, this digit allows the application to check for typos. The formatted List ID will turn green if it is the correct length and passes this check.
2.2. List Page
Figure 3: List Page
This page is for editing and using a list. You can mark or unmark an item by clicking the box on a desktop browser or touching the box or label on a mobile device. Clicking the Add Item button reveals a text box for adding new items to the list.
Note that the Return or Enter key adds the item to the list and clears the text box, which allows you to rapidly add several items quickly. If you want a newline, type a backslash character '\' before pressing Return. The same mechanic works when editing existing list items.
2.2.1. Edit Mode
Editing and deleting individual list items is hidden behind a mode. The Edit Items button changes to this mode. Clicking a list item in this mode allows you to edit the label rather than marking or unmarking the item.
Figure 4: Edit Mode
2.2.2. Reordering Mode
Reordering list items is also a mode. The Reorder button changes to this mode.
Figure 5: Reordering Mode
In this mode, the arrows move list items up and down. When an item moves, the page also scrolls to keep the item under your mouse. On a mobile device, it should appear as though the item you touched stayed still while the list moved around it. This helps to facilitate moving an single item up or down several times in a row to quickly get it to the right location.
2.2.3. Deleting Checked Items
Figure 6: Delete Checked Items Button
The Delete Checked Items Button removes checked items from the list. If only one item is checked, this happens immediately. If two or more items are checked, the application shows a confirmation dialog prior to committing the action.
2.2.4. Status Dot
Figure 7: Status Dot
The Status Dot (upper right-hand corner, when visible) is an indicator for network operations. A successful operation produces a momentarily-visible green dot. A failed operation produces a red dot.
A green dot generally means that any changes you have made have been saved to the server and are available on your other devices and/or whoever else has access to this list. A red dot generally means this is not the case due to a poor network connection, a bug in the code, etc.
3. Roadmap
I intend to keep Listful's feature set as small as possible. It can be difficult to find the right balance between general utility and fit-for-purpose, and people have different tastes as to where the balance point falls.
With that in mind, I believe the current version has enough utility to be useful to a broad audience, but I do not consider it finished. These are some of the upcoming changes I plan to make, roughly in order of priority. I am open to changing both this list and the priority of individual items in resposne to feedback.
3.1. Offline Usage
It is technically feasible to make this work completely offline, saving state to the local device and then syncing with the server as soon as a network connection is available. I live in a somewhat rural area and am frequently without a cellular connection, so this will be a welcome addition.
3.2. Keyboard Shortcuts
There are a minimal set of keyboard shortcuts defined for the application. Enter adds an item, Escape closes the input, etc. I'd like to make the entire application navigable with a keyboard, as I find this to be a pleasureable experience.
3.3. Pasting Multiple Lines
List items can be composed of multiple lines. However, it could be useful to be able to quickly import several items, separated by newlines, by pasting a list directly into the Add Item input. How to handle the UI for this is not immediately obvious to me.
3.4. Read-Only Lists
I'd like to be able to share a read-only list. I don't have a use in mind for this, I just want it. I think it could also be useful to mark a list as read-only if for no other purpose than to declutter the UI when it makes sense to do so.
3.5. Light Mode
I built this application with what most would consider a "dark mode" theme, simply because I prefer it. Tastes differ and tastes change, so I plan to create a dark-text on light-background color scheme and allow switching between the two.
3.6. Specify the Input Type
To open an existing list, the input control has an inputmode value of "numeric." This brings up a ten-key-style keyboard, which I find to be a monumental improvement over the normal Qwerty keyboard when I am attempting to enter a number. I suspect certain types of lists might be lists of numbers. If that were the case, the Add Item input should have the right inputmode.