Responsive and animated D3.js bar chart with positive and negative values (TypeScript)

Animated counter

Fetch public photos from Instagram without the API

Full-width element inside an element with fixed width

Global HTTP request and response handling with the Axios interceptors

Switch between the dark and light mode via CSS custom properties

Javascript URL handling

Material Design like form input text fields with CSS only

GitHub issues as blog post comments

How to use GitHub issues for blog post comments (with examples for Next.js)

I recently updated my blog to use GitHub issue tracking for the comments. The previously used Facebook Comments plugin didn't work so smoothly anymore, so it was time to evaluate alternatives. This blog post shows examples of how to integrate GitHub issues with Next.js.

This post is mainly a personal reference for [Git][1] CLI commands, which I use more or less frequently. This will be living documentation, that will be updated from time to time.

I mainly work with the command line. For merge conflicts, diffs, and patch selections I prefer VS Code's UI.

## Clone and pull

### Clone a project into a current directory

```bash
git clone <project url> .
```

### Change the remote origin

```bash
git remote set-url <remote_name> <remote_url>
git remote -v
```

Or edit via `.git/config` file.

### Pull and rebase after someone else force pushed into a branch

```bash
git pull origin <branch> --rebase
```

## Set the committer identity

### Globally

```bash
git config --global user.name "Someone"
git config --global user.email "someone@somewhere.com"
```

### Locally for a single repository

```bash
git config user.name "Someone"
git config user.email "someone@somewhere.com"
```

## Branches

### Create a new branch and checkout the branch with a single command

```bash
git checkout -b <branch>
```

### Deleting local and remote branches

__Local__

```bash
git branch -d <branch> # To see if there are unmerged changes
git branch -D <branch>
```

__Remote__

```bash
git push origin --delete <branch>
```

### Rename a local branch

```bash
git checkout <branch>
git branch -m <new-branch-name>
```

## Rebase, amend, and cherry-picking

### Select how many commits you want to rebase

```bash
git rebase -i HEAD~6
```

### Force push rebased changes

```bash
git push origin <branch> --force
```

### Stop for amending

Use the `rebase` command and mark wanted commits by "e", which means that when doing the rebase it will stop for amending.

```bash
git rebase -i HEAD~6
git commit --amend
git rebase --continue
```

### Change the date of the last commit

```bash
git commit --amend --date="now"
```

### Change the committer of the last commit

```bash
git commit --amend --author="Someone <someone@somewhere.com>"
```

### Cherry-pick a commit

```bash
git cherry-pick <commit-hash>
```

## Stash changes and clean up the working directory

### Stash changes (also untracked)

```bash
git stash -u
```

### List all stashes

```
git stash list
```

### Add a stash back to working directory

```
git stash apply stash@{1}
```

## Reflog

### Show Git reflog with dates

```bash
git reflog --date=iso
```

[1]: https://git-scm.com

Git commands reference

This post is mainly a personal reference for Git CLI commands, which I use more or less frequently. This will be living documentation, that will be updated from time to time. I mainly work with the command line. For merge conflicts, diffs, and patch selections I prefer VS Code's UI.

*__Update 4.12.2021:__ Unfortunately, this doesn't work anymore due to changes on the Instagram side.*

This is a short demo about how you can fetch your Instagram photos without the usage of Instagram API, which requires a user to authenticate.

<a href="https://codepen.io/teroauralinna/pen/YzzVxwV" class="embedly-card" data-card-width="100%" data-card-controls="0">Embedded content: https://codepen.io/teroauralinna/pen/YzzVxwV</a>

This technique is based on the `<script>` tag found from the Instagram profile page. Script tag has the data, which we will parse by regular expression.

```js
const instagramRegExp = new RegExp(/<script type="text\/javascript">window\._sharedData = (.*)<\/script>/)
```

The following function will fetch the profile page. It parses the Instagram data to JSON and returns an array of objects holding an image page URL, image source URL, and caption. 

```js
const fetchInstagramPhotos = async (accountUrl) => {
  const response = await axios.get(accountUrl)
  const json = JSON.parse(response.data.match(instagramRegExp)[1])
  const edges = json.entry_data.ProfilePage[0].graphql.user.edge_owner_to_timeline_media.edges.splice(0, 8)
  const photos = edges.map(({ node }) => {
    return {
      url: `https://www.instagram.com/p/${node.shortcode}/`,
      thumbnailUrl: node.thumbnail_src,
      displayUrl: node.display_url,
      caption: node.edge_media_to_caption.edges[0].node.text
    }
  })
  return photos
}
```

Calling the function:

```js
try {
  const photos = await fetchInstagramPhotos('https://www.instagram.com/sunsetwithbubbles/')
  // Do something with the photos
} catch (e) {
  console.error('Fetching Instagram photos failed', e)
}
```

You must wrap this into an async function.

*Note that this might break anytime if Instagram changes its source code, and this works only for the public profile. Also, it's possible to fetch only 12 images with this technique.*


How to fetch your public photos from Instagram without the API

This post contains a short demo about how you can fetch your Instagram photos without the usage of Instagram API, which requires a user to authenticate. This technique is based on the <script> tag found from the Instagram profile page. Script tag has the data, which we will parse by regular expression.

I use [CodePens][1] in my blog posts and recently I noticed that there is an issue which prevents displaying CodePen embeds correctly. I use [Contentful][2] to manage blog posts content. Contentful supports embedding content via [Embedly][3].

But for some reason, Embedly fails to show my CodePens in some cases. I couldn't find the reason nor any way to load them. They just didn't load. So I decided to stop hitting my head against the wall and make an implementation without Embedly.

I still use the existing embed feature in Contentful to embed CodePens. This way I get a nice preview on Contentful editor. But on the client-side, I load CodePens differently. Also because I don’t load Embedly’s Platform.js anymore I get a minor performance boost by loading fewer scripts.

## Loading the CodePens

Contentful embedding produces HTML like below. We will turn this into a CodePen embed.

```html
<p>
  <a href="https://codepen.io/teroauralinna/pen/rZZGpe" class="embedly-card">
    Embedded content: https://codepen.io/teroauralinna/pen/rZZGpe
  </a>
</p>
```

### Service for loading CodePens

This new service will handle the CodePen embed script loading on-demand and then it will load embedded pens.

Method `initCodePens` finds all the `.embedly-card` elements and inserts needed attributes.

After that `loadCodePens` will either insert CodePen embed script into the head or if the script is already loaded it will call the method to load CodePens.

#### code-pen-embed.service.ts

```typescript
import { Injectable, Inject, PLATFORM_ID } from '@angular/core'
import { isPlatformBrowser } from '@angular/common'
import { environment } from 'environments/environment'

