Altbee — the alternative Beeminder web interface

I think that has potential.

1 Like

Wondering… what about not showing the graph thumbs at all? Personally I don’t really feel like they give me that much value, usually just add clutter.

2 Likes

Click on a thumbnail, and it expands, lightbox-style. This gives you a quick and easy way to take a closer look at a goal’s graph, while remaining on the home page. I kind of like this feature, and while the thumbnails themselves are a bit small to be really useful in their own right, the fact that they serve as a button that opens this view of the graph makes them quite useful indeed.

1 Like

Thanks :blush:

On my server. It’s a long-help belief of mine that everyone should have their own cloud server as their third personal device, along with a (desktop or laptop) computer and a smartphone. A $5/month VPS on Digital Ocean or the like works out to about the same cost as a $180 smartphone which you replace every three years—which happens to be more or less my schedule for smartphones.

And a cloud server is at least as useful as a smartphone. There’s so much you can do with it: most of all, there are tons of services that have webhooks you can receive and hook into, you can host you own self-hosted versions of all sorts of software, and yes, you can also host things there. It lowers the barrier to spinning up a new side project like this one, and that itself is worth it for me.

More than that, it serves as like a super-IFTTT platform: I like the concept of IFTTT, but it’s inc readably limiting. Having something that’s just like IFTTT, except I get to write code (actual computer code, in the programming language of my choice) to control exactly what happens in response to each event is awesome. IFTTT is lego bricks which fit together, which can be fine, I guess, but it’s nothing like a full-scale programming language. If you enjoy IFTTT (and are a bit of a control freak), then you can see how doing those integrations on your own server is even awesomer.

(That said, I do see how it might be somewhat inaccessible for people who either do not know how to program or are less comfortable with it. IFTTT has a place in the world too, it’s just that I personally enjoy the tighter control and wider possibilities of doing it myself. There are also tools that are in between—Sandstorm feels like it’s the kind of thing that should be more popular, allowing even “ordinary people” (as it were) to run their own personal servers without having to be programmers or write any code (unless they want to.))

I’m currently using a $5/month Digital Ocean droplet for all this, but that’s mostly because they gave me some free credit. I’ve also used Hetzner in the past, and they’re great too.

If I didn’t have my personal server, I guess I’d have put it on Heroku or something. But given that I’ve got it, it’s really easy just to throw all my side-project webapps like this one up on it.

Elixir is quite nice. The Phoenix web framework (in Elixir) is awesome. I strongly recommend it. It’s by far the best choice in my opinion for anyone who wants to make a web app today.

According to the commit history, the first commit was on August 21st. I probably spent a handful of hours per week working on it as a side project between then and now.

:blush:, again.

5 Likes

I thought I might mention a few features that might be easy to miss:

  1. Hit / on the home page to focus the search box—and Enter after typing your filter to go to the first filtered goal.

  2. The mini graphs on the home page expand as lightboxes when you click on them: you can take a quick glance at where a goal is at without leaving the home page.

  3. The search box filters by more than you might think—not just the goal’s slug, but also the goal’s description, units, and current color. You want to focus on your goals that are in the red? Just search red!

5 Likes

One major thing missing from Altbee—tags! I really wish there was access to tags via the API: at the very least, it would mean that you could filter based on tags using Altbee’s filter box.

Is there a chance we could get an array of tags added as a field on the goal resource in the API? This is a small addition that would make a quite big difference, at least to me. The filter box in my browser extension can filter based on tags, which turns out to be really useful. But that’s only possible because tags are included as a HTML attribute on goals. This is something the official Beeminder site can do for itself—but Altbee can’t replicate it without a tags field in the API.

5 Likes

Altbee works on my phone in Flynx! That’s an open-in-background read-on-an-overlay browser so I wasn’t sure if Altbee would work well but it looks great! I’m very happy because I like to see how much each goal needs to get it from orange to blue or blue to green, and the Beeminder Android app doesn’t show that whereas Altbee does.

Thank you @zzq :smile:

3 Likes

I have to say, I’m loving the snappy interface! It’s replaced Beeminder iOS for me on Mobile. I only wish it was a PWA or something of the sorts so that it opened like an app on mobile devices, instead of in Safari. Add me to the chorus!

3 Likes

It is pretty amazing, one thing that is missing for me is that “0 days” is shown for something derailing in 5 minutes and in 10 hours.

3 Likes

Good point. I’ll set this up sometime soon.

