While thousands passed the peace pipe at the Denver Civic Center on 4/20 — the annual celebration of cannabis — the hazy atmosphere cleared when shots rang out, striking three people and a dog.

Colorado recently legalized the recreational use of marijuana this past election. The new law brought an even larger crowd out for the event in the state’s capital, reaffirming the “high” in “Mile High City.” One marijuana attorney, Rob Corry, declared:

This is what freedom smells like. You are standing on some of the freest ground in the world.

However, the crowd immediately dispersed when a gunman began firing. Though some witnesses were interviewed, their comments were similar to their mental state — a bit foggy. Examples include:

This guy came up and started shooting at people.

and:

I thought I was going through an anxiety thing because so many people were coming after me.

and:

It was peaceful; everybody was having fun. And then you heard the shots. Pow, pow, pow, pow.

One or two suspects were identified while “coming aggressively through the crowd.”  Unfortunately, the two African-American men were also automatically connected to a gang. Post-racial society, anyone?

Denver police reported they have potential video footage of one of the suspects — a man running through a six-second film clip with a checked shirt as described. Check out a snapshot here.

Even the most mellow of activities — smoking marijuana — has generated outbursts of violence.

And for all those animal lovers out there, we hope the dog is okay, too.

To say that it has been an especially trying week for our nation would be a gross understatement. 

The recent tragedies in Boston and Waco, TX, have to some extent made us feel a little less secure, a little more aware of how precious a commodity life truly is.

In these moments of unexpected human suffering, it can be hard for us to be mindful of the human suffering that occurs elsewhere, far from our pain and beyond our own borders. Yet mindful of it we ought to be.

It is important to know that Iran is still just beginning to recover from a 6.1-magnitude earthquake that has claimed the lives of nearly 40, injured approximately 850, and left thousands homeless and with nothing left.

Survivor of April 20 earthquake in Sichuan province, China. Courtesy of Associated Press.

We ought to extend our sincere thoughts and concerns to the people of Sichuan province in China, who have just experienced an earthquake of their own, with an even more devastating aftermath: nearly 160 dead, 5,500 injured, and thousands more missing or unaccounted for.

For us in America, our hearts pour out to the citizens of Boston, MA, and Waco, TX, and rightfully so. But let us not forget that we should be equally informed and concerned of the immense loss of life and suffering in places like southwest Iran and Sichuan province.

For those under unimaginable duress and tribulation there, let our hearts pour out to them as well.

You may be Facebook friends with your brother, your parents, your college buddies and co-workers. But are you friends with your doctors too?

Earlier this week, the American College of Physicians and the Federation of State Medical boards put out a statement that that addressed conduct issues for physicians in the world of social media.

Surprisingly, many doctors now believe they should be taking advantage of digital communication more than they currently are. According to Dr. Ted Eytan of Kaiser Permanente:

“Social media is a way to build trust by delivering useful information and creating good will between patients and physicians.”

Eytan believes instant communication is key in a doctor-patient relationship. And that doesn’t necessarily mean they’re texting and tweeting—it’s more about the patients just knowing they have easy access to quick, reliable information if they need it. 

Regardless, doctors still face ethical issues when allowing patients to enter their digital social circles. How much communication is too much? How does one navigate questions that aren’t necessarily in their area of expertise?

This gray area is exactly why moving forward, doctors need to have guidelines on where to draw the line. But for now. Eytan says a good rule of thumb is to realize that whatever you say could end up elsewhere online:

“A really simple test I use is, ‘Am I comfortable with the tweet I just wrote being on the front page of The Washington Post? What would 9.2 million [people] think of it?”

Have you ever communicated with a doctor online? Do you think it’s okay to add them on Facebook? Let us know in the comments below.

Despite the super fun sounding name, magic numbers are a bad thing. It is an old school programming term for "unnamed numerical constant". As in, just some number plunked into the code that is probably vital to things working correctly but are very difficult for anyone not intimately familiar with the code to understand what it is for. CSS is loaded with unnamed numerical constants, but they are usually paired with properties and in the context of a selector so there is little mystery. There are magic numbers in CSS though, and they are still bad.

Magic numbers in CSS refer to values which "work" under some circumstances but are frail and prone to break when those circumstances change. They are usually always related to fonts in some way or another. They are created by an author who likely only tested in their own browser under ideal conditions. Let's take a look at some examples so we all know what they are and hopefully can avoid them in the future.

Look at this simple set of tabs:

Each of the tabs is set to width: 100px;. In this example 100px is our "magic number." There are any number of things that can go wrong with this. Simply adding another tab with longer text demonstrates that:

