Latest post

React scroll decorator

17 May 2017

Muffin Man's writings

or the front end playground

Front end development, maybe occasional rants and music.

Always use <button> for clickable elements

Always try to use <button> when element is clickable, but it is not a link. Avoid <a>, <span>, <div> and other elements.

Note that display: flex works differently on buttons in different browsers, but we have easy fix for that.

Read more

SASS random() and circle animation

I decided to move my CSS playground to the CodePen, and this is the first one I made.

Idea came to me while I was riding on a bus, and I might use it on this blog, as a part of it’s redesign.

This is CSS only animation (I used JS to create 50 elements though). And you can see the usage of SASS random() function.

Read more

Setting up Webpack, Babel and React from scratch - Part 2

2 Comments

Part two

Update: Part two is pretty much done. Part three will cover redux and production builds.

Other parts:

  • Part 1 - Webpack, Babel, React, Router, ESLint
  • Part 2 - SASS, More ES6 goodness (Static props, decorators, deconstruction…)
  • Part 3 - Where to go from here

Adding SASS

We will use SASS loader for webpack, so let’s install it together with node-sass compiler, css and style loaders

npm install --save-dev style-loader css-loader sass-loader node-sass

Create scss folder in the app folder, and main app.scss file in it. This file will include all of the other scss files.

Now we need to add a loader to webpack config file.

Read more

Setting up Webpack, Babel and React from scratch

19 Comments

Update, March 2017

Webpack 2 is out, so this post is slowly becoming outdated. For webpack 2 - react boilerplate please check this post.

This is a living guide

This is the first part of the guide that will be changed over time. For now it covers Webpack, Babel (for ES6) and React with React Router.

Next parts will contain more stuff - static properties, decorators, SASS, development and production configs, immutables… Also redux part should be updated really soon.

So stay tuned!

Other parts:

  • Part 1 - Webpack, Babel, React, Router, ESLint
  • Part 2 - SASS, more ES6 goodness (Static props, decorators, deconstruction…)
  • Part 3 - Where to go from here

Before we start

I’ll assume that you have a basic knowledge of the unix terminal, and that you have read what Webpack, Babel and React are.

Webpack

For a start, install node and npm from https://nodejs.org/en/.

Read more

I washed my headphones

Recently I lost my iPhone headphones. I didn’t care much, as they were almost 3 years old, and I had a brand new ones. But today, while getting ready for work, I found them in the pocket of the pants I washed about week ago.

I was sure they wouldn’t work, but guess what? They do! Probably the fact that they dried for days helped.

So I guees I have a spare pair of headphones now :)