Implementing Notifications


#1

I am working on implementing notifications within the Janitor project and I would like to share some concepts for this that I put together after some time talking to Jan about how they should work.

The design concepts:

When the Janitor receives a notification it will add it to the notifications tab and push a notification to the user’s browser

So the user is able to completely delete notifications (like containers) but also simply dismiss them, meaning they are stored for later access via the filters and search.

Please feel at ease to make suggestion to improve the design and share your visions and workflows you find could benefit from such interactions.


Janitor News #8
#2

Very cool idea! Thanks for sharing these details :slight_smile: Here are a few personal thoughts:

I can’t wait for notifications to work! I believe that they will be really helpful to me (e.g. because I manage all the Janitor projects for now, I’d love to know when an image rebuild has succeeded or failed).

Also, being notified about a code review will be really awesome when we implement sending commits to code review from Cloud9 (I believe we would be the first service to notify users about a code review!)

Since not everyone likes to receive notifications, I think we should have this feature off by default (but anyone could activate it, e.g. from a Settings URL like https://janitor.technology/settings/preferences/ or https://janitor.technology/settings/notifications/ where we could also add options for email notifications etc.)

Managing the “read” state of notifications is pretty hard, e.g. what happens when I read a notification that was pushed to me? Will there still be a red “1” next to the notifications tab, “forcing” me to go read this notification again in the tab? (Personally I think we should either push notifications, or set a red icon, but not both). Also, what happens if we also notify a user via email? The good news is that services like GitHub, Twitter, Facebook etc have already put a lot of effort into getting this right, and we can probably just imitate them.

I’m not sure how valuable it is to Delete or Dismiss notifications, so if it’s complex to implement I suggest we see about this later (e.g. on Twitter, I think you can’t delete notifications, but that’s ok because you clearly see which notifications are new, and then you have an “infinitely scrolling” list with all previous notifications in case you need to find them again). Also I guess a filter search will be hard to get right, so maybe we can also see about this later (and if we do show all the notifications for now, they’ll be pretty easy to find already by simply scrolling or using the browser’s Cmd+F feature).

Nit: In the top bar, we try to keep items ordered alphabetically (and also almost everywhere else in the project and its code). Please move “Notifications” left of “Settings”. :slight_smile:

Thanks again for working on this really cool feature! I believe it’s going to help a lot of people. :smile:


#3

Thanks Jan! That makes sense! Absolutely, the page for controlling this is likely to be in Settings to centralize all the configurations of a user. In the case for reading notifications, perhaps we could stick with the badge with the number of notifications as we will be able to support more browsers. (see here http://caniuse.com/#feat=notifications). As for emails, I have been personally using them with GitHub (ever since you mentioned it to me) and I find them to be send in a reasonable amount of time.

In regards to the page for notifications, that’s a good point. I think I will focus on the above simply with the notifications.

Nit: In the top bar, we try to keep items ordered alphabetically (and also almost everywhere else in the project and its code). Please move “Notifications” left of “Settings”. :slight_smile:

Will do!


#4

In the case for reading notifications, perhaps we could stick with the badge with the number of notifications as we will be able to support more browsers. (see here http://caniuse.com/#feat=notifications).

I think we can do both, but not at the same time (e.g. when a user enables push notifications, maybe we don’t show the red icon?).

Additionally, the red icon can be implemented as a Bootstrap badges: http://getbootstrap.com/components/#badges (there might not be a red badge available by default, but you can easily add a new CSS class to /css/janitor.css, like for example .badge-red{background-color:#d9534f}).

As for emails, I have been personally using them with GitHub (ever since you mentioned it to me) and I find them to be send in a reasonable amount of time.

I also really like email notifications (from GitHub and Twitter). They might be a little more tricky to get right (We need to configure things like DKIM or SPF headers and tweak our DNS somewhat in order not to be marked as “spam” too much. Maybe MailChimp can help with that, since they recently made their “email automation” free of charge).

In regards to the page for notifications, that’s a good point. I think I will focus on the above simply with the notifications.

We can start with very simple things and then make them more elaborate as needed. :slight_smile: Good luck! Please let me know if I can help with the implementation in any way.


#5

Here are a few suggestions and code pointers to get you started:

First, you might want to add a user.notifications object (e.g. with a enabled: true/false property) in the user creation code (and also add a temporary migration code below in order to make sure pre-existing users also have a user.notifications object, e.g. like this).

Then you might want to add a Notifications API to the User API (you can try to imitate the Configurations API). Note: The documentation will “magically” add itself to https://janitor.technology/reference/api/ so you won’t have any work to do for that :smile: (except write good handler titles, descriptions, and at least one example :stuck_out_tongue:).

Then you’ll probably want to add web app templates for the “Notifications” tab, and for the “Notifications” Settings panel, and register these new templates in the following locations:

  • /templates/settings-header.html (by adding a link here to the new Notifications Settings tab)
  • /templates/header.html (by adding a link here to the new Notifications page, e.g. to /notifications/, and maybe only show it if user.notifications.enabled === true?)
  • /lib/routes.js (by adding a new entry in the Settings tabs, and by adding a new Notifications page route, similar to the Data page route)
  • /app.js will simply need to route /notifications/ to the correct Notifications page route, like it’s done for the Data page

And in the Notifications Settings panel, you’ll be able to use your new Notifications User API to toggle user.notifications.enabled, by adding a “fetch async form” like this one.

A good example of a commit that adds most of these new things would be the new Configurations Settings panel (it also does a few more things, like add a /lib/configurations.js server-side module and tweak the client-side fetch JS code, but you don’t need to do that for now).

Please let me know if you have any questions regarding these suggestions and code pointers, or about anything else in this project that could help you achieve your goals with this exciting feature! :smile: Good luck!


#6

I have made some progress in the last couple of days thanks to Jan’s help! :slight_smile: We are almost at the point where you will be able to receive notifications related to your projects.

As a result, I would greatly appreciate some feedback on the way unread notifications should appear in your upcoming notification tabs:

A bottom border:

A left border:

A blue background:

A blue background with bottom-border:

A blue background with left-border:

If you have any suggestions or requests for the way unread notifications should be displayed please write below. Thank you!


#7

Left border. It’s not obvious whether the bottom border is a bottom border or a top border, and the blue background seems overly heavy.


#8

Very cool design! I love it. :slight_smile:

I agree that the orange left border is lightweight and very nice touch!

The blue background suggestion comes from me, because I like how Twitter’s unread notifications have a slightly highlighted background, but I agree that the left border alone looks much nicer and cleaner.

Great work!