Adding chrome-100 page #2415

rutuja-google · 2022-03-24T18:29:03Z

Fixes #SOME_ISSUE_NUMBER

Changes proposed in this pull request:

New page creation for chrome-100.
Firebase app implementation for like functionality, prod version firebase setup yet to implement.
Please suggest how to remove navigation item from sidebar.
Working on lint type errors.

netlify · 2022-03-24T18:29:07Z

✅ Deploy Preview for developer-chrome-com ready!

Name	Link
🔨 Latest commit	`88728dc`
🔍 Latest deploy log	https://app.netlify.com/sites/developer-chrome-com/deploys/6242f7c78c9fc600085e04bf
😎 Deploy Preview	https://deploy-preview-2415--developer-chrome-com.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

chrome-devrel-review-bot · 2022-03-24T18:29:20Z

Hello! This is an automated review by our custom reviewbot. It updates automatically when code or GitHub comments in this pull request are created or updated.

Requested changes

If there are any common problems with the content files you created or modified, they will be listed here.

`site/en/100/index.md`

This file passed all of our automated Markdown audits.

chrome-devrel-review-bot · 2022-03-24T18:29:20Z

Hello! This is an automated review by our custom reviewbot. It updates automatically when code or GitHub comments in this pull request are created or updated.

Requested changes

If there are any common problems with the content files you created or modified, they will be listed here.

`site/en/100/index.md`

This file passed all of our automated Markdown audits.

jeffposnick

I haven't had a chance to review this entire PR yet, but I wanted to share some initial comments.