Yeah, the level of aggregation here is the day. (That’s what the Beeminder API returns as the limsum, though I suppose I could do a more precise calculation myself.) I personally have the same deadline on most or all of my goals, and that deadline is set to 3 in the morning, when I am fast asleep. Thus, the number of hours or minutes left doesn’t really matter at all: I just have to get it out of the red by the end of the day.

But that’s not the only way to use Beeminder, and I can see how you or others would like to have the derailment time visible.

One thing I absolutely won’t do is animate the time to derailment ticking down. That motion on the page pulls the eye to it, which draws undue focus to it as opposed to the rest of the page.

Yeah, Altbee is a somewhat opinionated interface. I have the luxury of making it opinionated, because anyone who doesn’t like it can easily just continue to use the official Beeminder interface. So this allows me to make it clean and minimalistic, and anything missing can easily be found on the official Beeminder site (which is prominently linked.)

3 Likes

Done! Let me know if you have any problems with it; I haven’t tested on Safari or iOS because I don’t use them, but it should work there too.

I’ve also finally squashed the last remnants of this bug; turns out that browsers don’t always honor svg sub-images, such as that bullseye.

In a sense, it’s half a bug on Beeminder’s end, in that they generate SVGs which aren’t rendered well by browsers in <img> tags. (It’s also half a browser bug, but because this seems to be universal over browsers, I hesitate to blame them.) The way I’ve fixed it is by rewriting the SVGs to use data: urls for these subresources. It’s a bit of a hack for me to be rewriting SVGs like this with a regex, but it works. Ideally, Beeminder could use data: URLs in the SVGs in the first place, and then the SVG graphs would work well in browsers without any post-processing being necessary.

EDIT: to clarify, the SVGs Beeminder generates work find in <object> tags in browsers, just not in <img> tags. Beeminder itself users <object> tags, which is why the SVG graphs work just fine on the Beeminder site.

2 Likes

Working on iOS! The icon on iOS version isn’t present, however.

2 Likes

We had another issue with data: URLs for SVGs. Rarely but reproducibly, some browsers had issues loading them, and the browser event that indicated that the loading had failed didn’t fire.

There’s actually an additional, newer “load issue” event we need to add a handler for. It’s possible that would cover the data: loading issue as well.

2 Likes

Additional potential usability change - double tapping zooms by default on Safari iOS. I’ve read this can be disabled? It makes tapping to input data points clunky, as the screen zooms in when you tap twice to input data, and you have to zoom out to resume inputting data.

Here’s a video of this in action.

https://photos.app.goo.gl/R2UrBaJfkVr1aay9A

1 Like

Wow, that’s crazy. It failed to load the bullseye image (and so forth) from a data: url? That’s seriously broken, especially if it then didn’t even fire an error event for the failure. (Could it be that the length of the data URL exceeded some sort of URL-length limit? I know that can be a problem with data: urls in some browsers, such as Opera. But even so—the bullseye image isn’t that large. Even base64 encoded, it should easily fit in under that limit.)

Apparently, this can be prevented by adding a touch-action: manipulation CSS rule. I’ve added it, let’s see if this works.

Bah. Apparently, instead of taking the icon from the webmanifest like it should, Safari demands that a separate apple-touch-icon be given. Very well then, done.

1 Like

Both issues fixed!

2 Likes

I’ve been using this since you first posted and really like it. Thanks! I just have a UI request.

When you click the graph from the main page you get a zoomed in graph, but there is no way to get from that to the data entry page, could there be?

I find I click on the graph intending to click through to enter data, forgetting everytime that I need to click elsewhere on the goal box to do that, and there is no way to get to the data entry page without going backwards.

3 Likes

Good idea—I’ve now added such a link.

3 Likes

Hello,

Not really a bug but an aesthetic thing - iOS turns the background of PNG logos to black, which would be fine if it couldn’t decide between the two while app switching, video shown below. Perhaps having the iOS icon be solid white would solve those two aesthetic issues? (iOS not liking transparencies/ defaulting to black background looking a bit naff?)

https://photos.app.goo.gl/YJfwwAwzsfjKTi8r7

Thanks.

Yeah, it looks like Apple is very much not in favor of transparencies in app icons. I’ve done as you’ve asked, and made a sold-white-background version of the icon, just for Apple.

You may need to remove the Altbee icon and re-add it (or something like that) to see the new white-backgrounded iOS icon, but it should be there.

(It rubs me a bit the wrong way to do things specially just for Apple (as opposed to building things according to web standards, and leaving the browsers to render things accordingly.) But I guess this isn’t so bad, all things considered.)

Oh, and by the way: thanks for the suggestions and comments on Altbee. It helps a lot, and it’s always gratifying to see other people using and enjoying the thing I built.

4 Likes