Una Kravets talks to the panel about CSS and its future. We dive into what Houdini is and how much of it is implemented in the browsers. She explains how the changes outlined in Houdini will improve the user experience on the web and developer experience for web developers.

 

Special Guest: Una Kravets.

Hey folks, I'm a super busy guy and you probably are too. You probably have a lot going on with kids going back to school, maybe some new projects at work. You've got open source stuff you're doing or a blog or a podcast or who knows what else, right? But you've got stuff going on and if you've got a lot of stuff going on, it's really hard to do the things that you need to do in order to stay healthy. And one of those things, at least for me, is eating healthy. So when I'm in the middle of a project or I just got off a call with a client or something like that, a lot of times I'm running downstairs, seeing what I can find that's easy to make in a minute or two, and then running back upstairs. And so sometimes that turns out to be popcorn or crackers or something little. Or if not that, then something that at least isn't all that healthy for me to eat. Uh, the other issue I have is that I've been eating keto for my diabetes and it really makes a major difference for me as far as my ability to feel good if I'm eating well versus eating stuff that I shouldn't eat. And so I was looking around to try and find something that would work out for me and I found these Factor meals. Now Factor is great because A, they're healthy. They actually had a keto line that I could get for my stuff and that made a major difference for me because all I had to do was pick it up, put it in the microwave for a couple of minutes and it was done. They're fresh and never frozen. They do send it to you in a cold pack. It's awesome. They also have a gourmet plus option that's cooked by chefs and it's got all the good stuff like broccolini, truffle butter, asparagus, so good. And, uh, you know, you can get lunch, you can get dinner. Uh, they have options that are high calorie, low calorie, um, protein plus meals with 30 grams or more of protein. Anyway, they've got all kinds of options. So you can. Round that out, you can get snacks like apple cinnamon pancakes or butter and cheddar egg bites, potato, bacon and egg, breakfast skillet. You know, obviously if I'm eating keto, I don't do all of that stuff. They have smoothies, they have shakes, they have juices. Anyway, they've got all kinds of stuff and it is all healthy and like I said, it's never frozen. So anyway, I ate them, I loved them, tasted great. And like I said, you can get them cooked. It says two minutes on the package. I found that it took it about three minutes for mine to cook, but three minutes is fast and easy and then I can get back to writing code. So if you want to go check out Factor, go check it out at factormeals. Head to factormeals.com slash JSJabber50 and use the code JSJabber50 to get 50% off. That's code JSJabber50 at factormeals.com slash JSJabber50 to get 50% off.

 

Hey folks, I'm a super busy guy and you probably are too. You probably have a lot going on with kids going back to school, maybe some new projects at work. You've got open source stuff you're doing or a blog or a podcast or who knows what else, right? But you've got stuff going on and if you've got a lot of stuff going on, it's really hard to do the things that you need to do in order to stay healthy. And one of those things, at least for me, is eating healthy. So when I'm in the middle of a project, or I just got off a call with a client or something like that. A lot of times I'm running downstairs, seeing what I can find that's easy to make in a minute or two, and then running back upstairs. And so sometimes that turns out to be popcorn or crackers or something little, or if not that, then something that at least isn't all that healthy for me to eat. Uh, the other issue I have is that I've been eating keto for my diabetes and it really makes a major difference for me as far as my ability to feel good if I'm eating well versus eating stuff that I shouldn't eat. And so, um, I was looking around to try and find something that would work out for me and I found these factor meals. Now factor is great because a, they're healthy. They actually had a keto, uh, line that I could get for my stuff. And that made a major difference for me because all I had to do is pick it up, put it in the microwave for a couple of minutes and it was done. Um, they're fresh and never frozen. They do send it to you in a cold pack, it's awesome. They also have a gourmet plus option that's cooked by chefs and it's got all the good stuff like broccolini, truffle butter, asparagus, so good. And you can get lunch, you can get dinner. They have options that are high calorie, low calorie, protein plus meals with 30 grams or more protein. Anyway, they've got all kinds of options. So you can round that out, you can get snacks like apple cinnamon pancakes or butter and cheddar egg bites, potato bacon and egg, breakfast skillet, you know obviously if I'm eating keto I don't do all of that stuff. They have smoothies, they have shakes, they have juices, anyway they've got all kinds of stuff and it is all healthy and like I said it's never frozen. So anyway I ate them, I loved them, tasted great and like I said you can get them cooked. It says two minutes on the package. I found that it took it about three minutes for mine to cook, but three minutes is fast and easy and then I can get back to writing code. So if you want to go check out Factor, go check it out at factormeals, head to factormeals.com slash JSJabber50 and use the code JSJabber50 to get 50% off. That's code JSJabber50 at factormeals.com slash JSJabber50 to get 50% off.

 

CHARLES MAX_WOOD: Hey everybody and welcome to another episode of JavaScript Jabber. This week on our panel, we have Amy Knight. 

AIMEE_KNIGHT: Hey, hey from Nashville. Sorry about the so-so audio today. Temporary situation. 

CHARLES MAX_WOOD: You sound fine. AJ O'Neill. 

AJ_O’NEAL: Yo, yo, yo. Coming at you live from six inches from the mic today. So you're welcome for the audio.

CHARLES MAX_WOOD: I'm Charles Max Wood from DevChat.tv, and this week we've got a special guest, that's Yuna Kravitz. 

UNA_KRAVETS: Hey, happy to be here, excited to chat with you all. 

 

Wish you could speed up your release cadence and skip the rollbacks and hot fixes? What if you could move faster, limit the blast radius of unforeseen problems, and free up individual teams to deploy as fast as they can develop? Split's feature delivery platform gives you progressive delivery superpowers, like decoupling, deploy from release, gradual rollouts with automatic telemetry to detect issues before they show up in operations graphs, and the ability to prove whether your features are hitting the mark using real user data, not the highest paid person's opinion. To learn more and sign up for a free trial, go to split.io. 

 

CHARLES MAX_WOOD: Yeah, we're happy to have you. Do you want to give us just a brief rundown of who you are and why you're famous and important and...All that stuff? 

UNA_KRAVETS: I mean, I wouldn't call it famous. It's like our small dev community. Well, you know, to each their own. But I'm Yuna. I am a developer advocate for material design, working on the Google Material Design team. I've done a lot of work in experimental CSS in the past and some topic areas that I've been really focused on lately are color, Houdini, which we're going to talk about today, I think is really interesting and sort of like the future, how people are going to style the web. And I guess people know me from the CSS world where I've done a lot of sort of focus on filter effects and animation and image optimization and sort of layout things and I've tried to keep it fun, lighthearted, creative. And I feel like there's a lot of interesting topics that we can also dive into along those lines and definitely Houdini is one of them. 

