jkarttunen

Getting started with front-end development

Books should be available in Siili library, also in dead-trees format. Some of the sites are paywalled but worth it, so prefer these over free copies. If something is missing, please have it bought.

Thinking and concepts

• Responsive Web Design by A Book Apart
• Mobile First by A Book Apart
• Prototyping by Rosenfeld Media

Workflows and tools

• To get you started without scary tool installs and command line interface, you can use Prepros.io to play with modern web development workflow, packaged in one app.

jkarttunen

/**
 * Encode string into Base64, as defined by RFC 4648 [http://tools.ietf.org/html/rfc4648].
 * As per RFC 4648, no newlines are added.
 *
 * Characters in str must be within ISO-8859-1 with Unicode code point <= 256.
 *
 * Can be achieved JavaScript with btoa(), but this approach may be useful in other languages.
 *
 * @param {string} str ASCII/ISO-8859-1 string to be encoded as base-64.
 * @returns {string} Base64-encoded string.

jkarttunen

function assert (actual, expected, msg, su) {
  if (!window.assertions) {
    window.assertions = {success:0, fail:0};
  }
  if (expected !== actual)  {
    var message = msg || 'expected ' + expected + ' but got ' + actual;
    console.warn(message);
    window.assertions.fail = window.assertions.fail +1
  } else {
    window.assertions.success = window.assertions.success +1;

jkarttunen

/**
* Recursively find parents until matching tag has been found.
* Useful when observing clicks on elements with child elements, but you need to use data- attributes from parent.
* @param {HTMLElement} element - Element to find parent from.
* @param {string} tag - Parent tag to find. Eg. 'DIV' or 'H1'
**/

function findParentTag(element, tag) {
  const tagName = tag.toUpperCase();
  if (element.tagName === tagName) return element;

jkarttunen

/**
 * Extracts subdomain from hostname. Works with localhost, but not with full url with ports.
 * @example 
 * getSubdomain(location.hostname); //www.google.com
 * // returns 'www'
 * @example 
 * getSubdomain(location.hostname); //localhost
 * // returns 'localhost'
**/

jkarttunen

/**
 * Stupid simple BEM utility for class names. Useful for creating className strings in simple components
 * @param {string} block - Block name
 * @param {string} [element] - Element name
 * @param {string} [modifier] - modifier name
 * @return {string} A BEM string,
 * 
 * @example
 * bem('button', 'icon', 'red');
 * // returns 'button button--icon button--icon--red'

jkarttunen

const { series, src, dest } = require('gulp');
const fs = require('fs');
const del = require('del');
const json = require('json-update');
var rename = require("gulp-rename");
var cp = require('child_process');

const package = require('./package.json');
const deployment = require('./deployment.json');

jkarttunen

We couldn’t find that file to show.

jkarttunen

# Misc
*.log
npm-debug.*
*.scssc
*.swp
.DS_Store
Thumbs.db
.sass-cache
.env
.cache

jkarttunen

module.exports = config => {
  return {
    dir: {
      input: 'src',
      output: 'dist'
    }
  };
};