Popcode

A New Tool for Novice Web Developers

(live demo)

The web doesn’t give meaningful feedback about mistakes

Popcode aims to fix that

How Popcode Works

html-inspector
htmllint
slowparse 		css
PrettyCSS 		esprima
jshint

How Popcode Works


E019: (error) => ({
  reason: 'unmatched',
  payload: {openingSymbol: error.a, closingSymbol: match[error.a]},
  suppresses: ['end-of-input'],
}),

W003: (error) => ({
  reason: 'undefined-variable',
  payload: {variable: error.a},
}),

How Popcode Works


"unmatched": "There is a __openingSymbol__ on this line
  that needs a closing __closingSymbol__",

"undefined-variable": "You can't use the variable
  __variable__ before declaring it.",

Popcode’s Design

  • Client-side only
  • Auth and storage with Firebase
  • Export gists to submit work

Popcode: the code

  • React!
  • Redux!
  • ImmutableJS!
  • ES2016!
  • Webpack!
  • Some tests!
  • OK code!

Challenges

The Limits of Linters


.red
  color: red;
}
                

.red a: hover {
}
block-expected block-expected

Slow Networks

I am bad at design

Want to contribute?

OK!

github.com/popcodeorg/popcode

@popcodeorg

mat.a.brown@gmail.com