Planets - ReactJS, Styled-Components, Framer Motion, Webpack

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  Hi, tediko! 👋

  This looks awesome! 🤩 I love the extra-page and animations that you added and everything else looks really, really good! 👏

  Your code looks nice, as well! 😀 I sometimes feel like my styles are all-over-the-place when I finally finish a project, too, but I think you've used styled-components rather well! 👍

  A few tiny suggestions I have are,

  • Setting the root font-size of the document to a percentage (rather than a fixed value) so that users can scale the design of your app up/down by changing the default font-size of their browser (which is good for accessibility).
  • Probably using rem rather than px in your media queries (so that the breakpoints in your styles will scale with any changes made to the root font-size of the document and consequently, with the rest of the design).
  • Using unit-less values for line-height, such as 1.5 or 1.75, etc. (which is often considered a good practice because then the line-height will be proportional to the given font-size).
  • Perhaps skipping ItemController.js for the header navigation and just putting that code in NavDesktop.js instead. They are just both pretty small components so it might be a little easier for them to be together. But just a thought! 😅

  But those are like teeny-tiny things because I can't find other stuff to suggest! 😆

  Kontynuuj kodowanie (i szczęśliwego kodowania)! 😁

  (Mam nadzieję, że tłumaczenie Google nie przetłumaczyło tego wyrażenia niepoprawnie!) 🙏

  Marked as helpful

  3

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  One more thing—the solution report is complaining about bgcolor not being a valid HTML attribute on the navigation links. I just recently found out that you can prefix props like those (that are only meant to be used by styled-components) with a $ sign, so that they are used by styled-components but do not get passed down to the underlying HTML element (so $bgColor instead of just bgColor). 😉

  3

  

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  @ApplePieGiraffe Hello, APG! Thank you very much for exhaustive feedback, as always! :)

  To begin with, I would like to mention the first two points. I once read Zellwk article about which unit we should use for a queries. After that I was about to switch from using pixels for root element aswell as using pixels units for media-queries to using percentages and rems/ems for queries. But I wanted to read other perspective on that topic and I came across Adam Wathan article where he challenged Zellwk's approach and tests and showed his perspective. He said that "Pixels are the only unit that behave consistently across all commonly used browsers" and he stressed that we should "set an explicit root font size in pixels. It will override the user's custom default font size which is mildly annoying for the user, but it will force them to zoom instead which always behaves the way you want.". Maybe you have more recent articles on that?

  I'll start using unit-less values for line-height. Now I read that this is the preferred way to set line-height and avoid unexpected results due to inheritance. You've right also on keeping my two small components together. Both ItemController and NavDesktop are so small so they can fit in one component. Except that thanks for pointing me that I can prefix props for styled-components!

  You did great with Polish! Keep coding too! :)

  1

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  @tediko

  Those are actually very interesting articles—thanks for sharing them! 😀 I should probably be careful about what I say relating to font-sizes 😆, but I think I should probably also look into this some more on my own. 😄 So I guess that's definitely another approach! 👍

  Looking forward to your next challenge! 😉

  1
• 

  Anna Leigh•5,135

  @brasspetalsPosted over 3 years ago

  Finally getting around to submitting my comment for this. Absolutely awesome job, tediko!!! 🎉🙌 The homepage/intro is absolutely spectacular (one could say, out of this world 😉). Making the orbiting planets into links for the planet pages, and also adding the orbit color change on hover is great! The whole UX is just lovely, and it responds really well.

  Unfortunately I don’t have much constructive feedback on the React front, but I did find some very small design elements that could be tweaked:

  • Saturn is getting a bit cut off in the homepage animation. To fix this, change the Saturn ::before width to about 55px, and then add the following:

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  

  • The tab numbers (for overview/internal structure/surface geology) on desktop and larger medium styles are actually a transparent white, rather than a gray. That way when the tabs are selected/active, the color shows through a bit. Switching from the gray to rgba(255, 255, 255, 0.5) should fix it.

  Marked as helpful

  2

  ---

  

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  @brasspetals Thank you for kind words and feedback! You have very good eye and I can now say that Saturn got the rings back 😅 I made a tab numbers color transparent aswell. Thanks!

  1