@Injectable()
export class CodePenEmbedService {

  private CODEPEN_REGEX: RegExp = new RegExp(`https://codepen.io/${environment.codePenSettings.user}/pen/([a-zA-Z0-9]+)`)
  private CODEPEN_SCRIPT_ID: string = 'codepen-script'
  private CODEPEN_SCRIPT_SRC: string = 'https://static.codepen.io/assets/embed/ei.js'

  constructor(@Inject(PLATFORM_ID) private platformId: Object) {
  }

  public init() {
    if (isPlatformBrowser(this.platformId)) {
      this.initCodePens()
      this.loadCodePens()
    }
  }

  private initCodePens() {
    const embeds = Array.from(document.querySelectorAll('.embedly-card'))
    embeds.forEach(embed => {
      const codePenUrl = embed.getAttribute('href')
      const match = codePenUrl.match(this.CODEPEN_REGEX)
      const codePenId = match ? match[1] : null
      if (codePenId) {
        const embedParent = embed.parentElement
        embedParent.classList.add('codepen')
        embedParent.setAttribute('data-height', '700')
        embedParent.setAttribute('data-theme-id', 'dark')
        embedParent.setAttribute('data-default-tab', 'result')
        embedParent.setAttribute('data-user', environment.codePenSettings.user)
        embedParent.setAttribute('data-slug-hash', codePenId)
        embedParent.setAttribute('data-preview', 'true')
      }
    })
  }

  private loadCodePens() {
    if (document.getElementById(this.CODEPEN_SCRIPT_ID)) {
      window.__CPEmbed('.codepen')
    } else {
      const script = document.createElement('script')
      script.id = this.CODEPEN_SCRIPT_ID
      script.src = this.CODEPEN_SCRIPT_SRC
      script.type = 'text/javascript'
      script.defer = true
      document.querySelector('head').appendChild(script)
    }
  }
}
```

### Register the new service

#### app.module.ts

```typescript
import { CodePenEmbedService } from '@services/code-pen-embed.service'

@NgModule({
  ...
  providers: [
    ...
    CodePenEmbedService
  ],
  ...
})
```

### Add service to the component

Lifecycle method `ngAfterViewChecked` will be called multiple times so `codePenNeedsInitialize` variable must be set to `true` when CodePens  need initialization.

```typescript
import { CodePenEmbedService } from '@services/code-pen-embed.service'

export class ExampleComponent implements AfterViewChecked {

  private codePenNeedsInitialize: boolean = true

  constructor(
    private codePenEmbedService: CodePenEmbedService
  ) {}

  ngAfterViewChecked() {
    if (this.codePenNeedsInitialize) {
      this.codePenEmbedService.init()
      this.codePenNeedsInitialize = false
    }
  }
}
```


[1]: https://codepen.io/teroauralinna
[2]: https://www.contentful.com
[3]: https://embed.ly

CodePen embeds with Contentful and Angular

I use CodePens in my blog posts and recently I noticed that there is an issue which prevents displaying CodePen embeds correctly. I use Contentful to manage blog posts content. Contentful supports embedding content via Embedly. But for some reason, Embedly fails to show my CodePens in some cases. I couldn’t find the reason nor any way to load them. They just didn’t load. So I decided to stop hitting my head against the wall and make an implementation without Embedly.

This is a short example of how to catch all [Axios][1] HTTP requests, responses, and errors. Catching is implemented with the Axios feature called [interceptors][2]. It's possible to catch all requests before they are sent and modify them. Also, responses and errors can be caught globally. For example, interceptors are useful when you want to modify request headers before a request is sent or you are implementing some kind of global error handling system.

Of course, for real use case, it might be too general to handle all requests and responses in the same way. That’s why we will also have a configuration option for each HTTP requests to disable global handling.

## The demo is available at [CodePen][3]

In the demo, I have used [VanillaToasts][4] library to show a notification when a HTTP request is done.

<a href="https://codepen.io/teroauralinna/pen/vPvKWe" class="embedly-card" data-card-width="100%" data-card-controls="0">Embedded content: https://codepen.io/teroauralinna/pen/vPvKWe</a>

## Installing Axios

Start by [installing Axios][5] by the instructions.

Create a new [instance][6] and add any global config options you might need to use.

```javascript
const axiosInstance = axios.create({
  baseURL: 'https://...'
})
```

## Making HTTP request handler configurable

Add `isHandlerEnabled` function which will check if the global handler should be used or not. Here it's also possible to implement additional custom logic. For example, enabling the handler only for the certain HTTP response codes.

```javascript
const isHandlerEnabled = (config={}) => {
  return config.hasOwnProperty('handlerEnabled') && !config.handlerEnabled ? 
    false : true
}
```

Now we are later able to disable handler for an individual HTTP call if we want to.

```javascript
await axiosInstance.get('/v2/api-endpoint', { handlerEnabled: false })
```

## Axios request interceptor

### Add request handler

One common use case for a request handler is to modify or add new HTTP headers. For example, an authentication token could be injected into all requests.

```javascript
const requestHandler = (request) => {
  if (isHandlerEnabled(request)) {
    // Modify request here
    request.headers['X-CodePen'] = 'https://codepen.io/teroauralinna/full/vPvKWe'
  }
  return request
}
```

### Enable request interceptor

```javascript
axiosInstance.interceptors.request.use(
  request => requestHandler(request)
)
```

## Axios response and error interceptors

### Add response handlers

```javascript
const errorHandler = (error) => {
  if (isHandlerEnabled(error.config)) {
    // Handle errors
  }
  return Promise.reject({ ...error })
}

