SwiftUI Views Live: 1 - Mastering Layout with Blueprints

right now all right can you guys hear me or no can see couldn't all right let me know if you can hear me now one of the things I noticed is there is like a 30 second delay so everything you're hearing for me I already said 30 seconds ago so if you write a message I'm not gonna see it for about 30 to 45 seconds okay good all right cool thanks fuzzy test test test oh you can't okay good all right good I tried this before and the sound wasn't working right so I think I got everything set up it's a little bit more complicated than I thought I thought you could just go to youtube and start a live stream and then I found out you got a download software you got to get a key you got to sync up the keys then you have to broadcast and then YouTube picks it up and then transmits it okay we stopped a few more minutes I'm gonna get started at 12 but I just want to first introduce myself you guys don't know who I am I'm mark Morgan tubing for a few years I kind of got into it accidentally and by posting my first video the first video I ever posted was actually for work and we had these Tech Talks and what I did is uh like all my team members were out one day when I had my when was my turn to do a Tech Talk so I created a video and I'm like I'll just put on YouTube and then they can watch it later so I put on YouTube and I got a bunch of views and people are like post more I'm like I don't know do I want to do this but then I really loved it I really enjoyed it so that's how I got started why not twitch you know what to be honest I don't know I don't know twitch I've never used it before I do use it to manage mods for games I've never heard live-streamed with it before so yeah maybe that's an option I don't know and I do have a youtube channel and I have an audience so I know they'll get notified if I if I go live and then I can just easily put on YouTube after that too so that's one reason why I'm using YouTube hey once you guys tell me tell me where you're from are most of you from the United States right now or we have some people in Europe you I wish my bandwidth was better because when I ask questions I gotta wait 30 seconds before I can read the answers hello if I breezy Oh Jacqueline is on that's my wife Jacqueline Cruz USA Seattle all right cool Switzerland nice hello Lukey okay London Argentina Utah Oh Quinn yeah Jacqueline yeah she's in Utah she's two rooms away from me right now good thing thanks for supporting me honey all right just couple more minutes and then we'll begin but it's down here get that ready oh I don't need Camtasia let's close that Wow Iraq it Abraham welcome welcome on awkward from Egypt we got Mexico Washington DC Nick from Washington DC Tampa Bay awesome well thanks for joining me today guys ok one more minute I do have a timer on this I want to try to keep this to thirty minutes because I know that I can get off-track and I can start like talking and telling stories so I really want to keep this focus so we'll try to keep it to thirty minutes Oh welcome from the Philippines nice okay it's officially noon and let's get started here so first of all again my name is Mark Mohicans this welcome to my youtube channel and I like to do tutorials about Swift swifty i iOS development really love user experience animations and UI design and so today we're going to cover UI views not UI fees cover switch UI views if you don't know already I'm pretty nervous about this my first time going live so we're gonna do a switch UI views and specifically I want to teach you some basics and then we're gonna jump in to actually creating something and who is this course for or who is this live stream for here this is for people who are completely new to swift UI or have no sweetie I experienced or have been using Swift UI for a little bit or it could also be for experienced with UI developers as you might learn something but you probably know what I'm gonna teach already so there is another aspect to it to where I'm going to teach you about creating what's called blueprints what are blueprints it's a term that I made up and basically it's a way to really get to know in practice Swift UI layout layout of in a very quick manner it should be something that's very fast and that you can do a lot of times to get really good at it and not only that but when you create a blueprint it's something that's reusable that you can save off into another project your blueprints project and then when it comes time to creating a new screen later on and it might be for something personal for a project for a client for an employer you can go to your blueprints take a look at what you have and use that as a starting point so what so another thing about blueprints is there's something that are super basic they don't have color they don't have a lot of actual controls I use labels and I use shapes mostly and then I also give some kind of indicator on it so I know where to find it in my blueprints project I'll give you an example here I think I have it on here no let me look it up here real quick okay here we go so what I do is I kind of create a guide for myself that visually shows me all of my blueprints and here's here's what I use then I actually export it to a PDF and I carry it with me so I use pages and these are this is like a directory of one of my set of blueprints that I have so here you see you know there's no color right there all shapes and some text and there's an indicator on them and identifiers I guess you could say so what I do is I look at the blueprint that I have like maybe I'm looking for a background so those are all the BAS all the BAS our backgrounds some of them have custom shapes gradients images as background their starting points and what I do is I look at that indicator in my blueprints project then grab it and then start with that as a template a few weeks ago probably about a month ago I had a situation at work where they're considering a new project nothing's been designed we just talked about it right so what I did was I went to my blueprints and I grabbed him I put a bunch of them together in a project and at hooked up some navigation I showed them like is this something like what you're talking about because as you can see here there's a lot of different things that different screens for different situations right down here like for the Li those are login screens and then I have list screens and then I have browsing screens display screens displaying or detail screens you know showing some kind of detail information so they're something you can quickly put together show your client show your boss or your co-workers and it gives them an idea that yeah this is what it could look like but it's not so refined that they think it's almost already done that's a mistake that I think a lot of people create a lot of people make is when they come up with a prototype the boss can easily see it like it's actually finished and they think well it looks like it's 50% done all you have to do is code it now that's not the case you guys know as a developer is that it never happens right so I like to keep it black and white because it shows them no it's not done you know and it's super basic and when it's black and white it's easy to reuse okay so that's what blueprints are so here's what we're gonna do we're gonna cover V stacks real quick H stacks Z stacks and then shapes and those are things that you're going to need to quickly create these blueprints and then what I'm going to do is I'm going to create a blueprint so here's what I want you guys view right now pick a number between 5 and 20 and the first person I'd type it we're gonna use that number later on ok so why don't we get that number up there now and then I'll try to remember it and then we're gonna use it later I'll show you I'll show you why we're gonna use it okay so let's jump into our project here and the first thing we're gonna cover our V stacks so just real quick V stack is something that displays views vertically okay so a quick way to add them is hold down command click on text here and then surround with the V stack now you can't see the V stack because there's only one element in there but it seems like copy this element you'll see another one and they're stacked one over the other right so let's add a shape and I'm going to just pick a rectangle there we go now the rectangle is in the V stack and the rectangle is what's called a push out control so or push out view push out views take up as much space as they can they push everything out and as opposed to texts are pulling views they only use as much space as they need for their contents okay and that's V stack if you want to know another way to add views to a V stack you can also open up your library here or you can click this plus symbol up here that'll also open up your library and say we want to add another shape maybe like a capsule I can drag it over here and I can add something to a V stack right there so I can add it between those texts okay we got some numbers 14 okay we're gonna stick with that number 14 if I forget what it is you guys remind me later on okay all right now as you can see the capsule is another shape all shapes are pushed out views they're gonna try to take up so much space that can and divide that space up evenly so if you notice that capsule is using as much space as the rectangle so shapes like the capsule the rectangle push-off use alright good so that's the V stack now let's go into the H stack now again H stack what I can do is I can hold down command and click on my own leave you there and embed it in an H stack or what I can do and you can do this with a V stack too let's open up our library we can add a shape let's go with a circle this time I'm gonna drag it over here now notice when I hover in different positions around the only existing view on there the hello world you notice that creates bars on there and that bar will tell you in that little note down below you're going to create a V sack or an H stack so I'm gonna hold it over to the right and create a new horizontal stack I'll let go there you go so it created this horizontal stack for me that's awesome that's what I want and you'll notice the more things I add everything is just stacked horizontally okay good that's the H stack I think you guys got that and then the Z stack so the Z stack I'm gonna hold down command and click on text and you notice there's no embed in C stack so what I'm going to do is just I'm gonna use in it a different stack of like H stack and then I'm going to change it so that's pretty much how to create sea stacks now Z stack Z measures depth or indicates depth and Z stacks are good for putting a view behind another view or in front of another view and what I like to use it for is to set a background so sometimes you have a view you want to set it background could be a color could be shapes could be images it could be anything so with a Z stack the first view you know from top to bottom the first view is going to be the thing that's furthest back in the last view it's going to be the thing that's furthest forward so let me show you an example here we'll create a shape I'll just say a rectangle let's presume that you won't see anything because it's going to be black on black right so what I'm going to do is I'm going to change that color there and you can change colors of shapes using the fill modifier so we're going to change this to color dot secondary okay now what is the secondary color that I'm using it's not a normal color that you might be used to if you look back at my blueprints here most of those views and shapes there are using the secondary color the thing I like about the secondary color is it's gray and and also when you stack it they they get okay these screenshots are in light mode right so when you sack a secondary color they get darker and darker and darker and you can see some examples like right here this screen that big circles on top of a capsule and so it got a little bit darker and same with these you know when you have overlapping views like this using the secondary color it's going to get a little bit darker in dark mode it's the opposite it gets a little bit lighter as you stack these secondary colors so I like to use the secondary color when I create blueprints okay so those are the basics for the V stack the Z stack and the H stack now let's actually get into hey Scott Scott Smith he's a friend of mine we're pretty much neighbors and he has his own YouTube channel if you want to check him out he has a great stuff okay now we're gonna create our first blueprint but you might wonder like what do you where do you get started how do you just create a blueprint well here's what I do I actually I look for inspiration somewhere and I challenge myself to create that blueprint create you know like I find a design that I really like and then I try to recreate it in swift UI as a blueprint so that's what we're going to do and we have us we have a random number here we have 14 right so what we're going to do is we're going to go to Google and I'm gonna pick the 14th mobile UI design and I'm gonna create a blueprint so let's do that let's go to Google here and we're gonna search for mobile UI I'll go to images I'm gonna go with the 14th one so this is totally random guys so let's take a look here we got 1 2 3 4 5 6 7 8 9 10 11 12 13 14 okay here we go all right so let's check the time it's 12 11 now I want to wrap this up so what I'm going to do is I'm gonna give myself a 15-minute time limit here and we're gonna create as much as we can of a blueprint for this screen right here from Dmitri Litvinov all right great so thank you dimitri for supplying us with this inspiration here let's see maybe we can get a larger image here if i click on it yeah here we go this is great awesome alright so I'm going to do is I'm going to move this let's see how can we do this move to the side a little bit so we can flip back and forth here easily let's go with this dark mode here okay so you know getting started what I try to do first excuse me I should have brought some water in here what I'm going to try to do first is layout the shapes the basic shapes starting with the background so we see he's got some circles there right ones in the corner was in the corner Finch did Sean Allen review my portfolio I don't I don't think so it wasn't mine okay so we'll start with the background and then we're gonna move forward and it looks like I'm gonna talk this through here so we have a background I'm going to use a Z stack for that right depth hmm then I I'll add some circles I'll add a rounded rectangle and then the next layer up I'm going to add you know those six tiles now when it comes time to do in blueprints I want to make this super clear to you guys when it comes time to doing blueprints do not spend time on the details spend time on the general layout because the more details you blueprint has the less useful it will be in the future the more generic and basic it is remember what we want is a starting point for the future so in the future if I want something like this I can easily grab it and but just might be the shapes and then in my real lap I'm going to add the color and I'm going to add icons and you know the actual color and the actual text the whole thank you so much my wife brought me some water okay there we go so we're gonna try to keep it as basic it's possible and what I'm going to do here I'm actually gonna set a timer for myself so I can keep track of where I'm at okay starting now okay I know I needed sea stacks so I'm gonna hold down command click on text click on a stack and then change that to a Z stack now in there we have some circles right so here's what I'm going to do well let's just add one circle circles you know our push out views right they're gonna take up the whole screen and what I want to do is I want to make these circles a little bit smaller and I'm going to move them to one's going to be in the corner and one's going to be off to the side a little bit and so let's add a couple of circles here like that and then I'm going to group them into a let's see I could you know it doesn't matter at this point I could either use a V stack or Z stack I think I'll use a V stack I'll embed the first one and I'm going to move this one up so I have two circles there now let's change the size of those so the way I'm going to do that is I'm going to give it a frame and set a size to it using frame I can set the height and width okay Scott yeah rot he taught me everything I know I know about so it yeah it's the other way around rot rods a very good friend of mine we met when I was on a contract back in geez what was it 2000 2001 it's very good friend of mine okay so let's set some sizes here now what I'm going to do is I'm going to hold down command click on circle and I want to click on switch UI inspector this will allow me to set the frame right here so let's try 50 by 50 see how that looks absolutely too small I think I might want something bigger let's try 150 yeah that looks good ok we have our circle actually let's do this here yeah that looks good ok now I'm going to take that I'm going to apply it to my other circle now another thing you can do too if you want to apply modifiers you can open up the side panel here and click on a view now notice it says nothing selected and I think this is kinda like a bug what I do is switch tabs and go back and now it'll be selected and I can set it right here so let's go 150 by 150 I don't use that too much just because I'm trying to conserve screen real estate here so I'm gonna minimize that again alright I have two circles now what so I want to offset them I'm gonna move them into a corner now what I'm going to do here there is a better way to do this so it's always in the same place but to save time and not get into a whole nother subject I'm going to kind of cheat and I'm going to create I'm just going to offset it with this resolution of this screen right here so just know that just know that there's there's a better way to do this but for times sake I'm gonna go kind of fast and just use the offset ok aweso what does that do that allows me to move something on the X which is the horizontal axis or the y axis Y is up-and-down it's vertical so if we want it to go up then we want to change the y axis with a negative value so let's try 200 negative 200 I need a value here an X we let's try to going over 200 that's pretty close we can probably move that up a little bit more let's try 240 and let's bring it into the screen on the x-axis a little bit with 180 yeah we'll stick with that for now all right good we have this other circle and where's that okay that's over on the side so for the let me just copy this offset here paste it in there and now we want a negative value so let's try negative 180 and let's go down a little bit yeah that's fine we'll just leave it like that there we go okay so that's part of my Z stack right there now I want to change these to secondary colors so what I can do you can use the fill to change the color like you saw before now I want to change the fill on both of these circles so what I'm going to do is go to the parent and apply a modifier on the parent so it applies this modifier on all the children now unfortunately I can't use fill on a parent and have it apply that modifier because fill is specifically two specifically for shapes all right so what I'm going to do is I'm going to use foreground color so another way to supply color to shapes but I don't I like to stick with fill it goes foreground if there's text in there it's going to apply it to the text as well so what we'll do is we'll use secondary here those will turn gray it's perfect now you see here there's kind of like a rounded rectangle as the next layer up right behind these tiles here so what I'm going to do is I'm gonna add a rounded rectangle so be my next layer and let's see rounded rectangle is another shape and what do you know about shapes they're push-out views they're gonna push out so the corner radius is how curved that corner is right there let's make it really noticeable there we go change it to 40 this isn't really what we want right we want it to be what does that maybe like a fifth of the screen or three fifths of the screen maybe it's not quite half maybe we'll make a half so what I can do is I can use a frame modifier on this again and again this is cheating this is ah boy I don't know if I should get into this we're six minutes in yeah I'm gonna cheat on this how great a separate video to show you guys the real way to do this but normally I'd use what's called the geometry reader geometry reader gives me the coordinates and the space that I'm working inside of so inside of geometry reader I can tell how big the screen is how wide how tall it is and then I can use that and say oh I want all the available space on the screen and I want to multiply it by you know by point six to give me 60% of the screen and that will fill up my screen maybe I'll just do that I'm already talking about it so what I want to do is I want to embed this what I usually this is how I usually do it so I start with a group and then I changed it to a geometry reader like that so now that everything inside that geometry readers giving me the coordinates I'm gonna access that later with this variable that's passed in people call this geometry proxy I call it gr for short it's the shortest thing I could think of now what we want to do is we want to apply our frame and we want to give it a height like that and we're going to access the height of the screen using the geometry reader so I'm gonna say TR and I access the size it acts as the height now using just the height of the geometry reader it's gonna give me the same the same height of the rectangle cuz that's the rounded rectangle is using the same height as the whole screen right so what I want to do is I want to multiply it and or you can divide it too if you want I'm going to multiply it by 0.6 there we go so that's about 60% of the screen right there or it's exactly 60% of the screen but you notice we want it on the bottom right so let's do this what we need to do is push it down so I am going to embed this geometry reader in a V stack then I'm going to add a spacer up here and the spacer think of that is like a push push out view right it pushes out in one direction if you're in a V sac it's gonna push Berkeley if you're in a Sachs gonna push out horizontally that isn't working oh sorry we need to let's move that down into the geometry reader there we go okay the geometry reader is apparent then the V stack spacer but notice so here's the thing the rounded rectangle unless I create a custom shape all four corners are going to be rounded but we don't want the bottom corners to be rounded we want so we want them to be squared off so you don't see that gap at the bottom so what I'm going to do is think safe what I'm going to do is I'm going to I'm gonna offset that round rectangle down so it hides those corners at the bottom so let's do that ah set and we don't need the X because we're not offsetting it to the right or left we're gonna offset just a little bit down maybe like 20 oh it's wrong direction there we go well I'm around my corner radius is 40 so 40 you should probably work there you go so we're making progress now I want to also supply a the color to the shape make it secondary again so what I'll do is I'll come here change the fill to color dot secondary now in this one the foreground color I just use dot secondary and that worked fine right so how come I can't do that with a fill because the fill it can be other things besides a color and so I had to specifically say this is a color that I want to fill it with okay good we're we're getting there right okay actually I'm going to increase this size a little bit let's make it point seven yeah that looks better all right great now we're ready for the next layer the very top layer and I think what I'm going to do we have five minutes left I'm going to create a circle here above Shaw mcDonald's face here create a circle create some text this share account that'll be a bun what I'm going to do is I'm gonna use a capsule that looks like a capsule shape right there and then here for these tiles I'm gonna use rounded rectangles again so let's start with our topmost layer here we're gonna use a V stack there we go and the top shape is gonna be a circle now here's here's my method here here's my my plan so I'm gonna create all the shapes and get them in there and then I work on spacing and sizing that's a second second step so I'm gonna copy that color apply it to my circle right there then we'll leave that text that'll be well let's use John's name here actually you know what I'd probably do is this is kind of like a menu screen I guess you could say or like a landing page so for my blueprint I'm going to I might call this like landing one that way I can identify it later in my project so we have landing one there and let's make it bigger I'm gonna use a large title right now landing one it's down at the bottom because that circle he's a push out view and he's pushing everything pushing everything down he's if you click on a circle you see that blue rectangle around it that's his that's the space that's the frame of that right of that circle that's just pushing out trying to use up all the space we're gonna fix that later now I want to make this bowl too so what I'll do there's a couple ways you can make it bold I can say bold here like this that's a pretty simple way I can also add what's called a font weight there it is right there and then from font weight you have a couple of choices you know black bold heavy so the order of thickness I guess you could say is it starts with regular and if you want to get thicker it's gonna go medium bold heavy and black I think I can't remember it heavier black is the thicker one take a look might be black that's pretty thick let's take a look at heavy yeah it's black so let's use a block let's use black alright great now the next shape there is the castle that's that share account now I could create a button here right I'm not going to create a button I want to keep this as simple as possible a shape will give me the general idea of the layout and any sizing that I add to it I can always reuse that sizing with a button later on I can easily replace that shape of the button so shapes and text is about as much as I use when it comes to a blueprint okay let's add a capsule here okay and let's apply our color shape is a push up view it's competing with circle right now to use up that space that it has so those two shapes are using equal amounts okay now we have the rounded rectangles how are we going to do this well it's definitely kinda like rows right three rows there and we're gonna use the H stack to create those columns so let's let's do this this is usually what I do I had a rectangle no actually we want a rounded rectangle and the corner radius I use 40 on that last one this looks a little bit less let's try 20 I think that'll work let's go with 15 okay now from here what I'm going to do is is I'm going to click command click on rounded rectangle and I'm going to embed that in H stack and then I'm going to copy the first one actually probably copy it let me apply a color and paste that in there okay let's copy that paste that in there oops I think I built instead of copied or pasted there okay so that's one row let's presume that okay good we have two tiles here right and they're evenly they have the same width because they push out views and are competing for space and let's copy that age stack and we're going to paste that two more times there we go there's our tiles so now let's start working on the spacing we have all the shapes there that we want and we want to start adding some what's called padding around the edges so when it comes to spacing I kind of have a system here what I do is I try to work from the outside in let's try to go from the outside in so starting from the outside here we notice those tiles there there's definitely spacing around those right in the in our our mock-up here our design inspiration from Dmitry so I'm going to start with that now all of these are in AV stacks so the V stack is the parent what I'm going to do is add the padding on the parent now there's a couple of ways you can do this right I can I can type it in type in padding if you can't remember the modifiers name try going command clicking on V stack and go to the swift UI inspector and you'll see there's padding here so I can add padding to the top you see the code that it generates down here I can add it to the bottom now notice you know it doesn't say just bottom there what it does is it changes it to vertical so it's super super handy instead of instead of having top and bottom I like in a an array it'll just change it to vertical and then I can add the right and left so here's what I'm talking about with the array you can add an array of the edges you can say I want the top edge bottom trailing and if I just do all it's gonna remove all of them and just replace it with the word all so now let's take a look at our screen here we have enough padding around there around the round around those rounded rectangles around those tiles here but what I want to do now is I want to add spacing so we're going to start from the outside and we're moving in a little bit right so I want to add spacing in between those elements there's two things I wanna have to do I'm gonna have to add spacing horizontally and vertically right so let's start with vertical first now what I can do for vertical here's the choices you can command click on V stack we're gonna go to the inspector again and there's a spacing option up here what that does is that adds spacing in between all the rows now you see a default is zero if you look at the preview here on they're all touching each other now and what we want to do is let's change that to 20 so we want to kind of get the same amount of spacing that's on the sides as in between and default padding I believe is 16 so we're gonna lower that a little bit let's go to 16 here then that should even it up so now on the right and left it looks kind of like the same as in between right rod appreciate your help and answering people's questions I notice that up there and as my first time it's hard to us split up my attention to pay attention to the comments and work at the same time hold on one second I'm gonna get a drink of water okay so now we want to add spacing horizontally in between these in between those rounded rectangles tiles I guess we could call them so it's gonna be very similar but with the H stack now what I'm going to do is I'm gonna come in and click on the H stack and go back to the inspector and for the spacing here I'm gonna add 16 and that's gonna affect the spacing horizontally so now you see on this first H stack there's more spacing here right so I'm just going to copy that I'm gonna paste it on these other ones here all right good spacings looking good and let's make that capsule a little bit smaller so it looks more like a bun and then I'm going to call it it's I'm definitely over my 15 minutes so let's uh let's shorten this up I'm going to command click on capsule I'm going to go to the swift UI inspector again and for the height and width I'm just gonna guess here let's say 200 wide standard height for a lot of buttons is 40 for human interface guidelines from Apple suggests that a lot of things that you can interact with should be at least 44 by 44 because that's the size of your your finger or most people's finger so I'm gonna go at 50 okay so let me show you something here why is it giving us an error on this cuz order matters when it comes to modifiers I said before if Phil applies specifically to shapes only shapes you can only use a fill to set color on shapes okay now the way modifiers work is they don't update an existing view what they do is they replace it so I draw a capsule and one object is created and then I apply it frame to it and that replaces that object with another object you know that has a frame on it it's a capsule with a frame and then I add fill to it and it's gonna replace that with a third view which has color on it but the thing is that the view that's returned from frame is a view it's not a shape anymore okay so I got to switch these around so now it starts off with our shape and it replaces it with another shape that has a color and then the frame gets applied to that and it replaces it with a view which is a capsule shape that has a color now it has a size to it there we go there's our button right there now I know the overlapping might be kind of confusing if you want you can take off the color on this you know so it's more clear totally up to you guys so there we go I'm gonna end it right here we have a blueprint and what I am going to do is you know I have a project with a ton of blueprints in it I'm actually going to copy this I'm gonna add it to my blueprint project so that way if I need something like this in the future I'm just going to come here and I'm gonna replace these shapes with some content these I could leave the rounded rectangles and just do an overlay overlays another way of doing depth I can add views on top of another view using an overlay and I can overlay it with stack that has the icon and the workshopping you know looking at that first tile there so and it's definitely basic enough where it gives me a starting point the thing about blueprints is and when it comes to design or it comes to development it's a lot easier to start from something than to start from nothing right you know when it comes time to creating a color scheme isn't it a lot easier when you know at least one color that the client wants you know they maybe they have a logo maybe it's like IBM and you know they have that blue color and then from that blue color you can expand from there but if you had to come up with a color scheme from scratch you know from nothing it's it's a lot harder than starting from something that's the purpose of blueprints blueprints they give you practice like it took me 18 minutes to create this and and I was explaining things along the way so I can actually I can create these pretty fast these blueprints so it gives you practice with layout gives you practice with shapes easy practice with some colors and how things look and that is how you're gonna become a master so at this point you might be asking yourself at what point how do I know I have teve mastery that's a good question how do you know you've achieved mastery in something and I actually have an answer for that from from experience now if I took this if I took this blueprint right now and I deleted it right and I just closed down this project like that I wouldn't care why wouldn't I care because I can easily recreate it from from scratch it to me it's not considered like it is a time waste but it's not something that blueprint isn't so valuable that I will care if it disappears that it's not so valuable at that I will care if I have to recreate it and that's when you know you've achieved mastery is when you can easily recreate create things and throw them away create throwaway crate throwaway because you know you have the confidence that you can recreate anything that you throw away so if you can get to that point where you can quickly create things throw them away quickly create things in thrown away then you've achieved mastery and I don't know how many views that takes because I've created close to I bet probably 600 views since swifty I came out because you know the two books that I created this tons of use in there and the books don't show the 10 views that came before the one that landed in the book you know doesn't show all the experimentation and and then I have other projects and then I have other products that I'm working on and selling so I've created yeah probably over 600 views and that's why I don't care if I if I lose them I've lost projects I've created projects in the last but I can't find him but it doesn't matter because I know how to quickly recreate them that's when you achieve mastery alright good so what else here do we have that's it that's all I have I think see what time is it 12:38 yeah so we're doing really good on time and let me just scan through the questions real quick okay yeah thanks Jared Jared's on here too is his name is uh arched at there he has a YouTube channel that he actually helped me learn mobile development back when I was first beginning so he has a great YouTube channel you guys should check him out subscribe to him we also have Stuart Lynch in here he's gonna he just start his YouTube channel I think this year is that right Stuart maybe maybe last year but his videos are great I love videos if you guys are thinking about getting into YouTube I'm gonna give you some requirements right now okay okay if I want to learn from you what I like is I definitely love visuals I love for you to show me how you get from point A to point B using visuals not just code I don't want you talking to the camera and saying now here's what we're gonna do we're going to create this screen and I'm gonna write this line code I'm gonna write this line of code I'm gonna write this line code you have to tell me what the code does and if you can show me what the code does that's very hard in programming if you can show me the concept using shapes or using diagrams using a flowchart if you can show me what the code is doing then I will love your channel and I'll promote you so you can grow your followers so that's personally what I like and if I don't find it I start to create my own videos and I create my own products and that's that's just what I do huh all right so I think we're good here all right a lot of people that leave all right Alexandra yeah you welcome de nada boat RJ wherever you might be be then that means good afternoon Portuguese my wife is Portuguese all right good yeah I think that's it all right thanks everyone for joining me today this is my first time if you guys like this leave a comment down in the below the description let me know what you liked about it let me know what you didn't like about it so I can improve all right and I had this idea of playing a game maybe weekly and I'll share that with you guys later maybe in the next livestream all right so I want to play a game that involves everyone so we can have some fun doing it all right see you guys

Channel: Mark Moeykens

Views: 9,508

Keywords: SwiftUI, Swiftui layout

Id: etiEVMSJLjw

Length: 47min 55sec (2875 seconds)

Published: Fri Jun 05 2020