Web Dev Interview Questions

What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?

"- Resetting: Remove all the native styles provided by browsers - Normalizing: Make the browser styles consistent"

What are HTTP methods? List all HTTP methods that you know, and explain them.

"GET - request a resource. POST - create or update an resource. PUT - update an existing resource. DELETE - delete resource. PATCH - partially modification to an resource. TRACE - echoes the received request so you can see information that is changed by intermediated servers. HEAD - request a response header identical to GET method. It's used to get meta information without sending the whole content. OPTIONS - returns what method target server supports for a specified URL. CONNECT - converts a request connection to as transparent TCP/IP."

What is JSON and why would I use it?

"JSON (JavaScript Object Notation) is a lightweight format that is used for data interchanging. It is based on a subset of JavaScript language (the way objects are built in JavaScript). As stated in the MDN, some JavaScript is not JSON, and some JSON is not JavaScript. An example of where this is used is web services responses. In the 'old' days, web services used XML as their primary data format for transmitting back data, but since JSON appeared (The JSON format is specified in RFC 4627 by Douglas Crockford), it has been the preferred format because it is much more lightweight You can find a lot more info on the official JSON web site. JSON is built on two structures: A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array. An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence. JSON Structure JSON Object diagram JSON Array diagram JSON Value diagram JSON String diagram JSON Number diagram Here is an example of JSON data: { ""firstName"": ""John"", ""lastName"": ""Smith"", ""address"": { ""streetAddress"": ""21 2nd Street"", ""city"": ""New York"", ""state"": ""NY"", ""postalCode"": 10021 }, ""phoneNumbers"": [ ""212 555-1234"", ""646 555-4567"" ] } JSON in JavaScript When working with JSON and JavaScript, you may be tempted to use the eval function to evaluate the result returned in the callback, but this is not suggested since there are two characters (U+2028 & U+2029) valid in JSON but not in JavaScript (read more of this here). Therefore, one must always try to use Crockford's script that checks for a valid JSON before evaluating it. Link to the script explanation is found here and here is a direct link to the js file. Every major browser nowadays has its own implementation for this. Example on how to use the JSON Parser (with the json from the above code snippet): //The callback function that will be executed once data is received from the server var callback = function (result) { var johnny = JSON.parse(result); //Now, the variable 'johnny' is an object that contains all of the properties //from the above code snippet (the json example) alert(johnny.firstName + ' ' + johnny.lastName); //Will alert 'John Smith' }; The JSON Parser also offers another very useful method, stringify. This method accepts a JavaScript object as a parameter, and outputs back a string with JSON format. This is useful for when you want to send data back to the server: var anObject = {name: ""Andreas"", surname : ""Grech"", age : 20}; var jsonFormat = JSON.stringify(anObject); //The above method will output this: {""name"":""Andreas"",""surname"":""Grech"",""age"":20} The above two methods (parse and stringify) also take a second parameter, which is a function that will be called for every key and value at every level of the final result, and each value will be replaced by result of your inputted function. (More on this here) Btw, for all of you out there who think JSON is just for JavaScript, check out this post that explains and confirms otherwise."

What's a typical use case for anonymous functions?

"Since Anonymous Functions are function expressions rather than the regular function declaration which are statements. Function expressions are more flexible. We can assign functions to variables, object properties, pass them as arguments to other functions, and even write a simple one line code enclosed in an anonymous functions. Example: var squaredArray = inputArray.map(function(x) { return x * x; }); With ES6 syntax this becomes even more concise. var squaredArray = inputArray.map(x => x * x); Another typical example would be an anonymous function used by popular frameworks used as IIFE (Immediate Invoked Function Expression). (function() { })();"

How do you serve a page with content in multiple languages?

"Use `lang` (or `xml:lang` for XHTML) in tags. Also metadata and `Content-Language` HTTP header can be used."

variable

"a named space in the memory" that stores values

Variable

"a named space in the memory" that stores values.

== vs. ===

== Does not check data types, just values === Checks types and values

If you have 5 different stylesheets, how would you best integrate them into the site?

@import url("import_file.css"); to import all stylesheets in the main style sheet. and than link main style sheet to html. And run a tool to find unused css, like uncss.

Promise

An object that may produce a single value some time in the future. a holder for a result (or an error) that will become available in the future (when the async call returns)

Traditionally, why has it been better to serve site assets from multiple domains?

Because request is costly, so modern browsers establish 6 to 8 reusable connections to improve the download speed to prevent repeatedly requesting, and because there is a limited connection count for each domain, we put resources on multiple domains.

What tools and techniques do you use debugging JavaScript code?

Chrome Dev Tools

ETag

ETag - an hash which is used to identify files's version.

What is an example of an immutable object in JavaScript?

Mutable examples are array, object or anything opposite to immutability. You can change the value of an array or object anytime and the result will be what you desired.

Falsey vs Truthy

Zeros, empty strings, undefined, null, and NaN are all considered falsey values. Everything else is true

X-Frame-Options

clickjacking protection.

Which version control systems are you familiar with?

git

What value is returned from the following statement? "i'm a lasagna hog".split("").reverse().join("");

reverse method for a string - 'goh angasal a m\'i'

What is "use strict";? what are the advantages and disadvantages to using it?

"If you put ""use strict""; at the top of your code (or function), then the JS is evaluated in strict mode. Strict mode throws more errors and disables some features in an effort to make your code more robust, readable, and accurate. Advantages Taken from John Resig: Strict mode helps out in a couple ways: It catches some common coding bloopers, throwing exceptions. It prevents, or throws errors, when relatively "unsafe" actions are taken (such as gaining access to the global object). It disables features that are confusing or poorly thought out. Sounds great! I've been reading JavaScript: the Good Parts, and it seems there are a number of "features that are confusing or poorly thought out." I'll take anything that helps me avoid them! Disadvantages I had a harder time finding why people don't like strict mode. The best explanation I found was when code mixed strict and "normal" modes. If a developer used a library that was in strict mode, but the developer was used to working in normal mode, they might call some actions on the library that wouldn't work as expected. Worse, since the developer is in normal mode, they don't have the advantages of extra errors being thrown, so the error might fail silently. Also, as listed above, strict mode stops you from doing certain things. People generally think that you shouldn't use those things in the first place, but some developers don't like the constraint and want to use all the features of the language."

What are your favourite image replacement techniques and which do you use when?

"Image replacement technique is to replace a normal text element with an image. There are many methods such as H5BP and Scott Kellum, as suggested [here](https://css-tricks.com/the-image-replacement-museum/). My favorite is H5BP, as it is the simplest and most intuitive one."

... Spread Operator

The spread syntax allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) or multiple variables (for destructuring assignment) are expected. https://rainsoft.io/how-three-dots-changed-javascript/

Explain Function.prototype.bind.

"It took me awhile to understand how 'this' keyword works, but after reading about bind method, its starting to make sense regarding the context of an object set explicitly and being able to access with 'this' keyword. A common issue that arise when we use functions is dealing with a function's scope and an object's context. ** it's important to understand the difference between function scope and object context. Every function has its own scope with visible and accessible variables, but when we define closures, these inner functions creates its own scope as well. If we were to access the outer function's context from inner functions (closures), we will need to declare a variable specifying the outer function's context. var self = this; To avoid polluting an outer function's scope, we can use bind method instead. Once we invoked a function with bind method, it bounds our closure or inner function with the outer function's scope. var foo = function() { // some content console.log(this); }.bind(this); We are also able to pass in 2nd arguments if needed. Though, IE8 and below doesn't support bind(), there is a polyfill available to fix this issue. Polyfill here and more info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind There are other methods of setting the scope of a function. Other two are apply() and call(). Difference between apply() & call() and bind() method is: Functions invoked with apply() & call() methods gets executed first and of course, we also pass along the function's scope as well ... while ... Functions invoked with bind() method just sets the scope, but doesn't get executed. Awesome! B-) Now another issue is when we pass around functions. Its function context actually changes as well depending on where the function is invoked. It doesn't necessarily bound to a specific object as we expect it to be bound to, rather, it may also bound to a global object, other outer objects, or even an HTML element, depending on where we invoked the function. ** Note, that invoking a function is different from creating a new instance of an object. Below is an interesting (coz its new to me) Code sample with commented out explanation. It shows how 'this' keyword can be mistakenly bound to an HTML element and how bind() can fix it."

Explain what a single page app is and how to make one SEO-friendly.

"It's a web application that fits on a single page of a website, single document. more fluid user experience like that of a desktop app since no page reloads. Problems: Indexing and linkability challenges. Fallbacks - HTML pages that display if JS not parsed, for url fragments. Hold the same content the App would show as well as normal indexable links. (lots of work and time) pushState - HTML5 ability to manipulate URL as well as browser history. Sharable and bookmarkable URL now."

What does * { box-sizing: border-box; } do? What are its advantages?

"It's the IE6 Quirks mode: if you set a width, and add paddings and borders, the total width won't change. It's the innerwidth that'll adapt. Advantage? You can play with the paddings and border values without worrying about expanding your box. Very convenient for column layouts. And you can mix percentage and pixel values, so you don't have to rely on a child element for the padding. Disadvtange? Well, I've spent 7 years designing with the content-box model in mind, and now it seems he border-box model is catching up. I feel like dealing with IE6 again. But apparently, I've heard that the W3C always wanting to make the border-box model the standard. So I guess it's a good idea to get acquainted with it right away. Bootstrap uses it, and my HTML5 reset uses it. And the browser compatibility seems ok."

Explain the difference between layout, painting and compositing.

