HTTP – Peter Dillon

Front-End Web Development Questions – David Shariff

March 21, 2018March 23, 2018 Peter Dillon

Execution context references the ‘environment’ a function executes in; that is, variable scope (and the scope chain, variables in closures from outer scopes), function arguments, and the value of the this object.
Lexical scope is the concept that every inner level can access its outer levels

Hoisting: The way in which the JavaScript interpreter declares variables at the top of the function it is contained in (the current scope.) And to clarify – declared not initialed (assigned) a value. This results in some variables being accessible even though they are not yet physically declared in the code. Common practice in JS is to always declare your vars at the top of your scope to avoid confusion. Here’s a list of different hoisting scenarios.

Hoisting function variables:

foo()
function foo() {
  console.log('hi!') // works
}

foo()

function foo() {

console.log('hi!') // works

}

foo()
var foo = function() {
  console.log('hi!') // does not work
}

foo()

var foo = function() {

console.log('hi!') // does not work

}

Hoisting regular variables:

var a = 1;
function b() {
    a = 10;
  //  return;
    f();
    function f() {
      console.log('f ' + a);  
    }
}
b();
console.log('a ' + a);

var a = 1;

function b() {

a = 10;

// return;

f();

function f() {

console.log('f ' + a);

}

b();

console.log('a ' + a);

Function expressions is declaring and assigning the function to a var at the same time:

var getRectArea = function(width, height) { return width * height; }

1
2
3

var getRectArea = function(width, height) {
return width * height;
}

.call, .bind and .apply:

// CALL
function greet() {
  var reply = [this.person, 'is an', this.role].join(' ');
  console.log(reply);
}
var i = {
  person: 'Peter', 
  role: 'person'
};
greet.call(i); 
// ----------------------------------------
// BIND: Does not run function, but returns a function you can run later. 
var test = {
  logName: function(name) {
    console.log(name);
  },
  logNumber: function(num1, num2) {
    console.log(num1 + num2);
  }
}
var logString = test.logName.bind(test);
// So you have to run it explicitly.
logString('peter');
// ----------------------------------------
// Apply, you can write a method once and then inherit it in another object, 
// without having to rewrite the method for the new object.
var newObj = {
  do: function(num1, num2) { 
    test.logNumber.apply(this, [num1, 5]) 
  }
}
// APPLY: BINDS and RUNS (no need to run)
newObj.do(5);

// CALL

function greet() {

var reply = [this.person, 'is an', this.role].join(' ');

console.log(reply);

}

var i = {

person: 'Peter',

role: 'person'

};

greet.call(i);

// ----------------------------------------

// BIND: Does not run function, but returns a function you can run later.

var test = {

logName: function(name) {

console.log(name);

logNumber: function(num1, num2) {

console.log(num1 + num2);

}

var logString = test.logName.bind(test);

// So you have to run it explicitly.

logString('peter');

// ----------------------------------------

// Apply, you can write a method once and then inherit it in another object,

// without having to rewrite the method for the new object.

var newObj = {

do: function(num1, num2) {

test.logNumber.apply(this, [num1, 5])

}

// APPLY: BINDS and RUNS (no need to run)

newObj.do(5);

Prototype and Constructors:

// Prototype Access
var temp = {
  name: '',
  logName: function(n) {
    console.log(n);
  }
}
var dillon = Object.create(temp);
dillon.logName('hi');
var defaultObjectPrototype = Object.getPrototypeOf(dillon);
console.log( defaultObjectPrototype.hasOwnProperty('hi') );
console.log(  Object.getPrototypeOf(defaultObjectPrototype) );
//------------------------------------
// Constructor Usage
// Use capital case for constr functions...
function Person(name) {
  this.name = name
}
Person.prototype.logName = function(lastname) {
  console.log(this.name + ' ' + lastname)
}
Person.prototype.occupation = function(occ) {
  console.log(this.name + ' works as a ' + occ)
}
var me = new Person('Peter');
console.log( me.logName('Dillon') );
console.log( me.occupation('web dev') );

// Prototype Access

var temp = {

name: '',

logName: function(n) {

console.log(n);

}

var dillon = Object.create(temp);

dillon.logName('hi');

var defaultObjectPrototype = Object.getPrototypeOf(dillon);

console.log( defaultObjectPrototype.hasOwnProperty('hi') );

console.log( Object.getPrototypeOf(defaultObjectPrototype) );

//------------------------------------

// Constructor Usage

// Use capital case for constr functions...

function Person(name) {

this.name = name

}

Person.prototype.logName = function(lastname) {

console.log(this.name + ' ' + lastname)

}

Person.prototype.occupation = function(occ) {

console.log(this.name + ' works as a ' + occ)

}

var me = new Person('Peter');

console.log( me.logName('Dillon') );

console.log( me.occupation('web dev') );

Event Delegation: You place the event listener on the parent to capture the bubbled event – imagine a table of 1000 rows. The callback function lets you handle it in any way.
View example pen here.

typeof

var str = 'hello';
String.prototype.myMethod = function() {
  return typeof this;
}
str.myMethod()
// returns "object"
console.log( str.includes('e') );
// typeof str
// returns "string"
// Because behind the scenes, String creates a string object
// in order the give you methods that work on string
// Like this: 
var tempObj = new String('your current string');

var str = 'hello';

String.prototype.myMethod = function() {

return typeof this;

}

str.myMethod()

// returns "object"

console.log( str.includes('e') );

// typeof str

// returns "string"

// Because behind the scenes, String creates a string object

// in order the give you methods that work on string

// Like this:

var tempObj = new String('your current string');

Object.prototype.toString()

function Dog(name, species) {
  this.name = name;
  this.species = species;
}
dog1 = new Dog('Gabby', 'Dog');
Dog.prototype.toString = function dogToString() {
  return this.name, this.species;
}
console.log(dog1.toString());

function Dog(name, species) {

this.name = name;

this.species = species;

}

dog1 = new Dog('Gabby', 'Dog');

Dog.prototype.toString = function dogToString() {

return this.name, this.species;

}

console.log(dog1.toString());

Traversal up, down, left and right: View Pen
Manipulation – add, remove, copy, and create nodes in the DOM tree.
Change the text content of a node and toggle, remove or add a CSS classname. View Pen
Explain: role=”button” Can make any element (span, div etc.) behave as a button control to a screen reader, role=”presentation” Removes any semantic meaning so screen readers don’t react to it semantically.
HTTP requests – GET and POST along with associated headers such as Cache-Control, ETag, Status Codes, and Transfer-Encoding.
Security – JSONP, CORs, and iFrame policies View Pen
REST vs RPC:
The fundamental problem with RPC is coupling. RPC clients become tightly coupled to service implementation in several ways and it becomes very hard to change service implementation without breaking clients:
Clients are required to know procedure names;
Procedure parameters order, types and count matters. It’s not that easy to change procedure signatures(number of arguments, order of arguments, argument types etc…) on server side without breaking client implementations;
RPC style doesn’t expose anything but procedure endpoints + procedure arguments. It’s impossible for client to determine what can be done next.
On the other hand in REST style it’s very easy to guide clients by including control information in representations (HTTP headers + representation). For example:
It’s possible (and actually mandatory) to embed links annotated with link relation types which convey meanings of these URIs;
Client implementations do not need to depend on particular procedure names and arguments. Instead, clients depend on message formats. This creates possibility to use already implemented libraries for particular media formats. It’s possible to easily change URIs without breaking clients as far as they only depend on registered (or domain specific) link relations;
It’s possible to embed form-like structures in representations, giving clients the possibility to expose these descriptions as UI capabilities if the end user is human;
Support for caching is additional advantage;
Standardised status codes;

Interview Challenges

January 11, 2016April 16, 2016 Peter Dillon

I am in the process of interviewing and wanted to document all the code challenges I am confronted with.

For every repeating letter in a string, add a “*” between them.
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”adwyLw” default_tab=”result” user=”peterdillon”]See the Pen String Manipulation JS Challenge by Peter (@peterdillon) on CodePen.[/codepen_embed]

Check if a given number is a power of 2:
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”GoEvaa” default_tab=”result” user=”peterdillon”]See the Pen Check Power of 2 by Peter (@peterdillon) on CodePen.[/codepen_embed]

Presented with a photoshop design I was asked to code this in 20 minutes, making sure the bottom 3 elements were coded in flex-box: [codepen_embed height=”268″ theme_id=”0″ slug_hash=”ZQyzao” default_tab=”result” user=”peterdillon”]See the Pen Interview Code Challenge by Peter (@peterdillon) on CodePen.[/codepen_embed]

What does jQuery .delegate do? How is it the same or different than .on? What does .off do? What is bubbling?
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”jWGwKz” default_tab=”result” user=”peterdillon”]See the Pen Event Capturing with .on, .delegate and plain js by Peter (@peterdillon) on CodePen.[/codepen_embed]

How does css animation and transition work?
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”dGVWqw” default_tab=”result” user=”peterdillon”]See the Pen CSS Transform, Transition and Animation by Peter (@peterdillon) on CodePen.[/codepen_embed]

Photoshop Challenge:
I was asked to grab a layer with a drop shadow effect on it from within a full page layout design document and export it as a png with transparency and effect included.

Right click on desired layer and choose “Duplicate Layer”
In dialog “Destination” choose ‘New”
This gives you a new document the same height and width as the original with your new layer in it’s respective place
Choose menu “Image > Trim” (There are many options when trimming but for this purpose the default meets the requirement)
To save as, you have two choices, the classic “Ctrl+Alt+Shift+S” to open the “Save For Web” dialog or you can Right click layer and choose “Quick Export As PNG”
Compression varies – on small simple graphic QE was more compressed – on large colorful file – SFW was smaller.

JasonP and Cross Domain Access

January 7, 2016April 16, 2016 Peter Dillon

In the jQuery ajax request, the use of a callback function wraps our data to allow the cross domain access to happen.

$.ajax({
 dataType: 'jsonp',
 jsonpCallback: 'jsonCallback',
 // ...

$.ajax({

dataType: 'jsonp',

jsonpCallback: 'jsonCallback',

// ...

This allows us to request the JSON via AJAX using JSONP (json + padding) and the callback function we created around the JSON content as seen here on this file that sits on my personal server (not codepen)

jsonCallback({
  "name": "local storage app",
  "version": "1.1.1",
  "description": "Storing a json object"
});

jsonCallback({

"name": "local storage app",

"version": "1.1.1",

"description": "Storing a json object"

});

Here is a pen of the final result.
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”XXRJPZ” default_tab=”result” user=”peterdillon”]See the Pen Load JsonP File From Cross Domain Server And Store In localStorage() by Peter (@peterdillon) on CodePen.[/codepen_embed]

I found some pretty useful documentation here:
Sitepoint article. I could not get the second non-callback method to work. Any help there would be appreciated.
Sam Croft article.
Oscar Godson article.
Stack Overflow

HTML5 localStorage

December 5, 2015March 21, 2018 Peter Dillon

As an exercise, I wanted to use vanilla javascript and localStorage() to take two items from the input fields, store them in localStorage, then get those stored items and place them as values back into the inputs. Finally clearing all localStorage contents and the input fields.

The HTML looks like this:


<form id="localStorageTest" method="post" action="">
	    <label>Question 1</label><br>
	    <input type="text" name="q0" id="q0" class="q" value="" /><br>
	    <label>Question 2</label><br>
	    <input type="text" name="q1" id="q1" class="q" value="" /><br>
		<button type="button" id="storage">Store Items</button>
		<button type="button" id="retrieve">Get Items</button>
    <button type="button" id="clear">Clear Items</button>
</form>

<label>Question 1</label><br>

<label>Question 2</label><br>

<button type="button" id="storage">Store Items</button>

<button type="button" id="retrieve">Get Items</button>

<button type="button" id="clear">Clear Items</button>

</form>

The JS looks like this:


var stbt = document.getElementById("storage");
stbt.addEventListener("click", storeIt, false);

var rtbt = document.getElementById("retrieve");
rtbt.addEventListener("click", retrieve, false);

var clbt = document.getElementById("clear");
clbt.addEventListener("click", clear, true);

var elv = document.getElementsByClassName('q');

function storeIt() {
	for (var i = 0; i < elv.length; i++) {
		var theVal = elv[i].value;
		if(theVal == '') { 
			alert("Enter content, because localStorage will save empty stings."); 
			return false; 
		}
		var storeName = elv[i].className + [i];
		localStorage.setItem(storeName, theVal);
	}
	alert("You've stored items. Refresh and click 'Get Items' to re-populate the fields.");
}

function retrieve() {
	if (window.localStorage.length == 0) { alert("Nothing stored!"); }
	for (var i = 0; i < localStorage.length; i++){
    	var obj = localStorage.getItem(localStorage.key(i));
    	document.getElementById('q'+[i]).value = localStorage.getItem('q'+[i]);
	}
}
function clear() {
  localStorage.clear();
  var vlu = document.getElementsByClassName('q');
  for (var i = 0; i < vlu.length; i++){
    vlu[i].value = '';
  }
}

var stbt = document.getElementById("storage");

stbt.addEventListener("click", storeIt, false);

var rtbt = document.getElementById("retrieve");

rtbt.addEventListener("click", retrieve, false);

var clbt = document.getElementById("clear");

clbt.addEventListener("click", clear, true);

var elv = document.getElementsByClassName('q');

function storeIt() {

for (var i = 0; i < elv.length; i++) {

var theVal = elv[i].value;

if(theVal == '') {

alert("Enter content, because localStorage will save empty stings.");

return false;

}

var storeName = elv[i].className + [i];

localStorage.setItem(storeName, theVal);

}

alert("You've stored items. Refresh and click 'Get Items' to re-populate the fields.");

}

function retrieve() {

if (window.localStorage.length == 0) { alert("Nothing stored!"); }

for (var i = 0; i < localStorage.length; i++){

var obj = localStorage.getItem(localStorage.key(i));

document.getElementById('q'+[i]).value = localStorage.getItem('q'+[i]);

}

function clear() {

localStorage.clear();

var vlu = document.getElementsByClassName('q');

for (var i = 0; i < vlu.length; i++){

vlu[i].value = '';

}

And finally a Codepen.io if you’d like to play with it:

See the Pen Load JsonP File From Cross Domain Server And Store In localStorage() by Peter (@peterdillon) on CodePen.

HTTP Actions

December 1, 2015December 1, 2015 Peter Dillon

(Rewritten and taken from http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html)

OPTIONS
GET
HEAD
POST
PUT
DELETE
TRACE
CONNECT

1) OPTIONS

The OPTIONS method represents a request for information about the communication options available on the request/response chain identified by the Request-URI. This method allows the client to determine the options and/or requirements associated with a resource, or the capabilities of a server, without implying a resource action or initiating a resource retrieval.

Responses to this method are not cacheable.

If the OPTIONS request includes an entity-body (as indicated by the presence of Content-Length or Transfer-Encoding), then the media type MUST be indicated by a Content-Type field. Although this specification does not define any use for such a body, future extensions to HTTP might use the OPTIONS body to make more detailed queries on the server. A server that does not support such an extension MAY discard the request body.

If the Request-URI is an asterisk (“*”), the OPTIONS request is intended to apply to the server in general rather than to a specific resource. Since a server’s communication options typically depend on the resource, the “*” request is only useful as a “ping” or “no-op” type of method; it does nothing beyond allowing the client to test the capabilities of the server. For example, this can be used to test a proxy for HTTP/1.1 compliance (or lack thereof).

If the Request-URI is not an asterisk, the OPTIONS request applies only to the options that are available when communicating with that resource.

A 200 response SHOULD include any header fields that indicate optional features implemented by the server and applicable to that resource (e.g., Allow), possibly including extensions not defined by this specification. The response body, if any, SHOULD also include information about the communication options. The format for such a

body is not defined by this specification, but might be defined by future extensions to HTTP. Content negotiation MAY be used to select the appropriate response format. If no response body is included, the response MUST include a Content-Length field with a field-value of “0”.

The Max-Forwards request-header field MAY be used to target a specific proxy in the request chain. When a proxy receives an OPTIONS request on an absoluteURI for which request forwarding is permitted, the proxy MUST check for a Max-Forwards field. If the Max-Forwards field-value is zero (“0”), the proxy MUST NOT forward the message; instead, the proxy SHOULD respond with its own communication options. If the Max-Forwards field-value is an integer greater than zero, the proxy MUST decrement the field-value when it forwards the request. If no Max-Forwards field is present in the request, then the forwarded request MUST NOT include a Max-Forwards field.

2) GET

The GET method means retrieve whatever information (in the form of an entity) is identified by the Request-URI. If the Request-URI refers to a data-producing process, it is the produced data which shall be returned as the entity in the response and not the source text of the process, unless that text happens to be the output of the process.

The semantics of the GET method change to a “conditional GET” if the request message includes an If-Modified-Since, If-Unmodified-Since, If-Match, If-None-Match, or If-Range header field. A conditional GET method requests that the entity be transferred only under the circumstances described by the conditional header field(s). The conditional GET method is intended to reduce unnecessary network usage by allowing cached entities to be refreshed without requiring multiple requests or transferring data already held by the client.

The semantics of the GET method change to a “partial GET” if the request message includes a Range header field. A partial GET requests that only part of the entity be transferred, as described in section 14.35. The partial GET method is intended to reduce unnecessary network usage by allowing partially-retrieved entities to be completed without transferring data already held by the client.

The response to a GET request is cacheable if and only if it meets the requirements for HTTP caching described in section 13.

3) HEAD

The HEAD method is identical to GET except that the server MUST NOT return a message-body in the response. The metainformation contained in the HTTP headers in response to a HEAD request SHOULD be identical to the information sent in response to a GET request. This method can be used for obtaining metainformation about the entity implied by the request without transferring the entity-body itself. This method is often used for testing hypertext links for validity, accessibility, and recent modification.

The response to a HEAD request MAY be cacheable in the sense that the information contained in the response MAY be used to update a previously cached entity from that resource. If the new field values indicate that the cached entity differs from the current entity (as would be indicated by a change in Content-Length, Content-MD5, ETag or Last-Modified), then the cache MUST treat the cache entry as stale.

4) POST

The POST method is used to request that the origin server accept the entity enclosed in the request as a new subordinate of the resource identified by the Request-URI in the Request-Line. POST is designed to allow a uniform method to cover the following functions:

Annotation of existing resources
Posting a message to a bulletin board, newsgroup, mailing list,
or similar group of articles
Providing a block of data, such as the result of submitting a
form, to a data-handling process
Extending a database through an append operation.

The actual function performed by the POST method is determined by the server and is usually dependent on the Request-URI. The posted entity is subordinate to that URI in the same way that a file is subordinate to a directory containing it, a news article is subordinate to a newsgroup to which it is posted, or a record is subordinate to a database.

The action performed by the POST method might not result in a resource that can be identified by a URI. In this case, either 200 (OK) or 204 (No Content) is the appropriate response status, depending on whether or not the response includes an entity that describes the result.

If a resource has been created on the origin server, the response SHOULD be 201 (Created) and contain an entity which describes the status of the request and refers to the new resource, and a Location header (see section 14.30).

Responses to this method are not cacheable, unless the response includes appropriate Cache-Control or Expires header fields. However, the 303 (See Other) response can be used to direct the user agent to retrieve a cacheable resource.

POST requests MUST obey the message transmission requirements set out in section 8.2.

5) PUT

The PUT method requests that the enclosed entity be stored under the supplied Request-URI. If the Request-URI refers to an already existing resource, the enclosed entity SHOULD be considered as a modified version of the one residing on the origin server. If the Request-URI does not point to an existing resource, and that URI is capable of being defined as a new resource by the requesting user agent, the origin server can create the resource with that URI. If a new resource is created, the origin server MUST inform the user agent via the 201 (Created) response. If an existing resource is modified, either the 200 (OK) or 204 (No Content) response codes SHOULD be sent to indicate successful completion of the request. If the resource could not be created or modified with the Request-URI, an appropriate error response SHOULD be given that reflects the nature of the problem. The recipient of the entity MUST NOT ignore any Content-* (e.g. Content-Range) headers that it does not understand or implement and MUST return a 501 (Not Implemented) response in such cases.

If the request passes through a cache and the Request-URI identifies one or more currently cached entities, those entries SHOULD be treated as stale. Responses to this method are not cacheable.

The fundamental difference between the POST and PUT requests is reflected in the different meaning of the Request-URI. The URI in a POST request identifies the resource that will handle the enclosed entity. That resource might be a data-accepting process, a gateway to some other protocol, or a separate entity that accepts annotations. In contrast, the URI in a PUT request identifies the entity enclosed with the request — the user agent knows what URI is intended and the server MUST NOT attempt to apply the request to some other resource. If the server desires that the request be applied to a different URI,

it MUST send a 301 (Moved Permanently) response; the user agent MAY then make its own decision regarding whether or not to redirect the request.

A single resource MAY be identified by many different URIs. For example, an article might have a URI for identifying “the current version” which is separate from the URI identifying each particular version. In this case, a PUT request on a general URI might result in several other URIs being defined by the origin server.

HTTP/1.1 does not define how a PUT method affects the state of an origin server.

PUT requests MUST obey the message transmission requirements set out in section 8.2.

Unless otherwise specified for a particular entity-header, the entity-headers in the PUT request SHOULD be applied to the resource created or modified by the PUT.

6) DELETE

The DELETE method requests that the origin server delete the resource identified by the Request-URI. This method MAY be overridden by human intervention (or other means) on the origin server. The client cannot be guaranteed that the operation has been carried out, even if the status code returned from the origin server indicates that the action has been completed successfully. However, the server SHOULD NOT indicate success unless, at the time the response is given, it intends to delete the resource or move it to an inaccessible location.

A successful response SHOULD be 200 (OK) if the response includes an entity describing the status, 202 (Accepted) if the action has not yet been enacted, or 204 (No Content) if the action has been enacted but the response does not include an entity.

If the request passes through a cache and the Request-URI identifies one or more currently cached entities, those entries SHOULD be treated as stale. Responses to this method are not cacheable.

7) TRACE

The TRACE method is used to invoke a remote, application-layer loop- back of the request message. The final recipient of the request SHOULD reflect the message received back to the client as the entity-body of a 200 (OK) response. The final recipient is either the

origin server or the first proxy or gateway to receive a Max-Forwards value of zero (0) in the request (see section 14.31). A TRACE request MUST NOT include an entity.

TRACE allows the client to see what is being received at the other end of the request chain and use that data for testing or diagnostic information. The value of the Via header field (section 14.45) is of particular interest, since it acts as a trace of the request chain. Use of the Max-Forwards header field allows the client to limit the length of the request chain, which is useful for testing a chain of proxies forwarding messages in an infinite loop.

If the request is valid, the response SHOULD contain the entire request message in the entity-body, with a Content-Type of “message/http”. Responses to this method MUST NOT be cached.

8) CONNECT

This specification reserves the method name CONNECT for use with a proxy that can dynamically switch to being a tunnel (e.g. SSL tunneling [44]).