separation of concerns
blinkenlights from tübingen, 2018
seen from China

seen from United States
seen from Brazil

seen from China
seen from China
seen from China
seen from China
seen from United States

seen from Ukraine

seen from United States
seen from United States
seen from Germany
seen from China

seen from Singapore

seen from United States
seen from United States
seen from Philippines
seen from United States
seen from Netherlands
seen from United States
separation of concerns
blinkenlights from tübingen, 2018
CSS is powerful, you can do a lot of things without JS.
+1. Not to mention the separation of concerns. But then again JS hipters would have to learn CSS ;) Another example, SQL and stored proc’s suck so we’ll create an ORM
W6D2 - CSS
Today we dig into CSS world. The most important thing I learned today would be the separation of concerns. More exactly the difference of the HTML and CSS concerns. HTML is about the structure of the page and CSS about the presentation. This might sound obvious or superficial, it is not at all.
The difference between the 2 is crucial. It starts with having a separate CSS file (never inline your css inside html, never). Then, you need to think about the global structure of your page. How many headers, sections, layouts you’ll have on your page ? Choose the class names wisely, especially for nested elements. Don’t put <h1> tags inside of <p> tags, otherwise chrome will try to “correct your code” when rendering it, and you won’t understand the result. That’s exactly why structure is important.
Even if there are still <div> and <span> out in the wild, HTML5 brings us semantic tags we should use: <header>, <article> or <section> (there’s a ton of them). It tend to think that this is meant to make html even more focused on the structure instead of delegating this to css class naming.
Anyway, we kind of reproduced a given page (typical social network profile page), it was pretty cool and very instructive.
One Requirement: Separation of Concerns
DISCLAIMER: The following is not intended to be theological. The reference to religious concepts are used metaphorically. I also use the word “component” to describe both people and technology. This is done for the sake of simplicity, and should not be considered a devaluation of people in any way.
Every failure, human or otherwise, seems to boil down to a “sin”. I use that term because a sin is a violation that can generally classified as being either one of omission or one of commission. That same classification also applies to a failure to maintain a proper separation of concerns. In other words, a failure is caused by a component (someone or something) that has failed to do what it was suppose to do (an omission), or it did what it was not suppose to do (a commission).
The Sin of Omission
The “Sin of Omission” is a failure to do what is expected. When components are forced to react or respond on behalf of components that have failed to perform a task, the two concerns are no longer separated. Other components are being forced to act on behalf of another. This is the sin of omission that breaks my requirement for strong separation of concerns. Let’s look at a couple hypothetical examples.
Example #1: Let’s say that an employee of a small dry cleaning business decides to go home a few minutes early. The employee shuts off equipment, turns out the lights, flips the sign, sets the alarm, and fails to lock the door. A customer shows up a short time later, hoping to pick up garments “in the nick of time”. Upon opening the door, the alarm goes off, the security service is notified, the police are dispatched, and the owner is called out to confirm that nothing is missing and perform the task that the employee should’ve already done: Lock the door. Many people were forced to respond and act as a result of one employee’s omission.
Example #2: Now consider the case of an e-commerce transaction. A customer decides to purchase something from a web site. They add the item to their shopping cart, and click a button to check-out. The customer chooses next day delivery, but enters their credit card information incorrectly. The shopping cart fails to perform the necessary checksum calculation on the credit card number. The order is accepted, and the customer believes that the order is complete. An error message is created for customer service when the credit card processor rejects the payment. A representative from the company must then call the customer the next day to inform them that their card could not be processed, that the order cannot go out as expected, and that the customer will not receive their item in time and the store loses a sale. Omitting the card verification process from the shopping cart has forced other systems and people to respond and act as a result of this simple omission.
The Sin of Commission
The separation of concerns requirement can also be violated when a component intentionally inserts itself into the domain of another. That can take place either voluntarily or as otherwise directed.
A technology component that commits this sin performs tasks from multiple domains like placing business logic in the stored procedure of a database. In human terms, it’s an individual acting on behalf of another, either on their own initiative, or as directed by a supervisor. This is not necessarily out of malicious intent. People who are easily distracted by “shiny objects” are particularly vulnerable to temptation. A naive CEO with an interest in technology, for example, may find it particularly difficult to delegate and stay out of the technology weeds when he should be running the company.
Here’s another example: The responsibility for feeding our golden retriever has been within my wife’s domain ever since she and my daughter brought it home as a puppy 7 years ago. Occasionally, she would ask one of the kids to help her out by putting a scoop of dog food in the dog bowl. I commented one day that the dog was looking portly and speculated that she could probably use a little more exercise. I tasked my kids to play fetch her every day, and my wife decided to also take her on walks in the morning and evening. The dog did not lose weight. In fact, she continued to get bigger in spite of all the added activity. We began to wonder if maybe she had a tumor. An expensive trip to the vet and analysis of backyard “land mines” indicated that, aside from obesity, the dog was healthy. The vet suggested switching to a low fat dog food, so we decided to make the switch when the current bag of food was gone. We soon discovered that the jumbo bag of dog food that normally lasted a few months was nearly empty after only a few weeks. There was no way the food had been accessed by the dog, so what could have happened to all of it? As it turns out, not only had my wife been feeding the dog as usual, so had everyone else. The dog’s extra activity resulted in an increased appetite. The bowl was constantly empty so whenever someone walked by, they added another scoop thinking that she hadn’t been fed in a while. Then they would follow that up with a long walk or game of fetch, and you can see how the situation — and the dog — began to feed itself out of control.
It’s Like Clockwork
Let me be perfectly clear: A strong separation of concerns is about process NOT silos! I do not advocate “throwing tasks over the wall”, “passing the buck” or “playing hot potato” with them. I am an advocate for every component knowing its place, and integrating with other components as needed in order for the system to operate properly. A strong separation of concerns requires integration through controlled interfaces. It works more like the gears in a clock, and nothing like a volleyball net. Each gear is tasked with operating in a specific position, and must interact with certain other gears in a clearly defined and well orchestrated manner. The entire system will come to a dead stop if they don’t. The leader is a clock maker. It is the leader’s job to select the right gears, determine their ideal position, and put them into motion.
Rapid Response
What happens when one of the gears in the clock has a problem? It is critical to recognize and respond to the problem as close to the time and point of failure as possible. Once identified, we either fix the troubled component, or replace it entirely. Unfortunately, we have developed a culture of consumption in America that tends to want to replace things instead of attempting to fix them. Everything is disposable these days, but from a business perspective, that is all too frequently the wrong approach. Fixing a component is time consuming. Replacing a component is not just time consuming, it is also expensive. The more important the component is, the more costly and time consuming the replacement is likely to be.
Fixing a problem in technology generally means debugging, refactoring or upgrading the component. Fixing a problem with people generally involves education, counseling, and communication.
Replacing technology involves risk due to new development, testing and training. Replacing people involves talent searches, evaluation, training and risk factors that are unique to the human condition.
View-Template Separation
Some frameworks (especially most PHP Frameworks) insist that Templates are the View components of their MVC framework, and incorporates PHP or third-party codes (e.g. Smarty, Twig, TinyButStrong, OPT, Dwoo, Rain TPL, PHPTAL) into the HTML templates. Front-end developers and designers have to learn an extra language just to create templates for these frameworks. Packfire does not agree to that. Separating View from Model and Controller is not enough. We see templates as pure client-side technology only (HTML, CSS, JavaScript). No PHP code should appear in these templates so that front-end developers and designers have less trouble integrating with the server-side than what they already have. In Packfire, we separate the view logic and the static template clearly. PHP codes that work on how the output would look like, for example looping through posts and applying templates to them, should reside in the View classes. HTML templates (inside the `public/pack/template` folder) are strictly HTML with tokens / placeholders that are replaced by the actual content when the View class is rendered. An example template file:
{title}
v{version}
{title}
{message}
DarkLight
Roger Hughes asks interviewers about the benefits of dependency injection and why you should use it. I would answer that it allows you to separate concerns for code reuse and interchangability, which directly aids testing but is not limited to such activities.
Dynamic Properties in IE -- aka CSS on Acid
http://msdn.microsoft.com/en-us/library/ms537634(v=vs.85).aspx#Implement
I really cannot fathom what Microsoft was thinking when they implemented this. Javascript in your CSS? Sad trombone. Someone enlighten me?