Altbee — the alternative Beeminder web interface

Tech
1

I’ve built an alternative web interface for Beeminder—check it out!

The Beeminder web interface is not bad, but I wanted to try out a few ideas for how the interface could work. My overall goal here is to have about the same features as the Android app—it’s not a complete replacement for the Beeminder site, but rather it’s a convenient interface for the most useful day to day functionality (seeing what the status of each of your goals is, adding datapoints, and so forth.)

One thing I’m aiming for here is for this site to be very mobile friendly. The Beeminder website is OK on mobile, but you’d still want to have a native mobile app. Altbee aims to be good enough on mobile that it can be a complete replacement for having the mobile app installed on your phone at all. (It doesn’t do push notifications, though, or at least not yet. So you might still want to have the mobile app for that.)

I’m also aiming for Altbee to be fast. I think I’ve managed to make it be a fair bit snappier in many cases than the official Beeminder web site, even though Altbee has the extra layer of needing to hit the Beeminder API for its data, through careful caching and the like.

Anyway: go check it out and see what you think of it. (And/or go read the source code: it’s completely open source.)

If you’ve got ideas for features to add or ways for it to improve, let me know! I certainly intend to add new features to it over time—including both those features which have equivalents in the official Beeminder web interface and those which are completely original.

15 Likes
2

Seem to have run into a minor bug here.

image
image1233×599 77.4 KB

3 Likes
3

Interesting—Chrome doesn’t seem to like rendering the bullseye when using the SVG graph in an <img> tag. (Firefox seems to be OK with it…)

I’ve switched to using the PNG versions of graphs as a fix for now.

Thanks for reporting this bug!

3 Likes
4

Love this so much!

Minor thing so far, on the main page it’s a little hard to distinguish which goals are which color given the sea of goals I have. Would love it if the whole goal card changed color instead of just the strips above and below the graph.

2 Likes
5

Nicely done! :slight_smile:
i have somewhat similar layout using Stylus & Tampermonkey → Beeminder as task list, Tampermonkey script - #2 by apolyton

3 Likes
6

Holy moly, this is really beautiful and you are amazing.

(I kind of feel like this should be somewhere more prominent than the Tech category, but while it is: Where are you hosting this? How do you like Elixir? How long did this take you to make? My socks are pretty knocked off right now. Still playing with it! Thank you so much for doing this!)

3 Likes
7

Given that the goals are sorted by losedate and thus by color, they’re not overly intermingled, so I’m not so sure it is all that important to have the color be even more prominent on an individual basis.

(Also, the colors that I’m using are very strong colors, suitable for highlights more than for the background of a card as a whole. I could switch it to a weaker color variant, but I kind of like the clarity of the intense colors.)

But maybe there are other things I can do. I’ll have to think about it. Maybe I can experiment with extending the strips to the full horizontal length of the cards, instead of just being around the graphs? Something like that could work.

1 Like
8

I think that has potential.

1 Like
9

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
10

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
11

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.

6 Likes
12

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
13

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
14

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
15

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
16

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
17

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
18

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
19

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

image
image1242×2688 892 KB

2 Likes
20

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