Hello everybody, it's Iwa from Zubitiger here again, and today I would like to share with you my another project for Mcgarden. Here you can see all informations about this amazing shop, and I'm coming to show you my project from Her new digital paper collection, and it's called Raw Squartz. I'm going to show you This is good and create paper, and it's really amazing. It's there's so many beautiful images vintage images, and it's so many adverts beautiful roses and amazing signs I've got two sheets of those and I already used one and I'm going to show you now Where I use it? I will show you first box, which I create for my journal inside. This is altered Martini box, you know that drink Martini, I think it's I'm not sure what is it? Is it cognac or what is it? But Martini drink alcohol Has beautiful red box, and I altered it to gold and I used Butterfly from that previous collection I used it was Chantilly, Chantilly cream collection, and there was this beautiful butterfly, and I use this It's a metal piece metal Metal, I don't know how say that, metal person Like it's small butterfly and I create few Layouts from roses and from gears from butterflies. I used stencils And here you can see how I used few of those Goods and creates Here I made kind of metal frame around this beautiful vintage image, and I really like this one It's beautiful Here small tags on that chain You can see it's nice Vintage style and here I create it's it was there this Alphonse mocha Advert in this size, so I made small journal here. It's really very small And I used like closure as you can see this one It's from my old bra I don't know how to explain But women will know where there are used those pieces. I Don't know how to explain it. I'm sorry, but it's from bra this one. So I use it like closure and I made very small really very very small Journal with few those amazing images of Vintage woman and vintage lady ladies here you can see small images So this is that side here I made this little Bottle and I put inside that rose So this is box For journal, which I've got inside And I think I made it a little bit bigger than that box is so hopefully I will get it outside very easy here is my journal and my personal Personal name of this journal is secret garden because I made it like it was Some kind of secret of some young lady who wants to be hide there and who wants to Made the hair Dream hair dreams over there in that garden So this is my journal This is color of my journal This is backside.  It's really gorgeous. Oh, I'm sorry Out of you So you can buy it there. Also, you can buy that those metal pieces and that Kind of flower under that and I just put two gears Between those layers and I think it looks really great and I made those corners from How to say that It's that I will show you and I won't have a look Of course This material Sorry for that noise. You have to keep it wrap To protect it from dry. I made it From this And pasta de Molera model modeling paste Terakota Terakota is that color which I used over my Texture so it was Terakota and this is some kind of paste which is dry Air dry, so it's brilliant for working. I made those corners It's perfect me. I'm gonna wrap it again Sorry for those my views. This is my journal and I Like to use my dyes, but then I'm so So sad that I have to put To bin that negative of my dyes, so I decided to find out some way how I can use those negatives and If you know Has this die I Like to use those it's amazing I'm not sure tuck tuck and book plates. It's called this This die Here is some number Six five six nine three eight. It's number of this and it's called tuck and book plates So I use the negative of this one. I cut out I think for for same cards Which has same size as this this die and I use it here Here you can see half of that die Here is that other half So I create my journal using those negatives and I made pockets out of that Here is my first pocket Here is small tuck. It's from Max collection as well from row squirts and I really like this collection. It's very soft It's very romantic. I made here Small pocket and here is bigger pocket and I made kind of Paperback from my tissue paper It's nothing inside yet, and I was thinking like gardeners has many those small bucks and inside is seeds for their Flowers and vegetable. So I made it like this This is another tuck you can cut out from that From that paper could then create it's there All those images are from this beautiful collection. I'm gonna show you Those signs are there as well And this one it's a beautiful image. You can use it on some cards like a birthday wish Something like this. It's really very soft very romantic So this is my first pocket and I used a acetate Acetate pages between this negative die. It's acetate and then Paper from this beautiful collection here, you can see how beautiful flowers are there So it's few stencils and this is from the collection as well It's really perfect and I used my stumps and I create like gate Like garden gate, and I create this This kind of tuck Here Here I used another image from this beautiful collection like the export and I include there some time chart for gardeners When they have to seeds Put their seeds to ground and here I made pockets and I made small tucks It's that other half of that negatives and it's another pocket here behind this metal piece For some small notes and then I make This pocket with belief It's kind of garden window. I Will put it inside later Sorry, and here is another pocket. This is paper from this amazing collection as well Hopefully you will see how beautiful Texture beautiful images I used few of my stumps with flowers And with some flower design. I Think every pages are stamped This is another I used only those small tucks with note paper and with Book papers Like this, and I really stumped. I think every single pages with some With some garden flower stumps. This is another page here. You can see how beautiful roses are there It's very soft romantic paper, and I use those dies and some stump Again here is large pocket for tuck And I stump it again First I used that distress paint then I went over it with distress Ink and I stump it with this flower and here you can see another piece of Paper from this beautiful collection Here is another tag All those are include in that could then create Paper Here you can see beautiful butterfly which you can cut out from that couldn't create. I think I use that smaller size of that couldn't create and here you can see that butterfly so you can Fussy cut out and you can call it Which color you want to use here you can see in bigger size all those images I used in that small Notebook and Here you can see I used This stock for this smaller in that small arc this stock. I just fussy cut all those Leaves and I just move it under this stock This is a really beautiful image It's that couldn't create Here is my tag here are another images from this beautiful collection and again I made pocket here where it can be Kept some keep some secrets Later inside some stumps with flowers with Some old castle. I'm not sure if you can see that My camera is not zooming too much today Here are some flowers Come on Like this Zoom please. I'm sorry for this So as you can see I stump I think every single pages with some flowers Here a small Tuck, which is include in that couldn't create its admit one Here I made another tissue back This is from the collection as well and here I made pocket behind this You can open it and it's there back back for seeds or for some letters So it's this one and this is from the collection as well under that it's that a rose paper and I went over it with black distress ink and I use that brick stencil This is from that row from that collection as well. This beautiful butterfly I Fussy cow from that's collection and I use my metal metal butterfly like declaration. Here is another piece of that negative dice and some another Tuck over here And I put there just some note paper in another stumps Another beautiful image Flower image and it's pocket here and pocket here And I put something inside Come on Here is it another flower image. It's really amazing to use it for some Garden collection or garden journal because it has so many amazing flowers Sorry, sorry, it's shining You can see how beautiful. This is I think Lillia Not sure how to say that in English Lillia probably Here is stump from Indigo Indigo stumps. It is from same collection as well Here another tax from this beautiful collection. It's so shiny today. I really like those colors Here very vintage postcard with roses from same collection And here another I'm sorry for that shining You can see Beautiful beautiful. Yeah, here you can see all those dice has pocket behind this metal piece This is from same collection It's so shiny today It's like a small Bank note note bank note bank check Here I try to No tea died. I tried to died my papers in balsamic balsamic manager. It was A little bit crazy, but I like it It was changing all those colors Very crazy way, but I like this this one and I've got only one Those others was just normal probably this paper has something inside and I really like this one It's so crazy another stump image and here another my tag You can see sign love From same collection. You can see that. Can you love from same collection and I put some? Gem on the end and again I used Distress pane Which stands on the background then I went over it with distress ink black distress ink and then I stamp it With that flower. I'm not sure if you can see that flower. It's just one flower here So this is my another tag and here is last page from my garden secret garden journal more pictures and informations will be on my On my web on my blog not web So if you will be interested to see A little bit better all those amazing papers here, you can see it's with very lovely strips So I used my stencils to make This background and I use Stencil with that ivory Ivory I think it's called that Plant and again some flowers and this is Yeah, how you call it this one? Rubons rubons I think rubons And I've got it for a very long time at home. It was so hard to took it out from that to rub it on this paper from that foil From that acetate it was so hard So this is my garden journal. I really like this cover I don't know why I make it so old, but I really like it It looks like uh some pirates diary. Maybe I will do some So this is my project for today. I hope you like it. I really enjoy to do this So this is my box With all those beautiful beautiful vintage images I like how they look in metal frame Those papers it's brilliant like Like necklace it will be brilliant This image special this image. It's beautiful And all those small images it's so shiny that I am so sorry I will put some more pictures on my blog. Hopefully you will see that better on my blog What I made so this is my project for today I hope you like it. I really enjoy it and I have to say that I love this this this gem. It's amazing It looks really brilliant. I'm gonna zoom it one more Once more so you can see How beautiful gem it's like pink with a little bit Purple Just a little bit purple and a very beautiful pink. I'm not too much in pink color, but this pink. It's nice It's very soft. It's not too bright It's really beautiful. So all those metal pieces with that Pardon me With that amazing gem you can buy in a max garden Shop I'm gonna show you once again Pardon me Her informations It's here all those informations will be in the description Box down below. I will try to put their links for all these Metal pieces and for that collection as well. Hopefully I will do it. I will do it this time Great. It's like last time. I'm a little bit lost in that Internet thing. So I'm horrible with this one. So thank you so much for watching. I hope you Find some some inspiration Thank you so much for amazing comments for all your support And see you next time. Have a beautiful day. Bye


