Povert

Make your own Attack Ad

I have avoided politics on this blog for a while. I find day-to-day politics exhausting. It’s irrational, it’s ugly and it’s almost entirely unproductive. And I’m not about to start discussing much of it here.

That said, I do have something to say about the political climate. If my personal pick for president becomes obvious, sorry. Anyone who knows me won’t be surprised anyway.

Every 4 years, everyone proclaims this election to be the most important election in the universe. Ever. And it’s bullshit. Every election can’t be the most important. I could see the 2016 election (for example) being more important that this one. The 1932 election was probably more important that this one.

People say this because they’re trying to scare us. I don’t care who’s saying it. They’re trying to scare the shit out of us. And I’m sick of it. Our nation isn’t a delicate knick-knack. It’s not a fragile dish. We can weather terrible leaders. We’ve certainly done it before. We’ve weathered crappy Supreme Courts and crappy court decisions. Crappy Congresses.

I’m certainly not saying that we’re invulnerable. The question I’m asking is: How do we conduct ourselves in trying times? And a lot of us ought to be ashamed.

Western civilization is not in peril.

Support your candidate, be proud of your candidate. And don’t be an asshole.

Sorry. Just wanted to get that off my chest. I’ll get back to the humping dog videos without delay.

Look! A new skit!

Dog vs. Kitty.

Shot with my new Kodak Zi6. Probably not the best showcase of the camera. I was pretty sloppy with it. I was really just going for the joke.

That said, this is technically the first FC skit shot in HD. Or at least in HD resolution. The vid on the site, of course, is not HD. Subscribe to the feed in iTunes or whatever to get it in HD.

This probably isn’t news to anyone deep in JS/CSS land, but I thought these notes may be handy for someone who’s still figuring out the best way to approach some problems.

There’s a temptation, I think, to go overboard with JS when manipulating elements on a page. Many tasks can be more simply handled with a combination of JS and CSS.

For example, let’s say you have a simple unordered list:

<ul id="happyList">
  <li><a href="tacos.html">Tacos</a></li>
  <li><a href="burritos.html">Burritos</a></li>
  <li><a href="enchiladas.html">Enchiladas</a></li>
  <li><a href="tamales.html">Tamales</a></li>
  <li><a href="chalupas.html">Chalupas</a></li>
  <li><a href="antacids.html">Antacids</a></li>
</ul>


Let’s say that you only want 3 items to show by default, and you want a “More” link at the bottom that will expand the list to show the rest.

There’s a few ways you could approach this. People may be tempted to put an onclick event onto the “More” link, then have that call a function that toggles the visibility of each element after the third. Something like:


var happy = document.getElementById('happyList');
var items = happy.getElementsByTagName('li');
function showLinks() {
  for (var i=3; i < items; i++) {
    items[i].style.display = ‘list-item’;
  }
}
function hideLinks() {
  for (var i=3; i < items; i++) {
    items[i].style.display = ‘none’;
  }
}


That would work (though I haven’t actually tested this particular js), but it’s definitely the crappy way, for a number of reasons. First, there’s no need for two functions, though that’s beside the point of this post. Second, we’re running through a for() loop every time each function is called.

Instead of something like that, the way I’d do it is to first set up this CSS:


#happyList.collapsed li {
  display: none;
}
#happyList.collapsed li.alwaysShow {
  display: list-item;
}


Then, you put a class of ‘alwaysShow’ on the first three list item elements, either in the html itself or with javascript:


function assignShow() {
  var happy = document.getElementById('happyList');
  var items = happy.getElementsByTagName('li');
  for (var i=0; i < items.length && i < 3; i++) {
    items[i].className = ‘alwaysShow’;
  }
}


Now, when the ul has a class of ‘collapsed’, only the first three items show:


function toggleList() {
  var happy = document.getElementById('happyList');
  if (happy.className == 'collapsed') {
    happy.className = '';
  } else {
    happy.className = 'collapsed';
  }
}


Or, more succinctly:

function toggleList() {
  var happy = document.getElementById('happyList');
  happy.className = happy.className == 'collapsed' ? '' : 'collapsed';
}


Then, either in HTML or using javascript, you can add an element with the “More” text and attach an event to it that calls toggleList().

I’m being a little vague on details here. My main point is that it’s preferable to lean on CSS as much as possible. It helps to avoid micromanaging elements.