CSS Dev Conf 2015

My notes from CSS Dev Conf 2015 on The Queen Mary in Long Beach, California.

Day 1: Monday, October 26, 2015

Opening Keynote: “SVG For Web Designers (and Developers)” by Sara Soueidan

Notes

  • Raster images are preferred format for continuous-tone images (photographs)
  • SVG for interface controls, logos, icons, vector-based illustrations
  • SVG doesn’t make sense when the file sizes are significantly larger than something like PNG
  • Lighting effects and shadows greatly increase file size
  • Optimize and reduce effects to decrease file size
  • SVG for more than just images:
    • Icon systems
    • Ad banners
    • Infographics
    • Data visualizations
    • Animation
    • Filter effects (on SVG or HTML elements, including text)
    • Simple UI shapes
  • Sometimes CSS is better suited for shapes than SVG
  • Designers and developers can help each other fill knowledge gap
  • Design
    1. Convert text to outlines… or don’t
      • Outlined text not selectable/searchable/accessible
      • Outlined text preserves fonts without needing a web font (good for logos)
      • Outlining can significantly increase file size
      • Outlined text is made of paths, so might be harder to control in animation
    2. Create simple shapes using simple shape elements instead of <path>s
      • Easier to maintain and edit manually
      • Easier to animate
    3. Simplify paths
      • Use Adobe Illustrator’s simplify algorithm or the warp tool
    4. Combine paths where possible
      • Only if you don’t want to animate the individual paths separately
    5. Fit artboard to drawing
      • Eliminates extra white space
    6. Use good grouping, layering, and naming conventions
      • Layer and group names in Illustrator will be IDs in SVG code
      • Makes scripting, styling, and editing SVG code easier
    7. Create filters using the SVG Filters in Illustrator, not the Photoshop Effects
      • Photoshop Effects are exported as bitmaps
    8. Export
      • Photoshop can natively export SVG
      • One or multiple artboards depending on spriting technique you want to use
      • Always keep width and height attributes on the <svg>
  • Optimize
    • You may not always need or want to optimize
    • Optimization (especially using standalone tools) can and will change the document structure, affecting any animation/scripting
  • Develop
    • Spriting technique #1
      • Multiple SVG files combined into one SVG files using <symbol>s
    • Spriting technique #2
      • Using fragment identifiers
        • Visual approach to spriting (similar to spriting using PNG)
        • One sprite that contains all icons
        • Uses position and bounding box an icon inside the sprite to create “view” for that icon
        • Display each icon by referencing its view
      • Get position and dimensions from the image editor
      • Remember to specify width and height for the <img> referencing the sprite views
    • Spriting technique #3
      • Icons as background images in CSS
        • Closest you can get to icon fonts using SVG
        • Support back to IE6
        • Same animation capabilities as icon fonts
        • Tools to automate and speed up the spriting process
      • Grunticon and/or Grumpicon for automation
    • An Overview of SVG Sprite Creation Techniques
  • SVG instead of icon fonts
    • Why use SVG over icon fonts?
      • Infinitely scalable
      • Styleable via CSS (multiple colors)
      • Easier size control
      • Interactive and animatable using CSS, SMIL, and/or JavaScript
      • Semantic markup
      • Fully accessible
      • Many tools available to make spriting easier
      • Different embedding and fallback techniques
    • Ad blockers are starting to block web fonts
    • Inline SVG vs Icon Fonts [CAGEMATCH]
    • font-blast – extract icons from any icon font
  • Animating SVG: SMIL, CSS, or JavaScript?
    • Don’t use SMIL
    • Use CSS only for simple animations
    • Use JavaScript for complex animations
  • Which embedding technique should you use?
    • Filter your options down, set priorities

“Cracking the SVG Code” by Brenda Storer

SVGs: their code looks kind of familiar, but have you ever tried to edit the code and end up breaking the whole darn thing?

I have been digging into the nitty gritty of SVG code, and it’s helped me optimize my own SVGs and get started more quickly with libraries that work with SVGs like d3 and snap.svg.

Here are a few topics I’ll cover in this session:

  • Understand the mystery of the “viewBox”, the SVG coordinate system and viewport, even what all those numbers and punctuation within a “path” actually mean.
  • How much of all that stuff that Sketch, Illustrator, and Inkscape exports out is actually needed, and what does it do? (“xlmns”, “enable-background”, etc.)
  • What are the CSS properties that I can use to style SVGs, and when, how, and why?
  • How can I use this information to animate SVGs?

Notes

  • Why SVG?
    • Vector graphic, infinitely scalable
    • Small size, can even gzip
    • Can be used like a bitmap
    • Can manipulate with JavaScript and CSS
    • Can generate with JavaScript
  • What is familiar from HTML?
    • It’s XML
    • Like an HTML document for digital drawings
      • Unicode characters
      • Elements, tags, attributes
      • White space unimportant
      • Nesting
      • Bitmaps, anchors, text
      • Shapes, paths, opacity, gradients, rotation, animation
  • Name Spacing
    • Provides semantic meaning for the name of that element and its children, provided that the children do not have their own name spaces
    • Value can be any string, but it usually a URL
    • Links often go nowhere, it’s just a unique identifier
    • Attributes can have namespaces too, they are prefixed
    • A good thing to keep around
  • Title & Description
    • Think of “title” like an “alt” tag
    • Good for accessibility
  • Viewport
    • Units can be em, ex, px, pt, pc, cm, mm, in
    • Shapes inside SVGs inherit same units
    • It’s all relative
  • SVG Coordinate System
    • Start with 0,0 for less complexity
    • start x start y end x end y
  • The rest of the attributes
    • Everything else before the shapes is pretty much useless
  • Shapes
    • Stroke = border
    • Fill = background color
    • Rectangle
    • Circle
    • Ellipse
    • Line
    • Polyline
    • Polygon
  • The Virtual Pen
    • Path
      • Uppercase = absolute position based on parent
      • Lowercase = relative to its current position
    • Arc, an elliptical curve
    • Cubic Bezier Curve
  • In Browser Action!
  • Transforms on SVG Elements
  • Stroke attributes
    • stroke-linejoin (butt, square, round)
    • stroke-linecap (miter, round, bevel)
    • stroke-opacity
    • stroke-dasharray
    • stroke-dashoffset
  • Animating Stroke Dash
  • Resources

“Smoothly Migrating to Flexbox” by Charlie Park

Over the last year, we’ve taken a mammoth frontend codebase and revamped it, making it load more rapidly and reliably. I’d love to share how we used flexbox to help our designers, engineers, and users all have a better experience.

Some considerations that we’ll look at:

  • What browsers does (y)our site need to support?
  • Are (y)our responsive views worked out? Or is this transition a part of that process?
  • What are the things flexbox allows us to do that we had a hard time with before?
  • When is flexbox NOT the right choice? (So important!)
  • What alternatives do we have to flexbox that actually work on legacy browsers?
  • Why “support the current browser version and two versions back” is actually fairly poor for determining your minimum-browser-required floor.
  • How to progressively roll out your new design to various cohorts, so you can easily rollback if disaster strikes.

Notes

  • What is flexbox? 
    
display: flex;
  • Browser support:
    • Partial support in IE10 with -ms prefix
    • -webkit prefix needed for a bit longer
  • Helpful tools:
    • Flexbugs: flexbox issues and workarounds
    • Autoprefixer
    • Modernizr
  • Flexbox is faster than float
  • Better for users, not on initial page load, but when scrolling, resizing the page, and loading remote content

“Fight the Zombie Pattern Library” by Marcelo Somers

In “Fight the Zombie Pattern Library”, we’ll look at the repeatable processes that Slalom Consulting in Dallas, TX is using to “build a tiny Bootstrap” for every client and keep developers using them every day – processes you can take back and implement tomorrow.

In this session, we will cover:

  • A scalable process for your designers and developers to maintain a living style guide
  • How to generate the information you need for a pattern library, especially if being handed designs to work with
  • Usability tips to keep your library easily consumable by developers
  • How to add a pattern library in an existing project
  • Tools to rapidly spin up libraries if you’re in a consulting/agency environment

Notes

  • Rethinking the design process
    • “Build systems not pages”
    • “Build a tiny Bootstrap”
    • Designing with patterns
      1. Design
      2. Slice
      3. Assemble
  • Where the design process breaks down
    • Traditional handoff is broken
    • Designin with patterns
      • Design
      • Patterns library
      • Assemble
    • Style guide maturity model
      1. Team: A dedicated team maintains the pattern library
      2. Automated: The pattern library shares code with the app(s)
      3. Manual: A pattern library has been built, but must be manually updated
      4. One-time: A static style guide document gives basic direction
      5. Inconsistent: Different apps are styled inconsistently
    • “Unless it’s part of your build, your styleguide is just more documentation to maintain”
  • Getting started (today)
    1. Take an inventory
      • What to document:
        1. Base styles
        2. Components
        3. Page templates
    2. Standardize
    3. Document
      • Base documentation:
        1. Name
        2. Description
        3. Example
        4. Code snippet
    4. Centralize your CSS
      1. Define CSS standards
      2. Refactor to perfection
        • Break up your components
        • Namespace the CSS
        • “Find in project” is your friend
        • Regex search for classes 
          
