Peterbe.com

tl;dr; Up until recently, when you started to type a new entry in your That's Groce shopping list, the suggestions that would appear weren't sorted intelligently. Now they are. They're sorted by popularity.

The whole point with the suggestions that appear is to make it easier for you to not have to type the rest. The first factor that decides which should appear is simply based on what you've typed so far. If you started typing ch we can suggest:

• Cherry tomatoes
• Chocolate chips
• Mini chocolate chips
• Rainbow chard
• Goat cheese
• Chickpeas
• etc.

They all contain ch in some form (starting of words only). But space is limited and you can't show every suggestion. So, if you're going to cap it to only show, say, 4 suggestions; which ones should you show first?
I think the solution is to do it by frequency. I.e. items you often put onto the list.

How to calculate the frequency

The way That's Groce now does it is that it knows the exact times a certain item was added to the list. It then takes that list and applies the following algorithm:

For each item...

1. Discard the dates older than 3 months
2. Discard any duplicates from clusters (e.g. you accidentally added it and removed it and added it again within minutes)
3. Calculate the distance (in seconds) between each add
4. From the last 4 times it was added, take the median value of the distance between

So the frequency becomes a number of seconds. It should feel somewhat realistic. In my family, it actually checks out. We buy bananas every week but sometimes slightly more often than that and in our case, the number comes to ~6 days.

The results

Before sorting by popularity

After sorting by popularity

Great! The chances of appreciating and picking one of the suggestions is greater if it's more likely to be what you were looking for. And things that have been added frequently in the past are more likely to be added again.

How to debug this

There's now a new page called the "Popularity contest". You get to it from the "List options" button in the upper right-hand corner. On its own, it's fairly "useless" because it just lists them. But it's nice to get a feeling for what your family most frequently add to the list. A lot more can probably be done to this page but for now, it really helps to back up the understanding of how the suggestions are sorted when you're adding new entries.

If you look carefully at my screenshot here you'll notice two little bugs. There are actually two different entries for "Lemon 🍋" and that was from the early days when that could happen.
Also, another bug is that there's one entry called "Bananas" and one called "Bananas 🍌" which is also something that's being fixed in the latest release. My own family's list predates those fixes.

Hope it helps!

tl;dr That's Groce! is: A mobile web app to help families do grocery shopping and meal planning. Developed out of necessity by a family (Peter and Ashley) and used daily in their home.

Hopefully, the About page explains what it does.

Screenshot of a sample list

The backstory

We used to use Wunderlist, but that stopped working. Next, we tried Cozi and that worked for a while but it was buggy and annoying in so many ways. Finally, we gave up and decided to build our own. Exactly how we need it to be, as efficient as possible.

We also tried a couple of regular to-do list apps where you can have shared accounts but we wanted something perfectly tailored towards the specific needs of family grocery shopping (and meal planning). That's how That's Groce! was born.

The killer features

The about page does a good job of listing the killer features but let's emphasize it one more time.

• Free and simple.
• Is really smart about suggestions and auto-complete for speedy entry.
• Works offline (our usual grocery store has no reception unless you brave onto their WiFi).
• Is real-time, so every other device updates immediately as you update or add something on your device.
• Shared list; you can have your own list but you can invite co-owners.
• You can sort your grocery list in the same order you usually walk through your grocery store.

It's not an app store app

You won't find it on the Apple App store. It's a web app that's been tailored to work well in mobile web browsers (iOS Safari) and you can use the "Add to Home screen" so it looks and acts like a regular app.
It would be nice to try to make it a regular native mobile app but that takes significant time which is hard to find but certainly something to aspire to if it can be done in a nice way.

"Really smart about suggestions"

