Upgrade to Pro — share decks privately, control downloads, hide ads and more …

講個秘訣給沒參加dotCSS/dotJS的吳姓網友

Liang Bin Hsueh
January 11, 2015

 講個秘訣給沒參加dotCSS/dotJS的吳姓網友

Liang Bin Hsueh

January 11, 2015
Tweet

More Decks by Liang Bin Hsueh

Other Decks in Design

Transcript

  1. #講個秘訣
    給沒參加dotCSS/dotJS
    的吳姓網友
    hlb / 布丁 @ KKTIX 售票亭

    View Slide

  2. KKTIX
    ⼤大家好像都⽤用過了...... m(_ _)m

    View Slide

  3. “誰負責寫CSS?”
    “幾乎都會寫耶......”

    View Slide

  4. 45%
    Desktop

    View Slide

  5. 1.3%
    IE < 9 this month
    (我們有在徵前端⼯工程師)

    View Slide

  6. dotCSS/dotJS
    The largest CSS/JavaScript conference in Europe

    View Slide

  7. dotJS
    ~ 900 attendees this year

    View Slide

  8. dotCSS (first year)
    400 attendees expected

    View Slide

  9. 歐洲研討會
    SUN MON TUE WED THU FRI SAT
    1
    2 3 4 5 6 7 8
    9 10 11 12 13 14 15
    16 17 18 19 20 21 22
    23 24 25 26 27 28 29
    30

    View Slide

  10. Paris

    View Slide

  11. 場地
    https://www.flickr.com/photos/[email protected]/15797290266

    View Slide

  12. 20 speakers

    View Slide

  13. 12hrs ✈️

    View Slide

  14. dotCSS: Doors now
    opening at *1pm*
    …Unfortunately we have not seen the same level of
    interest from them for CSS as for our other conference
    topics, and we were faced with a choice: increase the
    price of the tickets or skip lunch (our biggest cost).
    We think that most of you come for the speakers and
    not for the food so we have decided to move the first
    session from the morning to the early afternoon and
    shorten the breaks a bit to keep roughly the same
    number of talks and lightning talks. In the case you were
    coming for the food, well, email us and we'll refund you :)

    View Slide

  15. 危機處理++
    有誠意 + 掌握核⼼心價值

    View Slide

  16. 問:午餐到底多貴?
    隨便發個麵包也可以辦全天吧

    View Slide

  17. dotJS午餐
    https://www.flickr.com/photos/[email protected]/15833108071

    View Slide

  18. dotJS午餐
    https://www.flickr.com/photos/[email protected]/15835096855

    View Slide

  19. dotJS午餐
    https://www.flickr.com/photos/[email protected]/15833342291

    View Slide

  20. dotJS after party
    https://www.flickr.com/photos/[email protected]/15809890646

    View Slide

  21. dotJS after party
    https://www.flickr.com/photos/[email protected]/15648672500

    View Slide

  22. dotJS after party
    https://www.flickr.com/photos/[email protected]/15833499335

    View Slide

  23. – Sylvain Zimmer, Founder of dotConferences
    “This is a wireless-less conference”

    View Slide

  24. 雖然官⽅方指定語⾔言是英⽂文
    “Can you speak French?”

    View Slide


  25. CSS 20 YEARS OLD
    2014/10/10

    View Slide

  26. 20 years of CSS:
    maturity or senility?
    Daniel Glazman @glazou

    CSS Working Group, Co-chair
    http://disruptive-innovations.com/zoo/slides/20141114-dotCSS/dotCSS2014.pdf
    開場

    View Slide

  27. CSSWG 的決策過程
    各種蠢決策,以及為什麼

    View Slide

  28. Variables
    從 CSS 2 (1998)提出之後,⼤大家都覺得需要有

    View Slide

  29. Variables
    花了 16 年 LCWD

    View Slide

  30. CSS Custom Properties
    for Cascading Variables
    什麼?

    View Slide

  31. Variables
    body {
    --corpcolor: orange;
    }
    #foo {
    color: var(--corpcolor);
    }

    View Slide

  32. 為什麼不⽤用 #define
    • Faaaaaaaaaar too simple...
    • Do you really think we’re Web designers?
    • We love fighting for 15 years and then blame W3C
    Process for being slow...
    • Don’t you love our innovative -- notation?

    View Slide

  33. Flexbox

    View Slide

  34. Selectors 4 各種梗
    :matches() or « even the examples in the spec don’t
    show why we need it »

    View Slide

  35. mailing list 是你的好
    朋友

    View Slide

  36. Typography on the web,
    and how HTML and CSS are
    currently poorly suited for it
    Bert Bos

    Father of CSS
    結束

    View Slide

  37. XSL v.s. CSS

    View Slide

  38. CSS v.s. Latex

    View Slide

  39. Quotation & Punctuation

    View Slide

  40. View Slide

  41. View Slide

  42. You are the first
    generation to know CSS
    Your parents don’t know it

    View Slide

  43. Bridging the gap
    between developers and
    designers at Guardian
    Kaelig Deloumeau-Prigent
    http://www.thedotpost.com/2014/11/kaelig-deloumeau-prigent-bridging-the-gap-between-developers-and-
    designers

    View Slide

  44. 共通語⾔言
    Designers, Engineers, Product Manager,
    UX Designer, Editorial

    View Slide

  45. Use Sass variables
    color, typography

    View Slide

  46. Breakpoints
    media query
    https://github.com/sass-mq/sass-mq

    View Slide

  47. Ten Principles for
    Effective Front-end
    Development
    Harry Roberts (csswizardy)
    https://speakerdeck.com/csswizardry/ten-principles-for-effective-front-end-development

    View Slide

  48. Understand the
    business
    花了⼀一個⽉月做了超漂亮的 css spinner,⽽而且可以 cross
    browser – over design

    View Slide

  49. View Slide

  50. The User
    The Business
    The Team

    View Slide

  51. The User
    The Business
    The Team

    View Slide

  52. View Slide

  53. The User
    The Business
    The Team

    View Slide

  54. KEEP CALM
    AND
    WRITE SASS
    Hugo Giraudel
    https://speakerdeck.com/hugogiraudel/keep-calm-and-write-sass

    View Slide

  55. autoprefixer
    https://github.com/postcss/autoprefixer

    View Slide

  56. SassDoc
    http://sassdoc.com/

    View Slide

  57. CSS? WTF!
    Estelle Weyl
    http://estelle.github.io/doyouknowcss/

    View Slide

  58. 投影⽚片⽤用 CSS 控制

    View Slide

  59. 如何避免 important
    .disabled { cursor: default !important; }
    p.btn { cursor: pointer; }

    View Slide

  60. .disabled { cursor: default !important; }
    p.btn { cursor: pointer; }
    .disabled.disabled.disabled {
    cursor: default; }
    p.btn { cursor: pointer; }
    如何避免 important

    View Slide

  61. 邪惡的瀏覽器偵測技巧
    2014 年版
    好孩⼦子不要⽤用 O_O\~/
    http://codepen.io/hlb/pen/QwdxQm

    View Slide

  62. Making Twitter UI
    infrastructure
    Nicolas Gallagher
    http://www.thedotpost.com/2014/11/nicolas-gallagher-thinking-beyond-scalable-css

    View Slide

  63. scalability issue
    牽⼀一髮⽽而動全⾝身

    View Slide

  64. not knowing what component has already been made,
    not knowing what css was safe to remove,
    not knowing what css is necessary to correctly render a
    page… small change can make large impact

    View Slide

  65. Scalable UI design
    design for adaptability and requirement of always changing UI and dealing
    with… unexpected demand of the business and changes we have to make

    View Slide

  66. SUIT CSS
    http://suitcss.github.io/

    View Slide

  67. Videos (updating)
    http://www.thedotpost.com/

    View Slide

  68. 2015

    View Slide

  69. Component

    View Slide

  70. Design Language

    View Slide

  71. Move Faster

    View Slide

  72. Merci!

    View Slide