nahumzs

Aria

Accessible Rich Internet Application (WAI-ARIA)

The Web Accessibility Initiative's Accessible Rich Internet Applications specification (WAI-ARIA, 
or just ARIA) is good for bridging areas with accessibility issues that can't be managed with native HTML.
It works by allowing you to specify attributes that modify the way an element is translated into the 
accessibility tree. 

by - Google developers

nahumzs

// 0. Can you explain the follow concepts? 
// 0.1 Explain how prototype works in JS can you give us an example. 
// 0.2 how composition works in JS (The candidate might comment about Object.assign() or Object.create();

// bonus points the candidate will comment the different

// scope and this
// 1. why bind, call and apply are used in Javascript, can you give us an example?
// what's the difference between call and apply?

nahumzs

<Keyboard>
  <Key code="enter" onKeyMatch={()=>{console.log('key:', 'Enter')}} />
  <input type="text" />
</Keyboard>

nahumzs

// Children Extend Pattern

// when to use it:
// `Children Extend` is a pattern which focuses on passing down the state of the parent component to its children
// Solving the problem that arise when a children component want to comunicate with their parent.

// pros:
// Simple to pass down state or a `callback` with basic javascript knowledge
// Easy to understand, is just about extending a javacript object.

nahumzs

const Footer = (props) => {
 const {children} = props;
 return (<div className=”footer”>{children}</div>)
}

nahumzs

export default class Collapsible extends Component {
  state = {
    // this state will be use by the uncontrolled component
    startCollapsed: this.props.startCollapsed || true,
  }

  // How to detect if it's controlled or not
  isControlled() {
    return typeof this.props.isCollapsed !== "undefined";
  }

nahumzs

export default class Form extends Component {
  canIDoSomething = () => {
    return Promise.resolve(true)
  }

  render() {

    const extendedProps = {
      isFormDisabled: this.props.isDisabled,
      canIDoSomething: this.canIDoSomething,

nahumzs

{ /* This structure will work */ }
<Tabs>
  <Tab></Tab> { /* ← 😻this child will be correctly extended */ }
<Tabs>

{ /* Slight change in the structure will break the implementation: */ }
<Tabs>
  <div> { /* ← 😵this will be the extend child */ }
    <Tab></Tab> { /* ← 😩this will not receive the parent state */ }
  </div>

nahumzs

export default class Form extends Component {
  // Defining Context Types these are the properties that 
  // the consumer component can use.
  static childContextTypes = {
    onSent: func,
    isDisabled: bool,
  }

  // Providing the actual values for the Context Types 
  // defined in childContextTypes

nahumzs

import React from "react";

export default class HoverState extends React.Component {
  state = { isHover: false };

  handleHover = isHover => () => {
    this.setState({ isHover });
  };

  render() {