Hi everybody. My name is Benny Powers. I'm from Jerusalem, Israel. And in my day job at Red Hat, I work on the digital experiences team under the marketing department and specializing in design systems and web components. So today I want to talk to you about our project Patternfly Elements, which is our upstream design system. And we'll talk a little bit about Red Hat Design System, which is the downstream project. What that means, we'll get into detail a little later on. So let's take a look. So what is a web component? Okay, if you've never heard of web components before. So already stretching back to the 90s, UI toolkits like Delphi had modeled their components, their UI systems based on components. The idea of a component is like a button. A button has text, it maybe has an icon, it has a color, maybe it has a state. Okay, so the idea of components where the state and the style and the design and the functionality and the behavior are all encapsulated inside the component. You can just, if you have a drag and drop editor or put it in your XML file, whatever. Okay, reusable objects with consistent UIs and APIs. The web lacked its own component model until about 2015, when a group of web browser engineers and web developers got together at Google and tried to plan out what was going to be the future of web development. The browser engineers asked the developers, what do you need in order to make better applications? They said, well, we need components. And the browser engineers said, well, how can we do this in a way that works for the web and with the web? And that project eventually became the Polymer project at Google, which was the initial attempt at defining a component model for the web that later went on to become the web component standards, which are standardized and shipped by every browser today. So there are four core technologies in web components. We have custom elements. A custom element is basically an HTML element that is defined by your JavaScript class. So, you know, like the video element has certain behaviors, it can have controls, it can have slots for sources and things like that. You can write your own class in JavaScript to say, what's a fancy video? What's a fancy input? And then you can associate that with a tag name. And then any time that tag name appears in your document, the web browser will instantiate that object on the DOM with your class. That's custom elements. Shadow DOM is sort of like the secret sauce of web components. That's what gives you the encapsulation. A shadow root is like an isolated subtree of the document that's visible on the screen. So don't get confused. It's not invisible, but it's isolated from the rest of the DOM, which means that the styles that you apply inside your shadow root don't leak out. Maybe you remember what it was like back with, like, JQuery widgets, before they even called them components. You'd put, like, you know, some fancy JQuery button widget on your page. And out of nowhere, it would break some other part of your page because the class names conflicted or the IDs conflicted. If you put those class names or IDs in your shadow root, they can't conflict with the rest of the document. We have the template element, which allows us to very efficiently copy pieces of DOM from one place to another. So I define my template once, and then the browser can very, very efficiently stamp it hundreds of times in the same document without having to parse that HTML again. And the way that web components are distributed today is through JavaScript modules, sometimes called ECMAScript modules. The standard inbuilt language module system that was shipped in 2015, and we're just now beginning to see more widespread adoption in the rest of the JavaScript ecosystem. So what can you build with web components? Well, you can actually build any sort of web project with web components. You can build whole dashboard-complicated single-page applications. You can build what they call today multi-page applications where, you know, you leverage the browser's inbuilt navigation and things like that. You can build reusable widgets like a video player or maybe like a comment form or something like that. You can build design systems, you know, red hat button. Stripe payment. Actually just yesterday, or just two days ago, Stripe the payments company released their new version of their widget. It's a web component. And you can progressively enhance your pages. So you can put your content in HTML, wrap parts of it in web components, and when JavaScript comes online, those parts will be upgraded by the web component that wraps them. So the advantages of web components are performance. Instead of running a JavaScript framework's component runtime that your users have to download onto their low-range Android device, particularly in the global south, where most people have low-powered Android devices. Instead of running your JavaScript code or your framework author's JavaScript code, the component model is written in Rust or C++ by browser engineers. Another benefit is interoperability. Because web components are HTML, they are HTML, so they work anywhere that HTML works. For example, one time I had to solve a problem in a leaflet map inside of a view application, and we needed to add some interactivity to the tooltip inside the leaflet map. But the problem was the framework only allowed us to send a string of HTML. We couldn't interact with the DOM nodes, we couldn't get a reference, we couldn't add it to our framework. So we wrapped the content in a web component, registered that web component with the browser, and oh, there comes our interactivity. Another benefit is future-proofing. Because web components are standards, they're standardized in the HTML and DOM specifications, your app is going to work years from now. It's like the Space Jam website all over again. It's tables all the way down. Well, your app can be web components all the way down, and instead of having to go through that framework churn every time, you have the option to update your implementing library, your implementing framework, but you don't have to. You could implement a new part of the page with a new framework and still have them interact via the HTML and DOM APIs with your old components. And for me, I think that, especially in a large organization, the main benefit is knowledge transfer. Train up web developers. Don't train up framework developers. Because that framework, it might be popular today, but it's not going to be around forever. Teach your developers how to work with the web the way it is. Okay, so sometimes people say, like, well, web components, nobody really uses them, they're not really a thing. Well, I'm here to tell you that, yes, in fact, web components are a thing today. I feel like I need to get rid of the Reddit logo and maybe replace it with another one this week. It's not such a... But yes, web components are in use all over the web. Okay, if you look at NPM download stats, you might get one idea of what web development is all about. But if you look at the page load stats on the Chrome user interface project, you'll see that the use of web component APIs has been consistently skyrocketing over years. More and more companies, more and more small startups are adopting web components, and I encourage you to do the same thing as well. Web components are here to stay. And in actual fact, this presentation is made using web components. All these slides are custom elements. So that brings us to design systems at Red Hat. So let's have a brief overview of the history of how design systems came to be at Red Hat and some of the problems we faced and how we decided to try and solve them. So back in 2012, there was really a design free for all. We had multiple different projects, multiple different properties, and they all had their own designers, design teams, design philosophies, design languages, and nothing was really consistent from a design perspective and certainly not from a technical perspective. So that's why in 2014, the first version of the pattern fly library was developed. It was a proof of concept built using Bootstrap. I'm sort of glossing over a lot of the history here. Okay, so feel free to correct me in the chat. I don't mind. Okay, and this was the first step at Red Hat to aligning on a design system, and the name pattern fly was chosen as sort of like a non-corporate or corporate agnostic name that could develop a community around it. A few years later, the Red Hat Elements Web Components project started as the first attempt at a component-based design system here at Red Hat. It was a parallel effort to pattern fly. In 2018, the pattern fly team decided to double down on the React framework, and that was a sensible decision at the time because most of their users were, at least most of the users that they were interacting with regularly, by users I mean consumers of the library, like developers of pages and apps, most of those users were using React. So it made sense to focus on the framework that most people were using. Even if that did mean, yes, they were going to cut out use cases that were not using React. It was React or nothing. If you wanted a pattern fly, it had to be React. Okay, so the pattern fly React project elaborated on the Bootstrap MVP. It was mostly focused towards application development, like dashboards, SPAs, that kind of thing, but like we said, only for React. Shortly thereafter, the first edition of pattern fly elements came out, and this was an initiative in the marketing department in digital experience because for several reasons. First of all, we weren't using React, and we weren't going to use React. We weren't building SPAs, we were building landing pages for marketing sites and that kind of thing, and page loading performance is extremely important. And this was the first version of PFE was sort of a parallel effort with divergent UI needs. We weren't building towards application development, web app development, we were building towards web page development. So the UI patterns and the UI idioms were slightly different. This created a situation where basically you had pattern fly and PFE, and they were very similar, but different enough to be confusing. That's why in 2022, we released the second version of pattern fly elements, and our watchword for that version was one-to-one. We wanted the second version of PFE to be a one-to-one representation of the design principles of the pattern fly library, such that the end user wouldn't necessarily be able to tell that they were looking at a React app or an HTML page. So, yeah, the history of pattern fly elements. So the original PFE components were inspired by the pattern fly core, but they were different enough to be their own thing, and like we said, the technical needs were different, so it was kind of a different beast, but PFE 2.0 brought the best of pattern fly design to more use cases via spec standard HTML. So you could load up, you know, a PF card instead of importing card from pattern fly React, and you just drop it on your HTML page. Our goal was one-to-one representation. It's pattern fly design, but standardized for the web, not just for a particular web framework. So let's take a look at a few examples of pattern fly components. Here's an example of a pattern fly elements card. You see that we have this optional rounded boolean attribute where you can say is the card rounded or not. There are slots for the header content. Slot is a web component API, so the web component author can say, here's where the header goes, here's where the footer goes, and then the user can specify which slot a particular element goes into, and you can put multiple elements in the same slot. The paragraph here goes into the anonymous slot. It doesn't have a slot attribute, it's just the body slot of the card, and then we have here some buttons, some pattern fly buttons that slot into the footer, like you would have, you know, sort of a confirmation dialogue, and this is what that looks like. That's actually a real instance of pattern fly card loaded up in the browser, right there. Okay, we have our buttons here. They don't do anything, but same thing. Okay, we also have an accordion element, so that's a popular UI pattern where you'll have sort of like multiple disclosures that go in and close and hide and show content and whatnot. So here we have the four freedoms of the Free Software Foundation, and this is what it looks like when you load it up on the page. There's an optional single attribute you can put there so that it only shows one element at a time, so you can opt into that behavior or not. Make some weird problems with the mouse, but that's fine. We have a modal element, a modal dialogue, which will pop up some UI onto the screen, and this is a cool one because you can associate the modal. See, the trigger attribute points to the usage trigger ID, which is a button that lives somewhere else on the page, somewhere else in the DOM, and you as the developer don't have to write any JavaScript to hook those two things up together. You just have to say, this is the button that triggers the modal, here's the modal, and away we go. Let's see if I can overcome my input problems. Load up the modal, not so much. Oh, something happened. Well, you're going to have to take my word for it. This is why we don't live code children. You know what I can do? It looks like that. This is what it looks like when you open and close the modal. Great. Okay, so how do we make pattern fly elements? Now, in this section, the important thing for you to remember is that what I'm about to tell you about how we make the elements has no effect on how you use the elements. Our internal technical decisions don't limit you in terms of your options. So we build our elements using TypeScript, standard HTML, standard CSS, the Lit Web Components Framework, which is sort of the spiritual successor to the original Polymer project, and we use the pattern fly upstream design tokens. Okay? But just because we chose to use TypeScript and Lit, you don't have to. You can use the pattern fly elements in a React app, in a View app, in a WordPress site, whatever you want, in a Lit application if you want to. Here's sort of a typical example of what it might look like to author one of our components. So you can give it a tag name, PFTile, and you can extend from LitElement, which is our framework base class. If you squint, if you've ever written a React component or a View component or a Svelte component before, if you squint, you can see the outline of a typical JavaScript framework component. We have two reactive properties, selected, which is a Boolean, and stacked, which is an enum of strings, and you can say what the size is. Okay? This reflect option on the property means that setting the stacked property on the DOM object will reflect that state to the attribute on the HTML element, and that means now you can select with CSS for a tile that's stacked with large or small or whatever. Okay? And then here we have our HTML template where you can see we are reacting to the changes in the selected state and we are reacting to an internal class. Now, this looks like we're doing string concatenation, and so a lot of developers will sometimes say, oh, it's string concatenation, it's not performant, but don't make that mistake. This is a function which is called on this template which creates a template object in memory which has references to the exact places in the DOM and to all of the interpolations. So when I update the state of this element, it will only change the contents of this attribute. It doesn't have to re-render the entire DOM tree. There's no diffing, there's no V DOM, there's no memory overhead. It's just direct interaction with the DOM APIs but with a very nice developer experience. Again, although pattern fly elements are written using Lit, you don't have to use Lit, you can use them in any framework or in no framework. So how do you get pattern fly elements? If you're using NPM and the node ecosystem, you can just NPM install at pattern fly slash elements, use your bundlers, and away you go. You don't have to do that. I've spoken with teams who are building apps in Django or with Java or just writing HTML pages in Drupal. They don't have the time, the energy, the inclination, or the budget to mess with heavy, complicated JavaScript tooling. And really, who would want to? And I say that as a full-time JavaScript developer. So if you want to use these components, you can just drop in a link to a CDN, load up all the component definitions, and away you go. You can write some HTML, and you're off to the races. Of course, the browser will de-dupe all of these module references, so if you have isolated components in your CMS, you can just do this 100 times, and there's no performance penalty, basically. This pairs extremely well with a relatively new browser standard, which just landed in all three major engines this month called import maps. So if you want to do something like import from what's called a bare module specifier, instead of importing from a URL, I want this package, and I want this file in this package. And up in the head of your document, you can say that that specifier maps with your CDN, and you're good to go. Our goal for you is that you should be able to write more HTML and less JavaScript. You should reduce your tooling burden. You should practice standards-first development for knowledge transfer and future-proofing. And although frameworks are allowed, they aren't required. So that's where our components work. So I promised some performance. This is where you get your money value out of the presentation. So let's take a look. I did some comparisons. We're going to have problems with the mouse again, I think. One second. Okay, so here's the demo. It's just a card with some labels, a tooltip, and some switches which toggle the state on the card. I don't know if you can see that the corners can make a compact card. That's the demo. So I implemented this demo using web components and using pattern fly reacts with CR create react app. On the left we have pattern fly react. Just that demo, two and a half megabytes of JavaScript I had to download just to render the page. Just to render this text. Until you downloaded and ran those two and a half megabytes of JavaScript, you wouldn't know that we were talking about a react design system. No script, not allowed. The web components version, 222 kilobytes of JavaScript downloaded, and this all works with no script because all the content is in HTML. Both of these are unbundled, no optimizations over here, so if we wanted we could probably go in and optimize both, so it's kind of a quick and dirty comparison, but just to give you the idea. Looking at view source, create react app. The only content in this application is div id equals root. That's what the user sees when they load up the page. JavaScript is off or JavaScript is on and the script somehow didn't download or was corrupted along the way. Div id root. Over here, no script doesn't go for you. You still get all the text, search engines can read it, screen readers can read it. All your important content is still available. What about tooling burden? What about the developer experience? What about onboarding new developers, junior developers into your project? The package lock JSON for the react version of this application, you can't even read it on the screen, is 30,168 lines of code. To render a card and a switch and a tooltip. I wanted to print the list of packages instead of the package lock. It didn't fit in the terminal after I decreased the font size five times. How do we manage the packages in the HTML version? This import map which I generated by specifying which packages and files I wanted. What's that? 10 lines, 15 lines of JSON that you can just plot in your page. If I didn't want to do that, I could just load up the bundle from the CDN as well and one line of HTML that would do it. What's the future of pattern fly elements? First of all, we want to build more components. We haven't built out the full pattern fly library yet. Contributions are very much welcome and I invite you all to come and check out our issue tracker or just to go look at the list on patternfly.org and say, hey, we could use this one over there. We want to build react wrappers for these components. I said earlier that web components work with all the frameworks and that is true but unfortunately react, how can I put this delicately? Does not yet have full support for the HTML standard. In order to make it easier for react developers to use web components, what we can do is automatically generate these react wrappers that would turn a pfcard into a pfcard react object that would be easier to use from a react perspective. We are experimenting now with something called declarative shadow DOM. What this is is a new browser standard. It's supported today in Chrome and WebKit and it's gaining popularity in Mozilla so we hope they'll implement soon, go and vote on the Mozilla page. What declarative shadow DOM lets you do is on the server side calculate the state of your web component and stamp the shadow DOM onto the HTML page. Before declarative shadow DOM you had to run JavaScript in order to create that shadow root but now that we have declarative shadow DOM if I have an SSR situation I can just print the contents of my shadow root to the page in HTML and with JavaScript disabled everything will render the way we intended. It's incredible technology so we're working on different projects in order to get that on the go. Declarative shadow DOM also unlocks nicer APIs whereas if we had an imaginary pflink component that was supposed to wrap an anchor tag today we would want the developer to wrap a regular a tag in our pflink as sort of a decorator but with declarative shadow DOM that would let us do things just like expose the APIs directly on the element. Okay, how are we doing for time? Okay, so that brings us to a red hat design system so that was pattern fly elements that's sort of upstream pattern fly elements is like the fedora to our red hat design systems rel. Okay, so for those who have been around red hat for a long time they don't need me to ask the next question why do you have design systems because that'll make sense. It's great upstream downstream it's perfect but let's dive in a little bit more why do we have two design systems so pattern fly elements is upstream means it's open to the community it addresses community concerns not necessarily just only the concerns of the marketing department it's unbranded so you can put it in any app and it'll work as an unbranded experience and it's multi-purpose it's geared towards both web apps and towards pages and things like that with a particular emphasis on app development. Red hat design system is our downstream which means that it takes the core tools and concepts and shared code from pattern fly elements and implements a specific use case for them in particular use cases related to the marketing department and pages like redhat.com and product trials and customer portal and things like that. It's branded so it has all of the red hat brand standards built in right you don't have to like load up a special pattern fly red hat theme in order to make it look like red hat stuff like all the red hat design tokens are built in and it's primarily geared towards web pages as opposed to web apps although you can use our components for web apps as well there's nothing really stopping you. So a couple of case studies red hat product trials it's a multi-page app that's wrapped in a React SPA with micro front ends built in and it touches a lot of different areas because you know it has to talk to all these different products in red hat while also talking to the marketing side it's kind of a halfway house. So in red hat product trials a web component based micro front end system that web component part really was super critical for us because that's what let us build this out at scale right without having to burden the implementers of particular instances with our javascript tooling and our framework and keeping their package locks up to date and what not we could just tell them use this tag name load up the script and use this tag name and you're good to go so that was extremely helpful as well the shadow DOM gives us that encapsulation so different teams can work together on the same page without having to worry about stepping on each other's toes. Red hat product trials is linked from red hat com which uses the red hat design system it itself uses the red hat design system elements as well as pattern fly elements together and the react framework which manages the entire SPA can inject its react side state into the web components via javascript DOM properties or html attributes and that's how they can communicate with one another another case study that we've had is personalization so you land on a marketing page and you're like soon to be outlawed third party cookies tell the red hat marketing department a lot about who you are and what kind of things you're interested in so then the analytics scripts can come in and present personalized content to tell you know to tell you about something that you're most interested in well in order for those teams to do their job again we don't want to ever have to say the words to the people writing the analytics content npm install those are not words that I want to write in a in a direct message to anyone really you know low alley new so instead we can just tell them these are the tag names you know here are the design standards here's the docs pages with the guidelines and how to build them up and then they can go and build those personalized experiences inject them live onto the page without having to worry about complicated tool change of frameworks just html so that's our presentation I want to give a special thanks to all the pattern fly elements and red hat design system contributors which you can go and scroll and hover over at the slides afterwards especially to you all for help with the graphics thank you very much and we have a little bit of time for questions yeah so there's a lot of different ways it's basically up to you web components are the UI layer the component layer right so everything else is up to you so my preference is use the browser right there's just put a link that's works with screen readers works with everyone everyone knows what to expect there's a new browser API coming out now called view transitions which allows you to do more complicated things like animate between page transitions and what not and when that becomes widespread it's basically going to kill the single page application at least I hope it'll kill the single page application but let's say you're stuck with a classic framework or something like that so you can use your frameworks router and just render some web components in there if you're a little bit more keen a little bit more advanced and you build your web components you have to use lit your functional ones hooks a million different things we can talk about it afterwards so you can use that frameworks router or you can use a different frameworks router more declarative more imperative I prefer the PWA helpers router because it's very simple just gives you a call back location changed do this that's that's my favorite or questions do we have any questions from the chat yes yes yes yes I don't know right pattern fly elements is a downstream project from pattern fly core so the address for that question is the pattern fly core team I can tell you what I hope and what I dream but that's less helpful sure yeah how do they how do they build the presentation using web components well I wrote a plugin for 11t you download the plugin 11t is a static site generator so you can put front matter in your slides you write a deck with this 11t component you say you know here's the name of the thing whatever and then you just write your slides as markdown files in fact you know like two minutes before the presentation I was doing of course last minute last minute changes like you do so there are all the slides no more questions so sad so if you want to get involved find us on github github.com slash pattern fly slash pattern fly elements or if you want to do the red hat design system it's also open source we work out in the open all of our road maps are all available what not dive in give it a try you know we have a backlog there's issues that you can pick up there's some simple components there's some more complicated components I think we have five more minutes yeah okay yeah so it would it would work yeah how does mixing pattern fly react components with pattern fly elements components work okay so I'll give the answer in two parts there's how it works today and there's how we want it to work tomorrow how it works today is the same way that using any web component in react works like so if you want to use shoelace which is a popular open source web component library design system so you could just pop in like a SL button inside your react app because to put it delicately react has poor support for the html standards there are some annoying workarounds that you have to do with refs and attaching event listeners and setting properties and things like that if you want to do more complicated things if you use preact it's not a problem okay or what you could do and this is what we want to do in the future you can generate react components for the web components and what that does it takes a file called the custom elements manifest which is a json manifest of all of the apis on your custom element attribute slots, css properties, methods, events whatever it takes all that information and code generates a react component which can attach the event listeners and set the properties for you and all that and if you would do that and we hope to publish those soon then as far as the react user is concerned it looks like they're using a react component just under the hood they're using a more performant and standard html element so it sounded like it will generate react components will it be a react component or will it be you'll have so it's important to remember that react components are abstracted away from the DOM so what you'll have is a react component which represents the web component and then when react goes and prints its virtual DOM to the page it will print your web component there what the react component will do is it will abstract away react's poor support for the DOM other frameworks don't have this problem in Angular for example you can just attach an event listener to the web component in Svelte you can just set a property on the web component in Preact you can just do those things but react has very strong opinions about standards and what you should be allowed and not allowed to do with html so we have to implement workarounds for react so if we have like two more minutes there were some concerns about accessibility in web components and we're addressing that right now with a new standard called form associated custom elements if I still have the demo open here yeah here so if we inspect this switch component one can see great you'll notice that the switch is nested inside of a label same way that you would nest an input a native input inside of a label what a form associated custom element is it means that the browser when it submits that form it knows that this label is associated with my custom switch and I can set there's API to set the value on that switch so that when I submit the form over HTTP it'll read the value from my web component according to my code according to my web components code so I write a special color picker with an HTML label that's called form associated custom elements there's work being done right now on what's called cross root ARIA which means how do I associate a data list which lives in one shadow root with an input which lives in another shadow root over there so work is proceeding over there in the meantime there are various workarounds that we can do like sort of copying nodes from one place to another or moving ARIA attributes or something like that but the idea is that the web component user that the web component author will be the one in charge of implementing the accessibility we try our best on the design systems team to do that we have full time accessibility people thank you very much for attending the talk I hope it was interesting and I'm available for questions afterwards


