Come Javascript ha cambiato il CSS

Le nostre applicazioni diventano sempre più Javascript centriche. Dai build tool ai template engine, dai server agli static site generator. Anche il CSS non è stato risparmiato da questa rivoluzione di paradigmi. Vedremo insieme come tool come i CSS modules, gli styled-components e node possono rendere il nostro CSS migliore

Transcript

1. Come JavaScript ha
   CAMBIATO
   CAMBIATO
   IL CSS
   IL CSS
   Davide Di Pumpo
   

   View Slide

2. View Slide

3. LET'S START MEAOW
   LET'S START MEAOW
   

   View Slide

4. Parte 1
   IL PASSATO
   IL PASSATO
   

   View Slide

5. Disclaimer: family guy css gif is in there for satirical purposes, I
   actually love css in each of its forms
   

   View Slide

6. <br/>tags.H1.color = "red";<br/>tags.p.fontSize = "20pt";<br/>with (tags.H3) {<br/>color = "green";<br/>}<br/>
   

   View Slide

7. View Slide

8. GRAZIE A SASS ABBIAMO AVUTO:
   GRAZIE A SASS ABBIAMO AVUTO:
   Le variabili
   Le funzioni
   I mixin
   

   View Slide

9. View Slide

10. View Slide

11. CON SASS ERAVAMO DIPENDENTI DA RUBY
    CON SASS ERAVAMO DIPENDENTI DA RUBY
    

    View Slide

12. View Slide

13. POI, UNA NOTTE DI SETTEMBRE MI SVEGLIAI
    POI, UNA NOTTE DI SETTEMBRE MI SVEGLIAI
    Era maggio 2009, ma volevo fare la citazione
    

    View Slide

14. View Slide

15. reference
    

    View Slide

16. Così importante che Sass lo hanno
    riscritto in Dart
    

    View Slide

17. il che ci porta a...
    

    View Slide

18. Parte 2
    IL PRESENTE
    IL PRESENTE
    

    View Slide

19. Any application that can be written
    in JavaScript, will eventually be
    written in JavaScript.
    ATWOOD'S LAW
    ATWOOD'S LAW
    

    View Slide

20. No, non sto parlando di CSS in JS
    Lo faremo presto
    

    View Slide

21. La vera domanda è, perchè ho bisogno di JS
    per scrivere del CSS?
    

    View Slide

22. PER RISOLVERCI QUALCHE
    PER RISOLVERCI QUALCHE
    PROBLEMA
    PROBLEMA
    

    View Slide

23. Problema:
    SCOPING
    SCOPING
    

    View Slide

24. .title {
    color: red;
    }
    .title {
    color: green;
    }
    .title {
    color: blue;
    }
    

    View Slide

25. Lo abbiamo risolto con:
    BEM, SMACSS, ECC... ECC...
    BEM, SMACSS, ECC... ECC...
    

    View Slide

26. GENTLEMEN'S
    GENTLEMEN'S
    AGREEMENT
    AGREEMENT
    

    View Slide

27. View Slide

28. ├── Accordion
    │ ├── Accordion.html
    │ └── Accordion.module.css
    ├── BadgeStep
    │ ├── BadgeStep.html
    │ └── BadgeStep.module.css
    └── BlogPosts
    ├── BlogPosts.html
    └── BlogPosts.module.css
    

    View Slide

29. /* Accordion.module.css */
    .title { color: green; }
    /* BadgeStep.module.css */
    .title { color: green; }
    /* BlogPosts.module.css */
    .title { color: green; }
    

    View Slide

30. View Slide

