Frontend

Websites Inspection

var, let, const

HTTP

The DOM is a model of the document along with the API for manipulating it

 

The HTML is a markup language that allows your to represent a DOM in text form

var paragraphs = document.getElementsByTagName("P");

DOM API

HTML

Website Inspection

How "big" is the site?

What framework is it using?

What are all the scripts loaded?

Are we using HTTP 2 or HTTP1.1 when fetching files?

Change the text of any header

Change the background color

Show me the box model an element

What is the function called of an element?

(add a debugger there)

  • Images
  • Content Expiration 
  • Content Delivery Networks (CDN)
  • Minification

Performance

https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9?mc_cid=42683fc0fc&mc_eid=feda3bf9c5

Var vs Let vs Const

Var vs Let vs Const

http://jsfiddle.net/pberesuita/xb7h9c4u/15/

var sandwiches = ['turkey', 'tuna', 'chicken salad', 'pb&j'];

Find me tuna in the example

starter

http://jsfiddle.net/pberesuita/vc1g43qb/

solution

http://jsfiddle.net/pberesuita/vt5heupf/9/

Client/Server Communication

Client/Server Communication

http://jsfiddle.net/pberesuita/aes4okum/28/

AJAX may stand for Asynchronous JavaScript and XML

Asynchronous HTTP calls from a web front-end to a server

Ex: XmlHttpRequest

Note: Nowadays, it's more common to exchange JSON

Protocol to connect the web's page (hypertext)

REST is the way HTTP should be used.

https://developer.mozilla.org/en-US/?mc_cid=1cb2611e4f&mc_eid=feda3bf9c5

React

Frontend

By Paul Beresuita

Frontend

  • 307