[docs] Improve examples #38398

oliviertassinari · 2023-08-09T14:09:20Z

A quick polish on the examples. We could still push it further but no more bandwidth.

Implement some of #38204 (comment)

https://deploy-preview-38398--material-ui.netlify.app/material-ui/getting-started/example-projects/

mui-bot · 2023-08-09T14:12:24Z

Netlify deploy preview

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 0084254

oliviertassinari · 2023-08-09T14:09:38Z

CHANGELOG.md

@@ -3736,7 +3736,7 @@ _Jul 4, 2022_

 A big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:

- 🐛 Fixed an issue causing Typescript errors when building a project with Material UI v5.8.6 (@michaldudak)
+- 🐛 Fixed an issue causing TypeScript errors when building a project with Material UI v5.8.6 (@michaldudak)


Wrong capitalization

oliviertassinari · 2023-08-09T14:10:00Z

docs/data/base/guides/working-with-tailwind-css/PlayerFinal.js

@@ -4,7 +4,7 @@ export default function PlayerFinal() {
  return (
    <iframe
      title="codesandbox"
-      src="https://codesandbox.io/embed/github/mui/material-ui/tree/master/examples/base-ui-cra-tailwind-ts?hidenavigation=1&fontsize=14&view=preview"
+      src="https://codesandbox.io/embed/working-with-tailwind-css-dhmf8w?hidenavigation=1&fontsize=14&view=preview"


Broken example https://mui.com/base-ui/guides/working-with-tailwind-css/#prerequisites

oliviertassinari · 2023-08-09T14:11:47Z

docs/data/material/components/typography/typography.md

+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link
  rel="stylesheet"


Best practice: See the installation instructions https://fonts.google.com/?preview.size=24&sort=popularity, to understand the win, the simplest is to compare the network requests with and without in https://www.webpagetest.org/. You will see it saves time by doing thins in parallel e.g. TLS handshake.

oliviertassinari · 2023-08-09T14:12:18Z

docs/src/modules/components/ExampleCollection.js

-    name: 'Create React App',
+    name: 'Vite.js',


More popular than CRA now

oliviertassinari · 2023-08-09T14:12:31Z

docs/src/modules/components/ExampleCollection.js

+                data-ga-event-category="material-ui-example"
+                data-ga-event-label={example.name}
+                data-ga-event-action="click"


So we know which example to focus on

oliviertassinari · 2023-08-09T14:14:00Z

examples/base-ui-nextjs-tailwind-ts/README.md

 ```bash
-# npm
 npm install
 npm run dev
-
-# yarn
-yarn
-yarn dev
-
-# pnpm
-pnpm install
-pnpm dev
 ```


Beginners use npm, the rest might use yarn or pnpm but are not juniors, so I don't think we really need these.

oliviertassinari · 2023-08-09T14:14:53Z

examples/material-ui-nextjs/src/components/ThemeRegistry/EmotionCache.js

 'use client';
-
 import * as React from 'react';
 import createCache from '@emotion/cache';


To match the rest of the codebase, but React documents this with a blank line
https://react.dev/reference/react/use-client#use-client. Should we refactor all our codebase @mj12albert?

oliviertassinari · 2023-08-09T14:16:05Z

examples/joy-ui-cra-ts/public/index.html

    <link
      rel="stylesheet"
-      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;500;600;700&display=swap"
    />


Joy UI doesn't use Roboto

oliviertassinari · 2023-08-09T14:45:30Z

docs/data/joy/getting-started/installation/installation.md

 <link
  rel="stylesheet"
-  href="https://fonts.googleapis.com/css?family=Inter:wght@300;400;500;600;700&display=swap"
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
 />


This was broken, variables fonts are only in v2 https://developers.google.com/fonts/docs/css2

oliviertassinari · 2023-08-09T14:46:10Z

examples/material-ui-remix-ts/app/entry.client.tsx

-import { RemixBrowser } from 'remix';
+import { RemixBrowser } from '@remix-run/react';


remix was complaining, they changed the imports

oliviertassinari · 2023-08-09T14:46:36Z

examples/material-ui-vite-ts/README.md

-You can head back to the documentation, continuing browsing it from the [templates](https://mui.com/material-ui/getting-started/templates/) section.
+You can head back to the documentation and continue by browsing the [templates](https://mui.com/material-ui/getting-started/templates/) section.


Sync with the JavaScript version, no reason to be different.

oliviertassinari · 2023-08-09T14:46:49Z

examples/material-ui-vite-ts/src/ProTip.tsx

-      Pro tip: See more <Link href="https://mui.com/getting-started/templates/">templates</Link> in
-      the MUI documentation.
+      Pro tip: See more{' '}
+      <Link href="https://mui.com/material-ui/getting-started/templates/">templates</Link> in the
+      MUI documentation.


mapache-salvaje

Love to see it!

oliviertassinari · 2023-08-09T19:57:46Z

I might have broken stuff, we will see.

I would have preferred not to open this PR, but I figured I could help differentiate there.

I'm quite curious to see the analytic. With @bharatkashyap we talked about expanding our CLI to start from templates. If we had this in Material UI, we could get a better idea of the most popular examples (assuming the CLI sends telemetry), hence the ones to polish the most. In any case, I think that the GA events will be enough.

mapache-salvaje · 2023-08-09T20:15:56Z

Maybe we should establish a kind of quarterly or biannual review of the examples directory to make sure everything is functional and up to date? You surfaced quite a few small things that none of us noticed, and that went unreported by the community as well. We should be more proactive about keeping these tidy, in any case, because a broken or buggy example would be an awful first impression to make. Analytics ought to give us a much better idea of what to prioritize.

oliviertassinari · 2023-08-09T22:19:27Z

Maybe we should establish a kind of quarterly or biannual review of the examples directory to make sure everything is functional and up to date?

I'm not sure: when stuff gets broken, developers tend to report it. I would be inclined to have thorough tests of these examples as a one-off exercise & each time there is a proposed change. I rarely can spot everything in a single review, it takes me a couple of iterations to see all the things that could be improved, which at the end of the day impacts the DX.

oliviertassinari added the examples Relating to /examples label Aug 9, 2023

oliviertassinari commented Aug 9, 2023

View reviewed changes

[docs] Improve examples

443f2d8

oliviertassinari force-pushed the docs-improve-examples branch from 8fae569 to 443f2d8 Compare August 9, 2023 14:16

oliviertassinari requested a review from mapache-salvaje August 9, 2023 14:16

oliviertassinari force-pushed the docs-improve-examples branch from 1f326ce to 8fa51c1 Compare August 9, 2023 14:41

oliviertassinari commented Aug 9, 2023

View reviewed changes

more fixes

e59ddcf

oliviertassinari force-pushed the docs-improve-examples branch from 8fa51c1 to e59ddcf Compare August 9, 2023 15:47

fix console error prop leak

0084254

mapache-salvaje approved these changes Aug 9, 2023

View reviewed changes

oliviertassinari merged commit c2c1264 into mui:master Aug 9, 2023

oliviertassinari deleted the docs-improve-examples branch August 9, 2023 19:08

oliviertassinari mentioned this pull request Aug 18, 2023

[examples] Fix Joy UI example CLI #38531

Merged

emmanuel-ferdman mentioned this pull request Sep 21, 2023

[docs] refine links pointing to standardized examples #39094

Closed

1 task

oliviertassinari mentioned this pull request Jan 30, 2024

[material-ui][docs] Correct Google font CDN URL as Roboto 600 weight is not used #40852

Merged

		import { RemixBrowser } from 'remix';
		import { RemixBrowser } from '@remix-run/react';

		You can head back to the documentation, continuing browsing it from the [templates](https://mui.com/material-ui/getting-started/templates/) section.
		You can head back to the documentation and continue by browsing the [templates](https://mui.com/material-ui/getting-started/templates/) section.

Uh oh!

[docs] Improve examples #38398

[docs] Improve examples #38398

Uh oh!

Conversation

oliviertassinari commented Aug 9, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mui-bot commented Aug 9, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Netlify deploy preview

Bundle size report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

oliviertassinari Aug 9, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

oliviertassinari Aug 9, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

oliviertassinari Aug 9, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mapache-salvaje left a comment

Choose a reason for hiding this comment

Uh oh!

oliviertassinari commented Aug 9, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mapache-salvaje commented Aug 9, 2023

Uh oh!

oliviertassinari commented Aug 9, 2023

Uh oh!

Uh oh!

oliviertassinari commented Aug 9, 2023 •

edited

Loading

mui-bot commented Aug 9, 2023 •

edited

Loading

oliviertassinari Aug 9, 2023 •

edited

Loading

oliviertassinari Aug 9, 2023 •

edited

Loading

oliviertassinari Aug 9, 2023 •

edited

Loading

oliviertassinari commented Aug 9, 2023 •

edited

Loading