Back Talk

Syntactically Awesome Style Sheets. Bootstrap 3.3.7 (latest as of this writing) uses Less and/or Sass, but it appears that Bootstrap 4 is switching to Sass exclusively.

Anyway, because of this transition, I decided to learn Sass. I found Emmet at the same time, but I won’t be covering that much here.

Installation

Installation was not as straightforward as I had expected. I initially was using a Sass framework, Compass, but that hasn’t been updated in more than two years. Unfortunately, uninstalling it broke what I was working on. Anyway, here’s what’s needed:

  • Ruby
  • RubyGems (normally after installing ruby you can run gem update –system, but this doesn’t necessarily work on Windows)
  • Sass (run gem install sass)

Configuration

A lot of this will come down to personal preference, but configuration of Sass can be an important, or merely incidental, detail of your project. If possible, I don’t like passing options in at the command line, but Sass doesn’t have a way to use a SCSS document to define these either. To do so, you have to know a bit of Ruby, or at least be willing to create/edit a Ruby file.

This file is $RUBYDIR/lib/ruby/gems/$RUBYVERSION/gems/sass-$SASSVERSION/lib/sass/environment.rb  (replace with appropriate values). Under module Sass, I have no idea what one is supposed to do.

From the command line, though, you can use the following, at least for the options I prefer for development:

sass --watch ./sass:./stylesheets --unix-newlines -texpanded

Getting Started

The thing I like to play with most is fonts, so I decided I’d create a _fonts.scss  file. The underscore at the beginning prevents it from being compiled by itself, but is unnecessary when importing. Let’s just start with its contents:

$body-font: Helvetica, sans-serif;
$header-font: Times, serif;

$font-size-pt: 12;
$font-ratio: 4/3;
$line-height-em: 1.15;

$base-font-size: #{$font-size-pt * $font-ratio}px;
$base-line-height: #{$font-size-pt * $line-height-em * $font-ratio}px;

body {
	font: #{$base-font-size}/#{$base-line-height} $body-font;
}
@each $header, $size in (h1: 2.2em, h2: 2.0em, h3: 1.8em, h4: 1.6em, h5: 1.4em, h6: 1.2em) {
	#{$header} {
		font-size: $size;
		font-family: $header-font;
	}
}

I’m fairly certain I can improve the @each  loop, but I was in a hurry.

Then, in my main.scss  file, the following:

@import "fonts";

$primary-color: #333;
$background-color: #ccc;

body {
	color: $primary-color;
	background-color: $background-color;
}

All this results in a file main.css  that contains the following:

body {
  font: 16px/18.4px Helvetica, sans-serif;
}

h1 {
  font-size: 2.2em;
  font-family: Times, serif;
}

h2 {
  font-size: 2em;
  font-family: Times, serif;
}

h3 {
  font-size: 1.8em;
  font-family: Times, serif;
}

h4 {
  font-size: 1.6em;
  font-family: Times, serif;
}

h5 {
  font-size: 1.4em;
  font-family: Times, serif;
}

h6 {
  font-size: 1.2em;
  font-family: Times, serif;
}

body {
  color: #333;
  background-color: #ccc;
}

/*# sourceMappingURL=main.css.map */

A few things are off about this. One, the font-family is the same for each of the headers, so defining the face for each of these is, well, silly. Also, the line height is based on $base-line-height, but should be scaled for each of the headers as well.

Here’s my updated _fonts.scss:

@import url('https://fonts.googleapis.com/css?family=Cabin|Raleway');
$body-font: 'Raleway', sans-serif;
$header-font: 'Cabin', sans-serif;

$font-size-pt: 12;
$font-ratio: 4/3;
$font-scalar: 1.1649930507507129700024711613129; //sixth root of 2.5
$line-height-em: 1.15;

$base-font-size: #{$font-size-pt * $font-ratio}px;
$base-line-height: #{$font-size-pt * $line-height-em * $font-ratio}px;

body {
	font: #{$base-font-size}/1.15 $body-font;
}

