JavaScript

Plug in Modules in JavaScript

In JavaScript there is different types of modules. You have Common JS modules, that NodeJS uses by default without even using Bable transpiler. Also there is ES2015 modules with a different plugin syntax. Both are used to bring in modules which can be other JavaScript files, but you also can bring in modules that are installed with NPM.

Common JavaScript modules

Create a simple js file named ‘mymodule.js’:

// make everything in this file available for the other files
module.exports = {
  name: 'Vlad',
  email: 'test@test.com'
}

In the app file bring this module file in:

const person = require('./mymodule'); // no .js extension!
console.log(person.name);

If you bring in a node module into you app use this:

const person = require('express');

ES2015 JavaScript modules

A slightly different syntax is used for ES2015+:

export const person = { //this variable can be accessed from other files
  name: 'Vlad',
  email: 'test@test.com'
}

In the app file bring in this module:

import { person } from './mymodule';
console.log(person.name);

If you need to import several variables/functions from one file:

import * as mod from './mymodule';

Exporting default object

The module file:

const greeting = 'Hello';
export default greeting;

In the app use no curly braces:

import greeting from './mymodule';
console.log(greeting);

Calculate person’s age from the date of birth

To calculate a person’s age from the date of birth use vanilla JavaScript:

function Person(dob) {
  this.birthday = new Date(dob);
  this.calculateAge = function() {
    const difference = Date.now() - this.birthday.getTime();
    const ageDate = new Date(difference);
    return Math.abs(ageDate.getUTCFullYear() - 1970);
  }
}
const person = new Person('9-10-1990');
console.log(person.calculateAge());

Progress bar with Vue.js

This example shows how to create a simple progress bar with a little Vue.js and Foundation CSS help.
Create a simple HTML template and attach minimized Foundation CSS file.

<!DOCTYPE html>
<html>
<head>
    <title>Progress Bar</title>
    <script src="https://npmcdn.com/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="foundation.min.css">
    <link rel="stylesheet" href="app.css">
</head>
<body>
<div id="app">
    <section class="row">
        <div class="small-12 columns">
            <div class="progressbar">
                <div class="progressbar text-center"
		  style="background-color: green; margin: 0; color: white;"
		  :style="{width: progress + '%'}">
		  {{ progress }} %
                </div>
            </div>
        </div>
    </section>
    <section class="row">
        <div class="small-12 columns text-center">
            <button id="attack" @click="increase">Increase</button>
            <button id="attack" @click="decrease">Decrease</button>
	</div>
    </section>   
</div>
<script src="app.js"></script>
</body>
</html>

Add custom CSS styles:

/* app.css */
.text-center {
    text-align: center;
}

.progressbar {
    width: 80%;
    height: 40px;
    background-color: #eee;
    margin: 1em auto;
    transition: width 500ms;
}

button {
    font-size: 20px;
    background-color: #eee;
    padding: 12px;
    box-shadow: 0 1px 1px black;
    margin: 10px;
}

Add some Vue.js code to provide business logic for the progress bar:

/* app.js */
new Vue({
  el: '#app',
  data: {
	progress: 50,
  },
  methods: {
	increase: function() {
	  if (this.progress < 100) {
	    this.progress += 1;
	  }
	},
	decrease: function() {
	  if (this.progress > 0) {	
	    this.progress -= 1;
	  }
	}	
  }
});

clicksand.net

Goal: Develop a website (theme) for a book author based on provided PDF mocks. Use WordPress as a CMS for the site. Test and deploy the site on the company’s server.
Web technologies used: HTML5, CSS, PHP, WordPress.
Tools and software: Photoshop, MS Visual Studio Code
Release date: May, 2017
Project type: Contract work for Civilis Marketing.
clicksand.net