Move featured chapter quotes from Jinja2 template to JSON file #1103

tunetheweb · 2020-07-26T06:51:03Z

This PR moves the featured chapter quotes to JSON which has several advantages:

Allows dynamically changing the quote via JavaScript - currently the quote is randomised server side, which means it is cached for 3 hours and refreshing the page, does not show a different quote. That is fixed in this PR. Have left server-side randomisation in place too for those who don't have JavaScript.
Reduces the amount of repeated template code in each language and consolidates it into the core base/2019/index.html template
Allows easier generation of the quotes from the chapters as discussed in Callout headlines to increase interest #1016 (comment)
Removes need of an additional base_featured_quotes.html EJS template to do that generation.
Allows easier possibility of other quotes in a similar fashion as discussed in Add contributor section to 2020 landing page #1083 (comment)

src/templates/base/2019/index.html

src/main.py

SaptakS

I notice that the .json files don't have a EOF line

tunetheweb · 2020-07-31T18:38:31Z

I notice that the .json files don't have a EOF line

Fixed!

src/templates/en/2019/featured_chapters.json

SaptakS

Looks good to me code wise and functionality wise. Not fully sure if I am missing something in regression terms.

tunetheweb · 2020-07-31T19:16:36Z

Thanks for the review @SaptakS ! I’m pretty confident in regression issues.

@rviscomi wouldn’t mind you casting your eye over this if you have the time as a bit of a change in direction. And I feel the JavaScript is a bit verbose and you always have better ways to write this to look neater! For context this is setup for #1104

rviscomi · 2020-08-01T18:11:35Z

Will do. I plan to get to this in a few days if there's no hurry.

rviscomi · 2020-08-09T16:19:42Z

src/templates/en/2019/featured_chapters.json

+    "stat_1": "89%",
+    "stat_label_1": "Sites with more third-party code than first-party",
+    "stat_2": "83%",
+    "stat_label_2": "Sites that use jQuery",
+    "stat_3": "4.6%",
+    "stat_label_3": "Home pages using React"


I'd like to see these formatted differently so that the stat and the label are more intrinsically linked together besides the _1, _2, _3 suffix. How about as an array of objects/arrays?

Suggested change

"stat_1": "89%",

"stat_label_1": "Sites with more third-party code than first-party",

"stat_2": "83%",

"stat_label_2": "Sites that use jQuery",

"stat_3": "4.6%",

"stat_label_3": "Home pages using React"

"stats": [

{"89%": "Sites with more third-party code than first-party"},

{"83%": "Sites that use jQuery"},

{"4.6%": "Home pages using React"}

]

Alternatively:

Suggested change

"stat_1": "89%",

"stat_label_1": "Sites with more third-party code than first-party",

"stat_2": "83%",

"stat_label_2": "Sites that use jQuery",

"stat_3": "4.6%",

"stat_label_3": "Home pages using React"

"stats": [

["89%", "Sites with more third-party code than first-party"],

["83%", "Sites that use jQuery"],

["4.6%", "Home pages using React"]

]

rviscomi · 2020-08-09T16:24:18Z

src/main.py

+    featured_quote_filename = 'templates/%s/%s/featured_chapters.json' % (lang, year)
+    if os.path.isfile(featured_quote_filename):
+        with open(featured_quote_filename, 'r') as featured_quotes_file:
+            featured_quotes = json.load(featured_quotes_file)


Should we cache this in memory?

rviscomi · 2020-08-09T17:30:02Z

src/templates/base/2019/index.html

+    // Get a random quote using JS for those reloading cached CDN page.
+    // We do as much as possible before HTML so we can replace the server
+    // generated quote quickly without a flash of the server side quote


I'm not sold on this. The contributors page was one thing because I can see the value of giving each contributor equal prominence. But a chapter can be featured for a few hours at a time and I don't think there's any expectation from readers or authors that this should randomly update on refresh.

The overhead in both the HTML payload and the JS code just don't seem worth it for a feature that would be used infrequently and adds little to the UX.

If you're still convinced that this is the right change, could we continue this discussion in another issue and decouple it from the JSON change in this PR?

Yeah you’re probably right. Having a chapter “featured” for a few hours is more expected. Was so preoccupied with whether or not I could that they didn't stop to think if I should 😁

Given that, should we even move to JSON or just stick with the Jinja2 template instead? We could still dynamically generate that with an EJS template like we do for the ebook. It would be an extra EJS template but as long as we use the .ejs.html naming convention we use for ebook that should be fine. Or do you think we will ever use these quotes elsewhere where having them in JSON format would be helpful?

rviscomi · 2020-08-09T17:34:05Z

