wiledal

function TinySlider(element) {
  this.element = element;
  
  this.currentSlide = 0;
  this.slides = element.querySelectorAll(".slide");
  
  this.slidesContainer = document.createElement("div");
  this.applyStyles(this.slidesContainer, {
    position: "absolute",
    top: 0,

wiledal

Deploying

For easy deployments we're using flightplan, install with npm install -g flightplan.

Before deploying you need to make your computer a friend to the server.
You only need to do these steps once per machine.

We are going to be adding your public key to the remote server for passwordless SSH.
Then we are going to set up your SSH to allow for Agent Forwarding, so that your git commands are tunneled to the server.

When a step says Locally it means you should execute the command on your local machine.

wiledal

function EventDispatcher() {
  this._listeners = {};
}
EventDispatcher.prototype.on = function(event, callback) {
  if (!this._listeners[event]) this._listeners[event] = [];
  this._listeners[event].push(callback);
}
EventDispatcher.prototype.trigger = function(event, data) {
  if (!this._listeners[event]) return;
  for (var i = 0; i < this._listeners[event].length; i++) {

wiledal

/* 
  Template literals if-statement example
  Using a single-line conditional, we can create an if-statements within template literals.
*/

function makeHTML(title) {
  return `
    ${title ? `
      This element has a title, and it is "${title}"
    ` : `

wiledal

/* 
  Template literals for-loop example
  Using `Array(5).join(0).split(0)`, we create an empty array 
  with 5 items which we can iterate through using `.map()`
*/

var element = document.createElement('div')
element.innerHTML = `
  <h1>This element is looping</h1>
  ${Array(5).join(0).split(0).map((item, i) => `

wiledal

/* 
  Template literals forEach example
  Using Array.map(), we can create a forEach within template literals.
*/

var items = [
  { name: 'Teddy' },
  { name: 'Dolores' },
  { name: 'William' },
  { name: 'Bernard' }

wiledal

var copy = {
  title: 'Discovering Template Literals',
  subtitle: 'Effortless client-side rendering awaits.',
  body: 'You will never want to go back to normal strings again.'
}

var element = document.createElement('section')
element.innerHTML = `
  <div class="content">
    <h1>${copy.title}</h1>

wiledal

var gulp = require('gulp')
var babel = require('gulp-babel')
var replace = require('gulp-replace')

gulp.task('js', () => {
  gulp.src('source/js/**/*.js')
    .pipe(replace('html`', '`')) // Replace 'html`' with just '`'
    .pipe(babel({
      presets: ['es2015']
    })

wiledal

/*
  Tiny, smart, single-method animation library for CSS animations - TweenMax-style.
  Returns a Promise that resolves when the transition has ended.

  Usage:
    Single element:
      AnimationService.animate(element, time, to)
      AnimationService.animate(element, time, from, to)
    
    Multiple elements with stagger:

wiledal

/**
  scale-value

  Creates @media rules to scale a value between two values based on screen sizes
  $value-s will be active on the smallest screen and below
  $value-l will be active on the largest screen and above
  $clamp-to-nearest determines the steps of scaling 
    (eg. "1" = round to closest whole value, "4" = round to closest number devisable by 4)

  @param $value-name The value that will be changes (eg. 'font-size' or 'padding-bottom')