Come Javascript ha cambiato il CSS

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

Cb5004db588b465e64062b4b914f7db7?s=128

Davide Di Pumpo

March 15, 2018
Tweet

Transcript

  1. 2.
  2. 5.

    Disclaimer: family guy css gif is in there for satirical

    purposes, I actually love css in each of its forms
  3. 7.
  4. 8.
  5. 9.
  6. 10.
  7. 12.
  8. 13.

    POI, UNA NOTTE DI SETTEMBRE MI SVEGLIAI POI, UNA NOTTE

    DI SETTEMBRE MI SVEGLIAI Era maggio 2009, ma volevo fare la citazione
  9. 14.
  10. 15.
  11. 19.

    Any application that can be written in JavaScript, will eventually

    be written in JavaScript. ATWOOD'S LAW ATWOOD'S LAW
  12. 27.
  13. 28.

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

    │ ├── BadgeStep.html │ └── BadgeStep.module.css └── BlogPosts ├── BlogPosts.html └── BlogPosts.module.css
  14. 29.

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

    */ .title { color: green; } /* BlogPosts.module.css */ .title { color: green; }
  15. 30.
  16. 31.

    /* Accordion.css */ .Accordion--title--axYow2l { color: gr /* BadgeStep.css */

    .BadgeStep--title--9scas2 { color: gre /* BlogPosts.css */ .BlogPosts--title--Fsvloa { color: gre
  17. 32.

    html js pug <h1 css-module="title">postcss-modules</h1> import styles from "./component.module.css"; element.innerHTML

    = `<div class="${style.title}">postcss-modules</div>`; h1(class=css.title) postcss-modules
  18. 33.

    .

  19. 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
  20. 45.
  21. 47.
  22. 48.

    import breakpoints from "./design/breakpoints" import flattenObjSass from "js-to-scss" /*...*/ loader:

    "sass-loader", options: { data: `$breakpoints: ${flattenObjSass(breakpoints)}` }
  23. 49.
  24. 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; }
  25. 57.

    ANCORA PIÙ FACILE GRAZIE ALLE ANCORA PIÙ FACILE GRAZIE ALLE

    CUSTOM PROPERTIES CUSTOM PROPERTIES aka CSS variables
  26. 60.
  27. 61.
  28. 68.
  29. 69.

    import size from '../src/mixins/size.js'; test('Should return CSS rules', () =>

    { expect(size(null, '64px')).toEqual({ width: '64px', height: '64px', }) });
  30. 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)); }
  31. 74.
  32. 76.
  33. 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
  34. 79.

    Una domanda sorge spontanea PERCHÉ NON LE PERCHÉ NON LE

    CLASSI? CLASSI? meno spontanea di prima
  35. 81.
  36. 82.
  37. 83.
  38. 85.
  39. 87.
  40. 88.
  41. 89.
  42. 92.
  43. 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" }
  44. 96.
  45. 100.
  46. 103.
  47. 106.
  48. 108.

    USIAMO DA ANNI TOOL PER USIAMO DA ANNI TOOL PER

    MIGLIORARE IL NOSTRO CSS MIGLIORARE IL NOSTRO CSS
  49. 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
  50. 110.

    DAI RAGA, TUTTE STE DAI RAGA, TUTTE STE POSSIBILITÀ SONO

    UNA FIGATA POSSIBILITÀ SONO UNA FIGATA
  51. 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