Introduction to Front End Development: Week 1

SSH File Transfer Protocol (SFTP)

*FTP is an insecure protocol, SFTP can be used to transfer files over SSH protocol securely *Most FTP clients also support SFTP protocol

HTTP Response

*Follows a format similar to the request format *Following a header, may optionally contain message body

Shared Hosting

*Sharing web server's processing power/memory/bandwidth with others - potential for slow performance *Least expensive *Ideal for small website with small amount of users

Virtual Private Server (VPS)

*Sites with greater demands often use VPS *each virtual server has dedicated CPU, bandwidth, and memory resources - it's unlikely your site will be affected by others *More expensive than shared hosting

Cloud Hosting

*Websites run in a cloud environment which spans across many physical and virtual servers - if one type of server fails, it will run on the other and stay online Pros: no limitation on resource use because no hardware limitations, cost can be scalable as website grows Cons: pay on resource use. can be a higher cost,

Dedicated Hosting

*Your own hardware server where all CPU, memory, and bandwidth resources are yours to use

Rest API

*a set of principles to build highly efficient APIs *provides responses to requests *one main function is to send and receive data from a centralized data base *can query our own or third-party ones

Simple Mail Transfer Protocol (SMTP)

*allows client to submit emails for sending via SMTP server *can also use to receive emails from an email client, but IMAP is more used

Domain Name System Protocol (DNS)

*allows your device to know which IP address to communicate when you visit a website in your browser *your computer checks with DNS server associated with domain name and returns the correct IP address

Dynamic Host Configuration Protocol (DHCP)

*assigns device and IP address to connect to the internet and communicate with other computers on the network *your device communicates over DHCP using a DHCP server which keeps track of computers on the internet

Transmission Control Protocol (TCP)

*can solve issues of data arriving out of order, damaged, or getting lost - at the cost of a delay when sending data *this protocol is used for data that MUST arrive correctly and in order - like text or image files

Request Line (HTTP)

*every request begins with this *consists of HTTP method, requested resource, and the HTTP protocol version GET/home.html HTTP/1.1 method resource requested protocol used

Broswer/Web API

*extends functionality of browser by adding new services *designed to simplify complex functions and provide easy syntax for building advanced features ex: DOM API, geolocation API, Canvas API

File Transfer Protocol (FTP)

*for websites/apps on internet, allows you to transfer files from your local computer to the server they'll run on *FTP allows you to list, send, receive, and delete files on a server *your server must run an FTP server and you'll need an FTP client on your local machine *insecure protocol

HTTP methods

*indicate the action that the client wishes to perform on web server resource

Secure Shell Protocol (SSH)

*most common method of logging in and interacting with servers remotely *all data sent over SSH is encrypted

Post Office Protocol (POP)

*older protocol for downloading emails *main difference between POP & IMAP is POP will delete emails on server once they've been downloaded to the local device *developers often use to implement email automation as it's more straightforward than IMAP

Internet Message Access Protocol (IMAP)

*provides your device with ability to download emails and manage mailbox on the server storing your emails

Libraries

*reusable pieces of code that can be used by your application *purpose-built to provide a specific functionality *time-saving - developers use a library for specific functionality to save time to devote towards developing the application *unopinionated (?) - you have more freedom in using these than frameworks

User Datagram Protocol (UDP)

*solves corrupt (damaged) packet issue *packets can still arrive out of order or not arrive *used for data that can tolerate some data loss like video/phone calls or live video streaming

Frameworks

*structures - provides developers a structure to build with like a blueprint *frameworks use many libraries *the libraries the framework uses can be used by your application, your application can also use other libraries *opinionated - less freedom to create as you're working with a prebuilt structure

API endpoint

*used to specify how different resources can be accessed *the endpoint is built into the URL *once the endpoint is reached, API performs whatever actions, server side, is needed for the response *common responses are full web pages or SON

Sensor-based API

*what IOT - internet of things - is based on *physical interconnected sensors *track/respond to physical data

An integrated development environment, or IDE, is software for building applications. This kind of software application has many different features to help you as a developer. Which of the following statements are true? Choose all that apply. 1) Special keywords of the programming language are highlighted in different colors to make the code easier to read. 2) IDEs have a feature called Error Highlighting. 3) IDEs have a feature that can detect variables and functions and offer them as suggestions during autocomplete. 4) Refactoring is a process that changes the structure and functionality of the code.

1, 2, & 3

As a developer, there are several web browser developer tools available to you. For example, there is a console tab that outputs JavaScript logs and errors from a web application. Which of the following statements are true? Choose all that apply. 1) The Sources tab shows all content resolved for the current page. 2) The Network tab allows you to inspect the timeline and details of HTTP requests and responses for a webpage. 3) The Memory tab displays the parts of your code that are consuming the most resources 4) The Performance tab shows all of the information from all of the different tabs in one place.

1, 2, & 3

Informational Responses (HTTP)

100-199 code *provisional sent by server *interim, sent before actual response *most common '100 CONTINUE', meaning the web client should continue the request or ignore the response if request has already finished

