1112346 - EOY: Load 'disruptive' snippet code into snippet service admin

Status: RESOLVED FIXED

(Mozilla Foundation Communications :: Website, task)

Description

[Andrea Wood [:andreawood]]

Once Foundation dev team finalizes code and it is through review, the snippet needs to be loaded into snippet service. (that's this step*) All the steps:

1. Design snippet (normally Sabrina Ng)
2. Build snippet (incl. review) - (could be thecount or gvn)
*3. Implement in snippet service (normally mkelly)
4. Launch into selected Locales (normally frios)
5. Launch metrics tracking (normally adamlofting)

Comment 1

[Osmose [:osmose, :mkelly]]

I'm on PTO all next week (except for the holidays, but, well, they're holidays :P), giorgos might be able to cover if you're expecting a code review or someone to add a template to prod in that timeframe. NEEDINFOing him for his availability. :D

(CCing bensternthal just so he's aware of possible work during a week when most of our team is MIA)

Comment 2

[Giorgos Logiotatidis [:giorgos]]

I'll be available on the 22nd and 23rd, possibly on the 26th if needed. Please needinfo me with requests :)

Comment 3

[Scott [:thecount] Downe]

Attachment: https://github.com/ScottDowne/eoy-snippets/blob/master/simple-snippet/snippet.html

Not sure about the process yet, but this is a disruptive snippet ready for staging.

These are the test values I have been using: https://github.com/ScottDowne/eoy-snippets/blob/master/gulpfile.js#L49-L59

I am happy to answer any questions or concerns.

Comment 4

[Scott [:thecount] Downe]

Attachment: https://github.com/ScottDowne/eoy-snippets/blob/master/simple-snippet/snippet.html

Updated.

Fixed the background image.

There were also changes to the button animation that needed to be made.

Staging link here: https://snippets.allizom.org/show/76/

Comment 5

[Giorgos Logiotatidis [:giorgos]]

Comment on attachment 8540944 [details]
https://github.com/ScottDowne/eoy-snippets/blob/master/simple-snippet/snippet.html

Looks good. I submitted a pull request [0] against your repo with a small change. Please pull request against mozilla/snippets with the final code.

Also is this really needed? https://github.com/ScottDowne/eoy-snippets/blob/master/simple-snippet/snippet.html#L134

[0] https://github.com/ScottDowne/eoy-snippets/pull/5

Comment 6

[Giorgos Logiotatidis [:giorgos]]

- Reviewed template code, did some minor changes (== included snippet-id in keyframes)
- Tested with Foxes down to version 26
- Looks good and works good.
- Updated production template "[Fx26+] Mofo End of Year Donation Chooser" [0] with the latest template code. 

One thing to be aware when choosing a background color:
 - Background color *persists*, i.e. when users reload (F5) the page to get a new snippet, the new snippet will appear with the altered background color. Maybe that's a non-issue because I guess that not so many users reload about:home, but maybe you want to avoid that.


[0] https://snippets.mozilla.com/admin/base/snippettemplate/26/

Comment 7

[Scott [:thecount] Downe]

Yeah, without this line: https://github.com/ScottDowne/eoy-snippets/blob/master/simple-snippet/snippet.html#L134

The bottom menu was transparent and I needed to ensure the background colour didn't show through making the icons hard to read.

Comment 8

[Scott [:thecount] Downe]

About background persisting, it's likely less of an issue because this snippet has 100% traffic in US.

So if you refresh you would get the same snippet anyway.

I'm curious as to why it persists though.

Comment 9

[Osmose [:osmose, :mkelly]]

(In reply to Scott [:thecount] Downe from comment #8)
> About background persisting, it's likely less of an issue because this
> snippet has 100% traffic in US.
> 
> So if you refresh you would get the same snippet anyway.
> 
> I'm curious as to why it persists though.

It persists because snippet code is always injected into the page even if a snippet isn't visible (see https://abouthome-snippets-service.readthedocs.org/en/latest/overview.html for how snippets are loaded). Thus, your CSS for altering the background of the body is always applied.

General workaround for this is to add a class to the body when the show_snippet event is triggered.

Comment 10

[Scott [:thecount] Downe]

Ah, that makes sense.

Yeah, I'll add that and hopefully there is still time to ship it.

Comment 11

[Scott [:thecount] Downe]

https://github.com/ScottDowne/eoy-snippets/pull/6/files

Possible to add that?

Comment 12

[Scott [:thecount] Downe]

Attachment: https://github.com/ScottDowne/eoy-snippets/blob/master/simple-snippet/snippet.html

Just to be safe, I think we should do what Osmose is suggesting with a class on the body for the background image.

This is the diff for readability sake. https://github.com/ScottDowne/eoy-snippets/commit/99d2ab593f57635c4b6942153c3366f17edda6d8

I updated the staging link with those changes: https://snippets.allizom.org/show/76/

Thanks for the guidance with this, it is appreciated!

Comment 13

[Scott [:thecount] Downe]

Created the pull request to mozilla/snippets.

https://github.com/mozilla/snippets/pull/28

I wasn't sure if I should include the changes in comment #12 so I left them out for now.

Comment 14

[Giorgos Logiotatidis [:giorgos]]

Aaand updated production. 

Scott, yes please do include the latest background changes, thnx!

Comment 15

[Scott [:thecount] Downe]

Sweet, thanks so much!

I updated the pull request with the background stuff: https://github.com/mozilla/snippets/pull/28