CHARLES MAX_WOOD: So with Houdini, I mean, I went and looked a little bit, but for those that have just kind of heard the term and then just went back to work because we're all busy writing actual code that does actual stuff. Can you just give us kind of the 10,000 foot view on what Houdini is? 

UNA_KRAVETS: Yeah. So I think most developers sort of have that either, Oh, I might've heard about it or I haven't even heard about this thing yet. And that's a safe place to be right now because Houdini is a very experimental technology. And it's sort of this umbrella set of terms that the CSS working group and browsers are working on that give developers more access to CSS object model directly. And so that means that developers are gonna have more control over telling the browser how they want it to read and render CSS code, which is super, super powerful. And just to give you an idea of what these APIs are, they include the Layout API, which affects layout of the page, the Paints API, which is the most supported one right now, and that's why I do a lot of examples with Paints. There's the Properties and Values API that allows for some really cool dynamic custom properties, but gives them more semantic meaning, which I hope that we'll get into in the show. There's the animation worklets, and then there's also the typed object model. And so all of these essentially give the developer more power, but they are also intended to make the browser more performance at reading and rendering CSS. And so there's a lot of really cool, exciting details that all of these are sort of helping out with, and I get really excited about this topic.

AIMEE_KNIGHT: Totally. I have so many questions because this is something I had really dug a good bit into back, I don't know, a year and a half, two years ago. I was really, really, really excited about it. I guess one of my questions now, because it's been a little while since I've taken a close look at things, and I know Chrome was really on board more than any other browser. Do you know, or can you update us on the state of being able to use these things in other browsers?

UNA_KRAVETS: Yeah, so that is a really good question. And there's a great resource called ishoodinireadyyet.com. That's the website, ishoodinireadyyet.com. And on that website, there's a list of every browser and the W3C spec and their current status. So whether that be shipped support, intent to implement in development or no signal, it shows you the current status of all of those different APIs and the workloads and the browsers that intend to implement them. So to answer your question about what can I use today, Properties and Values API, the Pain2API, and the TypedOM are shipped in the most recent Chrome, Edge, and Opera browsers, as well as Samsung internet, because these are all using the Blink rendering engine. And then there's an in development for those for Safari, partial support for Properties and Values in Safari, and then the Properties and Values in development for Firefox, which is on the Gecko engine and then intent to implement for the pain API, let API typed OM for Firefox. So if that was hard to visualize, check out the website. 

AJ_O’NEAL: It sounds like they could have just renamed the website to has Apple adopted Blink yet. 

AIME: Good one. 

CHARLES MAX_WOOD: Now, when you say Safari, are you talking mobile or desktop? 

UNA_KRAVETS: I'm talking about the web kit, the web kit engine specifically. 

CHARLES MAX_WOOD: Okay, so both.

UNA_KRAVETS: Yeah, although they do have different implementation timelines, but at least the information that this website provides is sort of just about how that browser engine is doing in terms of implementing some of these core features, and that's a requirement for them to work in the browsers. 

AIMEE_KNIGHT: So when I was digging into this, it seemed to me like the Layout API might be the most practical. And did you say that's the one that you've worked most heavily on? 

UNA_KRAVETS: I would actually say that. Well, I have worked mostly with Paint because it has more support right now. The API is more solidified because it uses a Canvas-like syntax, which already exists. With the Layout API, there's a couple of things that have shifted and changed around. And also, the way that you talk and write to the job is it's a whole new language. It's like children and fragments, and that can get kind of interesting. So that isn't fully supported in any browser yet. There's partial support for parts of this API. And there's been some really cool demos with things that you can do. But the Layout API, my colleague Sam Richard did this really interesting demo where he created this circular navigation. And so essentially what this Layout API does is allows you to write your elements just like you would in the DOM with accessibility in mind, just writing them out as say like a navigation items in the list. But it allows you to adjust that layout to be say a circle or random if you want or to like fit whatever screen or implementation your user is accessing that page from. So this basically lets you rewrite that layout engine, which currently the layout engine is like, we have flex layout, we have a float layout, we have a grid layout, those are existing layout API implementations. And so this lets you write new ones. So your layout could be circle layout or something like that. 

AIMEE_KNIGHT: Maybe I'd be curious what others think, but I guess it might be helpful to start with what you think JavaScript developers might find the most useful and just kind of give us a tour from there? 

UNA_KRAVETS: Yeah, sure. So in terms of what you can use today and what you can use in a progressively enhanceable manner, which is where I think you should start with this since it is experimental, there is paint, properties and values, and the typed object model. Now I will say a warning if you are using Houdini in an application and not just like in a side project or doing some experimentation with it, you really need to think about fallbacks and test your browsers, do a lot of browser testing, different versions of browsers to make sure that you're not breaking someone's experience. And that's why I say asterisk on the layout API, because that changes a lot. Whereas with the Paint API, you can progressively enhance relatively easily without affecting the core experience and sort of making it hard to access data. So I guess we can start with Paint. All right. 

CHARLES MAX_WOOD: Let me dive into that real quick. This is all experimental stuff. It's stuff that's coming. So why do we care about this right now? 

UNA_KRAVETS: So this is going to change the capabilities that developers have for styling their sites. And that is a really big deal. Right now there are things that we just physically cannot do. An example of that is angled corners on the web. Right now, we as browser developers, as people who build on the web, need to wait for groups like the W3C, CSS Working Group ECMAScript groups, so they make these decisions and we have to wait for the browsers to implement them and then we can use them as properties. What these APIs allow us to do is to actually write polyfills that are performance, that the browser understands in a way that's related to the topic at hand, which is CSS here, and that make it faster for our websites to render. So with the animation work that we can create some really complex data visualizations that leverage some of these browser internal engines that make it a lot faster for that to load and not crash our browser when this is fully implemented. So there's a lot of good reason to keep this sort of in your periphery. And it's not just visual styling, it's also like the underlying browser rendering that's going to improve the performance of your application. 

AJ_O’NEAL: So I with coupled with that, because you said some things that are dangerous, that are going to people are going to listen. 

CHARLES MAX_WOOD: I love that. Dangerous. Faster. 

UNA_KRAVETS: Don't quote me on the show. I know you can remind me and listen, but I'm not good. 

AJ_O’NEAL: So I want to point out in the Houdini documentation, it says basically, don't use this because if you do, you're going to screw up accessibility and you're going to make things slow. I'm paraphrasing, but that's basically what it says in the documentation. If I found the exact paragraph, I'd reread it. 

AIMEE_KNIGHT: This is a flow. Like what makes CSS cool for JavaScript developers? I feel like it's like cool again. And we stop people from saying like CSS is dumb. 

AJ_O’NEAL: I love the idea of polyfills. I love that. I very, very, very, very, very concerned about people breaking the web and doing stupid things. 

UNA_KRAVETS: Totally. With great power comes great responsibility. And I think that you can... 

