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.

AngularJS 1.5: component router with NPM

The new angular component router is changing quickly.

The current docs on angular which can be found here seems to be outdated
https://docs.angularjs.org/guide/component-router

The documentation ask for the following
npm install @angular/router –save

As of April 2016, the way to install the new angular component router using NPM is
npm install @angular/router@0.2.0 --save

angular_router_installation_banner

Once installed, include it in your script
<script src="/node_modules/@angular/router/angular1/angular_1_router.js">

AngularJS: DOM manipulation the angular way.

At first, when trying to manipulate a DOM with jQuery, you are tempted to do it in the controller. That is highly discouraged to enforce the concept of declarative approach.

Here is a very simple concept of DOM manipulation in AngularJS.
For example, say we have a box, and on click we want to fade it out.
The html would look like this (including 3 ways to pass in value):

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
     <div 
       class="box" 
       data-ng-click="boxClick(100)" 
       data-mm-box="200"
       data-fade-duration="300">
     </div>
  </div>
</div>

simple css:

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

And the javascript:

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.boxClick = function(value) {
      this.doBoxClick(value);
  };
}

myApp.directive("mmBox", function() {
  return {
    link: function(scope, elem, attrs) {
      var duration = parseInt(attrs.mmBox);
       scope.doBoxClick = function(value) {
         console.log("1. " + value);
         console.log("2. " + attrs.mmBox);
         console.log("3. " + attrs.fadeDuration); 
         elem.fadeOut(duration);
      }
    } 
  }
});

Notice I put in two other ways to pass in values so the directive is not hard coded to any value and can be reused.

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)

Javascript: A better alternative to setInterval

setInterval can be bad js because of its nature to continuously get called rather the methods inside is lagging or not.

setInterval(function() {
	doStuff..
}, 100)

A better approach is to use a self executing anonymous function.

(function() {
	
	doStuff..

	setTimeout(arguments.callee, 100)
})();

The only problem is that arguments.callee is deprecated so a work around is to name the anonymous function.

(function blah() {
	
	doStuff..

	setTimeout(blah, 100)
})();

GIT learning resources

Still using SVN? It’s time to switch to GIT. Here is a round up of resources:

Roundups
– Git Roundup by @kevinSuttle http://answers.oreilly.com/topic/801-how-to-learn-git-a-link-roundup/

Walkthroughs
– Git, the Simple Guide http://rogerdudler.github.com/git-guide/
– Gitimmersion http://gitimmersion.com/
– Github’s help documents http://help.github.com/
– Let’s suck at Github together by +Chris Coyier http://css-tricks.com/video-screencasts/101-lets-suck-at-github-together/
– Git for Designers http://hoth.entp.com/output/git_for_designers.html
– Think Like a Git http://think-like-a-git.net/ via +Ryan Anklam

eBooks
– Pro Git http://progit.org/book/
– Git from the Ground Up http://ftp.newartisans.com/pub/git.from.bottom.up.pdf
– Getting Good with Git http://rockablepress.com/books/getting-good-with-git via +Paul de Wouters

References
– Gitref http://gitref.org/
– Github’s help documents http://help.github.com/

Articles
– A Successful Git Branching Model http://nvie.com/posts/a-successful-git-branching-model/

Clients
– Git Tower http://www.git-tower.com/
– Git Box http://www.gitboxapp.com/

Training
– Online Github Training https://github.com/training/free

Originally posted here: https://plus.google.com/103751101313992876152/posts/XRT3CsuwBTo

Auto refresh browser during web development

The more I am doing web development, one thing I do more then anything else is to update my html/css/javascript code, save, switch to a browser and refresh.

This become tiring so I started looking for the best app that watches a folder for changes and updates the browser automatically.

The Best solution out there currently is CodeKit, which not only solves my basic issue but also does a lot more. It’s main purpose is to support preprocessing. Very handy when you start using more advanced features like sass, less or jade.

The only draw back to code kit is that it requires Mac Lion OS. This is a problem since my work computer has snow leopard. If you are in this situation then there is a second recommendation

Live reload does pretty much everything Code Kit does but runs on snow leopard. From reading both features, CodeKit has better performance since it utilizes the new features only found in Lion.

CodeKit will run you $20 while Live reload cost $10.