Beeminder Forum

Altbee — the alternative Beeminder web interface

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.

13 Likes

Seem to have run into a minor bug here.

3 Likes

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

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.

3 Likes

Nicely done! :slight_smile:
i have somewhat similar layout using Stylus & Tampermonkey -> Beeminder as task list, Tampermonkey script

3 Likes

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

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

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.

1 Like

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.

4 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.

3 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