Skip to content

Instantly share code, notes, and snippets.

View CompuIves's full-sized avatar

Ives van Hoorne CompuIves

View GitHub Profile
@siddharthkp
siddharthkp / reactivconf-2017-proposal.md
Last active February 25, 2024 10:06
Building applications for the next billion users
@kitten
kitten / reactiveconf-sc-cfp.md
Last active November 17, 2020 15:06
ReactiveConf 2017 Lightning Talk CFP: With styled-components into the future

styled-components Logo

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
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());

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.