Brainscape's Knowledge GenomeTM


Top Flashcards (Certified)
All Flashcards

React Front End Interview > RC Tech Questions > Flashcards

RC Tech Questions Flashcards

(61 cards)

Start Studying
1
Q

What does a doctype do?

A

A doctype specifies which version of the markup language the page is written in. With the doctype declared, the browser determines how to render content correctly according to the page’s source code.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

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

A

To serve a page with content in multiple languages, use lang (or xml:lang for XHTML) in tags. Additionally, metadata and Content-Language HTTP header can be used.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

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

A

When designing or developing for multilingual sites, there are a few things you should be wary of: 1) Allow users to change their language easily without hassle or confusion. 2) Content may be shorter or longer depending on the translation, so your design may break if it depends on character counts. 3) Be mindful of how colors are perceived culturally. 4) Format dates and currencies appropriately. 5) Some languages don’t follow English’s left-to-right, top-to-bottom reading direction.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What are data- attributes good for?

A

Data attributes are good for storing extra data within the DOM without having to use non-standard attributes or other hacks.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

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

A

The building blocks of HTML5 are: semantics (allowing you to describe precisely what your content is), connectivity (allowing communication with the server in new ways), offline and local storage, multimedia, performance and integration, device access, and styling.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Describe the difference between a cookie, sessionStorage and localStorage.

A

Cookies, sessionStorage and localStorage are all key-value storage mechanisms on the client side. They only store values as strings. Cookies can be initiated client or server side, while the others are client-only. Cookies’ expiry is manually set, localStorage persists forever, and sessionStorage expires when the tab closes.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Describe the difference between 

, 
 and 
.
A 
<script>
stops rendering, downloads and runs the script. <script async> doesn't stop rendering while downloading, but stops rendering to run when download completes. <script defer> doesn't stop rendering while downloading and runs the script only after rendering is complete.
</script>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Why is it generally a good idea to position CSS <link></link>s between <head></head> and JS 

s just before </body>?
A

It’s good to place CSS <link></link> in <head> because HTML and CSS will be parsed simultaneously when a page loads, allowing progressive rendering with proper visuals. JS 

 tags are better placed before the closing </body> tag because they block HTML/CSS parsing, so placing them at the end ensures content is displayed first.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What is progressive rendering?

A

Progressive rendering refers to techniques that improve webpage performance and perceived load time by rendering content for display as quickly as possible. Examples include lazy loading of images, prioritizing visible content, and async HTML fragments.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Why would you use a srcset attribute in an image tag?

A

You would use the srcset attribute to serve different images depending on device display width. This enhances user experience for high-resolution displays while improving performance for lower-end devices by serving appropriately sized images.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What is CSS selector specificity and how does it work?

A

Specificity is a weight applied to CSS declarations, determined by the number of each selector type. When multiple declarations target the same element, the one with higher specificity wins. Specificity hierarchy from highest to lowest: inline styles (a=1000), ID selectors (b=100), class/attribute/pseudo-class selectors (c=10), and type selectors (d=1).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What’s the difference between ‘resetting’ and ‘normalizing’ CSS?

A

Resetting CSS strips all default browser styling on elements, while normalizing preserves useful default styles and corrects bugs for browser dependencies. Resetting gives you more control for customized designs, while normalizing maintains consistency across browsers.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Describe floats and how they work.

A

Floats are a CSS positioning property that enable elements to remain part of the page flow. When elements are floated, they shift in the specified direction (left, right, none) and other content flows around them. Floated elements try to float to the uppermost available space of their containing element in that direction.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Describe z-index and how stacking context is formed.

A

Z-index controls the vertical stacking order of elements that overlap. It only affects positioned elements (not static). Elements with higher z-index appear on top. A stacking context is formed by elements with specific properties (like opacity<1, position:fixed), creating a hierarchy where z-index values only compete within their own context.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

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

A

Block Formatting Context is part of CSS rendering that determines how block boxes are laid out. BFCs are created by elements like floats, absolutely positioned elements, and elements with overflow:hidden. BFCs contain floats, prevent margin collapsing between elements, and establish how elements are positioned within the same parent.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

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

A

.clearfix is used when you have all floated elements within a containing element to make it take on the height of its content. Overflow:auto/hidden creates a new block formatting context but might clip children if they’re taller than the parent with a set height.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

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

A

