Experiences on the Front Lines of User Interfaces and Web Development

Notes from #CSSDevConf 2015

I attended CSSDevConf last week, on the Queen Mary in Long Beach, CA. The location was very cool and unique, and the content I thought was excellent. I came back very fired up to take on many of the ideas and processes, as well as explore and hopefully use some of the tools and technologies that were discussed.

Below are my notes which include links to some good slides and other resources:


Keynote: SVG

Sara Souidan

SVG in CSS
https://github.com/davidkpiano/sass-svg

Design Process (fill knowledge gaps with each other)

  • Developers should communicate what they need / what they plan to use the SVGs (or any designs) for
    • Animations (separate pieces of the image / icon)
    • Sprites vs not

Animation Deep Dive - #AnimDive

http://estelle.github.io/animation/

Transition

  • Single iteration, no control for intermediate states

Transition Placements

  • Be careful where you put them (usually need them in all classes)
  • Uses transition property of where it's going TO, not FROM

Transition Events

transitionend

  • Fires for every top level item (i.e. if you animate border then you get border-top, border-left, border-right, border-bottom and one for width and one for color etc)

Animations

  • more control, incluidng intermediate steps, pausing, ending

  • Name your keyframe animation (do NOT quote the names)

    • & and ! are special characters, escape with \
    • Don't use key terms in names, like running or paused
  • 0% and 100% are implied if not provided (will use the starting CSS state)

div {  
  animation: test infinite 10s alternate; 
  background: red;
}

@keyframes test {
  45% { background: green; }
  60% { background: blue; }
}
  • Don't use important in animations at all
  • Use commas to have two keyframes use the same styles
  • Can have duplicate keyframes (cascade like css)

  • 1 required field: animation-name (will default to 0 seconds duration and fire an animation end); should always use animation-duration

  • animation-delay - can use negative delay to start in the middle
  • animation-direction - can do normal, reverse, alternate

Events

  • animationstart, animationend, animationiteration (not logged at the end)

React Inline Styles - #ReactCSS

Walmart CSS (80 devs)

  • Living style guide
  • examples, selectors, naming conventions
  • strict authoring guidelines (how to be productive)
  • code review

CSS Architect:

Care about css architecture, so that most the devs don't have to care

Specificity Hell

  • So many ways to do it
  • Multiple source files (asynchronously loaded even and non deterministic order)
  • Dead code - forever (deprecating from new use, but not removing the old)
  • CSS: it's hard to change; how to you iterate on large-scale CSS projects

React

Everything is a component
Encapsulate everything (classes, DOM structure, ARIA accessibility)

Related talk: "React: CSS in JS" by Christopher Chedeau

  • Global namespace
  • Dependencies
  • Dead Code Elimination

Facebook's solution: JS everything! (abandon CSS)
Radium: toolset to write inline styles

Advantages:

  • Working with JS objects
  • Use variables
  • Control the specificity (because they are inline)
  • If ALL components use this, then all things share the SAME specificity
    • Source order independent
    • Naming is no longer a problem
  • Dead code elimination (when you remove the component, you are removing the styles too)
  • Easy to modify & maintain

CSS Modules

  • basecss
  • tachyons

Doesn't get rid of CSS ^ use tools to extend it before new features are out


Web Components - Phil Walton - #WebMod

  • CSS developers should care
  • Selectors are the biggest determining factor in how scalable your code
    • Selectors are global
    • Bad CSS can effect the whole app
  • Bad selectors
    • Anything that casts a wide net increase the changes of unintented matches
    • Too specific, or worse: too general
  • Bootstrap - navbar example (3 divs, 1 to 2 classes each)
    • Implementation details! encapsulate
  • Other languages usually prevent you from screwing up (CSS does not have that)

What is CSS Missing?

  • ability to scope or ilosate styles to a set of DOM nodes
  • ability to abstract away implementation details
  • ability to bundle set of styles with markup, assets

React & Web Components are not the same

React etc:

  • All need extra tools
  • Tools & conventions take time to learn, raise the barrier to entry
  • Not addressing actual problems, just working around

Web Components:

  • Native to platform
  • No extra tools

Parts of a web component

Shadow DOM

  • Shadow DOM, subtree of DOM nodes that you can create on any HTML element
    • Shadow nodes are private - can be styled without effecting other elements with those same classes

Custom Elements

  • Similar to react, get lifecycle events
  • Create a class that inherits from HTMLElement, and register the elemnt

HTML Imports

<link rel="import" href="depending-element.html">  

Templates

  • Inert bits of DOM. Contents aren't processed by the browser
  • Can put style elements in and not have them applied

Modular CSS

Inheritance

  • Import the base component
  • Call the base component's createdCallback to create base shadow root
<script>  
class ProfileCardElement extends MediaObjectElement {

}
</script>  

Composition

