RC Tech Questions Flashcards
What does a doctype do?
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 do you serve a page with content in multiple languages?
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.
What kind of things must you be wary of when designing or developing for multilingual sites?
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.
What are data- attributes good for?
Data attributes are good for storing extra data within the DOM without having to use non-standard attributes or other hacks.
Consider HTML5 as an open web platform. What are the building blocks of HTML5?
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.
Describe the difference between a cookie, sessionStorage and localStorage.
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.
Describe the difference between
,and.
<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>
Why is it generally a good idea to position CSS <link></link>s between <head></head> and JS
s just before </body>?
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.
What is progressive rendering?
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.
Why would you use a srcset attribute in an image tag?
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.
What is CSS selector specificity and how does it work?
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).
What’s the difference between ‘resetting’ and ‘normalizing’ CSS?
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.
Describe floats and how they work.
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.
Describe z-index and how stacking context is formed.
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.
Describe BFC (Block Formatting Context) and how it works.
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.
What are the various clearing techniques and which is appropriate for what context?
.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.
Explain CSS sprites, and how you would implement them on a page or site.
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 would you approach fixing browser-specific styling issues?
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 do you serve your pages for feature-constrained browsers?
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.
What are the different ways to visually hide content for screen readers?
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.
Have you used or implemented media queries or mobile specific layouts/CSS?
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.
What are some of the ‘gotchas’ for writing efficient CSS?
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.
What are the advantages/disadvantages of using CSS preprocessors?
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 would you implement a web design comp that uses non-standard fonts?
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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).
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.
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.
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.
Explain how JSONP works (and how it’s not really Ajax).
JSONP (JSON with Padding) bypasses cross-domain restrictions by using
tags to make requests to other domains with a callback parameter. The server wraps data in the specified callback function, which must exist in the client's global scope. It's not Ajax because it uses script tags rather than XMLHttpRequest, with potential security implications.
Have you ever used JavaScript templating?
Yes, with ES6 template literals for simple templating without third-party code. For libraries, JSX is preferred because it’s close to JavaScript with minimal new syntax to learn. Other options include Handlebars, Underscore templating, and Lodash.
Explain ‘hoisting’.
Hoisting is when variable declarations (var) and function declarations are processed before code execution, making them available throughout their scope. Only declarations are hoisted, not assignments. Function declarations are completely hoisted (declaration and body), while function expressions only have their variable declaration hoisted.
Describe event bubbling.
Event bubbling is when an event triggered on a DOM element bubbles up through its ancestors. After an element’s event handler executes, the event propagates to its parent, then that parent’s parent, and so on up to the document root. This is the mechanism behind event delegation.
What’s the difference between an ‘attribute’ and a ‘property’?
Attributes are defined in HTML markup and are always strings. Properties are defined on DOM elements, can be any data type, and reflect the current state. Properties update dynamically when changed, while accessing attributes returns the original HTML value even if the property has changed.
Why is extending built-in JavaScript objects not a good idea?
Extending native JavaScript objects by adding to their prototypes can cause conflicts when multiple libraries add the same method with different implementations. This breaks code that depends on consistent behavior. The only legitimate case is creating polyfills for standard methods in older browsers.
Difference between document load event and document DOMContentLoaded event?
DOMContentLoaded fires when the HTML document has been completely loaded and parsed, without waiting for stylesheets, images or subframes. The load event fires only after the DOM and all dependent resources (images, stylesheets) have finished loading completely.
What is the difference between == and ===?
== is the abstract equality operator that performs type conversion before comparison. === is the strict equality operator that compares without type conversion, requiring both value and type to match. It’s generally better to use === for more predictable results, except when checking if a value is null or undefined.
Explain the same-origin policy with regards to JavaScript.
The same-origin policy prevents JavaScript from making requests across domain boundaries (different protocol, hostname, or port). This security measure stops malicious scripts on one page from accessing sensitive data on another web page through its DOM, protecting users from cross-site scripting attacks.
What is functional programming?
Functional programming is a programming paradigm in JavaScript that produces programs by composing mathematical functions and avoids shared state and mutable data. It emphasizes pure functions, immutability, and declarative code patterns.
What is asynchronous programming, and why is it important in JavaScript?
Asynchronous programming allows multiple operations to happen simultaneously without blocking execution. When an asynchronous action starts, the program continues running. When the action finishes, a callback or promise resolves with the result. This is important in JavaScript for performance, especially in browsers to prevent UI freezing and on servers for handling multiple requests efficiently.
What is Node.js? Where can you use it?
Node.js is a JavaScript runtime environment built on Chrome’s V8 engine that allows JavaScript to run outside browsers. You can use it for server-side applications, REST APIs, real-time services, command-line tools, and desktop applications.
What is package.json? What is it used for?
package.json is a file that holds metadata about a Node.js project. It’s used to give information to NPM about the project and handle dependencies. Key fields include name, version, description, author, and dependencies. It helps manage project versioning, scripts, and package installation.
What is recursion and give an example using javascript?
Recursion is when a function calls itself. Example in JavaScript:
```javascript
function factorial(x) {
if (x < 0) return;
if (x === 0) return 1;
return x * factorial(x - 1);
}
factorial(3); // Returns 6
~~~
