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

Future of Preprocessors

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
130
What (Not) to Do
Avatar for Roy Tomeij roy
0
110
You and the Big Stage
Avatar for Roy Tomeij roy
0
93
Make Them Click
Avatar for Roy Tomeij roy
0
320
0 to 80 in 40 Minutes
Avatar for Roy Tomeij roy
2
280
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
430
Front-End: Fun, Not Frustration
Avatar for Roy Tomeij roy
1
1.1k
Sass in the Real World
Avatar for Roy Tomeij roy
2
530

Other Decks in Technology

See All in Technology
マーケットプレイス版Oracle WebCenter Content For OCI
Avatar for oracle4engineer oracle4engineer
PRO
5
1.7k
Kaggle未経験社員をメダリストに育てる「AIドラゴン桜」
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
650
APIテストとは？
Avatar for 草薙昭彦 nagix
0
140
「使われるデータ基盤」を目指してデータアナリストとワークショップをやった話
Avatar for jackojacko_ jackojacko_
2
920
個人AIからチームAIへ：開発における品質と生産性の再設計
Avatar for Atsushi Nakatsugawa moongift
PRO
0
290
大学生が本気でDatabricksを活用してDiscordサークルをデータ駆動させてみた
Avatar for Kazuki Date phantomjuju
1
270
GitHub Copilot のこれまでとこれから: From Copilot to Collaborative Agents
Avatar for yuriemori yuriemori
1
230
Claude Codeですべての日常業務を爆速化しよう！
Avatar for みのるん minorun365
PRO
16
15k
食べログのサーキットブレーカー導入を振り返って
Avatar for atpons atpons
1
150
TROCCOで始めるクラウドコストを民主化するためのFinOps
Avatar for Hiroki Takatsuka tk3fftk
1
270
人が担う「価値」とは？これからの「QA」とは / Human Value and the Future of Quality Assurance
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
130
権限管理設計を完全に理解した
Avatar for r-sugi rsugi
2
230

Featured

See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.4k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
580
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
2k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.3k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
2k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
460
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
750
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.3k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
780
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
290

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