What does that killer feature mean? (At the time of writing (Oct 2020), it isn't launched yet but the pieces are coming together.) Are there certain stables you buy recurringly? Like milk or bananas or Cheerios. If the app can start to see a pattern of commonly added items, it can suggest it immediately so when you're making your list on Monday morning, you just need to tap to add those.

Another important thing is that as you type, it can suggest many things based on the first or couple of characters you type in, but you can't suggest every single possible word so which one should you suggest first?
The way That's Groce! works is that it learns based on the number of times and how recently you add something to your list. As of today, look what happens when I type a on my list:

When I type a it suggests things that start with "A" but based on frequency.

The more you use it, the better the suggestions get.

Also, to get you started, over 100 items are preloaded as good suggestions but that's just to get you up and running. Once your family starts to use it, your own suggestions get better and better over time.

"Same order you usually walk through your grocery store"

This was important to us because we found we walk through the aisles in pretty much the same way. Every time. When you walk in you have your produce (veggies first, then fruit, then salad stuff) on the right. Then baked goods and deli. Then meats and alcohol. Etc. So if you can group your items based on these descriptions you can be really efficient with your list and it becomes a lot easier to cross off sections of the store and not have to scroll up and down or having to walk back to pick up that pizza dough all the way back at the deli section.

For this to work, you need to type in groups for your items. But you can call them whatever you like. If you want to type "Aisle 1", "Aisle 2", "Dairy stuff" you can. It's all up to you. Keep in mind that it might feel like a bit of up-front work at first, and it is, but your list is learning so you essentially only have to do it once.

Don't be a slave to your list!

If you do decide to try it, keep one thing in mind: You're in control. You don't need to type in perfect descriptions, amounts, groups, and quantities. If you don't know how to spell "bee-ar-naise sauce", don't worry about it. It's your list. You can type whatever you want or need. A lot of to-do lists invite you with complex options to organize the hell out of your list items. Don't do that. Think of That's Groce! as a fridge post-it note that you and your partner keep in their pocket that automatically synchronizes.

You can help

We built this for ourselves but it's built in a way that any family can use it and hopefully also be better organized. But once you sign in you can submit feedback for suggestions. And if you're into coding, the whole app is Open Source so it's fairly easy to modify the code or even host it yourself if you wanted to: https://github.com/peterbe/groce/

Also, if you do try it and like it, please consider going to the Share the ❤️ page and, you know, share it with friends. Much appreciated!

<datalist> is an underrated HTML API. It's basically a native autocomplete widget that requires 0 JavaScript. What I didn't know is how great it is on mobile devices. Especially the iOS Safari platform which is, to be honest, the only mobile device I have.

What's cool about it is that it's easy to implement, from a developer's point-of-view. But most importantly, it works great for users. The problem usually on mobile devices and autocomplete is that it's hard to find a good spot to display the suggestions. Most autocomplete widgets are a styled form of <div class="results"><ul><li>Suggestion 1</li><li>Suggestion 2</li></ul></div> that usually follows the <input> element. Usually, this simply boils down to screen height real estate. Oftentimes you want to display so much more rich stuff in the autocomplete results but it's hard to fit in a nice list of results between the <input> and the native keyboard display. For example, on this page ...

Note how the search results get hidden underneath the keyboard.

Demo

The cool thing about <datalist> is that gets embedded in the native mobile keyboard in a sense. But what's extra cool is that the browser will do an OK job of filtering all the options for you, so that you, as a developer, just need to supply all options and the browser will take care of the rest.

I put together a dead-simple app here: https://cnfyl.csb.app/ (source here) which looks like this on iOS:

Caveats

The space that the keyboard now populates with suggestions is usually reserved for helping you autocomplete regular words. It still does if you start typing a word that isn't an option. So arguably, the <datalist> options are primarily helping you when it's very likely that the user will type one of the suggestions.

The matching isn't great in my opinion. If you type "ea" it will match "Peaches" but I find it extremely unlikely that that's helping users. (What do you think?) If you've started typing "ea" if there's no match called "Each" or "North East" then it's probably better with no match at all.

Mind you, check out this hack (source here) which takes control of the <option> tags inside the <datalist> by having an event listener on the input. So if the input is "ea" it only matches expressions that are left-word-delimited and discard the rest.

Default/Native filtering

Custom filtering

Conclusion

It is without a doubt the simplest autocomplete functionality you can buy. I would buy it again.

Perhaps it's not right for every application. Perhaps it's important to be able to include images in your autocomplete suggestions. Either way, the best thing to do is to park this in the back of your mind till next time you're up against the need for some sort of assisted search or choice. Especially if you predict you'll have a lot of users on mobile devices.

Ever since I blogged about losing my mobile phone about 25 people have emailed personally (mainly for India) asking me if I can help them find their phone or block it (no, I'm not joking). Clearly they think my personal website gives the impression that I am able to do this. Either that or they're neither reading nor looking at what this site offers. Right, so I just received this:

Hi ,
     I was at yoga yesterday at the lochend community center in edinburgh with  
my friend samantha,my friends mum doreen and her son and 2 cleaners.Before yoga 
i had put my phone next to my friends phone on top of a cupboard.Ater yoga i 
took my phone and put it in my pocket,me and my friend and my friends mum's son 
all went through int oa little room and played hide and seek in the dark.A 
little while later about 20 mins i realized that my phone was not in my pocket 
:(. i only got it for christmas this year :O

Everyone looked high and low but couldn't find it.
What shall i do ?
Can you replace it with a new one?

Email me back on Dancingdizzy13@aol.com

Please hurry !!!! x

So, if anybody has seen a mobile somewhere in the Scotland area that belongs to Dancingdizzy13 then let me know. Perhaps I can replace it.

UPDATE

You'd think by writing this it'd put off people from contacting me about lost mobile phones but this arrived a few seconds ago:

my mobile phone NOKIA N73 was stolen.how to find my mobile phone?please help me
Imeino:353641013194935
Name:Yuvraj.D.Sisodiya
Contact no:09879531575,09725041575
  i am live in india(gujarat)  pls sent me your mobile no.pls quickly your email.

UPDATE 2

It doesn't stop. Today's harvest of stupidity:

Subject: my nokia mobile 2310 thefted

Name:p. vishnu vardhan babu
adress:6-8-9,ravindranagar,nalgonda,a.p,india.
mobile no:9966519774
IMEI NO.:355532010272527
missed date:22/2/08
model:2310 nokia

I've been using ZYB for a couple of days now. The reason is that since I lost my Palm Treo 650 I've had to use a Sony Ericsson i810w as a replacement which means I can't import my old contacts from Palm Desktop.

ZYB does two things: sync your contacts and sync your calendar between the zyb web app and your phone.

They support loads of different/popular phones (sadly not the Palm Treo) and if your phone is supported you download a little Java app that deals with the synchronization. Now I can add/edit/remove contacts and calendar events using the ZYB web app which is much more convenient than the tiny screen tiny keyboard phone.

Do you love Emacs (or Jed) and you have a Palm PDA or a Treo 650 or something else cool that runs Palm OS; then you're in luck: install pssh

pssh is a SSH client for Palm OS that makes it possible to log in to a server running a SSH daemon and obviously the server will have Emacs.

Haven't had the time to install it myself yet but I will I hope. The only problem for me is that I don't have a WiFi card for my Treo so I'll have to try this stuff via GPRS which sucks.

Finally I got my phone working. This time it's a Sony-Ericsson T610.

Fortunately I get to keep my old number but I've lost all my contacts so I probably don't have your number anymore, so please text me and I'll be able to save it to my new baby-fresh phone book.

I haven't explored the phone very much yet but actually I haven't been able to figure out how to send text messages. When I click the Messaging menu item and then select Text I get three options: Inbox, Options, SMS Memory. Inbox can't be pressed because there's nothing in there. When I pressed Options nothing happens and it seems to stall a little bit. SMS Memory just shows how much space I have left on the memory.

Today as I was lying in Regents Park when two young girls approached me and my friend pretending to sell something when in fact they just distracted me from protecting my mobile phone which I had bluntly left open. As soon as they left and we check that nothing was stolen I realised that they had stole my mobile phone. I started running after them but very near from where we were there was a road crossing and from there they would have been able to run any direction so it would be impossible for me to catch them.

I have now reported it to the police and I will now shortly phone Orange to render the phone useless and claim my insurance. Hopefully I'll get a new phone from the insurance company but I'm not sure that I can keep the old number. So for a little while now I won't be reachable on my mobile number. Until then use: mail_AT_peterbe_dot_com

Today I finally got the phone I wanted. The Nokia 7250i. My old Nokia 8210 has been broken for a while so I haven't been able to talk to people. Only to send messages.

I decided to get a contract phone. So now I'm stuck with Orange for 12 months. However, in the insurance plan I bought into, there's an option to opt-out of the contract after 3 months completely free! I bet there's a catch to that that I have missed because otherwise I would be able to get a free phone and without be stuck to the contract for another 9 months.

My first impression with this phone is that it's clear and crisp. Got a lovely bright screen and easy to use keypad. Some of the buttons, like the 4-directional pointer, were too small for my big fingers. Hopefully I will grow into it and get better precision.

It's got a built-in camera but I don't have an infrared port on my computers to receive the images. Where can I buy an external infrared port or other USB simple device to connect the phone with my PC?

Another nuisance is that there is no predictive text in Swedish! Gahh!! Every second message I send is in Swedish. Does anybody out there know how I can get a Swedish dictionary onto the phone?

The number is the same as before. However, to make that transfer cost me £29.99!! Why? They should be happy that I don't use up another number and that I stay with Orange. Bad Orange!