Front End Development

A collection of my JavaScript, HTML, and CSS notes, examples, and guides.

JavaScript

First, a list of resource:

https://github.com/yangshun/front-end-interview-handbook/blob/master/questions/javascript-questions.md
https://github.com/getify/You-Dont-Know-JS

About placing `script` tag

The modern approach is to use either async or defer attributes on script tag and place the tag in the head of the html document.

Async

With async, the file gets downloaded asynchronously and then executed as soon as it’s downloaded. async tells the browser it is safe to continue parsing while the script is being downloaded. If we have multiple scripts with the async attribute they are downloaded “asynchronously” (i.e., in parallel). Note, the browser is not blocked while the scripts are being downloaded, so the DOM construction is not disturbed.

Defer

With defer, the file gets downloaded asynchronously, but executed only when the document parsing is completed. With defer, scripts will execute in the same order as they are called. This makes defer the attribute of choice when a script depends on another script. For example, if you’re using jQuery as well as other scripts that depend on it, you’d use defer on them (jQuery included), making sure to call jQuery before the dependent scripts.

The old approach is to place the script tag either in the head section or at the end of the body section.

The reasoning for placing it in the head is to have all the scripts download before the DOM is built. This way, the script may insert its own HTML in the DOM before it is built. The reasoning for placing it at the end of the body section is that the DOM is built before the browser blocks to first download the script. A long script may take some time to download leaving the page looking static with the impression that nothing is happening. This would create a bad UX and may lead the user to leave.

See source.

Do you need `"text/javascript"` specified in your `script` tags?

This attribute is optional. Since Netscape 2, the default programming language in all browsers has been JavaScript. HTML5 doesn’t need the type="text/javascript" (it’s the default).

Allows you to safely access properties of objects without getting a Uncaught TypeError. For example null?.firstName will return undefined. It will not raise an error!

Destructuring JavaScript Objects

1
2
3
4
5
6
7
8
  const person = {
    first: 'Wes',
    last: 'Bos',
    country: 'Canada',
    city: 'Hamilton',
    twitter: '@wesbos'
  };
  const { first, last } = person;

Instead of the annoying:

1
2
  const first = person.first;
  const last = person.last;

What is a polyfill?

The term polyfill itself refers to some code that “allows you to have some specific functionality that you expect in current or “modern” browsers to also work in other browsers that do not have the support for that functionality built in.

For example, the sessionstorage property, which stores data for a given user session, is something that’s new in HTML5. Let’s say that we want to check to see if that property is available “natively” (which means built into) in the browser. So, we can write some JavaScript code like this to check to see if the sessionstorage property is defined:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  /*
    we define the isThereSessionStorage variable
    which will store either true or false
  */

  var isThereSessionStorage = (function() {
    try {
      return typeof window.sessionStorage !== 'undefined';
    } catch (e) {
      return false;
    }
  })(); 

  if(!isThereSessionStorage) {
    // our polyfill code goes here.... 
  }

Sources:

https://stackoverflow.com/questions/7087331/what-is-the-meaning-of-polyfills-in-html5
https://www.programmerinterview.com/html5/html5-polyfill/

null vs undefined

undefined: used when a variable has been declared but has not yet been assigned a value

null: null is an assignment value – it can be assigned to a variable as a representation of no value.

undefined is a type itself (undefined) and null is an object. Unassigned variables are initialized by JavaScript with a default value of undefined. JavaScript never sets a value to null. That must be done programmatically source.

Converting numbers between different bases

https://stackoverflow.com/questions/1337419/how-do-you-convert-numbers-between-different-bases-in-javascript

CSS

class selector is defined by full stop “.”
id selector is a defined by the name of the id preceded by the pound symbol (“#”)

HTML

HTML structures the webpage, identifying its elements such as paragraphs, headings, and lists.

`section` tag

<section> means that the content inside is grouped (i.e. relates to a single theme), and should appear as an entry in an outline of the page.

<div>, on the other hand, does not convey any meaning, aside from any found in its class, lang and title attributes. A div is a generic container for flow content, which does not inherently represent anything. It can be used to group elements for styling purposes

In that vein, a div is relevant only from a pure CSS or DOM perspective, whereas a section is relevant also for semantics and, in a near future, for indexing by search engines.

Source: https://stackoverflow.com/questions/6939864/what-is-the-difference-between-section-and-div

`template` tag

The HTML Content Template <template> element is a mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript.

Think of templates as a content fragment that is being stored for subsequent use in the document. We use JavaScript to populate this template with data and eventually insert it dynamically at runtime into some container. Fundamentally, templates allow us to define the general structure of something we may want to insert into the DOM and we only need to use JavaScript to copy this template (using template.content.cloneNode), populate it with real data, and inject it into the DOM (hence why it is not rendered by default). This is easier than building the template HTML structure manually using JavaScript in addition to the other steps we have to take to add it into the DOM. Read more on MDN here.

`HTTP` Request & Response Encoding

HTTP is a protocol for data transfer used by the World Wide Web.

HTTP headers must be encode encoded with ISO-8859-1 (which can be nominally considered as an enhanced ASCII version, containing umlauts, diacritic and other characters of West European languages). This allows browsers to know, ahead of time, how to decode an incoming request’s headers which (among other things) specifies the request Content-Type.

Content-Type is an HTTP request header that is used to indicate the media type of the resource – the browser needs this in order to know how to parse the data. Example:

1
2
  Content-Type: text/html; charset=UTF-8
  Content-Type: multipart/form-data; boundary=something

Read: https://blog.dareboost.com/en/2018/11/content-encoding-meta-charset-content-type-header/

Sometimes the browser will perform “MIME sniffing” to guess the Content-Type if it is not present or it may not follow the value of the header; to prevent this behavior, the header X-Content-Type-Options can be set to nosniff (source).

Charset detection

Character encoding detection, charset detection, or code page detection is the process of heuristically guessing the character encoding of a series of bytes that represent text. The technique is recognised to be unreliable and is only used when specific metadata, such as a HTTP Content-Type: header is either not available, or is assumed to be untrustworthy.

This algorithm usually involves statistical analysis of byte patterns, like frequency distribution of trigraphs of various languages encoded in each code page that will be detected; such statistical analysis can also be used to perform language detection. This process is not foolproof because it depends on statistical data.

Source: https://en.wikipedia.org/wiki/Charset_detection

How does the browser know which decoding standard to use?

Nowadays, (Unicode)[https://www.w3.org/International/articles/definitions-characters/#httpheader] – a universal character set, defining all the characters necessary to write the majority of languages – has become a standard, no matter what platform, device, application or language you’re targeting. UTF-8 is one of the Unicode encodings and the one that should be used for web content according to the World Wide Web Committee (W3C).

If the response is an HTML document, then there are atleast two ways to specify its encoding and, thus, how it should be decoded.

First, and probably easiest, it to specify a charset in the HTML page itself in the <meta> tag in the <head> element:

<meta charset="utf-8">

However, declaring a character set this way requires certain constraints to be respected. One constratint is that the element containing the character encoding declaration must be serialized completely within the first 1024 bytes of the document, to ensure that the browser will receive the information with the first packet transiting through the network. This is crucial, so that the browser knows how to decode the rest of the document (which may contain characters encoded using some specific standard). As the charset <meta> tag is the only one with this kind of requirement, the most common tip is to place it directly after the element opening tag:

1
2
3
  <html …>
    <head …>
      <meta charset="utf-8">

This works because up to the first 1024 bytes the browser will decode assuming ASCII.

A second more general way to specify the encoding is via the Content-Type HTTP.

Values for this header may include UTF-8 and UTF-16 encoding standards (among others). Both are methods to encode Unicode strings to byte sequences.

What happens if Content-Type and <meta> tag with charset is missing?

If the page starts with a UTF-8 or UTF-16 Byte order mark (BOM), then the encoding is taken from that. This happens before and in preference to looking at the HTTP header and the elements (source).
If there’s no BOM either, then it will read some amount of the HTML code from the page and then try to guess the encoding. If it cannot figure it out then it will default to the browser’s default character set. Depending on the browser it will often be something like Windows-1252 (a superset of Latin-1 also called ISO 8859-1) or UTF-8 (source).

Note however that, since the HTTP header has a higher precedence than the in-document meta declarations, content authors should always take into account whether the character encoding is already declared in the HTTP header. If it is, the meta element must be set to declare the same encoding (source).

Base64

https://stackoverflow.com/questions/47973487/how-is-encoded-data-sent-over-a-network
https://stackoverflow.com/questions/201479/what-is-base-64-encoding-used-for
https://stackoverflow.com/questions/3538021/why-do-we-use-base64
https://medium.com/swlh/powering-the-internet-with-base64-d823ec5df747
https://stackoverflow.com/questions/41315553/why-use-base64

Base64 is a method to encode a byte sequence to a string.

When you have some binary data that you want to ship across a network, you generally don’t do it by just streaming the bits and bytes over the wire in a raw format. Why? because some media are made for streaming text. You never know – some protocols may interpret your binary data as control characters (like a modem), or your binary data could be screwed up because the underlying protocol might think that you’ve entered a special character combination (like how FTP translates line endings).

Why 64?

Because you can generally rely on the same 64 characters being present in many character sets, and you can be reasonably confident that your data’s going to end up on the other side of the wire uncorrupted.

So, people use Base64 for “binary-to-text” encoding.

One example usecase involves encoding image binaries as Base64 so that it can be embedded within the HTML document itself. Example:

1
2
3
4
5
6
  <div>
    <p>Image encoded in HTML as Base64</p>
    <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
      AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
          9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
  </div>

https://stackoverflow.com/questions/11736159/advantages-and-disadvantages-of-using-base64-encoded-images

Base64 is an encoding to represent any byte sequence by a sequence of printable characters (i.e. A–Z, a–z, 0–9, +, and /).

From a high level, the encoding works as follows:

Take existing data binaries
Separate into groups of 6 bits
Now, each 6 bit group maps to some character defines in the Base64 chart

Base64 solves these problems by giving us a way to encode aribtrary bytes to bytes which are known to be safe to send without getting corrupted (ASCII alphanumeric characters and a couple of symbols).

To send text reliably you can first encode to bytes using a text encoding of your choice (for example UTF-8) and then afterwards Base64 encode the resulting binary data into a text string that is safe to send encoded as ASCII. The receiver will have to reverse this process to recover the original message. This of course requires that the receiver knows which encodings were used, and this information often needs to be sent separately (source).

UTF-8 is like the other UTF encodings a character encoding to encode characters of the Unicode character set UCS.

See: The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!)

Sources:

https://www.joelonsoftware.com/2003/10/08/the-absolute-minimum-every-software-developer-absolutely-positively-must-know-about-unicode-and-character-sets-no-excuses/
https://stackoverflow.com/questions/3866316/whats-the-difference-between-utf8-utf16-and-base64-in-terms-of-encoding
https://dzone.com/articles/utf-8-in-http-headers
https://stackoverflow.com/questions/3866316/whats-the-difference-between-utf8-utf16-and-base64-in-terms-of-encoding
https://stackoverflow.com/questions/201479/what-is-base-64-encoding-used-for

HTTP Request and Response headers

The Content-Type entity header is used to indicate the media type of the resource.

In responses, a Content-Type header tells the client what the content type of the returned content actually is. Browsers will do MIME sniffing in some cases and will not necessarily follow the value of this header; to prevent this behavior, the header X-Content-Type-Options can be set to nosniff.

In requests, (such as POST or PUT), the client tells the server what type of data is actually sent.

UTF-8 vs Unicode

https://stackoverflow.com/questions/643694/what-is-the-difference-between-utf-8-and-unicode

CORS

https://security.stackexchange.com/questions/170389/http-access-control-cors-purpose

https://stackoverflow.com/questions/29167428/same-origin-policy-and-cors-whats-the-point

Written on January 11, 2020

Cristian Gutu

Front End Development

JavaScript

About placing `script` tag

Do you need `"text/javascript"` specified in your `script` tags?

Safe Navigation Operator (i.e., “Elvis Operator”)

Destructuring JavaScript Objects

What is a polyfill?

Converting numbers between different bases

CSS

HTML

`section` tag

`template` tag

`HTTP` Request & Response Encoding

Charset detection

How does the browser know which decoding standard to use?

Base64

HTTP Request and Response headers

UTF-8 vs Unicode

CORS

Front End Development

JavaScript

About placing script tag

Do you need "text/javascript" specified in your script tags?

Safe Navigation Operator (i.e., “Elvis Operator”)

Destructuring JavaScript Objects

What is a polyfill?

Converting numbers between different bases

CSS

HTML

section tag

template tag

HTTP Request & Response Encoding

Charset detection

How does the browser know which decoding standard to use?

Base64

HTTP Request and Response headers

UTF-8 vs Unicode

CORS

About placing `script` tag

Do you need `"text/javascript"` specified in your `script` tags?

`section` tag

`template` tag

`HTTP` Request & Response Encoding