Hi there my friend and friends. Most people come up with simple ways to help them decide when to pick between Flexbox and Grid, often relying on the 1D vs 2D in ways that I don't really think should apply, and this often leads to one of the layout issues that I see most often on my Discord server where people are often trying to force Flexbox to do something that would be easy to do with Grid, or use Grid for something that would be simple to do with Flexbox. So I have 5 layouts that I'm going to present to you, and I'm going to let you know what I'd pick for each one of them and why I would pick that, but for a little bit of fun, you should probably pause before I reveal my answer to see if you would pick the same thing as me or not. And while you might disagree with me on some of these, I also asked these same questions to my Discord community a few weeks ago, and I've got the breakdown of what my community used for each one of them to help get a general consensus of what the most popular answer for all of these is as well. And if you do want to follow along, what I'd actually suggest to do is to come to this site right here, the link for it will be in the description, because this is where all the challenges are, and there's the challenge that says what you need to do, and then you can run the code pen, and if you want to edit it, you just click the edit on code pen button, and you go and you try and complete the challenge. And all of them should take you probably pretty fast. The first two are probably, I don't know, two lines of code that you might need to complete them. And as you go through, it gets a little bit more complex. So if you want, hit pause and go and do all of the five challenges and then come back. Or if you'd rather just see what the challenge is, maybe pause it before I give the solution and then we can go from there. And as you would expect, most of the time you would start with challenge number one. But there's a reason I'm going to start with the second one, then we'll move up to the first one. And so the idea with this one is you need the meta tags to go next to one another. So if we go and take a look at what I mean by that is here, we have these tags that are over here. And basically, we need to do something to get them all to sort of go up one next to the other instead. And the reason actually that I decided to do this one first is because every single person in my discord community had the same answer. I think it was 43 people in total there. And I completely agree with them that this is the right place to use a display of flex. And when we first do that, you can see it does work. And with flex, you probably want to add in a little gap there. I'm going to add a gap of one rem just to make it a little bit bigger. And everything works pretty well. And I'm pretty happy with that. The other advantage with flex box is if we did, you know, we squish it down and we do run out of room that we can just throw a flex wrap of wrap on there. And then instead of getting all sort of weird and squishy, they will just wrap underneath. And it looks perfectly fine. One thing if you are doing a wrap, you'll notice that even though my gap is the same in both directions, I probably want the top one to be a lot smaller than the one on the left and the right just because it makes it look a little bit more balanced, maybe 0.25 is a little bit small. But we can do something like that. And it looks pretty good. And I'm happy with that. And this is what flex box is really good at because each one of these, even if email is a short word, free text and options is a long word, they just sort of become the length or the size that they need to become. And flex box is a perfect solution for this type of thing. But now things get a little bit more contentious as we move into the next one here, which is going to be the first one that I mentioned. And so for this one, it's fairly simple. All we wanted to do was make it so this text would go next to the image. That's it. So if we look here, I have this product class there. And I have an image. And then I have a div. And I'm guessing at this point you already have an idea of what you want to do. And I'll share first what my Discord community had, which was almost everybody doing a display of flex and probably throwing a gap on there as well. Just to space them out because look at that, it works perfectly fine. Now there were 11.9% of the respondents. So basically 12% of people, which wasn't too many, but some people did go with grid instead. And I'm actually sort of in agreement with the minority here. The reason for that is, I mean, this works fine if you chose this, it's, you know, so did 90% almost of everyone else who did this. And most people watching are probably going to say flex as well. But look at this, we get run into and I didn't, I don't know, did I mention that in the challenge? Let's just go look here. Yeah, it's a simple one. I didn't really go into details on this. But it's a potential problem where the image will actually stretch like this, which is kind of awkward. And again, most people aren't going on this size of viewport. So if nobody noticed that, it's completely fine. Now to fix that, it is just one line of code. We can just do any line items of start. And actually code pin gets mad at me if I do that. So we'll do a flex start so I don't get an error and it actually works. And that just means it won't actually stretch because now the default behavior is no longer set to stretch. So everything there is fine. The reason I sort of like doing this with grid though is if we throw this as a display of grid, you do need another line here. So we need a grid template columns. And it's one thing that's with grid that is kind of annoying, I'll admit is the properties are kind of long, it creates long declarations. But let's we can do that. And then we could just start with an auto auto. And that would basically give us exactly what we had with the flex box. It just we just need two columns, anything you could put here, basically to get two columns, I can do a one F R here as well. So it's like the default space, plus then I can get that on the side. The one reason that I sort of prefer or I'll make an argument for grid on this one is we can control the size of the image, but I can just buy these grid template columns. Now to do that is something that wasn't in my CSS to start with, but it's a reset that you see on basically every single project, which is you would have an image and that image, you know, the max width is 100%. This is an every CSS file ever maybe not quite, but you know what I mean. And often you'll see that combined with a display of block, though it's not required for what I want to look at here. But as long as you have a max width 100% of your images, I could say this is, you know, five pixels, and we're going to get a very small icon. Maybe that was a little exaggerated, but 50 would work better. But basically, I can control exactly how big that's going to be, rather than having to like say, you know, if I was doing this with Flexbox, then I have to go and do like my product. And I don't think that even as a class. So I might do product image that way and set a size on this. And there's nothing wrong with that. It's completely fine. I just sort of like that I can do it just by saying that column is this size or 75 or whatever I need to be in, you know, you could have different, different values come in here and it's just going to work. And I don't know for me, it's a really small difference. If you went with Flexbox, it's probably a little bit faster. And it worked for the most part. It's easy enough to fix that stretching thing. So not a problem. But I just wanted to sort of mention a couple of the benefits or potential benefits that could come with grid along the way as well there. So yeah, there we go. That was for challenge number one, we've already talked about two. So let's move on to number three for the third one. This was one of the ones where I said you could write code outside of the initial selectors. And basically, we have some elements that are there. And at large screens, I want this at small screens, I want this and at no point did I want there to be like a third, you know, two columns with one underneath, we want it to be three. And then they all just stack like this with no in between. And I did that on purpose because that sort of opens the door for grid or flex to come in. And I honestly thought this one would have a very even divide between flex and grid or maybe even lean more towards Flexbox. But I'm going to assume you have an answer at this point. But grid actually was like the absolute dominator in this. I had only 16.7% of people in my discord community chose to use Flexbox here, which blows my mind because this is flex box. If you want to do this without a media queries, actually the easier solution and I never you could use media queries if you want.  And then that should give us some columns. And then I'm going to say, Oh, we already had the gap. I sort of I assumed you were doing display flex display grid. It gives us that. And then we could just come in and say it's a flex direction of column. So it creates rows. And then we just come in with our media min width. I'm going to do 600 pixels. Doesn't really matter where this happens at. And then we do a flex. Whoops. We do a featured products. And we do our flex direction there, right? And we just change it over to row. Nice and simple. And I thought a lot of people were going to do this. Now, maybe one of the reasons people didn't do this, if we get small enough, I did that too small. Let's make this 800 instead. One of the reasons people maybe people didn't do this. And even that's a little bit tight, but that's fine. It's doing sort of what we want. We have three columns, it goes down to one column, and everything is working completely fine. I should probably move my head down there. So we see it a little better. So yeah, three columns, one column, and it works exactly like how I asked. So I'm still surprised more people didn't go the flex box route. Now, one thing with this, if you did do flex, you probably would have to come in and do something like this with a flex of one. You need something to select each one of those cards. Just see how it actually shifted things a little bit. Just because we need to make sure they're all the same size. And this is always, for me, the downside of using flex box. And maybe the results from my discord community are a little bit a bias, because it's all people who watch me, and they've been hearing me beat the drum of if you need even columns, just use grid. Because this is something extra you often need to do with flex box to actually get even columns. Whereas if I did this with grid instead, we can take this off. Obviously, this is doing nothing now. But this is also doing nothing. But here they're stacking. And then I could just come here and say I have grid template columns of repeat three, one FR. So then we get three equal columns at my larger screen sizes and they go underneath. And that works perfectly fine. So both are fine. I just find this one's a little bit easier. So I do agree in general that I tend to prefer the grid solution here over the flex box solution. But if you wanted to be clever, we could do this without a media query. I think there's actually a way somebody posted in the chat for this that there's a way that you can do this with grid. But I was having trouble wrapping my mind around it, though it's a similar thing than what we're going to do here with flex box. So just bear with me and I got this from Hayden Pickering. Actually, I don't remember if it's Hayden Pickering or if it's Hayden and Andy Bell, who did it on every layout. But the idea here is you do a display of flex and it gets a little funky. I won't lie. But basically, this is what we need. And of course, it's flex. I'm going to do a flex wrap or I guess not, of course, but we're going to do a flex wrap of wrap, which lets that code pen update here. And so this is sort of what I didn't want, right? I didn't want something that would be by itself down here on the bottom. But then we can come in and we can choose those again featured products. And we're going to choose all of them. And on this, the fun part is we do a flex grow of one, which is just going to make them stretch and become really big. And then we get to the complicated kind of weird part where we're going to use a flex basis in a funky way. And for this, we're going to need a calc. And basically, we sort of need their size to all of a sudden switch from a small number to a big number. So you have to choose what that small number is going to be for their size.  And I've found that with smaller numbers, sometimes it falls apart. Maybe there's some adaptations you can do to make it work. But we're going to do 500 pixels minus 100% times 999. And I've gone into more detail on this in a previous video. So I'm not going to deep, deep dive how this works. But basically, and we do need the parentheses like this here, because the order of operations in CSS. But I think, let's see, oh, it's not working. See the small numbers? Sometimes it doesn't work. Let's try a bigger number on there. And actually, we had it at about 800 before. So we'll stick with that 800. And this 800 will act as our breakpoint. So we'll see, look at that, exactly like we had before, where it's happening at around 800 pixels. And what you could do here is you could just come in and say breakpoint is 800, 800 pixels. Because this is like if somebody came across this, they'd just be utterly confused. But if you do it with a custom property, it's a little bit more, you know, you can understand what you need to change if you want to change the breakpoint, which is kind of good. And it goes back to that. And basically what this is doing is we have this really big number here minus 100% to explain how this works. I've done another video that I'll put a card to popping up that goes into more detail where I actually figured it out. So if the breakpoint here is smaller than 100%, this becomes a negative value. And as soon as that becomes a negative value, it breaks flex basis because that can't be a negative value. And then when we're at the larger screen sizes, the flex basis can kick in and it comes out to a large number. And then this magic works. And that's the part that sort of confuses me is when it does work. But anyway, it does. And yeah, it's still one of those things that rock my rain route, but you don't need a media query, which some people really like. And so there you go. And the advantage of it not needing a media query is like right now it's based on the viewport. But I could take this and put it into a container. And it's going to be based on the container size. Or if I put it in a sidebar, it's based on the sidebar size and it becomes much more reusable. Now we have container queries. So maybe you don't need to do this, you could use a container query instead, but support for it's not perfect yet. So this is sort of like a container query with better support. That's just pushing flexbox to its limits a little bit. But I would probably use grid if I was going to choose a solution to that one. So a little bit more complicated in the end maybe than you were expecting. But it's cool that we can get it to work. Challenge number four. Once again, we can add a code outside of our selector and we want something a little bit more dynamic. This one, the results surprise me. Because the idea, let's go back to here. I want this at large screens, this at medium screens, and this at small screens. So this time we just get it to work. And I didn't really give any extra information. We go from three columns to two columns to one column. And that was it. That was the only guidelines. And so you might have an idea of how you do this right now. And I thought that everybody was going to have the same answer in Discord. Actually, this is the one that I thought everyone would use the same approach. And that approach would have been with grid. There was actually two dissenters, though, that went the flexbox group. And they did something with flexbox. And so let's start with the flexbox solution, or one of them. So I just actually copied the code from the person who did this one. Because it's sort of how you have to approach it. There might be a little bit of optimization that could come into this, or you could really push the limits. And you can see it's a very small zone there where we have this little break where, but it does what I asked, because I didn't say what break points we should be using. But we have the three columns, it goes down to two columns, and then it goes down to one column at the end. It's perfect.  And I'm curious if we needed to do the max width on there. I don't know. That's why. Right, right, right. So this is really the reason I thought everyone would go with grid is because if you don't do that, you run into this problem. And this is potentially a good layout to have. This might be something you need to do. And if you do need to do this, you 100% want to use a flexbox grid to do this type of thing, especially if it's a more dynamic one like we have here, where the number of columns could potentially change.  But grid just makes this so easy to do. So to do it with grid, all we have to do is a display of grid, throw a gap on there. And then we just do a grid template columns, especially because I didn't give any specific breakpoints for any of this, where we do a grid template columns. And this is the weird one where it's an auto fit.  So it's auto fit. And then we have to do a min max. And remember, I said grid can give you long, long answers here are long declarations. So the min max is what's the smallest the element can get or the smallest the column can get in our element is inside that column. So let's just say it's going to be 300 pixels, and then we'll do a one FR. So that's the smallest, that's the biggest one of our just means take up all the available space. Everything is perfect.  And that's it. The reason we don't have more is because I do have a container wrapper on this that's preventing the content from getting wider. If not, it would actually make a fourth and fifth column. But with how we have this setup, this works perfectly fine. And for this type of layout grid is just perfect. Right. So I'm super happy with that. I love showing this just because it's great. The one issue that you can get with this is if you need bigger ones here, let's say we do 400, you could potentially run into some overflow issues where I'm getting some overflow going on right there. And if you ever want to prevent that, it looks a bit funny. But what you do is you put a min function inside of here. And one of the two values in your min function will just be 100%. And the other one stays what you had. And this looks really funny. But you can see now I have no overflow issues and it works perfectly fine. Just because the smaller number now is the smaller value between 400 or 100%. So if we're larger than 400 pixels, then it's going to use 400 because it has to choose the smaller of these two. But if ever it does not have enough room and it's getting smaller and smaller and smaller, well, then 100% is actually smaller than 400. And so they will continue to squish and you don't run into any overflow issues. So just a nice little solution there. And this one definitely grid to me is the right way to go. And as we saw around 300 does the trick nicely for that one. And now we get into the fifth challenge. And I think the fifth challenge was the one where I was expecting the most divergence. Or no, I said that already. The fifth challenge was when I guess that had the most potential for divergence, maybe the third one definitely I thought would be a lot. I actually I wasn't expecting divergence. I was just expecting the third one for everyone to use Flexbox where I wasn't sure the fifth one was probably the one where I wasn't sure what people would do. I just had no idea. So this one we wanted a layout that looked like this. That's it. Look at what we had in our markup in a second. The main rule for this is the content had to be vertically centered and the button had to fill as much of the horizontal width as in the picture below. So you can see like it doesn't go outside, but it just it's a full width button. That's basically it. This one does not have to be responsive. I meant in terms of like there's no breakpoint. So we don't need them to stack. I just wanted to columns all the time because I didn't want to get into the the nitty gritty of this one. And for this one, yeah, I'm curious what you would think. Definitely leave a comment down below for this one to say, you know, just say challenge five. I did this because I would like to know because if I look now at my survey results challenge five I had 19% using Flexbox had 66.7% using grid. And you'll notice those don't add up to 100% because I had 14.3% of people who broke the rules because in my discord I was very clear that you should only use one or the other. So I think that was five or six people who use both instead of using one or the other. And what I guess confused me a little bit about the idea of using both is let's if I come on my product here is that people that used both used it the other way around then I would expect. So what I mean by that is like here I have this image that's inside product and then I have a div with my content in there, right? So I would have expected most people to say that the product is a display flex and then use grid inside of that maybe. But what I found a lot of people doing is the opposite, which is kind of weird. So we can throw a display of flex here if we're going to use both that does that. Oh, maybe that's why. Maybe they did the display of flex and then they got on even columns like we're getting right now. So they said, you know what, I'm going to do a display grid with a grid template columns of let's just say 1fr, 1fr or it could be whatever you need here to be honest. But I guess maybe that's what started it off. And then for whatever reason, I guess people vertically centering just default to going in with flex box, but I just find like if I did my product product content, then we do a display of flex on here, what happens is they go like that. And then I have to change my flex direction. And we do column. And then once I've changed my flex direction, I can do an align item. No, justify content because I changed my direction, justify content of center. And let's just add some padding of 1rem, I think I put on that for the original one. And that doesn't work. Do I need the height 100% on there as well? There we go. Anyway, we start getting there. With that, of course, I could also do a gap of 1rem. I guess because it's not stretching, I would have, oh, because I know grid it should just whatever it doesn't matter. I have to do all that to get this in the middle, just like I had in my example. So, you know, it works, you can get there. But for me, any time that I do a display flex and then a flex direction column, that's just like my red bell of going, well, instead of doing that, unless I really need like some flexi box thing that it's good at. But if I'm changing the flex direction, and I don't need it to ever go back and I need to take advantage flex box, that just means let's just use grid, right? And then we can take these all off. And then I can do a place, let's just do a line content, I think, center. No, a line items center? Is that one also need the height one? Look at that. I created this challenge. And I still, oh, so then it would be an aligned content of center. Perfect. I'm surprised that this isn't stretching the whole height. Maybe I did something here that was preventing it doesn't really matter. So we still need the height 100% either way, or I muck something up along the way here. I'm going through on this. But, you know, instead, instead of a display of flex and then changing the flex direction, if I can just do it with my grid, it's going to have that same the button is going to go all the way across either way. I just find that so much easier to do. So yeah, I like using grid, if that's all I need right there. So these were all sort of like some fun interesting challenges. It shows you that sometimes flexbox and grid can both get you to the same result. And sometimes there's not a wrong answer for either one. But I really do think that each one has its strong suits and is better at certain things than others. I like equating it to wearing the right pair of shoes. Like if I'm going to go play soccer, I'm going to put some cleats on if I'm going to the office, I'll wear some dress shoes, and I wouldn't want you to mix those up. You don't want to wear cleats to the office, or people will look at you a little strange. Not to mention it would be kind of awkward and you definitely wouldn't want to wear your dress shoes to go play soccer. And so, you know, they both can get the job done, but they're not going to be the best at it as possible. And often it is the same when we're dealing with flexbox and grid.  And hopefully you agreed with me on everything. But again, if you disagreed, a few of these could definitely go either way. But often we're using these for bigger designs and layouts and other stuff as well. And if you'd like some design patterns that you can use both flexbox and grid for, I've looked at five different ones that don't actually need media queries. A little bit similar to what we were doing before, but a bit simpler as well than that strange one that we were looking at there. And if you'd like to explore some design patterns using flexbox and grid, a little bit of inspiration from some of the ones we looked at here. I do have a video that looks at five different ones, none of them which use media queries and they all just work really, really well. And you can find that video right here for your viewing pleasure. And with that, I would like to thank my enablers of awesome web on demand, Andrew, Simon, Tim and Johnny, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.


