Friday, 26 September 2014

InDesign CC 2014, Competition Entry, Analogies, Responsive Design, Design Patterns, Google Maps API, AngularJS

Design Activities @ Lynda - 

60% Complete InDesign CC Essential Training David Blatner
  • DONE Competition Entry submitted my first ever design prepared with InDesign to a competition where the Design a Flyer for Oil and Gas Engineering (Engenya GmbH) @ Took about ~10 hrs using InDesign (yikes! but good practice and fun) for Chance to win US$90 (not a chance though as only got rated 2/5 stars). Lesson Learnt: Always clarify whether or not to take design specification wording literally. 

Luke's Crazy Analogy for the Day

  • Traditional SPAs vs AngularJS vs Precast Concrete vs Cast In-Situ
    • Single Page Apps (SPAs aka AJAX apps) traditionally transport data asynchronously between client-side view (template HTML) and server-side data model (JSON or SQL database) via a RESTful controller using the MVC design pattern.
    • AngularJS Apps ship the template HTML and data model to the browser for assembly whilst the server statically serves templates and associated data required
    • Static Modular Precast Concrete present a DRY solution based on standardised designs that are pre-manufactured using materials in a factory, simply verified by design at fit for purpose, and shipped to site.
    • Cast In-Situ Concrete solutions for unique situations require costly ad-hoc design and verification prior to shipping of raw materials to site.
    • Dynamic Module Precast Concrete could be a hybrid AngularJS-like solution that enables the static serving of templates (designs) and data (constraints) that ship raw materials to site where a modular robotic contraption adapts them automatically to site environmental variable conditions and builds in-situ in real-time 
  • Books 
    • DONE AngularJS Book
      • Favourite Sections: 
        • Chapter 6: API Parent Directives to Coordinate Child Directives
        • Chapter 7: $location Service, and $safeApply Monkey Patch, AngularJS Lifecycle, Module Loading Phases and Configurations, API calls (Factory, Service, Provider), Communicating between Scopes ($on, $emit, and $broadcast) (Example Here)
    • DONE JavaScript Testing with Jasmine
    • DONE Google Maps API V2
    • READ (only programmed using 50%) Google Maps API V3 (excellent!)
    • READ Redis and Resque GitHub Article (excellent!)
    • 10% COMPLETE Enterprise Rails
    • IN PROGRESS Journey into Mobile Web @ Codeschool
  • Data Structures
    • Dictionaries 
      • Dfn: Queried (i.e. CRUD, search) Data Structures. Implementation choice affects Performance. Try each checking abstraction procedure call overhead to avoid non-time-critical options. Maintainable by Isolate Dict. Data Struct. (min. code) from Interface (bus. logic) (i.e. Separation of Concerns) }
      • Hash Tables
      • Skip Lists
      • Balanced/Unbalanced Binary Search Trees (BTrees)
    • Priority Queues 
      • Dfn: Quick Access Key in Set with Highest Retrieval Priority
      • Applic: 
        • Sort Ordered Tree Struct. Each Leaf (i.e. 7/2 or 1/5) determines Priority (i.e. Month then Date) }
    • Suffix Trees & Arrays {
      • Dfn: Trie (Tree Struct) to process checking if X is subString of String. Faster in Linear (search time is linear to String length) instead of O(n^2). Expensive in Memory terms.
      • Applic:
        • String problems. Node for each Char. Root is Null String. Branches at unique Chars. }
    • Graph Data Struct {
      • Dfn: Best for Algorithms repeatedly asking if (a,b) is in X. Note: Google Maps map stored in Edge Weighted Directed Graph, with Locations (Vertices) and transportation Paths (Edges)
      • Issues
        • Problem 1: Memory to remember large qty of Vertices and Edges. In-Memory DB that is Queried to Insert/Delete Vertices/Edges from Graph at runtime will not work properly with traditional Adjacency List
        • Solution 1: Streaming Library under the hood to Dynamically Load resources
          • Algorithms (e.g. Link)
            • Quad-Trees 
            • Frustum Culling 
      • Applic:
        • Adjacency Matrices 
          • Example - Best with Repeated Edge Insert/Delete using Small/Dense Graphs with say 100 Vertices, Adjacency Matrix has 10,000 entries
          • Algorithms (suitable): 
            • All-Pairs Shortest Path
        • Adjacency Lists
          • Applic. Best with Solving Maze Puzzle with One Solution using Sparse Graphs (i.e. Google Maps)
          • Example - Best with Attributes Insert/Delete of Graph Edge or Vertex (i.e. size, colour). Handle as Extra Records in Vertex or Edge Records 
          • Algorithms (suitable): 
            • Binary Search Trees (BTrees)
            • DFS(Depth-First Search)-based Algorithms with Iterative Deepening (traverses nodes and edges, Remembering Previous Nodes to avoid Repetitive Infinite Loop and to prevent Not Reaching all nodes)


Friday, 5 September 2014

Ionic & Yeoman

Ionic HTML5 Mobile App Framework 
# create new folder for app and open it
mkdir my-ionic-project && cd $_
# clear npm cache. more info @ NPM config 
rm -rf ~/.npm 
npm clear cache
# install generator-ionic globally
npm install -g generator-ionic
# installs:
  • Lo-Dash.js (Utility Library. Superset of Underscore.js)
  • Chalk (Package for Terminal string styling)
  • MOUT { Modular JS Utility Collection. Use whole package or individual Modules (Helper Methods) }, includes Dependencies:
    • Commander.js (Node.js Full Command-Line Interface Utility)
    • Handlebars (Semantic templates)
    • Istanbul (JS code coverage)
    • Jasmine-Node (Node.js integration of Jasmine Spec Framework)
    • JSHint (JS error detection)
    • MDOC (Markdown based documentation generator)
    • Nodefy { convert AMD JS modules (RequireJS define(..) into Node.js format (module.exports...) }
    • Regenerate (JS RegEx generator
    • RequireJS { Node.js Adapter for RequireJS (loading AMD Modules) incl. Optimiser (Minifies Scripts, CSS Inlined w/out Comments) }
    • RimRaf { Node.js deep Deletion Module (rm -rf) }
    • Rocambole { Recursive walk and manipulate EcmaScript Abstract Syntax Tree (AST) to Compile code (i.e. Rocambole Visualiser) }
  • Yeoman-Generator { Rails-inspired Generator System to Scaffold apps }, adds Additional Dependencies:
    • Dargs { Spawn CLTs by Converting Options Object into Command-Line (CL) Args }
    • Diff { Text Differences for JS (Sample) } 
    • Debug { Node.js Debugging Utility }
    • Mime { Mime-type Mapping API includes Node.js and Apache Project extensions }
    • Text-table { Text Tables borderless and aligned to print to STDOUT }
    • Async (Node.js Utility Module with Functions for Asynchronous JS)
    • Mkdirp (Node.js Recursively create Nested Directories)
    • Isbinaryfile (Node.js check if file is binary)
    • Shelljs (Node.js portable Unix Shell commands)
    • Underscore.string (Underscore.js String manipulation for JS) 
    • Iconv-lite (Convert character encoding/decoding in JS)
    • Glob (Pattern Matching search walking either Sync/Async)
    • Findup-sync (Pattern Matching first File found in current or nearest Ancestor Directory)
    • File-utils { User CLT Sync File and Directory Utils (do not use on Node.js server as is equivalent to Grunt.file) } 
    • Cheerio (Lean Server implementation of core jQuery)
    • Request {Node.js HTTP and HTTPS Request Client (Forwarding, File Streaming, Piping, Proxies, Unix Sockets, Form Data URL Encoding, HTTP Auth, OAuth Signing, Custom HTTP Headers) }
    • Inquirer { Node.js Collection of Common Interactive CLIs (lightweight form of Commander.js }
  • Cordova { Platform to build Native Mobile apps using HTML, CSS, JS }, adds Additional Dependencies:
    • Q { Tool for creating Promises in JS. then method resolves handling eventual return value (fulfillment) or thrown exception (rejection) asynchronously and mitigates the Pyramid of Doom } UncommonJS Promises Manager
    • Semver (NPMs semantic parser of package versions in package.json file)
    • Underscore (Helper Library for JS is Underscore.js)
    • Plist-with-patches (Node.js parsing of Property List files (.Plist) or string into native JS object with Pull requests applied)
    • Optimist (lightweight Option Parsing with Argv Hash)
    • Npmconf (NPM configuration. Alternative RC)
    • Xcode (Node.js parser of xcodeproj/project.pbxproj files)
    • Tar (compression)
    • Elementtree { Module for XML serialization (creation) and parsing }
    • Plugman (Install/Uninstall Cordova plugins)
yo ionic
# installs:

# ionic starter blank creates:
  • Gruntfile.js
  • .gitignore
  • hooks/after_prepare/icons_and_splashscreens.js (Scripts executed before and after directory-related commands) Example Hooks
  • test/spec/controllers.js
# bower_components folder (similar to the /vendor folder in Rails) updated with: 
  • Collide (JS animation engine built by Ionic Framework team allowing developers to hook into every frame)
  • Angular-ui-router (AngularJS flexible routing with nested views to organise parts of interface into a state machine)
  • Angular-mocks (testing)
  • Angular-sanitize (Parse HTML using tokens to avoid unsafe input with ngSanitize)
  • Angular-animate (Animation hooks for common Directives using ngAnimate)
  • Angular-scenario
    • TODO: 
    • TODO - Test Driven Development (TDD)
      • Karma { Cross-browser HTML Test Server & Runner } uses Plugins / Adapters
        • Jasmine { AngularJS Testing Framework
        • Protractor { AngularJS Testing Framework End-to-end using Jasmine as Test Interface and Selenium Server to control browsers}
        • Mocha { JS Testing Framework. Integrates with GitHub }
          • Chai { Assertion Library }
        • PhantomJS { Testing code on Headless Instance }
        • Istanbul { Automatic Coverage Report Generation }
        • RequireJS { Modular Script and Source File Loader. Optimises and Minifies JS for Deployment }
        • QUnit { EmberJS Testing Framework }
      • Continuous Integration & Deployment Pipeline
        • Adobe PhoneGap Build { Free for Open Source. JS. GitHub Integration. }
        • Codeship  { Free for Open Source. Multiple Languages / Endpoints / Tools / Databases. GitHub Integration. }
        • Jenkins CI { AngularJS Automated Tests. GitHub Integration }
        • Travis CI { Automated Tests. GitHub Integration. Integrated using a YAML file. Results in Pull Requests }
        • Semaphore CI { GitHub Integration. Platform includes NodeJS, PhantomJS, and Headless Firefox }
        • CircleCI $19/mth+ { Multiple Languages. GitHub Integration. Fast }
      • Beta Testing
      • Sass
      • Encryption
        • Database Encryption
      • UI Libraries & Tools
      • Scaffolding Tool (modular code shell generator similar to the role of Rails)
        • Yo (Yeoman)
          • Package.json { informs Node.js of specific packages and version the specific project needs installed (instead of all installed globally) }
          • Bower.json { informs Bower of JS and CSS components to install in /app/bower_components }
          • Gruntfile.js { set of task instructions on specific project for Grunt } 
          • Angular Generator of Boilerplate  
            • Generates Modules { controllers, directives, filters, routes (controller + view), services (providers, factories, values, constants), decorators (with config and delegate), views }
            • Modules (resources)
            • Bootstrap
      • Build & Utility Tools (modular Configuration & Tasks)
        • Grunt { i.e. optimisation tasks including JS and CSS concatenation and/or minification (__.main.css, __.plugins.js, __.scripts.js), running local server, JS error checking and unit tests, Grunt server (uses Node.js) for live reload of changes with re-compiled Sass and CoffeeScript. Similar to Ant for Java }
        • Gulp
      • Packaging
      • Package Manager (Dependency Managers. use npm install (or update) [-g] and bower install to install tools in Package.json into /app/node_packages and Bower.json into /app/bower_components)
        • npm (Node Package Manager) { Installation Utility }
        • Bower { Web component dependency installer (i.e. bower install --save __ to add to list of dependencies in Bower.json). Similar to Maven and Ivy in Java }
        • Wiredep { Bower dependency Injection from Grunt into HTML. Manage JS and CSS includes. }
      • APIs
        • Google Maps
        • PubNub (Websockets)
  • Alias Ionic Unix Commands
    • Setup an alias function in your .bash_profile
gii() { gulp sass ; ionic build ios ; ionic emulate ios ; }

Sublime Text 2
  • Custom Tab Spaces
    • Open a document in Sublime Text 2 with the File Extension that you want to apply custom tab spacing to (i.e. two tab spaces preceding the code instead of the default of four spaces when you press the 'tab' key on your keyboard)
    • Go to the Menu and select: Sublime Text 2 > Preferences > Settings - More > Syntax Specific - User
    • Paste the following in the file that has opened automatically and then save it 
  "tab_size": 2,
  "translate_tabs_to_spaces": true,
  "detect_indentation": false