Colocation is still underrated

Justin Vos — Thu, 26 Sep 2019 11:49:11 +0000

Colocation has been a thing in the Web space for quite a while now. React, Vue.js and others have been pushing it for a couple of years with their Component-based frameworks.

The traditional approach of separating HTML, CSS and JavaScript code doesn't make a whole lot of sense. Each of these is a different technology but they need to work together. Most features would have some code split across three different files.

Everyone seems to be on board with putting their HTML and JavaScript in the same component file, however many developers I talk with have different ideas when it comes to CSS.

Either because it's just not simple and easy to implement or because it hasn't been popularised as much. For some reason, a lot of developers are against writing CSS in their component files.

Regardless of implementation or style, here's why colocation is great:

Isolated from other features means less intertwining bugs. One section of CSS code can be isolated from others making sure it's not unknowingly depending on or being depended on other code.

It's harder to let one technology become out-of-line with the others. If the structure of the markup changes, the styling is right there in front of you and so you'll naturally keep this up-to-date as well. This isn't the case when the styles are hidden away in another file.

Removal of dead or obselete features are much simpler. Since there are no hidden ties to any other code, once a feature is no longer needed, it can be just removed.

All the details of how a feature is implemented can be hidden away inside a single file. If someone is new to the code or doesn't need to understand it just yet, they don't have to.

This all enables a team to move faster, reduce bugs and keep the amount of code down.

Reading code is the best skill a developer can have

Justin Vos — Wed, 04 Sep 2019 10:25:47 +0000

The best skill a developer can have is being able to read code well.

Reading and understanding code is the most important skill because you spend most of your time doing it already and you need to understand not only your own code but also others' code.

As Robert C. Martin has famously said "the ratio of time spent reading versus writing is well over 10 to 1". While I completely agree with his observation, Martin uses this fact to recommend making your own code as understandable as possible which I would also agree with too. However even more important is being able to proficiently read code.

You can't write all the code you will use or keep the rest of the world up to your high standard. In order to build anything, make modifications to code or even just discuss it requires understanding others' code. Learning how to understand bad code is the only way through this challenge.

Writing good code only goes so far, you'll still have to read your teammates' code, your framework's and library's code.

How can I get better at reading (bad) code?

Reading code is a muscle that needs to be trained. So far your brain is pretty well trained on reading mostly your own codebase. Like only listening to only one news source, you can fall into limiting yourself in thinking in only one way.

Mixing up what read allows you to get different inputs and see different solutions.

I'd recommend:

Read how your framework (e.g. React, Vue.js, Rails, etc) is built to understand what you've already got to work with and how you can take advantage of it.
Read how the libraries you use (e.g. Redux, lodash, Rake) are structured and modularised.
Read how similar applications are built and how they are solving a lot of the same problems you have in different ways (e.g. Sound-Redux, vue-hackernews).

What codebases would you recommend reading?

DEV Community: Justin Vos

Colocation is still underrated

Reading code is the best skill a developer can have

How can I get better at reading (bad) code?