Skip to content
This repository has been archived by the owner on Jul 5, 2021. It is now read-only.

Feature: Alert bar for IPFS #289

Closed
wants to merge 15 commits into from
Closed

Conversation

pkafei
Copy link

@pkafei pkafei commented Jan 30, 2019

Announcement bar appears 2 hours before the weekly IPFS Weekly Call begins.

Notes:

  • Currently I'm toggling the alert bar using hide in jquery. In hindsight I probably should have used append or prepend in order to implement the toggling feature.

  • In the next version of the toggle bar, I would like the alert bar to turn red 15 minutes before the IPFS Weekly Call begins.

  • Interested in announcing other calls in the alert bar. That being said, not including the IPFS Cluster standups, we have about 9 public calls per week. I'm afraid our audience might suffer alert bar overload if we include an alert bar for every public call.
    @daviddias @olizilla

@pkafei
Copy link
Author

pkafei commented Jan 31, 2019

@ipfs/infra Having trouble figuring out this Jenkins error- not sure what my next steps should be.

@mikeal
Copy link

mikeal commented Feb 11, 2019

Who do we need to loop in to review this?

@mikeal mikeal requested review from daviddias and a team February 11, 2019 19:45
@@ -0,0 +1,16 @@
var $ = require('jquery')
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's not import jquery just to create a pop up

http://youmightnotneedjquery.com/

Copy link
Author

@pkafei pkafei Feb 11, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ya, we’re already using it on two other pages. if someone wants to send a PR to remove it’s use throughout the site, fine, but I don’t see why we would hold up new contributions since it’s not actually adding a dependency.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Jquery wouldn't be my first choice either, but it is already used in ipfs.io site.

Understood. Although I would argue that the best way to default not be the first choice anymore is to move away from it rather than adding it in more places.

@daviddias
Copy link
Contributor

@pkafei I'm wondering how effective this popup banner would be. Did you study the analytics on the webpage to see if this is something that folks have open throughout the entire day or if it is common for folks to have the website open before the call?

A nice page presenting the Working Groups and Calls schedule could have more success as it would be a static resource that people could link to.

@daviddias daviddias requested review from a team and removed request for a team February 11, 2019 20:06
@mikeal
Copy link

mikeal commented Feb 11, 2019

I'm wondering how effective this popup banner would be. Did you study the analytics on the webpage to see if this is something that folks have open throughout the entire day or if it is common for folks to have the website open before the call?

We don’t really need analytics to tell us that people will see a message at the very top of the website. The reason it only appears during certain hours isn’t because we think people have the site up the entire time but because it’s not all that effective to try and get people to participate in the call when it’s nowhere near the time of the call.

The purpose of this bar is to drive participation in the weekly call. Analytics can tell us how many people it will address but the analytics can’t tell us if increasing participation in the call is worth above-the-fold website real estate, that’s a question we have to answer based on our own priorities. We’re working under the assumption that it is a priority, but if it’s not then we should have that discussion.

A nice page presenting the Working Groups and Calls schedule could have more success as it would be a static resource that people could link to.

We should definitely do this, but I don’t see how these are mutually exclusive. It was called out as a strategic goal back in Q4 to drive participation in this call specifically. Adding this to a list of calls for all of our working groups isn’t a great way to achieve that specific goal, although it’s a good idea and we should definitely do it.

If we’re going to lump any effort to drive participation in this call into a goal around participation in all of the calls then why do we have KPI’s and OKR’s associated with this call specifically, which actually pre-date @pkafei even working on this?

var dayOfWeek = new Date().getDay()
var reminder = $('.alert-bar')
var announcement = $('.lh-title').append('<span>The IPFS community call will start at ' + callData.time + '. Join us <a href=' + callData.zoomLink + '>here</a></span>')
if ((startTime - now <= 2 && startTime - now >= 0) && (dayOfWeek === 1)) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dayOfWeek === 1 should be tied to the day property of the data in communityCall.json right? Otherwise changes to the day for a call will still cause this banner to be displayed on Monday.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point. The call for the for seeable future will on Monday, but I really should be using the day property of communityCall.json which is better than just hard coding Monday.

var dayOfWeek = new Date().getDay()
var reminder = $('.alert-bar')
var announcement = $('.lh-title').append('<span>The IPFS community call will start at ' + callData.time + '. Join us <a href=' + callData.zoomLink + '>here</a></span>')
if ((startTime - now <= 2 && startTime - now >= 0) && (dayOfWeek === 1)) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Banner will disappear as soon as the call starts. Should we leave it up for the duration of the call? - maybe encode this information in the communityCall.json.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

HI @alanshaw! Eric here (Proto-noob).

What if the message changed to, "The IPFS community call is now in progress! Join us here." once the call began, so latecomers could join?

Also, i would make the entire "Join us here." phrase a link.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What if the message changed to, "The IPFS community call is now in progress! Join us here." once the call began, so latecomers could join?

I like that suggestion. That being said, the link to landing page will still be the same so that participants will know that they're joining a live call.

js/lib/alert-bar.js Outdated Show resolved Hide resolved
"callName": "IPFS Weekly Call",
"time": "17:00 UTC",
"day": "Monday",
"zoomLink": "https://protocol.zoom.us/j/443621844"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Given that the banner is going to be displayed 2 hours before the call is it better to link them to a page with more info about the call, which has the notes link as well as the zoom link? Otherwise people might be sat in an empty room for 2 hours.

Or link directly to the zoom when the call is happening, but to a "more information" page before?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Given that the banner is going to be displayed 2 hours before the call is it better to link them to a page with more info about the call, which has the notes link as well as the zoom link?Otherwise people might be sat in an empty room for 2 hours.

