Tu chiamalo se vuoi EmotionJS

Tu chiamalo se vuoi EmotionJs

View Slide

Chi sono
Mi trovate ovunque col nick:
@makhbeth
Frontend @Tot.money
CSS enthusiast
Father of one
(the best one)

View Slide

Questo non è un talk su EmotionJS!
È un viaggio che include EmotionJS!

View Slide

Agenda
1. Intro - già fatta
2. Come mai? - ma soprattutto perché?
3. Cos'è? - oltre al readme c'è di più
4. Trick AND treats!
5. È tutto oro quello che luccica?- lessons learned
6. Cosa c'è lì fuori? - il prossimo tool!

View Slide

Let's start now!

View Slide

Come mai?
Era il marzo del 2020!

View Slide

E niente
Stavo per diventare papà!

View Slide

La tua vita finirà

View Slide

TEMPO PER UN SIDE
PROJECT!!!1!

View Slide

View Slide

Piccolo guaio a Porta Romana

View Slide

View Slide

1
1
2
2
3
3
4
4
5
5
6
6
7
7
8
8
9
9
10
10
11
11
12
12
13
13
14
14
15
15
16
16
17
17
18
18
19
19
20
20
21
21
22
22
23
23
export
export const
const neutral
neutral:
: Colors
Colors =
= {
{

main
main:
: {
{

lowest
lowest:
: '#1FB8A1'
'#1FB8A1',
,

low
low:
: '#70EEDB'
'#70EEDB',
,

neutral
neutral:
: '#28EBCD'
'#28EBCD',
,

}
},
,

neutral
neutral:
: {
{

lowest
lowest:
: '#202020'
'#202020',
,

low
low:
: '#202020'
'#202020',
,

neutral
neutral:
: '#DEDEDE'
'#DEDEDE',
,

high
high:
: '#F7F7F7'
'#F7F7F7',
,

highest
highest:
: '#ffffff'
'#ffffff',
,

}
},
,

skin
skin:
: {
{

lowest
lowest:
: '#BA926F'
'#BA926F',
,

low
low:
: '#F3DCBC'
'#F3DCBC',
,

neutral
neutral:
: '#FFEEDC'
'#FFEEDC',
,

accent
accent:
: '#EDA6B4'
'#EDA6B4',
,

}
},
,

accent
accent:
: {
{

neutral
neutral:
: '#F6D65D'
'#F6D65D',
,

low
low:
: '#CCAA3E'
'#CCAA3E',
,

}
}

View Slide

Questo è un lavoro per...
Css in JS

View Slide

Perchè tra tutti EmotionJS?

View Slide

There are only two hard things in Computer Science: cache
invalidation and naming things.
-- Phil Karlton

View Slide

Cos'è?

View Slide

1
1

2
2

3
3

4
4

5
5

6
6

7
7

8
8

9
9

10
10

11
11

12
12

const
const style
style =
= css
css`
`

color
color:
: pink
pink;
;

padding
padding:
: 1
1rem
rem;
;

justify-content
justify-content:
: center
center;
;

align-items
align-items:
: center
center;
;

font-weight
font-weight:
: bold
bold;
;

font-size
font-size:
: 3
3rem
rem;
;

`
`

const
const element
element =
= document
document.
.createElement
createElement(
("div"
"div")
)

element
element.
.innerText
innerText =
= "CSS DAY!!!"
"CSS DAY!!!"

element
element.
.classList
classList.
.add
add(
(style
style)
)

document
document.
.body
body.
.appendChild
appendChild(
(element
element)
)
CSS DAY!!!

View Slide

1
1

2
2

3
3

4
4

5
5

6
6

7
7

8
8

9
9

10
10

11
11

<
div

className
className=
={
{css
css`
`

color
color:
: pink
pink;
;

padding
padding:
: 1
1rem
rem;
;

justify-content
justify-content:
: center
center;
;

align-items
align-items:
: center
center;
;

font-weight
font-weight:
: bold
bold;
;

font-size
font-size:
: 3
3rem
rem;
;

`
`}
}>
>

CSS DAY!!!
CSS DAY!!!

div>
>
CSS DAY!!!

View Slide

View Slide

1
1

2
2

3
3

4
4

5
5

6
6

7
7

8
8

9
9

10
10

11
11

12
12

<
div

className
className=
={
{css
css`
`

label
label:
: CSSDAY
CSSDAY;
;

color
color:
: pink
pink;
;

padding
padding:
: 1
1rem
rem;
;

justify-content
justify-content:
: center
center;
;

align-items
align-items:
: center
center;
;

font-weight
font-weight:
: bold
bold;
;

font-size
font-size:
: 3
3rem
rem;
;

`
`}
}>
>

CSS DAY!!!
CSS DAY!!!

div>
>
CSS DAY!!!

View Slide

View Slide

1
1

2
2

3
3

4
4

5
5

const
const CSSDAY
CSSDAY =
= css
css`
`...
...`
`

<
div

className
className=
={
{CSSDAY
CSSDAY}
}>
>

CSS DAY!!!
CSS DAY!!!

div>
>
CSS DAY!!!

View Slide

Il senso non era non dare un nome alle cose?
Ma c'è un plugin per tutto!
https://emotion.sh/docs/@emotion/babel-plugin#labelformat
const
const brownStyles
brownStyles =
= css
css(
({
{ color
color:
: 'brown'
'brown' }
})
)
⬇
const
const brownStyles
brownStyles =
= /*#__PURE__*/
/*#__PURE__*/ css
css(
({
{ color
color:
: 'brown'
'brown' }
},
, 'label:brownStyles;'
'label:brownStyles;')
)

View Slide

REACT!
1
1

2
2

3
3

4
4

5
5

6
6

7
7

8
8

9
9

10
10

11
11

12
12

/** @jsxImportSource @emotion/react */
/** @jsxImportSource @emotion/react */

<
div

css
css=
={
{css
css`
`

color
color:
: pink
pink;
;

padding
padding:
: 1
1rem
rem;
;

justify-content
justify-content:
: center
center;
;

align-items
align-items:
: center
center;
;

font-weight
font-weight:
: bold
bold;
;

font-size
font-size:
: 3
3rem
rem;
;

`
`}
}>
>

CSS DAY!!!
CSS DAY!!!

div>
>
CSS DAY!!!

View Slide

Bene, abbiamo finito!

View Slide

Mucho Gusto
O dell'opinionismo prematurato a destra

View Slide

Object styles!
1
1

2
2

3
3

4
4

5
5

6
6

7
7

8
8

9
9

10
10

11
11

<
div

css
css=
={
{{
{

color
color:
: 'pink'
'pink',
,

padding
padding:
: '1rem'
'1rem',
,

justifyContent
justifyContent:
: 'center'
'center',
,

alignItems
alignItems:
: 'center'
'center',
,

fontWeight
fontWeight:
: 'bold'
'bold',
,

fontSize
fontSize:
: '3rem'
'3rem',
,

}
}}
}>
>

CSS DAY!!!
CSS DAY!!!

div>
>
CSS DAY!!!

View Slide

Styled components
1
1

2
2

3
3

4
4

5
5

6
6

7
7

8
8

9
9

const
const Styled
Styled =
= styled
styled.
.div
div`
`

color
color:
: pink
pink;
;

padding
padding:
: 1
1rem
rem;
;

justify-content
justify-content:
: center
center;
;

align-items
align-items:
: center
center;
;

font-weight
font-weight:
: bold
bold;
;

font-size
font-size:
: 3
3rem
rem;
;

`
`

<
Styled>
>CSS DAY
CSS DAY
Styled>
>
CSS DAY!

View Slide

Composition
1
1

2
2

3
3

4
4

5
5

6
6

7
7

8
8

9
9

10
10

<
Styled className
className=
='
'qualcosa
qualcosa'
' css
css=
={
{[
[

css
css`
`

💲
💲{
{CSSDAY
CSSDAY}
}

color
color:
: green
green;
;

`
`,
,

css
css`
`color
color:
: blue
blue;
;`
`,
,

CSSDAY
CSSDAY

]
]}
}>
>

CSS DAY
CSS DAY

Styled>
>
CSS DAY

View Slide

What about... cascading?
Emotion className > Emotion prop
Le className fuori dall'ecosistema Emotion vengono
semplicemente aggiunte
Una nuova classe viene forgiata!

View Slide

1
1

2
2

3
3

4
4

const
const a
a =
= css
css`
`color
color:
: red
red;
; border
border:
: 1
1px
px solid pink
solid pink;
;
const
const b
b =
= css
css`
`color
color:
: pink
pink;
; padding
padding:
: 1
1rem
rem;
;`
`

<
div css
css=
={
{[
[a
a,
, b
b]
]}
}>
>CSSDAY
CSSDAY
div>
>

<
div css
css=
={
{css
css`
`
💲
💲{
{a
a}
}
💲
💲{
{b
b}
}`
`}
}>
>CSSDAY
CSSDAY
div>
>
CSSDAY CSSDAY

View Slide

Classi ripetute? E le performance??!1!

View Slide

Pausa Gatto

View Slide

Nesting & Parent selector

View Slide

1
1

2
2

3
3

4
4

5
5

6
6

7
7

8
8

9
9

10
10

11
11

12
12

13
13

14
14

15
15

16
16

17
17

18
18

<
div css
css=
={
{css
css`
`

font-size
font-size:
: 2
2rem
rem;
;

text-align
text-align:
: center
center;
;

color
color:
: pink
pink;
;

section, span
section, span {
{

display
display:
: inline
inline;
;

}
}

div
div {
{

color
color:
: white
white;
;

&
&:first-of-type
:first-of-type {
{

font-size
font-size:
: 1
1rem
rem;
;

}
}

}
}

`
`}
}>
>

<
div>
>This is
This is
div>
>

<
section>
>CSS
CSS
section>
>

<
span>
>DAY!!!
DAY!!!
span>
>

div>
>
This is
CSSDAY!!!

View Slide

Animation
1
1

2
2

3
3

4
4

5
5

6
6

7
7

8
8

9
9

10
10

11
11

const
const rotate
rotate =
= keyframes
keyframes`
`

from
from {
{

transform
transform:
: rotateX
rotateX(
(0
0deg
deg)
);
;

}
}

to
to {
{

transform
transform:
: rotateX
rotateX(
(360
360deg
deg)
);
;

}
}

`
`

<
Styled css
css=
={
{css
css`
`

animation:
💲
animation:
💲{
{rotate
rotate}
} 2
2s
s linear infinite
linear infinite;
;

`
`}
}>
>CSS DAY!
CSS DAY!
Styled>
>
CSS DAY!

View Slide

Media Queries
1
1

2
2

3
3

4
4

5
5

6
6

<
Styled css
css=
={
{css
css`
`

color
color:
: red
red;
;

@media
@media (
(min-width
min-width:
: 20
20rem
rem)
) {
{

color
color:
: white
white;
;

}
}

`
`}
}>
>CSS DAY!
CSS DAY!
Styled>
>
CSS DAY!

View Slide

1
1
2
2
3
3
4
4
5
5
6
6
7
7
8
8
9
9
const
const size
size =
= born
born ?
? 40
40 :
: 60
60

export
export const
const Cockade
Cockade:
: React
React.
.FunctionComponent
FunctionComponent =
= (
()
) =>
=> (
(

<
div

css
css=
={
{css
css`
`

max-height:
💲
max-height:
💲{
{size
size}
}vh
vh;
;

max-width:
💲
max-width:
💲{
{size
size}
}vh
vh;
;

`
`}
}

/>
/>

)
)

View Slide

1
1
2
2
3
3
4
4
5
5
6
6
7
7
8
8
9
9
const
const generateAppearCss
generateAppearCss =
= (
(delay
delay:
: number
number,
, moreCss
moreCss?
?:
: string
string)
) =>
=> css
css`
`

animation:
💲
animation:
💲{
{appear
appear}
} 0.5
0.5s
s;
;

animation-delay:
💲
animation-delay:
💲{
{delay
delay}
}ms
ms;
;

animation-fill-mode
animation-fill-mode:
: backwards
backwards;
;

animation-timing-function
animation-timing-function:
: cubic-bezier
cubic-bezier(
(0.175
0.175,
, 0.885
0.885,
, 0.32
0.32,
, 1.275
1.275)
);
;

transform-origin
transform-origin:
: center center
center center;
;

will-change
will-change:
: transform
transform,
, opacity
opacity;
;

💲
💲{
{moreCss
moreCss}
}

`
`

View Slide

Trick AND Treats

View Slide

Media Query Hook
* short version, for long one, ask me!

View Slide

1
1
2
2
3
3
4
4
5
5
6
6
7
7
8
8
9
9
10
10
11
11
12
12
export
export const
const breakpoints
breakpoints =
= {
{

min
min:
: 0
0,
,

xxxs
xxxs:
: 480
480,
,

xxs
xxs:
: 600
600,
,

xs
xs:
: 720
720,
,

sm
sm:
: 840
840,
,

md
md:
: 960
960,
,

lg
lg:
: 1024
1024,
,

xl
xl:
: 1248
1248,
,

xxl
xxl:
: 1440
1440,
,

max
max:
: 1920
1920

}
}
https://github.com/MakhBeth/js-to-scss

View Slide

1
1
2
2
3
3
4
4
5
5
6
6
7
7
8
8
9
9
10
10
11
11
export
export const
const emBreakpoints
emBreakpoints =
= Object
Object.
.keys
keys(
(breakpoints
breakpoints)
)

.
.reduce
reduce(
((
(aggr
aggr,
, key
key)
) =>
=> {
{

aggr
aggr[
[key
key]
] =
= emCalc
emCalc(
(breakpoints
breakpoints[
[key
key]
])
)

return
return aggr
aggr

}
},
, {
{}
}

)
)

// FP-TS version
// FP-TS version

export
export const
const emBreakpoints
emBreakpoints =
= pipe
pipe(
(breakpoints
breakpoints,
,

R
R.
.map
map(
((
(value
value)
) =>
=> emCalc
emCalc(
(value
value)
))
)

)
)

View Slide

1
1
2
2
3
3
4
4
5
5
<
div css=
={
{css
css`
`

💲
💲{
{mq
mq.
.xs
xs}
} {
{

display
display:
: none
none;
;

}
}

`
`}
}/
/>
>

View Slide

1
1
2
2
3
3
4
4
5
5
6
6
7
7
8
8
9
9
10
10
11
11
12
12
13
13
14
14
15
15
16
16
export
export function
function useMedia
useMedia (
(query
query:
: string
string)
):
: boolean
boolean {
{

const
const [
[matches
matches,
, setMatches
setMatches]
] =
= useState
useState(
(false
false)
)

const
const [
[media
media,
, setMedia
setMedia]
] =
= useState
useState<
MediaQueryList |
| null
null>
>(
(null
null)
)

useEffect
useEffect(
((
()
) =>
=> {
{

const
const media
media =
= window
window.
.matchMedia
matchMedia(
(query
query)
)

setMedia
setMedia(
(media
media)
)

}
},
, [
[]
])
)

useEffect
useEffect(
((
()
) =>
=> {
{

if
if (
(!
!media
media ||
|| !
!media
media.
.addEventListener
addEventListener)
) return
return

if
if (
(media
media.
.matches
matches !==
!== matches
matches)
) setMatches
setMatches(
(media
media.
.matches
matches)
)

const
const listener
listener =
= (
()
) =>
=> {
{ setMatches
setMatches(
(media
media.
.matches
matches)
) }
}

media
media.
.addEventListener
addEventListener(
('change'
'change',
, listener
listener)
)

return
return (
()
) =>
=> media
media.
.removeEventListener
removeEventListener(
('change'
'change',
, listener
listener)
)

}
},
, [
[matches
matches,
, query
query,
, media
media]
])
)

return
return matches
matches

}
}

View Slide

1
1
2
2
3
3
4
4
5
5
6
6
7
7
8
8
9
9
10
10
11
11
12
12
import
import {
{ mq
mq,
, useMedia
useMedia }
} from
from './previousSlide'
'./previousSlide'

export
export function
function useMediaQuery
useMediaQuery (
(bp
bp:
: keyof
keyof typeof
typeof mq
mq)
):
: boolean
boolean {
{

const
const query
query =
= mq
mq[
[bp
bp]
].
.replace
replace(
('@media '
'@media ',
, ''
'')
)

return
return useMedia
useMedia(
(query
query)
)

}
}

// use it like:
// use it like:

const
const Component
Component:
: VFC
VFC =
= (
()
) =>
=> {
{

const
const mq
mq =
= useMediaQuery
useMediaQuery(
('md'
'md')
)

return
return <
div>
>{
{mq
mq ?
? 1
1 :
: 2
2}
}<

/div
div>
>

}
}

View Slide

SearchBar

View Slide

cerca
Bruce Wayne
Michele Brucia
Way Home
Michele Wayne
Bruce Banner
Bruce Lee

View Slide

1
1
2
2
3
3
4
4
5
5
6
6
7
7
8
8
9
9
10
10
11
11
12
12
13
13
14
14
15
15
16
16
17
17
18
18
19
19
const
const friends
friends =
= [
['Bruce Wayne'
'Bruce Wayne',
,'Michele Brucia'
'Michele Brucia',
,'Way Home'
'Way Home',
,'Michele Wayne'
'Michele Wayne',
,'Bruce Banner'
'Bruce Banner',
,'Bruco Lì
'Bruco Lì
const
const mkSearchable
mkSearchable =
= (
(e
e:
: string
string)
) =>
=> e
e.
.replace
replace(
(/
/s
s/
/g
g,
, ''
'')
).
.toLowerCase
toLowerCase(
()
)

const
const Search
Search =
= (
()
) =>
=> {
{

const
const [
[s
s,
, setS
setS]
] =
= useState
useState(
(''
'')
)

return
return <
div css
css=
={
{css
css`
`

ul li
ul li[
[data-searchablefor
data-searchablefor*=
*="
💲{mkSearchable(s)}"
"
💲{mkSearchable(s)}"]
] {
{color
color:
: pink
pink;
; text-decoration
text-decoration:
: underline
underline;
;}
}

`
`}
}>
>

<
input

type
type=
="
"search
search"
"

placeholder
placeholder=
="
"cerca
cerca"
"

onChange
onChange=
={
{(
({
{target
target}
})
) =>
=> setS
setS(
(target
target.
.value
value)
)}
}

/>
/>

<
UnorderedList>
>

{
{friends
friends.
.map
map(
(e
e =>
=>

<
ListItem key
key=
={
{e
e}
} data-searchablefor
data-searchablefor=
={
{mkSearchable
mkSearchable(
(e
e)
)}
}>
>{
{e
e}
}
ListItem>
>)
)

}
}

UnorderedList>
>

div>
>

}
}

View Slide

È tutto oro quello che luccica?
NO!

View Slide

Cosa non mi è piaciuto?
1. Runtime: veloce ma presente
2. Updates: fragile
3. Labels non sempre perfette

View Slide

Per cosa non lo userei?
1. Siti editoriali con poche pagine mastro
2. Design Systems generici
3. Ambienti non JS centrici

View Slide

Ma allora perchè lo usi?
1. Landing page
2. SSR/SSG (Next, Nuxt, Gatsby ecc...)
3. React CRUD app con sezioni "atomiche"

View Slide

NON ESISTE IL SILVER BULLET!

View Slide

Cosa voglio provare la prossima
volta?

View Slide

View Slide

Uscire sempre dalla comfort
zone!
Per crearne di nuove
😁

View Slide

Grazie
Matteo per avermi fatto uscire dalla comfort zone e tornare sul
palco
Claudia per avermi fatto uscire dalla comfort zone e dato una figlia
Gaia per avermi fatto uscire dalle comfort zone, tutte le comfort
zone

View Slide

Tu chiamalo se vuoi EmotionJS

Tu chiamalo se vuoi EmotionJS

Davide Di Pumpo

More Decks by Davide Di Pumpo

Other Decks in Technology

Featured

Transcript