The choo-handbook from choojs

Change repo description

It's currently:

Learn the TCBY stack through a set of exercises

For those of us familiar with the "TCBY stack" term, I think the current description makes sense, but for folks who may come to this repo from choo, or see it starred in their feed by someone, it's a little cryptic. Perhaps:

Learn the choo framework through a set of exercises

use minidocs

use https://github.com/freeman-lab/minidocs and create a build workflow; perhaps auto-publish too

Sup, choo bug?

Hi, I was doing the sup, choo tutorial. Copied word by word and I get this error:

Uncaught TypeError: Cannot read property '0' of undefined
    walk @ index.js:26
    sheetRouter @ index.js:48 
    createRouter @ index.js:123
    start @ index.js:70
    7.choo @ client.js [sm]:12
    s @ _prelude.js:1
    e @ _prelude.js:1
    (anonymous function) @ _prelude.js:

This is, currently, my client.js. Maybe I fucked something, but again. At the end, I literally copied:

const choo = require('choo')
const html = require('choo/html')

const app = choo()
const sexyView = () => html`
  <div>Hello chooters</div>
`

app.router((route) => {
  route('/', sexyView)
})

const tree = app.start() // this madafa is the one causing troubles
document.body.appendChild(tree)

the way it looks

The gcloud documentation is probably doing a good job; we could totes copy their design but change the font and make it like more pink. For reference:

especially the versioning + links to stackoverflow / github / npm would be grand

sample app click behavior is weird

for first choo app the clicking behavior seems odd, once you click on animal type , you have to randomly get a click on that animal, wouldn't it be better once having choosen an animal to now only click on that animal.
change index.js , see **** new line commented code
index.js:
// import choo
var choo = require('choo')

// import choo's template helper
var html = require('choo/html')

// import template
var main = require('./templates/main.js')

// initialize choo
var app = choo()

app.use(function (state, emitter) {
// initialize state
state.animals = [
{ type: 'lion', x: 200, y: 100 },
{ type: 'crocodile', x: 50, y: 300 }
]

state.atype='all'

// add animal
emitter.on('addAnimal', function (data) {
var animals = ['crocodile', 'koala', 'lion', 'tiger', 'walrus']
var type = Math.floor(Math.random() * 5)

if (state.params.type)                                      //**** new line
  type=animals.indexOf(state.params.type);   //**** new line
      
var x = data.x
var y = data.y

var obj = { type: animals[type], x: x, y: y }
state.animals.push(obj)

emitter.emit('render')

})

// remove animal
emitter.on('removeAnimal', function (i) {
state.animals.splice(i, 1)
emitter.emit('render')
})
})

// declare routes
app.route('/', main)
app.route('/filter/:type', main)

// start app
app.mount('div')

bel or yo-yo?

https://yoshuawuyts.gitbooks.io/choo/content/03_elements/01_html.html says that choo uses bel under the hood. But bel is not present in package.json. Isn't it using yo-yo, which in turn depends on bel?

chapter overview

Which chapters should we write? How should they be ordered? Let's discuss it here. Anyone with push access should just update the section below so we can keep track as we write them. I'm like stuck in writing code so this is taking longer than I should; I reckon if we collaborate we can get there faster!

Index

note: seriously, edit me

Probably the only constraints I'd have for writing style is trying to create an approachable style (e.g. add links to words; explain concepts; spell acronyms out the first time) and referring to people as people/they/them/their to like make assumptions on who they are. Perhaps this should be in a contributing section. Ah well - happy writing / updating / editing / tweaking! ✨

vector clocks for choo v5

03:25 <yoshuawuyts> oh super cool pattern for choo v5 btw: equality checks by creating a modified timestamp on individual items using an internal vector clock
03:25 <yoshuawuyts> will work real well for caching
03:26 <yoshuawuyts> (didn't come up with this btw, but yeah I just remembered discussing this last week)
03:27 <yoshuawuyts> e.g. rather than comparing properties on an object, you can check if the new timestamp on the incoming data is a newer version than the timestamp on the existing copy - if it's newer you re-render the element. If it's not you return the cached DOM node
03:28 <yoshuawuyts> circumvents creating new objects all the time just to satisfy triple equals checks, and removes the need to compare all properties

sample app maybe should highlight current animal type selected?

maybe highlight current animal type, so you know what you are clicking...
new main.js, code is messy since I'm learning choo & javascript...see create html template code area

main.js:
// import choo's template helper
var html = require('choo/html')

// import template
var animal = require('./animal.js')

// export module
module.exports = function (state, emit) {
// create html template
state.c=["","","","","",""]
var animals=['all','crocodile','koala','lion','tiger','walrus']
state.c[animals.indexOf(state.params.type || 'all' )] = 'highlight'

return html

${state.animals.map(animalMap)}

// map function
function animalMap (obj, i) {
return animal(remove, obj, i)
}

// add new animal to state
function add (e) {
var x = e.offsetX - 20
var y = e.offsetY - 10

emit('addAnimal', {x: x, y: y})
}

// map function
function animalMap (obj, i) {
var type = state.params.type

if (type && type !== obj.type) {
return // nothing
} else {
return animal(remove, obj, i)
}
}

// remove animal from state
function remove (e) {
var index = e.target.id
emit('removeAnimal', index)
}
}

docs: wrapping for webcomponents

Would be cool to show how to wrap a bel / yo-yo instance inside a webcomponent; not that I like them, but because others might be interested - https://github.com/jessehattabaugh/ponies

components, views and nesting both

related choojs/choo#324

Alice should have fun 3 times

In the example where Alice is having fun, the sentence function is called 3 times, but the output shows only one sentence.

Don't let element proxy docs die on the git history vine

There was some excellent info on what an element proxy was in the old cache-element readme:

https://github.com/yoshuawuyts/cache-element/tree/e5c5d7406018f96177bd8a390ae22a0f9a0458ba#whats-a-proxy-node

Lets get that into the choo handbook. I'm willing to do this, just making not as to not forget.

Uglifyify breaks the build when using arrow functions

I tried making the main function into an arrow function and things broke, the page just said punc ()) Unexpected token. Removing -g uglifyify from the start command seems to have fixed things. Updating uglifyify might help since it's using a 2 year old version but I couldn't be bothered to test :P

