Some help in scratch-www

mewtaylor

Hey everyone!

We have a couple new items in the www project that we could use your help with:

https://github.com/LLK/scratch-www/issues/396
https://github.com/LLK/scratch-www/issues/395

These issues deal with certain parts of the homepage that appear blank or incorrectly while waiting for data from the api.

Why this matters – when the homepage loads in your browser, it doesn't know if you've logged in yet, and needs to check the database for that info. Currently, while it's waiting for the server to respond, it looks like the user is logged out. This usually is for a brief amount of time, but sometimes the server can take a while. This lag can be confusing for Scratchers, who don't realize that they're waiting for the server, and instead think they got logged out somehow.

What a “default state” means – this means displaying something simple to a user that suggests to them that their data is not fully loaded yet, and that they need to wait before they take any further action. An example of what this looks like – when you go to the scratch homepage, look at the Featured Projects row before it loads projects. You should see an empty box, with a title underneath that says “Project”.

How to help – we could use your help implementing both of these features. For the nav bar issue, there is already a good suggestion by @raimondious about how to do it. For the other one, we don't have a specific design in place yet, so feel free to try out some ideas.

Things to keep in mind when you're designing a “default” state

It should show the user that it's missing information – this is why “blank” states can be helpful
It should be simple – if it includes lots of transitions, for instance, that can be a burden on the user as they wait

And, as always, make sure to check out the scratch-www wiki if you need some help getting started!

liam48D

I've noticed a lot of sites have these loading bars at the top of the screen that appear when switching to different pages – for example, you can see a loading bar when going from one YouTube video to another, and when going from one GitHub repository issue to another.

What happens if you go to the homepage from a discussion topic? As it is now you get to the landing screen that looks like you're logged out (as mentioned in the OP). To fix this a resource loading bar is introduced to the top of the page (fixed). As the home page's resources load, the loading bar progresses.

But how do you fit this loading bar into the discussion topic page? The discussion topic and the home page aren't built with the same frontend at all, so one of two things would need to be done:

Code the loading bar into both the old frontend and the new frontend. Unfortunately this isn't really possible because while it's (maybe?) easy to reconstruct the document using React, you can't really do this with the old frontend (non-migrated parts of the site).
Just make the home page have an initial state while its resources are loading. With this you can still have the loading bar for the homepage (and all other migrated pages) but this solution brings us back to the original problem (haha, OP, get it?) – what should this default state be?

Maybe the default state could be a blank page. That doesn't look very nice so maybe something like this could be used?

<!-- html if anybody's wondering -->
<body>
  <img style="position: fixed; top: calc(50vh - 130px); left: calc(50vw - 100px);" src="https://upload.wikimedia.org/wikipedia/commons/d/d4/Scratchcat.svg" width="200">
  <p style="text-align: center; position: fixed; left: 0px; width: 100%; top: calc(50% + 70px); font-family: &quot;Helvetica Neue&quot;; font-size: 20px;">Loading...</p>
</body>

Just throwing out my opinion and observations here.

202e-202e-202e-202e-202e UNI-CODE~~~~~

mewtaylor

You bring up some great points, @liam48D! For the nav bar, while the loading bar might be interesting for the future, I think the other suggestion you have of a blank state might be the best way to go for now – as @raimondious mentions, that's already how we do it with the nav bar on the old site, so matching that would be good.

For the other link in the OP (the “What's Happening?” section), that only appears on the homepage, so we can think about that one some more

Jonathan50

liam48D wrote:

<!-- html if anybody's wondering -->
<body>
  <img style="position: fixed; top: calc(50vh - 130px); left: calc(50vw - 100px);" src="https://upload.wikimedia.org/wikipedia/commons/d/d4/Scratchcat.svg" width="200">
  <p style="text-align: center; position: fixed; left: 0px; width: 100%; top: calc(50% + 70px); font-family: &quot;Helvetica Neue&quot;; font-size: 20px;">Loading...</p>
</body>

I think somebody (@comp09?) said Google doesn't like styling like that.
Oh, I found it.

Not yet a Knight of the Mu Calculus.

scratchisthebest

While we're talking about default states, the default state for the homepage says "over 13 million projects shared."

Maybe you should update that number…

I am a Lava Expert

The_Grits

scratchisthebest wrote:
While we're talking about default states, the default state for the homepage says "over 13 million projects shared."

Maybe you should update that number…

I think that may have been dealt with already…

Scratch Wiki: https://wiki.scratch.mit.edu
Help with Scripts forum: https://scratch.mit.edu/discuss/7/
Questions about Scratch forum: https://scratch.mit.edu/discuss/4/
Contact the ST: https://scratch.mit.edu/contact-us/

scratchisthebest

The_Grits wrote:
scratchisthebest wrote:
While we're talking about default states, the default state for the homepage says "over 13 million projects shared."

Maybe you should update that number…
I think that may have been dealt with already…

Nope

When you go to the homepage, it gives you a static “over 13 million projects shared” message, then updates to the actual number of projects shared (then disappears and is replaced with “What's Happening” if you're logged in)

The point is that it says “over 13 million” when there's really over 14 million

I am a Lava Expert

-Radical-

scratchisthebest wrote:
The point is that it says “over 13 million” when there's really over 14 million

Yeah, I noticed that too. I think it's hard-coded.

Sincerely, probably me. Maybe myself. Or sometimes I.

Signature last updated on 5/15/16

The_Grits

scratchisthebest wrote:
The_Grits wrote:
scratchisthebest wrote:
While we're talking about default states, the default state for the homepage says "over 13 million projects shared."

Maybe you should update that number…
I think that may have been dealt with already…
Nope

When you go to the homepage, it gives you a static “over 13 million projects shared” message, then updates to the actual number of projects shared (then disappears and is replaced with “What's Happening” if you're logged in)

The point is that it says “over 13 million” when there's really over 14 million

My point is that it used to be an arbitrary number, and that I made that fix to 13 million. (I didn't know it already went live though)

Scratch Wiki: https://wiki.scratch.mit.edu
Help with Scripts forum: https://scratch.mit.edu/discuss/7/
Questions about Scratch forum: https://scratch.mit.edu/discuss/4/
Contact the ST: https://scratch.mit.edu/contact-us/

mewtaylor

Thanks for the heads up! I'll add an issue for it

. In the meantime, if you plan on taking a look at the issues listed in this topic, please let us know too!

Jonathan50

And then another million projects might be made. Is it worthwhile to manually update it?

Not yet a Knight of the Mu Calculus.

mewtaylor

@Jonathan50 good point – I'll include a note about that in the issue

Discuss Scratch