Setting up a minimal Webpack 4 with react

This is my basic setup to get started for react using webpack 4.

1. First initialize your app. In a new folder run:
$ npm init -y

2. Install your dependencies.

Start with your core modules.
$ npm i -D webpack html-loader file-loader clean-webpack-plugin html-webpack-plugin webpack-dev-server

Also React
$ npm i -S react react-dom

Finally Babel for react and webpack
$ npm i -D babel-loader babel-core babel-preset-env babel-preset-react

I also install Sass dependencies
$ npm i -D sass-loader node-sass css-loader style-loader extract-text-webpack-plugin

Optionally Bootstrap and GSAP
$ npm i -S bootstrap jquery popper.js
$ npm i -D postcss-loader precss
$ npm i -S gsap

3. Create your .babel.rc with the following content

{
    "presets": [
        "env",
        "react"
    ]
}

4. Include this start script in your package.json

"scripts": {
    "start": "webpack-dev-server",
    "build": "webpack -p"
},

5. Create a basic app:

main.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './main.scss';
    import App from './component/App';

    ReactDOM.render(<App />, document.getElementById('main'))

main.css

@import "~bootstrap/dist/css/bootstrap";

component/App.cs

import React, { Component } from 'react';
import { TweenMax } from 'gsap';
import 'bootstrap';
import './App.scss';
class App extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div className="app">
                <div className="card">
                    <div className="card-body">
                        <h1>Webpack Template 2</h1>
                    </div>
                </div>
            </div>
        );
    }
}
export default App;

component.App.scss

body {
    background: grey;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webpack template</title>
</head>
<body>
    <div id="main">
        <h1>Webpack template</h1>
        <p>Loading...</p>
    </div>
</body>
</html>

That’s it!

Just npm start.


Setting up a minimal Webpack 4 and Babel for NodeJS server

This is my basic setup to get started on a NodeJS server.
It uses Webpack 4 with Babel to take advantage of ES6 imports.

1. First initialize your app. In a new folder run:
$ npm init -y

2. Install your dependencies.

$ npm i -D babel-cli babel-preset-env nodemon

3. Create your .babel.rc with the following content

{
    "presets": [
        "env"
    ]
}

4. Include this start script in your package.json

"start": "nodemon main.js --exec babel-node --presets babel-preset-env"

5. Create a main.js and add a console.log

<code>console.log('Hello World!');</code>

That’s it!

Just npm start.

Upgraded to windows 8?

if you did, you need to learn this basic shortcuts to make the transition easier:

Winkey: toggles between Start Menu and last app
Winkey + D: opens Desktop
Winkey + C: opens “Charms” bar
Winkey + E: opens file explorer
Winkey + F: searches for files
Winkey + I: opens the Settings charm (to shut down your computer, for example)
Winkey + Z: opens “app bar” (the menu user interface that is normally hidden when interacting with a Windows 8 app)
Winkey + X: opens the “power user” menu (which includes programs and features, power options, event viewer, system, device manager, disk management, computer management, command prompt, task manager, control panel, file explorer, search, run)

Cowcrossing.com version 2 launched!!

Just launched version 2 of my site for cowcrossing.com.

6 months in development from concept to design to production. It boasts HTML5, css3 and Javascript.  The site is built on ModX CMS backend for easy updating.

The decision was made to go with ModX over drupal for its flexibility. With ModX, you are not limited on what you can do creatively as you are with drupal, joomla or even wordpress.

You might wonder why it took so long, but consider having no experience in front end development. The first month was spent designing the site. One month spent learning HTML5, another month learning CSS3, another month learning JavaScript, and 2 months learning the ModX system and PHP 5.0.

Let me know if you have any constructive feedback.

TextMate: Proficiency tips for HTML/CSS development

The best code editor for the mac is textmate. It’s old, and outdated, but still the best due to its customizable bundles.

If you are doing html/css work, the one bundle you need is here: http://minimaldesign.net/downloads/tools

After you download and install it, here are the most common used commands.

  • Command option period (this will finish your tag)
  • Option drag (make block selections)
  • Command / (this will make block comments)
  • Command T (global search in a project)
  • Control shift < (creates start and end tags)
  • Control shift W (wrap a selection in a new tag)
  • Control shift D (duplicate a line)

SVN: Set system wide ignore for os X

If you worked with svn client on macs, especially with FlashBuilder projects, you will notice all hidden project files shows up, and you have to remember not to commit them to the svn repository.

There is a simple way to set a system wide ignore setting to make your svn client always ignore certain files.

First, make sure you have “show hidden files” enabled, then go to your home folder to .subversion folder.
From there, open the “config” file. Open up that baby and scroll down to the line with # global-ignores =
You can add any file extension there for your svn client to ignore globally.

I added the following for flashbuilder specific files that I normally would not commit to svn:
.DS_Store .settings .flexLibProperties bin- debug .actionScriptProperties .project .flexProperties

It should look something like this:

New Year, New home work space.

New year needs a new work space. Thanks to IKEA.

You are seeing two table tops 59″ x 30″ x 1″ ($60 each). They were stained and covered polyurethane, and sanded with 220 grit for a smooth finish.

Attached with adjustable height legs for a 32″ lift. ($15 each).

Couple of book shelfs above that and you have a lot of space then what i had before.

The ultimate chair – Herman Miller Embody

Took the executive chair back to costco and replaced it with the Herman miller embody chair. As comfortable as the costco chair looked, it is not suitable for working.
Executive chairs are inclined slightly backwards so after few hours on the computer creates a stress on your neck. Chairs made for working has a slight incline forward making it easier to sit for many hours.