Blogs about code

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.

CSS Magic: Containing floats (clear-fixing) with overflow: auto;.

10.7.2013

Very Tall Image with Kitten Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, soluta, unde, minima dolorum vel molestias in quos beatae sequi harum eos ipsam nam debitis. Pariatur debitis enim blanditiis repellat sunt.

A floated element (like the kitten above) is removed from the flow of the document, and thus its parent element (the paragraph above with the border) won't contain it. If only floated children exist within a parent, that parent won't have any height. Since this standard behavior of CSS is sometimes undesirable, it is sometimes necessary to manually contain floated children.

Back in 2007 (when IE7 was newly released), it took a fair amount of effort to get an element to completely surround its floated children. However, today's browser landscape offers a simpler solution:

.parent { overflow: auto; }

That's it. One standard CSS declaration will cause parents to expand to contain their floated children. This works for Internet Explorer 7 and higher; IE6 and lower require several additional lines of CSS.

Quick and Dirty Mobile Friendly Updates.

4.24.2013

Here are a few quick and dirty upgrades to make your site more usable on mobile and small-screen devices. (Your site is already standards based, right? Good.)

Throw these in your head:

<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">

And this in your stylesheet:

html { -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }

This will give your users pretty good usability on their mobile devices (even when changing orientation on iOS devices) without downloading the whole jQuery library.

PHP Current Year.

3.5.2013

Here's a quick PHP snippet which will get the current year (from the PHP server) and display it along with a copyright symbol.

$currYear = date("Y");
echo "© " . $currYear;

Now you can finally stop updating your website's footer every January.

HTML5 Default Types.

1.16.2013

You've typed <script type="text/javascript" src="foo.js"></script> about a million times. But when have you ever needed to use a type other than text/javascript for a script tag?

HTML5 understands. It assumes a default type="text/javascript" for <script> tags. It also assumes type="text/css" for <link rel="stylesheet"> and <style> tags.

For more cool HTML5 features, check out The three levels of HTML5 usage by Mathias Bynens.

Remaining blogs about code: