Jeff Terrell: Okay, we'll get started today we're going to talk about layout today.
Jeff Terrell: I love that piece that was I don't quite know how to say this him know PT gym know PT number one by Eric safety, I picked it because it's beautiful, in my opinion, and I hope that I will equip you today with tools to make something beautiful yourself with layout.
Jeff Terrell: Okay, quick announcements quiz two grades should be uploaded to the great book on sekai as of 30 minutes ago or so.
Jeff Terrell: So check that out if you're curious about your grade. I'm also currently behind on the mentor report. So I have quite a few in my inbox that I have yet to get through, and that includes most of the ones from last week.
Jeff Terrell: So I'm going to catch up on those as soon as I can.
Jeff Terrell: Okay.
Jeff Terrell: Today I want to just check in on the assignments. And there's a couple smaller topics that I want to cover
Jeff Terrell: trade offs of dependencies. When it why to use them. Why not to use them.
Jeff Terrell: As well as some trade offs about different web and mobile application framework choices and we'll get into both of those things. But I expect the both of them will be brief and then the book of today, as indicated by the title slide is going to be laying out
Jeff Terrell: Okay. So to review, kind of where we're at in terms of assignments.
Jeff Terrell: Assignment three user stories.
Jeff Terrell: That was do last week, and that is your high level task list for the project. So there may well be some things that you need to do that you add to your trailer board that are not
Jeff Terrell: That you haven't already written from assignment three
Jeff Terrell: But between assignment between the user stories that you just wrote and the initial tasks that you added for the deliverables of this class.
Jeff Terrell: Your trailer board is in pretty good shape to indicate kind of where everything's at and how you're progressing towards your ultimate sort of end of semester deliverable.
Jeff Terrell: So, you know, hopefully you've added all those to your trailer board at this point the clickable prototype is of course do this week. I hope that that has gone well for everybody and that
Jeff Terrell: Yeah, using sigma or whatever tool you use wasn't too painful.
Jeff Terrell: Next week is a pretty light assignment. It's a quick reflection related to service learning in the course there will be another one of these do in a month and a half or something like that. Or maybe just towards the end of the semester. I'm not quite sure when but not for a while.
Jeff Terrell: And then the week after next is going to be application assignment, six and seven application architecture and architecture diagram.
Jeff Terrell: And as I've mentioned before, the for coffee cups on a six or maybe a little bit pessimistic. Some of you have this choice constrained for you by your client and what the client needs. And so in that case the choices are really simple.
Jeff Terrell: Justification is really simple.
Jeff Terrell: But
Jeff Terrell: Right, so I think I was planning on finishing talking about everything that you would need to be equipped for assignment, six and seven last lecture. But I didn't quite get to everything so
Jeff Terrell: I'm going to finish up with that. And that's what these remaining two topics are about before I get into layout.
Jeff Terrell: layout is when I'm going to start equipping you for assignment eight which is the walking skeleton that is the big assignment.
Jeff Terrell: It's going to be a big pivotal milestone for your projects in during the course of the semester and layout is kind of the first topic that I want to tackle to equip you for that.
Jeff Terrell: And I'll continue equipping you for assignment eight for the next few lectures, actually. And then after that, we'll get into sort of some general
Jeff Terrell: Topics of software engineering that are useful for collaboration and other things but aren't specifically tied to an assignment assignment as the last thing that I feel the need to really equip you for through lecture content so
Jeff Terrell: Yeah, that's kind of where we're at in terms of the semester.
Jeff Terrell: Any questions about assignments or anything else related to kind of course administration or where we're at this semester.
Jeff Terrell: Okay.
Jeff Terrell: Alright so let me tackle some of these smaller topics here first.
Jeff Terrell: I i'm going to try not to go too fast, but I have a lot of stuff here.
Jeff Terrell: To cover today and we'll see if I can get through it all, or not I'm going too fast. Feel free to indicate that
Jeff Terrell: You could either post something in the chat channel or there is that go slower button in the participants List of zoom that I've enabled so feel free to kind of signal that to me.
Jeff Terrell: Likewise, go faster. Feel free to hit that if you feel like you could you could stand for me to go faster.
Jeff Terrell: Alright so trade off so dependencies.
Jeff Terrell: This is kind of generally true of dependencies as a thing, not just the dependencies related to a software project but dependencies, sort of, in, in principle.
Jeff Terrell: There's kind of a trade off associated with a dependency.
Jeff Terrell: First of all, there's some sort of benefit that you must get from a dependency. Otherwise, you probably wouldn't, wouldn't do it. I mean,
Jeff Terrell: I don't know what that benefit is but there's something that you're getting out of having a dependency, but you're ceding control.
Jeff Terrell: So you might not get what you need. Exactly. Your way might not be 100% reliable, you might not get it on time. Basically, you lose control. And so there's things that can be outside of your control. And this is relevant for software projects.
Jeff Terrell: And by the way, that I'm mentioning this also as in service to assignments six when you're justifying the choices that you make for your application architecture.
Jeff Terrell: So some examples just to kind of let this sink in a little bit of dependencies, some related to your software project potentially some not.
Jeff Terrell: One example would be if you have an employee and you're delegating work to that employee.
Jeff Terrell: Benefit is you have to do last because somebody else is doing work for you. The cost is that it might not get done.
Jeff Terrell: Or might not be done on time or it might not be done to your satisfaction, there might have to be some kind of back and forth to get it to a state that you're satisfied with
Jeff Terrell: Another example is if you have a company just coming a little bit from my personal experience as an entrepreneur.
Jeff Terrell: If you have a company and you have another company that you'd like to partner with maybe you need sales and marketing help or something like that, you decide to partner with another company.
Jeff Terrell: That's great because you get a lot of help. But the downside is you're you're dependent on them. And what if they don't deliver what if they don't deliver on time. What if you don't deliver the amount of help with the type of help that you're hoping for.
Jeff Terrell: So, you know, that's the risk and that's the trade off. So another thing you could start your own server yourself to run your application in production so that users can actually access it.
Jeff Terrell: But then you have to get into infrastructure, you have to understand that servers work and how to set things up. You might have to understand
Jeff Terrell: How to connect to some high speed always on internet. There's a lot of things that go into that. So instead what most people do is they would deploy their app to the cloud, where they have a lot less to worry about.
Jeff Terrell: We'll get into that actually the next lecture and the lecture following when we talk about infrastructure, by the way.
Jeff Terrell: how that all works. But the problem is you're depending on the cloud. And so what if the cloud goes down.
Jeff Terrell: Hopefully that would never happen or the particular cloud service that you're using, but it does happen sometimes. And you're at the mercy of that because you're dependent on it.
Jeff Terrell: Lastly, and this is kind of bringing things closer to home for assignment six
Jeff Terrell: You use a library instead of writing code yourself, there's some kind of thing that you need to do. You could write the code to do it yourself and you could dig into the details and figure out how to do it, but somebody already written a library to do it. So why not just use that
Jeff Terrell: Definite benefit, but the cost is maybe doesn't do it quite the way you would. And there are some other issues that I'll illustrate here in a minute.
Jeff Terrell: So the key idea of dependencies, is that when you depend on something else you're trusting it you're making a choice, at least to some extent to trust it, and trust can hurt you and you know that trust can be broken and violated in different ways.
Jeff Terrell: And you're not just trusting that it will work or that I won't break but you're also trusting it for security purposes.
Jeff Terrell: If you're not careful, somebody could inject a security vulnerability whether intentionally or by accident into your app because of this library that you're depending on. So something to be aware of.
Jeff Terrell: You brought code that somebody else wrote into your application and that person is not under your control. And this is, you know, this is the beauty of open source is that somebody else's written other code for you, but
Jeff Terrell: A person's a free agent and can make choices that you might not anticipate anticipate or appreciate
Jeff Terrell: Basically this is always fine until it isn't until something happens and goes incredibly wrong.
Jeff Terrell: And we have. I have a couple of good stories to illustrate this, that I am looking forward to here in just a sec.
Jeff Terrell: So yeah, most of the time, you don't have to worry about this everything rolls along just fine. There are no problems, or at least now that you're aware of your users continued to
Jeff Terrell: Be able to access your service and hopefully not
Jeff Terrell: Get compromised in terms of their computing device because of it.
Jeff Terrell: But, but then something happens and it breaks and it reminds everybody oh yeah I'm trusting on all these things that I used.
Jeff Terrell: Every time you hit MPM install for JavaScript project. Every time you add a dependency to your project, whatever language you're using you're making a trust decision. And that's something to be mindful about
Jeff Terrell: How can you predict what somebody out there might do to violate your trust.
Jeff Terrell: Do we just depend on you know we're making an upgrade decision and we're going from three.to dot 123 dot to.to
Jeff Terrell: And because of semantic burgeoning we trust that that's a really minor change. Well, we're trusting that we're trusting you know somebody just assign that label to it.
Jeff Terrell: Maybe that's an accurate reflection of things, maybe it isn't. Maybe there's something at some Trojan Horse smuggled into that upgrade, maybe there isn't.
Jeff Terrell: But it's a it's a trust decision that you're making every time.
Jeff Terrell: So this can inform your technology choices and justifications for a sex. So I wanted to mention these kinds of things to give you some language and some some principles to use as you're justifying what technology choices that you're making
Jeff Terrell: Questions about this so far. And I've got a couple of case studies that I'll get into next
Jeff Terrell: Okay.
Jeff Terrell: All right, first case study is called left pad. This is a big deal. A couple of years ago. So this guy. I don't know how to pronounce his name. In fact, I'm not even sure it's a guy, I think it is a user
Jeff Terrell: published an open source library as the kick package on MPM I don't remember. I don't know what this package does that's not
Jeff Terrell: The thing that they became a problem.
Jeff Terrell: It turns out there's a company with the same name, the company wanted to use the package wanted to use that name.
Jeff Terrell: And they approached Acer about it not maybe the the package was intended to be used with this service. I don't know. I don't know the history there.
Jeff Terrell: But either didn't want to give up the kick package name he had claimed it it was using it, people were using it and he didn't want to give it up so kick approached kick the company approach MPM the node package manager kind of the
Jeff Terrell: People running to the whole package repository.
Jeff Terrell: They approached them through their conflict resolution policy about a solution and MPM decided to give ownership of the kick package name to kick the company.
Jeff Terrell: Acer was very upset about this and reverted retaliated by on publishing all of his packages from MPM said I'm done with you in PM. I don't want anything to do with you. That was, that was not cool.
Jeff Terrell: Unfortunately, one of those packages left pad was a very popular dependency it all. It did, I think, was pad strings with space on the left hand side, it wasn't very complicated, but it was a very
Jeff Terrell: Single purpose library. Very simple. It did one thing and one thing. Well, and it turns out that a lot of things in the node ecosystem depended on that either directly or indirectly.
Jeff Terrell: So some foundational packages use that, if not directly and indirectly, and it turns out
Jeff Terrell: This was a huge issue.
Jeff Terrell: In PM install started failing across the board for every package that had a dependency on left pad version three
Jeff Terrell: And as a result, there were widespread failures across the MPM ecosystem. And I actually encountered this I was working on something.
Jeff Terrell: I think the story goes, I was trying to React Native for the first time, and I was following the very simple instructions on
Jeff Terrell: The website. And when I got to the MPM install step it broke. And I was like, What in the world is going on, what turns out because that left had package was completely unpublished and removed from MPM
Jeff Terrell: MPM installs everywhere. We're breaking
Jeff Terrell: So kind of crazy.
Jeff Terrell: I think MPM has taken some steps to kind of not let this be a vulnerability anymore but
Jeff Terrell: You know, who knows what other kinds of vulnerabilities that are going to be that aren't discovered yet. So again, it's a trust decision.
Jeff Terrell: All right, another case study is from a library called event stream this name. I think I do not know how to pronounce Dominic tar is the owner of several popular open source libraries.
Jeff Terrell: He got tired of maintaining the event stream library. And somebody came along and said basically a I'll maintain it for you. I still use it.
Jeff Terrell: You know, if you want to transfer ownership to me, I'll maintain it and everything seemed aboveboard. And this happens all the time.
Jeff Terrell: You write some library, it becomes popular and you say, Well, I want to focus on other things, and somebody else has offered to take this off my hands. Sure.
Jeff Terrell: Probably the package will benefit. As a result, and everybody uses it can benefit. Now that somebody is taking a more active interest in it.
Jeff Terrell: Well, it turns out this this other person had some ulterior motives and the new owner created a separate module with a virus embedded in it.
Jeff Terrell: And then publish the new version of event stream that depends on the infected module. So it wasn't even that the event stream was was infected itself. It was that a dependent on something that was infected.
Jeff Terrell: And then changed the tag version and GitHub to remove the malicious dependency. So I don't think we'll get into this when we talk about get this level of detail, but it is possible to
Jeff Terrell: Release a basically release if
Jeff Terrell: I say this, you tag a commit and get and you can go back and change which commit that tag points to. And so that's what this malicious owner. Did he
Jeff Terrell: Created a a commitment had bad code and then or dependent on some bad code and then went back or post it to MPM
Jeff Terrell: Published the the bad code MPM then went back to GitHub, change the reference of the tags. So that even if you did a code inspection of that code.
Jeff Terrell: You would have followed along and clicked. Okay, I'm at version 03 whatever read the code everything checks out. It's all fine a thorough security audits never going to find anything.
Jeff Terrell: But the trick is that the thing that was actually uploaded MPM wasn't what it appears to be on GitHub. So pretty sneaky. Alright. This is why
Jeff Terrell: A lot of uploads and things like packages that you can download these days, they'll come a come with a check some and they'll, they'll basically be somebody verifying okay what you download should have this checks on if it doesn't, it's been compromised in some way.
Jeff Terrell: Anyway, the end of this story was that a lot of production back end systems. Got a virus.
Jeff Terrell: And at some point somebody discovered it. I don't know how, but people realized what had happened, and
Jeff Terrell: You know these things can happen. I don't know that there's any way to protect against such attacks.
Jeff Terrell: So the lessons here are. Be careful what you depend on, right, like I said, be mindful of the trust decision that you're making
Jeff Terrell: Sometimes you get what you pay for. Right. There's so many free
Jeff Terrell: Things that you can depend on and get a lot of mileage out of them. And again, most of the time, this works just fine. And it always works fine until it doesn't until something happens, but you're not paying for anything. And so, you know, check your entitlement.
Jeff Terrell: You're getting something for free and you you should be aware that it's on you to verify that it is what you want it to be.
Jeff Terrell: Nobody has has made any warranties or guarantees about what it should be.
Jeff Terrell: Right. And as a general rule, you tend to get a lot more dependencies with an easy framework based approach, then you do with a simple library based one so that harks back to what we talked about a little bit ago with
Jeff Terrell: Simple versus easy and different ways to evaluate the trade offs of
Jeff Terrell: Different architectural choices.
Jeff Terrell: All right, got a little bit of humor here. For those of you familiar with JavaScript development and I'll pause for any questions so far.
Jeff Terrell: Okay, the joke. By the way, if you're not in JavaScript development is that, you know, I can't talk right now.
Okay.
Jeff Terrell: The joke. For those of you not familiar with the JavaScript ecosystem is the node modules directory is kind of incredible. It's amazing how many dependencies, you're actually depend on when it comes right down to it.
Jeff Terrell: Especially if you do something like a create React app.
Jeff Terrell: It's crazy, you look through node modules and there's
Jeff Terrell: Mountains of code there that you're depending on, you just don't even realize your, your list of dependencies is only 10 long, but each one of those depends on a certain number as well. And it just cascades until you have hundreds if not thousands of dependencies.
Jeff Terrell: Okay.
Jeff Terrell: All right, that's it. Any questions so far. I wanted to talk about web and mobile app choices. This doesn't fit in super well with
Jeff Terrell: I don't know a lot of other things, but it is related to architecture choices that you're making. And so I wanted to give you a little bit of really high level.
Jeff Terrell: Overview kind of strategic analysis of different choices that you can make about web or mobile app frameworks.
Jeff Terrell: And now that I'm saying that I'm realizing, I'm really talking more about
Jeff Terrell: How do you make things friendly for mobile apps. So I guess the target is really more on mobile apps. But I'm going to talk about each of these things and just give a brief.
Jeff Terrell: Analysis of them so that you're aware, as you're making choices about technologies, again, many of you maybe have already made these choices or maybe don't it's not relevant to you because the choices are already made for you.
Jeff Terrell: But some of you are facing this decision, and so I thought it would be worth spending a little bit of time talking about
Jeff Terrell: Yeah, some of these different choices. So native mobile apps for iOS or Android are things that you're actually creating just for that platform using these sort of official tools.
Jeff Terrell: Then there are cross platform mobile app frameworks, including things like React Native and flutter.
Jeff Terrell: Progressive Web Apps are a different kind of thing and responsive web apps are different kind of thing. Both of them are intended to talk about how web apps can function on mobile devices.
Jeff Terrell: So let me analyze native mobile apps here briefly. So a major con here is that you are locked into platform specific choices. So for example, if you're doing Android development, you've got to use a particular programming language either Java or Caitlyn
Jeff Terrell: You have to use particular API to display things on the screen, it might be very different than maybe the HTML and CSS that you're used to. And the layout that will cover today.
Jeff Terrell: Likewise for iOS development, you have to use either Swift or Objective C. They have their own API for doing displaying things on screen and accessing hardware.
Jeff Terrell: And furthermore, for iOS, you have to use Mac OS hardware to develop on it Xcode is the only idea that you can use for iOS development and it only runs on Mac OS.
Jeff Terrell: I've heard stories by the way of people using Xcode on a Mac OS VM.
Jeff Terrell: Virtual Machine. That is, I haven't tried it. Your mileage may vary, but I wanted to pass that along as potentially a route to be able to develop iOS apps without buying Mac OS hardware.
Jeff Terrell: Another con of native mobile apps is that if you want to reach both Android and iOS devices. You've got to learn both platforms. So we're talking different programming languages and different API's to use to access the hardware and display things on screen.
Jeff Terrell: Ian says, native script as a workaround.
Jeff Terrell: Have a playground for developing for iOS on Windows, it's good to know how to look that up. Thank you.
Jeff Terrell: Native script. Okay.
Jeff Terrell: And actually open a tab for that. Just as a reminder to look that up.
Jeff Terrell: Okay.
Jeff Terrell: But there are some pros of using native mobile apps. And there's a reason that a lot of people still develop apps native apps. This way.
Jeff Terrell: First of all, these are the official choices for development on these platforms. And so, that tends to meet better documentation better support maybe better user communities, maybe more users that are trying to do more things. And so if
Jeff Terrell: You know, one out of 1000 developers has taken a particular path that you're taking and this weird sort of offshoot decision.
Jeff Terrell: Off of the mainstream because there's millions of developers, there's a chance that somebody has already gone down that path and documented it well enough that you can follow in their footsteps.
Jeff Terrell: That's a valuable thing.
Jeff Terrell: Another Pro is better access to full capabilities of hardware. For example, if you're trying to get into the sensors on an Android device or iOS device.
Jeff Terrell: Sometimes this can be a little bit flaky or finicky or difficult to access from one of these cross platform mobile apps and for something like a responsive app responsive web app there, you might not be able to access those sensors at all. If there's no web based API to do so.
Jeff Terrell: Some apps need to care very much about performance. And so for example, if you're doing a game where frame rate is pretty important, then you might need to use a native app because the cross platform apps just don't have the performance that you need.
Jeff Terrell: And lastly, this is
Jeff Terrell: It.
Jeff Terrell: It's surprisingly important they often just feels better for users of that platform.
Jeff Terrell: And
Jeff Terrell: This is, this is kind of cosmetic and, in some sense, it's not as important, but it can be surprising. I mean, when you when you're using an app on you know you've got your iPhone or you've got your Android device.
Jeff Terrell: And you come across an app that just seems to sort of define its own way of doing things.
Jeff Terrell: This is related to you remember from design principles we talked about use existing patterns.
Jeff Terrell: Basically that that's what this is about. If you're using one of these cross platform frameworks. Sometimes the
Jeff Terrell: finer details of how something looks and feels don't line up with what the conventions are for that platform.
Jeff Terrell: And it can be a kind of a weird experience for users that is a little bit off putting. So that might not be something that y'all care as much about your client might care more about but
Jeff Terrell: Yeah, I mean, it's not the most important thing in the world, but it's something to be aware of.
Jeff Terrell: Okay, next up, I want to talk about cross platform.
Jeff Terrell: Mobile App frameworks. Some examples of this would include React Native
Jeff Terrell: Which uses JavaScript or TypeScript and this is my preference for doing mobile app development, by the way, I'm not, I wouldn't consider myself an expert in mobile app development. There's, for example, I've never done any significant native app development so
Jeff Terrell: So yeah, I mean, I think I have some opinions about this that are maybe somewhat informed but but I'm not an expert.
Jeff Terrell: Flutter is another example of one of these frameworks and it uses the Dart programming language a little bit unusual.
Jeff Terrell: And there's another one from Apache called Cordova and this basically lets you write a web app using familiar web technologies and then Cordova will package it up into a mobile app that you can upload to an app store.
Jeff Terrell: I think, I think, the way this works is just with a web view like a web view is kind of one of the things that you can usually access on a native platform.
Jeff Terrell: For example, browsers would use this to actually render the HTML and CSS with JavaScript, and all that kind of stuff. And so I think all Cordova is doing is letting you write your web app, and then
Jeff Terrell: Putting that in the context of a very simple web view and throwing an icon on it and uploading it to the App Store, that kind of thing.
Jeff Terrell: Now cons of these kinds of cross platform frameworks, is that they, it might be difficult to access device hardware.
Jeff Terrell: It's, it's always, you know, it's not the official way. And so somebody has to bridge the official way over into your framework of choice and secure depending on somebody to do that and they might have done it in a weird way.
Jeff Terrell: Might not be very documented and there are some weirdness is there sometimes.
Jeff Terrell: So if you need, you know, deep integration with the device, you might should go with a native app platform.
Jeff Terrell: Another con is that it these kinds of apps tend not to feel as authentic compared to native apps. This is the point I was making earlier.
Jeff Terrell: And you typically get worse performance than a native app, which is not a problem for most apps only for things like games where you really need that framework frame rate up
Jeff Terrell: A pro here is that you only learn one platform and you can reach both Android and iOS devices.
Jeff Terrell: So that's a big win. You don't have to learn to different languages. You don't have to learn to different API's and ways of like displaying things on screen and different widget names and all this kind of stuff.
Jeff Terrell: Another Pro is that some of these platforms are designed to be really familiar to dance with certain kinds of experience.
Jeff Terrell: So especially web. Web app and web developers. If you're familiar with doing web app development than React Native and Cordova are going to be very friendly, very familiar.
Jeff Terrell: To catch up on some comments here. Ian says correction related to native native scripts.
Jeff Terrell: That would be more of a cross platform dev like we're seeing on this page. This slide.
Jeff Terrell: Okay. But yeah, maybe you can do dev on on deaf or iOS apps without a Mac OS device. And you can do it with React Native and probably flutter as well and Cordova as well if if you develop on non Mac OS hardware, you can actually maybe that's approach should have mentioned, you can
Jeff Terrell: Create an iOS package. I'm pretty sure you can even upload that into the Apple App Store, even if you don't run Mac OS, you won't be able to test it, but you can at least
Jeff Terrell: Create it Jacob also recommends looking up Caitlyn multi platform. I wasn't aware of that. So that'd be another thing. So I guess Caitlyn Kenna if you reach both
Jeff Terrell: Okay.
Jeff Terrell: Progressive Web Apps.
Jeff Terrell: This is kind of this is a newer technology. I don't feel like it's really gained a lot of traction yet in the market.
Jeff Terrell: It is a technology that is kind of been up and coming for a while. I think Google has pushed a pretty heavily
Jeff Terrell: And I think sort of strategically Apple has not been super enthusiastic about it because it undercuts the profits that they get from their app store.
Jeff Terrell: SO I THINK THEY HAVEN'T BEEN REAL, REAL enthusiastic about adopting all the features there. But basically what this is is a web app that you can sort of install as an app on your mobile device from the browser.
Jeff Terrell: So for example, if you're using iOS. I tried this out I think last year. If you're using iOS, you can actually
Jeff Terrell: In your mobile Safari app, if you click around in it, you can get to an option that says like for a particular page. Add To Home Screen. And what that will do is create an icon with
Jeff Terrell: That app on your home screen, as though it were an app. It's not an app is just a website, but you've created a an icon, as though it were an app on your phone.
Jeff Terrell: There are things that you can do for your web app to make this more capable, so you can specify like what icon to use and different things like that.
Jeff Terrell: And then you don't need an app store membership needed. You don't need one. So you can just give your users can sort of install your app without you getting an app store membership.
Jeff Terrell: By the way, this is like 25 bucks for Android for life. I think and 100 bucks a year for an Apple Developer membership just upload stuff to the app store. So you can save some money that way.
Jeff Terrell: Now one con here that's also true of responsive web app says we'll see next is that you only have access to hardware that there is a web API for
Jeff Terrell: So you can do things like location and probably camera and things like that, but
Jeff Terrell: You might not be able to do accelerometers. If I don't think there's a web API for that.
Jeff Terrell: Right. And then I tried this around this time last year to see how it would work.
Jeff Terrell: And I had some issues when cookies would expire on a progressive web app. I think what I did is I I try this out with a Facebook particularly Facebook friends page.
Jeff Terrell: And just to add a an icon. See how it worked. And it worked well for the first week or two, but then my cookie expired and I could not use the app, it wouldn't
Jeff Terrell: Show me anything you so I think all I showed was a login screen. And at that point I even if I logged in, it wouldn't keep the cookie around
Jeff Terrell: And basically, I would have to just go back to my browser log into Facebook if necessary. Go to that friends page and click Add the add to home screen again to create a new
Jeff Terrell: Version of it. So not a great user experience. I don't know, things have changed since then, but this might be part of the reason why progressive web apps aren't as popular if you don't need to mess with authentication and sessions and stuff like that, then this might be a good choice.
Jeff Terrell: Finally, responsive web apps. This is a web app that's designed to look good at small screen sizes. It's just a web app. This isn't mobile app at all, but obviously mobile devices have browsers. And so you can access these things.
Jeff Terrell: Con, which I should have said also for progressive web app is that there's
Jeff Terrell: Well, it's different. Sorry, the con here for responsive web apps is that there's no home screen icon available so mobile users must
Jeff Terrell: Bookmark. The site or find it some other way every time they want to use it. And furthermore, this is the candidate applies to both progressive web apps and responsive web apps.
Jeff Terrell: Mobile users would have to discover your app without the App Store the App Store is a way that a lot of a lot of apps get discovered just by searching in the app store.
Jeff Terrell: Responsive web apps are fairly easy to do.
Jeff Terrell: And they get a really wide reach if you do it well your website and your web app can work on any device.
Jeff Terrell: Regardless of screen size, regardless of whether it's mobile or, you know, laptop or desktop or whatever. So this is a good idea is really probably a good idea to do anyway, even if you're not targeting mobile or even if yeah
Jeff Terrell: It's a good idea.
Jeff Terrell: We'll talk more about this later. Maybe today, if I can get there.
Jeff Terrell: So that's what I was going to talk about just kind of laying out some some analysis for different choices you can make for web and mobile apps, any questions about anything here.
Jeff Terrell: Okay.
Jeff Terrell: Okay. So finally we get to lay out yeah I'm doubting. I'm gonna get through this today, but we'll just carry over into Wednesday's lecture as needed.
Jeff Terrell: Right. Why are we doing this. Why are we talking about layout.
Jeff Terrell: To put it in the context of the course and the assignments that you have to do. You've already designed the UI and sigma with your clickable prototype and you have to at some point before assignment eight. You have to actually implement those designs.
Jeff Terrell: So rather than dragging and dropping graphical elements around in a graphic design app like big night you're going to need to implement them.
Jeff Terrell: In whatever
Jeff Terrell: Framework that you need and that you're going to have to figure out how to display these things in code.
Jeff Terrell: For your app so that you can just play a variety of things as data changes and as screens change and things like that.
Jeff Terrell: I thought it'd be worth talking about a little bit because trying to figure this out. If you don't really know what you're doing and you don't understand some of the underlying concepts can be really frustrating.
Jeff Terrell: just googling around trying to say why is this appearing there it's, it can be really frustrating and sometimes it helps to have take a step back.
Jeff Terrell: Remember debugging, principle number one understand the system. Sometimes you can take a step back and think about it and learn what the underlying concepts and principles are and then your problem. Makes sense, or at least maybe then you know what to Google for specifically
Jeff Terrell: So having a little bit of groundwork here can can help avoid some significant frustration.
Jeff Terrell: And also using modern approaches can really help make your app or your website a lot more accessible to those with accessibility issues and concerns. So as one example blind users.
Jeff Terrell: Of your software will rely on a screen reader to use the app at all. They have to be told early
Jeff Terrell: Every, everything that's happening on the screen. It's actually pretty interesting to see them use
Jeff Terrell: Use use the app you can download, screen readers and try it yourself. Just close your eyes and try to use your app without
Jeff Terrell: Without seeing anything. It's a challenge, but if you use these modern approaches they tend to be a lot more friendly for screen readers and other accessibility concerns.
Jeff Terrell: Another reason I want to talk about this is that I'm going to show you some modern tooling or for using layout and exploring different layout options.
Jeff Terrell: And if you know some of these tools and at least see kind of where to go to figure some of these things out that can save you some time as well so
Jeff Terrell: Yeah, that's enough for now, let's say, a couple more words about that a minute.
Jeff Terrell: I'm assuming that you know some of these foundational things
Jeff Terrell: If you don't, I, I'm going to give you just some basics here that will hopefully orient you to what I'm talking about today.
Jeff Terrell: If you don't know this stuff. Just try to follow along. I think I don't think it's too complicated. And you'll also see a lot of examples of this actually happening so
Jeff Terrell: Hopefully it'll come together and make sense. But anyway, HTML describes the content of a web document and it includes a tree of data structures. So a lot of nesting here.
Jeff Terrell: Each of these elements is surrounded in angle brackets. That's kind of how the syntax works, but some you can have like an opening tag and a closing tag and within that are the things that are nested inside of that node inside of that element.
Jeff Terrell: All right, and then each element can optionally have attributes. So for example, in a tag is going to be a link and that's going to have an attribute of a trap equals whatever you are relevant, you're pointing to.
Jeff Terrell: So in this case, the attribute name is a trap the attribute value is example.com
Jeff Terrell: Alright CSS describes the style of a web document.
Jeff Terrell: So the way this works is there's a rule set that includes a selector and one or more rules and your, your, the entire set of styles for your document is described by a series of rule sets rule sets.
Jeff Terrell: You can have as many as you need. Each one of those rule sets has a selector and one or more rules. A selector select which elements and the document are affected by the rules. So pound rapper selects the element with an ID attribute of rapper.
Jeff Terrell: Talk about attributes.
Jeff Terrell: Dot box selects any element with a class attribute of box.
Jeff Terrell: And input brackets type people taxed selects input elements with a type attribute equal to text.
Jeff Terrell: So that's the selector and then once you've defined which elements are
Jeff Terrell: Affected by this rule set the new to find the actual rules and each one of these rules would contain a property and devalue, for example, background color green
Jeff Terrell: So I think most of you have seen this already, I hope. And again, if not, I'm hoping that it's not going to be too too weird or alien to you, you'll be able to follow along.
Jeff Terrell: Some of you are not creating web apps. And that's really what I'm focusing on today is how do you do this kind of stuff for add layout for web apps.
Jeff Terrell: As I mentioned Cordova progressive web apps responsive web apps all use these technologies directly is exactly the same things because it is a web engine actually operating
Jeff Terrell: At some level, and then other concepts relate quite strongly to other platforms. So React Native is a good example React Native requires the use of flex box layout exclusively for all of its layout needs.
Jeff Terrell: And it's going to be doing a lot of work behind the scenes to convert and compile
Jeff Terrell: Flex box layout into whatever the native platforms layout system is
Jeff Terrell: But that as as that might indicate
Jeff Terrell: Flex box layout actually is all that you really need
Jeff Terrell: So anyway, even though I'm only talking about layout for web apps. There's a lot of applicability to a lot of other things.
Jeff Terrell: native mobile apps and custom frameworks like flutter might not use them and you might even be doing something like I know the VR Maurya project is doing a VR app. So I can I help you with layout for for that project. I'm sorry, don't know the first thing about it.
Jeff Terrell: And I don't even not even quite sure what layout means in a VR app. Anyway, moving on.
Jeff Terrell: So, in such cases where you're really not directly served by understanding how web layout works.
Jeff Terrell: I would suggest focusing on just the general paradigms for how layout can be controlled even apart from individual you know syntax and things like that.
Jeff Terrell: As well as general techniques for using modern tooling to explore layout options and I will be exploring layout options and tweaking layout rules and things like that.
Jeff Terrell: In my browser. So I'll show you how I do that. And you can try to just take away like okay there probably are some good tools that I can use to actually explore what the options are and tweak things until they look right in a more interactive way.
Jeff Terrell: So as an outline for the layout side of things here for the lecture I'm going to talk about display types.
Jeff Terrell: Whether different ways that something can be displayed, how do you position elements and how can you control that different sort of paradigms for that.
Jeff Terrell: Want to spend some time on flex box layout and we'll see how far three right that I can get. And then I'm just going to briefly mentioned grid layout and responsive design.
Jeff Terrell: Alright. So to start with, let's talk about display types as to include block display inline display float display.
Jeff Terrell: And before I talk about anything special. I need to talk about what normal flow is so this is basically just the default location of browsers are going to assign to a given element.
Jeff Terrell: This does depend on the dimension dimensions out the browser window.
Jeff Terrell: But this is just called normal flow. There's two types of normal flow.
Jeff Terrell: This is as opposed to float display. So we'll talk about that in a minute. But the two types are block display an inline display.
Jeff Terrell: Okay so block elements that is elements, whose display type is block their intended to stack only vertically
Jeff Terrell: And they will take up all the available horizontal space. So they'll sort of be here. And even if they don't need to take up even if you know they're this wide, they're gonna make sure everything to the side of them is cleared and the next thing is going to appear below that block element.
Jeff Terrell: Example of examples of this would include paragraphs. So it's not like you can have one paragraph and then another paragraph that starts there. That's kind of the point of a paragraph is that it's below the the preceding stuff.
Jeff Terrell: Headers like an H1 tag or H3 or whatever you want to use those are block elements doesn't doesn't usually make sense to have a header, followed by
Jeff Terrell: Text right beside it.
Jeff Terrell: And you can control this by setting the display block property on a an element to force it to display as a block. So I'll show you an example of that in a minute.
Jeff Terrell: Inline elements flow, left to right and rap to new lines.
Jeff Terrell: And they really more effect like how stuff is displayed, but not so much were so for example, there are elements for I italicizing texts and emphasizing it for making it bold there's in line tags and the inline elements for indicating that you have code markup that should be Amano spaced.
Jeff Terrell: Links are in line elements. They're not going to push everything off away from the sides. They're going to just kind of be right where they they would be otherwise and affect the style or something about that element and you can force this with CSS display in mind.
Jeff Terrell: So let me
Jeff Terrell: Let me show normal flow here.
Jeff Terrell: Okay.
Jeff Terrell: And I can. So one thing about this. If I right click here and say, inspect element.
Jeff Terrell: You can bring up your, your web tools here.
Jeff Terrell: This is a developer tools and these are really, really useful.
Jeff Terrell: This is kind of the thing to use for web layout to tweak things and try things out and I'm hoping that some more things exist if you have to do like a native app that you can do something like this, because this is incredibly useful.
Jeff Terrell: I'm using Firefox, but similar tools exist for Chrome and Safari and any major browser.
Jeff Terrell: But anyway, here's some examples. So H ones are block elements paragraphs are block elements list items are block elements.
Jeff Terrell: You can see the tree of HTML here, but some elements are in line like em tags strong tags code tags strike through tags and links.
Jeff Terrell: Notice as I'm hovering over each of these things, it indicates on the page on the left hand side, you know what, maybe I should make that bigger indicates what thing is being hovered over we try to make this bigger
Jeff Terrell: Okay, right. So I can hover over
Jeff Terrell: Each of these things. And I get an indication of where that is in the page on the left hand side.
Jeff Terrell: That's kind of useful.
Jeff Terrell: Um, I can also
Jeff Terrell: Change.
Jeff Terrell: The text here or change. Sorry, change the style by editing the style rules.
Jeff Terrell: But before I do that, let me show this. So notice that like the emphasis, for example, there were two words. There's a word break that as I resize the page. This actually wrapped around but this strong tag actually covers both of those lines.
Jeff Terrell: To see how that works that that's kind of what inline elements are doing here.
Jeff Terrell: They're not really controlling where something should be there just controlling how it looks. Is, is one way to think about it. That's kind of a simplification, but it's approximately right.
Jeff Terrell: Another thing I can do is, let me see. Let students to strike through tag, I'm going to actually change this.
Jeff Terrell: This particular element. And I'm going to force it to be.
Jeff Terrell: Displayed blocks block. Alright, so I just type that in here to this element and look at that strike through now pushes everything after it down to a new line.
Jeff Terrell: And if I change this little bit, you'll see that it made sure it started on a new line as well. So that's what display block does
Jeff Terrell: Are just for fun, let's see what it would mean for h1 to be this play my matter.
Jeff Terrell: Didn't really matter because a p tag is a display block anyway. So it started over with a new
Jeff Terrell: Habit. If I change both of those two enlightened and we just roll right from one end to the next. So that's a little bit different.
Jeff Terrell: Okay, um,
Jeff Terrell: Just seeing if there's anything else I need to talk about there. Now is there. Are there any questions about normal flow.
Jeff Terrell: Okay.
Jeff Terrell: So I'll talk about floating elements.
Jeff Terrell: Don't really want to spend a lot of time on this, but let me. Yeah, let me just start with the
Jeff Terrell: I'm going to say a few words about it. Alright. Basically, this is like a graphic in a magazine article where you want other things to flow around that thing. So you want us to sort of float off to the left or off to the right and let other things flow around it.
Jeff Terrell: Floats do not contribute directly to the size of parents, and we'll see an example of what that looks like in a minute and how you can get surprised by that.
Jeff Terrell: Also different window sizes can be surprising. So you might test your flow out on one window size but if you don't pay attention to the fact that, you know, the floats are not contributing to the size of parents
Jeff Terrell: You can be surprised by this different amounts of text or other things that are floating around your floated element can also have different effects.
Jeff Terrell: So, usually a good combination to use with float is to also have clear on some element that follows it to make sure that whatever it is that should come after and should be cleared up the float is actually cleared. I'll give you. I'll show you an example of this.
Jeff Terrell: You can clear only things on the left, sorry left for you would be this, you can clear only things on the right or you can just clear both and in most cases, you're, you're going to want to clear both
Jeff Terrell: Okay so floats.
Jeff Terrell: Example of this. Okay.
Jeff Terrell: We have a simple float example here. Notice, first of all, that body I have, I put a border around body to indicate kind of what the extent of body is I can also indicate that by hovering over the body tag and my inspector.
Jeff Terrell: And notice that the second float that second green box. It's actually hanging below a body. So it's overflowing the body which is kind of interesting. And this is because the float tag is not contributing to the size of its parent
Jeff Terrell: Okay, for this floating example what I've done is I've set some div tag elements to have a class of box.
Jeff Terrell: And I've those for that class. I have a style rule that says float left
Jeff Terrell: I have hard coded within hype here.
Jeff Terrell: As well as a little bit of margin.
Jeff Terrell: So 30 pixels to the right and 10 pixels on the bottom.
Jeff Terrell: So I could actually change this and just let it be automatically sized by the browser.
Jeff Terrell: And noticed. In this case, we're still wrapping two lines around it because we have a little bit of margin on the bottom.
Jeff Terrell: So if I hover over this. You can see that yellow little bit faints but you can see the yellow is indicating the like a surge left and right margin.
Jeff Terrell: syndicating where the margins are for this element. And so the float the the text is going to wrap around the entire floated element, including it's margins.
Jeff Terrell: Aren't really talked about what margins are, but it's just kind of padding or space outside of the element to separate it from its neighbors.
Jeff Terrell: Okay, so let's try. Let's re enable these
Jeff Terrell: Change floater right so you can see what effect that has again, we're still wrapping around the float with this text, but we're not
Jeff Terrell: In this case, that the float is on the right. Okay.
Jeff Terrell: So let's check this out. Let's
Jeff Terrell: Let's swap the order. This is something you can do in the dev tools you can actually just rearrange your HTML hierarchy.
Jeff Terrell: And so we're swapping the the paragraph order now we have this short paragraph to start with. And the longer paragraph as a second paragraph and look at what's happening.
Jeff Terrell: The first float is still floated as far left as it can go. But the second flow is only floated relative to
Jeff Terrell: This first float. We haven't gotten past where this flow should end. And remember that everything floats around a float all of the text and images and anything else.
Jeff Terrell: Is going to float around whatever the photo thing is, or maybe I should say flow around whatever's floated, and I would include this so this second float is flowing around this one.
Jeff Terrell: And obviously, this just looks kind of weird. And so what we really want to do is change this particular element to have clear of
Jeff Terrell: Our. We could also define that here for that box style rule.
Jeff Terrell: In that case, the
Jeff Terrell: The box is clearing, but the text is not notice this text actually occurs after this in the markup. We go from this div down to this paragraph, but where it's laid out again everything is wrapped around the floating elements. And so we just pick right up where we left off here.
Jeff Terrell: Okay, that makes sense for floating elements.
Jeff Terrell: No questions.
Jeff Terrell: table layout, you can actually make things render as tables, even though they're not actually tables and there are some display properties to make that happen.
Jeff Terrell: Here's an example.
Jeff Terrell: So this has this is a form. The end result is going to look like this. First name, last name, age.
Jeff Terrell: And each one of these rows is in a div element which has a label and an input.
Jeff Terrell: Neither did with the label and an input for last name and another pair with for age.
Jeff Terrell: And so
Jeff Terrell: For the form we say display table.
Jeff Terrell: For any div that's under a form we make that display as a table row.
Jeff Terrell: And then for any label element that's under a form or input element that's under a form and make that display the table so
Jeff Terrell: And as a result, we get this which actually is laid out as a table.
Jeff Terrell: Notice the text align right means that all of the colons lineup here.
Jeff Terrell: But this, this has nice vertical alignment here, all of the left edges here, line up all of the right I just hear line up all of the right I just hear line up. So it is kind of tabular and it's actually just rendering as a table. So it's kind of a cool thing.
Jeff Terrell: I've stopped me if you have questions.
Jeff Terrell: Now I want to talk about positioning elements relative, absolute and fixed positioning
Jeff Terrell: Don't see any questions. Alright. Static positioning is just the default this is just where the browser would place thing is normally. So this is kind of like normal flow that we talked about.
Jeff Terrell: And static pre positioned elements are considered on positioned which becomes relevant a little bit later.
Jeff Terrell: Relative to positioning
Jeff Terrell: Offsets an element from its static position.
Jeff Terrell: And you can say, I want it to go a little bit top or a little bit left. You can even use negative numbers here.
Jeff Terrell: You can also specify bottom and right but that's a little bit trickier because you don't always know where the bottom of rights going to be, it might depend on you know what the font sizes and things like that that your browser is going to determine for you.
Jeff Terrell: Know that space is still reserved for the elements static position.
Jeff Terrell: Let me show this in action here.
Jeff Terrell: These two
Jeff Terrell: Words are inside of span with ID special which has positioned relative top negative five pixels left negative 10 pixels.
Jeff Terrell: So in other words, this span this in line element is positioned relative and so we pull that out of its normal spot and move it up five pixels and to the left 10 pixels.
Jeff Terrell: If I take those online sort of on top of those is this course then
Jeff Terrell: That in line element that span would appear normally
Jeff Terrell: But we can move it. Notice that it it does take up space it reserve space for it, even though
Jeff Terrell: It's not going to be in this position and see that that period, never changes, a period is where I should be here, but even if we move that that period. It just stays there spaces reserved
Jeff Terrell: So I could
Jeff Terrell: Move this to overlap that text.
Jeff Terrell: That's relative positioning
Jeff Terrell: Share any questions, let me know.
Jeff Terrell: absolute positioning
Jeff Terrell: This is kind of position, an element relative to an ancestor, a specific ancestor its
Jeff Terrell: Relative to the nearest position to answer, answer ancestor. Remember that static positioning counts as and positioned. And so anything that doesn't have position. Something special on it.
Jeff Terrell: does not count as a reference frame.
Jeff Terrell: So anything that is a position absolute is going to skip over those and find the next thing that is positioned in some way we can still have top and left properties. And in this case, we're going to say position absolute
Jeff Terrell: No. Note that in this case space is not reserved for the elements hypothetical static position.
Jeff Terrell: Okay, so let's look at this demo here.
Jeff Terrell: If I look at this
Jeff Terrell: This class here or this. So I have my rapper class. And inside that wrapper is a
Jeff Terrell: div that is absolutely positioned
Jeff Terrell: The CSS rules for this include position absolute top is 30 pixels and left is 40 pixels.
Jeff Terrell: Alright, so what is this relative to its relative to its reference frame which is the nearest ancestor that actually has a position. So does this one have a position in it. No, I could enable one by tackling that but I'm not gonna do that yet just body well body is
Jeff Terrell: I guess body is positioned. I don't know if that's a special case, or what but body is position. So it turns out that this
Jeff Terrell: Absolute div is going to be positioned relative to the body. So in other words, top is 30 pixels down from the top of the window and the left is 40 pixels over from the left hand edge of the window.
Jeff Terrell: Now if I want to change this, this guy to be positioned relative. This is the first ancestor, then
Jeff Terrell: You can see that the absolutely positions did is now 30 pixels down from the top of that def that rapper div and 40 pixels to the right.
Jeff Terrell: All right, so position relative can be used all by itself, even if you don't specify a laughter top property, it still can be useful to say position relative because that establishes that element as a reference frame.
Jeff Terrell: Okay. Hopefully that's clear again stop me. Let me slow down.
Jeff Terrell: If
Jeff Terrell: Something isn't clear. If you have any questions, alright fixed position. I'm going to go through this kind of quickly. It's just weren't element stays in a single spot on the screen. So look at this element up here.
Jeff Terrell: This is a position fixed element. And it doesn't matter where I go in the page that yellow box is always going to be there.
Jeff Terrell: Nothing flows around it. I think this site has been careful not to
Jeff Terrell: Make this top menu.
Jeff Terrell: Overlap the the fixed element. But see how the menu here just it just falls underneath that element that's fixed positioning
Jeff Terrell: Sticky positioning is a little bit newer. This is a combination of static and fixed
Jeff Terrell: And the easiest way to talk about. This is just to show it.
Jeff Terrell: So here's an example. I found that
Jeff Terrell: Look at this. Hang on.
Jeff Terrell: Whatever, whatever going
Jeff Terrell: Okay, now it's working. So see this green fish.
Jeff Terrell: It stays within the context of its parent
Jeff Terrell: But it sort of falls to the bottom.
Jeff Terrell: So that would be an example of sticky.
Jeff Terrell: And you can look at the details here. If you're curious, I guess this would be aligned self flex and we'll get into flex box in a minute, or is that dyno. I don't know. Anyway,
Jeff Terrell: And then look at these two
Jeff Terrell: So those are the same thing, but at the top and one of them actually has a little bit of space that it reserves.
Jeff Terrell: So that's sticky positioning. That's something new that you can do.
Jeff Terrell: If you're interested in using that check out the compatibility table from, can I use calm to make sure that
Jeff Terrell: Your target devices are going to be able to support it.
Jeff Terrell: There are some caveats about kind of what support it there. So check that out and I use is a great site. By the way, if you're doing web development, figure out what which browser support which features.
Jeff Terrell: Okay, questions about sticky positioning
Jeff Terrell: Okay, let's move in finally to flex box.
Jeff Terrell: I'm definitely not gonna have time to cover everything that I wanted to about flex box.
Jeff Terrell: I'm
Jeff Terrell: Trying to decide I want to stop a little bit early for some takeaway questions.
Jeff Terrell: Um, do I want to start flex box and not finish it. Do I want to skip down to grid layout and responsive design. I don't even know if I have enough time to talk about responsive design.
Jeff Terrell: Or I mean to anyway, I'll just go, I'll just go as far as I get as far as I get. And we'll pick it up next time alright flex box layout.
Jeff Terrell: So some important concepts for flex box layout glass container and flex items.
Jeff Terrell: Flex layout is an opt in thing. So you have to say display flex in order to get flex box layout to apply to your element. And if you say display flex on an element, then that element is considered is called the flex container.
Jeff Terrell: And what that means is that it's children it's direct children are the things that are going to be laid out according to flex box positioning
Jeff Terrell: Those direct children of the flex container are called flex items.
Jeff Terrell: And the point of flex box is to enable flexible dimensions in one primary dimension.
Jeff Terrell: It has a little bit of control over the cross dimension.
Jeff Terrell: But it's really about giving you control over, over one dimension and letting things flex in one direction.
Jeff Terrell: So that direction can either be row or column.
Jeff Terrell: And this should be like CSS is called flex direction, you can say flex direction, row, row reverse column column reverse
Jeff Terrell: And basically this is just saying, Do I want the flex box to grow and shrink things in a column or in a row and then you can add reverse if you wanted the items to be reversed relative to their order in the markup.
Jeff Terrell: I'll show you some examples.
Jeff Terrell: And
Jeff Terrell: By default for at least for English language row is the defaults on the web in browsers. I think this actually depends on what orientation, your language is and so
Jeff Terrell: I think what like Arabic and Hebrew are actually right to left languages, a couple of examples of that. And so if you're using that as your native language for your browser. I think you're
Jeff Terrell: Well, I guess your valid your default value is probably still going to be row by row in this case is going to mean
Jeff Terrell: Sort of like reverse for us English speakers.
Jeff Terrell: I think traditional, if I'm not mistaken Japanese and Chinese languages are actually written, top to bottom first top to bottom and then left to right, so very different than than English. And in that case, I think the default value would be column.
Jeff Terrell: Column is also the default for React Native and I think that was a good choice because most people use their phones, by default in portrait mode, rather than landscape mode. And so it just kind of works out better
Jeff Terrell: Probably one of the most important concepts for flex box layout is to understand what is the main access and what the cross accesses. And this is what is controlled by the flex direction property.
Jeff Terrell: Flex direction determines the main access and the perpendicular direction is called the cross access. So for example, if you by default. Just have flex direction is row then your main access is going to be the horizontal axis and your cross access is going to be the vertical axis.
Jeff Terrell: So CSS properties effect either the main access or the cross access and so they are dependent on the flex direction. So we'll see some examples of these CSS properties in just a minute.
Jeff Terrell: But it can be surprising that they can either affects this motion or this motion, the same property can affect either one. And it really just depends on the flex direction.
Jeff Terrell: Me demo that flex direction. I'm going to inspect the rapper element here.
Jeff Terrell: I said display flex. So I had to do this in order to opt in to flex box layout.
Jeff Terrell: Firefox helpfully told me to get a little indicator here. Hey, this element is using the flex box layout.
Jeff Terrell: And then I also said flex direction is row. And so there are three children to this user just paragraph tags with certain style to make it kind of looked like a box.
Jeff Terrell: But flex direction row. Does this if we said row reverse notice that now we're going 321 even though the markup is indicating 123. Furthermore, notice that everything is sort of right aligned, since we did reverse
Jeff Terrell: You can also say column for these
Jeff Terrell: Column 123 or or column reverse would be 321
Jeff Terrell: So that's flex direction. And again, this is determining the main access and cross access. So in this case, the main access would be vertical and the cross access would be horizontal
Jeff Terrell: Okay, okay, maybe three minutes to get through the next section here justifying on the main access, we can use justify content to justify items on the main axis.
Jeff Terrell: And I'll walk through. I'll show you examples of this in a minute and a line items is for the cross access
Jeff Terrell: So again, if you don't have these ideas of main access and cross access in mind. You'll be surprised that either one of these properties can affect either horizontal or vertical positioning
Jeff Terrell: flexi start actually depends on the writing direction. So for English it's left and top
Jeff Terrell: But it also can depend on the flex direction. So, for example, with row or verse flex star is going to be on the right hand side, even for English
Jeff Terrell: And flex sandal be on the opposite side. Alright, so let me show you flex alignment. And I just want to
Jeff Terrell: Look at various options here for the end this is just kind of a similar thing. One of these a special so it has a little bit of a different style of attached to it, but this is my flex box container.
Jeff Terrell: WITH THREE FLEX items in it.
Jeff Terrell: I'm going to change the first of all the justify content right now it's on flex start, which is the default, but if I change it to flex and notice that everything shifts over to the right. So it goes to the end. If I change if I add a flex direction row reverse
Jeff Terrell: Changes start. Notice the start now is over on the right hand side because we're in reverse.
Jeff Terrell: Okay.
Jeff Terrell: Anyway, flex start flex and is on the right hand side. You can also do center.
Jeff Terrell: So that's nice. You can do space around. And what this is doing is, if all the available space we
Jeff Terrell: put half of a unit on the right and left side outsides and put a full unit in in between the elements space around
Jeff Terrell: Space between takes away any space on the outside edges and only allocates the available remaining space between elements and then space evenly is allocating the same amount of space, both between and around
Jeff Terrell: Alright, so
Jeff Terrell: Let's do let's look at its default value. And let's look at this. So a line items. Again, remember this is going to be the cross
Jeff Terrell: The cross access. So in this case, because we're in a flex direction row the cross access is vertical. We've got flex start. We've got flex end
Jeff Terrell: We've got center.
Jeff Terrell: And notices to is really only thing that's changing here.
Jeff Terrell: So that this is vertical alignment, which used to be really hard. Vertical. Vertical centering which used to be really hard in HTML, but with flex box is really easy.
Jeff Terrell: And then we also have stretch is kind of try to make everything grow to fill up all the available space.
Jeff Terrell: And then there's also baseline baseline is a little bit different because it's it's doing the baseline of the actual text. Now the text actually lines up, even though the boxes don't quite
Jeff Terrell: So you can play around with different values there.
Jeff Terrell: And I think that's all we have time for today. We'll pick up from here tomorrow or Wednesday and talk about flex basis and some other aspects related to flex box layout and then we'll continue with layout and move on to your infrastructure.
Jeff Terrell: So for the remaining two, three minutes please go to polivy.com slash Jeff Terrell and I just have some takeaway questions I'd like to get a sense of
Jeff Terrell: Was this useful lecture and and also prompt you to think about what you learn so that maybe it cements things in a little bit more. So let me
Jeff Terrell: Activate. There we go. Alright, so when you're done with this, you can go