Common mistakes - noobling/Homefornow GitHub Wiki

Following best practices

Here is a list of just some small things that I don't think matter in a small project like this but it is important to keep in the back of your minds.

  • Inlining code: Programmers value simplicity, your code shouldn't be doing too much. If you inline code (mixing say html with css) then well now that line of code is doing two things right? Adding structure (HTML) then also styling the page (CSS). Programmers like to keep things seperate. HTML should only be adding structure to the page and CSS should only be styling the page. Here is some more on this. https://github.com/cxpartners/coding-standards

  • Being consistent: Use the conventions already in the code for example your routes should be in the form /route/to/something rather than /routeToSomething if that is how the routes were named already. And use camel case for functions and variables rather than snake case (the eslinter should warn you these things). This helps us maintain each others code.

  • Keep things short: If a function is over 50 lines long or you are finding you have to place comments everywhere to explain the code maybe its time to consider refactoring or see if there is a better way to do it.

  • Don't create routes that are too deeply nested: this makes it difficult to remember route names so it makes it harder to maintain and extend the app. Bad: /service/dashboard/service_name/add/photo/ Good: /service_name/photo

  • Abstract away complex logic It is hard reading someone else's code because sometimes you don't understand why they did what they did e.g. $('#img1').toggle('slide'); Why are they calling a toggle method? What is their intention? It helps others greatly if you tell them exactly what was intended here.

// Hide or show the image for the user
$('#img1').toggle('slide')

This helps makes things clearer but maybe it clutters the code if you start adding comments everywhere wouldn't it be nice to do both in one line? Well you could use a function then.

showImage('#img1')