Frontier Software

Robert Laing's programing notes

The Separation of Concerns

By Robert Laing

It is what I sometimes have called “the separation of concerns”, which, even if not perfectly possible, is yet the only available technique for effective ordering of one’s thoughts, that I know of. This is what I mean by “focussing one’s attention upon some aspect”: it does not mean ignoring the other aspects, it is just doing justice to the fact that from this aspect’s point of view, the other is irrelevant. — On the role of scientific thought, Edsger W. Dijkstra

For a one man developer, the web seems very corporate due to its division of labour, each requiring one to learn a different language with its own syntax.

Concern Technology
Structure HTML
Presentation CSS
Content Markdown
Behaviour JavaScript

Structure

Structural Semantics: The Importance Of HTML5 Sectioning Elements

HTML5 introduced 5 section elements plus main to improve the structure of documents. Previously, all this would have been done with the div Content Division element.

html
├── head
└── body
    ├── header
    │   └── nav
    ├── section
    │   ├── article
    │   │   └── header
    │   ├── article
    │   │   └── header
    │   └── aside
    └── footer
header
defines a page area that typically contains a logo, title, and navigation. The header can also be used inside other semantic elements such as <article> or <section>. A section header might contain the section’s heading, author name, etc.
<article>, <section>, <aside>, and <nav> can have their own <header>.
Despite its name, the header is not necessarily positioned at the beginning of a page or section.
section
defines a section of a document to indicate a related grouping of semantic meaning. It makes sense to use the section element to provide extra context for the parent element.
footer
defines a page footer, which typically contains copyright or legal notices and sometimes some links. In the context of a section, a footer might contain the sectioned content’s publication date, license information, etc.
<article>, <section>, <aside>, and <nav> can have their own <footer>.
Despite its name, the footer is not necessarily positioned at the end of a page or section.
article
defines a piece of self-contained content. It does not refer to the main content alone and can be used for comments and widgets.
aside
defines a section that, though related to the main element, doesn’t belong to the main flow, like an explanation box or an advertisement. The aside element has its own outline, but doesn’t belong to the main one.
main
The content of a <main> element should be unique to the document. Content that is repeated across a set of documents or document sections such as sidebars, navigation links, copyright information, site logos, and search forms shouldn’t be included unless the search form is the main function of the page.

Presentation

One of the reasons for separating presentation from structure and content was to achieve device independence. In the dead tree era, this meant being able to easily retypeset a book from say A4 to US Letter, and TeX and its associated tools would be able to recalculate the page numbers for the table of content and index references.

Responsive Web Design

Nowadays, it means Responsive Web Design (RWD), so that the same content can be rendered nicely from a smartphone to a large screen. It’s easy to spot if an HTML page supports this by lookin for something like this in its head section.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

People have finite capacities; they can keep only so much in their minds at once. For a system to be understandable, it should, it should have a high level specification simple enough to understand in its entirety. However, the thousands of lines of code in its implementation cannot be comprehended all at once. There, the system’s description must be structured so it can read in small pieces. This is done with a hierarchy of specifications. At each level of the hierarchy, the system is described as a number of interacting modules, where a module is a collection of related procedures. — What good is temporal logic?, Leslie Lamport

Architecture = Folders & Files

In software, the separation of concerns boils down to mapping the hierarchy of the code to the subdirectories and files in the project directory. Ever since The Rails Doctrine stated Convention over Configuration as its second rule, most web development frameworks kick off with a skeleton structure, with given filenames in given directories hardwired into them.

Part of the Rails’ mission is to swing its machete at the thick, and ever growing, jungle of recurring decisions that face developers creating information systems for the web. There are thousands of such decisions that just need to be made once, and if someone else can do it for you, all the better. — The Rails Doctrine

My introduction to Rails was via an excellent MooC given by Armando Fox and David Patterson, and its accompanying textbook Engineering Long-Last Software. While I like Rails, a reason Ruby didn’t appeal to me was its use of sigils, which are fine if you use a language a lot and remember them all, but I never reached that level in either Perl or Ruby. I do like sigils in Lisp where the convention for predicates (functions which return a boolean) is to end them with a question mark. In other languages, the predicate convention is is_foo(x) or has_foo(x)

Naming Conventions

There are only two hard things in Computer Science: cache invalidation and naming things. — Quotes on Design

Names of HTMl classes are vital since they are the glue to CSS and JavaScript.

In the web world, a popular naming convention is Block Element Modifiers (BEM), which uses kebab-case, uncommon outside of Lisp since most programming language interpret a hyphen dash as a subtraction binary operator.

Last updated on 7 Jan 2021
Published on 7 Jan 2021

Content Footer