search

scratchfoundation / scratch-www

Standalone web client for Scratch
https://scratch.mit.edu
BSD 3-Clause "New" or "Revised" License
1.6k stars 847 forks source link

Project page: when remix user image doesn't load, username appears twice #2544

Open BryceLTaylor opened 5 years ago

BryceLTaylor commented 5 years ago

If you load a project page for a project with remixes, and one of the remixers has no/a broken profile image, the username is written twice, once on top of the other.

screen shot 2018-12-27 at 1 11 59 pm

The second appearance of the name (the blue one in the same font as the project title) seems to be the alt text of the user profile image.

Steps to Reproduce

Load this project: https://scratch.ly/projects/26351912/ Look at the remixes Note: one of them has the username written twice

Operating System and Browser

Mac Chrome

joker314 commented 5 years ago

The correct behaviour is to set the alt attribute to the empty string, because it conveys no additional information given that the username is placed beside it.

radioblahaj commented 5 years ago

I can take this Issue. /cc @thisandagain @mewtaylor

thisandagain commented 5 years ago

@IamTregsthedev Sounds great! Thanks! 🐱

radioblahaj commented 5 years ago

@thisandagain Where is the file, and what do i add?

benjiwheeler commented 5 years ago

@IamTregsthedev I would start by looking at the file src/views/preview/presentation.jsx, and seeing where it renders the component in the file remix-list.jsx. Beyond that, we can't tell you what to add, because we don't know yet, but look for the logic around when the remix list items show the username.

Good luck, and thanks for taking a look!

radioblahaj commented 5 years ago

No Problem. It'll be a bit hard for myself to FInd out what to fix and not, i'm not good with jsx, but i'll try. Thanks! :)

radioblahaj commented 5 years ago

@benjiwheeler Is it possible for you to send a screenshot from the link given? It's a Scratch Team Only Site, and I want to see for myself.

joker314 commented 5 years ago

Hi @IamTregsthedev -- it turns out that the links that @benjiwheeler was giving you are actually available to everybody.

They are relative URLs to the base of the repository. Here they are in their full form:

JSX can be confusing at first, so if you do need any help please do feel free to ask!

Here are some initial observations which might be helpful:

Bonus points: on line 83, there is no alt attribute set, as far as I can tell. Some screen-readers will read out the filename if no alt is set, so if you want to leave the alt blank you should always set it to the empty string. If you want an extra challenge, you might want to add an alt to this image.

Remember, if you need help, please do ask!

radioblahaj commented 5 years ago

@joker314

I'm really sorry but I'm not good with jsx, and not sure what to do. I really want to take this Issue though. From your Post ^, I didin't get what to add and where properly.

radioblahaj commented 5 years ago

Hi @IamTregsthedev -- it turns out that the links that @benjiwheeler was giving you are actually available to everybody.

They are relative URLs to the base of the repository. Here they are in their full form:

JSX can be confusing at first, so if you do need any help please do feel free to ask!

Here are some initial observations which might be helpful:

  • The second file uses the ThumbnailColumn component, and this looks like where the bug might be.
  • On Line 5, we learn where ThumbnailColumn is defined -- it's another file: ../../components/thumbnailcolumn/thumbnailcolumn.jsx -- the ../ is a short-hand for "the directory (folder) that holds me" -- and this construction is called a 'Relative URL' -- a URL which points to different things depending on context.
  • Following the series of ../ back some folders, and then following the rest of the URL normally forwards some folders, you'll get to this file: https://github.com/LLK/scratch-www/blob/develop/src/components/thumbnailcolumn/thumbnailcolumn.jsx
  • This leads us to the Thumbnail component. Following the same set of steps we can find which file defines it: https://github.com/LLK/scratch-www/blob/develop/src/components/thumbnail/thumbnail.jsx
  • Aha! On line 107, we notice that the alt attribute of an image is being set to the creator of the project. Here you'll need to make some changes to make the alt attribute be set to the empty string.

Bonus points: on line 83, there is no alt attribute set, as far as I can tell. Some screen-readers will read out the filename if no alt is set, so if you want to leave the alt blank you should always set it to the empty string. If you want an extra challenge, you might want to add an alt to this image.

Remember, if you need help, please do ask!

About scratch.ly link

benjiwheeler commented 5 years ago

Thanks for your attention to this, @IamTregsthedev and @joker314 ! @joker314, thanks for that great explanation.

scratch.ly is not available to the public, it's true. But you don't need it to do this fix.

@IamTregsthedev, if you don't think you can follow the explanation that @joker314 gave, you might want to work your way through an introduction to React tutorial. That's how I started to learn it a few years ago. React seemed super confusing to me at the start!

A good place to start is “Introduction to React — where to start?” by Tiago Gomes https://link.medium.com/TCpa4XP2jT

If this code issue isn't the right one for you to help with, no worries. There will be plenty!!

You might want to focus on the scratch-gui repo and scratch-paint repo, because those are more simple to run in your own local development environment than scratch-www.

radioblahaj commented 5 years ago

Thanks, I Learn React, and I'll get this done soon. But, Where do i add the stuff, like i want the lines of code plz, and where to put in a easier way told. Thanks @joker314 and @benjiwheeler for your help

bs2kbs2k commented 3 years ago

Since @IamTregsthedev looks like he is having trouble and this issue looks not-worked-on, I'll try to fix it.

radioblahaj commented 3 years ago

@bs2kbs2k I forget about this lmao. You can take it, I'm sorry