Yes, it would be better to link people to a "more information" page. Will swap out link for "more information page" ipfs/team-mgmt#549

@daviddias daviddias requested a review from a team February 13, 2019 08:55
@olizilla
Copy link
Collaborator

olizilla commented Feb 13, 2019

In general I am +1 for this change. Minor UI tweaks to do. Threre are a bunch of related changes so I'd be happy to talk it through when you have a moment @pkafei

  • We can simplify the alert bar and improve the vertical alignment of the icon and the text by swapping out flex for plain old vertical-align. The info icon looks a little low relative to the text.
  • Swapping out .lh-title on the span for .lh-copy on the container, so that the same line hight is used for both the icon and the text, and when we view the site on a narrow / mobile screen it is a little more readable when the text wraps.
  • Let's progressively enhance; we can hide the alert bar by default with a style="display:none;" and flip the js logic to only show the alert bar if it's time. Right now JS hides the alert bar if it's not time, so if the js bundle takes a while to load (or js is disabled), the user will see the alert bar regardless of the time.

@ghost ghost assigned pkafei Feb 20, 2019
@ghost ghost added the in progress label Feb 20, 2019
@pkafei
Copy link
Author

pkafei commented Feb 27, 2019

Please review my PR again. @alanshaw @ipfs/wg-gui-team @olizilla

@olizilla
Copy link
Collaborator

Will do. I'm gonna sort out CI right now so we can get a preview URL on this PR, then I'll review.

@@ -0,0 +1,7 @@
{
"callName": "IPFS Weekly Call",
"time": "18:00 UTC",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The weekly call is at 17:00 UTC.

var startTime = parseInt(callData.time, 10)
var dayOfWeek = new Date().getUTCDay()
var reminder = $('.alert-bar')
if ((startTime - now <= 2 && startTime - now >= 0.5) && (dayOfWeek === callData.day)) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you need some tests here, this will still hide the banner while the call is in progress.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Locally the banner still appears while the call is in session on my machine- but will add test.

Copy link
Collaborator

@olizilla olizilla left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some tweaks for the call info page

js/lib/test.js Outdated
var callData = require('./communityCall.json')
var shouldShowBanner = require('./alert-bar').shouldShowBanner

var dayOfWeek = callData.day
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dayOfWeek, startTime, two_hours_before_call and dayOfWeek are no longer used in these tests. Please remove.


## Welcome to the IPFS Weekly Call

Join us every week for the IPFS Weekly Call where we hear from the IPFS Community. We use zoom to host our calls and [this link](https://protocol.zoom.us/j/443621844) will directly bring you into the live video chat.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This call info page should probably say when the call is, in case you find your way to it at some time that the call isnt on.

Before you join there are several points we would like to go over:

1. The IPFS calls are recorded and are put on [Youtube](https://www.youtube.com/playlist?list=PLuhRWgmPaHtSGRSHdU9dbsukHKlihZZAe)
2. Please sign into the [IPFS Weekly Call sheet](https://docs.google.com/document/d/1WHyIZhBo2eEgYXlZ5HLHg6a6ZWTH3tV848sWkYBJjJA/edit#heading=h.hz5t61tdc5r6)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
2. Please sign into the [IPFS Weekly Call sheet](https://docs.google.com/document/d/1WHyIZhBo2eEgYXlZ5HLHg6a6ZWTH3tV848sWkYBJjJA/edit#heading=h.hz5t61tdc5r6)
2. Have a read of the agenda for the call, and add your name as an attendee on the [IPFS Weekly Call document](https://docs.google.com/document/d/1WHyIZhBo2eEgYXlZ5HLHg6a6ZWTH3tV848sWkYBJjJA/edit#heading=h.hz5t61tdc5r6)


1. The IPFS calls are recorded and are put on [Youtube](https://www.youtube.com/playlist?list=PLuhRWgmPaHtSGRSHdU9dbsukHKlihZZAe)
2. Please sign into the [IPFS Weekly Call sheet](https://docs.google.com/document/d/1WHyIZhBo2eEgYXlZ5HLHg6a6ZWTH3tV848sWkYBJjJA/edit#heading=h.hz5t61tdc5r6)

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. We expect all participants to abide by the Code of Conduct.

var startTime = parseInt(callData.time, 10)
var dayOfWeek = new Date().getUTCDay()
var reminder = $('.alert-bar')
if ((startTime - now <= 2 && startTime - now >= parseFloat(-0.5) && (dayOfWeek === callData.day))) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@pkafei the callTime function should use shouldShowBanner to determine if it should show or hide the banner. right now it duplicates the logic, which is risky, as the test will suggest that the logic is correct but we're not testing the function that will actually be run when the user loads the page.

Suggested change
if ((startTime - now <= 2 && startTime - now >= parseFloat(-0.5) && (dayOfWeek === callData.day))) {
if (shouldShowBanner(new Date(), callData.time, callData.day)) {

That also means that callTime no longer needs to declare the now, startTime and dayOfWeek variables.

var startTime = parseInt(startTimeString, 10)
var dayOfWeek = date.getUTCDay()

console.log(now, startTime, dayOfWeek)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's good form to remove all debug logging from code before we ship it. Please delete this line.

@jessicaschilling
Copy link
Contributor

@olizilla -- this is a stale issue but still sounds like a good idea. What do you think -- and might you have time to implement the changes you'd originally requested, in order to ship?

@jessicaschilling
Copy link
Contributor

Closing this issue, since IPFS website has changed in scope/purpose since issue opened. Let's keep this concept in mind as we discuss redeveloping IPFS website as a whole.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Category: Content topic/design-front-end Front-end implementation of UX/UI work topic/docs Documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants