Improve CodePen examples

[atomiks]

I found the examples a bit tricky to read, I suggest improving them as follows:

• Follow Hyperapp's style: 2 space indentation, bracket spacing, double quotes, avoid _ for paramless functions
• Avoid cryptic/shortened variable names
• Use named params for state, actions & view for readability
• Shorten shuffle algo with destructuring assignment
• For add, always place the new message at the beginning of the array so it appears on top - it's confusing having it appear randomly in the order (to me)
• Styling could also be enhanced to make it prettier 😜

Here is Toasts:

const { h, app } = hyperapp
const { Move, Enter, Exit } = transitions
/** @jsx h */

const Toast = ({ message, remove }, children) => (
  <Move easing="ease-in-out">
    <Exit
      easing="ease-in-out"
      css={{ transform: "scale(2.0, 2.0)", opacity: "0" }}
    >
      <Enter
        easing="ease-in-out"
        css={{ transform: "translateX(100%)", opacity: "0" }}
      >
        <div class="message" key={message} onclick={() => remove(message)}>
          {message}
        </div>
      </Enter>
    </Exit>
  </Move>
)

const state = {
  messages: []
}

const actions = {
  add: () => state => {
    const newMessage = btoa("" + Math.random()).slice(3, 11)
    return { messages: [newMessage, ...state.messages] }
  },
  remove: message => state => ({
    messages: state.messages.filter(m => m !== message)
  }),
  reset: () => ({ messages: [] }),
  shuffle: () => state => {
    const messages = [...state.messages]
    let m = messages.length
    while (m) {
      const i = Math.floor(Math.random() * m--)
      ;[messages[m], messages[i]] = [messages[i], messages[m]]
    }
    return { messages }
  }
}

const view = (state, actions) => (
  <main class="app">
    <button onclick={actions.add}>Add</button>
    <button onclick={actions.reset}>Reset</button>
    <button onclick={actions.shuffle}>Shuffle</button>
    Click toasts to remove them.
    <div class="messages">
      {state.messages.map(message => (
        <Toast message={message} remove={actions.remove} />
      ))}
    </div>
  </main>
)

app(state, actions, view, document.body)

[zaceno]

@atomiks All good suggestions! Thanks!

(well... all except the 2-space-indent rule. It will be 4 spaces as long as the examples are in my codepen account 😉 . But actually that brings up another question: perhaps it would make sense to move the examples to the hyperapp-account since the hyperapp org owns this repo 🤔. If that's decided, then yes definitely I should follow the style as the other examples. Also, the css should be updated )

Thanks also for exemplifying what you meant with by rewriting the Toasts example! I'll get to work on it, but it may not be this week. I have other things ahead in the backlog.

[jorgebucaran]

@zaceno It will be 4 spaces as long as the examples are in my codepen account.

😆👍

[zaceno]

Update: Finally started working on this