%my-headings {
	font-weight: bold;
	font-family: $header-font;
	margin: 0 0 .25em 0;
}

@function intpower($number, $power) {
	$val: $number;
	@for $counter from 1 to $power {
		$val: $val * $number
	}
	@return $val;
}

@for $i from 1 through 6 {
	h#{$i} {
		@extend %my-headings;
		font-size: #{intpower($font-scalar, 7 - $i)}em;
	}
}

There’s a lot added here.

  1. I added some fonts I like from Google Fonts.
  2. Sass does math, but not powers, so I created @function intpower, as I wanted to scale my headings based on the level. (There may be a better way to do this).
  3. Sass documentation says that there is a distinction between to  and through  in the @for  construct, but doesn’t describe that difference. through  includes both endpoints, so if you’re expecting C/JavaScript/Python/etc.-like behavior, you need to use to  instead.
  4. Finally, the %my-headings  pseudoclass/pseudoselector and the @extend  keyword. This allows me to add the same options to each element I’m looping through, but will “compress” the CSS so the font-weight, font-family, and margin aren’t repeated in every element.

This results in the new CSS file:

@import url("https://fonts.googleapis.com/css?family=Cabin|Raleway");
body {
  font: 16px/1.15 "Raleway", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  font-family: "Cabin", sans-serif;
  margin: 0 0 .25em 0;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 2.14594em;
}

h3 {
  font-size: 1.84202em;
}

h4 {
  font-size: 1.58114em;
}

h5 {
  font-size: 1.35721em;
}

h6 {
  font-size: 1.16499em;
}

body {
  color: #333;
  background-color: #ccc;
}

/*# sourceMappingURL=main.css.map */

The one thing Sass doesn’t do for me, and neither does Emmet (correctly), is the creation of vendor prefixes. There are mixins that can help with this, but there’s a lot of finickyness for each property, function, etc. Unfortunately, though it’s probably okay to dump support for dinosaurs like IE6, we still have to live with vendor prefixes. That will probably be the case for the foreseeable future, as each browser maker comes up with new feature ideas.

Lump

I rarely wax political. I did briefly in No Excuses, and I’ll do so again today. As some of you may know, I’m not exactly a conservative. According to a Pew Political Party Quiz, I’m about as far left as one can be.

partyquiz

So you can imagine based solely on that that I wasn’t exactly a Trump supporter. But he is our President-Elect, so come January 20, just 70 short days away, he’ll take the reins and steer our country whichever way his whims take him.

Back in September, Salena Zito said, “The press takes him literally, but not seriously; his supporters take him seriously, but not literally.” I now hope his supporters were correct to not take him literally, because if he’s able to push through 66ish percent of his campaign promises, or if he decides to embrace the Republican platform instead, there are a great many people who may not be very happy in four years (or less).

I started to put together an analysis of some campaign promises he made, a dissection of his plan for his first 100 days in office, and more, but I abandoned (and deleted) all that because I don’t have time. I started a more limited one, but gave up on that. So here are just a few thoughts.

Trump said in December 2015 that he would have a total and complete ban on all Muslims entering the country, whether they wish to immigrate or if they’re tourists. While this is patently unconstitutional, he can legally ban people from certain countries from entering the US. But one of the things that Makes America Great™ is that we welcome all. A poem, “The New Colossus” by Emma Lazarus engraved in bronze in the base of La Liberté éclairant le monde famously reads in part,

Give me your tired, your poor,
Your huddled masses yearning to breathe free,
The wretched refuse of your teeming shore.
Send these, the homeless, tempest-tost to me

Despite nearly four centuries of this portion of North America harboring refugees from persecution, be it religious or ethnic, Trump has decided that “Muslims” as a whole cannot be tolerated. Will Muslims that already live here be able to stay? Will those US Citizens who are Muslim be able to enter the country if they leave to visit family? Will those who “look Muslim” be able to cross the border? Yes, America does have a dirty history that includes racial discrimination for immigration, citizenship, internment camps, and slavery, but I thought we had moved past that 60 years ago. Apparently I was wrong.

