From 23440b8afe4d3942d9ad40e160b3398b03e4446e Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Mon, 14 Aug 2023 15:05:54 -0700 Subject: [PATCH] Quick scan of typos --- transcripts/177.js | 60 +++++++++++++++++++++++----------------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/transcripts/177.js b/transcripts/177.js index 100e48e1..3c08e696 100644 --- a/transcripts/177.js +++ b/transcripts/177.js @@ -11,7 +11,7 @@ think you should go first because you already have your right to have a beverage

Estelle Weyl
-My name is Estelle, while I am a technical writer, I work on the documentation that is hosted at MDN, which is Mozilla. I mean developer.mozilla.org. But I work for open source collective called Open Web Doc's. So it's open web Doc's dot org. And we're funded by browsers and individuals to write full time and write documentation on everything web related, that's open source. So I usually do the CSS, HTML and things like progressive web apps and accessibility and performance. And my favorite beverage. I like passionfruit, martinis and lychee. Martinis. +My name is Estelle, while I am a technical writer, I work on the documentation that is hosted at MDN, which is Mozilla. I mean developer.mozilla.org. But I work for open source collective called Open Web Doc's. So it's OpenWebDocs.org. And we're funded by browsers and individuals to write full-time and write documentation on everything web related, that's open source. So I usually do the CSS, HTML, and things like progressive web apps and accessibility and performance. And my favorite beverage. I like passionfruit martinis and lychee martinis.

Eric Meyer
@@ -43,7 +43,7 @@ many things. I think for me, it's I'm going to give it I'm going to assign a tie

Estelle Weyl
-I think for the general population, it's been grid and Flexbox. But I would have to say has not is where and cascade layers. +I think for the general population, it's been grid and Flexbox. But I would have to say :has(), :not(), :is(), :where(), and cascade layers.

Ryan Burgess
@@ -51,7 +51,7 @@ These are all really good ones. I feel like we should expand on all of them. Whe

Estelle Weyl
-So Eric is actually a better person to talk about this, because I believe, I'll tell you Gallio, where he works, they did the first they didn't implement it in the first browser, but they did the they basically cream, it came up with the prototype. So that would actually work because the reason that we never had has, or the parent selector was because of the slowness that the selector would have. So you could, you know, jQuery had has, I'm so glad we're not drinking with the word have. And you could do that because JavaScript is slow bytes in and of itself, you're adding a framework, you know, that's okay. Because, you know, you know, you're slowing down the browser. But browser vendors can not put something slow into the browser. So every time you have something that's actually released, it's going to be performant. And that's also as a non sequitur or possibly a sequitur. Why I always recommend to never use CSS prefixes is because all of those prefixes that we used to use meant that it wasn't necessarily performant. So if you use a prefix if you forgot to remove a prefix from a NOC code base, if you put, you know, WebKit, border radius and something, the only browser that needs WebKit border radius is Android, you know, in the two versions, which are still used in some countries, and that is going to slow down their browser. So there's no reason to serve prefixed properties, because they're ridiculously slow. So going back to have the reason Hans was never put into the browser originally is because there was no way of saying okay, this is a parent selector. Then as your DOM changes, how do we quickly or instantly update this? And so I'll let Eric explain how that's done. +So Eric is actually a better person to talk about this, because I believe, I'll tell you Igalia, where he works, they did the first they didn't implement it in the first browser, but they did the they basically idea and came up with the prototype. So that would actually work because the reason that we never had :has(), or the parent selector, was because of the slowness that the selector would have. So you could, you know, jQuery had has(), I'm so glad we're not drinking with the word has. And you could do that because JavaScript is slow bytes in and of itself, you're adding a framework, you know, that's okay. Because, you know, you know, you're slowing down the browser. But browser vendors can not put something slow into the browser. So every time you have something that's actually released, it's going to be performant. And that's also, as a non sequitur or possibly a sequitur, why I always recommend to never use CSS prefixes, because all of those prefixes that we used to use meant that it wasn't necessarily performant. So if you use a prefix, if you forgot to remove a prefix from a old code base, if you put, you know -webkit-border-radius and something, the only browser that needs -webkit-border-radius is Android, you know, in the two versions, which are still used in some countries, and that is going to slow down their browser. So there's no reason to serve prefixed properties, because they're ridiculously slow. So going back to :has(): the reason :has() was never put into the browser originally is because there was no way of saying okay, this is a parent selector. Then as your DOM changes, how do we quickly or instantly update this? And so I'll let Eric explain how that's done.

Eric Meyer
@@ -59,7 +59,7 @@ Yeah, I mean, this is one of the things that I think most of us don't appreciate

