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

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/97226415@N08/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/97226415@N08/15833108071
    

    View Slide

18. dotJS午餐
    https://www.flickr.com/photos/97226415@N08/15835096855
    

    View Slide

19. dotJS午餐
    https://www.flickr.com/photos/97226415@N08/15833342291
    

    View Slide

20. dotJS after party
    https://www.flickr.com/photos/97226415@N08/15809890646
    

    View Slide

21. dotJS after party
    https://www.flickr.com/photos/97226415@N08/15648672500
    

    View Slide

22. dotJS after party
    https://www.flickr.com/photos/97226415@N08/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. View Slide

69. Component
    

    View Slide

70. Design Language
    

    View Slide

71. Move Faster
    

    View Slide

72. Merci!
    

    View Slide