AJ_O’NEAL: That's also in the documentation. That is literally quoted in the documentation in a yellow box. 

UNA_KRAVETS: It's the truth. I would actually make a strong connection to this and JavaScript frameworks, where with JavaScript frameworks, you can very easily break accessibility. And so it's really up to the framework owners, the authors, to make sure that that is a core part of what they're shipping with. And that should always be at the forefront. Now, that is particularly true when we're dealing with things that are core to the data that you're presenting. So that's why I kind of like to think of Houdini in its experimental state right now as something that's more presentational. And so when we talk about this, you know, what can I use today, I kind of point to, oh, paint API, properties and values like kind of fits into that. And then the typed OM, that's not you changing anything accessible. That's the browser helping you to sort of read and understand the CSS that you're writing. So I'm really glad that you brought that up because it's an important note if people are wanting to implement more robust Houdini in the applications today. 

CHARLES MAX_WOOD: Gotcha. Now, Amy did ask for a tour and then I derailed us. So yeah, let's get back to that. Right. We're going to do a scheduled Houdini tour. 

UNA_KRAVETS: Hop on board. 

AIMEE_KNIGHT: I'm going to design an OM object model, what that means for folks. But I'll let you do that, you know.

UNA_KRAVETS: Yeah. Okay. We can even start with that because it might make more sense. And some of these Houdini APIs are worklets that you register to your CSS interface. And some of them are more like features of the browser that are now capabilities. And the typed object model is one of those. When I'm talking about the typed object model, what I'm talking about is this ability to have faster and more semantic CSS parsing. And right now. What happens when the browser reads through CSS is it does this like string-based regex parsing where it's looking for like a subject. So it's looking for a class to look for a dot and then a string and it looks for this open curly brace and then a property and then it looks for a colon and it looks for a value and then a unit and then a semicolon to close that first property value pair. But then it needs to make sure that property value and unit all make sense in a line. And it's just really long to do this any structure or semantics to it. So with the typed object model, this gives you a typed definition to your CSS. It gives you object like CSS unit values, which is just some structured data that you can get back now. So it's not just the string-based regex parsing. You can now query this attribute style map and get values or set values. And there's just more semantic meaning there. So it's the point here is it's making CSS more of a first-class citizen. It's making it more meaningful to the browser and it gives the developer more access to different aspects of CSS. 

AIMEE_KNIGHT: Would it be accurate? Because this is kind of the way I think about it. The object model is sort of in a sense a way to tie the HTML and CSS together. 

UNA_KRAVETS: Yes. So there's different object models. There's like the CSS object model, there's the document object model, the DOM, there's different models. All the models are... All the...Parts of the browser, sort of the text of them has different syntax and it can be tied. But right now, the CSS object model is string-based. And what the typed object model does is sort of replaces that string-based slow parsing of CSS and gives it types, typed CSS. 

CHARLES MAX_WOOD: So does this give us some of the features that we're seeing in systems that are built in JavaScript, the CSS in JS type themes? 

UNA_KRAVETS: A little bit. But what do you mean by some of those CSS and JS type things? Because these are different. Like CSS and JS gives you benefits such as tree shaking for your style and code that is in the page. This is sort of just the browser to the user connection, the user agent to the CSS code link. And it also gives the user access to that with new methods like attribute style map dot set and get. 

CHARLES MAX_WOOD: So, yeah, to me it's kind of the, Hey, I can use a number as a number or, you know, I can tell it become more opaque without actually knowing, without actually having to know what the value is. Right. 

UNA_KRAVETS: Yeah. 

CHARLES MAX_WOOD: You know, things like that, but you tend to have to write a JavaScript function in order to bang on it. You can do it now. 

UNA_KRAVETS: Exactly. So you can write all this in JavaScript, it's really strengthening the connection between JavaScript and CSS. 

AJ_O’NEAL: So it can this stuff reasonably or will be poly filled in JavaScript, or is this at such a level that that doesn't even have a meaning right now? If you want it to poly fill the body, okay. 

UNA_KRAVETS: It gets kind of tricky because mostly no, but right now, if you were to write polyfill for something visual on a page. Like if you wanted something to exist visually that doesn't currently exist as an option in CSS in the current set of properties and values that we have, you would have to write JavaScript on top of that. And so that's sort of part of what Houdini is trying to fix where right now, if you were to do that, you would have to go through the entire paint composite layout steps for the browser. It would be like the cascade layout, paint and composite. And then your JavaScript polyfill would have to go through and repaint the page wherever you're applying those styling changes. But with Houdini, when you're applying changes at the CSS object model level before that cascade layout paint composite step, then you save that step and it's a little bit more performant. It's a little bit faster when you're rendering that visualization. Now with certain things like the angled corners example, there's currently no way to polyfill the capabilities that Houdini gives us. And as I like talk through some of the other features see a better illustration of why, but this is also an important reason why people know about this because it brings to light like these capabilities that there isn't really another way around. 

AJ_O’NEAL: So I, I'm either, I'm either more clear or more confused. I'm not sure which. So let me ask a clarifying question. I'm so when I look at the documentation here, I see CSS paint, worklet, add modules, CSS component dot JS feature of CSS Houdini is the worklet. And then I scroll down and these are like the only two examples on the page. I scroll down and I see the CSS paint function parameters include the name of the worklet along with optional parameters. So w w and then it just says my component. It doesn't seem to be referencing anything from the previous example, as far as I can tell. So is the CSS Houdini, is it JavaScript? Is it in a script tag or is it in a CSS file, where is it placed? 

UNA_KRAVETS: Are you asking is this JavaScript in CSS? Because yes, it is. 

AJ_O’NEAL: So it goes in the CSS file or it is a JS file using the global CSS object? 

UNA_KRAVETS: When you're talking about worklets in Houdini, what you do to write a worklet is you write the worklet logic in JavaScript. canvas-like syntax inside of this worklet file, you're going to be registering your worklet, you're gonna be putting in all of your input arguments, all of those values that you can then reference in CSS. What you would then have to do is in your index.html in your HTML file, you would have to add that module to the CSS interface. So if we're talking about paint, that'll be css.paintworklet.addmodule, and then you would add that to that interface then the end user would be the one that's using this in CSS. So if they were to then use that worklet, they would call it by name inside of the CSS file. So I think that the best use case for these worklets is sort of this library perspective where I could write a library of paint worklets, provide that logic in JavaScript, and the end user will never have to know those calculations. They could just use an angled corner worklet or a like rainbow ties worklets. And so that's sort of the beauty of it. And those workloads can accept arguments. They can accept custom properties as values. There's default values and this sort of all works with the properties and values API as well. I know. Yeah. 

AJ_O’NEAL: For that, do you use vanilla JavaScript? Like you just var my component equals function, or does it have to be a Babel script thing like export my component, how is this JavaScript file related to the way that you use it as a quote-unquote module? Because this seems very new. 

