Random Quote Machine and Perfectionism question - Feedback needed

Hi, all! I somewhat finished building my Random Quote Machine (at least, fulfilled all user stories). As I’m coding alone, I would appreciate any feedback on the code. http://codepen.io/Helga108/pen/WRBymE

I couldn’t figure out how to prevent my div from “bouncing” while cleaning it from the previous quote.

And also I haven’t done the color change thing. If you could suggest any resources on these topics or anything - that’d be much appreciated.

Also, do you think it’s better to polish each project to perfection or to make other projects and come back and improve as I learn more?

Thanks!

Hey, you didn’t include a link to share…

Regarding perfectionism, I think you learn more and more from each project’s unique challenges and overcoming those challenges informs all your code from that point forward. If you revisit anything after getting more experienced, you’ll probably still find things to improve upon in projects that at one time you thought were perfect.

My own approach is a tiered system of doneness:

  • get the projects working, free of any known major bugs, and meeting the user stories
  • meet my own internal standards of what was “good enough” - the look and feel, working on major browsers & phone/tablet, responsive
  • keep a list of “nice to haves” and minor adjustments for each project to return to in the future
  • if I was sick of the project, move on. if I was thinking about showcasing it, or I was enjoying it, keep working on it, but move on to the next project anyway. At some point there is diminishing returns in getting something perfect.

^ and yeah that meant sometimes I was working on 3 or 4 projects at once, but that really helped keep frustration down, if I was stuck on some problem.

1 Like

Oh! The link! I was sure I included it. Thanks! Edited the post now!
Thanks on your thoughts on perfectionism. Great idea to keep a list of “nice haves”. Will do that!

1 Like

If you don’t want it to bounce, don’t clear out the last message before the new one is retrieved, because then it’s empty until the new quote is returned, and there’s a visible lag. Instead put your .empty inside the getJSON callback.
Note, it will still bounce slightly, if the new quote is shorter or longer than the old one.

1 Like

Oh! Thanks a lot! That’s much better now http://codepen.io/Helga108/pen/ggNoyZ I’m not sure why, though)) Probably it’s because calling empty inside the same function is faster. Right?

The erase and the append new message is fast either way; the bottleneck is the api call to get a quote, like 1/2 second or more sometimes.

So the original way you had it erased the original message (div popped down to a short size in reaction), and then it stayed that way for up to a second while the new quote was retrieved. Then fill the message with the new quote, BOING, a visible bounce.

The new way keeps whatever original quote is displaying all the way up until the time that you have the new quote at your disposal. Then erase the quote and immediately stick in the new quote. The div still shrinks down between your erase statement and your insertion of the new quote, but it’s so fast you can’t see it.

Thank you for such a deep explanation and your help. Now it’s much more clear.

1 Like