Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Miksi frontend-kehittäjän pitää rakastaa matematiikkaa? (WordCamp Jyväskylä 2018)

232 views

Published on

Symmetria, harmonia ja tasapaino perustuvat kaikki matematiikkaan. Luontevilta tuntuvat tekstikoot, marginaalit ja gridit vaativat matematiikkaa taustalle.

Puheenvuorossa kerrotaan matemaattisen ajattelun tärkeydestä sekä käytännön esimerkeistä esimerkiksi tekstikoiden määrityksestä rem-yksiköillä, prosenttilaskuista leveyksiin ja luontevien marginaalien määrityksestä.

Puheenvuoro auttaa kaikkia frontendin kanssa työskenteleviä sekä suunnittelijoita. Ilman matemaattista ajattelua frontti ei näytä luonnolliselta.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Miksi frontend-kehittäjän pitää rakastaa matematiikkaa? (WordCamp Jyväskylä 2018)

  1. 1. #WCJKL | 9.2.2018 TeemuSuoranta Miksi frontend- kehittäjän pitää rakastaa 
 matematiikkaa?
  2. 2. #WCJKL | 9.2.2018 TeemuSuoranta Teemu Suoranta • Web Developer & osakas Aucor Oy
 • WordPress-projekteja 2013-
 • Turku WordPress Meetup -järjestäjä • Suomenkielisen WordPressin GTE
  3. 3. #WCJKL | 9.2.2018 TeemuSuoranta MIKSI NUMEROILLA
 ON VÄLIÄ?
  4. 4. #WCJKL | 9.2.2018 TeemuSuoranta Harmonia on
 matematiikkaa FAKTA #1
  5. 5. #WCJKL | 9.2.2018 TeemuSuoranta Tulemme sokeiksi yksityiskohdille FAKTA #2
  6. 6. Onko
 taulu suorassa?
  7. 7. #WCJKL | 9.2.2018 TeemuSuoranta Sopusointuisuus syntyy oikeista luvuista FAKTA #3
  8. 8. #WCJKL | 9.2.2018 TeemuSuoranta Matematiikan tie ei ole laiskalle FAKTA #4
  9. 9. #WCJKL | 9.2.2018 TeemuSuoranta FRONTEND-
 MATEMATIIKAN
 PERUSTEET
  10. 10. #WCJKL | 9.2.2018 TeemuSuoranta Fiksut 
 mittayksiköt ESIMERKKI 1
  11. 11. #WCJKL | 9.2.2018 TeemuSuoranta Absoluuttinen koko Ympäristöstä riippumaton mitta
 px, pt, cm Otsikko 1 Otsikko 2 Otsikko 3 Kappale 40px | 16px | 32px | 24px |
  12. 12. #WCJKL | 9.2.2018 TeemuSuoranta Relatiivinen koko Ruudusta, fonttikoosta, tilasta riippuva mitta
 rem, em, %, vh Otsikko 1 Otsikko 2 Otsikko 3 Kappale 2.5rem | 1rem | 2rem | 1.5rem |
  13. 13. #WCJKL | 9.2.2018 TeemuSuoranta Relatiivinen koko CSS-koodissa html { font-size: 100%; /* 16px */ } @media (max-width: 767px) { html { font-size: 87.5%; /* 14px */ } }
 h1 { font-size: 2.5rem; /* 40px / 35px */ } p { font-size: 1rem; /* 16px / 14px */
 }
  14. 14. #WCJKL | 9.2.2018 TeemuSuoranta Pikseleistä remmeihin pikselit 16 = koko remmeinä 20 px 16 = 1.25 rem
  15. 15. #WCJKL | 9.2.2018 TeemuSuoranta Remmeistä pikseleihin remmit x 16 = koko pikseleinä 1.25 rem x 16 = 20 px
  16. 16. #WCJKL | 9.2.2018 TeemuSuoranta Sopusuhtaiset
 välit ESIMERKKI 2
  17. 17. #WCJKL | 9.2.2018 TeemuSuoranta 8-point grid Elementtien koko muuttuu 8 pikselin askelmissa Lue lisää: Built to Adapt a a aaaaa0.5rem 1rem 1.5rem 2rem 2.5rem
  18. 18. #WCJKL | 9.2.2018 TeemuSuoranta 8-point grid -esimerkki 20€ (ALV 0%) Otsikkoteksti Lisää ostoskoriin 2rem 1rem 2rem
  19. 19. #WCJKL | 9.2.2018 TeemuSuoranta Nappula
 ESIMERKKI 3
  20. 20. #WCJKL | 9.2.2018 TeemuSuoranta Haluttu lopputulos Lisää ostoskoriin
  21. 21. #WCJKL | 9.2.2018 TeemuSuoranta Sopusuhtainen nappula .btn { font-size: 1rem; line-height: 1.25; padding: .375rem .5rem;
 } Lisää ostoskoriin } 2rem korkeus = font-size x line-height + padding
  22. 22. #WCJKL | 9.2.2018 TeemuSuoranta Lisää haastetta Lisää ostoskoriin
  23. 23. #WCJKL | 9.2.2018 TeemuSuoranta Sopusuhtainen nappula reunaviivalla .btn { font-size: 1rem; line-height: 1.25; /* border: 1px */ border: .0625rem solid #fff; /* padding: .5rem - line-height & border */ padding: .3125rem .4575rem; } Lisää ostoskoriin } 2rem korkeus = font-size x line-height + padding + border
  24. 24. #WCJKL | 9.2.2018 TeemuSuoranta DISCIPLINE
 EQUALS FREEDOM Jocko Willink:

×