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
andheight
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>
anddescription
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)
- Multiple
- 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 givenviewBox="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 !!!
- This also starts your
- 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, usey="1em”
font-size="80"
is 80px
- Inherits font-family from
<tspan>
- similar to
<span>
- use
x
andy
for positioning
Curved text
- use
<textPath>
and then link it to a<path>
that is inside your<defs>
with axlink:href="pathName"
Gradients on text
<linearGradient>
in your<defs>
- In your
fill
on the<text>
usefill="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 asmask="url(#knockoutText)"
Self Typing Text
- Use
<animate>
as a child of what element is being animated withfrom
andto
with aduration
Morph Text Glyphs
- Convert your text to paths with Illustrator outlines
Self drawing text
stroke-dasharray
andstroke-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
Slides: The Dark Arts of Light Speed
- 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: CSS Architecture
- 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
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
Pattern Library Tools
- Writing CSS documentation with KSS
- will auto document comments in your
.css
file
- will auto document comments in your
- 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
andgit 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 equivalentcss
file
- Use semantic versioning for your pattern pack
- Publish your patternpack
grunt pattern pack:release
git push —follow-tags
- what it does
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 nowattachShadow(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