Front End CSS, HTML, JS

semicolon

If there is a return statement on it's own line (ex/ return { var b = 2} ) then a ____ is automatically inserted after the return statement.

primative value

In JS, is null an object or a primative value?

\f

formfeed

Invoke function

functionName();

How could you apply css rules specific to a media?

By using media queries: ex: @media (max-width: 500px) { h1 { color: blue; } }

Math.floor()

Rounds number down: 1.2 ---> 1.0

What is the difference between REM and EM?

rem units are like em's that ignore compounding and just take the root element size.

use strict

the short and most important answer here is that __ ____ is a way to voluntarily enforce stricter parsing and error handling on your JavaScript code at runtime.

What is a DOM repaint (or redraw)?

when parts of the screen need to be updated, either because of changes in geometric properties of a node or because of stylistic change, such as changing the background color.

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

#1: visibility: hidden #2: width: 0; height: 0; #3: text-indent: -1000px #4: absolute position off the screen

explain 'this' in javascript

'this' normally refers to the object which 'owns' the method, but it depends on how a function is called.

CORS

(CORS) is a mechanism that allows restricted resources (e.g. fonts) on a web page to be requested from another domain outside the domain from which the resource originated.

What is ARIA and what are some best practices related to ARIA?

* ARIA is a subset of HTML, which allows ATs to perceive complex widgets and visual relationships * ARIA attributes can be divided into three primary categories: roles, states, and properties * First rule of ARIA is don't use ARIA. Always favor native semantics, as the majority of roles and states map to existing elements and attributes. * Do not override an element's default semantics. ARIA roles and states override default semantics, offering a high potential for misuse. * Use role="presentation" and aria-hidden="true" responsibly. Know the proper use case for each property.

What are some strategies you use to improve the front-end performance of your pages?

* Any of the standard YSlow items * Reduce # of HTTP requests (concatenate JS/CSS, use CSS sprites or image maps) * Put JS at the bottom * Minify CSS/JS * Server side: Gzip, set expires headers, use a CDN, etc. * Reduce JavaScript blocking- Using XHR (same domain), Create script element in DOM, Use defer attribute

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

* CSS Sprites are a means of combining multiple images into a single image file for use on a website, to help with performance. * You set the same background-image on several CSS classes and set the background position and dimensions of the individual classes to display a single portion of the sprite

What are some strategies to minimize DOM reflows and replaints

* Change classes not individual styles * Batch DOM changes. Make as many changes offline as possible and then use one DOM insertion * Cache needed DOM elements and computed styles you will work with

Explain how prototypal inheritance works

* Each object has an internal 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. null, by definition, has no prototype, and acts as the final link in this prototype chain. * Not class based * One prototype inherits from another prototype

What are some ways to make an image accessible?

* Non-text content, such as meaningful images and SVGs, must be accompanied by alternative text. * IMG tags must include a relative, succinct, and descriptive alt attribute. For purely decorative images, provide an empty alt (alt=""). * In cases where images are used exclusively as a links or buttons, the alt attribute must not be left empty, unless accompanied by hidden offscreen text content. * Decorative SVG elements should be hidden from ATs by applying the aria-hidden="true" attribute. * Unless purely decorative, CSS background images conveying meaning must be accompanied by hidden offscreen text content. * Decorative images are defined as images used only for visual formatting or styling, and do not convey a specific meaning to the user.

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

* The width and height properties include the content, the padding and border, but not the margin

What does a doctype do?

* it is an instruction to the web browser about what version of HTML the page is written in

How do you define a page as being an HTML page

<!DOCTYPE html> at the top of the file

Add Submit button

<button type="submit">This button submits the form</button>

What are some elements and attributes that map to ARIA?

<button> => role="button" <h1> => role="heading" aria-level="1" <ul> => role="list" <nav> => role="navigation" checked => aria-checked="true" disabled => aria-disabled="true" required => aria-required="true"

Describe how you would create a simple slideshow page.

<div class='slide-page'>...</div> <div class='slide-page'>...</div> <div class='slide-page'>...</div> html, body, .slide-page { width: 100%; height: 100%; } .slide-page { position: fixed; top: 0; left: 0; display: none; } .slide-page:first-child { display: block; } window.addEventListener('click', () => { document.querySelector('.slide-page').remove(); });

max-width

@media (______: 700px){...} means you want to apply rules to those media to every device smaller than 700px

pseudo

A ___-class is used to define a special state of an element.

fixed

A ____ position element is positioned relative to the viewport, or the browser window itself. The viewport doesn't change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled

floated

A _____ element is taken out of the document flow.

closure

A _____ is an expression (typically a function) that can have free variables together with an environment that binds those variables (that "closes" the expression).

What is AJAX, and why is it used?

AJAX (asynchronous javascript) lets you update pages without a refresh by updating pages when a return comes back. It makes a call and waits for the callback.

Require specific form fields

Add the word 'required' within the input element <input type="text" required>

CSS

Cascade Styling Sheets - Browsers read CSS from top to bottom

Compose

Chaining two or more functions together function cookAndEat(food) { return eat (cook(food)) }

Describe the difference between a cookie, sessionStorage and localStorage.

Cookies are used for tracking/authentication purposes, stored in a local file and sent with every request to the domain. sessionStorage and localStorage are used for data storage purposes. sessionStorage lasts until the browser is closed, while localStorage persists.

Closures

Functions containing one or more free variables are called closures.

Twitter API example

Give me all the tweets that mention "ice cream"

Are css properties are case sensitive?

No

Talk about your preferred development environment.

Slow paced and fast paced are both environments that I do quite well in. I'm pretty relaxed with a strong work ethic, and usually work well under pressure, although, it is much better to work without being under too much pressure! :)

What is the difference between a span element and a div element?

Span elements are inline, as div are block elements. Note: You cannot have a block element inside of an inline element.

What is the default type of a button?

Submit

overflow

The ____ property specifies what happens if content overflows an element's box.

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

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.

What does the ARIA role="presentation" do?

The presentation role removes all semantic meaning from an element, turning it into a generic equivalent of a div or span element.

a closure

What is the innerFunc function an example of? var globalVar = "xyz"; (function outerFunc(outerArg) { var outerVar = 'a'; (function innerFunc(innerArg) { var innerVar = 'b'; console.log( "outerArg = " + outerArg + "\n" + "innerArg = " + innerArg + "\n" + "outerVar = " + outerVar + "\n" + "innerVar = " + innerVar + "\n" + "globalVar = " + globalVar); })(456); })(123);

2

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

"1020"

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

Explain why the following doesn't work as an IIFE: "function foo(){}(); What needs to be changed to properly make in an IIFE?

What needs to be changed to properly make it an IIFE? The most widely accepted way to tell the parser to expect a function expression is just to wrap in in parens, because in JavaScript, parens can't contain statements. At this point, when the parser encounters the function keyword, it knows to parse it as a function expression and not a function declaration.

let is only visible in the for loop. var is visible to the whole function.

Where is tuce visible? Is it visible outside of the for loop? function allyIlliterate() { var hi = "hi"; for( let tuce = 0; tuce < 5; tuce++ ) { }; };

window

_____.onload is fired when DOM is ready and all the contents including images, css, scripts, sub-frames, etc. finished loaded. This means everything is loaded.

Event delegation

_______ ________ allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

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

all i know is... If the browser decides that the document is modern, it'll render it in standards mode. This means that, as a rule, CSS is applied in accordance with the CSS2 specification. If the browser decides that the document is old-school, it'll render it in quirks mode. This mode applies CSS in the quirky way that suited predecessors of that browser, or even of other browsers. The exact implementations of quirks mode differ between browsers. ---------- broswer in standards mode behaved as descipted in stand HTML CSS specification broswer in quirks mode will violate stand specification to keep some old site from break.

.push()

appends data to end of array - example: // Setup var myArray = [["John", 23], ["cat", 2]]; // Only change code below this line. myArray.push(["dog", 3]);

New tags in HTML5

article, aside, bdi, details, dialog, figcaption, figure, footer, header, main, mark, menuitem, meter, nav, progress, rt, rp, ruby, section, summary, time, wbr

\S

match anything that isn't white space /\S/g

\n

new line

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

no, but https://css-tricks.com/snippets/css/a-guide-to-flexbox/

How do you top align something (like a sticky header)?

position: fixed top: 0; left: 0;

Public properties

this keyword to reference public properties of the current object.

What are the different types of buttons

type=button -> clickable button type=submit -> submit button (submits form-data) type=reset -> reset button (resets the form-data to its initial value)

typeof bar === "object && bar !== null

typeof bar === "object" how would you check if bar is an object or null?

Accessing Nested Arrays

var ourPets = [ { animalType: "cat", names: [ "Meowzer", "Fluffy", "Kit-Cat" ] }, { animalType: "dog", names: [ "Spot", "Bowser", "Frankie" ] } ]; ourPets[0].names[1]; // "Fluffy" ourPets[1].names[0]; // "Spot" Another example // Setup var myPlants = [ { type: "flowers", list: [ "rose", "tulip", "dandelion" ] }, { type: "trees", list: [ "fir", "pine", "birch" ] } ]; // Only change code below this line var secondTree = myPlants[1].list[1]; // pine

Use Bracket Notation to Find the NthtoLast Character in a String

var.length - nth

<keygen>

what html element generates a public key?

\b

used to find a match at the beginning or end of a word.

block

div section p ul, h1's, etc., are all examples of what kind of elements? inline/block/inline-block

div element

division element - general purpose container for other elements. <div></div>

host

in javascript, ___ objects are provided by the environment

true

var bar = null; What will typeof bar === "object" return?

2nd integer of splice

# of existing elements to remove, starting with the first element that comes after the elements that you're splicing in

3 - it's own scope, global scope, and in the enclosing function's scope

A closure has access to variables in how many different scopes?

What does the scoped attribute do? ck

Applies style rules to all children of the SCOPED parent element

What is a z index

It specifies a stack order of an element. a higher z-index are stacked in front of elements with a lower z-index

How would you create a modal

Z-index

.pop()

is used to "pop" a value off of the end of an array. We can store this "popped off" value by assigning it to a variable.

Bracket notation

A way to get a character a specific index within a string ZERO-BASED indexing

function expression

1 var bindingName = function actualName () { 2 //... 3 };

Checkboxes

- Type of input

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

A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to: Style the first letter, or line, of an element Insert content before, or after, the content of an element

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.

data-

the __ attribute allows you to store extra information/ data in the DOM.

\b

backspace

Create privates methods, private properties

create variable inside the constructor

What's a typical use case for anonymous functions?

event handler IIFE

Falsy values

false, null, 0, "", undefined, and NaN

Can you explain the box model?

Margin | border | padding | content

What does 'return' do?

Return exits a function and sends a value back to then spot in the program where then function was called - returns one value (Variable, string, number, boolean value)

NaN

The ___ property represents a value that is 'not a number'.

Describe event bubbling

The bubbles event property returns a Boolean value that indicates whether or not an event is a bubbling event. Event bubbling directs an event to its intended target, it works like this: A button is clicked and the event is directed to the button. If an event handler is set for that object, the event is triggered.

What is "lexical" scoping?

This means that the functions run in the scope in which they are defined, not the scope from which they are executed.

-1 in indexOf()

This method returns -1 if the value to search for never occurs.

fixed

This type of positioned relative to the viewport. It doesn't change when you scroll, it's called position ____.

Object { bar : 'hello'}

What does this return function foo1() { return { bar: "hello" }; }

Native

____ objects belong to the javascript language

coercion

implicit conversion of data type

Objects

key value pair

.bind() method

let dog = { sound: 'YEE', talk: function() { console.log(this.sound); } } let talkFunction = dog.talk; let boundFunction = talkFunction.bind(dog); boundFunction();

\s

find whitespace in a string /\s+/g

How do you write a media query?

* @media not|only mediatype and (media feature) { CSS-Code; }

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

- Empty Div Method: <div style="clear:both;"></div> - Overflow Method: setting auto or hidden overflow property on parent will expand it to contain the floats. - The Psuedo Method: uses the parent's :after to add the clear: both property .clearfix:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; }

Testing objects for properties

.hasOwnProperty(propname) method of objects to determine if that object has the given property name. .hasOwnProperty() returns true or false if the property is found or not.

What is Event Bubbling?

<window> <div> <form> <button> If I click the button it will bubble up and a click will occur on the button, form, div, and window.

What is the difference between == and ===

== is measuring equality between two things, === is measuring whether two things are identical

values

== only checks values or types?

values

=== compares the types and ____

What is a @mixin

A mixin is a piece of SCSS that accepts arguments. when a mixin is included it evaluates the given arguments and includes the generated css where it has been included. This lets you write easily reusable SCSS.

AMD vs. CommonJS?

AMD - less tooling involved - easier to debug - less edge cases that break in browsers src: http://requirejs.org/docs/whyamd.html

Parsing JSON

API requests - loading JSOn-encoded data files from a server - use the method - $.getJSON

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

Advantages Cannot assign a value to an undefined global variable Fire TypeError for not-allowed assignments this in a normal function refers to undefined, instead of global In short, it secures JavaScript. Disadvantage When using global strict mode and concatenating the script with other scripts not using strict mode, the other scripts can be broken.

id attributes

Always takes precedence to class attributes *OVERRIDES CLASS DECLARATIONS*

inline

An ___ element does not start on a new line and only takes up as much width as necessary.

Margin

Controls the amount of space between an element's border and surrounding elements. - set to a negative value - the element will grow larger -

Math.floor( Math.random() * 6 ) + 1;

Excludes 0 ---> 1-6

arguments

Function _____ are the real values passed to (and received by) the function.

parameters

Function ______ are the names listed in the function definition.

Which version control systems are you familiar with?

Git and GitHub

JSON with Padding

JSONP stands for ....

value

JavaScript arguments are passed by ___: The function only gets to know the values, not the argument's locations.

reference

Object references are values because of this, objects are passed by _____. If a function changes an object property, it changes the original value.

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

Servers would need to be configured to server files as that content type. Some browsers do not recognize the content type.

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

The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.

X:first-of-type

The first-of-type pseudo class allows you to select the first siblings of its type.

closure

The reason for, wrapping the entire content of a JavaScript source file in a function block is to create a _____ and to create a private namespace.

queue

abstract data structure - where items are kept in order

A ___ _____ is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline

css reset

Object.keys()

method returns an array of a given object's own enumerable properties, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well). Key: value pairs objects keys

Describe the difference between a cookie, sessionStorage and localStorage.

* 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. * Cookies are primarily for reading server-side, localStorage and sessionStorage can only be read client-side.

Describe Z-index

* specifies the z-order of an element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.

What is a Try-Catch statement?

**

What is an example of a debugging experience?

**

What steps does a browser go through to show a webpage?

- Process HTML markup and build the DOM tree. - Process CSS markup and build the CSSOM tree. - Combine the DOM and CSSOM into a render tree. - Run layout on the render tree to compute geometry of each node. - Paint the individual nodes to the screen.

Accessing Nested Objects

// Setup var myStorage = { "car": { "inside": { "glove box": "maps", "passenger seat": "crumbs" }, "outside": { "trunk": "jack" } } }; // Only change code below this line var gloveBoxContents = myStorage.car.inside["glove box"]; // Change this line

Accessing Objects Properties with Variables

// Setup var testObj = { 12: "Namath", 16: "Montana", 19: "Unitas" }; // Only change code below this line; var playerNumber = 16; // Change this Line var player = testObj[playerNumber]; // Change this Line

$.getJSON request example

// this is an example URL that returns a JSON object var jsonUrl = "https://api.gilt.com/v1/products/sizes.json?apikey=1320642ea27d50d0e99896abceecd691"; // fill in the right method below $.getJSON(jsonUrl, function(data) { // data contains the result of translating the JSON // string into a javascript object // we now use JSON.stringify to translate the data object // back to a string to be able to display it in the page $('#result').text(JSON.stringify(data, null, 2)); }, "json");

API

Application Programming Interfaces - Coding contract - specifies the ways a program can interact with an application.

Multiple classes

Applying multiple class attributes to a HTML element is done with a space between them like this: class="class1 class2"

variable

Can be made up of numbers, letters, $ and _*Cannot contain spaces or start with a number

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

Closures are functions that have access to variables from anthor function's scope. This is often accomplished by creating a function inside a function.

What tools do you use on the Chrome Inspector?

Console, Network, Elements

Padding

Controls the amount of space between the element and its border

What are Datatypes?

Datatypes refer to the built in 'classes' that exist in the JS language. These are crucial to any language working as they define how variables will interact with each other, and how you can interact with a given variable.

Explain the following request and response headers: Difference between Expires, Date, Age and If-Modified .... Do Not Track ... Cache-Control ... Transfer-Encoding... ETag ... X-Frame-Options

Date All HTTP date/time stamps MUST be represented in Greenwich Mean Time (GMT), without exception. HTTP applications are allowed to use any of the following three representations of date/time stamps: Sun, 06 Nov 1994 08:49:37 GMT ; RFC 822, updated by RFC 1123 Sunday, 06-Nov-94 08:49:37 GMT ; RFC 850, obsoleted by RFC 1036 Sun Nov 6 08:49:37 1994 ; ANSI C's asctime() format Here the first format is the most preferred one. Expires The Expires entity-header field gives the date/time after which the response is considered stale. The general syntax is: Expires : HTTP-date Following is an example: Expires: Thu, 01 Dec 1994 16:00:00 GMT Age The Age response-header field conveys the sender's estimate of the amount of time since the response (or its revalidation) was generated at the origin server. The general syntax is: Age : delta-seconds Age values are non-negative decimal integers, representing time in seconds. Following is a simple example: Age: 1030 An HTTP/1.1 server that includes a cache must include an Age header field in every response generated from its own cache. If-Modified-Since The If-Modified-Since request-header field is used with a method to make it conditional. If the requested URL has not been modified since the time specified in this field, an entity will not be returned from the server; instead, a 304 (not modified) response will be returned without any message-body. The general syntax of if-modified-since is: If-Modified-Since : HTTP-date An example of the field is: If-Modified-Since: Sat, 29 Oct 1994 19:43:31 GMT If none of the entity tags match, or if "*" is given and no current entity exists, the server must not perform the requested method, and must return a 412 (Precondition Failed) response. Cache-Control The Cache-Control general-header field is used to specify directives that MUST be obeyed by all the caching system. The syntax is as follows: Cache-Control : cache-request-directive|cache-response-directive An HTTP client or server can use the Cache-control general header to specify parameters for the cache or to request certain kinds of documents from the cache. The caching directives are specified in a comma-separated list. For example: Cache-control: no-cache The following table lists the important cache request directives that can be used by the client in its HTTP request: S.N. Cache Request Directive and Description 1 no-cache A cache must not use the response to satisfy a subsequent request without successful revalidation with the origin server. 2 no-store The cache should not store anything about the client request or server response. 3 max-age = seconds Indicates that the client is willing to accept a response whose age is not greater than the specified time in seconds. 4 max-stale [ = seconds ] Indicates that the client is willing to accept a response that has exceeded its expiration time. If seconds are given, it must not be expired by more than that time. 5 min-fresh = seconds Indicates that the client is willing to accept a response whose freshness lifetime is not less than its current age plus the specified time in seconds. 6 no-transform Does not convert the entity-body. 7 only-if-cached Does not retrieve new data. The cache can send a document only if it is in the cache, and should not contact the origin-server to see if a newer copy exists. The following important cache response directives that can be used by the server in its HTTP response: S.N. Cache Request Directive and Description 1 public Indicates that the response may be cached by any cache. 2 private Indicates that all or part of the response message is intended for a single user and must not be cached by a shared cache. 3 no-cache A cache must not use the response to satisfy a subsequent request without successful re-validation with the origin server. 4 no-store The cache should not store anything about the client request or server response. 5 no-transform Does not convert the entity-body. 6 must-revalidate The cache must verify the status of the stale documents before using it and expired ones should not be used. 7 proxy-revalidate The proxy-revalidate directive has the same meaning as the must- revalidate directive, except that it does not apply to non-shared user agent caches. 8 max-age = seconds Indicates that the client is willing to accept a response whose age is not greater than the specified time in seconds. 9 s-maxage = seconds The maximum age specified by this directive overrides the maximum age specified by either the max-age directive or the Expires header. The s-maxage directive is always ignored by a private cache. Transfer-Encoding The Transfer-Encoding general-header field indicates what type of transformation has been applied to the message body in order to safely transfer it between the sender and the recipient. This is not the same as content-encoding because transfer-encodings are a property of the message, not of the entity-body. The syntax of Transfer-Encoding header field is as follows: Transfer-Encoding: chunked All transfer-coding values are case-insensitive. ETag The ETag response-header field provides the current value of the entity tag for the requested variant. The general syntax is: ETag : entity-tag Here are some simple examples: ETag: "xyzzy" ETag: W/"xyzzy" ETag: ""

event bubbling causes all events in the child nodes to be automatically passed to its parent nodes. The benefit of this method is speed because the code only needs to traverse the DOM tree once.

Describe what event bubbling is?

Host

ECMAScript recognises two categories of object, "Native Object" and "__ Object"

Visibility:Hidden; - It is not visible but takes up it's original space. Display:None; - It is hidden and takes up absolutely no space as if it was never there.

Explain the difference between visibility:hidden; and display:none; ?

Local vs Global

It is possible to have both local and global variables with the same name. When you do this, the local variable takes precedence over the global variable. Example: var someVar = "Hat"; function myFun() { var someVar = "Head"; return someVar; }

JSON

JavaScript Object Notation - Like JavaScript Objects, JSON is flexible because it is heterogeneous, meaning it permits Data Structures with arbitrary combinations of strings, booleans, numbers, arrays, and objects. -

What is the difference between normalize.css and reset.css?

Normalize.css is more of a modular way of making browser styling consistent across all browsers. It also fixes common CSS bugs (svg in IE9). Reset.css resets all of the elements to nothing so you start from scratch. Normalize.css seems to be a better method for browser consistency.

What Datatypes does javascript have?

Objects, Boolean, String, Number, Array, undefined

What are the limitations when serving XHTML pages?

Poor browser support, with some browsers incorrectly parsing XHTML as HTML.

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

Properties: All which either has a boolean value or that is UA calculated such as selectedIndex Attributes: 'Attributes' that can be added to a HTML element which is neither boolean nor containing a UA generated value.

Describe Floats and how they work.

The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. A floating element is one where the computed value of float is not none .

arguments

The parameters, in a function call, are the function's ______.

reverse() method

The reverse() method reverses the order of the elements in an array. var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.reverse(); result will be: Mango,Apple,Orange,Banana

.splice() method

The splice() method adds/removes items to/from an array, and returns the removed item(s). var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2, 1, "Lemon", "Kiwi"); Results of fruits will be: Banana,Orange,Lemon,Kiwi,Mango

"number"

What does typeof NaN return?

clear

When you apply css ____ to an element, it will move THAT element so that it doesn't have items left or right of it. It does not re-position any of the other elements, it simply moves the element to a position where nothing is around it.

Have you used or implemented media queries or mobile specific layouts/CSS?

a little!

What tools would you use to find a performance bug in your code?

debugger...

How do you reverse a string?

function reverseString(string){ var returnStr = ''; for (var i = string.length -1; i >= 0; i--){ returnStr += string[i]; } return returnStr; }

charAt()

method returns the character at the specified index in a string var str = "HELLO WORLD"; var res = str.charAt(0); res = H

!important

overrides CSS color: red !important;

The CSS ______ properties define the space between the element border and the element content.

padding

Using _______ HTML, uses html that clearly defines it's meaning to the developer and browser

semantic

closure

when a function remembers the variables around it even when that function is executed elsewhere

binary in operator

when applied to a string and object, a boolean value is returned. var anObject = { left: 1, right: 2}; console.log(anObject); console.log("left" in anObject); // returns true

What is a DOM reflow (or relayout)?

when parts of the render tree (or the whole tree) are revalidated and the node dimensions recalculated * At a minimum happens on page load

Function.prototype.apply

in cases where you want to use an array as arguments to a function.

How do you optimize your webpages for print?

https://davidwalsh.name/optimizing-structure-print-css

Explain Function.prototype.bind

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

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

i have only ever used bootstrap, and i like it!

Have you used different HTML templating languages before?

i have used handlebars in a project, and experimented with jade.

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

CORS stands for cross-origin resource sharing. There could be situation where some resources should be allowed from sources having different origin. CORS is a standard to enable cross-site HTTP requests for: AJAX API call Web Fonts WebGL textures Image/video frames drawn to a canvas using drawImage Stylesheets Scripts

How quickly do you learn?

Demonstrate how quickly you learn? I learned everything I know in 3 months time.

How can you use Event Bubbling?

Event bubbling can allow you to create a single event handler instead of 1-n handlers for a given set of elements. This is implementing the pattern of event delegation. This can be handy in cases where the set of elements is expected to grow.

Explain event delegation

Event delegation refers to the process of using event propagation (bubbling) to handle events at a higher level in the DOM than the element on which the event originated. It allows us to attach a single event listener for elements that exist now or in the future. Inside the Event Handling Function.

X:nth-child(n) li:nth-child(3) { color: red; }

Remember the days when we had no way to target specific elements in a stack? The nth-child pseudo class solves that! Please note that nth-child accepts an integer as a parameter, however, this is not zero-based. If you wish to target the second list item, use li:nth-child(2). We can even use this to select a variable set of children. For example, we could do li:nth-child(4n) to select every fourth list item.

Explain CSS property text-indent

The text-indent property specifies the indentation of the first line in a text-block. Takes length or %. Also initial and inherit

object

What does typeof null return?

'undefined'

What does typeof undefined return?

isNaN() ex. is NaN(5) //false

What function will test whether a number is equal to NaN

Explain CSS property clip.

What happens if an image is larger than its containing element? - The clip property lets you specify a rectangle to clip an absolutely positioned element. The rectangle is specified as four coordinates, all from the top-left corner of the element to be clipped. The clip property does not work if "overflow:visible". Can be used to add text for a background image. Ex) clip: rect(0px,60px,200px,0px);

- A image sprite is a collection of images put into one single image. - Using css positioning you can show and hide different parts of the sprite depending on what you need. - Sprites reduces the number of http requsts thus reducing load time of page and bandwidth

What is a sprite? How is it applied using CSS? What is the benefit?

Weather API

What is the weather in San Francisco, CA?

undefined

What will the 1st console.log output? function hoisting() { console.log(hoistedVar); var hoistedVar = "hoisted!"; console.log(hoistedVar); }

Variables

When JavaScript variables are declared, they have an initial value of undefined.

operators

return true or false statements

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

static -Default value. Elements render in order, as they appear in the document flow absolute -The element is positioned relative to its first positioned (not static) ancestor element fixed - The element is positioned relative to the browser window relative - The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position initial - Sets this property to its default value. Read about initial inherit - Inherits this property from its parent element. Read about inherit

How absolute, relative, fixed and static position differ?

absolute, place an element exactly where you want to place it. absolute position is actually set relative to the element's parent. if no parent available then relatively place to the page itself. relative, is position an element relative to itself (from where the element would be placed, if u don't apply relative positioning). for example, if u set position relative to an element and set top: 10px, it will move 10px down from where it would be normally. fixed, element is positioned relative to viewport or the browser window itself. viewport doesn't changed if u scroll and hence fixed element will stay right in the same position. static, element will be positioned based on the normal flow of the document. usually, u will use position static to remove other position might be applied to an element.

What are the necessary HTML elements needed for a basic structure of an HTML document?

doctype <!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html>

How do you remove duplicate members from an array?

function removeDuplicates(array) { var exists = {}, outterArray = [], element; for (var i=0; i < array.length; i++){ element = array[i]; if (!exists[element]) { outterArray.push(element); exists[element] = true; } } return outterArray; }

.join() method

method to join each element of an array into a string separated by whatever delimiter you provide as an argument. ex: var veggies = ["Celery", "Radish", "Carrot", "Potato"]; var salad = veggies.join(" and "); console.log(salad); // "Celery and Radish and Carrot and Potato"

What are the problems with z index?

- z-index only works on positioned elements. If you try to set a z-index on an element with no position specified, it will do nothing. - stacking contexts (stacking order from the html element tag). Giving an element an opacity of less than 1, changes its stacking context (it puts that element above any z indexes)

JS primitives

- Undefined, null, boolean, string, number EVERYTHING ELSE IS AN OBJECT!

window

document is a property of the ____ object

a defined? false b defined? true b =3 and var a = b; b ends up being a global variable

What will the code below output to the console and why? (function(){ var a = b = 3; })(); console.log("a defined? " + (typeof a !== 'undefined')); console.log("b defined? " + (typeof b !== 'undefined'));

