Job Cram Cards (Jcc)

Front 1

How to fix a page when the columns are 75% and 25% and floated opposite sides but the side bar has still fallen?

Back 1

• Using box-sizing: border-box; on the appropriate elements is the most efficient fix.
• Using calc() on the widths to remove the 1rem padding is another way.
• Putting the padding on an added internal wrapper element instead of the columns is a fix that will work with very deep browser support.
• Adjusting the numbers to make the math work is another way. For instance making the widths of the columns 4% narrower and using 2% for the padding instead.
  

Front 2

responsive design

Back 2

• change pixel widths to percentages
• For images - If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size
  
• for background images - setting background size : contain
• Use different images for different devices with media queries for instance for a screen size of 400px up you can use @media only screen and (min-width: 400px)
• You can use the media query min-device-width, instead of min-width, which checks the device width, instead of the browser width. Then the image will not change when you resize the browser window
  
• then there is the html 5 picture element which acts like the video element with an inner tag that has srcset attribute example

<picture>

<source srcset="img" media="(max-width: 400px)"
srcset="img_smallflower.jpg" media="(max-width:>

</picture>

Front 3

images replacement

Back 3

border: 0;

clip: rect(0 0 0 0)

height: 1px;

margin: -1px;

overflow: hidden

padding: 0

position:absolute

width: 1px

Front 4

What is the box model

Back 4

The CSS box model is fundamental to understanding layout and sizing and such.

It's made up of:

• Width and height (or in the absence of that, default values and the content inside)
• Padding
• Border
  

Margin is not technically apart of the box model because it does not affect its size it affects interactions with the box

Front 5

What does a reset css file do?

Back 5

resets to a consisit baseline

Front 6

How to clear floats

Back 6

• use a clear-fix
• float parent as well
• use an over-flow property other than visible on the parent

Front 7

What is the difference between inline, inline-block and block

Back 7

• Block - A number of elements are set to block by the browser UA stylesheet. They are usually container elements, like ,div , section and ul . Also text "blocks" like and . Block level elements do not sit inline but break past them. By default (without setting a width) they take up as much horizontal space as they can.
  
• Inline-Block - An element set to inline-block is very similar to inline in that it will set inline with the natural flow of text (on the "baseline"). The difference is that you are able to set a width and height which will be respected.
  
• Inline - The default value for elements. Think of elements like span, em, or b and how wrapping text in those elements within a string of text doesn't break the flow of the text. An inline element will accept margin and padding, but the element still sits inline as you might expect. Margin and padding will only push other elements horizontally away, not vertically.
  

Front 8

what is SVG?

Back 8

it is an scalable vector graphic vecotr graphics dont loose image quality upon scaling

Front 9

non standard fonts

Back 9

use @font-face from google link it in

Front 10

[role=navigation] > ul a:not([href^=mailto]) {}

Back 10

selects all anchor links that are not email

Front 11

css selectos

Back 11

• class
• id

Front 12

css pseudo selectors

Back 12

the describe the state selectors are in

• :link
• :visted
• :active
• :hover
• :focus
• first-child
• last-child
• nth-child
• nth-last-child
• nth-of-type
• first-of-type
• last-of-type
• empty

Front 13

what does this selctor mean

A E

Back 13

Any E element that is a descendant of an A element (that is: a child, or a child of a child, etc.)

Front 14

A > E

Back 14

Any E element that is a child (i.e. direct descendant) of an A element

Front 15

E:first-child

Back 15

Any E element that is the first child of its parent

Front 16

B + E

Back 16

Any E element that is the next sibling of a B element (that is: the next child of the same parent)

Front 17

what does this code print

var a = b = 5;

Back 17

5

because b is in the global scope unless 'user strict'

Front 18

native method

Back 18

you could create a string method by using

string.prototype.methodName

Front 19

hoisting

Back 19

hoisted variables dont retain value just declared hoisted functions work

Front 20

this context

Back 20

see other notes

Front 21

What is === operator?

Back 21

=== is called as strict equality operator which returns true when the two operands are having the same value without any type conversion.

Front 22

Explain how can you submit a form using JavaScript?

Back 22

To submit a form using JavaScript use document.form[0].submit();document.form[0].submit();

Front 23

How can the style/class of an element be changed?

Back 23

1. document.getElementById(“myText”).style.fontSize = “20?;
   

document.getElementById(“myText”).className = “anyclass”;

Front 24

How can you convert the string of any base to integer in JavaScript?

Back 24

The parseInt() function is used to convert numbers between different bases. parseInt() takes the string to be converted as its first parameter, and the second parameter is the base of the given string.

Front 25

Explain the difference between “==” and “===”?

Back 25

“==” checks only for equality in value whereas “===” is a stricter equality test and returns false if either the value or the type of the two variables are different.

Front 26

What would be the result of 3+2+”7″?

Back 26

Since 3 and 2 are integers, they will be added numerically. And since 7 is a string, its concatenation will be done. So the result would be 57.

Front 27

What do mean by NULL in Javascript?

Back 27

The NULL value is used to represent no value or no object. It implies no object or null string, no valid boolean value, no number and no array object.

Front 28

What is an undefined value in JavaScript?

Back 28

Undefined value means theVariable used in the code doesn’t existVariable is not assigned to any valueProperty doesn’t exist

Front 29

What are all the types of Pop up boxes available in JavaScript?

Back 29

AlertConfirm andPrompt

Front 30

What is the difference between .call() and .apply()?

Back 30

The function .call() and .apply() are very similar in their usage except a little difference. .call() is used when the number of the function’s arguments are known to the programmer, as they have to be mentioned as arguments in the call statement. On the other hand, .apply() is used when the number is not known. The function .apply() expects the argument to be an array.

Front 31

Define event bubbling?

Back 31

JavaScript allows DOM elements to be nested inside each other. In such a case, if the handler of the child is clicked, the handler of parent will also work as if it were clicked too.

Front 32

You can use the prototype pattern, adding each method and property directly on the object’s prototype.

Back 32

function Employee () {}​Employee.prototype.firstName = "Abhijit";

Employee.prototype.lastName = "Patel";

Employee.prototype.startDate = new Date();

Employee.prototype.signedNDA = true;

Employee.prototype.fullName = function () {console.log (this.firstName + " " + this.lastName); };

​​var abhijit = new Employee () //​console.log(abhijit.fullName()); // Abhijit Patel​console.log(abhijit.signedNDA); // true

Front 33

You can also use the constructor pattern, a constructor function (Classes in other languages, but Functions in JavaScript).

Back 33

function Employee (name, profession) {​this.name = name;​this.profession = profession;

} // Employee () is the constructor function because we use the new keyword below to invoke it.​​​

var richard = new Employee (“Richard”, “Developer”) // richard is a new object we create from the Employee () constructor function.​​

console.log(richard.name); //richard​console.log(richard.profession); // Developer

Front 34

How do yousort a collection in backbone

Back 34

With Backbone.js, collections can be sorted by defining comparator on the collection object. By default, collections are not explicitly sorted. By defining a comparator, a collection is sorted whenever a model is added or the “sort()” method is invoked on a collection:

var Fruits = Backbone.Collection.extend({ comparator: function(a, b) { /* .. */ }})// Orvar Fruits = Backbone.Collection.extend({})var fruits = new Fruits()fruits.comparator = function(a, b) { /* .. */ }