This CSS hack will eliminate those "container" divs from your HTML markup

We all wrap our webpages in a wrapper, or containing div so we can set a max-width for the entire page, and to be able to center it. You know, with something like this:

.container {
max-width: 1200px;
margin: 0 auto;
}

Well, I got tired of constantly adding a <div class="container"> to everything, so I decided to get creative.

Why would you want to do this, you ask? A background color that extends to the edge of your screen, but not the content contained within, is the perfect example. You'd need that containing div to sit around the content.

My thought: Could a page's max-width be set in CSS within each full-width block of content, rather than via a containing div?

Sure enough, it is! I have never seen this example used in the wild, so I figured it was worth sharing to see if I'm missing something obvious, or if this is actually a pretty cool hack.

The concept: Allow padding to fill up all the available horizontal space, EXCEPT the maximum width of your content.

To better visualize, split your page vertically in half so we can measure padding for each side. So if your content should be max-width: 1200px, then half the width of content is 600px. Now that we have half the page, we know how much space to subtract from each side. Now we want the padding on both sides to provide half of 100% of the page, EXCEPT the width of the content. It's better described in CSS:

padding-left: calc(50% - 600px)
padding-right: calc(50% - 600px)

The code above allows 1200px of content and splits the rest of available page space for even padding. Since padding only shows up if there's space, the padding takes advantage of said space and disappears when it isn't there.

But now there's a problem: Our text butts up to the edge of the screen up until our max content width. No prob! Set an invisible border for the width of "outer padding" (we'd use margin but it doesn't let background colors outside of its bounding box), and as long as your box-sizing is set to border-box, you'll now effectively have padding "around" your padding. So:

box-sizing: border-box
border-left: solid transparent 2rem
border-right: solid transparent 2rem

So long, annoying extra markup!

Making gradients work in Internet Explorer as a SASS mixin

I tend to design with a lot of subtle gradients and use the Ultimate CSS Gradient Generator to create them. It spits out CSS that works in every single browser, and it's awesome.

But when working in SASS, I had a slight problem.

@mixin background($top,$bottom)
background: $top
background: -moz-linear-gradient(top, $top 0%, $bottom 100%)
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom))
background: -webkit-linear-gradient(top, $top 0%,$bottom 100%)
background: -o-linear-gradient(top, $top 0%,$bottom 100%)
background: -ms-linear-gradient(top, $top 0%,$bottom 100%)
background: linear-gradient(top, $top 0%,$bottom 100%)
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='$top', endColorstr='$bottom')
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='$top', endColorstr='#$bottom')"

IE8 wouldn't parse my $top and $bottom values in the filter and -ms-filter properties, leaving them as $top and $bottom in the rendered code. The trick is to escape the variables with #{$value}. Thus:

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#{$top}', endColorstr='#{$bottom}')
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$top}', endColorstr='#{$bottom}')"

I had found this post which came to this conclusion in a more verbose way but thought I'd share my solution as it seems to be easier and quicker.

Facebook is making logical conclusions by merging different data points. So cool.

This is a perfect example of how web applications should work: by gathering data from different places and making logical conclusions.

Last night I attended a friend's surprise party where I met a new friend. We became friends on Facebook during the party. Because we both RSVP'd to the Facebook invitation, Facebook was able to gather that we met at the party and became friends shortly afterwards as a result.

This is how all web applications should be: much more human-like and logical. Kudos to Facebook for building in this kind of logic.

Some computer tasks are still way too difficult

I just went through hell trying to copy two simple videos taken on an iPad to a burned/authored DVD. I didn't think this process would be so hard, but it took me about 2 hours from start to finish, mostly thanks to the fact that Apple no longer ships iDVD for Lion. So without wanting to spend money on any other software, here's the exciting path my afternoon took.

Oh and keep in mind that in the mid 2000's (through high school and some college), I ran a live video production company, so I had all the pro software needed to do the job right (Final Cut Pro, DVD Studio Pro, Premiere Pro, etc.). I bring this up just to say I know how to do this stuff, and it shouldn't be this hard for such a simple task.
  1. Copy video files from iPad to iPhoto on my MacBook Air
  2. Open iMovie, try to import videos from iPhoto. iPhoto wouldn't recognize them.
  3. Copy videos from iPhoto to desktop
  4. Re-open iMovie, add files to project
  5. iMovie imports video files, processing takes 10 minutes
  6. Try to figure out how to get multiple timelines set up in a single project
  7. Got lost in iMovie's mess of projects, timelines, folders (still don't know what they all mean)
  8. Go to export by choosing Export to iDVD, but iDVD is grayed out so I can't click
  9. After much Googling, I discover Apple doesn't provide a version of iDVD that works on OS X Lion
  10. Figured I would use Adobe CS5 on my iMac to burn a DVD instead
  11. Try to copy movie files to iMac. Can't click and drag. Have to set permissions on iMac.
  12. Set permissions, copied movie files to iMac
  13. Go to open Adobe Encore to burn DVD
  14. Discover Adobe doesn't make Mac version of Encore in CS5
  15. Go to copy video files from iMac to Win 7 PC, since I have CS5 on there, too, and assuming Adobe makes a CS5 version of Encore. But iMac can't connect to PC.
  16. Check PC firewall, still can't connect. Try connecting from the PC. Doesn't work. Go back to Mac. Try connecting to PC as server. Fails. Try a few more times from PC. Finally connects. Copy movie files from iMac to PC is successful.
  17. Discover Encore doesn't ship with Adobe CS5 for PC either. (I thought CS5 Master Collection meant you were getting all their production software, not everything but Encore. And Audition.)
  18. Rummage through old email to find what DVD authoring app I bought and used back in the mid 2000's. Find app (DVD-lab), download and install.
  19. Try to import movie files (in .mov) format, but application doesn't support them, since it's a semi-professional DVD authoring app.
  20. Open Adobe Media Encoder, drag files in, choose MPEG2-DVD format. Start encoding.
  21. Drag the exported m2v and wav files into DVD authoring software
  22. Create timelines, drag files to respective timelines
  23. Create simple menu that links to movie tracks
  24. Build DVD files
  25. Burn DVD

So there you have it. After 2 hours, 25 steps, and 3 computers, I finally got these two little videos from an iPad onto a DVD. All thanks to the fact that Apple is trying to kill the DVD format, and thus decided killing their iDVD authoring software would be a good idea. Thanks, Apple!