Dynamically Sassy

on YouTube ↗33m

" summary

Shows how to generate dynamic CSS from Sass by adding SassScript functions and using the Sass engine with a custom options hash and load_paths to inject a user seed color. Demonstrates caching with memcached to drop renders from ~2 s to ~212 ms, an alternative of offloading renders to Sidekick background jobs, and a final lesson that refactoring the Sass cuts first-render cost to ~500 ms. Provides code patterns for template rendering, cache keys, and polling.

AI-written summary · about

" chapters (24)

1. 0:00Start
2. 0:56What are we going to talk about?
3. 3:48Implementation Issues
4. 4:23Rendering custom color style sheets from a controller
5. 6:44So What?
6. 7:38RAILSCONF Color Functions
7. 7:52Reusing style sheets
8. 8:30RAILSCONF Static Context
9. 9:58RAILSCONF Dynamic Context
10. 12:09Injecting data from a user?
11. 13:12We need our own render class for dynamic content
12. 16:30There's always a load path
13. 20:35Can impact the whole server
14. 22:32Yup, we need caching
15. 23:01Memcached
16. 24:07Introduce caching into our Sass rendering
17. 25:00Incorporate into SassCustomPalette
18. 27:06Polling client
19. 27:24Waiting on an available worker
20. 27:39Setting up a Sidekiq worker
21. 30:57Identified areas for code improvement
22. 31:15Recap
23. 31:32Web server performance
24. 31:52So what does this mean?

" related talks

• 26mRapid Templating: "Designing in the Browser" with Sass, Compass, and ServeNathan Smith · HTML5.tx Texas 2013
• 51mKiss My SassMartine Dowden · NDC Oslo 2020
• 47mThe Future of SassHampton Lintorn Catlin · RailsConf 2012
• 57mCSS preprocessor performanceNicole Sullivan · Web Directions Code 2013
• 39mThe Mind-blowing Power of Sass 3.3Chris Eppstein · CSSConf EU 2013
• 42mKeeping Your HTML Semantic with SASSRay Villalobos · FITC Web Unleashed 2014
• 20mSweating the Small Stuff: Recreating Subtle Design Details Using SassTim Hettler · CSSConf US 2013
• 36mWhat makes Sass so Syntactically Awesome?Chris Eppstein · CSSConf Australia 2014