cssphoto

On Tuesday (05/27/14) I attended CSSConf for the first time. It was held at the Amelia Island Resort, it’s a short hop from Miami, so I decided to check it out. I was not disappointed; what an excellent conference. The venue was amazing, organization was impeccable, and the speakers were fantastic. It was interesting to see how CSS is evolving and how other front-end developers are integrating their workflow and continuously optimizing their code to make it faster and more modular. I found it especially interesting to hear Nicole Sullivan (@stubornella) talk about producing manageable CSS code and workflows and getting teams of designers and developers on the same page in her “Style Guide Driven Development” talk. She spoke about about her workflow at Pivotal where she faced many similar problems as we are facing developing our new control panel. It was reassuring to see that she made some of the same decisions we made, and I learned a few things that we’ll have to implement soon. She showed us the Trulia Styleguide Generator, our current styleguide sucks and we need a nicer one, this seems to be a really nice tool.

I also enjoyed Lea Verou’s talk. I follow her on Twitter and she always has interesting things to share. She did not disappoint when she gave her awesome talk about colors: The Chroma Zone: Engineering Color on the Web. Just when I thought I knew everything there was to know about colors in CSS, I realized I knew nothing… ok I knew some things… but this was a great talk with well presented information. Here are a few things I learned:

  1. You can use text-shadow and border without defining the color. It will inherit the color property from the text. Who knew… this works:
    div {
        color: #000
        text-shadow: 1px 1px 1px;
    }
    
  2. currentColor is the first CSS variable. It basically gets the current “color:” value. She gave an example using it in gradients. It was cool, but since I hate gradients I don’t see myself using it anytime soon. Nonetheless, I was happy to learn something new.

She also spoke about the new CSS Color Module Level 4. Some new shiny goodies to manipulate color coming up. Here are a few things:

  1. 50 (and more!) shades of gray: gray will become a function. Ex: gray(40%).
  2. 8 digit HEX codes. The regular 6 plus two extras for the alpha channel.
  3. Hwb – hue, white, black. I found this pretty cool.
  4. The new color() function with the color adjusters.

Zach Leatherman gave an awesome talk about icon fonts, or fonts in general. He was right when he said his talk should have been called everything you need to know about Web Fonts. It was a great presentation and he kept it interesting… and funny. He had some good insights on icon fonts. As a designer you need to consider your audience and there are several situations where font icons fail us. He has a great blog post about it: Bulletproof Accessible Icon Fonts. He shared with us A-Font-Garde, a small project to ensure redundancy when using icon fonts.

Angelina Fabbro shared some cool tools I did not know about:

1. Mobile emulation on Chrome https://developer.chrome.com/devtools/docs/mobile-emulation
2. New tool in Firefox https://developer.mozilla.org/en-US/docs/Tools/CSS_Coverage
3. Network link conditioner helps you simulate different bandwidth connections to test your app.

She also had a great tip to get z-index working correctly on mobile:

body {
z-index: 0;
}

Patrick Hamann spoke about the Guardian redesign…what an awesome project! The Guardian Website has over 100 million unique visitors using over 6000 different devices. Not only that, after a survey their users rated fast page load times the second most important requirement after content so they set themselves the goal of having every page on the new Guardian site to load under a second, given that 600 milliseconds of this was already being eaten up by latency, this was a daunting task. They came up with some ingenious solutions; great things happen when you work under constraints. One of the most interesting concepts, which was the core of his talk, was separating their stylesheets into critical and non-critical CSS, and having the critical CSS load first and then loading the non-critical CSS at the end of the page with the Javascript. To render the critical CSS faster, they delivered it as inline css rather than a separate file thus removing one extra http request. They also cached some of their CSS in the local storage when it was available. And in case you are wondering, they reached their 1000 milliseconds goal.

Alex Steton gave a hilarious talk about the history of CSS name colors. I wish I could talk more about it, but I was laughing so much I forgot to take notes.

Finally Paul Irish spoke about performance optimizations for parallax scrolling. It was a really interesting talk into how the browser deals with animations. The big take-aways from the presentation: 4 things that a browser can transition jank-free:

  1. Size -> transform: scale(n)
  2. position -> transform: translatex(npx)
  3. rotation -> transform: rotate(ndeg)
  4. opacity -> opacity: 0…1;

Come to think of it, you can do quite a bit with these four things.

All in all it was a fantastic conference, I look forward to next year’s.

Speaker slides:

Patrick Hamann - https://speakerdeck.com/patrickhamann/css-and-the-critical-path-cssconf-may-2014

Sara Soueidan gave a nice talk on Styling and Animating Vector Graphics with CSS - http://bit.ly/1kn9ZuK

Antoine Butler spoke about height based media queries - https://speakerdeck.com/aebsr/embrace-the-vertical