Once you take a bigger look, and we could have gone on at greater length there, but at how this is funded by NGOs and by taxpayer dollars, the amount of money that's going to people to do drugs on the sidewalk destroying our cities, which they didn't build and they don't own, you really realize this is a manufactured crisis. Gosh, Tucker, there is so much that I want to say here. I know that I'm not going to have enough time. You're talking about NGOs, and I can't say to the American people enough. If you really want to look into what's going on, please understand, yes, it was manufactured. Yes, this was a plot.  You can look this up yourself, a conspiracy theorist. You can look this up yourself. Take a look at the World Economic Forum, you know, the person that heads it up is a man named Klaus Schwab. He released a book in 2020 talking about how the COVID pandemic. I just have to pause it. I mean, look at what they're doing.  It's so dehumanizing. This is explicit propaganda. They know what they're trying to do. They're trying to give you this image in your head of, wow, look at them. They're not even like people. They're basically like animals. This is just, ugh, I don't want that in my city. This is gross. They're ruining our city. It's truly disgusting, because these people right here who they're trying to dehumanize, you're no better than them, Tucker Carlson. You're no better than them, Candice Owens.   Named Klaus Schwab. He released a book in 2020 talking about how the COVID pandemic represented an opportunity for them to transform the world, for them to abolish private property. Look at everything they're doing, and you understand this is exactly what they're after, right? Eviction moratoriums, basically saying you have to allow people that are effectively homeless to live in your home. You're making entirely no money. How are they going to be able to back their mortgages? How are they going to pay their rent? Oh my God.    Believe it or not, most people have real jobs and they don't talk for a living like you, or Tucker Carlson, or me.  So they lost their jobs and the eviction moratorium was put in place to ensure that we don't have a housing crisis, which we are actually dealing with currently because that moratorium on evictions expired. But she is denouncing the moratorium on evictions. She's saying that it's absurd to think that we could transform the world because of this pandemic. Well, why not? I mean, we're living through a pandemic. Don't you feel as if maybe we all see how healthcare is really important now? Shouldn't we come out of this pandemic with a different outlook, looking out for the community more? No, she doesn't care. She's just cruel. She looks down at the peasants from her ivory tower and she judges them and she thinks that she's better than them. You're not better than them, Candice.  Going to be able to. They're going to default. People are going to be scooping up their properties that were once owned by people. Hard work. She only cares about the landlords. She doesn't care about the tenants. It's only the powerful people who she is looking out for. What about the tenants? What if they can't pay it? What if they've done everything that they possibly can do and they just don't have the money to pay their rent? Do you think that during a pandemic, they should be homeless? There should be zero homeless people in the United States.  And what these idiots don't realize is that it's literally cheaper to house people who are unhoused than to just have them sleep on the streets. They don't realize that, but they like the cruelness. This is how they get off.  Like these are psychopaths. These are not normal people.   We look at these inner cities and you go, why are they, why do they want these problems? Why are they funding these problems? Why do they want drug acts? Who on earth would ever?  Crazy homeless people. Wow.  He's so shameless. And yet you have people like Glenn Greenwald trying to sell you on the legitimacy of Tucker Carlson because every once in a while he'll utter a few words that are anti-war. OK, he's he's at least ostensibly anti-war. But along with the anti-war, you get this. Attacking the powerless and also you get explicit white supremacy.  The center to allow people to do drugs. Well, you're looking at a government that wants a system of dependence. Being addicted to drugs is a health issue. So if you want them to not do drugs, you offer them treatment, but they don't want to offer people treatment because that's socialism. Socialism bad. Let everyone suffer. I don't want to see you do drugs. You know, I want that out of my view when I'm driving on these streets, but I also don't want to do anything to help you.  They are convinced they're the good guys. It's insane to me. I look at the situation and I say what we're seeing is a modernized system of slavery. This is slavery in 2020 and 2022 and they are proliferating this under the guise of COVID-19. You know, I agree with you. I agree with every word of that. I wish I didn't, but I sincerely do. I wonder why there isn't at least one city in America.    Move on. Like that is, I think. If you don't want homeless people quote, crapping on the sidewalk, why don't you advocate for public housing? Why don't you advocate for the decommodification of housing?  You're not thinking about the way that the Republicans are voting in, getting voted in by you, and then they're cutting the taxes of their billionaire donors. You're not thinking about that. So this is why, you know, Tucker Carlson, he always tries to distract you. It's always the homeless people. It's always immigrants, critical race theory.  Notice how he does this. You just substitute the group, and that's his entire shtick. Okay, then all civilizations have always reacted to threats like this, like drug addiction and vagrancy. Why does nobody do that now? Nobody does that now because there's been such a federal overreach. And I will say in America, the one guard that we have against this is state rights. Thank God for governors that are standing up and saying absolutely not matter how hard the Biden administration tries to overreach and say we are absolutely going to have to have this. We need to fund more money, more money. The government is creating problems because they want you to turn to the government for answers. And I always say Black America was the experiment with this. They issued trillions of dollars in welfare, and Black Americans are factually speaking poorer today than they were before the welfare system began coming after them and tearing apart their families. They are now making that system for everybody.  Do these people even know that they're being filmed and broadcasted on national television? That they're being used for propaganda purposes?  It is morally reprehensible.  And I love how they're unironically saying, hey, the issue is that we're giving too much money to these sorts of issues. The issue is that NGOs and everyone they're throwing on this money at homeless people, we really should do nothing. And that's really going to help the situation. I don't like seeing these homeless people because I'm a bad person, but at the same time, I want to make sure that we have less money to combat the issue of homelessness.  Every single American dependent on the government, for food, for family, for drugs, whatever it is, they want a system of slavery, and I cannot say this enough, people, look it up. I can't get over this. Who at Fox News went around filming homeless people? Do they know that they're filming people for purposes of demonization?  This is so cruel.  Absolutely up. They want a global technocracy. You are not a conspiracy theorist. Do not allow them to gaslight you. Something very sinister is going on, not just in America, Tucker, all across the world. Actually, Tucker Carlson is a conspiracy theorist, and that's not what gaslighting means.  So this is the full clip, apparently. This came after this clip, but this is the real segment, and the title is, Tucker, We're Watching Civilization Collapse in Real Time. 1.3 million views on YouTube. So this is what the YouTube algorithm will push, and this is safe content for brands, right? Advertisers don't have to worry because Fox News is a large, multi-billion-dollar corporation. They're ad-safe. It doesn't matter that I have to debunk the misinformation that Tucker Carlson and Fox News disseminates on a daily basis, but I'm not ad-safe, but they are. Isn't that insane? Tucker Carlson, tonight, hosts, examines how leaders are rewarding criminal behaviors, behavior in cities across the country. So basically, I'm assuming, before even watching this, that he's going to denounce any help to combat the housing crisis, and then he's going to show you lots of examples of homeless people doing things that he views as icky and gross. Good evening, and welcome to Tucker Carlson. We want to begin by noting something obvious because this is the obvious show. If you live in the United States, you may have noticed that many of our public spaces have become permanent homeless encampments. You see trash-filled tents blotting out what were once green and tidy public parks. You step over vagrants drooling unconscious on the steps of train stations on the way to work. You watch as junkies smoke meth without any embarrassment at all. This is just pure, unadulterated dehumanization. He's so gross. He's so explicit in the way that he's dehumanizing people. Pedestrians on the sidewalk, maybe at your children. Everywhere, at every intersection, there are beggars. It's what we used to imagine India was like, but this is not Calcutta. This is New York and San Francisco and Austin, Texas. So the question is, what happened? And the short answer is, our leaders did this. No matter what they tell you, homelessness is not an act of God. It's not the result of economic collapse in this country. America did not run out of housing. Instead, a determined group of well-funded ideologues decided to make it easier to live on the streets in this country while doing drugs. Therefore, many more people now live on the streets while doing drugs. See? Not complicated. In 2005, an unemployed alcoholic called Basil Humphrey enrolled in a rehab program in Boise, Idaho. When Humphrey refused to stop drinking, the rescue mission kicked him out. Those were the rules, and he spent months sleeping outside, as so many do. Eventually, local authorities ticketed him for camping on public property. That was the law. The story... First of all, the way that he brushes over this story and the details... I think that that's really noteworthy. Because if somebody is an alcoholic, they need help.  This is a health issue. When people are that much addicted to alcohol and they stop drinking, they get sick. So, you know, they don't like the unpleasant feelings that they get. They get withdrawals, so they go back to drinking. You can't just say stop drinking. It's not that simple. I mean, I wish that things were that simple. I would tell Tucker Carlson, stop being a white nationalist, but it doesn't work that way. Life isn't that simple. They've ended there, except that a huge corporate law firm in New York City called Latham & Watkins took an interest in the case on the other side. Yeah, that's a great point, Jay, for now. You can literally die if you go cold turkey. Yeah, with all these drugs. You know, these people will say, hey, just stop doing drugs. Stop smoking meth. It's not that simple. This is a public health issue and they need help. You're saying less funding to deal with these issues. You don't want to see it, but you don't want to fund it. So, you can't have your cake and you need it too. You can't have it both ways.  So, which is it? If you're addicted to heroin, you need to have help. I feel like he knows this. He knows this, right? He does know this. He knows this. He just doesn't care. Now, typically, Latham & Watkins represents Wall Street banks and prominent Democratic office holders. But the firm wanted to change vagrancy laws to increase homelessness. Why did they want that? We don't know. But the firm filed a lawsuit on Basil Humphrey's behalf against the city of Boise. That suit made it to the Ninth Circuit Court of Appeals. In 2018, the court declared that cities have no right to criminalize homelessness. In fact, the court ruled cities have an... Right. They don't. Cope.     Lugationer provide free housing to the homeless at public expense. The Supreme Court later upheld that ruling. Yeah, it's not a choice. Thank you for saying that, Jen.  I think I'd rather be homeless today. Who says that? As if people choose to be homeless.  Well, see, I made it. I have a mansion. I have a show on Fox News.  Just stop being poor. It's that easy. Stop. Just stop. Why are you poor? Stop it. Exactly.  Yeah, exactly. It was known as Martin versus Boise. And it had exactly the effect that Latham and Watkins intended. City officials across the country no longer had an obligation to protect the public and public spaces from drug addicts who decided to live in them. In other words, homelessness wasn't being criminalized. That's the code word for protect the city. He wants homeless people to be punished. He doesn't want to help them. He doesn't want any dollars going towards housing. He wants them to be punished. And to him, punishing homeless people is protecting the city. Homeless people are part of the city, dickhead. So when you're punishing them, you're also punishing the city. But again, you have to remember his mindset. To him, these are inferior beings. They're not even human in his mind. They are comparable to stray cats, alley cats, dogs. That's literally the way that he views homeless people. He's saying this. He's telling you right here. And there's going to be more B-roll I looked ahead where he shows you all the icky homeless people because he really wants people who are watching to think, oh, wow, that is gross. I don't do that. So these people must be inferior to me. That's the point.  At the same time, politicians suddenly had access to a massive new source of cash. Taxpayer money, many billions in taxpayer money for something called homelessness prevention. Now, what is homelessness prevention? Well, of course, it's the opposite of what they call it as always. Here's Seattle's interpretation of homelessness prevention. A handful of Seattle's more than 12,000 homeless people would soon be going from the street to a new apartment with stunning views of the space needle and Puget Sound. Using part of its share of the $1.9 trillion COVID relief package, the city bought three brand new apartment buildings for $50 million for 165 homeless, a price of $300,000 per unit. In Los Angeles, Skid Row is about to get a new neighbor, a 19-story high rise for homeless, costing taxpayers $160 million or $580,000 per unit. They're part of an expensive push to get the homeless off of sidewalks and out of city parks and into government subsidized housing, even if it means buying new buildings at market rate from developers. So the issue there is the developers, right? The market is completely fucked and inflated, but he's saying that, oh, this supposed homeless prevention thing is really just housing the homeless.  But wait, you said that you don't want them on the streets, but they're literally being housed, which is an objectively good policy, and you're scoffing at that.  Do you want to round them all up and execute them? What do you want? Because you don't want them there. You don't want to look at them, but you don't want them to have housing. Like, he's so unreasonable and it pains me to think that people consume this propaganda and think, wow, he's got a point here.  Stunning views of the space deal and Puget Sound. Do you have one of those? Well, crackheads do. Yeah, how dare homeless people deserve anything?  Why give them a view? Why give them anything? They've got to go somewhere.  What do you want, Tucker Carlson? Notice how he doesn't say what he wants. He just says, I don't like X thing that's being done to mitigate homelessness, but he doesn't propose a solution. More than half a million dollars per apartment to house drug addicts at public expense. At market rate. To house drug addicts.  Drug addicts are people too.  They need treatment. It is a health issue and he doesn't get that. So you can see why real estate developers would strongly support a program like that and, of course, they strongly do. But luxury apartments are just the beginning. Seattle's most recent municipal budget allocates more than $150 million to other so-called homelessness programs just this year. So-called homelessness programs. We're housing the homeless. So to say it's a so-called homeless program, it's literally a homeless program. It's the best thing that you can do. Now, sure, you can make the case that, you know, the cities are getting ripped off by these real estate developers because, of course, they have monopolies in a lot of cities. Yeah. But is that preferable to just leaving them there to suffer in the cold during a pandemic? Of course it isn't.   Who tries to say that he's good because every once in a while he'll say war bad. No.


I'm gonna start. Yeah. Okay. I think it's time. Does anyone want a team time? There's some in the front.  So I do recommend coming in the front. At least one person. Okay. So I'm going to be presenting today about the next steps on modernizing Drupal team system. I have some ideas and thoughts. These are just proposals at this point. So any feedback is very much appreciated. And yeah, I hope you are excited about to see what is going to happen next. So my name is Lauria Skola. I'm a senior software engineer currently based in Bangkok, working for Acrea in the Drupal Acceleration team. And I'm also a front-end framework manager and a team system maintainer. So as we all know, Drupal has shipped with some great improvements to the front-end development. Some of these changes are where features such as Twick, library system, stable team, which provides back-first compatibility so that your team's don't break in the minor releases. A classy team, which is based on stable for sensible defaults in markup. Basically, as the name suggests, it provides classes. And a lot more. So a few years ago, my dad's company needed a new website because their old website was launched probably like seven years ago at that point. And it looked pretty dated. Basically, their website had two iterations in the last 18 years. And there's no reason to believe that this would accelerate because the website is just not key to their business. Let me turn off my notifications. Yeah. So I was building a website to my dad. And now the clicker doesn't work. So here's a few screenshots. How this used to look like. I used a wayback machine to take some screenshots. So the screenshots on the left is from 2001. This is how it looked like on the first iteration. And the one on the right looks like how it looked like in 2011. This was probably built in more like 2009, 2010, but the most recent screenshot with this one from 2011, there was like a six-year break for some reason for them archiving this website. So this was the oldest version of the second iteration that I could find. And it was actually built by me. But yeah, as you can see, it looks pretty dated. So I wanted to help him build this website, given that I have some knowledge about building websites. So I took Triple 8 and built a site using all of the new Triple 8 capabilities. Since the site was a small brochure type website, teaming was actually one of the most time-consuming tasks on that project. So I built a custom team on top of Classy. A lot of the markups were now in template, so it was possible to create the markup we needed. And it was quite easy, at least till a certain point. I also built a small component system by using trick includes to reuse some of the template files. Everything went well and the project is now finished. However, what I realized was that Triple 9 is planned to be released the next summer. And I had to make some plans on how are we going to continue running the site on Triple 9. Luckily, we have a lot of tooling that allows you to check what needs to be changed before the next major release. However, one of the things that I realized we had planned to be doing at the next major release was to rip out stable and replace with a new version of stable. And it could be a bit hard for us to actually test if there's anything that broke on the site. Because if the changes could be pretty subtle or they could be specific to certain browsers, you don't really know what kind of changes could it cause, because it's just like some minor markup changes that are coming as a result. But luckily, some of these plans were adjusted later on on the process. That was just the original plan that we had. Triple 8 is using this continuous upgrade pad. And we had to kind of do a little bit of work trying to adjust our team system to work with this. This is actually pretty good because this gives developers time to adjust their code before the old behavior gets completely removed. But it's pretty interesting in the front end, because basically any kind of change, as I said, could consist of BC break. How can we actually make changes to our markup and this continuous upgrade pad? So I have a small exercise here where we could try to figure out together of how could we break this markup. So I have on the top, I have a template and CSS that is in class. So I'm setting a very basic span with the class and some styles to that. However, that has been overridden by the child team. They just changed the span to diff for some reason. And that's all. Does anyone have any ideas how we could change the CSS so that it would break in this combination? Basically, anything that would just cause the render in a way we didn't expect when we made the change. So it works with the set of markup and the CSS that we have in class, but not with the one that we have in the active team. So I have some boxes if anyone wants to give a try. Okay. Yes, change the CSS to break it. So it works with class, but it doesn't work with the... You can talk to the box. It's a mic. Can we get the box turned on? Okay. So you can put span.elements and then when you pass to the diff. Yes. That would definitely break the CSS. Awesome. Does anyone have any other ideas how we could break this? Okay. Content has a horrible giant render array hidden in it and we don't actually know what's in there. Yeah. That's a separate problem. It's a thing as well. Okay. I'm going to give an example. What if we change the background color to yellow? It's a little bit more subtle because of the span. It's actually display in line by default. So what we want to do is we want to use kind of a highlight for this specific word here, but since this team changed it into a diff, which makes it a display block, which means that it behaves in a very different way. And the background is not a highlight anymore. It's a background of a block type of a diff. So yeah. It starts to get more subtle. It's obviously not as broken, but it behaves in a very different way as we might have expected with the markup that we have in class. Let's take just another example. Instead of overriding the template, what is happening is that the sub theme is now extending the CSS with some new CSS. So we have the color hot pink, which we set in class and then we set a background color yellow in that sub theme. Does anyone have any ideas how we could change the template or the CSS to break this? No one has any thoughts?  Change the element that was in class from a span to something else? Yeah, that would be a breaking change. Definitely. Yes. What else? Again, things could be more subtle. So what if we changed the color to yellow? It would work with the white background, right? But we didn't know what happened in the sub teams. They changed the background to yellow. So now there's a conflict. Maybe it's not always the exact same color. Maybe it could be just something between and it doesn't work well anymore. Maybe they changed the background into gray and it didn't work well with the yellow. What if we started just going a little bit more crazier and we started refactoring our CSS classes? That would obviously break the output as well. So yeah, as you can see, predicting the outcome of front end change is really hard. The root cause for this problem is the fact that we have this kind of strange shared ownership of markup and CSS. So we have different extensions that can have a partial ownership of rendering some output on the page. So basically this problem has caused us to make very little progress because we want to avoid making changes as much as possible. This is obviously good for stability, but it's not very good for the progress because it can't really make that many improvements. So let's see what we decided to do with stable in the continuous upgrade pad. Drupal 9 will essentially ship with both Drupal 8 stable and Drupal 9 stable. Drupal 8 stable will be likely deprecated in Drupal 9 and removed in Drupal 10. We are still figuring out the specific mechanics, how this will all work, but we assume that Drupal 8 stable will continue to exist in Contrip. There will be some way to run the Drupal 8 stable even after it has been removed and deprecated in Drupal Core. I don't know exactly what are the mechanics, but there has to be a way to be able to do that in the future. We've also changed the base team property to be required configuration in Drupal 9 because we have multiple versions of stable team in Drupal 9, so we can assume stable as the default value anymore. So how about classy? This is basically just how this is solved in the scope of stable. Stable can do innovation in modules and ship new versions in every major release, which kind of works because it doesn't really have that many opinions. So most of the sites are using classy, just like the site that I built for my dad. And classy depends on stable. How are we going to continue supporting classy in Drupal 9? So prior to Drupal 9, all markup changes were done in between major releases. But from Drupal 8 onwards, we are providing this continuous upgrade path, which means that all backwards compatibility break changes must be done in a way where we deprecate the old template. We have to move it to the next major version, which means that there's a warning in between. But it can be a bit overkill for us to deprecate the old template just because we wanted to change the markup in one small part of that template. We would end up with a lot of templates. Also, classy will have to continue extending Drupal 8 stable for backwards compatibility. We don't know if classy is compatible with Drupal 9 stable. And we don't really have specific mechanics to figure out if they are compatible. We don't know what kind of things could break. So classy doesn't really have a design. So it's even harder for us to judge if it's broken or not. It's very much on the meta level if it's broken or not. So one of the ideas to combat this is to ship those classes, the classy that ship as a base team right now, using a different mechanic. And one of the ideas was to use a starter kit. So instead of providing a base team, we would provide a command that creates you a new team with a certain starting point. Essentially, the markup render on the site would remain the same. But it would be just about how it is structured in our teams. The good thing about this is that the starter kit could be changed between minor releases. Since it's just a starting point, you're not really relying on a future changes that could happen for that team. The pros of this approach would be that it's going to be way easier for core developers to maintain this because they can make changes pretty much freely. Because we don't really have to care about the consequences of it changing someone's production site. It would also provide some positive change for teamers because it would essentially move most templates in CSS into a single team rather than having to find them from different projects on different folders. This would be much easier for someone who is new and doesn't necessarily understand the team system that well. They wouldn't have to figure out which of the different templates that we have is being loaded because they could just take a look at the one project and everything would be inside there. However, one of the biggest cons of this approach is the potential maintenance burden to site owners because it essentially means that we move the maintenance burden of maintaining those templates to site owners or team maintainers because they would have to have a copy of every template in CSS file. The positive though is that we look into how many security releases there was in the Drupal 8 release cycle that changed templates and we couldn't find any. So that's at least encouraging, which means that at least there wouldn't have been security issues that could have affected those templates that someone was running in their teams. This also only solves the problem in the scope of core, which is kind of unfortunate because it's actually running into the same problem. So let's take a look at the different kind of variations of overrides. This is kind of already what I was demonstrating earlier. So one of the variations is that the template is overridden without overriding the respective CSS files and this is actually risky because of the CSS files could be changed in future and it might not be compatible with your templates. Also, the CSS files could be overridden or extended without actually overriding the templates that are related and this is also risky because of who knows how the templates are going to be changed in the future, your CSS might not be compatible with that. But if you actually overriding, if you took ownership of both templates and CSS files, you wouldn't have any risk because none of the changes that are happening in core would intrigle down into your personal team and you would have to wall ownership of that part. So this made me wondering, could we actually prevent partial overrides? What if we bundle CSS and templates together? So one of the ideas which is kind of competing to the starter kit but not necessarily there's some overlap between them, we could actually do both of them. They are not necessarily overlapping in that sense. But if you just did this change, it could be enough for us. There's still reasons to do the starter kit idea even if you did this. But basically if you would load CSS and non-functional JavaScript in templates, it would mean that once you override a template, you would have to take ownership of the CSS and JavaScript that is related to that template when you override it. This would come with the benefit that you don't necessarily have to take ownership of all of the templates and all of the markup that Drupal ships with. But you would take ownership of all of the templates and CSS that you want to customize in your team, which is great. This also solves the markup back first compatibility problems for contract, which the starter kit idea doesn't really do. So this is going into the weeds just to give an idea how this could work. I wanted to show you trick front matter, which is a syntax that is used by Jekyll. Drupal Core is actually already using this in an experimental module, help you to use this for loading related CSS and JavaScript files. And as you can probably guess, if you override this template, it would also override all of the configuration and you would have to re-specify that when it would be pointing to your own team. And if you don't copy the styles of CSS, it would be an empty file, it would be 404. So you have to also copy the CSS file and then you have the ownership of everything that is related to this template. This could even potentially help us get as rid of stable in future, which could even further simplify our team system architecture. So the conclusions that we can make as a result of this is that Drupal 9 will ship with two versions of stable team. We don't know yet if the Drupal 8 stable team will be deprecated or not, but it will be deprecated at some point in the future. So Drupal 9 will continue the ship with Classy and it will continue to exist in future. So if you're using Classy, you don't have to panic right now. It's going to be somewhere, so you can continue to run your teams that you've built. And I think we should continue wedding the idea of converting Classy into your starter kit, as well as bundling the CSS and markup. Because these could potentially come with radical improvements to the cost of maintenance. So we can do some questions. We have a box here. And if you want, you can have a TimTum after you've asked the question. So there's a hand over there. I'm going to try to troll this one, but it's pretty far. Oh, no, I actually don't really see. Hey, I don't see that well because I'm blinded by the lights. I'm making some excuses, but OK. Thanks, Larry. That's very interesting. Is there any consideration for the last item you're showing where if we go with this approach and you copy a template file, you must copy the CSS file to go along with it and the JavaScript file. But perhaps you're using, say, a pattern lab or storybook or something. And now you've got your CSS in one place and a CSS file that you don't need besides your template file. If you understand me. So I see that you're asking it from a point of your component library. And was there any consideration given to that? Yes. So I think this would work well with component libraries because essentially it would allow them to include the loading of the CSS and JavaScript inside the component itself because it would be in the template and the template would be containing the contextual information about that component. And in future, if the component library needs other type of contextual information, it could be provided using the front-matter syntax. It should be extensible. But it hasn't been a main driver to this, to be honest. But I think it could aid the effort of making Drupal more component friendly. Larry, great talk. Is there a reason why, for example, front matter was being used and not something like Webpack, which can do very similar things? It's because it's not in the template. It's in a different file or? So the front matter for this specific purpose is it's not something that has been decided. It was just an example and it happens to exist in Drupal core and it works very well for the example of help topics. And for that reason, because it's being used by help topics, it's something that would be very easy for us to use as well. But we are open to suggestions of using any other means of providing this contextual information. Yeah, Tim Thames? Mark, could you pass the box? So the front matter stuff looks a lot like the dependent libraries syntax. But what I see in projects is most often and not everything is compiled to one CSS file and there's no declaration of dependencies in between the components because of the building process of the CSS files. So given that it's a pretty big use case in actual projects, isn't it too much of a hurdle to get people to change how they build stuff? Like will this see the value in that? I'm not sure I understood the question. Could you repeat that maybe? Yeah, so doing that is the proper way of well it's one good way of doing it to be explicit about what your template used. But what we see is that nobody does it for CSS files. Yeah. So why are people going to do it now? Oh, I see. Well, it would be mainly because of then you would explicitly have to, we would always have to explicitly override the CSS that belongs to that markup and then you wouldn't have this shared ownership between different extensions. And we were actually looking into the specific mechanics of looking for this information. It could be using the library system behind the scenes so they would become libraries internally and basically the libraries API could be used on top of them. We could use the template name for generating the library name for that. And it would be similar to what we have now but it's a lot of people just use the global library for all of their CSS files and it's different from that. And it would definitely force people to change in that regard. And yeah, it's something we probably have to take into account. It's at least something that could slow down people from implementing this. Do we have any other questions? I think we are pretty much out of time anyway. So if you don't have any questions, feel free to reach out to me later. I'm happy to talk about this privately. Thank you.


