Keyboard shortcuts

We're ramping up our accessibility features and enhancing the user experience by adding keyboard shortcuts, beginning with the simple yet crucial 'Escape' key function to close modals. More keyboard shortcuts are in the pipeline, such as ones for creating a new task, opening settings, navigating through the task list, and opening selected tasks. This feature doesn't only boost accessibility but is also tailored for those desktop users who prefer keeping their fingers on the keyboard, sparing the use of mouse or trackpad.

In parallel to these user interface enhancements, we're also developing a Command Line Interface (CLI) tool for our API. This tool will include a series of keyboard shortcuts to help users create, edit, search, and organize tasks, task lists, templates, and more. Specifically targeted towards terminal users, the CLI tool will offer a speedy and efficient way to manage tasks. Not only does this tool provide practical benefits, it also showcases the versatility of our API. Personally, it's an exciting project as it's the first time I'm delving into the creation of a comprehensive CLI tool.

Svelte Derived Stores

Harnessing the capabilities of Svelte derived stores has proved to be a powerful strategy for grouping and filtering tasks. We upload all tasks and utilize a derived store to assemble them into groups, incorporate placeholders, and arrange them accordingly. A separate derived store is employed to filter the items according to the search terms, all before the grouping process takes place. This streamlined operation happens within the store itself, and the UI effortlessly adapts to these changes. For optimized performance and rapid loading, all task items are saved in local storage.

Some filtering still takes place within the database, but we're considering phasing it out. Naturally, security and permission filtering will remain at the database level. Presently, we retrieve all items for a user based on permissions and status. The search function is client-side, operating via a derived store. We are contemplating moving status filtering to the client-side as well. The remaining database-level filtering that seems viable might be a date range covering the last and next 12 months. To access items from more than 12 months ago, an archive view could be introduced. The exact future range is undecided, as the number of future-scheduled items is uncertain. Therefore, the approach might focus on limiting the past items delivered to the client for standard planning.

Even a 12-month limit on past items could present performance challenges if the volume of items is substantial. An alternative could be reducing this timeframe to 6 or even 3 months. This concern mainly applies to completed or canceled items that can accumulate over time. In addition, repeating items need to be manufactured in our derived store, and if these are daily repeats, a shorter 3-month span might be more manageable.

A temporary solution might involve adding month-based groupings. This would mean that after the 'last month', users would see groupings named by months going back as far as needed.

Ultimately, derived stores have proven to be a valuable asset. We aim to extend their use across a broader range of filtering and sorting applications, such as status filtering, intra-group priority setting, implementing ranking strategies (which will eventually replace date ranges), and adding more search term sources.

Date grouped list items

Here's what we've been up to: we thought it'd be a good idea to sort tasks by date. So, we've set up categories like Future, Next Month, Next Week, Tomorrow, Today, Yesterday, Last Week, Last Month, and Past. This way, it's easier for users to handle their tasks and it doesn't get too detailed. To keep things clear, each group has a sticky header that hangs out at the top of the list as you scroll, until the next group comes along.

Now, pairing up these date groupings with sticky headers wasn't exactly a walk in the park, given that we're using a virtual list. But we decided to make peace with some inefficiencies when a date group has a whole bunch of items, rather than overhauling the virtual list control.

One key move was placing the sticky headers inside a specific element. This reduced the workload for the browser and eliminated any lag, especially on mobile devices. With the header inside a relative container, it moves smoothly up to its sticky position, then scrolls up and off the screen with its related items, and we don't even have to mess with scroll events.

We've also added a placeholder for the 'Today' group. It's always there, even if there are no tasks. We thought it would be good to let users know when they don't have any tasks for today, but without messing with the overall look of the groups.

And just a heads up: we're about to add an 'Add task' button on the headings. Click it, and you can add a task with the date preset to the closest date in that range. Also, if you click on a heading, it and its tasks jump to the top of the list, no matter where they were before.

Columns

Working with SvelteKit is a pretty sweet deal, especially thanks to its simplicity in handling reactivity. All you need is a $: statement, and you're good to roll. One of the recent upgrades in Tizli is adding two columns for the desktop view in the planning section, which really helps us utilize the screen space better. It determines the layout by measuring if the device or screen width is larger than a typical mobile device with its menu tucked away. If it is, you get a single column; if it's smaller, it switches to a two-column layout.

The decision about whether to hide or display the left navigation menu is also based on the screen width, using the same responsive targets as when deciding on the column layout. Even though there might be a few different iterations of this approach, once you get your hands on it, everything falls into place and it just feels intuitive and easy to use.

Building in the open is all the rage

In honor of this I'll just state the obvious, Tizli is a todo list app. There I said it. It's a tutorial gone way too far. Just kidding, that's what it is now but of course there's a lot more to it and a lot more to come.

First things first, access. A great user experience is the key to any kind of service application. Getting access is the first part of any service experience. It has been called onboarding for a while now. I think that comes from the airline industry but maybe originally from trains or ships? An interesting question but not one I'm looking to answer today. The main idea is that you want people to have a good experience as the join. Tizli isn't as the stage of bells and whistles yet, we're just focused on error free registration and guest account creation (more about that later).

Today you can register to join our waitlist. You'll be told you need to verify your email address and you'll get an email with a verification link. Clicking that link will verify your email address and you'll be redirected to the login page. You can then login and you'll be redirected to a waitlist notice page. That's it. That's all you can do right now. But it's a start.

As soon as we open up access you'll be able to start working with tasks, tasklists and access tokens.

You can read more about our current plans in the investor deck