Code Review

Brad Frost posted a Codepen and asked for feedback. I blather on for nearly 20 minutes about modular design and familiar patterns.

[AlbertoVasquez]

very clear and informative. was very helpful to hear your thought process in this manner. would definitely watch more of this.

[meiert]

Very interesting. Some nice thinking, Jonathan.

It would be useful to know the context of this code, or where Brad has taken this from.

From what I can tell—but I’m not going to create a video response ;)—one could well look for a higher road and rewrite the HTML code, first stripping it down to the bare minimum.

Something like, for the first part:

<form>
<h4>Checkbox Field</h4>
<label><input type=checkbox checked> Checkbox 1</label>
<label><input type=checkbox> Checkbox 2</label>
<label><input type=checkbox> Checkbox 3</label>
</form>

(Some more structural markup may be okay.)

This still leaves the unexplained <h4> and naming but does away with a lot of unnecessary code. (Maintenance is most expensive in HTML, and so it’s typically smarter to move complexity into style sheets and scripts.) At the same time we seem to keep all necessary styling leeway to, for example, make the <label>s block elements with a left margin and position the headings in that margin. For example.

[SeanGoresht]

how about using fieldsets and legend instead of the h4?