Vanilla JS carousel

I have created a Vanilla JavaScript carousel. This has been built using https://github.com/guitarbeerchocolate/vanilla-js-component and resides at https://github.com/guitarbeerchocolate/vanilla-js-carousel
It employs :

• HTML5
• SASS
• BEM
• ES6

Vanilla JS component

I'm creating a number of elements using Vanilla JavaScript. They will use :

• HTML5
• SASS
• CSS grid
• BEM
• Media queries
• ES6

In order to put these elements together more efficiently, I have put together a small framework, from which I will fork.
It lies at https://github.com/guitarbeerchocolate/vanilla-js-component

Vanilla JavaScript Login form POST handler using fetch

I've been updating my gists lately because I'm now in position to leave jQuery behind. See https://gist.github.com/guitarbeerchocolate
So, here's how to pass login form data to some middleware and accept JSON in return using fetch.

const form = document.querySelector('form');
form.addEventListener('submit', function(ev) {
  ev.preventDefault();
  const url = this.getAttribute('action');
  const method = this.getAttribute('method');

  fetch(url, {
    method: method,
    body: new FormData(form)
  }).then(function(response) {
    return response.json()
  }).then(function(json) {
    console.log('json.username', json.username)
    console.log('json.password', json.password)
  }).catch(function(error) {
    console.log('parsing failed', error)
  })
});

Cross browser font CSS

font-weight: 400;
font-size: 1rem;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
line-height: 1.6;
color: #555;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-font-feature-settings: "liga", "kern";
text-rendering: optimizelegibility;
background-color: #fff;​

Prevent caching using .htaccess

Sometimes your pages and scripts etc get cached forcing you to examine whether you really did save the file you're working on, or pressing ctrl-f5 to make sure you have the up to date version in your browser. To cut down on this confusion follow the instructions below.
cd myApp
touch .htaccess
Now add the following to the .htaccess file, which will prevent caching
<filesMatch "\.(html|js|css)$">
  FileETag None
  <ifModule mod_headers.c>
     Header unset ETag
     Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
     Header set Pragma "no-cache"
     Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
  </ifModule>
</filesMatch>
Remember to remove this when you've finished developing.

The 2018 Web Developer : Getting the latest node modules

Look at the example package.json below, and in particular, the 'devDependencies' section.
{
  "name": "webpack-playlist-update",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
"devDependencies": {
    "babel-core": "*",
    "babel-loader": "*",
    "babel-preset-es2015": "*",
    "css-loader": "*",
    "sass-loader": "*",
    "style-loader": "*",
    "webpack": "*"
  }
}
The asterisks will tell npm to find the latest versions of those modules on the following command:
npm install

The 2018 Web Developer : Installing webpack

webpack is a node module which allows us to package source files into a single bundle to cut down on the number of HTTP requests.
I'm going to assume we have a directory called 'myApp' and an index.html
cd myApp
npm init -y
This will create a package.json file.
Within package.json, add some text to the "description" field to avoid a warning at the next stage.
If you're not going to use git at this stage also within package.json, add the line "private": true,
Again this is to avoid warnings.
Now we're ready to take node modules.
npm install webpack webpack-cli --save-dev
Now we create a file for configuring webpack.
touch webpack.config.js
Now let's create a directory structure for our source.
mkdir src
cd src
mkdir js
mkdir css
cd js
touch output.js
Now let's add some code to output.js and save.
console.log('Hello world!');
Now let's go back to the myApp directory.
cd ../..
Now we can edit the webpack.config.js file.
Add the following content to webpack.config.js and save.
const path = require('path');
module.exports = {
  mode: 'development',
  entry: './src/js/output.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}
You can see from the code above a number of things:

• A 'path' constant to be used to establish where to get files from.
• A module.exports object.
• The mode in which we're working.
• 'entry' is the start location that webpack will look to find the things it need to bundle.
• 'output' is the location of the bundle.

So our HTML file, index.html will look like this:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack</title>
  </head>
  <body>    
    <script src="./dist/bundle.js"></script>
  </body>
</html>
Now it's time to run webpack
From the command line, and in the 'myApp' directory type:
webpack
The result should be a directory called 'dist', which contains a file called bundle.js.
When loading the page, if we look at the console. It should say 'Hello world!'.