<commit_before><!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">

		<title>Web Fundamentals</title>

		<meta name="description" content="Many of us have worked with abstractions over Web technologies such as HTTP, but REST, HTML5, and WebSocket are requiring us to understand how the Web really works. What actually happens when a Web browser opens a Web page? What is the connection between session state and cookies? How do HTML, CSS, and JavaScript work together? This session starts at the beginning and walks through the Web’s fundamental building blocks.">
		<meta name="author" content="<NAME>">

		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<link rel="stylesheet" href="css/reveal.min.css">
		<link rel="stylesheet" href="css/theme/default.css" id="theme">

		<!-- For syntax highlighting -->
		<link rel="stylesheet" href="lib/css/zenburn.css">

		<!-- If the query includes 'print-pdf', use the PDF print sheet -->
		<script>
			document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
		</script>

		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
	</head>

	<body>

		<div class="reveal">

			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">
				<section>
					<h1>Web Fundamentals</h1>
					<p>
						<small><a href="http://www.jamesward.com"><NAME></a> ~ <a href="http://twitter.com/_jamesward">@_JamesWard</a></small>
					</p>
				</section>

                <section>
                    <section data-markdown>
                        <script type="text/template">
                            ## HTTP
                            ### Hypertext Transfer Protocol
                            
                            * Request & Response
                            * Text-based
                            * Features: Keep-Alive, HTTPS, Binary, Compression
                        </script>
                    </section>
                    
                    <section data-markdown>
                        <script type="text/template">
                            ## HTTP Server
                            
                            * Speaks HTTP
                            * Listens for connections
                            * Reads the Request
                            * Returns the Response
                        </script>
                    </section>

                    <section data-markdown>
                        <script type="text/template">
                            ## HTTP Client

                            * Speaks HTTP
                            * Makes a connection
                            * Sends the Request
                            * Reads the Response
                        </script>
                    </section>

                    <section data-markdown>
                        <script type="text/template">
                            ## HTTP Request

                            1) Request Command
                                VERB  PATH  PROTOCOL
                                GET   /foo  HTTP/1.1
                            2) Request Headers
                                NAME:   VALUE
                                Accept: text/html
                            3) Empty Line
                            4) Request Body
                        </script>
                    </section>
                    
                    <section data-markdown>
                        <script type="text/template">
                            ## HTTP Response

                            1) Response Status
                                PROTOCOL CODE NAME
                                HTTP/1.1 200  OK
                            2) Response Headers
                                Content-Type: text/html
                            3) Empty Line
                            4) Response Body
                        </script>
                    </section>

                    <section data-markdown>
                        <script type="text/template">
                            ## Try it!

                            ### HTTP Server with Play Framework
                            
                            * `conf/routes` - Map Request verb & path to handler
                                GET    /      controllers.Application.index
                            * `controllers.Application.index` - Reads the request and returns a response
                                public static Result index() {
                                    return ok("hello");
                                }
                            
                            ### HTTP Client with Telnet
                            
                                telnet localhost 9000
                            
                                GET / HTTP/1.1
                                
                        </script>
                    </section>

                    <section data-markdown>
                        <script type="text/template">
                            ## HTTP Verbs

                            * GET, HEAD, POST, PUT, DELETE, etc
                            * Idempotentency: POST can have side-effects
                            * REST: Representational state transfer
                                > POST   = Create
                                > GET    = Read
                                > PUT    = Update
                                > DELETE = DELETE
                        </script>
                    </section>

                    <section data-markdown>
                        <script type="text/template">
                            ## Cookies & Session

                            * Request:
                                Cookie: foo=bar
                            * Response:
                                Set-Cookie: foo=blah
                            
                                response().setCookie("blah", "foo");
                                return ok("hello, " + request().cookie("foo").value());
                            * The root of all CSRF
                        </script>
                    </section>
                    
                    <section data-markdown>
                        <script type="text/template">
                            ## Session
                            
                            * Cookie GUID
                            * Server map GUID to an object
                            * Stateful 
                        </script>
                    </section>
                    
                </section>

                <section>
                    <section data-markdown>
                        <script type="text/template">
                            ## Web Browsers
                            
                            * HTTP Client
                            * Renders HTML & CSS
                            * Runs JavaScript
                            * Manages Cookies
                        </script>
                    </section>
                </section>

                <section>
                    <section data-markdown>
                        <script type="text/template">
                            ## The Extended Web Ecosystem

                            * Load Balancers
                            * CDNs
                            * Push: WebSocket, SSE, Comet
                            * Reactive: Async & Non-Blocking
                            * HTML5
                        </script>
                    </section>
                </section>
			</div>

		</div>

		<script src="lib/js/head.min.js"></script>
		<script src="js/reveal.min.js"></script><commit_msg>more content and formatting<commit_after><!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">

		<title>Web Fundamentals</title>

		<meta name="description" content="Many of us have worked with abstractions over Web technologies such as HTTP, but REST, HTML5, and WebSocket are requiring us to understand how the Web really works. What actually happens when a Web browser opens a Web page? What is the connection between session state and cookies? How do HTML, CSS, and JavaScript work together? This session starts at the beginning and walks through the Web’s fundamental building blocks.">
		<meta name="author" content="<NAME>">

		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<link rel="stylesheet" href="css/reveal.min.css">
		<link rel="stylesheet" href="css/theme/default.css" id="theme">

		<!-- For syntax highlighting -->
		<link rel="stylesheet" href="lib/css/zenburn.css">

		<!-- If the query includes 'print-pdf', use the PDF print sheet -->
		<script>
			document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
		</script>

		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
	</head>

	<body>

		<div class="reveal">

			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">
				<section>
					<h1>Web Fundamentals</h1>
					<p>
						<small><a href="http://www.jamesward.com"><NAME></a> ~ <a href="http://twitter.com/_jamesward">@_JamesWard</a></small>
					</p>
				</section>

                <section>
                    <section data-markdown>
                        <script type="text/template">
                            ## HTTP
                            ### Hypertext Transfer Protocol
                            
                            * Request & Response
                            * Text-based
                            * Features: Keep-Alive, HTTPS, Binary, Compression
                        </script>
                    </section>
                    
                    <section data-markdown>
                        <script type="text/template">
                            ## HTTP Server
                            
                            * Speaks HTTP
                            * Listens for connections
                            * Reads the Request
                            * Returns the Response
                        </script>
                    </section>

                    <section data-markdown>
                        <script type="text/template">
                            ## HTTP Client

                            * Speaks HTTP
                            * Makes a connection
                            * Sends the Request
                            * Reads the Response
                        </script>
                    </section>

                    <section data-markdown>
                        <script type="text/template">
                            ## HTTP Request

                            1. Request Command
                                    
                                    VERB  PATH  PROTOCOL
                                    GET   /foo  HTTP/1.1
                                    
                            2. Request Headers
                                    
                                    NAME:   VALUE
                                    Accept: text/html
                                    
                            3. Empty Line
                            4. Request Body
                        </script>
                    </section>
                    
                    <section data-markdown>
                        <script type="text/template">
                            ## HTTP Response

                            1. Response Status
                                    
                                    PROTOCOL CODE NAME
                                    HTTP/1.1 200  OK
                                    
                            2. Response Headers
                                    
                                    Content-Type: text/html
                                    
                            3. Empty Line
                            4. Response Body
                        </script>
                    </section>

                    <section data-markdown>
                        <script type="text/template">
                            ## Try it!

                            ### HTTP Server with Play Framework
                            
                            * Map Request verb & path to handler *conf/routes*
                                    
                                    GET    /      controllers.Application.index
                                    
                            * Reads the request and returns a response *app/controllers/Application.java*
                                    
                                    public static Result index() {
                                        return ok("hello");
                                    }
                            
                            ### HTTP Client with Telnet
                            
                                telnet localhost 9000
                            
                                GET / HTTP/1.1
                                
                        </script>
                    </section>

                    <section data-markdown>
                        <script type="text/template">
                            ## HTTP Verbs

                            * GET, HEAD, POST, PUT, DELETE, etc
                            * Idempotentency: POST can have side-effects
                            * REST: Representational state transfer
                                    
                                    POST   = Create
                                    GET    = Read
                                    PUT    = Update
                                    DELETE = DELETE
                        </script>
                    </section>

                    <section data-markdown>
                        <script type="text/template">
                            ## Cookies & Session

                            * Request:
                                    
                                    Cookie: foo=bar
                                    
                            * Response:
                                    
                                    Set-Cookie: foo=blah
                                    
                                    response().setCookie("blah", "foo");
                                    return ok("hello, " + request().cookie("foo").value());
                                    
                            * The root of all CSRF
                        </script>
                    </section>
                    
                    <section data-markdown>
                        <script type="text/template">
                            ## Session
                            
                            * Cookie GUID
                            * Server map GUID to an object
                            * Stateful 
                        </script>
                    </section>
                    
                </section>

                <section>
                    <section data-markdown>
                        <script type="text/template">
                            ## Web Browsers
                            
                            * HTTP Client
                            * Renders HTML & CSS
                            * Runs JavaScript
                            * Manages Cookies
                        </script>
                    </section>
                    
                    <section data-markdown>
                        <script type="text/template">
                            ## HTML
                            ### Hypertext Markup Language
                            
                            * Text-based
                            * XML-ish
                            * Page-based
                            * Returned in the HTTP Body
                            * DOM: Document Object Model
                            * Trend: Information Semantics not UI Structure
                        </script>
                    </section>

                    <section data-markdown>
                        <script type="text/template">
                            ## CSS
                            ### Cascading Style Sheets

                            * AOP-ish
                            * Positioning & Styling
                            * Complex rules for ordering
                            * Essentials: Chrome Dev Tools / Firebug
                            * Emerging: LESS, Bootstrap, CSS3
                        </script>
                    </section>

                    <section data-markdown>
                        <script type="text/template">
                            ## JavaScript

                            * Dynamic
                            * Single Page Apps
                            * Essentials: Chrome Dev Tools / Firebug, jQuery
                            * Emerging: CoffeeScript, ASM.js
                            * Interesting: Dart
                        </script>
                    </section>
                    
                </section>

                <section>
                    <section data-markdown>
                        <script type="text/template">
                            ## The Extended Web Ecosystem

                            * HTML5
                            * PhoneGap
                            * Push: WebSocket, SSE, Comet
                            * JavaScript Web Frameworks
                            * Reactive: Async & Non-Blocking
                            * Load Balancers
                            * CDNs
                        </script>
                    </section>

                    <section data-markdown>
                        <script type="text/template">
                            ## HTML5
                            ### The Browser as an Application Platform

                            * Offline
                            * Local Storage
                            * File Access
                            * Audio & Video
                            * Graphics: Canvas, WebGL
                            * Components
                            * Push: WebSockets & SSE
                            * New Semantic Tags
                            * Modern UIs: Annimations, Layouts, Fonts
                        </script>
                    </section>

                    <section data-markdown>
                        <script type="text/template">
                            ## Mobile Apps with PhoneGap

                            * WORA
                            * Bridge to Native APIs
                            * Open Source at Apache (Cordova)
                        </script>
                    </section>

                    <section data-markdown>
                        <script type="text/template">
                            ## Push: WebSockets, SSE, Comet

                            * WebSocket: full-duplex
                            * SSE: half-duplex but well supported
                            * Comet: the traditional hack
                        </script>
                    </section>

                    <section data-markdown>
                        <script type="text/template">
                            ## JavaScript Web Frameworks

                            * Move the UI to the Client
                            * Expose data through REST
                            * Many options: Backbone, Knockout, AngularJS, Ember
                            * PJAX: A mixed approach
                        </script>
                    </section>

                    <section data-markdown>
                        <script type="text/template">
                            ## Reactive: Async & Non-Blocking

                            * Event-Driven & Scalable
                            * Great for Composition & Push
                        </script>
                    </section>

                    <section data-markdown>
                        <script type="text/template">
                            ## Load Balancers

                            * Scale Horizontally
                            * Failure handling
                            * Auto-scaling
                        </script>
                    </section>

                    <section data-markdown>
                        <script type="text/template">
                            ## CDNs
                            ### Edge cached static content

                            * The speed of light is slow
                            * Location matters
                            * Data is really hard to distribute
                            * Static content is easy to distribute
                        </script>
                    </section>
                </section>
			</div>

		</div>

		<script src="lib/js/head.min.js"></script>
		<script src="js/reveal.min.js"></script>
{'fraction_non_alphanumeric': 0.07580094174129813, 'fraction_numerical': 0.003046810082171545, 'mean_word_length': 0.7239376094222505, 'pattern_counts': {'":': 0, '<': 239, '<?xml version=': 0, '>': 243, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 64, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2422054', 'n_tokens_mistral': 4694, 'n_tokens_neox': 4165, 'n_words': 1140}