pitercss_conf 2018-06-08/09

You Might Not Need Media Queries: How to use CSS Grid Today

Slides

  • Slides contain grid code with a flexbox fallback
  • Firefox has good grid devtool
  • CSS has characters unit, e.g. 75ch
  • Slides contain good real examples of using grid and a lot of references

https://twitter.com/brendamarienyc

You Can Save Web Typography

Slides

  • Display Typeface | Text Typeface
  • Font-size:
    • 16px is good
    • super large - 150%, large - 120%, medium - 100% (16px), small - 90%
  • 60-80 characters - ok line long
  • Fake fonts - check bold, italic, bold italic with custom fonts
  • “Curly quotes”:
    • “ - option + [,
    • ” - option + shift + [
  • ‘Apostrophe’:
    • ‘ - option + ]
    • ’ - option + shift + ]
  • Dashes
    • hyphen, e.g. fine-tuned, -
    • en dash, e.g. I‘m British – right? East–West 2009–2019, option + -
    • em dash, e.g. Russia — great country!, option + shift + -

https://codepen.io/glyphe/ https://twitter.com/glyphe

Fast But Not Furious: Debugging User Interaction Performance Issues

Slides

  • use will-change for fixed blocks to avoid repaint
  • https://csstriggers.com/
  • appending:
    • use will-change or contain: layout
    • try not change size of area (overflow)

https://twitter.com/szynszyliszys

Getting Started With ReactVR

https://twitter.com/shay_keinan

All About the CSS Syntax

Slides

https://twitter.com/rdvornov

PostCSS Best Practice

Slides

  • posts-normalize
  • postcss-preset-env
  • decss-loader
  • posts-easing-gradient
  • stylelint-a11y
  • stylelint-no-unsupported-browser-features
  • css-literal-loader
  • Learn how React prevent mistakes, it shows good error messages in console
  • postcss-utilities
  • rtlcss

https://twitter.com/sitnikcode

“Save for Web” Won’t Save You

https://twitter.com/kornelski

Slides

https://twitter.com/RayProud

Report abuse