Merge branch 'master' into patch-2

content/de/index.md

@@ -10,14 +10,10 @@ toc: false
     <h1>
         <logo height="1.5em" title="Preact" text inverted>Preact</logo>
     </h1>
-    <p>Schnelle 3kB-Alternative zu React mit der gleichen ES6-API.</p>
+    <p class="tagline">Schnelle 3kB-Alternative zu React mit der gleichen ES6-API.</p>
     <p class="intro-buttons">
-        <a href="/guide/v10/getting-started" class="home-button">Fang an</a>
-        <span class="home-button-sep">&nbsp; • &nbsp;</span>
-        <a href="/guide/v10/switching-to-preact" class="home-button">Wechsle zu Preact</a>
-    </p>
-    <p>
-        <github-stars user="developit" repo="preact">5,000+</github-stars>
+        <a href="/guide/v10/getting-started" class="btn primary">Fang an</a>
+        <a href="/guide/v10/switching-to-preact" class="btn secondary">Wechsle zu Preact</a>
     </p>
 </jumbotron>
 
@@ -35,6 +31,11 @@ function Counter() {
 }
 ```
 
+<div class="sponsors">
+  <p><a href="https://opencollective.com/preact">Gesponsort von:</a></p>
+  <sponsors></sponsors>
+</div>
+
 <section class="home-top">
     <h1>Eine Bibliothek der anderen Art.</h1>
 </section>
@@ -111,7 +112,6 @@ function Counter() {
     <ul>
         <li>`props`, `state` und `context` werden zu `render()` weitergegeben</li>
         <li>Standard HTML-Attribute (z.B. `class` und `for`) können verwendet werden</li>
-        <li>Funktioniert ohne jegliche Modifikation mit React DevTools</li>
     </ul>
   </div>
 </section>
@@ -232,8 +232,7 @@ render(
         Wähle die Anleitung aus, die für dich am besten geeignet ist!
     </p>
     <p>
-        <a href="/guide/v10/getting-started" class="home-button">Fang an</a>
-        <span class="home-button-sep">&nbsp; • &nbsp;</span>
-        <a href="/guide/v10/switching-to-preact" class="home-button">Wechsle zu Preact</a>
+        <a href="/guide/v10/getting-started" class="btn primary">Fang an</a>
+        <a href="/guide/v10/switching-to-preact" class="btn secondary">Wechsle zu Preact</a>
     </p>
 </section>

content/en/guide/v10/api-reference.md

@@ -44,7 +44,7 @@ Render a Preact component into the `containerNode` DOM node. Does not return any
 
 If the optional `replaceNode` DOM node is provided and is a child of `containerNode`, Preact will update or replace that element using its diffing algorithm.
 
-```js
+```jsx
 import { render } from 'preact';
 
 const Foo = () => <div>foo</div>;

content/en/guide/v10/components.md

@@ -39,14 +39,13 @@ Class components can have state and lifecycle methods. The latter are special me
 
 Here we have a simple class component called `<Clock>` that displays the current time:
 
-```js
+```jsx
 class Clock extends Component {
 
   constructor() {
     super();
     this.state = { time: Date.now() };
   }
-
 
   // Lifecycle: Called whenever our component is created
   componentDidMount() {
@@ -159,7 +158,7 @@ const Bar = <>foo</>;
 
 You can also return arrays from your components:
 
-```js
+```jsx
 function Columns() {
   return [
     <td>Hello</td>,
@@ -170,7 +169,7 @@ function Columns() {
 
 Don't forget to add keys to `Fragments` if you create them in a loop:
 
-```js
+```jsx
 function Glossary(props) {
   return (
     <dl>

content/en/guide/v10/external-dom-mutations.md

@@ -20,7 +20,7 @@ In Preact (and similarly in React), working with these types of libraries requir
 
 This can be as simple as defining a `shouldComponentUpdate()` method on your component, and having it return `false`:
 
-```js
+```jsx
 class Block extends Component {
   shouldComponentUpdate() {
     return false;
@@ -30,7 +30,7 @@ class Block extends Component {
 
 ... or for shorthand:
 
-```js
+```jsx
 class Block extends Component {
   shouldComponentUpdate = () => false;
 }
@@ -44,7 +44,7 @@ With this lifecycle hook in place and telling Preact not to re-render the Compon
 
 Here is an example of "turning off" re-rendering for a Component.  Note that `render()` is still invoked as part of creating and mounting the Component, in order to generate its initial DOM structure.
 
-```js
+```jsx
 class Example extends Component {
   shouldComponentUpdate() {
     // do not re-render via diff:

content/en/guide/v10/forms.md

@@ -105,7 +105,7 @@ So, instead of listening for a `input` event we should listen for a `click` even
 
 ### Checkbox Example
 
-```js
+```jsx
 class MyForm extends Component {
   toggle = e => {
       let checked = !this.state.checked;

content/en/guide/v10/getting-started.md

@@ -5,9 +5,9 @@ description: "How to get started with Preact. We'll learn how to setup the tooli
 
 # Getting Started
 
-This guide helps you get up and running to start developing Preact apps. There are 3 popular ways to do so.
+This guide helps you get up and running to start developing Preact apps.
 
-If you're just starting out we highly recommend going with [preact-cli](#best-practices-powered-with-preact-cli).
+There are 3 popular options. If you're new to Preact, we recommend starting with [Preact CLI](#best-practices-powered-by-preact-cli).
 
 ---
 
@@ -17,86 +17,94 @@ If you're just starting out we highly recommend going with [preact-cli](#best-pr
 
 ## No build tools route
 
-Preact has always been readily packaged to be used right in the browser. This doesn't require any build tools at all.
+Preact is packaged to be used directly in the browser, and doesn't require any build or tools:
 
-```js
-import { h, Component, render } from 'https://unpkg.com/preact?module';
-
-// Create your app
-const app = h('div', null, 'Hello World!');
+```html
+<script type="module">
+  import { h, Component, render } from 'https://unpkg.com/preact?module';
 
-// Render the application into <body>.
-render(app, document.body);
+  // Create your app
+  const app = h('h1', null, 'Hello World!');
 
-// Note: it's best use a wrapper element instead of body.
+  render(app, document.body);
+</script>
 ```
 
