Web fundamentals the sequel

Editor's Notes

• #4: Why are we here today? The goal is to deliver this lectures in a Socratic fashion. I’m going to ask quite a few questions. How does the Web work (at a high level)? What do I need to know to start working as a Web Developer?
• #5: First, let’s talk about the different types of software. They’ll be important later. Application Software System Software Middleware The software you’re concerned with is custom software. It’s typically client-facing, consumer-driven, and always focused on business goals. Yes, non-profits have business goal.
• #6: Just to give you an idea of the current scope of the field and all there is to know… This is a very high level overview and I’m probably leaving out 20 more Today we’re just looking at the Web piece, again, at a very high level This is not here to freak you out, but more to illustrate that there’s a ton to learn and hopefully today’s talk will motivate you to start tackling these topics sooner than later. You might find that your passion lies in Data, not in Software.
• #7: As with many things in Computing, it’s difficult to know where to start, what to read, how to learn. Let’s begin with how the Web itself works and what its original purpose was.
• #8: So, let’s start where the Web starts, at least from the Client’s perspective. Of course there’s plenty of other Networking concepts, underpinnings of the browser and such, but for all intents and purposes, this is where we should start for basic Web Development.
• #9: The first version of the protocol had only one method, namely GET, which would request a page from a server. HTTP v 1.0 1996 To give an idea of how slow things progress: 2007, new Working Group created to revise HTTP 1.1 (1999), released RFC (Request for Comments) 2616 in 2014 HTTP 2 published in May 2015
• #11: GET, POST, PUT, and DELETE correspond to CRUD HEAD is identical to GET, but returns no body. Good for checking if a file exists or if a URL is serviceable. PATCH is a partial update (PUT is more resource heavy, entire entity) Idempotence Same request should produce the same result no matter how many times it is called PUT and DELETE should be idempotent, meaning that multiple identical requests should have the same effect as a single request
• #13: HTTP Response Codes indicate whether a specific HTTP requests has been successfully completed. Responses are grouped in five classes: informational responses, successful responses, redirections, client errors, and servers errors.
• #14: It’s important to understand the basics of HTTP and the Web itself since you’ll be developing most of your applications on it; it’s important to know how to debug it. Speaking of debugging… Dev Tools
• #15: HTTP is a stateless protocol How do we make it stateful? You can leverage cookies or hidden variables to track the User's state Server side
• #16: HTTP will send things in clear text… oops.
• #18: HTTP is very simply about requests and responses between clients and servers. The clients can be desktop computers, laptops, tablets, phones, IoT devices, et al
• #23: http://jsonplaceholder.typicode.com/ POSTMAN
• #25: A markup language is a language that annotates text so that the computer can manipulate it for some purpose. DOM Html, head, body http://www.w3schools.com/tags/
• #26: This covers Layout and Structure, but what about style?
• #27: http://www.w3schools.com/html/html_forms.asp This is how we submit data to the Server. Even if you use something like AJAX in JavaScript, you’re probably submitting a form under the hood.
• #30: Separation of Concerns https://en.wikipedia.org/wiki/Separation_of_concerns Cascading Shit Storm
• #31: HTML is mainly used for organization of webpage content, CSS is used for definition of content presentation style, and JS defines how the content interacts and behaves with the user. Historically, this was not the case: prior to the introduction of CSS, HTML performed both duties of defining semantics and style.
• #38: https://en.wikipedia.org/wiki/JavaScript
• #39: https://en.wikipedia.org/wiki/JavaScript
• #40: Java and JS are roughly the same thing, right? Java is to JavaScript as Car is to carpet JavaScript is prototype-based with first-class functions, making it a multi-paradigm language, supporting object-oriented,[8] imperative, and functional programming styles The most common use of JavaScript is to add client-side behavior to HTML pages, a.k.a. Dynamic HTML (DHTML). Scripts are embedded in or included from HTML pages and interact with the Document Object Model (DOM) of the page. Some simple examples of this usage are: Loading new page content or submitting data to the server via AJAX without reloading the page (for example, a social network might allow the user to post status updates without leaving the page) Animation of page elements, fading them in and out, resizing them, moving them, etc. Interactive content, for example games, and playing audio and video Validating input values of a Web form to make sure that they are acceptable before being submitted to the server. Transmitting information about the user's reading habits and browsing activities to various websites. Web pages frequently do this for Web analytics, ad tracking, personalization or other purposes.[60]
• #41: AJAX stands for Asynchronous JavaScript and XML. In a nutshell, it is the use of the XMLHttpRequest object to communicate with server-side scripts. It can send as well as receive information in a variety of formats, including JSON, XML, HTML, and even text files http://youmightnotneedjquery.com/ The point here is better user experience, not as jarring of a UI to refresh the entire page.
• #43: Domain Name System and/or Domain Name Server Hosting is simply where you put your application.
• #44: Authentication vs Authoritzation Identity vs Principal OAuth: https://en.wikipedia.org/wiki/Oauth Claims
• #45: You will serve your Web Application over HTTP to clients Clients will perform CRUD operations on data via HTTP whether it’s through traditional means or Web APIs. HTML will structure your Views. CSS will style them. JS will ruin everything. Hopefully things were written securely enough that you don’t ruin someone’s life 