I'm going to be talking about responsive images in WordPress without a plug-in. So without a plug-in thing is a little bit of a caveat. We will be talking about plug-ins, but I really want to break down the technology for everybody so that we can all understand it. So when we do choose a plug-in, which we probably will, we're going to know which ones to choose and why we're making those decisions. Okay, bam. All right, the overview. First of all, we're going to talk about what is retina or high-density pixelation. Why is it important? What are the two methods that have been approved to deliver different density images? What are polyfills and JavaScript requirements and how those work with the two methods? How to do it inside of the WordPress media library and then how to update your image tags with the new source sets in order to deliver that right thing? Okay, so just for, you know, why no plug-in, just real quick. I really want you all to understand the problem and you really understand the solution. I think we as developers, designers, front-end people, we constantly have to solve all these Rubik's cubes. We constantly have all these little things we have to figure out for ourselves. And if you just slap a plug-in on it and you don't understand it, then you might not be choosing the right one. So there we go. You also get a better understanding of how your code works and it's not really a house of cards waiting to fall apart if one main plug-in doesn't work. So just choose your plug-ins wisely. So what is retina? Okay, high-density pixelation, QHD 4K, 5K. You've heard all these terms probably thrown out at you. That video we just watched was one of the most high-def mobile phones out right now. It's, you know, quad HD. So it's actually four HD screens on one mobile phone.  It's basically two things. It's the hardware and it's the software. So the hardware, it is physically close. Pixels are closer together. So this is the old school screens and this is more looking better modern screen. So we can see that it's the physicality of it.  We can't just turn it on on our new monitors, right? It's a type of monitor. So that's another thing you have to think about when you're testing this stuff and when you're actually trying to build something for it. Seeing is believing. So you can mimic it with your browser. You can open up your Chrome settings and say, emulation. I want to emulate pixel density, too. And then you'll see the certain things happening that needs to happen. But it doesn't actually render any differently. You're not going to see anything differently. If you really want to see what a high-density screen looks like, anyone that's got an iPhone 5, iPhone 6, it's very clear, very crisp. It's because they have these new retina displays, okay? And there's also a device lab. If you need to test something and you don't have the devices, try and find a device lab. They're usually one in a city and you can go and test all the devices. So when you're building this stuff, try and get your hands on the hardware. That's going to be the main blocker of everyone trying to test these things, right? Is getting the actual retina screen, getting the actual high-def screen. So the word retina is actually copyrighted by Apple. So in the hopes of better open-source community, a sharing software, let's stop calling it retina. Maybe let's start calling it HPD or let's start calling it QHD or 4K, something else so that we don't give Apple that ownership of that whole technology. Because there are many other screens that have that. And we don't want to think that we're just building for Apple, right? But if we go to the Apple's website, this is exactly what they say. 2012, they came out with a 227 pixels per inch. And then in 2015, they came out with a 226. I don't know what happened to that last pixel, but they lost it over the years. But that just shows you that they've been in this technology game for a while, right? Since 2012, they've been giving us this product. And the technology is just now starting to catch up. You can see interesting talks in 2012, 2013, 2014, where they're still discussing how we're going to solve this problem. And they've kind of come up with a couple solutions, but it's not quite there yet. So it's technology that works, but it's still a little iffy. So it's actually physics. The number of pixels needed for clarity is calculated by the distance of the device and the angle at which the device is held. So phones, we usually hold them a lot closer to our face. So we're going to need more pixels because we don't want to see the pixelation. We don't want to see the little dots. We want it to be a crisp, clear image. And if you hold it at different angles, that's going to affect how the image renders with your eyes, how the light actually bounces off of it. So that's why cell phones usually have the highest density because it's going to be right there in your face. You're going to be holding it at weird angles. You're going to be driving and texting, which you shouldn't be doing. And you're going to want to see what it says at a weird angle. It's actually a growing trend, right? We can see 2,004 percent of people were on a high density screen. Now, we have 32 percent. We also have 33 percent over 1,300 pixels. So this is going to be a continuation. This is a technology advancing. This is software. This is hardware. This is not as HTML and CSS. This is a thing that people are actually investing in as a solution for crisper, better devices. That's how the hardware works. We have any questions on the hardware? Also, there's a racquetball practice up here. It's been going on all weekend. So if you hear a lot of weird noise, the software. So the software, it just zooms in. All it does is it takes the same thing we're expecting to render and we're going to zoom in on it so that it renders the normal aspect ratio we're expecting. So if we went to cat-bounce.com and we wanted to view it on an old screen or we wanted to view it on a new screen, it's going to still render at the same widths that we expect it to render according to the ratio. Now, when you get responsive, it's going to get more complicated. But think about it like a 100 pixel image. If it was rendering on a really dense screen, that 100 pixel image would be really small. But the users don't want to see that. They don't want to care what screen they're holding. They want to just expect to see the same site at the same size. So what the retina does is it zooms in. It double-exes it. It actually renders everything twice as large. So now we get to see why images in our blogs look really bad on retina screens because they're zooming in on it.  It turns into like potato quality is what they call it. So and that's where the 1x, 2x comes. It's like how much are they actually zooming in on it? And that's based upon the ratio of the density of pixels. So it's a little bit of a mathy there. Okay, but why is it important to us? Why are we here learning about it? Why do we care? Speed, weight, performance, all these things are UX, user experience, how they're actually interacting with your site, how fast the page loads, how crisp it looks, and whether or not it looks good for all devices. So Google is all about this, right? They're actually giving you a site, speed site analysis inside Google Analytics now. They're actually ranking sites based upon how fast they load and how well they load. So how good their code is.  So it's not the right solution, right? The payload is actually really interesting too because we have our mobile devices, some of them are not, you know, high res. So we can't just say, oh, this is a mobile device, give them the big image. Also a lot of mobile devices are linked directly to bandwidth usage. So we're going to be giving them, we're forcing them to download more even though they're not using it. So we're basically forcing them to spend more money on their phone bill. There's that direct connection of the payload and what we're actually delivering to people and the actual cost. So that's, it's big. And in the future we're going to be able to detect whether or not someone has a certain type of phone that they want to download high res. That's coming to be, that's coming down the road, but it's not here right now. So let's talk about the two solutions. What are the two solutions that we have in place that we can start using today that work and why are they confusing? Because they're kind of confusing. So the first one is the picture element, which is going to make more sense because it's visual, breaks things down into pieces. And the second one is the source set. And the source set can be a little bit more confusing and we'll dive into that. So the picture element. So the picture element is an element, this is actually from developer.mozilla.org, you know, it's a container. So we think about if anyone uses the figure tag, it's the new HTML5 tag that you put images in. It's like an image tag. It's a container that contains other tags that tell us when to load this image based upon the device. So right here, this looks like a media query. Anyone who's ever dealt with media queries inside of CSS, so you know that looks really familiar, right? You're saying at this device width, we're going to deliver this image, right? But it's not really a media query, it's a media condition is what they call it because it doesn't have, it doesn't have all the power. You can't get access to is it print? Is it screen only?  And also inside of here you can do pixel density. So pixel density is the media query you would use to deliver the 2x image. Because again, we have to deliver twice the size image for every image now, for the retina screens. You can stack them as many as you need and then at the very end, you have the thing everyone knows, right? The image tag. It's still there. It still works. But some browsers don't like it when you wrap this picture element around this image tag, some of the older browsers. So you have to provide solutions to fix it. Also, you only need one alt tag, which is nice, but you could also add other alt tags as you need for your different sources. Because the picture element is way better for artistic representation of your design. So art direction, right? And this is a great example. This is actually pulled off of, I think, medium.com. And how we would deliver a device picture normally, right, is this.  So with the picture element, we can say this one is what we're going to have on our phone. And this is the one we want on our desktop, right? And that's why it's strictly art direction. It deals more with what is the device we're looking at and what we're trying to deliver to the person is a perfect picture. And it's a focus direction just for this device. So it's kind of more of an adaptive approach. You're adapting your content for the device. And that's why they say it's more art direction. It's not really just for delivering a high density image. A con is there's more coding involved. We have to actually type more things out. We have to make sure our syntax is right. We have to check our stuff. And you get this weird ifie9 or less video style display none fallbacks. And that's just so you can get your image tags to work correctly. So you're going to have to do really weird code that if someone didn't understand it and was trying to read your code and look at your site, they would be confused, right? They would say, I don't really understand this. So it's compatibility. This is its current compatibility. And we can see that the new new IE that's going to be great and solve the world's problems is not even supporting it. So what does that even mean? We also have Safari. Safari is like, nah, we're not supporting it. And you think iOS, iOS Safari, they're not supporting it. And that's one of the main drivers of this high def technology. It's just a little confusing because it's because there's another solution and they've kind of been battling it out. And we're going to talk about that solution right now. It is the source set and sizes attribute. This is a lot of content here. And I put it all up here because it's confusing. The source set and the sizes together can be kind of confusing. It's a weird syntax. And it has very specific markup. Now, the markup is a certain way because the way a browser works. So the browser is going to read all this string content as a DOM. And as soon as it gets to an image, it's just going to immediately start trying to download it. But we don't want that because we don't know what type of device it is yet. The load times don't really work out, right? So that's why we have to actually put these different sources in a source set. We have to say, wait a second, don't download everything. Here's a list of sources. Check your pixel density. And then give me the right one. So, if we look at that in action, it's a big old image tag. It's not as much markup as the picture element, but you're smashing all that logic into two attributes, which can be really kind of confusing. The first attribute right here is sizes. Now, sizes has been added on. So first of all, source set came around and it was just for density. It was just so that we could have... So this is saying this image is 280 pixels wide. This image is 1220, right? So if we're trying to render an image at, let's say, keep it simple, at 300 and it's a 1x screen, then we're probably going to go with the 430 because that's closest to 300. But if we were trying to render something 300 on a density, high density screen, that's 2x, then we're probably going to go with the 610 because that's 300 times 2 is 600. So it's doing all the math for you. You don't have to put in your retina queries. You don't have to say, if pixel density equals 1.5, like you would with the picture element, it's going to figure it out for you and it's going to give you the right image. And it does that even if sizes is not around. So what does sizes do? Sizes is the media condition. We're back at these media conditions. It's not a requirement. If you don't have to have this tag, if you just want to deliver the high density image, it's going to work immediately. But sizes... Sizes is saying at this device width, this picture is going to render at 610 and that's just... It gets kind of muddy. I feel like this is where it starts getting really confusing because it seems like you're declaring visual representation like you would do in your CSS inside of your HTML markup. It's a little weird and I would say unless you have to do these sizes, unless it's very important based upon your design, just don't do it. Just let the device handle it in the source set. Let it say, okay, this is 610 and I'm on a 2X image. The screen's 300 pixels wide. I'm going to give you that one. Don't try and figure this out unless you have to. Unless you're trying to say, I only want this image to fill up this little spot on this screen. Try and do that more with CSS. When you start getting sources, source set sizes and CSS mixed together, it gets very confusing very fast. So is the source set ready to be used? This is looking a lot more green, right? We see a lot more support. I mean, out of the box right now, we've got Safari. We've got all iPhones. We've got Android browsers. We've got Chrome box. What do you know? We're going to get IE. It's going to happen. Opera. Yeah, I don't know what opera mini. I think that's for when you want to have open source mobile devices. I think people use opera mini more for that. It's like you're actually building a phone. You want to ship it with a free browser. People put opera mini on it. So that's kind of, yeah, into their browser. Yeah. So not a lot of people use it, but it's out there in the world. So that's kind of nice. So what do these things mean? This actually means they don't accept sizes. This is only accepting the source set. So we can see, even though we're getting IE, we're not going to get sizes. It's just going to say, here's your source set. Okay, we'll deal with that. We've dealt with that for years. We've got it. So how do we make everything green? How do we turn all those red blocks to green blocks? They're called poly fields or JavaScript requirements. So it's not an enhancement. It's a regressive enhancement. We're just getting these old browsers to work right along with the current browsers. We're not giving them any new technology. We're just saying, hey, old guys, can you just please do this because we're all doing this too? And JavaScript fills those gaps in. So Remy Sharp, I guess, is the guy that he came up with his term, polyfill, and he blogs a lot. Really great guy to follow. He says, a polyfill is a piece of code that provides technology that you, the developer, expect the browser to provide natively. So again, we're not really doing too much more. We're just filling the gap, filling the holes until it works perfectly. So then once those browsers stop being supported, we just remove that library, the polyfill, and everything works. We don't have to go back in and change our code. So that's why polyfills are the nice way to go. But no matter what, if you don't have the source image tag, you're going to have to use JavaScript. So some of these fancier new solutions that might not use the source image, I wouldn't go with it. Just be aware that any plugins you use are using at least an original image tag, because that's your default fallback, no matter what. So if they have their JavaScript turned off, the image tag still needs to be there. So here are some main, three main supported polyfills. And the one that I've used a lot is Picture Fill. It's made by the filament group who does a lot of responsive, progressive polyfills. Another one is RetinaJS. This one I've seen people just dropping on their site where we talk about it in a minute. I wouldn't recommend it. And then there's Adaptive Images. And Adaptive Images seems to be the most labor-intensive when it comes to setting it up, but also once it's set up and works, it's the easiest to manage. You're actually going to be using a HTTP, HT Access Rewrite Rule that's going to rewrite all your images to this PHP file that's going to generate your different sizes and cache them on your server for you. You don't have to think about how it actually works. It should just work on its own. But then we have to realize that it's going to be rewriting every image so we're going to be more server-intensive. It's actually going to be sizing all our images for us so we don't get any of that picture element style. There's no art direction. It's just resize it, resize it. So if you're going with Adaptive Images, it's probably best to do it for your post content or your pages content. It's not really best to do it for maybe your featured image, which tends to be a little bit more art direction. So the picture fill, it's well tested and it's well supported. But the con is it takes a lot of markup because they're kind of wanting you, they're pushing you to use the picture element more than the source set. So you're going to have to do picture element markup, which is kind of not fine. The retina JS is you just drop it in and it just loads on your page and it fixes all your images magically. It sounds like magic. It's too good to be true. What it actually does is it does an XML HTTP request and get the head for each image.  So you're looking at 150 HTTP requests for just 50 images and anyone that knows anything about page load, the fewer HTTP requests, the better. So that's why I started using retina JS and then immediately found it to be not a good solution. So I wouldn't go that way. The adaptive images, I'm not used it myself, but it seems pretty smart, right? It seems like it's taking the server. It's doing rewrite rules. It's generating stuff using PHP image library. It's caching it and then it's delivering it. That seems like a good solution to me. I'm never used it inside of WordPress, so I don't know if it would conflict with the WordPress HT access. Just don't know. It's throwing that out there. So now we actually dig into WordPress and how we're going to start integrating this into WordPress. So WordPress has a really nice page for setting your images, your image sizes. It's called WordPress media image settings, right? How many people have gone into that page and set up their own image resizing? Yeah? Yeah? A lot of people? Yeah. It's really nice because you can give them the thumbnail, you can give them the large image, you can give them the medium image depending on how you want to deliver it. So if you take this power and mix it in with your picture element, you're pretty much going to be able to deliver any size image you want to any device. Here's an example of how you would actually set these ratios. And we noticed that the thumbnails, they want you to crop by default. That's really up to you. It's a decision you got to make as a designer, as a front-end developer. I usually don't do it unless you're going to be cropping smart and you can actually set your crop settings to crop left, right, crop center. But out of the box, you get three sizes. So think about this. The original dimensions is 580 and the original dimensions of the other one is 2,400, right? If we upload a smaller one, it's not going to give us the big guys. It's only going to generate this. It's only going to generate the original and the ones that are smaller than it. If we upload a big guy, it's going to generate the original and all the sizes that we've defined in our media library. So that's why we want to upload the biggest image we can and then we're going to deliver the right size based upon the device. This is my solution because WordPress already does it, right? It already does it out of the box. It gives you these options to resize your images. So you're not depending upon HTX free rights and caching and PHP delivering these images. WordPress already does all that for you. But as a designer or as a front-end person, you need more sizes, right? There's always somebody out there that's like, well, I need this size. I need this size of image. I need this size of image. It's actually really easy to add a new image size when you're updating your images here inside of your functions file in your theme folder. If anyone's ever opened up their theme folder and seen their functions file, you can go in there and you can add these few lines of code and says, hey, this is my new HD size, right? And then right here, this filter is actually going to give you that drop-down in the admin to select which size you want to use. So that way you can say, I want to upload my high-density picture and then when you go to select which one you want to show, you can select from a drop-down high-density picture. That's it. That's all the code it takes. It's not a lot of code. So how do we actually update the image tag inside of the post? So there's a few different methodologies. First one's a lot of hard work. Second one's short codes. And then you have featured images, right? So the hard work.  You can just do the little drop-down that shows you your sizes. And then you can actually put them in there yourself. You can say, here's my source set. Here's my size. And you're done. And it works. It doesn't break anything. It just works. So I mean, it's crazy. I was testing it out with IE8 doing this. And it didn't break IE8. And it just worked.  I just opened up my WordPress. I looked for my right image settings. I put this little bit of extra code in. And I've got responsive images delivering to the right device based upon pixel density. It really wasn't that much hard work. But when you're dealing with a lot of images on your website, it can get more and more and more overhead because you actually have to go in and do this for each image. And this is more for post images. We're not talking about your featured image. That's going to be a little slightly different story. If you wanted to do a short code, you could actually do a short code to generate a source set. So again, this just lives inside of my functions.php file. It looks like it does a bunch of stuff, but it really doesn't. It's just getting the sizes that WordPress has and my new size because that function is going to pull back my new HD sizes. It's going to go through each one and it's going to generate this source set string. It looks like a bunch of confusing junk, but it's really just taking image sources and widths and generating argument to a string with a comma. And that's what it looks like inside of your WordPress post. You just put your little attachment ID. So each image you upload has an ID attached to it and you can see that in your media library. You just click on the image. You look at the URL and it tells you what the ID is. So you can do that and then it's going to generate all this garbily glup right here for you automatically. And again, it's just going to work. You don't have to go and add any JavaScript for this. It's just going to work. That's what I think is really amazing, kind of blowing my mind at anyone who's dealt with new technologies and new media queries. You think how many times you have to go back and fill it in with JavaScript. You really don't have to do that. It's just not going to work on older browsers, but it's just going to work here. So what about your featured images? Your featured images, they tend to be more of an artistic direction. And so now we're going to be using the picture element. Now when you're doing your featured images, you can say get image and put in any size you want. You could do HD-screen like we did before. You can do large, small, thumb. This is doing that here. I just abstracted it out to a variable. It's not doing anything different, just giving me the image right there. And I'm setting my media queries of which I want it to render. And of course, because we want to be compatible with as many websites, we're adding in this crappy IAA video tag. So that's featured image basically. We can use our featured image now in art direction to give us any images we want. But it's a little bit more work. So if we put that inside of a function, I'll show that next. It's getting a little heady in here. I know it's a lot of code, but it's going to be awesome once this stuff gets built into core. And I think it's coming soon. So this is an example of how I would do ad markup. This is actually some code I took from something I'm actually using in production. So this stuff is out there in the wild. Sites are using it. People love it. Now, the picture element is really good if you're trying to serve ads to people, because you could serve a totally different ad based upon the device. So if you have five different ads, and one ad is like, click here for mobile, click here, but you're on a mobile device and there's no click, that ad wouldn't make sense, right? You'd say like touch or tap here. Maybe you're going that direction. That's more of the adaptive approach. And that's when you're starting to use picture elements. And all you're doing is just passing in your sizes and spitting out all this markup. It's very similar to what I showed before. It's just in a function. So that's all that is to it. So just, that's pretty much it. I'm just going to go over what we've talked about. So the high density market share, it's going to continue. It's going to keep increasing. This is going to be a continue problem. This isn't something we can just forget about, right? We as developers and designers, we have to deliver the best experience for everyone. And we're really talking about mobile devices being the most high dense, but also being the ones that are linked to download usage. And maybe they're not on their Wi-Fi and their 3G is not working that well, but we're still giving them the 2X image. So I feel like there's some muddy water that we haven't quite figured out yet. But if the image looks bad on your phone, and it's a site that's trying to sell something, let's say a digital product or a cool t-shirt or some art, then they're not going to come back to your website on their phone. So it's important to decide when you're going to be delivering the 2X image based upon what you're actually selling to the person. So W3C, they're going to continue to refine these solutions, right? They're going to make them better. But for now, that should say Sorset. I think it got auto-correct in there. Not that Sorset. I hate it. It's like, turn it off. So the solutions are out there right now in the wild and they work. You don't have to do anything. You don't have to write any JavaScript. You just have to put your mark up in there and the HTML and it works. So why not do it? Go ahead. Now, JavaScript will help you with all the older browsers. But when the older browsers become defunct, we're not using it anymore, you just take that JavaScript out and you don't have to change anything. So that's why we're going with the regressive enhancement, the polyfill method. So keep that in mind that you might be adding this extra code right now, but in two years, you could just remove it and nothing's going to break. That's what's important. So the WordPress media settings are really, really powerful. You need to try to get in there, figure out how to set your own image sizes, figure out how to add your own image sizes, and then work with it. You don't really want to butt the system if it's working for you. It looks a little confusing to PHP, but it's really not. Just a couple of lines of code. And then also, the image tag post can be a struggle. Short codes help. But in the end, you're probably not going to want to update all your image tags by hand. You're going to want to use a plug-in. So at the end of this talk, we could talk about plug-in solutions. There's quite a few out there, and the best ones use all the different methods and falling back to JavaScript if it's only needed. But I really wanted y'all to understand the problem and understand the solution before going out there and picking just a random plug-in, like retina.js, which is going to increase your HTTP request, which is not good. The picture element, it's your friend, and it's going to be the best when you're dealing with design. When someone really wants to deliver a cool design based upon the device with, then you're going to start dealing with your picture element. But if you're just trying to deliver retina or high-density images, you're really going to want to go more with the source set. You can get into the source set and sizes, but that stuff starts getting really confusing when you're mixing in your CSS sizes with your source set sizes. If you're not doing it for art direction, just go with the source set, leave the sizes off. Finally, like I said, there are many plug-ins. We could talk about those, but just know why we're doing this and why we're plugging this piece of code in and not doing it ourselves. Understand the solution, which I hope we've all kind of got our head wrapped around what it actually means to deliver responsive images. It's kind of confusing, so that's it. That's all I got. Any questions? Let me see here. Let me see if I can change my display settings to mirror real quick. I actually installed a fresh copy of WordPress just in case someone asked this. So we can see, and I was doing some testing out here on the same image, and we can actually see what I was doing there. Again, see very fresh, just one. This is it right out of the box. So what I did here is I've got my image tag, and what I did with my short code, I just put in my source set. That's a short code I wrote that generates this code that has the source set up there. You can do that, or you could use a plug-in that's going to do it for you. Or if you wanted to do the easy way, the easy cheesy way that just works right out of the box, you could just click here, and you can actually see their different dimensions and see your different sizes. So this is going to be that size. So if we find our other sizes, which would be here, let's go back over here, visual, we click edit. We can see we have our sizes right here and our different density pixels. This one's not rendering right for some reason, but you could see these are your different sizes. You could just take that image and add your different size. So if we click here, we should get the different size, right? That's not going to do it. So if we update it, when we look at our source now, we can see this is a different image size right here. What I was actually doing was looking at it for an FTP. Do you ever use FTP? File Transfer Protocol. So it's just a way to look at the images on the server, and it has a list of them. You can copy them and paste them into here in a source set. So if I wanted to, I could say source set, let me get this image, and if I come back here, edit it. This is kind of the tedious way to do it. Let me see if I still... So then I could take this one, say 300. And there you go. If you save that, it's easy. It's like that. No, you don't have to. So the image tag can just take a source set. And the source set takes a URL, a space, the size of the image. But you could also replace this with 2x and 1x. And then your device is going to read that x and deliver that source based upon the device. The picture element is used mainly for media conditions, saying at this max width or this aspect ratio or anything else, media queries you can do, basically. That's when you start using the picture element, because you're actually going to want to deliver a different image. And the source set is kind of assuming that you want to just do it with densities. You're delivering the same image at different resolutions. That's the difference there. But with sizes in source set, you can do the media conditions. It just gets more confusing. Yeah. Yeah. I was looking at them the other day just to see which ones did good stuff. I think adaptive images is the one that we showed before that does the rewrites and it generates the different images for you. But you're still going to want to upload the largest image possible. And I'm not quite sure how adaptive images reads the tag of the width and delivers which one. But that solution is good because it's not JS driven. It's actually driven by a server process. So if someone has their JavaScript turned off, it's still going to work. Here's another really good one I saw. Did you say one? This one was good. RICG1 is supposedly like the officially WordPress core supported one. R-I. Right here. RICG. Yeah, it's... Yeah, the responsive image group. Yeah. I played around with it. I got to get up beta of it. It ended up... I ended up writing something because it hadn't been coming. But for... What was it? Yeah. What was its technology? Is it like just replace? Was it do like a... It does. It doesn't provide any hooks or anything. But yeah, it's for someone who wants to deal with the post, inserting images into posts, this one is really great because it hooks into the normal media insert. And so you would upload it and just add a post like you normally would and it inserts all the code that you just saw him hand copy paste right. So RICG is this group of people, volunteers coming together to try and figure this out. So if they're the ones writing that code, that's probably the most trusted source I would go with these guys. And there's whispers of this being... Encore. Encore and like WordPress out of the box. Okay.  But it seems to be the... It's not gonna... This technology is here to stay. So I'm sure they're gonna have to have some type of solution. Did you have a question? Yeah, when you take the larger image, 1000 by 1000 and you downsize it like you just did, does that mean just the smaller number of pixels are gonna be sent out to the user or are you still sending that large amount of data? It depends on the actual image on the server, right? So if you actually went to that image URL inside your browser and it was a big image, it's gonna be delivering that big image. If you have 100 by 100, right, and you're on a retina screen or high density screen, you're gonna wanna deliver a 200 by 200 because they're zooming in twice on it. So there is some aspect ratio stuff that it contains and manages all for you. But if you're giving them the small image, you're giving them the small image. If you're giving them the big image, you're giving them the big image. There's no magic behind the scenes that's gonna give them the right image based upon the density. It's that source. It still works like an old school image where you can look at the source and grab it. That's what I kind of like about it, okay? Any more questions? Can you talk about sizes? Is it really confusing? All right. Okay, I've got one more question. Yep. All right, so I've been uploading small images so that my website loads faster and you're saying don't put big images on it. If you have the technology to deliver the right image, so if you install a plugin, like the one we just talked about, yeah, if you install a plugin and then you upload the large image, it should deliver the right image for you. But if you're not dealing with your own markup, you could probably be delivering the big image and you wouldn't know it. It's all about the picture element and the source set. So you're gonna have to use a plugin. That's what I would suggest. If you have the technology in place to give the right image, so make sure that technology, yes. I'm just making sure that, but just make sure it works. Because I've installed plugins and they don't work.  It's the simplest one I saw because it gets confusing and seems like the closest to the SPAC, meaning what everyone is going to be supporting. The RICG. RICG, yeah. They have a website. You can go look at them. They're like personal stuff. They write. What is too large of an image to start with? I don't know. I just built a site that has 1,800 pixel wide images. Because a lot of these designs are going full width now. So you want it to look good on these big screens. So if I was dealing with a high-density screen, 1,800, I mean we're getting to 36. We're getting huge image. So I don't know if there is a too big image. That's why this solution is kind of iffy, I feel, because we're giving them these devices that have high density like a phone, but then it has to process more to actually render that image because it's so much more memory. It's a confusing issue. Yeah, always optimize your images. And that means when you take a picture, it has a bunch of metadata in it. You want to scrape that out. There's image optimizers online. It says optimize this image and it just basically removes all the information you don't need. So if you're not doing that, step one, do that. And then step two, add this responsive plug-in. Then step three, upload the big image. Anyone else? Yes. I don't know.  And then after they fight for a while, then a spec comes out and a spec is like, this is how it works. This is the way it's going to work. And this source set image picture stuff, they've kind of decided on source set, but they haven't really decided on how the picture element works perfectly. And so that's why it's something that the technology, the technology advance before the dudes stop fighting about what to use. The technology is here and the guys are still trying to figure out what's the best way to do it. And it's because the browser is going to read those sources immediately and try and download all the sources before the page even renders. But we don't want that. We just want to give you the one image you actually need. And that's why we're having to do these widths and 1x next to the image so that we can tell the browser, wait a second, don't download this one. Just get this one. Yeah. Any more questions? Ladies? Yeah? Cool. Smush it? I guess I'm just curious, like, I'm sure it's running in through a smaller in size. In fact, when WarCrust is creating all these different image sizes, do you know what's happening? I don't know what's happening, but I know, like, for each... Yeah, I know... Yeah, that it's actually caching and then rewriting it. So a lot of this compression, actually, then it will reduce colors as well and stuff because the more colors you have in a picture, like, the more information and try to normalize the colors and it gets rid of all the metadata. So it's probably a lot of that going on. I don't know what WordPress does. We could probably, for experiment, upload something to Smush it, upload something through WordPress and see the size differences at the same dimensions. And that will probably tell us who's doing it better. And then you can also, there's websites where you can take an image you download and upload it to a media. It gives you the metadata and it will tell you, like, what the camera was shot on, when it was shot on. Sometimes it has Latin longitude.  And if you download a picture off of your WordPress site and ask all that image, all that information is still there, it's not optimized. That's a good test to know if you're actually optimizing it. I think you had a question. Yeah, they're not going to do it. There's some kind of, I know that there's some kind of optimization software in WordPress that crunches it.  But I don't remember what it is, because it was Tim Thumb, right, that was working with like image magic or something like that. It's all PHP image magic under the hood. That's actually doing the process. It's not, they're even straight PHP functions. It's not overly aggressive, like something like push it is. But it does something. It does, I mean, it's going to do a sort of a baseline. It's like, it's almost like when you say, say about Photoshop and the baseline default settings come out. That's kind of the same concept, but it's not as overly aggressive. We're trying to overly compress because they're taking the hand of things like push it. Well, yes, they can do a good job with your images, start images, start image types. They can have a negative impact on visibility and that's where color quality you're going to make shift and do something like that. So they're trying to take a less heavy hand in core, whereas if you want to use something additional like push it or something on your desktop to preview those things, they cannot leave that to you. And if you have a lot of images you should probably be using some type of caching engine that has a CDN built in and that's just going to take all these images and put them on a really fast server and just deliver these static images. So if you're dealing with that, I would go with the CDN definitely if you're delivering a lot of images and it's pretty cheap. It's not expensive. Anything else? You mean like 90?  So she might be able to do that? You just have to re-save it because for some I had that problem before. Maybe one of these is that if you send your image from one place to another that other place is operating a system originally has to know what the iPhone is doing when it turns you. So like open it up and re-save it. What's it called? You know apparently there's a solution.   Oh no I would do them all. I'm saying if you have an upside with a lot of images do a lot of these little things are going to help because there's no we all understand there's no magic wand. There's not. There should be definitely. Responsive I'm still looking I'm still looking. It could be what's the I think the default's 100v. Does it know that that's the default if you don't. I think that is. Yeah it is it's 100v or the width of the largest image in your source set is default sizes but I don't know if it's got to be there in your tag or not. I don't know. I just tested with I was just doing some testing with cross browser testing.com and it seemed to work without it so maybe maybe the newer like canaries have it. It worked like it worked worked like you resize the page reloaded and saw that it was different. Yeah because you actually you can right click and get image source and it's the different source which is kind of cool it's a good way to check. Yeah all right guys I think that's I think that's time.


So at the same time, like with the distractions that they have now and those that are still focused, let's give them their props. Yeah. You know what I mean? Yeah. And especially the ones that with Bernard Hopkins saying that listen, any of those guys, any of you guys that's not in jail, not selling dope, not robbing, bipping, you know what I'm saying? Doing all the stuff, credit card scamming. Yeah. I kind of hold them in a different light because I come from that. Yeah, we on Boss Talk 101. I just said, well, somebody sent me something black, sent me something about Bernard Hopkins the other day. It was something he said, man, I guess you just had something to wear, something. You spoke on Bernard Hopkins. Bernard is nothing like Devin. Devin is a better fighter than him. Overall, better person, better everything. What was that about? Well, I was just speaking on Bernard, speaking on the young guys of today. And it's easy to say what the young guys aren't doing in comparison to the OGs. But, you know, I remember, right? We didn't have, I remember not having the cell phones. Yeah. Right? I remember not having all those things, right? I remember going out, going out the house and you had to go straight. You had maybe 10 cent for the use of the telephone, 10, 50 cent or whatever to make a call.  They weren't all the distractions now. You know what I mean? Correct. So with the kids now, like you don't know if they're gonna make it over there. Did they post something? Did somebody hit them off? You know what I mean? So at the same time, like with the distractions that they have now and those that are still focused, let's give them their props. Yeah. You know what I mean? Yeah. And especially the ones that with Bernard Hopkins saying that, listen, any of those guys, any of you guys that's not in jail, not selling dough, not robbing, bipping, you know what I'm saying? Doing all the stuff, credit card scamming. Yeah. I kind of hold them in a different light because I come from that. Correct. So I know we really got respect for the real ones that stay on course. You know what I mean? If you don't have no respect then you ain't been in the streets. Yeah.  Yeah, don't I agree? I don't know. I might need to talk to you.  That's what I keep hearing. I keep hearing that a lot of street cats can't wait to get out when all these rappers rapping like they in the streets or want to be in the streets. They don't make no sense. And they have every opportunity to be out of the street and stay out of the street. No, absolutely. And I don't, I don't fall the rappers, right? That's rapping about being in the streets or, you know what I mean?  You're going backwards. Going backwards. You're going backwards. Yes, sir. And taking some of these youths with them because the youths are hearing what they're saying and want to do what they're talking about doing. Yeah, like I said, I don't want to, to seem like I've never been that guy. Been that guy. You know what I'm saying? But I'm just telling them, like, be careful. I done been shot five times. You know what I'm saying? I done been to prison. I done been broke. I done been had money. I done been heartbroken. I done been every kind of, you know what I'm saying? I might not look like it. You know what I mean? Because I know it's part of it. And I got everything coming that I had coming. I deserved all that. That's why I don't worry about it. I deserved, I deserved to be shot. Yeah. I deserved to go to jail. I deserved all that. But it made me the person I am now.  Yeah, we on Boss Talk 101.


This is the animation minute as always to start with jobs here Let's do the animation has position for a senior 3d animator Icon creative studio has a lot of positions. Look at that tons of animator positions Red knuckles is hiring three animators and lead animator slash supervisor Dreamworks animation is posting about a feature animator position while brain is hiring senior animator and animator and technical animator and then at a job posting here They are hiring a senior animator as it says and here is a position for a senior blender animator And Marissa is tweeting here that they're looking for a short-term freelance animator Stimul animation is looking for a bunch of people check out the link There are a lot of positions open there including animation and let's switch over to news and tidbits here Clay Kates has a really interesting thread about Animation directors and what that means and the differences between a feature animation and a live-action Director and check out his account for part 2 and part 3 really interesting Alberto a fellow island animator has his YouTube channel out. Make sure to check it out. It's very cool Here's a cool link for health and wellness for animation artists It's about stretching and exercises and all the good things you need to do to stay focused and stay fit as an Animator in your long career. Here's a trailer for cyberpunk. Watch out. It's bloody. It's gruesome It looks pretty cool though. Check it out. It's coming out on Netflix. Speaking of Netflix Here is a new stop motion movie coming out October 28th Here's a dark fancy part tower defense part deck building card game But it also has a really cool 2d trailer. So check out the full thing This is two minutes long Star Wars and or has a new poster show coming up very soon This is very cool. It's a 2d effects animation reel for arcane Here's a post about an animation picker that also led to import anim school pickers That's pretty interesting worth checking out. This one cracked me up Love all this. He has a whole series about dinosaurs and weapons. Make sure to check it out Planet source back always super cute. Got a compilation here of animation pieces. That is cool. All the signs Cool props Very cool. Love that Here's a follow-up to the walk cycle tutorial as it says here. I love pixel art You know it. This is the end. So you got to get to pixel art. This is cute. And last but at least here is this awesome Absolutely bonkers. I love it Gotta have some cool pixel animation in there and that is that for your image minute You can find it usually on Mondays, but this Monday was a holiday. So a tiny little break, but usually it's Mondays every week on my channel Thank you for watching


Hi everybody it's Sam at Mixtape Craft thank you for watching today so I'm going to be showing you how I've made these adorable Christmas crackers. I absolutely love how these have come together and these are going to be going into gift bags that I will be giving to my six closest school friends so I like to do this every year. This is obviously a little bit different so whether we have our little get-together that we usually do that may not happen however they will still have a bag full of all these treats so this one here I will be filling so they're only tied in a bow there so I can easily undo them but I've already put the little snap in there as well so when they pull them that will make a little kind of bang it's more of a snap sound but it's funny nonetheless and then inside there's plenty of room there I'll wrap it in some tissue and pop a little gift in there for each of them and I'm probably going to put their initial like a die cut of their initial somewhere amongst that cluster on the front there as well I've added a rosette you've got little bells which kind of jingle and then I've added some glossy accents onto bits and pieces there and I just coloured these elements using my colour pencils so really easy to make I've got mats and layers on the back there and if you watched the live where I actually put these together you'll see I've added these embellishments on the edge here I did say that I think that you know you could put something there and I was I really like how this has come together and then I've added this trim this glitter it's like a washi tape and I'm really pleased with it so let me show you how I put these together okay so the kit I've used is the kit 13 from papercraft society so this one's by Simply Made Crafts which is by Helen Griffin now if you don't have the die to make a Christmas cracker I do have a Christmas cracker playlist so if you head to there you might like the inspiration in terms of the decoration that I've done with today's but if you don't have the dies and you'd like to make a cracker then you can check out my playlist there but if you would like to get your hands on this it is still available from when I was making this video and I'll link it below it's a great size and as I mentioned during the live these aren't just for Christmas time I've given crackers as birthday presents and also they're great for baby shower favours so you can have these in obviously the blues and pinks and all those kind of things and birthday colours whatever you want to do and they're lovely for just putting gifts in and in an alternative way really it's just something a bit more fun so inside you have your dies and it's this one here so I just die cut two of them okay and you'll see here I've already got these ready that's how they look when you cut them out so we're now going to move to that stage so if you've got this kit go and cut two of those you can make a three sided cracker a four sided which is what I'm going to do today which is the square this one you can also do a five and a six sided and you can also make a wine bottle style kind of box you can cut the bottom off there's lots of things you can do with them so when you die cut both of them what I've found just to make it a bit easier to fold it all together is that one's kind of a bit more done on it so just use this one so when it's die cut it's like this if you lay it into your scoreboard and just run a score line along the top of all of these teeth so if you've got this one I'm doing it at the 1 and 5 eighths just running a score line and then again you kind of want to just shift it a bit here and then do another score line I just find it's easier to add the score lines you can just see where I've added them so it's just literally above the teeth here that have been cut and again just repeat that on this one and you can go back in and do those score lines if you want but that's how when you cut it it will give you these score lines here and also here you want to fold and burnish now when you do these ones here you're going to fold so you have a mountain then half of the teeth will go into a valley like put it on its side there we go like so and then you'll have another mountain so then when you put it together the teeth are kind of in between there and again do the same at that end so you're just going to fold them over valley and then finish with a mountain like so and then just do those ones as well okay do you want to do that twice and then we're going to stick them together so I've got my liquid glue here you can use red tape I think I did use red tape during the live but then I found it was quicker for me to use my liquid glue when I put them all together you know it took me more time deciding on the papers and how I was going to do the decoration than it did to do the actual cracker itself so once you know I decided these were really quick to do and actually put them all together in about an hour and a half after I done the live so yeah and I'm glad I've kind of done these now because it's one less thing to have to actually put together you know in December so add your glue to the tabs I always like to do the middle one first line up those score lines and then just kind of pull that one and then that one and then it should all line up perfectly just give that a minute like so now before I go to stick this side I found it easier to decorate with the embellishments and also to put this trim through here so I've just got some of my red tape here and I'm going to come from this side here where the fold is and I'm just going to run this tape through the middle now the reason I'm using the red tape and then that silver washy tape is because that washy tape is not very sticky so I'm actually you know if you've got a nice sticky washy tape and just stick it straight on top but because mine's just got a very very low tack it was just lifting I'm just going to add this just to give it something more to stick to. Okay then I'm going to take the backing off of one side and then this is the silver washy so it's exactly but slightly wider than that red tape I believe but then I can just go back over stick that one down try and keep it as straight as possible and then again okay so that's the washi tape stuck down and now I've just got some of these embellishments so again whenever I stick any embellishments down I always just like to add a little bit of liquid glue just to stick it better so these were from Hobbycraft had them for a while they're like a matte finish and I thought they they kind of gave a hardware kind of feel to it but it also then looked like some studded almost like some studded furniture or armor had that kind of look to it I don't know I really liked it so you can use any kind of embellishments and you might want to do some little dots of glue and then sprinkle glitter or you might want to you know actually get some glitter glue and follow the shape of the the end of the the cracker it's entirely up to you you can see just how that really kind of transforms it so I'm just going to finish this one here okay so that's now all ready and then I can just fold it in fold it over fold this side over and add your glue you might want to just snap before this but I find it's easy to do and it's all together and then lay that all over it will perfectly line up I'm a little bit off with them but this is going on the bottom so I'm not worried at all and it's all going to be pulled apart anyway some of my friends may save it and try and kind of pull the the gift out or they can undo the bow to be fair and probably they'd look quite nice then as a little kind of tree ornament so and then I just fold it back over that way okay and now because of the way that you folded those these teeth will go in and then they will the ribbon when we attach that will keep that all together then I've got my mats and layers so I've got these here now during live I actually covered the top one and it is this one here you can just about see under there there's the mat and layer you don't need it I didn't anyway but if you do then you'll want four of each side but for me I'm just doing the three and these ones measure for the mat layer it's one and three eighths by two and three quarters and then the pattern paper is one and one eighth by two and a half so I'm going to attach them to the bottom I mean you might not even want to do the bottom one it's entirely up to you but I'm going to do the three kind of sides and leave the top one okay so that is the three sides all covered and I've also popped my ribbon on there as well so I'm just waiting for my heat gun to warm up so whilst that's happening I've got my snap here and I didn't show how I put these in during the live you just get a little bit of tape and you want to stick it to one side okay so just popped a little bit of tape there and then I'm just going to feed this in and just stick it just inside so like I said you might if this is a bit too fiddly then you might want to you know do it before you stick it down but it doesn't help that I've got that great big ring on so I've just put my fingers in there there we go and I don't know how well you can see that but you can see it's just stuck just in there okay so a little bit hanging out here and a little bit hanging out there and that's exactly what you want okay so with my decoration I made these rosettes these are just a piece of one inch by 11 or like a full length and score every quarter of an inch and then concertina fold and you will have a rosette so I'm popping a rosette on like so and then I have my nutcracker I have a drum I have the Ponsettia I have my have a cracking Christmas sentiment and then I've got these little sprigs I've got another one somewhere I've got the orange slice which I had just kind of sat under there and then I'm going to stick a couple of bells just on the tops of the bows there as well I'm going to pop it on high speed and get that all stuck down okay so that's everything there and then I just grabbed some of my Nuvo drops now I need to die cut another one of the green you can see the green the sprig here but on the top there are just little red Nuvo drops just to look like berries that was using the one of the vintage drops and this is the postbox red but for the yellow which against the vintage drops and this is the yellow brick road I just popped a very small blob into the center of the flowers there and also if you are very patient but you could do a very small little dot on each of his buttons is there as well and I think that looks quite cute and then just for a little bit of glitter I used the Nuvo honey gold and I just done a nice big blob in the middle of his hat and it just also gives it a little bit of texture as well you can add your glitter pen and things like that and I did also put this one here so it was a bit like mistletoe very small little dots there and this is beautiful this one this is the metallic caramel cream that's one of the crystal drops again by Nuvo so they have it I think they look really nice I just bring it up closer just so you can see little dots there tiny ones you can just make them out there on his uniform the gold dot just there and then the yellow ones in the middle of the flowers like so there'll be another sprig which I will add in there but I think it looks really nice they have my six mini little Christmas crackers which I'm looking forward to finding some nice treats now to pop inside I'll probably put a scratch card in there as well so always goes down well so I hope you've enjoyed this tutorial as always all the links to everything that I've used will be shared below and I'll be back again very soon with another tutorial oh and I'll also link up here some of my other cracker videos if you didn't click on that playlist one earlier you'll be able to find some of them here as well all right take care see you soon bye