[section] start

describe how subscriptions work
describe the "global start" pattern; e.g. wait until multiple models have booted before changing some other variable (e.g. "application has now loaded, stop rendering the placeholder view")

[guide] Choo Introduction For People Who Know Just Enough jQuery To Get By

@Kriesse pointed out today that it'd be cool to have a choo introduction
geared at people with light frontend skills (e.g. designers). An article that
she particularly liked was react introduction for people who know just enough
jquery to get by. It'd be cool if something like that existed for choo.

The structure of the article is roughly:

define the target audience
overview of the project (create a tweet box)
introduction to JSBin (load libs and stuff, get some html)
set some state on the button in jquery
explain what you'll be doing in react to do the same thing
write some HTML markup in react
set some default state on the button using react (button is "disabled")
implement some state toggling in react
add a "remaining character count" thingy with jQuery
add a "remaining character count" thingy with react
explain the "add photo" feature
create the "add photo" button in jQuery
create the "add photo" button in react
reflecting on the react code (what makes it good?)
explain the "highlight overflow characters" feature
highlight "overflow characters" using react

Help with this is super welcome! - It'd be cool if someone (or a group of
people) could help guide absolute beginners to feel comfortable writing bel /
choo code! I probably won't have time to do this in the coming months, so if
someone else could pick it up it'd be amazing ✨ Thanks!

docs: server-sent HTML

choojs/nanohtml#29

docs: react migration guide

As per choojs/choo#34 (comment)

'event' instead of 'e' in onInput function in Other Listeners

Code

function onInput (event) {
  console.log('value is: ' + e.target.value)
}

double check on adorable GIF licensing

hi friends,

i wanted to make sure that i can use your super awesome little animated critter GIFs. the project says MIT, but wasn't sure included the imgs.

they are fun, and i wanted to use them as loading animations on my recent choo app. where'd they come from, btw?

thx!

[guide] managing async logic with choo

This is the chapter overview to make people intimately familiar with choo's
async model. As parallel asynchronous programming is amongst one of the hardest
things to get right in programming, I think it's important to provide people
with a comprehensive guide. Feedback is very welcome! 🎉

Section overview

talk about why async is needed (the hamburger joint model)
base async patterns: parallel vs pipeline
go through choo's error handling model
go through choo's hooks system
bonus: talk about the missing pieces: backpressure cancellation
bonus: talk about pull-streams

Related issues

Old link in repo description

Some animal gif links are broken

Hello! I just went through this awesome tutorial, however in the last lesson (dynamic routes) some gifs (tiger and walrus) didn't load. I checked https://choo-animals.glitch.me/ and it seemed to be true for that site as well.

Future guides

docs: navigating between pages

bind <a href=""> clicks
using the DOM location API (related to: choojs/choo#21)

Current source not reflected in the Gitbooks

The source for 'your first app'
https://github.com/yoshuawuyts/choo-handbook/blob/master/content/core-your-first-app.md

is not reflected on the actual page https://yoshuawuyts.gitbooks.io/choo/content/02_your_first_app.html

This discussion is a branch off of #12 (comment)

Feedback: Your First App

I'd like to leave this issue here for readers to post feedback about the "Your First App" tutorial. I'm particularly interested in the things that you have to re-read 3 times because it didn't make sense the first two times, or concepts that may have been taken for granted.

Let me know if there's a preferred venue for this kind of feedback than a GH issue.

explain they should create a new directory for the project so that it's scoped; probs recommend src/$github-username/my-first-choo-project or smth
installing choo is apparently hard; perhaps mention npm init --yes and npm install --save choo

choojs / choo-handbook Goto Github PK

choo-handbook's People

Contributors

Stargazers

Watchers

Forkers

choo-handbook's Issues

Index

Section overview

Related issues

See Also

Recommend Projects

Recommend Topics

Recommend Org