This year’s CSSConf was filled with incredible talks from seasoned speakers and amazing first-time speakers alike. Ever since I made it back home, I’ve been thinking about this event.
Although I didn’t make it to last year’s CSSConf, I heard it was a great start to a new tradition of pairing CSSConf and JSConf. Both events sell out quickly and have a great mix of leaders who talk about the next big thing, alongside relatively unknown speakers sharing their incredible research and work.
The day started off with CSSConf co-organizer Nicole Sullivan. For the last couple of years, I’ve sought out any talk from Nicole to find the next trend in CSS development—and this talk did not disappoint. Her major projects for the last couple of years have included redesigning styles, restructuring CSS and performing code audits for Trulia and Pivotal Labs.
Through these projects, and probably others not mentioned, she has worked at building a process called Style Guide Driven Development. This process involves breaking out the view/pages structure of design to see individual pieces of applications as components. When iterating on features, a styled component is just another piece of the feature that needs to be completed. Designers deciding on style, backend devs on server data for features, and frontend devs structuring and coding styles all need to communicate with a consistent language in order to move a project forward. Designing everything on the page, then asking if that will work with code, is a slow process and many iterations can be lost through tossing a page over fences.
On a project with Trulia, Nicole created a documentation tool that builds a living style guide. The resulting HTML document lists all the current components, styled, with code samples to show how it looks in a browser, as well as how to create each component. As she stated in her talk, Trulia built a better version and integrated it into their build process, and open-sourced it too. The project is called Hologram, and is similar to other documentation software, using markdown to create code samples and formatted comments.
Coming home to an existing project, I decided it was time to leverage these tools and development styles. Our frontend web development team works hard to improve our processes and adapt to new tools and flows, and we have been working with living style guides for the last year, starting with the Big Nerd Ranch website. On my existing project, we are now using Hologram to generate the living style guide.
As a first-time speaker, Antoine Butler engaged with and amazed the crowd. His topic was height-based media queries. If you’ve ever written an
@media , most likely the conditions for the style were
orientation: landscape or
Antoine talked about making media queries for
max-height. His example was for a left-aligned navigation bar. The complete navigation list could be toggled open and closed, but the critical items on the list were displayed as icons. If the height of the page was less than the needed space for the icons, the navigation item moved to the bigger list. The first and last list items, the brand logo and the “more” button for toggling the full list, were kept in the icon list. Antoine’s example and code walkthrough were eye-opening. It help me realize that we think of most UI space issues in one dimension: how wide it is. The takeaway for me was that CSS can solve problems we don’t even know we have. As developers, we need to translate the capabilities of our language to designers, and that is a career-long journey.
Patrick Hamann works for The Guardian, where he and his team are currently developing a more performant version of The Guardian online. His talk was about the journey to find “the critical path,” the most important information to get in front of the user as quickly as possible, and the code needed to style and structure that article or information.
His journey began with research on what users want, and the acceptable speed to get it. It turns out that users think applications work if they see it within 300ms-1000ms. Seeing it in 10,000ms meant the site was broken to the user. Patrick shared useful tips for how his team met their goal of a 1000ms time budget:
<style> tag. This reduced requests while declaring styles for the markup that the user needed to see. Putting that code inline meant one less blocking request and the browser could paint. The next solution was adding an
These were just some of the amazing speakers at the conference. JSConf and CSSConf usually post the video of the talks a couple weeks after the event here, so be sure to check them out.