-The only difference is that you cannot use JSX, because JSX needs to be transpiled. We got you covered with an alternative in the next section. So keep reading.
+[🔨 Edit on Glitch](https://glitch.com/~preact-no-build-tools)
+
+The primary drawback of developing this way is the lack of JSX, which requires a build step. An ergonomic and performant alternative to JSX is documented in the next section.
 
 ### Alternatives to JSX
 
-Writing raw `h` or `createElement` calls all the time is much less fun than using something JSX-like. JSX has the advantage of looking similar to HTML, which makes it easier to understand for many developers in our experience. It requires a built-step though, so we highly recommend an alternative called [htm].
+Writing raw `h` or `createElement` calls can be tedious. JSX has the advantage of looking similar to HTML, which makes it easier to understand for many developers in our experience. JSX requires a built-step though, so we highly recommend an alternative called [HTM][htm].
 
-In a nutshell [htm] can be best described as: JSX-like syntax in plain JavaScript without a need for a transpiler. Instead of using a custom syntax it relies on native tagged template strings which were added to JavaScript a while back.
+[HTM][htm] is a JSX-like syntax that works in standard JavaScript. Instead of requiring a build step, it uses JavaScript's own [Tagged Templates](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates) syntax, which was added in 2015 and is supported in [all modern browsers](https://caniuse.com/#feat=template-literals). This is an increasingly popular way to write Preact apps, since there are fewer moving parts to understand than a traditional front-end build tooling setup.
 
-```js
-import { h, Component, render } from 'https://unpkg.com/preact?module';
-import htm from 'https://unpkg.com/htm?module';
+```html
+<script type="module">
+  import { h, Component, render } from 'https://unpkg.com/preact?module';
+  import htm from 'https://unpkg.com/htm?module';
 
-// Initialize htm with Preact
-const html = htm.bind(h);
+  // Initialize htm with Preact
+  const html = htm.bind(h);
 
-const app = html`<div>Hello World!</div>`
-render(app, document.getElementById('app'));
+  const app = html`<h1>Hello World!</h1>`;
+  render(app, document.body);
+</script>
 ```
 
-It's a very popular way of writing Preact apps and we highly recommend checking out htm's [README][htm] file if you're interested in going with this route.
+[🔨 Edit on Glitch](https://glitch.com/~preact-with-htm)
+
+For more information on HTM, check out its [documentation][htm].
 
-## Best practices powered with `preact-cli`
+## Best practices powered by Preact CLI
 
-The `preact-cli` project is a ready made solution to bundle Preact applications with the optimal bundler configuration that's best for modern web application. It's built on standard tooling projects like `webpack`, `babel` and `postcss`. Because of the simplicity this is the most popular way to use Preact among our users.
+[Preact CLI] is an off-the-shelf solution for building Preact applications that is optimized for modern web development. It's built on standard tooling projects like Webpack, Babel and PostCSS. Preact CLI does not require any configuration or prior knowledge to get started, and this simplicity makes it the most popular way to use Preact.
 
-As the name implies, `preact-cli` is a **c**ommand-**li**ne tool that can be run in the terminal on your machine. Install it globally by running:
+As the name implies, Preact CLI is a **c**ommand-**li**ne tool that can be run in the terminal on your machine. Install it globally by running:
 
 ```bash
 npm install -g preact-cli
 ```
 
-After that you'll have a new command in your terminal called `preact`. With it you can create a new application by executing the following command:
+After that you'll have a new command in your terminal called `preact`. With it you can create a new application by running the `preact create` command:
 
 ```bash
 preact create default my-project
 ```
 
-The above command pulls the template from `preactjs-templates/default`, prompts for some information, and generates the project at `./my-project/`.
+This will create a new application based on our [default template](https://github.com/preactjs-templates/default). You will be asked for some information about your project, which will then be generated in the directory you specified (`my-project` in this case).
 
-> Tip: Any Github repo with a `'template'` folder can be used as a custom template: `preact create <username>/<repository> <project-name>`
+> **Tip:** Any GitHub repository with a `template/` folder can be used as a custom template:
+>
+> `preact create <username>/<repository> <project-name>`
 
 ### Getting ready for development
 
-Now we're ready to start our application. To fire up the development server run the following command inside the freshly generated project folder (`my-project` in this example):
+Now we're ready to start our application. To start a development server, run the following command inside your newly generated project folder (`my-project` from above):
 
 ```bash
 # Go into the generated project folder
-cd my-project/
+cd my-project
 
-# Start the devserver
+# Start a development server
 npm start
 ```
 
-Once the server is up you can access your app at the URL that was printed in the console. Now you're ready to develop your app!
+Once the server has started, it will print a local development URL to open in your browser.
+Now you're ready to start coding your app!
 
 ### Making a production build
 
-There comes a time when you need to deploy your app somewhere. The CLI ships with a handy `build` command which will generate a highly optimized build.
+There comes a time when you need to deploy your app somewhere. The CLI ships with a handy `build` command which will generate a highly optimized production build.
 
 ```bash
 npm run build
 ```
 
 Upon completion you'll have a new `build/` folder which can be deployed directly to a server.
 
-> For a full list of all available commands check out the list in preact-cli's [README file](https://github.com/preactjs/preact-cli#cli-options).
+> For a full list of all available commands check out the [Preact CLI Documentation](https://github.com/preactjs/preact-cli#cli-options).
 
 ## Integrating Into An Existing Pipeline
 
@@ -117,7 +125,7 @@ To transpile JSX you need a babel plugin that converts it to valid JavaScript co
 }
 ```
 
-> [babeljs](https://babeljs.io/) has one of the best documentation out there. We highly recommend checking it out for questions surrounding babel and how to set it up.
+> [babeljs](https://babeljs.io/) has some of the best documentation out there. We highly recommend checking it out for questions surrounding babel and how to set it up.
 
 ### Aliasing React to Preact
 
@@ -175,4 +183,4 @@ jest configuration:
 ```
 
 [htm]: https://github.com/developit/htm
-
+[Preact CLI]: https://github.com/preactjs/preact-cli

content/en/guide/v10/options.md

@@ -68,9 +68,9 @@ Invoked immediately after a vnode is rendered, once its DOM representation is co
 
 #### `options.event`
 
-**Signature:** `(event: Event) => void`
+**Signature:** `(event: Event) => any`
 
-Invoked just before a DOM event is handled by its associated Virtual DOM listener.
+Invoked just before a DOM event is handled by its associated Virtual DOM listener. When `options.event` is setted, the event which is event listener argument is replaced return value of `options.event`.
 
 #### `options.requestAnimationFrame`
 

content/en/guide/v10/tutorial.md

@@ -157,7 +157,7 @@ Boom! We're done! We can now enter a custom name, click "Update" and our new nam
 
 We wrote our first component, so let's get a little more practice. This time we build a clock.
 
-```js
+```jsx
 import { h, render, Component } from 'preact';
 
 class Clock extends Component {
@@ -174,7 +174,7 @@ Ok, that was easy enough! Problem is, that the time doesn't change. It's frozen
 
 So, we want to have a 1-second timer start once the Component gets added to the DOM, and stop if it is removed. We'll create the timer and store a reference to it in `componentDidMount`, and stop the timer in `componentWillUnmount`. On each timer tick, we'll update the component's `state` object with a new time value. Doing this will automatically re-render the component.
 
-```js
+```jsx
 import { h, render, Component } from 'preact';
 
 class Clock extends Component {