Ives van Hoorne CompuIves

This proposal is not longer active. Context: https://twitter.com/siddharthkp/status/909818777314902016

With styled-components into the future

Preprocessing is dead, long live preprocessing!

This is a CFP for ReactiveConf 2017's open call for Lightning talks. If you'd like to see this talk become a reality, please ⭐ star this gist. #ReactiveConf

JavaScript Style Library Wishlist

Familiar CSS syntax: Using CSS syntax makes it easier to copy/paste code from devtools and the internet, and a huge productivity boost.
SCSS like & shorhand: Super nice to write things like &:hover without having to write selectors again.
Nesting media queries: Nice to nest media queries inside a style block instead of having to declare it like plain CSS.
Support for CSS animations: CSS animations are great :)
No coupling to HTML tag: HTML tags have semantic meaning, and coupling styles to HTML tags makes it harder to re-use the same styles, for example, sometimes some of my buttons and links have similar styles and I don't wanna repeat them.
Easy to override styles: Overriding styles is one of the main pain points. Many libs don't do anything special and just produce different class names for the styles I declare. Due to no class name having higher specificity, the styles depend on the declaration order which can produce inconsistent

Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.

	function* runTimer(getState) {

	while(yield take('START')) {
	while(true) {
	const {stop, tick} = yield race({
	stop : take('STOP'),
	tick : call(wait, ONE_SECOND);
	})
	if ( !stop ) {
	yield put(actions.tick());