UNA_KRAVETS: It is vanilla JavaScript. So what I would do is first do a type check. And then inside of that, you could use a class to write this all out. But the core of it is that you're registering this module. So if it's a layout, you'd write register layout. If it's a paint worklet, you'd write register paint. And then you give it a name and you could write the worklet inside of that second parameter, or you could put the class in there, which I think is a little bit cleaner because they're usually a little bit more complex to write, especially if you have these input properties. 

AJ_O’NEAL: Okay, so my JavaScript file, like I open a brand new JavaScript file and I create a function called register paint in that file. Then in my other JavaScript file I call CSS dot paintwork, let dot add module quotes, whatever I just called my thing that registers paint dot JS that is going to then load that and then the CSS, which I probably actually had up in the head is referencing the new CSS paint function part of the CSS OM, and then I'm giving it the name of that I guess I don't understand the relationship between the quote component versus quote module, but maybe I'm going too deep. 

UNA_KRAVETS: Yes. So that is a little bit. 

AJ_O’NEAL: Well, there's the documentation is very, this is a new thing and it's not, it's not like there's pages and pages of documentation and examples here. 

UNA_KRAVETS: Yeah. And the other confusing bit is that there, there are like six different related APIs, but they're different. So going over all of it, like as soon as you want to be on the show and I heard it was an hour podcast, I was like, oh man, there's just so much to talk about. But essentially, what I was trying to describe earlier was that yes, with Houdini, when you're writing a worklet, you are defining to the CSS object model, how to reference this new type of property. And so that property is going to be your paint that you just registered. So you're registering that and you can now use it. So maybe I'll give a concrete example. Say I wanted to create a scalloped border. That's sort of hard to do with CSS. You can hack it with JavaScript. But say I want to use Houdini for this. So I'd write a worklet file. In that worklet file, I would register paint. Inside of there, I would get my input properties where I would get the radius of the scallops, the weight of the scallops, and the color of the scallops. These are things that are mutable. Inside of that, I would access those properties. I would access the subject itself I'm applying this to, I can get the context and the size, and then I can use that to draw this with Canvas by also accessing the radius, the weight, and the color of those scallops. So now, no matter what the size that element is, I'm able to access that with the height and width of the size of the context, and then I'm also able to get some of those details. Great, so I'm doing that math, I'm drawing that scalloped border, and then I'm going to have that all be living inside my workload. So I've registered this paint, I've given it a name, and then I've given it that logic. 

AJ_O’NEAL: So there's, there's, this is, you're doing a great explanation. This is really, really helping me at least, help us help other people too. I want you to continue with that, but one thing I'm confused on. So in node I do require in old browser, old school, I do a script tag, you know, SRC equals whatever, and an old JavaScript in the browser. If I declare something at the top level, you know, var foo that is automatically exported to the global by virtue of before exports and all that with this. I add a module by the name of the CSS file. The module inside of it contains a register paint, but I guess what I'm, the thing I'm most confused on is how am I defining the name of the module? Because if I'm calling my, my file is called CSS component dot JS. What is the name of my component quote CSS component, because the file name is CSS component dot JS. Or am I doing something in the register paint function to say register paint this name? 

UNA_KRAVETS: Yes. 

AJ_O’NEAL: This stuff. Okay. That's the, this, this is, it's missing from what I'm looking at here. Perfect. That makes sense. Yeah. I mean, again, these are sparse examples and I'm not digging too deep into it right now. But anyway, so continue on if you still have that train of thought continue on because this was helpful to me. 

UNA_KRAVETS: Yes. So on that train of thought, we just registered a paint. We gave it a name so we can call it like scallops and save the file name that lives within is called work with JS. Just to illustrate this point a little bit more, I write register paint scallops, and then I'd have the logic in there inside of the HTML is where we need to then add this to the CSS interface, which is what you're talking about. CSS.paintworklet.addmodule and then the file name. We're not referencing the name that we gave that worklet yet. And so as a worklet, this works outside of the main thread. And that's where some of this magic comes from in terms of performance benefits. So kind of like service workers live outside of the main thread of your application, so do Houdini worklets. So once we've registered this on the CSS interface, then in the style code, in the CSS code itself, We can access it. So we can do, say I want to add this scalloped background, we call it scallops, as a background of our elements, we can write background, paint, scallops, the name that we gave it inside the registerPaint function. Also a cool thing, you could put input properties and even arguments inside of this. You could put both. You could put custom properties and input arguments. And there's just like, you can just go down the rabbit hole. 

AIMEE_KNIGHT: So kind of my question is, could you use workloads in a way just to help with performance? 

UNA_KRAVETS: Yep. And that's the idea behind the animation workloads. I have seen some demos there. I have a friend, Nadia Bremmer, who does really amazing data visualization work. And she was using this workload as a means of being able to make some of that data viz even appear, which was good because otherwise, it would make the browser crash this because it lived in a separate thread outside the main thread was able to apply some more performant animation and interaction for her data visualization, which was super cool to see that live a year ago and now it's getting better. 

AIMEE_KNIGHT: Okay, that gives me some ideas of stuff I want to dig into then. 

 

Hey folks, this is Charles Maxwood and I just launched my book, The Max Coder's Guide to Finding Your Dream Developer Job. It's up on Amazon. We self-published it. I would love your support. If you want to go check it out, you can find it there the Max Cotters guide to finding your dream developer job. Have a good one. Max out. 

 

AJ_O’NEAL: So this, this could be something that if you have an electron app that you might realistically use and be able to rely on your customers having access to it. 

UNA_KRAVETS: In the future, when this is fully supported, that's the idea. You could use this in any application in any framework. This is something for the browser. 

AJ_O’NEAL: I mean, like as in a practical use case today, like I couldn't use it on the the, you know, it's just all spotty and some things can be polyfilled. Some things can be polyfilled. But as of, as of the latest windows 10 update now edge is blink. So that means that if I wanted to do an edge web view, I could rely on this on windows. So if I, if I know the person's windows version, I know that they've got blink and edge. And if I'm doing electron app, I know that they have blink. So I know that, and I am in control of what version of Blink I deliver to them with my Electron app as well. So I could practically like as a web developer, no, I can't use this on the web, but as, as an application developer, I can deliver applications that will work for my users guaranteed. 

UNA_KRAVETS: You know, I had never really thought about that, but that's a really great point. 

AJ_O’NEAL: Right. I've got to find the practical way to apply it. Cause you know, if we're just talking about something that's hypothetical, it's cool. But then I go back to sleep, right? But if I'm thinking about it in terms of, well, yeah, okay, where is a use case where I can benefit from this now? That's what I'm hoping to draw out from this. 

