Skip to content

Instantly share code, notes, and snippets.

@kapral18

kapral18/smashing-barcelona-2017.md

Forked from osk/smashing-barcelona-2017.md
Created May 17, 2018 23:53
Show Gist options
  • Save kapral18/2f23ee3b5c6b99c0834d41914684822a to your computer and use it in GitHub Desktop.
Save kapral18/2f23ee3b5c6b99c0834d41914684822a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
smashing-barcelona-2017.md

Smashing Conference, Barcelona, 2017

Let’s Work Together!

Brad Frost

  • Design systems have lots of benefits, to name a few
    • UI consistency & cohesion
    • Faster production
    • Shared vocabulary
    • Easier to test
    • Useful reference
    • Future-friendly foundation
  • Bake it in!
    • Share between tools & environments
    • Design tokens
    • brand.ai
  • http://photoshopetiquette.com/
  • After a team has settled on syntax and code conventions, do a small coding project and then share results and talk about it

Animating Vue

Sarah Dresner

  • Animation helps with perceived performance
  • We overestimate passive waiting times
  • Novel loaders can increase time people are OK with waiting
  • We don't like things to appear suddenly
  • Vue has good support for transitions
    • Out-of-the-box stuff
    • JS hooks
  • FLIP
  • Vue has a reactive system
  • Nuxt makes page transitions easy (apparently)
  • SVG! Built with MATH!

Cheating the Ux When There Is Nothing More to Optimize

Stephanie Walter

  • Speed perception matters
  • What's the ROI for waiting?
  • Design states & transitions
  • Fake it, be optimistic
    • Change immediately, then check

SVG: So Very Good

Tyler Sticka

  • Icon fonts are a hack, use SVG
  • We've had SVG since 1997
  • SVGs can include
  • Interactions & animations are more easy than you'd think
  • SVG is great, SVG is for the web

Real Work/Life Balance in the Studio

Anton & Irene

  • Juniors → Seniors → Directors
    • Hated it, bad managers
    • Wanted to do own stuff also
    • If you love designing, being a director sucks
  • First year independant
    • No portfolio
    • Aim for 60%/40% client/own
  • Mexico 68 branding by Lance Wyman

I still design, but I don't like working with clients

–Karel Martens

  • Too much energy spent on client work to do personal work
  • Personal work is "loss-work"
  • Cheating is a choice! Not a mistake
  • Personal project
    • Photograph buildings w/correct perspective and clean them up
    • Put in different landscapes
    • 6 months – 11 buildings
  • You can't be prepared for the unexpected (duh)
    • misplaced.design
  • Personal project, One Shared House
  • 16yo CS players can teach you AfterEffects
  • Steal from other disciplines, avoid trends
  • Get off your ass and use your hands
  • In the end 40%/60% client/own
    • But more satisfaction

Evaluating Technology

Jeremy Keith

We shape our tools and then our tools shape us

  • No single person can create a pencil
  • Chindōgu – ingenious gadgets that are in fact useless
  • Hardware is fading in importance
  • Coming up with the technology isn't the hardest part; adoption is

Humans are allergic to change

—Grace Hopper

  • Tim Berners-Lee cheated on the adoption with the web by building on wide-spread technology
  • Look for design principles when evaluating technology
  • How does it fail?
    • CSS shapes fail well
    • Service Workers fail really well
    • How well do web components fail? Depends...
  • Who benefits from the technology?
    • Users VS. developers
    • Internal tools (sass, git etc) VS. external tools (jQuery, React)
    • SSR can turn an external tool into an internal tool
  • What are the assumptions in the technology?
    • Software is political
    • Being completely agnostic is really hard
  • Technology in the specific is not inevitable, only in the general
    • Something like the Web was inevitable, but not the specific Web we have

The street finds its own uses for things

—William Gibson

CSS variable Secrets

Lea Verou

  • currentColor is probably the first CSS variable
  • -- is because it's the "empty prefix"
  • Main difference with static variables (like in Sass) is that they're dynamic and we can change them with style=""
  • Custom properties (another name for CSS variables) are inherited
  • Limitations
    • Can't concatenate (but coming later)
    • url() is bugged
    • --foo:; is invalid
    • --foo: ; is valid
  • Why not just use cascade for fallbacks?
    • Fallbacks for when the var is not set
  • "Invalid at computed-value time" error added to CSS
    • Can only now if variable will be invalid after substitution
    • Will fallback to initial value
  • Cycles in vars make them invalid:
    • --size: calc(var(--size) + 1em);
    • height: var(--size); // will be initial
  • Use with support queries
    • @supports (--css: variables) { } // or any var name & value
  • In CSS we can go from number to unit, but not unit to number
    • --p: 33;
    • width: var(--p) vw; won't work, value will be 33 vw
    • width: calc(var(--p) * 1vw); will work
  • Variables can be animated and transitioned
    • But, since the UA doesn't know the values it'll use "flip at 50%"
  • In the future we'll be able to use CSS vars with JS in a better way
    • CSS.registerProperty()
  • CSS variables enable theming independent of CSS structure
  • Default default values
    • --colorD: var(--color, blue);
    • --colordD is private by convention
    • --color is public but can be skipped
  • CSS vars allow single value mixins
    • box-shadow: var(--s) red;
    • --s: 1px 1px 1px;
  • CSS variables and SVG work well together
  • CSS variables are a revolution for separation of style and behaviour
  • We can create vars that help with mouse event, scrolling etc
    • --mouse-x
    • --mouse-y
    • --scrolling

