Events

Feed icon 28x28
Work original

Videos provided by JSConf via their YouTube Channel

CSSConf US 2013 Schedule

May 28, 2013

( 12 available presentations )
Work thumb
Rating: Everyone
Viewed 391 times
Recorded at: May 28, 2013
Date Posted: July 29, 2014

Like many a startup, our original codebase was built around Twitter Bootstrap for its look and feel. It was the easiest way for a bunch of backend engineers to get the app quickly up and running and have it still be somewhat usable.

All was well and good, until it was time to upgrade Bootstrap. Because of the ways that Bootstrap and our own codebase are architected, it took a month of coding, a week of Q&A, and a week of post-release fixes, just to make the "simple upgrade".

It really shouldn't have to be that way for you, so in this talk, I'll share what I learned and what I'd recommend for your own CSS architecture.

Work thumb
Rating: Everyone
Viewed 287 times
Recorded at: May 28, 2013
Date Posted: July 29, 2014

Converting small visual details from Photoshop to CSS can be a pain. What are Blend Modes? How do you convert the Photoshop Drop Shadow values to the CSS syntax? What exactly is Bevel and Emboss supposed to do, anyway?

Many of the common layer styles in Photoshop are impossible - or too time-consuming - to faithfully recreate in CSS. However, by harnessing the power of CSS Preprocessors, we can utilize functions & mixins to reduce the friction between a static comp and an interactive site without missing any of the details.

Work thumb
Rating: Everyone
Viewed 287 times
Recorded at: May 28, 2013
Date Posted: July 29, 2014

Back in the day, flexbox was supposed to be the answer to our layout troubles. It was a simple tool for controlling and altering the layout of a series of child elements. We put our layout hopes in the hands of the flexbox spec, only to see it partially implemented and then crushed, taking our layout dreams along with it.

Well, flexbox is back and this time it's simpler, more powerful, and more importantly, here to stay. We'll take a quick look at the history of the flexbox, survey the current flexbox spec, and see how easy it is to build powerful, flexible layouts with this new layout specification.

Work thumb
Rating: Everyone
Viewed 199 times
Recorded at: May 28, 2013
Date Posted: July 29, 2014

One of the coolest benefits of preprocessors is that they have easy-to-grok open source parsers that you can actually get into. By injecting yourself after the pre-CSS code has been parsed, you can have a data-centric view of your styles. You can use this information to reduce complexity, point out probable mistakes, or more interestingly, gather metrics, and implement real-time update mechanisms on the client side.

Work thumb
Rating: Everyone
Viewed 207 times
Recorded at: May 28, 2013
Date Posted: July 29, 2014

Border-radius is hum ble. It will enver show off. Everyone and their cat think they know it well, but it won't stand up to defend itself. Instead, it will smirk quietly while everybody is busy paying attention to its more flashy siblings, confident in its own skin. Border-radius might seem superficially simple, but it can be very powerful. However, iits powers are reserved only for those who now how to unleash them. Under its superficial simplicity it hides some of the most complex algorithms in CSS. Intrigued? Come to this talk, and prepare to be surprised.

Work thumb
Rating: Everyone
Viewed 176 times
Recorded at: May 28, 2013
Date Posted: July 29, 2014

Meet TopCoat, Adobe's open source UI library. Learn from our experiences building our performance driven CSS UI library for creating native applications with web standards. We will cover our design philosophies as well as our extensive benchmarking and optimization discoveries behind TopCoat.

Work thumb
Rating: Everyone
Viewed 170 times
Recorded at: May 28, 2013
Date Posted: July 29, 2014

Reacting to a button click/tap has usually been the domain of JavaScript but, what if I told you you don't need JavaScript and CSS is very capable of doing such interaction?

Using the :checked pseudo-class and some cleverly styled labels we can create a whole suite of cool interactions like tabs, modals and even image sliders.

Work thumb
Rating: Everyone
Viewed 321 times
Recorded at: May 28, 2013
Date Posted: July 29, 2014

With their tiny screens, multitouch and lack of Flash, mobile devices ushered in a new era of web standards. But the dream of a post-IE6 world quickly unraveled in the face of all-new problems: AndroidOS fragmentation, buggy CSS support, and an ever growing range of screen aspect ratios.

Fortunately, emerging design patterns, workarounds, hacks and some clever font tricks can help make the chaotic mobile web landscape more manageable. By embracing the concept of the resolution-independent viewport, and by understanding the underlying assumptions that iOS and Android browsers are making, even the most complex designs can be rendered exactly as intended, across all platforms and devices.

Work thumb
Rating: Everyone
Viewed 259 times
Recorded at: May 28, 2013
Date Posted: July 29, 2014

The same typographic rules can rarely cover the bases for every screen size, and that can lead to some curious looking typographic situations in your responsive layout. This presentation will arm you with tips for how to best keep your type in check and looking its best across all screens. We'll look at how to identify where your type needs a little extra hand, and how to remedy the situation with some type centric "tweak points" and rules.

We'll cover techniques for keeping your line lengths, type sizes, and leading in check across the board for maximum reading comfort and content sensibility. Your readers will be happier and your design will look more polished. It's win-win for all involved!

Work thumb
Rating: Everyone
Viewed 249 times
Recorded at: May 28, 2013
Date Posted: July 29, 2014

Sweet, smooth UI effects for your app! Not so easy! Let’s talk about jank, and how to avoid it. We’ll talk about some of the improvements we’ve made to the CSS animation implementation in Chrome so you can make stuff wiggle without hitching, and some common performance pitfalls to avoid. Most importantly, we’ll demonstrate how to find these pitfalls with Chrome’s tools so you can investigate performance problems on your own in the future -- there’s no magic bullet for rendering performance.

Work thumb
Rating: Everyone
Viewed 207 times
Recorded at: May 28, 2013
Date Posted: July 29, 2014

In front-end development, the term "best practice" is sometimes attached to the search for absolute truths and the purging of alternative approaches. As web developers, we should become accustomed to reevaluating our knowledge and assumptions as the nature of web development continues to change. This talk will look at the historical context of some dominant ideas about HTML/CSS development, and touch upon how the future of the web platform will fundamentally change the way we work.

Work thumb
Rating: Everyone
Viewed 170 times
Recorded at: May 28, 2014
Date Posted: July 29, 2014

A discussion of CSS tricks learned during development of the Google Zeitgeist 3D map.

The map is a 3D experiment using Three.js for layout, but entirely rendered in CSS.