UNA_KRAVETS: Yeah. I will say though, this isn't really that hypothetical because we do have a really big majority browser support and also intend to implement from unsupported browsers. So it isn't perfectly supported yet. 

AJ_O’NEAL: I don't mean hypothetical in the harsh way. I mean it in the, it's going to take five years way. 

UNA_KRAVETS: I hear you. 

AJ_O’NEAL: I hear you realistically going to be able to use this for five years. Like if all these intends to implements are actually committed and Apple's not going to like back down and be like, just kidding. We want to screw everyone over and force them into the app store instead. You know, because that's how they make their money. Not on the web. 

UNA_KRAVETS: We, I mean, I can't tell the future, but I can see a future where that happens. 

AJ_O’NEAL: But what I'm saying is like, if everything goes according to plan and everybody's being diligent five years from now, as, as a web developer, I'd be able to reasonably put this stuff on a webpage and, and have an expectation that less than 1% of people are, are not consuming it. 

UNA_KRAVETS: Yeah. 

CHARLES MAX_WOOD: You know, to AJ's point, and one of the things on is Houdini ready yet, it has the W3C spec. So are we expecting this to wind up in the W3C spec? So eventually it's just CSS and not Houdini? 

UNA_KRAVETS: Yeah. Well, in the W3C there is this Houdini working group. And so this is a part of the W3C today. It's currently just the name of a set of APIs that are part of helping you write CSS and sort of extend beyond that. But it is CSS. It's just a new way of writing it. 

AJ_O’NEAL: Wait, I'm confused. Is it CSS or is it JavaScript? 

UNA_KRAVETS: It's, it depends on how you define it. Because the syntax. 

AJ_O’NEAL: It's not JavaScript. It's not part of JavaScript. It's not part of the DOM. Like, HTML creates DOM. You can use JavaScript to access the DOM, which is its own not quite language. But the DOM doesn't have arrays. The DOM has element lists, which are kind of sometimes similar to arrays and sometimes not. And so now we have this thing, CSSOM, which is probably not going to have a DOM list or element list. It's probably going to have hopefully normal arrays or maybe hopefully not its own proprietary CSS list, which is incompatible with every other thing. But it's an underneath. You access it through JavaScript, but it's not JavaScript. 

UNA_KRAVETS: Yeah. And I think that it really does depend on perspective, because the reason that this isn't just under the CSS working group and sort of adjacent to it but closely tied and sort of within it, is because it is a different syntax, it's a different way to write your code and to think about composition. And so ultimately this is all surrounded by this need to improve our CSS capabilities and the need to make browsers more performance. But the way that it's sort of being executed is through the syntax that needs to be more robust than what CSS in its syntax allows us to write today.

AJ_O’NEAL: So what I'm hearing is imperative CSS. 

UNA_KRAVETS: Yeah, I guess there's more logic that it allows, but it's still, it's so hard to define. So I just want to say this is unique, it's separate, but it's similar. 

AJ_O’NEAL: You're writing imperative CSS. You're defining, you're defining imperative CSS so that you can access it declaratively in traditional CSS. 

UNA_KRAVETS: That's a good way to define it. 

AJ_O’NEAL: So you satisfy both camps, like the hipsters and the old farts can both be happy. 

UNA_KRAVETS: Sure. I feel like this allows for a lot of really good things. I mean, of course everything has to be backwards compatible with browsers, but it also allows for experimentation and sort of paving the cow paths. So if there's a CSS polyfill of Houdini workload that is really popular, you know, maybe that's assigned to the CSS working group to implement that in CSS. So I think that this allows for that kind of experimentation in a way that's more performant for browsers and in a way that's more accessible for end users and developers. 

AJ_O’NEAL: Houdini is to CSS what prototype is to JavaScript. Not something that you should use, but something that can extend what you should use and you can polyfill what you should use until what you should use exists. 

UNA_KRAVETS: What is prototype? Because I'm not familiar with that. Is it a framework? 

AJ_O’NEAL: No, pro... Oh.

UNA_KRAVETS: I don't know what a prototype is. 

CHARLES MAX_WOOD: AJ is an old, old one. It's the precursor to jQuery. 

UNA_KRAVETS: A foundation for ambitious web user interfaces. 

AJ_O’NEAL: No, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, , as in monkey patching JavaScript to do something that it wasn't shipped with. 

UNA_KRAVETS: Oh, prototyping. Okay, I thought you were talking about specific... 

AJ_O’NEAL: No, no, no, no. 

CHARLES MAX_WOOD: Yeah, I thought you were talking about the prototype library from 10 million years ago. 

AJ_O’NEAL: I'm not talking about prototyping, and I'm not talking about prototype the library. I'm talking about, for example, array.prototype.remove equals function. So you should not use prototypes. It's a bad idea. But when the W3 spec defines something that did not exist, or you are, I don't wanna use the overloaded term, experimenting, when you are experimenting with something that does not yet exist, you can define a prototype on an object to polyfill the feature that is expected to exist, or that you are experimenting with, such that it. It appears to be native JavaScript, even though it is in fact a monkey patch. 

UNA_KRAVETS: In that sense, when you're talking about like, you know, object.prototype, that I would, I can see that comparison because it is, it is defining a new way, a new type, a new prototype, if you will, of your CSS and specifying what exists within it. 

AJ_O’NEAL: Yes. I think we have reached parody. We can all go home. 

AIMEE_KNIGHT: Like touching on what you said a minute ago though, and I probably did a poor job of kind of like trying to express what I was trying to say earlier. I think the thing that excited me the most about it, it was a while back, is I still think like the JavaScript community, much of it has this kind of like, we gave CSS a bad rap and I felt like this was like a really good way to kind of like bring CSS and JavaScript folks together because it kind of made CSS for lack of better words, more technical, something that you could get a little bit lower level with and experiment with and build with. I feel like that's such a good thing because the JavaScript community kind of suffers from not keeping up to date with CSS and these types of things because a lot of times the CSS way of going about it is more performant. Plus, you don't have to add chess then if it's in CSS. 

AJ_O’NEAL: Uh oh. That's a lie. 

UNA_KRAVETS: I feel like there's two things that... 

AIMEE_KNIGHT: Well, you can do end-to-end tests if that's what you mean, but you don't have to write like unit tests if it's in CSS. 

UNA_KRAVETS: Well, with some of the stuff, you kind of can test things in CSS. But anyway, I want to go back to what you said about CSS being less technical. I feel like that's a common misconception. I feel like a lot of JavaScript developers would be better developers if they did take more time to learn more broadly about the ecosystem. I think that CSS is very technical. And if you talk to someone who mostly works in the front-end CSS design worlds, they will be able to come up with really performance-strong examples of a visual interface that a lot of JavaScript developers might struggle with because they don't take the time to learn those concepts, which are just as technical as JavaScript is. But to your second point of this uniting those worlds, I do think that this does create a moment of unification because it is essentially outlining CSS capabilities in JavaScript, in a JavaScript syntax depending on the capabilities of that API that are provided by the browser. So I do think that this is something that will bring together that community, but I also don't like this misconception of JavaScript is more technical and CSS is sort of more frilly when in reality, they're both technical, they're just different. 

