Section 1
Preview this deck
What is specificity? How do u calculate specificity?
Front
| 5 | 0 | ||
| 4 | 0 | ||
| 3 | 0 | ||
| 2 | 0 | ||
| 1 | 0 |
Active users
0
All-time users
0
Favorites
0
Last updated
6 years ago
Date created
Mar 1, 2020
Cards (108)
Section 1
(50 cards)
What is specificity? How do u calculate specificity?
is a process of determining which css rule will be applied to an element. it actually determines which rules will take precedence unless calls !important on it. inline style usually wins then ID then class value (or pseudo-class or attribute selector), universal selector (*) has no specificity.
How can you load css resources conditionally?
@import allows you to load/ import stylesheet by using a path (uri) representing the location of the file. You can define one or more media by comma separation for which you want to load the stylesheet. If browser dont support the media stylesheet will not be loaded.
Which one would you prefer among px, em % or pt and why?
depends on purpose px: fine grained control & maintains aligment(1px look sharp) not cascade-> parent:20px child 16px, child stays 16px em: relative to preset size, responsive fonts, cascade %: sets relative to body, cascade, parent:20px -> child: 50% == 10px pt: for print 1pt = 1/72 inch and fixed unit size
How could you apply css rules specific to a media?
@media (max-width: 700px){...} means you want to apply rules to those media whose max-width is 700 px. this means every smaller device will have this rule.
What are the differences between visibility hidden and display none?
display: none removes element from the normal layout flow and allows other elements to fill in. doesn't exist in DOM visibility hidden: takes space in the normal flow but doesn't show it
What is doctype? Why do u need it?
Instruction to browser informing the HTML version & how to render it. <!DOCTYPE html> <meta charset="UTF-8">
What do you know about transition?
transition allows to add an effect while changing from one style to another. You can set the which property you want to transition, duration, how you want to transit (linear, ease, ease-in, ease-out, cubic-bezier) and delay when transition will start. you can transition more than one property by comma separation
What is semantic HTML?
semantically-correct HTML. b/i tags -> strong/em tags
What is DOM?
When webpage loaded, browser creates DOM of the page, like any other object, has properties and methods.
How many resources will a browser download from a given domain at a time?
IE8/chrome = 6 concurrent connections Firefox 8
How to serve a page content in multiple languages?
CMS (content management system) could be used to deliver content in different language with same structure and style.
What does float do?
float pushes an element to the sides of the page with text wrapped around it. You can create an entire page or a smaller area by using float.(left,right,none,inherit
In a HTML document, the pseudo class :root always refers to the <html> element. (true/false)
True
When should you use section, div or article?
<section>, group of content inside is related to a single theme, <article>, represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, <div>, on the other hand, does not convey any meaning, aside from any found in its class, lang and title attributes.
What are the differences between inline, block and inline-block?
inline: elements don't break flow, margin/padding pushes over horizontally, not vertically block: breaks flow and doesn't sit inline. like container inline-block: similar to inline, but take height and width
Difference between standard/ strict mode and quirks mode?
quirks mode in browser allows u to render page for as old browsers. This is for backward compatibility.
How do you optimize css selectors?
order selectors in terms of render speed it would be like id, class, tag, siblings, child, descendant, universal, attribute, pseudo.
Can you describe your workflow when you create a web page?
Requirements Gathering - (Need finding, participant observations, interviewing) - User stories/Features creation Prototyping - Storyboards, Paper prototypes, mockups Heuristic Evaluation: -Action, feedback MVP bare w/o design only functionality Design & touch up A/B Testing
How can you clear sides of a floating element?
if clear set to left, no floating elements could be accepted on that side.
Why css selectors mixed up with cases don't apply the styles?
because, html ID and classes are case sensitive.
How can u generate public key in html?
HTML has Keygen element that facilitates generation of key and submission via a form. <keygen name="name" challenge="challenge string" keytype="type" keyparams="pqg-params">
Does padding-top or padding-bottom has effect on inline element?
no
What is shadow DOM?
encapsulate part of a DOM. hide subtree. you can have same ID in different shadow DOM. Polymers uses it. This way your DOM becomes reusable. Could use javascript to inject different colors.
What are the differences between == and ===?
both check values == will not check types, === will check if both are same types
Does css properties are case sensitive?
no
How can you fix, "floated points don't add up to the height of a parent"?
clear both
What are the some pseudo classed you have used?
pseudo class tells you specific state of an element. allow to style element dynamically. The most popular one is :hover. Besides i have used :visited, :focus, :nth-child, nth-of-type, :link, etc.
Why you would like to use semantic tag
Search Engine Optimization, accessibility, repurposing, light code. Many visually impaired person rely on browser speech and semantic tag helps to interpret page content clearly. Search engine needs to understand page content to rank and semantic tag helps.
What are the different css filter you can use?
css filter allows u to render DOM element, image, or video. u can choose from: grayscale, blur, opacity, brightness, contrast.
What is the use of "data-*" attribute?
Allows you to store extra info within the DOM. Able to write valid html with embedded private data and access via javascript. <div id="myDiv" data-user="jsDude" data-list-size="5" data-maxage="180"></div>
Does padding-left or padding-right or margin-left or margin-right has effect on inline element?
yes
Why would you use sprites?
When you have multiple images/ icons, browser makes separate call to the server for each one of them. sprite is a technique to combine all/ some of them (usually similar one in terms of type of image. For example, you will put jpg in one sprite) in one image. To display the icon you set height, width and background position.
Can u apply css rule to a part of html document?
yes, use scoped <style type="text/css> </style> tag
What are the difference between svg and canvas?
Scalable vector graphics - high fidelity docs for view/print Canvas- for pixelated high volume data-> weather maps
Does the screen keyword apply to the device's physical screen or the browser's viewport?
Browsers viewport
What are the differences between null and undefined?
Null - empty/non-existant null is not an object, it is a primitive value 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
How can u highlight text in html?
<mark></mark>
Describe the box model
Content - The content of the box, where text and images appear Padding - Clears an area around the content. The padding is transparent Border - A border that goes around the padding and content Margin - Clears an area outside the border. The margin is transparent
What is the difference between span and div?
div is a block element and span is inline element.
Can you describe the difference between progressive enhancement and graceful degradation?
GD's purpose is for those users that are in historical browsers, eg IE by making sure that even the oldest non-supported browsers have a resemblance of functionality. PE's purpose is for better features for newer browsers that could handle those features. PE is nice, but GD is necessary.
What is the use of only?
to hide style sheets from older user agents.
The translate() function can move the position of an element on the z-axis.
false
Does margin-top or margin-bottom has effect on inline element?
no
How would you optimize a website's assets/resources?
Decrease download sizes & fewer http requests. 1) name the assets 2) use a CDN 3) Host assets on different domains but reduce DNS lookups 4) place assets on cookie-free domain & split assets 5) use CSS sprites 6) disable etags 7) asynch scripts
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).
The pseudo class :checked will select inputs with type radio or checkbox, but not <option> elements. (True/false)
False
How relative, absolute, fixed and static position differ?
relative: position to itself, if set 10px from top, i will move 10px down from where it would be originally absolute: exactly positioned element, set relative to element's parent, if no parent, then relative to itself fixed: position to viewport/browser window itself, doesn't change unless scroll. (Advertisement placement) static: element position based on normal flow of document.
How can u change direction of html text?
BDO ( bidirectional override of html element) <p><bdo dir="rtl">This text will go right to left.</bdo></p>
If you have a <p> element with font-size: 10rem, will the text be responsive when the user resizes / drags the browser window?
no
What are the reasons to use preprocessor?
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.
Section 2
(50 cards)
Favorite CSS3 features
Media queries, different response to different screen devices, animations, box model.
center inner div within outer div
study this {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .in{width:100px; height:100px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .out{width: 300px; height:300px; background-color:yellow; position relative; }
How does Node.js handle tile threads?
How could you make sure to run some javaScript when DOM is ready like $(document).ready?
1) but script in last tag of body. DOM would be ready by time browser hits script tag. 2) place inside DOMContentLoaded handler. fired when DOM completely loaded. 3) place inside ready state == "complete" 4) Search jquery.
Is there any difference between window and document?
Yes. JavaScript has a global object and everything runs under it. window is that global object that holds global variables, global functions, location, history everything is under it. Besides, setTimeout, ajax call (XMLHttpRequest), console or localStorage are part of window. document is also under window. document is a property of the window object. document represents the DOM
How culd i check whether an event is cancelable or not?
use event.cancelable to get true/false. you have to preventDefault to prevent the event
pseudo class
single colon p:hover::after{ content: "i am injected to p tag" }
Is attribute similar to property?
attributes are just like attribute in your html tag (XML style attribute) inside the starting tag. html attributes are exposed to the DOM via property. Hence, a property is created when DOM is parsed for each attribute in the html tag. If you change an attribute only the value of the property will change. However, the value of attribute will remain same.
Does document.onload and window.onload fire at the same time?
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. 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.
How can you get all the texts in a web page?
The easiest way to get all the text is to get the innerText of body tag. document.body.innerText; (or recursively do it
How come, I can't use forEach or similar array methods on a NodeList?
you can simply loop through a nodeList and do whatever you wanted to inside forEach or you can call method on array to convert nodelist to an array. After that you will have access to all array.prototype methods
How could you prevent a click on an anchor from going to the link?
preventDefault() inside event handler
What is event bubble? How does event flows?
Capture: When you clicked, browser knows a click event occurred. (from lowest level) Target: When browser reach the lowest level of element. Bubbling: After firing click hander attached to "td", browser walks toward root. One level upward and check whether there is any click handler attached with table row ("tr" element). If there is any it will execute that. Then it goes to tbody, table, body, html, document, window. In this stage its moving upward and this is called event bubbling or bubbling phase
Describe the difference between <script async> and <script defer>.
Defer will be downloaded in order. async may not.
MVC
Model(business data/logic) View (UI) Controller( manage logic & user input )
What is functional programming?
avoids shared state/mutable data. Lambda calculus, Haskell, Ocaml
Prototype inheritance
Interface like function attachment
let vs const
const- after first assignment, cant edit/modify existing values(unless it is an object like an array and appending it) let - just var, able to change as much as possible
pseudo elements
allow extra markup without disturbing environment. p::after{ content: "injected to ptag" } p::before{ content: "injected before p tag" } the double colon "::"
implement isPalindrome(str)
function isPalindrome(str){ return (str == str.split('').reverse().join('')); }
How could you run event handler in the capturing phase not in bubble phase?
you could pass true/false into useCapture phase of third optional parameter in addEventlistern/removeEventListener
Study javascript arrow function
Discuss possible ways to write a function isInteger(x) that determines if x is an integer.
function isInteger(x) { return (x ^ 0) === x; }
Describe the difference between a cookie, sessionStorage and localStorage
local storage: storage w.o expiration date, cleared via JS, browser cache/locally stored data session storage: expires when browser is closed, not tab [local/session storage could only be read client side] cookie: stores data sending to server w/ subsequent requests. Expiration could be set from (usually)server or client. For server side reading.
Inline elements vs inline block elements
inline elements only accepts margin left/right & padding. inline block elements allows everything and affects surroundings. block -> same as inline, but will take more space than inline block model
How could you prevent multiple event handler to be fired for an event?
If event listeners are attached for the same type event(click/keydown) of an element for the same event type, you can call event.stopImmediatePropagation() in the first event handler. No other event handler will be executed.
Can you name two programming paradigms important for JavaScript app developers?
Procedural OOP Functional(prototypes) Programing(closures, first class functions, lambdas)
If you need to implement getElementByAttribute, how would you implement it?
First, get all the elements in the DOM. You can either get it by Tag Name '*' and then check whether they have the particular attribute. In this case, even if attribute is null that will be captured. If you need to check the value, you should be able to do it by passing one extra parameter and comparing it in the if block.
Nodejs first argument optional
error (unsuccessful request) uncaught exceptions, hard to catch in main process.
Can you remove an event handler from an element?
Yes target.removeEventListener('click', handler)
anything to becareful when node.cloneNode()?
while cloning, makesure didn't duplicate ID
var vs let
let - recently ES6 "block scope" dies at end of block var - function scope dies at end of function -> hoisted to top
Example of DOM access/set
<script> document.getElementById("demo").innerHTML = "Hello World!"; </script> document.getElementByID -> method "".innerHTML -> property
What is reflow? What causes reflow? How could you reduce reflow?
reflow: change size/position of element. All elements after have to react. Expensive, performance hit. Avoidance: dont set multiple inline style, avoice dables, apply animation that are positioned fixed/absolute
Favorite HTML5 features
SVG/Canvas Audio/video
Whats a closure?
Functions with preserved data. A closure is the combination of a function and the lexical environment within which that function was declared.
What are different node types?
element,text,comment,document,doctype,docfragment
Function declaration vs expression
declaration has no variable, only function name. Could use functions evenbefore they were made like regular java. function funcD(){ }; expression has a variable created. cannot use function before created like C funcE = function(){};
What is repaint and when does this happen?
When change look without changing size/shape. (text color/background color, visibility hidden)
How could you stop further propagation of an event?
call event.stopPropagation(0;
Create a button that is destroyed by clicking on it but two new buttons are created in it's place.
Leverage event delegate. (to study)
Build triangle use pure css
set Height:0px; width:100px; background-color:red; Use border of different colors, top/left/bottom/right; -> turns into 4 triangles .tri{ height:0; width: 0; border-top:100px solid transparent; border-bottom:100px solid transparent; border-right: 100px solid yellow; }
CSS resetting vs normalizing
resetting- browser automatically adds paddings/margins-> but removes them markups normalizing- make sure html renders the same between all browsers, same
How would you destroy multiple list items with one click handler?
Leverage event bubbling. Have only one event handler attached to the parent element of one hundred list items. could attach to ul tag. after ul tag triggered, event will bubble and handler will be fired
Promises, and why to use it?
Asynch method promised to return a value. used to shortens up nested Callback (hell) via separate promise functions on success or failure. Will be expected to give a value. 3 states pending, fulfilled, rejected.
Advantages of having an external JS file
Separation of HTML Easier to Read Cached JS files can have speed up page loads
What is NaN? Its type? Test it?
Not a number. Number type. value !==value or Number.isNan()
Finding different DOM elements: Finding HTML elements by id Finding HTML elements by tag name Finding HTML elements by class name Finding HTML elements by CSS selectors Finding HTML elements by HTML object collections
var myElement = document.getElementById("intro"); var x = document.getElementsByTagName("p"); var x = document.getElementsByClassName("intro"); var x = document.querySelectorAll("p.intro");
Significance of 'use strict'
make debugging easier, no accidental global var's, eliminates this coercion, no duplicate parameter names, eval() safer, throw invalid usage of delete
node vs node element differences
Node, generic object of DOM hierarchy. element is a specific type of node.
Section 3
(8 cards)