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

Github Search

Max Kaiser 300

@maxkaiser100

Desktop design screenshot for the GitHub user search app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

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

P
Ctrl+FJ 750

@FlorianJourde

Posted

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 your rem 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 helpful

0

Max Kaiser 300

@maxkaiser100

Posted

@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
P
Ctrl+FJ 750

@FlorianJourde

Posted

@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
Max Kaiser 300

@maxkaiser100

Posted

@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
P
Ctrl+FJ 750

@FlorianJourde

Posted

@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 the main 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

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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