AIMEE_KNIGHT: Yeah, yeah, yeah. That's why I was excited about it. 

UNA_KRAVETS: So to your point of this sort of typing your CSS and error checking. There is one more API that I wanted to talk about that I've sort of hinted at, but like it's one thing that I'm almost most excited about within Houdini. And that is the properties and values API. And I'm just going to ask all of you, have you used custom properties with your CSS? 

AIMEE_KNIGHT: Fiddled around with it, but that's about it. 

AJ_O’NEAL: I don't touch CSS. 

UNA_KRAVETS: Got it. 

AJ_O’NEAL: So it's, it's, it's, it's more of the. 

CHARLES MAX_WOOD: It's because AJ lacks style. Sorry for the dad joke. 

AJ_O’NEAL: That's the one. He nailed it. 

UNA_KRAVETS: So when you write CSS, we now have a newer capability that are called CSS custom properties, really they're CSS variables, and they allow for you to define a custom property by name and value. So you have these name value pairs that you can specify globally in your roots, in your CSS, or within any of your CSS properties and then the cascade just like the rest of CSS. So these are super powerful because they are dynamic variables, which means that you have true dynamism, you can adjust these values in JavaScript. A really great way to use custom properties is to do your mathematical logic in JavaScript. Say you have a physics library, you can get values for animation through your physics library, and then write that one time in your CSS, and you're not really convoluting your logic and style because you're just writing it once in each place and you're updating that dynamic variable. So that's cool because we didn't have that before when we had preprocessors like SAS. We had these fake variables that would then process something static. So we have these custom properties, but with the Houdini properties and values API, we have these properties so you can actually give a lot more information too. And so you can create these objects that not only contain the name of that custom property, but they also can contain a syntax. a meaning. You can give that variable a meaning. What is this even? It's not just a string, but it could be a color. It could be a length. It could be even a custom identifier. And then you can also have default values that fall back. So if I had a custom property that was registering that was like a primary color, I could give that a syntax of color and an initial value of say pink. And then you can also define if it inherits from his parent or not. So now you have this ability of writing these variables that have meaning and it allows for you to do things like animate gradients because previously the browser was unable to understand this gradient transition since it read those color values as strings within that gradient and now because you're giving that custom property a meaning like color it can do that animation it can do a lot of other cool things and this is where you can't really polyfill those capabilities without the browser really giving them to you as an option. 

CHARLES MAX_WOOD: Now, if you change these properties, does it change the style on the fly? 

UNA_KRAVETS: Yep. So these work just like any other custom property. I think it's super cool. And they also, because of this default value, they have fallback. So if you have something like a primary color that you're applying to background, and then you update the color to be like a number, because you set the syntax to be a type of color, it's going to fall back to the color that you set for it, instead of ignoring the line like CSS otherwise would. So, I don't know, I think it's kind of cool because it's like type CSS variables. 

CHARLES MAX_WOOD: The thing I'm seeing is I want dark mode on my website and so I just click a button and it changes all the variable, you know, all the color variables instead of having to go and apply a different set of styles. 

UNA_KRAVETS: Totally, and I have a demo that I could share for the show notes that does that. So essentially what you're doing is you're just flipping those colors, you're using JavaScript to flip it. You have to attach that to the button, but then all you have to do is update those custom property values. And you could even dynamically calculate them. It's just, there's really great guidelines from Material Design for dark themes. And what some people don't realize is for dark themes, you don't just wanna change the color values. You also wanna desaturate them to make sure that you're not having too much vibration between those dark colors and those vibrant primary colors. And if you are interested in learning about dark themes, I will definitely check that out too. And I'll share all those links. 

CHARLES MAX_WOOD: Yeah, but I can also see like other themes, right? So I have three daughters, I have two sons too, but I could see my three daughters setting it up for like girl party mode and picking different colors or something. 

UNA_KRAVETS: Love that. 

CHARLES MAX_WOOD: My boys would just be like, so are there other APIs that we haven't talked about yet?

UNA_KRAVETS: Okay, let's see. We talked about layout briefly. We talked about paint. We talked about how to implement paint. We talked about the properties and values API just now. So we went over the capabilities of that. We briefly talked about animation worklet and we talked about the type object model. So those are all the ones that are currently in progress and have some demo ability on the web, or as you mentioned in Electron, I think that's a really cool use case for using this stuff right now. And so I feel like we did a pretty good overview of Houdini's capabilities in a more or less roundabout way. I feel like we got there eventually, but there's definitely a lot that this set of APIs provides developers. So I would encourage people listening to sort of check it out and see if any of these specific capabilities piqued their interest to just dive deep into those APIs because it's so early still and you could really have an impact on where this goes. And if you were to write about it, please send it to me. That would be great. I'm very interested in having people hear more about this and also just use it to make the web better. 

CHARLES MAX_WOOD: So you said that we've talked about all the ones that are generally being worked on now. So are there others that we haven't gotten to yet? And do we even know what those look like? 

UNA_KRAVETS: So there are two that are very broadly defined right now. There's the font metrics API and there's the parser API. And so this parser is sort of built on top of the typed object model API. And the idea is to help people work with objects and build custom parsing in JavaScript. This is sort of like still getting figured out. There's not even a W3C spec yet. There's just an explainer document. And then there's a font metrics API. And this specifically is for typography and flexible layouts and for variable typography. So the type of font data that we're now getting is a lot more robust, and we need a way to have more information that's easier for users to access. So these, I'm not sure about what the timeline is. They exist as ideas, like working through math layout, baseline grid, line breaking, things like that. But hopefully, we'll see some more movement on these in the future. 

CHARLES MAX_WOOD: Are there good places for people to go to keep up on this stuff, you know, so if the spec changes or if we get more implementation or things like that. 

UNA_KRAVETS: Yeah, so a really good resource is is houdini ready at.com because it does link to the spec it links to all of the information that you need in regards to browser support. If you want to play with this stuff right now, I built a library called extra CSS. And so the URL to that is extra dash CSS dot netlify.com. And what this is, is it's essentially a paint library that allows for you to use these workloads by just including one line of HTML in your code and then using it in your CSS. It'll have default values so those fall back or you could write your own custom properties to override those default values. And you can get things like confetti or sparkles or that scout border we talked about or like extra underlines. So you could have like 20 underlines instead of one underline for your legs. I don't know, why not? But this is sort of like a playground for people who are interested in understanding how this can work from an end-user perspective. There's a lot of really great articles out there as well. Another site that I really like is called css-houdini.rocks. And this is by IMVDO. And this is a showcase of Houdini experiments that shows some really cool things like animated highlighting, various like corner shapes. There's some really cool borders here that it shows. There's responsive backgrounds that kind of are trying to recreate element queries. So I think that there's a lot of really cool demos and experiments out there that you could totally go and look at. Some of these I've noticed have worked in the past and have become broken as the API is changing, for example, in the layout API, but others are more solid, like paint. 