Which of the following are valid IP addresses? 192.0.2.235 example.com 4527:0db8:0a00:1567:0200:ff00:0042:8329

192.0.2.235 & 4527:0db8:0a00:1567:0200:ff00:0042:8329

Successful Responses (HTTP)

200-299 *Successfully processed *'200 OK' is the most common, meaning depends on HTTP method: get = found/included post = successfully transmitted put = successfully transmitted delete = deleted

Redirection Messages (HTTP)

300-399 *indicate to client that requested resources have been moved to another path *most common are 301 MOVED PERMANENTLY & 302 FOUND (302 means a temporary redirection - when browsers receive this, they automatically request the new path)

Client Error (HTTP)

400-499 *indicate that request contained bad syntax/content *cannot be processed by web server *400 when browser.client submitted bad data to the web server *401 user must log into account before request can be completed *403 request was valid but web server is refusing to process it / user doesn't have sufficient permissions to execute action in web app *404 requested resource not found on web server

Server Error Response (HTTP)

500-599 *failure occurred on web server while trying to process the request *500 internal server error - generic status

What does an IP6 address look like?

8 groups of hexadecimal digits separated by a colon 2002:4559:1FE2::4559:1FE2

Web Hosting

A service where you can keep your website on a hosting company's web server. Essentially like renting a space on their server. 4 types: Shared hosting, Virtual Private Server (VPS), Dedicated Hosting, Cloud Hosting

What is the difference between a webpage, website, and web app?

A web page is a single HTML/CSS/Javascript file. A website is many webpages connected beneath the same domain name. What separates a website from a web app is the level of interactivity. Website= more informative Web app= more interactive A website will display the same information to every user, a web app will display varying information based on the user viewing it

HTTP request headers

After the request line, the HTTP headers are followed by a line break. There are various possibilities when including an HTTP header in the HTTP request. A header is a case-insensitive name followed by a: and then followed by a value.

Which of the following web resources can be transferred using HTTP? Select all that apply. HTML documents Images Files

All: HTML documents, images, files

Identify API and its use in application development

Application Programming Interface *Reusable pieces of code that save a lot of time * a set of functions/procedures for creating apps that access features and data of an operating system, app, or service. These are often the component bridging together two systems - often called gateways or middleware.

What happens when you search for a key phrase on your search engine?

Browser request the key phrase from the server > Server searches for the key phrase in the data base > Data base provides info to the server > Server sends info to browser > Browser renders page once all info is received

_____ are the destination that request/receive data, _____ are the routes the data travels across

Computers (client), networks

List common web browser developer tools

Console - Outputs javascript logs and errors from web app Element - most-used. For inspecting elements and their properties Sources - all content resolved from the current page, includes HTML, CSS, and Javascript Performance - Shows what the browser does over time and which functions are taking the most time Memory - displays the part of code using the most resources Network - allows for inspection of HTTP responses and requests for the web page

What does the payload of the IP packet contain?

Data of the packet and some other internet protocols

When you type a website address (for example, coursera.org) in your web browser, which protocol is used to find the IP address of the website?

Domain Name System Protocol (DNS)

True or False: When using TCP, data can arrive out of order.

False

HTTP Response Body

Following the HTTP response headers is the HTTP response body. This is the main content of the HTTP response. This can contain images, video, HTML documents and other media types.

HTTP Response Headers

Following the status line, there are optional HTTP response headers followed by a line break. Similar to the request headers, there are many possible HTTP headers that can be included in the HTTP response.

What does an IP4 address look like?

Four sets of numbers separated by decimals 192.0.2.235

Frameworks and Libraries Pros & Cons

Frameworks +time-saving +structure +best practice -structural constraints -compatability Libraries +replace libraries -selecting library set -compatibility

Identify which parts are the front-end and back-end of a website or web app

Front-End: user-centric design focus, UX/UI/Visual Aesthetics/Flow. Building buttons, layouts, navigations, images, graphics, animations, and organizing content Back-End: What cannot be seen and makes the website functional/interactive, server-side. Focus on building code, trouble-shooting/debugging, and data base management

Most common HTTP methods

GET - retrieve info from server POST - send data to server PUT - update whatever is on a web server with something else DELETE - remove resource

Common HTTP Methods & Layman terms

GET - retrieve info from server POST - send data to server PUT - update whatever is on the server DELETE - remove resource

Which of the following are valid HTTP methods? Select all that apply. GET POST SEND DELETE

GET, POST, DELETE

How do HTML, CSS, and Javascript interact to create a webpage or web app?

HTML provides the structural form of the webpage, CSS styles the elements, and javascript adds the dynamic functionality and interactivity

How does HTTP function? What are common HTTP methods?

HTTP is a request/return-based protocol. It basically is the communication of requests and responses via the internet between client and server. *Generally consist of: Method - what action client wants performed Path Version Headers HTTP response format is similar to request, responds with a header and an optional body and status code referring to if the requested action was completed

HTTP Request Body

HTTP requests can optionally include a request body. A request body is often included when using the HTTP POST and PUT methods to transmit data.