Another consequence that seems likely is that ISIS/ISIL/Daesh will find it easier to recruit new members. The “Death to America” crowd will grow. If Muslims already present in the US find themselves even more oppressed than they already are (a few individuals are already taking Trump’s victory as validation and permission for racist behavior, vandalism, even violence), we’ll grow our own terrorists, no outside intervention required.

That’s just Muslims, which aren’t necessarily of one race or country of origin. He also set his sights on Mexicans. “When Mexico sends its people, they’re not sending their best. … They’re sending people that have lots of problems, and they’re bringing those problems with [them]. They’re bringing drugs. They’re bringing crime. They’re rapists.” I don’t know about you, but that sounds pretty racist to me. He wants to deport 11 million people in 2 years. That works out to more than 15000 a day, seven days a week. How he’s going to find these people, he hasn’t said. Imagine the National Guard, or some other “deportation force”, going door-to-door in your neighborhood, harassing and/or interrogating those who “look Mexican”. I know the Fourth Amendment has eroded nearly to the point of uselessness already, but when are we finally going to say, “That’s too far!”? This probably falls afoul of the Fifth Amendment, too. On top of that, he has his famous Wall. If actually built, would be an engineering and upkeep nightmare, but it at least would provide jobs for a while. Experts say it would cost upwards of $25 billion to build.

His Vice President is about as anti-LGBTQ as humanly possible, another old white guy who doesn’t understand female anatomy (probably went to the same school as I did, where you Just Don’t Talk About It) and wants to control it anyway. Those who do not conform to sexual or gender “norms” are still treated as second-class citizens in this country. Access to contraception and abortion, already controversial subjects, is frowned upon by the VP-Elect, and Trump does, in fact, have the power to define away contraception as part of basic women’s health coverage. So your birth control may not be safe come January. My health care costs are already increasing next year. Add the cost of another prescription to the pile (it was free under Obama), I guess…

He says global warming is a hoax perpetrated by the Chinese (another group he loves to villainize). Anthropogenic climate change is real. It’s happening. The average temperature of the world is going up, fast, and humans are doing it. Not volcanos. Cows are a problem, but it’s humans who have made them so. It’s mostly burning fossil fuels, though. What’s the hottest year on record? The hottest month? Probably this one.

He wants to dismantle the Environmental Protection Agency, Department of Energy, National Institutes of Health, and Department of Education. He wants the founder of Lucas Oil to be in charge of our National Parks.

All this is still speculation. We don’t know how his presidency will turn out. Capricious as he is, he may give ponies to everyone next year. I’d like to hope that he’ll magically become presidential, that he’ll encounter people who will stand up to him and explain how reality works, and, further, he’ll actually understand that. I’m not holding my breath.

Passcode

There are only three billion seven hundred two million two hundred fifty eight thousand four hundred thirty one usable IPV4 addresses per the standard. Cisco estimates that there were nearly nine billion devices connected to the Internet back in January 2012. Clearly, this is not enough. So the IETF created IPV6. While the amount of reserved address space is itself staggering, there are still three hundred thirty five undecillion nine hundred fifty seven decillion one hundred eighty nonillion nine hundred forty four octillion twenty one septillion four hundred twenty six sextillion five hundred forty five quintillion three hundred seventy four quadrillion four hundred eighty one trillion seven hundred twenty six billion seven hundred thirty four million seventy three thousand eight hundred fifty four available options. Yet no ISP in my area natively supports this yet, so I’m essentially hogging roughly ninety octillion seven hundred forty three septillion eight hundred forty nine sextillion two hundred forty nine quintillion one hundred thirty nine quadrillion nine hundred fifty seven trillion three hundred thirty five billion seven hundred eighty million seven hundred twenty three thousand five hundred forty nine more address space than I need to. Turns out I lied. Cox has finally rolled out V6 to me, though their DNS service is still V4. Therefore, just for V6, I’m using Google’s DNS! I now score 17/20 here.