CSS Positioning: a summary

I’ve been frustrated every time I try to grasp CSS for years. “I just want this on the left and this to be over here!” etc. Now I realize that CSS doesn’t work that way for very good reasons. In most programming, we give instructions for what we want to happen. But in CSS, it’s more like we are describing a situation — relationships — and then letting the browser figure it out. That’s because the browser has to handle many different circumstances. Resolutions, interfaces, font sizes. I describe how the parts go together, it figures out how to put them on the screen.

When I get upset about the properties for one part being dependent on the properties of its parent containers and siblings, it’s OK Jess: remember that CSS is about interrelationships, so this is normal.

Having got that, I’m now able to learn about how to put things on the screen without yelling in frustration and confusion.

So far, I’ve looked up the position property and learned that it doesn’t do much. There are other ones like display that seem more important. But meanwhile here’s my executive summary:

The position property determines two things: whether the element participates in document flow, and what the properties top bottom left right do. These are the useful ones:

position: static – the default. Stay in document flow; top bottom left right do nothing.

position: relative – nudge. Stay in document flow.  top bottom left right nudge the element in that direction from where it would have been. This also has some effect on child element positioning, at least in the case of ::before pseudo-elements (weird CSS tricks).

position: absolute – override. Remove the element from document flow. top bottom left right tell it where exactly where to be within the document (or within the next absolutely-positioned element up the tree).

position: fixed – override and hold weirdly still. Remove the element from document flow
tell it exactly where to be within the viewport. That means within the browser window (or the iframe if it’s in one). When the page scrolls, this element stays in the same place. People use this for menus.

Please lmk if you have corrections.

Growth Loops: circular causality is real

A few hundred years ago, we decided that circular causality was a logical fallacy. All causes are linear. If something moves, then something else pushed it. If you want to see why, you have to look smaller; all forces derive from microscopic forces.

Yet as a human, I see circular causality everywhere.

  • autocatalytic loops in biology
  • self-reinforcing systems (few women enter or stay in tech because there are few women in tech)
  • romantic infatuation (he likes me, that feels good, I like him, that feels good to him, he likes me 🔄)
  • self-fulfilling prophecies (I expect to fail, so I probably will 🔄)
  • self-regulating systems (such as language)
  • cohesive groups (we help out family, then we feel more bonded, then we help out 🔄)
  • downward spirals (he’s on drugs, so we don’t talk to him, so he is isolated, so he does drugs 🔄)
  • virtuous cycles (it’s easier to make money when you have money 🔄)

These are not illusory. Circular causalities are strong forces in our lives. The systems we live in are self-perpetuating — otherwise they wouldn’t stay around. The circle may be initiated by some historical accident (like biological advantage in the first days of agriculture), but the reason it stays true is circular.

Family therapy recognizes this. (In the “soft” sciences you’re allowed to talk about what’s right in front of you but can’t be derived from atomic forces 😛.) When I have a bad day and snip at my spouse, he withdraws a bit; this hurts our connection, so I’m more likely to snip at him 🔄. When I wonder if my kid is hiding something, I snoop around; she sees this as an invasion of privacy, she starts hiding things 🔄. When my partner tells me something that bothers him, and I say “thank you for expressing that” and then change it, next time he’ll tell me earlier, and it’ll be easier to hear and fix 🔄.

Note that nobody is forcing anyone to do anything. This kind of causality acts on propensities, on likelihoods. We still have free will, but it takes more work to overcome tendencies that are built into us by these interactions.

Or at work: When I think a coworker doesn’t respect me, I make sarcastic remarks; each time he respects me less 🔄. As a team, when we learn together and accomplish something, we feel a sense of belonging; this leads us to feel safe, which makes it easier to learn together and accomplish more 🔄.

Some of these cycles are merely self-sustaining. Many spiral us further and further in a particular direction. These are growth loops, which Kent Beck describes: “the more it grows, the easier it is to grow more.” There is power for us in setting up, nourishing, or thwarting our own cycles. Growth loops are more powerful than individual, discrete incentives. The most supportive families, the most productive teams have them.

Because a growth loop moves a system in a particular direction, it’s more of a spiral than a circle. I want to draw a z-axis through it. Like snipping at my spouse:

a spiral toward disconnection, of me getting snippy and him getting sarcastic

As my spouse and I get snippy with each other, we spiral toward disconnection. When we talk early and welcome gentle feedback, we spiral toward connection. Whereas, when my team bonds and accomplishes things, we spiral toward belonging — with a side effect of accomplishments.

a spiral toward connection, of a team learning together and accomplishing stuff and bonding

I like to use this to explain why JavaScript is the most important programming language. It might be an inferior language by objective standards, but “objective standards” are like linear causality: limited. Reality is richer.

JavaScript started by being the first runtime built into the browser. This made it useful enough for people to learn it, and that’s key: a language is only useful if the know-how of using it is alive inside people. Then all these people create tools, resources, and businesses that make JavaScript more useful 🔄.

a spiral toward usefulness, from the first runtime to people learning and language improvements and tooling

Call this “the network effect” if you want to; network effects are one form of growth loop.

