Front end concepts

What is coffeescript?

"it's just javascript" a small language that compiles into js but is easier to read for people. Helps write shorter and more efficient code.

What is Ajax?

Asynchronous JavaScript and XML, uses a combination of existing technologies like JavaScript, CSS, and XML, allows for information updates without page refresh, allows for a more responsive user experience. Web interaction happens -> XMLhttprequest made to server, request is received by server and an appropriate response is sent back and then updated to the website.

git reset

Command to reset the staging area to match the most recent commit, but leave the working directory unchanged

What is closure in javascript?

A closure is a relationship between two functions, an outer function and an inner function. *The inner function can be accessed only from statements in the outer function.* The inner function forms a closure: *the inner function can use the arguments and variables of the outer function, while the outer function cannot use the arguments and variables of the inner function.* This is important for privacy and the module pattern.e

What is a CDN?

A content delivery network, a global network of servers that help distribute files and information faster and with efficiency. Boosts performance and reduces load time.

Function declaration

A function prototype followed by ';'. It gives the function return type, name, and the names and types of all parameters.

What is a JS promise?

A promise in js a proxy for a value that isn't known yet at the time of the creation of a promise. Can be pending, fulfilled or rejected. Works with async code. Once a promise is called it starts in a pending state. The calling function continues to execute while the promise is pending. The promise supplies the info later.

What is domain prefetching?

Allows for a webpage to look up a DNS lookup to get a website's IP in the background before a user has clicked to improve speed.

unit vs functional testing.

Unit is done by programmer at time of coding, functional is testing done by separate party after initial development.

What is a ternary expression?

Use the ? operator and truthy and falsy, it's a one liner if else operation.

What is user-centered design?

User-centered design is an iterative design process in which designers focus on the users and their needs in each phase of the design process. UCD calls for involving users throughout the design process via a variety of research and design techniques so as to create highly usable and accessible products for them.

git add

add files to staging area

centralized vs distributed vcs

centralized vcs is where there's a singular storage server, no dev has a complete version of the code. Distributed vcs have every person with a whole version of the code.

git commit

commit changes to the head, not to the remote

git config

configure username and email

What is coercion in javascript?

converting between two built-in types. int to string for example. Can be implicit or explicit.

git init

create a local repository

What is the difference between span and div?

div is a block element and span is inline element.

Describe event propagation

event propagation is how a js event like a click or hover travels through the DOM and how the event is handled by certain elements that may or may not be listening to it.

What is xml

extensible markup language, it's a markup language for storing and transporting data.

What is a callback function?

function that is passed to another function as an argument and is executed after some operation has been completed.

fix merge conflict

go to pull requests w/ merge conflict and choose which changes you want to include or a new modification with both sets of changes working.

What is NPM?

npm stands for Node Package Manager. npm provides following two main functionalities: Online repositories for node.js packages/modules which are searchable on search.nodejs.org Command line utility to install packages, do version management and dependency management of Node.js packages.

git pull

pull the most up to date version of code from remote repository to your local. it's a git fetch and then a git merge.

git push

push a changed local file to the remote repository.

git diff

view changes made to a file

merge conflict

when you have merging branches with conflicting commits. git needs your input on which changes to include in the final merge.

What is IIFE?

Immediately-Invoking Function Expression (function(){})() //executes anonymous function immediately AKA self-executing anonymous function

What is Scope in JavaScript?

In JavaScript, each function gets its own scope. Scope is basically a collection of variables as well as the rules for how those variables are accessed by name. Only code inside that function can access that function's scoped variables. A variable name has to be unique within the same scope. A scope can be nested inside another scope. If one scope is nested inside another, code inside the innermost scope can access variables from either scope.

What is polymorphism?

In OOP, polymorphism is often expressed as one interface and multiple functions.

git merge

Merging is Git's way of putting a forked history back together again. The git merge command lets you take the independent lines of development created by git branch and integrate them into a single branch. Note that all of the commands presented below merge into the current branch. The current branch will be updated to reflect the merge, but the target branch will be completely unaffected. Again, this means that git merge is often used in conjunction with git checkout for selecting the current branch and git branch -d for deleting the obsolete target branch.

What is node.js?

Node.js is a web application framework built on Google Chrome's JavaScript Engine (V8 Engine). Node.js comes with runtime environment on which a Javascript based script can be interpreted and executed (It is analogus to JVM to JAVA byte code). This runtime allows to execute a JavaScript code on any machine outside a browser. Because of this runtime of Node.js, JavaScript is now can be executed on server as well. Node.js = Runtime Environment + JavaScript Library

null vs undefined

Null: a type that represents nothing (expresses a lack of identification) Undefined: value assigned to variables that have not been assigned a value (represents a lack of assignment of the variable)

What is the KISS principle?

Keep it simple, stupid; The best answers often come from the simplest equations

this

Kinda tricky in js. It refers to the window object in the global state. Strict top level function this is undefined. This in js is different from other languages that refer to instance of a class. Generally refers to object that is calling the function. When invoking methods of an object, if you store the method in a variable without specifying the object this will refer back to the window. You need to use bind to bind the object to the method when storing in a variable. In es6 arrow functions this is inherited from outside. Aka this gets funky. Type errors

Responsive vs Adaptive?

Often misused terms and mistaken for each other, responsive web design is fluid grid based web design where regardless of resolution, content forms around the given resolution. Adaptive design focuses on different common screen resolutions and uses media queries to make sure that the given screen resolutions look good.

What is strict mode?

Strict Mode is a new feature in ECMAScript 5 that allows you to place a program, or a function, in a "strict" operating context. This strict context prevents certain actions from being taken and throws more exceptions.

HTTP response status codes: 200-299?

Successful Responses

git stash

Temporarily saves changes that you don't want to commit immediately. You can apply the changes later. Example: git stash Saved working directory and index state "WIP on master: 84f241e first commit" HEAD is now at 84f241e first commit (To restore them type "git stash apply")

What are meta tags?

The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.

What is a spread operator?

Lets you spread out elements of an iterable object.

Local Storage vs session storage vs cookies?

Local Storage: 1. No expiration date 2. Larger storage size 3. data is easily stored and read 4. can store js primitives Session Storage: 1. Stores data until session is over, tab closed. 2. More storage space than a cookie. 3. Easily read and changed. 4. can store js primitives Cookies: 1. text files that contain small bits of data 2. 4kb per cookie 3. data can only read in plain text form 4. only stores string variables

HTTP response status codes: 400-499?

Client Error Responses

git fetch

Fetches all the objects from the remote repository that are not present in the local one. Does not merge

Function expression?