Estelle Weyl
-Just a few things to note about that selector. It used to used to accept a forgiving list. And that has been changed to a non forgiving list. So if there's something invalid if there's an invalid selector, because it does take a query, it does take a complex complex compound Selector Lists so you can have comments separated selectors that are very complex in there. But they all have to be valid. So you can't put you know, pseudo class that doesn't exist. And you also can't put a pseudo element. The spec says that there will be some has accepting pseudo elements, but none have been defined. So none of them are valid. +Just a few things to note about that selector. It used to used to accept a forgiving list. And that has been changed to a non-forgiving list. So if there's something invalid, if there's an invalid selector, because it does take a query, it does take a complex complex compound Selector Lists, so you can have comma-separated selectors that are very complex in there. But they all have to be valid. So you can't put you know, pseudo-class that doesn't exist. And you also can't put a pseudo-element. The spec says that there will be some :has() accepting pseudo-elements, but none have been defined. So none of them are valid.

Ryan Burgess
@@ -75,15 +75,15 @@ We really do. Yeah. So the, I think where most people will probably first US Hou

Estelle Weyl
-So I think that Eric gave you the simplest example of what people are going to be using it for. But you can use it for really complex things. And I think what people will want to use it for is like, let's say there's an error form on the page. But you don't want to style the form, you want to style some other component on the page. So you can do like body has form with an error class active, then you do something, that's the end of the house part. And then you just do within that body. So it's selected this body because that matches the body. Does it have this other element and style that other element? Or does that other element also have something then you can style this third thing, and it's just one selector that gets super long? And the specificity could get pretty high? You think? But that's where you use the where? Or is I can't remember which one has non specificity? +So I think that Eric gave you the simplest example of what people are going to be using it for. But you can use it for really complex things. And I think what people will want to use it for is like, let's say there's an error form on the page. But you don't want to style the form, you want to style some other component on the page. So you can do like body:has(form) with an error class active, then you do something, that's the end of the :has() part. And then you just do within that body. So it's selected this body because that matches the body. Does it have this other element and style that other element? Or does that other element also have something then you can style this third thing, and it's just one selector that gets super long? And the specificity could get pretty high? You think? But that's where you use the :where()? Or :is()? I can't remember which one has no specificity?

Eric Meyer
-Where is the one that has no specificity? +:where() is the one that has no specificity?

Estelle Weyl
-So you just took everything in aware. And it does two things. It removes all the specificity. So you're not making it hugely specific. And also, if there's an error in it, like you put a clap. You're targeting like some Mozilla feature WebKit feature? Such you know, then it's like, cool. I got, I'm not going to fail on that. +So you just took everything in a :where(). And it does two things. It removes all the specificity. So you're not making it hugely specific. And also, if there's an error in it. like you put a pseudo-class. You're targeting like some Mozilla feature WebKit feature? Such you know, then it's like, cool. I got it. I'm not going to fail on that.

Ryan Burgess
@@ -107,7 +107,7 @@ I'm happy to hear you say that, Eric. I mean, I feel like we've all heard never

Estelle Weyl
-I'd like to give an example of when I use cascade layers, I don't know if you all use code pen, which Chris coIour, who you had on two weeks ago, was runs. So in a code pen, you can have your CSS, like there's three panels, there's HTML, CSS, and JavaScript. And then in the CSS, basically, I'm always teaching people something. So I want them to see the point of what I'm teaching them. So I want that to be first. But I don't want to like have to worry about the foundations of the page that I'm showing them. So I put all of that in a cascade layer. So that I put in the cascade layer, I say, you know, the basically I call it at Cascade, and I named the layer framework. And then I put everything that I want in the page, outside of a cascade aside, have a layer, and then everything that makes the page look the way it does that isn't important to the tutorial I'm teaching is in a layer. And so whatever I'm teaching overrides, even though Using an A element. So the specificity is 001. And I'm overriding, you know, the pound sign my page A, that bootstrap put in. So you can actually take Bootstrap, put it in a cascade layer and override everything you want. Which is unfortunate, because that's how I used to get paid all my big bucks was removing frameworks from +I'd like to give an example of when I use cascade layers, I don't know if you all use CodePen, which Chris Coyier, who you had on two weeks ago, runs. So in a CodePen, you can have your CSS, like there's three panels, there's HTML, CSS, and JavaScript. And then in the CSS, basically, I'm always teaching people something. So I want them to see the point of what I'm teaching them. So I want that to be first. But I don't want to like have to worry about the foundations of the page that I'm showing them. So I put all of that in a cascade layer. So that I put in the cascade layer, I say, you know, the basically I call it @cascade, and I named the layer framework. And then I put everything that I want in the page, outside of a cascade aside, have a layer, and then everything that makes the page look the way it does that isn't important to the tutorial I'm teaching is in a layer. And so whatever I'm teaching overrides, even though Using an A element. So the specificity is 001. And I'm overriding, you know, the pound sign my page A (#myPage a), that bootstrap put in. So you can actually take Bootstrap, put it in a cascade layer and override everything you want. Which is unfortunate, because that's how I used to get paid all my big bucks was removing frameworks from