AJ_O’NEAL: But if I was using Electron and delivering the correct version of blink. I wouldn't have to worry about it breaking on people. 

UNA_KRAVETS: Yes. 

CHARLES MAX_WOOD: Right. Cause it locks it in, right? 

AJ_O’NEAL: Yeah. Cause you, you choose what version you're delivering, essentially which version of chromium, which gives you the version of blink. 

CHARLES MAX_WOOD: All right. Anything else from either of you, AJ or Amy? 

AIMEE_KNIGHT: Nothing left here, but you have a re-invigorated my excitement to look at 

UNA_KRAVETS: I'm happy to hear that. Also, if you are playing with this at home and you are noticing that you're not seeing the effects, you might have to turn on a flag. Specifically some of the syntaxes like custom identifiers aren't supported yet in browsers. So if you're looking at a demo that has some unsupported parts, you're not going to see what that looks like. But you can go into your browser flags and enable experimental web platform features. And that should give you what you need to be able to see some of this stuff. 

CHARLES MAX_WOOD: Now, before we go to pics, if people want to connect with you online, what's the best way to do that? 

UNA_KRAVETS: You can find me on Twitter. I'm Yuna on Twitter. That's at UNA. And that's probably the best place to find me. I tweet about all the stuff that I do. I also have my own podcast called Tools Day. I have a web series called Designing in the Browser. But if you follow me on Twitter, you can find all those things. And I am super happy to answer any questions and chat with you about this. 

CHARLES MAX_WOOD: Awesome. And can we get links to all of that in the chat?

UNA_KRAVETS: Yes, I'll add that to our chat so we can add to the show notes. 

CHARLES MAX_WOOD: Yeah, and links to the other Houdini sites as well. 

UNA_KRAVETS: Yeah. 

 

Have you been thinking about building a mobile application, but you're a web developer and you're not really sure you want to learn Swift or Objective-C or Kotlin or Java or any of the languages that are used natively by those platforms? Well, you should check out React Native. React Native is a platform managed by Facebook. You can share a lot of your state management and other logic code between your applications. And we have a podcast that talks about all of the issues and all of the advantages of using React Native. And you can check that out at reactnativeradio.com. 

 

CHARLES MAX_WOOD: Let's go ahead and do some picks. Amy, do you have some picks for us? 

AIMEE_KNIGHT: I do. I was looking ahead of time and I think I have one that suits this episode pretty well. I am taking this from a changelog that I... I'm totally blanking. Whatever their JavaScript podcast is. Oh my god, JS Party. 

CHARLES MAX_WOOD: JS Party.

AIMEE_KNIGHT: So they had an episode that came out a couple weeks ago. And they talked about this repo that somebody put up, things you can do with a browser in 2020. And just some like... I don't know. I should say like, yes, there are concrete things we can do with Houdini right now. But it is pretty new. So some of this stuff, like they say, probably something you don't want to actually use in a production application for your company right now. But cool stuff to explore that will be potentially usable in the future. So I'll put a link to that repo in the show notes and that's it for me. 

CHARLES MAX_WOOD: Awesome. AJ, what are your picks? 

AJ_O’NEAL: I'm low on picks this week. I think I will pick come back to me in a minute. 

CHARLES MAX_WOOD: Alrighty. I'm going to throw out some picks. Now lately I have been fighting the fine sponsors fight and there's a lot going on there as far as, you know, who you can reach out to, how to find leads, and I think I've kind of started cracking the code to this. We had things slow down for a little bit and you know, you ramp it back up. I think the key, the key to most of us follow up. And I've been using a tool called Gmail. And as you can imagine, it is a browser extension that goes in and enhances Gmail and uses your Google account. What it does is it allows you to turn. So you can automate emails going out from your Gmail account, right? Cause if it says it's coming from a CRM or something, the deliverability goes down. But if it's coming from me, then I can personalize it. I can make sure that it's going to the right person and it's coming from me. And so when they reply, it just comes back to me. And so I'm really liking that. You can also turn emails into tasks and back again. And so I'm really digging that as well. And when you turn them into tasks, it puts them into what looks like a con bond board and I'm really digging that. So that's really helping with the followup. And then, yeah, I've just been using LinkedIn to connect with people. And it's amazing. What a great tool it is for that. I, initially when I got on it, I thought, Oh, well, you know, I can connect with my past coworkers and things like that. And I kind of thought of it as a social network and it is, but it's got a ton of terrific tools for connecting with people. So anyway, if you're looking at you know, doing any kind of marketing or outreach, do that. Go, go check out those tools. AJ, you're ready. 

AJ_O’NEAL: I am now. Oh, I wasn't on mute. So I actually mentioned this at the beginning of the show, but so sometimes you need a USB flash drive because you need to like get something from one computer to another or off of a camera to a computer to another computer, whatever, whatever, whatever. Right. Now, if you've got a Mac, you're just screwed cause you don't have any ports. Everything has to be over wifi. But you know, if you carry one of those 20 pound dongles that has all the ports on it, 

CHARLES MAX_WOOD: or you have three of those, 

AJ_O’NEAL: or you have an older Mac or you have a barely functioning computer, that being all computers that aren't Mac, there is the best way to do this because I've bought several USB flash drives and they all are terrible. They're basically USB one USB two drives with with plastic blue you know, thing to make it look like it's USB three, but they're, they're speed, they're ridiculously slow. Like trying to copy a, a video file, say that you recorded at a meetup or something like that, it just, it takes forever. And it turns out there is no standard for USB three flash drives. There's nothing to give you a guarantee. The marketing can be anything they want. They could say, you know, 300 megabytes per second transfer. That might mean that there's an internal buffer that for one tenth of a second, the transfer speed is 300 megabits per megabytes per second, or they could be lying and saying megabits and so on, whatever. Point being, if you get the Rocketech USB 3 micro SD reader, it is actually USB 3, you actually get USB 3 speeds. And if you buy the Silicon Power 128 gig, or they have other sizes too, if you want more or less, but they are. They are the best value in terms of price and they overdeliver on their speed. So micro SD cards, because they're used for professional photography, videography, et cetera, have a V rating. So V 30, V 60, V 90 that guarantees a minimum write speed and the silicon power, 128 gig V thirties clock in at about 60 megabyte just under. So they can't get a V 60 rating. They're just under 60 megabytes per second transfer. So they're usable. I'm excited about that. I want people to know. 

