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

Future of Preprocessors

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Roy Tomeij Roy Tomeij
June 14, 2016
Technology
190
0

Future of Preprocessors

Smashing Conference NYC 2016

Avatar for Roy Tomeij

Roy Tomeij

June 14, 2016

More Decks by Roy Tomeij

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

Other Decks in Technology

See All in Technology
Model Studio CLI × Token Plan
Avatar for 尾関将樹 | めい maigo999
0
210
私がブラウザを自作したくなった理由
Avatar for Miyamoto Naoyuki supurazako
1
280
作って理解するCoding Agent 〜フレームワークに頼らないピュア Python での実装〜
Avatar for Takanobu Nozawa takapy
3
1.1k
[potatotips #96] Give Your AI Agent the Flutter Playbook
Avatar for Kenichi Kambara korodroid
0
150
AI時代に、人は何を、どう学ぶのか #pbl_pub / What and How Do We Learn in the AI Era?
Avatar for TAKAKING22 takaking22
1
240
AIペネトレーションテスト・ セキュリティ検証「AgenticSec」紹介資料
Avatar for Sho Nakatani laysakura
2
9.4k
20260817_生成AIの動向と中学校・高等学校での活用を考える_v1.00_公開用
Avatar for NobuakiOshiro doradora09
PRO
0
200
自宅NWにISR4331を導入してみた話
Avatar for okaits#7534 okaits
0
120
Sets in Go
Avatar for Luciano Ramalho ramalho
1
1.2k
AIで変わるエンジニアの働き方（仮）
Avatar for naoinaoi naoinaoi
0
470
LLM・AIエージェントシステムベストプラクティス
Avatar for shibuiwilliam shibuiwilliam
6
1.6k
平文パスワードはログに“残り” ── 肝心の侵入は“痕跡すら残らない”
Avatar for kuroneko kuroneko13
0
120

Featured

See All Featured
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
12k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
2
400
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.9k
Abbi's Birthday
Avatar for Violet Bock coloredviolet
3
9.4k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
300
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
470
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
Design in an AI World
Avatar for tapps tapps
1
290
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
280
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
870
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
23k
Visualization
Avatar for Eitan Lees eitanlees
152
17k

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