$

_ is just an alias for the jquery function.

Absolute

_____ positioning allows you to remove an object from the typical flow of the document and place it at a specific point on the page.

\d

digit selector - used to retrieve one digit in a string used: /\d/g /\d+/g allows for regex to match one or more digits

Describe event bubbling and event capture.

Event bubbling and capturing are two ways of event propagation in HTML DOM. In bubbling the event is first captured and handled by the innermost child element and then propagated to outer parent elements. In capturing the event is first captured by the outermost parent element and propagated to the innermost child element.

window

In JS ______ is that global object that holds global variables, global functions, location, history everything is under it.

.slice() method

Method to copy one or more consecutive elements in any position an put them into a new array; ex: var pets = ["dogs", "cats", "fly", "ant"]; var noPets = pets.slice(2, 4); //copies fly and ant

How do you organize your code?

Module pattern

If you have many options to choose from ... use a

Switch statement - A switch statement tests a value and can have many case statements which defines various possible values. Statements are executed from the first matched case value until a break is encountered. - DEAFULT statement should be last

What does the ARIA aria-hidden="true" do?

The aria-hidden="true" property hides elements from ATs. It is the equivalent of applying display: none or visibility: hidden CSS styles.

What does doctype do?

The browser parses the doctype in order to select an appropriate rendering mode.

match()

The match() method retrieves the matches when matching a string against a regular expression.

inline-block

this type of element does not start on a new line but it does take height and width (inline/block/inline-block)

inline

this type of element ignores height and width (block / inline / inline-block)

What 2d transforms does CSS allow?

translate() rotate() scale() skewX() skewY() matrix()

.repeat()

'abc'.repeat(-1); // RangeError 'abc'.repeat(0); // '' 'abc'.repeat(1); // 'abc' 'abc'.repeat(2); // 'abcabc' 'abc'.repeat(3.5); // 'abcabcabc' (count will be converted to integer) 'abc'.repeat(1/0); // RangeError

Explain "hoisting"

In JavaScript, a variable can be declared after it has been used. In other words; a variable can be used before it has been declared.

DOM Events

Making things interactive - clicking on a button - hovering over a link - dragging and dropping - pressing the enter key

In a HTML document, the pseudo class :root always refers to the <html> element.

True

text() method

sets or returns the text content of selected elements - When this method is used to return content, it returns the text content of all matched elements (HTML markup will be removed). When this method is used to set content, it overwrites the content of ALL matched elements.

What's the difference between a variable that is null, undefined, or undeclared? How would you go about checking for any of these states?

the undefined variable is a declared but has a value of undefined. To use a undeclared variable will cause an error.

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'>

What are some ways to increase the accessibility of a form?

* Form validation and similar messaging must be conveyed in a clear and succinct manner. * Form controls with invalid input must be accompanied by textual inline error messages. * A form submission resulting in validation errors requires programmatic focus management to notify the user of issue(s). Upon activating submission, focus should programmatically be placed on either the form's top level error message, or the first field with invalid input. * A relationship between the form field and it's corresponding error must be created using the aria-describedby attribute. This is done by placing an ID on the error message, which is referenced from the input element via aria-describedby. When the error message is no longer on screen, the aria-describedby attribute must be removed. * Form controls must be paired with corresponding labels to expose their name (via matching ID and for attribute). Placeholders should not be used in place of a form label. * Radio, checkbox groups, and related text inputs, must be encapsulated in a fieldset element containing a legend element description. <label for="fname">First Name</label> <!-- Error element's ID referenced from input's aria-describedby attribute --> <input type="text" id="fname" aria-describedby="fname-error"/> <p id="fname-error">Please enter a valid first name.</p>

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

-Reduce the number of requests -Reduce the overall size of the content -Promote parallelization (i.e. simultaneous download of assets - if IE, use domain sharding.) -Lazy load images - use blank png as base image, then use JS to swap image when other image is fully loaded -Prefetch resources -Use a framework that employs a virtual-dom (React/Flux, Tw. -Flight, Elm, Mecury) -You want to concatenate and minify your JS/CSS, so there is only one file to fetch from the server. You also want to re-consider heavily using a client-side MV* (e.g. Backbone), because you can end up downloading lots of data, thus slowing down the site. --- Code techniques: Compress/minify code Concatenate files into a smaller group of files Remove duplicates and unused selectors/code Prefetch resources using rel="prefetch" OR have a hidden div containing the resource (img), as browser will only download a resource if it hits it in the HTML. Consider downloading files in parallel (for IE only) link Use CSS sprites Infrastructure Techniques Consider using a CDN Leverage browser caching (use .htaccess) Leverage proxy caching Tech Specific ---- HTML ---- HTML5 Lint Separate style and functionality from structure --- CSS --- Use LESS and @import other modularzied stylesheets ---- Javascript ---- Adhere to JS Optimization rules Parse/compress with UglifyJS --- Images --- Use compression Use CSS sprites

List all of the display values you can remember

-none; -inline; -inline-block; -block; -flex; -table; -table-cell;

How do you go about testing your Javascript?

....Need more experience

closure

a remains available in the inner function even when it's declared outside. This is an example of a ____ function adder(a){ return function(b){ return a + b; }; } var add5 = adder(5); alert( add5(10) );

What is progressive rendering?

a rendering mode in which the program gradually updates small parts of the entire image refining it from low quality to final result rather than focusing on one small part of the image at a time

Higher-order function

A function that either takes functions as arguments or returns a function (or both) is referred to as a "higher-order" function. ex. 1 function repeat (num, fn) { 2 var i, value; 3 4 for(i=1;i<=num;++i) 5 value = fn(i); 6 7 return value; 8} 9 10 repeat(3, function () { 11 console.log('Hello') 12 })

What doctype string is required for no-quirks mode?

<!DOCTYPE html>

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

A way to reduce HTTP requests by combining images together into one big image so you only have to request that one. Implementation: 1) When developing a site, I usually save the spriting toward the end when I know all the images that I plan to use. 2) Whether using photoshop or sprite generator, the idea is to cram all the images into one big image, usually separated by a pixel. 3) In the css, put the background image on a sprite class that you use for all your image elements. 4) To specify a specific image or icon, set another class with the background positions and sizes of the image. They can't do repeating graphics well.

Can you explain Fixed vs Absolute position

An element with position: fixed; is positioned relative to the viewport. An element with position: absolute; is positioned relative to the nearest positioned ancestor.

What is the difference between classes and IDs in CSS?

classes are marked with a period when identifying in css, and id's with a pound sign. classes are accounting for a group, and ID should only be identifying a single element.

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

Apply lets you invoke the function with arguments as an array; call requires the parameters be listed explicitly. function.apply(valueForThis, [arg1, arg2, ...]) function.call(valueForThis, arg1, arg2, ...)

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

Bootstrap,

What is the purpose of a code style linting tool?

Computer programs are written once and read/edited a million times. Clean and well organized code makes this easy and in some case possible. It is a nightmare for anyone to dive in a mess of ugly, unorganized abysmal code and then make a bug fix or add another feature. Good code needs minimal documentation. It is self explanatory. Some programmer write downright ugly code- non uniform, poorly indented illegible code. Even the programmer who are diligent enough to write 'good'/ readable code, have certain preferences in their writing style.

What tools would you use to test your code's functionality?

i've only used rSPEC, but not extensively.

Work on a project!

ideas. website showing off codepen examples. like making a tooltip from scratch.

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.

Explain AJAX in as much detail as possible

Make http requests (use of the XMLHttpRequest object to communicate with server-side scripts). It can send as well as receive information in a variety of formats, including JSON, XML, HTML, and even text files. AJAX's most appealing characteristic, however, is its "asynchronous" nature, which means it can do all of this without having to refresh the page. This lets you update portions of a page based upon user events.

.split() method

Method to split a string into an array. split being used to split a string at every s character: var array = string.split('s');

Number, String, Boolean, Null, Object, undefined

Name the 5 types in JavaScript

Hex, actual color 'red', rgb

Name three ways to define a color in css?

geo location

if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position){ $("#data").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude); }); }

What are some ways you may improve your websites scrolling performance?

Scrolling doesn't immediately seem like something you'd think about from a performance perspective. After all, your content is styled and all your assets are loading or loaded, so why all of a sudden might we care about what happens when you scroll? The simple reason is that whenever you scroll the browser needs to draw your site or application to the screen. That means we have the opportunity to minimize the work the browser has to do to get everything drawn and, by extension, maximize the page performance. Having smooth scrolling is actually an often overlooked but crucial part of a user's experience when they use your application. When you get the scrolling performance right your application will feel silky smooth and enjoyable to use rather than a clunky and unnatural experience.

What is the box model and what are the properties associated?

Technically, height, width, padding and border are part of box model and margin is related to it. Note: Everything in a web page is a box where you can control size, position, background, etc. Each box/ content area is optionally surrounded by padding, border and margin. When you set height and width of an element, you set content height and width.

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

Technique of replacing a text element (usually a header tag) with an image for accessibility and SEO benefits. Ex: including a logo on a page but wanting h1 tag and text. #1: Display none span in header <h1 id="logo"> <span>CSS-Tricks</span> </h1> h1#logo { width: 250px; height: 25px; background-image: url(logo.gif); } h1#logo span { display: none; } #2: Text-indent out of sight <h1 id="logo"> CSS-Tricks </h1> h1#logo { width: 300px; height: 75px; background: url(test.png); text-indent: -9999px; } #3: Invisible Text <h3 class="leon"> <span>CSS-Tricks</span> </h3> h3.leon { width: 300px; height: 75px; background: url(test.png); } h3.leon span { display: block; width: 0; height: 0; overflow: hidden; } #4: Overflow text out of sight <h3 class="leahy"> CSS-Tricks </h3> / Height 0 to hide text...uses padding for image height/ h3.leahy { width: 300px; padding: 75px 0 0 0; height: 0; background: url(test.png); overflow: hidden; }

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

Ternary ?: is an operator that takes 3 arguments and defines a conditional expression. It is a one-lined shorthand for an if-then statement and is also called Ternary operator or Conditional operator.

How do you make a background image accessible?

The general idea is to use text and hide it off screen. A typical way is using the CSS property text-indent. Other techniques include positioning an element absolutely or a more sophisticated way which supports RTL (right-to-left ) uses the CSS property clip

What are some advantages/disadvantages to testing your code?

There's a steep learning curve. Many developers seem to expect that they can be efficient with test-first programming right from day one. Unfortunately it takes a lot of time to gain experience and program at the same speed as before. You can't get around it. To be more specific, it's very easy to get wrong. You can very easily (with very good intentions) end up writing a whole bunch of tests which are either difficult to maintain or testing the wrong stuff. It's difficult to give examples here - these kind of issues simply take experience to solve. You need to have a good feel of separating concerns and designing for testability. My best advice here would be to do pair-programming with someone who knows TDD really well. You do more coding up front. Test-first means you can't skip tests (which is good) and means you'll end up writing more code up front. This means more time. Again, you can't get around it. You get rewarded with code that's easier to maintain, extend and generally less bugs, but it takes time. Can be a tough sell to managers. Software managers are generally only concerned with timelines. If you switch to test-first programming and you're suddenly taking 2 weeks to complete a feature instead of one, they're not gonna like it. This is definitely a battle worth fighting and many managers are enlightened enough to get it, but it can be a tough sell. Can be a tough sell to fellow developers. Since there's a steep learning curve not all developers like test-first programming. In fact, I would guess that most developers don't like it at first. You can do things like pair-programming to help them get up to speed, but it can be a tough sell. In the end, the advantages outweigh the disadvantages, but it doesn't help if you just ignore the disadvantages. Knowing what you're dealing with right from the start helps you to negotiate some, if not all, of the disadvantages.

Why would you use semantic elements?

Search Engine Optimization, accessibility, repurposing, light code. Many visually impaired people rely on browser speech and semantic elements to help interpret page content clearly. Search engine needs to understand page content to rank and semantic tag helps.

Explain the difference between synchronous, and asynchronous functions

Search Results Synchronous and asynchronous transmissions are two different methods of transmission synchronization. Synchronous transmissions are synchronized by an external clock, while asynchronous transmissions are synchronized by special signals along the transmission medium.

What's the difference between a variable that is: null, undefined or undeclared? How would you go about checking for any of these states?

Undeclared variables are those that are not declared at all. Undefined variables are declared variables that were not given a value. It is also a type. Null is an object that indicates lack of a value. Null and undefined are the same value but different types: null == undefined // true null === undefined // false

Facebook API

Send me all the current profile pictures

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

