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
95
You and the Big Stage
Avatar for Roy Tomeij roy
0
73
Make Them Click
Avatar for Roy Tomeij roy
0
290
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
ACA でMAGI システムを社内で展開しようとした話
Avatar for Yuji Masaoka | まっぴぃ mappie_kochi
1
260
KMP の Swift export
Avatar for Koki Hirokawa kokihirokawa
0
330
「Verify with Wallet API」を アプリに導入するために
Avatar for hinakko hinakko
1
230
"複雑なデータ処理 × 静的サイト" を両立させる、楽をするRails運用 / A low-effort Rails workflow that combines “Complex Data Processing × Static Sites”
Avatar for hogelog hogelog
3
2k
pprof vs runtime/trace (FlightRecorder)
Avatar for task4233 task4233
0
170
Oracle Base Database Service 技術詳細
Avatar for oracle4engineer oracle4engineer
PRO
11
77k
M5製品で作るポン置きセルラー対応カメラ
Avatar for Hisaya OKADA sayacom
0
150
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
Avatar for maroon1st maroon1st
0
190
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
Avatar for oracle4engineer oracle4engineer
PRO
2
5.4k
PLaMo2シリーズのvLLM実装 / PFN LLM セミナー
Avatar for Preferred Networks pfn
PRO
2
980
extension 現場で使えるXcodeショートカット一覧
Avatar for とんとんぼ ktombow
0
210
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
Avatar for GMO Flatt Security flatt_security
7
1.9k

Featured

See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.2k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
224
10k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.6k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
188
55k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
14k
It's Worth the Effort
Avatar for 3n 3n
187
28k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k

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