CSS sprites combine multiple images into one larger image to reduce HTTP requests. To implement, each image gets a CSS class with background-image, background-position and background-size properties. Add the corresponding class to elements to display the correct part of the sprite.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

How would you approach fixing browser-specific styling issues?

A

To fix browser-specific styling issues: 1) Use a separate stylesheet that loads only for specific browsers, 2) Use libraries like Bootstrap that handle cross-browser compatibility, 3) Use autoprefixer for vendor prefixes, 4) Use Reset CSS or Normalize.css.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

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

A

For feature-constrained browsers, use progressive enhancement - build for a base level of user experience and add enhancements when browsers support them. You can also use graceful degradation, tools like caniuse.com to check feature support, or CSS feature queries with @support.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

What are the different ways to visually hide content for screen readers?

A

To hide content visually but keep it accessible to screen readers: 1) visibility:hidden (still takes up space), 2) width:0;height:0 (no space), 3) position:absolute;left:-99999px (positioned offscreen), 4) text-indent:-9999px (text only), 5) WAI-ARIA techniques.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

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

A

Yes, I’ve used media queries and mobile-specific CSS on personal and client projects. Responsive Web Design ensures users across all devices can access and interact with content easily.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

What are some of the ‘gotchas’ for writing efficient CSS?

A

For efficient CSS: 1) Understand browsers match selectors from right to left, so avoid tag and universal selectors as key selectors. 2) Use methodologies like BEM for efficient selectors. 3) Be aware of which CSS properties trigger reflow, repaint, and compositing.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

What are the advantages/disadvantages of using CSS preprocessors?

A

Advantages of CSS preprocessors: logic in CSS (variables, nesting, mixins, functions), automation for repetitive tasks, reusable code, reduced errors. Disadvantages: requires preprocessing tools with compilation time, potentially writing non-standard CSS that requires transpilation.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

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

A

