IS THIS POSSIBLE?

¿Esto es posible?

(data.a === 1 && data.a === 2 && data.a === 3)
// true

WHAT THE HECK ARE PROXY OBJECTS?

¿Qué son los Objetos Proxy?

It's the answer that ES6 created to the desire to intercept objects as the NSA intercepts phones

Es la solución de ES6 para interceptar los objetos como el gobierno intercepta telefonos

create yours

Crea el tuyo

Actual object

Proxy

External Methods

BROWSER 01

PHONE NUMBERS PROXY

Proxies para número de telefono

const phone_handler = {
  set(target, key, value) {
    console.log(value);
    target[key] = value.match(/\d/g).join('');
  },

  get(target, key, value) {
    if (!target[key]) return undefined;
    return target[key]
      .replace(/(\d{3})(\d{3})(\d{4})/, '($1)-$2-$3');
  },
};

const phone_numbers = new Proxy({}, phone_handler);

BROWSER 02

WHILE CREATING AN API

Cuando creas tu API

 set(target, key, value) {
    const maybe = Object.keys(target)
      .find(obj_key => obj_key.toLowerCase() === key.toLowerCase());

    if (!target[key] && maybe) {
      throw new Error(`Try with '${maybe}' instead`);
    }

    return target[key];
}

Are they trying to set something new that already exists?

¿Están tratando de crear algo nuevo que ya existe?

  get(target, key, value) {
    const maybe = Object.keys(target)
      .find(obj_key => obj_key.toLowerCase() === key.toLowerCase());


    if (typeof target[key] === 'undefined' && maybe) {
      console.warn(`'Returning ${maybe} instead'`);
      return target[maybe];
    }

    return target[key];
  },

They're trying to get something that doesn't exist but there's something similar

Tratan de obtener algo que no existe, pero hay algo similar

BROWSER 03

NODE PROXY API

Una API DE OBJETOS PROXY EN NODE

api.get();

//Not defined
api.getUsers();
api.getUsers$Likes('1234');
api.getUsers$Likes('1234', {
  page: 2,
});
api.postItems({
  name: 'Item name',
});

None of the following methods are defined within the API but all will resolve th desired value.

Ninguno de los siguientes metodos están definidos pero todos se resuelven al valor deseado

Original from: https://goo.gl/p3L2ED

BROWSER 04

NODE CONSOLE

UWERE YOU ABLE TO SOLVE THE QUESTION?

¿PuDISTE RESOLVER LA PREGUNTA?

const handler = {
  get: (target, name) => target[name] += 1,
};

const data = new Proxy({}, handler);

data.a = 1; //1
console.log(data.a); //2
console.log(data.a); //3

BROWSER 05

BEM

Bloque Elemento Modificador

BLOCK ELEMENT MODIFIER

.block {}
.block__element {}
.block--modifier {}
.block__element--modifier {}

Splitting content with BEM

SEPARANDO CONTENIDO CON BEM

<div class="media">
    <img src="logo.png" alt="Foo Corp logo" class="img-rev">
    <div class="body">
        <h3 class="alpha">Welcome to Foo Corp</h3>
        <p class="lede">Foo Corp is the best, seriously!</p>
    </div>
</div>

<div class="media">
    <img src="logo.png" alt="Foo Corp logo" 
         class="media__img  media__img--rev">
    <div class="media__body">
        <h3 class="alpha">Welcome to Foo Corp</h3>
        <p class="lede">Foo Corp is the best, seriously!</p>
    </div>
</div>

BEM WITH CSS PREPROCESSORS

BEM CON PREPROCESADORES DE CSS

.btn
  border: 1px solid red
  padding: 1rem
  text-align: center
  width: 100px
  //Modifier
  &--fluid
    width: 100%
  //Modifier
  &--blue
    background: blue
  //Block
  &__icon
    font-size: 2rem
    //Block modifier
    &--large
      font-size: 3rem

btn--fluid btn__icon btn__icon--large

btn btn--blue

btn btn--blue