Unit Testing Unit testing is the practice of testing small pieces of code, typically individual functions, alone and isolated. If your test uses some external resource, like the network or a database, it's not a unit test. Unit tests should be fairly simple to write. A unit tests should essentially just give the function that's tested some inputs, and then check what the function outputs is correct. In practice this can vary, because if your code is poorly designed, writing unit tests can be difficult. Because of that, unit testing is the only testing method which also helps you write better code - Code that's hard to unit test usually has poor design. In a sense, unit testing is the backbone. You can use unit tests to help design your code and keep it as a safety net when doing changes, and the same methods you use for unit testing are also applicable to the other types of testing. All the other test types are also constructed from similar pieces as unit tests, they are just more complex and less precise. Unit tests are also great for preventing regressions - bugs that occur repeatedly. Many times there's been a particularly troublesome piece of code which just keeps breaking no matter how many times I fix it. By adding unit tests to check for those specific bugs, you can easily prevent situations like that. You can also use integration tests or functional tests for regression testing, but unit tests are much more useful because they are very specific, which makes it easy to pinpoint and then fix the problem. When should you use unit testing? Ideally all the time, by applying test-driven development. A good set of unit tests do not only prevent bugs, but also improve your code design, and make sure you can later refactor your code without everything completely breaking apart. Popular tools for unit testing include Mocha, Jasmine and Tape. Integration Testing As the name suggests, in integration testing the idea is to test how parts of the system work together - the integration of the parts. Integration tests are similar to unit tests, but there's one big difference: while unit tests are isolated from other components, integration tests are not. For example, a unit test for database access code would not talk to a real database, but an integration test would. Integration testing is mainly useful for situations where unit testing is not enough. Sometimes you need to have tests to verify that two separate systems - like a database and your app - work together correctly, and that calls for an integration test. As a result, when validating integration test results, you could for example validate a database related test by querying the database to check the database state is correct. Integration tests are often slower than unit tests because of the added complexity. They also might need some set up or configuration, such as the setting up of a test database. This makes writing and maintaining them harder than unit tests, so you should focus on unit tests unless you absolutely need an integration test. You should have fewer integration tests than unit tests. You should mainly use them if you need to test two separate systems together, or if a piece of code is too complex to unit test. But in the latter case, I would recommend fixing the code so it's easy to unit test instead. Integration tests can usually be written with the same tools as unit tests. Functional Testing Functional testing is also sometimes called E2E testing, or browser testing. They all refer to the same thing. Functional testing is defined as the testing of complete functionality of some application. In practice with web apps, this means using some tool to automate a browser, which is then used to click around on the pages to test the application. You might use a unit test to test an individual function and an integration test to check that two parts of the play nice. Functional tests are on a whole another level. While you can have hundreds of unit tests, you usually want to have only a small amount of functional tests. This is mainly because functional tests can be difficult to write and maintain due to their very high complexity. They also run very slowly, because they simulate real user interaction on a web page, so even page load times become a factor. Because of all this, you shouldn't try to make very fine grained functional tests. You don't want to test a single function, despite the name "functional" perhaps hinting at it. Instead, functional tests should be used for testing common user interactions. If you would manually test a certain flow of your app in a browser, such as registering an account, you could make that into a functional test. While in unit and integration tests you would validate the results in code, functional test results should be validated the same way as you would validate it if you were a user of the page. Going with the registration example, you could validate it by checking that the browser is redirected to a "thanks for registering page". You should use functional tests if you have some repeated tests you do manually in the browser, but be careful to not make them too fine-grained, as they can easily become a nightmare to maintain. I know, because I've seen it happen many times. The most common tool used for functional testing is Selenium. Running Selenium is usually done with Selenium WebDriver, or Protractor. Sometimes PhantomJS and CasperJS can be used as well, especially if you don't need to test in real browsers.

Explain how prototypal inheritance works

Since javascript doesn't have a concept of a class, we implement inheritance by creating objects which can act as a prototype for other objects. You can do so by adding the 'parent' or 'blueprint' object to the prototype property of your child object. Or create an 'object' function that takes in the parent (and overriding supplements) and returns the child with parent in prototype. One of the benefit of this is a performance boost since all child instances will point to the prototype properties and methods as references instead of making their own copies. src: http://adventuresincoding.com/2010/07/prototypal-inheritance-in-javascript-explained

undefined

What does this return? function foo2() { return { bar: "hello" }; }

Closures are expressions, usually functions, which can work with variables set within a certain context. Or, to try and make it easier, inner functions referring to local variables of its outer function create closures.

What is a closure?

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

When I enter a website's URL, in the transport layer, it will ask a local DNS what is the IP of the provided URL. We know the IP of the local DNS server by the DHCP protocol, when a node connects to internet and gets an IP address. After that, a browser will try to establish a TCP connection with a server having the retrieved IP by 3-way handshake. When it establish a TCP connection, the browser will form an HTTP request containing an HTTP header and body. After the HTTP request is sent and the server responds with an HTTP response, the browser will parse the HTTP response header and body, and will render the website. If the document contains additional assets, the browser will create HTTP requests for the assets and send them like above. ---- A client requests a webpage from a server. The server calculates the response The server sends the response to the client.

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

When the parser encounters the 'function' keyword in the global scope or inside a function, it treats it as a function declaration (statement), and not as a function expression, by default. You can fix it by wrapping function in parenthesis so parser knows to parse it as a function expression instead of function declaration.

Say Done.

When you are explaining something, say what you know and then say done. don't ramble.

lazy loading

___ _____ is a design pattern commonly used in computer programming to defer initialization of an object until the point at which it is needed.

undefined

___ means that the value of the variable is not defined.

specificity

____ is a process of determining which css rule will be applied to an element. it actually determines which rules will take precedence.

JSONP

____ is a way to get data from another domain that bypasses CORS (Cross Origin Resource Sharing) rules

doctype

____ is an instruction to the browser to inform about the version of html document and how browser should render it.

reflow

____ is when the flow of elements on the page is changed. Example - if you change height on an element, all the elements under it has to move down in the page to accomodate a change in height.

CORS

_____ is a mechanism that allows restricted resources (e.g. fonts) on a web page to be requested from another domain outside the domain from which the resource originated.

Undeclared

_____ variables are those that do not exist in a program and are not declared

CORS

_____ ​is a standard for accessing web resources on different domains. It allows web scripts to interact more openly with content outside of the original domain, leading to better integration between web services

document

_____.onload is fired when DOM (DOM tree built from markup code within the document)is ready which can be prior to images and other external content is loaded.

exports

______ is the variable that lives on module.exports. It is what is exported when a file is required

Undefined

______ variables are those that are declared in the program but have not been given any value.

Math.max.apply

numbers = [324234, 3423, 4246456]; function bigNum(arr) { return Math.max.apply(Math, arr); } console.log(bigNum(numbers)); // returns 4246456

How do you vertically center an element of unknown height?

position: absolute; top: 50%; transform: translate(0, -50%)

... (spread operator)

var parts = ['shoulders', 'knees']; var lyrics = ['head', ...parts, 'and', 'toes']

hidden

visibility: ___ tag on an element is still displayed in the dom but it is not shown

arity

the ____ of a function or operation is the number of arguments or operands the function or operation accepts.

transform

the css ____ property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.

What does a Closure let you do?

** define private methods. determine scope?

X:only-child div p:only-child { color: red; }

Truthfully, you probably won't find yourself using the only-child pseudo class too often. Nonetheless, it's available, should you need it. It allows you to target elements which are the only child of its parent. For example, referencing the snippet above, only the paragraph that is the only child of the div will be colored, red.

What is a CSS transition?

* CSS3 transitions allows you to change property values smoothly (from one value to another), over a given duration. * div { transition-property: width; transition-duration: 2s; transition-timing-function: linear; transition-delay: 1s; }

What are some ways to increase page accessibility?

* Keyboard operability * Utilize semantic markup * controlling user's focus * set Names, Roles, States, and Value with semantic markup & aria roles * Hidden offscreen text can be used to preserve visual layout. * Text & background color contrast

Why should I use a try-catch statement?

**

Regular Expressions aka regex

- Used to find certain words or patterns inside of strings Find the word "the" in "The Dog chased the cat" use ---> /the/gi / = start of the regex the = pattern we want to match / = end of the regex g = global, causes pattern to return all matches in the string i = means ignore case sensitivity

Define what the h1 is: Define the {color: blue} is: Define color: Define "blue". Define the entire code. h1 { color: blue; }

- h1 is the selector - {color:blue;} is the declaration - color is a property -"blue" is the value -the entire code is a CSS rule

What is an event loop?

In computer science, the event loop, message dispatcher, message loop, message pump, or run loop is a programming construct that waits for and dispatches events or messages in a program.

closure

A ____ is an inner function that has access to the variables in the outer (enclosing) function's scope chain

Build web forms that submit data to a server using HTML

<form action="/url-where-you-want-to-submit-form-data"> <input type="text" placeholder="Enter text" </form>

in-line style

<h1 style="color: green"> *OVERRIDES ALL CSS DECLARATIONS*

Include a stylesheet on the page

<link rel="stylesheet" type="text/css" href="main.css"/>

box model

According to the __ ___ concept, every element on a page is a rectangular box and may have width, height, padding, borders, and margins.

What are the advantages/disadvantages of using CSS preprocessors? Describe what you like and dislike about the CSS preprocessors you have used.

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 concepts

Html elements

All html elements are essentially little rectangles.

What are data- attributes good for?

Assigning custom data to an element. Unobtrusive javascript.

span vs div

Div is a block element while span in an inline element

Difference between document load event and document ready event?

Document ready: executes when HTML-Document is loaded and DOM is ready Document load: executes when complete page is fully loaded, including all frames, objects and images

yes

Does padding-left or padding-right or margin-left or margin-right has effect on inline element?

no

Does padding-top or padding-bottom has effect on inline element?

no

Does style1.css have to be downloaded and parsed before style2.css can be fetched? <head> <link href="style1.css" rel="stylesheet"> <link href="style2.css" rel="stylesheet"> </head>

yes

Does this trigger an http request at page load? <img src="mypic.jpg" style="visibility: hidden" alt="My photo">

The translate() function can move the position of an element on the z-axis.

False

Pure functions

Functions containing no free variables are called pure functions. Can contain closures

What is graceful degradation?

Graceful degradation is a paradigm in web design where we first provide the experience for modern/advanced browsers, and then work on providing a more basic version for older, less-capable users.

What did you learn yesterday/this week?

I am mostly doing a lot of review, but I am also currently dabbling with polymer - a component library not unlike Bootstrap.

Explain the diff between mutable and immutable objects: What is an example of an immutable object in JS? What are the pros and cons of immutability? How can you acheive immutability in your own code?

In object-oriented and functional programming, an immutable object is an object whose state cannot be modified after it is created. This is in contrast to a mutable object, which can be modified after it is created.

Explain how "this" works in JS

In short: In its most common usage, this serves as an identity function, providing our neighborhoods a way of referring to themselves. We can't always rely on that behavior, however: Depending on how we get into a particular neighborhood, this might mean something else entirely. In fact, how we get into the neighborhood is itself exactly what this generally refers to. In detail: http://www.digital-web.com/articles/scope_in_javascript/ http://unschooled.org/2012/03/understanding-javascript-this/

What's a hashtable?

It's a data structure that can map keys to values. It uses a hash function to compute an index (key?) into an array of buckets or slots, from which the correct value can be found. In Javascript, all objects are hashes.

Do properties padding-top and padding-bottom have effect on inline elements?

No

What are the three rendering modes specified in the DOM Spec?

No-quirks mode (a.k.a. standards mode), quirks mode and limited-quirks mode (a.k.a. almost standards mode).

Math.random

Returns number 0 -1

Array.prototype.slice.call(arguments, 0)

Returns the arguments in an array

Describe z-index and how stacking context is formed.

The z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is physically closer to you. z-index only effects elements that have a position value other than static (the default). Elements can overlap for a variety of reasons, for instance relative positioning has nudged it over something else. Negative margin has pulled the element over another. Absolutely positioned elements overlap each other. All sorts of reasons.

How do you make an image accessible?

Use the "alt" attribute. All browsers support the "alt" attribute and all browsers display the "alt" value when the image doesn't display.

objects

attributes: properties functions: methods

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

block, flex, grid, inline, table, inherit, none, inline-grid, inline-block, inline-flex, inline-table, list-item, table-cell, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-row-group

The CSS ___ ____ is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.

box model

How are content boxes and border boxes different?

box-sizing: border-box; * width will set the overall width value, considering all four parts of the box. box-sizing: content-box; * width will set the content (inner most element of the box).

arguments

contains all of the arguments passed to a function, regardless of how many are declared - 1 function args (a, b) { 2 return arguments 3 } 4 5 args(2,3) 6 //=> { '0': 2, '1': 3 } *BEST PRACTICE* 1 function plus () { 2 return arguments[0] + arguments[1] 3 } 4 5 plus(2,3) 6 //=> 5

free variable

function (y) { return x } variable not bound within the function Since the function function (y) { return x } doesn't have an argument named x, the variable x isn't bound in this function, which makes it "free."

With z index, An element with ______ stack order is always in front of an element with a lower stack order.

greater

.indexOf() method

method returns the position of the first occurrence of a specified value in a string. This method returns -1 if the value to search for never occurs. var str = "Hello world, welcome to the universe."; var n = str.indexOf("welcome"); // returns 13

new keyword

to use a constructor -- > use keyword new var myCar = new Car; Now an instance of Car

reduce() method

used to iterate through an array to condense it into one value - you pass in a callback whose arguments are an accumulator (in this case, previousVal) and the current value (currentVal).

.valueOf()

var str = "Hello World!"; var res = str.valueOf(); // Hello World! //returns primitive value of String Object

last character of a string

var.length - 1

What tools and techniques do you use debugging JavaScript code?

web console, browser console, browser debugger

nope, only functions

In JS do blocks have scope?

Math.ceil()

Round number up: 1.2 ---> 2.0

.shift()

removes the first element of an array

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

"Domain Sharding" is the practice of creating multiple sub-domains so that the number of resources downloaded in parallel is increased. Browsers limit the number of downloads that occur in parallel by the number of host names that are involved. So spreading assets equally across multiple sub-domains uses only a single hostname and enables a larger number of assets to be d/l'd in parallel. Because of the adoption of SPDY, domain sharding may hurt performance rather than help it. Exceptions Flash loading external data (XML, etc) JavaScript manipulating or communicating with a page inside an iframe JavaScript fetching a file via XMLHttpRequest Other technologies such as Java applets or Silverlight fetching external data Downsides with Mobile Network connections that breach the recommended limit come with a setup overhead - there's a DNS Lookup, a TCP 3-way handshake and a TCP slow start. This causes a higher latency with mobile users than desktop users. The setup overhead also uses more CPU, memory, and battery power - all important considerations with Mobile. Modern mobile browsers implement HTTP pipelining and don't observe HTTP 1.1 connection rules. SDPY as an exception SPDY supports concurrent requests (send all the request headers early) as well as request prioritization. Sharding across multiple domains diminishes these benefits. SPDY is supported by Chrome, Firefox, Opera, and IE 11. If your traffic is dominated by those browsers, you might want to skip domain sharding. On the other hand, IE 6&7 are still somewhat popular and only support 2 connections per hostname, so domain sharding is an even bigger win in those browsers. links: 1, 2, 3, 4

What is a closure?

* the combination of a function bundled together with references to its surrounding state * Created Everytime a function a created * Gives you access to an outer functions scope from an inner function

static

The positioning type of an element in the normal flow of a document is called?

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

usually for loops, sometimes while loops

How does keyboard operability affect accessibility & what are some guidelines to follow?

* Many assistive devices utilize keyboard interactions, making this experience vital to their users * All interactive and actionable elements (links, buttons, form controls, etc.) must be focusable and respond to keyboard commands. * Interactive and actionable elements must display a clear and visible focus indicator. Focus outline CSS style must not be suppressed. * Tab order must follow the natural reading order of the page (left to right, top to bottom). An explicit tab order should not be created. * Mouse only interactions, such as hovers, must be accompanied by an equivalent keyboard action. For example, a CSS :hover style declaration must also be accompanied by a :focus declaration. * User's focus should never be lost or reset to the top of the screen. Custom controls, especially those with DOM updates, should be deliberately managed in order to preserve the user's place of focus.