To implement non-standard fonts in web design, use @font-face and define font-family for different font-weights, or use @import to bring in web fonts like Google Fonts.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Explain how a browser determines what elements match a CSS selector.
Browsers match selectors from right to left (key selector first). They filter elements by the rightmost selector, then traverse up through parent elements to verify the rest of the selector. Shorter selector chains improve performance as browsers do less work to determine matches.
26
Describe pseudo-elements and discuss what they are used for.
CSS pseudo-elements are keywords added to selectors that style specific parts of elements. They can be used for decoration (:first-line, :first-letter) or adding content without modifying markup (:before, :after). They're useful for styling specific parts of elements or targeting elements with selectors like :first-of-type.
27
Explain your understanding of the box model and how you would tell the browser to render your layout in different box models.
The CSS box model describes elements as rectangular boxes with content area and optional padding, border, and margin. It calculates element dimensions based on these properties. By default, the width and height only include content (content-box), but using box-sizing:border-box makes width and height include padding and borders as well.
28
What does * { box-sizing: border-box; } do? What are its advantages?
box-sizing:border-box changes width/height calculations to include padding and borders. The advantage is that it makes layout more intuitive since the visible dimensions match what you specify, making it easier to build grid-based designs where elements need specific widths including padding.
29
What's the difference between inline and inline-block?
The difference is that inline elements flow with content and don't accept width, height, or vertical margin/padding. Inline-block elements also flow with content but can have block properties like width, height, and vertical margin/padding. Block elements start on new lines and take full width by default.
30
What's the difference between relative, fixed, absolute and statically positioned elements?
Static is the default position where elements follow normal flow. Relative positions relative to itself without changing layout. Absolute removes from flow and positions relative to nearest positioned ancestor. Fixed removes from flow and positions relative to viewport, staying fixed during scrolling. Sticky is hybrid of relative/fixed.
31
Have you played around with the new CSS Flexbox or Grid specs?
Yes, I've used Flexbox with Bootstrap for client projects. Flexbox is great for one-dimensional layouts like centering elements. Grid is more intuitive for two-dimensional grid-based layouts but browser support was limited when this answer was written.
32
Can you explain the difference between coding a website to be responsive versus using a mobile-first strategy?
Responsive design adapts elements to different screen sizes through media queries. Mobile-first is also responsive but defines base styles for mobile devices first, then adds specific rules for larger screens. Mobile-first provides better performance on mobile (no unnecessary media query validation) and forces cleaner, more focused design.
33
What is event delegation?
Event delegation is a technique that adds event listeners to a parent element instead of child elements. The listener fires when events bubble up from children. This reduces memory use by having only one event listener instead of many, and it automatically works for dynamically added elements.
34
Explain how 'this' works in JavaScript
In JavaScript, 'this' value depends on call context: 1) With 'new', 'this' is a new object. 2) With call/apply/bind, 'this' is the passed object. 3) In methods, 'this' is the object owning the method. 4) In free functions, 'this' is the global object (or undefined in strict mode). 5) Arrow functions inherit 'this' from their creation context.
35
Explain how prototypal inheritance works
Prototypal inheritance works by JavaScript objects having a prototype property that references another object. When a property is accessed on an object but not found, the JavaScript engine looks at the object's prototype, and continues up the prototype chain until it finds the property or reaches the end of the chain.
36
What do you think of AMD vs CommonJS?
For module systems, CommonJS syntax is preferred over AMD because it's less verbose and closer to Node style modules, reducing context-switching when working between client and server code. AMD is more suitable for browsers with its asynchronous loading, but unnecessary if using bundled JavaScript files.
37
Explain why function foo(){} (); doesn't work as an IIFE and how to fix it
function foo(){} (); doesn't work as an IIFE because it's parsed as a function declaration followed by an empty function call attempt. To fix it, wrap the function in parentheses to make it an expression: (function foo(){}()); or (function foo(){})(); This makes it immediately invokable.
38
What's the difference between a variable that is null, undefined or undeclared?
Undeclared variables have never been created with var/let/const (reference error when used). Undefined variables exist but haven't been assigned a value or are functions that don't return a value. Null variables have been explicitly assigned the null value. Check with try/catch for undeclared, === undefined for undefined, and === null for null.
39
What is a closure, and how/why would you use one?
A closure is a function combined with its lexical environment, giving it access to variables from its containing scope even after that scope has finished executing. Closures are used for data privacy (emulating private methods), maintaining state between function calls, and partial application.
40
What's the difference between .forEach and .map() loops?
The main difference is that .map() returns a new array without mutating the original, while .forEach() just iterates without returning anything. Use map() when you need a transformed array as a result, use forEach() when you just need to execute a function for each element without needing a return value.
41
What's a typical use case for anonymous functions?
Anonymous functions are typically used as callbacks passed to other functions, especially when they're only used once in that context and don't need to be referenced elsewhere (like in event handlers, setTimeout, array methods like forEach). They keep code self-contained and more readable.
42
What's the difference between host objects and native objects?
Native objects are part of JavaScript language defined by ECMAScript (String, Math, Object, Function, etc.). Host objects are provided by the runtime environment like browser (window, document, XMLHttpRequest) or Node.js (process, http, fs). Host objects vary between environments while native objects are consistent.
43
Difference between function Person(){}, var person = Person(), and var person = new Person()?
function Person(){} is a function declaration, intended as a constructor with capitalized name. var person = Person() invokes Person as a regular function, assigning its return value (usually undefined for constructors) to person. var person = new Person() creates an instance of Person object that inherits from Person.prototype.
44
What's the difference between .call and .apply?
Both .call and .apply invoke functions with a specified 'this' value as first parameter. The difference is that .call takes comma-separated arguments while .apply takes an array of arguments. (C for call and comma-separated, A for apply and array arguments).
45
When would you use document.write()?
document.write() should generally be avoided because it replaces the entire page content if used after page load. It might be used in analytics code, for testing, or to include styles only when JavaScript is enabled, but modern alternatives exist for these cases.
46
Explain Ajax in as much detail as possible.
Ajax (Asynchronous JavaScript and XML) allows web applications to send/receive data asynchronously without page reloads. It separates data interchange from presentation, enabling dynamic content changes. Modern implementations often use JSON instead of XML. It's implemented using XMLHttpRequest or fetch API, enabling better interactivity and state management.
47
What are the advantages and disadvantages of using Ajax?
Advantages of Ajax: better interactivity with dynamic content changes, reduced server connections, preserved state without page reloads. Disadvantages: dynamic pages are harder to bookmark, doesn't work if JavaScript is disabled, some web crawlers won't see JavaScript-loaded content, accessibility challenges.
48
Explain how JSONP works (and how it's not really Ajax).
JSONP (JSON with Padding) bypasses cross-domain restrictions by using