docs: improve hello world section; slices→substate.

Author: jorgebucaran

docs/CONTRIBUTING.md

@@ -4,15 +4,15 @@ Thank you for taking the time to read our contribution guidelines. You can start
 
 ## Style
 
-* We write in ES5.
+* Hyperapp is written in ES5.
 * Format your code before creating a new commit using `npm run format`.
 * We prefer keeping all the moving parts inside as few files as possible. We don't have plans to break up the library into smaller modules.
 
 ## Bugs
 
 * Before submitting a bug report, search the issues for similar tickets. Your issue may have already been discussed and resolved. Feel free to add a comment to an existing ticket, even if it's closed.
 * Determine which repository the problem should be reported in. If you have an issue with the Router, you'll be better served in [hyperapp/router](https://github.com/hyperapp/router), etc.
-* If you have a question or need help with something you are building, we recommend joining the [Hyperapp Slack Team](https://hyperappjs.herokuapp.com).
+* If you have a question or need help with something you are building, hop on [Slack](https://hyperappjs.herokuapp.com).
 * Be thorough in your title and report, don't leave out important details, describe your setup and include any relevant code with your issue.
 * Use GitHub [fenced code blocks](https://help.github.com/articles/creating-and-highlighting-code-blocks/) when sharing code. If your code has JSX in it, please use <code>```jsx</code> for best syntax highlighting.
 
@@ -24,4 +24,4 @@ Thank you for taking the time to read our contribution guidelines. You can start
 
 ## Humans
 
-Our open source community strives to be nice, welcoming and professional. Instances of abusive, harassing, or otherwise unacceptable behavior can be reported by contacting us at <mailto:[email protected]>.
+Our open source community strives to be nice, welcoming and professional. Instances of abusive, harassing, or otherwise unacceptable behavior can be reported by contacting us at [[email protected]]([email protected]).

docs/README.md

@@ -1,18 +1,17 @@
 # Documentation
 
-- [Introduction](introduction/README.md)
-  - [Hello World](introduction/hello-world.md)
-  - [Installation](introduction/installation.md)
-- [Concepts](concepts/README.md)
-  - [Virtual Nodes](concepts/vnodes.md)
-  - [Components](concepts/components.md)
-  - [Lifecycle Events](concepts/lifecycle-events.md)
-  - [Keys](concepts/keys.md)
-  - [Slices](concepts/slices.md)
-  - [Sanitation](concepts/sanitation.md)
-  - [Hydration](concepts/hydration.md)
-- [Tutorials](tutorials/README.md)
-  - [TweetBox](tutorials/tweetbox.md)
-  - [Gif Search](tutorials/gif-search.md)
-  - [Countdown Timer](tutorials/countdown-timer.md)
-- [Contributing](CONTRIBUTING.md)
+* [Introduction](introduction/README.md)
+  * [Hello World](introduction/hello-world.md)
+  * [Installation](introduction/installation.md)
+* [Concepts](concepts/README.md)
+  * [Virtual Nodes](concepts/vnodes.md)
+  * [Keys](concepts/keys.md)
+  * [Components](concepts/components.md)
+  * [Lifecycle Events](concepts/lifecycle-events.md)
+  * [Sanitation](concepts/sanitation.md)
+  * [Hydration](concepts/hydration.md)
+* [Tutorials](tutorials/README.md)
+  * [TweetBox](tutorials/tweetbox.md)
+  * [Gif Search](tutorials/gif-search.md)
+  * [Countdown Timer](tutorials/countdown-timer.md)
+* [Contributing](CONTRIBUTING.md)

docs/SUMMARY.md

@@ -1,9 +1,8 @@
 ## Concepts
 
-- [Virtual Nodes](vnodes.md)
-- [Components](components.md)
-- [Lifecycle Events](lifecycle-events.md)
-- [Keys](keys.md)
-- [Slices](slices.md)
-- [Sanitation](sanitation.md)
-- [Hydration](hydration.md)
+* [Virtual Nodes](vnodes.md)
+* [Keys](keys.md)
+* [Components](components.md)
+* [Lifecycle Events](lifecycle-events.md)
+* [Sanitation](sanitation.md)
+* [Hydration](hydration.md)

docs/concepts/README.md

@@ -18,4 +18,4 @@ Hyperapp works transparently with SSR and pre-rendered HTML, enabling SEO optimi
 </html>
 ```
 
-Then instead of throwing away the server-rendered markdown, we'll turn your DOM nodes into an interactive application.
+Then instead of throwing away the server-rendered markdown, we'll turn your DOM nodes into an interactive application out of the box!

docs/concepts/hydration.md

@@ -3,32 +3,26 @@
 Keys help identify which nodes were added, changed or removed from a list when a view is rendered. A key must be unique among sibling-nodes.
 
 ```jsx
-const ImageGallery = ({ images }) => (
-  <ul>
-    {images.map(({ hash, url, description }) => (
-      <li key={hash}>
-        <img src={url} alt={description} />
-      </li>
-    ))}
-  </ul>
-)
+const ImageGallery = ({ images }) =>
+  images.map(({ hash, url, description }) => (
+    <li key={hash}>
+      <img src={url} alt={description} />
+    </li>
+  ))
 ```
 
 By setting the `key` property on a virtual node, you declare that the node should correspond to a particular DOM element. This allow us to re-order the element into its new position, if the position changed, rather than risk destroying it.
 
 Don't use an array index as key, if the index also specifies the order of siblings. If the position and number of items in a list is fixed, it will make no difference, but if the list is dynamic, the key will change every time the tree is rebuilt.
 
 ```jsx
-const PlayerList = ({ players }) => (
-  <ul>
-    {players
-      .slice()
-      .sort((player, nextPlayer) => nextPlayer.score - item.score)
-      .map(player => (
-        <li key={player.username} class={player.isAlive ? "alive" : "dead"}>
-          <PlayerCard {...player} />
-        </li>
-      ))}
-  </ul>
-)
+const PlayerList = ({ players }) =>
+  players
+    .slice()
+    .sort((player, nextPlayer) => nextPlayer.score - item.score)
+    .map(player => (
+      <li key={player.username} class={player.isAlive ? "alive" : "dead"}>
+        <PlayerCard {...player} />
+      </li>
+    ))
 ```

docs/concepts/keys.md

@@ -7,35 +7,31 @@ You can be notified when a virtual node is created, updated or removed via lifec
 This event is fired after the element is created and attached to the DOM. Use it to manipulate the DOM node directly, make a network request, create slide/fade in animation, etc.
 
 ```jsx
-function Textbox({ placeholder }) {
-  return (
-    <input
-      type="text"
-      placeholder={placeholder}
-      oncreate={element => element.focus()}
-    />
-  )
-}
+const Textbox = ({ placeholder }) => (
+  <input
+    type="text"
+    placeholder={placeholder}
+    oncreate={element => element.focus()}
+  />
+)
 ```
 
 ## onupdate
 
 This event is fired every time we update the element attributes. Use `oldProps` inside the event handler to check if any attributes changed or not.
 
 ```jsx
-function Textbox({ placeholder }) {
-  return (
-    <input
-      type="text"
-      placeholder={placeholder}
-      onupdate={(element, oldProps) => {
-        if (oldProps.placeholder !== placeholder) {
-          // Handle changes here!
-        }
-      }}
-    />
-  )
-}
+const Textbox = ({ placeholder }) => (
+  <input
+    type="text"
+    placeholder={placeholder}
+    onupdate={(element, oldProps) => {
+      if (oldProps.placeholder !== placeholder) {
+        // Handle changes here!
+      }
+    }}
+  />
+)
 ```
 
 ## onremove

docs/concepts/lifecycle-events.md

@@ -3,19 +3,15 @@
 Use of the innerHTML method can lead to cross-site scripting ([XSS](https://en.wikipedia.org/wiki/Cross-site_scripting)) vunerabilities if not properly sanitized. If you can't use vnodes for any reason, create your own replacement function to explicitly state the intent of performing an "unsafe" operation.
 
 ```jsx
-function dangerouslySetInnerHTML(html) {
-  return element => {
-    element.innerHTML = html
-  }
+const dangerouslySetInnerHTML = html => element => {
+  element.innerHTML = html
 }
 
-function ItemContent({ item: { url, summary } }) {
-  return (
-    <div class="content">
-      <a href={url} oncreate={dangerouslySetInnerHTML(summary)} />
-    </div>
-  )
-}
+const ItemContent = ({ item: { url, summary } }) => (
+  <div class="content">
+    <a href={url} oncreate={dangerouslySetInnerHTML(summary)} />
+  </div>
+)
 ```
 
-Setting HTML from code is dangerous because it's easy to inadvertently expose your users to an XSS attack. [DOMPurify](https://github.com/cure53/DOMPurify) and [sanitize-html](https://github.com/punkave/sanitize-html) are two popular HTML sanitizer libraries.
+Use with caution! Setting HTML from code is dangerous because it's easy to inadvertently expose your users to an XSS attack. [DOMPurify](https://github.com/cure53/DOMPurify) and [sanitize-html](https://github.com/punkave/sanitize-html) are two popular HTML sanitizer libraries.

docs/concepts/sanitation.md

@@ -22,17 +22,7 @@ To create a virtual node, use the `h` function.
 const node = h("div", { id: "app" }, [h("h1", {}, "Hi.")])
 ```
 
-Alternatives to the built-in `h()` function include [JSX](https://facebook.github.io/jsx/), [hyperx](https://github.com/choojs/hyperx), [t7](https://github.com/trueadm/t7) and [@hyperapp/html](https://github.com/hyperapp/html).
-
-```jsx
-const node = (
-  <div id="app">
-    <h1>Hi.</h1>
-  </div>
-)
-```
-
-Virtual node props may include any valid [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) or [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute) attributes, [DOM](https://developer.mozilla.org/en-US/docs/Web/Events), [lifecycle events](lifecycle-events.md), and [keys](keys.md).
+Virtual node props may include any valid [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) and [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute) attributes, [DOM events](https://developer.mozilla.org/en-US/docs/Web/Events), [lifecycle events](lifecycle-events.md), and [keys](keys.md).
 
 ```jsx
 const button = (

docs/concepts/slices.md

@@ -1,4 +1,4 @@
 ## Introduction
 
-- [Hello World](hello-world.md)
-- [Installation](installation.md)
+* [Hello World](hello-world.md)
+* [Installation](installation.md)