vdsabev

<template>
  <div>
    <button type="button" @click="decrement(step)">-</button>
    <input type="text" :value="value" @input="setValue($event.target.value)" />
    <button type="button" @click="increment(step)">+</button>
  </div>
</template>

<script>
export default {

vdsabev

class EditForm extends React.Component {
  state = { discardModalIsShown: false };

  // Previously `onClick`
  showDiscardModal = () => this.setState({ discardModalIsShown: true });

  // Previously `onNo` / `onClose`
  hideDiscardModal = () => this.setState({ discardModalIsShown: false });

  // Previously `onSubmit`

vdsabev

class EditForm extends React.Component {
  state = { discardModalIsShown: false };
  
  onSubmit = ($event) => {
    $event.preventDefault();
    this.setState({ discardModalIsShown: false });
    this.props.onSave();
  };
  
  onClick = () => this.setState({ discardModalIsShown: true });

vdsabev

Keybase proof

I hereby claim:

• I am vdsabev on github.
• I am vdsabev (https://keybase.io/vdsabev) on keybase.
• I have a public key ASDMrSIeb-X_-iGrkkbOejCsR3PM-JDagUCyYbk_fWi76wo

To claim this, I am signing this object:

vdsabev

javascript:(() => {
  const items = document.querySelectorAll('a');
  let delay = 0;
  for (let index = 0; index < items.length; index++) {
    const item = items[index];
    item.setAttribute('download', item.getAttribute('href'));
    setTimeout(() => item.click(), delay);
    delay += 500;
  }
})();

vdsabev

Development

Animation & Interactivity

• IntersectionObserver - get notified when element properties change, e.g. when an element becomes visible or invisible

Authentication

• One-tap sign in / sign up

Components

• Web components - encapsulate HTML / CSS / JS components and use them across the whole web

vdsabev

class Counter {
  oninit({ attrs }) {
    this.count = attrs.count || 0;
  }

  decrement = () => this.count--;
  increment = () => this.count++;

  view() {
    return (

vdsabev

const Counter = component({
  state: {
    count: 0
  },
  actions: {
    decrement: ({ count }) => ({ count: count - 1 }),
    increment: ({ count }) => ({ count: count + 1 })
  },
  view: ({ count }, { decrement, increment }) => <div>...</div>
});

vdsabev

const component = (options = {}) => (vnode) {
  let state = { ...options.state, ...vnode.attrs };

  const proxyActions = {};
  Object.keys(options.actions).forEach((key) => {
    proxyActions[key] = (...args) => {
      const newState = options.actions[key](state, proxyActions, ...args);
      if (newState) {
        state = { ...state, ...newState };
      }

vdsabev

const Counter = ({ attrs: { count = 0 } }) => {
  const decrement = () => count--;
  const increment = () => count++;

  return {
    view: () => <div>...</div>
  };
};