• 

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  🌟🌟🌟🌟🌟 Wow really really nice @tediko

  You did a super wonderful job.... The one thing and I hate to mention it but will that I found lacking was on the wonderful solar system animation that you could not click one of the animated planets to open its page of information

  Great Job 🌠🌠🌠🌠🌠

  Marked as helpful

  2

  ---

  

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  @palgramming Thank you very much! I had it in my head at the beginning of the project but it totally slipped my mind. I'll have to take the time to do this and add this functionality! Good catch!

  Edit: I turned planets into links, additionally added a zooming effect when hitting the orbit.

  3
• 

  P

  Akasha•5

  @AkashaRojeePosted over 3 years ago

  Wow, this looks amazing!

  I love the idea of the animated solar system. React is new to me, but I like the code structure, and I find the usage of components interesting.

  Definitely bookmarking this and going through the code again to learn from this.

  Well done on the creativity!

  1

  ---

  

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  @AkashaRojee Thank you very much for your feedback! I am glad that you liked it. Hope you will find something useful in my project! :)

  0
• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Wow, this looks amazing well done! I haven't looked at the code, but the overall look and feel of it is great 👏

  The only small design thing I notice is the shade of blue in the background isn't as vibrant as the design. I'd want to tweak that I think

  That's all from me today. I look forward to looking at the code tomorrow (reminder is set!!)

  1

  ---

  

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  @grace-snow Thank you! I'm glad you liked it. I changed that background back and forth and I couldn't decide. I change it now and make it just like in design, still not sure about it tho 😅

  0

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  @tediko I’m afraid the menu is broken on this on my new iPhone. It slides in but all I see is circles at the very edge of my screen, not the full menu ... and on every click (of anything interactive) as animations start there’s a nasty flicker/flash.

  These are honestly the bugs I hate though, very hard to debug as it’s clearly operating system specific 😭

  1

  

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  @grace-snow Oh wow, that sounds bad. I checked on iPhone 7 with iOS 14.6 and everything works well. I won't even be able to fix it because I won't be able to reproduce this error since I don't have access to other iOS devices. 😔

  0

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  @tediko yeah the only way I know of to see it is via browserstack, but you only get free access for a minute and you can’t inspect code in there. It’s really strange issues (I am on iPhone 12 mini)

  1

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Wait! I’ve just updated to the latest iOS version and the menu works now! It must’ve been an OS specific bug that they’ve fixed with a patch. Happy days!

  1

  

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  @grace-snow Haha😅 I wonder what was the cause. I am looking over my code and the first thing that comes to my mind is inset property which is a shorthand that corresponds to the top, right, bottom and left. I checked on caniuse and it is supported on Safari on iOS from version 14.5 (Released Apr 26, 2021) so maybe that was the issue?

  1
• 

  Michal•665

  @mbart13Posted over 3 years ago

  That's like the ultimate solution to this challenge, no point even attempting

  Thanks! :P

  but seriously, isn't 'defer' implied with modules? I'm not sure we have to add it in 'script' tag

  1

  ---

  

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  @mbart13 Thank you very much! I am sure that there is a lot of ideas left to complete this project :D

  From what I've read defer is ignored and has no effect for inline (non-module) scripts because they are executed immediately. Inline scripts are the ones without src. Module scripts are deferred by default. As such, there is no need to add defer to your tags but since I didn't use type="module" I have to define how to load my JS. Now if I think about it, it seems to me that at the time of using React it is ***not *** needed because the whole render of my page is done in a JS file.

  0
• 

  bunee•2,020

  @buneeIsSloPosted over 3 years ago

  @tediko, This is SO good! I really admire your creativity on this. You've done incredible :)

  1

  ---

  

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  @buneeIsSlo Thank you! I'm glad you liked it.

  1