______ signify if HTTP request was successfully completed.

HTTP status

HTTP

Hypertext Transfer Protocol *Request/Response based protocol *used for transferring web resources (HTML docs, images, styles, other files)

HTTPS

Hypertext Transfer Protocol Secure *uses encryption - turns info into a secret code before it's sent that only the other computer can turn into the original message *requests/responses still behave in same way and have same content as HTTP

What is an IP address and how does it facilitate data transfer across the internet?

IP address = internet protocol address *every computer has one, it acts like a destination and return (source) address like sending something in the postal system *different IP protocols can be contained in IP packets (?) *TCP ensures no corrupt/lost/out-of-order packets in return for a small delay *UDP is good for data that can tolerate some loss like video/phone calls but data can still arrive out of order or get lost

HTTP Status Code Ranges

Informational 100-199 Successful 200-299 Redirection 300-399 Client Error 400-499 Server Error 500-599

Which of the following can be done using the developer tools in your browser? Select all that apply. Inspect the HTML elements of a web page. Check JavaScript error logs. Inspect a timeline of HTTP requests and responses. Upload images to the web server Inspect the performance and memory usage of a webpage.

Inspect the HTML elements of a web page. Check JavaScript error logs. Inspect a timeline of HTTP requests and responses. Inspect the performance and memory usage of a webpage.

Describe the purpose and benefits of an IDE

Integrated Development Environment *A software for building code that can highlight key words, highlight errors, and autosuggest (intellisense) *Makes an easier experience for writing code

IDE

Integrated Development Environment *software for building code - makes it easier *can highlight errors in code *can autosuggest (intellisense) *highlights key words

A web application is more ________________ compared to a website.

Interactive

What are libraries and frameworks? List the advantages and disadvantages of them both

Libraries are reusable pieces of code that are time-saving if implemented for specific functionality +you can replace libraries (unopinionated) -selecting library -not all libraries are compatible with one another Frameworks provide a structure to build with like a blueprint. They can be more restrictive as you must work within their structure. Frameworks are only compatible with certain libraries. +time-saving -restrictive (opinionated)

Why is sending data across the internet similar to the postal system?

Packets may arrive out of order, damaged, or get lost. You also need a return and destination address.

In software development, a library provides _________________________.

Reusable pieces of code that can be used by your application.

To reduce development time, developers use libraries in their application development. What's the main feature of a library?

Reusable pieces of code.

Which of the following are benefits of using an Integrated Development Environment (IDE) such as Visual Studio Code? Select all that apply. Syntax Highlighting Error Highlighting Autocomplete Autodelete IntelliSense

Syntax Highlighting Error Highlighting Autocomplete IntelliSense (autosuggest)

True or False: HTML describes the structure and content of a web page.

True

URL

Uniform Resource Locator contains: protocol/HTTP, domain name, and file path

What's the difference between a website and a web app?

Website is more informative. A user views content and the content is the same for every viewer. Web application is more interactive; the web app's content is often based on specific user (account/locations/etc.)

HTTP Responses

When the web server is finished processing the HTTP request, it will send back an HTTP response. The first line of the response is the status line. This line shows the client if the request was successful or if an error occurred. HTTP/1.1 200 OK​ The line begins with the HTTP protocol version, followed by the status code and a reason phrase. The reason phrase is a textual representation of the status code.

You are building a website with a team of developers. The team lead refers to APIs as gateways. Is this a correct use of terminology?

Yes, APIs are also known as gateways or middleware because they act as a bridge between systems.

Web server

a computer that allows other computers to make a request for data and responds by sending web page info back to the browser

In software development, an API is _________________________.

a set of functions that an application component or service can provide.

Developer tools: 'sources' tab

all content resolved from current page - includes all 3 front end tools

When sending a message to another computer, the source and destination are specified using ________________.

an IP Address

PUT (HTTP method)

client replaces a resource on web server

GET (HTTP method)

client requests a resource on web server

POST (HTTP method)

client submits data to a resource on web server

List the different tabs on web developer tools

console, sources, network, performance, memory, and elements

HTTP Header

contain additional info about the request and client that is making the request

IP Packets (Datagrams)

data being sent across the internet in the form of several messages. Made up of the IP Header and IP Date or Payload

Developer tools: 'memory' tab

displays parts of code consuming the most resources

Developer tools: 'network' tab

inspect timeline of HTTP responses and requests for the web page

HTTP Version

multiple version, version 1.1 & 2.0 are the most used

Developer tools: 'console' tab

outputs javascript logs and errors from web app

HTTP Path

representation of where resource is stored on the web server

API

set of functions/procedures for creating applications that access the features or data of operating system, app, or service. Often called gateway or middleware as they act as communicators between two applications

Developer tools: 'performance' tab

shows what the browser is doing over time and shows which functions take the most time

Developer tools: 'elements' tab

the most used. Used for inspecting elements and their properties

HTTP are used on top of ____ to transfer webpages and other content from websites

transmission control protocols (TCPs)