And now stay tuned for a program that has rated tops in popularity for a longer period of time than any other West Coast program in radio history. The Signal Oil Program, The Whistler.  I'm The Whistler, and I know many things, for I walk by night. I know many strange tales hidden in the hearts of men and women who have stepped into the shadows. Yes, I know the nameless terrors of which they dare not speak. And now for the Signal Oil Company, The Whistler's strange story. Custom Made Murder. David Price gripped the wheel of his speeding automobile firm, and the grim set of his jaw matched the tightly building pressure within. He was oblivious to the heavy rains flattering against the windshield, oblivious to the danger of the storm-swept highway. He was too preoccupied with the anger welling around inside him. Anger at his wife's older sister Harriet just arrived for one of her frequent visits and her brilliant success in the style world. David could accept Harriet's mom. In fact, he often did, in generous amounts. But he couldn't accept her, even for a short time. Harriet had always wanted David's wife Margaret to exploit her skill as a designer, or so she said. Actually, David felt. She'd always wanted Margaret to divorce him. For marrying David was the one thing Margaret had ever done without Harriet's supervision and approval. Now David swung the car off the highway into the driveway under the carport. A moment later, he was letting himself into the house. You've driven very fast. Why is she, Margaret? What's your sister? You're not even going to kiss me? Fine, greeting. I'm a fauna. Harriet? Yes, it was an important call. San Francisco. Sure, sure. Important. Everything's important to Harriet. And I suppose it's still important that you go to work for her too, huh? Well, I'd at least be earning some of the money she gives me. Well, you always have to bring that up. You bring it up whenever you need anything. You can certainly afford to be nice to her, especially since she's only here for such a short time. As short a time as I'd like. Oh, come on, David. Forget it. She'll only be here a few days. Sit down. I'll pour you a drink. I'll fix it, huh? And martinis. Harriet, it's a favorite. I'll have bourbon, just to be obstinate.  Oh, Margaret, I know she's your sister. You couldn't help that. But what you can help is... Well, hello, David.  I didn't intend to, Harriet. How sweet. You drink, dear. No, let me give it to her, darling. No, it's all right. David? Thanks. My, the lord and master.  That's his pipe and slippers. And if she does? Well, she always was a little backward. Now, you too. Don't worry, dear. David and I understand one another. That's what bothers him. I don't understand you, Harriet, or anyone who tries to break up a home. Is that what I'm doing? Well, it's what you'd like to do. Only I'm not the type to stand by and watch. No, no, no. I'm aware of your type, David. The big driving male, the burly one, bull and a china shop. Get it out, Harriet. I can take so much. And then the big masculine one starts breaking things. Maybe. I'd like to break your neck sometime. David! It's all right, Margaret. Like I've always said, he's plain speaking. Almost an earthy quality. You should wear more tweed, David, you know? And, Margaret, where is that pipe you were about to fetch? You love it, don't you? Grinding your hair. Am I a bug beneath it, Mary? Sort of like Kurt Kramer? Poor little Kurt Kramer.  Uh-huh. But a faithful one. How long he worked for you? 16 years, wasn't he? And his reward? David, you know perfectly well that Kurt Kramer was a criminal. My sister did nothing more than any employer would have done. Kramer was entrusted with company funds. David, everything I said was true. Yes, yes. You're careful that way. It's probably true that Margaret should take up designing again. But it's scarcely necessary for her to leave her home and husband to do it. You don't even try to understand, do you, David? For just one instance, you know, you might consider Margaret. For not exactly rolling in wealth, you know. No, she doesn't need my money. She has you. Let me finish. Margaret could have four, five times as much if she came to work with me. And more than that, as much as it displeases me, I just may not live forever. I'm older than you two. Hmm. Margaret should know something about the business you'll inherit. The move to San Francisco is just a beginning. Eventually she'll learn about it. Stop it, Harriet. Both of you, stop it, please. Stop shouting at one another. And stop acting as if I had nothing to say about this whole thing. Margaret, I... I'm sorry, Harriet, but... I do want to try to make this decision independently. Independent of both of you. No, see about that.  Because like you say, I'm the driving male, the bull and the chanisher. I won't stop smashing things until I'm certain my wife is going to remain my wife. I'll very know. And my way is to beat you at every turn of the game. A challenge?  It's in the clear, isn't it, David?  And the plan of attack keeps buzzing around in your mind. That part isn't amusing, is it? No. Rather it's a burning bitter hatred. What to do? How? When? And the knowledge that now more than ever, Harriet will do her best to separate you and Margaret. Sharpens your fury to a fine point.  The plan of definite action starts to take hold, doesn't it, David? And the following day at the office, it dominates your thoughts. Hi. Yes? There's someone here to see you. Oh. Right out here. Right. Yes? My name's Willard, George Willard. I was court reporter on the Kramer case. I'm out of that line now. I see. You said at the time it'd be worth your while to know what happened to Kramer. I mean, when he got out and all, Kramer is out of prison? That's right. A couple of months ago. And he's pretty bitter about your sister-in-law, Mr. Price. For me, he could kill her for what she did to him. Sending him up and all that. He could kill Harriet? Like I say, he's pretty bitter. Still worth your while to know about him? I... Yes, yes, of course. Where is he? He wanted to drop out of sight, Mr. Price. I'll make it worth your while, Willard. What is he? Little bird south of here. Loma Vista, I believe. Runs his shop there, tailoring men's clothing, mostly. Nothing like the old days. Kramer was a top designer once, wasn't he? He is. Loma Vista. Funny little guy. Not too well, I understand. Well, thanks, Willard. Thanks very much. I'll get my checkbook.  I didn't mean to bother you here at your office, but, well, you seem to want to know about Kurt Kramer. Oh, I did. I... I appreciate it, Mr. Willard. Yes, maybe you want to help him, huh? This way? Does everybody a little good? Yes. Yes, this way will do everybody some good. As I say, I'm very pleased to be the first to know that Kurt Kramer is out of prison.  You've heard me say that the next best thing to a new car is any car of any age powered with Signal Ethel. But tonight, friends, I'd just like to tell you in plain everyday language why I use Signal Ethel in my car. When I touch the starter, I want my motor to spring to life quick, like turning on a light, and Signal Ethel gives me that kind of start. When I step on the gas, I want a feel pickup that makes the back of the seat come up and push me forward. And Signal Ethel gives me that kind of pickup. When I start up a hill, I want plenty of smooth power to take me over the top without shifting. And I can always count on Signal Ethel for that. There you have it in a nutshell, friends, the reasons why I like Signal Ethel and why I'm so sure you will be just as enthusiastic as I am about Signal Ethel once you try a tank full. It's interesting, isn't it, David, how a few hours a day can change things so. Now you've a weapon against Harriet, a means to frighten, perhaps send her away. Because Kurt Kramer, a man who once vowed he'd repair for sending him to prison, is out, free, and only you know where to locate him. And there's something else, isn't it, David? Harriet's own words that Margaret will inherit her business. Harriet's dress business is worth a couple of hundred thousand dollars. You feel that you can afford to be pleasant to Harriet, perhaps toy with her for a while before dropping the bombshell. Of course, you've no way of knowing that Harriet has a bombshell of her own. Hello? Anybody here? Margaret? What? Oh, Harriet. David. Margaret upstairs? No, no, she... David, that tie, do you wear such things just to torment me? No, Harriet, you're not drawing my fire tonight. I'm in a most delightful mood. Here, I'll take it off. I don't. Much. Providing you don't decide to choke me with it. Hardly. Not even when I tell you about Margaret? What about Margaret? She's gone, David, to San Francisco. It was her decision. She arrived at it just as she said she would, independent of both of us. Cut it out, Harriet. I can't believe it. She'd go without telling me. She, uh, she left you this note. I'd sort of like to know what it says, too. You probably dictated it. Oh, David. Okay, okay. I'll go along with a gag. She says as if you didn't know. David, I thought leaving this way was best. I'm a little weary of angry words. I decided that going to San Francisco was the wise thing for me to do. Permanentism will be here something I can't predict right now. And I've reached that decision, as you know. The only thing I'm certain of at the moment is that I do want to go. Whether I'm really a good designer or not. Not, David. Let's get out of here, Harriet. But you're angry at me. You could strangle me, I know it. No, no, Harriet. I was surprised for you. All right, it was a shock. But I'm not angry. What did you say? I'm not angry. Maybe it's best this way, huh? I'll take my chances with Margaret. If this is what she wants, she's entitled to it. She really cares when she comes back. Well, you do amazing, David. You really do. Don't forget it. I'm tired. I'm going to turn in. See you tomorrow, Harriet. Maybe I could take you on to dinner. I'd love it. Just the novelty of it. Good night, Harriet. You're glad you remain calm and reasonable. You've thrown Harriet off guard. And you've made a decision. If you're certain, you can win Margaret back, but only if Harriet is permanently out of the way. Yes, David, it's going to take a little time and some careful planning. And it begins the next day, with a quick trip to the neighboring city of Loma Vista. A little shop operated by Kurt Crane. Fortunately, you find him alone. Yes, sir. What's that? Oh, Mr. Price. David Price? No, it can't. It is, Kurt. David Price in the place. How are you? I'm all right, Mr. Price. No complaints. No? Well, you've a right to review, I said. Well, I just find you here. I'll get head straight to my dear sister-in-law when you were released. Oh, no, no, no, no, no. I had thought of it, yes.  But now, now, all I want to have is peace of mind. To live and let live. Believe me, Mr. Price, I don't even want to see Harriet Gordon. You don't look too well. Oh, I'm all right. Mr. Price, just do me a favor. I know. Say nothing to Harriet about where you were. If you please. I don't want any more trouble.  I'm out of prison. That's all I want right now. If you excuse me, Mr. Price, I have a suit button to lay out a rushed job. Of course.  Good luck, and I'll say that. Thank you. Thank you, Mr. Price. You always were our... Forget it, Kurt. You watch him walk wirly off toward the back of the shop. And you start away yourself.   Quickly, you reach out. Flip the big shears under your overcoat and leave the shop. Now you know exactly what you're going to do. Don't you, David? Back home, you're surprised to find Harriet packing your suitcases.  She greeted President. Tried to persuade her to stay on for a while. When she refused, you dropped the bomb. You know, Harriet, I saw an old friend of yours with him. Oh? Uh-huh. Kurt Kramer. Well, he's out of prison. Been out for a couple of months. Kramer. I'll do it. I wonder why no one told me. You've been very quiet about it all. You talked to him? I talked to him. Did he mention you? You? Huh? Several times. Years in prison didn't make him feel any more kindly towards you. No. No, I don't suppose they would.  But you are my wife's sister. She thinks you're pretty wonderful. For her sake, I'd like to... Well, sort of watch out for her. I mean, we're Kurt's people. Until we know what he's up to. You wouldn't dare be. A man who's thought of nothing else for so long. I'm so sure. Why not stay on a while, Harry? Let me help you out. Ridiculous. I'll talk to the police.  And they'll laugh at you. Here's our. I suppose they would. What do you suggest? Let me handle it. I'll run down to Loma Vista and have a chat with Kurt. Well, that's nice of you, David. But I still don't know why I shouldn't go to San Francisco. Because if Kramer were figuring on anything very desperate, he'd do it while you were on one of your trips. Not here, where he'd be picked up and questioned. Oh, I see what you mean. I think you're right. Perhaps I'd better stay here until you talk to him. Oh, Mr. Price, you're back. Yes, I'm back. I thought I'd better come down and warn you. Oh? Yes, it's about Harry. She knows where you are. Oh, I didn't tell her. She knows about the shop, the own house. I see. And you can expect her visit from her. For all I know, she may be on her way down here now. She's up to no good, Kurt. I'm certain she intended to run you out of business. Run me out of business? She'd be too late. What do you mean? Oh, I'm quitting. Didn't you notice the signs on the front window? Well, no, as a matter of fact, I didn't know it. Oh, I'm closing out, Mr. Price. Finished. That's too bad, sir. Hey, it will be very disappointed to hear about it, I'm sure. Very disappointed. Yes, should be sure. Mr. Price, would you do me a favor? Of course. Here, take it. Give the key to my shop. Give it to her with my compliments. Really? Kurt, you... I am meaning it. Give her the key. She can have it all. I told you before, Mr. Price, I want keys of my engine. I'm going to get it. I'm leaving town tonight on the 10 o'clock train. Oh, and you can give her a message for me. Yes? Tell her she might as well forget about me, because she'll never find me. I'm going a long way from here, and I'm never coming back. The key to Kurt's shop. Safely tucked away in your pocket. You start the drive back home. It was a lucky break, wasn't it, David? Getting the key so easily. And now you know that Kurt intends to leave town on the 10 o'clock train. It fits your plan perfectly, doesn't it, David? It's early evening when you arrive at the house. Find Harriet in the living room waiting for her. Did you see Kramer, David? Yes, I saw him. We had quite a chat. Well? Now he wants to see you. Does he? Well, I don't want to see him. I think you should. Get it over with, I say, once and for all. I'll go with you. What does he want? I don't know. I can't quite make him out. He seemed to have changed since my first start with him. Frankly, I'm rather curious to find out what he has in his mind, aren't you? Well, I... Well, it's nothing to be afraid of as long as I'm with you. We could run down to tonight. It's only a half-hour's drive. I really think you should, Harriet. All right, I'll go. All right. Tell you what, I have to drive by the office for a bit. Why don't you get ready while I'm gone? I'll be back in a little while. I'll be ready. Her curiosity has aroused, isn't it, David? As you knew it would be. And now you hurry from the house. But instead of driving to your office, you turn off at the railroad depot. Chat pointedly with Sam at the ticket window. Then buy a ticket for San Francisco on the streamliner leaving later in the evening. And there it is, David. Another key step in your plan accomplished. As you drive home, you glance at your watch, a quarter to eight. It'll all be over soon, wouldn't it, Dave? Yes, Harriet will be dead.   And Kurt Kramer's sudden departure from town a half-hour later on the 10 o'clock train will look like he's running away after killing. You've planned the timing perfectly, haven't you, David? And when it's over, you'll take a plane to San Francisco and Margaret. Arrive there a few minutes before the streamliner. You manage a confident smile as you reach home and enter the house. Harriet? Harriet? You're here, David. Well, I said I'd be back in a little while. I've changed my mind, David. I'm not going to see Kramer. If he wants to talk to me, he can come to see me. Harriet, I think you ought to give him a minute. I'm not going, David. That's final.  But that won't be difficult. You decide to drop the subject of Kramer and the two of you have a highball. Then you suggest going out for dinner because in that you see a solution. Harriet's never been to Kramer's shop. You can drive her there on the pretext of taking her to an out-of-the-way restaurant, you know. And to your surprise, Harriet's instantly agreeable. As you drive Harriet toward Loma Vista, you're conscious of the shears in your coat pocket. When you park on the side street, it leads to the back entrance of Kurt Kramer's shop. Harriet becomes physical. It's any restaurant, David. I don't see anything much but a deserted building. Well, the atmosphere's on the inside. Come on, come on. You like it. It's a favorite of Margaret's. Well, I bet you'll have to prove it to me. I have to go and look back in this. One of those exclusive deals now. Binks at any hour.  But it looks so dark, David. There we are. There. After you, Harriet. No, David, I don't want to. I said after you. Well, David, what... What is this? I don't like this. Oh, Harriet. But I like it. I like it fine. It's done, isn't it, David? You've killed Harriet and dropped Kurt Kramer's sheer with your fingerprints white cleaned on the floor beside it. A beam of light from the front of the shop highlights one of Kramer's signs on the wall behind Harriet's spot. Whitty for good. How apropos, Harriet. How apropos. I'm from Missouri. You've got to show me. That was my answer to signals motor oil experts when they first told me new signal premium motor oil would reduce engine wear due to lubrication, 50%, and show me they did, friend, with some of the most amazing, most convincing tests I've ever witnessed. On scientific devices, they showed me how some motor oils break down and permit damaging wear inside an engine, wear that causes engines to lose pep and power, causes them to eat oil and need expensive motor overhaul. Then they showed me a revolutionary new technique that measures this wear at the very second it is happening. And on this device, they showed me how new signal premium motor oil reduces this wear due to lubrication by 50%. Well, friends, after seeing this convincing proof with my own eyes, you can guess what kind of oil I'm using in my car. The same kind I hope you're using if you want your car to last. New signal premium. The heavy-duty type oil you get at no increase in price. At Signal Service Statement. It's done, isn't it, David? You've killed Harry, and now you're leaving her in Kramer's shop. His scissors, the murder weapon close to the bottom. Now all you have to do is drive to the airport, take a plane to San Francisco, arrive there a few minutes before the screen liner, and you'll be with your wife Margaret when she receives the shocking news. The murder of her sister, Harriet, at the hands of her old enemy, Kurt Kramer. You'll also be with her when she inherits her sister's flourishing business. You slip out the side entrance of Kramer's shop. As you turn to close the door, a car pulls up close by.  It's too late to run now. You've got to think quickly and revise your plan. Oh, Officer, I'm glad you're here. I was about to call the police. Oh, what's wrong? I'm here quickly. I've been a murderer. Were they? Yes. Hey, Mike, come on over. Okay, let's have a look inside. It's my sister-in-law, Harriet Gordon. I left him the shop more than ten minutes ago with Kurt Kramer. Ten minutes ago, huh? Yes. I dropped her off here and then I went down the street for cigarettes. When I got back, the shop was dark. Kramer was gone, but I found Harriet. Where? There she is. Just a few minutes. It's horrible. That Kramer, he must have hated her worse than I thought. Speaking of Kramer... What? Why, Mr. Price? Kramer. Recognize this woman, Mr. Kramer? Harriet. That's Harriet Gordon. That's the woman who called us late this afternoon. Told us you threatened her life.  Mr. Price has warned me about Harriet. Said she planned to run me out of business. Oh, he threatened her all right, Officer. I heard him. Gordon told us Kramer hadn't made the threat to her in person. You must have told her about them. I naturally did. To warn her. I see. And you say you left Harriet Gordon here with Kurt Kramer ten minutes ago, huh? Yes. You saw them together? Of course. Kramer opened the door when Harriet entered the shop. I'm afraid not, Mr. Price. Looks like you've got some explaining to do. Because of your warning, your sister-in-law called us. We decided we'd better ask Mr. Kramer a few questions. So we picked him up an hour ago. And he's been with us ever since. Let that whistle be your signal for the signal oil program The Whistler each Sunday night at this same time. Meantime, signal oil company and the friendly independent dealers who help you go farther with signal gasoline hope you'll remember. Regardless of what gasoline you use, you will enjoy more miles of happy driving to drive at sensible speed obey traffic regulations and avoid taking chances.  Heartless of your own. The secret of tonight's story were Bill Foreman, Betty Lugerson, John Stevenson, Alice Backers, Tritzfeld, Charles Steele and Byron Kane. The Whistler was produced and directed by George W. Allen with story by Joel Malone, music by Wilbur Hatt and was transmitted to our troops overseas by the Armed Forces Radio Service. The Whistler is entirely fictional and all characters portrayed on the Whistler are also fictional. Any similarity of names or resemblance, two persons living or dead is purely coincidental. Remember at this same time next Sunday the Whistler will bring you another strange story. Seattle takes three in which an advertisement for three passengers to Seattle leads to a double murder Marvin Miller speaking for the Signal Oil Company. Stay tuned now for our Miss Brooke, Sarah E. Varden, who follows immediately over most of these stations. This is CVS, the Columbia Broadcasting System.