"Layout:- Browser will determine how much space each element takes up and where to place it. Painting:- This is the process of filling in pixels. It involves drawing out elements. Compositing:- Browser draws element to the screen in the correct order so the page renders correctly."

Why is it called a Ternary expression, what does the word "Ternary" indicate?

"Let's answer the second question first: what does the word "ternary" indicate? According to Wikipedia the word "ternary" comes from the n-ary word setup. Other examples of n-ary words are unary and binary. All of these (including ternary) are operands. The prefix section of their name lists how many inputs the operand accepts. A unary operand accepts one parameter, e.g. -1, where - is the operand, and 1 is the parameter. A binary operand accepts two parameters, e.g. 2 + 3, where + is the operand, and 2 and 3 are the parameters. So a ternary operand accepts three parameters. In programming the ternary operand we use is a rewrite of an if statement. Before we write an actual ternary, we'll just take a quick look at an if statement: if(conditional) { // one truethy_block // two } else { falsey_block // three } You can see there are three sections to an if statement. Let's write them as a property ternary expression: conditional ? truethy_block : falsey_block All the same code is there, but it's arranged slightly differently. The ternary's operand looks like ?:. In JS ternarys are often used for assignment: is_sunny = true; var weather = is_sunny ? 'sunny' : 'Cloudy'; console.log(weather); // logs 'sunny' They can also be used for very short conditional statements. But be wary of using them for long or complex logic as they are harder to read than traditional statements. "

What are the differences between Long-Polling, Websockets and Server-Sent Events?

"Long-Polling - use setTimeout and AJAX technique to repeatedly send request and wait for server response. Before websockets, web developer used to use this technique to simulate persistent connection. Websocket - a real persistent connection via TCP. Unlike long-polling have to setup HTTP connection with constantly requesting, once establishing websocket you don't have to send another request to maintain the connection. Server-sent - also called server push technique. When it comes to data exchange, servers are always passive, but with server push, server can be active too. Server push is like broadcast, whoever connects to the server is a subscriber. Server push can push desired event on specific channel."

What are some advantages/disadvantages to testing your code?

"Not just javascript, any language for that matter, 1. The tests give you confidence that you haven't broken anything, when you refactor or add new code. 2. You can test your code before it's deployed, this gives you quick feedback. 3. Having unit tests will allow you to test your classes in isolation, thereby helping you pinpoint which class has a problem when trying to debug. 4. If you drive your code through tests, you will endup in writing testable code, which is clean. As far as disadvantages go, you will spend little more time. Sometimes writing testable code might frustrating, but you get used to it and get better as you practice."

What is the extent of your experience with Promises and/or their polyfills?

"Only tried it in ES6. Basic usage: new Promise((resolve, rejected) => { if(resolve){ reslove(""successed""); } else{ rejected(""failed""); } }) .then((result) => { console.log(result); }) .then((result) => { console.log(result); }); The biggest advangtage of Promise is that it solves the problem of callback hell. Polyfills: jQuery - Deferred Bluebird Q When"

What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?

"Pros Benefit libraries that only exist in NodeJS world. (Make CommonJS stuff available on browser) The newest of language features. Cons Have to setup environment before working. Have to organize more directories. Source map is needed."

What's the difference between .call and .apply?

"Recalling the basics Remember, in JavaScript, everything are objects, even Functions, and every objects has their properties and methods. Both .apply and .call are methods of Function object. How do .apply or .call work? Invoking a function with .apply and .call allows us to point an object to the invoked function by passing in the object as first argument and second argument (and so on) as its values. The function's 'this' keyword will be manipulated when invoked with .apply or .call. From what I understand, .apply and .call are methods we use to assign the 'this' keyword from the invoked function to reference to an object for the duration of the method invocation. So what's the difference between .apply and .call? Besides passing in an argument to a .call or .apply methods that references to the 'this' keyword of an invoked function, we can also pass in a 2nd argument or more. A good mnemonic to explain their differences are: .Call Counts the number of arguments separated by Comma .call method accepts one or more arguments as objects and requires to be listed explicitly, means, it is a fixed number of arguments. foo.call(object, "other argument", "another one"); while .Apply uses Array as an Argument .apply method requires an array as its 2nd argument. This method is used if you don't know the number of arguments to be passed or the arguments is already in an array. foo.apply(object, ["argument1", "argument2", "argument3"]);"

What are the advantages and disadvantages of using Ajax?

"The best use of AJAX is where it is used to send small payloads. Here is a simple example. I load a page that contains information about stock. It has graphs, charts, company information and it also displays the share-price. Every 30 seconds, I make an AJAX request that gets the updated share-price and changes it on the page. Without AJAX, I might decide to refresh the entire page every 30 seconds, but with AJAX, I can just make a lightweight request to get the tiny bit of information I need. Using AJAX to submit forms isn't always the best bet. Asides from not really giving you a clear advantage over posting the form normally, you break conventions such as browser history (although some browsers now include JavaScript ""states"" as pages in the history). When using AJAX, you need to handle the task of telling the user if something has gone wrong. You can do this with jQuery by specifying what should happen on error, but many people forget to do this and the end user is blissfully unaware of any problem. Other issues to watch out for are any JavaScript errors that may prevent your events from firing - or if JavaScript is disabled, in either case ensuring that the form can submit normally before you add the AJAX code is the safest option."

Explain the same-origin policy with regards to JavaScript.

"The same-origin policy helps prevent malicious attacks by stopping code from another site executing on your site. An attacks like this is known as a Cross Site Scripting attack. How does JS decide if it's a "same" site? The "origin" is the same if three things are the same: the protocol (http vs. https), the domain (subdomain.yoursite.com vs. yoursite.com vs. google.com), and the port (:80 vs. :4567). If all three of these line up, then JS views the sites as the same, and code is executed. If any of them are different then the code is marked as potentially malicious and is not run. Hmmm, if I own "subdomain.yoursite.com" and "yoursite.com" I might want to share resources. This same-origin policy could be really annoying! It's possible to work around the subdomain problem. You can change the domain of a page, so it can access it's parent's resources: // in the code on subdomain.yoursite.com document.domain = ""yoursite.com"";"

Difference between: function Person(){}, var person = Person(), and var person = new Person()?

"There are different ways (not to be exact) we can use functions in JavaScript, but with the given code below highlights important differences on how functions work. function Person() {} Function Declaration Code above declares a function statement (statements perform an action) but does not execute, however, it does get registered into the global namespace. var person = Person() Function Expression A variable 'var person' has been defined and contains a value reference to a Person function. Any JavaScript Expressions (including Function Expressions) always returns a value. This may also be an Anonymous function if no name has been assign to a function but wrapped in parenthesis to be interpreted as an expression. var person = new Person() Function Constructor By adding the keyword 'new'. We are instantiating a new object of the Person class constructor. A function declaration is just a regular function unless it has been instantiated, it then becomes a class constructor."

Make this work: duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]

"1. Array.prototype.duplicate = function() { var len = this.length; for (var i = 0; i < len; i++) { this[len + i] = this[i]; } return this; } 2. Array.prototype.duplicate = function () { var array = this; return array.concat(array); }; 3. Array.prototype.duplicator = function(){ return this.concat(this); } alert([1,2,3,4,5].duplicator()); Simple, yes. The thing is, to get there you need to know about a few things that are Good to Know. The original example uses an Array literal to create an array (some people don't get that pattern) The solutions returns a value and correctly uses this to bind to the Array Using Array.prototype to extend the native Array with the useless duplicator() method"

How many resources will a browser download from a given domain at a time?

"6-8, depending on browser and When we use several subdomains pointing the same domain, we can increase the concurrency level of the download."

Have you ever worked with retina graphics? If so, when and what techniques did you use?

"@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { ... }"

"How would you make this work? add(2, 5); // 7 add(2)(5); // 7"

"A general solution for any number of parameters 'use strict'; let sum = (arr) => arr.reduce((a, b) => a + b); let addGenerator = (numArgs, prevArgs) => { return function () { let totalArgs = prevArgs.concat(Array.from(arguments)); if (totalArgs.length === numArgs) { return sum(totalArgs); } return addGenerator(numArgs, totalArgs); }; }; let add = addGenerator(2, []); add(2, 5); // 7 add(2)(5); // 7 add()(2, 5); // 7 add()(2)(5); // 7 add()()(2)(5); // 7"

What do you think of AMD vs CommonJS?

"AMD and CommonJS are both Javascript module loader. They accomplish the same task but works different. AMD is better for browser, hence, the name 'Asynchronous', as it loads each distinct module in async manner instead of loading in one large file. No extra steps are required to use AMD, it works out-of-the-box. In my opinion, as it is its in Asynchronous nature, it makes alot of async http requests and may not be as performant as described by other devs. While, CommonJS, is a standard, mostly used in servers and it loads modules synchronously, though extra step is required if you want your JS file size to be minified and compressed. Why do we need to use Javascript module loader? Usually, JS files are loaded in order via script tag in HTML templates, but files and code gets complicated once an application becomes large. Javascript module loaders lets us separate our code into modules and include a specific module in another module. This lets us import what module is required and load only the necessary. Better Javascript file size load and better code compartmentalization, means, JS module loader mitigates away the danger of global-namespace issue."

What's the difference between a relative, fixed, absolute and statically positioned element?

"Absolute displayed on the page in relation to the document, or a parent element with a positioning different from static using top, left, bottom and right CSS properties, exact position can be specified Fixed position in relation to the browser window allows to display toolbars, buttons or navigation menus, which are anchored at a fixed position and scroll with the page Relative moves an element from its normal position with the top, left, bottom and right CSS properties Static means that every element is positioned in the natural order it is added to the page"