What is event delegation?

* a simple technique by which you add a single event handler to a parent element in order to avoid having to add event handlers to multiple child elements * allows you to utilize event bubbling

SASS whats good?

* allows for DRY css creation. * variables * partials which allow for well organized SCSS

What is CORS?

* cross-origin HTTP request * Restricted by browsers by default * CORS allows you to make cross origin calls

SASS whats bad?

* extend can obfuscate where the css definition is coming from. The extended class is not shown on the element.

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

* text-indent: 9999px; * CSS Clip position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); * position element offscreen position:absolute; left:-10000px;

Give an example of translate.

* translate method moves an element from its current position div { -ms-transform: translate(50px, 100px); /* IE 9 */ -webkit-transform: translate(50px, 100px); /* Safari */ transform: translate(50px, 100px); }

Dom Process

- Select an element - attach event listener "Listen for a click on this <button>" "Listen for a hover event on the <h1>"

map() method

- iterate through every element in an array - creating a new array with values that have been modified by the callback function example: var timesFour = oldArray.map(function(val){ return val * 4; });

Convert arguments into a real array

- var args = Array.prototype.slice.call(arguments); - var args = Array.from(arguments); - var args = [...arguments];

What are some techniques for clearing floats?

1. If you always know what the succeeding element will be, use "clear:both". 2. The empty div method. Use an empty div (not the most semantic), but has not default browser styling and does not have a special function. ex: <div style="clear:both"></div> 3. The Overflow Method. The Overflow method relies on setting the overflow CSS property on a parent element. If this property is set to auto or hidden on the parent element, the parent will expand to contain the floats, effectively clearing it for succeeding elements. This method can be beautifully semantic as it may not require an additional elements. 4. The Clearfix method: Create a class in HTML called "clearfix" and have this in your CSS using the psuedo selector ":after" : .clearfix:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; }

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

1. function Person() {} Declares a function (but does not execute it). It will usually have some code between the curly brackets. 2. var person = Person() Declares a variable (person), invokes a function (Person) and sets the value of person to the return of the function. 3. var person = new Person() Creates a new instance of an object based on the Person function. So the variable (person) is now an Object, not just a string or a number.

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

1.Minimize assets, decrease the number of HTTP requests for files 2. G-zipping (or file compression) 3. Optimize your images 4. Resource prefetching ("Prefetching" is simply loading a file before it's needed. It's common on interactive sites for a user action to download of additional data, such as feeds or images. If it's possible to predict the next user action, then it may be possible to start the downloads before the user input is made. For example, when you look at a photo on Picasa Web Albums, we make a guess that you'll look at the next photo as well, and start downloading it as soon as possible. Sometimes we download a photo that the user won't actually look at, but that's worth it when we can make the rest of the photos show up faster.)

What are the key differences between a section element, an article element, and a div element? And when should you use either?

<section>, group of content inside is related to a single theme, and should appear as an entry in an outline of the page. It's a chunk of related content, like a subsection of a long article, a major part of the page (eg the news section on the homepage), or a page in a webapp's tabbed interface. A section normally has a heading (title) and maybe a footer too. <article>, represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content. <div>, on the other hand, does not convey any meaning, aside from any found in its class, lang and title attributes. NOTE: Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.

SASS what practices should be followed?

@mixins not includes file strucute organization (mixins all defined in one file or some other way of seperating out roles of files) namespace variables (Good: nav-button, nav-text, nav-header, nav-dropdown)(Bad: top-button, text4, upper-header, dropdown-thingy)

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

A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other. A block formatting context is created by one of the following: the root element or something that contains it. --- A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context. Block formatting contexts are important for the positioning (see float) and clearing (see clear) of floats. The rules for positioning and clearing of floats apply only to things within the same block formatting context. Floats do not affect the layout of things in other block formatting contexts, and clear only clears past floats in the same block formatting context.

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

A function within a function, a closure is an inner function that has access to the outer function's variables. The closure has three scope chains: it has access to its own scope (variables defined between its curly brackets), it has access to the outer function's variables, and it has access to the global variables. Properties - Closures have access to the outer function's variable even after the outer function returns. - Closures store references to the outer function's variables Uses: - call a function that generates another function or group of functions but hides all the state in private variables within the closure - closures for events and callbacks - enforce public/private methods

What is the difference between call stack and task queu

A job queue (sometimes batch queue), is a data structure maintained by job scheduler software containing jobs to run. A call stack is a stack data structure that stores information about the active subroutines of a computer program. This kind of stack is also known as an execution stack, control stack, run-time stack, or machine stack, and is often shortened to just "the stack".

Explain event delegation

A process of using event propagation to handle events at a higher level in the DOM. Allows us to put a single event listener to the parent element instead multiple on all the children. When the children is clicked, a click event is fired and bubbles up the DOM tree (event propagation/bubbling). The parent then simply checks the event target property to get the reference to the actual clicked node.

Explain how prototypal inheritance works

