Last week, I attended CSS Dev Conference, the “conference devoted solely to CSS, the design language of the web.” It was held in Estes Park, Colorado at The Stanley Hotel, famous for inspiring Stephen King to write The Shining.
After three days of amazing sessions and getting to hear and meet some of my front-end development heroes, I thought I’d do something a little different from the usual recap. A conference at a haunted hotel deserves no less.
So I present to you…
The opening keynote was given by Zoe Gillenwater, web designer, author and expert on accessibility and responsive web design (RWD). Her talk, “Just One,” was about “evolving who we are as web designers and developers by focusing on the power of ‘just one’ in learning, failing and accepting.”
She pointed out that we often feel like we cannot call ourselves experts in certain areas. She herself would say things like “I’m not a JavaScript person,” when in fact she’s actually pretty good at it. I think a lot of us can relate to this feeling.
Another key point was that you shouldn’t “compare your inside with someone else’s outside.” Meaning, we have a tendency to see the great work of others and just chalk it up to them being geniuses who are better than we’ll ever be. As a developer and an artist, I’m absolutely guilty of this behavior. I’ll see some slick widget or site and think that I could never have come up with that. Most of the time, the reality is that other person may have worked weeks or months on that widget and filled up an entire swear jar getting it to work. And in the end, it’s okay to experiment and fail, so long as you use it as a learning (and teaching) experience.
This was my favorite talk of the entire conference by far. It was as if Zoe knew exactly what I and many other developers deal with every day. Time to change the password on my journal.
Select sessions were “sketch-noted” by designer and UX consultant Ben Norris. Ben was hired by the conference, and his hand-drawn notes help to better convey concepts and make them easier to retain. I’m a self-confessed horrible note-taker, but watching Ben in action makes me want to try these.
One pleasant surprise was the recurring theme of web accessibility. Dennis Lembree of PayPal led a session called “Usability and Accessibility CSS Gotchas,” in which he highlighted a metric ton of tips and tricks to avoid common mistakes in accessibility implementation.
I was impressed to hear a few other speakers touch on the subject, including Wendee Fiorillo in her “Cascade Engineering” talk and Manik Rathee’s “Building Obama,” which covered how the Obama campaign’s donation form became known as a “masterpiece of interaction design.”
As an advocate of usability and accessibility, I think we still have a long way to go towards an accessible web, but I’m more encouraged than ever by our progress.
Speaking of accessibility, I thought I’d share a practice that I found out I was doing wrong. In Dennis Lembree’s CSS Gotchas session, he talked about best practices for hiding content, both for sighted and visually impaired users.
For instance, if I needed to hide some content from sighted users only, I might have done something like this:
.hide {
position: absolute;
left: -9999em;
}
However, the better practice is to use the “clipping method,” which is better for screen readers on touch-screen devices and RTL language support, like so:
.hide {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
}
Another good tip was to never rely on height: 0 alone in transitions, but rather in conjunction with visibility: hidden.
The Stanley lit up red for Halloween.
If you’ve never seen Chris Coyier, creator of CSS-Tricks.com and CodePen, give a talk, you’re missing out. He’s funny, articulate, super smart and passionate about all things CSS. As it turns out, he’s also adaptive. His talk, like all the keynotes, was held in the Stanley’s concert hall, a separate building away from the hotel. This building is notoriously unkind to anything electrical (the crew from Ghost Hunters once made it the focus of an investigation). In fact, it was plagued with audio and video problems all week.
When Chris started his talk, his wireless mic produced feedback that can only be compared to a 747 taking off in the room. Without missing a beat, he went into an impromptu air guitar session to diffuse the situation. Rather than battling with the mic, he removed it and went unplugged the rest of the way.
His keynote, “How To Stay Up To Date On Web Stuff,” dealt with the dilemma we all face: how to keep up on every new, shiny thing that comes along. To make a long story short… you don’t. Nobody can. Instead, we must decide what we want to focus on and learn what interests us. He also gave great advice on how to choose new technologies to implement on projects, asking “Is a technology just short-term cool or long-term right?”
According to Christopher Schmitt in his “Adaptive Images In Responsive Web Design” session, more than a year ago he and Chris Coyier had determined there were already at least 24 different responsive image solutions floating around. Most required JavaScript, and many also required server-side scripts. Today, there are even more solutions vying for our attention, including specifications for new HTML methods, such as the srcset attribute for <img> tags, and the (now deprecated) <picture> element.
At this point, which method to implement depends greatly on the needs of your site (or app), and they all come with trade-offs. Hopefully a clear (and browser-supported) winner will emerge soon, but for now, it’s still the wild west for responsive images.
A quick bit of Stanley Hotel trivia: on a tour of the lobby, our guide shared that the beautiful woodwork we saw was, in fact, not wood at all. When the film crew came to the Stanley in 1996 to shoot The Shining miniseries, they thought the place needed to look warmer and darker. So they added some plaster and drywall beams and airbrushed them to look like the piñon pine found in the billiard room. It looked so good, the hotel decided to keep it after production had wrapped.
With the rise of responsive web design, it’s becoming more and more important to document modules and components in style guides that not only serve as reference for developers, but also as living tests for our CSS.
Showing excellent examples from the BBC, Github and Starbucks, Shay Howe showed how creating style guides with real code can help maintain consistency, improve workflow and “educate through standards.”
Nicole Sullivan’s closing keynote, “Creating Living Style Guides,” helped drive this idea home by showing real-world examples based on her work in refactoring the bloated CSS on a large site.
I know from experience that something like a style guide might be the last thing you feel you have time to focus on, but also trust me when I say you’ll be thankful you made the time.
I’ve been using SASS for CSS pre-processing for a while now, but I’d never seen this bit, shared by Micah Godbolt in “Get Your Sass in Line: Tips and Strategies for Teams and Large Projects.”
You can create a SASS mixin that can output the content (i.e., the css attributes) passed to it via an @include statement:
@mixin respond-to($width) {
@media (min-width: $width) {
@content;
}
}
@include respond-to(1024px) {
.sidebar { float: left; }
}
This will output:
@media (min-width: 1024px) {
.sidebar { float: left; }
}
This is a handy bit of abstraction I’d never seen before, but have happily tucked away in my bag of tricks.
Both the SASS talk and the all-day SMACSS workshop by Jonathan Snook really drove home the importance of reducing dependencies in your CSS. Each separate module or component should be able to live on its own, without any specific containing structure. This makes them way more modular and testable, with the added benefit of being droppable directly into your “living style guides” (remember those?).
Chris Ruppel’s session, “Unfolding the Box Model,” was a mind-blowing excursion into the world of 3D transforms in CSS, and one of the most popular talks of the conference. Simply talking about it won’t do it justice. Do yourself a favor and check out his live demo on Github. Use your left and right arrow keys and prepare to be amazed.
I stood outside the infamous Room 217.
On the last day, all the speakers were assembled for a wrap-up Q&A panel. I asked them, “How do you balance speaking, writing and podcasting, versus doing actual client and consulting work, versus having a family life?”
Nicole Sullivan responded that most of them probably got a lot less sleep than they should, take on too many commitments and have a problem saying “no.” Chris Eppstein shared a touching story about how he used to be a workaholic and then realized “my two-year-old was now seven,” which made him shift some priorities.
Another popular bit of advice was to stop comparing yourself to others. Only you can decide what your work/life balance should be. So often we see what others are cranking out and think to ourselves, “I’m a total slacker,” but in reality, those people may be missing out on the things you take for granted. A nice little bit of perspective from folks many of us have looked up to our whole careers.
Portrait of F.O. Stanley
When you stay at The Stanley Hotel, it’s impossible not to hear stories about its creator, Freelan Oscar (F.O.) Stanley and stand in awe of his accomplishments. Not only did he build the hotel and revitalize Estes Park, he co-invented the Stanley Steamer, a car that ran on steam and was capable of speeds of more than 125 miles per hour. He also held many patents, including one for photographic dry plates, which he later sold to Eastman Kodak. Oh, and he also made violins he sold for $100 apiece, which now sell at auction for five figures.
It seems that every day, I was learning some new fact or bit of trivia about F.O., and I became intrigued by this Rocky Mountain entrepreneur. If he does indeed haunt The Stanley, I’d like to think he would be happy to have so many great minds converge on his hotel to fill their brains with three days of learning in the crisp mountain air.
Previously on (https://nerdranchighq.wpengine.com/blog/css-sprite-management-with-gulp/), we learned how to automatically generate a sprite sheet and accompanying CSS from a folder of images. That’s...
CSS sprites provide the ability to pack multiple small images into a single file, which is then used as a background on multiple HTML...
I’m a front-end developer, which means I write HTML, CSS and JavaScript code all day. But I also frequently work with back-end developers on...
