Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Future of Preprocessors

Avatar for Roy Tomeij Roy Tomeij
June 14, 2016
Technology
0
170

Future of Preprocessors

Smashing Conference NYC 2016

Avatar for Roy Tomeij

Roy Tomeij

June 14, 2016
Tweet

More Decks by Roy Tomeij

See All by Roy Tomeij
Empathy through Acting
Avatar for Roy Tomeij roy
1
120
What (Not) to Do
Avatar for Roy Tomeij roy
0
96
You and the Big Stage
Avatar for Roy Tomeij roy
0
74
Make Them Click
Avatar for Roy Tomeij roy
0
300
0 to 80 in 40 Minutes
Avatar for Roy Tomeij roy
2
250
The Future of CSS Isn't CSS
Avatar for Roy Tomeij roy
5
1.1k
Sass: With Great Power Comes Great Responsibility
Avatar for Roy Tomeij roy
0
390
Front-End: Fun, Not Frustration
Avatar for Roy Tomeij roy
1
1.1k
Sass in the Real World
Avatar for Roy Tomeij roy
2
520

Other Decks in Technology

See All in Technology
From Natural Language to K8s Operations: The MCP Architecture and Practice of kubectl-ai
Avatar for Bo-Yi Wu appleboy
0
320
CNCFの視点で捉えるPlatform Engineering - 最新動向と展望 / Platform Engineering from the CNCF Perspective
Avatar for hhiroshell hhiroshell
0
140
re:Inventに行くまでにやっておきたいこと
Avatar for nagisa_53 nagisa53
0
680
dbtとAIエージェントを組み合わせて見えたデータ調査の新しい形
Avatar for 10xinc 10xinc
6
1.4k
アノテーション作業書作成のGood Practice
Avatar for Cierpa & Company cierpa0905
PRO
0
220
AI機能プロジェクト炎上の 3つのしくじりと学び
Avatar for nakawai nakawai
0
130
現場の壁を乗り越えて、 「計装注入」が拓く オブザーバビリティ / Beyond the Field Barriers: Instrumentation Injection and the Future of Observability
Avatar for Kento Kimura aoto
PRO
1
680
仕様駆動開発を実現する上流工程におけるAIエージェント活用
Avatar for sergicalsix sergicalsix
6
2.3k
Okta Identity Governanceで実現する最小権限の原則
Avatar for 株式会社出前館 demaecan
0
190
ラスベガスの歩き方 2025年版（re:Invent 事前勉強会）
Avatar for JunjiKoide junjikoide
0
510
JSConf JPのwebsiteをGatsbyからNext.jsに移行した話 - Next.jsの多言語静的サイトと課題
Avatar for Leko leko
2
190
OSSで50の競合と戦うためにやったこと
Avatar for yamadashy / やまだし yamadashy
3
1k

Featured

See All Featured
KATA
Avatar for Megan Lloyd mclloyd
PRO
32
15k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
253
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
2.9k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
8.9k
Building an army of robots
Avatar for Kyle Neath kneath
305
46k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.2k
Fireside Chat
Avatar for paigeccino paigeccino
41
3.7k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
127
54k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
7k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.7k

Transcript

  1. The Future of Preprocessors

  2. @Roy

  3. None
  4. None

  5. 2 0 0 6

  6. None
  7. None
  8. None

  9. 0607080910111213141516

  10. 0607080910111213141516 Made CSS Great Again

  11. 0607080910111213141516

  12. 0607080910111213141516

  13. 0607080910111213141516

  14. 0607080910111213141516

  15. 0607080910111213141516

  16. 0607080910111213141516

  17. how about css features?

  18. 0607080910111213141516 CSS Animations Proposed

  19. 0607080910111213141516 CSS Animations -webkit- in Chrome

  20. 0607080910111213141516 CSS Animations in Internet Explorer

  21. 0607080910111213141516 CSS Animations without -webkit-

  22. 0607080910111213141516 CSS Animations still Working Draft

  23. why so long?

  24. None

  25. Idea

  26. Write Editor's Draft

  27. Browsers may experiment with implementing

  28. Write Working Draft

  29. Browsers start implementing

  30. Candidate Recommendation

  31. Two correct, independent implementations

  32. Recommendation

  33. None

  34. Idea

  35. Natalie approves

  36. It's implemented

  37. Works in all browsers

  38. Sass gave us the featureS we needeD. Fast.

  39. CSS is catching up

  40. calc(100% - 80px)

  41. Custom Properties

  42. None

  43. Sass > CSS CSS > Sass

  44. #languagedesign

  45. @if media(...) { ... }

  46. No more preprocessors

  47. Variables, nesting, placeholders, extend, mixins, functions, control structures, lists/maps, math,

    ...

  48. Programming in your CSS

  49. CSS is a machine language

  50. Creativity > Repetition

  51. Configuration > Search & replace

  52. Fun > Frustration

  53. Sass is great for non-developers too

  54. Don't overdo it

  55. The following code was copy & pasted by trained monkeys.

    Do not try this at home.
  56. None