A prototype is an internal object from which other objects inherit properties. Its main purpose is to allow multiple instances of an object to share a common property. Thus, object properties which are defined using the prototype object are inherited by all instances which reference it. How this works becomes quite clear when you see it in action. Say you add a method to MyObject (that's the object, not the instance) called doSomething(). Would that cause new instances of MyObject to inherit the doSomething() method? No it would not. What that would do is create a static method that can be called without first instantiating the object (useful to know in itself!). Likewise, a function that is added to an instance would only apply to that particular instance. Only when the function is assigned to the MyObject.prototype is it inherited by all instances of that Object, including those we instantiated before the creation of the new function: MyObject.doSomething = function() { alert("I do as I am told."); } var anotherObject = new MyObject(); anotherObject.doSomething = function() { alert("I do the bare minimum required of me!"); } anotherObject.doSomething(); //calls the instance specific method MyObject.doSomething(); //calls the static Object method MyObject.prototype.doSomething = MyObject.doSomething; //apply the static method to all instances from here on in anotherObject.doSomething(); //still calls the instance method var yetAnotherObject = new MyObject(); yetAnotherObject.doSomething(); //inherited doSomething() from MyObject myObject.doSomething(); //pre-existing instances also inherit the new function

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

A single-page application (SPA) is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience similar to a desktop application. In a SPA, either all necessary code - HTML, JavaScript, and CSS - is retrieved with a single page load,[1] or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions. The page does not reload at any point in the process, nor does control transfer to another page, although the location hash can be used to provide the perception and navigability of separate logical pages in the application,[2] as can the HTML5 pushState() API. Interaction with the single page application often involves dynamic communication with the web server behind the scenes. Not sure how to make it SEO friendly manually, but if I'm remembering correctly, Backbone.js does?

Explain Ajax in as much detail as possible

AJAX relies on XMLHttpRequest, CSS, DOM, and other technologies. The main characteristic of AJAX is its "asynchronous" nature, which means it can send and receive data from the server without having to refresh the page. Yes, you heard me right...without having to refresh the page. So what is asynchronous? In a traditional web page, when a user sends a request (like clicking on a Submit button), the user waits until the page gets reloaded. During the normal wait period, which ranges from anywhere between a few seconds to "ages", the user would be presented with a blank browser screen to stare at. In asynchronous mode, the client and the server will work independently and also communicate independently, allowing the user to continue interaction with the web page, independent of what is happening on the server. And what about JavaScript? Now, here lieth the secret. JavaScript is used to make the asynchronous request to the server. Once the response is received from the server, JavaScript is used to modify the content of the page displayed to the user, to show that the user-initiated action was successful. And XML? The data that is sent asynchronously from the server to the client, is packaged in an XML format, so it can be easily processed by JavaScript. Though generally the data is sent to the client in XML format, it can also be sent in a lot of other formats (like simple text). There's nothing really new about AJAX. Normally, we make a request, and receive a page as the response. This is how the web works already — the only difference is that now we can make these requests from JavaScript

.unshift()

Add one or more elements to the beginning of an array

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

Add the lang attribute with the appropriate value on the elements that differ from the main page language (and add lang to the html).

what are the advantages and disadvantages of using Ajax?

Advantages Better interactivity This is pretty much the most striking benefit behind why several developers and webmasters are switching to AJAX for their websites. AJAX allows easier and quicker interaction between user and website as pages are not reloaded for content to be displayed. Easier navigation AJAX applications on websites can be built to allow easier navigation to users in comparison to using the traditional back and forward button on a browser. Compact With AJAX, several multi purpose applications and features can be handled using a single web page, avoiding the need for clutter with several web pages. For our use of AJAX on goedkope-zomervakantie.com, it took just a few lines of code! Backed by reputed brands Another assuring reason to use AJAX on your websites is the fact that several complex web applications are handled using AJAX, Google Maps is the most impressive and obvious example, other powerful, popular scripts such as the vBulletin forum software has also incorporated AJAX into their latest version. Disadvantages The back and refresh button are rendered useless With AJAX, as all functions are loaded on a dynamic page without the page being reloaded or more importantly a URL being changed (except for a hash symbol maybe), clicking the back or refresh button would take you to an entirely different web page or to the beginning of what your dynamic web page was processing. This is the main drawback behind AJAX but fortunately with good programming skills this issue can be fixed. It is built on javascript While javascript is secure and has been heavily used by websites for a long period of time, a percentage of website surfers prefer to turn javascript functionality off on their browser rendering the AJAX application useless, a work around to this con is present as well, where the developer will need to code a parallel non-javascript version of the dynamic web page to cater to these users.

X[href$=".jpg"] a[href$=".jpg"] { color: red; }

Again, we use a regular expressions symbol, $, to refer to the end of a string. In this case, we're searching for all anchors which link to an image -- or at least a url that ends with .jpg. Keep in mind that this certainly won't work for gifs and pngs.

explain prototypal inheritance?

All objects have an internal link to another object called prototype. These objects have their own prototype, as their prototypes have their own prototypes and so on, until it reaches null (which does not have a prototype). If you call an object and ask for a property, if that particular object does not have the property, it will then as it's object's prototype if it has the desired property, if not it will keep going up the prototype chain. If all objects and their prototypes do not have the property, it will return undefined.

What causes a DOM repaint or reflow?

Anything that changes input information used to construct the rendering tree can cause a repaint or a reflow, for example: - DOM manipulation (element addition, deletion, altering, or changing element order); - Contents changes, including text changes in form fields; - Calculation or altering of CSS properties; - Adding or removing style sheets; - Changing the "class" attribute; - Browser window manipulation (resizing, scrolling); - Pseudo-class activation (:hover).

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

Array.prototype.duplicator = function(){ return this.concat(this); } alert([1,2,3,4,5].duplicator()); -------- Array.prototype.duplicate = function() { var len = this.length; for (var i = 0; i < len; i++) { this[len + i] = this[i]; } return this; } Array.prototype.duplicate = function () { var array = this; return array.concat(array); };

What excites or interests you about coding?

As an artist I love creating and styling things, and I love working with technology and talking in technical terms, so it's a really cool thing being able to access both worlds in coding.

What is a good CSS specificity guideline to follow?

Ask yourself is this the least specific selector that can do the job here?

Accessing objects 2

Bracket Notation If the property of the object you are trying to access has a space in it, you will need to use bracket notation. var myObj = { "Space Name": "Kirk", "More Space": "Spock" }; myObj["Space Name"]; // Kirk myObj['More Space']; // Spock

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

CSS animations pros: They use GPU, so they are CPU-efficient. Don't consume JavaScript event loops. cons: Hard to handle, as CSS doesn't contain logics. Not supported in old browsers. JavaScript animations Opposite to CSS animations

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 ----- Priority is determined according to specificity. Which is to say the more you add, the higher your specificity, the crappier your code.

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

CSS resets aim to remove all built-in browser styling. Standard elements like H1-6, p, strong, em, et cetera end up looking exactly alike, having no decoration at all. You're then supposed to add all decoration yourself. Normalize CSS aims to make built-in browser styling consistent across browsers. Elements like H1-6 will appear bold, larger et cetera in a consistent way across browsers. You're then supposed to add only the difference in decoration your design needs.

concat() method

Can be used to merge the contents of two arrays into one. Concat takes an array as an argument and returns a new array with the elements of this array concatenated onto the end. var oldArray = [1,2,3]; var newArray = []; var concatMe = [4,5,6]; // Only change code below this line. newArray = oldArray.concat(concatMe); //[1, 2, 3, 4, 5, 6]

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

Degrading Gracefully means looking back whereas Enhancing Progressively means looking forward. Graceful Degradation is the practice of building your web functionality so that it provides a certain level of user experience in more modern browsers, but it will also degrade gracefully to a lower level of user in experience in older browsers. USE CASE: Sites targeted at older versions of IE, used by big companies that are locked in to older tech. Progressive Enhancement is similar, but it does things the other way round. You start by establishing a basic level of user experience that all browsers will be able to provide when rendering your web site, but you also build in more advanced functionality that will automatically be available to browsers that can use it. USE CASE: Sites targeted to developers, who are constantly updating their browsers and trying the latest tech. In either case, you test for a feature that doesn't have complete support across all browsers/versions, and then apply it or an alternative. Graceful Degradation starts from the status quo of complexity and tries to fix for the lesser experience whereas Progressive Enhancement starts from a very basic, working example and allows for constant extension for future environments.

Accessing objects

Dot Notation var myObj = { prop1: "val1", prop2: "val2" }; var prop1val = myObj.prop1; // val1 var prop2val = myObj.prop2; // val2

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

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 ----------- All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add the padding, borders and margins. IE8 and earlier versions of IE, included padding and border in the width property. To fix this problem, add a to the HTML page.

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

Feature detection checks a feature for existence, e.g.: if (window.XMLHttpRequest) { new XMLHttpRequest(); } Feature inference checks for a feature just like feature detection, but uses another function because it assumes it will also exist, e.g.: if (document.getElementsByTagName) { element = document.getElementById(id); } Checking the UA string is an old practice and should not be used anymore. You keep changing the UA checks and never benefit from newly implemented features, e.g.: if (navigator.userAgent.indexOf("MSIE 7") > -1){ //do something }

Why is it, in general, a good idea to leave the global scop of a website as = is and never to 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 are data- attributes good for?

HTML5 is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, extra properties on DOM, or setUserData.

request response

HTTP is a ____/____ protocol, which means your computer sends a request for some file (e.g. "Get me the file 'home.html'"), and the web server sends back a response ("Here's the file", followed by the file itself)

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

How will users to be directed to their native language? First and foremost, it should be decided how various languages will be navigated to. Will the site default to one language and design a piece of UI that allows users to change it? Will the website redirect the browser based on each user's I.P. address? Will each language have its own URL (website.com/de) or domain (website.de)? Text In Images Won't Scale. This includes foreground images as well as inline text replacement (text-indent: -9999em;) in CSS. Placing text in an image is still a popular way to get good-looking, non-system fonts to display on any computer. However to translate image text, each string of text will need to have it's a separate image created for each language. Anything more than a handful of replacements like this can quickly get out of control. Using live text allows text to be easily translated since the characters appear in the code, something a translation service can interpret. Embedding customs fonts is now possible with @font-face and services like Typekit and FontDeck. Restrictive Word / Sentence length As Misha Kvakin notes, word length can vary from language to language so it's best to avoid designing where the amount of text would make or break a design. A phrase that's 15 characters German or Spanish might be 4 characters in Traditional Chinese or Arabic (which also brings up the point of RTL text vs. LTR!). Character counts come into play with things like headlines, labels, and buttons. They are less of an issue with free flowing text such as body text or comments. Be Mindful of How Colors Are Perceived Across Different Cultures Colors are perceived differently across languages and cultures. The design should use color appropriately. How are colors perceived in different languages and cultures? Completely remove text content from templates. Common static text strings like section titles and a site-wide footer must be taken out of the templates. If something needs to be translated, it should not be hard-coded into a template. This applies to things like ALT and TITLE attributes too. Formatting Dates Calendar dates are sometimes presented in different ways. Eg. "May 31, 2012" in the U.S. vs. "31 May 2012" in parts of Europe. This should be considered when deciding how to store and mark up values for a date.

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

I actually tab already, but if I was faced with this dilemma, I would switch to tabs - I believe uniformity is important in coding.

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

I would like to master everything I know now! As far as if it were something I haven't use, I think it might be React.js

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

I'm kind of blanking on recent big challenges, because I'm only in the beginning stages of new projects, but last tricky problem I can remember solving is when I was having trouble accessing some data from the OMDB API I was accessing in my rails app (Awfulix). I noticed that the content I was provided with was very limited, so I looked in the the JSON url I was provided with and realized that I could search for the movie using the search parameters in the query string, but that would only give me a few details (title, year, IMDBid, type, and poster). in order to get the additional properties, I had to add the specific movie title, so I used the title located in the first search to submit that information via an instance variable and concatenated it into the second query string to find and display the additional details!

How many resources will a browser download from a given domain at a time? What are the exceptions?

IE7 allowed only two concurrent connections per host. But most browsers today allow more than that. IE8 allows 6 concurrent connections, Chrome allows 6, and Firefox allows 8. So if your web page only has 6 images, for example, then it'd really be pointless to spread your images across multiple subdomains.

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

If the 5 style sheets were all application specific, I'd combine them into one file. If they were a combination of application specific style sheets and libraries (like Bootstrap), I'd only combine the application specific ones. I'd want Bootstrap (or whatever) separate to ensure it is easy to update in the future.

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

If you have display:inline;, the content of that element just becomes part of the paragraph, usually with other formatting applied to it, but essentially you have a continuous run of text in one side and out the other. If you have display:inline-block;, you get a block that sits in the middle of a paragraph. Within that block, you can set a specific height, you can have text wrapping onto several lines. The best analogy I can think of is in MS Word, where you have a picture that is set to "in line with text". It can be particularly useful when lining up several blocks side-by-side, where you don't want to use float on actual blocks.

What is IIFE?

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

null

In JS, ___ means 'no value'

escaping literal quotes in a strings

In JS, escape the quote using the backslash(\); - signals JS that it's not then end of the string

type

In JS, undefined is a _____

1, 4, 3, 2 The browser has an event loop which checks the event queue and processes pending events. For example, if an event happens in the background (e.g., a script onload event) while the browser is busy (e.g., processing an onclick), the event gets appended to the queue. When the onclick handler is complete, the queue is checked and the event is then handled (e.g., the onload script is executed). Similarly, setTimeout() also puts execution of its referenced function into the event queue if the browser is busy.

In what order will the numbers 1-4 be logged to the console when the code below is executed? Why? (function() { console.log(1); setTimeout(function(){console.log(2)}, 1000); setTimeout(function(){console.log(3)}, 0); console.log(4); })();

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

It is caused when content is loaded before styles are applied to the content. It happens when style tags are placed after other content, or applied asynchronously, for example, by scripts. To avoid FOUC, the styles should be placed in order that they can be loaded and applied in the same rendering process as HTML elements do. The easiest way is to place them in the head, and avoid applying styles by scripts at the first load.

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?

It is recommended because when you have the CSS declared before <body> starts, your styles has actually loaded already. So very quickly users see something appear on their screen (e.g. background colors). If not, users see blank screen for some time before the CSS reaches the user. Also, if you leave the the styles somewhere in the <body>, the browser has to re-render the page (new and old when loading) when the styles declared has been parsed.

What does "semantically correct" mean?

It means that you're calling something what it actually is. The classic example is that if something is a table, it should contain rows and columns of data. To use that for layout is semantically incorrect - you're saying "this is a table" when it's not.

When would you use document.write() ?

It seems that the only "approved" time to use document.write() is for third party code to be included (such as ads or Google Analytics). Since document.write() is always available (mostly) it is a good choice for third party vendors to use it to add their scripts. They don't know what environment you're using, if jQuery is or isn't available, or what your onload events are. And with document.write() they don't have to.

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

Long Pulling How it works Client application (browser) sends a request with event recipient id (here is the user, registered on the page) and current state (the displayed number of unread notification) to the server via HTTP. It creates an Apache process, which repeatedly checks DB until the state is changed in there. When the state eventually changed, the client gets the server response and sends next request to the server. Implementation Client side contains simple HTML with two input fields to show response data (updated number of unread notifications and time of the response event). JS module sends recipient user id and current state (unread notification number) to the server as XMLHttpRequest. To make possible cross-domain communication, we use JSONP and that means the handler must of the public scope. server sent How it works Client (browser) sends a request to the server via HTTP. It creates a process, which fetches latest state in the DB and responds back. Client gets server response and in 3 seconds sends next request to the server. Implementation HTML on client-size has again two input fields to show response data. JS module opens EventSource and passes though the connection recipient user id. web sockets How it works Client notifies web-socket server (EventMachine) of an event, giving ids of recipients. The server immediately notifies all the active clients (subscribed to that type of event). Clients process event when given recipient Id matches the client's one. Implementation Here we need an Event Machine supporting WebSockets. The easiest way, I see, is to deploy WaterSpout Server . You write your own controller (notification_controller.php) based on locke_controller.php. Client opens WebSocket connection and subscribes a handler for events on /notification/updates post. Now let's add a button in the HTML which sends on /notification/presents recipient user and action ids. That will cause broadcast message on the all open connections. So every active client receives the notification. The client event handler checks if the recipient user id matches client's logged in user id and if so increment unread notification number.

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

None ... but Promises are a software abstraction that makes working with asynchronous operations much more pleasant. In the most basic definition, your code will move from continuation-passing style: getTweetsFor("domenic", function (err, results) { // the rest of your code goes here. }); to one where your functions return a value, called a promise, which represents the eventual results of that operation. var promiseForTweets = getTweetsFor("domenic"); This is powerful since you can now treat these promises as first-class objects, passing them around, aggregating them, and so on, instead of inserting dummy callbacks that tie together other callbacks in order to do the same. I've talked about how cool I think promises are at length. This essay isn't about that. Instead, it's about a disturbing trend I am seeing in recent JavaScript libraries that have added promise support: they completely miss the point of promises. https://www.promisejs.org

floating point

Numbers in JavaScript are all treated with ___ ____ precision

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

One problem with content negotiation (and with serving different content/headers to different user-agents) is proxy servers. Considering the following; I ran into this back in the Netscape 4 days and have been shy of server side sniffing ever since. User A downloads your page with Firefox, and gets a XHTML/XML Content-Type. The user's ISP has a proxy server between the user and your site, so this page is now cached. User B, same ISP, requests your page using Internet Explorer. The request hits the proxy first, the proxy says "hey, I have that page, here it is; as application/xhtml+xml". User B is prompted to download the file (as IE will download anything sent as application/xhtml+xml. You can get around this particular issue by using the Vary Header, as described in this 456 Berea Street article. I also assume that proxy servers have gotten a bit smarter about auto detecting these things. Here's where the CF that is HTML/XHTML starts to creep in. When you use content negotiation to serve application/xhtml+xml to one set of user-agents, and text/html to another set of user agents, you're relying on all the proxies between your server and your users to be well behaved. Even if all the proxy servers in the world were smart enough to recognize the Vary header (they aren't) you still have to contend with the computer janitors of the world. There are a lot of smart, talented, and dedicated IT professionals in the world. There are more not so smart people who spend their days double clicking installer applications and thinking "The Internet" is that blue E in their menu. A mis-configured proxy could still improperly cache pages and headers, leaving you out of luck. ---------- The XHTML page must be well formed.If you forgot to closed a element and the browser will not to closed it and cause error. For "application/xhtml+xml", some old browsers no supports.

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

POST Create 201 (Created), 'Location' header with link to /customers/{id} containing new ID. 404 (Not Found), 409 (Conflict) if resource already exists.. GET Read 200 (OK), list of customers. Use pagination, sorting and filtering to navigate big lists. 200 (OK), single customer. 404 (Not Found), if ID not found or invalid. PUT Update/Replace 404 (Not Found), unless you want to update/replace every resource in the entire collection. 200 (OK) or 204 (No Content). 404 (Not Found), if ID not found or invalid. PATCH Update/Modify 404 (Not Found), unless you want to modify the collection itself. 200 (OK) or 204 (No Content). 404 (Not Found), if ID not found or invalid. DELETE Delete 404 (Not Found), unless you want to delete the whole collection—not often desirable. 200 (OK). 404 (Not Found), if ID not found or invalid.

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.

What is progressive enhancement?

Progressive enhancement is a paradigm in web design where we layer on web technologies by starting with base content and functionality, and then layer on/provide enhanced functionality to users with more advanced capabilities (ex. later browsers, higher bandwidth, etc.). For example, we start with basic markup (semantic markup), geared towards the lowest browsers to be supported. Then we layer on enhancements to the presentation and behavior of the page (ex. CSS, JS, Flash, SVG, etc.). Such enhancements should be made available externally, to avoid unnecessary/wasted bandwidth.

X[data-*="foo"] a[data-filetype="image"] { color: red; }

Refer back to number eight; how do we compensate for all of the various image types: png, jpeg,jpg, gif? Well, we could create multiple selectors. Or: <a href="path/to/image.jpg" data-filetype="image"> Image Link </a> Then, with that hook in place, we can use a standard attributes selector to target only those anchors.

X[title] a[title] { color: green; }

Referred to as an attributes selector, in our example above, this will only select the anchor tags that have a title attribute. Anchor tags which do not will not receive this particular styling. But, what if you need to be more specific? Well...

How is responsive design different from adaptive design?

Responsive sites and adaptive sites are the same in that they both change appearance based on the browser environment they are being viewed on (the most common thing: the browser's width). Responsive websites respond to the size of the browser at any given point. No matter what the browser width may be, the site adjusts its layout (and perhaps functionality) in a way that is optimized to the screen. Is the browser 300px wide or 30000px wide? It doesn't matter because the layout will respond accordingly. Well, at least if it's done correctly! Adaptive websites adapt to the width of the browser at a specific points. In other words, the website is only concerned about the browser being a specific width, at which point it adapts the layout. Another way to think about it is the difference between smooth and snap design. Responsive design is smooth because the layout fluidly adjusts regardless of what device it is viewed on. Adaptive design, on the other hand, snaps into place because the page is serving something different because of the browser or device it is viewed on. This animation illustrates the difference in behavior:

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

SEO = service engine optimization .. I usually use Bootstrap for UI, I don't know too much about SEO but I feel maybe friendly ID would be helpful in that area as well as adding keywords to your site that would make it readily searchable, in security, I try to cover as many validations with graceful fails I can think of (in plantastic, I implemented the majority of validations with error messages)

Explain the importance of standards and standards bodies.

Standards describe how a thing does and should work. It is extremely important especially in software, because the thing can be used by many people for different perposes. For example, there are several engines for JavaScript including V8, JavaScriptCore, Rhino, etc, and if there is no standard for the language, developers and users cannot feel ensured when doing something with it. Standards bodies, in the same manner, do a key role to form a standards and are essential in everywhere including both software and hardware.

Explain how "this" works

The "this" keyword acts as a reference to the context object, so you can access its properties through the normal dot notation. The value of "this" changes though, depending on what context you're executing in. Examples: 1) When there's no dot notation, 'this' is bound to the global object window 2) When you use call and apply, you get to decide what 'this' is bound to 3) When you use the keyword 'new' to create an instance, the keyword 'this' is bound to the instance not the function.

Array.from()

The Array.from() method creates a new Array instance from an array-like or iterable object.

box model

The CSS __ ___ is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.

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).

What is the difference between the DOMContentLoaded and the Load 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). A load event waits for stylesheets and images, etc. to load. The DOMContentLoaded event will fire as soon as the DOM hierarchy has been fully constructed, the load event will do it when all the images and sub-frames have finished loading.

float

The ___ CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container,

@import

The ___ rule allows you to include external style sheets in your document. It is a way of creating a style sheet within your document, and then importing additional rules into the document.

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

The difference between async and defer centers around when the script is executed. Each async script executes at the first opportunity after it is finished downloading and before the window's load event. This means it's possible (and likely) that async scripts are not executed in the order in which they occur in the page. Whereas the defer scripts, on the other hand, are guaranteed to be executed in the order they occur in the page. That execution starts after parsing is completely finished, but before the document's DOMContentLoaded event. ----- <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 does a doctype do?

The doctype declaration should be the very first thing in an HTML document, before the tag. The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in. The doctype declaration refers to a Document Type Definition (DTD)

Consider HTML5 as an open web platform. What are the building blocks of HTML5?

The main building blocks are centred on HTML 5, CSS3, Javascript and SVG. Where HTML is a language to define the mark-up of a document (titles, headers, body, footer, tables, input forms etc.), CSS is a language to define style (formatting, colours, shades and the like). Javascript is a programming/scripting language and SVG is a language for creating 2D scalable vector graphics and images.