Hi there, my name is Matthias and I work on Chrome DevTools. In Chrome 83 we shipped a new Chrome feature that lets you use DevTools to simulate various vision deficiencies, including color vision deficiencies in the Blink renderer. In this session, I'll explain why we did this, but also how you could implement similar functionality using web technology in HTML, CSS and SVG. And finally I'll explain how we actually implemented this in the Blink renderer in C++. But let's start with the why. What's the most common automatically detectable accessibility issue on the web? Well, it turns out that it's low contrast text. According to web aims accessibility analysis of the top 1 million websites, over 86% of homepages have low contrast. So what is Chrome DevTools doing about that? Well, we already offer several tools that can help developers and designers to improve contrast and to pick more accessible color schemes for their web apps. For example, the DevTools color picker calls out bad contrast ratios for text elements. It shows the recommended contrast line to help manually select better colors and it can even automate that selection by suggesting accessible colors that you can apply with a single click. And this is just one example. We have additional tools like the inspect mode tooltip, the CSS overview tab or the lighthouse accessibility audit. All of these tools mainly focus on surfacing contrast ratio information and giving you options to fix it. We realized that DevTools was still missing a way for developers to get a deeper understanding of this problem space. And this is especially important because roughly one in 20 people suffer from a color vision deficiency. Such impairments make it harder to tell different colors apart, which can amplify contrast issues. To illustrate these various deficiencies, let's look at some photos of crayons. A chromatopsia or monochromacy is the complete inability to perceive any color except for shades of gray. Thankfully, this is an extremely rare color vision deficiency. Due to renopia is the inability to perceive green light, making it difficult to distinguish red from green. Protonopia is the inability to perceive red light and Tritonopia is the inability to perceive blue light. Concretely, what all of this means for web developers is that your web app could have color contrast issues that people with regular vision wouldn't even notice. So in Chrome 83, we shipped a new DevTools feature that lets you simulate vision deficiencies in order to help developers understand these problems and build more accessible experiences. Here's the demo again. I'm using a page that's playing a video to show that this really works with all kinds of web content, even if the page includes iframes, animations, video elements, or anything like that. You can simulate vision deficiencies through DevTools and then click around, scroll, interact with the page in any way you like. Ok, so that's the feature we built. Now let's talk about the implementation. Before we dive into the blink renderer, as a thought exercise, imagine you want to implement this feature using only web technology, so using HTML and CSS. How would you do it? Any ideas? Well, you can think of these emulations as a big overlay that covers the entire page, and the web platform has a way to do that, with CSS filters. With the CSS filter property, you can use some predefined filter functions such as blur, contrast, grayscale, hue rotate, and many more. The CSS filter property also accepts a URL which can point to an SVG filter definition.  For example, here's a custom filter definition based on a color matrix. Every pixel's red, green, blue, and alpha color value is matrix multiplied to create a new color with modified red, green, blue, and alpha values. Each row contains a multiplier for, from left to right, R, G, B, and A, as well as a fifth column that we'll talk about in a second. The first row of the matrix is used to compute the new red value, the second row green, the third row blue, and the last row alpha. So that's what each row stands for, and there's not four but five columns, because the last one is a constant shift value. We don't need shift in our implementation, so we'll keep those values at zero. Now, you might be wondering, where do these numbers come from? What makes me think this color matrix is a good approximation of Deuteronopia? The answer is science. These values are based on a paper by Machado, Oliveira, and Fernandez from 2009. They developed a color vision deficiency simulation model that is physiologically accurate. We read the paper and used their formulas to create SVG-compatible color matrices. Anyway, so we have this SVG filter, and we can now apply it to arbitrary elements on the page using CSS. And here's what that looks like. This code already gives us the effect that we're after. If we wanted to, we could build our DevTools feature as follows. Whenever the user emulates a vision deficiency through the DevTools UI, we inject the SVG filter into the Inspect document, and then we apply the filter style on the root element. But there are a number of problems with that approach. For example, the page might already have a filter on its root element, which our code might then override. The page might also already have an element with ID Deuteronopia, which would clash with our filter definition. The page could also rely on a certain DOM structure, and by inserting the SVG into the DOM, we might violate these assumptions and break the page. All these edge cases aside, the main problem with this approach is that we would be making programmatically observable changes to the page. If a DevTools user inspects a DOM, they might suddenly see an SVG element that they never added, or a CSS filter property that they never wrote. That would be very confusing. So to implement this functionality in DevTools, we knew we needed a solution that doesn't have these drawbacks. Let's see how we can take our current solution and make it less intrusive. There's two parts to the solution that we need to hide. First, the CSS style with the filter property, and second, the SVG filter definition, which is currently part of the DOM. Let's start with that last one. How can we avoid adding the SVG to the DOM? One idea is to move it to a separate SVG file. We can take this piece of code and save it to an SVG file, but before we do that, we need to make some changes. See, up until now we were using inline SVG in HTML, which follows the HTML parsing rules. That means you can get away with things like omitting quotes around attribute values in some cases. However, SVG in separate files is supposed to be valid XML, and XML parsing is way more strict than HTML. To make this valid standalone SVG and thus valid XML, we need to make two changes. Do you know which ones? The first thing is the XML namespace declaration at the top. The second change is the so-called solidus, the slash that indicates that the filter affects color matrix tag both opens and closes the element. The HTML parser couldn't care less about this slash, but in XML, the difference matters. Anyway, with those changes, we can finally save this as a valid SVG file. Now we can just point to this file from the CSS filter property value. We no longer have to inject SVG into the document. That's already a lot better. But, hmm, now we depend on a separate file. That's still a dependency. Can we somehow get rid of that as well? As it turns out, we don't actually need a separate file at all. We can encode the entire file within a URL by using a data URL. To make this happen, we take the contents of the SVG file that we had before, we add the data prefix, configure the proper MIME type, add a comma, and we've got ourselves a valid data URL that represents the very same SVG document. Except now, we no longer need to store the file anywhere or load it from disk or over the network just to use it. Now, instead of referring to the file name like we did before, we can point to the data URL. At the end of the URL, we still specify the ID of the filter we want to use, just like before. I do want to point out that there is no need to base 64 encode the SVG document in the URL. Doing so would only hurt readability and increase the file size. We added backslashes at the end of each line to ensure that the new line characters in the data URL don't terminate the CSS string literal. So far, we've only talked about how to simulate vision deficiencies using web technology. Interestingly, our final implementation in the Blink renderer is actually quite similar. Here's the C++ helper utility we've added to create a data URL with a given filter definition based on the same technique. And here's how we're using it to create all the filters we need. Note that this technique gives us access to the full power of SVG filters without having to reimplement anything or reinvent any wheels. We're implementing a Blink renderer feature, but we're doing so by leveraging the web platform. Okay, so we figured out how to construct SVG filters and turn them into data URLs that we can use within our CSS filter property value. Can you think of a problem with this technique? It turns out we can't actually rely on the data URL being loaded in all cases because the target page might have a content security policy that blocks data URLs. Our final Blink level implementation takes special care to bypass CSP for these internal data URLs during loading. Edge cases aside, we've made some good progress because we no longer depend on inline SVG being present in the same document. We've effectively reduced our solution to just a single self-contained CSS filter property definition. That's pretty good, but now let's get rid of that too. Because, as we discussed earlier, our CSS filter property might override a filter in the real document and break things. It would also show up when inspecting the computed styles in DevTools, which would be confusing. So, how can we avoid these issues? We need to find a way to add a filter to the document without it being programmatically observable to developers. One idea that came up was to create a new Chrome internal CSS property that behaves like filter but has a different name, like dash dash internal DevTools filter. We could then add special logic to ensure this property never shows up in DevTools or in the computed styles in the DOM. We could even make sure it only works on the one element we need it for, which is the root element. But this wouldn't be ideal. We would be duplicating functionality that already exists with filter and even if we try hard to hide the property, web developers could still find out about it and start using it on the web, which would be bad. We need some other way of applying a CSS style without it being observable in the DOM. Any ideas? I have to admit, at this point I got a little stuck and I couldn't immediately see a good solution. Until one evening I was relaxing at home doing some light reading of the CSS specification as one does. And I came across this section where the CSS spec introduces the visual formatting model it uses. And one of the key concepts there is the viewport. This is the visual view through which users consult the web page. A closely related concept is the initial containing block, which is kind of like a styleable viewport div that only exists at the spec level. The spec refers to the viewport all over the place. For example, you know how the browser shows scrollbars when the content doesn't fit? This is all defined in the CSS spec based on this concept of the viewport. And it turns out this viewport exists within the blink renderer as well as an implementation detail. This is the code that applies the default viewport styles or more accurately the styles for the initial containing block. It handles zindex, display, position, overflow. And there's some other magic related to stacking context which doesn't directly translate to a CSS property. But overall you could think of this viewport object as something that can be styled using CSS from within blink. Just like a DOM element, except it's not part of the DOM. This gives us exactly what we want. We can apply our filter styles to this viewport object which visually affects the rendering without interfering with the observable page styles or the DOM in any way. To recap our little journey here, we started out by building a prototype using web technology instead of C++. And then we worked on moving parts of it to the blink renderer. We first made our prototype more self-contained by inlining data URLs. We then made those internal data URLs CSP friendly by special casing their loading. We made our implementation DOM agnostic and programmatically unobservable by moving styles to the blink internal viewport object. What's unique about this implementation is that our HTML, CSS and SVG prototype ended up influencing the final technical design. We found a way to use the web platform even within the blink renderer. For more information and links to the relevant design docs and patches, check out our detailed article on the DevTools engineering blog. And that's it. If you have any questions or feedback, don't hesitate to ping me on Twitter. Thank you for listening and take care!


