3B1B PWA Changes & Upgrades

[ellingtonc]

Updates

• Upgraded Next (10.2.3 -> 12.1.6) and fixed associated bugs (minor bugs)
• Upgraded React & ReactDOM (17.0.2 -> 18.1.0) and fixed associated bugs (major bugs)
• Upgraded Sass (1.34.1 -> 1.51.0)
• Upgraded Three (0.130.0 -> 0.140.0)
• Upgraded Katex (0.13.11 -> 0.15.3)
• Installed missing peer dependencies & upgraded all development dependencies
• Removed “next-image” in favor of built-in image optimization
• Converted all images to use Next Image Optimization
• Replaced “popper/core” & “react-popper” with Material UI Tooltip
• Created new SVG/CSS animation for 3b1b podcast
• Fixed Featured Content Cumulative Layout Shift in certain components
• Added aria-label on links to improve accessibility
• Added progress bar for route transitions
• Configured manifest and next-pwa to make site a progressive web app
• Removed .babelrc in favor of automatic NextJS SWC compilation
• Added Desmos Component and Hook for interfacing with Desmos graph API in MDX

Developer Changes

The package next-pwa is run during build time and generates a service worker that caches different routes and files for offline availability. Caching specifications are configured in next.config.js.

In development mode, the service worker is not generated. In production mode the service worker is generated at build time. That means even if you navigate away from the site and come back, data will still be stored by the browser. To manually clear out this data, go to the browser's development tools (Right Click -> Inspect). Then click the Application tab at the top, and click Clear Site Data. This will clear out all the cached data and unregister old service workers.

Known Issues

• Various interactive components that rely on react-p5 load, but are not interactive. In development mode, a full warning is displayed, but can be dismissed by refreshing the page (ex: lessons/spans, lessons/hyperdarts, and lessons/inscribed-rectangle-problem. In production, these interactive's load but do not have interactivity.

[ellingtonc]

This is a working preview at the expense of removing @sentry due to the conflict with next-pwa. The app is now installable via the address bar (top right desktop icon).

If running lighthouse report, make sure to clear Application Cache beforehand and run the report in Incognito Mode to prevent extensions from interfering. Also note that lighthouse will have the following discrepancies in preview mode:

• SEO will be -10 because it is not served on the proper domain w/ robots.txt (will be 100 on 3blue1brown.com)
• Best practices will be -17 because of the errors from mailstack iframe not loading (will be 100 on 3blue1brown.com)
• Accessibility will be almost 100 (need to fix small production bug with icons)

For some reason the performance is lower in the netlify preview than when I ran it from yarn build/yarn start. I have to investigate this issue some more. Also, discovered new error "Minified React Error" that is printed in console, which affects best practices.

[3b1b]

Looking good!

While scrolling around, I noticed a lag in how images load in lessons. Namely, as a scroll down, a new image appearing within view takes ~0.5 seconds to show up. It's not a huge issue, but I don't see the same lag on the existing site.

Let me know what the best way forward is for fixing the interactives, e.g. if it'd be helpful to talk to those who originally made them. After that, I think we're good to go on merging.

[ellingtonc]

The problem that you are seeing is due to Next Images lazily loading the images when they are scrolled into the viewport. Next image optimization requires a priority attribute if you want it to load immediately. It recommends only putting the priority attribute on images that will be in the immediate viewport (w/o scrolling).

I solved this by using the priority attribute on each of the figure images. It might take a small toll on the performance, but I can't imagine it being too bad because it still serving them as webp, which was the main performance issue in lighthouse.

For the interactives, I will take a look at them again this weekend, but feel free to reach out to the original dev for any ideas. No worries on this though, I am sure I will be able to put together a solution.

[3b1b]

Hey Ellington, I wanted to apologize for this (and the various things we had discussed) slip through the cracks. I can all too easily get lost in the weeds of other things. No pressure to spin it back up or anything, I hope you're doing well!