choojs / website

:metro: - Hyper Train Transfer Protocol (HTTP)

choo-website

Todo

• Active links in navigation
• Homepage interactive code editor

License

MIT

website's Issues

document choo/html/raw

https://github.com/choojs/choo/blob/master/html/raw.js - to escape strings; currently undocumented

link to opencollective

https://opencollective.com/choo - and highlight folks sponsoring :D

Add live example

Since choo now has a UMD build, I uploaded the demo from the site to codepen here, and this is how it looks like embeded on choo site

I could send a PR if you want 👍

bug: letter spacing renders differently on dev & prod

Ok, I am confused. The letter spacing thing is definitely rendering differently between local dev and production (https://choo.io).

Computed properties seem to be identical but one does not look like the other.

Full section about file uploading?

Not sure if there are still time constraints but I'd love to see how choo handles this. https://choo.io/docs/forms

Server rendering

Emphasize we can do streaming server rendering

favicon

🚂

mention root node types

We should add a note on why root node types have to be similar for morphing purposes.

Fix page zoom

Right now we’re setting the font size with vw. Let’s instead set a percentage and listen to window.innerWidth on resize to adjust the value, preserving zooming with ctr +/-.

In addition, we should define a maximum breakpoint size so type never becomes too large.

State Machine Docs: Syntax Error in Example

I've been reading over the docs for Choo and decided to work through the State Machine article—after watching davidkpiano's talk on the subject I wanted to get a better feel for how it works.

In the code example the constructor's method is named next, but then further down is called as transition().

export class StateMachine {
  constructor (initialState, transitions) {
    this.state = initialState
    this.transitions = transitions
  }

  next (transition) {
    var nextState = this.transitions[this.state][transition]
    if (!nextState) throw new Error(`invalid: ${this.state} -> ${transition}`)
    this.state = nextState
  }
}

machine.transition('timer')

After getting the names to match, I also had to remove export and turn the timer values into strings to get the example to work (with Node.js).

comments in code snippets are difficult to read

for example, it is really easy to miss the // 1. on this line in the form docs:

since comments are often used as anchors i think they should be loud and clear.

Not loading fonts or favicon

I'm not sure what's changed, but the site doesn't seem to be loading the same font as it used to.

There also isn't any favicon or title.

Fontsize comparison with Medium (for reference)

I feel like fontsize might be slightly too big for longer reads?
Thoughts?

bug(beacon): Uncaught DOMException

Looks like beacon code merged in #10 fails on chrome:

Uncaught DOMException: Failed to execute 'sendBeacon' on 'Navigator': sendBeacon() with a Blob whose type is not any of the CORS-safelisted values for the Content-Type request header is disabled temporarily. See http://crbug.com/490015 for details.
    at nanobeacon (https://choo.io/bundle.js:85:178)
    at https://choo.io/bundle.js:3:1916

delete publish script?

Are we still using surge for publishing the site, or is deploy automated via something else (netlify)?

If the latter, we should remove this old publish script:

"publish": "git push && npm run build && surge -p ./dist -d choo.io"

https://github.com/choojs/website/blob/master/package.json#L11

move to netlify

https://www.netlify.com/

because HTTPS support and automated builds (:

explain how to link state machines to user interfaces

As per #38, make a heading called Applying state machines to user interfaces

Add search to the website

Hey hey 👋, DocSearch could be used here to find things in the reference simpler.

Some questions first:

1. What kind of design should we want?
2. Where should the search box be?
3. what should be indexed?

also cc @s-pace

Show how to make components

I’m using the “old” way of registering onload / onunload event handlers to initialize a component store (through emit(‘store:event’)).

This is not directly supported by Choo anymore, but is certainly possible by using some other libraries or native functions.

For example, I have a parameterized route, and based on the parameter I need to fetch some data to show. Likewise, when the user navigates somewhere else, I want to clear the store state to avoid showing “old” information or flickering when the user navigates to the same route again later.

I’d love to see docs describing the recommended way of doing this.

VHS flicker is painful, possibly harmful

The "VHS flicker" on page load hurts my eyes, and is possibly a danger for folks with epilepsy. A safer alternative could be simply fading the text in rather than flickering. Or skipping it altogether.

explain programmatic navigation from within stores

• Apparently it's not immediately obvious how to navigate from stores.
• We should probably write a little guide to show how to redirect a route if someone isn't logged in.

main page potentially seizure inducing

when you visit the site in its current state, in the title section there are a lot of rapidly color-changing elements, particularly flashing between a dark color and a light color. i could see this as potentially seizure-inducing, which we would definitely want to avoid

Part about 'popState' is outdated

The page on routing incorrectly says that calling emit('popState') will make the browser go back in history. As explained in this PR choojs/choo#621, you should use history.go(-1) instead (since emitting popState does nothing).