Good morning, and that hopefully woke you up as much as it woke me up. I'm so excited for Sunday, you guys. So welcome to this talk, which is called that, which is a mouthful, and it was originally shorter than that, and then I had Sam start to talk about singularity, and now it's longer than it was, and now it's ridiculous. So this is kind of how I'm thinking of it right now. So the mic, oh, that's better. So yeah, this is the right way to do RDBD. There's no other way. Questions at the end. So this was probably two years ago at DrupalCon. Somebody was giving a talk about responsive, and posed the question to the audience. So is responsive design hard? Again, I'm trying to shout into the mic now. All right, so it's responsive design hard, and I thought it was kind of a trick question, because people were hesitant. I don't want to seem dumb. So I stood up and said, well, yeah, it's design. So yeah, that's me. And the thing that I want to keep in mind, and this is a talk about technique, but the reason that I wanted to say this now is that all of these techniques, they go to serve the greater good of the design of the project, the experience of the project. So the techniques might be somewhat difficult, but you guys are going to learn something, or you already know it, and you're going to learn something at this session. So 45 minutes from now, you'll know something hopefully that you didn't know. But it's the process of thinking things through and designing. That's always hard. It's always going to be hard. So who are we? I'm Mason Wendell. I'm a senior front-end developer at NBCUniversal. Twitter and most other places I'm coding designer, but because GitHub doesn't make it easy for you to change your handle, I'm Gennari Mason. Do they change that? Soon, I will be the helping coding designer everywhere. Yeah?  I'm a co-organizer of Team SAS, along with my friend Sam here, and some very other wonderful smart people. And where I live in Philadelphia, I organize the Philly SAS Meetup and the Philly RDB Team. Good morning. I'm Sam Richard. I am also a senior front-end developer over at NBCUniversal. I am Snuggag on Twitter, GitHub, generally speaking, the Internets. And I'm the co-organizer of Team SAS and the upcoming SAS conference. So if you're interested in SAS, follow Twitter, and you will get... you'll see fun announcements next week. So before we get started, let's get a few things straight. Everyone, hold up your hand if you own a smartphone. Hold up your actual phone. Hold up your actual phone. Awesome. Keep it raised. This is participatory. I do have mine. Lower your phone if and only if. You have the same device, make and model, with the same operating system as your neighbors. That's what I thought. So to get started with this, we will be working on the premise that you are building device agnostic, because if you design for specific devices, you're divisist. But because responsive web design, it's not about current devices and known unknowns. It's about future devices and unknown unknowns. Now I'll sit down. What's the right way to do things if we're not targeting devices specifically? We start with content first. Probably everyone in the room knows who Jeffrey Selman is, and I think he started to talk about this when he was redesigning his blog. But it's something that I've found in my work that it's actually kind of hard to design something, and so you know what it is you're designing. And since we're working on the web, and everything on the web is content, with very rare exception, it's a good idea to know what the content is. So start writing it. Start understanding it. Get a feel for what the flavor of the content is if you don't have the actual words and images. So we do that, and then we design for our most constrained device or system that we can come up with, and that's usually the mobile phone. It might be something new in a few months. But for now we're talking about mobile first, and I'm not going to belabor that point beyond that. We're going to use web standards. We're going to use best practices. We're going to listen to our industry, and we're going to talk to our industry to make sure that we're all moving in a really good direction. I don't know what phones you guys have. I don't know what device I'm going to have soon enough. So we're going to try to anticipate. We're actually not anticipating. We're going to try to just assume that the web is the web, and we're going to meet you there. Like good little folks. So what else do we do? Why are we here in this particular room? Well, we know SAS, and SAS is the key to writing CSS the right way. Because this isn't a beginner course, a beginner session, I want to get set a couple of ground rules. So if you're working with SAS, and you're in here, I'm going to assume you know about variables and nesting. If you don't, please don't go. They're not too hard to pick up, and you pick it up as we talk, but we're not going to go over exactly what's going on there. You've used some mix-ins, kind of the same deal. The things that we're talking about are just mixed-in packages. Hopefully you've tried Compass. Compass is, we're not going to get into the specific functionality of Compass beyond its ability to import extensions, but Compass has a lot of really great features, especially for writing CSS 3. So let's learn some SAS together. We're going to start off without any of the special packages, just some vanilla SAS for writing media queries. And I want to talk about breakpoints and I'm going to... So everyone's probably heard the term breakpoints, and it's probably not too crazy what tweakpoints might be. But I think of it in terms of when you've got large chunks of stuff that you're trying to move and you're reacting to screen dimensions, perhaps. So you've got a layout going from two columns to three columns to six columns to 28 columns, or whatever it's going to be. I would think of those as large changes, big breakpoints. But to try to illustrate the difference between that kind of responsive web design and massaging little details, I think the term tweakpoints makes sense. So there's a reason I don't like writing things this way. And that's the context of what I'm trying to change when I'm writing that. So I've got here two selectors, one for menu and one for subnav, and we're changing some padding when we get to a 500 pixels wide. And what I'm actually trying to do in this example here is change something within the context of either of those selectors. So under the selector of menu, when we get to a thing, I want to do something else. Same thing with subnav. So when I'm writing this, when I'm watching this, I'm watching that padding and the eight other characteristics on the CSS that I'm changing in the real world. And that's all in the context of menu. If that would split up so the menu was 200 lines above the media query for menu, I would have a hard time visualizing that as I'm writing. And so what SAS gives you the ability to do is to nest your media queries inside your selector to put it in the context of that selector. So one level nested from menu is our media query, and that's going to compile out to CSS that looks just like this. And this is a lot easier to write and to visualize than this. Especially when you get into complex selectors and complex media queries. So is it a problem that we're breaking up our media queries into these fine-grained things from a performance perspective? No, it is not. There have been tests done. It's not going to affect the speed at which a browser can interpret the CSS. It's not going to affect your download size by any significant amount, especially if you can't compress your CSS, which we all are, or should be doing, Drupal certainly does that out of the box. So don't be scared to write your media queries in a granular way. It'll make your life a lot easier as an author. So what breakpoint? Sorry. Breakpoint is the outcome of a little bit of frustration I was having writing media queries and that I was writing a lot that looked the same. Again, I had recently written an article on SAS and how you can use SAS to make sense to make media queries run a little bit more efficiently, but I thought that the logic that I had worked into that was a little bit lacking. So I started to play around with assigning breakpoint variables, breakpoint values to variables, and it saved my bacon on that project and actually opened up a lot of cool things. And I showed it to Sam and Sam jumped on and kind of helped out a little bit. Barely committed a project. Still a little patch. So why would I want this? Why do I do this? I started off, like I said, just to kind of put a value to a variable and be able to pass that around. And I'm writing a lot of men with media queries. And so I said, OK, well, how about I just set this one value, the number of the men with media query to a variable? And that's pretty cool. It simplified my little ones, and then I abstracted that a little further in the extension so that I could have that same kind of simplified syntax for complex media queries, because I don't just write men with ones just mostly. And then I found that I was assigning those meaningful names because I can't just call it breakpoint one, two, three, four. That's kind of boring and not helpful. So I got a name based on why I needed a media query. And then this was the unintended consequences. I'm now managing my media queries by their purpose and by their context. So actually, I'll come back to that in a second. So if I've got a media query that I'm writing because my menu at one state is so long and then another state is so long and I want to do something else, then I can have that be assigned to a name as a variable, and I can have other things kind of trickle down from that effect. So if we're going to start using breakpoint, this is where we go. That's on GitHub. And these slides are online. I'll put the link in the last slide so you can go and check all that out. And these links work. So on your command line, this is how you would use any compass extension, by the way, so this is going to go for a lot of things. So gem and solve breakpoint in your command line. Require breakpoint in your compass.rb file, and that's the file where you configure your compass project. There are a lot of other configurations that go in there.  So let's get on to getting started with breakpoint. Just hands up, who knows when to break the movie? It's good. Okay, cool. So less than half. No, that was like 78% of people. That's how I saw it anyway. Point break the movie. 1991 class at Patrick Swayze, Keanu Reeves. Look it up. 100% pure adrenaline. All right, cool. So this is the basic use of breakpoint. That variable at the top, basic 500 pixels. I don't know if you can read the great comments very well on the screen, but that is the breakpoint variable. That's as simple as it gets, and that's what I use most often. So Johnny Utah is a character in point break. And his default color is coffee. He looks like coffee before anything cool happens. And then, once we get to 500 pixels, he's the color of badass. So that's how you use breakpoint, and it just compiles like hopefully you would expect it to. Just makes him in with MediQuery. It's pretty simple. The real benefit there is that we've given it a name. When it gets more complex, that benefit is compounded. But one of the other cool things that we can do is we can start to be a little bit more accessible without any extra effort. If somebody is, for whatever reason, changes the default font size on their phone or on their device, whatever, your pixel-based MediQueries will blow up and be not what you would expect it. If you use M's, and I'm talking about device M's, that's always going to be based on a 16-pixel value, then when they change their font size on their device, on their browser, that value will then be usually what you intend when it actually renders out. So all I did was change that as variable, breakpoint to M's, and set that to be true. And that converted my 500 pixels to 31.25 Ems. And if you think that's easy to calculate in your head, I think you're a very, very smart person. Good for you. It's not for me. I'm very dumb. So I think I've belabored this point. So why, again, is this cool? This is what we had written before. We had those two 500-pixel MediQueries. But what we were doing is reacting to the size of the menu and the size of the menu needed to have you something in 500 pixels. We create breakpoint. We assign a value to the variable. Okay, we just kind of juggled some code around. It didn't change anything for us. But in the real world, things happen. The menu, we get another item. We change the wording. It gets longer. So now we've got a more real-world value there. That's 642 pixel value that I made up. It's a fake real-world value. But we change it in one place, and that affects all of the other places that had to react for that same reason. And most of the time, that actually works. That actually lets us have that same effect when we just needed to change a value for it in one place. We might have had three different reasons for having 500-pixel MediQuerie on our site, but if only the menu changed, we only changed it based on the menu-based MediQuerie. It was nice. Works out. There's our compiled CSS. So like I said, MediQueries aren't the only kind of MediQueries we write. And I wanted to give a shorthand syntax for as many that made sense. And Sam and I started to call these fenced values, because we're fencing in a min and a max, usually width, sometimes height, sometimes other things, value. So by default, we're hinging on width. So if we pass breakpoint to two numbers, like so, that's going to result in a min, max, width, MediQuerie. And there we go. And I've leapt it to shoot up pixels so that we don't have to do any kind of mental gymnastics and get through this faster. But normally I would have breakpoint to m's turned on by default. We can also have explicit tests and values, so max width or anything else, if you send it a string and a number, we get, there we go, max width, 1,000 pixels. And we can combine the tests. Just like in a normal MediQuerie, if you wrap your tests in parentheses, you can hand them out as far as you need to go. So this, probably predictably at this point, is going to be max width, 1,000 pixels, and orientation portrait. And orientation portrait is two strings, so we handle two strings as well. And actually we have a little bit of error correction in there too, so if you'd written in portrait orientation, it would still turn that around for you. And so there we go. Max width, orientation portrait. And we can combine lots of this. We can just go down the line. These would all be handed together. And if you had a comma in there, we can create an OR-based MediQuerie. We've built in support for, I think, every conceivable MediQuerie you might want to write. It's a bit comically robust at this point. And there we go. Min width, min height, max height, orientation. It's pretty nice. And those are kind of the most basic uses. That's my day-to-day. The little hand does say it's time to rock and roll. Chalk full of wisdom is quoted here. So the other thing that really makes this stand out from writing MediQueries yourself or anything else I've seen for writing MediQueries is we've got support for fallbacks for when a browser doesn't support MediQueries at all or doesn't support the feature that you're working with. So what I'm illustrating here is something that's really, really future-friendly because, Sam, you would know, correct me if I'm wrong, there's no browser that supports this at all. Correct. Yeah. So this is CSS level 4 MediQuerie selector stuff. And just because this is exciting, I'm going to say what this is. So we've got breakpoint no query fallbacks to true. That means it's going to print out our fallbacks. But then that touch variable is our breakpoint variable for this example. And we're testing on the pointer test, and we're testing to see if it's coarse. And there's two values that you can test on for pointer. And, like we said, this isn't supported anywhere yet, but it's the standard and it's going to be. So we can test for fine pointers and for coarse pointers. Fine pointers are going to be mice. Mice with little tiny one-pixel endpoints that are very fine. Cores pointers are fingers or something else that might be coarse. So that will give us a CSS native way to test whether we're working with a touch device or a kind of mousey point mousey device. What would that be? There's no name for it. Mousey device, yeah. Good. You're welcome, everybody. So what we've got here is a test that is going to test for something that doesn't exist yet, but we do want to have a fallback. So after the comma, we've got two strings, one for no query and one that's called dot touch. No query is a flag that says next thing is going to be this selector that we're going to spit out for our no query support. So let's click through to see the compile and have this kind of go to the fall into place. What happened was we rendered out the value for free fall before anything happened. And then our media query for pointer course and then we've got our color badass for that. And then finally, we've got our no query fallback or our fallback for when that's not supported, dot touch, hash free fall, color badass. And we can use modernizer, let's say tool like modernizer, or we can use modernizer for testing whether or not a device supports touch and to add that touch class to our HTML element. And then right now we're supporting it and in the future when the browser does support it, we don't need that modernizer anymore. We also support calculating resolutions and if you've ever actually hands up, who's written the resolution based media query? Yeah, and it was kind of crazy, right? Like there's a lot that goes into it or at least there was when I looked into it. So there's a lot of different ways that you can write it. So you've got dpi, dpbx, and the standard is dpbx, which is dots per pixel. But it's not supported anywhere yet. Is that right, Tim? He doesn't. She doesn't help? Yes, it does. Cool. I said she. I think Firefox is the correct name. She's pretty. It's okay. It's supported in one place and it will be supported elsewhere. But you don't want to have to write comma separated resolution media queries by hand. So we took that over and if you input dpbx, it will calculate your device pixel ratio, which is vendor prefixed, and it will compute the resolution for you. And if you give it resolution, it'll put out the device pixel ratio for you as well. So it's just a nice, easy way to start to think in dpbx and let somebody else do the hard work for you and have that come out in a nice way. And what I'm not showing is how this can compound the complexity if you've got other tests inside of that. So if you're testing for resolution and min width or and height or and monochrome, all of that comma separation will work. Breakpoint sets out what you need, but it's really hard to manage if you're doing it on your own. So there is a few things that I've not mentioned, but there's one crazy advanced use that I promise you, well I promise you, you guys are awesome and smart. But I don't have very many uses for it, except for when we're writing other projects that would like to know about where we are in a midi query. So we've got breakpoint context. And that is a function that you can call in a mixin that will spit out what the value of a breakpoint of a midi query is for a given test. So up at the top, we've got a breakpoint that's going to be min with 500 pixels and a max height of 600 and 800 with an orientation landscape. And then as we go down, three occurrences of breakpoint get context. The first is checking for min height, the second for orientation, and a third for max width. And the third is a trick question. Because as we see, it spits out correct values for all three, but just the third is false. So we can write a mixin that is aware of the context in which it's being called, and create really awesome things like Singularity. And so I wanted to hand this over to Sam because he's been doing the lead dev on Singularity really. Thank you, mixin. So Singularity. Singularity is a grid system. Using Singularity is pretty easy. github.com, team-safs, that's Singularity. That's where you're going to find it. Gem install Singularity GS for grid system. Require Singularity GS. And import Singularity GS. Now, let's talk about grids a little bit, super quick. Who here uses grids? Raise your hand. Who here uses Twitter Bootstrap Reserve Foundation? All of you leave, please. No. Talk again. I can't be off the talk. I'm doing the grids talk.  Don't insult me. These are nice people. Okay, very nice. So let's take a look at some grids for city layouts because grids happen to work well if we're looking at both design for print and design for cities. And we're going to go kind of counterish on making it up. Let's look at Toronto first because Toronto is really bad. If you take a look at Toronto's map, you'll see that it really doesn't have a grid system. And because of that, if you were to be plopped down in Toronto, you would kind of need to memorize all of the streets to figure out where you need to go. Something I have found is somewhat similar to here in Portland. Sorry.  DC, on the other hand, has a little bit of a grid system. But it was a grid system that's a very generic grid system. It's squares. And because it's squares, it's hard to visualize exactly where you are at any given point. To me, DC is kind of like the grids that you get with Twitter Bootstrap Reserve Foundation. They're generic grids that same with 9.6 to really any of that. They're generic grids designed for generic uses, but don't provide the type of complex depth that you need in order to have a grid truly work and be super great for your users. Let me go to Philly, where Philly has a unique grid system. But Philly didn't quite stick to their grid. So while you can generally figure out where you are, there are times, little side streets where you're just not going to know where you go. So sticking to a grid is important because otherwise people will get lost trying to find your house. And then finally, we come to you. I was going to say Ben Franklin. That's where it happened. I don't think they can hear you because you don't have a mic. Ben Franklin found his way around Philly. Oh, he lost his 11 in mind. Thank you. That's how you hear him Philly. And then finally, we've got New York. And now New York is interesting. New York not only was able to rigidly stick to their grid system, but they built a grid that was unique to the layout and landscape of New York. Unique to the content of New York, if you will. And because of that, it's very, very easy, just even from looking at the map of New York, to be able to visualize where you are, where you need to go and how to get there. If you're dropped into New York and just described with a grid super quick, you'll pretty much be able to get around. Now, why do we use grids in web design? Because grids provide order for your design, order for your design instruction for your information. And the best grids are specific to both your content and your design because they are extensions of both your content and your design. The singularity is built with these ideas in mind and these ideals in mind. And because of that, it provides lots and lots of power for you. But before we go anywhere, let's take a look at the box model because the box model is kind of terrible. So everyone, the right box model, content box, that looks familiar? Yes, that is the CSS3 standard box model. Box model on the right, border box. Who here hates Internet Explorer for changing the box model and means to do IE hacks for that? Yes, everyone does because we're all front-end developers and Internet Explorer is terrible. Well, it turns out they got this right. So if we take a look at the description for box model, that yellow bar dividing everything, that is a fixed height or fixed width. And in the content box box model, padding widths and border widths go on the outside and border box box model, paddings and borders go on the inside in both margins down the outside. So what that means is if we were to use content box and I asked you to tell me the width of something that is 25% wide with 20 pixel paddings and .2M borders, what would that width be? Laugh is what that width would be. With border box, that would be 25%. And that makes it possible for us to use fluid grids. And that makes it possible for us to be able to use a grid system in our responsive designs, let them be fluid and not have them be static adaptive grids. So let's cheat a little bit at CSS. Import compass will give us all of compass's mix-ins. And then we're going to use the star selector, star before and star after to include box sizing, border box on everything. Now, I know someone's going to yell at me for using the star selector. It turns out that the star selector on its own is just as performance as any single tag selector. So in this case, it's totally cool. And this will change all of our box models to border box, which means we can use a natural box model for everything. And that makes us happy campers. So let's get started talking about grid singularity. Singularity provides two different types of grids, allows you to write two different types of grids, symmetric grids and asymmetric grids. Symmetric grids are what you're used to in things like foundation and bootstrap in 960. They are grids where every column is the same width. So in this example, all of our columns have a width of one, and we have 12 columns, 12 equal sized columns. Gutters, gutters are the places that go in between, that's our margin, that's fluid as well, and that is a ratio of gutter width to a column of width one. So because all of our grids are width one, our gutter width is one-third, and one gutter will be one-third of each column. And that looks something like this. This is actually the column layout of the 960 grid. If you're familiar with 960, 60 pixel-wide columns, 20 pixel-wide gutters, gutters one-third of a column. Asymmetric grids are a little bit different. And asymmetric grids are really where the power of singularity comes in and where you can start to build grids specific to your content and design. So we're all familiar with the holy grail layout, the tryptic layout for web design. It's a sidebar on the left content in the middle and a sidebar on the right. Now while you may have heard me say sidebars are false constructs and they are, what we can do is we can set up a grid that actually looks like the design we're trying to build, so we don't need to remember how many columns we can expand for each different piece. And we can do that using an asymmetric grid. So this grid example, we have three columns. We have a column of width two, a column of width eight, and a column of width two. Gutters are still one-third, but the thing to remember here is this gutter is, again, still one-third of a column of width one. And we have our first column is width two. So this will actually be one-sixth of the width of our first column. I know that kind of seems strange, but if you take a look at what that looks like, it kind of makes sense. It kind of resembles what you would expect if you had built actual divs on top of a 12-column grid. Now, singularity, you don't need to use a 12-column grid. You can literally use anything you like. We're just using this as a good example because people are generally familiar with a 12-column grid, but really you can use anything you want. So that grid starts to actually look like that magical, triptych, holy grail layout that we all really love, or our product owners really love. And we can do it with just three columns instead of all the 12 and remembering a lot more stuff. Singularity is what's called a semantic grid system. Now, that's not to say it's semantic because its classes are really well-named. What that actually means is it doesn't provide classes at all. And what you wind up doing is you wind up applying the grid spans, applying the grid itself directly to the elements that you want on the grid. That means that it becomes easier to see how grids change, and we can use nesting and media queries and breakpoint to see how our different widgets change as we want them instead of needing to rely on looking at the HTML and injecting classes everywhere, which we know is super easy and fun to do in Drupal. We can do it straight through all over CSS. So let's talk about spanning the grid. This is the example HTML we're going to be using for this. We've got class of main, class of first, class of second. We are going to do the triptych, because I like the triptych. We're going to do add, include, grid span, 1, 1, 1, 2, and 1, 3. What does that say? That says I want to span one column starting at the first column. So it will be using the two. I want to span one column starting at the second column, and I want to span one column starting at the third column. That makes using this grid a lot easier than the alternative, which would be span 2, 1, span 8, 3, and span 2, 10, which is a little bit harder to remember than 1, 2, 3. And that's what it winds up looking like. It looks exactly like we would think it would look like. The light, stamina, color is our visualization of our grid. The red is the actual place of pieces of work. Yes, and we'll go back, but all of this code is in our slides online afterwards. So the point of the code isn't for you to be able to copy the code down now. It's for you to be able to get inspired to go look at our slides later. Cool? Awesome. And this is going to get a little bit long because we have got big code examples, but we can also do responsive grid contexts. So if you're used to having three or four big grid layouts, big breakpoints for grids, we can do that with Singularity as well. So we're going to start with a 12 column grid. This is building mobile first. And we're going to add the 282 grid at 700 pixels value I made up. So first, we're going to span 3, 4. Then we're going to span 1, 1. Then we're going to span 6, 7. And then 1, 2, and so on. And what you wind up seeing, it's easier to visualize, is you wind up getting something that looks like this. Start with a 12 column grid. Second section is to the left, then first, then middle. And then we switch to our triptych grid. And not only do we get a new grid, but things move around as well. We're able to move around because we're using what's called the isolation output style. And that gives you essentially pulling and pushing that you'd be used to with a traditional grid system baked into how you want to position the grid items, which is super useful for doing stuff like this, what's called content choreography. Again, just look at where the second section lives. Second section is the first item. And then when we switch, yay, it goes all the way over there. So we're not changing our HTML, but because we're using an intelligent grid system, we are able to change the visual ordering without changing our source order. Middle section is still the middle side second. It goes to the front and then it goes back. It's all topsy-turvy, wibbly, wobbly, and fun. We can also nest grids. So this is the HTML we're going to be using. Just bear with the HTML. The pictures are pretty, and that's really what matters is to get the visualization. So grid span 1, 1, 1, 2, 1, 3. And we get that grid that we saw before. Then we can use the layout mixing. Layout mixing and singularity is super useful. What it says is that grids and that gutter variables, those are global contexts. That allows us to know where we are and not need to pass in our grid definitions every single time to grid span to specifically tell grid span where we are. What layout will do is layout's a chunk that we can say, for this chunk of code, I want you to use something different. In this case, I want you to use an 8 column grid instead of the 282 grid because we're in the context of 8. And then we can do grid span 1, grid span 1, 8, grid span 6, 2, 2, 4. And we wind up getting something that looks like this. So we now have put a new grid inside of the middle piece. This is something important with singularity that distinguishes it from other grid systems. Has anyone used SUSE grid system? S-U-S-Y. So for those of you who are familiar with something like 960, all of those grid systems work based on the thought that your container is something fixed, even if it's fluidly fixed, and that your grid are pieces of that predefined container. So for 960, each column is 60 pixels plus the 20 pixels plus the 10 on the side. That lines up to 960. It's based on the container. Singularity, on the other hand, works off of the thought that there is no container. The container is whatever you put it in. Because at the end of the day, all a grid is is a ratio of a whole. And that is the only assumption singularity makes about your grids is that what you want is a ratio of 100%. So what we've done here is we have not only changed our grid context, we have changed the physical type of grid. We have changed from an asymmetrical grid to a symmetrical grid. And we're able to do this and do this on the fly because singularity doesn't make that assumption about your container. So what we wind up having is grids inside that line up to the gutters on the outside, but do it because we've chosen to do it. And then, of course, we can nest even further down. Layout 6, 6 column grid. And we wind up getting something that looks like this. And I think that is what we have. Cool. So thank you guys very much. Thank you. Looks like we have a little bit of time for questions if anybody wants to. There's a mic in the center. Yes, come ask us questions. We have microphones. Hi, guys. Hi. So I'm curious, is there a way to make one of those grids sides fixed, for example, if you have a 3 column grid layout to make the third knot flex? So singularity offers this thing called output styles, which allows you to define basically how the CSS gets written. It comes with two different output styles, float and isolation. The way that you would need to do that is through display table. And if you would like to, you can write your own output style to work with display table. It does not come with an output style for that, but if you have one, you are free to write it and use the same singularity syntax on top of it. Cool. It looks like you guys are using the Omega sub theme. No. Okay, it's 960. No. Do you have a preferred theme that you'd like to go with? Or is it theme agnostic? The great thing about working with SAS is that, for me anyway, is that it's really theme agnostic, droop agnostic, platform agnostic. It works with any web system that we're going to throw it into. It's just authoring CSS, and the same goes for Breakpoint or Singularity or any of these SAS-based tools. So you don't have a preferred theme? No, we have a preferred theme. Can you share with us? My preferred theme is Aurora, but I'm a little bit biased because I wrote it. But that being said, I prefer Aurora because it's built from the ground up to use these tools and is super minimalist. It doesn't give you anything out of the box. In fact, it strips away a lot of the default settings that triple themes have. But it is built out of the box to support these tools. It is not a good theme for people who are brand new to theming or if you're really used to Omega-3, it is kind of the empty Omega-3 base theme. But these tools that we use just because Aurora is optimized to use them doesn't mean you can't use them because you don't want to use them. Okay, and just a follow-up question. Do you guys have a working example that you've done at NBC where you've taken all of your SAS and you've got the default breakpoints and you can kind of gut it so that we can kind of work off something rather than us trying to figure it out from scratch? No, because there are no default breakpoints. There's not... It's totally dependent on the needs of the content so we don't look at, say, the iPhone, iPad, desktop models and say, okay, we're gonna set these as breakpoints and then move from there. We look at the content and then to paraphrase Stephen Hay, you start small and you expand your browser until the content looks like shit, then you made a breakpoint. And so you just do that over and over until it looks good. Okay, thanks. So it's pretty easy to pick on the foundation's grid system, I think. So all the good things in foundation is very old-fashioned. But you didn't mention Susie and it looks to me like Susie pretty much does everything you're doing. You don't have the explicit asymmetric grid but you just, you know, crimp some bars and pass those through. Instead of, I remember, okay, this is a 2, this is an 8, this is a 2, but if I wanted nice inside that 2, you still have to remember that 2 is an 8. So what can you do in a single area that you can't do in Susie or, say, the upcoming Susie Next? Yeah. And a lot of the original core underlying features of Susie Next are based on this version of Singularity. That being said, Susie Next is significantly in flux right now, so I don't know how it's going to wind up panning out and if it's going to wind up being nearly as flexible as Singularity. As for the current version of Susie, Susie just simply isn't anywhere near as flexible as Singularity, and it makes the assumption that your grids are based on your container. That's the setting your columns to a width, four m's I believe is the default, and your gutters to a width, one m is the default. That makes, that puts you into the mental model and that it makes the assumptions that what you are doing is you're basing a grid based off of a desktop size. Susie is really a desktop first grid system that might happen to write its CSS mobile first. Singularity, on the other hand, is built and designed to be mobile first and designed to take advantage of preprocessing. It is a truly preprocessor first grid system where Susie is kind of an old fashioned grid system turned into a CSS preprocessor. One thing that you can do with Singularity, one really very specific example, is that you can do ratio based grids that don't have a common column denominator, like something based on a golden ratio or something like that. You can actually have that be true to the golden ratio. If that floats your boat of designer or not, that's up to there, but that's just not possible with an equilateral grid system. Have you checked out Salsa? Have you checked out Salsa? I have. Yes, I've checked out Salsa. He's actually part of Susie's next team. Again, all of the CSS preprocessed, all of the grid systems, of all of the grid systems none are quite nearly as flexible as Singularity, and they all work on a similar mental model of your final container, where Singularity is very different in that it totally ignores your container because it has no concept of your container, making it in the end a much more flexible system. All right, I'll give somebody else a chance. Thank you very much. I love SAS. Stoked about breakpoint. It's all great. Singularity is awesome, I think. My question is, why if the elements have their own grid, if I understand correctly, is there a background grid just for gutters, grid span, snap grid, or is there something else amazing? So that background grid was just a visualization of your grid. It is not an actual grid. Truth be told, base grids, I don't necessarily use them on all projects, but having a grid system is good for the widgets that you're working with. As for why have a background grid when you can just kind of make one as you switch, that is a very good question. The answer is you might find out when you have a flexible grid system like Singularity that you don't need one. And that that may be a construct of page printing web design. It depends on your project and your needs. All right, thank you very much. Hi, this is a question about breakpoint. It seems like a very monolithic approach to cram everything into a single mixing. I'm just wondering if you considered splitting it into more than one for maybe better readability or is you decided to go with the way for the reasons? I don't really feel like it is that monolithic approach. And if I were to do it to break it apart, I'm not sure exactly how I might approach that. As an example, on our current project, I believe this is based on some of the work you've done. We have a mix in this called If, Min, Width. Include If, Min, Width, 416. It reads like English, it's great. So actually, yeah, so inside of breakpoint, we've also included the respond to syntax which is an older project that has since been rolled into singularity. And what you wind up doing is instead of defining variables, instead of defining media queries using variables, you define them using strings. So the semantics that you wind up having are something like, I'd include something called inline navigation. But that being said, to your question of breakpoint's monolithicism is a word I'm going to make up right now. Breakpoint is designed as, it's designed as a system that you can use out of the box, but it also works as an API. So one of our users has created something called breakpoint slice, which is a syntax on top of breakpoint that provides some syntactical information that he really likes that at the end of the day calls breakpoint. So your if-min-with media query or mix-in, what that can do is you can have that mix-in and then in that mix-in call breakpoint. So breakpoint kind of becomes a media query API at that point. You might use it for the convert to M's or the other things. I just want to say, I think our work was actually based on that respond to stuff that you guys did. So thanks for the transform, how we did things. Can singularity do a fixed-with gutters or is it always ratios? Fixed-with gutters are a function of padding. And what we have found out as we have worked with grid systems and grid frameworks is that padding is really hard to keep track of and it compounds very, very quickly. So we did not include a fixed gutter output style in singularity but like the question of fixed sidebars and fluid stuff for an output style, if you would like to make one, you are free to make one. And we encourage if you want to use fixed gutters for you to make one yourself so that the mental model works the way that you expect that to work. But it's doable with output styles or with different output styles. We just haven't built one. And if you were one of the proponents of competing grid systems, what would you tell me the downfall of singularity is? And as a maintainer of singularity how would you dispute that? The biggest thing with singularity which is the biggest problem with singularity is it's a very large mental model shift from other grid systems. Other grid systems really take the concept of a page to heart whereas singularity totally destroys the concept of a page. And it's grids for grids. So the biggest issue I found when explaining singularity is that you're not making grids. You are building ratios that wind up writing out something that resembles a grid. And it's a tough problem for us as for me as a maintainer because it's hard to explain to someone and I've actually given trainings on this this week where someone understands what singularity is doing and then the mental block between I understand what you're doing but it's also not what I think it is. That's really somewhat hard to get over sometimes but I don't know how to fix that in singularity because that's the core system. That's singularity's secret sauce is that it's not a page but it's a grid system. It is a web-based grid system. So that's probably the worst thing with singularity is it's a totally new mental model. Okay. I've been using SAS. Got a couple of SAS responsive sites on my belt. Three or four I've been using the respond to which I like being able to put the response right in that same selector. But I got to a site where it broke down as a front page that had JavaScript changing things on the fly and so I found that in order for everything to line up both horizontally and vertically as the screen width is changing devices are changing compounded with the fact that the content was being replaced and the height of things were changing with JavaScript. I had to revert to basically kind of styling JavaScript having it measure widths and heights and apply CSS that way. So I guess my question is did I not try hard enough or is having the DOM changed out from under you a legitimate reason to do it that way? So it's hard for me to say because I haven't seen your project. I would definitely try to avoid writing actual CSS styling with JavaScript. I would try very hard. That said, maybe it was just so complicated the thing you couldn't get around it with adding classes or reacting in some other way. But yeah, I would do that as a last resort. Yeah, certainly. I agree. Generally speaking, I find I try very, very hard not to ever do any styling through JavaScript and instead apply classes and respond to specifically won't help with that because all that you can respond to in Breakpoint does are media queries. So if you're having issues with your other CSS, I'm not sure I don't think Breakpoint or Respond to would have ever been the solution that you were needed to deal with. Because you can't respond to the DOM trade. It's not a real time, it's just not about CSS. So I think what you should be trying to do is applying classes and see if you can fix your problems using CSS or potentially creating more predictable patterns. And then that will produce that will allow you to write better CSS. I mean, my only pushback is just that a class cannot replace measuring a width and then applying a margin or width value based on a percentage of that width. The class could never do that. Right, so I mean if what you're saying is there are some things that you need to do in JavaScript that CSS can't, then yes, that's true and I don't know how to fix that in CSS. All right, Gawd, I completely agree. It sounds like you did your due diligence. Thank you. Hey guys, I'm mostly back and my team is mostly back in. More and more projects are requiring more fun in work and so have started using Compass and SAS and so on, but totally new to Singularity and Breakpoint. So I'm a beginner that came to an intermediate session. This is really exciting, looks like some awesome stuff to do, but you went so fast and you're like, do you have... I mean, I can obviously search for resources, but you guys are experienced and know what's good. Does anything pop out as a really good place to go from here to continue to learn? If you're new to SAS, there's a blog that I contributed to about a year ago that still has really great content. What's there is fairly evergreen called The SAS White and I think that the maintainer is going to start that up again if he does. And there are a lot of resources on SAS now. I can't think of another one that's, you know, that targeted, but a good Google search for any particular issue you're having would... So just generic searches and stuff. What particular... Anything particular that you wanted to do that to, or just SAS in general? The two gems that you mentioned in particular. Both of them are. Just the documentation. Yeah. They're very well documented because I refused to launch them with that good documentation. Okay, thanks. Hello. I was wondering if you have used intent.js which is, I think, a tool to help you do element queries. So it's like a media query that responds to the size of an element and just wonder about that and that style of doing things. And if Singularity can kind of help you do that because you have sort of a contextual sizing or styling. So I'm aware of it, but I haven't used the... Yeah, so as for Singularity, it isn't going to help with element styles, element queries. It might help you to write better grids for when you do have an element query, but it won't help specifically with element queries. As for element queries itself and generally speaking, there's something that are very, very hard. I've written in element queries to a responsive image solution I have and... or what essentially amount to element queries. And one of the big issues with element queries is lots and lots of elements don't get sizes until you've put something into them and if you're trying to query what their size is before the content is in there that it requires to know what size it is, you get this kind of chicken and egg and that is the perpetual issue with element queries besides the fact that they can't actually happen natively in HTML or in browser. So you can use them if you would like. I would, as much as I hate to say don't because they're super useful, don't. They're not reliable. Right? Just I try to do pretty much as much as I can in the standard tools so HTML, CSS and what I have available there. Thanks. So please don't laugh and this isn't for me, it's for a friend, seriously. But Singularity and .dat Is there... Do you know of anything... So these tools are back-end agnostic so as long as your front-end developer is able to work in a real person environment or really if they're able to install Ruby on their site, which is Ruby installer or on their local machine, rubyinstaller.org then they'll be able to use SAS and compile. So as long as they're able to compile SAS and use Compass they'll be able to use Singularity and Breakpoint. The output of either of these is just CSS that's what SAS gives you. It gives you an authoring environment for running CSS. So as long as you can find some I found some tools about .NET and SAS so as long as you can find that then the rest is pretty much just what it is. The other thing is the way that we work in Drupal is we don't use Drupal to compile our SAS. We compile our SAS through our Ruby stuff. So maybe the search you should be looking for isn't necessarily how to integrate .NET with SAS but rather how to author SAS on the operating system environment that you're doing your local dev on. With SAS I've noticed that inside of media queries it's a lot harder to use the mixin. I've had troubles with mixins and other ones because... Extendables. Extends, yeah. Since you're putting media queries in the code in multiple places in the context of what you're doing how do you work with those kind of things? I don't think that there is any technical constraint on mixins but there certainly is with extendables. Okay, maybe it's just this. So the rule on extendables is you can't extend a selector inside of media query. From outside of media query. So if you define your extendable outside of media query you can't extend it within one. Inside of media query, then you can extend it. I think that's confusing but that's why I think it's land. So I try to avoid that. So I might have a duplicate definition of my extendable where I define it as a mixin first then apply it to an silent extendable class. Then I can extend it when I'm not inside of media query if it's just the way it works. Excellent. To chime in on that I saw a talk yesterday where we were using placeholders so the percents so if you put all your extents as placeholders and include them in a partial file the way you're bubbling media queries is to become a pain in the ass but if you have like here's my big chunk of my big breakpoint thing and then you have your little pain points like my menu needs to breathe but if you have like breakpoint you could have, yeah you can include a partial with all your place holders at every big breakpoint and then reference those from within that media query. It just depends on the problem you're solving for the project. Yeah, if you've got a large layout and you somehow need to extend that, that could work. I think though that that's probably not something you're going to extend very often because it's usually something you define once and use once rather than need to verify greatly. Most of the time when I use placeholder selectors, they are for things that will not be changing depending upon media queries. So I don't use selectors for grids for example, but I'll use placeholder selector for font definitions and for colors and for basic padding and stuff like that. Style guide type things and style guide type things tend not to change very much based on media queries and the changes are tweaks that you would need to not use placeholder selectors for anyway. I can see theoretically like you say you have like a menu style, lots of menus, might have like a placeholder for that that you can pull into mobile or something, but then you don't use that there anyways. The other thing you can do is you can use media queries inside of placeholder selectors that get extended and that kind of solves that issue. Okay. Yeah, so if you've got a drop down that you've created that needs to look differently at different sizes, you could put the media query inside that and then that would work for that specific widget that you're styling. Yeah, cool. This is more of a philosophical question and maybe not a lot useful, but it seems like the biggest assumption of singularity is that elements are self-similar or fractal. And I was wondering whether you went out of your way to create kind of a complexity theory approach singularity. I'm not sure I entirely understand the question. Sounds deep though. It does sound deep. Well, just the idea that your elements aren't based like on a page paradigm, for example, in that you can nest elements inside elements inside elements and have similar properties, no matter where you place them in this hierarchy. So nesting is not like the central philosophy singularity was built on. Nesting is a byproduct of singularity's non-page assumption. So we didn't go from the let's be able to do the most intricate thing out. We went from let's just not assume a static page and in from there. In fact, the layout mixing that I showed was one of the last things we added to singularity before it actually launched. So I don't think, I think the answer to your question is no, we didn't do that. I was wondering about the breakpoints module and is it just an API so that James can hook into it.  Okay, that's kind of what I thought, but I was going to ask it as a nice one. And also the picture module, is that another sort of using the same concepts but in a module form so you can download it. So to me, the big issue with both picture module and breakpoint module is they're both, especially how they're in points in Drupal core, which are both Drupal modules and not SAS things. Right, yes. Is that they are both, they're both designed and predicated on the assumption that your site will have four breakpoints or basically device breakpoints and those device breakpoints probably are on our iPhone, iPad and desktop. And that is just the wrong assumption to make. When we build responsive websites, we use 20, 30, 40 breakpoints. And the assumption that A, all those breakpoints belong in an API that can then be referenced by other things and B, that those breakpoints are things that would be useful even if we put them in is a bit silly in my opinion. It's not just silly, it's short-sighted. It was, both of those were really designed for a very specific use case and that very specific use case is wrong. Not that it's wrong, but it doesn't follow best practices. And in fact, the practices it follows haven't been the best practices for years now. Well, it doesn't hold up when you look at it past the month or so when it was conceived. A while ago, it made sense that we only had iPhones and desktops and iPhones and iPads and desktops. And it seemed like we were in that world, but we're not. We're just not in that world. So having something where you've got a system for managing these device breakpoints is just going, it already has fallen apart. It's going to fall apart when you use it. So try to be device agnostic, future-friendly, some of the earlier content should look at a device of the given characteristics, which device that is. Push back on picture a little bit. And all of those IMG is going to be wrapped in like a width 100% in CSIs. So if you have a limited amount of breakpoints, you're still serving a smaller asset at that size, which can be beneficial. I'm not saying that responsive images are a bad idea. I am saying the implementation of the Drupal module picture and the Drupal module breakpoint is poorly done. I agree that we need responsive images. I don't believe that the picture element with the breakpoint module, the picture module and the breakpoint module are the correct solution for that. But it's still. But not as good as Borealis, for instance. I did, did not. So given that, how do you then create resize images within Drupal specifically for the organic breakpoints you're talking about? So I have created a module called Borealis, Borealis Responsive Images. It uses element-based media queries, which means it will work for about 80% of what you want, but it won't work for the instances where something needs to be sized based on the inline content inside of it, generally like flex sliders and stuff like that. But for the 80% of use cases where that does work, it uses element queries and it does it all behind the scenes and you don't need to choose what different styles you say. I want this style to be responsive and then just use that image style and you'll get Borealis and you'll get responsive images based on element queries, which means you can use the same image style multiple places on your site and have those images be at different points. That is my preferred solution to responsive images in Drupal because it's a million and a half times more user for all technically pictures user friendliness is zero, so I think it's infinitely more user friendly than picture element. I know, I should be nice. But it's much more user friendly and it works off of element queries instead of device break points. For the 20% of the time that it doesn't work, then you need to use a picture fills up a different solution that is based on Viewport. Picture fill is one of them. It is not the only one. And are we using it through the module or are we just actually doing it? We're using the library but not the module. What we tend to do is we don't use modules for JavaScript libraries. We use the JavaScript libraries because we have much more control over them. Another similar example is we don't use the Flexlider module. We use Flexlider, the script because we have more control over it and it's actually easier to work with. The other thing with responsive images is right now every single thing is a hack because there is no standard. So saying picture is the end all and be all solution because it might get in even though Chrome refuses to add it to Chrome at the moment. Picture favorite hack. Picture has its place, so it is Borealis. Picture module I don't believe is the correct solution. That doesn't mean picture fill isn't a good solution, but I don't believe picture module is a good solution. That was useful. I'll take a look at Borealis. Cool. Is that it? We've kind of gone over our time, but we'll have to answer more questions. We'll stand here forever. Forever and ever and ever and ever. Thank you, guys. Thanks, guys. We'll go this way. The SAS way, sas-lang.com. Yeah, that's the official site. And it's got the basics and tech stuff. Compass-file.org is the Compass website and that has usage for all of its mixins. My blog has stuff. Mason's blog, if you don't have stuff, you should have stuff. I took off stuff when I tried to redesign one. Yeah. The SAS way has covered the best articles to grab a bunch of it together. You're welcome. You guys have... Okay, so you'll wait. We'll see something specific. I don't use sidebars, or it doesn't come with sidebar regions.