The proposed methodology is based on the use of the Lambert W function to transform the series resistance equation into an explicit expression. It can be used to analyze the performance of commercial solar panels under various levels of irradiation and temperature. The results obtained are consistent with those obtained by other methods, but they require less data and can be easily implemented by smaller scale users. This article was authored by Javier Kubas, Santiago Pondado, and Carlos de Manuel.


Jerry of the circus Grayson, how they treat me around here, even bumps Doesn't seem to hurt you much Aw gee, here comes a pie Apple Am I hungry? I never saw so much food They certainly feed you well around this place, don't they? They sure do That's a good way to keep performers happy We have to keep our animals happy in the same way You haven't seen Jason's cats yet, have you, Mr. Grayson? No, I haven't I'd like to I'm glad to take you around after lunch if you've got time Sure thing Then I'll have to be running or else my clients will think I'm neglecting them But you've all been mighty nice to me this morning Wish I could return it in some way Say, just a minute I've got an idea What? I'm engaged to the grandest girl in the world And can she make spaghetti? Why don't you all come around to my place after the show tonight And we'll have a party Well, that sounds mighty nice But it seems to me it's kind of a lot to ask of a girl who doesn't even know it She'd love to do it She was heartbroken because she couldn't go to the show with me yesterday afternoon But she'd be tickled to death to meet you all personally She'd sure be fun Fungetti Golly, sounds swell Oh, there you go, thinking of food again, Jerry Well, what about it, folks? We'd love to have you Don't you think your girl would rather catch the show? No, I'm sure she'd much rather meet you all Seems like a lot of work, but if you're bound to do it, I'm sure I'd enjoy coming And ask Mr. Randall, too I'm sorry he had to leave early He's always jumping up for meals to go and take care of something or other He said something about having to see Johnny Oh, you mean the old clown who usually eats at this table? Yeah, the one that lost his duck this morning Why don't you ask him, too? I'd enjoy meeting him Jerry, could you ask them for me? Sure thing I'll find out as they in common And while you're looking at Jason's cat Then I'll let you know before you go Good, because I'll have to let Sally know how many to prepare for You better count Jerry as two people Just look at his plate He's clean as a whistle They won't have to wash it, that's one thing, sure Don't let them kid you, Jerry We'll see that you get enough spaghetti tonight Well, looks like the rest of you are prittin' here through If you'll excuse me, I'll go and find Mr. Randall and Johnny Bradley And see if they can come to the party tonight You run along, boy I think I'll go with Jason and Mr. Grayson over to the cat cages Okay, I'll see you over there So long Good bye Johnny Bradley Yes, Bradley, he's the clown Oh, I guess I've heard him referred to as just Johnny Well, why? Is there anything wrong? No, Bradley's an old family name of ours, though Just seem kind of familiar Ever had any circus folks in your family? Not that I know of My dad's an actor Our folks were show folks a long way back But I'm quite sure I haven't heard of any of the family being in the circus end of show business Well, I guess we've just about cleaned up Shall we start moving? Okay Oh, am I full? How can you folks work on such full stomach? You see, Grayson, we're outdoors a lot And after all the type of work we do is pretty strenuous I suppose that all helps our appetite I certainly envy you folks spending the whole summer out in the open like this Yeah, it is nice out today Yeah, but what about last night? You see, Mr. Grayson, we've got to take the bad with the good Did that wind bother you last night? I wondered about that You did it We almost had a blow down in the menagerie tent You don't say You're the worst we've had in a long time That menagerie tent took the brunt of the wind Hmm I can see there's lots of excitement with an outfit like this Yeah, I'll say so Oh, see, Grayson, I forgot to ask you about Daisy What got into her last night? Oh, here we are now These are my charges, Mr. Grayson They certainly look well kept Oh, you bet they are Best care in the world Well, you're not telling me about Daisy, Grayson What is it, a secret? No, it's just a sore spot First time in years I've had to cut any of my act Oh, of course now and then Something serious turns up, but... You had to cut part of the act? Yeah You remember that line that jumps over all the others? I should say I do A magnificent jump Well, when she came into the arena I knew something was wrong But I couldn't tell just what Well, she got her commands all bald I'll say she did And acted so nervous and nasty Made a couple of passes at me And she's one of the gentlest lines I've got Here she is in this cage She is a beauty Well, what was wrong, Grayson?  Well, I washed it out with a solution But with her eye, his head is that How could you get near her? Well, I did it from the outside of her cage Well, how? I got one of the keepers to help me They gave her some meat So as to get her head over close to the bars Poor thing Do you think she knew you were trying to help her? I think so Because when we used a large fork to hold her head still She didn't put up much of a fight Well, then I dobbed her eye out good Quite a business, caring for animals, isn't it? I should say it is Jason, Mr. Grayson Here we are, Jerry Oh, I didn't see you behind this cage How's Daisy today, Jason? Fine Well, Jerry, did you see Mr. Randall? Yeah He said thanks awfully He'd like to come But when I asked Mr. Bradley Well What's the matter? Can't he come? Well, he was making up And I couldn't tell for sure But he acted kind of surprised or something Well, that's natural enough He doesn't know Mr. Grayson It is unusual to be asked to a party By someone you don't know No, it wasn't exactly that I couldn't quite figure out what was wrong Well, Bradley's quite a stickler for etiquette Probably thought as long as he hadn't met his host He'd better not Oh, I'd be very glad to ask him personally Why don't you take me around, Jerry? Sure, I'll be glad to He's probably made up by now Guess I'd better be getting going myself After all, there is a show going on this afternoon Well, I'll say goodbye to you now, then, Mr. Grayson I'll see you tonight Be sure to tell Miss Patsy I'll be expecting her too You can count on me Come on then, Mr. Grayson We'll drop by Mr. Bradley's wagon on the way out Bye, folks That's so long Goodbye Pretty nice friends you've got here in this circus, Jerry I'll say so I'm getting to know more of them better every day Say, Mr. Grayson Yes? How long do you think it'll take to get all that business state And care of at the Superior Court? You mean how long before you can get to that box of your dad's? Yeah, I guess that's what I'm most anxious about It's pretty hard to say, Jerry It just depends when it comes up on the court calendar Well, gee, I'll sure be glad when it's all over with So will I, for your sake Well, this is Mr. Bradley's wagon Mr. Bradley Hello It's me again, Mr. Bradley May I bring my friend in? He wants to meet you Mr. Bradley, did you hear me?  Mr. Grayson caught the show yesterday Yes, yes, I know I mean, well, did you enjoy it, young man? Indeed I did, sir And I enjoyed your comedy with the duck very much Oh, gee, that's nothing You should see and... Jerry's a very loyal little friend He's my understudy Understudy? Yeah Just think, I could have gone on yesterday afternoon But they couldn't find me Wasn't that bad luck? I hope you weren't indisposed, sir It was no consequence You'll excuse my appearance My makeup But I get ready early and then sit and read a little Till time to go on Not at all, sir Though I must say, I have no idea what you really look like If I should happen to see you on the street tomorrow Yes, the clown's makeup is a pretty good disguise I found that out You sure miss not seeing him do it Jerry tells me you were kind enough To include me in a little party tonight Yes, sir That's why we came by Everyone's been so kind to me around here I sort of thought a little party might be nice for a change No, you're very kind But I'm afraid I won't be able to come, though Oh, please don't refuse I'm going to get my fiancée to make... Fiancée? Yes You see, she makes marvelous spaghetti I thought it might be nice for a change And so... Fiancée You... You mean you're engaged? Why? Yes, of course But why didn't you tell me? I'm afraid I don't understand what you mean, sir Oh, yes Yes, of course I'm forgetting myself You must excuse me, my boy Surely Aren't you feeling well? Oh, yes, yes I'm quite all right, thank you For a moment I was... I was thinking of something else So, you're engaged to be married, eh? Yes, sir Of course, we'll have to wait a while yet You see, I'm just beginning in business It takes a little while to get started Wasn't it nice of Mr. Grayson to be willing to help me out about the box of dads? Indeed, it was, Jerry I'm only too happy he came to me Guess I've got a soft spot in my heart for show folks Yeah, his dad was a great actor Isn't that something to be proud of? He still is a great actor, Jerry Yes, Mr. Bradley, I'm pretty proud of my father Well, well, well... So, you see, we'll have lots in common, I'm sure Can I prevail on you to join us after the show tonight? Yeah, please, Mr. Bradley Well, I have lots of fun I'm sure you will And I should like very much to meet your young lady, Mr. Grayson But I'm afraid I'll have to deprive myself of the honor this time Aw, say that's too bad I thought sure you'd come if Mr. Grayson asked you personally I'd like to, Jerry, very much But you know my old heart can't stand as much as it used to Oh, sorry to hear that, sir Oh, it's nothing, nothing, I assure you But well, I've had a couple of pretty big shouts in the last two days I guess I'd just better take it easy I'm sorry Sally will be sorry, too Sally? Is that her name? Sally Grayson Well...  Oh, thank you I don't dare risk it Goodbye then Coming, Jerry? Sure, see you later, Mr. Bradley Hello there, Mr. Randall Oh, oh What are you two doing in Johnny's wagon? Trying to get him to join us tonight But he turned us down See you later, Mr. Randall, after the show tonight Yes, sirs, glad to come Thank you, Grayson Johnny, Johnny, are you all right? Yes, yes, I'm all right But what happened? My son, my son To see me in a clown's makeup Didn't he recognize you? No, not with this grotesque face on Yes, but your voice No, I changed it very little But just enough After all, he'd scarcely expect to find me here And after all the trouble I went to To keep him away from you Tides of fate, Mr. Randall The tides of fate Johnny, why don't you chuck your pride And go to that party tonight? No, no, I couldn't Don't ask me, Mr. Randall Don't ask me


