JavaScript Playground

I made Sideshow because:

1) I always wanted to start a daily digest/newsletter of some kind and I'm super passionate about side projects.

2) I wanted to learn more about JavaScript, Node.js and Redis.

And there it is. It's built with ~300 lines of code of Node.js + Express + Redis, has an admin area to manage links (I called it 'Backstage'[1]) and MailChimp API integration for automated newsletter sending (both daily and weekly).

[1]: http://i.imgur.com/rkwiMAm.png

My learning resources:

- JavaScript: http://javascriptissexy.com/how-to-learn-javascript-properly/ (I'm on week 3-4)

- Node.js: http://www.nodebeginner.org/

- Express (and Redis): http://javascriptplayground.com/blog/2012/06/node-express-todo-app-redis

P.S: Notice that there weren't any sexy AJAX stuff on the site. It's because I haven't learned one of those front-end MVC framework yet (Backbone/Angular/Ember), which should be my priority this week.

My favorite change is how configuration has been clarified. For example, see how loaders are configured now - instead of using a giant string delimited by special characters like this:

'css-loader?modules-true!postcss-loader!sass-loader'

Loaders are configured with an ordered list:

[
{
loader: 'css-loader',
options: {
modules: true
}
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader'
}
]

It takes up way more space but it's also entirely clear what's happening.

More config changes are summarized here:

http://javascriptplayground.com/blog/2016/10/moving-to-webpack-2/

The style I like to use is the css/scss webpack loader.
Basically, you import a .scss file into your .jsx.
The scss is compiled and at the same time imported into .jsx as a hashmap where the key is your scss class-name & the value is the compiled class-name. I think this sounds like what you're looking for since it keeps jsx & css in their respective files but still being coupled into their own component which is easier to reason about.

http://javascriptplayground.com/blog/2016/07/css-modules-webpack-react/