The additively manufactured CoCIFEMNNI high entropy alloy with laser powder bed fusion, LBPF, under reactive N2 atmosphere exhibits enhanced strength and ductility due to the formation of ordered nitrogen complexes, ONCs, in the octahedral interstitial position of the HEA matrix, resulting in a higher dislocation density with smaller dislocation cells, and an outstanding ductility of 15.3%, with an increment of 34%. This article was authored by Dandan Zhao, Kuan Yang, Do Wei Wang, and others.


Hi Jonathan. Hey there. Is that carpet? Excellent.  On this, I believe it's warm around the world today. I've seen folks in Europe reporting that it's warm. Yeah, Tracy mentioned that it's warm. That's nice. Seems to be warm all over. Sorry, I'm just going to do something here quickly because I've got something sitting in front of me that's flashing and I'm trying to turn it off. So while everybody is joining, let us know where you are joining us from. You're welcome to let us know in the chat or you're welcome to use voice and let us know where you're joining us from. I'm Karthik from India. Okay, we've got Karthik, welcome Karthik. I met Karthik officially for the first time on Wednesday morning. Yeah, it was on the dashboard widget workshop that you have. That's right, dashboard widgets, but I mean what I'm saying is we spoke for the first time, I think Wednesday morning when there was a WPCLI. Yeah, actually I have already met you in the WP training meetings as well. Okay, all right. Okay, excellent. Yeah, it's so difficult to keep track of everybody that I've met. Okay, we've got Anatoly from Ukraine, we've got Sharon from Galveston, Texas, Rico from Switzerland, Doug from Portland, Oregon. Hey, Adrian, see you there from Anaheim, California. This is going to be around 90 degrees Fahrenheit or 3040 degrees Celsius today. We've got, I think it's Mark from Isacara, Washington, Karthik from India. How do you pronounce that name? Coimbatore. Coimbatore. Okay, I'm going to try and remember how to say that next time. It's a city in Tamil Nadu, India. Okay, excellent. All right, so let me introduce myself very quickly. For those who don't know me, my name is Jonathan. I live in Cape Town. It is the middle of winter, but it is 30 degrees outside today. So Cape Town is doing its usual thing of being weird. I work at a company called Automatic. I am a developer educator, sponsored to work with the training team. And all that just means is I do these kinds of things. I do workshops, I do tutorials, I do courses. I try and help folks learn WordPress development specifically. So today we're going to be diving into responsive images. Now, before we get into today's topic, I just want to mention that unlike my usual Thursday workshops, today is a little bit less show and a little bit more tell. There's not a lot of coding we can do really around this topic in a short space of time. So today is just to introduce the responsive images API to you show you what it does and kind of give you an idea of how it works. But there's generally, depending on how you build your themes, you generally shouldn't have to interact with it too much because it's kind of things happening under the hood. But that is the goal for today's workshop. Then just a few announcements. We always try to get through these. Tracy is co-hosting with us today. Tracy seemed to have some trouble with his video today so you can't see Tracy. But thank you to Tracy for co-hosting. Please, if you can't see any of these slides, please let me know you're welcome to either unmute and let me know if you can't see the slides or mentioned in the chat. We should be presenting in focus mode, which I actually haven't checked this time so I'm going to quickly check that. Yes, we are in focus mode and all focus mode means is that I can Tracy and I can see all of you and all of your video, but you can't see each other. One reason we do that is because there have been some situations of zoom bombing. I seem to have been very, very lucky in that not many people have zoom bombed my sessions, but it does still happen. So that's one of the reasons we've enabled that. You are as always welcome to ask questions. You're welcome to post your questions in the chat or use your mic to ask questions. The only thing that I do ask is if your question is not specifically related to what we're talking about at the time, please keep it until those breaks that I allow for questions. But if you're posting them a chat, you're welcome to post them as they go through and I'll get back to them when I get a chance. I'm going to start with item two on this announcements list. I've just come back from lunch with some colleagues, not work colleagues just colleagues that I know from the local tech community. And I haven't been drinking I promise, but I have had lunch with them and chatted with them so that does make me a little bit excited. So if I'm speaking too fast, if I'm rushing off like I tend to do, please do let me know and I will slow down or I will take a pause or I will take a breath. As I mentioned, we're not going to do that much local coding today, but if there is some coding some some things that we can do later so if you would like to follow along with me please make sure your local install is ready. You just need a local WordPress install I'll go through the requirements in a second. It's nothing it's nothing major. I will be posting this to WordPress TV afterwards. And if you're looking for any other tutorials or courses you can visit alone at WordPress.org and any other developer news or blog updates or posts you can go to developer WordPress.org slash news. Those are two great places to look for information. Sharon says yes zoom bombers are not welcome had it happened to me in one of my meetings it's terrible. And what we've what we think we've determined is that it seems to be teenagers in US time zones later in the US time zones I guess they're not awake at the time that I run my workshops, which is why it might not have happened but hey I might be I might be inviting it now so I best be careful what I say. All right. Let us move on to learning outcomes. Today we're going to look at what it means when we talk about responsive images and how that works. We're going to dive a little bit into the history of how things used to work responsively or adaptive design is what the term is. Then I'm going to show you what the WordPress responsive images API does effectively under the hood I'm not going to show you the actual code but I'm going to show you the results. We're going to look at some of the functions and the hooks that have added to enable this responsive images API. And then we're going to chat briefly about creating your own responsive images in your WordPress site. We're going to look at how you do that in classic themes and how that is taken care of in block themes. And the, the secret about block themes is all handled for you don't have to do anything which is which is great. The requirements for today if you want to code along with me later on is just the default WordPress install a text editor to put some code into one of the theme files and then if you have them installed the 2021 and 2023 default themes. The reason for this is the 2021 was a classic theme or is a classic theme so that's the one we'll be using when I show you the classic theme way and 2022 is obviously a block theme and will and will dive into how that works. Adrian says yes it's typically the teens in the ones who have been bombed that seems to be a common common thing they used to they used to graffiti things now there's a bomb. Okay. I'm going to take a pause there and have some water. If anybody has any questions or if anybody's still getting that thing set up. Otherwise, if not we will dive straight into some documentation. All right. And the first piece of documentation that I'm going to show you today is not one from the WordPress developer docs. But before I do that what I'm going to also do is I'm going to share my slides in the chat because there was a little bit of a bug with the link for my slides and meet up. And a full stop at the end which was breaking the URL so I'll share those slides again. But this is the Mozilla developer. What are they called MDN what does it stand for Mozilla developer network or the MDN web docs. If you are building for the web, and you've never seen MDN before I highly recommend checking it out. It is everything to do with HTML CSS and JavaScript since 2005. It is my default location when I'm looking for knowledge about how CSS works our HTML works and our JavaScript works. For those of you have been around for a while, it is the better version of what W3 schools used to be. We've W3 schools that updated their knowledge but there was a state where they were not seen as the best place to go. But it is a great resource for everything related to CSS HTML and JavaScript. And so the link that I'm going to share is the one about responsive images. It's a very long and detailed document I don't expect us to go through it now. But it will give us a good example of what a non responsive set of images look like. There is a live example in this document which you can open. I will share it in the chat and we will use that as our example of what not responsive images look like. And then we're going to dive into something called your responsive mode in your browser. Now depending on which browser you are using it's called something different. In Chrome based browsers it is called I think it's just called responsive mode. In Firefox and Safari it's called responsive design mode. I use Chrome so I'm going to show you at least I use Brave which is based on Chrome so I'm going to show you how to get there in Chrome. And then if we have some time we'll dive into Firefox as well. So whatever the shortcut is to open up your developer tools mine happens to be F12. So that opens up my developer tools mine I like on the right hand side. And then it's this little button I just need to hide something here.  And you can then switch between different responsive sizes. So there's a tablet one there's a mobile one. There's a laptop one you can't see it on screen right now but there's even a desktop one. You can even manually change these values you can create your own ones it's a great way to test for whether or not your site is responsive. I'm going to open up Firefox quickly so we can see how it works in Firefox. For those of you who use Firefox. Let me just get Firefox up and running. And let's actually get that link in Firefox that I opened up here. Let me just copy this out. I think in Firefox it'll be a similar shortcut mine might be F12 again no it's not maybe it is maybe I'm not in the right place. It is F12 there we go. So in Firefox because I don't use it much I've got my developer tools at the bottom. And I don't actually know where the, I don't use Firefox a lot there it is it's on the right hand side just this little icon it looks like a tablet with a mobile phone in front of it. I click on that and it enables my responsive design mode in Firefox, same kind of concept. I don't remember who came out with this first I think if memory serves it was Firefox who came out with it first. But it is available now in most most browsers let me open up Safari quickly, and we can see how that works in Safari. Where Safari gone Safari open. Don't use Safari much so it might take a while to open. There we go there is Safari. Let me grab the URL and open up my Safari browser. And now I'm going to ask might have to ask for some help because I actually don't know how to enable developer tools in Safari I don't use it a lot. If anybody knows they're welcome to let me know. It's probably going to be under. You somewhere perhaps. Windows and developers tools. Say again. No, no. Move on right window. Okay. Window window. Okay. Window. There we go. And. Don't have that option. Maybe you're not activated the model. Okay. All right. It seems it seems it needs to be activated first. Okay. So somebody is saying file settings advanced and let's go file. Let me find my settings. I didn't even know that you had to enable you see I don't use Safari much so this is a cool thing to under advanced. Development you there we go is it that one. I know because we suffer very many, very, very many issues on the client side because. Okay. Let's check it. Is it the develop. And somebody just reading here. Settings for a settings advanced. No, no open develop. No develop. Oh, there I see, I see, I see, I see. And then wonder where we would say what images. I'm not seeing an option to show the. Anybody knows develop show web inspector. Okay, develop show web inspector show web inspector. Which is there and I can't click on it. Thank you to whoever that was. Who was that. Just so I know. Jean. I'm trying to do it along with you and it mine is not great out. Okay. So mine, there might be a problem with mine or something where there we go. Probably because I had advanced open. There we go. Okay. There we go. It's up and running. Awesome things. And then somewhere here there's a responsive mode. It's probably one of these. I would guess no. Should have maybe did done this before I prepared this. I thought it would be easy. Anybody knows where the mobile responsive mode is. I wonder if it's in the development. Let me just. This is fun. All learning yet together today. Let me hide this. Web JavaScript. I'm just going to. I did have it. I thought I had it linked somewhere. I'm just going to put up another browser. And I'm going to. Sorry. Sponsor design console. Mode. Like this. Click. Here we go. The web browser. Probably preferences advanced. Show develop menu. Develop into responsive design. Okay. It was that simple. So let's minimize this. And let's go here. Let's get developed. There it is. Into responsive design mode. There we go. It's a separate mode. Okay. There we go. So now we can, and this one's a little bit nicer than. Then Chrome or Firefox. You can actually see the little. Sort of things that you're testing with. But it's it's basically it's the same, the same effects. It's the same. It's the same. It's the same. I think it was someone. And it's only maybe you help you with that. I'm not sure, but thank you everybody. Maybe there's Anton. Who helped me with that. Thank you for showing me how that works. Let's get back to where I'm comfortable, which is Chrome. And so if we have a look at. These images, we will see that. When we switch. So this is at 1920 by 1080. So this is desktop mode. Let me make this a little bit bigger. And let me zoom this in a bit more. There we go. Let me go to a smaller screen size. Maybe not laptop. We're focusing mostly on this image in the middle here. We will see that the image kind of tends to start shrinking down. And, and all of that and sort of, you know, response the size of the screen, but it's still the original image. So on a mobile device, we're still, let me inspect this image. We're still rendering whatever this image size is. This one is 800 by 464. It doesn't make sense to render an 800 wide by 464 high image on a mobile device, which is in this case, 320. It would be ideal if there was some way to render an image that was the correct size, maybe even do some cropping, if you will. And so this is where the idea of responsive images came from. Now, before responsive design was a concept. So we're talking about, you know, prehistoric times. What folks used to do was they used to do something called adaptive design where they would do a thing called, and I'm going to find a link for you. They would do device detection. So depending on the server language that was being used. In our case, we're talking about WordPress, we're talking about PHP. I'll share this link with you in the chat if you want to read about this, this is purely for historical purposes. They would use in PHP, you can use something called the server HTTP user agent. And what that will do is that will give you information about the browser or the device that is accessing your computer. So what we're going to do if you want to see what this does, I do find these things interesting.  And I'm just going to create this, I'm going to create this info.php page, sorry, or file. But instead of outputting PHP info, I'm going to output the user agent string, just so we can see what's stored in there.  So we go print R, no, not print for print R. There we go. And there's the user agent. And I'm going to comment out all of this other code. And then I'm going to access this info.php file.  Okay, let me just give me one second. I just got a question about my screen size. So I'm going to just make it a little bigger. Did I do that on purpose? Not necessarily. There we go. So this is the code we're using just in any PHP file. You want to give it a try yourself. Mine's in an info.php file. I'm going to switch over to my site. My site is hosted at learn, press dot test, slash info.php. And there we will see there is the user agent string. Let me make that a bit bigger because that is quite small. Let's go up to 150 on that one. So there it says this is a Mozilla browser, Macintosh, Intel, Apple, WebKit, Chrome, Safari, all kinds of things that it includes. This is not Mozilla. This is Chrome. So I don't know why that's showing Mozilla, but anyway. But you would then be able to use this information to check what kind of device is accessing your, this kind of information here. It tells you it's an Intel Mac. And then what the code does, if we go back to the code, let me find it quickly. So what it does is it would then do some kind of functionality. It's stripping out things and checking things and looking from the word mobile. And if it finds the word mobile, then it uses a mobile device and then it will render an image for that device. So that's happening on the server side. You might have some functionality where your server side rendering is also taking the original image and then creating the mobile image version the first time around or doing it on the fly. So that's something that people did, but it was basically adapting sort of pre-adapting to whatever device was accessing the content and then showing the image accordingly. Then this concept of responsive design came about. And that's what this article is about over here. And if we scroll down a little bit, they talk about the fact that responsive image technologies were implemented recently to solve the problems indicated above by letting you offer the browser several different image files, either all showing the same thing but containing different numbers of pixels or different images suitable for different environments. So we can see that in action in our WordPress site if we upload an image to it. So what I'm going to do now is I'm going to switch back over to my dashboard and I'm going to go into my media library. I've already got some images there, but I'm going to add a new image and I'm just going to zoom out a little bit here and make it 125. And I'm going to add a new image and the image that I'm going to add, I'm going to get a specific one with a specific name. Here are my samples and I'm going to upload water one so that we can see what happens when we upload water one. Before we do that, I want to show you not that one. I want to actually go into the directory for my site. So it's in my sites folder. It is learn press, which I cannot. There it is. And then we'll go WB content uploads 2023. And we are in July. And we'll see that I've got some images this four way three one and water one, but there's nothing about the one we're about to upload. So we'll have to upload 23 or four. I think I might have said one earlier. Let's upload one of the other ones. So let me switch back to brave. Okay. So one's already there. So let's upload three. For example, when I upload water three, it uploads it to my WordPress library.  But if I switch back to my file browser, which I've gone past now. So I have to come back. You will see that there are one, two, three, four versions of water three that have been uploaded. So what WordPress does automatically, and this is since about version 4.4, maybe even before that. It uploads the original image. And then based on some predefined presets inside of WordPress, it'll upload one based on a 768 width, one on the 300 width and one on a 150 width. And then scale accordingly. So if it's a square image or a rectangle image, you'll get different size images. And what WordPress then allows you to do with the responsive images API is send all of those images to the browser when the image is requested and use special image attributes to display those images depending on which mobile device or laptop device or whatever is being used. And the easiest way that we can see that in action is by adding this to a post in the post editor in the new block editor. So if I go to posts and I create a new one, and I'm just going to go test image, and I'm going to add this image to my post. So let us pick from the media library and let's add water three. I think that is, let me just make sure. Yes, that's water three. And I'm going to select that image. So that adds the one image in my area. I'm going to set it to full size for the purposes of this test, which it already has done by the looks of it. It's set there to full size, which is fine. And it's defaulted the default full size image dimensions. If we preview this, so preview in a new tab. And then scroll down and I can either right click and inspect or however you get to develop the tools. I'm just going to go right click and inspect. You will then see that what is being output is this code over here. So let us zoom in on that a little bit. I actually think it's going to be easier if we edit this code and copy it into a text file. So we can format it a little bit better and we can see exactly what it's doing. So let me pop that on over here. I'm going to just create a simple HTML file, which we will throw away. Why is that not working? Just call it image.html for now. And we'll just paste that in there. And then I'm going to see if we can format it. I'll bring it back into view now. There we go. All right. So this is one very, very long image tag. And you'll see that what it's doing is it's automatically doing some async decoding. It's setting the width and height. It sets the default source attribute to the path to the original source file. It sets an alt attribute, which I haven't said yet. It puts in the class. This is default WordPress stuff. But then it uses this SRC-SET attribute. And you'll see what it does is it gives you a new line. And then it's going to set the width to 800 width. And then after that, let me, sorry, I got things in my way here. Let me put this on a new line. After that, there is water 300 by 200 at 300 width. After that is water three, 768 by 511 at 768 width. And then it sets some default sizes. And so what that does is that sets up the browser so that when devices that are bigger than equal to or bigger than say 800 width, so desktops, laptops, that kind of thing, show the original image. When it's between 800 and 768 show this image or at least render this image. When it's between 768 and less than 300, then show this image. So basically it sends all of that data in the image tag. This is a thing that HTML images support by default. It's an update to HTML images. And if you set up the source set with the different sizes and set up the sizes, it will then render depending on which browser you're accessing it from. It'll render each set image differently. What's nice about this is there's no extra processing required on the server to do this because those images are generated before the page is requested. And it means that because these images are all on the server, they can be cached either in the browser or whatever caching you have available. It instantly makes your images responsive in your designs and it instantly makes your sites faster by doing this. Okay, any questions on how that, that's just responsive images. This has nothing to do with WordPress yet, but that's just the basics of how responsive images work. I don't understand the depths of how this works and the sizes and all of that. I recommend reading through that article that I shared with you earlier on the ins and outs of how that works. But if you do have any questions on that, I will do my best to answer them. So Adrian says, is this to help reduce page load speeds for small screens? Yes, absolutely. So what it means is if you're loading this on a small screen, it's only going to physically load the smallest size based on the screen in the browser. It's not going to load all the others. It'll just load the smaller one. So it's a speed of improvement, both on the back end and on the front end. And it means those images can be cached and then rendered accordingly. As Jose says, it's a preloader. It's exactly what it is. Okay, so that's just responsive images. That's got nothing to do with WordPress. And that's the topic we can dive into and we can make sure we understand and go forward from there. John, can you just tell me that the sizes attribute, what does that mean? I actually don't know. Unfortunately, John, so how responsive images themselves work? I don't know the ins and outs of. I do recommend this article that I shared with you right at the front. Sorry, Zoom keeps getting in my way. This responsive images one on MDN, I recommend reading through that. That will give you all the information you need. Thank you. We could do a whole workshop just on how responsive images work. But I need to move on to the actual API side, the WordPress API side, but I do recommend reading this if you have questions. And then if you have further questions on how it works, don't ask me because I don't know. I just trust the HTML to do its job. Okay, thank you. And I totally said you had a question.  This answer before. Okay. Okay. Perfect. No, no, no, I mean, about I don't know, very interested how can management it because using this solution is good. But on practice, I'm meet with a problem when I can control this perhaps. Okay, so we are going to dive into that a little bit later. We're going to dive into how WordPress, how more or less how WordPress does that, but we're not going to dive deep into the management of it. It's basically just an introduction to it. And again, it's not something that I can give you answers to because I don't use this a lot. So maybe what we can do is once we finish today's workshop, if you still have questions, what I would suggest is let me find the GitHub issue for this workshop. This is very much an introduction to responsive images in WordPress. If we get to the end of today and I say to you, I don't, I don't know the answers to your questions. What I would suggest you do is this is the GitHub issue for this workshop. Any questions we don't cover today, I'll do my best to log them in that issue as well. But if you have any others, you can log them there as well. You can ask them there and then I will see if I can do further research and come back with another workshop, maybe a follow up. But today's very much an introduction to how this works and not so much of a deep dive. Okay. M says, if cached, what happens if you replace the image with another of the same link's name? Again, M, I don't have answers for that one. It's something that I haven't really dived into. So I'm unfortunately, I can't answer that for you. Adrian says, I assume you need to clear the cache to refresh and see the new image. That probably is what would happen. But it's not something that I can, that I can provide you answers to unfortunately today. All right. So I'm going to put that one in the question list. We can do a follow up to this. So I'm going to pop this one in here from M. If cached, what happens? You press the image. And then I totally had a question around management. Questions around the images. Okay. I'm going to pop those two in there. So we've got them for follow up. And we can come back to that. All right. So now let's talk about the responsive images API in WordPress. Now, everything that you just saw, where's that image? Yeah. Everything that you just saw happening here happens automatically in WordPress now. And what I want to show you is the documentation on responsive images. So I'm going to close some of these links down. I'm going to close that one down. I'm going to close that one down closing that one and that one. I'll leave that one open for now. But then I'm going to go to the developer documentation. And we're going to go into the common APIs. Sharon says, sizes defines a set of media conditions like screen widths indicates what image sizes would be best to choose. So that answers that question around what the sizes is useful. Okay. So if we go into common APIs, the very first one is the responsive images API. So this is basically a document on how responsive images came to be within WordPress. It was WordPress 4.4. Let me make this a little bit bigger. There we go. So since WordPress 4.4 responsive images is supported by including the source set, the sizes, attributes of the image markup it generates. And then it says for background on this feature, you can read the merge proposal. Now, this is another one where we could spend a lot of time diving into this and it would make for a much longer and much more involved workshop. We unfortunately just don't have the time, but this merge proposal talks about the background of responsive images, where it all comes around, where it all comes from, and talks about what it does. And essentially the core understanding we need to think about here is that when the images are uploaded, the four sizes are really automatically created. And then when you call, I'm just trying to find the right link here. Here we go. When you call the WP get attachment image function. So let's go to that documentation. And I will share it with you in the chat. It then in the background handles everything for you. So as long as your image is part of the media library and you call this function and you tell it which size you want. So one of those four sizes, thumbnail doesn't have them in this list here, but they are around thumbnail, medium, large and full or something like that. Then it will automatically generate the source set attributes, generate all the different values for you and output that image. And you don't have to do anything else. So generally by default using the core WordPress functionality as it is, is usually enough. In this responsive images API document. So here we go. It's the full size, the large, the medium and the thumbnail. Those are the four that automatically get created. There are however, also, if we scroll down a bit here, there are some new functions and hooks that got added to WordPress to make this happen. So there's a function called get attachment image source set which retrieves the value for that source set attribute based on the size that you want. There is calculating the image source set. There is getting the different sizes. So if you need to customize things for yourself, you can dive into these functions and you can see how they work. There is also a new default image size called medium, large, which was added, which is 768 pixels wide by default. And you would have seen that in the list we saw. So the full size is the original image. Here it says large 500, medium 300 and thumbnail 150. But if we have a look at what was added, it looks like it did the medium, large, and then a 300 by 200, which is probably the medium one. And then the thumbnail one, it probably didn't do the large one because the file was only about whatever file size the file was. Let me just check what the file was quickly. The file itself was only 800. So maybe it went, well, 800 is not that much bigger. So we'll stick with that as the large size. But if it was a much bigger image, then it would probably create all of those. You'll see this one over here. This is an image that I uploaded previously. There is the original. Then there is one, two, three, four, five sizes. So there it's created the five because the biggest image was very big and then it creates the other sizes from there. So if you want to manipulate those sizes, if we scroll down, you will see that there are two filters that you can use. The one is the calculate image source set filter. So that's the function that that's the filter hook. So I'll share that with you. And the other one is calculate image sizes. Let's get that one. And I'll can share that one with you. And so you can use those to change the sizes on the fly if you need to do when the images are uploaded, when the source sets are gathered, all that kind of thing. My specific experience is unfortunately that I've always only ever needed to use the default sizes that ship with WordPress. So I don't have physical experience with actually manipulating those sizes and changing those sizes. If that's something you would like to dive into in a future workshop, we certainly can do that. But for today, we're just focusing on working with the default information. Okay. Any questions on all of that before we get and dive into a little bit of how this works in the real world. Okay. So before we do that, I also just want to mention at the bottom of this documentation, there is a learn more about customizing responsive images markup in this GitHub repository. It is basically a fully responsive image plugin for WordPress. If you want to really dive into how this works, how it does things, this is the plugin to check out. Essentially, this is the plugin that this is the feature plugin that was being worked on before it was merged into WordPress. So this would be a great way to have a look at the code, see how the code works, and really dive into the functionality of hard work. So if you really want to dive into that, I do recommend checking that out. Otherwise, I want to show you how you can implement this in your own site. So let's assume that we're happy with the default sizes we have, and we just want to render them in both a classic theme and a block theme. So I'm going to close down some links again. And we'll get on to our theme. So you will notice, you might have noticed that I'm currently using a classic theme. So I have 2021 activated. That's a classic theme. I also have 2023 installed. So we'll switch over to that in a second. What I'm going to do now is I'm going to take one of these images and let's take water three as a good example. So there's water three and it's ID is ID 26. Now there are many ways that you can get the ID. I'm just going to use it from the URL for this, for this example. But I want to be able to render this image in my footer, but I want to render the responsive sizes. So I'm going to use this code in the developer documentation. So let's go back over to developer.britpress.org. Let's go back to utilize APIs, responsive images. And I'm going to scroll right down to this customizing responsive markup section. So let me share that with you there. And here is the code that we're going to use. Emma says, I like that waterfall. Very copy. I love water pitches. It's one of my favorite things to use as desktop backgrounds and example pitches for exactly that reason. And so this is the code that I'm going to use. I'm going to copy this out quickly. And so what I'm wanting to do is I'm wanting to create a custom function that will render my image for me. So inside of my theme that I'm busy developing, in this case, I'm just going to hack 2021. But let's say I was developing a custom classic theme. Inside of the functions.php, what I'm probably going to do is create a custom function to manage this for me. So right at the bottom of my functions.php, I'm going to say function and we'll call it 2021. Get responsive image. And I'm going to want to pass the image ID or the attachment ID to this function because I want to be able to call a specific, I want to be able to use this function all over the place. Then the code is going to look something like this. So the reason I change it to attachment ID is because that's what was it the example. And the size that I might want to use might be the large size so it might be the medium, whatever. I'm going to leave it as medium for now, but you might want to go with the large one first and work down from there. But I'm going to stick with using this code. I'm then going to want to echo out or return maybe the image tag. So I'm probably going to change this slightly. And I'm going to say something like this. And then put this all in quotes. I'm just going to ignore co-pilot for a second. There needs to be a little bit of cleanup that I need to do here. So I'm going to take out the PHP echo bits. And I'm going to start concatenating things together, which I use a full stop. And in this case, a single quote to concatenate these strings together. So there's the image source getting the source and escape in the URL. And then we need to get the source set. So that's that they're escaping the attributes. So I'm going to go ahead and do that. Those of you who remember my escaping your, your outputs workshop, always escape whatever we're outputting to the screen. And then the sizes, I'm going to leave them as they are from the example. I would have decided this upfront, maybe the front end designer that I'm working with, with would have given me that information. And then finally, I'm going to want to, why is my thing not wrapping right now? Weird wrap. Here we go. I'm going to be just. Oh, I've got this too big on screen. That's why there we go. So let's undo word rep. And I want to jump right to the end of this. There we go. And in my PHP line there. Okay. So I'm going to just zoom out a bit. So we can see this all on one line. There we go. Got a couple of issues that are being picked up. It's telling me undefined variable attachment idea. Maybe I spelled something wrong somewhere. There we go. I think I spelled this one incorrectly. So there we go. Attachment ID. So what it's basically doing is it's getting the source, the URL. To the original image size, but I'm asking it for the medium one for whatever reason. Probably I would go for the large or the full size, but for now for this example, the medium is fine. And then it's getting the source set values. So that's string with all those different sizes. And I literally just call get image source set. And then based on those sizes that are stored by defaults, I can then pull those different sizes in. And then I simply build up the image URL, specify the source value as the path to the original file, set up the source set as that value from this function. And then the sizes, which Sharon mentioned earlier. And once I've done that, now I can just call this function from any of my templates. So what I'm going to do for the purpose of this example is in the footer. Just above the site info. I'm going to just line 42 in the footer.php file. If you're working with 2021, I'm going to just pop in a div. And then I'm literally just going to use PHP tags. And I'm going to echo that function call. Now this is just an interesting little side note. One of the ways that template tags usually work in WordPress is folks don't echo here. They echo in the function. I prefer to do in the theme. It's just a personal thing, but there's nothing wrong with doing it both ways. And then we'll pass in, in this case, ID 22. In pointed out that we need to update our alt tag, 100% correct on that one. So let's give it a better alt tag. In this case, I'm going to just call it water number three, because that's the name of the file. Maybe which waterfall. We'll just call it a waterfall. So that's a better alt tag there. And that should be that. Okay. So there's my simple function. It gets the image by the ID generates the image source, the image source set, and then renders the image tag. And then I add it in my, in my footer by calling it and passing in the ID. I think it was 22. Let me just verify that or maybe just 26. Now that I think about it. That was 26. Sorry. 22 was the deer that I was working with when I was preparing this workshop. So it's 26. Okay. And then if we switch back over to our site. And we have a look. And we scroll right to the bottom. We will see that there is the image. And if we inspect this image, we will see that it is generating the default image source. And then all the source set values with all the different sizes and everything that we've set up. And if you're using the default sizes, it's really as easy as doing that. If you're wanting to use custom sizes, you'll have to hook into those filters that I mentioned earlier and create custom sizes. You can, I believe, overwrite the default WordPress sizes. That is also possible. I don't know offhand where that is, but I know that is also possible. But that's how easy it is to use.  Okay. Any questions on how that works within classic themes? I'm going to leave it on that function if anybody wants to see that again while I grab my next superforter. All right. So there don't seem to be any questions on this. Now let's move on to how this works in block themes. And the cool thing about block themes is block themes will do all of this for you the minute you add an image in the site editor. So let me show you what I mean. If I switch my theme to 2023, excuse me. And I go into the editor and I go into my photo template part and move this out the way here. And this is, I'm running the 6.3 beta, by the way. So if yours looks slightly different, that's fine. But basically you want to edit your photo template part. And I like to use the list view to see my layout. And I'm just going to above the row. I'm going to add another group. So I'm going to insert before and I want to insert a group block. Here we go. And I'm just going to insert an image into this group block. And I will use one of the other waters. I'll use this one over here, which I think is water one, which I've already uploaded. Actually, no, let's use the deer, whatever this is. Yes, I saw the copy into the chat. I'll copy that in a second. So there's the image. And I decided I want to use the medium image. So that's the medium image size. And just for the sake of it, I'm going to align this in the center because I just want the image in the center. There's no specific reason I'm doing that. But there is the image added to the photo. Now, what I want to show you is what this looks like in the code editor. So in other words, if you were to save this to a template part file in your block theme, this is what the code would look like. So if we grab, it's this image, image tag there, I'm going to stick this inside of our image.html. So we can see what that does. So it's the WP image block code. The alignment was sent to the ID was 22 in this case. It's using the medium size and there's no link. It wraps that in a figure, which is generally a good idea. But then you'll notice it doesn't include any of the responsive image stuff. It just has the image source, the alt tag and the class. We should probably update the alt tag. So let's do that while we're there. Let me exit this and go back here and let's go.  So I apologize to any animal lovers out there, whatever that is. I'm going to call it a DA for now. But the important part is this code. This is what the code is that is being stored in this template. Now I'm saving it to the database. But if I was rendering this to a template file, that's what it would look like in the template file. However. You're on a thing. You're muted. Sorry, folks. I got muted this. I'm not sure how that happened, but I should be, you should be able to hear me now. For some reason, my image wasn't showing. So I'm going to go back to my footer. Oh, I didn't save it. That's what's silly of me. So let's do that again. Thank you for whoever pointed out that I was muted. So I want to insert before. And I want to insert a group. And then I want to insert my image. There we go. Selecting from my media library will go with the deer. I think it is. I don't think it's an actual deer. I think it's something else, but I'm going to go with it. If anybody knows what that really is, let me know. We'll go with the medium size just to kind of replicate what we had earlier. And I'm just going to align it center just for the sake of doing that. And then let's save that. There we go. Okay. Now it's saved. And now if I switch back to my front end, I should now see my image right at the bottom in my footer. There it is. And if I right click on that, you will notice that it does everything automatically for me. So I didn't have to use any code. I didn't have to tell it what to do. It knows the block edits and knows that when I'm saving this image, it must go and do this by default to built in thing. And that's one of the things that I love about the responsive images API is if I'm using the block editor, I have to do no work. I add my image, tweak my sizes, let it do its thing and it'll handle everything for me. Okay. I'm going to just quickly copy that function out for those that wanted from the, from the classic side. But are there any other questions around, around how this all works? As I said, I don't have a lot of in depth information on using responsive images in classic themes. My experience always was that I used to get from the designer, the images, and I used to upload them to WordPress. And then the defaults were good enough for what we needed. And so we went with that. So I can't go too in depth about how to modify that. But if you want to know, we could maybe do a follow up workshop on that. But this is just an introduction to how it works and what it does. Jose says there is a challenge here under the scenario that you need to show different versions of different images in the artwork space using the same widget. How could it be solved? Although it might be easier to use the show hide settings. We don't want to use this to solve the problem. The same widget should be used. Justification of the requirement images with text do not behave well when thumbnails are generated with WordPress. The cropping tool sometimes removes some text. As I say, it's not, it's not something that I've had a lot of experience with. So if anybody has any suggestions or comments on that, they're welcome to let me know. We can definitely do a follow up if folks have more questions. As I say, if you've got questions that you'd like us to dive into, please do consider a copy, leaving them on that GitHub issue. I love doing follow up workshops to my initial workshops because that helps me understand what people need to learn, what people want to know. So this was just an introduction to responsive images. If you want to go deeper, we definitely, we could go deeper. Sharon says, how do the block themes framework compare to something like a bootstrap framework? That depends on whether you mean a generic bootstrap framework or specifically the bootstrap framework, which is the one that was developed by, I think, the folks at Twitter. Or if you mean something like, so there's multiple things called bootstrap. So there's Bootstrap, which was, I think, developed by the Twitter folks. Then you've got something like underscores, which is also considered a bootstrap framework. I'm not going to... Hang on, let's go WordPress underscores. It's a starter theme for WordPress, if you will. The original bootstrap. So Bootstrap is your sort of front-end framework. You could consider, I wouldn't consider Bootstrap and a WordPress block theme to be comparing apples to apples. So it's difficult to say how one would compare to the other. You can certainly use Bootstrap in your front-end. If you're building a theme, you can certainly use Bootstrap. I've never done that, though, I'll be honest. I've always, when I'm building WordPress themes, I've always used sort of the WordPress paradigm, whatever that was at the time. So when it was building classic themes, I would build classic themes. When it was building block themes, I would build block themes. There is actually, if anybody's interested, I run a Twitch stream every Tuesday at about 3 p.m. my time. It's about 1 p.m. UTC. I won't for the next two weeks because I'm away, but going forward, we're taking a design that a very cool designer from Chicago designed for me. And we're building a block theme from it. And Emily is the designer's name. She's thrown all kinds of curveballs at me. How would you do this and how would you do that? And we're really trying to design it from scratch. If you want to see some of the work we've done there so far, you can, I'm going to paste these in the chat in a second. You can go to my YouTube channel where all the live streams have been uploaded. I will share those links in a second. And then just go back. You'll just have to go backwards in time. We started, that was building a react block. That was custom post types. So the first one is, I think it's this one here, sending development on the 9th of May. I think that's where we started and then go through from there. It's kind of weird because I'm developing a theme for an hour a week once a week. So it's very difficult to kind of get into that mind space every week. I'm also developing it with Emily and another developer by the name of Aruba. Aruba has way more experience in the block theme paradigm than I do. So she's helping us as we go. But check some of those out for some of the, some of the paths there of how things work. It's still very early days. We've basically built the base theme, which is just a copy of another theme. And then we started working on the footer. And that's as far as we've gotten. So let me share those links out quickly. For folks who want to check that out. And then I will swing back and run through the chat so far. Okay. Let me see. Yeah. I will say some links. Okay. Can you, do you know of any good resources to get understanding if and how to start making client themes as block themes? Okay. So I kind of do. There are two courses I can suggest you try. They're all on learn.wordpress.org. Basically when I joined automatic last year, that these courses were being built. And there's actually, there's actually three courses that you can, that you can check out. The first one is, let me just find it here. Not those two. The first one is develop your first low code block. So this is very much aimed at beginners who've never developed a theme in their lives. And this will introduce you to how sort of the initial block theme paradigm works. And then there are the developers guide to block themes part one and part two. This is aimed more at somebody who is knowledgeable with classic themes has built themes using the classic theme paradigm and now wants to learn sort of the differences between the two. It doesn't cover a lot of the sort of customization options. Sorry. I'm having a trouble copy pasting my links here. Copy link address. There we go. There's parts one and part two. It doesn't cover the advanced custom functionality. That's something that I'm busy working on. I'm busy working on part three of this course, which is all the lessons that I'm learning from the sending development, but it should give you a basic understanding. If you already understand our classic themes work, how block themes work to give you a good place to start. So that's what I do recommend for those. The other thing Sharon, you said you're trying to create develop something more streamlined. You're trying to create a good place and would like to create a nice base theme. The other thing that you can check out and I mentioned this in those two block theme courses is there's a plugin called create block theme. And what this essentially does, it allows you to take any other existing block theme like 2023 or any other block theme and create a brand new theme from that and then build that in the site editor. And if you go through the two courses or the three courses that I mentioned earlier, I'm going to talk about using create block theme and how to export those files and how to go through that process. Okay. I like that there's a baby version for us. We're doing our best. We're doing our best. One of the things we as the training team are doing is we're trying to get that sort of base level of baby developer knowledge out there on learn WordPress. If you don't know learn WordPress.org has only been around since 2020. It launched June, July, 2020 in the middle of the pandemic. So it's only two and a half years old. So it's as much of a baby as us baby developers are, but we are very much focused on this. There's two things we're doing. Number one, we're focusing on the sort of base level knowledge and also we're focusing on a big project that we're focusing on for the rest of the years, what we call learning pathways. So depending on your specific requirements, if you're a beginner developer, a new developer, a brand new user, there will be specific pathways that you will hopefully be able to go through. And eventually the goal is to build up all the content for all of those pathways as well. So we are getting there. Okay. I think that covers all the questions. I hope that if nothing else, I have given you a good introduction to the responsive images API. As I say, if you want, if you would like to dive into this more, please do comment on that GitHub issue. And I will prepare a future workshop and we can dive really into, you know, and ask your questions because then I can go and find the answers and bring them back to the workshops. It's one of the things that I love doing is finding out what people want to know and then presenting those topics. So I mean, a couple of weeks ago, we did a workshop on custom tables because somebody asked about doing a workshop on custom tables. So I'm very keen to do those things. Otherwise, are there any other questions before we wrap up for today? Raleen says, if all of this is built into WordPress, why do we need the API? That's actually a very good question. So the way I look at it is it's good to know that it exists and kind of how it works. If all you do is walk away from today and go, okay, cool. That's how it works. And you never worry about it again. That's also okay. But I like to dive into some of these things so we can understand how they work. But yes, if you're using block themes, you probably never have to worry about it. One day you might say, one day you might go, gee, I wonder how I can manipulate these images. And then you'll know, I need to look at the responsive images API. So at least you have that knowledge. Great. And there are no bad questions. Yes, I can hear somebody saying something. Yeah, Jonathan. So if we are going to use some other than block themes, so the source set will not be available by default, right? Jonathan. That is my understanding is it's not by default. You have to code it yourself as we did in the earlier example. Yes. So you'll need to make sure you're setting those things up for any time you're rendering images. My understanding is... So when I say that, if you use the... Let me just clarify that. If you use... Just find this function. Sorry, I've got so many links open. Here we go. If you use the... As far as my understanding is, if you use the WP Get Attachment Image URL, that will start generating things for you. But my understanding of it is that you need to get the source set and render it with the image like that to get all those things to happen. Because if you look at Get... Sorry, so it's WP Get Attachment Image. There's two. There's Get Attachment Image and Get Attachment Image URL. Let me do this here. And let's actually look at what the two different things do. So Attachment Image gets the HTML image element representing an image. So you can just do that as my understanding. This was just to show you how you can work with it. Now you can change things. But it is also possible to do this and just do something like this. Let's just show you what this does. If you get Attachment Image, I'm passing the Attachment ID. And then if we render this on the front end with my browser go... Now I'm going to have to find that tab. There we go. Let's close this. Let's actually change the image ID so we can see it in action. Let's take Image 24. That's a good example. No, not that one. 24. There we go. Let's render that. That didn't work. Just check my code here. So let's get Responsive Image, Attachment ID. It might have been cached. So let me... Oh, this is because... Hang on. This is the wrong theme. That's why. Let me go back to that. Hang on a sec, folks. So let me switch back to my classic theme. Activate that. There's my classic theme. Let's render that. There we go. All the way down there's 24. And let's inspect that. And there you'll see... You see what it does is it does lazy loading, but it doesn't do the image source sets and all of those things. So if you want to include those things, then you need to code it the way we did it. Okay. Thank you. Thank you, Jonathan. No problem. Great. Well, thank you so much for joining, folks. I hope that this was interesting. I hope that you at least understand a little bit about how this works and how you can use it. Yes, I appreciate all the contributions. It's always great to learn things from each other. I know that in my sessions, I tend to do a lot of talking, but I do welcome you all talking as well. So if you have questions, you're welcome to ask them vocally and you're welcome to, to bother me with those kinds of things. I don't honestly don't mind at all. What was that? You had a tab with something called low code development. Low code. Oh, that was, that was, that was develop your first low code. Yes. Sorry. Can I get that link? All good. All good. So I'll even make it easier for you. So who's that I'm speaking to? Oh, this is Sharon. Hi, Sharon. I even make it easier for you. Just go to learn.wordpress.org. Just remember that learn.wordpress.org. Oh yeah. And just go down to, to courses. You can scroll down to view all courses. And we don't, we don't have a lot of courses at the moment, but if you scroll down, there are the two developer ones. Okay. And just below that is the low code. So it's all. No problem. No problem at all. All right. Great. Folks, I am not going to be around next week. I am very fortunate that I'm flying to the us of a to meet up with my team at automatic for our yearly team meetup. So there will be no workshop from me next week. There will be a workshop from me the week after, which is either going to be about the database API, or it's going to be about the file system API. I haven't decided yet because we kind of covered the database API in the custom tables workshop. So I haven't figured out if there's enough content still there for us to go into a whole workshop, but I'll decide that when I get back. So I want to thank everybody who's joined today and everybody who joins regularly on a Thursday for, for joining me for all of these sessions. And I will not see you next week. I will see you again in two weeks time. Sorry, where are you going to be in the US? No need to apologize. I'm going to this, I'm going to this horrible place that I've never heard of before. It's called Hawaii. I don't know if it's any good. Fantastic. Thank you. So the irony is our team, the way our team is distributed. And if you're wondering why I'm looking at the corner of my screen is because that's where I have all the zoom images. I'm going to look at the cameras. My team is distributed in such a way that two of us are in Japan. One of us is in Florida. One is in Hawaii. I'm in Cape Town and one is in New Zealand. So I got, did I get signed out there? Are we still going? I just got a message that I've been signed up, but I think we're still going. So, so because we're all spread out, we've all tried to find a central location and Hawaii just happened to be it. So that's where we'll be. But yes. Awesome. Folks, thank you very much. I need to rush have an amazing rest of your day and rest of your weekend. And I'll see you in two weeks time. Bye. Thank you, Jonathan. Thank you. Bye bye. Bye.