Everybody forced here ripping 20 22 23 contenders basketball hobby four box number seven picker team style Got Aaron H Clippers a key Celtics Brian s magic Christopher W Bulls Chun Wei heat Dylan s calves Era with the Hornets Eric has the Grizzlies Hilton T Pistons EMJ Sons Gerald with the Pacers Carol Nets Lee Mavericks Lee Juan Spurs Marcy Pelicans Mathias Knicks Patrick G. Nuggets Robert P Blazers Ricci jazz Ryan s Rockets Kings Ryan W Bucks Shazeed with the Thunder Thomas C Warriors Thomas R Lakers Raptors Tony H Wizards Tony W T Wolves young s Hawks and Z June with the Sixers. Good luck everybody. Let's see what we got here. Never mind. Here we go for box number seven y'all safe Be safe Now he's safe Jake. I'm sorry that's just because there's a 70 year old playing Umping out there. Yeah, dude. That's that's not so I mean, I got it. It's kind of bang bang Season ticket Jason Tatum your Celtics variation there cause it's the just a blank Wait one to Barstits junior rookie to your contender and a Christian Caloka rookie ticket variation out over the Raptors I'm guessing He probably couldn't see the foot hit the bag to be honest Why has been hard away? Maybe he's just looking at it. That's just a dash to miss Ray's getting the home field calls. I see Pistons Kade Cunningham semi-finals ticket to 99 Superstar die-cut Anthony Edwards Kevin Durant sweet shots that were on James Jalen Doran on the lottery ticket Davis Jake Loravia rookie ticket auto Grizzlies I'm gonna go home into my dog and say Franz and see how he reacts first round ticket derrius garland 199 calves probably just stare at me Thinking about running away and about killing me in my sleep So Han rookie of the year. All right, here we go. Here we go teams on sale guys Number eight coming up next Kaz Clippers sixers Where are they? Clippers first round ticket to 199 John Wall It's Barstits junior rookie of the year Superstar die-cut Edwards KD LeBron James sweet shots lottery ticket Jalen Doran rookie ticket auto Jabari Walker Portland's Lasers there Clippers again playoff ticket. This time is Paul George. That's a playoff P right there to 249 areas We got him playoff P a Damian Lillard. We got limited coming up, too So the cooler RPA is in my opinion Collins section variations season ticket jazz So Han rookie of the year for the Spurs and Legendary auto Grant Hill nine of ten pistons Tiny auto there Grant Hill pistons legendary auto. That's awesome, man.  I hope he's all right Baseball needs a healthy jazz Chisholm the Marlins do the healthy jazz Chisholm to sell tickets. Yeah Rookie ticket variation Kings Keegan Murray Terry Easton Ricky the year contender back back to back right there No sleight of hand. There's just back-to-back same card and Shade on sharp playoff ticket rookie out of 1099 blazers Leave it's a second of these cards that we pulled it's not going to no dusty sleeve Clean sleeve There we go blaze. So we'll get that one bag for you That's a good grab On a sunny day now, I know why you did the pose Yeah, dude when Randy hit the homer on Sunday, he did a pose around first and third base It was it was pretty sick First round ad to 199 Lakers. He is the coolest person in baseball Superstar Shrey young Atlanta Him and jazz Cheshire the coolest people in baseball After that it's probably like Otani But Otani is because he's so freaking good and like Just a big goofy six-four mega athlete. Like I don't know how to also describe him a column sweet shot Shade on sharp lottery ticket Ricky the year who's money jeng terry smarton On a playoff ticket ricky otto hawks to 99. There you go, Atlanta It's a number of autos here man. Good stuff Raptors scotty barns playoff ticket the 249 nothing robinson marie studemire All right guys next one calves clippers sixers They're on sale calves are 15 off clippers and sixers are both $10 off. Yeah, I don't get it julian I'll never understand it. That could be a baseball town too. So weird First team that's one. That's one world series before it's kind of strange, right? kind of strange Brandon Ingram pelicans semi-finals tickets to 99 Traymond Green Kevin Durant all superstar die cut Palo rookie of the year contender inserts Nikola Jokic Kyrie Irving And nice to barry walker blazer skill in here the finals rookie ticket to 49 on the auto Grats again blazers Tyree smarton variation rookie ticket Atlanta Dude, what the hell? Well, yeah, how many bad how many wrong calls are they gonna make he's safe Benedict Mather and rookie of the year With a march on bochamp rookie ticket out over the bucks variation There's bochamp good stuff bucks It is the top of the second. We've seen two incorrect calls. There he is Odysseus Or Or autosas Marcus Marta 249 Celtics Agbaji a lottery ticket Wade And that will do it. Give me a second. We'll do a recap Just wanted to go on the next one now too That's bad when you're missing those calls And it happens every now and then but like how are we how are we in the top of the second? It's happened twice in the game Get their coffee, dude crazy, man all right Walker Warravia Coloco Bochamp Tyree smarton playoff ticket Jabari Walker finals ticket variation Grand Hill the 10 legendary contender auto for the pistons And playoff ticket shade on sharp 16 of 99 Blazers great great break for the blazers there. Thanks again, everybody. We're on the number eight now


The next topic and the trends and issues in early childhood education is the use of technology. Technology is the need of this era. It's indispensable for this era. But how to use technology for small kids? And should we use it or not? And how we should use it appropriately? So we know that a screen is often an abstract representation of reality. It's not actual reality. Right? It may be augmented reality. It may be virtual reality. But it's not real. We have to raise our kids in reality. We have to make them capable of facing reality.  They need to go outside the world. No matter what the weather is. Playing outdoors, watching the nature. They need to learn how to use their five senses. They need to learn from the fake technology of the world. So until we control these things, we won't be able to benefit from it. Then we all know that children learn best by interacting with people. Children learn better together with people. Parents, grandmothers, grandmothers, grandmothers, brothers and sisters are all different. As people are involved in gadgets these days. If a small child is sitting on a table or a screen for hours, then he will not be able to create the nature of love and the nature of the world with his relatives or with the people of society. Then education and technology is estimated to become a 60 billion industry in the coming years. This is also an industry like privatisation. This industry wants to earn more and more. It wants more and more people to sit on the screen, spend time on the screen. So is this beneficial for our children as well? Will we only support our industry or will we help them earn money so that our children don't just sit on the screen and learn from the nature of the world? Or will they not be able to fight the real situation then we won't be able to leave them on uncontrolled and unlimited use of technology for our children. Along with this you can see Kate Hamper's Child Imagination and Knowledge Construction. I used to believe that when children used to create different characters from small things, sometimes they used to use stones, brushes, rubbers, pencils, they used to make people, they used to make stories, they used to play with the help of stories, they used to make their own characters, they used to develop their own situations, they used to play with each other in groups and it was not a script written, but they used to play roles with each other. They used to play the role of their mother, they used to play the role of their father and then they used to have a mental disorder which was social, emotional and cognitive.  Now what is a cartoon? One is a cartoon giving you a cultural input, it may be appropriate for your culture and may not be appropriate. Then their colors are very sharp, which are affecting children's minds in a bad way and they have become fast in life. In the past, if you used to show a cartoon to a child, he would watch it all the time, but now what is going to happen? He tells you to change the cartoon after some time, and if he has a gadget in his hand, he keeps moving it all the time. What is going to happen with this? The attention span of the child is decreasing. Now this attention span, if he wants to use it in a class or if he wants to listen to a story, he cannot use it at all. He quickly goes ahead with his thoughts and no source of information can take it. Supporting technology industry instead of developing. Unfortunately, the way technology industry is going, the way it is going, we are supporting it in the same way. If we want to use technology for ourselves, then why don't we make a special program for children? Where we keep direct effects for them, where there are moral and cultural stories for them, and where we can share them with our own traditions, where we can encourage their intellectuals. Therefore, if we use technology for ourselves, then it will be a loss for our children.