J-P-L-L-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O-O The Jello program starring Jack Benny with Mary Livingston and Phil Harrison is orchestra. The orchestra opens the program with, I am taking a fancy to you from in old Chicago. You know one of the nicest things about Jello is the easy way you can dress it up in a dozen different styles, like Jello cubes for instance. Shimmering raspberry jello molded firm in a shallow pan, then cut into colorful little cubes and piled in sherbet glasses. or strawberry jello tarts, fruit-rich strawberry jello combined with luscious fresh berries and a chilled firm in baked tart shells. Ah, that's swell. And so is whipped lime jello. All you do is chill until it's cold in syrupy, then whip it up in a bowl of cracked ice until it's fluffy and thick like whipped cream with a lovely foamy green color. There are lots of other jello tricks you will think of to add interest and variety to your meals. And the best part of it is jello is so quick and easy to prepare so economical you can serve it just as often as you like. Be sure to get genuine jello though for jello brings you that delicious extra-rich fruit flavor, a deep rich wonderful fruit flavor that makes every jello dish a three-star hit. So when you buy, look for the big red letters on the box. They spell jello. I'm taking a fancy to you played by the orchestra. Now, ladies and gentlemen, we take you to Jack Benny's dressing room at the Paramount Studio. It's Jack's first day in his new picture. Take it away, Paramount! I hasten to see that evening sun go down. I hasten to see that evening sun go down. Rochester, for the last time will you please stop singing. I'm trying to memorize my lines. Okay. I can't concentrate with all that noise going on. You know your voice is nothing to write home about. Even if it was, I couldn't. Well, be quiet. To clean up this dressing room a little bit, I'm expecting Miss Joan Bennett in here to rehearse the scene we're going to shoot today. Is that the scene where he was hanging out the window upside down? Yes, I wasn't going to do it at first, but they finally talked me into it. I knew they would. You got about as much willpower as me in a chicken coop. I just gave in to keep Paramount happy. Besides that, my option had shooting pains last night. Rochester, hand me my gray suit. I can't be standing around in my shorts when Miss Bennett comes in. That's right. They all kind of loud. That's not what I mean. Say, boss, isn't that your makeup man standing outside there? Where? Oh, yes. Hey, no. No. I'm going to work in a little while. Aren't you going to put some makeup on me? That's the scene where you're sticking out of a window by your heels, isn't it? Yes. Well, you won't need any makeup.  Over my face? Not if I have anything to say about it. You won't. So long. Well, that settles it, Rochester. I'm not going to do that scene. You can bet on that. I can lose on it, too.  Operator, get me Mr. Hornblow, the producer, and hurry. Rochester, I ask you to get me my gray suit. Doggone, I can't relax for a second round here. That's too bad about you. If you didn't owe me so much, I'd have a nervous breakdown. All right, now go in and get my hello. Hello, Mr. Hornblow. Now, listen, I agree to play that crazy window scene, but I didn't know that my coat was going to hang down over my face. How will people know it's me? By my feet? Listen, Mr. Hornblow, all feet look alike. Oh, well, you're just saying that to be nice. But look, now look, here's the trouble. In the first scene, my face is covered up by my coat. In the next scene, I go to a mass ball so I'm covered up again.  My goodness, when do I unveil? What? All right, you're the boss, but I tell you one thing, Mr. Hornblow, when I'm in the barber shop under that hot towel, I better have sparkling dialogue. Goodbye. I don't know why ever let people talk me into things. Rochester, I told you Miss Bennett will be here any minute. Now, where's my gray suit? Here's the pants, boys, I've just pressed them. Thanks. Pressed them while you've burnt them. Look at that spot right there. Where? Right there on the seat. That is a little crisp, ain't it? Fine, burnt pants. Now what are we going to do? I don't know if there was toast, I could scrape them. The lucky thing, I got two pair of pants with this suit. Oh, that must be Miss Bennett. Quick, Rochester, help me out with my pants. Okay. Make it snappy. Just a minute. Hurry up, Rochester. Here you are. Here you are. Okay. All right, you can come in now. Hi, Jack, old boy. What was the delay? Oh, it's you, Phil. I thought it was Joan Bennett, so I put my trousers on in a hurry. You sure did. You got one leg left over. Oh, yes, I thought they were a little tight there. Here, Rochester, help me get this on right. So you're expecting Joan Bennett, huh, Jack? I'll have to stick around and meet her. Oh, fine. I don't mind if you stay, but for heaven's sake, Phil, the minute I introduce you to Joan, don't ask for her phone number. I won't. Thanks. I got it. Now, wait a minute. You said you didn't know Joan Bennett. How can you have her phone number? She's got a maid, hasn't she?  That Mr. Harris, you're the lady's man. The lady's man. If he took some of that padding out of his coat, he wouldn't be so much.  You should talk. You tried to buy a coat with built-in muscles. I did not. I merely told my tailor to allow for them. But you haven't got any muscles. Well, I'm taking a course of exercises and there'll be a long any minute. I wish Ms. Bennett would get here so we could start rehearsing. There's a phone, Mr. Bennett. Well, why don't you answer it? It ain't for me. Well, don't put yourself out. Hello? Oh, hello, Kenny. You are? Well, we'll be listening in. Yeah, as you can come over later. Goodbye, Kenny. Hey, Phil, turn on the radio. Kenny's gonna sing a song. Okay. Quiet, Rochester. We want to hear Kenny. I make up things to say on my way to you, on my way to you. I can write poems to when you're far away. But when you are near, my lips go and ask me, am I in love? I always answer as well, Con. Hey, that was very good. And you know something, Phil, your orchestra boys play much better when you're not there to lead them. Yeah, I get them all mixed up. You sure do. Rochester, I asked you a thousand times to clean up this dressing room. Look at those socks dangling on the chandelier. Why don't you take them down? They ain't dry yet. Oh. Another thing, I told you to plug up that hole in the floor. Floor is full of holes. Did you look at those mousetraps I said last night? Yes, sir. We caught three mice, two rats and a beaver. A beaver, I was wondering who built that dam in the bathtub. Gee whiz, Jack, I don't see why Paramount doesn't give you a better dressing room. This place is a mess. Well, it is a little bohemian, Phil, if that's what you mean. Oh, that must be Joan. Just a moment. Rochester, empty those asterisks. Yes, sir. Come in. There he is over there. Hello, Jack. Hiya, Jack. Are you surprised to see us? Oh, so it's you guys. Yes, this being your first day on the picture, we just drop in to wish you luck. We won't be in the way, will we, Jack? No, we won't be in the way, Kenny, but I want you all to behave yourselves. Joan Bennett is coming here any minute for rehearsal.  Looks like Mr. Zuckers' weight basket. Listen, Mary, there's nothing wrong with my dressing room. It's very comfortable. And look at that rug there. It says Idaho Potatoes on it. Well, Idaho is a beautiful state. If you want to know something, plenty of big stars have occupied this dressing room. You know who had it before me? Yeah, Tom Mix and Horst. Did not. This room was occupied by Carol Lombard. Well, she left her bridle on the coat rack. Not a bridle. That's the harness I wear when I'm hanging out of the window. Hanging out of a window? I thought you said last week you weren't going to do that scene. Well, I wasn't, but I had a conference with Mr. Hornblow and, well, he convinced me that I ought to do it. You know, Jack, you haven't got any backbone at all.  Mary's right, Jack.  A chump? I told him that, but he wouldn't listen to me.  Now, look, Mary, I've got a mind of my own, and neither Mr. Hornblow nor anyone else can sway me. Not much. You're the kind of a guy who goes into a barber shop for a shave and comes out with a haircut, a manicure, and a ticket on a turkey raffle. Well, that has nothing to do with my picture. And besides, I haven't been in a barber shop for months. Then where did you get that haircut? It's a Lulu. It's not my fault. He wouldn't hold still. Well, I was nervous.  Well, he told me he used to be a barber. I told you why I got fired, too. Oh, sure. Say, Jack. What is it, Kenny? I was just singing or something. As long as you're going to do that scene where you're falling your head, why don't you take a...  I'm going to hang out of a window and I'm going to have a harness around my stomach. Are you going to have a bit in your mouth, too? No, Kenny. It's to hold me up. I'm not going... I'm not going to play the part of a horse. Part of a horse? Quiet. Now, listen, fellas. I've had enough of this silly chatter. I'm nervous today, so if you want to stay here, be quiet. Well, quit hammering on that door and come in. I'm sorry, Jack. I didn't mean to disturb you. Oh, it's you, Joan. Terribly sorry, Joan. I must apologize. I didn't know it was you. I wouldn't have shouted like that. Do you want me to go out and come in again? Oh, no, no. Say, you've never been over here before, have you, Joan? No, I haven't, Jack. This is quite a dressing room you've got. Oh, it's nothing much. No, it isn't. Well, I was going to have it redecorated, but you know, one never knows how long one's going to be here, does one? You're right. One never can tell about one's job. And Jack's the one.  Say, Joan, I want you to meet my radio gang. This is Kenny Baker, our young tenor. Hello, Kenny. How do you do, Miss Bennett? I've enjoyed your singing so much, really. I think you have a very fine voice. I don't care whether you mean that or not. You're my dream girl. Dream girl? Who did he like when he's awake? I don't know. And, Joan, this is Phil Harris, our orchestra leader. Oh, so this is the curly-headed heartbreaker I've heard so much about. Yes, he's our corny Casanova. How are you, Phil? How do you do, Miss Bennett? It's going to be nice knowing you. You better be careful there, Joan. You know, Phil is a pretty fast worker. He is? Yeah, man. First thing you know, he'll ask you to go to the Trocadero with him. Oh, I wouldn't dare go out with Phil. Why not? My maid would never forgive me. Hey, that's very good, Joan. You're the first one that ever put Phil in his place. We're going to meet our little leading lady, Mary Livingston. Hello, Mary. I'll bet you're as old as I am. Mary. I could be a blonde if I wanted to. Mary, that's very impolite.  I won't. Then I will. Oh, no, you won't. Oh, no. Well, we're right back where we started from. And now, Joan, last but not lightest, may I tell you how thrilled I am to meet you? Yes, do. Really, my heart's just going pity-pat. Mine's not. Now, Mary, be happy. Well, thank you, Mr. Wilson.  You sound as though you're pretty crazy about it. Well, really, I am, Miss Bennett. Oh, he is. When I say that Jello is the most tempting, delicious, and economical dessert and that it tastes twice as good as ever before, I say it with every fiber of my being. And that's a lot of fiber, Joan. Believe me. I tell you, Miss Bennett, I could stand here for hours and talk about Jello. We know you could, Don, but we've got to rehearse. Now, Joan, how about you and I going over these lines where I'm hanging upside down out of the window? Oh, you mean that scene where you fall on your head?  That was merely an accident at rehearsal. Well, it was very funny. Funny? Especially when you bounced. She would think it was funny.  All right, Joan. Let's go over that scene once anyway. Now, you're passing by and I'm hanging out of the window. I've got the first line. Okay. Oh, Vivian. Vivian. Conrad, why are you hanging out of that window?  No, Vivian. I'm head under heels in love. Vivian, there's something I must tell you. I know what you're going to say, Conrad, but it can never be. Not, dearest. You love me, don't you? Yes, but father will never permit our marriage. He says you have no money to support me. He's got money all right, but he won't part with it. Now go in the other room. There isn't any. And keep quiet. Go ahead, Joan. Oh, Conrad, why must we continue like this? Neither of us is happy. Let's call everything off. What? Call everything off? Not so loud. You'll get paramount an idea. Now, Mary, we're trying to rehearse. Continue, Joan. Oh, just a minute. Come in. They're ready on the set for you, Miss Bennett. I'll be right there. They want me to? Yes, you can come along. Come on, Joan, we better get over there. Can we come along, too, Jack? Oh, sure, all of you. Say Rochester, run across the street to the camera shop and buy six rolls of moving picture film. Jack, what are you buying that for?  They do? Why, for the last three pictures, I've been buying my own. I'm going to see Mr. Zucker about this. Come on, gang, I'll get a refund or else. Sad, isn't it? No, it sure is. Boy, what they do in pictures. Guys, look at those chorus girls. Are they working in your picture, Jack? Of course they are, Phil. Now, Phil, I should think you'd have learned a lesson when Miss Bennett puts you in your place. Not me. I'm always in there punching. See you later, fellas. I bet he won't have any more luck than I did. Say, Jack, isn't that Mr. Zucker standing over there? Oh, yes, I must speak to him. Hello, Mr. Zucker. Hello, there, Bing. Imagine the head of the studio doesn't know me from Bing Crosby. He does on payday. You know, Mary's like that with everybody. You just can't remember names. Hello, Mr. Zucker. Hello, Kenny. Now, that was just a wild guess. Is that so? Well, I'll see. Hello, Mr. Zucker. Hello, Herman. You're right, Jack. You see, I told you. Oh, say, Jack, who's that tall fellow way over there in the corner talking to John Bennett? Where? Oh, that's Mitch Lison, the director. Hiya, Mitch!  Excuse me a minute, fellas. Let me tell you something before Jack gets over here. What is it, John? Anything wrong? Well, I'm not one to complain, and I like Jack personally very much, but... But what? What's the trouble? Well, I rehearse with him two or three times, and frankly, Mitch, he cannot play a love scene. Yeah, I know, John, but we can't get Gable for that kind of money. Well, I'd be willing to chip in. So would I, but I'm afraid it's too late now.  He doesn't seem to have any fire. Well, I did everything I could. I even fed him sternum. Just the same, Mitch. I think that... Quiet. Here he comes. Hiya, Mitch. Well, here I am, raring to go. We're just about ready for you, Jack. Okay. Light him up, boys. Now, quiet, everybody. Let's settle down. Well, John, do you think we better run through our love scene again before we shoot it? No, Jack, you're as good now as you'll ever be. Oh, thank you, John. Thank you.  Say, Mitch, do you mind if my gang sticks around and watches the scene? No, not as long as they're quiet.  Sure. Sure. Not me. I'm a Shreiner. Our convention is over, Kenny. We're all ready for you, Mitch. Okay. Oh, that's Teddy Tetz left, fellas. Our cameraman. He's one of the best. Hello, Teddy. How are you, Jeffrey? Jeffrey, I don't even know You think that's something? The soundman is deaf. He is not. Hello, Chuck. Eh? Well, that's news to me. All right, Jack, Joan. We'll have one good rehearsal and then we'll shoot the scene. Now, Jack, you climb up there in the window. Okay, Mitch. Hey, give me a boost, somebody. Righto. Thanks, Mr. Zucker. Such a democratic studio. Now, Joan, we'll take it from where Jack stops shoes you pass by his window. You mean right here? Yes. Are you ready, Jack? Yep. I'm up here on the window sill. All right. I get a good grip with your feet and hang all the way down. Come on. Come on. Don't be afraid. Okay. Oh, there goes all my chain. Hey, get away from there, you. Oh, pardon me, Mr. Zucker. I love that, Mitch. All right. Ready for rehearsal? Action. Go ahead, Jack. Oh, Vivian. Vivian. Conrad, why are you hanging out of that window? Hold it, hold it. Now, Jack, please don't blush when you're talking to Joan. You're not supposed to be bashful in this scene. But, Mitch, I'm not blushing.  Well, naturally it's red.  Well, stop it. What do you want me to do? Put a detour sign in my stomach? You're just being unreasonable. What are you laughing at, Mary?  It's blue. I'll go away. All right, now take the scene again. And, Jack, remember, when you start proposing to Joan, be sure and get down on your knees. But, Mitch, how can I get down on my knees when I'm hanging out of a window? I shall fall down and break my neck. All right, what's the difference? It's only a rehearsal. Oh, this is awful. Say, Jack. Yes. What would you give to be back and walk heakin' right now? Never mind that. Now, please, Mitch, let's get going here. I can't hang like this all day. All right, let's try it again. Oh, pardon me, Mr. Lysen. My name is Don Wilson. Yeah? Well, what do you say on your mind? Well, I was just thinking, as Jack is so identified with Jell-O, couldn't you have him fall out of the window into a bowl of sliced bananas? Sliced bananas? No, that would be corny. Now, never mind that. Let's get through with this scene. I'm very uncomfortable here. All right, we'll shoot at this time. Light them up. Quiet on the set. We're turning. All right, ready? Right? Action. Oh, Vivian. Vivian. Conrad, why are you hanging out of that window?  No, but Lysen is. Vivian, there's something I must say to you. I know what you're going to say, Conrad, but it can never be. But why not, dearest? You love me, don't you? Come on from here. Hey, Mitch, Mitch, somebody help me. Take it easy, Jack. I'll bring you back to Sandwich. Thanks, Mr. Zucker. See, he's a nice fellow. If you want to make your family happy, just say homemade strawberry ice cream for dessert. Then give them the best they ever tasted, smooth and creamy, luscious with that flavor of real strawberries and easy to make. Use jello-freezing mix for perfect strawberry ice cream, a lovely color, a perfect mixture, smooth and mellow and creamy, and what a taste. For in jello-freezing mix, you'll find real sliced strawberries in their own sweetened juice. Tempting and delicious is only real strawberries can be. And it's so easy to make, the youngsters could do it. All you do is open a can of jello-freezing mix, add milk and some whipped cream, and pour into the freezing tray of your refrigerator. Stir just once while it's freezing and get six servings of swell ice cream with that real homemade goodness. You'll like all six luscious flavors, strawberries, chocolate, vanilla, orange, pineapple, tutti fruity, and maple wallet. So why wait? Have a delicious treat tomorrow night. Homemade ice cream for dessert made just perfect with jello-freezing mix. Last number of the 37th program in the New Jello Series, and we'll be with you again next Sunday night at the same time. I want to thank Joan Bennett and Mitch Lyson for coming over here tonight and helping us out. What is it, Mary? I was only kidding before. I think Joan is awfully cute. Yeah. And you know what? What? I'm going out to dinner with Mitch Lyson. You are? Well, then I'm going out with Joan. Are you ready, Joan? Right here, Jack. Oh, come on, let's go. Well, but Mitch and I have a better time than you two. So do I. Good night, folks. Just from Coconut Grove, Kenny Baker appears on the Jello Program for the courtesy of Mervyn Leroy Productions. This is the national broadcasting couple.