1 var bindingName = function actualName () { 2 //... 3 }; More commonly used when conditional declaration needed.

What are three ways to reduce page load time?

1. Image / asset optimization 2. css at top 3. browser caching

New features in css3?

1. Opacity 2. Attribute selectors 3. rounded corners 4. css colors 5. box shadow

How would you optimize a website's assets/resources?

1. Pre-optimize the assets to make them as lightweight as possible. 2. Host assets on a content delivery network. 3. Use CSS sprites. 4. Scripts should be placed at bottom w/ css at top 5. Bundle your files to reduce http/https request 6. Async load your scripts

What does CORS stand for and what issue does it address?

CORS is the cross origin resource sharing which allows you to make requests from one website to another. For security reasons a browser is not allowed to do this when the requests are made via a script, CORS allows you to do so by supplying headers that grant access to XMLhttprequests

What are CSS sprites?

CSS Sprites are a means of combining multiple images into a single image file for use on a website, to help with performance. You can use node/grunt/gulp to automate sprites for you. They use the same background image and have different background positions.

What are css sprites?

CSS Sprites are a means of combining multiple images into a single image file for use on a website, to help with performance. You can use node/grunt/gulp to automate sprites for you. They use the same background image and have different background positions.

What is clickjacking?

ClickJacking is an attack that fools users into thinking they are clicking on one thing when they are actually clicking on another. The attack is possible thanks to HTML frames (iframes).

Display:none vs. visibility: hidden

Display None doesn't take space when rendered. visibility none is combo is opacity: 0 and pointer-events: none. Opacity and display none affect children, visibility none does not.

git status

Displays the state of the working directory and the staging area. It lets you see which changes have been staged, which haven't, and which files aren't being tracked by Git. Status output does not show you any information regarding the committed project history.

What is load balancing?

Distributing incoming HTTP or application requests across multiple devices so that no single device is overwhelmed.

When does domcontentloaded event fire? When does the load event fire?

Domcontentloaded fires when all the nodes of the DOM tree have been constructed. Load fires when all the images and assets have been loaded.

What is encapsulation?

Encapsulation is the combining of data and code into a single object.

What is event bubbling and event capturing?

Event bubbling is when nested elements are listening for the same event. It dictates that the innermost element gets the element first then propagates to the outer element. Event capturing or event trickling is the opposite where the outermost element gets the event first then propagates inwards.

What are the JavaScript data types?

Following are the JavaScript Data types: Number String Boolean Object Undefined

HTML vs XML vs XHTML

HTML: Hyper text markup language, markup language for the structure of a website. XHTML: Same as HTML but uses XML rules. XML: eXtensible markup language for transferring data. Provides rules for creating and encoding documents.

HTTP response status codes: 100-199?

Information responses

What is an inline element?

Inline elements appears "in line" within the flow of the text with your page (goes with the flow)

Inline vs Inline-Block

Inline-Block allows you to set height and width of the element.

What is a rest parameter?

It allows us to represent an indefinite number of arguments as an array.

What is the reduce method?

It basically passes a reducer callback function. Looking through each index of an array it'll add the current value to previous value until there are no more values to add.

What is <!DOCTYPE html>?

It's not an html tag, tells your browser which version of html is running.

HTTP response status codes: 300-399?

Redirection Responses

Normalize vs reset css

Reset: strip all default browser styling, normalize: preserve useful default styles and corrects bugs for common browser dependencies.

What is an SQL injection?

SQL injections are pieces of malicious SQL code entered into a websites input box, which then reveals sensitive information without the permission of the website owner when executed.

What is Sass?

Sass or Syntactically Awesome StyleSheets is a CSS preprocessor that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly. A CSS preprocessor is a scripting language that extends CSS by allowing developers to write code in one language and then compile it into CSS.

HTTP response status codes: 500-599?

Server Error Responses

What is callback hell?

The asynchronous function requires callbacks as a return parameter. When multiple asynchronous functions are chained together then callback hell situation comes up.

What is function.prototype.bind

The bind() method creates a new function that when called, has its 'this' keyword set to the provided value.

What are defer and async attributes in script tag?

The script with async attribute will be executed once it is downloaded. While the script with defer attribute will be executed after completing the DOM parsing. The scripts loaded with async does n't guarantee any order. While the scripts loaded with defer attribute maintains the order in which they appear on the DOM. Defer waits until the document has finished parsing before executing.

Function scoped vs block scoped

Var is function scoped and let and const are block scoped. Variables declared with function scope are available throughout the function it's declared in, even if it's nested further within a block. Block scope functions if declared within a block like an if statement are only available within the block.

var vs let vs const

Variable declaration in JS. Var has a function scope and is the most loose, let and const are both blocked scope. Variables declared with const need to be instantiated on declaration and cannot be changed.

VCS

Version control system, a system where changes to files are kept track of and where you can go to revert to prev versions. Helps guarantee a working build and thst people on a team can work on most updated version of a file.

What is strict mode and why do we use it?

We can enter into strict mode to turn bad syntax into real errors. Eliminates silent errors.

What is a css rule?

Web browsers apply CSS rules to a document to affect how they are displayed. A CSS rule is formed from: A set of properties, which have values set to update how the HTML content is displayed, A selector, which selects the element(s) you want to apply the updated property values to. A set of CSS rules contained within a stylesheet determines how a webpage should look.

What is webpack?

Webpack is a module bundler, this is useful because our client side application has many files and many dependencies, webpack can be used to bundle these files together so that our server has to send less files. This is even more important in Angular 2, since we are working with TypeScript webpack can also transpile the files into es5 standard of JavaScript.

What is the CSS box model?

is essentially boxes within boxes that wraps around HTML elements, and it consists of from outer box to inner box: margins, borders, padding, and the actual content. Content, Padding, Border, Margin

How to check if a variable is number in js.

isNaN(variable)

Find the length of a number in js.

let x = 840; x.toString().length