Ryan Burgess
@@ -131,7 +131,7 @@ Estelle, you'd also mentioned grid and Flexbox. Those are great ones that have t

Estelle Weyl
-Like, to me, they're kind of boring, because they've been around and everyone teaches it, so I don't focus on it at all. And I don't even know the names of the properties, like I mean, I do, but I don't. Like it's not something I teach. I teach it in 15 minutes, because I'm like, there are 16 videos on this, you don't want to take my time to teach you this, because you can learn this really quickly. But it's, you know, when we were writing CSS, the Definitive Guide, version five, in version four, there was a huge chapter on positioning. And now that chapter is tiny, because you don't need to teach floats anymore. So you still do need to teach floats, because floating is still useful, and important. You can still so it's got to be in there. It's not the basis for building websites, asking +Like, to me, they're kind of boring, because they've been around and everyone teaches it, so I don't focus on it at all. And I don't even know the names of the properties. Like, I mean, I do, but I don't. Like it's not something I teach. I teach it in 15 minutes, because I'm like, there are 16 videos on this, you don't want to take my time to teach you this, because you can learn this really quickly. But it's, you know, when we were writing CSS, the Definitive Guide, version five, in version four, there was a huge chapter on positioning. And now that chapter is tiny, because you don't need to teach floats anymore. So you still do need to teach floats, because floating is still useful, and important. You can still so it's got to be in there. It's not the basis for building websites, asking

Cole Turner
@@ -139,7 +139,7 @@ as someone who hasn't floated anything in a long time, I just recently returned

Estelle Weyl
-you want to float your your figure, like you have text, you still want to float the figure within the text. And you still need to know how to break afterwards or not break afterwards. If you ever write a word doc, and you stick an image in it, do you want the text to go behind it in front of it? You know, that's the same thing that you have to do. +you want to float your figure, like you have text, you still want to float the figure within the text. And you still need to know how to break afterwards or not break afterwards. If you ever write a word doc, and you stick an image in it, do you want the text to go behind it in front of it? You know, that's the same thing that you have to do.

Eric Meyer
@@ -167,7 +167,7 @@ Yeah, I mean, logical properties are things like margin block and margin in line

Estelle Weyl
-as a full time job of few people as a full time job, not just paid, you know, a few hours, but full time job, +as a full-time job of a few people as a full-time job; not just paid, you know, a few hours, but a full-time job,

Eric Meyer
@@ -175,7 +175,7 @@ right? Yeah, there are a few people out there that like Google, Apple, Microsoft

Estelle Weyl
-I asked her to send them Susan, and Rachel Andrew as well. +I asked her to send Miriam Suzanne, and Rachel Andrew as well.

Eric Meyer
@@ -183,7 +183,7 @@ Oh, yeah. Yeah. Miriam. Yeah, Miriam. Absolutely. But where I almost never use t

Estelle Weyl
-So when we first wrote Flexbox, those logical properties didn't exist. But Flexbox was kind of the first property that when you change the language to Arabic, or to Hebrew, it went into a right to left writing mode. So it would flip it for you. So explaining that was really difficult. And now it's, it's not, +So when we first wrote Flexbox, those logical properties didn't exist. But Flexbox was kind of the first property that when you change the language to Arabic, or to Hebrew, it went into a right-to-left writing mode. So it would flip it for you. So explaining that was really difficult. And now it's, it's not,

Eric Meyer
@@ -191,11 +191,11 @@ it's less of a less of a challenge, right? Because flex box originally had like

Estelle Weyl
-the interesting thing about the book we wrote is there's tons and tons of graphics in the book called Treasure screenshots. And none of it or all of it rather, is actually code that works because neither Eric nor I have any photoshop skills whatsoever. Hey, +the interesting thing about the book we wrote is there's tons and tons of graphics in the book all taken as screenshots. And none of it or all of it rather, is actually code that works because neither Eric nor I have any photoshop skills whatsoever.

Eric Meyer
-some Photoshop, + Hey, some Photoshop,

Estelle Weyl
@@ -283,7 +283,7 @@ I'm glad you're still with us.

Estelle Weyl
-The reason that the sound is so loud whenever a fire truck goes by is because we removed the window right next to me. And then the window broke. So there's just basically plywood so you can hear all the sound. And you can also hear my dog crying for food. He's only been fed 10 times today. So he really needs to shut up soon. So when I going to put the window in from outside, I am going to put eight books, I need eight books because I actually have to go over to stairs rather than just one step. +The reason that the sound is so loud whenever a fire truck goes by is because we removed the window right next to me. And then the window broke. So there's just basically plywood so you can hear all the sound. And you can also hear my dog crying for food. He's only been fed 10 times today. So he really needs to shut up soon. So when I going to put the window in from outside, I am going to put eight books, I need eight books because I actually have to go over two stairs rather than just one step.