Do your best to describe the process from the time you type in a website's URL to it finishing loading on your screen.

"Assume there is only HTTP request, no proxies: 1. Browser look up cache, if document exists in cache and not expires, then renders it. 2. OS makes DNS lookup of the IP address of given URL and replies to browser. 3. If that URL exists, browser opens a TCP connection to server. 4. Browser sends HTTP request to server. 5. Server parses HTTP request, sends it and may or may not close TCP connection(depends on keep-alive in header setting). 6. Browser parses HTTP status code and depends on what code it is to decide what to render."

Describe BFC(Block Formatting Context) and how it works.

"BFC is a part of rendering a webpage. It's used to determine from which positioning and clearing should be done. The context is created by several ways, but the most famously, by a root element, float, positioned elements."

Have you ever used a grid system, and if so, what do you prefer?

"Bootstrap - currently Materialize?"

Explain how a browser determines what elements match a CSS selector.

"Browsers read selectors from right-to-left. First looks for all elements matching the key selector (the right-most). Then checks if it matches or is under the next (left-most) element."

How do you optimize your webpages for print?

"By adding external stylesheet and apply some rules. <link rel=""stylesheet"" ·href=""print.css"" media=""print""> What to remove: navigation (not needed on paper) background images (can make text hard to read) Rules to apply: dark text on a white background important images: logo, products etc... hierarchical headers page URL make some tests - preview before print @media print { ... }"

The 'C' in CSS stands for Cascading. How is priority determined in assigning styles (a few examples)? How can you use this system to your advantage?

"CSS priority is determined by specificity and inheritance. Specificity: ID > class, psuedo-class > element, psudo-element Inheritence: specified value → computed value → used value → actual value"

Explain CSS sprites, and how you would implement them on a page or site.

"CSS sprite is combining multiple images into a merged one image and use CSS to render each of them properly for each element. It's usually implemented using `background: url(...) x-axis y-axis;`, or both `background-image` and `background-position`."

What is a closure, and how/why would you use one?

"Closures are inner functions inside of an outer function. They have their own local scope and has access to outer function's scope, parameters (but NOT arguments object), and they also have access to global variables. From what I understand, Closures is a neat way to deal with scope issues. Reasons we use Closures is because Javascript is a function-level scope rather than as with other languages, block-level scope and Javascript is an asynchronous/event driven language. Example that Closure is frequently used is jQuery (ex. click()). This is how Closures work. 1. After its outer function has been executed and has returned a value, closures can still run. 2. Closures store references to the outer function's variable, hence, we will always have access to the updated values of outer function's variables. 3. Since we have access to the updated values of outer function's variables. We will have issue/bugs when a variable changes via for loop, but this can be fixed by using IIFE, Immediately Invoked Function Expression. Below is a sample code of using Closure with IIFE. Note, IIFE or Immediately Invoked Function Expression is another Javascript concept."

What is the difference between a unit test and a functional/integration test?

"Depending on where you look, you'll get slightly different answers. I've read about the subject a lot, and here's my distillation; again, these are slightly wooly and others may disagree. Unit Tests Tests the smallest unit of functionality, typically a method/function (e.g. given a class with a particular state, calling x method on the class should cause y to happen). Unit tests should be focussed on one particular feature (e.g., calling the pop method when the stack is empty should throw an InvalidOperationException). Everything it touches should be done in memory; this means that the test code and the code under test shouldn't: Call out into (non-trivial) collaborators Access the network Hit a database Use the file system Spin up a thread etc. Any kind of dependency that is slow / hard to understand / initialise / manipulate should be stubbed/mocked/whatevered using the appropriate techniques so you can focus on what the unit of code is doing, not what its dependencies do. In short, unit tests are as simple as possible, easy to debug, reliable (due to reduced external factors), fast to execute and help to prove that the smallest building blocks of your program function as intended before they're put together. The caveat is that, although you can prove they work perfectly in isolation, the units of code may blow up when combined which brings us to ... Integration Tests Integration tests build on unit tests by combining the units of code and testing that the resulting combination functions correctly. This can be either the innards of one system, or combining multiple systems together to do something useful. Also, another thing that differentiates integration tests from unit tests is the environment. Integration tests can and will use threads, access the database or do whatever is required to ensure that all of the code and the different environment changes will work correctly. If you've built some serialization code and unit tested its innards without touching the disk, how do you know that it'll work when you are loading and saving to disk? Maybe you forgot to flush and dispose filestreams. Maybe your file permissions are incorrect and you've tested the innards using in memory streams. The only way to find out for sure is to test it 'for real' using an environment that is closest to production. The main advantage is that they will find bugs that unit tests can't such as wiring bugs (e.g. an instance of class A unexpectedly receives a null instance of B) and environment bugs (it runs fine on my single-CPU machine, but my colleague's 4 core machine can't pass the tests). The main disadvantage is that integration tests touch more code, are less reliable, failures are harder to diagnose and the tests are harder to maintain. Also, integration tests don't necessarily prove that a complete feature works. The user may not care about the internal details of my programs, but I do! Functional Tests Functional tests check a particular feature for correctness by comparing the results for a given input against the specification. Functional tests don't concern themselves with intermediate results or side-effects, just the result (they don't care that after doing x, object y has state z). They are written to test part of the specification such as, ""calling function Square(x) with the argument of 2 returns 4"". Acceptance Tests Acceptance testing seems to be split into two types: Standard acceptance testing involves performing tests on the full system (e.g. using your web page via a web browser) to see whether the application's functionality satisfies the specification. E.g. ""clicking a zoom icon should enlarge the document view by 25%."" There is no real continuum of results, just a pass or fail outcome. The advantage is that the tests are described in plain English and ensures the software, as a whole, is feature complete. The disadvantage is that you've moved another level up the testing pyramid. Acceptance tests touch mountains of code, so tracking down a failure can be tricky. Also, in agile software development, user acceptance testing involves creating tests to mirror the user stories created by/for the software's customer during development. If the tests pass, it means the software should meet the customer's requirements and the stories can be considered complete. An acceptance test suite is basically an executable specification written in a domain specific language that describes the tests in the language used by the users of the system. Conclusion They're all complementary. Sometimes it's advantageous to focus on one type or to eschew them entirely. The main difference for me is that some of the tests look at things from a programmer's perspective, whereas others use a customer/end user focus."

Describe event bubbling.

"Event bubbling occurs when a user interacts with a nested element and the event propagates up ("bubbles") through all of the ancestor elements. HTML <div class=""ancestor""> <div class=""parent""> <button> Click me! </button> </div> </div> When a user clicks the button the event first fires on the button itself, then bubbles up to the parent div, and then up to the ancestor div. The event would continue to bubble up through all the ancestors, until it finally reaches the document. Javascript $( ""button"" ).click(function(event) { console.log( ""button was clicked!"" ); }); $( "".parent"" ).click(function(event) { console.log( ""child element was clicked!"" ); }); $( "".ancestor"" ).click(function(event) { console.log( ""descendant element was clicked!"" ); }); When the user clicks the button the events starts at the button element, so button was clicked! is logged to the console. Then child element was clicked! and finally descendant element was clicked! are logged as well. Stopping event bubbling What if you don't want the event to bubble up? A fair question. Often you only want the event to trigger on the element itself, without bothering all its ancestors. Consider the following JS (with the same HTML as above): $( ""button"" ).click(function(event) { console.log( ""button was clicked!"" ); }); $( "".parent, .ancestor"" ).click(function(event) { console.log( ""don't click me!"" ); }); As it stands, the don't click me! will get logged when the user clicks on the button, even though they haven't actually clicked on the parent or ancestor element. You have to explicitly stop event propagation (bubbling) if you don't want it. $( ""button"" ).click(function(event) { event.stopPropagation(); // <-- this line here! console.log( ""button was clicked!"" ); }); $( "".parent, .ancestor"" ).click(function(event) { console.log( ""don't click me!"" ); }); Now the event propagation stops on the first element of the bubbling sequence. You can also stop the bubbling later on if you'd like, it doesn't have to be on the first element."

Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?

"Form most languages, global variables are considered a "bad thing". JS is no different, but it probably has more severe consequences than most languages. Some points on why global variables are generally bad (taken from Cunningham & Cunningham with modifications for easier reading): It's harder to read the code and reason about it when variables seem to appear out of thin air (but really from the global scope). Anyone can update a global variable from any point in the program at any time (and from any thread if there's more than one going). General code smell - if you're too lazy to put the variable only where it needs to be then what other corners are you cutting? It's probable that you'll encounter global variable name clashes. Since there's only one namespace you're more likely to double up on a variable name. Global variables are particularly bad for JS. Not only are all of those points above true (and a few others I didn't include), but for JS specifically global variables can be particularly problematic. This is because JS defaults all variables to the global scope unless they are explicitly defined elsewhere. Here's an example: function badlyScoped() { globalVariable = ""I'm a global variable""; } badlyScoped(); console.log(globalVariable); // logs ""I'm a global variable"" Well isn't that terrifying! We thought we were creating a local variable, since it was defined within a function, but nope! We forgot the var keyword, which would make the variable local. Here's a corrected version: function wellScoped() { var localVariable = ""I'm a local variable""; } wellScoped(); console.log(localVariable); // throws: ""localVariable is not defined"" This is a quirk (some say a mistake) of JS. It makes global variables particularly dangerous since you might not even know you were creating one. So watch your back and don't forget to use var!"

What's the difference between a variable that is: null, undefined or undeclared?