src/templates/en/2020/index.html

@@ -22,3 +22,6 @@

 <a href="https://github.com/HTTPArchive/almanac.httparchive.org#contributing" class="btn">Join the team</a>
 {% endblock %}
+
+{% block featured_chapter%}Featured Chapter{% endblock %}


The 2020 home page doesn't include a featured chapter section yet. Is this needed?

In a separate issue, could we also explore DRY solutions to reduce the duplication of language-specific text blocks across year templates?

tunetheweb · 2020-08-09T23:53:29Z

I'm going to close as decided to stick with templates.

tunetheweb added 10 commits July 25, 2020 14:50

Change localizedChapter names to look up by slug

a7ddb6a

Add Featured Chapters

362a61f

Move Features Chapters to JSON

31e1262

Linter fixes

a0d9f3c

Linter fixes attempt 2

5893069

Linter fixes 3

577e3c5

Remove debug

d7bab37

Add translations

25bc0b9

Fix typo

42eac04

Merge branch 'main' into featured_quotes_v2

9964323

tunetheweb added the development Building the Almanac tech stack label Jul 26, 2020

tunetheweb added this to the 2020 Platform Development milestone Jul 26, 2020

tunetheweb requested a review from rviscomi July 26, 2020 06:51

tunetheweb mentioned this pull request Jul 26, 2020

Auto generate featured chapters #1104

Merged

tunetheweb added 2 commits July 26, 2020 10:33

Merge branch 'main' into featured_quotes_v2

0260928

Only regen quote on reload

b6f95e2

tunetheweb mentioned this pull request Jul 28, 2020

Randomize contributors on reload #1107

Merged

tunetheweb added 4 commits July 28, 2020 07:53

Merge branch 'main' into featured_quotes_v2

dc32569

Add Simplified Chinese

ab7df07

Remove old featured_chapters

e0fc312

Fix link

df6b905

rviscomi requested a review from a team July 30, 2020 15:51

tunetheweb added 2 commits July 30, 2020 22:17

Merge branch 'main' into featured_quotes_v2

a493cc9

Code cleanup

0ce1762

SaptakS reviewed Jul 31, 2020

View reviewed changes

src/templates/base/2019/index.html Show resolved Hide resolved

SaptakS reviewed Jul 31, 2020

View reviewed changes

src/main.py Show resolved Hide resolved

SaptakS reviewed Jul 31, 2020

View reviewed changes

Review feedback

cb652bc

tunetheweb requested a review from SaptakS July 31, 2020 18:38

Fix two consts

2bebccc

SaptakS reviewed Jul 31, 2020

View reviewed changes

src/templates/en/2019/featured_chapters.json Outdated Show resolved Hide resolved

Fix whitespace

9af1af2

SaptakS approved these changes Jul 31, 2020

View reviewed changes

tunetheweb added 2 commits August 6, 2020 13:23

Merge branch 'main' into featured_quotes_v2

8784dbd

Bug fixes

d1f1eb6

rviscomi requested changes Aug 9, 2020

View reviewed changes

tunetheweb closed this Aug 9, 2020

tunetheweb deleted the featured_quotes_v2 branch November 20, 2020 15:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Move featured chapter quotes from Jinja2 template to JSON file #1103

Move featured chapter quotes from Jinja2 template to JSON file #1103

tunetheweb commented Jul 26, 2020

SaptakS left a comment

tunetheweb commented Jul 31, 2020

SaptakS left a comment

tunetheweb commented Jul 31, 2020

rviscomi commented Aug 1, 2020

rviscomi Aug 9, 2020

rviscomi Aug 9, 2020

rviscomi Aug 9, 2020

tunetheweb Aug 9, 2020

rviscomi Aug 9, 2020

tunetheweb commented Aug 9, 2020

Move featured chapter quotes from Jinja2 template to JSON file #1103

Move featured chapter quotes from Jinja2 template to JSON file #1103

Conversation

tunetheweb commented Jul 26, 2020

SaptakS left a comment

Choose a reason for hiding this comment

tunetheweb commented Jul 31, 2020

SaptakS left a comment

Choose a reason for hiding this comment

tunetheweb commented Jul 31, 2020

rviscomi commented Aug 1, 2020

rviscomi Aug 9, 2020

Choose a reason for hiding this comment

rviscomi Aug 9, 2020

Choose a reason for hiding this comment

rviscomi Aug 9, 2020

Choose a reason for hiding this comment

tunetheweb Aug 9, 2020

Choose a reason for hiding this comment

rviscomi Aug 9, 2020

Choose a reason for hiding this comment

tunetheweb commented Aug 9, 2020