Merken

Dynamically Sassy

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
the at the time and the end of right an afternoon everyone review and after lunch Suite of thank you for coming out of this town but only see a lot of talks on the status of some hope you'll find this 1 interesting because we're look at make it a little more dynamic I'm and to give you kind preview so really what we're 1 accomplish is take a assess style sheets in in a dynamic way taken user input from the client and be able to render out dynamic CSS so it's not so static but the sell sheet we might use the acid pipeline so what we're going
to talk about obviously word I Generate
dynamic CSS it's the topic for today and I can mention this is gonna be based on user input so we're gonna learn about writing sass functions in Ruby actually because we're going to have to figure out some way to get some dynamic content into a style sheet context and along the way will find that this may not be the most performant arousal then identify performance issues and think of ways that we can resolve and fix that so that means we probability caching and even maybe some background processing before we get
too far and URI I live in Tennessee in a very small town on or L probably on Twitter on
I work for a company called push agency we are a completely distributed teams on a remote web developer I do a lot of rails in JavaScript on the so back and Dyffryn die full-stack everyone column of so we don't quite work we
have this product called simply built it simply build is a website builder editor and you can have many websites as you want and you can edit your sites directly looking at them so we have a dragon drop interface for different blocks of content and can rearrange those blocks and edit them directly by the content editable at be that's available in HTML 5 so why am I bringing of simply built they were here about sass my picture product to you well maybe I think it's pretty awesome but this is related to the topic so earlier this year I was working on a task for simply build a new feature so at the
time simply built for your website you can select from a few things and then within each state you can select your color palette and that would determine what navigation color using what background colors we news text color etc. The we wanted offer that in a custom manner tour user wouldn't be stopped it just whatever pallets we have a naked customize and we wanted the user experience to be pretty nice so we don't wanna just have a color will and you select all your swatches and more than likely you're gonna get frustrated it's not gonna look at in your life so we thought let's let's let them pick a color from seed color and they will generate pallets based on some different color harmonies and that way we can let them customizable still generates something that's gonna look good for the website the so this is the problem that I was tasked with solving and so there were some
implementation issues that I had start to consider the 1st thing we already have the style sheets and reusing in in a static context so we have all these complex rules incest that determine what background color is used for which palette text color etc. what doesn't make sense to reimplement all this in duplicate code just for a dynamic context so we want to be put this in a manner where I can reuse the style sheet and both are static default context and in the of color context and that means were prominent the asset pipeline especially not production so we're gonna have to somehow get this to work from a controller and render out that way but will find that sense is a very quick it rendering especially when you get some pretty complex style sheets so we'll look at caching CSS and it maybe even rendering the worker and so these were the so the research I did in looking into to get this to work a simple bill and some implementation issues that I added up facing so
just as a quick introduction and I'm sure most of you or use assassin rails but just to let you get a feel for it if you've never seen before new assassin rails it syntactically Austin style sheets and sets the CSS preprocessed so it offers you some different syntax that looks like CSS but ideally is gonna make your job easier to write your CSS a more manageable maintainable way and here is just a a basic
overview Watson sass looks like so we have variables the nice thing about variables is if you have a certain font size text color you like using your style sheets instead of constantly duplicating over and over and send it to a variable and then we can use our variable throughout our styles and phonemic change all to do is change the value of variable we also have nested roles so with nested it allows you to avoid the whole the sender selectors the Senate selectors that can be super long and this way you can kind namespace your test roles but we can include other says stylesheets by the import keyword and that allows us to make our files more modular we can develop this style sheet over here to some widget this went to this web page so makes sense the kind like modules in Ruby I can create some rules that I know I will want to use in more than 1 class a selector and I can just include them and that helps avoid that sometimes you want to extract out some common class and you get add more classes to your mark to this so she can avoid that so
so what and I know this debate sometimes whether ceases preprocessing needed or not I really like it obviously gives you modularity I can separated out different widgets of pages and I can import them as needed and it helps me keep my style sheet more maintainable and obviously with makes sense the variables that helped enforce the DRY principle we also actually have data structures and scripting incest so it's a language and you can capitalize then use loops and what not to also help reduce repetitiveness in your CSS like a great example the background sprite image and you wanna set where the positioning is you can create a map which has a class 1 use for position actual background-position and loop over that generate new rules that way there's also color functions which is really helpful especially in this case with custom colors were I can take a color light darkened and then use that modified color in some way the and that sense alright so
let's get on to what we're really gonna talk about today so 1st thing is we wanna reuse the style sheets and we'll find out it's in the variables so we want to architecture follows in a way that we have some global variable that has In this case will see our palette of colors and it will import another followed his actions cells Ravenna reuse and so that imported file is going to depend on some global variable that needs to exist and is going to be able to use that man in generating the styles so
let's look at the static context worse so I have
3 sets policy at the top 1 that's going to be our simplified UI satisfy so we have this who selected with a background in the color notice recalling is it function so sass has lists I mentioned have data structures this power variables going to be a list so like you might guess by calling in on a list and has a number I'm going to grab that it element from the list you also notice it starts at 1 I'm so sass Lister's index starting at 1 so 0 so we go down to the next you files we have a power 1 C is a C assessment USC assess and you'll notice I'm sending a list there the first one the palate and I just use space delimiter cup of rapid parenthesis to make it more explicit what I'm doing you can use commas to 4 lists is gonna be consisting of red and green and I'm my UI file low that I have 2nd palette in setting again a palace but this time it's blue yellow and I'm importing the y so basically what that's gonna do I've set this global scope palate is defined by port this powers see that variable is gonna use that so already you can see how we can reuse the style sheets and static context
but we wanna start looking and dynamic context and this is horrible against ASR functions so here we have another so style
sheet this time upsetting palate equal to return type of this get dynamic power function and again I'm importing YUI so where is the dynamic power come from so sense of those models are script functions and any method you add to that module will make that method available as a function in your set style sheets and if you've ever programmed in a host language where you're defining some function for the target language you know you have to work in types that are the available in the host language so if you've written a c extension for Ruby before you know your C function it's it's not gonna return integers I can return a character pointer is gonna return a Ruby value type so the same idea applies here with Ruby incest the so walking through this function here were going to create a palette again I'm going to times maps as can be 2 colors and is generating 2 random hexadecimal strings and then I'm calling this uh function on this very long modules are spread value colors so underneath sass grip value exist all these types ancestors colors numbers lists etc. so color has this can be a class method called from max and obviously like you might guess it'll take a hexadecimal string and return this color value type so i'm gonna basically created array of 2 colors sass colors and they're at the bottom I'm going to pass it on to assess value list so it expects when I instantiated expects an array of sass value types and then the other parameter there which is the space symbol is basically stay this of the limiter I wanna use of my list OK so that's pretty cool we can get some type of dynamic content from Ruby and assess but what about
injecting data from a user because we want this to work somehow in the rails ecosystem where the climates request and we get back some dynamic CSS to them so I'm basically saying I
want get dynamic power from user somehow magically and how that work the and we
use the asset pipeline Moon not
exactly so we have sort of a quote unquote static context in the till template for sex rails so success
rails said so a jam that normally have bundled with here real that that gets sass running in the asset pipeline and it defines the still template which is responsible for rendering up assess and the were on a locked in whatever it's doing there we'd have to do some hackery to get it to work in a dynamic way like we'd like so that's not work 0 and
assets you their pre for production so the asset pipelines not work here the so we need
some sort of render class for dynamic content that we're going to have to write the
so this is worse ass anginal come to the rescue so assassin engine is
the actual injury you render out your CSS based on nest CSS assess assess template the so we'll have this ass custom palette class will define and the 1st thing we're going to define this template strain Hamilton acquisition it's not gonna change were really don't want throw another file on file system to read and just to reuse this in a dynamic context will just at this template concept and you'll notice there it's going to you calling get custom palettes function incest so we're taken a color or set as an instance variable Weber render method which is basically gonna delegate to assess injured passing the template the pass in some sass cut custom options we so there at the bottom what's up with these fast custom options so the 1st couple options pretty straightforward syntax of using more popular syntax people like and style expanded best just for pretty bring your CSS and then the last option notice it's called custom if you look assesses documentation they mention this is specifically what we need in this context if you want jackson for a custom the data here says style sheets and you pass it in there so I passing the hash is gonna basically have whatever our custom seed color it's so we need to define that get custom palettes a function remember we need Adam method to sass script functions so it's all pretty similar to what we did in the last example this time go notice that we're going to call this options method era pass in the custom key and the color piece of options available to you inside these fast methods fast methods some based on you know whatever data you injected so again we'll wrap that in the color they were going to create this factor variables so basically what I wanna do is add a great 20 per cent so I pass on to the number type 28 and then the % symbol which is for like here's my unit for this number and then I'm going to generate a palette where I'm gonna lighten the color by 20 % and then the other cultural darkened by 20 per cent and the light in that darkened functions those are built-in Cecil that's how they're available there as well and finally passed again into a list in return it so finally what we need to do is we gotta get this rendering from the controller so we instantiate a new class as soon prams custom color no we runner-up CSS we tried
out making HTTP requests at 0 sass syntax error file to import not founder unreadable so what happens only when you're work in a language you have to compile a render what you normally there is always a lot
and we forgot that so let's go back and
modify this because we need this load path because it needs to think in some sense it's just like a static style sheet in the asset pipeline so we're going to add in a new option to assess of some options Cologne paths and if you look at the method for were basically just in this case passing an array containing 1 directory which is ap assets style sheets include some that's rumble storm IUI file
so was try that out actually have a demo just can highlight this set of low level so what I have here
is pretty simple ever put together it's got the hello world text and I'm gonna pass in color and then it's going render that light and color as the background for Hello world and it'll make the text color world that
Suite <Programmpaket>
Atomarität <Informatik>
System Dynamics
Cloud Computing
Ein-Ausgabe
Diskretes System
Computeranimation
Cross-site scripting
Lineares Funktional
Schreiben <Datenverarbeitung>
Prozess <Physik>
Prozess <Informatik>
Kontextbezogenes System
Ein-Ausgabe
Cloud Computing
Computeranimation
Funktion <Mathematik>
Caching
Wort <Informatik>
Identifizierbarkeit
Inhalt <Mathematik>
Cloud Computing
Cross-site scripting
RPC
Web-Designer
Computeranimation
Videospiel
Web Site
Subtraktion
Default
p-Block
Biprodukt
Computeranimation
Task
Texteditor
COM
Inhalt <Mathematik>
Kantenfärbung
Tropfen
Schnittstelle
Aggregatzustand
Prozess <Physik>
Default
Volumenvisualisierung
Implementierung
Schlussregel
Kontextbezogenes System
Biprodukt
Rendering
Komplex <Algebra>
Code
Computeranimation
Hydrostatik
Gamecontroller
Kantenfärbung
Cloud Computing
Default
Subtraktion
Ortsoperator
Klasse <Mathematik>
Mathematisierung
Formale Sprache
Content <Internet>
Web-Seite
Computeranimation
Datensichtgerät
Homepage
Loop
Methodenbank
Font
Variable
Font
Widget
Datenstruktur
Bildgebendes Verfahren
Inklusion <Mathematik>
Softwaretest
Lineares Funktional
Internetworking
Schlussregel
Elektronische Publikation
Modul
Cloud Computing
Variable
Schlussregel
Mapping <Computergraphik>
Kantenfärbung
Cloud Computing
p-Block
Variable
Gruppenoperation
Statistische Analyse
Zellularer Automat
Computerarchitektur
Kantenfärbung
Kontextbezogenes System
Elektronische Publikation
Kontextbezogenes System
Variable
Computeranimation
Metropolitan area network
Lineares Funktional
Green-Funktion
Zahlenbereich
Mailing-Liste
Element <Mathematik>
Elektronische Publikation
Kontextbezogenes System
Cloud Computing
Kontextbezogenes System
Raum-Zeit
Computeranimation
Hydrostatik
Variable
Menge
Automatische Indexierung
System Dynamics
Kantenfärbung
Cloud Computing
Datenstruktur
Leistung <Physik>
Extrempunkt
Compiler
Formale Sprache
Klasse <Mathematik>
PASS <Programm>
Zahlenbereich
Raum-Zeit
Computeranimation
Mailing-Liste
Informationsmodellierung
Datentyp
Skript <Programm>
Inverser Limes
Skript <Programm>
Inhalt <Mathematik>
Zeiger <Informatik>
Maßerweiterung
Modul
Leistung <Physik>
Lineares Funktional
Parametersystem
Diskretes System
Gasströmung
Symboltabelle
Mailing-Liste
Cloud Computing
Modul
Mapping <Computergraphik>
Funktion <Mathematik>
Menge
Kantenfärbung
Cloud Computing
Zeichenkette
Hydrostatik
Hydrostatik
Diskretes System
Template
Kontextbezogenes System
Kontextbezogenes System
Quick-Sort
Computeranimation
Leistung <Physik>
Biprodukt
Cloud Computing
Computeranimation
Konfiguration <Informatik>
Klasse <Mathematik>
Mathematisierung
Content <Internet>
Zahlenbereich
Template
Computeranimation
Mailing-Liste
Variable
Einheit <Mathematik>
Rendering
Gamecontroller
Datentyp
Minimum
Hash-Algorithmus
Volumenvisualisierung
Dateiverwaltung
Skript <Programm>
Skript <Programm>
Inhalt <Mathematik>
Modul
Zustandsgleichung
Lineares Funktional
Teilbarkeit
Kontrolltheorie
Diskretes System
Template
Volumenvisualisierung
Mailing-Liste
Symboltabelle
Elektronische Publikation
Kontextbezogenes System
Sichtenkonzept
Cloud Computing
Quick-Sort
Teilbarkeit
Konfiguration <Informatik>
Mehrschrittverfahren
Kantenfärbung
Cloud Computing
Schlüsselverwaltung
Message-Passing
Instantiierung
Formale Sprache
Volumenvisualisierung
Elektronische Publikation
Cloud Computing
Computeranimation
Fehlermeldung
Demo <Programm>
Konfiguration <Informatik>
Elektronische Publikation
Menge
Computeranimation
Konfiguration <Informatik>
Übergang
Hydrostatik
Wärmeausdehnung
Menge
Last
Wurzel <Mathematik>
Betafunktion
System Dynamics
Verbandstheorie
Verzeichnisdienst
Demo <Programm>
Element <Gruppentheorie>
Volumenvisualisierung
Kantenfärbung
Computeranimation
Verdünnung <Bildverarbeitung>

Metadaten

Formale Metadaten

Titel Dynamically Sassy
Serientitel RailsConf 2015
Teil 51
Anzahl der Teile 94
Autor Fairbank, Jeremy
Lizenz CC-Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported:
Sie dürfen das Werk bzw. den Inhalt zu jedem legalen und nicht-kommerziellen Zweck nutzen, verändern und in unveränderter oder veränderter Form vervielfältigen, verbreiten und öffentlich zugänglich machen, sofern Sie den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen und das Werk bzw. diesen Inhalt auch in veränderter Form nur unter den Bedingungen dieser Lizenz weitergeben.
DOI 10.5446/30662
Herausgeber Confreaks, LLC
Erscheinungsjahr 2015
Sprache Englisch

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract When we want to offer customizability to the users of our applications, things can get tricky. How do we allow users to customize the look of the user interface while reusing the static CSS we’ve already designed? There is a way, but it is fraught with many dangers. Learn about the power of dynamically generating CSS from Sass files. Tackle the foes of dynamic content injection, rendering, caching, and background processing. In the end, we will look triumphantly at our ability to reuse our application styles to create customizable interfaces for our end users.

Ähnliche Filme

Loading...