> For the complete documentation index, see [llms.txt](https://notes.lirenxn.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://notes.lirenxn.com/featured/handy-tricks.md).

# Handy tricks

Things and tricks I revisit the most.

### `ngrock`

`ngrock` establish a **ssh** tunnel from a localhost port to a remote url

`$ngrok http --host-header=rewrite PORT`

Happy testing in mobile and any other remote device you want!

### Use browser js module for easiest (p)react demo&#x20;

**A great cdn:** <https://unpkg.com/>

**No bundling and shit !!**

`htm` <https://github.com/developit/htm>

```markup
<!DOCTYPE html>
<html lang="en">
  <title>htm Demo</title>
  <script type="module">
    import { html, Component, render } from 'https://unpkg.com/htm/preact/standalone.module.js';
​
    class App extends Component {
      addTodo() {
        const { todos = [] } = this.state;
        this.setState({ todos: todos.concat(`Item ${todos.length}`) });
      }
      render({ page }, { todos = [] }) {
        return html`
          <div class="app">
            <${Header} name="ToDo's (${page})" />
            <ul>
              ${todos.map(todo => html`
                <li>${todo}</li>
              `)}
            </ul>
            <button onClick=${() => this.addTodo()}>Add Todo</button>
            <${Footer}>footer content here<//>
          </div>
        `;
      }
    }
​
    const Header = ({ name }) => html`<h1>${name} List</h1>`
​
    const Footer = props => html`<footer ...${props} />`
​
    render(html`<${App} page="All" />`, document.body);
  </script>
</html>
```