"From what I understand, in Javascript, undefined and null are somewhat related on what value a variable contains. The case for undeclared differs. It tackles on how a variable is defined and how javascript treats these variables. So I am going to discuss undefined and null first since both are on Data Type category. undefined is a variable that has been declared but no value exists and is a type of itself 'undefined'. null is a value of a variable and is a type of object. We use 'console.log();' and 'type of' to check if a variable is undefined or null. ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures undeclared variables is a variable that has been declared without 'var' keyword. testVar = 'hello world'; as opposed to var testVar = 'hello world'; When former code is executed, undeclared variables are created as global variable and they are configurable (ex. can be deleted). ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var"

What's the difference between host objects and native objects?

"From what I understand, objects are divided from which environment and language they are supplied: Host Objects and Native Objects. Host Objects are objects supplied by a certain environment. They are not always the same because each environment differs and contains host objects that accommodates execution of ECMAScript. Example, browser environment supplies objects such as window. While a node.js/server environment supplies objects such as NodeList. Native Objects or Built-in Objects are standard built-in objects provided by Javascript. Native objects is sometimes referred to as 'Global Objects' since they are objects Javascript has provided natively available for use. There are various articles categorizing these native global objects but its number differs, so for accuracy (I believe), I recommend the official Mozilla Doc as reference. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects Javascript is mainly constructed by these categorized native global objects. These objects can be used either as Constructor (String(), Number(), Boolean()) or as Primitive Value, like literally as a value :-D ('string', 123, true)."

Explain "hoisting".

"Hoisting is when a JS declaration is lifted ("hoisted") to the top of it's scope by the JS interpreter. What this really means is that a variable or function isn't necessarily declared where you think it is. Understandably, this can cause problems. Variables and functions are hoisted differently, as we'll see below. Hoisting variables We'll start with an example: // Code saved in file: function containsHoisting() { console.log(hoistedVariable); var hoistedVariable = ""I was hoisted!""; } containsHoisting(); // logs undefined Wait, how did hoistedVariable get to be undefined? Surely it should be undeclared since we haven't hit var hoistedVariable yet. It's because of hoisting! You see, although I wrote the code in the example above, the JS interpreter changes it to this: // What the interpreter changed it to: function containsHoisting() { var hoistedVariable; // <-- this line here! console.log(hoistedVariable); hoistedVariable = ""I was hoisted!""; } That new line is hoistedVariable getting hoisted up to the top of it's scope. So it's now declared, but not defined. Here's a more complex example (inspired by Adequately Good) var hoistedVariable = 1; function scopingFunction() { if (!hoistedVariable) { var hoistedVariable = 10; } return hoistedVariable; } scopingFunction(); // returns 10 What?! How can it return 10? Tangent about scopes I was surprised about this myself until I understood JS scoping better, here's how it breaks down: In Javascript scopes are defined at function level. Many other languages define scope at a block level (as in an if block or for loop). This is an important difference to remember. Thus... Back to the main event The code above gets rewritten in the JS interpreter to look like this: var hoistedVariable = 1; function scopingFunction() { var hoistedVariable; // <-- this line here! if (!hoistedVariable) { hoistedVariable = 10; } return hoistedVariable; } scopingFunction(); // returns 10 Note that the global hoistedVariable gets completely overwritten by the local hoistedVariable as declared in scopingFunction. So at the point of the if conditional hoistedVariable is undefined and not 1. Function hoisting Hoisting functions works differently than variables. Since a function is declared and defined at the same time the function definition is hoisted along with the function name. Since examples make things clearer: function containingFunction() { var hoistedVariable = 2 + 2; function hoistedFunction() { return hoistedVariable; } return hoistedFunction(); } containingFunction() // returns 4 Hopefully that example wasn't surprising. But just to better understand what's going on, here's how the JS interpreter rewrote things: function containingFunction() { // this is the hoisted section var hoistedVariable; function hoistedFunction() { return hoistedVariable; } // here's the rest of the code hoistedVariable = 2 + 2; return hoistedFunction(); } containingFunction() // returns 4 Notice that the entire hoistedFunction gets moved up, while only the declaration for the hoistedVariable is hoisted. Let's try with a more complicated example: function containingFunction() { var hoisted = ""I'm the variable""; function hoisted() { return ""I'm the function""; } return hoisted(); // results in a TypeError } containingFunction() But wait, the hoisted function is defined right there, what gives? Because functions are hoisted after variables, naming conflicts can happen. Again, let's look at what the JS interpreter wrote for this code function containingFunction() { // hoisted section var hoisted; function hoisted() { return ""I'm the function""; } // rest of the code hoisted = ""I'm the variable""; return hoisted(); } containingFunction() // results in a TypeError As you can see, the function definition for hoisted is overwritten by the variable definition (""I'm the variable"") which appears lower down in the interpreter's version of the code. Yet another reason why good names are important!"

What kind of things must you be wary of when design or developing for multilingual sites?

"- `hreflang` attr in link - `dir` attr indicating language direction, such as `rtl` - `<meta charset='UTF-8'>` - `font-size` for `:lang({language_code})` selectors in CSS - difference in word langth for each language"

What language constructions do you use for iterating over object properties and array items?

"Array classic for arr.forEach() Object for(var key in obj) Object.keys(obj).forEach()"

What is event loop?

"Event loop is how JavaScript with single-threaded performs tasks without blocking. Event loop is a queue of callback functions. When a asynchronous function executes, it is pushed into task queue and JavaScript will only start processing task queue after codes after async function are executed."

Diff. between Expires, Date, Age and If-Modified-...

"Expires - will be labeled stale after specified date. Date - The date and time that message was sent. Age - The age that object has lived in seconds. If-Modified-Since - will return 304 unchanged status code."

"What is the outcome of the two alerts below? var foo = ""Hello""; (function() { var bar = "" World""; alert(foo + bar); })(); alert(foo + bar);"

"First: Hello World Second: Throws an exception, ReferenceError: bar is not defined"

Explain the difference between synchronous and asynchronous functions.

"The difference is that sync function is blocking while async is non-blocking. function blocking(){ console.log(""1""); console.log(""2""); } function nonBlocking(){ setTimeout(function(){ console.log(""1""); }, 1000); console.log(""2""); }"

What's the difference between full standards mode, almost standards mode and quirks mode?

"They are modes used by browser rendering engines. In the standards mode, the engine will render a page as HTML and CSS specifications specify. The quirks mode is to render legacy pages written before these standards are fixed. The legacy pages contain non-standard behaviours emulated in old browsers such as Internet Explorer 5 or Navigator 4. We can enforce browsers to use standards mode with a `<!DOCTYPE html>` tag."

What is the value of foo? var foo = 10 + '20';

'1020', because of type coercion from Number to String

What is the value of window.foo? ( window.foo || ( window.foo = "bar" ) );

Always 'bar'

window.onload() vs. document.ready()

Doc.ready looks waits for the HTML to load. Window.onload waits for everything to load

What did you learn yesterday/this week?

ES6

Polluting The Global Namespace

JavaScript has a single global scope, which means all of the files from your projects and any libraries you use will be sharing the same scope. Every time a variable is declared on the global scope, the chance of a name collision increases.

What is the difference between call stack and task queue?

The difference between call stack and task queue is that task queue is a place where JavaScrip schedules async function while call stack is a place for JavaScript to trace what the current function is.

How can you achieve immutability in your own code?

To achieve immutability on array or object or any type you want, you have to do deep clone, or simply use library like immutable.js developed by Facebook.