31. /* Accordion.css */
    .Accordion--title--axYow2l { color: gr
    /* BadgeStep.css */
    .BadgeStep--title--9scas2 { color: gre
    /* BlogPosts.css */
    .BlogPosts--title--Fsvloa { color: gre
    

    View Slide

32. html
    js
    pug
    postcss-modules
    import styles from "./component.module.css";
    element.innerHTML =
    `postcss-modules`;
    h1(class=css.title) postcss-modules
    

    View Slide

33. .
    

    View Slide

34. No global scope
    Niente conflitti
    Dipendenze esplicite
    

    View Slide

35. Local styling with CSS Modules - Hugo Giraudel @ From the Fron…
    

    View Slide

36. E I WEB
    E I WEB
    COMPONENTS?
    COMPONENTS?
    Aspettiamo Max tra qualche decina di
    minuti
    

    View Slide

37. Problema:
    CONDIVIDERE
    CONDIVIDERE
    Tipo tra Sass e JS
    

    View Slide

38. $breakpoints: (
    small: 640,
    medium: 720,
    large: 1024
    );
    

    View Slide

39. COME ACCEDERE A QUESTE PROPERTY
    COME ACCEDERE A QUESTE PROPERTY
    NEL DOM?
    NEL DOM?
    Non renderizzare intere porzioni di
    codice
    Utilizzare element query
    Far partire o meno chiamate ajax
    

    View Slide

40. $breakpoints: (
    small: 640,
    medium: 720,
    large: 1024
    );
    

    View Slide

41. Come condividerei questo in JS?
    

    View Slide

42. export default {
    small: 640,
    medium: 720,
    large: 1024
    }
    

    View Slide

43. import breakpoints from "./breakpoints.js"
    

    View Slide

44. E probabilmente il nostro compilatore Sass
    viene lanciato da JS (Gulp, Webpack,
    whatelse)
    

    View Slide

45. View Slide

46. import breakpoints from "./design/breakpoints"
    /*...*/
    loader: "sass-loader",
    options: {
    data: `$breakpoints: ${breakpoints}`
    }
    

    View Slide

47. View Slide

48. import breakpoints from "./design/breakpoints"
    import flattenObjSass from "js-to-scss"
    /*...*/
    loader: "sass-loader",
    options: {
    data: `$breakpoints:
    ${flattenObjSass(breakpoints)}`
    }
    

    View Slide

49. View Slide

50. Ad esempio, se volessi condividere quanto
    accade in un foglio Sass con un altro
    foglio Sass?
    

    View Slide

51. 'env-map($env-sass-map-name, $map: ())':
    function (envSassMapName, map) {
    if (!env.sass[envSassMapName.getValue()]) {
    env.sass[envSassMapName.getValue()] =
    new nodeSass.types.Map(0);
    }
    if (map.getLength()) {
    env.sass[envSassMapName.getValue()] = map;
    }
    

    View Slide

52. E CON ALTRI
    E CON ALTRI
    PROCESSORI CSS?
    PROCESSORI CSS?
    macropodhq/postcss-constants
    

    View Slide

53. OK, UN GATTINO PER RIAVERE L'ATTENZIONE:
    OK, UN GATTINO PER RIAVERE L'ATTENZIONE:
    

    View Slide

54. Problema:
    CONDIVIDERE A RUNTIME
    CONDIVIDERE A RUNTIME
    

    View Slide

55. Aggiornare il CSS tramite JS
    

    View Slide

56. Element.style.left = "42px";
    

    View Slide

57. ANCORA PIÙ FACILE GRAZIE ALLE
    ANCORA PIÙ FACILE GRAZIE ALLE
    CUSTOM PROPERTIES
    CUSTOM PROPERTIES
    aka CSS variables
    

    View Slide

58. Element.style.setProperty(
    `--custom`, '42px'
    )
    

    View Slide

59. HOVER ME
    E D I T O N
    HTML CSS JS Result
    

    View Slide

60. View Slide

61. View Slide

62. Problema:
    CODICE RIPETUTO
    CODICE RIPETUTO
    

    View Slide

63. .square {
    height: 10px;
    width: 10px;
    }
    

    View Slide

64. // Sass
    .square {
    @include square(10px);
    }
    

    View Slide

65. // PostCSS
    .square {
    @mixin square 10px;
    }
    .square2 {
    size: 10px;
    }
    

    View Slide

66. module.exports = (mixinNode, value) => {
    return {
    width: value,
    height: value,
    }
    };
    

    View Slide

67. Una domanda sorge spontanea
    PERCHÉ POSTCSS?
    PERCHÉ POSTCSS?
    e non uno degli altri?
    

    View Slide

68. TEST
    TEST
    

    View Slide

69. import size from '../src/mixins/size.js';
    test('Should return CSS rules', () => {
    expect(size(null, '64px')).toEqual({
    width: '64px',
    height: '64px',
    })
    });
    

    View Slide

70. Sandrina Pereira: How can Javascript improve your CSS mixins | …
    

    View Slide

71. ANCHE SASS È TESTABILE:
    ANCHE SASS È TESTABILE: TRUE
    TRUE
    

    View Slide

72. @include test-module('Zip [function]') {
    @include test('Zips multiple lists int
    // Assert the expected results
    @include assert-equal(
    zip(a b c, 1 2 3),
    (a 1, b 2, c 3));
    }
    

    View Slide

73. Problema:
    COMPONENTIZZARE
    COMPONENTIZZARE
    

    View Slide

74. View Slide

75. 
    Accattatil
    
    

    View Slide

76. View Slide

77. 
    Accattatil
    
    

    View Slide

78. const Button = styled.button`
    background: ${props =>
    props.primary
    ? 'palevioletred'
    : 'white'
    };
    color: ${props => props.primary ? 'white' : 'palevi
    font-size: 1em;
    margin: 1em;
    padding: 0.25em 1em;
    b d 2 lid l i l d
    

    View Slide

79. Una domanda sorge spontanea
    PERCHÉ NON LE
    PERCHÉ NON LE
    CLASSI?
    CLASSI?
    meno spontanea di prima
    

    View Slide

80. Eliminano il global space
    Le dipendenze sono esplicite
    Condividere costanti è più facile
    

    View Slide

81. MA PER ME IL SELLING POINT È...
    MA PER ME IL SELLING POINT È...
    

    View Slide

82. suspense
    

    View Slide

83. attesa
    

    View Slide

84. momento verità
    

    View Slide

85. View Slide

86. L'ASTRAZIONE
    L'ASTRAZIONE
    

    View Slide

87. ???
    ???
    

    View Slide

88. View Slide

89. View Slide

90. Problema:
    REGRESSION TEST
    REGRESSION TEST
    

    View Slide

91. COS'È?
    COS'È?
    

    View Slide

92. View Slide

93. BACKSTOPJS
    BACKSTOPJS
    

    View Slide

94. {
    "id": "OM Client",
    "viewports": [
    {"label": "main", "width": 1366, "height": 768}
    ]
    {
    "label": "archive",
    "url": "https://localhost:9000/archive",
    "delay": 2000,
    "hideSelectors": ["#loading-bar-new"],
    "onBeforeScript": "helpers/localStorageOM.js"
    }
    

    View Slide

95. module.exports = (chromy, scenario) => {
    chromy
    .wait('.ic-app')
    .click('.introjs-skipbutton');
    };
    

    View Slide

96. View Slide

97. Parte 3
    IL FUTURO
    IL FUTURO
    

    View Slide

98. WEB COMPONENTS
    WEB COMPONENTS
    

    View Slide

99. PROJECT HOUDINI
    PROJECT HOUDINI
    

    View Slide

100. View Slide

101. CSS PARSER API
     CSS PARSER API
     @apply o @extends a run time!
     

     View Slide

102. CSS LAYOUT API
     CSS LAYOUT API
     

     View Slide

103. View Slide

104. CSS PAINT API
     CSS PAINT API
     Per farla breve una sorta di Canvas
     

     View Slide

105. .bubble {
     background: paint('circle');
     }
     

     View Slide

106. A riguardo
     

     View Slide

107. Recap
     QUINDI?
     QUINDI?
     

     View Slide

108. USIAMO DA ANNI TOOL PER
     USIAMO DA ANNI TOOL PER
     MIGLIORARE IL NOSTRO CSS
     MIGLIORARE IL NOSTRO CSS
     

     View Slide

109. JS È GIÀ NELLA NOSTRA BUILD CHAIN,
     JS È GIÀ NELLA NOSTRA BUILD CHAIN,
     USIAMOLO A NOSTRO VANTAGGIO
     USIAMOLO A NOSTRO VANTAGGIO
     Per risolvere alcuni problemi che possiamo
     avere con CSS
     

     View Slide

110. DAI RAGA, TUTTE STE
     DAI RAGA, TUTTE STE
     POSSIBILITÀ SONO UNA FIGATA
     POSSIBILITÀ SONO UNA FIGATA
     

     View Slide

111. GRAZIE
     GRAZIE
     DAVIDE DI PUMPO
     DAVIDE DI PUMPO
     Technology -
     Co-organizer
     MakhBeth on: , ,
     I like Cats, Drink, Comics and
     Videogames...
     Credimi
     Milano Frontend
     Twitter Github
     Internet
     

     View Slide