Summer '22 Week 2

YouTube Video

Resources

Video Script

Hello, and welcome to the week two announcements for CIS 526 and CC 515, in summer 2022. So this week, you should be wrapping up milestone one, which is due tonight by midnight. So make sure you get that turned in and submitted, you’ll be submitting it via GitHub. So you’ll actually post your code to GitHub classroom, make sure you make a release tag or something there. And then in Canvas, you will submit that you can also submit your Codio we’ll be doing it that way as well. So there’s a couple of different places I’ll be able to find your code, but hopefully it is both in GitHub, and in Codio that I can find it. This Friday week two lessons are due, there’s four or five different interactive lessons this week. So make sure you work on those maybe set a goal to do one per day to get those lessons done by Friday. And then next Monday will be Milestone Two, which we’ll talk about here shortly.

So for this class milestone grading, I will try and take care of grading the new milestones milestone one this week, one thing I want to do is I will take a look at your code and try and give you some code comments on GitHub. If I see anything that you can improve on or anything that you might do a little bit differently. Or if I see something that you do, that’s really cool that I like, I will try and leave some comments. If you have anything in particular you want me to look at and give feedback on, you can put that in the submission comments on Canvas, or you can put them in the release notes in GitHub, when you actually create a release. I’ll try and look for those there. You can also send them to me on Discord or via email. But if they’re in the submission comments, or the release notes, I will probably see them as I’m doing my grading. The other big thing to keep in mind for the milestone grading is please be patient. There are 20 something of you. And there’s only one of me, and this is one of two classes I’m working on this summer, and I’ve got another side project I’m working on. So it may take me a few days to get through the milestone grading each week. I’ll try and do a few each day. But please be patient and just bear with me as I get through this milestone grading because it is a lot, especially as the milestones start to get larger later this semester.

So this week, week two, we’re going into advanced JavaScript in this class, we’re going to start by learning a little bit of JSON, javascript object notation, and AJAX, Asynchronous JavaScript and XML, although that’s really a misnomer, because we really don’t do XML. It’s more AJAJ a synchronous JavaScript and JSON these days, but it was originally designed for XML. We’ll also talk about Asynchronous JavaScript, you’ll learn a lot more about asynchronous languages and using the await and async keywords in JavaScript. We’ll talk a little bit about Web Workers and how we can spawn off a separate thread in our websites. And then we’ll start introducing Node.js and some of the ways that we can use JavaScript to write a back end server in the web, which leads to some of the later milestones. So moving on to talk about milestone two in this milestone, you’ll basically be redoing milestone one. But this time, you’ll be automating it in Milestone One, we actually hard coded all of our box locations and information into our web page. In milestone two, you’re going to use JavaScript and AJAX to get those box locations as a JSON file off of a web server. And then you will programmatically build your web page using that data. Other than that, you can use the same overall design as before. So a lot of your boilerplate code from your index dot HTML and from your site dot css will be repeated in this project, you’re just working on the JavaScript part to automate that.

You may run into a couple of issues with this project. The first issue is CORS or cross origin resource sharing. If you try and request a JSON file from another website that will actually be blocked by AJAX unless that website explicitly allows it. Generally, this is not a problem if you’re working in Codio because Codio allows CORS, and so we don’t have to worry about it there. So if you’re doing all your work in Codio, and you’re loading your JSON file directly from Codio, you shouldn’t have to worry about any CORS issues. However, if you do want to test this outside of Codio, if you’re working on this code on your local machine, for example, a lot of web browsers will not allow you to make an AJAX request against your local machine’s file system, you actually have to set up a web server. And so to get around that, in the instructions, I have posted the JSON file on my personal website on the CS Linux server, and it does allow CORS from anywhere. So if you want for testing only, especially if you’re testing it outside of Codio, you can start by using that URL to load the box locations. However, when you submit it, it should be working as it is in Codio. So it should be using a local URL to load your own copy of the box locations dot JSON file. But for testing only you can use the test one that I have put out on my website. The instructions are in the milestone details that you can find in Codio.

The other thing to note on milestone two is you are allowed to use external libraries in that milestone, if you so choose. We do not cover any of those libraries in this class. But if you are familiar with libraries, such as Bootstrap, or jQuery, you’re more than welcome to use those in the milestones. If you want to learn those libraries, this is a good opportunity to do that. However, I highly encourage you to think very hard about that because the learning curve for some of those libraries can be more significant than actually doing it by hand. And so especially for, in my model solutions that I was building this summer, I actually wrote both milestone one on milestone two in two different ways. I wrote them using completely raw JavaScript and no libraries in CSS. And I wrote them using Bootstrap and jQuery, just to see the difference. They were about the same level of complexity. But that’s assuming that you really know what you’re doing in jQuery and Bootstrap as far as building out the, the JavaScript and CSS required for those libraries. So it’s up to you if you want to use those libraries or not. Just for clarity, I’m most familiar with jQuery and Bootstrap if you want to use other libraries, specifically, the Tailwind CSS library, or there are several other JavaScript libraries out there. I will do my best to keep up with those. But my background is mostly in jQuery and Bootstrap. So those will be the ones I will be most likely to help you with, if you have any questions.

So that’s all I’ve got for this week. If you have any questions you can keep in touch, we’ve got our discussions going on Discord, it’s been great. Feel free to keep posting there and answering questions. I’m also available at tea time office hours, which are Tuesdays at 330 and Fridays at 1030. You can come join us work on your homework, just hang out whatever you want to do. We’ll be there all summer. And then of course, if you have any questions, you can schedule a one on one office hours with me via Calendly. Again, my time is kind of limited the summer I’m hoping to do as much as I can via email and discord. But if you need some one on one time with me feel free to schedule some time via Calendly. So that’s all I’ve got for this week, I’m actually reusing this gift for my system administration class announcements that I did earlier this morning, because I noticed that there’s really a way that these classes have synced up where we’re basically redoing the first project again, but this time, we’re adding automation and system administration, we’re automating building out virtual machines. In this class, we’re automating building websites using JSON files. So it’s really kind of interesting how these two classes have synced up. But I hope you can understand why we’re doing this while we’re actually trying to build our websites programmatically instead of statically. And that will help lead into the later part of this class where we actually start working on real full stack development. So as always, if you have any questions, let me know otherwise, good luck this week, and I will talk to you all again next week.