@devnook @harleenkbatra08, a comment for both of you is that there are image files checked in as part of this PR. We normally try to use our image CDN for this sort of thing (and I know that the files being checked in aren't optimized).

How should we handle images needed for this project?

firebase.json

firestore.indexes.json

firestore.rules

functions/index.js

package.json

site/_js/firebase.js

site/_js/main.js

site/_js/slider.js

devnook · 2022-03-25T11:20:01Z

Re: images optimization - all images have to go through our uploader pipeline: https://developer.chrome.com/docs/handbook/how-to/add-media/
The uploader outputs html code to use image as a nunjocks shortcode ("{% Img ... %}") but you can also just use the image's URL from the generated output to embed an image in a different way.

You might need a @google account to use the uploader - in this case please work with Harleen to upload the images and get the urls for them.

devnook · 2022-03-25T11:54:14Z

The reason that preview is not working is because you deleted the workbox-migration.svg icon, while it is actually used by this page: https://github.com/GoogleChrome/developer.chrome.com/blob/main/site/en/docs/workbox/migration/index.md

Is this icon related in any way to the /100 project?

jeffposnick

I've gone through most of the remaining files, and offered feedback.

site/_js/firebase.js

site/_js/web-components/card-section.js

site/_scss/blocks/_card-section.scss

site/_scss/globals/_colors.scss

site/_scss/main.scss

…e.com into chrome-100

jeffposnick · 2022-03-25T17:49:48Z

A high-level comment about the experience when viewed on a device with a mobile viewport: it's very easy to get into a situation in which there is no highlighted year on the left hand side (and also, in which the very bottom of the year is just visible under the Chrome logo, instead of fully scrolled off screen).

I don't know exactly what part of your scroll event listener is responsible for this bug, but this overall feature really feels like a job of the Intersection Observer API, which will also hopefully offer better performance that the scroll event listener.

One way or another, this animation needs to be tested and fixed on mobile viewports.

harleenkbatra08-zz · 2022-03-25T18:10:16Z

In the first line of the description on the landing page can we change "Take a stroll down..." to "Take a scroll down memory lane..."? It's a great pun that Jeffy just pointed out. :)

harleenkbatra08-zz · 2022-03-25T18:11:21Z

I think the arrows on each card should also be clickable to their respective links. Can we update that universally please?

harleenkbatra08-zz · 2022-03-25T18:16:31Z

A high-level comment about the experience when viewed on a device with a mobile viewport: it's very easy to get into a situation in which there is no highlighted year on the left hand side (and also, in which the very bottom of the year is just visible under the Chrome logo, instead of fully scrolled off screen).

I don't know exactly what part of your scroll event listener is responsible for this bug, but this overall feature really feels like a job of the Intersection Observer API, which will also hopefully offer better performance that the scroll event listener.

One way or another, this animation needs to be tested and fixed on mobile viewports.

Agreed about Jeffy's "year not being highlighted throughout on mobile" comment. I think we should keep the year highlighted until the first card of the next year shows up in the viewport.

harleenkbatra08-zz · 2022-03-25T18:18:48Z

On desktop, the years and cookies consent dialogue are overlapping. This would need to be fixed please.

harleenkbatra08-zz · 2022-03-25T18:19:36Z

Again, on desktop, when you scroll with keyboard, there's a weird jump between the years 2008 & 2009. Can you please check?

harleenkbatra08-zz · 2022-03-25T18:32:16Z

For the keyboard config, couple of things:

When I press tab starting from the first page description, the cursor goes from "Scroll to begin" to 2008 and then continues down the years. I think we should make it such that it goes down to 2008 and then moves through the content cards within 2008, and then moves to the next year (and that year's content cards and so on)
Also, when you go down the years via keyboard, the page isn't scrolling up to show the last few years. I assume that problem won't be an issue if we use the above navigation path, but just please keep that in mind.

harleenkbatra08-zz · 2022-03-25T18:41:23Z

On desktop, the years and cookies consent dialogue are overlapping. This would need to be fixed please.

Oh and it's happening on mobile as well.

harleenkbatra08-zz · 2022-03-25T19:15:15Z

Also, on iPhone, I can see that the spacing on the left margin is too small when the year gets highlighted. Can we resolve that please?

rutuja-google · 2022-03-25T20:03:40Z

The reason that preview is not working is because you deleted the workbox-migration.svg icon, while it is actually used by this page: https://github.com/GoogleChrome/developer.chrome.com/blob/main/site/en/docs/workbox/migration/index.md

Is this icon related in any way to the /100 project?

Thanks. Reverted that particular image and Preview is working now.

neha-google · 2022-03-26T12:13:54Z

On desktop, the years and cookies consent dialogue are overlapping. This would need to be fixed please.
Fixed.
Oh and it's happening on mobile as well.

Fixed!

jeffposnick · 2022-03-28T21:03:12Z

site/en/100/index.md

+thumbnail: image/x1Los57vDga6OEMNi1dIJwZ0qvp2/1gyOFYMC1sFOBkC5csD3.png
+alt: 'Chrome 100'
+layout: 'layouts/chrome-100.njk'
+type: landing


Can you please add draft: true to the YAML frontmatter? We want to be able to merge this PR without /100/ going live until we're ready.

When we added this in our index.md file, our Preview link stopped working so did not add it right now.

harleenkbatra08-zz · 2022-03-28T21:22:17Z

Actually, really sorry about this one but can you please update this to what's written here: https://docs.google.com/document/d/1ptIDUs93120ErZBAwR9tu4WXA0VD9xI6h61puDt62C8/edit?resourcekey=0-n-YwI5nmD1gIy2GpLJAeUg#heading=h.pvx544albuy5

devnook · 2022-03-28T21:37:59Z

@omkar-google @neha-google Omkar, I don't think we'll launch the likes functionality in this PR. Can you please remove all firebase logic (so firebase.js, script.js, meta.njk, gitignore rules) and leave just the UI? Once we get the UI in the right shape, we can re-enable likes functionality. Otherwise we wont get this Pr checked in before deadline.

harleenkbatra08-zz · 2022-03-28T22:51:02Z

Share button has lost all the metadata (it's only showing the link). Please fix.
Also, the image when you share the link isn't updating. See screenshot

.

harleenkbatra08-zz · 2022-03-28T23:00:29Z

Make Sundar video related changes (check email to Omkar & Neha)

harleenkbatra08-zz · 2022-03-28T23:01:46Z

In 2017, for the Photopea card, update the description to say: "A design editing web app, built by a single developer."

devnook · 2022-03-29T06:42:13Z

I managed to find where the chrome-100 icon was used - in the commented out code for the side navigation. @harleenkbatra08 do we plan to use that navigation (icon in the sidebar next to home,docs,blog)? If yes, please bring back the icon and make sure the commented out code works.

devnook · 2022-03-29T07:03:23Z

@harleenkbatra08 confirmed we don't need a link in the sidebar - please remove commented code.

tomayac · 2022-03-29T07:05:55Z

site/_data/i18n/nav/side_nav.yml

Drive-by:

Suggested change

es: 'Versiones'

es: 'Lanzamientos'

See, for example, https://es.wikipedia.org/wiki/Ciclo_de_vida_del_lanzamiento_de_software.

We are not supposed to make any changes in the existing content hence leaving it as it is!

devnook · 2022-03-29T07:22:39Z

Here are errors reported by lighthouse. Lighthouse audit can be run using Chrome Devtools > Lighthouse tab. They are easy fixes - Can you please take a look?

It is an empty link in this card:

neha-google · 2022-03-29T10:41:36Z

Here are errors reported by lighthouse. Lighthouse audit can be run using Chrome Devtools > Lighthouse tab. They are easy fixes - Can you please take a look?

It is an empty link in this card:

Done!

neha-google · 2022-03-29T10:46:59Z

@harleenkbatra08 confirmed we don't need a link in the sidebar - please remove commented code.

Done.

neha-google · 2022-03-29T10:47:19Z

single developer."

Done

neha-google · 2022-03-29T10:47:34Z

(check email to Omkar & Neha)

Done

neha-google · 2022-03-29T10:50:03Z

Share button has lost all the metadata (it's only showing the link). Please fix. Also, the image when you share the link isn't updating. See screenshot .

We have updated the latest thumbnail image for meta and it is reflecting on our page as well.
This is mostly the cache issue and should be fixed once the site is live once we delete the Twitter cache on live.

neha-google · 2022-03-29T10:50:36Z

Once we get the UI in the right shape,

Removed the Firebase logic and kept the UI as it is!

neha-google · 2022-03-29T10:51:02Z

Actually, really sorry about this one but can you please update this to what's written here: https://docs.google.com/document/d/1ptIDUs93120ErZBAwR9tu4WXA0VD9xI6h61puDt62C8/edit?resourcekey=0-n-YwI5nmD1gIy2GpLJAeUg#heading=h.pvx544albuy5

Done! Please verify the same.

harleenkbatra08-zz · 2022-10-11T08:34:12Z

I believe the team has @google accounts as they're an embedded team but let me know if you need help with uploading images, Rutuja/Omkar

…

On Fri, Mar 25, 2022 at 11:20 AM Ewa ***@***.***> wrote: Re: images optimization - all images have to go through our uploader pipeline: https://web.dev/handbook/markup-media/ The uploader outputs html code to use image as a nunjocks shortcode ("{% Img ... %}") but you can also just use the image's URL from the generated output to embed an image in a different way. You might need a @google <https://github.com/google> account to use the uploader - in this case please work with Harleen to upload the images and get the urls for them. — Reply to this email directly, view it on GitHub <#2415 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALHVD56TQUBGKXWPEN55CZDVBWOO3ANCNFSM5RR6N7MA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- * • **Harleen Batra* * • *Developer PMM *•* Chrome/Web Platform

Adding chrome-100 page

03661f0

pullapprove bot requested review from devnook and jeffposnick March 24, 2022 18:29

rutuja-google closed this Mar 24, 2022

rutuja-google reopened this Mar 24, 2022

jeffposnick suggested changes Mar 24, 2022

View reviewed changes

rutuja-google and others added 2 commits March 25, 2022 19:15

Adding workbox-migration.svg

9b60df5

Merge branch 'GoogleChrome:main' into chrome-100

10298d9

jeffposnick suggested changes Mar 25, 2022

View reviewed changes

rutuja-google added 3 commits March 25, 2022 20:00

Resolving PR comments

3c65420

Resolving comments

2148e90

Merge branch 'chrome-100' of github.com:rutuja-google/developer.chrom…

29f7a80

…e.com into chrome-100

rutuja-google added 2 commits March 26, 2022 01:42

Resolved comments

5f80645

Changing rollup.config file

2f7e2b3

Adding data attributes

2b50a91

jeffposnick reviewed Mar 28, 2022

View reviewed changes

Fixing PR comments

9ba2713

tomayac reviewed Mar 29, 2022

View reviewed changes

Reverting changes from md file and fixing code review comments

075bbfc

rutuja-google added 2 commits March 29, 2022 14:04

Fixing code review comments

c0dd141

Fixing PR comments

cef7ffc

rutuja-google added 3 commits March 29, 2022 17:07

Arrow alignment fixes

59649c5

lint error fix

5599d12

Add draft:true in index.md

9f45103

jeffposnick self-requested a review March 29, 2022 12:12

Merge branch 'main' into chrome-100

88728dc

jeffposnick approved these changes Mar 29, 2022

View reviewed changes

devnook merged commit 6a5b4d1 into GoogleChrome:main Mar 29, 2022

Adding chrome-100 page #2415

Adding chrome-100 page #2415

Conversation

rutuja-google commented Mar 24, 2022

netlify bot commented Mar 24, 2022 • edited Loading

✅ Deploy Preview for developer-chrome-com ready!

chrome-devrel-review-bot commented Mar 24, 2022

Requested changes

site/en/100/index.md

chrome-devrel-review-bot commented Mar 24, 2022

Requested changes

site/en/100/index.md

jeffposnick left a comment

Choose a reason for hiding this comment

devnook commented Mar 25, 2022 • edited Loading

devnook commented Mar 25, 2022

jeffposnick left a comment

Choose a reason for hiding this comment

jeffposnick commented Mar 25, 2022

harleenkbatra08-zz commented Mar 25, 2022

harleenkbatra08-zz commented Mar 25, 2022

harleenkbatra08-zz commented Mar 25, 2022

harleenkbatra08-zz commented Mar 25, 2022

harleenkbatra08-zz commented Mar 25, 2022

harleenkbatra08-zz commented Mar 25, 2022

harleenkbatra08-zz commented Mar 25, 2022

harleenkbatra08-zz commented Mar 25, 2022

rutuja-google commented Mar 25, 2022

neha-google commented Mar 26, 2022

jeffposnick Mar 28, 2022

Choose a reason for hiding this comment

neha-google Mar 29, 2022

Choose a reason for hiding this comment

harleenkbatra08-zz commented Mar 28, 2022 • edited Loading

devnook commented Mar 28, 2022

harleenkbatra08-zz commented Mar 28, 2022

harleenkbatra08-zz commented Mar 28, 2022

harleenkbatra08-zz commented Mar 28, 2022 • edited Loading

devnook commented Mar 29, 2022

devnook commented Mar 29, 2022

tomayac Mar 29, 2022

Choose a reason for hiding this comment

neha-google Mar 29, 2022

Choose a reason for hiding this comment

devnook commented Mar 29, 2022

neha-google commented Mar 29, 2022

neha-google commented Mar 29, 2022

neha-google commented Mar 29, 2022

neha-google commented Mar 29, 2022

neha-google commented Mar 29, 2022

neha-google commented Mar 29, 2022

neha-google commented Mar 29, 2022

harleenkbatra08-zz commented Oct 11, 2022 via email

netlify bot commented Mar 24, 2022 •

edited

Loading

`site/en/100/index.md`

`site/en/100/index.md`

devnook commented Mar 25, 2022 •

edited

Loading

harleenkbatra08-zz commented Mar 28, 2022 •

edited

Loading

harleenkbatra08-zz commented Mar 28, 2022 •

edited

Loading