In our situation, JavaScript is the most useful language and it’s only getting more useful. It may not have the best syntax, or the best guarantees. It does have the runtime available to the most humans, the broadest community and a huge ecosystem. Thanks to all the web-based learning resources, it is also the most accessible language to learn.

When I start looking for these growth loops, I see them everywhere, even inside my head. I’m low on sleep, so I’m tired, so I don’t exercise, so I sleep poorly, so I’m tired 🔄. I’m not sleeping, so I get mad at myself for being awake, which is agitating and makes it harder to sleep 🔄. Once I recognize these, I can intervene. I notice that what I feel like doing and what will make me happy are not the same things. I step back from my emotions and feel compassion for myself and then let them go instead of feeding them. I stop negative loops and nourish positive ones.

Circular causality is real, and it powerful. In biology, in our lives, and in our teams, it feels stronger than linear causality; it can override individual competition and incentives. It forms ecosystems and symmathesies and cultures. Linear causality is valuable to understand, because its consequences are universal, while every loop is contextual. But can we stop talking like the only legitimate explanations start from atoms? We influence each other at every level of systems. Circular causality is familiar to us. I want to get better at seeing this and harvesting it in my work.

Your Goals Are Holding You Back

“Enter your concrete goals for the next six months.” This software is supposed to help your career. Seriously?

If the best I can do is something I could name six months ago, I am not learning anything. If I hit some metric, what did I ignore or sacrifice to get there?

Knowledge work is about learning. Maybe I set a concrete goal for today “Complete these three tasks” — chances are good I’ll learn about a fourth one that is more valuable than any of those. If I’m good at my job, I’ll do that, and let some of the three languish. Is that gonna get me a mediocre review at the end of the period? If I’m really good at my job, I will ignore that.

I do need direction, a quest. But concretely, I want to look only at the next step in that direction. Once that is complete, it’s time to look up and say, “Did this help? What looks like it would help next?”

I do need indicators of whether I’m accomplishing my mission. Metrics are useful as clues, but not as absolute measures. If I maximized this metric, what did I damage in the process? I want to detect progress, not pretend that I can measure it precisely.

What is my quest for the next six months? Now that’s a useful question. Start with the company’s mission, and ask, what is my contribution? Maybe your company does heat treatment (running metal parts through furnaces to harden them), and your mission is to

become one of the leading companies in the heat treating industry by fulfilling a simple, fundamental promise:

We’re here to help you succeed and to help you reveal the true strength in your most important parts and components.

Maybe you’re a metallurgist there, and your part is “to help customers succeed by participating in process design and material selection.” We can help prioritization with some emphasis: “… especially customers who do a lot of business with us. Especially business-crucial parts. Especially automotive parts; pass aerospace to Lindsey. Especially hardening; consult on Mark for coating. Especially aluminum, as we want more business in that.” (I’m making this up.) This is the part you want to update every six months. Then every few weeks, review open tasks for priority. Every day, answer phone calls and serve the customer needs of the moment.

Every moment, learn. Learn about customer needs, learn about furnaces and metal and what the company can do. Respond to that. Measure outcomes (customer satisfaction, revenue per customer), but evaluate decisions based on information you had at the time.

There is no good way to use concrete-goal-setting software. The best you can do is subvert it, ignore it, or compare goals to actual work and say “wow, we sure learned stuff in the last six months.” There’s a reason the best task-trackers are post-its: because they fall down. Set direction every six months, not concrete goals.

Shared Values are Overrated

The other day, I heard a story about a leadership retreat where the goal was to agree upon shared values. They held a vote, and lo, there was an even split between all the values. The group could not agree on which ones represented the company.

This makes sense. Our values are part of our identity. You can’t compromise on your values! That would make you a bad person!

How can we come together, then? Must we fire half the leadership and replace them with people willing to espouse the same values as the remaining half? or can we settle for mutual purpose, and go with a mission statement?

Values

Corporate values are mostly generic. Honesty, integrity, innovation, teamwork, quality, respect, empathy. What do those even mean in the course of a workday?

To communicate that, you need to give examples of how a value is expressed in the workplace. For example:

  • Integrity: we do what we say we will do. When this becomes impossible, we communicate clearly and promptly with the people affected.
  • Honesty: we contribute our knowledge, especially about the limitations of our knowledge. We thank other people when they bring us surprising information, especially when it is bad news.
  • Innovation: we spend 80% of our time working within the system we have, and 20% of our work time improving the system we work in.
  • Collegiality: when we have disagreements, we resolve them peer-to-peer, not by appealing to higher management.

Agreed-upon Methods

Once we’ve expressed what we mean with implementation strategies, let’s strike out the names of the value and call the list “agreed-upon methods.”

See, people can’t compromise on values. But we can compromise on methods.

As itriskmanager describes it:

“When they become a team, they do not necessarily expect everyone to adopt the same values and beliefs. In fact, they grow to value and respect the values and beliefs of the other people in the team.”

When we already share a common purpose — success in the company’s mission — we need to agree on how we will accomplish that. We need protocols to coordinate work and encourage dialog. But we don’t need to all emphasize the same basic human values. In fact, balance can help.

That’s why I think we should replace “shared values” with something that doesn’t smack of morality. Something like: mutual purpose and agreed-upon methods.