Blogs about code

CSS Hacks.

6.21.2014

In the past, I've used CSS hacks * and _ as a quick and dirty way to make a few CSS changes for IE6 and IE7 only , while preferring conditional comments for larger scale adjustments.

When IE8 came out, developers used another CSS hack (\9;) to target just IE8. But when IE9 came out, it also rendered \9; hacks, which made it the perfect example of an unsafe CSS hack.

Since then, things have only gotten messier for CSS hacks. There are tons of new browsers out there, and IE10 was the last IE to support conditional comments. While CSS selectors still remain fairly ugly, sometimes they're just the tool you need. Fortunately, Browserhacks has pulled all the hacks from all over the internet into one place. And it's on GitHub - so you can add to it.

CSS Magic - border-box.

5.26.2014

With the May 9th 2014 release of Firefox 29, un-prefixed box-sizing is very widely supported by modern browsers; and it's even supported in IE as far back as IE8.

Border box harkens back to the old days of IE, when it incorrectly rendered the box model of an element by including its padding and border in a width. Actually, this "broken" box model is pretty handy - it allows a developer to simply set a width (for example, of 20% for 5 elements inside a parent), use border and padding of any units, and still have everything fit.

Here's an example where box-sizing: border-box; is applied to the second list:

<style>
ul li {
  width: 20%;
  border-right: solid black 5px;
  padding: .25em;
  list-style: none;
  float: left;
}

ul.box-sizing li {
  box-sizing: border-box;
}
</style>

Here's a live demo of box-sizing: border-box;. The Mozilla Developer Network has the details on box-sizing.

Notes - Intro to Node.

5.14.2014

Several months ago I went to a 3 hour Intro to Node.js workshop through Meetup by Ryan Eastridge of Formidable Labs. Here are the notes I took. Beware - without Ryan's walk-though, some of the stuff here doesn't make much sense.

Node's strength is asynchronicity - there is no halt while waiting for a response.

$ node [filename]    #execute that file
$ localhost:8000     #from NOT Node console
var fs=require("fs");
fs.writeFileSync("hw.txt", "Hello World");
#Possible, but use async and callbacks.

Modules installed during workshop: Express, Request, Cheerio. Other useful modules: easyxdm, socket.io, simonl. Also github.com/caolan/async; to avoid callback hell - set up in series.

Shouter: process.stdin.resume(); #Don't exit, wait for input

CSS for Variable Height Elements in a Grid.

12.16.2013

Assume that you need to build a grid with multiple elements using CSS and HTML, where the height of each element varies due to different lengths of content. I think of this as "The CD Problem", displaying a list of CD covers with wildly different album titles. If you just float each element left, then the taller elements will break the grid and your whole layout: Broken grid of HTML elements

This is the solution to the breaking grid:

li:nth-child(4n+1) { clear:left; } That CSS says to clear: left; every 4th li (after the 1st one). clear: left; causes the element to force a new grid row to start.

Here is some example HTML:

<ul>
  <li>
    <h4>Bacon ipsum dolor</h4>
    <img src="http://placekitten.com/100/100?image=1" />
    <p>Sit amet short ribs pork chop sandwhich pork belly</p>
  </li>
  <li>
    <h4>Pastrami andouille</h4>
    <img src="http://placekitten.com/100/100?image=2" />
    <p>Boudin chuck ground round</p>
  </li>
  ...
</ul>

And the CSS:

li:nth-child(4n+1) {
    clear:left;
}

li {
  width: 20%;
  margin: 0 .5rem .5rem 0;
  padding: 1%;
  float: left;
  border: solid black 1px;
  text-align: center;
}

ul {
  list-style: none;
  padding: 0;
  font-size: small;
}

img {
  max-width: 100%;
}

h4 {
  margin: .5rem;
  text-transform: capitalize;
}

p {
  margin: .5rem;
  text-align: left;
}

You can fiddle with a live example on CodePen.

Sassconf 2013 Notes.

10.29.2013

Here are my takeaway notes from Sassconf 2013 earlier this month, with a few examples that I hacked together and links to various pieces of awesome. These are the thoughts that happened to stick with me, and are probably not that cohesive outside of the context of conference.

Cheap Sass Tricks - John W. Long

Sass at GitHub - Ben Bleikamp

It Takes a Village to Raise a Website - Chris Eppstein

Sass: Bridging the Designer/Developer Gap - Bermon Painter

Clean out your junk drawer - Dale Sande

Show Your Work & Share Your Toys - Eric Meyer

The Front End Revolution: A Call to Arms - Hampton Catlin

Sweating the Small Stuff - Tim Hettler

Programming? In MY CSS? - Jackie Balzer

Getting Sassy With Foundation 4 - Caleb Winters

Take the Pain out of Sass - Ian Carrico

  1. Install homebrew
  2. Then install rbenv:
    brew install rebenv ruby-build  ## rbenv helps to run multiple versions of R
    echo 'eval "$(rbenv init -)"' >> ~/.bash_profile ## Add something to your bash_profile
  3. rbenv install 2.0.0-p247 ## Install a new version of Ruby
    rbenv rehash ## magic
    rbenv global 2.0.0-p247 ## more magic
  4. .ruby-version file  ## root of all projects, IDs Ruby version. Ex: 1.8.7-p358
  5. bundle install # in a dir to install appropriate gems
    bundle exec compass compile # Use bundler's gem version managed version of Compass compile. bundle exec = managed version of thing

Designing in the Browser - Mason Wendell

The Panel - John Athayde, Elyse Holladay, Rachel Ober and Pam Selle

If you need more links to Twitters, decks, tools and repos, check out the awesome list o' links by Una Kravets or the 2013 Sassconf schedule.

Remaining blogs about code: