As a UX Developer I specialize in HTML/CSS so a CSS developer conference could not have been any more perfect. Three DockYarders, including myself, had the opportunity to go to CSS Dev Conf last week aboard the Queen Mary in LA.
The talks went beyond my expectations and I learned something different at each one. Even with new content being presented it was good to see that the tools and opinions of the speakers were all aligned with how we structure HTML/CSS at DockYard.
The most interesting event at the conference was the open question session at the end of day 2. All the speakers got on stage at once and the audience could go to a microphone in the middle of the room and ask the group any question that came to mind. There were some great insights shared about what CSS developers should expect to see from the job market and what the future of CSS will look like.
The Queen Mary was amazing to stay on throughout the conference and I have to give a shoutout to left shark, right shark and the giant octopus at the after party. Could not have asked for a better venue. Who wouldn't want to go to a conference on a boat?!
Here are my takeways from the conference!
Keynote Sara Soueidan
Twitter: @SaraSoueidan
Slides: SVG For Web Designers (and Developers)
Use SVGs for everything possible and provide fallbacks for browsers that need it
Keep in mind you need to look at performance, don’t choose SVGs over performance
SVG for…
Icon systems
Add banners
Infographics
Data visualizations
Animated illustrations
Filter effects
Simple UI shapes
Future
CSS Spec custom add SVGs rules coming soon
Designing SVGs
Every design decision that is made while designing an SVG affects development
Developers and Designers need early communication and have some give and take to make both their lives simpler
Process
Outline text that has been changed into vectors are not selectable
Outline text preserves font-face
Use simple shapes over a <path>
easy to maintain
Simplify your paths when you use them with simplify path tool in Illustrator
Only combine paths if you don’t need sections to be separate for animation or coloring
Use organized naming/layer conventions in your SVG code
Designers should use SVGs filters that are available in Illustrator effects section
Always keep width and height attributes on the <svg>
Great for fallback
Optimize
Most popular tool is SVGO but will change the structure of the SVG, also can break your SVGs :( so use the GUI version with custom options
Optimizing your SVG can cut your files size by half
Illustrator in the future will have optimize options
Sketch has no options yet :(
Development
<symbol> and <use>
Multiple <symbol> elements being combined into one SVG, always include <title> and description for accessibility
This technique puts the SVGs code in a shadow DOM that is difficult to style
You can leak styles in with CSS variables var(--prime-color)
Use SVGs viewbox to create a view window that only shows a portion of the SVGs file. Also known as the sprite technique
Place your SVG files into the CSS as background-images
support back to IE6
Use CSS only for simple animations
Use JS for complex animations
SVG over icon fonts
Infinite scale and easy styling
Browser content blockers will block fonts and not SVGs
Tools for switching from icon-fonts to SVG are out there.
Greensock animation library is a go-to
<object> is most flexible embedding technique for SVG
Cracking the SVG Code: Brenda Storer
Twitter: @brendamarienyc
Slides: Cracking the SVG Code
Queen Mary is in the top 10 most haunted places in the world. Over 150 spirits on the boat
Whats inside a SVG? XML!
It's like HTML but for digital drawings instead of content
SVG 1.0 became recommended in 2001 by W3C
SVG 2.0 maybe in 2018 :)
viewBox defaults to px if no value is given
viewBox="0 0 100 100" start x start y end x end y
For inline SVG remove all unneeded markup that is inserted by Illustrator
<g> is the <div> of SVGs
Stroke = CSS border and fill = CSS background-color
GO Shapes! <rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon>
In Illustrator you can select what you want to be a SVG and then shorthand copy it, then paste in your text editor
This also starts your viewBox at 0 0 !!!
Transforms on SVG is not 100% supported with your .css file but if you include the transform inline style its 100% supported
Checkout SVG Compressed book online
Creative Typography with SVG: Brenna O’Brien
Twitter: @brnnbrn
Slides: Creative Typography With SVG
VREAM - viewBox Rules Everything Around Me
SVG easy to manipulate with CSS and JS
Text becomes completely responsive when inside a SVG
Go on a code adventure with SVG you will find new things
SVG has a <text> element
<text> is accessible!
Inherits font-family from <body>
Use fill to change color
y="0"is not good, use y=“1em”
font-size="80" is 80px
<tspan>
similar to <span>
use x and y for positioning
Curved text
use <textPath> and then link it to a <path> that is inside your <defs> with a xlink:href="pathName"
Gradients on text
<linearGradient> in your <defs>
In your fill on the <text> use fill=“url(#grad)”
Images on text
Can put your <image> inside a <pattern> under your <defs> and apply the pattern to the fill on your <text>
You can also fill text with gifs :)
Knockout text
Place your <text> in a <mask> and then apply the mask to your element you want the text to be in as mask="url(#knockoutText)"
Self Typing Text
Use <animate> as a child of what element is being animated with from and to with a duration
Morph Text Glyphs
Convert your text to paths with Illustrator outlines
Self drawing text
stroke-dasharray and stroke-dashoffset are used to “hack” this effect
Designing Complex SVG Animations: Sarah Drasner
Twitter: @sarah_edo
Slides: Designing Complex SVG Animations
Why make complex animations?
powerful to convey meaning
fun :)
Animation should be designed and not an afterthought or it will look like sugar on top animations
One size does not fit all, look at your website and limitations
Checkout Val Head’s “All the Right Moves”
When designing complex animations try to design everything first and then apply the animations
Ugly storyboards save you time (even if ther're ugly)!
SVG has less HTTP requests
Optimize your SVGs!
But don’t overdo the amount of animations you include on your website, simplicity is key
UI/UX Animation
This is used to enhance the information on the page
Context-Shifting
This removes the breakpoints of information being loaded on the page
Use animation to fill time while loading to keep the users mind at ease
Provide clear focus on what the user should be reading or looking at
Standalone
Questions to ask
Responsive?
toggle on/off?
Easing structures
User flow
Easing can contribute to your branding
You can convey emotion with how you animate elements
Animation branding guidelines make communication down the line easy
Animation performance
Test everything yourself
People expect everything to be faster on the web
SVG sprites complex to simple
Design your three steps for desktop, tablet, and mobile
Combine elements where you can so you have less SVGs elements you need to hide when going between views
Use animation media queries
viewBox shift with JS
provide fallbacks
Complex animations
Use JS to make this easy
Use Greensock
If you need more then 2-3 chained events in your animation its a good idea to use JS
Relative color tweening
Example: shifting from day to night scenes
Motion along a path is important for realism
Responsive animations should be made with thought as you place the elements in DOM
Design + Animation + Data
Combining these things can bring back the success of static infographics used to have
We can make them responsive and interactive with SVG
Add accessibility with <title> tags
Go CodePen! Easy to learn new things when you can dive into other peoples code
The Dark Arts of Light Speed: Henri Helvetica
Twitter: @HenriHelvetica
Web performance = speed
Font-end development suffers from the embarrassment of riches
57% of visiters will abandon a page after 3 seconds of not loading
User experience metrics over network-based metrics
Need a culture based on building apps for performance
Placing defer in your <script> tag will download JS at the same time as HTML but execute JS at the end of the HTML loading
async will download JS and load HTML at the same time but pause the loading of HTML when the JS download finishes to execute it
Don’t send larger images to mobile when you don’t have to, it waists bandwidth on phones
<srcset> <picture> you can use media queries inside them to load images for specific VW
Reduce the number of HTTP requests with combining .css files into one and .js files into one
No Pain No Gain: Stacy Kvernmo
Twitter: @funstacy
Slides: No Pain No Gain
Build a culture of code review in your workplace
Catch bugs
Increase familiarity of the project with your team
Education! communication with your team on why you did what you did will tach you to explain things simply
Review the compiled code when you use pre-processors
Contributing to open source is great and try to repay the contributor somehow
Stay positive during code reviews
Avoid absolute terms when commenting
Must
Always
Never
Ask questions about why the person coded a certain way
Document the issues you find
Document your code with comments
A pull request should say what you did very clearly
What to review
Follow standards
Is the code easy to understand
Don’t need to nest everything, don’t go as far as 3-4 levels deep
Accessibility
Using correct vendor prefixes?
Keynote Jina Bolton
Twitter: @jina
Slides: Designing a Design System
Communication between Designers and Developers is important
designing systems rather then pages
style guides should be living and constantly updated
designprinciplesftw.com
Don’t make things until you need it
v2mom
vision
values
methods
obstacles
measures
Keynote Val Head
Twitter: @vlh
Slides: Designing Meaningful Animation
With new tools we have the ability to make accessible responsive and beautiful animations for the web!
Using motion in our design language is important
When you have motion across all platforms it provides a more recognizable interface for the user
Be subtle with movements, a little will go a long way
CSS Architecture: Jonathan Snook
Twitter: @snookca
Slides: Coming soon
Build modular systems
INLINE STYLES WON'T SAVE YOU FROM INHERITANCE
Don’t write multiple of the same rule for one element
Future we can us all: inherit on an element to ignore all inherited styles
Element queries can be used but you need JS to accomplish this
Design has a cost on the web just like it does in print
Every peace of design ends up in code
You can use emojis as class names :P
Categorization of styles
state
Theme
module
layout
base
Naming conventions
Use them!
SMACSS
BEM
The goal is to isolate an element from everything else on the page
Create Standards For Your CSS
Without standards and code reviewing, CSS will get out of control
Styleguides.io is a great resource
Future
Web components
Composable UIs
Communicate!
Bower Power! Supercharging Front-End Manageability: Eric Carlisle
Twitter: @eric_carlisle
Slides: Bower Power! Supercharging Front-End Manageability
Keep It Stunningly Simple (KISS)
You get a happy team
Better products, process, reduce cost
Don’t be afraid to use npm and bower
Bower keeps it simple
Maintains a dependency manifest
Fetches them when you need it
Tracks dependencies
Integrates with everything
You need
Node.js Javascript runtime
npm, Node.js package manager
git, version control
Starting the awesome
npm install -g bower
bower init
Installing dependencies
bower install dependenciesName
add a --save after install to save that dependency for the project
add a --save-dev after install to save that dependency for development or debugging
Add bower_components to .gitignore!!
Fight the Zombie Pattern Library: Marcelo Somers
Twitter: @marcelosomers
Slides: Fight the Zombie Pattern Library
“How do you keep building interfaces knowing thats what the world is like”
Pattern library accelerate both the design process and development process
Photoshop has libraries that you can make/use in multiple files/projects
You can do this in teams also
Traditional handoff between designers and developers is broken
Use pattern libraries as the connection between the groups
Libraries eliminate waste
This reduces tweaking static comps to make one small change but rather make one change to an item in a library
You want an automated library or a team managing your libraries
Get started today
Take an inventory
Take documentation
Base styles
Components
Page templates
Focus on standardizing what you find
Define CSS standards
Refactor to perfection
Namespace the CSS
Don’t forget about JavaScript applying classes
Govern your library
Open source culture
opencss.klamp.in
Pattern Library Tools
Writing CSS documentation with KSS
will auto document comments in your .css file
Pattern lab on GitHub
The better way
patternpack
what it does
Build your static site
Increment your version
Create a new commit
Tag the commit
Lets you share the code to multiple applications
Keeps versions of the design
Start new project with npm init and git init
Install npm install --save-dev pattern-pack
Start with grunt patternpack run
Create your first patter with a .md and .css file
.md is the documentation for the equivalent css file
Use semantic versioning for your pattern pack
Publish your patternpack
grunt pattern pack:release
git push —follow-tags
Web Components and the Future of Modular CSS: Philip Walton
Twitter: @philwalton
Slides: Web Components And the future of Modular CSS
Good news is that web components were primarily a google effort but not all vendors are on board but could be available sometime in 2016
Your selectors are the biggest determining factor in how scalable your code is
Whats changed?
Multiple shadow roots have gone away
createShadowRoot() is now attachShadow(mode)
CSS is hard
Manage global names
Scoping/isolating styles
Specificity conflicts
Unpredictable matching
Managing styles dependencies
Removing unused code
What is CSS missing
Scope or isolate styles to a particular set of DOM nodes
Ability to abstract away implementation details
Goooo Web components! They do this
You don’t want to have to depend on tools that everyone has to learn
No ecosystems
The Anatomy of a Web Component
Elements in a shadow DOM
Its a subtree of a DOM node that can’t be styled by CSS
Shadow nodes are private
Custom elements
HTMl imports
The template element
Keynote Dave Rupert
Twitter: @davatron5000
Slides: The Art Of Being Wrong
Woot Shop Talk show plug
Working on godaytrip.com
Remove the must do’s and “facts” from statements online on twitter or medium
what you think you know about dinosaurs is WRONG!
Be afraid of the Donald Trump effect where you believe bullshit if it is said loud and long enough
Don’t spell Sass or SASS wrong or the internet will bring the pitchforks, aka people should not fight about every little thing on the web
You don’t have to be right all the time and you don’t have to correct people on everything all the time