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

A great cdn: https://unpkg.com/

No bundling and shit !!

htm https://github.com/developit/htm

<!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>

PreviousReact Hooks 3 - Test Hooks NextAbout Micro FrontEnd

Last updated 5 years ago

Was this helpful?