const successHandler = (response) => {
  if (isHandlerEnabled(response.config)) {
    // Handle responses
  }
  return response
}
```

### Enable interceptors

```javascript
axiosInstance.interceptors.response.use(
  response => successHandler(response),
  error => errorHandler(error)
)
```

And now every request made by Axios uses the handlers we have defined.


[1]: https://github.com/axios/axios
[2]: https://github.com/axios/axios#interceptors
[3]: https://codepen.io/teroauralinna/pen/vPvKWe
[4]: http://alexkvazos.github.io/VanillaToasts/
[5]: https://github.com/axios/axios#installing
[6]: https://github.com/axios/axios#creating-an-instance

Global HTTP request and response handling with the Axios interceptor

This is a short example of how to catch all Axios HTTP requests, responses, and errors. Catching is implemented with the Axios feature called interceptors. It's possible to catch all requests before they are sent and modify them. Also, responses and errors can be caught globally. For example, interceptors are useful when you want to modify request headers before a request is sent or you are implementing some kind of global error handling system.

This blog post shows how to setup webpack 4 module bundler for development. This webpack tutorial contains many common examples you might need to configure when doing JS application development with the webpack.

The demo is available at my [GitHub repository](https://github.com/teroauralinna/webpack-guide). The demo includes a couple of example components. These components really don't do anything reasonable. They are there just to prove config changes work when we are adding new things.

I realized that I have never really configured the whole webpack development workflow by myself. It's usually already done when you start using JS framework like Vue.js or Angular. So that's the inspiration for this blog post.

## Following tasks are covered

1. Setup webpack-dev-server and npm build scripts
2. Add index.html and generated Javascript bundle
3. Add webpack alias to make it easier to import files
4. Transform ES6 to ES5 with Babel
5. Import and inject CSS code
6. Extracting all CSS into a single file
7. Handle files by file-loader
8. Inline SVG elements
9. Apply CSS vendor prefixes by postcss-loader and autoprefixer
10. Optimize CSS and Javascript assets by minifying
11. Use TypeScript with @babel/preset-typescript
12. Separate dev and prod environments

## Prerequisite

Here are minimum configs we are starting to fill. Also, you should have [Node.js](https://nodejs.org/en/) installed before starting.

__webpack.config.js__

```js
const path = require('path');

module.exports = {
  entry: './src/app',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.[contenthash:8].js',
    publicPath: '/'
  },
  resolve: {
    modules: [
      'node_modules',
      path.resolve(__dirname, 'src')
    ],
    extensions: ['.js'],
  }
}
```

__package.json__

```json
{
  "name": "webpack-guide",
  "version": "1.0.0",
  "description": "webpack 4 guide",
  "main": "app.js",
  "dependencies": {
  },
  "devDependencies": {
  },
  "author": "John Doe",
  "license": "ISC"
}
```

## Setup webpack-dev-server and npm build scripts

__Install [webpack-dev-server](https://github.com/webpack/webpack-dev-server)__

```bash
$ npm i webpack-dev-server webpack-cli webpack --save-dev
```

__Add following npm scripts to package.json__

```json
  "scripts": {
    "build": "rm -rf ./dist/ && webpack --mode production --config webpack.config.js",
    "dev": "webpack-dev-server --mode development --config webpack.config.js"
  }
```

It's possible to build our app for the first time after we add the `./src/app.js` file. App.js is the entry point of our app.

## Add index.html and generated Javascript bundle

Though there still is nothing to show in a browser. So let's add `index.html` file and add generated JS bundle into that file. This can be done with [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin).

__Install html-webpack-plugin__

```bash
$ npm i html-webpack-plugin --save-dev
```

__Create index.html__

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title><%= htmlWebpackPlugin.options.title %></title>
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

</body>
</html>
```

__Add configuration into the webpack.config.js__

```js
const HtmlWebpackPlugin = require('html-webpack-plugin');

...

  plugins: [
    new HtmlWebpackPlugin({
      title: 'Setting up webpack 4',
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true
      },
    })
  ]
```

Now we can start the app with `npm run dev` and navigate to the address http://localhost:8080. We'll see blank page with the title __Setting up webpack 4__.

## Add webpack alias to make it easier to import files

With alias, we don't have to use relative import paths which are annoying most of the time.

As an example we can use `import { header } from '@components'` instead of using `import { header } from '../../components'`.

__webpack.config.js__

```js
  resolve: {
    alias: {
      '@components': path.resolve(__dirname, 'src/components'),
      '@scss': path.resolve(__dirname, 'src/scss'),
      '@img': path.resolve(__dirname, 'src/img'),
      '@': path.resolve(__dirname, 'src')
    }
  }
```

## Transform ES6 to ES5 with Babel

I want to write ES6 instead of older Javascript syntax so let's add [Babel](https://babeljs.io) config for the transpiling.

__Install Babel and babel-loader__

```bash
$ npm i babel-loader @babel/core @babel/preset-env --save-dev
```

__Add configuration into the webpack.config.js__

```js
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
```

## Import and inject CSS code