Explain how JSONP works (and how it's not really Ajax).

"Browsers try to be security conscious. They don't let your JS talk to just any old server (see Cross Site Scripting). When you make AJAX requests, you can only query your server, not anyone else's. This is a problem if you want to get data from another server (perhaps see a stream of Tweets). The browsers will not let you make an AJAX call to another server, so you're stuck. Ok, tell me a bit about JSONP Well, browsers have a caveat. You aren't allowed to call other servers from your JS, but you are allowed to include a script from another server. You probably already do this with jQuery. Most people include a script tag to get jQuery hosted from Google rather than hosting it themselves. Something like this: <script src=""https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js""></script> Notice that the domain is ajax.googleapis.com not your-awesome-site.com. Browsers allow this kind of code sharing, but direct calls to an API from JS. So way back in 2005 someone had the clever idea to take advantage of this caveat. Instead of calling an API directly (which browsers don't allow) you can call it via a script tag (which is totally legit). So how does it work? Create a function in the global space to handle the JSON returned from the API. It doesn't have to do much, just enough so you can see what you're getting: function myCallbackFunction(data) { console.log(data); } Next, add a script tag to your page which calls the API and passes it an additional parameter. Something like this: <script src=""http://cool-stuff.com/api.json?callback=myCallbackFunction""></script> Notice the additional parameter? It's typically called callback, but not always, check the docs for your particular API. Also note the callback parameter's value. It's the same as the function we defined earlier. This is crucial! If those names don't match up you won't get your data. An API that's set up to handle JSONP knows to look for that special parameter. If it's there, the response isn't just JSON, but the JSON wrapped (Padded) with the name of the callback. So for us, the API would return: myCallbackFunction({'awesome': 'data'}); Since the API returns to a script tag the JS is immediately executed. So myCallbackFunction gets called. We defined this function earlier, so we'll have {'awesome': 'data'} logged to the console! Phew! Way to get around some security issues! A few things to note: Generally you don't write the script tag yourself. You can get jQuery to do that for you :) To make the same call as we did previously you can just use: $.ajax({ url: 'http://cool-stuff.com/api.json', dataType: 'jsonp', success: function(data) { console.log(data); } }); Safety First! There's a reason browsers don't like you talking to other servers - you never know what those servers will send back! Use good data validation, even if the data is "safe." You can only use JSONP for get requests. You can use normal AJAX to do post and delete and all data manipulations, but you cannot do this with JSONP. The practical reason for this is that HTML tags only ever get information, they can't do anything else (think image tags, links for style sheets, and script tags). The handy reason is that if you owned the API you almost certainly would not want randoms from the internet updating your data."

Describe pseudo-elements and discuss what they are used for.

"It's to style a part of an element, like `::first-letter` or `::before`. They can be used to add a special symbol before a paragraph, change color of first character of a line, etc."

Explain the difference between mutable and immutable objects.

"Mutable object means its state is allowed to be changed over time. Immutable object's value doesn't change from the time it was created. Immutable examples are primitive types like String, Number. You can't change the definition of 2 after executing 2 + 5. No matter how you operate strings, the definition of c won't change."

What is a recent technical challenge you experienced and how did you solve it?

Coding challenge for Gigster

How do you organize your code? (module pattern, classical inheritance?)

"There are several options in implementing Module Pattern. An option I mostly use is Object Literal Notation for encapsulating and organizing my code, but upon further readings, Module Pattern using Anonymous Closures, Global Import, and Module Export have sparked my interest as it provides more features for private and public var/methods. It still uses object literal but as to return values from the scoping function. In JavaScript, the Module pattern is used to further emulate the concept of classes in such a way that we're able to include both public/private methods and variables inside a single object, thus shielding particular parts from the global scope. - Addy Osmani, Learning Javascript Design Patterns There are popular javascript module framework that specifically implemented Module Pattern such as Dojo, ExtJS, YUI, and jQuery. Good to know if your new to learning Javascript concepts and have heard of these technologies before those popular MVC frameworks (Angular.js, Ember.js, Backbone.js) emerged. Another implementation of module pattern popularized Christian Heilmann (which I think is pretty clean and neat) is The Revealing Module Pattern. It's pretty much the same with the standard Module Pattern except it uses the return object literal properties as references to variables and functions from the scoping function to export variables and methods."

What are the pros and cons of immutability?

Immutable object won't be changed after it has been initialized. We can take advantage of this. Making immutable objects into a collection of cache since these objects don't change at all. Our program is actually accessing the same data. This is a good approach to saving memory by taking advantage of immutable. The downside of immutability is that it actually involving constantly deep clone and assigning. This is an overhead of trading computing speed for memory.

Cache-Control

Tells all caching mechanisms from server to client whether they may cache this object. It is measured in seconds

What's the difference between feature detection, feature inference, and using the UA string?

"These 3 are just practices of determining if a certain web technology feature exists in a user's browser or environment. Though features may vary with not just modern web technology but with programming languages as well. Feature Detection Feature detection is just a way of determining if a feature exists in certain browsers. A good example is a modern HTML5 feature 'Location'. if (navigator.geolocation) { // detect users location here B-) and do something awesome } Feature Inference Feature Inference is when you have determined a feature exists and assumed the next web technology feature you are implementing unto your app exists as well. Its usually bad practice to assume, so its better to explicitly specify features you want to detect and plan a fallback action. UA String UA String or User Agent String is a string text of data that each browsers send and can be access via navigator.userAgent. These "string text of data" contains information of the browser environment you are targeting. If you open your console and run navigator.userAgent You'll see it outputs a "string text of data" containing complete information of the environment you are currently using. Since this is an old way of doing detection, this method can be easily spoofed, thus, may not be the best route to take. Ref: https://en.wikipedia.org/wiki/User_agent A JavaScript library I love using is Modernizr Modernizr is a small piece of JavaScript code that automatically detects the availability of next-generation web technologies in your user's browsers. Rather than blacklisting entire ranges of browsers based on "UA sniffing," Modernizr uses feature detection to allow you to easily tailor your user's experiences based on the actual capabilities of their browser."

Why is extending built-in JavaScript objects not a good idea?

"Turns out there's lots written on this topic (lucky for me!), be sure to check out the references section at the end. What is "extending an object"? When you add functionality to an object using the prototype. An example looks like this: Array.prototype.first = function(){ return this[0]; } var temp = [1, 2, 3]; temp.first(); // returns 1 At first glance, this seems like such an awesome feature. Want the third element from an array? Extend Array! Want strings to have a titleize method? Extend String! Want alphabetisedProperties available for objects? Extend Object! Why is this a bad thing? It depends on who you ask. This is one of those "JS standards" - unlike most of the questions that have a clear answer, this one has a bit more opinion. The main argument against doing this is: if, in future, a browser decides to implement its own version of your method, your method might get overridden (silently) and the browser's implementation (which is probably different from yours) would take over. So not extending in the first place is future proofing your code. On the flip side, if you decide to overwrite the browsers definition, any future developer working on your code won't know about the change. They'll have a harder time getting up to speed. Generally it's safer to move your particular changes into a library (as with underscore.js). That way your particular methods are clearly marked and there's no chance of conflict. But... It might be a good idea to add an extension for functionality that became available in later versions, but isn't guaranteed to be available in your particular browser. You can read more about this kind of polyfill on Mozilla."

Explain Ajax in as much detail as possible.

"What is AJAX? Simply put, AJAX is the use of JavaScript to send and receive using HTTP without reloading the page. AJAX is an acronym for asynchronous JavaScript and XML, and is used as a technique for creating client-side asynchronous web applications. AJAX is considered a group of technologies. HTML and CSS can be used in combination to mark up and style information. JavaScript and the XMLHttpRequest object provide the method for exchanging data asynchronously between the browser and the server. What is AJAX used for, and what companies use it? Login forms — digg.com Auto-complete with the search bar — google.com Voting and rating content — reddit.com Updating user content — twitter.com Why do developers use AJAX? AJAX provides more efficient and smoother running applications, which gives users better interactive experiences. How does AJAX work? AJAX, sends and retrieves data from a server asynchronously. This enables the web application to continue running and dynamically display. It allows the user to interact with the information presented on the page, avoiding full page reloads. The image below shows the process the execution of AJAX. A user interaction in the browser triggers the event, such as a button click The AJAX call fires. This creates and AJAX request, browsers use the XMLHttpRequest object. When the server responds to the browser's request, the same XMLHttpRequest object will process the result. 3. The server-side script receives the input from JavaScript, and processes the data. 4. After the data is processed, the script sends the data back to the original client-side page that made the request via XML 5. Once the data is received, a second JavaScript callback function, is called this function captures the data, and updates the web page accordingly. Image Source Note: Newer technologies have slowly been replacing the XML in AJAX with JSON. The reason being, XML is a lot stricter than HTML, thus having larger file sizes, and harder to extract the data that is returned. JSON is less verbose, has proven to be more efficient, and working with data is much easier."

Explain why the following doesn't work as an IIFE: function foo(){ }();.

"What is IIFE? An IIFE (pronouced as 'iffy') is an abbreviation for Immediately Invoked Function Expression. It is a common Javascript design pattern used by popular JS libraries such as jQuery, Backbone.js. Purpose of using an IIFE is to maintain code inside of a local scope. This means, to be able to use global object inside of IIFE, you will need to pass it as arguments. As for an explanation, the following code doesn't work as an IIFE because it is a function declaration, it does invoked immediately due to its parenthesis at the end, but there are downsides to using this approach. function foo() {}(); First, it unnecessarily takes up a name in the global namespace, increasing the possibility of name collisions. Second, the intentions of this code aren't as self-documenting as an IIFE. And third, because it is named and isn't self-documenting it might accidentally be invoked more than once. - http://adripofjavascript.com/blog/drips/an-introduction-to-iffes-immediately-invoked-function-expressions.html For the above code to be considered an IIFE, it needs to be an anonymous function, a function without a name, this is because IIFE needs to be Invoked Immediately without invoking it a function name. We also need to wrap the anonymous function with parenthesis, so the Javascript parser treats our anonymous function as a function expression. (function() {}()); A function expression is when you assign a function to a variable or property of an object. Anything that is a Javascript expression, including function expression, returns a value."

What needs to be changed to properly make it an IIFE?

"What is IIFE? An IIFE (pronouced as 'iffy') is an abbreviation for Immediately Invoked Function Expression. It is a common Javascript design pattern used by popular JS libraries such as jQuery, Backbone.js. Purpose of using an IIFE is to maintain code inside of a local scope. This means, to be able to use global object inside of IIFE, you will need to pass it as arguments. As for an explanation, the following code doesn't work as an IIFE because it is a function declaration, it does invoked immediately due to its parenthesis at the end, but there are downsides to using this approach. function foo() {}(); First, it unnecessarily takes up a name in the global namespace, increasing the possibility of name collisions. Second, the intentions of this code aren't as self-documenting as an IIFE. And third, because it is named and isn't self-documenting it might accidentally be invoked more than once. - http://adripofjavascript.com/blog/drips/an-introduction-to-iffes-immediately-invoked-function-expressions.html For the above code to be considered an IIFE, it needs to be an anonymous function, a function without a name, this is because IIFE needs to be Invoked Immediately without invoking it a function name. We also need to wrap the anonymous function with parenthesis, so the Javascript parser treats our anonymous function as a function expression. (function() {}()); A function expression is when you assign a function to a variable or property of an object. Anything that is a Javascript expression, including function expression, returns a value."

What's the difference between an "attribute" and a "property"?

"What is a property? JS DOM objects have properties. These properties are kind of like instance variables for the particular element. As such, a property can be different types (boolean, string, etc.). Properties can be accessed using jQuery's prop method (as seen below) and also by interacting with the object in vanilla JS. Let's take a look: <a href='page2.html' class='link classes' name='linkName' id='linkID'>Hi</a> $('#linkID').prop('href'); // returns ""http://example.com/page2.html"" $('#linkID').prop('name'); // returns ""linkName"" $('#linkID').prop('id'); // returns ""linkID"" $('#linkID').prop('className'); // returns ""link classes"" As you can see, all of the properties we set in the HTML are available through prop. Other properties are available too, such as style, even though we didn't explicitly set them. Properties can also be updated through the prop method: <a href='page2.html'>Hi</a> $('#linkID').prop('href', 'page1.html'); $('#linkID').prop('href'); // returns ""http://example.com/page1.html"" What is an attribute? Attributes are in the HTML itself, rather than in the DOM. They are very similar to properties, but not quite as good. When a property is available it's recommended that you work with properties rather than attributes. An attribute is only ever a string, no other type. <input type=""checkbox"" checked=true/> $('input').prop('checked'); // returns true $('input').attr('checked'); // returns ""checked"" If an element has a default value, the attribute shows the default value even if the value has changed. <input type=""text"" name=""username"" value=""user123""> $('input').prop('value', '456user'); $('input').prop('value'); // returns ""456user"" $('input').attr('value'); // returns ""user123"" Attributes can be useful when you want to set a custom attribute, that is, when there is no property associated. <input type=""text""> $('input').attr('customAttribute', 'something custom'); $('input').attr('customAttribute'); // returns ""something custom"" $('input').prop('customAttribute'); // returns undefined But, to be fair, you can also use custom properties (although this might be bad practice). <input type=""text""> $('input').prop('customAttribute', 'something custom'); $('input').prop('customAttribute'); // returns ""something custom"" $('input').attr('customAttribute'); // returns undefined "

When would you use document.write()?

"When document.write() is executed after page load, it replaces the entire header and body tag with the given parameter value in string. An invocation could look like this: document.write('<h1>hello world</h1>'); When working with web application, it is uncommon task to overwrite an entire page, hence why using document.write() is bad practice. It cannot inject string text into a given node point unlike jQuery library selectors and native JavaScript methods. Ref: https://developer.mozilla.org/en-US/docs/Web/API/Document Another reason not to use document.write() is it doesn't support XHTML, but its not an issue since most web development uses HTML. Since document.write() fires after a page has finish loading, it causes performance issues and sometimes, may not even fire at all. The only seem appropriate usage for document.write() is when working third parties like Google Analytics and such for including their scripts. This is because document.write() is mostly available in any browser. Since third party companies have no control over the user's browser dependencies (ex. jQuery), document.write() can be used as a fallback or a default method."

What are the pros and cons of using Promises instead of callbacks?

"pros - solves the problem of callback hell. cons - currently require external library or polyfill to achieve this."

"What is the value of foo.x? var foo = {n: 1}; var bar = foo; foo.x = foo = {n: 2};"

"undefined. Rather, bar.x is {n: 2}. foo.x = foo = {n: 2} is the same as foo.x = (foo = {n: 2}). It is because a left term is first referenced and then a right term is evaluated when an assignment is performed in JavaScript. When foo.x is referenced, it refers to an original object, {n: 1}. So, when the result of the right term, {n: 2}, is evaluated, it will assigned to the original object, which is at the moment referenced by bar."

"What is the value of foo.length? var foo = []; foo.push(1); foo.push(2);"

.push is mutable - 2

Higher-Order Functions

A function that either (1) accepts a function as an argument, or (2) returns a function as the return value. Every function that takes a callback is a higher-order function.

Promise

An object that may produce a single value some time in the future. A holder for a result (or an error) that will become available in the future (when the async call returns) I recommend ending all promise chains with a .catch().

Closures

In JavaScript, every function has access to the variables from outer and enclosing scopes. Functions that use these variables (also known as free variables) are called Closures.

Arrow functions (ES6)

Simplified function syntax with some changes. Arrow functions do not have their own `this` value. The `this` inside an arrow is always inherited from the enclosing scope. And arrows don't have their own `arguments` object

Difference between Array and Linked List

Some differences, are that in arrays, elements are stored in consecutive manner in memory. Linked lists are an ordered collection of elements which are connected by links/pointers. Array, elements can be accessed using index/subscript value,which provides fast and random access. Linked list nodes can't be accessed randomly, only sequentially and accessing element takes 0(n) time. Linked lists make it easier to store data of different sizes, whereas, an array assumes every element is the same size, and often the same data type. Depending on which language the array is instantiated, it can be easier for a linked list to grow organically. An array's size needs to be known ahead of time, or re-created when it needs to grow. Shuffling linked lists takes less memory because it's simply a matter of reassigning the pointers of its nodes.

Difference between document load event and document DOMContentLoaded event?

The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page).

