Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Sass Map Magic41:15 with Eric Suzanne
Maps are a powerful new data type in Sass 3.3 — giving you key-value pairs without the pain of nested lists, or the clutter of variables. Maps are great for site settings, mixin arguments, data storage, and more. We'll explore maps from the insane to the mundane, and find ways to incorporate them into any web project — from sites and apps, to Sass libraries and frameworks.
Hello, world. 0:03 All right, great. 0:05 [LAUGH] >> [LAUGH]. 0:07 >> So SASS maps are not source maps. 0:12 So [LAUGH] if you're at the wrong talk, I'm sorry. 0:14 Both of these were released in SASS 3.4. 0:19 Both of these are SASS features that exist. 0:22 Both came out in the sa, or SASS 3.3 which was, I think, done just for confusion. 0:25 But source maps are for the browser, and SASS maps are a data type. 0:31 They look something like this. 0:36 Can you read that the code? 0:40 Is that legible? 0:43 Do I need to bump it up? 0:44 Good? 0:46 All right. 0:47 So, a map is a type of variable parenthesis, key value, 0:48 another key another value. 0:53 It's a pretty simple thing, and 0:56 we're going to spend 45 minutes talking about it some how. 0:58 So, you've probably seen maps before they exist in almost every language. 1:03 Their also referred to as associative arrays or 1:08 hashes, or various other things. 1:13 If you remember CSS, I don't know if any of you. 1:19 Have any of you used CSS? 1:21 >> [LAUGH]. 1:22 >> It's, it's an older thing. 1:23 It's very similar to a map. 1:25 Just a slightly different syntax. 1:29 You have a selector, instead of the variable name, and 1:30 you have property value instead of key-in value. 1:33 And then, you're looking at brackets instead of parentheses and 1:36 commas here, instead of semi colons at the end of a line. 1:43 so, a map can be exactly representative of CSS. 1:49 So one of the quick things that we can do with it 1:55 is we can just clean up some mundane repetitive things, say our colors. 1:59 We can take a color, set of color variables and put them altogether into 2:04 a single name space so we have all of our colors in one one map. 2:10 One variable. 2:17 And there's various uses to that, and we'll look at those. 2:19 Another thing that you can do. 2:23 Sometimes, arguments, or sometimes, mix-ins in Sass start to look like this. 2:25 You get 30 arguments in a mix-in because it's a powerful mix-in. 2:30 This is actually, this is what Suzy would look like if we had built it without maps. 2:34 But instead, we've cleaned it up to something like this, 2:40 where you can pass the arguments in any order. 2:43 And, all of this was made possible by maps. 2:46 So, we're gonna rush through and try to get to how we did this. 2:48 But we're also gonna, what we're gonna do, Suse is big and 2:54 complex so instead I made some. 2:57 I made a button plugin that uses similar tricks and we're gonna make that today. 2:59 So, we're gonna go through and 3:04 make buttons because it's never been done before. 3:06 Oh, this is a queer interlude. 3:10 So whenever I make a mix in or a plug in for SAS, one of the things that I do is 3:12 try to remember that the web is queer, and developers are queer and sites are queer. 3:18 Everything is different, everything has different requirements. 3:26 So, I'm not going to make you a framework that does it my way, because that's dumb. 3:29 You don't want to build my site. 3:34 So, if we're gonna make a button plug-in, we're going to do it the queer way. 3:36 We're going to find a way that you can make your buttons. 3:41 So, that's the goal. 3:44 These are the buttons I'm gonna make, and 3:45 having said that we're gonna let you make your buttons. 3:47 I stole these from Alex Wolf roughly. 3:50 But I had tried to build a system for it that you can easily adapt and 3:55 very quickly put your own styles into it. 3:59 So, in the end, it's gonna look something like this. 4:06 We'll have various options, and we can determine what these options are. 4:08 I've decided to put it into style. 4:14 I'll actually change the name of this one later. 4:17 style, shape, display, color, icon. 4:21 Size and then presets, and then I named some presets over here and 4:24 said what I want them to look like. 4:26 so, that's how it's gonna work, 4:29 but first, we're gonna just look at how you deal with maps. 4:33 This is the simplest map. 4:37 It's an empty map, it's just two parenthesis. 4:39 SASS will treat this either as a map or as a list. 4:43 Just the parentheses. 4:47 Here's one with some keys and values in it, pretty simple. 4:50 Here's two maps. 4:57 And, if we want to merge them, we just say, 4:59 tonight is the merge of map magic with blend conf. 5:02 And, we get this merge map. 5:06 And, you'll notice both of those maps have the hello key. 5:09 And, once we merge them, the second one takes precedence. 5:16 So, the key from blend conf overrode the key from map magic. 5:21 So, oh, the audience is no longer far away. 5:27 So, we should change that. 5:30 We can edit the value in a map also using Map Merge because there is no map set. 5:32 Some people have complained about this. 5:38 I built a map set and it turns out to not save you any time, or help in any way. 5:39 So, you can just use Map Merge. 5:44 You can merge in a new map that has a similar key, and 5:46 that's the same way you can override. 5:50 So, the audience is now smart and attractive. 5:53 That's new, lucky you. 5:55 >> [LAUGH]. 5:57 >> You can also add new pairs the same way, because again, there's no map set. 6:00 So, we can add the month of September to our map using Map-Merge. 6:04 There is a Map Remove. 6:09 So, if we need to take out key value pairs, we can do that. 6:12 We just pass in the map and the key that we want removed. 6:17 We can access pairs with map.get. 6:21 Just pass in the map and the key. 6:25 And, there's various other things we can do. 6:30 We can get a list of all the keys. 6:32 We can get a list of all the values. 6:34 We can check to see if the map has a key. 6:37 And then there's also some, some of the list functions that exist. 6:40 If you look at the SASS website, 6:44 you can play around some of the list functions work with maps and vice verse. 6:45 So, it's worth playing around and seeing what else works. 6:50 But, this is just kind of a quick overview of what exists. 6:53 And then you can maps like this. 6:57 So, this is basic each loop from SASS, if you've ever used that. 6:59 It loops through a usually, a list, and 7:05 then a list, you would only get one value out of it for each iteration of the loop. 7:08 With a map, whoops. 7:14 Where did I go? 7:17 There we are. 7:18 With a map, you get two values out. 7:19 You get the key and the value. 7:21 And you can use it like this. 7:24 And, we've printed out CSS that looks like our map. 7:25 You can also use maps as arguments. 7:31 So I had to add this slide because somebody asked me about it the other day. 7:32 You can pass in the map as an argument to a mixin and 7:36 then you can mess with it in there. 7:40 You can also use variable arguments, which is adding those three dots. 7:42 And then, if your map keys match the argument names, 7:48 it will just automatically fill them in. 7:54 So, that can also be useful. 7:58 [BLANK_AUDIO] 7:59 And, really, you can do anything for a key and for a value. 8:02 so, you can have math as a key. 8:08 And actually, I found that map.get OMG stop eight 8:11 will match that math and return the value. 8:14 You can also use lists. 8:20 You can use a snowflake or any other little glyph you want. 8:21 You can even use a, a map as a key to another map. 8:29 And I dare you to find a use for that. 8:33 I've tried, I can't find any good reason to do it. 8:35 But, it seems like fun, so 8:40 you should, you should definitely figure it out and let me know. 8:41 Oh, I was going to get to buttons. 8:46 Okay. So, we'll do that now. 8:49 so, Button Components. 8:52 I'm gonna do this The Yack Shaving way because that's how I work. 8:53 So, we're gonna start with icons. 8:57 And then we're gonna deal with colors. 8:59 And basically, we're gonna be, we're gonna build a plugin for 9:01 each of these things cuz that's how I do. 9:05 And so, some of these, 9:09 even if you don't want buttons, you might still want icons on your site. 9:10 You might still want to use some of the colors stuff. 9:14 So hopefully, the various pieces of this will be helpful to you whatever 9:16 you're doing, even if you don't care about my plugin. 9:23 So one of the things that I've often seen maps used for, is cleaning up and 9:27 working with font icons. 9:31 This is sort of the basic for a font icon, we need something like this. 9:34 I'm just going to clean it up with a placeholder selector so 9:39 we have this available. 9:42 That's code that will make our font icon work. 9:44 And then, you have some long list like this of all the glyphs and their names. 9:46 But it's not very easy to read. 9:54 It's not very easy to maintain. 9:55 If you wanna change a name, 9:57 if you wanna find something in the list, if you wanna add to it. 9:59 So, I cleaned that up into a map where we just have the name of the icon, 10:02 and then the glyph that we're pointing to. 10:08 If you've used font icons this is, this is how you access them. 10:11 So the,n we can just run through a loop. 10:17 If we want that same data-icon output, we just run through a loop. 10:19 And we extend that icon placeholder we had. 10:25 And, we, for each for each name and 10:31 glyph if data icon is that name, we get that glyph. 10:36 And we've just output all of that repetitive code but 10:41 from a simple math that we can edit. 10:45 Yeah. 10:48 Oh, yes. 10:54 So, that should be icon to match those. 10:56 Good catch. 11:00 And please feel free to stop me and ask questions along the way. 11:01 I'm gonna kinda try to plow through this cuz there's a lot to go through. 11:04 And, there's a lot of code in here that I'm going to kind of skip through, and 11:06 you can go back and look at it later. 11:10 All the slides will be online. 11:12 Because I'm going to try to hit concepts and just show you that we can do it. 11:14 SASS is turning complete. 11:21 So, anything you want to do with SASS, you can do with SASS. 11:23 So, you should try. 11:27 Right? 11:28 You probably should try. 11:29 so, here's a little function to help us clean it up even a little bit more. 11:33 The function just takes a name of an icon does the map.get and returns the glyph. 11:38 So then, we add that. 11:44 You can see the change in our loop. 11:47 Instead of map.get icons name, we just call our function, and we get it back. 11:49 Okay. So, that's a little bit simpler. 11:55 We can also build a mixin around it that does all the extra things. 11:58 And then, just call the mix-in, instead of putting before content and doing all that. 12:02 Just have a mix-in. 12:10 And this way, we can call our icons anywhere we want, on the fly. 12:11 Just say, oh, I want an icon here and it gets added. 12:16 so, here's a sample of the data icon working. 12:21 Span DATA-ICON check mark. 12:26 And there it is. 12:29 Or, we can do it in SASS only. 12:30 title, include icon check mark, and it pulls it in. 12:33 So, both of those work, and we have icons. 12:38 Great. 12:42 Oh, so, let's do something a little more creative with it. 12:43 Lets say we want to have new names referencing old glyphs in our map. 12:44 We can do this. 12:53 We have Escher referencing skull. 12:55 We have Goodell referencing Escher, Bach references Goodell, and 12:57 we've got Kevin Bacon at the end. 13:02 And so, now we can adjust our font icon function just a little bit. 13:05 We had a little bit of recursion. 13:13 So when we get an, when we get an icon 13:15 we just check to see if that icon is the key, is another key in the map. 13:20 And, if it is, we call the same function again. 13:24 So, we just recursively call itself. 13:28 and, at the end, Six Degrees of Icon, we call for Kevin Bacon and we get the skull. 13:33 [LAUGH] So, that's handy. 13:38 [LAUGH] We also, 13:42 we had in that function where did we have it? 13:46 Oh, it must have been in the mix-in. 13:51 We had in the mix-in a content block, so we can also pass in 13:53 arbitrary CSS that we want applied to our icon. 13:59 So, great. 14:04 We now have a five font icon toolkit that we can use anywhere else we want. 14:06 And, we will use it in our buttons, later. 14:11 Let's look at colors. 14:14 Colors is gonna be basically the same thing. 14:16 We take our list of colors and we simplify them down into a one map. 14:18 So, they're no longer taking so much color, or so much name space. 14:25 We don't have to prefix them all, they're just there. 14:28 We use, oh, here, we're gonna try recursive colors. 14:31 Now, this is a little bit more difficult because we get some errors. 14:35 We can't adjust a color in the same map. 14:41 We can't run this color adjust function. 14:46 Adjust hue. 14:49 Because this map doesn't exist yet at the time that we're calling the function. 14:51 Does that make sense? 14:56 Right? 14:58 So we, we can do the same recursion otherwise. 14:58 But, in order to do this, we have to find other, some other solution. 15:02 So, my solution and I'm open to other solutions, if people have ideas. 15:06 My solution is this. 15:11 I'd document what I want to change. 15:12 so, accent should be the brand color, adjusted 80, 180 degrees. 15:17 And then later, I have a color function that actually does the math. 15:23 It, it goes and checks and it runs the adjustment. 15:27 Then, once the map already exists, right? 15:31 So, that should work. 15:34 So, that color function looks like this. 15:36 Just going through it it starts by parsing the arguments. 15:40 Going through and getting the color, and 15:45 then checking to see what is the base color, the first part of it. 15:48 And, what is the adjustments that we want? 15:53 And, having those it does a recursive check on the base. 15:56 Just to see if we need to follow down through farther. 16:03 So, it can do all of these 16:06 adjustments recursively through as many connections as we wanna make. 16:09 And then, it apply, applies the adjustments at the end, 16:16 once it has it's base color figured out, and returns the color. 16:19 So, we've got it, it works. 16:23 So it's the, I would say, 16:26 it's the one downside of moving your colors into into a map. 16:27 Is this not being able to reference each other, 16:31 unless you have some special trick to do it. 16:34 but, it really does clean up the name space. 16:37 So that's my, that's my color plug-in. 16:40 And we use that at Odd Bird. 16:43 We use the icons at Odd Bird, we use the colors at Odd Bird. 16:45 We do something very similar for sizes. 16:48 Again if you're dealing something like a modular scale it might look, 16:51 your sizes might look something like this. 16:56 I mean, we try to have consistent sizes across the site. 16:58 Just enough to do what we need. 17:00 So, you're maybe setting your base size and your ratio, and 17:05 then calling some functions and setting all these. 17:09 So again, we're just cleaning it up first, so there's that. 17:14 But then I decided to add a named map of ratios. 17:21 So, that I could call any ratio I wanted by name without having to think 17:26 about what the actual math is behind it. 17:28 so, my ratio is now, instead of being five over four, it's just major third. 17:32 And that map does a great job of storing that information, and 17:38 we can grab it all the same way. 17:40 So now, I'm down to just a base size, a named ratio and my list of sizes. 17:42 Again, we're gonna have this problem. 17:49 Oh, no. we don't have the problem here 17:51 because we can do a get.size that just checks the map and returns a size. 17:54 And we can do a getRatio that checks the ratio map and returns what the ratio 18:00 should be and then we can wrap all that in a size function that gets the size. 18:05 Checks to see if it's a unitless number, which means that we want 18:11 it to be applied on the scale instead of passed through directly. 18:15 so, that means I can pass in a u, a united number, and 18:21 it will just go directly through. 18:24 So, I can say size one m, and it just works. 18:26 That's not really useful at this point, 18:30 because there's no no math happening to it. 18:31 but, it could be, could be useful later. 18:36 If I do pass in just a one or a two, it treats that as part of my modular scale. 18:39 And, gives the ratio, and does the, does the math and returns my size. 18:44 Great. 18:51 Done. 18:52 Any questions on any of those? 18:54 So, those are the sort of the basics that we use all over the place, and 18:55 then I'm gonna start to get into how we actually build this keyword syntax. 18:58 Does anybody have questions? 19:04 All right. 19:08 So let's deal with display. 19:09 Let's say we want just simply, 19:12 we want to be able to say that our buttons should be block, in line block or in line. 19:13 In lines really not going to be that useful, but block or in line block. 19:17 Something like this, we'll, we'll want to include a button that's block, 19:22 we'll want to include a button that's in line block. 19:27 So, our shorthand in the end is going to look something like this. 19:33 A button can have an icon, a size, a color, a display, shape and preset. 19:38 We're dealing with display right now, but we want to be able to 19:42 have these short hand keywords that we just pass in in any order. 19:46 And then, once it comes in, we'll parse it. 19:52 So, we're gonna need a parse function. 19:56 They can take something like this. 19:59 Large, flat, pill, check mark, inline, black. 20:00 And turn it into a map. 20:04 This is a really useful way of them storing the information of what was passed 20:07 in, sort of as, individual arguments. 20:11 So. 20:17 We start by making a map of just, all the options. 20:18 And this is how Susie does it, as well. 20:23 This is just all the options that can be passed into our mix in. 20:25 So we start by, this is, the setting that we want to change. 20:29 And these are all the keywords that apply to that setting. 20:35 Right? So for display we've got inline block or 20:39 inlineblock and then we have a parse function. 20:42 This is, this is really useful. 20:46 I mean we just have this one function that I use in all the plug-ins and 20:47 it just runs these loops. 20:52 And if you passed in a map it just passes it back directly. 20:54 So that means you can pass in a configuration map instead of 20:59 the keywords if you want, if you like that system better. 21:03 You can just set up a few maps, pass them in, and you're ready to go. 21:05 But if you do in pass in with shorthand it loops through it. 21:10 Well, it loops through. 21:17 I tried them in the forehand. 21:18 If that item is a map, 21:21 it just adds that entire map to your output so you can even do a mix. 21:22 You can do a few key words and a map. 21:28 If it's not a map, it checks for it in our options and if it is in the options. 21:33 And it adds it to the map for that option. 21:40 So each keyword is just checked against the map of options and 21:44 assigned by the right config. 21:48 Is this making sense? 21:52 I know this is very heavy. 21:53 So what we've got is this. 21:56 A button mixed in. 21:58 That just parses our input, and then, all we have right now is display, 22:00 so we just output it directly, display, map get style display, 22:06 so we're just checking the parse map to see what our settings are. 22:13 Cool. 22:19 So, let's deal with shapes. 22:20 These are the three shapes that we're gonna have yeah. 22:22 [BLANK_AUDIO] 22:24 Yes it returns null when it doesn't have the key and will actually get to a place. 22:31 Do the [INAUDIBLE] have this. 22:38 No. yeah. 22:40 We'll get to a place where we actually use that to our benefit. 22:41 The question was, what does map get return if it doesn't have a key? 22:45 And it returns naught. 22:48 We're just gonna make three shapes. 22:52 So we add those to our button options. 22:54 We have shape round, square, and pill. 22:57 And we just have to. 23:01 We're gonna make a, a button shaped function. 23:03 That takes our shape argument and turns it into CSS. 23:07 It's just picking a size here. 23:12 For the border radius, basically. 23:16 And it returns that and we can get border radius button shape of that input. 23:19 So, just adding one setting at a time to our Buttons. 23:26 Let's add Styles too. 23:31 We're gonna play with these three styles. 23:32 There's the Flat Button, the Glowing button, and the Outline Button. 23:34 And for these, this is where you really had to work in your own personal config, 23:39 so you can create new style options very easily and quickly on the fly. 23:46 But first with our three, we have flat glow and outline as our key words. 23:52 And that's all it takes to add them to the parser. 23:59 And then we're gonna add here, let's get our color sizes and 24:04 icons working while we're at it. 24:08 So, we added to our parser. 24:11 It's dynamically checking our icons. 24:13 Colors and size maps that we created earlier. 24:16 And just adding all of those keywords that we created for icon sizes and colors. 24:19 And those keywords are just automatically being added to our button options. 24:24 And then we parse with that in mind and return our input. 24:30 So now. 24:36 We have a little bit more complex mix in. 24:37 It's using our button parts so that it can check color, size, keyword, 24:40 shape I mean color, size, icon, shape and block, or display. 24:44 And we're gonna create an output map instead of trying to 24:52 output these all the way. 24:56 We're gonna create an output map. 24:57 That we then check here. 25:00 This runs all the simple things, display and border radius in this case. 25:06 And then what we do is we check for if a function exists. 25:11 Have any of you used this before? 25:15 It's also a fairly new feature in Sass. 25:17 Function exists lets you check to see if the name that 25:20 you're using is a function anywhere. 25:24 So we've just said, all right. 25:26 Any style you pass in, 25:29 we're going to check if there's button dash that style as a function. 25:31 So, if you want to create a new style, you just create a function for it. 25:35 And add it to the list of available styles and then this checks to see if it exists. 25:39 And if it exists, we call it. 25:47 So, this call function is the other piece of that, 25:49 that says we can call something that we don't know the name of. 25:52 And then we'll render, render the output, which. 25:57 Let's actually skip to rendering. 26:01 So this is rendering. 26:05 I use this function all the time. 26:07 This just takes a map that looks like CSS and turns it into CSS. 26:08 So we can create these output maps that are just CSS in map form. 26:13 And we can do any manipulations we want. 26:18 And then when we're done manipulating it, 26:20 we just pass it to the render function and it prints as CSS. 26:22 So that's really handy for this. 26:27 Here for button flat I've created this map. 26:31 It's just creating a background color, a contrasted foreground color. 26:35 Oh and it doesn't need that border radius, we already handled that. 26:41 So I can use the same thing for button outline, button glow, they just use their 26:46 own logic, create the CSS that they would want and pass back that map of that CSS. 26:50 And then we render it and we can do something like this. 26:56 So if our output map looks like that has display and 27:01 border radius we render and it's just the CSS version of that. 27:05 All right, we actually want to deal with nested output for 27:10 icons because we want our output map from icons. 27:15 Has to have an extend over icon placeholder, 27:22 it has to have content margin and it, that all has to be nested inside of an, an, 27:25 apparent selector and before, something like this. 27:31 yeah, so this render's nested. 27:39 Let's look at what it. 27:43 Yeah. And before, and then we have a, 27:45 a nested map that we've created. 27:47 That comes in here, that has the icon. 27:49 So, I have this in quotes because it gets confused by symbols. 27:52 And, and the semi, and the colon there. 27:57 So you just put in quotes, and it's a string, and we can use it for the output. 28:02 So, here's a beefed up render that just 28:07 checks for each key value in, in the CSS map that we're looking at will. 28:13 If the type is another map, then we consider it a nested block and 28:21 we output it as a selector and then whatever is inside 28:25 recursively calling the render function so it can nest this as far as it needs to. 28:31 And if it's not we check. 28:38 We wanted a way to do extends in this. 28:41 So we checked for the special cased property, extend. 28:43 And if is an extend, we use extend instead of doing the property value pair. 28:49 There we go. 28:55 The only thing we can't do this for 28:56 is mixins, which is one, you can't call an unknown name mixin. 28:58 On the fly so, but we can do it with extends. 29:03 We can do it with selectors. 29:06 Where are we? 29:12 All right. 29:14 So, we've seen this. 29:15 This is putting together the output, checking for the style output. 29:16 And merging it in with that. 29:20 So we could even override some of our basics in the specific of the style if we 29:22 want to, just with map merge. 29:26 So now we have this. 29:28 We can do small, medium, and large. 29:30 We can do different icons, we can do different shapes, and 29:34 we can do glowing, flat, and. 29:36 outline. 29:40 Cool. 29:43 So now, let's take that and make it so that we can have user defaults, 29:45 system defaults and a few presets that we name. 29:51 And we'd just call the preset instead of 29:55 passing in all of the arguments every time. 29:57 This is, every time I build a system like this I get complaints from 30:00 Claudina that it's too powerful and people are gonna do too much thing, 30:06 too many things on the fly. 30:09 What we really need is a way to have named presets so that there's just four of them. 30:10 And then we just always use those four so 30:16 I built that in for Claudina so Claudina's never seen this button thing before. 30:19 I built it just for this because I like shaving the axe. 30:25 But she'll tell me afterwards whether I, whether I did it right. 30:29 I'll make changes later. 30:32 So for global defaults I'm just gonna do this just to map. 30:35 Of, for each setting, what is the default value that I want to use? 30:39 And this will always be based on whatever I'm shipping the plugin. 30:44 Right? 30:47 I've created three styles, you can create more. 30:48 But for here the default will be one of mine. 30:51 And then I have a separate map for user configs. 30:56 So the user never, looks at this map, never changes it. 30:59 Instead of having a variable that is set to default that the user overrides, 31:02 I have my variable that's all the system settings. 31:06 And then I give you your own variable that you can do whatever you want with. 31:09 Where you create your override settings. 31:13 [BLANK_AUDIO] 31:16 And then, instead of using map get I use button get. 31:19 Which is my special way of saying we're gonna check. 31:22 I can pass in a map there if I want, but the default is just pure user config. 31:26 And I just say what setting I want to get. 31:31 And first it checks the map you passed in. 31:33 And if it returns null, you can just use this or, map get this, or 31:36 if there isn't anything, go onto the next one, and then it checks the user 31:43 config settings, so first its checking the local settings passed in, then it's 31:49 checking the user config, and if it still doesnt have anything it checks the. 31:52 System config. 31:56 So in the end we can go down through a list of as many of these as we want. 31:58 And return in order of the hierarchy wherever we find the value. 32:02 All right. 32:11 So let's name some presets. 32:12 These are call to action. 32:16 And then I have a submit, a secondary, an alert, and a whole list of social icons. 32:17 So I"m gonna name some presets like this, 32:23 using another map, because I mapped all the things. 32:29 We have a submit, we have the call to action, 32:32 we have secondary alert and social. 32:34 And we just within each one we say what are the, 32:39 the button setting that we want for that one. 32:42 We can even reference within the map. 32:47 So, secondary can reference submit and just make a few changes to it. 32:50 Alert also references submit and makes a few changes. 32:55 So we can do, one basic setting and 32:58 then adjustments from there as we want little changes. 33:00 And we just change our button parser to be recursive, here. 33:06 If it finds a preset in what you passed in. 33:13 It takes whatever other settings you passed in and 33:17 merges, checks the preset, builds the preset first and then says oh, 33:20 you made these adjustments to it so we'll add those adjustments to the preset. 33:25 So it's just recursively checking back through the presets, 33:30 building each one and then adding your adjustments at the end. 33:32 Omg, that's, that's really, we've now, 33:39 built that and you can add as many styles as you want, you can very 33:44 easily add different shapes, and any, any time you're adding anything to the parser. 33:49 that's, you just add it to the, map of key words, and 33:56 then add your own logic where you need it. 34:00 And it all happens. 34:02 Whew. 34:06 Did we make it through? 34:06 We made it through. 34:07 We now have a button plug in 34:08 [APPLAUSE] Are there any questions on that? 34:18 Yeah. >> Do you have a, 34:22 a map of button options and then button defaults? 34:23 >> Yeah. 34:26 >> You build button defaults by [INAUDIBLE] list? 34:27 >> I could. Yeah, you could do that. 34:32 >> [INAUDIBLE] So then [CROSSTALK]. 34:33 >> Right. 34:35 So then whatever you set up in your button options. 34:36 Yeah you can definitely do that. 34:39 Did everybody hear that? 34:41 That was could you just loop through the first setting of each or the first 34:43 keyword in each setting, of your button options to creat your button defaults. 34:48 And you sure could. 34:53 Anyone else? 34:56 Yeah. 34:57 >> At what point in time [INAUDIBLE]. 35:04 >> [LAUGH] Well, it depends if you're me, or if you're reasonable. 35:05 [LAUGH] >> Do you get these problems 35:07 from everything that you do? 35:11 [INAUDIBLE] >> No. 35:12 I use this process. 35:13 Okay, so the question is, at what point is this to much work for a project. 35:14 I, I really like playing with these things, so I do a lot of 35:20 this on my own time, just because I want to see what I can do with that. 35:23 In terms of a specific project, it's usually, we're doing client work at 35:28 Odd Birds so we're going from one client to the next often. 35:31 And I start to build these, if I see that we're doing the same thing over and 35:36 over again. 35:39 Across our projects which is why I haven't really built a buttons one before. 35:40 I mean this might be useful to me but buttons weren't my top priority. 35:45 Colors, icons, and the smaller pieces I had built because they're 35:50 fairly simple and they all use the same basic techniques. 35:55 But it's judgement call. 35:59 [NOISE] Oh yeah. 36:01 So, I was just gonna add another, I was thinking of doing that, but 36:06 I ran out of time. 36:09 I was thinking I'd just add a state or a, a pension. 36:10 Some you know the hardest part of this is figuring out good names for all your. 36:17 Settings in all your C words. 36:22 But, yeah, just add a state key to the options map, add whatever states you want. 36:23 And then in the button mixin, you have to look at that value, and 36:30 then do whatever logic you want to for each output. 36:34 Add it to the output map, pass it to the renderer. 36:38 And you've got what you need. 36:42 So if you want states to use to be 36:43 user configurable you could do the same function call so 36:48 that any user could add their own state, and then it would be. 36:54 It could take you some work, maybe, but it would be exactly the same things. 37:01 You'd just be doing the same tricks we've already looked at to do that. 37:04 Yeah? >> [INAUDIBLE]. 37:10 Do you, like. 37:14 [LAUGH] >> I. 37:18 So, the question of, of how, like, at what subjects of a project do you 37:22 decide whether or not to make one of these things and to start building, sort of, 37:26 your own tool kits and tools. 37:29 I think it's really like. 37:32 You just start now and you build them for yourself. 37:33 It's like your, your special set of tools, you know. 37:35 Carpenters and people that like have their tool, their drill, right? 37:38 And so maybe, you don't have the time now because of constraints, but 37:43 it's just something that you start having. 37:47 And like Eric said. 37:48 We build it, and then we start using it, and we keep refining it and 37:50 it keeps coming with us, and it's things we no longer have to create or 37:52 think about doing and it becomes ingrained in our process. 37:56 >> I guess [INAUDIBLE] 37:58 >> That too is sorry, this is turning into a debate. 38:00 >> [LAUGH] >> You know whenever I'm writing something 38:04 I'm always trying to keep in mind if ever I'm ever no longer in this position. 38:07 >> Right. >> Who's going to take it from me. 38:10 >> Yeah. >> At what point in 38:12 time is this too complicated for somebody else coming in and having to learn this. 38:13 Its entire backlog. 38:15 >> Right. 38:17 Well the goal of, 38:17 the goal of my tools is that hopefully we can ignore most of this in our code. 38:19 We just pull it in through a gem. 38:25 We have a little our own toolkit at Auburn. 38:27 We just call it accoutrements and we throw little things in 38:29 there that aren't really big enough to become a plug in but are. 38:32 Useful tools that we have, and hopefully if they're simple enough and 38:36 explanatory enough, in the interface of them, sort of like Compass, you wouldn't 38:41 want to go back into Compass and see how everything is done necessarily, but 38:46 if it works and it's fairly understandable how you use it. 38:51 And you can look at the code and 38:56 it makes sense in the use, then hopefully someone taking over the project can, 38:57 can do that without having to look back at where I was doing recursive loops. 39:03 >> [INAUDIBLE]. 39:06 >> Yeah. 39:10 [BLANK_AUDIO] 39:10 It's a, it's a good reason to have a Claudina on your team who yells at you and 39:19 says Eric, that's a really dumb thing to do. 39:24 Why are you wasting time on it? 39:27 Can we just have basic colors? 39:28 And then you say no and you make it anyway. 39:31 >> [LAUGH] 39:36 >> [LAUGH] so, the last thing in here, we have our name, 39:37 presets, I wanted to just loop through the social buttons and create them. 39:43 And actually one of the cool things about the way we did this. 39:49 Is that since it's checking each key word and 39:52 then checking each map if we have keywords that 39:53 are same across multiple maps we can call them with a single keyword. 39:57 So if we set up colors and 40:01 icons that are all named after these social sites we just do the loop once. 40:03 Pass in that we want a social style button. 40:09 For a specific site, and it outputs, BOOM. 40:12 There they are, in the right colors with the right icons. 40:16 So it's, the, the downside of that is now we have these name, these separated name 40:19 spaces that we created, are getting merged in this plugin. 40:24 Which can be a problem. 40:29 But it's also potentially a feature. 40:31 I just thought that was an interesting thing after I built it that oh, 40:35 it was interesting to do this with Suzie because when we started out we 40:39 knew we wanted to simplify and get some things. 40:44 And we started doing it without maps, and then maps came out. 40:48 We added maps, and we got ten new features that we didn't expect, 40:50 just because we had implemented with maps. 40:55 And suddenly everything was easier. 40:58 So it's fun to play with, creating things like this, and 41:00 then using them for a while, and 41:03 saying, oh, this actually does three more things than I thought it would do. 41:05 Thank you. 41:08 [APPLAUSE] 41:11
You need to sign up for Treehouse in order to download course files.Sign up