To import and use CSS styles we need to add new loaders. [Css-loader](https://github.com/webpack-contrib/css-loader) imports content to a variable and [style-loader](https://github.com/webpack-contrib/style-loader) injects content into the HTML file as an inline tag. 

__Install__

```bash
$ npm i style-loader css-loader --save-dev
```

__Add configuration into the webpack.config.js__

```js
      {
        test: /\.css$/,
        use: [
          "style-loader", 
          "css-loader"
        ]
      }
```

To support SCSS as well we will add `sass-loader` and `node-sass`.

__Install sass-loader and node-sass__

```bash
$ npm i sass-loader node-sass --save-dev
```

__Add sass-loader into the existing style configuration block__

```js
      {
        test: [/.css$|.scss$/],
        use: [
          "style-loader", 
          'css-loader', 
          'sass-loader'
        ]
      }
```

## Extracting all CSS into a single file

Now we are able to style our application. Style-loader styles are injected as an inline. We can extract styles with [css-mini-extract-plugin ](https://github.com/webpack-contrib/mini-css-extract-plugin)  if we want to use an external stylesheet file. This stylesheet will be then injected into the `index.html` automatically.

__Install__

```bash
$ npm i mini-css-extract-plugin --save-dev
```

__webpack.config.js__

```js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

...

      {
        test: [/.css$|.scss$/],
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader", 
          "sass-loader"
        ]
      }
      
...

  plugins: [
    ...
    new MiniCssExtractPlugin({
      filename: 'app.[contenthash:8].css',
    }),
    ...
  ]

```

## Import images by file-loader

To include images we need to configure [file-loader](https://github.com/webpack-contrib/file-loader). 

__Install file-loader__

```bash
$ npm i file-loader --save-dev
```

__webpack.config.js__

```js
      {
        test: /\.(png|jpg|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[hash:8].[ext]',
              outputPath: 'assets/'
            }
          }
        ]
      }
```

It's now possible to use images either via import 

```js
import nodejsLogo from '@img/nodejs.png'
```

or CSS rules.

```css
body {
  background: transparent url(../img/webpack-logo.png);
}
```

## Inline SVG elements

In some cases, we might want to inline assets. Here is a configuration for inlining SVG images.

__Install [svg-url-loader](https://github.com/bhovhannes/svg-url-loader)__

```bash
$ npm i svg-url-loader --save-dev
```

__webpack.config.js__

```js
      {
        test: /\.svg$/,
        loader: 'svg-url-loader',
        options: {
          noquotes: true
        }
      },
```

Also remove svg extension from the file-loader configuration.

## Apply CSS vendor prefixes by postcss-loader and autoprefixer

Vendor prefixes can be applied to the styles automatically by [postcss-loader](https://github.com/postcss/postcss-loader) and [autoprefixer](https://github.com/postcss/autoprefixer).

__Install postcss-loader and autoprefixer__

```bash
$ npm i postcss-loader autoprefixer --save-dev
```

__Add configuration into the webpack.config.js__

```js
      {
        test: [/.css$|.scss$/],
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', 
          'sass-loader',
          'postcss-loader'
        ]
      }
```

__Create postcss.config.js__

```js
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}
```

__Add targeted browsers into the package.json__

```js
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
```

After this change all vendor prefixes are set automatically for the styles which require autoprefixing.

You can tweak browser support via the `browserslist` property in package.json. Check out supported browsers by different rules at [browserl.ist](https://browserl.ist/?q=%3E+1%25%2C+last+2+versions%2C+not+ie+%3C%3D+8).

## Optimize CSS and Javascript assets by minifying

Then let's optimize app by minifying our assets. Actually webpack 4 optimizes JS bundle by default when using `production` mode. If you want to tweak settings you can provide a plugin by yourself.

__Install plugins__

```bash
$ npm i uglifyjs-webpack-plugin optimize-css-assets-webpack-plugin --save-dev
```

__Add configuration into the webpack.config.js__

```js
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

...

  optimization: {
    minimizer: [
      new UglifyJsPlugin(),
      new OptimizeCSSAssetsPlugin()
    ]
  },
```

## Use TypeScript with @babel/preset-typescript

There is a new approach to use TypeScript with Babel. This blog post "[TypeScript With Babel: A Beautiful Marriage](https://iamturns.com/typescript-babel/)" explains the pros and cons well so I don't repeat those here.

Another option is to use [ts-loader](https://webpack.js.org/guides/typescript/).

__Install TypeScript and @babel/preset-typescript__

```bash
$ npm i @babel/preset-typescript typescript --save-dev
```

__Modify babel-loader settings in webpack.config.js to include @babel/typescript preset__

```js
      {
        test: [/.js$|.ts$/],
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/typescript', 
              '@babel/preset-env'
            ]
          }
        }
      },
        
  ...
  
  resolve: {
    extensions: [".js", ".ts"],
  },
```

__Add custom.d.ts__

```typescript
declare module "*.svg" {
  const content: any;
  export default content;
}

declare module "*.png" {
  const content: any;
  export default content;
}
```

__Add tsconfig.json for TypeScript settings__

```js
{
  "compilerOptions": {
    // Target latest version of ECMAScript.
    "target": "esnext",
    // Search under node_modules for non-relative imports.
    "moduleResolution": "node",
    // Process & infer types from .js files.
    "allowJs": true,
    // Don't emit; allow Babel to transform files.
    "noEmit": true,
    // Enable strictest settings like strictNullChecks & noImplicitAny.
    "strict": true,
    // Disallow features that require cross-file information for emit.
    "isolatedModules": true,
    // Import non-ES modules as default imports.
    "esModuleInterop": true,
    "baseUrl": ".",
    "paths": {
      "@components": [ "src/components" ],
      "@scss": [ "src/scss" ],
      "@img": [ "src/img" ],
      "@": [ "src" ],
    }
  },
  "include": [
    "custom.d.ts",
    "src"
  ]
}
```

Aliases must be added into the `tsconfig.json` paths also in order that TypeScript can find them.

__Add check-types script to package.json__

```json
  "scripts": {
    "check-types": "tsc"
  }
```

Now you have a separate command for type checking.

```bash
$ npm run check-types -- --watch
```

You could also add `npm run check-types` to your build script to check types when building for the production.

Now you could rename your `.js` files to `.ts` and start using TypeScript features. My demo project contains both js and ts files which shouldn't be the case in a real project.

Note that type checking is not part of the development workflow with this approach. You need to check them separately. This might be a good or bad thing depending on how do you want to work.

## Separate dev and prod environments

And finally, let's make a few changes to our build system. We'll separate dev and prod build to make development easier and building faster.

__Install webpack-merge__

```bash
$ npm i webpack-merge --save-dev
```

__Create build/webpack.base.config.js__

We'll move most of the configuration into this file.

```js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  entry: './src/app',
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'app.[contenthash:8].js',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: [/.js$|.ts$/],
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/typescript', 
              '@babel/preset-env'
            ]
          }
        }
      },
      {
        test: /\.svg$/,
        loader: 'svg-url-loader',
        options: {
          noquotes: true
        }
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[hash:8].[ext]',
              outputPath: 'assets/'
            }
          }
        ]
      },
      {
        test: [/.css$|.scss$/],
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', 
          'sass-loader',
          'postcss-loader'
        ]
      }
    ]
  },
  resolve: {
    alias: {
      '@components': path.resolve(__dirname, '../src/components'),
      '@scss': path.resolve(__dirname, '../src/scss'),
      '@img': path.resolve(__dirname, '../src/img'),
      '@': path.resolve(__dirname, '../src')
    },
    modules: [
      'node_modules',
      path.resolve(__dirname, '../src')
    ],
    extensions: ['.js', '.ts'],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'app.[contenthash:8].css',
    }),
    new HtmlWebpackPlugin({
      title: 'Setting up webpack 4',
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true
      },
    })
  ]
}
```

__Create build/webpack.dev.config.js__

Dev config is currently quite empty but something probably comes up which should be added only to the development environment.

```js
const merge = require('webpack-merge')
const webpackBaseConfig = require('./webpack.base.config.js')

module.exports = merge(webpackBaseConfig, {})
```

__Create build/webpack.prod.config.js__

Production file has all optimization tasks which will slow down our dev build. Though remember to test prod build occasionally to ditch early prod config related issues. 

```js
const merge = require('webpack-merge')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const webpackBaseConfig = require('./webpack.base.config.js')

module.exports = merge(webpackBaseConfig, {
  optimization: {
    minimizer: [
      new UglifyJsPlugin(),
      new OptimizeCSSAssetsPlugin()
    ]
  }
})
```

__Modify package.json build commands to utilize new configs__

```json
  "scripts": {
    "build": "rm -rf ./dist/ && npm run check-types && webpack --mode production --config ./build/webpack.prod.config.js",
    "dev": "webpack-dev-server --mode development --config ./build/webpack.dev.config.js",
    "check-types": "tsc"
  },
```

After this step, it's possible to remove `webpack.config.js` from the root of the project. I have kept it in the demo as a reference.

---

Now our webpack configuration starts to look quite ready and we can focus more on the application logic.


webpack

Setting up webpack 4 for a project

This blog post shows how to setup webpack 4 module bundler for development. This webpack tutorial contains many common examples you might need to configure when doing JS application development with the webpack.

This post shows how to implement [Material Design](https://material.io) like form [text fields](https://material.io/design/components/text-fields.html) with a floating label and an expanding underline bar animation. The post includes examples of how to style text fields with and without Javascript.

> Material Design is a visual language that synthesizes the classic principles of good design with the innovation of technology and science.

*Read more at [Material.io](https://material.io)*.

There are many Material Component libraries and frameworks you can use instead if you need a complete set of ready-made components.

- [Material Components](https://material.io/develop/) - Material Components for Android, Flutter, iOS, and the web
- [Vuetify](https://vuetifyjs.com/en/) - Material Components Framework for Vue.js
- [Vue Material](https://vuematerial.io) - Material Design for Vue.js
- [Angular Material](https://material.angular.io) - Material Design components for Angular
- [MATERIAL-UI](https://material-ui.com) - React components that implement Google's Material Design
- [Materialize](https://materializecss.com) - A modern responsive front-end framework based on Material Design

Continue reading if you want to implement Material Design by yourself.

## Material Design with Javascript

The following demo is a barebone example how to implement Material Design field styles. The demo doesn't contain error handling, validation etc. Javascript is used to change the state of the form field when the field is focused or it's filled with value.

<a href="https://codepen.io/teroauralinna/pen/rZZGpe" class="embedly-card" data-card-width="100%" data-card-controls="0">Embedded content: https://codepen.io/teroauralinna/pen/rZZGpe</a>

### HTML

Let's get started by adding input and textarea field markup.

#### Input field
```html
<div class="form-field">
  <div class="form-field__control">
    <label for="exampleField" class="form-field__label">Example field</label>
    <input id="exampleField" type="text" class="form-field__input" />
  </div>
</div>
```

#### Textarea field
```html
<div class="form-field">
  <div class="form-field__control">
    <label for="exampleTextarea" class="form-field__label">Example textarea</label>
    <textarea id="exampleTextarea" class="form-field__textarea"></textarea>
  </div>
</div>
```

### Styles

In the demo, I have used [Bootstrap Reboot](https://getbootstrap.com/docs/4.1/content/reboot/). Styles might require tweaking if something else is used as a style baseline.

Animations use `translate` and `scale` transform rules which are very simple to use, well supported and have good performance.

```scss
$primary-color: #b11adc;
$animation-duration: 0.4s;

@mixin label-active() {
  font-size: 0.75rem;
  transform: translateY(-14px);
}

.form-field {
  display: block;
  margin-bottom: 16px;
  
  &--is-active {
    .form-field__control {
      &::after {
        border-bottom: 2px solid $primary-color;
        transform: scaleX(150);
      }
    }
    .form-field__label {
      color: #b11adc;
      @include label-active();
    }
  }
  &--is-filled {
    .form-field__label {
      @include label-active();
    }
  }
}
.form-field__label {
  display: block;
  font-size: 1.2rem;
  font-weight: normal;
  left: 0;
  margin: 0;
  padding: 18px 12px 0 ;
  position: absolute;
  top: 0;
  transition: all $animation-duration;
  width: 100%;
}
.form-field__control {
  background: #eee;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  position: relative;
  width: 100%;
  
  &::after {
    border-bottom: 2px solid $primary-color;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    transform: scaleX(0);
    transition: all $animation-duration;
    width: 1%;
  }
}
.form-field__input,
.form-field__textarea {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #999;
  color: #333;
  display: block;
  font-size: 1.2rem;
  margin-top: 24px;
  outline: 0;
  padding: 0 12px 10px 12px;
  width: 100%;
}
.form-field__textarea {
  height: 150px;
}
```

### Trigger for the floating label and the underline bar animation

Now our form fields HTML markup and styles are ready. We still need to add a tiny bit of Javascript that changes the field state when the field is active or inactive.

Following ES6 example could be migrated to use any JS framework or library you might be using in your own project.

```js
const setActive = (el, active) => {
  const formField = el.parentNode.parentNode
  if (active) {
    formField.classList.add('form-field--is-active')
  } else {
    formField.classList.remove('form-field--is-active')
    el.value === '' ? 
      formField.classList.remove('form-field--is-filled') : 
      formField.classList.add('form-field--is-filled')
  }
}

[].forEach.call(
  document.querySelectorAll('.form-field__input, .form-field__textarea'),
  (el) => {
    el.onblur = () => {
      setActive(el, false)
    }
    el.onfocus = () => {
      setActive(el, true)
    }
  }
)
```

## Experimenting Material Design with CSS only approach

We can build almost exactly the same functionality without Javascript using CSS only. Microsoft Edge browser is the only one I didn't get to work properly.

<a href="https://codepen.io/teroauralinna/pen/JeKrXe" class="embedly-card" data-card-width="100%" data-card-controls="0">Embedded content: https://codepen.io/teroauralinna/pen/JeKrXe</a>

### HTML

We need to do a few modifications to the HTML code. Placeholder attribute must be added to the fields. Note that the placeholder must contain at least one space. It doesn't work if it's empty.

We also need to swap the order of input and label elements. New `form-field__bar` div element is also needed. Then we can target elements via siblings selector.

#### Input field
```html
<div class="form-field">
  <div class="form-field__control">
    <input id="exampleField" type="text" class="form-field__input" value="" placeholder=" " />
    <label for="exampleField" class="form-field__label">Example field</label>
    <div class="form-field__bar"></div>
  </div>
</div>
```

#### Textarea field
```html
<div class="form-field">
  <div class="form-field__control">
    <textarea id="exampleTextarea" class="form-field__textarea" placeholder=" "></textarea>
    <label for="exampleTextarea" class="form-field__label">Example textarea</label>
    <div class="form-field__bar"></div>
  </div>
</div>
```

### Styles

Styles need few major changes without Javascript. When we use Javascript we can add a state modifier class to any element we want. But we have quite limited options when using CSS only. We can use siblings selector to style elements which are placed after the input element.

The focused field can use `:focus` selector. Selector [`:placeholder-shown`](https://www.caniuse.com/#search=placeholder-shown) seems to be the only way to target styles to the field that has value.

Edge doesn't support `:placeholder-shown`. There are implementations that use `:valid` selector but it has drawbacks with validation so I decided not to use it.

Due to Edge issue, I reversed the order of label styling. By default labels are now in "active" state and floating label animation is used only if a browser supports `:placeholder-shown`. So the form is still functional but there are no animated labels.

IE 11 and even IE 10 can be supported with `:-ms-input-placeholder` selector.

It's not possible to use `::after` pseudo-element anymore because it can't be applied to input or textarea fields. CSS parent selector would be useful here. So I have created a new div element to handle the underline bar animation.

Following CSS rules are used to style labels and underline bar.

__Label when input field contains text__
```css
.form-field__textarea:placeholder-shown ~ .form-field__label {
}
```

__Label when input field is focused__
```css
.form-field__textarea:focus ~ .form-field__label {
}
```

__Underline bar when input field is focused__
```css
.form-field__textarea:focus ~ .form-field__bar {
}
```

#### Complete styles
```scss
$primary-color: #b11adc;
$animation-duration: 0.4s;

@mixin label-inactive() {
  font-size: 1.2rem;
  transform: translateY(0);
}

@mixin label-active() {
  font-size: 0.75rem;
  transform: translateY(-14px);
}

.form-field {
  display: block;
  margin-bottom: 16px;
}
.form-field__label {
  @include label-active();
  display: block;
  font-weight: normal;
  left: 0;
  margin: 0;
  padding: 18px 12px 0;
  position: absolute;
  top: 0;
  transition: all $animation-duration;
  width: 100%;
}
.form-field__control {
  background: #eee;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.form-field__bar {
  border-bottom: 2px solid $primary-color;
  bottom: 0;
  content: "";
  display: block;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  transform: scaleX(0);
  transition: all $animation-duration;
  width: 1%;
}
.form-field__input,
.form-field__textarea {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #999;
  color: #333;
  display: block;
  font-size: 1.2rem;
  margin-top: 24px;
  outline: 0;
  padding: 0 12px 10px 12px;
  width: 100%;
  
  // IE 10-11
  &:-ms-input-placeholder {
    ~ .form-field__label {
      @include label-inactive();
    }
  }
  // All other browsers except Edge
  &:placeholder-shown {
    ~ .form-field__label {
      @include label-inactive();
    }
  }
  &:focus {
    ~ .form-field__label {
      color: #b11adc;
      @include label-active();
    }
    ~ .form-field__bar {
      border-bottom: 2px solid $primary-color;
      transform: scaleX(150);
    }
  }
}
.form-field__textarea {
  height: 150px;
}
```

Well I can't say is it worth to implement this without Javascript but it was a fun experiment anyway to find out how to do it. Handling the field state in Javascript produces slightly cleaner  HTML and more understandable style declarations.

Material Design form input text fields

How to create Material Design like form text fields with floating label and animated underline bar

This post shows how to implement Material Design like form text fields with a floating label and an expanding underline bar animation. The post includes examples of how to style text fields with and without Javascript.

Lately I have experimented with [Vue.js JavaScript Framework](https://vuejs.org). In this post I will show how to build an almost functional form with Vue.js. Almost functional means that the front end will be ready but actual data handling in the back end won't be implemented.

Forms are essential part of almost every web application so I wanted to see how to build a basic form with the following specs.

## Specification

I set following specs for my form project.

- Form contains different field types.
- Textarea field must have a maximum length counter.
- There must be an inline validation for form fields.
- Summary of validation errors must be shown on submit if validation fails.
- Data will be sent via Ajax on submit and loading indicator is visible until HTTP request is finished.
- Server-side errors will be returned and handled in the same way as errors on a client-side.
- Double-clicks must be prevented by disabling the submit button when sending form.
- Thanks page will be shown after form is successfully submitted.

## Prerequisites

Vue project is generated with the [Webpack template](https://github.com/vuejs-templates/webpack).

Project needs few dependencies for functionalities which are not part of the Vue.js core:

- [Vue i18n](https://kazupon.github.io/vue-i18n/en/) is used for the internalization;
- [Vuelidate](https://monterail.github.io/vuelidate/) for the form validation; and
- [Axios HTTP client](https://github.com/axios/axios) for making requests to the back end.

Project uses [Bootstrap](https://getbootstrap.com) 4.1.0 library for the form HTML markup. [Polyfill.io](https://polyfill.io/v2/docs/) is used to provide polyfills for older browsers.

This post focuses on the front end. Back end is handled by [Mocky REST API](https://www.mocky.io). Mocky enables the one to mock HTTP responses to test REST APIs. Of course you could use any local mock server but I decided to use Mocky because it's also accessible from the GitHub page.

## Getting started

You can download the whole project from my [GitHub repository](https://github.com/teroauralinna/vue-demo-form). [Live demo](http://teroauralinna.github.io/vue-demo-form) is also available.

```bash
$ git clone https://github.com/teroauralinna/vue-demo-form.git
```

### Setup project

__Install dependencies__
```bash
$ npm install
```

### Run project

__Serve dev version from http://localhost:8080__
```bash
$ npm run dev
```

## Show me the code!

### App setup

#### ./index.html

[Bootstrap](https://getbootstrap.com/) is added from the CDN to simplify things a little bit.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Vue.js Demo Form</title>
    <link rel="stylesheet" 
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" 
      integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" 
      crossorigin="anonymous">
  </head>
  <body>
    <div id="app"></div>
    
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
  </body>
</html>
```

#### ./src/resources/translations.js

This file includes all translation strings that our app uses. For a bigger app I would use translation file per language. Even though this project doesn't have multiple languages it's easier to handle form validation errors with translation strings.

```javascript
export default {
  en: {
    form: {
      firstName: "First name",
      lastName: "Last name",
      email: "Email",
      terms: "I accept the terms and conditions",
      type: "Select subscription type",
      additionalInfo: "Additional info",
      submitted: "The form is submitted!",
      sentInfo: "Here is the info you sent:",
      return: "Return to the form",
      submit: "Submit",
      submitting: "Submitting",
      charactersLeft: "You have {charCount} character left. | You have {charCount} characters left.",
      types: {
        free: "Free trial subscription",
        starter: "Starter subscription (50 € / month)",
        enterprise: "Enterprise subscription (250 € / month)"
      }
    },
    error: {
      invalidFields: "Following fields have an invalid or a missing value:",
      general: "An error happened during submit.",
      generalMessage: "Form sending failed due to technical problems. Try again later.",
      fieldRequired: "{field} is required.",
      fieldInvalid: "{field} is invalid or missing.",
      fieldMaxLength: "{field} maximum characters exceeded."
    }
  }
};
```

#### ./config/prod.env.js

In the config file you can change the API endpoint. There is one for success and one for failure. With the failure response you can see how the back end responds when there are errors.

```javascript
'use strict'
module.exports = {
  NODE_ENV: '"production"',
  FORM_API_URL: '"https://www.mocky.io/v2/5adb5a8c2900002b003e3df1"', // Success
  //FORM_API_URL: '"https://www.mocky.io/v2/5ade0bf2300000272b4b29b9"', // Failure
}
```

__Success response from [https://www.mocky.io/v2/5adb5a8c2900002b003e3df1](https://www.mocky.io/v2/5adb5a8c2900002b003e3df1):__

```json
{
  "success": true,
  "errors": []
}
```

__Failure response from [https://www.mocky.io/v2/5ade0bf2300000272b4b29b9](https://www.mocky.io/v2/5ade0bf2300000272b4b29b9):__

```json
{
  "success": false,
  "errors": [
    {
      "field": "firstName",
      "message": null
    },
    {
      "field": "lastName",
      "message": null
    },
    {
      "field": "email",
      "message": "Email is not valid email address."
    },
    {
      "field": "additionalInfo",
      "message": "Max. 1000 characters."
    }
  ]
}
```

#### ./src/main.js

All dependencies and general configurations are inserted to the `main.js` file.

```javascript
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Vuelidate from 'vuelidate';
import App from './App.vue'
import translations from "./resources/translations";

Vue.use(VueI18n);
Vue.use(Vuelidate);

Vue.config.formApiUrl = process.env.FORM_API_URL;

const i18n = new VueI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: translations
})

new Vue({
  el: '#app',
  i18n,
  render: h => h(App)
})
```

#### ./src/App.vue

`App.vue` is the container for the app. The form component is imported here.

```html
<template>
  <div id="app" class="container">
    <div class="row justify-content-center">
      <div class="col-xs-12 col-sm-10 col-md-6">
        <h1 class="text-center">{{title}}</h1>
        <app-form></app-form>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import Form from './components/form/Form.vue';

export default {
  name: 'app',
  data () {
    return {
      title: 'Vue.js Demo Form'
    }
  },
  components: {
    appForm: Form
  }
}
</script>

<style lang="scss">
  h1 {
    margin-bottom: 30px;
  }

  #app {
    padding: 20px;
  }
</style>
```

### The form component

The form component is separated into several files: `Form.scss`, `Form.js` and `Form.vue`. The latter holds the template and requires SCSS and JS files.

#### ./src/components/form/Form.scss

```scss
pre {
    white-space: pre-line;
}

form {
    background: #efefef;
    padding: 2rem 2rem 1rem;
}
```

#### ./src/components/form/Form.js

The `Form.js` contains all logic which controls the form.

```javascript
import { required, email, maxLength } from 'vuelidate/lib/validators';
import axios from 'axios';
import Vue from 'vue';

export default {
  name: 'app-form',
  data() {
    return {
      isSubmitted: false,
      isError: false,
      errorHeader: 'error.invalidFields',
      errors: [],
      types: this.getTypes(),
      submitting: false,
      form: {
        firstName: '',
        lastName: '',
        email: '',
        terms: false,
        type: null,
        additionalInfo: ''
      }
    }
  },
  methods: {
    submit() {
      this.$v.$touch();
      if (!this.$v.$error) {
        this.sendFormData();
      } else {
        this.validationError();
      }
    },
    enableSubmitLoader() {
      this.submitting = true;
    },
    disableSubmitLoader() {
      this.submitting = false;
    },
    sendFormData() {
      this.enableSubmitLoader();
      axios.post(Vue.config.formApiUrl, this.form).then(response => {
        this.submitSuccess(response);
        this.disableSubmitLoader();
      }).catch(error => {
        this.submitError(error);
        this.disableSubmitLoader();
      });
    },
    submitSuccess(response) {
      if (response.data.success) {
        this.isSubmitted = true;
        this.isError = false;
      } else {
        this.errorHeader = 'error.invalidFields';
        this.errors = response.data.errors;
        this.isError = true;
      }
    },
    submitError(error) {
      this.errorHeader = 'error.general';
      this.errors = [{'field': null, 'message': 'error.generalMessage'}];
      this.isError = true;
    },
    validationError() {
      this.errorHeader = 'error.invalidFields';
      this.errors = this.getErrors();
      this.isError = true;
    },
    isErrorField(field) {
      try {
        if (this.getValidationField(field).$error) {
          return true;
        }
      } catch (error) {}

      return this.errors.some(el => el.field === field);
    },
    getErrors() {
      let errors = [];
      for (const field of Object.keys(this.form)) {
        try {
          if (this.getValidationField(field).$error) {
            errors.push({'field': field, 'message': null});
          }
        } catch (error) {}
      }
      return errors;
    },
    getFieldClasses(field) {
      return { 'is-invalid': this.isErrorField(field) }
    },
    getCharactersLeft(field) {
      try {
        return this.getValidationField(field).$params.maxLength.max - this.form[field].length;
      } catch (error) {
        return 0;
      }
    },
    getTypes() {
      return [{
        value: 'free', 
        label: 'form.types.free'
      }, {
        value: 'starter', 
        label: 'form.types.starter'
      }, {
        value: 'enterprise', 
        label: 'form.types.enterprise'
      }];
    },
    getValidationField(field) {
      if (this.$v.form[field]) {
        return this.$v.form[field];
      }
      throw Error('No validation for field ' + field);
    },
    onFieldBlur(field) {
      try {
        this.getValidationField(field).$touch();
        if (this.getValidationField(field).$error) {
          if (!this.errors.some(el => el.field === field)) {
            this.errors.push({'field': field, 'message': null});
          }
        } else {
          this.errors = this.errors.filter(el => el.field !== field);
        }
      } catch (error) {}
    },
    reload() {
      window.location = '';
    }
  },
  validations: {
    form: {
      email: { required, email },
      firstName: { required },
      lastName: { required },
      type: { required },
      terms: { required },
      additionalInfo: { maxLength: maxLength(1000) }
    }
  },
  watch: {
    errors() {
      this.isError = this.errors.length > 0 ? true : false;
    }
  }
}
```

#### ./src/components/form/Form.vue

This is the main component which contains the HTML template, data bindings and includes JS and SCSS files.

```html
<template>
  <div>
    <form v-if="!isSubmitted" @submit.prevent="submit" novalidate>
      <div class="form-group">
        <label for="firstName">{{ $t('form.firstName') }} *</label>
        <input type="text" class="form-control" id="firstName" v-model.lazy.trim="form.firstName" @blur="onFieldBlur('firstName')" v-bind:class="getFieldClasses('firstName')">
        <div v-if="isErrorField('firstName')" class="invalid-feedback">{{ $t('error.fieldRequired', { field: $t('form.firstName') }) }}</div>
      </div>
      <div class="form-group">
        <label for="lastName">{{ $t('form.lastName') }} *</label>
        <input type="text" class="form-control" id="lastName" v-model.lazy.trim="form.lastName" @blur="onFieldBlur('lastName')" v-bind:class="getFieldClasses('lastName')">
        <div v-if="isErrorField('lastName')" class="invalid-feedback">{{ $t('error.fieldRequired', { field: $t('form.lastName') }) }}</div>
      </div>
      <div class="form-group">
        <label for="email">{{ $t('form.email') }} *</label>
        <input type="email" class="form-control" id="email" v-model.lazy.trim="form.email" @blur="onFieldBlur('email')" v-bind:class="getFieldClasses('email')">
        <div v-if="isErrorField('email')" class="invalid-feedback">{{ $t('error.fieldInvalid', { field: $t('form.email') }) }}</div>
      </div>
      <div class="form-group">
        <label for="type">{{ $t('form.type') }} *</label>
        <select id="type" class="form-control" v-model="form.type" @blur="onFieldBlur('type')" v-bind:class="getFieldClasses('type')">
            <option v-for="type in types" v-bind:key="type.value" v-bind:value="type.value">{{ $t(type.label) }}</option>
        </select>
        <div v-if="isErrorField('type')" class="invalid-feedback">{{ $t('form.type') }}</div>
      </div>
      <div class="form-group">
        <label for="additionalInfo">{{ $t('form.additionalInfo') }}</label>
        <textarea 
          type="additionalInfo" 
          class="form-control" 
          id="additionalInfo" 
          v-model.trim="form.additionalInfo" 
          v-bind:class="getFieldClasses('additionalInfo')" 
          v-bind:maxlength="$v.form['additionalInfo'].$params.maxLength.max" 
          @blur="onFieldBlur('additionalInfo')">
        </textarea>
        <small class="text-muted form-text">{{ $tc('form.charactersLeft', getCharactersLeft('additionalInfo'), { charCount: getCharactersLeft('additionalInfo') }) }}</small>
        <div v-if="isErrorField('additionalInfo')" class="invalid-feedback">{{ $t('error.fieldMaxLength', { field: $t('form.additionalInfo') }) }}</div>
      </div>
      <div class="form-group">
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="terms" v-model.lazy.trim="form.terms" @change="onFieldBlur('terms')" v-bind:class="getFieldClasses('terms')">
          <label class="form-check-label" for="terms">{{ $t('form.terms') }} *</label>
        </div>
      </div>
      <div class="alert alert-danger" v-if="isError">
        <p class="mb-0">
          <strong>{{ $t(errorHeader) }}</strong>
        </p>
        <ul class="mb-0 pl-3" v-if="errors.length > 0">
          <li v-for="error in errors" v-bind:key="error.field">
            <span v-if="error.field">{{ $t('form.'+error.field) }}<span v-if="error.message">: {{ $t(error.message) }}</span></span>
            <span v-else-if="error.message">{{ $t(error.message) }}</span>
          </li>
        </ul>
      </div>
      <div class="form-group">
        <button type="submit" class="btn btn-primary" :disabled="submitting">
          <span v-if="submitting">{{ $t('form.submitting' ) }} <img src="../../assets/loader.svg" /></span>
          <span v-else>{{ $t('form.submit' ) }}</span>
        </button>
      </div>
    </form>
    <div v-else>
      <div class="alert alert-success">
        <strong>{{ $t('form.submitted' ) }}</strong>
      </div>
      <div class="alert alert-info">
        <p><strong>{{ $t('form.sentInfo' ) }}</strong></p>
        <pre>
            {{form}}
        </pre>
      </div>
      <p class="text-center">
        <a href="#" class="btn btn-secondary" @click.prevent="reload()">{{ $t('form.return' ) }}</a>
      </p>
    </div>
  </div>
</template>

<script src="./Form.js"></script>
<style src="./Form.scss" lang="scss" scoped></style>
```

## Further development ideas

For a real project I would consider refactoring common code from the `Form.js` into reusable services. I also would create a component per field type to avoid code duplication and for reusing fields in other forms. Another thing which tempts me is to create a model which represents the whole form. This model would include properties per form field like type, label, validation rules etc. Then forms could be generated dynamically based on the form model. Well this might be a topic for an upcoming blog post.

Vue.js

How to build a complete form with Vue.js

Lately I have experimented with Vue.js JavaScript Framework. In this post I will show how to build a functional form with Vue.js. Forms are essential part of almost every web application so I wanted to see how to build a basic form with the following specs.

This is a simple tip on how to wrap newlines without converting newlines to `<br>` tags. This is quite handy if you have a text without formatting and the only need is to wrap text paragraphs. You don't have to think about HTML sanitization or conversion.

```css
.wrapped-text {
    white-space: pre-line;
}
```

This trims newlines from the start and end of the text. Value `pre-line` doesn't render whitespaces in the middle of the text.

Wrapping newlines via CSS

This is a simple tip on how to wrap newlines without converting newlines to br tags. This is quite handy if you have text without formatting and the only need is to wrap text paragraphs. You don't have to think about HTML sanitization or conversion.

<p>This is a simple tip on how to wrap newlines without converting newlines to <code>&lt;br&gt;</code> tags. This is quite handy if you have a text without formatting and the only need is to wrap text paragraphs. You don't have to think about HTML sanitization or conversion.</p>
<pre tabindex="0" style="background-color: #292D3E" class="shiki material-theme-palenight"><code><span class="line"><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">wrapped-text</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">{</span></span>
<span class="line"><span style="color: #A6ACCD">    </span><span style="color: #B2CCD6">white-space</span><span style="color: #89DDFF">:</span><span style="color: #A6ACCD"> pre-line</span><span style="color: #89DDFF">;</span></span>
<span class="line"><span style="color: #89DDFF">}</span></span>
<span class="line"></span></code></pre>
<p>This trims newlines from the start and end of the text. Value <code>pre-line</code> doesn't render whitespaces in the middle of the text.</p>