Yr Arduch yn gyfaf o'r gweithio, gallwn gyda'r ffordd ym Mhagorau? Mae'r ffordd i chi'n fynd i'ch gweithiol. Mae'n gweithio'r maes dros, ac mae'n gweithio'n gweithio'n gweithio'n gweithio. Mae'n gweithio'n gweithio'n gweithio a'n gweithio'n gweithio i gael yma, a'i gweithio'n gweithio'n gwneud â'r ystafell a'r ystafell, ac mae'n gweithio'n gweithio, mae'n ddifennio i gael i gael, Fy enw, mae gennym ei gwaith yn ddigonio i fynd i gael ddafnod. Mae'n gwasgfa, ac yn dod o'r gweithio, yn y dweud. Rwy'n gweithio i'r gweithio geniwyr wrth gwrs, a'r gweithio i'w gweithio i gael awr, i chi'n fwy o'r gweithio i'r gweithio'r club yma, a yna gwybod i gyd yn gwybod, ac mae'n cael ei gwasgfa'r gweithio. Yn cael ei gweithio, mae gennym ei gweithio i'r gweithio yn y Gweithio Geniwyr, ynghylch, a yw ymgyrch yn y ddweud yma ac yn y 12 oed yn y mhwyth. Dyna, felly mae'r holl o feddwl yn debyg yma, ac mae'n fwrdd o'r holl o'r holl o'r holl o'r moll. Rwy'n gwneud y pethau yma yn y ddweud, yn yr Eithan Dfoesol, yn Llyw Henrry. Dyna, mae'r holl o'r holl o'r holl o'r holl o'r holl o seith. We had good energy, we had good legs on the side tonight. We had a goal threat and Jamie Walker finished off a very good move and came inside and slotted it away. Does tonight represent a little bit of growth as well? I guess you could say the game and how it panned out very similar in ways to that of Saturdays but we've come out and managed to get a result tonight. Yeah, I mean in Saturday we created some really good moments in the game and opportunities. When it was like tonight, we should have gone ahead a half time. We were probably unfortunate not to have gone a few ahead and then we needed obviously Alex Bass in the second half because he made a number of very good saves. Does it give you even still things to focus on? I guess the fact that we were 0-0 a half time where we couldn't probably should have been one, two goals to the good to look at for the four? Yeah, I mean I think that's always the case because when we create good opportunities in the game we've got to be clinical and you know tonight again could we have gone ahead in that first period we probably could have. And again finally just on the supporters, 330 behind the goal along with them to travel but presumably happy that we've sent them we're happy. Yeah I mean they were very vocal from the start of the game and you know I think that that was really important because the players knew it was going to be a tough game for us tonight and they've come through it really well. The travelling supporters have travelled a long distance and supported us from the minute to the end.