WebTech-Midterm
Twitter Bootstrap
"Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web." Most popular project in terms of github clones Mostly CSS Classes Mobile First -> Plan mobile from the start (Bootstrap is mobile ready)
What is an Architecture?
"Set of rules and constraints that characterize a particular style of construction" (dictionary)
What is a Layer and why do we need one?
"abstraction of a particular set of functionalities" Why? 1. To allow separation of concerns 2. To facilitate platform independence 3. To model the functionalities hiding implementation details
A DNS record is a 4-tuple (db entry) known as Resource Record (RR)
(Name, Value, Type, TTL)
Descended and Child are not limited to Element selectors
.colored p { color: green; } change style of every p AT ANY LEVEL inside an element with class="colored" article > .colored { color: green; } change style of every element that is a direct child of an article element
Syntax of a pseudo-class: Examples
/* unvisited link */ a:link { color: #FF0000; } /* visited link */ a:visited { color: #00FF00; } /* mouse over link */ a:hover { color: #FF00FF; } /* selected link */ a:active { color: #0000FF; }
Cookies have four components:
1) cookie header line of HTTP response msg 2) cookie header line in next HTTP request msg 3) cookie file kept on user's host, managed by user's browser 4) back-end database at Website
3 DNS queries per Webpage click since 3 are the levels of DNS hierarchy After client has clicked on www.amazon.com
1. Client queries root server to find com DNS server 2. Client queries .com DNS server (Top Level Domain) to get IP address of amazon.com DNS server 3. Client queries amazon.com local DNS server to get closest IP address to you for www.amazon.com
What is an architecture in Computer Science?
1. Identify mechanisms (invariances) 2. Identify who does what (separation of functionalities)
HTTP response status codes: 505 HTTP Version Not Supported
505 HTTP Version Not Supported
Basic HTML Document
<!doctype html> Version Declaration (HTML5) tell browser doc is compliant <html> </html> HTML tag opens an HTML <head></head> contains meta information <body></body> actual content of page
The Figure Element
<figure> <img src="path/to/image" alt="About image"/> <figcaption> <p>This is an image of something. </p> </figcaption> </figure>
Make your content editable
<ul contenteditable="true">
What is React?
A JavaScript Library for building user interfaces Invented by Facebook/Meta engineers in 2011
what is "routing" in JavaScript?
A JavaScript router is a key component in most frontend frameworks. It is the piece of software in charge of organizing application states, switching between different views
what is a transpiler?
A transpiler transforms code from a higher level programming language to another high level programming language. Whereas a compiler transforms code from a higher level programming language to a low level code (e.g. assembly or machine code) to make programs executable
advantages of layers
Allow identification & relationship of complex system's pieces (abstractions are good for developers) modularization eases maintenance implementation change of one layer are transparent to rest of system e.g., change in gate procedure doesn't affect rest of system
Internet protocol stack (TCP/IP)
Application: supporting network applications e.g. FTP, SMTP, HTTP Transport: end-to-end data transfer e.g. TCP, UDP, JTP, DCTCP Network: routing of datagrams from source to destination (IP, routing protocols) Link: data transfer between neighboring network elements Physical: bits "on the wire"
Layer vs Architecture
Architecture of a system -Find necessary and sufficient set of invariances to achieve a goal (e.g. send a packet) Layer -way to get there via "Divide & Conquer" Layer definition is part of architecting
Conventional Use of Cookies
Authorization -(store user and or pwd) Shopping carts -Remember what you were about to buy Recommendations -Remember what you were bought User session state -(Web e-mail) e.g. Gmail states
CSS element selectors
CSS Element name -> p { color: blue; } CSS Element names -> h1, a{ color: green; }
The core purpose of HTML is to:
Communicate the structure of the content
The Box Model (from in to out)
Content - The content of the box, where text and images appear Padding - Clears an area around the content. The padding is transparent Border - A border that goes around the padding and content Margin - Clears an area outside the border. The margin is transparent
DNSSEC main idea
Digitally sign every DNS reply using public-key cryptography
Review: True or False? Cookies in HTTP requests are a mandatory field
False
Review: True or False? Cookies in HTTP response are a mandatory field
False
Media Query Common Approach
First specify the base styles p {color: red;} Then be specific later @media (min-width: 1200px) {...} @media (min-width: 768px) , @media (max-width: 990px) {...} Remember not to overlap breakpoints (i.e. range boundaries)!
Require an attribute
Forms allow for a new required attribute, which specifies, naturally, whether a particular input is required. Dependent upon your coding preference, you can declare this attribute in one of two ways: <input type="text" name="someInput" required> Or, with a more structured appraoch <input type="text" name="someInput" required="required">
HTTP request message
GET /index.html HTTP/1.1\r\n Host: www.slu.edu\r\n User-Agent: Firefox/3.6.10\r\n Accept: text/html,application/xhtml+xml\r\n Accept-Language: en-us,en;q=0.5\r\n Accept-Encoding: gzip,deflate\r\n Accept-Charset: ISO-8859-1,utf-8;q=0.7\r\n Keep-Alive: 115\r\n Connection: keep-alive\r\n \r\n
HTML, CSS, and JavaScript
HTML structure (3 bedrooms, one bath) CSS style, and appearance (color, margins...) JavaScript behavior and functionalities events handling (e.g. clicks)
HTTP response message
HTTP/1.1 200 OK\r\n Date: Sun, 26 Sep 2010 20:09:20 GMT\r\n Server: Apache/2.0.52 (CentOS)\r\n Last-Modified: Tue, 30 Oct 2007 17:00:02 GMT\r\n ETag: "17dc6-a5c-bf716880"\r\n Accept-Ranges: bytes\r\n Content-Length: 2652\r\n Keep-Alive: timeout=10, max=100\r\n Connection: Keep-Alive\r\n Content-Type: text/html; charset=ISO-8859- 1\r\n \r\n data data data data data ...
What does HTML mean?
Hyper-Text Enriched text with links Markup mark something up (annotate) e.g. Language Syntax and semantic (right or wrong way to code)
What does HTTP even mean?
HyperText Transfer Protocol One of Web's application layer protocols (RFC 1945 and RFC 2616)
The JavaScript Console
If you use Chrome, open the Javascript console: View -> Developer -> Javascript Console <h1 id="title" onclick="console.log('hello there!');">Hello</h1>
How did we get to TCP/IP arch?
In 1976 there was a vote in the International Network Working Group (INWG) that approved a proposal (INWG 96) (3 layers: Internetwork Transport Layer, Network Layer, Data Link Layer)
'this' keyword in JavaScript
In JavaScript, "this" always return a reference to the current object! const person = { name : 'Maria', walk() { console.log(this); } } ; returns a refence to the person object to fix use bind //binds the function walk to the object person walk(); const walk = person.walk.bind(person);
What is ISO?
International Organization for Standardization
Review: True or False? HTTP with Persistent Connections is always better
It depends
Something more about margins
Left / Right margins are cumulative Vertically, however, the larger margin wins
Motivation for layered Internet architecture
Networks are complex, with many "pieces" : § hosts § routers § links of various media § applications § protocols § hardware, software
Separating TCP from IP
On Jan 1st 1983 (Flag Day) ARPANET transitioned from (NCP): Transport Later, Internetwork Layer, Network Layer, Data Link Layer To this (TCP/IP): Transport Layer, Network Layer, Data Link Layer
What is OSI?
Open System Interconnection (reference model)
Cascade Algorithm in CSS (The "C" in CSS)
Origin Precedence Rule HTML is processed sequentially, From top to bottom For precedence, think of external CSS as declared at the spot where it's linked to Merge: Both elements are applied at the same time (merged) Inheritance: If I specify a CSS property within some tag, every child and grandchild of that element in the Document Object Model (DOM) Tree will inherit that CSS property. Specificity: The most specific CSS Selector combination wins The hard part is to figure out which selector combination is the most specific
Overview of a Three-tier Architecture: Full Stack Web Dev
Presentation Tier: The top-most level of the application is the user interface. The main function of the interface is to translate tasks and results to something the user can understand. Goal: Delivering the web info to users (UI) Technologies: React, JavaScript CSS, HTML Logic Tier: This layer coordinates the application, processes commands, makes logical decisions and evaluations, and performs calculations. It also moves and processes data between the two surrounding layers. Goal: Server-side rendering info, validation, and dynamic proc. for UI Technologies: NodeJS Data Tier: Here information is stored and retrieved from a database or file system. The information is then passed back to the logic tier for processing, and then eventually back to the user. Goal: Data persistence & access via an API Technologies: MongoDB
HTTP Request Message Types: GET
Request objects or page (no data after the header) GET /index.html HTTP/1.1\r\n
3-levels of hierarchical DNS:
Root DNS (about 400), Top-level Domain (TLD) DNS Servers, Authoritative and local DNS server
Disadvantages of existing layers
Separation does not account for evolution In the 70's (in 1983's TCP/IP was picked) they had no idea about how the Internet was going to evolve With info taken from adjacent layers protocols Often systems could make better decisions (some protocols have cross-layer "violations") We got stuck with TCP/IP incorrect layer separation (Internet Ossification)
What is a responsive Web site?
Site designed to adapt its layout to the viewing environments by using fluid, proportion-based grid, flexible images and CSS media queries -> Site's layout should adapt -> Content verbosity or its visual delivery may change For example header text
Pseudo-Class CSS selectors
Target only the structures that cannot be targeted by simple combinations of regular selectors OR Target ability to style based on user interaction with the page (e.g. hover an element with their mouse)
Grouping Selectors
This is a grouped selector: the property is applied to both <h1> and <a> tags -> h1, a{ color: red; } Grouping is allowed among ANY selector (even class and id) -> h1, div, .john, #blah{ color: green; }
Accept: text/html
This is less obvious: It is used to specify what media fields are accepted in the response
Floating elements takes them out of the regular document flow
True
Given the following media query: @media (min-width: 768px) and (max-width: 991px) {...} The styles within this media query will apply if the browser window is 991px wide
True
The following code: section { clear: right; } says that none of the section elements should allow anything to float to the right of them.
True
The usual approach to using media queries is to provide some base styling and then change and/or add to them within each media query.
True
HTTP
Uses TCP: client initiates TCP connection (creates socket) to server via port 80 HTTP is "stateless": server maintains no information about past client requests (client can ask twice same objects)
Given the following HTML code: ... <div style="margin-bottom: 10px;">...</div> <div style="margin-top: 20px;">...</div> What will be the margin between the 2 'div' elements?
Vertical margins that touch collapse and the larger one wins. 20px
JavaScript Example: Responding to Mouse Clicks
When you click on an object that has embedded some JavaScript, something happens! The web browser is creating an event, and I need to create (JavaScript) code to respond to those events. <h1 id="title" onclick="alert('hello there!');">Hello</h1>
Most common Responsive tool is a 12-column layout
Why 12? Its has many factors: Divisible by 1,2,3,4,6, 12 A 12-column responsive layout can be split in many ways We need to use % to be responsive 1 column = 100% / 12 = 8.33%
A collection of CSS rules is called
a Style Sheet
Pseudo-classes can be combined with selectors
a.highlight:hover { color: red; } div:hover { background-color: blue; }
Ways of using CSS: internal
also inside HTML but within a <style> tag inside the <head> tag <html> <head> <style> p { color: red; } h1 { margin:20px; } </style> </head> <body> ... </body> </html>
Child Selectors
article > p { color: green; } change style of every p element that is a direct "child" of an article element
Descended Selectors
article p { color: green; } change style of every p element that is inside AT ANY LEVEL Even not a direct "child" As long as is an ancestor
non-persistent HTTP
at most one object sent per TCP connection then closed downloading multiple objects requires multiple connections
Assuming no other styles exist, how many pixels wide will the 'div' tag be with the following styles: div { padding: 10px 10px 10px 10px; margin: 10px 10px 10px 10px; width: 100px; border: 10px solid black; box-sizing: border-box; }
box-sizing: border-box was set, so the width of the box, including padding and border, will be constrained to the specified width: 100px.
Client/server model
client: browser that requests, receives, (using HTTP protocol) and displays Web objects server: Web server sends (using HTTP protocol) objects in response to requests
Objects in JavaScript
collection of key-value pairs. Example: const person = { name : "Maria", walk: function() {} }; OR const person = { name : "Maria", talk() {} };
The spread operator "..."
const car = ["a", "b", "c"]; const truck = ["d", "e"]; const train = car.concat(truck); console.log(train); An equivalent (more efficient) operation is with the spread const train2 = [...car, ...truck]; console.log(train2); Try to add an element in the middle using concat, and look at how easy it is with the spread operator: const train = [...car, 'a',...truck];
Arrow Functions
const square = number => number * number; same as: const square = function(number) { return number * number; };
Object Destructuring
const street = address.street; const city = address.city; const country = address.country; // this code is equivalent to the three lines above const { street, city, country } = address; We can also rename some of the object attribute while destructuring, like so: const { street: st } = address;
Applying the spread operator on objects
const user = { name: "flavio" }; const profession = { job: "professor" }; const combined = { ...user, ...profession, university: "SLU" };
Which CSS selector is more specific?
div #blogentry { div.small p { color: blue; color: green; } } more specific! 101 > 12 0 1 0 1 0 0 1 2 (style, ID, Class, No. of elements)
Example of Exam question: <div> <p>I am feeling blue</p> </div> <section> <p>I just want to be left alone!</p> Given the HTML code above, write the CSS rule to turn the text of the first <p> tag blue, but NOT the second <p> tag.
div > p { color: blue; } OR div p { color: blue; }
Example of Exam question: <div> <div> <div class="makeMeRed"> <p>I am feeling red</p> </div> </div> <section class="makeMeRed"> <p>I just want to be left alone!</p> </section> </div> Write the CSS rule(s) that turns the text of the first <p> tag red, but NOT the second <p> tag.
div.makeMeRed p { color: red; } OR div > div > p { color: red; }
Web caches (proxy server)
goal: satisfy client request without involving origin server • user sets browser: Web accesses via cache • browser sends all HTTP requests to cache • object in cache: cache returns object • else cache requests object from origin server, then returns object to client
Ways of using CSS: Inline:
inside body tags within the HTML <html> <head> ... </head> <body> <p style="color: red;">text</p> </body> </html>
JQuery
jQuery is a JavaScript library that is used to manipulate the so called HTML DOM.
The way we can create elements is by using the createElement method.
let myElement = document.createElement("p")
Ways of using CSS: external
linked from the HTML head but in an external file (recommended) <html> <head> <title>CSS Example</title> <link rel="stylesheet" href= "mystyle.css"> </head> <body> ... </body> </html>
Cookies
make HTTP stateful keeping User-server state info: HTTP is stateless, but info of clients is desirable Cookies allow servers to keep states of users
persistent HTTP
multiple objects can be sent over single TCP connection between client, server
Maps on Arrays
new to EC6 & they are used a lot in React const colors = ["red", "green", "blue"]; // for each color we want to have // <li>color</li> colors.map(color => " <li>" + color + " </li>"); improved code using Template Literals in EC6: colors.map(color => " <li>"${color}"</li>");
The Syntax of CSS
p { color: red; font-size: 20px; width: 200px; }
ISO/OSI reference model
presentation: allows applications to interpret meaning of data, e.g., encryption, compression, translation (machine-specific conventions) session: synchronization, recovery of data exchange, checkpointing Internet stack "missing" these layers!
HTTP Request Message Types: DELETE
remove objects (e.g. from cache)
HTTP response status codes: 400 Bad Request
request msg not understood by server
HTTP response status codes: 200 OK
request succeeded, requested object later in this msg
HTTP response status codes: 404 Not Found
requested document not found on this server
HTTP response status codes: 301 Moved Permanently
requested object moved, new location specified later with the field "Location:"
HTTP Request Message Types: HEAD
same as GET but no body (used to debug)
Syntax of a pseudo-class
selector:pseudo-class { property:value; }
id selectors
specified with a # sign and also require a corresponding def in the HTML #blogpost{ color: red; } -> <p id="blogpost"> ...red text</p>
Class selectors
specified with a dot and require a corresponding def in the HTML .john { color: blue; } -> <p class="john">...</p>
Media Query
style sheet within style sheet @media (max-width: 750px) {...}
DOM
the data structure containing your HTML
HTTP Request Message Types: POST, PUT
upload objects e.g., on database (body after header)
Tim Bernard Lee
• Sir Tim Berners-Lee invented the World Wide Web in 1989. • Director of the World Wide Web Consortium (W3C), a Web standards organization founded in 1994 which develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential • A graduate of Oxford University, Sir Tim invented the Web while at CERN, the European Particle Physics Laboratory, in 1989. He wrote the first web client and server in 1990. His specifications of URIs, HTTP and HTML were refined as Web technology spread.
More about Web caching
• cache acts as both client and server • server for original requesting client • client to origin server • typically cache is installed by ISP (university, company, residential ISP)
Why Web caching?
• reduce response time for client request • reduce traffic on an institution's access link • Internet dense with caches: enables "poor" content providers to effectively deliver content (so too does P2P file sharing)