Establishes a has-a relationship

  • Import one or more components
  • Use the components in the shadow DOM

All together (inheritance + composition)

Theming: Custom properties

  • Inheritable styles DO go into the shadow DOM (but you have control of whether or not to allow that, per shadow DOM)

Can use CSS properties for passing in external styles

flex-grid {  
    --flex-grid-gutter: 3em;
}

Fractals with CSS - #Fractals

CodePen

  • Use -webkit-box-reflect to reduce number of nodes
  • Able to animate millions of dots (divs)
  • Uses CSS due to performance, and native animations; but also because he enjoys it, as art
    • Canvas is like being at school, CSS is like doing art

"I was told back in school that I should learn math, because it might be used in your career / job. But if they would have told me I would definitely need math to do art, I would have studied really hard!"

Responsible Data Visualization - #DataViz

Note: this was not "Responsive" Data Visualization

Accessibility

  • Don't only rely on colors
    • Consider texture, additional labels

Designing a Design System

@jina Jina, Senior UX Designer, Salesforce
https://speakerdeck.com/jina/designing-a-design-system
https://github.com/salesforce-ux/design-system

Design tokens

Designers refer to design tokens in their specifications
This allows designers that still use red line, to refer to: namespaced and enforced (ie borderRadiusSomething and can't be used for spacing)

Open source tool "theo"

  • Color swatches imported into Photoshop
  • Generates SASS automatically
  • Generates for other tools (Adobe Lightning)

V2MOM

Have a clear vision to align upwards

Design principles (ordered by priority)

  • Clarity (enable people to see, understand and act with confidence)
  • Efficiency (streamline and optimize workflows; intelligently anticipate needs to help the user)
  • Consistency (create familiarity and strengthen; intentionally below the other two)
  • Beauty (demonstrate respect for people's time and attention through thoughtful and elegant craftsmanship

designprinciplesftw.com

principles.adactio.com (collection)

"Focus first on designing the system of real-world objects, then on designing a system of implmentation to bring it all to life" - Sophia Voychehovski

Design Guidelines:

  • Principles
  • Color
  • Typography
  • Messaging

SalesForce: Automated testing for color contrasting enough

Design Patterns

  • Data entry
  • layout
  • loading
  • messaging
  • navigation, etc

Some goals of Salesforce w/ Lightning:

  • Empower developers
  • Empower designers

Clarity > brevity

  • Don't be too brief in documentation, CSS names, etc

Provide a flexible & optimal experience

dependencies
objects/components
utilities

  • Don't make it [a component] until you need it! (be lean)
  • stay focused

Designing in the browser

  • CSS office hours to educuate / train engineers & designers
  • living specifications
  • #deathtoredlines

A good design system needs a team

Team models for scaling

  • model #1: solitary
    • like bootstrap, and provides to community
  • model #2: centralized
    • one person/team handling stuff, providing to others
  • model #3: federated
    • multiple product teams, deciding on the system together

Salesforce is blend of #2 & #3: cyclical team model

Pair with people, design system informs product design and then product design informs design system

Need human guideance.

Centralized design systems team:

  • Maintain the library
  • Consistency

Federated design systems contributors

  • Bring back research
  • Keep accurate
  • Current
  • Useful

The Sliding Scale of Giving a Fuck

Those that feel more strongly should win if you are stuck
Run your decisions through your ordered principles

github.com/salesforce-ux

Custom built pattern library using React

components folders:

  • sass file
  • documentation
  • markup
  • config file (prototype, in testing, production ready)

Used a script to generate library from those components


Keynote: Designing Purposeful Animation

Val

Great UI animation has style and purpose

12 Principles of Animation

BOOK: Disney's 12 principles of animation (printed book)

Create animation that feels a little bit real
- Invoke an emotional response - Familiar

Just 3 of the 12 will cover most use cases

#1 Timing & spacing

Spacing: changes in speed over the duration of the action's timing

Establishes mood, emotion & reaction

Timing = duration
Spacing = easing

cubic-bezier.com

#2 Follow Through Not everything comes to a stop at once
Overshooting the target position

#3 Secondary Action Supplemental action reinforces and adds dimension

added slight animation within the body text, lagged behind (but didn't slow down entire animation). Made the dialog animation come to life and be more realistic

Choreography

Designing all your UI animations to feel logical and related

  • Similar objects, animate in similar ways
  • Entrance informs exit
  • Match velocities more so than duration

Brand in Motion

Work on a cohesive plan for your whole brand
Energetic? Friendy? Sleek? Strong? Playful?
IBM has a whole motion design guide, based on their old machines

Aim to build your own animation library

Document the categories of animation
  • Enter & exit
  • Give emphasis
  • Give feedbak
  • Transitions between states
  • Personality and brand
  • Orientation
  • Storytelling
Document your building blocks
  • Opacity
  • Scale
  • Colour
  • Depth
  • Postion
  • Rotation

Maybe only some of the above ^ And have specific examples

Examples of apps with animation
http://capptivate.co


Level 4 Selectors - #lvl4

The Good

Column combinator

.col-name || .child-selector {}

nth-column

like nth-child, but for columns in a table

Time dimensional pseudo classes

:current, :future, :past (for voice over, text translition)

Drag and drop

:drop :drop(active) :drop(valid) :drop(invalid) it's on the drop target

:drop(invalid) Accepts drop, but can't accept the current thing being dragged

Read/write

:read-only, :read-write e.g. <input type=text disabled> is read only

Placeholder

:placeholder-shown (until an element gets focus)

Default

:default (select options, either the first item, or the one with default attr on it)

Intedeterminate

:intedeterminate (could have a value but doesn't have one yet; checkboxes, radio, progress)

Ranges

:in-range, :out-of-range (number elements with min/max set)

Validity

:valid, :invalid (considered valid unless there is a type on it and the value is not value; range, or number w/o a number); read-only does not get either selector

<input pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />  

:user-invalid (if you have a 'required' attr on input, it has :invalid already, so this is only set once user interacts with control

Bonus: Works on fieldsets too!

:required, :optional (if the required attr is set. other inputs get optional, read only or divs etc get neither)

Blank

:empty and :blank (new)

Will match:

<div>   </div>  

Languages

:dir(ltr), :dir(rtl) (select items that read right to left)

:lang(zh, "*-hant") wildcard selector for dialects

:any-link matches <a href, <link href.., <map href

Scope

:scope

TODO: check out this more

Case insensitivity

[data-username="foo" i]

Descendant combinator

Same as spaces div a == div >> a (for consistency, no new functionality)

The Awesome

Not

:not(s1, s2) (support comma separted list now)

* bonus slide

*:focus and :focus are subtly different

Has

:has(s1, s2) Won't EVER work in browser CSS. Will work in JS, etc

menu:has(a:not([...]) {  
  padding-left: 20px;
}

For use in query selector, not in live CSS sheets

Matches

:matches(s1, s2)

:matches(.card, .sidebar) :matches(h1, h2, h3) {
  ...
}

CSS Architecture - #CSSArch

Jonathan Snook

Create Standards For Your CSS

All other languages get code review, not CSS
(At Yahoo, at Shopify)

Got to this talk late since I was in another session at the time. Went to a workshop, full SMACSS notes are here

Code Review Your CSS

styleguides.io

Closing Thoughts

  • Move towards composable UIs
  • Ensure modules are self-contained
  • Communicate! (to your team)

Bower Power - #Bower

Eric Carlisle, independent contractor

Maintains dependencies
Not a tool (used during dev)

Pre-reqs:

  • JavaScript runtime (node)
  • npm (Node.js package manager
  • git (version control)

Use bower OR npm

Use both! (they are similar, but have unique strengths)

Bower focuses on the client side

  • Abstracts concerns
  • Uses a flat dependency tree
  • Lives & breathes git
  • Establishes accountability (for you & components developers too)

Installs everything, but that's ok
Be sure to add bower_components to .gitignore
New devs just need to bower install


Zombie Pattern Libraries

  • Rethinking the design process
  • Not a technology problem. People and process problem
  • Should accelerate the design team and the dev team

Creative Cloud - Library (check it out - supported in Photoshop)
generates a pattern library site online

Sketch - has symbols (reusable elements)

Get Started Today

  1. Take an inventory
    1. The eco system
    2. Screenshots of every page / state
    3. List where things are found, refer to things by name
    4. What to look for: Base styles (colors, spacing), Components, Page templates
  2. Documentation
    1. Basic is: name, desc, example and code snippet
  3. Centralize your CSS
  4. Define CSS standards
  5. Refactor to perfection
  6. Govern the library

Tools

CSS documentation - KSS
Static site generation - patterlab.io (atomic design systems)

PatternPack

  • Build and document your interface. Then share the code.
  • Exports as npm / bower module
npm init  
npm install grunt patternpack --save-dev  
grunt patternpack:run  
  • Use semantic versioning for your design system: Major, minor, patch
git push --follow-tags  
npm install <full git url>  

Keynote - The Art of Being Wrong

Dave Rupert

  • shoptalkshow.com
  • godaytrip.com

Great talk, didn't take notes.

Key takeaways:

  • it's okay to be wrong
  • it's okay for others to be wrong (and you don't need to correct people all the time!)
  • have discussions, don't just make blanket statements

Other Resources from Conference

CSS Code Reviews

http://www.slideshare.net/Funstacy/no-pain-no-gain-css-code-reviews-ftw

http://robandlauren.com/2015/10/28/css-dev-conf-2015/

A blog post mentioned in the last keynote

I haven't read it yet but it sounded good:
http://blog.capwatkins.com/the-boring-designer

comments powered by Disqus