Transfer-Encoding

Transfer-encoding - In normal circumstance server will tell client the content length which server sent, but in some circumstance the content's length remains unknown, and server will send content in chunks. Specifying Transfer-encoding tells client server is sending in this way.

Is there any reason you'd want to use translate() instead of absolute positioning, or vice-versa? And why?

Yes, translate do not cause the browser to trigger repaint and layout and instead only acts on the compositor. I tend to only ever use translate/transform nowadays, and only using absolute positioning for an elements initial position. I'll then translate it from that initial position for better performance.

Scope of this

`this` evaluates to the object that is calling the function. When we assign the method to a variable, we detach it from the object. Therefore, when we call it and it evaluates this, it no longer references its original object

Talk about your preferred development environment.

atom / iterm / Repl.it / CodePen / Chrome Dev

Do Not Track

disable either its tracking or cross-site user tracking

If you jumped on a project and they used tabs and you used spaces, what would you do?

follow the project norm. I personally prefer tabs, but when working on a project, I'm going to follow the standards/guidelines/etc that everyone is following. If it was for something important and not cosmetic, I'd bring it up for discussion of course.

What are some ways you may improve your website's scrolling performance?

https://www.html5rocks.com/en/tutorials/speed/scrolling/

Have you ever used JavaScript templating?

https://www.slant.co/topics/51/~best-javascript-templating-engines

"What does the following code print? console.log('one'); setTimeout(function() { console.log('two'); }, 0); console.log('three');"

one, three and two. It's because console.log('two'); will be invoked in the next event loop.

Closures store...

references to variables from outer and enclosing scopes. In other words, if the value of a variable defined in an outer scope changes before a closure is called, the closure accesses the updated value of the variable.

What are data- attributes good for?

"It makes HTML elements contain extra information without using non-standard attributes, or other hacks like that."

How would you implement a web design comp that uses non-standard fonts?

"using @font-face using font service link <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>"

Explain how this works in JavaScript

" this is seen as an instance of the current object in the class method: no more and no less. Mostly, it cannot be used outside the method and such simple approach does not create confusion. In JavaScript the situation is different: this is the current execution context of a function. The language has 4 function invocation types: function invocation: alert('Hello World!') method invocation: console.log('Hello World!') constructor invocation: new RegExp('\\d') indirect invocation: alert.call(undefined, 'Hello World!') Each invocation type defines the context in its own way, so this behaves slight different than developer expects. The mystery of this in JavaScript Moreover strict mode also affects the execution context. The key to understanding this keyword is having a clear view over function invocation and how it impacts the context. This article is focused on the invocation explanation, how the function call influences this and demonstrates the common pitfalls of identifying the context. Before starting, let's familiarize with a couple of terms: Invocation of a function is executing the code that makes the body of a function, or simply calling the function. For example parseInt function invocation is parseInt('15'). Context of an invocation is the value of this within function body. For example the invocation of map.set('key', 'value') has the context map. Scope of a function is the set of variables, objects, functions accessible within a function body."

Describe the difference between <script>, <script async> and <script defer>.

"- `<script>` stops rendering process, and download and run a script. - `<script async>` don't stop rendering process while asynchronously downloading a script. When finishing download, it stops rendering and runs the script. - `<script defer>` don't stop rendering process while asynchronously downloading a script. When finishing rendering, it runs the script."

What are the advantages/disadvantages of using CSS preprocessors?

"Advantages - better oranization from nesting them - ability to define variables and mixins - have mathematical functions - joining multiple files - in some cases, cleaner syntaxes Disadvantages - mainly for designers not comfortable on the command line or programming conceptsAdvantages Nested syntax Ability to define variables Ability to define mixins Mathematical functions Operational functions (such as "lighten" and "darken") Joining of multiple files Disadvantages Debugging is harder Compilation time slows down development"

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

"Cross Origin Resource Sharing. This is all because of javascript. On the web, it's a huge risk to have javascript running that you can't confirm came from the right source. Taken from wikipedia: "In computing, the same-origin policy is an important concept in the web application security model. Under the policy, a web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin. An origin is defined as a combination of URI scheme, hostname, and port number. This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page through that page's Document Object Model. " This can be pretty limiting... so for instance say you want to send and receive data to and from multiple servers and make say a single page application, this is where CORS comes in. CORS allows resource sharing from across a different origin, or cross-domain requests. enable cross-origin resource sharing"

What is Flash of Unstyled Content? How do you avoid FOUC?

"Flash of Unstyled Content. It exhibits a momentary flash of unstyled page content (as the name so aptly suggests) and is a side-effect of the CSS @import rule that exists in the Windows version of IE 5 or newer. It is caused by just one <link> element or <script> element inside a document's <head>. The Problem The LINK element solution — the addition of a link element to the basic head element is the most natural solution to the FOUC problem as almost every page can benefit from the addition of either an alternative stylesheet or a media-dependant stylesheet. The link solution The SCRIPT element solution — The addition of a SCRIPT element to the basic HEAD element is an effective solution to this problem, however it is very unnatural to add a script element to some pages. "

Have you played around with the new CSS Flexbox or Grid specs?

"Flexbox is fantastic and I suggest that everyone starts using it. It especially makes it easy to vertically center elements. CSS Grid is looking to be amazing. I haven't used it yet, but I'm sure it'll start taking place of some more popular grid frameworks."

Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.

"For display purpose, every element in the page is considered a box. The box model refers to the specification of the box attributes such as the width, padding, border and margin. You can change the box model by setting the box-sizing property. Some values are: content-box (default), padding-box, and border-box) Content-box: width & height includes content but not padding/border/margin Padding-box: include up to padding Border-box: include up to border, but not margin"

Can you describe the difference between progressive enhancement and graceful degradation?

"Graceful Degradation Graceful degradation states that we should implement our new tricky features and then provide a graceful degradation for less sophisticated browsers/clients. The concept comes from computer science originally and states that a system or network should be able to remain functional even when a large portion of it is destroyed. Progressive Enhancement Progressive enhancement is a concept that essentially works as the reverse of graceful degradation. Rather than modifying our system to degrade for older browsers, we build it initially for those older browsers and then progressively enhance the experience to make use of newer technology. I believe this approach encourages designers and devopers to produce a product that functions well in older technology, where there is a tendency with graceful degradation to compromise on the solution for older browsers. ""Progressive enhancement is a way to implement a web page where basic features, which are supported by most environments, are implemented first and then progressively enhance them for advanced environments. On the other hand, graceful degradation is an opposite. The advanced features are freely implemented at any time, and additional works are done to support the environment where the features don't work well."""

What's the difference between HTML and XHTML?

"HTML5 has two parsing modes or syntaxes: HTML and XML. The difference depends on whether the document is served with a Content-type: text/html header or a Content-type: application/xml+xhtml header. HTML: Start tags are not required for every element. End tags are not required for every element. Only void elements such as br, img, and link may be "self-closed" with />. Tags and attributes are case-insensitive. Attributes do not need to be quoted. Some attributes may be empty (such as checked and disabled). Special characters, or entities, do not have to be escaped. The document must include an HTML5 DOCTYPE XHTML: All elements must have a start tag. Non-void elements with a start tag must have an end tag (p and li, for example). Any element may be "self-closed" using />. Tags and attributes are case sensitive, typically lowercase. Attribute values must be enclosed in quotes. Empty attributes are forbidden (checked must instead be checked=""checked"" or checked=""true""). Special characters must be escaped using character entities."

Describe how you would create a simple slideshow page.

"If jQuery was already being used, I'd probably find a good plugin. I feel kinda lame saying that - but - honestly - a client wants me to get the best tool for the job and would probably not want to pay me to rebuild something that has been done a thousand times over. Now - assuming the question really wants to know how I'd build one - this is what I'd do. I'd use simple markup to list my images. Let's say div tags. I'd wrap the entire list with one div, we'll call it slideshow. I'd use CSS to default them to hidden. Finally I'd use JavaScript to get the divs, store them as an array, and make the first one visible. I'd build some form of simple navigation (and "previous" and "next" button for example) such that clicking them shows/hides the appropriate image. This is probably a bit heavy as all the images are loaded at once. I'm kind of assuming though you aren't building a 90 image slide show. You could do it entirely via JavaScript. Store the images in an array and on load show the first one. (You could preload all the images, but if you do, then why not just do it in the DOM instead?) If the slide show was the main part of the page (and not just part of the rest of the page), I'd consider using hashes in the URL so someone could bookmark a particular image."

What's the difference between inline and inline-block?

"Inline: respects left and right margins and padding doesn't respect top and bottom margins and padding doesn't have a width and height allow other elements to sit to its left and right Block: respects all margins and paddings respects width and height line break after Inline-block: placed like an inline element (on the same line) but behaves as block respects all margins and paddings respects width and height allow other elements to sit to its left and right"

null vs. undefined.

"JavaScript has two distinct values for nothing, null and undefined. undefined undefined means, value of the variable is not defined. JavaScript has a global variable undefined whose value is ""undefined"" and typeof undefined is also ""undefined"". Remember, undefined is not a constant or a keyword. undefined is a type with exactly one value: undefined. Assigning a new value to it does not change the value of the type undefined. 8 Ways to get Undefined: A declared variable without assigning any value to it. Implicit returns of functions due to missing return statements. return statements that do not explicitly return anything. Lookups of non-existent properties in an object. Function parameters that have not passed. Anything that has been set to the value of undefined. Any expression in the form of void(expression) The value of the global variable undefined null null means empty or non-existent value which is used by programmers to indicate "no value". null is a primitive value and you can assign null to any variable. null is not an object, it is a primitive value. For example, you cannot add properties to it. Sometimes people wrongly assume that it is an object, because typeof null returns ""object"". Btw, null == undefined"

Name 3 ways to decrease page load (perceived or actual load time).

"Minimize images. Minimize and combine JavaScript files. Minimize, combine, and "prune" CSS files. Use minifier and gzip to decrease the page size - actual Show spinner or progress bar - perceived Preload the page before actually loading it using libraries like InstantClick - both actual and perceived"

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

"Name the assets. Use a content delivery network. Host assets on different domains but reduce dns lookups. Place assets on a cookie-free domain and split the assets among domains. Use CSS Sprites. Disable etags. Minimise CSS and JavaScript using minifier(or uglifier), archive them using gzip, use separated file servers, use CDN, etc."

What are some of the "gotchas" for writing efficient CSS?

"Primarily about efficient css selectors - Avoid key selectors that match large numbers of elements (tag and universal selectors) - Prefer class and ID selectors over tag selectors - Avoid redundant selectors - Preferably don't use * (universal selector) *And like any other code, try group and reuse common properties."

How is responsive design different from adaptive design?

"Responsive Web Design Responsive Web Design provides the optimal viewing experience of a website, no matter what type of device the user is seeing it on. Wikipedia describes it as "an approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors)." This is done by using fluid grids. That's a term for a design that works no matter what the screen size is. So no matter how much you resize the screen, that same layout will automatically respond to that size, like a single ball growing or shrinking to fit through several different hoops. Adaptive Web Design Adaptive web design is different from responsive design in that there isn't one layout that always changes. Instead, there are several distinct layouts for multiple screen sizes. And the layout used depends on the screen size used. For example, there could be a specific layout for mobile phones, tablets, and desktop computers - each of which are made in advance. These three designs wait on standby until someone visits the site. The site detects the type of device used, and delivers the pre-set layout for that device. So instead of a single ball going through several different-sized hoops, you'd have several different balls to use depending on the hoop size."

== vs. ===

"The simplest way of saying that, == will not check types and === will check whether both sides are of same type. So, == is tolerant. But under the hood it converts to its convenient type to have both in same type and then do the comparison. === compares the types and values. Hence, if both sides are not same type, answer is always false. For example, if you are comparing two strings, they must have identical character sets. For other primitives (number, boolean) must share the same value. Rule for implicit coercion: Comparison by using == does implicit type conversion under the hood. And rules for implicit coercion are as follows- If both operands are same type use === undefined == null If one operands is string another is number, convert string to number If one is boolean and another is non-boolean, convert boolean to number and then perform comparison While comparing a string or number to an object, try to convert the object to a primitive type and then try to compare Be careful while comparing objects, identifiers must reference the same objects or same array. var a = {a: 1}; var b = {a: 1}; a == b //false a === b //false var c = a; a == c//true a === c //true Special note: NaN, null and undefined will never === another type. NaN does not even === itself."

Describe Floats and how they work.

"There are `left`, `right` and `none` for `float`. Each value indicates how an element should float. When `float` is set, each element will get out of its normal flow and will be shifted to the specified direction, until it gets its container or another floated element."

const

"This declaration creates a constant whose scope can be either global or local to the function in which it is declared. An initializer for a constant is required; that is, you must specify its value in the same statement in which it's declared (which makes sense, given that it can't be changed later). The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned. For instance, in the case where the content is an object, this means the object's contents (e.g. its parameters) can be altered."

What UI, Security, Performance, SEO, Maintainability or Technology considerations do you make while building a web application or site?

"UI: For small POC keep UI as simple as possible. Bootstrap or Materialize if I need to make it look nice quickly. Security: Don't trust anything you get from a user when speaking to a server. Make sure routes and controllers are locked down. Make sure auth is correct, or handle through OAuth. Performance: I'm familiar with performance monitoring tools, and I'd definitely be prepared to dive into it and refactor, but I think it depends on the priority and importance of the project. SEO: Absolutely - Simple design. Logical and RESTful keyword rich URL routing. Clean code, and good site speed. Mobile-Friendly design. Clear content strategy. Optimize Images. XML Sitemaps for Search Engine and user. Clear Call-to-Action. Social Media Integration. Maintainability - Proper documentation, clean code, bug tracking"

What is the difference between classes and IDs in CSS?

"Use id to identify elements that there will only be a single instance of on a page. For instance, if you have a single navigation bar that you are placing in a specific location, use id=""navigation"". id also renders with greater priority than an a class. Use class to group elements that all behave a certain way. For instance, if you want your company name to appear in bold in body text, you might use <span class='company'>."

Explain what ARIA and screenreaders are, and how to make a website accessible.