Ryan Burgess
@@ -295,7 +295,7 @@ That means you can no longer change the contents of the books or like CSS cannot

Estelle Weyl
-I wrote a book many years ago called H mobile HTML five. And it's about how to write mobile websites basically how to create a progressive web app. But using SQL, Web SQL, and App Cache, which we all know is a douche. Yes. So I have tons of those books and I can't give them away because They don't want anyone to use the content. And you put six together. And it's the same as +I wrote a book many years ago called Mobile HTML5. And it's about how to write mobile websites basically how to create a progressive web app. But using SQL, Web SQL, and App Cache, which we all know is a douche. Yes. So I have tons of those books and I can't give them away because They don't want anyone to use the content. And you put six together. And it's the same as

Ryan Burgess
@@ -311,7 +311,7 @@ I mean, on the episode with Chris, I, like I mentioned, like, you know, a really

Estelle Weyl
-Can I add something to that? So the issue with data list, I don't know if you know what a data list is, you can basically create an input and make it drop down like a select that is styled in the browser, and there's no way to overwrite that styling. So be very careful when you use a data list because it's actually not fully accessible. Because you can grow the font for the whole, you can zoom in, but that font will stay the same. Which brings us to shadow Dom's. +Can I add something to that? So the issue with datalist, I don't know if you know what a datalist is, you can basically create an input and make it drop down like a select that is styled in the browser, and there's no way to overwrite that styling. So be very careful when you use a datalist because it's actually not fully accessible. Because you can grow the font for the whole, you can zoom in, but that font will stay the same. Which brings us to shadow DOMs.

Ryan Burgess
@@ -319,7 +319,7 @@ All right, let's hear it, it's still what's what's the shadow. So

Estelle Weyl
-when you create a custom element, basically all the styles you put, when you create a custom element, the element, the element is just like my super button, it has to have a dash in the name of the custom element. If it doesn't have a dash in the name of the custom element, when you use the defined pseudo class, the selector for that element will automatically be defined. So if you do like my button with no dash, it'll say it's defined even though you haven't defined it yet. If you do my dash button, then it will wait till you actually register the custom element for it to be defined. So. So that's really important for that pseudo class. So anyway, once you create a pseudo element, I did a tutorial for web dot Dev, learn HTML, there's a thing contemplates and slots, and I created a custom element that is actually a five star rating thing. So it uses basically no JavaScript for it to work itself. So you can rate something went to five. And that works without any JavaScript, but you still have to register the elements so that you have a custom element called Star dash rating. So when I create this element called Star dash rating, all I have to do is put star rating into my HTML, it's defined, and it will have all the components inside that create that which is five input elements that are made to look like stars. And when you select like the fourth one, then all the one through four turn orange, and the fifth one turns white. When you're hovering over them, they're all gray or white. So it completely works without any JavaScript, but doesn't do anything. But when you register it, it becomes defined. And then all of those buttons, those inputs are in a Shadow DOM. So there's basically a barrier kind of like there's the Brain Body barrier, where you're like, if you do something like you know, like, if you have an illness in your body, it doesn't go through the brain, because you're that barrier. There's kind of a barrier between the the regular light DOM and the Shadow DOM. You can pass through it with certain selectors. There's the part pseudo element. There's the slotted pseudo class, I think, or pseudo element. And then there's the host and host context. So from inside the Shadow DOM, so just stepping back. So if I styled a radio button inside my custom element, that radio button is only styled there, I don't have to worry about the specificity because it won't go through to the page and no styling of the inputs, the radio buttons from the page will go into my Shadow DOM or my custom element. So the custom element, I can say, you know, I called it star dash rating, I can say you know, start dash rating rating, and I can float it to the right or to the left. So here we are floating. You see, you can need to float that start star rating. You know I can my regular CSS will hit that element but it won't hit anything inside it. So if I do my rating, and I do input type, radio, you It's not going to reach anything. But if so, you can go through that that body brain barrier, which is the light DOM or the regular Dom, into the Shadow DOM, with certain pseudo classes. So there's the slot element. So you have a template element. And inside that you have a slot and you can write whatever HTML. So from the outside, you can style the slot. And from inside, you can say, hey, the host, it's a pseudo class, the host, you can style like and say float it to the right. So when someone puts a star rating, you can say, always float the star rating to the right. I don't actually know if the specificity from inside the element, I think that will have lower specificity. I think that will be like a user agent, in terms of the user will always the author will always override. But I would have to double check that. Because I can only keep you up to a certain level. +when you create a custom element, basically all the styles you put, when you create a custom element, the element, the element is, just like my-super-button, it has to have a dash in the name of the custom element. If it doesn't have a dash in the name of the custom element, when you use the :defined pseudo-class, the selector for that element will automatically be defined. So if you do like myButton with no dash, it'll say it's defined even though you haven't defined it yet. If you do my-dash-button, then it will wait till you actually register the custom element for it to be defined. So. So that's really important for that pseudo-class. So anyway, once you create a pseudo-element, I did a tutorial for web.dev/learn/HTML, there's a thing on templates and slots, and I created a custom element that is actually a five-star rating thing. So it uses basically no JavaScript for it to work itself. So you can rate something one to five. And that works without any JavaScript, but you still have to register the elements so that you have a custom element called Star dash rating. So when I create this element called Star-rating, all I have to do is put star-rating into my HTML, it's defined, and it will have all the components inside that create that which is five input elements that are made to look like stars. And when you select like the fourth one, then all the one through four turn orange, and the fifth one turns white. When you're hovering over them, they're all gray or white. So it completely works without any JavaScript, but doesn't do anything. But when you register it, it becomes defined. And then all of those buttons, those inputs are in a Shadow DOM. So there's basically a barrier kind of like there's the Brain-Body barrier, where you're like, if you do something like you know, like, if you have an illness in your body, it doesn't go through the brain, because you're that barrier. There's kind of a barrier between the regular light DOM and the Shadow DOM. You can pass through it with certain selectors. There's the ::part() pseudo-element. There's the :slotted pseudo-class, I think, or pseudo-element. And then there's the :host() and :host-context. So from inside the Shadow DOM, so just stepping back. So if I styled a radio button inside my custom element, that radio button is only styled there, I don't have to worry about the specificity because it won't go through to the page and no styling of the inputs, the radio buttons from the page will go into my Shadow DOM or my custom element. So the custom element, I can say, you know, I called it star-dash-rating, I can say you know, star-dash-rating rating, and I can float it to the right or to the left. So here we are floating. You see, you can need to float that start star rating. You know I can my regular CSS will hit that element but it won't hit anything inside it. So if I do my rating, and I do input type, radio, you It's not going to reach anything. But if so, you can go through that that body-brain barrier, which is the light DOM or the regular DOM, into the Shadow DOM, with certain pseudo-classes. So there's the slot element. So you have a template element. And inside that you have a slot and you can write whatever HTML. So from the outside, you can style the slot. And from inside, you can say, hey, the host, it's a pseudo-class, the host, you can style like and say float it to the right. So when someone puts a star rating, you can say, always float the star rating to the right. I don't actually know if the specificity from inside the element, I think that will have lower specificity. I think that will be like a user agent, in terms of the user will always the author will always override. But I would have to double-check that. Because I can only keep you up to a certain level.

