Software Development

So we tried Slack. And failed.

So we tried Slack. And failed.

In my group, we use Outlook and Lync as our main forms of communication. The traditional, brick and mortar means of communication in the corporate workplace. Introduction of Lync a few years ago reduced the volume of email. After all, there’s no need to send an email to ask someone “Hey, did you deliver your changes yet?”. What Lync didn’t solve, and was never really meant to solve, is the ease of finding relevant information in a pool of hundreds of messages that end up in your inbox every day. 

Corporate email is broken, and most people know that, yet monolithic companies are slow to change. So here we are, in 2015, still sorting through piles of useless email. 

Enter Slack. 

The case against SASS nested CSS selectors

For a long time I have been a proponent for LESS. Simple, basic, and does what matters most - CSS compilation from multiple sources. While SASS comes with a variety of merits, the supposed "benefit" that people seem to often enjoy is the ability to nest CSS selectors. Those in the DRY (Don't Repeat Yourself) mindset absolutely love this feature. Personally, I hate it. I hate it for the simple reason that I don't believe that this mess:

.show-some-thing .show-another-thing {
   color: #FFF;
   margin: 10px;

   .some-ugly-button {
      background-color: blue;
      border: 1px solid red; 

      .selected {
         background-color: green;
      }
   }
}

offers enough of a benefit from the supposed "conciseness" to offset the eyesore that it causes.

Sure, this might not be as "concise", but it sure is easier to read and debug:

.show-some-thing .show-another-thing {
   color: #FFF;
   margin: 10px;
}

.show-some-thing .show-another-thing .some-ugly-button {
   background-color: blue;
   border: 1px solid red; 
}

.show-some-thing .show-another-thing .some-ugly-button .selected {
   background-color: green;
}

And that's just a basic example. The more nesting, the harder it is to read SASS nested code. My advice - don't do nest your CSS.

Removing the large screen site option from Bootstrap 3

Last year I endorsed the idea of a full-width blog. No sidebars, no distractions, content in plain focus. While the design is very clean, one flaw with the default settings of the Bootstrap 3 grid is the large screen mode that is enabled for devices with widths larger than 1200px. It took me a bit of digging around how to properly disable the large screen mode, leaving only xs (extra small), sm (small) and md (medium) @media-query breakpoints. The solution is simple:

In app.less (do not modify Bootstrap LESS files for easier upgrades), first change the medium screen width breakpoint if you're not satisfied with the default. This will become your maximum container width.

@screen-md: 960px;

Then, override the default media query with the medium screen as the maximum width:

@media (min-width: @screen-md) {
   .container {
      width:@screen-md;
   }
}