This study investigates the psychological outcome characteristics of nurses in different Asia-Pacific countries and compares them to other health care workers, finding that nurses were least psychologically affected compared to doctors and other health care workers. The study uses decision tree-based machine learning models and SHAP value plots to identify contributing factors to these differences. This article was authored by Yan Hongdong, Mei Chun-Yi-Oh, Siang Tsong-Tam, and others.


What's going on everyone Sam here with late sports cards from 2223 tops you have a club competitions Find a soccer hobby eight box case break number six random team style There is a look again at your random results as always you can find those on the website under the results tab as well As the link in chat Good luck. Let's do it God Jeremy with a mosaic spot Matt with the cardinals and finest and Derek with the Jags and number 11 down to 3 in Mosaic 11 everybody mosaic PYT number 11. That's what we got coming up next Petitions honest here we go again all Of the last breaks are on sale as well that being finest is on sale not finest and he is on sale You've got Of the flawless is on sale. That's what I meant to say the wrong F I need to help me with some of this. I'd say here Kyle It's a prize footballers Gonzalo Ramos. That is a Benjamin Sesco to 150 prize footballers on the blue Colac No doulac in there in this right Silver D D. John Camarie purple shimmer Mattiah Suley to 199 who bent this Yeah, it's super nasty super red dope At price footballers Benjamin Sesco late blue Luca Modric to 275 real Madrid and Reese Jean Christopher and Coon-Coo go to Leipzig. Nice one there on the refractor auto rats on that Peterson Alejandro Garnaccio nice one there man United on the rookie and base Three to go on iMac Divi's ripping right after this everybody that is a refractor mark Andre Stagan rookie Pablo Torre and Luis Diaz Patriots gone and mosaic. Thank you. What Kevin? Kevin s. Thank you, buddy Hey, was that 11? Well nice down to four to go in 12 now got an orange here. I'm in son orange Antoine Griezmann for at Letico 3 of 25 Nice one there. That's awesome Congrats Eduardo Camarinha And all NT spots are on sale as well guys won a team in national treasures you seen at Lee at his moments of Zidane Dean Zidane Thank you, Zenadine Zidane Always get that one mixed up price footballers Lavandoski purple Sergio Ramos to 299 PSG and Matisse tell This is a serginio desk Jude Bellingham nice one there 70 a 99 for Dortmund Congrats Dortmund. That's gonna work. Just fine going to Bryant K What are you? Where's he not real?  You're like look at it. Yeah, it's just hanging there They're pretty well in his personal nice and all though came out of that Price footballers Makayla Moudric price footballers Bernaldo to 299 nice when there's is that what sporting right? Yes sporting Ronaldo that is Alfie Devine Hakan Arnar Haraldson to 199 on the shimmer Copenhagen Purple shimmer Price footballers Hollanda is a green Manuel Ungarte for sporting to 125 Reese James Jeffrey H pick up the Lions and Chargers and NT. Thank you Jeffrey. Jeffrey appreciate you buddy That makes it to under 20. I believe now Fabio Conovaro for who vent this to 99 on the green wave And just three to go I'm active. He's breaking right after this Kyosaka refractor and Malik Tillman John Luigi Donnaruma Angelia Schlitterer from Enfika on the roof on to the next one. Here we go Hope everybody is doing well on this Tuesday night price footballers. I was a Henrik Larson resultic Sergio Aramos Mariah, Jr. Moments is Frank Ricard Random Jamal Muziola green Makalo Moudric to 99 a double check on the moments But that would be the only one I think nice. That's Fabio Carvalho to 500 price footballers auto Congrats to Liverpool. It's going to Shane Shane. Nice one there, buddy Fabio Carvalho auto Jeff M with what two teams and mosaic very nice Dion Camarie to 299 I mean gory and based on the refractor rookie two to go on mosaic random team number five We'll just have one more random team of mosaic to fill up tonight.  Nice one there. Congrats PSG very solid Not numbered price footballers Carvalho purple Dario Asugo for sporting to 299 and Valentin Carvone Never super frat there Matisse tell the 275 that is a green auto Alfonso Davies to it 99 for Byron Nice one there congrats Byron Munich Byron Munchin that is a blue of Isahaku Fatahou to 250 sporting the siri do yeah Carlo Mujica, that's William Clem Copenhagen Julian Alvarez rookies and Antonio Nusa Yo, yeah, oh, yeah price footballers Gabi purple in Bapé price footballers to 299 congrats PSG Marcus Edwards rookie for sporting Leon King purple shimmer Timo Werner to 199 Leipzig Price footballers in Bapé blue is Eerson to 250 the vapor blue vapor That's Fabio Polanco Barcelona refractor rookie auto nice one there congrats to Bartha Nikola Zalewski for Roma rookies Enzo Fernandez Toreme and There's price footballers grease mom. Hey Erling Holland to 99 price footballers on the Green Lava Congrats to Man City Jude Bellingham Antoine Griezmann purple shimmer Leonardo Bonucci Bonucci to 199 who bent this when you call up price footballers CR 7 Christiana Ronaldo Fashion Sakala for Rangers. There you go again shame to autos for you now buddy Fracturado that is Christian Volpato rose gold many diamonds Lucas Gornadouac to 50 for Salzburg and base rookies Isa Haku for Tau for sporting Rio Hattatae and to more Looks like it purple Vanalsen to 299 Porto Karim Benzema, yeah two autos ain't bad for sure Plus liver isn't Liverpool is a super deep auto checklist shredder up refractor rookie moments is In got in Zaghi Sondra Tonali price footballers Kaffu. There's Deon Khmeri to 150 Erling Holland base Refractor auto Eduardo comma vinga Riala Drid nice one there congrats Rial Madrid Anthony refractor and base Warren Zaire Emery Warren Zaire Emery again both refractors PSG All right guys again, we've got just Three spots to go three divisions they are on sale in I'm act I'm act baseball three to go breaking next Is I'm act baseball Also, just have a handful of PYT spots available in mosaic football Panthers included in the second break All teams remaining are now on sale that also goes for NT He is also on sale Yeah, there are nebulism of their choice, right? Yeah, hung men's son green Thomas Moyer 299 and so was I yep Oh, yeah, imagine what the Bryce young and CJ Stroud are gonna do Alvaro Morata moments is Zidane Zinedine Zidane Price footballers Lavandoski late blue Leonardo Bonucci to 275 and Lint outdoor So Bobby, how you doing buddy Rudy Bargey and gold dual auto Marco van Basten and Frank Ricard One of 50 AC Milan. That's kind of nasty Going to Corey D. Congrats Corey. I saw in there buddy Sergio Ramos. Yeah, that'd be a good mosaic choice is fun Dude, you have the peacocks in there as well purple Lavandoski to 299 Gabriel Martinelli refractor That is just say Jimmy Jaime Beno-Gittins and Number two price footballers Alessandro Del Piro at purple Memphis to pie to 299. He's one of my favorites. I like Memphis to pie. He's not embarrassed He's kind of nice honestly in the in the World Cup Matthew O'Reilly moments is Patrick Clover Swift overshadowed the game public Torrey rookie. That's facts My dad said let's wait and it was all gone. I know this was a quick one for sure cream Benzema price footballers. I guess That is a Jude soon sup bell for Potom That's when they're hot spurs Bobby with the Bears in number 11 Tom B with a mosaic spot. Thank you Bobby and Tom Green Benzema Jadon Sancho Hate when I do this dude Like make it a film window Then you got X out and go back in Fabio Carvalho Sergio Ramos and more base Very annoying Overall Kyle I would say very annoying Eric see with the commanders in number 11 we're almost sold out on number 11 I think John with a mosaic random team. So that might be sold out the second one One in five to go 11 the last team is the Rams Number five random team is sold out now. So we are sold out on to mosaic four box random teams Thank you all there I mean, I suppose if the Rams sell we'll rip mosaic next and we'll just move I'm back back a little bit. We can move to after the mosaic breaks just move all of mosaic up But if I'm axels will do that next price footballers Henry Clarkson Andreas Skav Olson the 299 and Pepe Refractor Jude Bellingham moments is Frank Riccardo or where's he? Easy mom price footballers. Malmousiella. There's Connor Gallagher to 275 for Chelsea and Sondra Tonali Timo Werner nice one Leipzig on the refractor auto congrats to Leipzig Green mini diamonds Gabriel Verone to 125 Erling Holland Martin Odegaard another guy First hundred million dollar contract for the Pirates of all time That's a Kamata. There's Hugo Eckateke and Marco Royce. What's up?  That's a rose gold Mario Colt say 275 He was a hero in the World Cup in what 2014 Yeah That's Rio Hattate for Celtic on the refractor auto congrats Celtic That is Dario Asugo Silver refractor Jeremy Doku Green is Daiche Kamata to 99 for Frankfurt and Garte John Khmeri Raphael Leo and John Oblak knows a bot You think that's confirmed at this point Yeah Is that Fridl? TJ Fridl DJ Fridl Tom with two spots and six. Thank you, Tom Again three to go in iMac Divis everybody three to go To go gotta get that filled up price footballers hung men's son purple Jamie But no get ins to 299 Lucas Suchich. It's Joe Alconcello moments Zidane Zinedine Zidane Hi Suley rookie Price footballers Lavandoski will guard day and a sugo if you're grabbing in the marathon here Ansgar Noff for Frankfurt on the refractor off What's up? Yeah Gabriel Martinelli Green Young Young Oh Green Lava to 99 for Celtic and Barbera Matteo Tom Longo rookies Jamie Ben O. Gittins Dortmund and Benjamin Cesco Price footballers Gonzalo Ramos that is Rose gold Matisse tell to 75 for Dorman or not Dorman by me That is my fist the pie. We got the man of Luis Figo going it to Royale or real. Yeah, Real Madrid, Luis Figo the man Cesco there's Sotiris Alexandro Polis to 299 sporting assuming he is Greek Sounds like a Greek last name That is a Erling Holland to 50. We got a gold Serginio desk 31 of 50 AC Milan's Milan killed it man. Milan really killed it on this one Congrats, AC Milan Kyle Moudric. Uh, Timmy, uh, Tammy Abraham. That's your boy Pablo Torre Barcelona Alfonso Davies and Tebo Cortua If you need if you're doing the rainbow on that there is an orange probably currently on eBay Price footballers Gabi blue is Mo Salah to 250 Blue vapor on our Haraldson. That is Kiyoko Furahashi the man for Celtic Rats on that Celtic killing him Bop it price footballers purple Manuel Neuer to 299 for Byron Mueck Tonya Noosa that's Cameron Carter vickers for Celtic nice one there. Congrats Celtic on the refractor auto and Tebo Cortua hola Di Bala This is one of the breaker top-loader duos to exist That's an errands into 125 backs on this is definitely one of the breaker top-loader duos of all time one of the Alex Lowry and so Fernandez and Tia Sule. Thank you for the kind words on Jags are available in mosaic number 12. There you go like the Jags. I think my knowledge they are Rookie cards and more just subscribe. Thank you. We'll see cards and more. What is the end more? Many jittering cards Makes sense. Let me maybe it's Pokemon That is a price footballers Erling Holland blue is to Maso Barberi Um to 250 on the blue vapor Come on with the dual Patriots Jags Profile pick is a Haku fatalu for sporting refractor rookie auto nice one there Congrats sporting Dominic solvizai Refractor our node a Kali moindo blue Hakan Arnard Haraldson to 150 Ryan Graven birch That is rookies entree a Schlitter a Antonio Colac and lint a door real quick recap everybody That we'll do it for is the break sir Got refractor autos is Is a Haku fatalu Cameron Carter vickers on czar on to garden off Rio hatate Timo Werner Jude suits up Bell Eduardo come of Inga Fashi on Sakala Fabio Blanco Chris Rancuncu Fabio Carvalho to 99 Jude Bellingham Alfonzo Davies Fabio Conovaro lead I'll messy the man again. That was not numbered go for on Serginio desk to 50. Let's go man. That is gonna be Marco van Bassin and Frank Ricard one of 50 on the dual Congrats AC I'll do it for the break guys. Thanks again for the pill coming up next is on it


