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.

*__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.

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.

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 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.

Blog posts related to Axios

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

How to fetch your public photos from Instagram without the API

Global HTTP request and response handling with the Axios interceptor

How to build a complete form with Vue.js

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