debugger; for Developers

Denys Mishunov

  • Goldman's Dilemma — would you do it?
  • Perfectionism, both positive and negative
  • Aim for gradual steps toward perfection

One of the basic rules of the universe is that nothing is perfect

—Stephen Hawking

  • Can't fix impostorism but we can embrace it – symptom of gaining experience
  • Measure yourself with your own yardstick
    • Getting better?
    • Old work is shit?
  • Karoshin – death by overwork

The State of Webfonts

Chris Lilley

  • @font-face defines descriptors, we then define them as properties in selectors
  • unicode-range, descriptor for allowed range of Unicode chars
    • Bad syntax, he's sorry
    • We can use this when blending fonts, e.g. latin & japanese
  • OpenType & CSS
    • feature-optional, stylistic controls
    • font-variant, prefered, poor support
    • font-feature-setting, bad syntax, widespread support
    • font-variant-numeric: diagonal-fractions | proportional-nums | tabular-nums;
    • font-variant-ligatures: discretionary-ligatures | none;
    • font-synthesis: // control how weight, italic is "faked"
    • font-kerning
  • Subsetting fonts
    • Glyphs, big space saving
    • WOFF2, now with better space savings, uses brotli not gzip
      • Balances decompression time & download speed
  • Colored fonts!
    • CSS4 font-palette
    • @font-palette-values, defines colors per palette
  • New generic font families, e.g. emoji, math, fansong
  • font-weight for backwards compatibility uses strings
    • Changes in a CSS4 module, number from 100-999
  • Variable font support
    • Custom weights, x-heights etc
    • Values in descriptors take a range (in @font-face)
    • font-weight: 100 900; all the weights in just one font!
  • Variable fonts are awesome, will be everywhere

What’s the Deal With Testing?

Marcy Sutton

  • Tests are a good way to create more robust, future-friendly code
  • Ensure quality
  • Help when working with people (including yourself)
  • Documents functionality but doesn't replace
  • Make bugs easier to fix and find
  • Starting to test is a "level up" moment
  • How to Stop Hating Your Tests

Fontastic Web Performance

Monica Dinculescu

  • 68% of websites use web fonts
  • https://helenvholmes.com/
  • FOIT – flash of invisible text
  • FOUT – flash of unstyled text
  • Browser won't download web fonts until it gets to the first selector that uses it (web fonts dirty little secret)
  • Will block for 3sec, painting invisible text but showing underlines, bullets etc => FOIT
  • After 3sec will swap to fallback font, then after download switch to "real" font => FOUT
  • Minimize FOUT
    • Don't use web fonts 😏
    • Download less
    • Download even less (unicode-range)
    • Download less, earlier ("")
    • Font face observer, take control from the browser
    • font-display: optional;, what you really want
    • Match fallback with webfont so the FOUT is less jarring
  • font-display
    • block: invisible for 3s, then fallback, then webfont
    • swap: immediately fallback, then webfont
    • fallback: invisible for 100ms, then fallback until 3s, then webfont
    • optional: invisible for 100ms, then fallback or webfont whichever is available
  • http://font-display.glitch.me/
  • variable fonts; basically sorcery

10 Things You Can and Should Do With SVG

Christopher Coyier

  • https://abookapart.com/products/practical-svg
  • SVG isn't used as much as it should be
  • Need to build a muscle memory – reach for SVG!
  • Using vectors? SVG! Get rid of pixel anxiety
    • No way to send the right amount of pixels to every user
  1. Data and charts
  2. Shape morphing
  • Uses SMIL but that's going away
  • Transition the d property
  • bodymovin
  1. Line drawings
  2. Animating UI
  3. SVG is the best icon system
  • Just include the icon (no icon font or sprites)
  1. Do art!
  • Turbulence filter
  1. Diagrams
  2. Headline Lockups
  3. SVG in the real world
  • Print your vector data!
  1. Explaining your product
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment