Hello, everybody Today I'm going to talk about Responsive images and how to have them under control I'm Christina Chumillas. I'm my designer and a front-end developer I work at Imbra Drupal agency in Barcelona and you can find me on Twitter as Chumillas or Drupal.org as a criminal So the main thing that I'm going to talk about is the basics of our responsive images responsive images in Drupal and finally art direction The basics it's not just I'm going to do an introduction. It's a really important part for me because I Have to say it. I just don't like doing sessions I just really get super nervous and I'm here thinking all these all these smart people just looking at me and expecting something so Last year I said, okay I'm gonna talk about something that I really know about it and I've been doing Responsive images for years with Drupal 7 and so on and I know how to do it And I started the session and I realized that I was doing responsive images wrong for years So that's why the basics are important So let's start with some General information that page weight for the website has been increasing Incredibly during the last year just from 2015 to the last year it was It was a 10% increase in of increase man It was almost two megas and a half and now as average for all the websites. So that's incredible So some just fast faxed around 60% of the traffic for websites are images So we have a huge impact if we think about responsive images Images are loaded in synchronously, so we have to take that into account and usually Images that we put on the websites are usually too big. So we have a huge Part to play there So here the main goal is to deliver the highest quality images supported and nothing more So let's start with the basics So what do we know is for example, we have two main Things here the outer the person that is doing the website and the browser And we have several things that one knows but the other doesn't know for example The viewport dimensions the person that is creating the website that is creating writing the code He doesn't know how this website is going to be consumed So he doesn't know that if it's going to be an iPhone it's going to be a super Retina display super big so he doesn't know but the browser actually knows it because it's displaying it the image size Relative to the viewport the author knows it because he has designed it or he has He has coated it so he knows it and the browser didn't know it, but now with the new The new things that we are adding with responsive images. He knows it in this case It's the sizes attribute. We will see it right now the screen density again the author doesn't knows it but the browser knows and Finally the source dimensions If it's 100 pixels or 2,000 the browser doesn't knows until he gets the image So he already has the image. So with the new attribute Air as air see set you can say that to the browser before the browser loads the image So who has all the control is the browser? This link here is the best Block post that I've seen explaining it and it's amazing. So we want to learn a little bit more. It's super well explained and Here we have The anatomy of an a skilled image We have here the new attributes We have the the src set the sizes So let's look a little bit to them The DS RC set is a way to saying to the browser How big are the images that you are going to send to him? So before he loads it He knows if he is going to need the big one the small one So he doesn't have to load all the images just the one that he needs and With sizes what we are doing is explaining to the browser. What are the proportions? For example with? With that is bigger that 36 a.m. The Image needs to be a 33% So the browser will decide which image has to be loaded So well, it's not mobile first. It's actually mobile second, but first because we have the 100% the second the second value, but it's just like moving the Medi-Aquare is to the to the to the sizes attribute So here's is the Anatomy of a response of a responsive image skilled. It means the same image So that's a skill So we have this huge image in the browser and we have the small image But exactly the same image on the mobile. So what is? Our direction our direction is changing the image on the mobile So we actually have different images not just the same image is skilled and For that we have picture So that's the thing that I was doing wrong. I was using picture to create to build all every one of the Of the responsive images that I was Creating for all the projects So here we have the picture anatomy. We have the The tag the picture tag that actually is a container and then we have the the the the tax source where Inside we have again the DSRC set where we can have actually different densities and For each source we say where it has to be applied. We have the media. It's like a Media query attribute and it says this source is going to be applied on small for example, this one is from zero pixels to almost 29 a.m. And the other one is going to be applied to a bigger one and Finally, we have the fallback the EMG tag inside the picture as a fallback. They always need to have slide for Internet Explorer So here it is Just the picture tag and all these attributes go back perfectly in most of the browsers but Not an internet Explorer and for that we have picked a picture feel It's already built on Drupal. So those that you're that are just using Drupal Don't have to worry about it Otherwise you have to use it So Let's see how to build actually responsive images in Drupal a little bit of history on Drupal 7 we have several approaches to For using responsive images the first one was using the actually the same The same modules that are right now in core in Drupal 8 it goes the The module res EMG is and bread points and I Have to say it Jail AS and addicts made a huge work here because they already built something a lot of years ago before It goes actually on a standard and everything and we had this on Drupal a lot of years ago So it's great and it has to be I want to say it and We have also some great modules on Drupal 7 that they were adaptive images and a I Yes Sorry, my English is not the best one and another one was client-side adaptive images If they were all different approaches so on Drupal a to have responsive images It's actually his name is his machine. It's machine name is Steel picture and we have the its dependencies are breakpoint and well image and via file and field and The process for creating a responsive image are these four steps The first one is creating or importing the breakpoints later creating the image styles Later on we create the responsive image itself and finally we apply it on views or a view mode or whatever So let's start with the beginning We have to start creating or importing the breakpoints breakpoints are created both on themes or on modules We need to create a File that it's called the theme or the module name dot breakpoints dot yaml and Inside this what we have to do is move these Medi-queries into Drupal so Drupal can read it read it. So for example for Bartik we have Three breakpoints here and for each one we need to Place the name of them of them of the in this case in this case a theme And the machine name and for each one we need the level the medic query The multipliers and some different properties so the second step is to create the image styles and Something really important here that I keep saying One one time and another is we need to plan the image styles We usually jump next to let's create all the image styles and if we plan them It's much easier and we will save a lot of time. So let's have this example. We have three break we have two breakpoints with three three sizes and for example on the tablet we need We have this design where we have two columns and for example the way at the width of these tablet is for a Eight hundred and three pixels then we take from here take off the margins the gather So we end up with this 770 pixels divided on two images. So we have this size for this image And we always have to take the bigger The biggest size for this breakpoint and then start dividing from here So I'm going to explain just a little bit that there's An amazing presentation for from mark through moon It goes in New Orleans, and I was in New Orleans, and I said I know about responsive images and I didn't went to that session and He it's a one-hour session explaining this So I'm just going to go around it super fast, but it's it really worth it so what we do is We try to use the same image of styles And so we do we create the less image of styles that we need so we try to use the same ones in different in different breakpoints and Here as he said there's like a rule where you increase the size of your image style for with 25% approximately so you start with the in this case we you start with a smaller image of styles that you are going to have for example for For a mobile you don't want you don't care about anything smaller than that and you start with the 240 pixels for the mobile and Then you increase at 20% at 25% and then you do the same with the other breakpoints and you as you can see You just end up with four Image styles you don't have to do all of them So you actually don't have to do that many image styles So that's really important to plan. That's why it's really important to plan the image styles And also another thing to plan the image styles is the naming. It's important to have a strategy for each project I usually follow the the component ones I use the naming of the component that I'm going to create and I use that name for this image style I never put the sizes on the on the machine name. I just put the sizes on the on the on the display name and The other approach is by size.  It's much clearer and when you have a list of 60 image styles This one is easier to find to find the ones that you want So the third step will be to create a responsive image itself Remember we have the scale image so for doing so what we do is We already have the image styles and then we go here and instead of picking the Breakpoint groups that we already created on our theme what we do is we take the we pick the responsive image that we have here and This is the default and this is going to have to create for us the EMG tag. So We for example create the diesel one and instead of picking the demo or whatever we take we pick the Responsive image and here we enter manually the sizes that we want for our theme for our component and later we pick the image styles that we want and With that Drupal is going to create the markup Of course, we don't forget about Internet Explorer we go we choose the The image on the view mode or on a view. It's super fast It's just you do know that where to pick it to pick it and here we can see the example We have this respond this this bunch of of nodes and While you see it's it's responsive. It's changing and The important part here is that the markup that Drupal created is the one That we want for the EMG not the picture one So as you can see we have the EMG here and we have the SRC set Bunch of of images and we have the the sizes that reboot later on Of course, it's all not not so well structured, but it's already here. So Drupal creates it for us and Then we have picture we have our direction. We have different images for several Devices so here the difference is that instead of picking the responsive image what we take is the demo Group of breakpoints and for each one we pick one or several images image of styles as we want and That's it So that's the default for Drupal in core so we already have in core the two ways of doing responsive images scaled images and Picture that we can we could say art art direction But what about really giving the control to the final user because at the end he is going to say what if I have picture with someone face in The right of the picture. I don't want to cut the face of a prime minister or something like that so We have for example Sorry, for example, no, we have crop appy This is the base of the main two models for creating for giving control to the final user crop appy is like the the appy for the other two models so they can Give us the control and the first Module that we have here is the image widget crop. It gives us full control for picking For each image exactly what part of the image we want as you see in the gift So so for doing that. It's a long process. We start creating the crop types. We go to structure crop types Here we create a crop type and We have seven for example, we could we can have several crop types With the proportions, then we create the image of style where we pick manual crop and there we pick The crop that we want for this image and then we go to responsive images Well to create a responsive image Later on we go to this is the another step we have to go to the Manage form display pick the the the widget appropriate for it. It's image widget crop then we have to To select for the final user exactly which crops do we give to them and Finally when we go to the know to the creation of the node the user what is going to find is a form where he can pick actually the Proportion and exactly the place for each image So as you can see here You can just choose whatever is the Exactly good for each image. It's super handful for example for a banner for a image for a Really important image that you have for a main for example A news on on the home page or whatever this typical banner So as you can see we have this difference between them In this one we picked the the one So it gives you full control. It's super cool Users are going to be super happy For the five minutes the five first minutes that they that they use it After that, they will realize that they have to do it Every time that they upload an image They have to go for each one of them and pick the image because otherwise they won't have an image so It's great, but it requires a long implementation and a long Efforts from the final users so Big wise and use it only if you need it and The other Module that is also based on the crop api on Drupal 7 it goes on like that But Drupal 8 is inside this media initiative that they don't they have done these amazing things and What it Does is that you just pick the important part and that's all so What we have to do is for example, we create an image of style we give a name and Like with any other one instead of using a scale and crop we use focal point a scale and crop We decide the sizes for the image of style never on the machine name And you see we have several images and For example, if we want if we go to add content Well, we will create a responsive image and so on and For creating content the only thing that we have to do is to choose the important part and Actually, it gives you a preview from the set the different Image styles that you have with a focal point apply it So it gives you exactly the same output with a bit of control for the final user and They don't have to worry. They just have to pick the important part so it gives you a basic higher direction basic control and Actually, it really requires low effort for the from the development team and from the final user Really low effort because the only thing that is the difference between creating a responsive image with and without a focal point is picking scale and crop or manual focal point scale and crop. That's the only difference and And finally one more thing will be using the responsive images inside what you see is what you get there's this module that appeared after as an issue in the actually responsive images Module in the issue queue and they created this module as a spin-off or something like that and It gives you this widget inside the what you see what you get and it's super useful It still has some issues that actually needs review the status that need review So if you want to try it and say that it works or not you can do it and That's also the conclusions will be plan your responsive images before implementing it. It's super important. It will save you a lot of time and Use focal point if you don't need full control because it Worth it and that's all Thank you. Oops. So there are the sprints if you want to join us on Friday What do you think if you want to give feedback and question Hi Thanks for the presentation. I have a question about the break points in the team By default there are some break points. That is I mean, I don't know when to use one or Well, it depends on your design. I mean you can if you don't have a requirement from the design You can use whatever you find it's it works But sometimes your design is gonna break at some point and it probably is not going to be the same break point Than the default ones. So ideally with the design, for example, if you have two two columns on on a Tablet There there will be at one point where two columns is The images are too big So you will decide at that point that you want three columns So that's going to say you where the break point is not using the the defaults from Drupal They are useful if you don't have requirements. So using them by default. It's it's useful Hey Just wondering I saw at the beginning there was something about Source it is there also the equivalent of like alt text set You know so like for each different image Which you might be pulling through depending on the break point like you have different alt text because you might want to use Entirely different alt text if if the image is completely different All takes that's yeah, or yeah So for example, you've got src set and like those could be I mean there are three different images But they could be entirely different content You know it might be a road on mobile and then a forest on tablet So is is there then like all set to go along with that? technically you could In theory you should you shouldn't I mean the theories that is that's for a skilled image That's the same image So it's going to load a different image if you want to to do it manually You can create the image a different image But if you are using Drupal or any other automatic thing, it's not going to be like that Technically you can you can change the image and actually if you want a different image You can use picture because the theory is that picture is for that. Okay, so technically there's no problem But you shouldn't Thanks. Thank you. Just About focal point When you study cinematography and you have to work on shooting Faces there is a rule which says that You should have the eye of the person you're shooting even if you're in extreme close-up or in medium medium shot At one-third of the height of the image meaning you have two-thirds of Free space and one-third on the top How would you do such a thing with focal point?  Then will he will be able to do it because he will know more or less It will be here, but you can automate automate it. I mean, I'm just giving a proper rule that can be coded and We all know that all the images that we have are or landscape or obviously food, but that's for Instagram or People and what I'm seeing is something that comes from 60 80 100 years of photography. So just with focal point you would center The focal point. Yes. Yeah, I mean this focal point is not something really really scientific I mean, you're just more or less big that big that point and that's all the control that focal point gives you so focal focal point what does is It sacrifices This precision for having more Quick results so the user doesn't have to spend that many time if you really want Full control for that. You're gonna have to use or image widget drop That as you have seen it really requires a lot of work Or you will have to build something by your own because it's not already there. You can work over The crop appy, but I don't know anything that actually automates in that way that I mean It might we just grow up what it gives you is proportions and you can move it as you so really what I just Need is to focal point and to decide as We have the focal point the rule of cropping around the focal point There's nothing automated on that. It's just the user picking the point Sorry anything else. I think the big problem is always like the sizes attribute because you You really want to have all this control in CSS But you have to put some of this information into into your HTML and that's super annoying and for instance you have maybe four pictures and In the mobile you have all of them the same size on top of each other But on desktop you have one of them bigger At the first one and this other ones like on the side or something like that And so you would have to have a different sizes attribute on the first picture than on the others And it's super annoying to maintain if you want to change this later You have to babysit all the stuff and what I was wondering is I mean this is not specific to Drupal this problem It's just a general problem with this side that would maybe to have some kind of server side thing on the patch a level which Analyzes the page and then applies of the sizes attributes and then Caches this thing. Do you know of something like this? I don't know something anything like this and it really sounds like magic for me because it will be amazing having Something like that, but I don't know anything right now that works like that and that automates it Okay, another question. No, you said you make this image style names like what was in Which yeah, just say an example of your image time. I forgot the teaser one. Yeah, okay So you name them after where you want to use them, but is this really useful because then you would have like different image styles per Per thing that you want maybe per view mode or something and in the end you just need some Sizes and then you can you reuse them exactly? That's a thing. It depends a lot on your project. I mean if you only have Imagine that you have a list of Different content types and all of them on the teaser appear like that and you are Have, I don't know five components that are using images This approach with components is useful because you have everything really Organized but if you really have a huge project with a lot of images and so on The best approach is this one only using just naming the images by this By the size they need and then just choosing the right size and that's it really depends on the project Okay, so it's not there's not the best way it depends So, yeah, thanks. I was wondering about the art and the title tags How to use them best because I mean to show up in Google search and have it then you maybe would want the name of the photographer and everything inside but I think also for the Yeah, or what's the best practice now for showing that the title or yeah, what to use like art and title and For search but also then for the Aliyah or like that really depends on the on on the design actually because If it just shows under the image and it doesn't need any theming We just show that the title field from the image entity under the The image itself on the markup and that's all But if you have if we have some theming to do there like for example It has a background and it's over the image and it appears when you hover and so on We actually have to create like some fields if you also want there For example the year or you have more information than you have to create fields to create new modes and Do some theming on the Wondering really about the code and the accessibility and stuff or if you have like Screen readers and things and I read that it's not so good to use too much information in there and no actually The image itself it should actually have the markup in the in the in the tag I mean The EMG tag should have the alt attribute and the the title attribute and They don't have to be the same that you are showing I mean they have they should be the same text I mean the same the same value, but they don't have to be the markup itself I mean Drupalm gives you the control to to Make it appear twice So the also I was wondering if you have like photographer a website and you want on Google To search for the images and then you want the name of the photographer as well in there But for screen readers it would be annoying if on each image. I have like the same repetitive Yeah shot in Vienna, right? 2017 dadada, so I haven't faced in this situation Actually, and it would make sense to really use someone that Knows which parts are going to be read and how to Maybe hide for the screen readers that the duplication So I guess I will go to a someone that really knows about that before just launching the website for sure Anything else? Thank you for listening


This was my project for Ruby Summer of Code, and I must say that Ruby Summer of Code is one of the greatest things that can happen to any programmer. I learned really a lot. I worked with really experienced people that taught me a lot. I don't know if you recognize this guy. He is Carl Huda. Some people say that actually Carl Huda are two people, but that's just from our teaching. No, but seriously, I discussed with them the entire idea, and they worked on Rails, so they prepared the stuff. I didn't need to rewrite the entire Rails. I just worked over the APIs that they prepared, and just the volume was my secondary mentor, but he spent countless hours on helping me and discussing things, reviewing my commits. Yeah, very good. He very much helped me. And thanks to sponsors, because it could happen only because so many sponsors responded, but raised so much money for that. And getting back to multiple applications, I can say that multiple applications are applications that can be mounted in some other applications. So let's start with a short story. Let's say that your client comes in and he says that he needs a blog, and it needs to be integrated with your application. And users should be able to comment using their existing profiles, and you should be able to display some posts from that blog on the main page of the application, and you say that you can just write it in 15 minutes, because writing is about writing blogs in 15 minutes, but I would say that it will take a bit longer, probably, because you would have to write tests and maybe some comments moderation for file uploads, or other things that you would probably need. And maybe you could use existing blog software like Moffisto or Daigo or something like that, but if it needs to be integrated, you will run into problems, because you will have to somehow synchronize users Daigo, for example, or I don't know, use two databases or merge it. This will probably cause some problems. And you should ask yourself, is the blog covered business, or is it just an addition that maybe you could just take generic blog and mount it inside your application and don't care if it has all the features that you want. Maybe you can just stick with some generic software. And there are, of course, more examples that can be used as multiple applications, like CMS, for example, static pages, or forum, or file manager, or any other things like that. And it's nice, but how can you use it in a race? And I would ask if you are there, if you can use it now. And I can say that, yes, we can use it, but at the same time, I can say that it's not done as you would expect probably, because our goal was to run two race applications in one process. And unfortunately, it's hard. For example, if two applications needs to set values for some config values, you must choose which applications should win. Or if you have some billboards like session billboards or something like that, it should be run only once. So you would have to somehow say that some billboards should run only on the host application. And for example, if you load one application, how do you know if it's only a dependency, and other application will load it afterwards? Or is it a host application? And we don't know if it's really needed, because we could probably solve the problems, but if you think about that, when you need to do multiple applications, you would have to probably do some design decisions that are entirely different from standard application. So choosing only one way is much easier, and you probably should do that way rather than trying to do both. So how can we do it now? We can use engines, and probably you would think that using engines is not a good thing, because we have it from race to point one, I think, and these are plugins with controllers, right? Before we start our code, engines were a bit more powerful plugins, and right now in race 3.1, race will be almost as powerful as applications. So the only difference would be that you can't run engine standalone, you must mount it into other applications, but that's not an issue for me. So I extended engines by adding routes to engines, they now can have their own routes, middleware stack, so engines can now be run application, and they have plugins support, so you can add plugins just like in normal application. And of course there are new APIs that can handle communicating between engines. So these things are only available at edge version of race, so if you want to play with it, you should just clone it from GitHub, and the most important thing is mounting an engine. So here I just mount the block engine at slash block, so all the controllers from that engine are now available at slash block address. And the second important thing is that now you can isolate engine. So what do I mean by isolate? If you have, for example, engine like device, it's an authentication system, it should be shared with application because it is just an addition to application, but if you have something like block or forum, it should probably be treated as separate application and not share, for example, helpers and routes and stuff like that. So if you try to build a mounted application, you should use isolated engine, and we can isolate engine inside some namespace. So here I set isolate namespace block, and now the engine is isolated inside that namespace. And we need namespace for two reasons, because we want to avoid conflict if you have two comments model. Models, for example, in block and CMS, mounted applications. Without namespace, they will conflict and you will get nowhere. And the second thing is that we need to recognize if object belongs to engine. So here we have block post model, and we know that this instance variable post is from block engine. We can check it and we can do further things with it. So I will tell now about a couple of effects of isolation, and the first one is that in race 2, or even in race 3.0, if you had a controller, even if it was namespaced, it got all the application helpers. So you couldn't do something like isolated controller that will get only helpers from some namespace. And with isolated engine, you just have it. It has only routes from the engine, and it will have only helpers from the engine, from the namespace block. The second thing is that when controllers are namespaced, you normally would have to scope all the things inside routes. And with isolated engine, you don't have to do it, it is done automatically, so you don't have to write the code that is connected. And the next thing is avoiding the prefix, because it will be fine to write through the entire application to write block underscore something. So in shared engine, if you have block post, you will end up with names like block underscore post title, and you will have to use params block underscore post. And in isolated engine, we know that all the models and controllers are prefixes with that block underscore, so we can skip it, because we know how to do it. The same with paths. Normally, you would have to write block underscore post path, and in the isolated engine, you can write this post path, so it's much easier to do that. You don't have to write prefixes everywhere. And also with generators, know about namespaces. When you generate model, for example, in isolated engine, it will generate model inside namespace, and will automatically create migration with namespace table, so we don't have conflicts in database. And the next thing that is very important is a route, because if you have isolated application, it will have its own router, so here we have controller block post controller, so it's controller from our block engine. And if you want to use post path, we can do it like we normally do in regular application, but we can also call route from host application or some other engine by saying here main app dot root path, so it will get path from application router. And here the same, this is controller from application, and we can use route path as normally we would do, but if you want to get some route from engine, we can do block dot post path, and it will get route to our post path from block engine. And we can of course change it. We can say the model block engine has shiny block, and we could do now shiny block dot post path, so you can change it if it conflicts with something else or you just don't like the name or something. And chances are that you will need static assets, so you can do it in two ways. You can use config dot serve static assets, that will serve static assets by action dispatch starting, or you can copy assets to applications by doing create block install assets. You can do the same thing with migrations. You can do rate block install migrations, and you can copy all the migrations to applications directory, and you can do both things by saying create block install. And as you now know APIs, you probably wonder how to create an engine, and you can do it by saying race plug in U, give the name of the engine, and pass minus minus on table, and minus minus ejection. And I don't know if it's in current now, because as I said that human manager, but I don't really know if he does it already, so if it isn't on GitHub, it will be probably tomorrow, and after doing that, you can just, for example, generate scaffold post and run the server, and it will behave just like normal application. Just mounted some graphics, and I said that it's not possible to run engines standalone, so you need some application to run it inside, and it's done by creating dummy application test dummy. So when you use things like script-trade-server or script-trades-console, you just use the dummy application and the engine is mounted inside. And my work is pretty much finished, but we will need to battle-test the APIs, so if you are interested in the topic, you can just grab it from GitHub and try it. And I would like to be able to set some standards, like authentication and authorization, if we will use standards like, for example, we have now current user for almost all authentication systems, and if you would have similar APIs for other things, the chance is that if you take two mountable applications and mount it in other applications, and it will just work, it will be much bigger. And I would like to have some feedback, so if you have some complaints or if something doesn't work as you would expect, just message me on Twitter or on GitHub, and drop us on Twitter so you can follow me or message me or something, so we can talk about mountable applications or whatever else. That's all, thank you. You can go as long as you want. Do you want to take some questions? Yeah, so when you want to do questions, I don't think so. The engine that you need, which has its own database, will you be able to separate those databases? So when you do mountable applications, the question was about if you have an engine and it has a separate database, if an application has separate databases, what can you do? So if you develop a mountable application as an engine, the easiest way would be to just use one database. So if you use ActiveRecord, and mountable application is also ActiveRecord, all the tables will be namespaced, will be prefixed with, for example, block understore prefix, so the best way is to just run with one database. And if, for example, mountable application needs something like Mongo or your application needs like MySQL or something, you probably will not, you probably can't do it. If it's something that is completely separate and it doesn't need any tables from host application, it could work, but if you, for example, need to share user's table, it should be one database and one, probably one ORM, or maybe even two ORMs, but they should have one convention of tables. The last comment you made, let's say you share user model and you're relying on the hosting app to have some sort of user object. Is there a place where you can put an adapter? How do you handle that? Actually, it's her question, because I haven't done much engines because I haven't had time after creating these APIs, but probably the, because I said that designing application to be both standalone and mountable will be hard and this is one of the reasons that in standalone application you should have user model and in mountable you should use, you should use user model from host application and I think that the best way to do it is just some engines that I saw that did it already do it like either checking if there's user model and using it or making it easy to configure it so we just pass class name of whatever would be user model like for example device is straight engine it is not isolated application but it uses, you can just say what would be something, what would be the user model so I think that it would be the best way to just have some API to tell that our user model is this and maybe create some hooks so you can for example give code back to authenticate or to authorize something but it should be that way does that answer your question? yeah so thank you thank you


Oh Don't mind me. I was just out fighting some monsters. Yeah, somehow I got the master sword and monster hunter I don't know how that happens. Oh, I had a channel my inner link take out the monsters. Oh, man All right, so uh, catch my breath here. Hey There was one that almost came over here. All right, here's the thing we have a leak for monster hunter now Before we get to the leak, there is some real news involved here next week It has been announcers event happening on April 27th at 7 a.m. Pacific time You know 9 a.m. My time. I'm central time and that is for well Monster hunter they're doing an event. They're gonna talk about the 2.0 update in monster hunter rise And yeah, we're gonna get new details. I'm monster hunter Stories now here's the thing That's great. That's amazing news. That's a great way to start off this video But what if I were to tell you that I have additional information? What if I was able to tell you I've actually verified that where this information came from? What if I was able to tell you that there's now a person?  They've gotten everything, right? Well, not only did this 2.0 update confirmation. They're gonna be talking about next week Obviously already confirmed something that samus hunter did along with ace attorney stuff I have actually now talked to samus hunter behind the scenes and no I will not dive into the personal details and the additional information. I might know I mean I do know Because it's sensitive and I don't want to get anyone in trouble including samus hunter Let alone the people that he's in contact with but I was able to verify that samus hunter is getting his information From extremely legit places and that's really all I could say about it that being said today He decided to put up a bunch of leaks for monster hunter stories to that We're likely gonna be finding out next week and There's some of these actually he talked about back in March So we're gonna first talk about the March ones and then we're gonna talk about the new ones and all this stuff that we're gonna be Finding out because monster hunter stories to to be honest is something Stay I creeped out sometimes Monsters are just trying to overtake the set. Let's just say that there are times when I am not Sure if I really enjoy monster hunter, I've been having fun with monster hunter rise But everything about the game isn't always perfect It's not always exactly what I want it to be.  I have dabbled in the original monster hunter stories This is the second one and I think that this game could actually be a bigger deal for me And probably a bigger deal for a lot of you guys So let's get into some of the stuff he talked about back in March Let's get into the new stuff he's talking about now and yeah, I don't consider this rumors anymore This is just straight up information being leaked. So let's just get into it now I kind of have like some stuff like blacked out and everything Some stuff I can talk about some stuff I can't so first off he says if you want to know more about monster hunter stories to you can control the characters in Battle with an active monster with each character and you can co-op with an NPC And it's possible that there's a PvP mode in the game around 90 monsters as well in the base game So that's just some basic information. I obviously will see this stuff next week I'm pretty excited about that. He goes on to say also monsters are planned for monster hunter world including Nurgurante Legania Toby Kodachi Pale Luma Puke Bazageis Kulav Taurav So those are like some of the ones that are coming over from monster hunter world again. I probably butchered all those pronunciations I'm not really good at that But it is what it is next up. He says there's gonna be a customizable protagonist There's also gonna be 800 plus pieces of equipment six areas with a base in each area and dungeons across the region There's gonna be free and paid DLC after launch So that's all stuff that you talked about back in March And then here's the stuff that he talked about today in addition to that so The main villages of the games and the key story events So again spoilers here if you don't want to know the main villages And you don't want to know which story which spoiler event happens in which city But we got Mahana village is where the last egg is gonna be at Ruto village. Haha. Is that a shout out to Zelda there were the hatch con village Or the hatches at sorry then we have con village Which is where the bond is at and then Lelucian and new Fellinia takes off the village of legends the truth the sealed lands The sealed lands is the ending of the game So yeah, that's that's what we we now know and we'll obviously get more details about likely next week Maybe not the ending for say maybe the ending comes later, but I'm just really Some people aren't really into leaks right like when we talk about a lot of rumors I think there's a huge amount of like a huge crowd out there that doesn't want rumors to be real because they don't want information to Actually be leaked but at the same point. I like what samus hunter does with the stuff he leaks He doesn't leak anything. That's critical as I said I've talked to him behind the scenes and I now know a few things that I can't talk about Because these are things that he won't want to bring up because he doesn't want to really spoil things that bad Yeah, we talked about all these events happened about what are the events? How do you do the events? What's the exciting part? What are these villagers look like none of that's here? So it doesn't really take away the excitement I have for monster stories to so I guess thank you so much Samus hunter and thank you for contacting me and being able to verify some things and Hopefully you guys enjoy these leaks and you turn into the event next week You know, we will be live stream reacting to that event Maybe even small tease of what we have going on for our E3 set. Otherwise folks. Thank you so much for tuning in I gotta go take care of this monster. Hey giveaway. We have a giveaway going on hundred dollar cash money