Ryan Burgess
@@ -355,7 +355,7 @@ it's not I think it's still missing from I can't remember, I think it was one or

Estelle Weyl
-so interrupt 2023. Basically, all the browser's have decided, I think that's part of interrupt 2023, is it not? +so interOP 2023. Basically, all the browsers have decided, I think that's part of interOP 2023, is it not?

Eric Meyer
@@ -363,7 +363,7 @@ I think it may not have made the cut, because at the time that the interrupt 202

Estelle Weyl
-issue with nesting that I definitely saw a lot with, with Sass and Less is specificity. So people would just basically, nest and nest and nest and then nothing worked. And they didn't know how to write CSS selectors. So they just put a pound sign my page in front of it, and then nothing could override from any other. You know, that's where cascade layers comes in. But don't force yourself to need cascade layers by nesting things. 27 deep, but now at least if you nest 27 deep, you can just stick it in cascade layer and say forget about it. +issue with nesting that I definitely saw a lot with, with Sass and Less is specificity. So people would just basically, nest and nest and nest and then nothing worked. And they didn't know how to write CSS selectors. So they just put a pound sign my page (#myPage) in front of it, and then nothing could override from any other. You know, that's where cascade layers comes in. But don't force yourself to need cascade layers by nesting things 27 deep. But now, at least, if you nest 27 deep, you can just stick it in cascade layer and say forget about it.

Ryan Burgess
@@ -397,7 +397,7 @@ minute it comes up still the minute the word tailwind comes up you're pissing so

Estelle Weyl
I mean to me to when it's when you fart -I love ponds. It's not a fun it's literally in Shakespeare. They're like tale wins. And that's what they're referring to my offered an opportunity to speak at a conference and they say, you know, like, come speak at a conference. And therefore I don't have to go through the selection process. I always speak about selectors, because UI engineers don't understand is CSS selectors specificity in the cascade, and inheritance. And you can select any element. I basically, when I worked at visa, I rewrote their application that was five or six megabytes in less than 1000 lines of JavaScript, HTML and CSS. Because they weren't, they weren't adding like they had Bootstrap. They had react, they had something called Metro, which was internal, they had mustache, they had all of the things for for form. Or you used to work at William Sonoma. And I was no longer needed when they change to tailwind because they don't need CSS anymore. And I'm like, you don't need a CSS expert, you're using tailwind to write CSS, you still need to understand CSS. But if you put so with the Shadow DOM that we talked about earlier, you can basically style your web component, and that CSS is encapsulated. It's into that tiny component. And so you can always you know exactly what style that is, you don't need to put tell when you just need to put four lines of CSS inside your component. And you can do that with a style element. I also see tons of people writing the styles with JavaScript. Why? Like, it's shorter to just write the CSS and you write a selector and it matches and then if someone changes the element, you just put a comma, button or you know, a comma input type equals submit, whatever, you just add a selector. But the selectors can select anything on the page with including parents, and the sibling, four times over, that has the same parent or that doesn't have the same parent. I teach people how to write an American flag, like here's a table, it has like 40 cells or something like that, and 13 rows. And if you start I teach it by starting at the end, I'm going to style it into an American flag by starting at the end. So just counting every odd row starting from the end, make it red than every every cell starting from the fifth row from the bottom and the seventh row from the right, make that blue. And then every cell in that area, put a star in it, every odd one move at 50% to the right. And there you have an American flag with 48 stars, but who's counting. But the thing is like, selectors can actually say start from the end or start from the beginning. Do every odd to every fifth, do every fifth except for every you know if it's divisible by 15. You can do anything with the selector just use CSS for what it's known for, which is the cascade. When you're using tailwind, nothing is cascading you're basically having to define everything over and over and over and over again. And since most of us learn how to write code by viewing source, you can't view the source of your of tailwind. It's basically it's written by people who is used mostly by people who haven't taken the time to learn CSS. And they say, I don't want to learn CSS because it's so easy. Like it's not a real programming language. And the fact is, it's actually not that difficult, if you try but you have to put the effort in. And a lot of people aren't putting the effort in because, you know, it's, you know, not to get political, but it's seen as a feminine domain versus JavaScript is seen as a masculine domain. And so it's disrespected. And yeah, I went there. Yeah, that's a fair +I love puns. It's not a pun. It's literally in Shakespeare. They're like tail winds. And that's what they're referring. When I'm offered an opportunity to speak at a conference and they say, you know, like, come speak at a conference. And therefore I don't have to go through the selection process. I always speak about selectors, because what UI engineers don't understand is CSS selectors, specificity, and the cascade, and inheritance. And you can select any element. I basically, when I worked at visa, I rewrote their application that was five or six megabytes in less than 1000 lines of JavaScript, HTML and CSS. Because they weren't, they weren't adding like they had Bootstrap. They had react, they had something called Metro, which was internal, they had mustache, they had all of the things for a form. I used to work at William Sonoma. And I was no longer needed when they change to tailwind because they don't need CSS anymore. And I'm like, you don't need a CSS expert, you're using tailwind to write CSS, you still need to understand CSS. But if you put so with the Shadow DOM that we talked about earlier, you can basically style your web component, and that CSS is encapsulated. It's into that tiny component. And so you can always you know exactly what style that is, you don't need to put tell when you just need to put four lines of CSS inside your component. And you can do that with a style element. I also see tons of people writing the styles with JavaScript. Why? Like, it's shorter to just write the CSS and you write a selector and it matches and then if someone changes the element, you just put a comma, button (, button) or you know, a comma input type equals submit (, button[type=submit]), whatever, you just add a selector. But the selectors can select anything on the page with including parents, and the sibling, four times over, that has the same parent or that doesn't have the same parent. I teach people how to write an American flag, like here's a table, it has like 40 cells or something like that, and 13 rows. And if you start I teach it by starting at the end, I'm going to style it into an American flag by starting at the end. So just counting every odd row starting from the end, make it red than every every cell starting from the fifth row from the bottom and the seventh row from the right, make that blue. And then every cell in that area, put a star in it, every odd one move at 50% to the right. And there you have an American flag with 48 stars, but who's counting. But the thing is like, selectors can actually say start from the end or start from the beginning. Do every odd to every fifth, do every fifth except for every you know if it's divisible by 15. You can do anything with the selector just use CSS for what it's known for, which is the cascade. When you're using tailwind, nothing is cascading you're basically having to define everything over and over and over and over again. And since most of us learn how to write code by viewing source, you can't view the source of your of tailwind. It's basically it's written by people who is used mostly by people who haven't taken the time to learn CSS. And they say, I don't want to learn CSS because it's so easy. Like it's not a real programming language. And the fact is, it's actually not that difficult, if you try but you have to put the effort in. And a lot of people aren't putting the effort in because, you know, it's, you know, not to get political, but it's seen as a feminine domain versus JavaScript is seen as a masculine domain. And so it's disrespected. And yeah, I went there. Yeah, that's a fair

Ryan Burgess
@@ -409,7 +409,7 @@ Oh, yes. So for me, I think cascade layers solves this problem. But there's, the

Estelle Weyl
-I think variables have also helped with that a lot. So if you look at these different code bases that used to exist, like Facebook famously had wet 54 blues, I worked at Survey Monkey, I know it has a different name. Now, I don't remember what the name is. But when I started working there, they have like 20, plus greens. And so the designer would always give me a new green. And so we created a pattern library. So it wasn't custom elements, it was just a pattern library was like, an every green had a name. And, or every color had a name. And I'm like, what? So every time he gave me a color, I'm like, What is the name, so let's have the purpose of this color. So by doing custom variables, they can just say this is our business blue. And then you define business blue ones, you define business fluid being 90%, opaque, or, you know, adding 20% Gray, so you have two shades of it. But it's when you change the blue, the whole site changes. So if you're having, like theming, you can go from pink to blue, and so on. So I think what you were talking about is actually really helped by custom variables. +I think variables have also helped with that a lot. So if you look at these different code bases that used to exist, like Facebook famously had, what, 54 blues. I worked at Survey Monkey, I know it has a different name now, I don't remember what the name is, but when I started working there, they have like 20+ greens. And so the designer would always give me a new green. And so we created a pattern library. So it wasn't custom elements, it was just a pattern library was like, and every green had a name. And, or every color had a name. And I'm like, what? So every time he gave me a color, I'm like, What is the name, so let's have the purpose of this color. So by doing custom variables, they can just say this is our business blue. And then you define business blue once, you define business blue being 90%, opaque, or, you know, adding 20% Gray, so you have two shades of it. But it's when you change the blue, the whole site changes. So if you're having, like theming, you can go from pink to blue, and so on. So I think what you were talking about is actually really helped by custom variables.

Augustus Yuan
@@ -417,7 +417,7 @@ That's super true. Yeah, actually, when you're talking about CSS variables, I wa

Estelle Weyl
-I think dark themes could have been one a preference and also an accessibility issue. So +I think dark themes could have been once a preference and also an accessibility issue. So

Eric Meyer
@@ -425,7 +425,7 @@ they are sometimes that's true. Yeah, yes, variable. Yes, CSS variables, custom

Estelle Weyl
-Cheers. I actually went to a talk at an event apart where they were talking about component libraries. And I can't remember the who the speaker was, what his name was. But um, what he said that was very interesting. thing is if you're going to build a component library and you want to convince the powers that be the teams to use your component library, do not start with a button. Because the button, there's like 400 different renditions of the button, you have, you know, three hover states, the active state, whether it's in the header, whether it's small, whether it's large, whether it's main call to action, the second call to action, do something that a team actually means, such as a map. So that's reusable. No one wants to design it the second time, it has functionality, and it's really helpful. So basically, the reason I bring this up now is because my master's degree is in health and social behavior. And one of the things that's really helpful in web development is social behavior. So it's basically figuring out a way that you can communicate with people in a way that they'll actually absorb what you're trying to say, and be on your team. So if you're doing a button, you're going to have so many different opinions, and so many people aren't going to be passionate about it. But if you're doing, say, a map, you're going to be like, Yay, it works. Thank you for doing it for me. We're going to implement this right away. What else do you have for me? So with all things, it's figuring out a way to communicate with people like saying don't use important to someone who's doesn't know CSS that well and uses it as a crutch. That's not gonna get through to them. I know that from experience, I haven't figured out how to get through to them. I used to bake cookies for people. But now I just don't see people in real life and and I also went gluten free. +Cheers. I actually went to a talk at an event apart where they were talking about component libraries. And I can't remember who the speaker was, what his name was. But um, what he said that was a very interesting thing is if you're going to build a component library and you want to convince the powers that be the teams to use your component library, do not start with a button. Because the button, there's like 400 different renditions of the button, you have, you know, three hover states, the active state, whether it's in the header, whether it's small, whether it's large, whether it's the main call to action, the second call to action, do something that a team actually needs, such as a map. So that's reusable. No one wants to design it the second time, it has functionality, and it's really helpful. So basically, the reason I bring this up now is because my master's degree is in health and social behavior. And one of the things that's really helpful in web development is social behavior. So it's basically figuring out a way that you can communicate with people in a way that they'll actually absorb what you're trying to say, and be on your team. So if you're doing a button, you're going to have so many different opinions, and so many people aren't going to be passionate about it. But if you're doing, say, a map, you're going to be like, Yay, it works. Thank you for doing it for me. We're going to implement this right away. What else do you have for me? So with all things, it's figuring out a way to communicate with people like saying don't use important to someone who's doesn't know CSS that well and uses it as a crutch. That's not gonna get through to them. I know that from experience, I haven't figured out how to get through to them. I used to bake cookies for people. But now I just don't see people in real life and I also went gluten-free.

Ryan Burgess
@@ -469,7 +469,7 @@ Ah, okay, I'm gonna go with three things. The first is, for anyone who's looking

Estelle Weyl
-Yes. Okay. So we had to do a tutorial for how to build progressive web apps. And so we decided to do a useful app, and it is a menstrual cycle tracker. So if you want to learn how to do progressive web apps, you can create a web app that has complete privacy and security since you actually write the code. And then you can run it on any device that you have, and then delete the code base, and you still have a website that works as an application. So one of the things I've been doing at Open Web docs, is what I call micro benevolence is instead of micro aggressions. And the cycle tracker was one of them and making culturally diverse names and code examples was another. So before I say my pics, I just want to point out two things. If I Google search or Google search, I being searched in an edge for the Ark browser. And there was a huge banner says, like, promoted by Microsoft, there's no need to download a new web browser. And I've never seen like larger fonts on an app. +Yes. Okay. So we had to do a tutorial for how to build progressive web apps. And so we decided to do a useful app, and it is a menstrual cycle tracker. So if you want to learn how to do progressive web apps, you can create a web app that has complete privacy and security since you actually write the code. And then you can run it on any device that you have, and then delete the code base, and you still have a website that works as an application. So one of the things I've been doing at Open Web Docs, is what I call micro-benevolences instead of micro aggressions. And the cycle tracker was one of them and making culturally diverse names and code examples was another. So before I say my picks, I just want to point out two things. If I Google search or Google search, I BING searched in Edge for the Ark browser. And there was a huge banner says, like, promoted by Microsoft, there's no need to download a new web browser. And I've never seen like larger fonts on an app.

Ryan Burgess
@@ -481,7 +481,7 @@ That's the best. And then

Estelle Weyl
-for the WAG where we actually bought for my dog's 20th birthday last year, we bought her shoes because the pads get thinner when you get older. It did not work. She did not want to wear them, but it was the cutest video ever. So you can actually buy dog shoes for $5 for a set of four. And these are 50 So I'm not and she didn't read those so I'm not gonna I'm not gonna splurge on on crocs, but they're adorable. My pick is gluten free Oreo cookies. So if you like Oreo cookies, the gluten free cookies are to die for. And if you don't like Oreo cookies, well don't try the gluten free ones because you'll actually start liking Oreo cookies and then eat the whole bag when you have the munchies. But it's like 10 times better than regular Oreos and no one knows this. But maybe if enough people find out they'll have gluten free Oreo cookie ice cream, which is also fantastic. I make my own ice cream and it's a fantastic +for the WAG where we actually bought for my dog's 20th birthday last year, we bought her shoes because the pads get thinner when you get older. It did not work. She did not want to wear them, but it was the cutest video ever. So you can actually buy dog shoes for $5 for a set of four. And these are 50 So I'm not and she didn't wear those so I'm not gonna I'm not gonna splurge on on crocs, but they're adorable. My pick is gluten free Oreo cookies. So if you like Oreo cookies, the gluten free cookies are to die for. And if you don't like Oreo cookies, well don't try the gluten free ones because you'll actually start liking Oreo cookies and then eat the whole bag when you have the munchies. But it's like 10 times better than regular Oreos and no one knows this. But maybe if enough people find out they'll have gluten free Oreo cookie ice cream, which is also fantastic. I make my own ice cream and it's a fantastic

Ryan Burgess
@@ -525,7 +525,7 @@ That's still where can people get in touch.

Estelle Weyl
-I used to blog at standard D stead.com. And I used to do a lot of browser compatibility data. And now since can I use it so much better. My website now says future home and Estelle while so that's not the best place. So my name is Estelle, and you can find me online by looking at sto and then CSS or anything else web related. But it's still.github.io or github.com/a. Sto has my contact information. So all of my presentations are Estelle bucket.io. And all of my contact information is at github.com/sto our worth or through open web docs, which is open web docs.org +I used to blog at standardista.com. And I used to do a lot of browser compatibility data. And now since canIUse it so much better. My website now says future home and Estelle Weyl so that's not the best place. So my name is Estelle, and you can find me online by looking at estelle and then CSS or anything else web related. But it's estelle.github.io or github.com/estelle has my contact information. So all of my presentations are Estelle.github.io. And all of my contact information is at github.com/estelle or through open web docs, which is OpenWebDocs.org

Ryan Burgess
@@ -533,7 +533,7 @@ Right on well, and thank you all for listening to our episode. You can really li

Estelle Weyl
-So say Master. +So say Mastodon.

Ryan Burgess
@@ -546,4 +546,4 @@ That sounded ominous is

`; return transcript; - }; \ No newline at end of file + };