"WAI-ARIA is the Accessible Rich Internet Applications specification from the Web Accessibility Initiative at the W3C. ARIA provides a means to make web applications and widgets more accessible to a diverse range of users, including those who use assistive technologies such as screen readers or magnifiers. ARIA provides additional semantics to describe the role, state, and functionality of many familiar user interface controls, such as menus, sliders, trees, and dialogs. It also provides additional structural information, helping authors identify landmarks, regions, and grids on their pages. ARIA enables dynamic, JavaScript-driven applications and widgets to interoperate with a variety of desktop-based assistive technologies."

What is progressive rendering?

"With HTML progressive rendering is chunking the HTML into separate bits and loading each block as it's finished. Usually, the backend code loads the HTML at once, but if you flush after finishing one part of the structure, it can be rendered immediately to the page. This can be done asynchronously with different components being loaded as they finish. There's new features which can be used with Web Components making it more standard. Another interesting article on this is from eBay with Async Fragments."

Why is it generally a good idea to position CSS <link>s between <head></head> and JS <script>s just before </body>? Do you know any exceptions?

"You usually put the <link> tags in between the <head> to prevent Flash of Unstyled Content which gives the user something to look at while the rest of the page is being parsed. Since Javascript blocks rendering by default, and the DOM and CSSOM construction can be also be delayed, it is usually best to keep scripts at the bottom of the page. Exceptions are if you grab the scripts asynchronously, or at least defer them to the end of the page."

Are there any problems with serving pages as application/xhtml+xml?

"`application/xhtml+xml`? IE < 8 will show a download dialog for the pages, instead of rendering them properly."

Describe z-index and how stacking context is formed.

"`z-index` tells how elements should be stacked in a screen. Stacking context can be formed in several situations, but most famously, by a root element and positioned elements. In each stacking context, `z-index` will be calculated separately for its children and will stack the children in ascending order."

List as many values for the display property that you can remember.

"block and inline. The 2 big ones! list-item, which is quite useless. none, table, table-cell, table-row. I've been using table-cell a lot lately. Two things it does well is vertical-align, and taking up all the horizontal space (although you need table and table-row for that). It's like designing with tables, but with only the good parts (and the correct semantics).none inherit inline inline-block block table table-cell"

What are the various clearing techniques and which is appropriate for what context?

"clear:both; OR: overflow: hidden; height: auto;"

Explain some of the pros and cons for CSS animations versus JavaScript animations.

"css3: + no js :) running everywhere, fast - animation is primitive (now) js: + animation (mathematics) can be sophisticated, much more interactive methods for user - some browsers can block js, can be heavy, have load time"

let

"let allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used. This is unlike the var keyword, which defines a variable globally, or locally to an entire function regardless of block scope. Variables declared by let have as their scope the block in which they are defined, as well as in any contained sub-blocks . In this way, let works very much like var. The main difference is that the scope of a var variable is the entire enclosing function."

Describe the difference between a cookie, sessionStorage and localStorage.

"sessionStorage, localStorage and Cookies all are used to store data on the client side. Each one has its own storage and expiration limit. localStorage: stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser Cache / Locally Stored Data sessionStorage: similar to localStorage but expires when the browser closed (not the tab). Cookie: stores data that has to be sent back to the server with subsequent requests. Its expiration varies based on the type and the expiration duration can be set from either server-side or client-side (normally from server-side). Cookies are primarily for server-side reading (can also be read on client-side), localStorage and sessionStorage can only be read on client-side."

What are the different ways to visually hide content (and make it available only for screen readers)?

"text Indent .element-invisible { text-indent: -9999em; outline: 0; } position Absolute and Collapsed .element-invisible { height: 0; overflow: hidden; position: absolute; } position Absolute and Offscreen .element-invisible { position: absolute; top: -999999em; left: auto; width: 1px; height: 1px; overflow:hidden; } clip Method .element-invisible { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } a few techniques into one .element-invisible { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } Remarks: visibility: hidden; and/or display:none; These styles will hide text from all users. The text is removed from the visual flow of the page and is ignored by screen readers. width:0px; height:0px Because an element with no height or width is removed from the flow of the page, most screen readers will ignore this content. HTML width and height may give the same result."

Closures have access...

...to the outer functions variables even after the outer or enclosing function returns (is called and exits). Therefore, you can call the inner function later in your program.

callback

A function that is passed as an argument to another function. The callback is called inside of the function to which it is passed.

Scope

A section in your program where a name binding is considered valid. A name binding is when a variable (a name) evaluates to a certain value. If I declare var myName = 20;, this binding will only be valid in the scope where I declared it.

Null vs. Undefined

Both are distinct values for nothingness. Undefined has a value of "undefined" Same for typeof undefined. Undefined is a state of not yet being defined. Null is a primitive value representing no value, or empty. It is not an object. Keep in mind: null == undefined = true

If you could master one technology this year, what would it be?

Machine Learning

this

Evaluates to the object that the method is being called on.

Global Scope

Every variable that is declared outside of a function/method becomes a property on the global object.

Functional / OO prog

FP has: Pure functions Function composition Avoid shared state Avoid mutating state Avoid side effects OOP has: Object methods Shared State Atributes Behavior "There's no correct definition for what is and isn't ""functional"", but generally functional languages have an emphasis on simplicity where data and functions are concerned. Most functional programming languages don't have concepts of classes and methods belonging to objects. Functions operate on well-defined data structures, rather than belonging to the data structures."

.bind(this)

If the callback function utilizes the "this" keyword, we'll need to bind it to the appropriate object. To do this, we can use Function.prototype.bind or simply pass in the this Arg. Example: objMethod : function () {this.doStuff.forEach( function (things){}.bind(this)); },

Asynchronous code examples (video game)

If you were programming a Javascript video game, you'd want to tell the program to do something when the player presses a button. You wouldn't want this to be synchronous because if it was, the execution of the rest of the code would be paused until the player pressed a button. Instead, we'd prefer to let the game loop keep running, and whenever the player pressed a button our program would run the functionality we assigned to the key press.

What does a doctype do?

It specifies which markup standard the page is using. With the information, the browser determines how to render the page according to the page's source code.

What existing CSS frameworks have you used locally, or in production? How would you change/improve them?

Mostly foundation with some bootstrap. With foundation, it's easy to only use components that you need by importing the SASS components that you need. Otherwise I think the frameworks are way too cookie cutter and it's easy to notice when a website was created with either.

Polyfill

Polyfilla (spackling in the US) is a paste that can be put in to walls to cover cracks and holes. I really liked that idea of visualising how we're fixing the browser. Once the wall is flat, you can paint as you please or wallpaper to your heart's content.

How do you serve your pages for feature-constrained browsers?

Polyfills or graceful degradation.

Can you describe your workflow when you create a web page?

Reqs / schema / model / db architecture / associations / controllers / routes / views / api layer / Front End Framework

Arrow functions

Simplified function syntax with some changes Arrow functions do not have their own `this` value. The `this` inside an arrow is always inherited from the enclosing scope. And arrows don't have their own `arguments` object

Hoisting

The JavaScript engine, by default, moves declarations to the top. This feature is termed as hoisting. This feature applies to variables and functions. Hoisting allows JavaScript to use a component before it has been declared.

What excites or interests you about coding?

The internet is the story of our generation

Explain the importance of standards and standards bodies.

The relevance of web standards is most obvious when considering the emergence of new technologies. Where are these new tools going to belong? How do we structure them? What are they here for? The use of standards automatically makes every page you build genuinely cross-browser and cross-platform. With the use of web standards web designers, developers and engineers will be able to achieve a more stable web despite the ongoing introduction of new hardware and software. With the use of standards, both development and maintenance time become reduced as a result of faster debugging and troubleshooting when it comes to handling the code we create. Standards allow backwards compatibility and validation since they are written to be compliant with older browser versions. This compliant code can be validated through a validation service which makes the developer's work a lot easier resulting in less production time. In addition to the previously mentioned benefits, the use of standards can also increase search engine success while also allowing for the certainty of graceful degradation.

Function Scope

The set of variables available for use within the function: the function parameters, any local variables declared inside the function, and any variables that were declared when the function was first defined. JavaScript has function scope, which means that every time we create a new function, we also create a new scope. I can create two functions and declare the same variable names in them without worrying about overwriting one of the variables

How would you approach fixing browser-specific styling issues?

Use a separate stylesheet that only loads when that specific browser is being used. Thankfully, the days of IE specific stylesheets are almost gone.

Explain event delegation

When an event is fired from an element, the event will be bubbled up to its parent nodes. However, the original element where the event occurs, called 'target', stays the same in the event object. Using the target property, we can always keep tracking which element actually causes an event captured by its parent, and it can help use reduce the number of event handlers as we sometimes don't need to add event listeners for every element.

Explain how prototypal inheritance works

When it comes to inheritance, JavaScript only has one construct: objects. Each object has a private property (referred to as [[Prototype]] ) which holds a link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. By definition, null has no prototype, and acts as the final link in this prototype chain.

Have you used different HTML templating languages before?

Yes. ERB in template language in Ruby. EJS in JavaScript.

Asynchronous code

is code that will start or setup some process that usually takes some time to complete (e.g. asking a user for input, waiting for a keypress, waiting for a milli-second count, etc), but it will not block the thread while it waits. Asynchronous code will usually run some function in response to the completion of the process it was waiting for

Synchronous code

is run in the order it is written (although to evaluate functions the program may jump all over the space of the program) and blocks the thread from running anything else.

Asynchronous code examples (setTimeout)

setTimeout and setInterval are asynchronous functions. While they wait for the milli-second countdown to reach 0, the JS interpreter keeps reading the rest of the code.