🎉 10/9 Updates

[keithk]

The first update to the new Glitch site is here, driven by your feedback and ideas! We’re pushing changes to the site hourly based on feedback from all of you, and will group them up into status posts like this when we’ve got a few to talk about.

It’s been a bit since we announced the https://preview.glitch.com - our new Glitch front end. We had a lot of great feedback in the initial thread, and pushed out changes on that feedback.

We’re talking internally about how to keep this forum up to date, and I’ll be making some topics about decision points we’re still in the process of making. An upcoming sprint will be around the actions you can take in the dashboard, and we know (or hope ) there will be a lot of feedback from y’all on that.

Updates

• Dark Mode: There is now a toggle in the footer to move between light (default) and dark mode. If you’re using dark mode, you might notice some small issues around the site, please let us know and we’ll get them fixed ASAP. If you look at our CSS (Which I know some of you have), you’ll notice we’re setting theme specific variables, which might open up the opportunity for user submitted themes in the future What theme do you most want to see? (quick, someone snipe the @jenn “hotdog stand” answer). Thanks for @JasonPunyon and @WilsontheWolf, @aboutdavid for these reports.

:where(html[data-theme="dark"]) {
  /* Layout */
  --color-background: var(--color-brand-dark-6);
  --color-page-background: var(--color-brand-dark-5);
  --color-border-solid: var(--color-brand-light-1);
  --color-content-background: var(--color-brand-dark-6);

  /* Links */
  --color-link: var(--color-brand-pink-2);
  --color-link-hover: var(--color-brand-light-1);
  --color-link-dark: var(--color-brand-light-1);
  --color-link-dark-hover: var(--color-brand-pink-4);

  /* Typography */
  --color-heading: var(--color-brand-light-1);
  --color-text: var(--color-brand-light-1);
}

• Updated 404: We updated the 404 page (which you’ll navigate to a lot on the new site) to show more detailed information, and link you to this forum.
• Fixed loading the dashboard if you had a playlist with no projects in it.
• Fixed a number of bugs reported to us in the forums, including some funky caching if you were logged out.
• Removed playlists from user profiles, they were completely unstyled and not ready for prime time. They’ll be back soon!

Not a ton of product related changes, because we’ve been working on our internal CI pipeline, that allows us to create preview branches for upcoming work. This will let us link you to something like preview-branch-2222.preview.glitch.com in thh future to help give feedback on upcoming (but not merged to main) changes.

URLS

One topic brought up on the thread is the URLs that we use around the site. My profile is Glitch: The friendly community where everyone builds the web, but on the new site it links to /user/cute. Strangely, the routing system for the framework that we’re using (RemixJS) does not support characters in the routes at all, but we’ve opened an issue and are in communication with them to support it.

If we don’t get first class support for those URLs, we’ll set up redirects from the old path to the new one, so there isn’t any breakage across the internet. We can come up with a routing solution, though.

Error States

We haven’t put the work in to making these more understandable, yet. You’ll probably get yourself into some situations where the site just doesn’t know what to do. Please keep letting us know when you run into these cases, and thanks @JasonPunyon, @wh0 and @WilsontheWolf for outlining some of them already.

[naotohieda]

looks great!

I found the profile on the top right a bit confusing - the menu appears when I hover on it, but because the response is a bit slow (100 ms to my eyes), I click on it to open it but immediately it disappears as I click.

[keithk]

I’ve noticed this too while navigating. We’re using the incredible Radix UI for the navigation menu, which has the same behavior. Creating a ticket to play around with this a little bit and see if we can get it feeling nicer if you click on the carrot instead of hovering.

[allypalanzi]

Just pushed up a change for now to at least remove the delay!

[naotohieda]

looking great! but not sure if “click to hide” is actually necessary

I like the oval shape of the profile picture on /user/:username. Just a thought but maybe good to be consistent overall like the menu on the top right? (which is square at the moment)

[Pufferfish101007]

very excited about this, it looks lovely! some queries/quibbles/quandaries:
Some horizontal overflow on mobile:

This pink underline on a multilined link obscures the text a bit:

I just noticed the ‘handbook’ link in the footer - is that new to this version? it’s great that you’re sharing it either way.

The fact that this menu has a border on only 2 sides and is seemingly hovering in the middle of the page rather than being connected to the hamburger menu is a wee bit strange

I agree with @naotohieda that the square profile picture in the top right looks a bit put of place - it’s also really inconsistent with the logged-out menu icon (which to be fair is the case on the vast majority of sites).

I really like the dashboard! It’s so much nicer than the current one.

bug: the 404 page doesn’t show the logged-in menu bar?

Trying to toggle ‘boosted’ on a project in the dashboard (I don’t have glitch pro) gives a funky error.

Overall this is a really lovely update and a much improved mobile experience, thanks!

[WilsontheWolf]

Things are looking good. I’ve once again click the send magic link button on the login without inputting any info (how does this keep happening?) and it still errors. Should add some client side validation there. Also I’ll take a look at your hotdog stand theme

[WilsontheWolf]

Some dark mode issues:

The mention is hidden and the teams look weird.
Hyperlink text here looks weird

I found going to the aframe project is getting a 503 first byte timeout. This causes a project not found page. Could this be cause its owned by a group?

Also the aframe group just shows a user not found

[WilsontheWolf]

:root {
  /* Layout */
  --color-background: #ffff00;
  --color-page-background: #ff0000;
  --color-border-solid: #ffff00;
  --color-content-background: #ffff00;

  /* Links */
  --color-link: #5912d8;
  --color-link-hover: #350b84;
  --color-link-dark: black;
  --color-link-dark-hover: #ff0000;

  /* Typography */
  --color-heading: black;
  --color-text: black;
  
  /* idk */
  --color-button-primary: #ffa700;
}

There we go. I took a few creative liberties for things like links

[jenn]

thank you for doing this so i didn’t have to

[WilsontheWolf]

It appears that navigating directly to (or reloading on) https://preview.glitch.com/dashboard will cause it to get stuck in a redirect loop between it and login. I’m on firefox in case that matters.

[naotohieda]

is it an expected behavior that I have to “I’m not a robot” both when entering email address and again when I type in the password?

[wh0]

I think you don’t have to when you enter your email, if you intend to sign in with a password. just click the sign in when password link without doing the captcha. it’s only a link to the password sign in page

[naotohieda]

Ok I get what you mean but I guess that’s confusing as a user interface!