1 of 39

Factorial

2 of 39

Overcoming Technology Bias

or: How I Learned to Stop Worrying and Love the Tailwind

Factorial

3 of 39

1. Making Technology Choices // 5m

2. My brief History of CSS // 5m

3. Overcoming Tailwind Bias // 10m

Factorial

4 of 39

1.

Making technology Choices

5m

Factorial

5 of 39

Teams

5

Factorial

Factorial

6 of 39

FE working group

6

Factorial

Factorial

7 of 39

Continuous Experimentation

7

Factorial

Factorial

8 of 39

Decision making

We use a framework called rough consensus.

Reasonably fast, focussing on critical objections.

​

I objected.

8

Factorial

Factorial

9 of 39

This a radically different approach towards what we currently use and might warrant further investigation.

From my experience they work much better in a true component system (vue/react/angular) where you can facade repetitive DOM structures.

They can get complicated to reason about when dealing with responsive changes.

@mlnmln in the Factorial Frontend Working Group

“

“

Factorial

10 of 39

2.

My brief History of CSS

5m

Factorial

11 of 39

Factorial

12 of 39

CSS Timeline

12

Factorial

Factorial

13 of 39

“The Early Days”

13

Factorial

Factorial

14 of 39

“The Dark Ages”

14

Factorial

Factorial

15 of 39

“Using CSS for Layout”

15

Factorial

Factorial

16 of 39

“Scaling CSS”

16

Factorial

Factorial

17 of 39

“Serious Web Applications”

17

Factorial

Factorial

18 of 39

“The present”

18

Factorial

Factorial

19 of 39

3. Overcoming Tailwind Bias

Factorial

20 of 39

My objections

  • 1. It looks like sh*t.
  • 2. It’s hard to understand.
  • 3. It’s like writing inline styles.
  • 4. It’s a maintenance nightmare.
  • 5. It’s crap for responsive.

20

Factorial

Factorial

Factorial

21 of 39

“Q: It looks like sh*t”

21

Factorial

Factorial

22 of 39

“A: It’s unfamiliar”

22

Factorial

Factorial

23 of 39

“Q: It’s like writing inline styles.”

23

Factorial

Factorial

24 of 39

“A: It’s constraint-based Design.”

24

Factorial

Factorial

25 of 39

“Q: It’s hard to understand”

25

Factorial

Factorial

26 of 39

“A: Every DSL is.

26

Factorial

Factorial

27 of 39

“Q: It’s a maintenance nightmare”

​

I am repeating the same classes everywhere. �

I need to update the HTML everywhere.

27

Factorial

Factorial

28 of 39

“A: Depends on your abstractions

Do: Use @apply for repetitive combinations

28

Factorial

Factorial

29 of 39

“A: Depends on your abstractions

Don’t: extend everything.

29

Factorial

Factorial

30 of 39

“A: Depends on your abstractions

Do: Create structural abstractions

30

Factorial

Factorial

31 of 39

“Q: It’s crap for responsive”

31

Factorial

Factorial

32 of 39

“A: Don’t do everything at once.

32

Factorial

Factorial

33 of 39

Conclusion

Factorial

34 of 39

Potential

* Reducing Complexity

* Reducing Errors

* Creating consistent Design Systems

* Raising Productivity

Factorial

35 of 39

Where we are right now

35

Factorial

Factorial

36 of 39

Is it the perfect CSS framework for us? We don’t know, yet. ��But we are going to find out.

Factorial

37 of 39

Thanks,

Stay curious.

Factorial

38 of 39

Milan Matull

twitter.com/mlnmln

github.com/mlnmln

38

Factorial GmbH

Kirchentwiete 37-39

22765 Hamburg

Factorial

ADDRESS

CONTACT

Factorial GmbH

Kirchentwiete 37-39

22765 Hamburg

Factorial

ADDRESS

CONTACT

Factorial

39 of 39

References

1. Dr. Strangelove, wikipedia

2. Auto Tuning, vimeo

3. Old CSS, new CSS, @eevee,

4. About HTML semantics and front-end architecture, @necolas,

5. Designing with Tailwind CSS,@adamwhatan

6. Setting up Tailwind CSS with Vue.js, @maoberlehner

39

Factorial

Factorial