6
votes
Feedback wanted on website/dev project
Hello ~comp,
I've been learning web development in my spare time with the hopes of one day becoming a professional web developer.
This is my latest project: https://github.com/farleykreynolds/toptenify. It's a small static site that pulls your listening data from the Spotify API.
I welcome any feedback on the design, code, or any other aspect of the project. Thank you!
There's one thing that immediately stands out to me as advice for you: consistency is king!
Note, for example, that you occasionally omit the semi-colon but use it copiously otherwise. While it's perfectly valid, you would do well to be consistent throughout. Similarly, you do multiple
constdeclarations separated by commas, and in one case I see all variable declarations following the first one being indented, but in the second case the variable declarations following the first one are not indented.Why does this matter? Because it makes your code predictable. If you follow one standard most of the time, then you're going to get confused when you stumble across code where you're not following that standard, or you'll make a mistake somewhere and your lack of consistency makes it easy to overlook where the error is. Consistency should be considered for syntax, indentation, placement of curly braces, the way you name things, etc.
Also, if you're wrapping a function in parentheses and immediately invoking the function, then you should perform the invocation after the closing paren, not before. That is, instead of
(function() { . . . }()), you should be doing(function() { . . . })(). It's clearer what you're trying to do this way, and in the first case the enclosing parentheses are completely useless and don't actually do anything helpful visually or functionally.Finally, if you're defining an immediately-invoked function and you're not calling it anywhere else, you don't need to give it a name. For example,
injectArtistData()isn't called anywhere by name. It's only called by immediate invocation. So instead of naming it, it's perfectly safe to omit the function name and just usefunction(). That being said, it's still perfectly valid and this could arguably be beneficial as it makes that little piece of your code "self-documenting".I won't comment on the HTML or CSS because, quite frankly, I'm not really much of a front-end guy, but it seems straightforward enough, which is good.
If you have any questions concerning the above, please let me know and I'll try to elaborate better on any points that I might not have explained clearly.
Thank you for the detailed feedback! I definitely forsook some consistency when I got in the weeds in a few places just trying to get stuff to work. I guess it's time to refactor!
Hey, a couple of quick feedback:
Keep experimenting!
Yep, I personally cannot work anymore without an eslint (hyperbole).
it just help me so much catching errors that I would get and test running or runtime.
Also, you can just set rules that you want to "learn" but are not that important as simple warnings so your OCD bothers you but you can power through and still deliver if you're tight on deadlines :)
This is good advice, getting into a good habit of testing is vital! especially in software-engineering. I feel like moving to ES6 may be a little much at the moment as one then needs to start including and using node/npm, babel, webpack and start learning a whole host of other technologies just to deploy a static application.
If you are learning to code, there is no need to deal with all of that (although I do think that it is important to get to know it further down the line as it is used widely in industry). I would say, definitely keep the fact that you are using an older version of Javascript (although very well supported) and that it would be worth looking into newer versions at some point. For your first project though, I would not worry too much about these things.
First get a working website that you're proud of, then you can start looking into how it is done in industry. After some quick googling it isn't actually that easy to find resources on how to build static websites in ES6. Personally I find the node/frontend ecosystem the hardest to keep up with, and also the most complicated to set up. Once you start down that road, feel free to reach out and ask for help, because there is a lot of information that needs to be absorbed (sadly).
Great work!
Well if you only do frontend works to learn, the browsers are in a good position right now in terms of support of ES6 standards (finally, I'd say)
Agreed, I didn't actually know coverage was so good!
Thank you! These seem like great next steps. What test suite do you recommend?
Eh... it really depends on how much complex is your code, or if you will use a framework for it.
As per how your code is right now, a simple mocha(+chai eventually) should be more than enough. You can set it up fairly easily. I'm not expert in test framework as I've to work mostly on: "See this shitty legacy code, we need to refactor it to something modern" so most of the time I've to work on project that don't have tests :(
Ha, that works. Thanks again!
I like node-tap because of its simplicity. It makes more sense to me to use functions like
assert(condition)rather thanexpect.something.to.be(somethingElse), but your mileage may vary.If you want it to be open source/free software, you can choose a license here.