Let me show you how I cook a pheasant. Now, the way I don't cook a pheasant is to take a whole pheasant like this and throw it on a grill or whatever, because the breasts are very, very lean. They're going to cook very quickly. The legs and thighs are very sinewy, so they need to be cooked low and slow. So, how do we start with the pheasant breakdown? Removing all parts. There's a leg, there's a leg, and I'm just going to cut straight down the breast bone to remove the breast. This is a wild bird.  There's the breast. So, these are much leaner than the pen-raised birds, and certainly leaner than a chicken. You just don't see any fat on here. Now, this carcass here. This is stock material. So, I save my pheasant pieces, pheasant parts, to make stock at them. Brown it with some celery carrot onion, throw it into a stock pot. Cold water, let it simmer. It's so much better than anything you can buy out of a can or use with a bullion cube. So, even if you don't have a lot of pheasants, let's say you've got a couple of pheasants. You've got a couple of chuckered bodies. You've got a wild turkey that you've broken down. You can break the whole thing down and make a delicious stock out of it. But really, cooking that pheasant all by itself, all together, doesn't make sense. So, the legs and thighs, I'm going to brown them and then braise them.  Cover it up with foil or a tight-fitting lid, and it's going to take several hours at about 300 degrees before that pheasant meat pulls off the bone. Then you can take the bones and add that to your stock pot, and you're using the whole deal. But for this breast, very, very simple. I've got some large olive oil into a hot cast iron skillet. I'm also going to put a little butter in there. Once that skillet is hot and not a minute before, I'm going to add the pheasant breast and look again just at how thin these are and compare these to chicken or to a pin-raised bird. The wild birds are a lot leaner, but they taste great. People that tell me that they think pheasant is gamey, I don't get it. There's nothing gamey about a pheasant, a chuck or a quail. Here's one of the things that I've done with people that say that game is gamey. I said, all right, now this is elk. I know you don't like game, but try this elk. I don't think it's gamey at all.  And what I've done is I've given them a piece of beef instead and told them it was elk. But just when I planted that seed, they're thinking, oh yeah, it's gamey, all right. Skin side down. I've got a little of the high mountain poultry rub. What's great about the high mountain products is that they're low in salt. They're high in flavor, low in salt. Let me flip this guy over. I'm going to turn the heat down just a little bit. And it's okay to flip it a time or two. I'm going to season the beef side now with some more of the high mountain poultry rub. Also, a good hearty herb from the backyard. I've got some rosemary.  And you want to add the rosemary early on so that it releases the oils. It's good hearty flavor. It's not like basil cilantro parsley, which is more delicate. I've also got some garlic, which I'm going to add right towards the end. And a little jalapeno for heat. Maybe a little more jalapeno for heat. It's really close. I mean, real time, this is super close. I know that my pheasant is done because it's still going to be just a little tiny bit pink in the center. Nothing bad's going to happen. If you cook it too long, it's going to dry out because of course there's no fat in there. This butter will help things out. That'll help give it some fat. Kind of smooth out the edges. Here's some jalapeno. I don't like jalapeno. Okay, then don't put jalapeno in, right? I can't believe you put jalapeno in. There's some nice, beautiful heirloom tomato that I've just taken off the outside. Now I can throw that garlic in. I don't want to throw it in too early or it'll burn. A little lime juice for flavor. So we've got lime, butter, olive oil, garlic, and rosemary. All right, I know that it's done just by feeling it like that. You press down. I can tell that this is just done and not overdone. Get all my good stuff in here. Got a little riced cauliflower. Put my pheasant breasts right on top. A little rosemary, pheasant breast, not dry, not overcooked, not gamey, just really, really good.