30 Seconds of Interviews
A curated collection of common interview questions to help you prepare for your next interview.
This README is built using markdown-builder.
Foreword
Interviews are daunting and can make even the most seasoned expert forget things under pressure. Review and learn what questions are commonly encountered in interviews curated by the community that's answered them and go prepared for anything they'll ask. By bringing together experience and real-world examples, you can go from being nervous to being prepared for that next big opportunity.
View online
Contributing
30 seconds of interviews is a community effort, so feel free to contribute in any way you can. Every contribution helps!
Do you have an excellent idea or know some cool questions that aren't on the list? Read the contribution guidelines and submit a pull request.
Join our Gitter channel to help with the development of the project.
Related projects
Table of Contents
JavaScript
View contents
* [Create a function `batches` that returns the maximum number of whole batches that can be cooked from a recipe.](#create-a-function-batches-that-returns-the-maximum-number-of-whole-batches-that-can-be-cooked-from-a-recipe) * [What is Big O Notation?](#what-is-big-o-notation) * [Create a standalone function `bind` that is functionally equivalent to the method `Function.prototype.bind`.](#create-a-standalone-function-bind-that-is-functionally-equivalent-to-the-method-functionprototypebind) * [How can you avoid callback hells?](#how-can-you-avoid-callback-hells) * [What is the purpose of callback function as an argument of `setState`?](#what-is-the-purpose-of-callback-function-as-an-argument-of-setstate) * [Which is the preferred option between callback refs and findDOMNode()?](#which-is-the-preferred-option-between-callback-refs-and-finddomnode) * [What is a callback? Can you show an example using one?](#what-is-a-callback-can-you-show-an-example-using-one) * [What is the `children` prop?](#what-is-the-children-prop) * [How do you clone an object in JavaScript?](#how-do-you-clone-an-object-in-javascript) * [What is a closure? Can you give a useful example of one?](#what-is-a-closure-can-you-give-a-useful-example-of-one) * [How do you compare two objects in JavaScript?](#how-do-you-compare-two-objects-in-javascript) * [What is context?](#what-is-context) * [What is CORS?](#what-is-cors) * [What is the DOM?](#what-is-the-dom) * [What is the difference between the equality operators `==` and `===`?](#what-is-the-difference-between-the-equality-operators--and-) * [What is the difference between an element and a component in React?](#what-is-the-difference-between-an-element-and-a-component-in-react) * [What is event delegation and why is it useful? Can you show an example of how to use it?](#what-is-event-delegation-and-why-is-it-useful-can-you-show-an-example-of-how-to-use-it) * [What is event-driven programming?](#what-is-event-driven-programming) * [What is the difference between an expression and a statement in JavaScript?](#what-is-the-difference-between-an-expression-and-a-statement-in-javascript) * [What are truthy and falsy values in JavaScript?](#what-are-truthy-and-falsy-values-in-javascript) * [Generate an array, containing the Fibonacci sequence, up until the nth term.](#generate-an-array-containing-the-fibonacci-sequence-up-until-the-nth-term) * [What does `0.1 + 0.2 === 0.3` evaluate to?](#what-does-01--02--03-evaluate-to) * [What is the difference between the array methods `map()` and `forEach()`?](#what-is-the-difference-between-the-array-methods-map-and-foreach) * [What are fragments?](#what-are-fragments) * [What is functional programming?](#what-is-functional-programming) * [What will the console log in this example?](#what-will-the-console-log-in-this-example) * [How does hoisting work in JavaScript?](#how-does-hoisting-work-in-javascript) * [What is the difference between HTML and React event handling?](#what-is-the-difference-between-html-and-react-event-handling) * [What is the reason for wrapping the entire contents of a JavaScript source file in a function that is immediately invoked?](#what-is-the-reason-for-wrapping-the-entire-contents-of-a-javascript-source-file-in-a-function-that-is-immediately-invoked) * [Explain the differences between imperative and declarative programming.](#explain-the-differences-between-imperative-and-declarative-programming) * [What are inline conditional expressions?](#what-are-inline-conditional-expressions) * [What is a key? What are the benefits of using it in lists?](#what-is-a-key-what-are-the-benefits-of-using-it-in-lists) * [What is the difference between lexical scoping and dynamic scoping?](#what-is-the-difference-between-lexical-scoping-and-dynamic-scoping) * [Create a function that masks a string of characters with `#` except for the last four (4) characters.](#create-a-function-that-masks-a-string-of-characters-with--except-for-the-last-four-4-characters) * [What is memoization?](#what-is-memoization) * [How do you ensure methods have the correct `this` context in React component classes?](#how-do-you-ensure-methods-have-the-correct-this-context-in-react-component-classes) * [What is a MIME type and what is it used for?](#what-is-a-mime-type-and-what-is-it-used-for) * [Contrast mutable and immutable values, and mutating vs non-mutating methods.](#contrast-mutable-and-immutable-values-and-mutating-vs-non-mutating-methods) * [What is the only value not equal to itself in JavaScript?](#what-is-the-only-value-not-equal-to-itself-in-javascript) * [NodeJS often uses a callback pattern where if an error is encountered during execution, this error is passed as the first argument to the callback. What are the advantages of this pattern?](#nodejs-often-uses-a-callback-pattern-where-if-an-error-is-encountered-during-execution-this-error-is-passed-as-the-first-argument-to-the-callback-what-are-the-advantages-of-this-pattern) * [What is the event loop in Node.js?](#what-is-the-event-loop-in-nodejs) * [What is the difference between `null` and `undefined`?](#what-is-the-difference-between-null-and-undefined) * [Describe the different ways to create an object. When should certain ways be preferred over others?](#describe-the-different-ways-to-create-an-object-when-should-certain-ways-be-preferred-over-others) * [What is the difference between a parameter and an argument?](#what-is-the-difference-between-a-parameter-and-an-argument) * [Does JavaScript pass by value or by reference?](#does-javascript-pass-by-value-or-by-reference) * [How do you pass an argument to an event handler or callback?](#how-do-you-pass-an-argument-to-an-event-handler-or-callback) * [Create a function `pipe` that performs left-to-right function composition by returning a function that accepts one argument.](#create-a-function-pipe-that-performs-left-to-right-function-composition-by-returning-a-function-that-accepts-one-argument) * [What are portals in React?](#what-are-portals-in-react) * [What is the difference between the postfix `i++` and prefix `++i` increment operators?](#what-is-the-difference-between-the-postfix-i-and-prefix-i-increment-operators) * [In which states can a Promise be?](#in-which-states-can-a-promise-be) * [What are Promises?](#what-are-promises) * [How does prototypal inheritance differ from classical inheritance?](#how-does-prototypal-inheritance-differ-from-classical-inheritance) * [What is a pure function?](#what-is-a-pure-function) * [What is recursion and when is it useful?](#what-is-recursion-and-when-is-it-useful) * [What is the output of the following code?](#what-is-the-output-of-the-following-code) * [What are refs in React? When should they be used?](#what-are-refs-in-react-when-should-they-be-used) * [What does the following function return?](#what-does-the-following-function-return) * [Are semicolons required in JavaScript?](#are-semicolons-required-in-javascript) * [What is short-circuit evaluation in JavaScript?](#what-is-short-circuit-evaluation-in-javascript) * [What is a stateful component in React?](#what-is-a-stateful-component-in-react) * [What is a stateless component?](#what-is-a-stateless-component) * [Explain the difference between a static method and an instance method.](#explain-the-difference-between-a-static-method-and-an-instance-method) * [What is the difference between synchronous and asynchronous code in JavaScript?](#what-is-the-difference-between-synchronous-and-asynchronous-code-in-javascript) * [What is the `this` keyword and how does it work?](#what-is-the-this-keyword-and-how-does-it-work) * [What does the following code evaluate to?](#what-does-the-following-code-evaluate-to) * [What are JavaScript data types?](#what-are-javascript-data-types) * [What is the purpose of JavaScript UI libraries/frameworks like React, Vue, Angular, Hyperapp, etc?](#what-is-the-purpose-of-javascript-ui-librariesframeworks-like-react-vue-angular-hyperapp-etc) * [What does `'use strict'` do and what are some of the key benefits to using it?](#what-does-use-strict-do-and-what-are-some-of-the-key-benefits-to-using-it) * [What are the differences between `var`, `let`, `const` and no keyword statements?](#what-are-the-differences-between-var-let-const-and-no-keyword-statements) * [What is a virtual DOM and why is it used in libraries/frameworks?](#what-is-a-virtual-dom-and-why-is-it-used-in-librariesframeworks) * [What is a cross-site scripting attack (XSS) and how do you prevent it?](#what-is-a-cross-site-scripting-attack-xss-and-how-do-you-prevent-it)React
View contents
* [What is the purpose of callback function as an argument of `setState`?](#what-is-the-purpose-of-callback-function-as-an-argument-of-setstate) * [Which is the preferred option between callback refs and findDOMNode()?](#which-is-the-preferred-option-between-callback-refs-and-finddomnode) * [What is the `children` prop?](#what-is-the-children-prop) * [Why does React use `className` instead of `class` like in HTML?](#why-does-react-use-classname-instead-of-class-like-in-html) * [What is context?](#what-is-context) * [What is the difference between an element and a component in React?](#what-is-the-difference-between-an-element-and-a-component-in-react) * [What are error boundaries in React?](#what-are-error-boundaries-in-react) * [What are fragments?](#what-are-fragments) * [What are higher-order components?](#what-are-higher-order-components) * [What is the difference between HTML and React event handling?](#what-is-the-difference-between-html-and-react-event-handling) * [What are inline conditional expressions?](#what-are-inline-conditional-expressions) * [What is a key? What are the benefits of using it in lists?](#what-is-a-key-what-are-the-benefits-of-using-it-in-lists) * [What are the lifecycle methods in React?](#what-are-the-lifecycle-methods-in-react) * [What are the different phases of the component lifecycle in React?](#what-are-the-different-phases-of-the-component-lifecycle-in-react) * [What does lifting state up in React mean?](#what-does-lifting-state-up-in-react-mean) * [How do you ensure methods have the correct `this` context in React component classes?](#how-do-you-ensure-methods-have-the-correct-this-context-in-react-component-classes) * [How do you pass an argument to an event handler or callback?](#how-do-you-pass-an-argument-to-an-event-handler-or-callback) * [What are portals in React?](#what-are-portals-in-react) * [How to apply prop validation in React?](#how-to-apply-prop-validation-in-react) * [How do you write comments inside a JSX tree in React?](#how-do-you-write-comments-inside-a-jsx-tree-in-react) * [What are refs in React? When should they be used?](#what-are-refs-in-react-when-should-they-be-used) * [What is a stateful component in React?](#what-is-a-stateful-component-in-react) * [What is a stateless component?](#what-is-a-stateless-component)HTML
View contents
* [What is the purpose of the `alt` attribute on images?](#what-is-the-purpose-of-the-alt-attribute-on-images) * [What are `defer` and `async` attributes on a ` ``` #### Good to hear * Placing a `defer` script in the `` allows the browser to download the script while the page is still parsing, and is therefore a better option than placing the script before the end of the body. * If the scripts rely on each other, use `defer`. * If the script is independent, use `async`. * Use `defer` if the DOM must be ready and the contents are not placed within a `DOMContentLoaded` listener. ##### Additional Links * [async vs defer attributes](http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html)What is the difference between HTML and React event handling?
View answer
In HTML, the attribute name is in all lowercase and is given a string invoking a function defined somewhere: ```html ``` In React, the attribute name is camelCase and are passed the function reference inside curly braces: ```js ``` In HTML, `false` can be returned to prevent default behavior, whereas in React `preventDefault` has to be called explicitly. ```html ``` ```js function handleClick(e) { e.preventDefault() console.log("The link was clicked.") } ``` #### Good to hear * HTML uses lowercase, React uses camelCase. ##### Additional Links * [React docs on Handling Events](https://reactjs.org/docs/handling-events.html)What are some differences that XHTML has compared to HTML?
View answer
Some of the key differences are: * An XHTML element must have an XHTML `What is the DOM?
View answer
The DOM (Document Object Model) is a cross-platform API that treats HTML and XML documents as a tree structure consisting of nodes. These nodes (such as elements and text nodes) are objects that can be programmatically manipulated and any visible changes made to them are reflected live in the document. In a browser, this API is available to JavaScript where DOM nodes can be manipulated to change their styles, contents, placement in the document, or interacted with through event listeners. #### Good to hear * The DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API. * The DOM is constructed progressively in the browser as a page loads, which is why scripts are often placed at the bottom of a page, in the `` with a `defer` attribute, or inside a `DOMContentLoaded` event listener. Scripts that manipulate DOM nodes should be run after the DOM has been constructed to avoid errors. * `document.getElementById()` and `document.querySelector()` are common functions for selecting DOM nodes. * Setting the `innerHTML` property to a new value runs the string through the HTML parser, offering an easy way to append dynamic HTML content to a node. ##### Additional Links * [MDN docs for DOM](https://developer.mozilla.org/en-US/docs/DOM)Discuss the differences between an HTML specification and a browser’s implementation thereof.
View answer
HTML specifications such as `HTML5` define a set of rules that a document must adhere to in order to be “valid” according to that specification. In addition, a specification provides instructions on how a browser must interpret and render such a document. A browser is said to “support” a specification if it handles valid documents according to the rules of the specification. As of yet, no browser supports all aspects of the `HTML5` specification (although all of the major browser support most of it), and as a result, it is necessary for the developer to confirm whether the aspect they are making use of will be supported by all of the browsers on which they hope to display their content. This is why cross-browser support continues to be a headache for developers, despite the improved specificiations. #### Good to hear * `HTML5` defines some rules to follow for an invalid `HTML5` document (i.e., one that contains syntactical errors) * However, invalid documents may contain anything, so it's impossible for the specification to handle all possibilities comprehensively. * Thus, many decisions about how to handle malformed documents are left up to the browser. ##### Additional Links * [HTML 5.2 WWW Specifications](https://www.w3.org/TR/html52/)What is HTML5 Web Storage? Explain localStorage and sessionStorage.
View answer
With HTML5, web pages can store data locally within the user’s browser. The data is stored in name/value pairs, and a web page can only access data stored by itself. **Differences between `localStorage` and `sessionStorage` regarding lifetime:** * Data stored through `localStorage` is permanent: it does not expire and remains stored on the user’s computer until a web app deletes it or the user asks the browser to delete it. * `sessionStorage` has the same lifetime as the top-level window or browser tab in which the data got stored. When the tab is permanently closed, any data stored through `sessionStorage` is deleted. **Differences between `localStorage` and `sessionStorage` regarding storage scope:** Both forms of storage are scoped to the document origin so that documents with different origins will never share the stored objects. * `sessionStorage` is also scoped on a per-window basis. Two browser tabs with documents from the same origin have separate `sessionStorage` data. * Unlike in `localStorage`, the same scripts from the same origin can't access each other's `sessionStorage` when opened in different tabs. #### Good to hear * Earlier, this was done with cookies. * The storage limit is far larger (at least 5MB) than with cookies and its faster. * The data is never transferred to the server and can only be used if the client specifically asks for it. ##### Additional Links * [W3Schools HTML5 Webstorage](https://www.w3schools.com/html/html5_webstorage.asp)CSS
What is CSS BEM?
View answer
The BEM methodology is a naming convention for CSS classes in order to keep CSS more maintainable by defining namespaces to solve scoping issues. BEM stands for Block Element Modifier which is an explanation for its structure. A Block is a standalone component that is reusable across projects and acts as a "namespace" for sub components (Elements). Modifiers are used as flags when a Block or Element is in a certain state or is different in structure or style. ```css /* block component */ .block { } /* element */ .block__element { } /* modifier */ .block__element--modifier { } ``` Here is an example with the class names on markup: ```html ``` In this case, `navbar` is the Block, `navbar__link` is an Element that makes no sense outside of the `navbar` component, and `navbar__link--active` is a Modifier that indicates a different state for the `navbar__link` Element. Since Modifiers are verbose, many opt to use `is-*` flags instead as modifiers. ```html ``` These must be chained to the Element and never alone however, or there will be scope issues. ```css .navbar__link.is-active { } ``` #### Good to hear * Alternative solutions to scope issues like CSS-in-JS ##### Additional Links * [Writing clean and maintainable CSS](https://hackernoon.com/writing-clean-and-maintainable-css-using-bem-methodology-1dcbf810a664)What are the advantages of using CSS preprocessors?
View answer
CSS preprocessors add useful functionality that native CSS does not have, and generally make CSS neater and more maintainable by enabling DRY (Don't Repeat Yourself) principles. Their terse syntax for nested selectors cuts down on repeated code. They provide variables for consistent theming (however, CSS variables have largely replaced this functionality) and additional tools like color functions (`lighten`, `darken`, `transparentize`, etc), mixins, and loops that make CSS more like a real programming language and gives the developer more power to generate complex CSS. #### Good to hear * They allow us to write more maintainable and scalable CSS * Some disadvantages of using CSS preprocessors (setup, re-compilation time can be slow etc.) ##### Additional Links * [CSS Preprocessors](https://medium.com/@garyfagan/css-preprocessors-6f226fa16f27)Using flexbox, create a 3-column layout where each column takes up a col-{n} / 12 ratio of the container.
<div class="row">
<div class="col-2"></div>
<div class="col-7"></div>
<div class="col-3"></div>
</div>View answer
Set the `.row` parent to `display: flex;` and use the `flex` shorthand property to give the column classes a `flex-grow` value that corresponds to its ratio value. ```css .row { display: flex; } .col-2 { flex: 2; } .col-7 { flex: 7; } .col-3 { flex: 3; } ``` #### Good to hear ##### Additional Links * [MDN docs for basic concepts of flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) * [A complete guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)Can you name the four types of @media properties?
View answer
* `all`, which applies to all media type devices * `print`, which only applies to printers * `screen`, which only applies to screens (desktops, tablets, mobile etc.) * `speech`, which only applies to screenreaders #### Good to hear ##### Additional Links * [MDN docs for `@media` rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@media) * [MDN docs for using media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)Describe the layout of the CSS Box Model and briefly describe each component.
View answer
`Content`: The inner-most part of the box filled with content, such as text, an image, or video player. It has the dimensions `content-box width` and `content-box height`. `Padding`: The transparent area surrounding the content. It has dimensions `padding-box width` and `padding-box height`. `Border`: The area surrounding the padding (if any) and content. It has dimensions `border-box width` and `border-box height`. _Margin_: The transparent outer-most layer that surrounds the border. It separates the element from other elements in the DOM. It has dimensions `margin-box width` and `margin-box height`.  #### Good to hear * This is a very common question asked during front-end interviews and while it may seem easy, it is critical you know it well! * Shows a solid understanding of spacing and the DOM ##### Additional Links * [W3School's CSS Box Model Page](https://www.w3schools.com/Css/css_boxmodel.asp) * [Mozilla's Intro to the CSS Box Model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)What is the difference between em and rem units?
View answer
Both `em` and `rem` units are based on the `font-size` CSS property. The only difference is where they inherit their values from. * `em` units inherit their value from the `font-size` of the parent element * `rem` units inherit their value from the `font-size` of the root element (`html`) In most browsers, the `font-size` of the root element is set to `16px` by default. #### Good to hear * Benefits of using `em` and `rem` units ##### Additional Links * [CSS units for font-size: px | em | rem](https://medium.com/code-better/css-units-for-font-size-px-em-rem-79f7e592bb97)What are the advantages of using CSS sprites and how are they utilized?
View answer
CSS sprites combine multiple images into one image, limiting the number of HTTP requests a browser has to make, thus improving load times. Even under the new HTTP/2 protocol, this remains true. Under HTTP/1.1, at most one request is allowed per TCP connection. With HTTP/1.1, modern browsers open multiple parallel connections (between 2 to 8) but it is limited. With HTTP/2, all requests between the browser and the server are multiplexed on a single TCP connection. This means the cost of opening and closing multiple connections is mitigated, resulting in a better usage of the TCP connection and limits the impact of latency between the client and server. It could then become possible to load tens of images in parallel on the same TCP connection. However, according to [benchmark results](https://blog.octo.com/en/http2-arrives-but-sprite-sets-aint-no-dead/), although HTTP/2 offers 50% improvement over HTTP/1.1, in most cases the sprite set is still faster to load than individual images. To utilize a spritesheet in CSS, one would use certain properties, such as `background-image`, `background-position` and `background-size` to ultimately alter the `background` of an element. #### Good to hear * `background-image`, `background-position` and `background-size` can be used to utilize a spritesheet. ##### Additional Links * [CSS Sprites explained by CSS Tricks](https://css-tricks.com/css-sprites/)What is the difference between '+' and '~' sibling selectors?.
View answer
The General Sibling Selector `~` selects all elements that are siblings of a specified element. The following example selects all `` elements that are siblings of `
` elements:
```css
div ~ p {
background-color: blue;
}
```
The Adjacent Sibling Selector `+` selects all elements that are the adjacent siblings of a specified element.
The following example will select all `
` elements that are placed immediately after `
` elements:
```css
div + p {
background-color: red;
}
```
#### Good to hear
##### Additional Links
* [W3School's CSS Combinators Page](https://www.w3schools.com/css/css_combinators.asp)
* [Mozilla's Combinators and groups of selectors page](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors)
Githubissues is a development platform for aggregating issues.
Can you describe how CSS specificity works?
View answer
Assuming the browser has already determined the set of rules for an element, each rule is assigned a matrix of values, which correspond to the following from highest to lowest specificity: * Inline rules (binary - 1 or 0) * Number of id selectors * Number of class, pseudo-class and attribute selectors * Number of tags and pseudo-element selectors When two selectors are compared, the comparison is made on a per-column basis (e.g. an id selector will always be higher than any amount of class selectors, as ids have higher specificity than classes). In cases of equal specificity between multiple rules, the rules that comes last in the page's style sheet is deemed more specific and therefore applied to the element. #### Good to hear * Specificity matrix: [inline, id, class/pseudo-class/attribute, tag/pseudo-element] * In cases of equal specificity, last rule is applied ##### Additional Links * [CSS Specificity](https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/)What is a focus ring? What is the correct solution to handle them?
View answer
A focus ring is a visible outline given to focusable elements such as buttons and anchor tags. It varies depending on the vendor, but generally it appears as a blue outline around the element to indicate it is currently focused. In the past, many people specified `outline: 0;` on the element to remove the focus ring. However, this causes accessibility issues for keyboard users because the focus state may not be clear. When not specified though, it causes an unappealing blue ring to appear around an element. In recent times, frameworks like Bootstrap have opted to use a more appealing `box-shadow` outline to replace the default focus ring. However, this is still not ideal for mouse users. The best solution is an upcoming pseudo-selector `:focus-visible` which can be polyfilled today with JavaScript. It will only show a focus ring if the user is using a keyboard and leave it hidden for mouse users. This keeps both aesthetics for mouse use and accessibility for keyboard use. #### Good to hear ##### Additional Links * [:focus-visible](https://css-tricks.com/focus-visible-and-backwards-compatibility/)Accessibility
What is WCAG? What are the differences between A, AA, and AAA compliance?
View answer
WCAG stands for "Web Content Accessibility Guidelines". It is a standard describing how to make web content more accessible to people with disabilities They have 12-13 guidelines and for each one, there are testable success criteria, which are at three levels: A, AA, and AAA. The higher the level, the higher the impact on the design of the web content. The higher the level, the web content is essentially more accessible by more users. Depending on where you live/work, there may be regulations requiring websites to meet certain levels of compliance. For instance, in Ontario, Canada, beginning January 1, 2021 all public websites and web content posted after January 1, 2012 must meet AA compliance. #### Good to hear * A guideline for making web content more accessible * 3 different levels (A, AA, and AAA) of compliance for each guideline * Governments are starting to require web content to meet a certain level of compliance by law ##### Additional Links * [Web Content Accessibility Guidelines (WCAG) Overview](https://www.w3.org/WAI/standards-guidelines/wcag/) * [How to Meet WCAG](https://www.w3.org/WAI/WCAG21/quickref/)What is ARIA and when should you use it?
View answer
ARIA stands for "Accessible Rich Internet Applications", and is a technical specification created by the World Wide Web Consortium (W3C). Better known as WAI-ARIA, it provides additional HTML attributes in the development of web applications to offer people who use assistive technologies (AT) a more robust and interoperable experience with dynamic components. By providing the component's role, name, and state, AT users can better understand how to interact with the component. WAI-ARIA should only be used when an HTML element equivalent is not available or lacks full browser or AT support. WAI-ARIA's semantic markup coupled with JavaScript works to provide an understandable and interactive experience for people who use AT. An example using ARIA: ```
...
```
Credit: W3C's [ARIA 1.1 Combobox with Grid Popup Example](https://w3c.github.io/aria-practices/examples/combobox/aria1.1pattern/grid-combo.html)
#### Good to hear
* Accessible Rich Internet Applications
* Benefits people who use assistive technologies (AT)
* Provides role, name, and state
* Semantic HTML coupled with JavaScript
##### Additional Links
* [WAI-ARIA Overview](https://www.w3.org/WAI/standards-guidelines/aria/)
* [WAI-ARIA Spec](https://www.w3.org/TR/wai-aria/)
* [ARIA Serious? Eric Eggert presentation](https://youtu.be/4bH57rWPnYo)
What is the Accessibility Tree?
View answer
The Accessibility Tree is a structure produced by the browser's Accessibility APIs which provides accessibility information to assistive technologies such as screen readers. It runs parallel to the DOM and is similar to the DOM API, but with much fewer nodes, because a lot of that information is only useful for visual presentation. By writing semantic HTML we can take advantage of this process in creating an accessible experience for our users. #### Good to hear * Tree structure exposing information to assistive technologies * Runs parallel to the DOM * Semantic HTML is essential in creating accessible experiences ##### Additional Links * [Accessibility APIs](https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/)What are landmark roles and how can they be useful?
View answer
Landmark roles is a way to identify different sections of a page like the main content or a navigation region. The Landmarks helps assistive technology users to navigate a page, allowing them skip over areas of it. For example, ```htmlHeader of the Page
Main Content Goes Here
```
#### Good to hear
* Identify sections of a page
* Assist users in navigating a page
##### Additional Links
* [ARIA Landmark Roles](https://www.washington.edu/accessibility/web/landmarks/)
* [Using ARIA landmarks to identify regions of a page](https://www.w3.org/WAI/GL/wiki/Using_ARIA_landmarks_to_identify_regions_of_a_page)
Node
NodeJS often uses a callback pattern where if an error is encountered during execution, this error is passed as the first argument to the callback. What are the advantages of this pattern?
fs.readFile(filePath, function(err, data) {
if (err) {
// handle the error, the return is important here
// so execution stops here
return console.log(err)
}
// use the data object
console.log(data)
})View answer
Advantages include: * Not needing to process data if there is no need to even reference it * Having a consistent API leads to more adoption * Ability to easily adapt a callback pattern that will lead to more maintainable code As you can see from below example, the callback is called with null as its first argument if there is no error. However, if there is an error, you create an Error object, which then becomes the callback's only parameter. The callback function allows a user to easily know whether or not an error occurred. This practice is also called the _Node.js error convention_, and this kind of callback implementations are called _error-first callbacks_. ```js var isTrue = function(value, callback) { if (value === true) { callback(null, "Value was true.") } else { callback(new Error("Value is not true!")) } } var callback = function(error, retval) { if (error) { console.log(error) return } console.log(retval) } isTrue(false, callback) isTrue(true, callback) /* { stack: [Getter/Setter], arguments: undefined, type: undefined, message: 'Value is not true!' } Value was true. */ ``` #### Good to hear * This is just a convention. However, you should stick to it. ##### Additional Links * [The Node.js Way Understanding Error-First Callbacks](http://fredkschott.com/post/2014/03/understanding-error-first-callbacks-in-node-js/) * [What are the error conventions?](https://docs.nodejitsu.com/articles/errors/what-are-the-error-conventions)What is REST?
View answer
REST (REpresentational State Transfer) is a software design pattern for network architecture. A RESTful web application exposes data in the form of information about its resources. Generally, this concept is used in web applications to manage state. With most applications, there is a common theme of reading, creating, updating, and destroying data. Data is modularized into separate tables like `posts`, `users`, `comments`, and a RESTful API exposes access to this data with: * An identifier for the resource. This is known as the endpoint or URL for the resource. * The operation the server should perform on that resource in the form of an HTTP method or verb. The common HTTP methods are GET, POST, PUT, and DELETE. Here is an example of the URL and HTTP method with a `posts` resource: * Reading: `/posts/` => GET * Creating: `/posts/new` => POST * Updating: `/posts/:id` => PUT * Destroying: `/posts/:id` => DELETE #### Good to hear * Alternatives to this pattern like GraphQL ##### Additional Links * ](https://medium.com/extend/what-is-rest-a-simple-explanation-for-beginners-part-1-introduction-b4a072f8740f)How can you avoid callback hells?
getData(function(a) {
getMoreData(a, function(b) {
getMoreData(b, function(c) {
getMoreData(c, function(d) {
getMoreData(d, function(e) {
// ...
})
})
})
})
})