);
}
}
\ No newline at end of file
diff --git a/posts/Web Stuff/2016-09-26-webpack.md b/posts/Web Stuff/2016-09-26-webpack.md
index b953afe..8137a61 100644
--- a/posts/Web Stuff/2016-09-26-webpack.md
+++ b/posts/Web Stuff/2016-09-26-webpack.md
@@ -15,10 +15,8 @@ Webpack is something that is extremely useful when you start using javascript fr
First we will create a new project and initialize it with npm. Then install webpack globally and save it. This will allow us to run `webpack` from the command line.
```bash
-
npm init
npm install -g --save webpack
-
```
You should now have a package.json file. Create an `index.html` file in a `public` folder and create an `src` folder as well. Within src create `app.js`. This is your main javascript file in which everything will be contained.
@@ -27,11 +25,9 @@ You should now have a package.json file. Create an `index.html` file in a `publi
Let's put some dummy code in `app.js`
```javascript
-
window.onload = function(){
console.log("test123");
}
-
```
Create a new file called webpack.config.js. This is the file that webpack will look for when you run the command `webpack`. Within this file we need to define a few things in order to get started.
@@ -39,7 +35,6 @@ Create a new file called webpack.config.js. This is the file that webpack will l
`webpack.config.js`
```javascript
-
//dependencies
var webpack = require('webpack');
var path = require('path');
@@ -53,26 +48,23 @@ Create a new file called webpack.config.js. This is the file that webpack will l
filename: 'bundle.min.js'
}
}
-
```
The folder structure will look like this
-```
+```bash
root
|-package.json
|-webpack.config.js
|-src
|-app.js
-
```
Let's issue the command `webpack`. You will notice the public directory is created with `bundle.min.js`. When we are ready to deploy to production we can use `webpack -p` to minify the javascript.
The new folder structure will look like:
-```
-
+```bash
root
|-webpack.config.js
|-package.json
@@ -81,7 +73,6 @@ The new folder structure will look like:
|-public
|-index.html
|-bundle.min.js
-
```
## Webpack Loaders
@@ -93,15 +84,12 @@ Let's upgrade to ES6, because it is the new thing right? If you are unaware, ES6
There are a few different things we need to install to get all of the features of ES6. We need babel-loader as well as babel-preset-2015 for syntax and babel-polyfill for extra features.
```bash
-
npm install --save babel-loader babel-preset-es2015 babel-polyfill
-
```
Let's add the loader to the webpack config file so our ES6 gets converted to ES5 when we build with webpack. Notice `babel-polyfill` and `presets: ['es2015']`.
```javascript
-
//dependencies
var webpack = require('webpack');
var path = require('path');
@@ -131,7 +119,6 @@ Let's add the loader to the webpack config file so our ES6 gets converted to ES5
]
}
}
-
```
Just like that we can start writing ES6 javascript. We can also start using imports now and split up our javascript into multiple files.
@@ -139,7 +126,6 @@ Just like that we can start writing ES6 javascript. We can also start using impo
`print.js`
```javascript
-
//this is imported by default if functions aren't specified
export default function print(text){
console.log(text);
@@ -152,7 +138,6 @@ Just like that we can start writing ES6 javascript. We can also start using impo
export function printAgainAgain(text){
console.log(text);
}
-
```
Let's import these functions into the app. Only javascript files do not need to have file extensions when imported.
@@ -160,7 +145,6 @@ Let's import these functions into the app. Only javascript files do not need to
`app.js`
```javascript
-
//x can be named anything because it is exported from print.js by default
//we have to specify each function in {} if it is not default
import x, {printAgain, printAgainAgain} from './print';
@@ -170,7 +154,6 @@ Let's import these functions into the app. Only javascript files do not need to
printAgain(2);
printAgainAgain(3);
}
-
```
## Loading CSS with webpack
@@ -180,28 +163,23 @@ This part is going to seem confusing at first because you are probably used to i
It may seem odd to load CSS this way, but it's nice loading everything as if the webapp is a complete javascript application. For example, in Angular or React the CSS can be loaded in each component separately. This can be nice since all of your application is going to be injected into a div of the index.html file. This will make more sense if you are familiar with single page web applications.
```bash
-
npm install --save style-loader css-loader
-
```
Let's now add the loader object to the loaders array in our webpack.config.js file.
```javascript
-
{
test: /\.css$/,
loader: "style-loader!css-loader"
}
-
```
We can add some CSS now. It's also a good idea to adjust the folder structer now that we are adding some new types of files. Keep in mind when we do this the entry in webpack.config.js needs to be updated accordingly. We must also adjust the imports in the javascript files.
Create a CSS file in a new folder.
-```
-
+```bash
root
|-webpack.config.js
|-package.json
@@ -214,23 +192,19 @@ Create a CSS file in a new folder.
|-public
|-bundle.min.js
|-index.html
-
```
Let's add some CSS to test it out.
```CSS
-
html{
color: red;
}
-
```
Now we can import the CSS into our `app.js` file.
```javascript
-
//x can be named anything because it is exported from print.js by default
//we have to specify each function in {} if it is not default
import x, {printAgain, printAgainAgain} from './print';
@@ -244,6 +218,7 @@ Now we can import the CSS into our `app.js` file.
printAgainAgain(3);
}
+
```
We can then start creating more CSS files and import them into relative Angular/React components.
@@ -251,26 +226,21 @@ We can then start creating more CSS files and import them into relative Angular/
CSS is boring these days so let's use [SCSS](http://sass-lang.com/). Let's also add [autoprefixer](https://github.com/postcss/autoprefixer) so our CSS works across browsers out of the box.
```bash
-
npm install --save sass-loader node-sass postcss-loader autoprefixer
-
```
We have a few more thins to do now before this works. We need to add a new loader for SCSS files.
```javascript
-
{
test: /\.scss$/,
loader: "style-loader!css-loader!postcss-loader!sass-loader"
}
-
```
We also need to import `autoprefixer` and tell postcss to use it. The new `webpack.config.js` file is below.
```javascript
-
//dependencies
var webpack = require('webpack');
var path = require('path');
@@ -310,7 +280,6 @@ We also need to import `autoprefixer` and tell postcss to use it. The new `webpa
return [autoprefixer]
}
}
-
```
Now we just need to change our CSS file to an SCSS file. Also remember to change the import in the javscript file. Just like that we can start writing SCSS and not have to worry about the annoyance of adding CSS prefixes.
diff --git a/readme.md b/readme.md
index 7f0b8fc..198ee88 100644
--- a/readme.md
+++ b/readme.md
@@ -1,20 +1,21 @@
# A new branch to rebuild this entire application using:
- ReactJS
-- Go App Engine
+- GoLang Server
+- Hosted on Digital Ocean
-`npm run build` - builds the application using webpack and runs metadata.js
-`npm run
- metadata.js recursivly scans the posts folder for markdown files and then parses each into into a json object
- the posts folder is then copied into the dist folder
+- `npm run deploy`
+ - installs go/npm dependencies
+ - builds Go files into executable
+ - builds/minifies js/css files into pulic folder
+ - parses markdown files with metadata.js
+ - executes server binary
+
## TODO
- sticky footer
- clean up css
-- adjust animations
-
+- adjust/remove? animations
- fix go and webpack-dev-server so paths work correctly
-- add sensor page
-- add paging
-
-- finally do writeups on my projects
\ No newline at end of file