A bit awkward and likely undesirable. We could prevent the wrapping with white-space: nowrap; but that's possibly worse:

Our tabs would be less prone to breakage if we use min-width instead:

Or perhaps no width at all:

If you were dead-set on having all the tabs the same size, you could do overflow: hidden; and text-overflow: ellipsis; perhaps:

In that case, you'd probably want a title attribute so there is some way to reveal the entire tab name. You might think this could be solved from the Content Management System side by only allowing tab names to be a certain number of characters long. But what about users who increase font-size from their end for accessibility reasons? This fixed sizing might be hurting them.

In a recent post Line-On-Sides Headers, I used a line-height value that was a magic number. Let's say you used the technique around text with a fancy @font-face font. Let's say that font doesn't load or the user overrides it or the page is being viewed in a browser that don't support @font-face. The fallback font will load, and that fallback font might have drastically different sizing than the custom font. The lines on the outside of the fallback font are now awkwardly placed, not centered like we wanted. Magic number fail.

This particular example is a bit contrived, but I'm sure you've all seen custom fonts that have super crazy x-heights and stuff.

Let's say you have a bunch of boxes with different amounts of content in them. You want to arrange them into a grid, so you float them left. Kind of a mess:

Well hey if they were all the same height this wouldn't be a problem!

That is, if the user viewing the site has the exact same font-size setting as you. But users can change that.

And now a big sad trombone:

min-height instead would prevent the overlapping weirdness, but then the boxes are of different size and the float problem happens again. I'm not going to go too far into solutions because this is so abstract already, but perhaps you could use scrolling on the boxes, or use some JavaScript to adjust sizes, or user some other kind of layout.

Harry Roberts points out a classic example of a magic number in his article Code smells in CSS.

.site-nav > li:hover .dropdown{
      position: absolute;
      top: 37px;
      left: 0;
    }

This would be for a CSS powered dropdown menu. The menu is hidden off-screen until the parent list item is hovered, then the dropdown moves into view. It should be placed at the bottom of the parent menu item. For the developer that wrote this code, in their current browser, that menu item was 37px tall. I'm sure you can imagine that isn't always true. 37px is a magic number. Harry suggests top: 100% instead meaning "all the way from the top," which is far less prone to breakage.

In the article Fighting the Space Between Inline-Block Elements, -4px is a number quoted for margin that can close those gaps. That is definitely a magic number. 4px just happens to the width of a space in a good number of fonts at the default 16px font-size.

Change that font-family to something like Monaco? Broken. Change the font-size to anything larger or smaller? Broken.

See that article for other fixes.

Definition Confusion

Because we're trying to say "don't use these," it is important we we define the term properly as it relates to CSS. I've seen a number of threads in the past where not everyone is on the same page. (1) (2) (3).

Here's some examples:

-webkit-transform: translateZ(0);

Magic number? Nah. Just a little hack we used to use for performance.

.parent {
      padding: 22px;
    }
    .child {
      bottom: 22px;
      left: 22px;
    }

Magic number? Nah. It's a weird number but it's not magic. The child element is being positioned to the bottom left corner of an element, sans-padding. Because those numbers match up, it makes sense what is going on. If the were all different, that would mean there is likely little tweaky bits going on related to font-size and it would be a magic number.

top: 37px;

Let's say this is a magic number, like from the dropdown menu example above. Can was solve it with Sass?

$topDistance: 37px;
    
    .dropdown {
      top: $topDistance;
    }

It's no longer an "unnamed" numerical constant right, because we named it? It's still a magic number in CSS. It's just as fragile as it was before.

letter-spacing: -.05em;

Magic number? Nah. If it was in pixels it probably would be, because the pixel value remains constant so the effect of it changes depending on the current font-size. Huge font-size, barely any change, small font-size, big change. The fact that this is in a relative unit makes it less fragile.

AND IN CONCLUSION

Man I hate this section of blog posts but it's nice to have a little dumping ground for little things that didn't work themselves in elsewhere.

• The WordPress CSS Coding Standards says you shouldn't use them. Do any others?
• If you're using icon fonts, remember they are fonts, so they change size. You can't "reserve space" for them somewhere in pixel values, as the font size can change but the pixel value won't.
• I'd like to keep this blog post updated with good examples of magic number fails, so if you have any classics, comment below.
• What if you are trying to center an image and text. vertical-align does pretty good, but I find it's often 1px off or so so I postion: relative; top: 1px; it. Is that a magic number? Not sure.

Magic Numbers in CSS is a post from CSS-Tricks