DEV Community

Yuri Alves
Yuri Alves

Posted on

😊Feedback, please

I have made this within 24 hours.
https://thesheddev.netlify.app/
I have even added a system for the admin(me), to create posts (let me know if I should do a tutorial on that).

Top comments (13)

Collapse
 
alexanderjanke profile image
Alex Janke

Looks neat, pretty minimalistic which is nice.

Noticed one minor UX thing though:
When you hover over the "Ready! Set! Go!"-card, the whole card gets "focused" and the cursor changes to a pointer.. but I can't click the card. Only the button "Read more" is actually a link. For a more clear user navigation you'd need to remove the cursor pointer on the card and only make it available on the button - or make the whole card a link.
Apart from that you could also improve some of the load by minimizing your .css and .js files.

I know it's nothing huge but you can also improve some readability in your .js file by using template literals.

With string concatenation

$(".posts")
.prepend("<div data-id='"+id + "' class=\"post\"><strong>" + Title + "</strong><p>"+ ShortDesc + "</p><button onclick=\"viewPost(" + id +")\">Read more</button></div>");
Enter fullscreen mode Exit fullscreen mode

With template literals (string interpolation)

$(".posts")
.prepend(`
<div data-id="${id}" class="post">
  <strong>${Title}</strong>
  <p>${ShortDesc}</p>
  <button onclick="viewPost(${id})">Read more</button>
</div>`);
Enter fullscreen mode Exit fullscreen mode
Collapse
 
yuriguernsey profile image
Yuri Alves

Thank you 😊. That was some really useful feedback. I will start working on Thorne points. 😱 you looked at my terrible code. Haha thank you for that. I don’t know why I didn’t do it that way to be honest, but thank you for the reminder.

Collapse
 
alexanderjanke profile image
Alex Janke

You're welcome. None of these points are actually super important but it's the little things that add up over time :)

you looked at my terrible code

To be honest I didn't really read it.. 😉 Just opened the .js and saw the really long string concatenation. Though I do wonder if you really need jQuery for a site like this

Thread Thread
 
yuriguernsey profile image
Yuri Alves

That’s very true.
Oh thank god haha.
To be honest no. I’ve just been using it for so long I have gotten lazy to write proper JavaScript haha. I should probably remove it

Collapse
 
fawazahmed0 profile image
Fawaz Ahmed

Hey, this might be relevant to you:
dev.to/fawazahmed0/the-solo-develo...

Collapse
 
ben profile image
Ben Halpern

Fun, clean delightful site.

Collapse
 
yuriguernsey profile image
Yuri Alves

Thank you 😊

Collapse
 
buraksaraloglu profile image
Burak Saraloglu

Dark/Light mode is not working.

Collapse
 
yuriguernsey profile image
Yuri Alves

I’ll be sure to fix it

Collapse
 
ptprashanttripathi profile image
Pt. Prashant tripathi

Issue : Light and dark mode switch button is not working in android browsers

Collapse
 
yuriguernsey profile image
Yuri Alves

Working on fixing this now 😊

Collapse
 
cescquintero profile image
Francisco Quintero 🇨🇴

Looks good. I mean, it's an awesome design, simple, clean, and nice to the eyes.

Collapse
 
yuriguernsey profile image
Yuri Alves

Thank you 😊