Why would you use something like the load event? Does this event have disadvantages? Do you know any alternatives, and why would you use those?

The onload event occurs when an object has been loaded. onload is most often used within the <body> element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.). The onload event can be used to check the visitor's browser type and browser version, and load the proper version of the web page based on the information. The onload event can also be used to deal with cookies (see "More Examples" below)?????? no idea if this is correct

.replace()

The replace() method searches a string for a specified value, or a regular expression, and returns a new string where the specified values are replaced.

Explain the same-origin policy with regards to JavaScript

The same-origin policy restricts how a document or script loaded from one origin can interact with a resource from another origin. It is a critical security mechanism for isolating potentially malicious documents. https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

Describe the difference between a cookie, sessionStorage and localStorage.

They are all storage on the client side. cookies is small piece of key-value pair with a expire time. sessionStorage is on persistent and scope only to current windows. localStorage is persisitent and socop only to domain, by key-value pair or SQL database (Web SQL)

Explain the differences on the usage of foo between function foo) {} and var foo = function() {}

They are different (but produce similar results). Basically, the first is an actual named function. The second is a regular variable declaration with an anonymous function attached to it.

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

They are for accessibility. To make a website accessible, we should try to follow the usage of HTML elements, for example, h1 for headers and section for sections. Also it's good to take care of using visual contents, such as not forgetting to add an alt attribute to img tags.

.call and .apply

They execute a function in the context, or scope, of the first argument that you pass to them sayHello.call(person1); sayGoodbye.call(person2); .apply is used for arrays! multiple arguments var Dog1 = { name: 'Robin', legs: 4 } var Dog2 = { name: 'Joe', legs: 4 } function dontKill (action1, action2) { return this.name + " won't " + action1 + " you!!!He'll..." + action2 + " you!"; } console.log(dontKill.apply(Dog2, ["attack", "bite"]))

.X .error { color: red; }

This is a class selector. The difference between ids and classes is that, with the latter, you can target multiple elements. Use classes when you want your styling to apply to a group of elements. Alternatively, use ids to find a needle-in-a-haystack, and style only that specific element.

relative

This type of positioning is probably the most confusing and misused. What it really means is "relative to itself". If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will no effect on it's positioning at all, it will be exactly as it would be if you left it as position: static; But if you DO give it some other positioning attribute, say, top: 10px;, it will shift it's position 10 pixels DOWN from where it would NORMALLY be.

Time complexity

Time complexity is talked about in relation to an algorithm, a collection of one or more functions.

true

True or False regarding js hoisting Function declarations get hoisted to the top and are immediately available within the scope while function expressions are only declared and not hoisted

true

True or False: It's easier in JS to select an element by ID than by class.

Find the length of the string

Use .length method from JS - "Alan Smith".length; = //10

Change direction of html text?

Use bdo - bidirectional override element of html <p><bdo dir="rtl">This will go right to left</bdo></p>

DOM Event sytnax

Use method addEventListener

Highlight a text?

Use the mark element <p>Some part of this paragraph is <mark>highlighted</mark> by using mark element.</p>

Explain semantic markup

Using tags that have meaning. article over div. list vs p tags. Also extends to classes, ids, and styling Helps with accessibility (ie screen readers), SEO, easier to style, maintainability

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

Using the wrong language code, which affects screen readers and Braille devices. Search engines may have problems with pages containing content from multiple languages. Using the wrong character encoding may result in users unable to read the text on the page. Appropriate font size may be different per language. Words that translate to the same meaning can have different lengths.

Parameter

Variables that act as placeholders for the values that are to be input to a function when its called - Arguments Argument stored in a function - function goToCoffeeShop(drink) { alert ( drink + ' is on the way! '); }

How are visibility: hidden; and display: none; different

Visibility hidden is still in the DOM and its spot on the page does not go away. Display none removes the element from the DOM.

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

Well, all of the work I have done has been fullstack thus far, so I usually start with wireframing and user stories, and then I make note of technologies I know I need, and after take note of stretch goals and technologies I'd like to try to implement. and after I have all of my deliverables planned and stretch goals noted, I start on my projects

you write css in high level with some special syntax (declaring variable, nested syntax, mathematical operations, etc.) and that is compiled to css. Preprocessor helps you to speed up develop, maintain, ensure best practices and also confirms concatenation, compression, etc.

What are the reasons to use preprocessor?

3

What is the airty of this function: function foo(x, y, z) { return foo.length; }

div is a block element and span is inline element.

What is the difference between span and div?

"bar"

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

What's the difference between HTML and XHTML?

XHTML is a sub-set of XML and was an attempt at making markup rules more strict, such as requiring inline closing tags for br tag (ie "<br />"), but then HTML5 came along, and XML was mostly overtaken by JSON for web app data exchange, and XHTML has since also fallen out of vogue... XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to HTML XHTML is stricter than HTML XHTML is HTML defined as an XML application XHTML is supported by all major browsers

Does style2.css have to be downloaded and parsed before Paragraph 1 is rendered on the page? <head> <link href="style1.css" rel="stylesheet"> </head> <body> <p>Paragraph 1</p> <p>Paragraph 2</p> <link href="style2.css" rel="stylesheet"> </body>

Yes

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 repaint when it is used, which if you're looking for the best performance is undoubtly better.

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

advantages are it's convenient and faster, but not sure of disadvantages .. also not even sure of advantages

value

all simple privates (null, undefined, boolean, string, undefined, number ) are held by ______ (variabe holds that value) and assignments are by value copy x = 2 y = x (y gets a copy of 2)

.forEach() method

calls a provided function once for each element in an array, in order.

none

display: ____ removes the element from the normal layout flow and allow other elements to fill in

The ______ declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.

doctype

sort() method

easily sort through items alphabetically or numerically - alters the array in place and returns sorted array ex: var array = [1, 12, 21, 2]; array.sort(function(a, b) { return a - b; });var array = [1, 12, 21, 2]; array.sort(function(a, b) { return a - b; });

addEventListener

element.addEventListener(type, functionToCall); TWO ARGUMENTS! 1. Type of event 2. Code you want to run when event happens ex: var button = document.querySelector("button"); button.addEventListener("click", function() { console.log("SOMEONE CLICKED THE BUTTON!"); }); Second function is a callback function..waits until the first argument is initiated.

constructor function

gets capitalized name var Car = function() { this.wheels = 4; this.engines = 1; this.seats = 1; }; constructor = description of an object In a constructor the this variable refers to the new object being created by the constructor.

Have you ever used JavaScript templating? If so, what libraries have you used?

handlebars, jquery

Big O notation

helps you identify when an algorithm wouldn't scale well or work well with varying amounts of users. https://www.youtube.com/watch?v=KSNx22U4uWE - worst case scenario - speed of algorithms matter

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

http://hangar.runway7.net/javascript/difference-call-apply

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

http://metaduck.com/08-module-pattern-inheritance.html https://www.youtube.com/watch?v=doXpW5AD60Q

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

http://www.mightybytes.com/blog/make-retina-images-website/

Create a for loop that iterates up to 1-- while outputting "fizz" at multiples of 3, "buzz" at multiples of 5, and "fizzbuzz" at multiples of 3 and 5

if (theNumber is divisible by 3) and (theNumber is divisible by 5) then print "FizzBuzz" else if (theNumber is divisible by 3) then print "Fizz" else if (theNumber is divisible by 5) then print "Buzz" else /* theNumber is not divisible by 3 or 5 */ print theNumber end if ----- for (var i=1; i <= 20; i++) { if (i % 15 == 0) console.log("FizzBuzz"); else if (i % 3 == 0) console.log("Fizz"); else if (i % 5 == 0) console.log("Buzz"); else console.log(i); }

1st integer of splice

index of position of where you want to start adding/deleting

$.getJSON request

involves three parameters - ***the url, the string you're trying to read **the data, the object you must send to the server with your request **the callback function, which executes if your request is successful;

The ______ clears an area around an element (outside the border).

margin

How would you center an element horizontally?

margin: 0 auto;

filter() method

method is used to iterate through an array and filter out elements where a given condition is not true. Any array element for which the callback returns true will be kept and elements that return false will be filtered out. var oldArray = [1,2,3,4,5,6,7,8,9,10]; // Only change code below this line. var newArray = oldArray.filter(function(val) { return val < 6; }); // returns [1,2,3,4,5]

facotiral

n! If the integer is represented with the letter n, a factorial is the product of all positive integers less than or equal to n. 5! = 1 * 2 * 3 * 4 * 5 = 120

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

native object object in an ECMAScript implementation whose semantics are fully defined by this specification rather than by the host environment. NOTE Standard native objects are defined in this specification. Some native objects are built-in; others may be constructed during the course of execution of an ECMAScript program. host object object supplied by the host environment to complete the execution environment of ECMAScript. NOTE Any object that is not native is a host object. Both terms are defined in the ECMAScript specfication: native object object in an ECMAScript implementation whose semantics are fully defined by this specification rather than by the host environment. NOTE Standard native objects are defined in this specification. Some native objects are built-in; others may be constructed during the course of execution of an ECMAScript program. Source: http://es5.github.com/#x4.3.6 host object object supplied by the host environment to complete the execution environment of ECMAScript. NOTE Any object that is not native is a host object. Source: http://es5.github.com/#x4.3.8 A few examples: Native objects: Object (constructor), Date, Math, parseInt, eval, string methods like indexOf and replace, array methods, ... Host objects (assuming browser environment): window, document, location, history, XMLHttpRequest, setTimeout, getElementsByTagName, querySelectorAll, ...

Are you familiar with styling SVG?

no, but i do know.. SVG graphics are scalable and resolution-independent. They look great everywhere, from high-resolution "Retina" screens to printed media. SVGs have very good browser support. Fallbacks for non-supporting browsers are easy to implement, too, as we'll see later in the article. Because SVGs are basically text, they can be gzipped, making the files smaller that their bitmap counterparts (JPEG and PNG). SVGs are interactive and styleable with CSS and JavaScript. SVG comes with built-in graphics effects such as clipping and masking operations, background blend modes, and filters. This is basically the equivalent of having Photoshop photo-editing capabilities right in the browser. SVGs are accessible. In one sense, they have a very accessible DOM API, which makes them a perfect tool for infographics and data visualizations and which gives them an advantage over HTML5 Canvas because the content of the latter is not accessible. In another sense, you can inspect each and every element in an SVG using your favorite browser's developer tools, just like you can inspect HTML elements. And SVGs are accessible to screen readers if you make them so. We'll go over accessibility a little more in the last section of this article. Several tools are available for creating, editing and optimizing SVGs. And other tools make it easier to work with SVGs and save a lot of time in our workflows. We'll go over some of these tools next.

reference

non-simple primitives (object, array, function) are held by _______. Variable doesn't hold the value itself, it only holds the reference. assignment are by reference copy.y = [] z = y (z is a copy of the reference to the array) there are now 2 references to the array

"This string has \"double quotes\" in it"

output: "This string has "double quotes" in it"

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

promises make more than one function to be called easier. Particular features are that (a) functions can be added anywhere in the code, subject only to the promise being within scope, and (b) functions added after a Deferred/promise has been resolved/rejected will fire immediately. In short promises are perfect when you deal with multiple async calls in parallel.

What is the difference between standards mode and quirks mode?

quirks mode: classes are case-insensitive

scope

refers to visibility of variables Global - defined outside the function - means they can be seen everywhere in the JS code Local - defined within a function - only visible within the function

substr() method str.substr(start[, length])

returns the characters in a string beginning at the specified location through the specified number of characters. Location at which to begin extracting characters. If a negative number is given, it is treated as strLength + start where strLength is the length of the string (for example, if start is -3 it is treated as strLength - 3.)

Math.max()

returns the largest of zero or more numbers Math.max(10, 20); // 20 Math.max(-10, -20); // -10 Math.max(-10, 20); // 20

Admit what you don't know.

seriously

Every element in an HTML document can be either in front of or behind every other element in the document. This is known as the ________ _____.

stacking order

What do you think of AMD vs CommonJS

up vote 138 down vote CommonJS is more than that - it's a project to define a common API and ecosystem for JavaScript. One part of CommonJS is the Module specification. Node.js and RingoJS are server-side JavaScript runtimes, and yes, both of them implement modules based on the CommonJS Module spec. AMD (Asynchronous Module Definition) is another specification for modules. RequireJS is probably the most popular implementation of AMD. One major difference from CommonJS is that AMD specifies that modules are loaded asynchronously - that means that modules are only loaded as they are needed, as opposed to loading all modules up front. AMD is generally more used in client-side (in-browser) JavaScript development due to this, and CommonJS Modules are generally used server-side. However, you can use either module spec in either environment - for example, RequireJS offers directions for running in Node.js and browserify is a CommonJS Module implementation that can run in the browser.

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

up vote 1424 down vote accepted It's actually not too complicated... Say you're on domain example.com, and you want to make a request to domain example.net. To do so, you need to cross domain boundaries, a no-no in most of browserland. The one item that bypasses this limitation is <script> tags. When you use a script tag, the domain limitation is ignored, but under normal circumstances, you can't really do anything with the results, the script just gets evaluated. Enter JSONP. When you make your request to a server that is JSONP enabled, you pass a special parameter that tells the server a little bit about your page. That way, the server is able to nicely wrap up its response in a way that your page can handle. For example, say the server expects a parameter called "callback" to enable its JSONP capabilities. Then your request would look like: http://www.example.net/sample.aspx?callback=mycallback Without JSONP, this might return some basic JavaScript object, like so: { foo: 'bar' } However, with JSONP, when the server receives the "callback" parameter, it wraps up the result a little differently, returning something like this: mycallback({ foo: 'bar' }); As you can see, it will now invoke the method you specified. So, in your page, you define the callback function: mycallback = function(data){ alert(data.foo); }; And now, when the script is loaded, it'll be evaluated, and your function will be executed. Voila, cross-domain requests! It's also worth noting the one major issue with JSONP: you lose a lot of control of the request. For example, there is no "nice" way to get proper failure codes back. As a result, you end up using timers to monitor the request, etc, which is always a bit suspect. The proposition for JSONRequest is a great solution to allowing cross domain scripting, maintaining security, and allowing proper control of the request. These days (2015), CORS is the recommended approach vs. JSONRequest. JSONP is still useful for older browser support, but given the security implications, unless you have no choice CORS is the better choice.

<bdo>

what html tag changes the direction of text?