CHARLES MAX_WOOD: Very cool. Una, did we get your picks? 

UNA_KRAVETS: I didn't know that we had picks. 

CHARLES MAX_WOOD: No, it's all good. It could be a TV show, movie, something you like to do. It could be tech tools or libraries. I mean, anything really. What is like the best thing in your life right now? 

UNA_KRAVETS: Best thing in my life? I just got a couch. And having a nice couch really changes everything. Oh my gosh, before that I just had a futon and it was very uncomfortable. So, you know, it kind of booted you off after an hour. But having a nice couch, make sure it fits in your apartment because the first couch delivery didn't quite make it. But having a nice couch has changed my life. So highly recommend that for anyone out there. I don't know if that was a good pick. 

CHARLES MAX_WOOD: No, it's good. Like, where do you find one of those? 

UNA_KRAVETS: So I got mine on the best furniture store in the world, which is Bob's Discount Furniture. And my couch was only $550. But we went in the store, we tried all the couches and this one was our favorite. I love Bob's. I go in there. So, okay, here's the thing. I live in New York City. It's really hard to find a furniture store. My fiance has a car. When we have the chance to drive out into Long Island and go to furniture stores, it makes me feel like I live in a whole new world. And so, Bob's for some reason just has a place in my heart. They give you free ice cream. They're such a clutch location. This is not an ad. 

CHARLES MAX_WOOD: No, it's all good. Yeah. To attract people, I should give out free ice cream. Okay. All podcast listeners. Nevermind. All right. That's awesome. 

UNA_KRAVETS: That was probably the most random pick on the show. 

CHARLES MAX_WOOD: You know, it's funny because sometimes we do get those pics where it's You know what? There's this terrific restaurant. I don't know if it's anywhere else, but here, but it's awesome. And so people recommend it and I hope they get business. 

AIMEE_KNIGHT: You should plug your employer. I should plug my employer sometime. So like ever since they started there, they give away everybody who works there gets a mattress and oh my God, like which, 

UNA_KRAVETS: which mattress place, 

AIMEE_KNIGHT: Tuft & Needle

UNA_KRAVETS: Okay. 

AIMEE_KNIGHT: So I would never get this excited about a mattress ever in my life. It's like, cool, something I sleep on. Awesome. But I swear to God, this bed is like, everyone to me described it, people who didn't work there described it as sleeping on clouds. And I was like, what does that even mean? But that is how you would describe it. It's like, you sink in, but just the right amount. It's firm, but you also sink in. This bed is amazing. 

UNA_KRAVETS: I will be in the mattress market soon. 

AIMEE_KNIGHT: So if you are, let me know and I could get you a sweet discount. 

UNA_KRAVETS: Nice. 

AIMEE_KNIGHT: I get friends and family discount. So I guess now all of Twitter can. Wow, this is great. Go on podcast. It really is amazing. Like I've never slept on a bed like this. 

CHARLES MAX_WOOD: So I'm just going to pile on here. So our mattress is a Tuft & Needle.

AIMEE_KNIGHT: Oh, really? I didn't know that. 

CHARLES MAX_WOOD: Yeah. But I was going to say we weren't friends, but we were, you were just working somewhere else. So yeah, the, for me, kind of the sweet spot for sleep, the Tuft & Needle mattresses are terrific, honestly. But the other things that I use that just make my life awesome, one is chili pad, and that'll cost you as much as the mattress incidentally, but it's basically temperature control for your bed. So you put the pad on top of the mattress. And then what it does is it circulates water through the pad to set the temperature you're sleeping at. And oh my gosh, I have never slept so well. 

UNA_KRAVETS: Wow. 

CHARLES MAX_WOOD: Because you're on a comfortable bed, you're at the right temperature. And some nights I have to turn it up or down. It seems like I'm either setting it to like 65 degrees or 100 degrees, depending on how I feel. But I love it. I got it. My wife sleeps on it too because we sleep in the same bed and it's got controls for both sides. The other one that I'm going to pick and I am a pillow snob. We used to get the pillows at the furniture store or Walmart or whatever, and I'd sleep on them for a week and they'd be completely collapsed. I don't know what the deal is with this pillow. It's called my pillow, but you just punch the sides in and then it stays firm all night. It might collapse a little bit during the night, but I never wake up with a crick in my neck anymore. And then the next night I just punch it back up and it's good to go. That's kind of my trifecta for getting a good night's sleep. 

AJ_O’NEAL: What's hilarious about that is that that's an as seen on TV commercial. Like, 

CHARLES MAX_WOOD: I've never seen it on TV. My mother-in-law swears by it. And so it's like, she won't go anywhere without it. She comes and stays here. She brings a pillow and I'm like, I'm like, I cannot find a pillow that works for me. And I tried that one and I love it. It's the only one that hasn't gone flat on me after a few weeks. 

AJ_O’NEAL: So you'll have no reason to try this because you have a solution that works for you. But I would also recommend the ghost pillow. Now the downside is that for about two and a half weeks, it reeks. So you basically have to open it up and then set it somewhere with an open window. And by reeks, I mean, smells like lavender. Cause to me, lavender is one of the worst smells in the world because it's the smell of every toilet I've ever. So a lot of people associate lavender with calm and peaceful. I associate lavender with a urinal. So you can see where... Anyway, but after about two and a half weeks, the lavender scent... Because they put lavender scent on it to cover up the foam scent because new foam scent is pretty bad. But anyway, once it all airs out, as far as comfort goes, I literally sometimes travel with this pillow because I don't want to use anything else.

UNA_KRAVETS: Got my pillow game next. Got my couch. I need my mattress. Need my pillow. 

AJ_O’NEAL: Yuna, you haven't lived until you've got the right pillow. I hear good things about my pillow, but I recommend Ghost other than the smell. But some people would find it pleasant. It's like essential oils. 

CHARLES MAX_WOOD: Yep. Anyway, I'm going to put referral links in for these because some of them are like refer a friend, but honestly, I swear by this stuff. So anyway, that went way off topic, but it was fun. So let's go ahead and wrap this up. Thank you, Yuna. This has been terrific. 

UNA_KRAVETS: Thank you. Thank you so much for having me on the show to talk about CSS in a JavaScript podcast. I hope that it was informative. I hope that it wasn't too off topic from the rest of your podcast, but I think it really ties in well because a lot of Houdini is writing JavaScript. 

CHARLES MAX_WOOD: I think it was great. So, all right, well, let's go ahead and wrap this up, folks. We'll have another one next week. And in the meantime, Max out. 

AIMEE_KNIGHT: Bye. 

UNA_KRAVETS: See ya.

AJ_O’NEAL: Adios! 

 

Bandwidth for this segment is provided by Cashly, the world's fastest CDN. To deliver your content fast with Cashly, visit C-A-C-H-E-F-L-Y dot com to learn more.