jubalm

Functional Design Specification

Purpose of this document

This document is for use by Isobar to communicate to creatives to understand specifications required for designing web interfaces.

Target Devices

Outined here are standard devices that the design should be catered for. Basically there are 3 device type; mobile, tablets and desktop. The assumed PSD sizes listed below takes retina displays into consideration thus doubling their required widths.

Mobile

PSD SIZE - 960px width (based on standard 480px)

jubalm

Quickly edit Windows hosts file

NOTE: Needs administrative privilege. Editing the hosts file can mess up connectivity, edit with caution

• Right click on your Desktop (can be any folder you choose)

• Select New > Shortcut and drop the snippet below to the next prompt.

   "C:\Program Files (x86)\Sublime Text 3\sublime_text.exe" "C:\WINDOWS\System32\drivers\etc\hosts"
  

jubalm

Associate Folder as Drive

This is really useful for modifying folders that Windows otherwise prevents you from doing so. Cases like folder or path names too long as well as some commands that Windows deem invalid to execute on a folder.

via http://superuser.com/questions/755298/how-to-delete-a-file-with-a-path-too-long-to-be-deleted

1. Fire a command prompt either pressing the windows/start key and keyin in cmd (no admin privileges required)
2. Navigate to the folder you want to go ex. cd C:\Users\me\Desktop
3. Enter subst J: . to associate the folder to a drive letter (J: in the example).
4. Open Windows Explorer and see your drive listed under Computer.

jubalm

title	author	draft
Mobile First, A Paradigm Shift	Jubal Mabaquiao	true

Mobile First, A Paradigm Shift

A bit of history

jubalm

A bite off of apple

According to Apple's documentation

...embedded media cannot be played automatically in Safari on iOS

That also means triggering video controls through JavaScript is crippled. To get around this on youtube videos, use the native youtube video controls instead for IOS, and load custom ones for the rest.

// detect user-agent if IOS
var isIOS = navigator.userAgent.match(/(iPod|iPhone|iPad)/) ? 1 : 0;

jubalm

Table style

.parent {
  display: table;
}
.center {
  display: table-cell;
  vertical-align: middle;
}

jubalm

// add connect-modrewrite to dev dependencies
// npm install connect-modrewrite --save-dev

// module.exports
var modRewrite = require('connect-modrewrite');

// connect.options
middleware: function (connect) {
  return [
    modRewrite(['^[^\\.]*$ /index.html [L]'])

jubalm

usemin       : {
      html   : ['<%= yeoman.dist %>/**/*.html'],
      css    : ['<%= yeoman.dist %>/styles/{,*/}*.css'],
      options: {
        assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/images'],
        patterns: {
          html: [
            [/<img[^\>]*[^\>\S]+ng-src=['"]([^"']+)["']/gm, 'Update the ng-src to reference our revved images']
          ]
        }

jubalm

Javascipt Authoring Conventions

General

• Avoid exposing global variables as much as possible
• Always comment your codes functionality and usage
• Avoid inline JavaScript
• Place your <script> tags before the end of the </body> tag
• Only use console.log for testing. Provide a logging function if your application requires
• JavaScript as Progressive Enhancement

jubalm

      var
        options = {
          videoId: 'YOUTUBEID',
          width: '100%',
          height: 'auto',
          playerVars: {
            autoplay: 1,
            controls: 1,
            modestbranding: 1,
            rel: 0,