Summary
Core Technologies
HTML Best Practices
CSS and Responsive Design
JavaScript Environment
Technology Stacks
Single Page Applications and Modern Frameworks
HTTP Fundamentals
REST Architecture
Basic Git Workflow
GitHub Integration
Node Basics
Notes
Transcript
Use AI to help you with all this stuff. I'm going to try to, as we go through, find ways to incorporate that also in and show examples of letting AI do some things for us. I'm going to... I want everyone in here, though, to understand the technologies we talk about to the point where you can Explain them and you'll understand how they work because I firmly believe that You can't just use the other tools without understanding them.
Five weeks later, I encourage everyone to use some aspect of your I.E. or something. But I do want to make sure we have a good grasp of what it's doing. That's where I see, at least in the professional world, the people that are excelling are people that are being able to use the tools to be more productive, but understand everything and can do it themselves too. So hold on. Give us a minute. Wow. Thank you.
Part of what I'm thinking about this as a future thing for courses and how do we do that? More of that. Part of what? It's made me think more about this. It's Ryan Dahl, the guy who created Node and Recently posted on Twitter that the era of people, humans writing code is over. So... Now you said there's still room for people to be doing the design and figuring out how all this works together and architecting, but actually writing the code There's people from Anthropic and...
Some of the other AI groups that are-They're being a little aggressive on their timeline of what they think that looks like, like a couple years. Uh.
So I want to make sure we're conscious of that and trying to, you know, but you also have to understand.
Just to show some really Absolutely simple things, but things that are like the mundane stuff that you don't want to do. a bunch of stuff to, you know, like-to a different version or a different tool. Maybe we'll try to drop something like that.
Okay, so again, like I said, most of tonight is gonna be Making sure everyone is on the same page of like, these are the expectations of what you should know.
These are the core things any web application needs or needs to understand. So we are, for those of you who were in foundations, you'll hear some of the same things. We won't be going into nearly as much as we went in there, but just kind of a quick review on that. And then like I said, we'll move into some web foundation stuff.
Application development stuff, talking about what that looks like in the architectures.
I'm going to do a little bit with Node, a little bit with Express. I am going to give everyone an assignment tonight that You're going to have a little over a week to do.
It's fairly easy and it's basically something that You should be able to do based on previous work.
So it's more of a for me to get a gauge on where everyone is coming into this class with their front end screws. And then next week I plan on starting right up. Some of ourAdvanced JavaScript and TypeScript stuff that I started talking about. The intention is to start using TypeScript as much as we can. Pass. Okay. I didn't put it on the slide, but I'll mention it at the end too. Since we're past that drop now, we will do a quiz.
So I'll give all the details about when that will come out and when that will be due in the class.
Now this slide deck that I'm going to put up after class is huge.
There's 60-something slides in here. A lot of them are what we're going to spend a minute on. And then a lot of them I can put in there. There's some that I took the note slides from last week and put them in here too just to kind of have another reference for everyone. So it looks like a big, very large slide deck, but it's not necessarily. All right, so. Let's kind of start with just some general stuff that, you know, So we're going to say it was a web application.
Our course here is full stack applications. We'll get to what that means in a little bit, but it really is just more of Doing everything related to a bad decision?
But At its core, we're talking about building an application that primarily uses web technologies.
So web technologies are everything fromFar. Front end technologies, so HTML, CSS, JavaScript. Some kind of server side back end technology, Ruby, PHP, Node. Some kind of backend technology that's going to be running on a server or cloud or something like that.
And then also the protocols that connect everything together.
So The idea of a web application is pretty broad. The primary way we're going to communicate through any web application is HTTP protocol.
So in our traditional applications we're talking about, I've kind of already alluded to this, we're going to have this request response cycle.
Our browsers send off these requests. to a specific URL using one of our HTTP methods. And those HTTP methods, are going to be very distinct Depending on how we're architecting the application, if we're using a rest architecture, we're going to want to use certain methods for certain purposes.
So then we-We come around to what we kind of talk about when we say full standing. So this is kind of a-I wouldn't say newer term, but it's. It's been around for a while now, but it's not It's not like this clearly defined, like, oh, check these boxes, and that's a whole stack. So it's really just-This concept ofEnd to end, right?
If you're saying you're a full stack developer, that means you're comfortable working on all phases of development. So back, way back.
Being really good on the front end, I feel, is a-Is Kind of like a little bit of a hand skill. Because I feel like some of that is challenging, getting things visually perfect based on how somebody wants it designed. That can be challenging. Even more challenging than just writing code that produces, oh, this needs to produce this right response that comes out of processing data. So on the front end, I still see some highly specialization there.
large Organizations, you're still going to have the people that are very specialized in database that will help out with likeYou're building a very large app, fine tuning all that. The one area that I would say is still, at least for right now, is kind of been out of the realm of the developers, thankfully, is like design.
Very high fidelity figure files for So it's more of-We have to build what we're seeing.
And there's some AI tools that can help connect to Figma and pull simple things out of Figma and actually give you chunks of code and stuff.
Some things that you may Here specifically is the most classic one that goes back for a while is the lamp stack.
So that means you've got an application that's running Usually PHP some form of a MySQL database. with the Apache web server and usually on Linux.
The more recent Recent JavaScript type focus text stacks that you'll hear is mean, merge, and merge. And those are all just based on typically MongoDB or some kind of NoSQL database, some form of Express as the actual web.
Some kind of front end framework? So AngularView reactor, the current counter And then node.js as the So the idea here is your entire staff across the whole thing is somehow JavaScript focused. It's nice. This is the area we're going to kind of try to stick with most of our lectures.
I don't get in the job anymore. And then another thing that's been It was popular for a while. It's still somewhat popular in the--But this is kind of now moved to Some different ideas now. But this concept of single page applications, or some people refer to them as SPAs, It's basically, the idea there is You're building an application that is so heavily built in JavaScript and running in the user's front end, like in their browser?
Initially when you send the request to the website, to the URL that you're going to, A single HTTP response comes back with a single HTML page. And then never beyond that, Does your browser send a full request back to that server? Everything else is done with Ajax requests.
And those requests go back in the background and when they come back, JavaScript updates parts of the page.
So One of the downsides is typically in a single page application that first HTML that comes down to you is a blank page. And then you get this big bundle of JavaScript. Modern frameworks and modern Build systems will Bundle that JavaScript into multiple chunks.
But that happens. Early out, This was really bad for search engine optimization. Because at the time, All the search engines, including Google, didn't run any JavaScript on the page.
So when they were going across these sites, if they ran into one of these, all they saw was that first page.
So this was--Hello. This was that whole thing of we have these downsides, we like these front end frameworks, we're offloading some of the work from the server, there's less requests, there's more of these dynamic requests, but how do we make this better for optimization for search engines or for users. And that's where all these newer full stack frameworks came around. Next.js is probably the most popular right now, or at least.
And what that does is it, It actually kind of bridges the gap between both. So In the Next.js app, when we start looking at this, we're going to build React components inside the Next.js app. Some of those components We'll be.
So Next.js itself is running on node. It's running on a server in node. So we have all the answers to what you know. The idea is if a component doesn't need client-side functionality,For interactivity. It gets rendered in the server. and delivered in the flat HTML that comes out of the server. So that it's actually when you visit a certain route in the application, you're actually getting back the content that's on that page.
So we're going to have this situation where For the most part, our components, even though we're writing React components, become server Rendered components. But we have the option of saying, OK, but we do need some JavaScript front-end interact.
And then because we're rendering stuff on the server, We actually can securely access APIs with API key, databases, all that stuff because that code's running in Node on our server. It's not something that's going to the browser.
There's a framework called Astro.
And Astro is in the news right now because it was just purchased by Cloud.
Cloudflare is intending on keeping it open source. It's just Cloudflare is not going to put money into it for development. Astro's idea is some more of this kind of thing. Building components that render to HTML on the server that HTML gets delivered to the client without any heavy JavaScript loads and if you need to enhance it to JavaScript, you can.
So, These are our three main technologies. And I say frontend foundation, but in reality JavaScript we're going to use in the back end. Now, There's two parts to JavaScript when we talk about this.
And then there's what APIs are provided by the platform that we can use in JavaScript. So when we're writing JavaScript, For loop or if else statement. function, all that stuff is like low-level language stuff, right? That's available anywhere we can write down. Bud. Being able to query the DOM for an element and change its class. That's a DOM specific API that we can only do in the context of the DOM, which is in our web rooms.
Node provides its own APIs that don't exist in the browser. So when we talk about JavaScript, the two parts are the language and then what environment are we in and what APIs does that provide us? HTML and CSS is more straightforward, although it's changed a lot over the years. HTML is our structure. This is how we structure the pages, how we structure the content in a way that We can style it, but also importantly, structure it in a way that Makes sense, So I'll probably touch on that a lot throughout.
I'll probably mention it a lot, semantics. Semantic elements. How do you structure the content in the page so that the HTML elements you're using in your templates in your application or wherever, makes sense for the content that it is. And we talked about this in the previous course, right? Like, using headlines to structure the hierarchy of the document, usingSection is a...
Or Google or-assistive devices, what does this content mean?
And your goal should always be Your HTML should be as clean and as minimal as it can be, Using the proper structure so that it's almost inherently accessible by default, accessibility technologies like screen readers and stuff. and only add in additional wrapping markup when you need it for a reason.
So you may get into something where you're building an application that's going to spit out a a PLP, a product listing page. It's got a grid of products. And you start being like, OK, my products are going to be this div container that have this inside and this inside it. Then you start putting it together and you're like, oh, to get the styling the designers want, I actually need another wrapping container around it or something to be able to put a different board or something.
When we talk about responsive design, Or The concept of responsive design is Delivering the same HTML and styling it differently, whether it'sA mobile device or a desktop. So inherently A web page, if you think back to the last web page you put together or structured, it's a very top to bottom Structure. Most elements are block elements.
You've got a narrow screen, long scroll, And then naturally is a stacked department. This has come about for most of us when we're thinking about putting together our templates and everything for our application is typically think mobile first.
How would the data look if it was stacked on top of each other?
And then start thinking about, okay, now on desktop I want that stack of product cards to turn into a grid of product cards.
Can I do that with just the markup I have here? Or do I need to add some more? But the goal is to try to makeThank you. in both without adding special markup for one type of device.
CSS over the years has Progress has been going greatly. Great tools for layout now, Flexbox Grid.
There's a new one that just got It's not approved, it's not in the CSS spec yet, but they've all agreed on how they're going to do it.
And it's called this masonry layout. And it's for doing like-columns of different size things that all flow together, like a grid that's not an even grid. Think of that. They just recently published like this is how it's going to be and this is the CSS rules we're going to use. So now browser manufacturers are starting to implement that.
I'd say probably, I won't say daily, maybe not even weekly, but probably every month. I come across some obscure CSS thing that I don't like. So there's a lot of and that's why I said earlier like the front end stuff I feel can be challenging. There is a lot there. You can. Can I ask AI stuff for help? Like, What CSS properties would I use to create a drop shadow that the-That's definitely a good use for that, to help you find things.
So this is like our minimum. of what a valid page should look like these days? Uh... The very important, I will call it, there's two things in here that are, Pretty important. So the care set, Meditang, Is important because it tells you What type of encoding The TECPAS file is encoded. So just about every single page on the web these days anywhere is UTFA. So it's just basically saying the UTF-8 encoding of text is what's being used here.
If you leave that off, The vast majority of your site will probably look fine, but if you use any characters out of the standard ASCII, you're going to start to see little question marks and boxes with little question marks because it's not going to know how to decode that character correctly. So that's, if you're ever running into problems, that's important. You shouldn't see anything different than this, but the dot type HTML should be the first line of any HTML paper.
And then the third thing to call out that is important but doesn't look necessarily important is this viewport meta tag. So this viewport meta tag is what makes able to do a responsive design page. If you leave that tag off. Most mobile devices including iPhone I know that Google Android wants to-Um. They're going to assume Your page should be 960 pixels wide. and then scale it down to fit on your screen.
This viewport tag tells the device, basically what it says is the width of this webpage should be the device's width. And you should not do that. Zero one.
A couple pieces I'll say from this one is JavaScript is technically named ECMAScript. The standard is ECLA 262. It'sMaintained by ECHO International. European Association.
And They're the ones that every year publish a new version of drugs.
Within that year, It's put in the next year's version, which comes out in June.
You might use JSON to serialize data and put it into local storage. So just understanding the rules of JSON, and so we're reviewing it so we know moving forward this semester where we're at. Quick review. So JSON's JavaScript Object Mutation is a lightweight text-based data interchange format that's easy for people to read and write, and also easy for machines to consume and produce.
It's based, originally based on a subset of JavaScript language. Um... It's... I say it's based on JavaScript, but It is language agnostic. Every language has some-Jason.
Parsing. Parsing in Serializing. Class is done. Hello? phone rings There's two Data standards that There are two data structures that Are areRepresentative Jason. Just something to think about.
We have either collections of name value pairs or ordered list of values. So these are two different things that could exist. Every language implements those in their own way.
But they're very simple. It's also a standard of ECMO. For the most part, again, we're going to be working with JavaScript, so it's pretty much what it is, but the name value pairs data structures,Is... represented by a JavaScript object. The ordered list of values is represented by an array.
But let's just quickly go over it. for JSON. Property names need to be in double quotes. So all the JSON properties have to be in double quotes, single quotes are invalid. Any values that are strings? You need to also be in double quotes. Single quotes are in that one. Trailing commas are not allowed. So trailing comma is something like here in this address object. There's a postal code key, which is the last property in that object.
Notice there's no comment. Can't put a comment here or be in doubt with Jason. Numbers cannot have leading zeros, so if any of your values are a true number, so like this 27, you can't put a zero in front of it.
The JavaScript values of not a number and infinity are not allowed. And any property can have a value of another object. An array, a string, a number, a Boolean, or null. That is really bad. So another thing that a JavaScript object does not map to JSON well, or not well, but... In a JavaScript object, you can put a function inside of that.
And then in the context of the browser and And even though But the browser specifically right now, it's the JSON object has a dot parse and a dot stringify method, which are our main interfaces to.
Produce JSON from the JavaScript value. So that's this one, stringify. And parse is take a string of JSON data and turn it back into a JavaScript document. Okay. Let's do these HTTP ones real quick. Two slides, one here.
protocol versus report versus, you know, what are the different parts of the All that should be in those HTTP slides. that are up in Canvas, so please look through all that. Um... Again, we're not going to talk through these right now, but you should know about what is HTTP Git. What is HTTP post? And what are the uses of the two? Like Git being our normal just, I'm getting the data request.
A Git request going back to a web application should never really You take data, it's always meant to be give me something. Anything that goes back to a server to actually change any data, should go back as either a post or a put or a delete. There's reasons for that. But you don't want to ever--You take data with a different class.
You should know that like For HTML forms, we always use HTML Post.
If you want to work with the form in JavaScript. There's all kinds of things you can do. So that's kind of like just the high level of obviously there's so much more in HTTP, but again that was part of the last class. But those are the two things that are going to be the things we're going to talk the most about is probably Git and Post. As we get into someFor frameworks a little more, we will talk quickly to lead to.
From an actual web browser itself, Without using Ajax and JavaScript, I'm just writing an HTML page and opening it in a browser. The only two things you can do is get posts. Is there any normal leak? Post is what forms them. Once you layer on Ajax requests, then you can actually send the Ajax request with click-delete.
Another topic that You should be familiar with coming in here. That's just the idea of crud. And what that means? We'll be talking about that as we build databases, but what are CRUD operations, right? So it's create, read, update, delete. These are typically database operations. but they also will map to web application operations. Okay. So... When you hear true crud, it's these.
When we start talking about HTTP and web application How do we map those to HTTP verbs? And it typically gets mapped to Read. Is a git.
When we want to create something, we usually will send a post.
Typically when we want to update, We'll send a foot. So, like a patch. HTTP request? Sometimes, depending on the framework, you still might send a poster request.
All the more modern frameworks will support the newer And then delete is delete.
This is the end of the segment. The last thing I just want to quickly review is breast architecture. As we go through some of the examples in the next couple weeks, I probably will be talking about rest architecture. loosely.
what makes something REST architecture, but just knowing REST is a very popular architecture for building web applications. There is, we talked about this in the last class, but it was defined by Roy Fielding in 2000. Team that finalized HTTP 1.1. and the URL pattern. And he defined these six constraints that if you're building an API or an application.
Some of these things are a little bit looser than others. It's a little tricky as a stateless. So if you're building an API and it's a REST API, then yes, you can truly hit all these. But if you're building like a web application that's going to mostly be interactive through just like HTML templates that are coming down in the application.
It's kind of hard to do stateless without If you need people to log in. But with an API, you can't say stateless.
So what stateless just means is every request that comes back to it needs to contain everything to fulfill that request. So if it is a situation where people need to log in to access the resources, every request has to contain the authentication for that request. That's one of the constraints for rest.
So when I'm talking REST, The part that I'm going to be mostly talking about is of the uniform interface part and kind of the client server part. So the uniform interface part is just more of what do URL patterns look like. We want to build out like, oh, we want to-Get a list of all books. Okay, what does the URL for that look like? We want to get a single book. What does the pattern look like and how does that match?
Just know that these aren't technically the six, and it all comes down to Combining a URL for our purposes like the TLDR high level view of this is It's going to come down to deciding what does our URL patterns look like and what requests What methods are going to come in on those requests?
Again. We may have a contacts URL. that does give me all the contacts and create a contact, both at the same URL. But depending on if the request comes in with a get method or a post method, it would do different things in your application.
That's basically the idea. So when you start thinking about this, and how we're setting this up. It's a combination of patterns and burps, or HTTP. Okay.
But what I was going to show is if I do-let's see. so inside the On a Mac, Linux, I'm not sure where Windows puts it off the top of my head, so you'd have to search online for that. There's a get config file.
The hidden file that's used to configure Git when you set it up. Inside there you can put aliases. So like My logs command is actually the get log that we just saw with this one line graph decorate all. So you can take this same Man. And come back over here. And you can say getLaw.
And then Git init creates a new Git repository. Part of the assignment I'm giving everyone tonight, it's really kind of like a test to see where everyone's at.
Okay, so what I'm gonna show real quickIs in This is linked in Canvas underModules. This is the course GitHub repo, so if those of you who had the class last semester, I did the same thing. And this is... It's just a repository where I'm going to put demo files and stuff that I do each week in class.
Thanks. I've already created the repository for this. Um... Ultimately it'll look something like this.
You can see it's just a basic HTML skeleton. Then I'm going to open up just a terminal inside Visual Studio Code, same terminal, and I'm going to do a "Get Status".
-It's up to date with main, on the remote. I've modified the readme file and I've got a new file called index. So you can go in there and individually say git add. Index and now if I do get status again, okay Now it's in green and it says changes to be committed. It tells you kind of what to do.
It's got a small meat in it. Let's do this. It's the same turtle. Okay, so we'll do, get started. Say this again.
So now we've just made the commit. I can get status again. It tells me I'm ahead of the main. So if I can get logs.
You can see that visually that my head is pointed to the main branch. The head is what I've got checked out on my local computer and it's ahead of the main branch so I can say git push and that's going to push my main branch up to the remote.
So I want everyone when you're working on stuff that we have that'sBye. GitHub related? Get it related? I want you to be trying to interact with your repository, which is probably going to be hosted on GitHub. through some kind of Git terminal, either a terminal or the Visual Studio Code integration, or you want to go out and find some other GUI application, that's fine. What I don't want anyone doing in here, It's okay to do once in a while, but it's not something that should be the way you do it.
Because you don't want to come in here and like... Add files and edit them inside the GitHub UI if you can avoid it. Because this is not really... Yes, I can come here and add a file and do a commit all through here, but then you'd have to pull that down in your local copy too. You're better off just learning to interact with it properly through one of the Git tools.
The other thing I'm going to just quickly mention because it's part of your assignment, I'm not going to show you how to do it right now, but it's going to say that you also need to publish the page to get those pages. So once you set up your repository for this particular assignment, and you go into settings, you'll find in the settings, Submarine here. for pages, and you can get all-it's how you configure it here.
Basically it just says I'm going to deploy a certain branch. to GitHub pages and then in your repository you can see a deployment.
And that deployment should give you a URL that you can go to and see the web page being served through the program.
Client (Browser)
│
│ HTTP Request
▼
Web Server
│
▼
Web Application Logic
│
▼
Database
HTML
CSS
JavaScript