Your coca-cola bottler presents Claudia based on the famous play and novels by Rose Franken Brought to you transcribe Monday through Friday by your friendly neighbor who bottles coca-cola Relax and while you're listening refresh yourself. Have a coke and now Claudia A mother how do you like our peaceful life in the country? I haven't slept so well in years. Don't you like all the lovely rural noises mama? The hammers and saws. Oh, well, we'll get used to that. Well, I hope it stops before we get used to it They ought to have that annex finished in another 10 days Can't even hear the birds singing with all the noises and mama we have the most singing birds you have ever heard Really? I hope they sing better than that parrot you gave me. Hey, I hope Aunt Louisa is taking good care of Solomon while you're here And I hope he doesn't bring on her asthma Aunt Louisa tells me that she tests negative to parrot feathers and I test negative to Aunt Louisa Don't you like her? Oh, I like her very much But I live in trembling fear that one day I'll open the front door and find that Umbrella stand she's been threatening you with since you were three I wish somebody'd send us something even just a letter We'll get all of the letters we want very soon. I don't think anybody even knows we're here by I thought that's why people went to the country So they'd be somewhere where nobody knows where they are. What was that? Plenty of people know where we are and We'll be hearing from them very soon To the bank the tax collector the plumber and the electric light people And mr. Paradiso, are they all going to write us letters? How nice of them? We'll be nice, too We'll write them all letters back with little green checks and oh you mean bills Those aren't letters. Well, they're most of the letters most people get David Why don't you write me a letter from new york just so we can see if the mailbox works? It works fine Well, you see how much that little mailbox can hold without flinching the flinching is up to us I don't know if it worked for Mitch the electrician and billy and the birds I'd feel all by myself up here. You can um You can see how much we count around here, David because I don't mean you. I mean people There aren't any fancy that We aren't people and all of my life. I have calmly calmly proceeded under the assumption that we were When you aren't other people I can't be other people because I'm myself I mean I'm I That still sounds silly. I know it's right, but still sounds silly I'm I well there there must be loads of other people around here Even if we're not we've been here practically four whole days and we haven't met one a one people Not even one people I'd say we've been kind of busy unpacking and putting things away and Plugging up our ears so we don't have to listen to all the hammers all morning Claudia I'll bet it all the months you lived in that apartment in new york You never met one person who lived in the same floor with you. Did you that is all together different? Oh, sure. That's different It was so easy to meet them that we never bothered to say hello I thought in the country neighbors want to meet their neighbors Well, they'll probably come to call on us when they think we're settled I think it's very unfriendly of us to wait everybody. I think we're just plain old city people very rude I think the custom is for the people who've been living here to come and Call on us first. I'm not that lazy Claudia I do not think you ought to walk around the countryside dropping in on other people's houses I think it'd be very friendly of me. I think it would be nosy of you I thought when we had a party line, I could find out everything about the other people on the line Have you been listening to other people on the telephone not on purpose? That makes it all right. I suppose you can't listen to it on purpose. It only rings when it's for us But yesterday I just happened to hear I'm not I'm not interested in what you just happened to hear. Are you mama? I should say not What did you hear?  She is. She is.   I wonder who lives there. I don't know anything about it except it's none of my business And did you notice the house with the funny black stripes on it? I wonder why they painted those stripes the owner probably has a pet zebra Maybe he has See what you miss david when you don't know your neighbors Well think how much they miss not knowing you. I don't see them crying about it. Maybe they are Claudia Please don't listen in on the telephone and don't try to meet our neighbors until they try to meet us Oh, you're just like a man All right. All right. I was just thinking about it and my final word of advice Don't think Well, here goes the happy commuter. Goodbye happy commuter I have 20 minutes to get the eastbrook station Who is coming with me? I am I am good ladies this way to the chariot Mommy it's two o'clock really You think I can't count only four hours and 18 minutes till david comes home Well, it's time to put the suet pudding in the oven. Are we having suet pudding? No, but I can't think of anything else that takes that long to cook. Oh mama Look through the window there. Well, well, I don't see anything. There's a car And what did you expect to see in elephant, but it's topping in our mailbox Mama, it's the postman. We must have some mail. I'm going right out to see what it is Now don't run claudia the postman leaves the mail, you know, he he just doesn't wave it at you Hey, hey Hello Hello there. I brought you your first letter. Hello. Thanks. How'd you know we were here? The united states post department has a very very good way of finding out these things But you're a lady. Well, you're taking a little bit for granted, but I hope you're right But I thought there were always men mailman.  Hello. I'm alvira cook. I'm your mailwoman. How do you like living in the country? Oh, we love it been here since friday, haven't you got here around eight o'clock Yes, but how'd you know? Oh, we have ways of finding these things out. Do you come by every day? This is the first time I've ever seen you had no mail for you till now and this one don't amount to anything Just an advertisement from the lumber company. You do have ways of finding things out, don't you? When's the baby do about june? Yes, and Say it's going to be a boy, isn't it? Well, I hope you look like your husband mrs. Noughton I hear tell he's a very good-looking man. Have you met mr. Noughton?  She saw you and mr. Noughton driving to the station yesterday The abbots live in that red house been living there four years moved in just about the time I took over this job for mr. Cook. He's my husband and when he went in the army didn't he I mean Oh, he came back all right, but he couldn't get the job away from me He has a little hardware store now. Here's his card if you need anything. Oh, thank you You know, it's funny about men when my husband brought mail around You'd think it was the bore in his job in the world says he don't understand how I have such a good time Why I think it'd be wonderful fun someday when you have nothing to do Why not ride around with me and meet the folks around here? That's what martha lee abbott did when she first moved in she did Lovely girl got three of the nicest children you ever want to meet two boys and the girl two boys One seven and one nine and has the sweetest little girl of three named synthia Oh, what a pretty name mr. Abbott works up to bridgeport at the aluminum company fine Man mr. Abbott. I didn't know there was an aluminum planted bridgeport Oh, they opened it during the war and it's the biggest thing you ever saw Mr. Abbott has a fine job there But his boss is a fellow named mclellan and sometimes he really tries to make life miserable for mr. Abbott And you know, mr. Abbott is just crazy about dogs and he and martha lee have two of the sweetest German police dogs you ever saw and they've been raising little puppies and the other day one of the little babies ran away Well, claudia that wasn't such a bad dinner No, not bad at all. Well don't sound so surprised you too. I bought the meat in a store There's such a nice store. Mm-hmm.  I certainly was heaven help me. I was that is not fair You said I drove much better today. Well, it seems you have a new bad habit Now you're driving too slow. Oh, can't please the woman You might almost call that a good habit mother. No, not when it means dawdling outside people's houses when it means just Looking in a window. Mama, you look too. Well, uh, wasn't anything else for me to do now, was it? Oh, I'm so looking forward to meeting the abbots. I'd love to see their dogs Uh, who are the abbots? Oh, didn't I tell you? I thought I told you they're the people who live in that that little red house You saw their name on the mailbox Well, very very observant of you. Martha Lee Abbott. Isn't that a nice name? It's a very nice name, but how do you know her first name is Martha Lee? We have a way of finding these things out Mr. Abbott works for the aluminum company. Did you know there was an aluminum company in bridgeport? I didn't have the slightest idea that there was an aluminum company Claudia yes, have you been listening to the telephone when other people were talking? Ah, I have not have I mama no david She has me see there. I don't know whether I should take mama's word for it after what she said this morning How do you think police dogs and great danes get along together? The abbots have the nicest police dogs. I should think bluff would like to meet them Oh, I get it one of the abbot dogs ran away and came down here the other day. Is that it mother? There hasn't been a dog in the place all day long david claudium Have you been walking on the road? Well, I ask you not to do that. Don't you realize that those police dogs? It can be very wild sometimes He might have bitten you. That's just exactly why I told you time and time again Darling, I haven't been off the place once Except to go to the market just once then how do you know? And and darling this and I forgot to tell you the abbots have the cutest little girl by the name of synthia Isn't that a nice name too mother? What's going on here? When I left the house this morning claudia didn't know one person on the river road Now she not only knows all the people and all their dogs and all their ancestors and their dissidents. David I'm I'm just as surprised as you are. Oh, we have ways of finding these things out. What ways do you have? Well, we got a letter this afternoon. Yeah, what sort of letter? An advertisement from the lumber company Want to buy some lumber? I do not. I want to find out how you've become a gossip by remote control I am not a gossip. I just opened the mailbox and david you were perfectly right this morning You would be surprised how much that little mailbox can hold Um, when you're at home doing the housework is lunchtime simply a snatch a bite time or do you make it a relaxing interlude There's one way you can manage to add refreshment to lunch without taking a bit of trouble And that's to open a nice cold bottle of coca-cola Coke goes with any food and makes even the sketchiest leftovers taste better Try it and see whether you don't find the afternoon shores lighter when you lunch refreshed Say mr. King, uh, right nice young girl that mrs. Norton I hope you'll be bringing her a lot of mail and not just bills either. Oh likes getting mail does she well most people do But claudia especially What's she gonna be doing with herself up here besides opening all her mail? She ain't got yet Oh claudia will keep busy claudia and david rarely ever have a dull moment That's the same with mr. Cook and myself. Why just the matter of buying a dozen eggs That's a very gay adventure with claudia Well, I can't see I ever get a kick out of buying a dozen eggs Well come around tomorrow mrs. Cook and you'll get a big kick out of the way claudia goes about buying one simple dozen country eggs I'll be there so long mr. King by miss cook Every day monday through friday claudia comes to you transcribed with the best wishes of your friendly neighbor who bottles coca-cola So listen again tomorrow at the same time And now this is joe king saying olivar And remember whoever you are whatever you do wherever you may be When you think of refreshment think of coca-cola Or coca-cola makes any pause the pause that refreshes And ice cold coca-cola is everywhere This broadcast of claudia was supervised and directed by william brown meloni And now here's a word from your friendly neighbor who bottles coca-cola