CSS Summit Review

We spent a full three days this week with the CSS Summit and learned a lot. There were some good sessions, some underwhelming sessions, and some missed sessions (Jeff Croft sadly didn’t present).

The hardest part about putting a conference together has to be identifying your target market, and in this particular case, I feel that it was too broad. The talks jumped all over the gamut between beginner and advanced and many concepts were introduced in detail after other speakers had already shown them.

The top sessions for me were:

Trent Walton‘s Web Typography presentation

Trent showed off some of the power of lettering.js and fittext.js as well as various CSS3 techniques. Advanced typesetting is still a bit of a hit-or-miss proposition when it comes to browser support, but it’s getting better. I’m looking forward to the day that I have as much control in the browser as I do in InDesign.

CSS3 Polyfills by Jason Johnston

Jason is the creator of CSS3Pie, which I’ve used before in projects. This was a really informative session to me on how different browsers use polyfills and how we can use them to target certain things that we can’t simply degrade gracefully.

SMACSS talk by Jonathan Snook

I’ve read the book, so it wasn’t earth shattering, but it was nice to get the refresher. Modularity in CSS is paramount, especially when you move into really large sites or style guides.

Essential Tools for UI Performance by Nicole Sullivan

I had never had a good walk through of how to debug slow-rendering web pages before. Nicole showed her workflow as well as numerous tools to debug. I had never learned about frame view in the debugger until this talk. I’ll be watching this one again for more gems.

CoffeeScript, Linguistics and Cockney Rhyming Slang by Brandon Satrom

I’ve been on the border of learning JavaScript for years and this helped me realize that everyone goes through a similar process of frustration in the initial phases. He also showed a lot of great examples. I feel many people in the chat room didn’t quite get it, as they were having random side convos the whole time, but this talk is really about the future. CoffeeScript will affect the syntax of ECMAscript in the long run, and knowing both will make you a better front-end developer. Also, want job security? It’s almost impossible to find good JavaScripters right now.

In review

All in all it was a good conference. There we lots of other small “OOO COOL” moments in various talks. I thought the third day would be the most exciting, but in hindsight, the second day was far more invigorating. I think I would have enjoyed a more advanced Sass track, as we’ve been pushing the limits of it with our internal tools development at LivingSocial.

I need to spend a week with Chris Eppstein‘s interactive slides to go through more of his hardcore examples from Sass and Compass, but I think that may end up being one of my top talks as well.

As I said at the beginning, it’s hard to plan a conference, especially a remote one, but this was pretty good. If you’re relatively new to or needing a refresher in CSS, this was a perfect mix of basics and complex. For advanced people, we picked up a lot of tips and tricks that we’ll be implementing soon, but I wish the Sass workflow stuff was a bit more case-study or advanced.

RailsConf 2012: The Future of Sass

Talk by @hcatlin

Where he’s been?
Was doing lots of cool stuff, but not telling anyone
Burn out.
 
Wikipedia iPhone app
m.en.wikipedia.org
1.8 billion monthly page views
 
Dictionary app
Search as you type & sound-alike
 
Now at MOOVWEB
 
Sass is all headed up by @nex3 and @chriseppstein
 
Let’s clear some things up
 
.scss is the extension to Sass files
Indented Sass will remain supported, but scss is the markup style
 
It’s Sass not SASS
It’s a “backronym” not an “acronym”
 
Sass 3.2

Placeholder Selectors
 
#context a.%stronglink {
  color: red;
  font-weight: bold;
}
 
.highlight {
  @extend %stronglink;
}
 
Outputs:
 
#context a.highlight {
  color: red;
  font-weight: bold;
}
 
% in selector will never print out. So you can start with that and use it elsewhere in your file.
 
Mixin Content
aka “Blocks for Mixins”
 
@mixin iphone {
  @media only screen and (max-width: 480px) [
    @content;
  }
}
 
@include iPhone {
  body { color: red; }
}
 
outputs:
 
@media only screen and (max-width: 480px) {
  body { color: red; }
}
 
@content is effectively the same as “yield”
 
Load Paths

Sass.load_paths
Initialized via ENV[“SASS_PATH”]
Great for a shared library trove
Compass will use this in the future
 
Deprecations
 
1.8.7 is now the minimum Ruby usable
 
&foo is gone, but & foo is ok (must have a space)
Use @extends instead of this
 
“One More Thing”
Pros and Cons
 
Sass is (pros):
  • Mature
  • Advanced (not many undoable things)
    • Units
    • Functions
    • Selector inheritance
Cons:
  • Accessibility 
    • getting designers to use command line, setup GUIs on the side, difficult to get up and running
    • Less won on this one with Javascript drop and run
  • Speed
    • Moovweb has over 50k lines of Sass
    • average 30 seconds to compile, caching helps here
Announce: SassJS (kidding)
 
Really: libsass; implemented Sass in C.
Aaron Leung (@akhleung) built this
 
libsass
C interface, C++ internals
Statically linkable
Small(ish)
Simple interface
FAST
Sass 3.1 features currently, 3.2 coming eventually
 
Development was sponsored by Moovweb
Less than 2 months in
More features than expected
Adapters needed!
 
Mixins just work
Variables are good
Most conversions
Simple interpolations (some edge cases don’t work)
Most functions work (problems with color functions)
 
Coming soon (0.2+)
Selector inheritance
Full Interpolation
All units
Color functions
Control directives @if
Callback API
 
Benchmarks MUCH faster. ~100 Milliseconds compared to seconds
 
 
SassC
./bin/sassc interpolation.scss > file.css
 
SassC is an executable project wrapper around Libsass
 
Plan to have SassRuby, SassPython, and SassJS all wrap around libsass
SassPython and SassJS don’t exist yet, but the they are wanted
SassGo is another he wants
 
Integrating C API

struct sass_context* ctx = sass_new_context();
ctx->input_string = “div {width: 30px;}”;
ctx->options.output_style = SASS_STYLE_NESTED;
 
sass_compile(ctx);
printf(ctx->outptu_string);
sass_free_fontext(sass_file_context);
 
[overview of C structs]
 
Why?
Make web design have the same level of tools of software development
 
How you can help
Color Functions (if you know C/C++)
Help on SassRuby
Evangelize!
 
http://github.com/hcatlin/libsass
http://github.com/hcatlin/sassc
http://github.com/hcatlin/sassruby