And they say, oh, Dwayne and Dakota, the cows have no legs. I always tell the story of my South American friends coming to South Dakota and seeing all the balers we use here, because that's a very predominant thing to do is to bale hay up and move it into the feedlot for the winter time. And they would see that, and they say, oh, Dwayne and Dakota, the cows have no legs. Meaning that the cows should be able to walk out and get their own food, and I think that's exactly right. It just saves us a lot of money, and it keeps us from hauling nutrients back and forth. How many pounds of nutrients go to that feedlot? Well, they don't really get back. The nitrogen for sure doesn't get back, and if we take the manure in the form of getting the phosphorus and potassium back, yeah, that kind of works. But it, again, is another fossil fuel thing. So we're trying to take the fossil fuel guy out of it.


Dan Hauser was running down a beach in Colombia, being chased by three men with machetes. This is the story that Dan tells about the foundation of Rockstar Games, and it sounds like something out of one of the studio's video games. According to Dan, he was taking a holiday in South America after his employer, BMG Interactive, was acquired by Take 2 Interactive. Dan's job in the UK no longer existed, and he wasn't sure what to do with himself. This was how he ended up fleeing for his life across Colombia, barely escaping serious injury by jumping in a taxi and hiding in an internet cafe. It was there that Dan checked his email, discovering a message from his brother Sam. The pair had worked together at BMG, and Sam was trying to sell Dan on the merits of moving to New York for a position at Take 2. Dan was hesitant, but considering that he was on the run, it made sense to try a fresh start. This was the start of Rockstar Games, a journey that would eventually lead to the creation of Red Dead Redemption 2. Decades after his misadventures in Colombia, Dan had a goal. Along with his brother, he'd somehow, inexplicably, created one of the most profitable entertainment companies in the world. When Dan and Sam had begun working at Take 2, the company was $100 million in debt. Now, its Rockstar subsidiary was worth billions. There was not just one Rockstar Games. The studio's name had been attached to almost a dozen teams working in various locations around the world. While each of these studios fell under the Rockstar banner, they would each work on their own projects. Sometimes multiple studios would work on the same game, but there was never a time when all Rockstars were involved with a single overarching project. The majority of these Rockstar studios were located across the United Kingdom, based in cities such as London, Leeds and Edinburgh. There was also Rockstar Toronto, Rockstar India, and notably Rockstar San Diego. Where is Rockstar India? All the others get a city and Rockstar India gets an entire country. Hmm. It was Rockstar San Diego that had inspired the creation of the brand's biggest recent release. Formerly named Angel Studios, Rockstar San Diego had created a game titled Red Dead Revolver, which had won some attention before being mostly forgotten about. But the higher-ups within the company had taken notice, and Rockstar San Diego was given another opportunity. They worked hard to create Red Dead Redemption, a spiritual successor to their first game that bore a lot of similarity to the open-world sandbox adventures of the Grand Theft Auto series. This was something new and exciting, and while it was never going to rival the sales power of a main series Grand Theft Auto game, it was clear that there was room to build upon Red Dead Redemption to tell engaging, player-driven stories. While the majority of Rockstar continued work on its upcoming tentpole release, Grand Theft Auto 5, Dan began chatting with the San Diego division in order to come up with the basis for another game in the series. This process took time. It wasn't until a few months later that a broad outline for Red Dead Redemption 2 was finalised. After another year, rough scripts were completed. GTA 5 was still in the late stages of development at this point, but even so, teams from all across the world began conference calls, trying to figure out what would happen in this new cowboy game. Dan had a vision. He wanted Red Dead Redemption 2 to be more than simply just another Rockstar title. Rockstar had been instrumental in kicking off a wave of cinematic video games that told big, bombastic narratives, but all of this existed around the sandbox nature of their games. Sure, a player could play through the game's story from start to finish without deviating from the prescribed path, but instead, the experience that stood out in the public consciousness was the frenetic chaos of ignoring all the rules and playing their own way, going on crime sprees, exploring the environment, and messing around with bugs. As much as this type of gameplay was the focus of Rockstar's efforts, it was becoming increasingly clear that the company hardly had a monopoly on the sandbox genre. More and more games from a variety of different studios offered up a Rockstar-style experience with varying degrees of success, meaning that a new game needed to be more than simply another big open world. Dan knew that it wasn't enough to keep sticking to the same formula. What's more, he was well aware of the ways that gaming had changed in the past few years. Where once, a GTA game was the pinnacle of what could be achieved with a cinematic gaming experience, other studios had created far more emotionally impactful titles. Games like The Last of Us and Bioshock had gone a step further, creating exciting combat-driven experiences that were also rich with smart high-concept storytelling and characters that people genuinely cared about. Peppering a world with bombastic humour and satire was no longer enough. Dan wanted Rockstar's next game to be seen as a higher form of art. But getting people to think of Rockstar and artistic storytelling was going to be no small feat. It didn't help that the company's reputation was murky to say the least. Once upon a time, the company thrived on enormous scandals like Hot Coffee, as well as controversial games like Manhunt and Bully. Rockstar became a target for politicians and lawyers who wanted to make a name for themselves, thanks in large part to the hyper-violent misogynistic content within their games. For a time, Rockstar relished the attention. These controversies helped them to grow their public image and connect with their target demographic of disaffected young boys who relished blood and guts and who wanted to engage with insensitive media that broke social taboos. Dan himself was a big part of this image of Rockstar as the bad boys of video gaming. He earned a reputation as a difficult man to work for, crass and inappropriate as well as incredibly demanding of his staff. This all served the company well for a very long time, but it was clear that the video game landscape was changing. Yes, Rockstar games were as profitable, if not more financially lucrative, than they'd ever been, but Dan could see the writing on the wall. Rockstar needed to evolve. Its games needed to be more nuanced, intelligent and genuinely mature. As the finishing touches were put onto Grand Theft Auto V, Dan drew up plans for the company's next big epic. Red Dead Redemption 2 would take more than anything they'd ever made before. This game needed to be on a completely different level. It would require every single Rockstar studio working around the globe. The bad boys of gaming were about to start crafting their interpretation of an art house game. This was not going to be easy. The problem with creating such a carefully crafted, cinematic experience within an open sandbox world was simply the sheer scope of such a project. The final draft of the script for Red Dead Redemption 2 was over 2,000 pages long and created an 8 foot tall pile of papers on Dan's desk. All of this needed to be recorded by actors. Both voice work and motion capture would be needed as part of a recording process that took 2,200 days in total. Wherever possible, Dan threw himself into the mix. He was always willing to act out a scene to show how it should play out affecting character mannerisms that were used as the basis from which to work for the more professional actors. The motion capture shooting was broken down into segments that would take 2 or 3 weeks and before each one there were 4 days of planning and organisation to make sure that the motion capture teams recorded everything they needed on the day. This was a lot of work and it did take its toll on the creative teams involved with the project. The story of the game itself mirrored the transformation that was taking place within Rockstar. Just as this studio was attempting to find a new place in the modern landscape Red Dead Redemption 2 was built around telling the story of a group of outlaws who were becoming obsolete in a changing western setting that was no longer as wild as it used to be. But just as the game focuses on how this process of evolution could be rocky to say the least Dan's group of gaming outlaws weren't going to have an easy time as they were attempting to earn a more artistic reputation. When Dan granted a rare interview to journalist Harold Goldberg he boasted about how his senior creative team went through intense crunch periods during which they worked 100 hours a week in order to get the game done. What Dan wasn't expecting was how this boast would be interpreted. Commenters across the internet responded by questioning Rockstar's barbaric labour practices wondering about the morality of forcing employees to work this hard. The Wild West era of game development was clearly coming to an end and Rockstar were facing pressure for their continued use of draconian work schedules. Dan attempted to provide some damage control insisting that he was only referring to his core team of senior creatives. They'd only crunched for a few weeks, he insisted and this was done primarily out of a passionate desire to make the best game possible. Aside from this, Dan insisted, overtime work at Rockstar is completely optional. Nobody has to stay late in order to finish their work. The company's employees all across the world simply chose to do so out of a love for their work. It was then that former Rockstar employees and other developers who'd worked on previous games began shining in. Dan had inadvertently whipped up a media storm as people with first-hand experience of working on Rockstar titles shared just how horrid Rockstar could be. Perhaps most tragic among all these was the story of Jen Sandercock who shared about her time working on L.A. Noire. Jen and her team were made to struggle through long hours in a constant grind over a period of what she called literally years of hard work and crunch. Jen has a passion for baking. Since her time on L.A. Noire, she's even gone on to create her own indie game that sent us around making cakes while playing. So Jen decided to liven things up a bit. She used her precious, limited free time to bake a couple of cakes which she then brought into the office. She sent out a mass email inviting everyone to come and enjoy half an hour of cake together one afternoon. This soon morphed into a regular event known as Cake Day. Each week, Jen would use her spare time to bake some cakes which she would bring in to share with everyone. Jen found this tremendously helpful and productive. Not only did cake time allow everyone to rest and relax for a minute, but it helped the team grow closer together. Jen got to know members of plenty of different departments on a first name basis. Now when an error report came in, she knew which specific member of the lighting or audio team she needed to talk to in order to help fix the problem. By her own estimations, more bugs were fixed on Cake Day than on any other day of the week. But then, after a few months, Jen was pulled aside by her boss. He told her that the higher-ups at Rockstar didn't like Cake Day. It looked like the team were slacking off. If she continued to bake cakes and bring them into the office, she was jeopardising her career. And so, heartbroken, Jen immediately stopped baking cakes. She'd already prepared that week's offering, a beautiful, portal-themed Black Forest Ghetto. But she felt so ashamed and embarrassed that it was ultimately left uneaten. Jen's story was not unique. Plenty of other former employees at Rockstar from all over the world, freed from their non-disclosure agreements, shared similar accounts of an oppressive office environment. Newer, younger indie studios began announcing proudly that they'd never had to endure any kind of crunch period while working on their games. Such a practice was old-fashioned and harmful. An open letter resurfaced, penned by the spouses of employees at Rockstar San Diego back when they were working on the original Red Dead Redemption. The letter called for the company to end their inhumane work practices and to allow these employees to spend more time with their families. There was nothing that Dan could do but keep quiet. Rockstar was no stranger to controversy, but this was something new. The gaming community itself was turning against them. All of this would likely be forgotten in the end, swallowed up by the excitement surrounding the release of Rockstar's latest technological masterpiece. Dan and everyone else at Rockstar pushed forward. This was a collaborative effort, taking monumental work from every single studio around the world. After eight years of development and many delays and misdeadlines, Red Dead Redemption 2 was finished. It remained to be seen how critics and players would react to the new game, but Dan was proud of it. He'd created the masterpiece that he'd wanted to make. This was Rockstar's new high point, their most impressive achievement to date. The moral of the story is that if you want to make something you can be proud of, it takes dedication. No matter your previous experience or lack thereof, you can make something that you can be proud of if you just keep going. It could take years, but nothing beats the satisfaction of a job well done. That said, be careful not to get so focused on your goals that you overlook the needs of others. If you're so focused on creating your magnum opus that you cause harm to others, then your achievements will be hollow. Treat those around you with respect, even as you push to achieve your goals. Bear in mind that sometimes, being kind and helpful and generous can be more important than reaching your next milestone. Above all, remember to keep going, even if it takes years and years. Someday, you'll make it to where you want to be.