class\s*?=\s*?["'].*?table

          (will find all instances where class="" contains table)

        • Don’t forget JavaScript
    5. Govern your library
  • Pattern library tools
    1. CSS documentation
    2. Static site generation
    3. Integrated
  • There has to be a better way

“Container-based RWD with Element Queries” by Philip Zastrow

The media query is a wonderful, powerful tool that allow us to make transformable websites for devices all shapes and sizes. Sometimes though, a more granular level of control is needed to make the content fit its context.

We’ll dive into element queries and see what happens when we bring responsive principles to the components of a page.

  • Overview of what are Element Queries
  • How Element Queries are used
  • The current state of Element Queries
  • Ways to use Element Queries now

Notes

  • Flexible images
    • srcset: Set high resolution alternate images
    • picture: Load art-directed images for specific media queries
  • What’s wrong with media queries?
    • Limited to information about the screen or the device
    • Incapable of knowing the width of an element
    • Container queries give an element the power to contextually modify itself
    • Media queries are broad, container queries are specific
  • Why do container queries matter?
    • Atomic design
      • The same markup could be used in multiple places throughout a website
      • Atomic design makes HTML modular and reusable
      • Container queries bring atomic modularity to CSS
  • Element queries do not currently exist as an excepted standard
  • Polyfills: Fake it ’til you make it
  • The Container query is a natural progression of RWD
  • Be diligent and intentional when using container Queries

“Responsible Data Visualization” by Amanda Cheung

Many of us are visual learners. Charts and graphs display data in ways that benefit retention and comprehension.

  • How can we build graphic representations of information that creates a better experience for our users?
  • What are things we should worry about when designing and implementing data visualizations in our web applications?

These graphs are innately visual, but it’s our responsibility to make them accessible as well.

In this talk, Amanda takes a look at how we as designers and developers can help our users understand our graphs better, easier and faster.

Notes

  • Data visualization
    • Its creation = encoding
    • Its use = decoding
  • Form
  • Integrity
  • Efficiency
  • Performance
  • Accessibility
  • Maintainability

Keynote Address: “Designing a Design System” by Jina Bolton

Notes

  • Product design in an enterprise organization can be tricky!
  • Design for scale
  • Support multiple platforms and devices
  • “Redlines are a waste. Eliminate waste.”
  • “A fractured process makes for a fractured user experience”
  • Style guides are all the rage
    • Writing an Interface Style Guide
    • Brand and design standards
    • Front-end standards
    • Keep your style guide current and useful
    • Zombie style guides: It must be living
  • “A style guide is an artifact of design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem.”
  • Lightning
    Design System
  • “…great design systems are usable by your entire team.”
  • Design tokens help us scale design across both web and native applications
    • Theo
      • Open source tool by Salesforce UX to generate design tokens
      • Framework agnostic
  • Have a clear vision to align efforts
  • Design principles (intentionally ordered by priority)
    1. Clarity: Eliminate ambiguity. Enable people to see, understand, and act with confidence.
    2. Efficiency: Streamline and optimize workflows. Intelligently anticipate needs to help people work better, smarter, and faster.
    3. Consistency: Create familiarity and strengthen intuition by applying the same solution to the same problem.
    4. Beauty: Demonstrate respect for people’s time and attention through thoughtful and elegant craftsmanship.
  • Items to include
    • Design patterns & guidelines
    • Color
    • Visual messaging
    • Visual differentiation
    • Visual hierarchy
    • Accessibility
    • Resources including HTML, CSS, icons, and fonts
  • Clarity > brevity
  • Style guide maturity model
    1. Team
    2. Automated (code sharing)
    3. Manual pattern library
    4. One-time (static)
    5. Inconsistent
  • The Salesforce Team Model for Scaling a Design System
    • A cyclical team model
      • Design system informs product design
      • Product design informs design system
    • Centralized design systems team
      • Acts as librarian, distributor, and facilitator, and make sure it is maintained and crafted with quality
    • Federated design systems contributors
      • Distributed throughout the organization, keep the design system accurate, current, and actually useful
  • Design principles > design standards
  • Clarity > efficiency > consistency > beauty
  • “Design considerations beat design patterns. Test and decide; don’t just copy things like the hamburger icon.”

Day 2: October 27, 2015

Keynote Address: “Designing Meaningful Animation” by Val Head

Notes

  • Great UI animation has purpose and style
  • UI Animation and UX: A Not-So-Secret Friendship
  • Animating with style
  • Create animation that feels a little bit real
  • Animation Principle: Timing & Spacing
    • Timing: The amount of time it takes for an action to happen. The duration.
    • Spacing: The changes in speed over the duration of the action’s timing.
    • Timing & Spacing
      • Makes animated objects appear to obey the laws of physics
      • Establishes mood, emotion, and reaction
    • Timing = duration
    • Spacing = easing
  • Everything is better with cubic-beziers
  • Animation Principle: Follow Through
    • Follow Through: Not everything comes to a stop at once.
    • Overshooting the target position
  • Animation Principle: Secondary Action
    • Secondary Action: Supplemental action, reinforces and adds dimension.
  • Choreography: Designing all your UI animations to feel logical and related.
    • Similar objects animate in similar ways
    • Entrance informs exit
    • Match velocities
    • Cohesive over consistent
  • Motion and Meaning: A podcast about motion for digital designers
  • Expressing your brand with animation?
    • Finding your best moves
      • Start with your start interaction
      • Look for real world things to exemplify
      • Match design adjectives to animation styles
        • Design adjectives: Energetic? Friendly? Sleek? Strong? Playful?
    • Examples:
      • Follow through and anticipation: Energetic, friendly, bold
      • Squash and stretch: High energy and playful
      • Ease-in-outs: Balanced and measured
      • Smaller movements: Calm and subtle
      • Opacity and blurs: Soft and stable
  • Aim to build your own animation library
    • Document categories of animation
      • Entrances and exits
      • Give emphasis
      • Give feedback
      • Transitions between states
      • Personality and brand
      • Orientation
      • Storytelling
    • Document your building blocks
      • Opacity
      • Scale
      • Color
      • Depth
      • Position
      • Rotation

“CSS Architecture” by Jonathan Snook

Notes

  • SMACSS: Scalable and Modular Architecture for CSS
    • Describes how to approach site design and development
    • No Git repo, not a library, not a framework, no tools
    • Techniques can be applied to static CSS, Sass, React, Web Components, etc.
  • Modular?
    • A module is “each of a set of standardized parts or independent units that can be used to construct a more complex structure.”
  • Independent
    • Inheritance
    • Cascade
    • Browser default styling
    • Putting modules/components together
  • Inheritance
    • Typography
    • List styles
    • Table styles
  • Inline styles won’t save you from inheritance
    • Web Components
    • all: initial
  • Cascade
    • How the browser decides what properties to apple when you have multiple rules declared on the same item
  • Don’t write multiple rules for the same element
    • Inline styles
    • Create structures layering system to prevent conflicts
  • Browser defaults
    • all: initial
    • Predictable HTML, i.e. templates
  • Putting modules together
    • Separate layout from module
    • Micro layout classes
  • Patterns
    • Design has a cost
    • Every piece of design ends up in code
    • Identify and document patterns
    • Categorization
    • Naming convention
      • SMACSS-y, BEM, Sass, CSS Modules/React
    • Create standards for your CSS
    • Code review your CSS
    • Create a conversation around what components could or should exist
    • Create a conversation around what components could or should not exist
  • The future is in pieces
    • Move toward composable UIs
    • Ensure modules are self-contained
    • Web Components, React, and other frameworks are making this easier
    • Communicate!

“Bower Power! Supercharging Front-End Manageability” by Eric Carlisle

This session will introduce Bower, a powerful package manager for libraries, frameworks, and all things front-end. We will cover basic Bower usage, integration into Grunt & Gulp build processes, tooling, and registering custom packages to be used by anyone.

After this session, attendees will be able to:

  • Use Bower to manage libraries, frameworks, and other front-end assets.
  • Integrate Bower into Grunt or Gulp build processes.
  • Optimize Bower power with tooling like the bower-installer.
  • Register and offer packages via the Bower registry

Notes

  • Dependency management messes
    • Take the KISS approach: Keep it stunningly simple
      • Increased efficiency
      • Reduced cost
      • Better process
      • Better products
      • Happy team
      • $$$
  • Bower keeps it simple
    1. Maintains dependency manifest
    2. Fetches dependencies when needed
    3. Track dependencies
    4. Integrates with everything
  • Prerequisites
    • JavaScript runtime
    • Node.js package manager
    • Version control system
  • Which should I use, Bower or npm?
    • Both: they are similar, but also have unique strengths
    • Why Bower too?
      • Focuses on client-side dependencies
        1. Separates concerns
        2. Flat dependency tree
        3. Lives and breathes Git
        4. Establishes accountability
  • The bower_components folder
    • Usually gets the dependency’s entire Git repo
  • Semantic versioning: major.minor.patch
    • Strict: 1.9.3
    • Close to: ~1.9.3
    • Simple: >=1.9.3
    • Compatible with: ^1.9.3
  • Integration with Gulp and Grunt
  • Build and register a Bower package
    • Have working GitHub repo
    • Please don’t squat dependency names
    • Make certain your bower.json is solid

Wrap-Up Panel

Show & Tell hosted by Chris Coyier

Short talks powered by you! Hosted by CSS-Tricks’ Chris Coyier.

Closing Keynote: “The Art of Being Wrong” by Dave Rupert

Notes

  • Borg UX: What if we’re all connected to a giant shared source of knowledge and what if everything in that machine isn’t always correct?
  • This Idea Must Die: Scientific Theories That Are Blocking Progress
    • “The idea that things are either true or false should possibly take a rest …. I wonder, and this is just a modest proposal, if scientific truth should be identified in a way that acknowledges that it’s something we know and understand for now – and in a certain way.”
  • Sometimes wrong is wrong
  • Humans are 53% accurate at detecting bullshit, same as a coin toss
  • The Donald Trump Effect
  • Baloney Detection Kit
  • The #HOTDRAMA Trap: Have a really strong opinion about a really niche topic
  • Strong opinions are great, but they can create a blind spot
  • A/B testing is good but… Compare two turds, user still gets a turd.
  • Conversion doesn’t always equal good
  • Allowing myself and others to be wrong
  • “That’s my secret, Cap – I’m always publishing. (Seriously though; treat your blog as your drafts folder)” – Jeremy Keith
  • Promote better discussions

Additional Talks