Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

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

tediko 6,170

@tediko

Desktop design screenshot for the Planets fact site coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison

SolutionDesign

Reports

Accessibility report (2)
warning

Document should have one main landmark

<html lang="en">
Learn more
warning

All page content should be contained by landmarks

<div class="sc-iJCRrE cdqvEJ" style="opacity: 0; transform: scale(6) rotate(-40deg) translateZ(0px);">
Learn more

tediko’s questions for the community

Hello👋!

This is my second project build with React JS. This time I had the opportunity to try styled-components. It is a very powerful tool, but I believe it takes time to learn good practices and organize the code. Right now, I have the feeling that my styles are chaotic but I'm looking forward to correct it and use styled-components to its full potential. In order not to stick to design, I decided to recreate the animated solar system as the home page. Additionally, I added transitions while the route change.

  • I used ReactJS library to create an app. React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. Read More(1) - Watch tutorial(2)
  • I tried to write a project using styled-components library. Styled Components are one of the new ways to use CSS in modern JavaScript. It is the meant to be a successor of CSS Modules, a way to write CSS that's scoped to a single component, and not leak to any other element in the page. Also allows you to write plain CSS in your components without worrying about class name collisions. Read More
  • The first time I used Prettier. Prettier is an opinionated code formatter. It removes all original styling and ensures that all outputted code conforms to a consistent style. Read More
  • To animate the pages transitions and mobile-menu animations I used Framer Motion API. Framer Motion is an open source, production-ready library that's designed for creating creative animations. Read More
  • The solar system was recreated from this great Codepen created by Malik Dellidj. It's nothing complicated, it's all based on div rotation with pseudo-elements inside that contains the images of the planets. I recommend you try it yourself!
  • Added counter() function for my pseudo-elements content in Tab button. CSS counters let you adjust the appearance of content based on its location in a document. For example, you can use counters to automatically number the headings in a webpage. Watch video(1). Read More(2)
  • Implemented defer to my script tag. The defer attribute tells the browser not to wait for the script. Instead, the browser will continue to process the HTML, build DOM. The script is fetched asynchronously, and it’s executed only after the HTML parsing is done.

You can find more about the things I used in the project in the README on github. I just wanted to point out new things here.

Additional feedback or a criticism will be appreciated! 😅

Thanks! 😁

Community feedback

P
ApplePieGiraffe 30,105

@ApplePieGiraffe

Posted

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


P
ApplePieGiraffe 30,105

@ApplePieGiraffe

Posted

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

tediko 6,170

@tediko

Posted

@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

P
ApplePieGiraffe 30,105

@ApplePieGiraffe

Posted

@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

P
Anna Leigh 5,135

@brasspetals

Posted

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


tediko 6,170

@tediko

Posted

@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,525

@palgramming

Posted

🌟🌟🌟🌟🌟 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


tediko 6,170

@tediko

Posted

@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

Akasha 5

@AkashaRojee

Posted

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


tediko 6,170

@tediko

Posted

@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

P
Grace 23,610

@grace-snow

Posted

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


tediko 6,170

@tediko

Posted

@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

P
Grace 23,610

@grace-snow

Posted

@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

tediko 6,170

@tediko

Posted

@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

P
Grace 23,610

@grace-snow

Posted

@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

P
Grace 23,610

@grace-snow

Posted

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

tediko 6,170

@tediko

Posted

@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 685

@mbart13

Posted

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


tediko 6,170

@tediko

Posted

@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,000

@buneeIsSlo

Posted

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

1


tediko 6,170

@tediko

Posted

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

1

Please log in to post a comment

Log in with GitHub
Slack logo

Join our Slack community

Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!