Are HTML IDs and classes case sensitive?

yes

Difference between null and undefined?

'undefined' means value of the variable is not defined. You cannot change the value of undefined. JS has a global variable of undefined and it's value is of course, undefined '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". 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

What is method-chaining?

("#foobar").fadeTo("slow", 0.7).slideUp("fast") Each function returns its affected object and subsequent functions can be called on those returns.

What is a Closure?

** It's like a block in Ruby

What steps would you take to diagnose a slow website?

*Use the network tab *sort by size to see what resources are taking the most to load. *see if any resources are being loaded but never used. *is there blocking js (move to footer so that it is executed after DOM is loaded) *have things been minimized, uglified, compressed? *are there failed requests/errors causing it to hang? *Can anything be loaded async instead *Comments can be loaded once the user scrolls to that section.

X:nth-last-of-type(n) ul:nth-last-of-type(3) { border: 1px solid black; }

And yes, to remain consistent, we can also use nth-last-of-type to begin at the end of the selectors list, and work our way back to target the desired element.

What are CSS sprites?

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

What is the primary Goal of Programming?

Decrease Complexity, Automate

Which one would you prefer among px, em % or pt and why?

Depending on what you're trying to do: px: gives fine grained control and maintains alignment because 1 px or multiple of 1 px is guaranteed to look sharp. px is not cascade, this means if parent font-size is 20px and child 16px. child would be 16px. em: maintains relative size. you can have responsive fonts. em is the width of the letter 'm' in the selected typeface. However, this concept is tricky. 1em is equal to the current font-size of the element or the browser default. if you sent font-size to 16px then 1em = 16px. The common practice is to set default body font-size to 62.5% (equal to 10px). em is cascade. %: sets font-size relative to the font size of the body. Hence, you have to set font-size of the body to a reasonable size. this is easy to use and does cascade. for example, if parent font-size is 20px and child font-size is 50%. child would be 10px. pt: (points) are traditionally used in print. 1pt = 1/72 inch and it is fixed-size unit.

What is the difference between display:none vs visibility:hidden?

Display:none removes space from the natural flow(or browser reflow) as if the element were never there. Visiblitiy:hidden removes the element, but keeps the space that the element takes up in the natural flow.

What is a doctype? and why do we need it?

Doctype is an instruction to the browser to inform the browser the version of the HTML document and how to render the document. If the doctype is not present in the DOM, the browser will resort to Quirks Mode.

What does DOM stand for?

Document Object Model. It provides a structured representation of the document and it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content

what is event delegation?

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

Can you explain event delegation?

Event delegation is when you allow a separate element(often a parent) to handle an event that happens on a given element. This is a way of taking advantage of event bubbling.

X[href^="http"] a[href^="http"] { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; }

Ever wonder how some websites are able to display a little icon next to the links which are external? I'm sure you've seen these before; they're nice reminders that the link will direct you to an entirely different website. This is a cinch with the carat symbol. It's most commonly used in regular expressions to designate the beginning of a string. If we want to target all anchor tags that have a href which begins with http, we could use a selector similar to the snippet shown above. Notice that we're not searching for http://; that's unnecessary, and doesn't account for the urls that begin with https://. Now, what if we wanted to instead style all anchors which link to, say, a photo? In those cases, let's search for the end of the string.

The pseudo class :checked will select inputs with type radio or checkbox, but not <option> elements.

False

What does float do?

Float pushes an element to either side of a page with text wrapped around it. You can create an entire page or a smaller area by using float. If size of a floated element changes, text around it will re-flow to accommodate the changes. You can have float: left; float: right; float: none; float: inherit; If you set, 'float: left;' for an image, it will move to the left until the margin, padding or border of another block-level element is reached. The normal flow will wrap around on the right side. Note: Floating elements are NOT taken out of the normal document flow. Absolute positioned items ARE. History: Taken from print design.

What is clear and how can you clear sides of a floating element?

Float's sister property is clear. An element that has the clear property set on it will not move up adjacent to the float like the float desires, but will move itself down past the float. Ex: If you clear a side of an element, floating elements will not be accepted on that side. With 'clear' set to 'left', an element will be moved below any floating element on the left side. Clear is used to stop wrap of an element around a floating element. clear has 5 values it takes: clear: both, left, right, none (default), inherit (not supported in IE)

What is Object Oriented Programming?

Focuses on objects, which have attributes and methods. Instead of just programming through actions. This provides the opportunity for: - Encapsulation (closures) - which will give you the ability to keep stuff private and give access to only what you want. - Inheritence - Lets the object inherit the data-type of the parent class. - Polymorphism - An object's datatype can be changed from what it originally was. Ex: circle, square, triangle "classes" could all inherit from shape. However all of these "classes" could morph based on what is needed from them, but still retain inherited properties.

How can u generate public key in html?

HTML has a keygen element that facilitates a generation of a key and submission via a form.

X[foo~="bar"] a[data-info~="external"] { color: red; } a[data-info~="image"] { border: 1px solid black; }

Here's a special one that'll impress your friends. Not too many people know about this trick. The tilda (~) symbol allows us to target an attribute which has a spaced-separated list of values. We could create a data-info attribute, which can receive a space-separated list of anything we need to make note of. In this case, we'll make note of external links and links to images -- just for the example. "<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a> With that markup in place, now we can target any tags that have either of those values, by using the ~ attributes selector trick.

What is "the great collapse" when dealing with floats?

If there was a parent container that was just contained floated elements, the parent container's height would collapse. In order to deal with collapsing parent elements, you need to clear the float AFTER the floated elements in the container but BEFORE the end of the parent container.

What are the differences between inline, block and inline-block?

Inline elements sit inline and do not have a forced line break after it. It allows elements to sit to the left and the right of it. You can set margin/padding on the left/right side but you cannot set width/height. Block elements have forced line breaks after it, you can set a height/width on them, as well as left and right padding/margin. Inline-block elements allow elements to be displayed on the right and left, respect top and bottom margins/padding, and respect height and width

What does box-sizing:border-box do?

It calculates the width, height, padding, and border on an element.

Do properties margin-top and margin-bottom have effect on inline elements?

No

Does style1.css have to be downloaded and parsed before style2.css can be fetched? <head> <link href="style1.css" rel="stylesheet"> <link href="style2.css" rel="stylesheet"> </head>

No

If you have a <p> element with font-size: 10rem, will the text be responsive when the user resizes / drags the browser window?

No

X:hover div:hover { background: #e3e3e3; }

Oh come on. You know this one. The official term for this is user action pseudo class. It sounds confusing, but it really isn't. Want to apply specific styling when a user hovers over an element? This will get the job done! Keep in mind that older version of Internet Explorer don't respond when the :hover pseudo class is applied to anything other than an anchor tag. You'll most often use this selector when applying, for example, a border-bottom to anchor tags, when hovered over.

#X #container { width: 960px; margin: auto; }

Prefixing the hash symbol to a selector allows us to target by id. This is easily the most common usage, however be cautious when using id selectors. id selectors are rigid and don't allow for reuse. If possible, first try to use a tag name, one of the new HTML5 elements, or even a pseudo-class.

Can you explain promises?

Promises allow you to easily manage asynchronous operations. Using a promise allows you to determine which code should be executed in the case of a success, or an error. This is similar to how 'try/catch' works in synchronous code execution.

What is the difference between Standard and Quirks mode?

Quirks mode and strict mode are the two 'modes' modern browsers can use to interpret your CSS. Quirks Mode in browsers allow you to render page for old browsers. This is for backward compatibility. Strict Mode is for the W3C standard. By using <!DOCTYPE html>, it already includes it. Or you don't need to worry about it.

What is semantic HTML?

Semantic HTML, or "semantically-correct HTML", is HTML where the tags used to structure content are selected and applied appropriately to the meaning of the content. For example, <b></b> (for bold), and <i></i> (for italic) should never be used, because they're to do with formatting, not with the meaning or structure of the content. Instead, use the replacements <strong></strong> and <em></em> (meaning emphasis), which by default will turn text bold and italic (but don't have to do so in all browsers), while adding meaning to the structure of the content.

X:after .clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; _height: 1%; }

The before and after pseudo classes kick butt. Every day, it seems, people are finding new and creative ways to use them effectively. They simply generate content around the selected element. Many were first introduced to these classes when they encountered the clear-fix hack. This hack uses the :after pseudo class to append a space after the element, and then clear it. It's an excellent trick to have in your tool bag, particularly in the cases when the overflow: hidden; method isn't possible. For another creative use of this, refer to my quick tip on creating shadows. According to the CSS3 Selectors specification, you should technically use the pseudo element syntax of two colons ::. However, to remain compatible, the user-agent will accept a single colon usage as well. In fact, at this point, it's smarter to use the single-colon version in your projects.

What is the use of data- attribute?

The data- attribute allows you to store extra information/ data in the DOM. You can write valid html with embedded private data. You can easily access data attribute by using javascript and hence a lot of libraries like knockout uses it. EX: <div id="myDiv" data-user="jsDude" data-list-size="5" data-maxage="180"></div>

X > Y div#container > ul { border: 1px solid black; }

The difference between the standard X Y and X > Y is that the latter will only select DIRECT children. For this reason, there are performance benefits in using the child combinator. In fact, it's recommended particularly when working with JavaScript-based CSS selector engines.

X:not(selector) div:not(#container) { color: blue; }

The negation pseudo class is particularly helpful. Let's say I want to select all divs, except for the one which has an id of container. The snippet above will handle that task perfectly. Or, if I wanted to select every single element (not advised) except for paragraph tags, we could do: *:not(p) { color: green; }

X Y li a { text-decoration: none; }

The next most comment selector is the descendant selector. When you need to be more specific with your selectors, you use these. For example, what if, rather than targeting all anchor tags, you only need to target the anchors which are within an unordered list? This is specifically when you'd use a descendant selector.

X:last-child ul > li:last-child { color: green; }

The opposite of first-child, last-child will target the last item of the element's parent.

X[href="foo"] a[href="http://net.tutsplus.com"] { color: #1f6053; /* nettuts green */ }

The snippet above will style all anchor tags which link to http://net.tutsplus.com; they'll receive our branded green color. All other anchor tags will remain unaffected. Note that we're wrapping the value in quotes. Remember to also do this when using a JavaScript CSS selector engine. When possible, always use CSS3 selectors over unofficial methods. This works well, though, it's a bit rigid. What if the link does indeed direct to Nettuts+, but, maybe, the path is nettuts.com rather than the full url? In those cases we can use a bit of the regular expressions syntax.

X[href*="nettuts"] a[href*="tuts"] { color: #1f6053; /* nettuts green */ }

The star designates that the proceeding value must appear somewhere in the attribute's value. That way, this covers nettuts.com, net.tutsplus.com, and even tutsplus.com. Keep in mind that this is a broad statement. What if the anchor tag linked to some non-Envato site with the string tuts in the url? When you need to be more specific, use ^ and $, to reference the beginning and end of a string, respectively.

* * { margin: 0; padding: 0; } #container * { border: 1px solid black; }

The star symbol will target every single element on the page. Many developers will use this trick to zero out the margins and padding. While this is certainly fine for quick tests, I'd advise you to never use this in production code. It adds too much weight on the browser, and is unnecessary. The * can also be used with child selectors.

X:nth-of-type(n) ul:nth-of-type(3) { border: 1px solid black; }

There will be times when, rather than selecting a child, you instead need to select according to the type of element. Imagine mark-up that contains five unordered lists. If you wanted to style only the third ul, and didn't have a unique id to hook into, you could use the nth-of-type(n) pseudo class. In the snippet above, only the third ul will have a border around it.

X + Y ul + p { color: red; }

This is referred to as an adjacent selector. It will select only the element that is immediately preceded by the former element. In this case, only the first paragraph after each ul will have red text.

X:checked input[type=radio]:checked { border: 1px solid black; }

This pseudo class will only target a user interface element that has been checked - like a radio button, or checkbox. It's as simple as that.

X~Y ul ~ p { color: red; }

This sibling combinator is similar to X + Y, however, it's less strict. While an adjacent selector (ul + p) will only select the first element that is immediately preceded by the former selector, this one is more generalized. It will select, referring to our example above, any p elements, as long as they follow a ul.

X:first-child ul li:first-child { border-top: none; }

This structural pseudo class allows us to target only the first child of the element's parent. You'll often use this to remove borders from the first and last list items. For example, let's say you have a list of rows, and each one has a border-top and a border-bottom. Well, with that arrangement, the first and last item in that set will look a bit odd. Many designers apply classes of first and last to compensate for this. Instead, you can use these pseudo classes.

X:only-of-type li:only-of-type { font-weight: bold; }

This structural pseudo class can be used in some clever ways. It will target elements that do not have any siblings within its parent container. As an example, let's target all uls, which have only a single list item. First, ask yourself how you would accomplish this task? You could do ul li, but, this would target all list items. The only solution is to use only-of-type.

X::pseudoElement p::first-line { font-weight: bold; font-size: 1.2em; }

We can use pseudo elements (designated by ::) to style fragments of an element, such as the first line, or the first letter. Keep in mind that these must be applied to block level elements in order to take effect.

X:visited X:link a:link { color: red; } a:visted { color: purple; }

We use the :link pseudo-class to target all anchors tags which have yet to be clicked on. Alternatively, we also have the :visited pseudo class, which, as you'd expected, allows us to apply specific styling to only the anchor tags on the page which have been clicked on, or visited.

X:nth-last-child(n) li:nth-last-child(2) { color: red; }

What if you had a huge list of items in a ul, and only needed to access, say, the third to the last item? Rather than doing li:nth-child(397), you could instead use the nth-last-child pseudo class. This technique works almost identically from number sixteen above, however, the difference is that it begins at the end of the collection, and works its way back.

X a { color: red; } ul { margin-left: 0; }

What if you want to target all elements on a page, according to their type, rather than an id or classname? Keep it simple, and use a type selector. If you need to target all unordered lists, use ul {}.

Does padding-left or padding-right or margin-left or margin-right have effect on inline element?

Yes

Does overflow: hidden create a new block formatting context?

Yes Overflow property deals with the content if content size exceeds the allocated size for the content. You can make extra content visible, hidden, scroll or auto (viewport default behavior).

What is the z-index?

Z-index is a stacking order of elements in the browser. Z-index only works on positioned elements. the higher the z-index, the closer to the front the element is, the lower the index number is, is closer to the background. Default z-index: auto;