Design comparison
Solution retrospective
Hey -
This one REALLY pushed me but it was amazing to get the info from API - made me feel like I am really getting somewhere.
I'm looking for any good ideas on where to learn how to shorten up my code. Like tips so you're thinking more about how to shorten stuff up. My code is very explicit and non-elegant. It works, though!
Community feedback
- @FlorianJourdePosted over 2 years ago
Hey, man ! Nice job on this one ! You did it particullary well with the API exploitation, congrats !
However, I'm trying to get focus into Git at the moment, mainly PR and stuffs like that... so I when I saw your project posted on Slack, and though about optimization and refactoring, I tried to custom your project on my own.
Here's some example about what I did :
- Adjusting your CSS classes names. For example, I replaced
userName
by 'user-name'. I think that Camel Case doesn't suits to classes names. It's better for JS variables, or CSS-in-JS usecases ; - Reducing your
reset.css
file. I don't use to work with them, but I noticed that your reset was overriding everything. So I just switechd to a more minimalistic one, feel free to keep it or not ! - Optimizing the responsivity, by adding a
@media
query. I just tried to get rid of yourrem
stuffs, and use the power of flexboxes as much as I can ! You must know that, for projects like that, it's more natural to go with "mobile-first-workflow". At the end, you'l write less code while adding your media queries for desktop ! - I almost left your
app.js
like it was, since it's perfectly working with the API ! So I just changed your classnames here, again. Same for HTML.
Hope you'll learn some stuffs ! Tell me if something bothering you, and good luck for the next challeges !
Marked as helpful0@maxkaiser100Posted over 2 years ago@FlorianJourde
This is great. Thank you! I'll dig right in. I didn't know about those conventions, so very helpful.
BTW - working through how to make it responsive to users color scheme preferences right now.
0@FlorianJourdePosted over 2 years ago@maxkaiser100 Are you familiar with Pull Requests en GitHub ?
It means that I made another branch on you project on my local computer, to propose you another way of organising your code.
So from now, you can check the differences on GitHub, and decide to merge my modifications with your project, or reject it.
You can have a look to the open Pull Request open on your GitHub project page, if your want :)
0@maxkaiser100Posted over 2 years ago@FlorianJourde I saw that. I've not tried those before.
One thing, I've been working on my code since you made those changes - how does it handle that?
0@FlorianJourdePosted over 2 years ago@maxkaiser100 If you worked on the main branch, your changes will be overwrite.
Usually, in this case, the best option is to keep your changes womewhere else (copy them in other files on your computer), merge the branch
development
to themain
one, and then redo your changes. Or you can reject the pull request, but I think it's a nice exercice to try to work collaboratively, to make sure your code works with someone else's one !Here is a simple diagram about how GitHub should work : creating differents branches and merge them give you the ability to treat changes separately !
Don't hesitate to ask questions, I'll try to answer as much as I can - at least with what I know !
0 - Adjusting your CSS classes names. For example, I replaced
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord