Fix broken glitch embeds and codelabs

[beaufortfrancois]

trafficstars

As I've noticed a dead glitch codelab on web.dev, I wondered if more glitches (embed and codelabs) were broken as well, so I've collected all of them and displayed them in a single web page at https://webdev-glitches.glitch.me/ as it can be hard programmatically to detect whether one is broken or not.

Here's the list of broken glitch embeds I've found:

• [ ] https://cra-web-app-manifest-defaut.glitch.me 504 Gateway Time-out from https://web.dev/add-manifest-react/

• [ ] https://fav-kitties-animated-min.glitch.me git repo seems to have been reset from https://web.dev/unminified-css/

• [ ] https://gorgeous-raven.glitch.me (linked chromevox-lite mjs file returns 404) from https://web.dev/custom-control-roles/

• [ ] https://new-create-react-app.glitch.me "Oops! This project isn't running." page from https://web.dev/get-started-optimize-react/

• [ ] https://new-next-app.glitch.me "Oops! This project isn't running." page from https://web.dev/performance-as-a-default-with-nextjs/

• [ ] https://react-lazy-suspense-multiple.glitch.me 504 Gateway Time-out from https://web.dev/code-splitting-suspense/

• [ ] https://react-sw-example.glitch.me 504 Gateway Time-out from https://web.dev/precache-with-workbox-react/

• [ ] https://react-window-infinite.glitch.me 504 Gateway Time-out from https://web.dev/virtualize-long-lists-react-window/

• [ ] https://react-window-variable.glitch.me 504 Gateway Time-out from https://web.dev/virtualize-long-lists-react-window/

And here's the list of broken glitch codelabs:

• [x] https://make-it-installable.glitch.me  git repo seems to have been reset from https://web.dev/codelab-make-installable/ fixed by @beaufortfrancois - 2021/02/10 (Glitch support restored back up from July 2020)

• [x] https://critical-css-starter.glitch.me 504 Gateway Time-out from https://web.dev/codelab-extract-and-inline-critical-css/ fixed by @mihajlija - 2021/02/10

• [ ] https://create-react-app-unoptimized.glitch.me 504 Gateway Time-out from https://web.dev/codelab-quicklink/

[mihajlija]

I fixed the critical css one which I authored, looks like we don't have edit access for other people's codelabs. No idea why it broke but the fix was npm install body-parser.

[beaufortfrancois]

@housseindjirdeh Can you have a look at the broken "react" glitches?

[robdodson]

@housseindjirdeh quick question, have all of these been added to the webdev team on Glitch?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. To prevent this from happening, leave a comment.

[stale[bot]]

Closing this issue because it has been marked as stale for more than 7 days.

[patrickhlauke]

Pages which fire off quite a few glitch-related alerts when accessed

• https://web.dev/accessible-tap-targets/
• https://web.dev/responsive-web-design-basics/

[jeffposnick]

FWIW, I did not encounter the same error when visiting either of those URLs. Perhaps it's only fired during a warm-up phase, and I was visiting after they've been pre-warmed?

In any case, @rachelandrew, the https://web.dev/accessible-tap-targets/ pages have the following Glitch embeds that are in your account, but have not been added to the https://glitch.com/@webdev team. Can you add them?

• https://glitch.com/~tap-targets
• https://glitch.com/~tap-targets-2

I can't find any Glitch embeds on https://web.dev/responsive-web-design-basics/ that are not part of the web.dev team, though....

[rachelandrew]

@jeffposnick I've done that, I see the errors fairly frequently. I've moved a fair few Glitch demos to CodePen where they are just HTML/CSS/JS as we don't have constant issues with CodePen. So I may eventually do that with these.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. To prevent this from happening, leave a comment.

[rawrmonstar]

This is an issue that is still happening (commenting to remove stale tag).

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. To prevent this from happening, leave a comment.

[rachelandrew]

@AaronForinton could you confirm which of these are still broken? I'll then try to work out what to do with them. I think we should move any Glitch demos to CodePen if they are just HTML, CSS, and JavaScript. Some of these we can't do that with though.

[AaronForinton]

Embeds:

https://lazy-background.glitch.me/ https://lazy-intersection-observer.glitch.me/ https://lazy-loading-fallback.glitch.me/ https://new-create-react-app.glitch.me/ https://new-next-app.glitch.me/ https://promises-async-generator-example.glitch.me/ https://react-sw-example.glitch.me/ https://react-window-fixed.glitch.me/

Codelabs:

https://gui-challenges-sidenav-lab.glitch.me/ https://gui-challenges-stories-codelab.glitch.me/ https://sign-in-form-codelab-0.glitch.me/ https://push-notifications-client-codelab-incomplete.glitch.me/ https://push-notifications-server-codelab-incomplete.glitch.me/ https://code-splitting-starter.glitch.me/ https://next-amp-start.glitch.me/ https://same-origin-policy-fetch.glitch.me/

@rachelandrew These are the ones I'm seeing as broken - is there a quick way for me to find out which pages these URLs live on?

[AaronForinton]

Faulty Glitch embeds:

https://web.dev/performance-as-a-default-with-nextjs/ https://web.dev/precache-with-workbox-react/

Will edit when I can source pages for embeds from my last comment:

tbd

[rachelandrew]

@AaronForinton if you search for the Glitch key in VSCode that will bring back the page. So:

1. https://gui-challenges-stories-codelab.glitch.me/
2. Key is gui-challenges-stories-codelab
3. Do Find in files in VSCode (other editors will have similar).
4. Open the file (in this case src/site/content/en/blog/codelab-building-a-stories-component/index.md)

[AaronForinton]

@rachelandrew

I've tested the list above and I only see two broken embeds:

https://new-next-app.glitch.me/ -> https://web.dev/performance-as-a-default-with-nextjs/: 'content is blocked' when interacted with

https://react-sw-example.glitch.me/ -> https://web.dev/precache-with-workbox-react/