All right friends, so here is a question on wave optics chapter. So you can see on your screen, let's read the question first. Consider an arrangement shown in the figure by some mechanism the separation between the slit S3 and S4 can be changed. So you can now make out that you know this is it's a little bit different from the routine questions of Young's Divergent Experiment. Here we have four slits, two at one end and two at a distance D from it. And then there is a point P on the common perpendicular bisector, we need to find the intensity measured at point P. Let's assume that intensity to start with here it is given as I0. So intensity at S1 and intensity at S2 is given let us say I0. And we need to find what is the maximum possible intensity at point P. Now if you visualize it one by one, you can see that point P is a location of central maxima for S3 and S4 slits. So for S3 and S4, P is a central maxima. So if at S3 intensity is I1, due to symmetry intensity at S4 will also be I1. So intensity at point P should be equal to four times of I1. Now if I change the value of Z, intensity I1 will change. Why it is like that? Because if you see here my dear friends that at slit S3, both the waves from S1 and S2 will reach and before coming out from S3 they will have an interference themselves. So depending on what kind of interference it is constructive, destructive, partially constructive, the intensity I1 will vary. Now in order to get the maximum possible intensity at point P, I need to have maximum possible intensity at I1. At S3 I need to have maximum possible intensity. So more is the value of I1, more is the value of IP finally. So we know that intensity at any location is given as four times I0 cos square 5 by 2. So I am talking about intensity in the plane of S3 S4, 5 by 2. So let us say that this intensity I am trying to find out at location of slit S3. So this will be equal to I1 only. Now if I change the value of Z, I can change the value of 5, the phase difference. So for a particular position, let us say for a particular value of Z, there might be constructive interference going on at I1. So intensity I1 will become equal to 4 I0. Wherever there is a constructive interference going on, the value of cos square 5 by 2 will become equal to 1. So I1 will become equal to 4 I0. So intensity at point P will become what? Intensity at point P will become 4 into 4 times I0. So at point P I can essentially get 16 times the intensity with which I started with. So like this you have to do this particular question. All right friends, so here is a question on wave optics. Let us see what is this about. So it refers to a figure. You can see here what is going on. The two slits S1, S2 plays symmetrically around the center line. I are illuminated by monochromatic light of wavelength lambda. The separation between the slits is small d. So the light transmitted by the slit falls on the screen, plays at a distance capital d from the slits. The slit S3 is at a center line and slit S4 is at a distance of Z from S3. So another screen is placed at a further distance capital D from sigma 1. So this is let us say sigma 1 and this is sigma 2. Find the ratio of maximum to minimum intensity observed on sigma 2 if Z is equal to this, this and that. So as a function of Z, basically I need to find what is the intensity on sigma 2. So let us try to see, first of all you need to understand that if you just look at S3, S4 and this screen Z2 or sigma 2, you will see that it is like a Young's Diversite experiment. But before going to screen 2, there will be an interference that will happen on sigma 1. So even sigma 1 if you look at with respect to S1 and S2 is a Young's Diversite experiment. So there will be let us say one wave coming from S1 that will interfere with S2 at location of S4. Similarly, over here there will be an interference happening. Now S3 is a location of central maximum, isn't it? So at S3, the intensity will be equal to let us call it as I3 that will be equal to 4 times I0 because that is a location of central maximum. Now at S4, the path difference between the two waves which I am talking about this wave and that wave that will be equal to Z small d by capital D. So this is the path difference. So the phase difference will be what? Phase difference if I write phi will be equal to 2 pi by lambda times delta x that will be equal to Z d by capital D. So now using the formula, I can get intensity where the slit 4 is equal to 4 times I0 cos square phi. So depending on different values of Z, you will get different values of phi. So this A, B, C if you put the values one by one, you can get the intensity at 4. So I have intensity at 3. Let us call it as equation 1 and this as equation number 2. And there might be the case that at 4, destructive interference happens. So if at S4, destructive interference happens, then only one wave comes out from S3. So there is no scenario of interference. So whatever intensity of S3 will be the intensity everywhere on screen sigma 2. But if suppose it is not 0, then I have to use this formula. So this will be equal to I3 plus I4 plus 2 times under root I3 I4 cos square, let us say further phase difference will be theta. So theta by 2. Now I3 and I4 you can get from here. And since maximum and minimum values are only r's, so I can say that I max is when cos square theta by 2 will be equal to plus 1. So I max will be equal to root of I3 plus root of I4. And I minimum will be equal to sorry root of I3 plus root of I4 the whole square. And here I minimum will be root I3 minus root I4 the whole square. You can treat I3 as root I3 whole square. So when this becomes minus 1, it becomes root I3 whole square plus root I4 whole square minus 2 I3 I4, which is nothing but root I3 minus root I4 whole square. So like this you can get the minimum and maximum values and just substitute the values of z, you will get the exact values. So that's it with respect to this particular question. I hope you have learned something today. And in case you have any doubts, feel free to get in touch with us. Thank you.