[docs] Polish Sign in to your account joy demo #37498

oliviertassinari · 2023-06-04T21:38:28Z

Initially, I wanted to fix https://app.ahrefs.com/site-audit/3524616/67/data-explorer?columns=pageRating%2Curl%2Ctraffic%2ChttpCode%2Cdepth%2Ch1%2Ch1Length%2CnrH1%2Ccompliant&filterId=e29b87ac6311cffd6273e3758dd92cd7&issueId=838c947a-001a-11e8-823b-001e67ed4656

Turns out, there is more we could do.

Preview: https://deploy-preview-37498--material-ui.netlify.app/joy-ui/getting-started/templates/sign-in-side/

oliviertassinari · 2023-06-04T21:38:54Z

docs/data/joy/getting-started/templates/sign-in-side/App.tsx

@@ -40,6 +40,7 @@ function ColorSchemeToggle({ onClick, ...props }: IconButtonProps) {
      size="sm"
      variant="plain"
      color="neutral"
+      aria-label="toggle light/dark mode"


https://pagespeed.web.dev/analysis/https-mui-com-joy-ui-getting-started-templates-sign-in-side/88neks9z35?form_factor=desktop

oliviertassinari · 2023-06-04T21:39:06Z

docs/data/joy/getting-started/templates/sign-in-side/App.tsx

-              <Typography component="h2" fontSize="xl2" fontWeight="lg">
-                Welcome back
+              <Typography component="h1" fontSize="xl2" fontWeight="lg">
+                Sign in to your account
              </Typography>
              <Typography level="body2" sx={{ my: 1, mb: 3 }}>
-                Let&apos;s get started! Please enter your details.
+                Welcome back
              </Typography>


I couldn't understand the previous wording.

oliviertassinari · 2023-06-04T21:40:00Z

docs/data/joy/getting-started/templates/sign-in-side/App.tsx

@@ -234,10 +235,10 @@ export default function JoySignInSideTemplate() {
          backgroundPosition: 'center',
          backgroundRepeat: 'no-repeat',
          backgroundImage:
-            'url(https://images.unsplash.com/photo-1527181152855-fc03fc7949c8)',
+            'url(https://images.unsplash.com/photo-1527181152855-fc03fc7949c8?auto=format&w=1000&dpr=2)',


From 16MB to 0.8 MB, help a bit with:

https://pagespeed.web.dev/analysis/https-mui-com-joy-ui-getting-started-templates-sign-in-side/88neks9z35?form_factor=desktop

oliviertassinari · 2023-06-04T21:42:38Z

docs/data/joy/getting-started/templates/sign-in-side/App.tsx

-                <Input placeholder="Enter your email" type="email" name="email" />
+                <Input type="email" name="email" />
              </FormControl>
              <FormControl required>
                <FormLabel>Password</FormLabel>
-                <Input placeholder="•••••••" type="password" name="password" />
+                <Input type="password" name="password" />


These placeholders feel confusing. I can't find a serious benchmark that has them. (Stripe, Figma). I suspect it's because it can be confused with the value being already filled (at least how it feels on my end.

mui-bot · 2023-06-04T21:43:42Z

Netlify deploy preview

https://deploy-preview-37498--material-ui.netlify.app/

Bundle size report

No bundle size changes

Generated by 🚫 dangerJS against 5e4435a

oliviertassinari · 2023-06-04T21:50:57Z

Something is broken with:

    <CssVarsProvider
      defaultMode="dark"
      disableTransitionOnChange
      theme={customTheme}
    >

it flashes between the light and dark mode when I load the page. It can be reproduced in https://pagespeed.web.dev/analysis/https-deploy-preview-37498--material-ui-netlify-app-joy-ui-getting-started-templates-sign-in-side/x9knl6jsq2?form_factor=mobile

A single render would likely already improve the lighthouse performance score.

siriwatknp

Thanks for the improvement!

oliviertassinari · 2023-06-05T15:38:07Z

@siriwatknp Anyone idea on what's going on with #37498 (comment)? This makes the template not truly usable in production (the most exigent users won't, e.g. I would either fix this or not use it if I was a user, 49/100: no thanks, let's try the next UI library).

siriwatknp · 2023-06-06T02:29:43Z

@siriwatknp Anyone idea on what's going on with #37498 (comment)? This makes the template not truly usable in production (the most exigent users won't, e.g. I would either fix this or not use it if I was a user, 49/100: no thanks, let's try the next UI library).

Since the templates live in the structure of the docs, I don't think it is fair to run the lighthouse against them. The page is not 100% Joy UI, it includes MUI branding theme at the top and that's a separate issue to fix.

FYI, Joy UI has a lot of room for performance improvement but it requires discussion about the approach we want to go with.

siriwatknp · 2023-06-06T02:42:41Z

Anyone idea on what's going on with #37498 (comment)?

This is because the defaultMode of this page is set to dark but the value defined in getInitColorSchemeScript is system (see docs/pages/_document.js). It creates inconsistent behavior for the first visit.

I have changed defaultMode of this page to system. Please try again (you have to clear the local storage first).

oliviertassinari · 2023-06-11T23:47:29Z

Since the templates live in the structure of the docs, I don't think it is fair to run the lighthouse against them.

@siriwatknp My expectation is that developer will run it, and not care what's the context, only remember that score is X.

I have changed defaultMode of this page to system.

The lighthouse score is clearly better: https://pagespeed.web.dev/analysis/https-deploy-preview-37498--material-ui-netlify-app-joy-ui-getting-started-templates-sign-in-side/k0gtkyl01a?form_factor=mobile. Not almost 100% like https://www.builder.io/ has on a heavy page, but a step better 👍:

Please try again (you have to clear the local storage first).

This is broken for me, in a different way. The different templates don't handle correctly when mode = 'system'

const { mode, setMode } = useColorScheme();

Some template displays two logos, others make you press the button twice: system (light) => light => dark.

I have reverted the last commit. I think it goes in the right direction, only it introduce regressions, I would like to merge these changes: one step at a time.

This is because the defaultMode of this page is set to dark but the value defined in getInitColorSchemeScript is system (see docs/pages/_document.js). It creates inconsistent behavior for the first visit.

Oh I see, very interesting. A few thoughts:

Would it make sense for getInitColorSchemeScript() to set a window variable with the resolved mode that it uses? This way, CssVarsProvider know to ignore the value of defaultMode if we are in a SSR context.
I can't find clear docs about CssVarsProvider API reference, the only place is in Material UI but this seems unrelated to Joy UI (I imagine as a developer). I had to dive into the source to figure stuff out (what's is each prop for).
We probably when to update https://mui.com/joy-ui/getting-started/tutorial/ to make system by default as a first-class use case. I understand why light is the default mode, as developers might not have set their app to be dark compatible, but as soon as they do, system seems to be what makes the most sense, everywhere.

This reverts commit b66c2fe.

oliviertassinari added docs Improvements or additions to the documentation package: joy-ui Specific to @mui/joy labels Jun 4, 2023

oliviertassinari requested a review from siriwatknp June 4, 2023 21:38

[docs] Polish Sign in to your account joy demo

1e7cbaf

oliviertassinari force-pushed the joy-broken-h1 branch from 8c75492 to 1e7cbaf Compare June 4, 2023 21:41

oliviertassinari commented Jun 4, 2023

View reviewed changes

siriwatknp approved these changes Jun 5, 2023

View reviewed changes

use system in all templates

b66c2fe

Revert "use system in all templates"

5e4435a

This reverts commit b66c2fe.

oliviertassinari enabled auto-merge (squash) June 11, 2023 23:50

oliviertassinari merged commit 90d9d13 into mui:master Jun 11, 2023

oliviertassinari deleted the joy-broken-h1 branch June 12, 2023 00:07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[docs] Polish Sign in to your account joy demo #37498

[docs] Polish Sign in to your account joy demo #37498

oliviertassinari commented Jun 4, 2023 •

edited

Loading

oliviertassinari Jun 4, 2023 •

edited

Loading

oliviertassinari Jun 4, 2023

oliviertassinari Jun 4, 2023 •

edited

Loading

oliviertassinari Jun 4, 2023 •

edited

Loading

mui-bot commented Jun 4, 2023 •

edited

Loading

oliviertassinari commented Jun 4, 2023 •

edited

Loading

siriwatknp left a comment

oliviertassinari commented Jun 5, 2023 •

edited

Loading

siriwatknp commented Jun 6, 2023

siriwatknp commented Jun 6, 2023

oliviertassinari commented Jun 11, 2023 •

edited

Loading

[docs] Polish Sign in to your account joy demo #37498

[docs] Polish Sign in to your account joy demo #37498

Conversation

oliviertassinari commented Jun 4, 2023 • edited Loading

oliviertassinari Jun 4, 2023 • edited Loading

Choose a reason for hiding this comment

oliviertassinari Jun 4, 2023

Choose a reason for hiding this comment

oliviertassinari Jun 4, 2023 • edited Loading

Choose a reason for hiding this comment

oliviertassinari Jun 4, 2023 • edited Loading

Choose a reason for hiding this comment

mui-bot commented Jun 4, 2023 • edited Loading

Netlify deploy preview

Bundle size report

oliviertassinari commented Jun 4, 2023 • edited Loading

siriwatknp left a comment

Choose a reason for hiding this comment

oliviertassinari commented Jun 5, 2023 • edited Loading

siriwatknp commented Jun 6, 2023

siriwatknp commented Jun 6, 2023

oliviertassinari commented Jun 11, 2023 • edited Loading

oliviertassinari commented Jun 4, 2023 •

edited

Loading

oliviertassinari Jun 4, 2023 •

edited

Loading

oliviertassinari Jun 4, 2023 •

edited

Loading

oliviertassinari Jun 4, 2023 •

edited

Loading

mui-bot commented Jun 4, 2023 •

edited

Loading

oliviertassinari commented Jun 4, 2023 •

edited

Loading

oliviertassinari commented Jun 5, 2023 •

edited

Loading

oliviertassinari commented Jun 11, 2023 •

edited

Loading