[Sneak peek!] Glitch development preview!

Welcome! Today we launched preview.glitch.com — an early look at a new version of the Glitch site, which we’re rebuilding from the ground up in collaboration with you, our community. We wanted to get back to our roots of building in public, and also use this developer preview to show off cool new features across the Glitch platform, starting with things like our starter apps, updated versions of the containers that run your apps, lots of new ideas in user interface and discovery, and lots more so we can get as much feedback from you as possible.

We’re really, really excited, and grateful to all of you who join in on helping us shape the future of Glitch. We’re doing this work because it’s obviously been a while since Glitch first started, and there are lots of new things we want to make it easy to do on the platform, as well as lots of dusty corners of the platform that could use some refreshing or updating (yes, we hear you about updating Node!). And honestly, Glitch is a lot more fun for everyone when we build it together.

Right now this preview Glitch site is showing off the very first big steps we’ve taken:

  • Moving our front-end to a modern framework (Remix) so we can iterate faster
  • Massively improving lighthouse scores, accessibility, and overall performance to offer a better experience for every user
  • Improved support for theming so we can iterate on design (and yep…. dark mode!)
  • You’ll also see the very first hints at our new design system being implemented — to make things easy, we started by making the new site resemble the familiar classic Glitch experience as much as possible, but that’ll change soon!

We’re so excited to build a new Glitch together as a community. We’ve set up this thread so you can tell us what you think. We want to hear from you so please don’t be shy!

What to look for

  • This is an early preview, so there’s a lot that’s not in place yet. You’ll see lots of placeholder UI as we build and iterate.
  • To log in you’ll need to use your email and password or our magic link feature — we haven’t implemented OAuth on the preview site. But once you log in you’ll see the start of an all-new dashboard!
  • You’ll see plenty of 404s as you navigate. We’ve focused so far on the bones of the site and will fill out pages with future updates.
  • User pages, team pages, and project pages have been our main focus; specifically around performance, data fetching, and laying groundwork for customization. Check out a few examples and you’ll notice how fast everything loads:

How you can help

  • It’s not building in public if you can’t file bugs! And we’ll get to a public bug tracker soon, but for this stage just jump into this thread and let us know what you see.
10 Likes

(FIXED!) BUG: User page needs a little dark mode love. (Firefox on Mac)

BUG: A few elements on the dashboard page need dark mode love too (sortable headings, action buttons, info glyphs next to “Boosted Projects” and “Project Hours”) and the pager at the bottom (not pictured).

(FIXED!) BUG: On the dashboard page the hover state on “You own” “You’re a member” and “Archived” makes them disappear

BUG: If you click the “Download” button for a project the progress bar and spinner at the top of the page never stop progressing/spinning.

BUG: On a page load, in dark mode, there’s a flash of unstyled content (the page flashes white and then switches to dark mode). (I repro’d this one on safari on ios as well)

BUG: The “LET’S GO” button on the home page could be more readable.

BUG: While logged in, just refreshing the home page a few times (I repro’d in fewer than 10 refreshes) can result in an Error page with no stack trace…

https link https://preview.glitch.com/

3 Likes

So exciting :heart_eyes: We’ve been hard at work on this new version of Glitch for some time now and appreciate the reports as we start opening it up. The focus has been on :running_man: speed and accessibility, with a huge bump in our lighthouse scores. Now that we’re opening it up to all of you, we’ll be building in public and taking your feedback into each of our iteration cycles.

What I’m working on now is the error states, so if you do end up in a bad place it’s easy to understand why, and navigate away from it.

Keep these coming!! We’ve been paying attention to dark mode (and just added the little toggle at the bottom so you can get out of dark mode if you’d like – it defaults to your system setting) but primarily laying things out in light mode. We’ll tackle these ASAP!

3 Likes

Ok so I did a bit of a brainfart, and just click the send magic link button without typing in my email or doing the captcha and got an error page. Should probably add some validation there.

Hmm login with the magic code redirected me to Glitch which then errored. Clicking login redirected me back to the dashboard, but clicking home redirected me to the root, which then showed I was logged in. Dashboard is still erroring though.

The grey here doesn’t look very good to me.

I think it looks a bit better with no background (text isn’t the best)

or maybe with a transparent black background


or transparent white background

2 Likes

I can see in the logs the error you hit, and you should be able to view your dashboard now. Sorry about that!

Transparent background is a good idea!

If you take a look at the underpinnings of the profile page, you’ll see how we’ve defined each section with CSS properties, hopefully to give you a sense of customization coming :soon: :wink:

hi can you publish source maps :pray:

4 Likes

Works now, thanks.

A couple other things I’ve noticed:
The footer here is inconsistent with its external link usage.


Specifically Careers and Help Center are external links but don’t get the icon. The social media links don’t either but I think its fine because its assumed that they should be external.

Also I’ve noticed that user profile URL’s have changed from /@example to /user/example, so there should be some kind of redirect, so that when this replaces the old website, old links still work.
There were also broken playlist URL’s on a user’s profile before, but it looks like they were removed so that seems fine then.

One thing to note is that an invalid user’s 404 page could use some styling. E.G. https://preview.glitch.com/user/wtjoiwrjgwrg

2 Likes

This looks awesome ngl but I noticed some things:

  1. The glitch logo vanishes in darkmode (footer)
    image

  2. The project navigator and other elements are black on black

  3. The user dropdown is a tad buggy. For instance, clicking it will make it show up and vanish instantly. It seems that you’re supposed to hover but I’m so used to clicking lol

But besides that, this looks amazing

1 Like

Yeah I realized today that I instinctively typed the old URL structure. We’ll definitely set up some redirects — both for the sake of folks using Glitch but also for the sake of avoiding link rot. Connecting users and projects to the open web is more important than ever.

My fault! (Edited the original to fix. Thanks for catching it!)

2 Likes

Thanks for this! We’re using the icon for pages that open up in a new tab, but maybe these other external pages should as well. Keep the feedback coming!

1 Like

loving the visual updates so far!

on smaller screens, the bottom border (or underline?) has no space after the text.

It looks like the loading circle is on top of the “Log In” button. I think it would be better if the circle was somewhere else.
image

1 Like

The preview page looks great! As mentioned before, the default nprogress.js loader could certainly be customized and improved. The dark/light theme widget could move (maybe) to the top and be just a button instead of a select menu.

Some more small stuff:

  • Profile pictures with transparent backgrounds just show a black background
  • The buttons on the project page (Save * Share * Say thanks) look just like normal text
  • I’m not a big fan of the new decoration that shows on the profile icon (profile page)
  • The profile page looks like it’s missing a lot
  • (not important) Maybe improving the error pages?
  • I don’t know if it’s just me, but the logo at the top left corner looks a bit weird
  • The user dropdown doesn’t close when anything is clicked
  • The “Try something new” link at the footer isn’t very recognizable, maybe add an underline or/and a different color?
  • A “skip to main content” button when using tab seems missing, is this intentional?
  • Tapping the login button when already logged in shouldn’t work and seems to mess things up a bit.

But overall I really like the new website!

Some problems I’ve got:

I got this error after tapping the login button when logged in lol. It also shows in incognito mode (let’s hope I didn’t crash the whole server - for everyone - by accident :pray:)

picture of server going brrr

Edit 1: oh it’s back online again
Edit 2: Now I’m getting this when I refresh the dashboard: