HubSpot COS Design Notes

• PROGRESS: 
• DONE Introduction to Building Templates with the HubSpot Design Tools
• PENDING Constructing World Class Email Templates
• PENDING Creating Engaging Page Templates
• PENDING Engineering Effective Blog Templates
• PENDING Designing a User-Focused Experience
• PENDING Drafting Smarter Mobile Designs
• HubSpot COS (Content Optimisation System) Dfn: Inbound Marketing Communication Platform (for hosting various site content) that differentiates itself as a COS rather than a traditional CMS (Content Management System) like WordPress, Joomla, or Drupalincluding: 
• Security (Firewall, SSL with Search Engine Ranking Higher), Hosting (on CDN)
• Social Media Tools
• Analytics
• File Management
• Development Tools
• Responsive Design Templates (Cross-Device Auto Adjust Screen Size). Verify Responsiveness Maintained after Custom Styling
• Smart Content (Personalised User Experiences)
• Location
• Lifecycle Stage
• Example: CTA or Form different for Leads vs Customers
• HubSpot Design Manager Tool Content (Menu) > Design Manager
• Overview
• Staging Platform (Testing of New Content and Styling for Rapid Development)
• Template Builder (built upon Twitter Bootstrap grid)
• Structural HTML Template Visual Layout Design (Drag-and-Drop)
• Stylesheet Facade with CSS 
• Left Sidebar
• Templates
• Custom (Blog, Email, Page System)
• Global Groups
• HubSpot Default
• Coded Files - Stylesheets and Templates (only those built entirely from Code)
• Primary CSS File
• Custom Modules
• File Manager
• Right Sidebar
• Create New Template/Stylesheet
• Step 1: Usage:
• Template Builder
• Code Editor
• Custom Module
• Step 2: Template Type (includes respective Default Modules):
• Page, Email, Blog, or System Template
• Step 3a: Default Modules of Page Template
• Section Header
• Logo
• Page Footer
• Step 3b: Default Modules of Email Template
• Email Body
• View as Webpage
• CAN/SPAM
• Step 3c: Default Modules of Blog Template
• Content
• Recent Posts
• Email Subscription
• Step 3d: Default Modules of System Template
• Errors Page (404) - Retain / Maintain User Engagement
• Password Prompt
• Subscribe/Unsubscribe Preferences
• Page Types that exist
• Alert Pages
• System Pages
• Warning Pages
• Notification Pages
• Template Layout Examples:
• Home Page (i.e. free trial/demo as Content Strategy, visualisation, how it works) https://www.rezdy.com/
• Product Page (i.e. breakdown/summary of features) https://www.rezdy.com/booking-software/#
• Blog Plage (i.e. article/RSS feeds, social media footer for each, tools and resources sidebar, facebook feed sidebar) https://www.rezdy.com/blog/
• Landing Page (i.e. free ebook offering, free copy/trial sign-up form, image) 
• Template Dashboard
• Left Top
• Tab Menu - View Layout HTML + CSS Simultaneously
•  Tab > Open New Tab
• Actions Menu - Save / Clone / Delete / Revert to Template History State
• Edit Menu - Undo / Redo / Access Body CSS / Access HTML Head
• Group Menu - Group Modules together
• Left Sidebar (Modules)
• Default / Global / Custom Module & Group Access, etc (any changes to Globals are reflected on all Templates)
• Center Top
• Toggle Layout / Preview Button
• Center Bottom
• Workspace
• Add Modules - Drag-and-Drop Module from Sidebar to Workspace to Add it
• Split Modules - Hover over a Module in Workspace and click "Split" Button (Max 12 Columns since Twitter Bootstrap)
• Move Modules - Drag-and-Drop into empty space
• Module Options - Click Gear icon (right-side of Module) in Workspace to customise its Name, Edit CSS Styling, Change Module Type, etc
• Global Groups / Modules (Parent Div Structure with Multiple Modules for Responsiveness) - Usage of Group / Module across Multiple Page Templates Group > Click Modules in Workspace > Create Group (Note: Modules selected must be adjacent to each other to be grouped, otherwise they appear "red" in colour, instead of "green"). Example 1: Reuse and Wrap entire Header into Global Group (Global allows style modifications affecting multiple modules from single source reflected on multiple pages to prevents having to it re-build individually on each Page Template, and easily move around). Masthead / Header (logo / brand slogan, used across multiple pages). Footer (navigation links used across multiple pages, contact info, RSS feed). Copyright / Privacy Links. Offers / Ads (sidebar)
• Local Groups - Collection of specific Modules to always be used together
• List of Global Modules - Content > Content Settings > Global Content
• Configure Group (i.e. make it a Global "miniture" Tempate for use across multiple "larger" Templates) - Select Module > Click Gear icon > Make Group Global  (Global Group is compacted into a single Module that turns "green" upon successful creation, and is Reusable across the same or other Templates)
• Right Top
• Publish Button - Save / Update Template on Pages where used
• CSS Implementation
• Types:
• Primary CSS File (applies to domains/sub-domains account-wide: menu, header, footer, typography)
• Domain Stylesheets (where multiple domains used) Content > Content Settings
• Template Stylesheets (attach stylesheet to individual template, or Disable in templates Head Options, i.e. to appear different from other templates)
• Page-specific Stylesheets (attached in Content Editor)
• Setup
• New Tab > New Coded File
• Code Editor > File Type [Page, Email, Blog, System] > Create
• File Name (i.e. xyz.css) > Save
• Preview (Stylesheet)
• Note: Create Custom CSS Classes rather than re-styling built-in (as subject to change) 
• Browser Inspect Element (or plugin like FireBug)
• Review Structure (HTML and CSS Classes)
• Refined Template Design
• Add Multiple CSS Classes to Modules
• Gear icon > Edit CSS (use space between each, rather than comma i.e. abc.css xyz.css)
• Add CSS IDs on a Group of Modules
• Gear icon > Edit CSS 
• Add Inline CSS (experimenting)
• Edit > Body CSS
• Edit HTML Head
• Edit > Edit Head
• Email Styling
• Use Inline Styling
• Advanced Menus
• Content > Content Settings > Advanced Menus > Add Page > Select Page OR Enter URL
• Re-Ordering Menu items by Drag-and-Drop
• Sub-Menus - Click Sub-Menu icon
• Publish Changes
• Advanced Tactics
• Master Templates
• Add All Modules to a single Template (quickly view styles to work efficiently)
• HubSpot's Boilerplate CSS (commonly used CSS selectors)
• Custom Wrap Parent HTML Elements (help styling process with parent classes) i.e. <div class="wrap"><...
• Actions (button)
• Clone to File (clones an existing template using the Code Editor)
• Add JavaScript to Template's Head
• Content < Content Settings > Site Header HTML OR
• Edit Module Options > Raw HTML > [Add <script>...</script>]
• Note: jQuery script tag (latest) is automatically added in Head
• HubL
• Dfn: Python-based server-side language to create COS Templates based on Jinja.
• Usage: Creating simple task logic (import current date or colours)
• HubL Tags Integration
• Usage: Dynamically generate HTML for HubSpot Templates including HubL Tokens (i.e. handlebars {{ ... }} ) i.e. {% if ...%}, {{ content.publish_data_localised }}
• Custom Modules (using HubL) in Design Manager
• HubSpot Modules
• Module Types
• Text
• Rich Text (Text, Images, Videos, Calls-To-Action CTA)
• One Line of Text
• Page Footer (Company Name + Copyright Info from Content Settings. Customise by adding Contact Info + Navigation + Map)
• Note: Add descriptive Filler text so Content Creator understands how it should appear when filled out
• Visual Content
• Logo (upload in Content Settings)
• Image (placeholder for styling, include ideal dimensions in label to communicate to Content Creator)
• Header Gear icon > Edit > Options
• Header (one line text header)
• Section Header (one line text header with smaller sub-header)
• Conversion-Related
• Call-To-Action (Buttons, i.e. directing visitors)
• Form (convert visitors into leasds by gathering info in exchange for an offer)
• Social Sharing
• Social Sharing (share across end-users social networks)
• Follow Me (pull info from end-users social settings allow them to follow the org)
• Blog-specific
• Blog Content (display blog posts from Blogging Tool)
• Post Listing (list of blog posts by date or popularity)
• Post Filter (list filtered by different criteria like authors/topics)
• Blog Email Subscription (subscribe to site blog)
• Navigation
• Simple Menu (static menu on page-by-page basis)
• Advanced Menu (for site-wide)
• Advanced
• Flexible Column (column allowing more modules to be added to group)
• Custom HTML or HubL Template (HubL baby-locks the designer from viewing/editing code) (module to add custom markup and embedded items like Twitter feed)
• Horizontal Spacer
• Modules & Content
• Page Template Layout Design
• Prototyping/Mockup Tools
• User Personas for Guidance
• Accessibility
• Design Elements and CTAs Visible
• Design Constraints Integration
• Structure Design (Templates)
• Style Guide for Organisation
• Styling Integration
• User Feedback Integration
• User Experience (UX) Design focus (Minimise Complexity)
• Goals to Maintain & Achieve
• Consistency (across different Pages)
• User Environment (Surroundings) and User Device Considerations
• User Sensory Experience
• Visual
• Tactile
• UX Optimisation
• Standard Media Query Breakpoints
• Content Stack Ordering (Device Specific)
• Quick Check of Responsiveness
• Content Editor > Preview > [Select Device Type & Orientation]
• Browser Viewport Resizer
• User Testing 
• Timeframe
• Evaluate UX of Design including Functionality & Responsiveness (Effective/Engaging) on Desktop, Tablet, Mobile Devices
• Re-Design Website Steps
• Adaptive Design vs Responsive Design
• Common: Attempt to optimise UX by adjusting for different devices
• Responsive Design - single fluid/flexible design (using media queries, flexible grids, responsive images
• Adaptive Design - detects device/features and provides appropriate feature/layout based on predefined viewport/characteristics
• "The Fold" - Position all important content above "The Fold" (the pages fold), as visitors are less inclined to scroll to find content that is not immediately visible
• Strategic Marketing
• Page Views Increases
• Though Leadership Promotion
• Content Positioning for Conversions Increase
• Email Templates
• Note: Analytics and Contact Info stored automatically at HubSpot for emails sent
• Limitations of Email for Design
• Email Clients prevent auto image loading sometimes
• Email Clients ignore Linked CSS Stylesheets (use Inline Stylesheets instead)
• Testing Email Layouts, Functionality, Responsiveness (Cross-Device)
• Check images on different screen sizes
• Check zoom functional and text legible
• Check CTA functionality
• litmus.com
• Integration of Images and Structure
• Image Space in an Email is essential to visually encourage/engage user to continue reading the content such as headings, text and links and not delete as spam (images processed by humans incredibly faster than text)
• Compliance with CAN/SPAM Act 2003 (recipients must understand where the email came from and how to unsubscribe with a link to give recipients the right to no longer be emailed)
• Custom Module for Email Signatures (personably with photo for positive effect on recipient)
• Marketing
• Lead Generation Boost Specific
• Integration of Branding with Content Creation
• Personalisation Tokens
• Verify Loading (Cross-Device) of Calls-To-Action (CTA)
• Links
• HubSpot Designer Documentation
• Inbound.org

WDI Progress Update - Final Project (Littlehumans), Brainstorming, Mock Interviews, Codium

Challenges

• Littlehumans (Medical App for Midwives and Parents of New Born Children)
• Problems faced
• Combined OAuth Login (Facebook, Twitter, Google) with Devise spend all day Saturday trying to get it to work in Production environment (managed to get Google, Facebook, and Twitter to work)
• See 'About Us' page at the Littlehumans website for other challenges
• Dancing at Karaoke!

Progress @ General Assembly (GA)

• Littlehumans Final Project
• Heroku Link: Littlehumans App    
• Tech Stack: View the 'About Us' page at the link above
• Purpose: Midwife app for Midwives and Parents to track and share New Born Baby information and key Moments (input from my partner who is a professional midwife)
• Sunday Javascript - with Daniel Tsui
• Challenging Tests
• Immediately Invoked Function (IIFE)
• .Then
• Hoisting
• First Class Citizen
• Javascript Ecosystem - Presentation by Je Turnbull
• Multi-paradigm (MPM) and styles 
• Automation and Task Runners
• Package Management
• JS Essential Knowledge and Tools
• Front-end Job Questions
• JS Testing
• Scope and Closures
• Recommended Books
• Codium Group Project
• Twitter Gem - Solved ability to scrape blog posts

Curiosity

• CodeKit
• Compass
• Edge Animate

WDI Progress Update - Advanced Rails Caching, SASS, Websockets, Javascript Evolution & Frameworks, Group Project Implementation

Challenges

• Backbone.js and Burning Airlines - 6 hrs preparing Burning Airlines MVC for Flights on 13th Mar:
• Problems fixed thanks to help from team in the morning:
• Missing from app.js
• Async call to fetch flight collection model and Router
• Correction in FlightsController
• 'respond_with @flights' instead of 'respond_with :json => @flights' to prevent embedded JSON
• Removing JBuilder.json file that was merged after git pull from master, and caused only id and url to appear at URL /flights/flights.json (code previously pushed compiled successfully and listed flights)
• Binding(this) to enable Search button functionality for on-click 
• Debugging in Chrome Inspect Element using CMD+' to skip to next line of code for testing, and hovering over variables to show current value 
• Pomodoro Time Management

Progress @ General Assembly (GA)

• Group Airline Project (Implementation)
• Team: Marcus Hoile, Sam Peters, Alberto Forni, Luke Schoen
• Javascript Evolution
• JS Framework Types: 
• Full-stack - Derby (real-time apps), Sails (like Rails), Meteor (new with potential security issues)
• Front-end - Backbone.js, Marionette, Knockout, React, CanJS
• Front-end + Datamining - Angular, Ember
• Back-end frameworks, Websockets, 
• Templating - Handlebars
• Other: Batman, Express Polymer, Socketstream, Clojure
• Websockets (Socket.io to manage HTML5 websockets, real-time control to sync broadcast changes without overhead HTTP)
• Proxy Servers - NGrok
• Separate Loading Templates - .jst.ejs and Global Namespaces
• Caching in Rails
• Client-side & Server-side (Page, Action, Fragment)
• ActionPageCaching GEM
• ActionPackCaching GEM
• Rake Task Sweepers
• SQL Query Caching
• Memcache, Nullcache
• SASS (Nested, Interpolating Content, Variables, Mixins, Cross-File Mixins, Inheritance, Pseudo Selectors, Asset Pipeline, Image-Path and Asset-Path for Production)
• Presentation TankStream Labs
• Key Takeaways:
• Lifestyle & Work
• Startup Org Fit Evaluation Essentials
• Recording Skills
• Cocurricular and Coding
• Language Agility
• Erlang, Haskell
• Terminology & Tools
• Strong Parameters
• Async Processing and Delays (SidekiQ + Reddis)
• Scheduling Processes (Cron + Whenever)
• XML Parsing (Nokogiri)
• PDF (Prawn, PDFQueue)
• Debugging (Pry)
• Uploading Files (Paperclip, Carrierwave)
• Sublime GEMS (GEM Browser, Git Extensions)
• JSON (JBuilder, JSON Serializers, Draper)
• Image Resizing (LibXML image munging, Image Magic)
• Communicate Validation in Natural Language (Chronic, Chronorails GEM)

Purchases

• Javascript The Good Parts  (Read 25%)

Events

• Fisburners - Chat with Mark (Movie guru), met David (recommended Founders Institute), Dimitri, Jenny, and Matthews B'day

WDI Progress Update - Presentations (Group Project)

Challenges:

1. Reading "Agile Development with Rails 4" this weekend
• Core:
• Unless, Until, If, While 
• Pass Block as Named Parameter
• Exceptions, Rescue
• Instance Variables, Convenience Methods,
• Public, Private, Protected Methods
• Modules and Helper Methods
• YAML, Marshalling Objects, Sessions
• Ruby Idioms
• File Relative Expand Path Method
• Aliasing
• Shopping Cart App
• Preliminary Analysis
• Incremental Development
• Use Cases, Different Actors
• Iteration Feedback
• Page Flow for each Actor
• Data Diagrams for App
• Create App
• Create Database for App Product Maintenance
• Nested CSS matching each Controller
• Git Ignore
• Validation and Unit Testing
• Validation before write to DB
• Unit Test Models Test Infrastructure
• MiniTest Unit Framework subclass TestCase
• Rake Test Models
• Test Fixtures and YAML Format
• Associate based Stories for Fixture Names
• Using Test DB vs Development DB
• Up to Page 105 / 439

• Ruby Quick Ref (Range, RegEx, FileIO, Var, Cmd Line, IRB, Operator uses, Control method uses, Invoking Methods, Defining Class/Methods/Modules, Access Restrictions, Accessors, Aliasing, Procs, Closures, Exception Catch/Throw/Raise/Rescue, MiniTest)

Progress @ General Assembly (GA)

• Group Project Presentations
• Team #1 - Autism Connect Autismconnect.herokuapp.com (Sam Peters, Emily McCartney, Lauren Krueger, Luke Mesiti) - Key Takeaways
• Gems: Geocoder, Googlemaps, Strap (payments similar to PayPal), 4em??, Pundit and Cancan (forums)
• Authentication: OmniAuth (Google), Devise
• Search: Polymorphic (finds anything with tags many to many)
• Effects: Paralax (slide toggle left right)
• Method: Staged implementation with Gems

• Team #2 - Shared Expense Tracker Wdiexpense.herokuapp.com (Pranava Swaroop, Federico Tagliabue, Marcus Hoile) - Key Takeaways
• Gems: AASM Management (management of workflow change status of groups/resources), Bootstrap Gem Fonts?
• Future: Integrate with Whatsapp.com, share on Facebook timeline, Available offline (caching on mobile), Monetise with buying patterns, white label lnegotations, sell to property management firms
• Method: Daily standups and end of day checkins, Git branching, dealing with Git conflicts merging, teamwork

• Team #3 - Rick Rampage (Game) RickRampage.herokuapp.com (Nick Morgan, Alberto Forni, Ed Fastovski, Luke Schoen) - Key Takeaways
• Our Presentation Slides

• Presentation - Gregory McIntyre, Yourtutor.com.au (Life as a Developer) - Key takeaways:
• Agile Development - Pair Programming, Productivity and Independence, Conversations and Minutes, Values Visibility, Iron Triangle {Scope, Schedule, and Resources + Quality Centre} > No compromise for Quality, Risk Matrix mitigates to ALARP with Strategies, Burn Down Chart (Jellybean measurement), Kanban (pool model visualisation to minimise waste), Lumpy graph (steady flow rate to customers, resource match issues if lumpy progress), Feedback iterative loop (Assess, Agree, Execute) impacted by Scope changes, Poker Estimation (fold over cards and argue to check assumptions and avoid diminishing returns), Card Walls (Agile workspaces, Post-its easy to track, hard avoid responsibility, issue in distributed teams)
• Agile Ideals - Deliver something of value everyday
• TDD - Refactor, Fail, Pass, Repeat
• BDD - Cust. Feedback Driven, TDD is embedded circles within BDD
• Continuous Integration and Deployment
• Latest News: Ruby Weekly, Javascript Daily, Postgres Weekly (signed-up)

Curiosity:

• RubyMine
• SiteCore Certification
• Ogre3D.rb

WDI Progress Update - Javascript, Underscore Library, Fizzbuzz, Modernizr, and Advanced CSS Tips

Challenges:

1. Homework Hangman
2. Dump-Ling on Valentines!

Progress @ General Assembly (GA)

• Javascript (Underscore Library vs Lodash, Scripts to Automate Underscore Setup in HTML, CDN JS Library of JS/CSS, Coordinate Magic Number Dangers, FizzBuzz to Demonstrate Thought Process {Structured Planning, Interaction}, Minification, )
• Presentation - Brice Lechatellier (CSS3 and JS) - Key takeaways:
• CSS vs JS (on Native vs Mobile apps), CSS Pre-processing of Browser Prefixes with Mixins (LESS or SASS), CSS Testing using Chrome Inspect Element, Paralax Animation Techniques, Seamless Transitions, JSFiddle, Font and Icon Libraries, CSS Filters, Depth of Field, Modernizr Browser Compatibility Testing 

Future:

• IOS Apps reflecting on tips from Brice!

WDI Progress Update - Trendmyhunch Extras, Google Analytics Client Authentication using Service Account and OAuth

Challenges:

• Google Analytics Client, Google's API Developers Console (connected!)
• Google Maps Coordinate API (yet to attempt)
• Extras add to My Website: Trendmyhunch
• Collapsing Menu
• Anchors
• Select / Unselect All
• Feedback form (failed on heroku push, stuck on whether i need https://devcenter.heroku.com/articles/sendgrid#ruby-rails)
• Troubles #1 tried Sample Contact Form on Github, Mailgun and associated documentation, etc (unable to use free SendGrid due to past personal income issues), might have revert back to PHP! Yikes!!

• Authentication with Google Analytics Client using Service Account and OAuth! (noted the importance of using the correct 8 digit number after the letter 'p' in the URL when in the Analytics Account Settings of the correct App!! didn't realise this initially and was getting error 403)
• Troubles #2 - Can't upload to Github to mirror pushes to Heroku! Bugger...
• Important Note: Gem Garb could have saved me a lot of time connecting to Google Analytics! 
• Played around with dashing, puma server, rufus scheduler, and redis, and rendered my heroku site useless (site still works on local server though...)  ----> discovered that the reason it wasn't working on Heroku was because there  were remnance of Dash (which I wasn't using). the error was only exposed when i ran "rails console production". to solve the issue i just opened the /app/jobs/sample.rb file and commented the whole file.

~/Documents/w5d1_project/ideas_app/trendmyhunch ✗ master ∴ rails consoleLoading development environment (Rails 4.0.2)2.1.0 :001 > exit~/Documents/w5d1_project/ideas_app/trendmyhunch ✗ master ∴ rails console production/Users/Luke/Documents/w5d1_project/ideas_app/trendmyhunch/app/jobs/sample.rb:3:in `<top (required)>': uninitialized constant Dashing (NameError)

Progress @ General Assembly (GA):

• Analytics (Conditionally included Analytics)

Curiosity:

• Segment.io

WDI Progress Update - Ruby, Sinatra, FileUtils, HTTParty, HTML5, CSS3

Challenges:

1. Ruby Koans
2. Pony gem (SMTP)
3. Error handling
4. GA Pre-work
5. Emmet.io
6. ice Tree
7. Wordpress
8. Heroku
9. Evernote
10. Meta programming (multmaker) 
11. Ruby Warrior
12. VIM commands
13. Stackoverflow
14. Github
15. Google Adsense
16. DevOps
17. Project Euler problems

Progress @ General Assembly (GA)

• Installfest
• Github Homebrew Package Manager 
• Sublime Text 2 (shortcuts, binding)
• Ruby (embedded Ruby files, Ruby API's, data types, conditionals, loops, arrays, hashes, methods, classes, inheritance, exceptions, objects, aliasing, interactive Ruby shell, pry debugging, enumerables, blocks, procs, lambdas, server-side scripts, file and IO classes, file utilities, file pointers, closures, caching, set theory, handling CSV files, handling JSON, HTTP verbs and errors, curl, Sinatra gem and reloader, cat, stash, preferential execution with File__ == $0)
• Ruby Gems - HTTParty, FileUtils, Sinatra app and reloader
• Ruby Modules - YahooFinance
• API's - OMDb
• HTML5 (form fields, responsive)
• CSS (stylesheet use options [import, inline, header], separation of concerns, cascading, descendants, selectors, blocks, properties, fonts, semantic classes, ID's, reset stylesheets, tags, Twitter Bootstrap, incompatibilities reset stylesheets, anchors, spans, blocks, inline, wildcards, link states, pseudo class selectors, positioning, DRY principle)
• Apple Macbook Pro usage

Progress @ Intro to Startup Entrepeneurship (Summer School by General Assembly and Google)

• Unit 1: Finding a Killer Startup Idea

Events:

• Signed up to attend Ruby Conference Australia (Feb 2014) 
• Attended meetup Ruby on Rails Oceana  (ROROSyd)

Future Wants:

• UX @ GA 
• UX tools 
• Volunteer at GA or Fishburners 
• Attend Sydney Business Angels, Sydney Tech meetups
• Attend a Rails Camp @railscamp_au 
• Continue attending Sydney Mobile Developers, and ROROSyd meetups 
• Continue Adobe Creative Suite usage
• Continue Lynda training
• Installfest Ubuntu
• Apply MBT learnings
• Books: Agile Web Development with Rails

Curiosity:

• Apiary, DEP, Audited/PaperTrail, Activerecord gems - (ROROSyd)
• Bundler, Travis CI - (ROROSyd)
• TDD/BDD
• Erlang VM, Elixir, Openresty, Heckle and RSpec
• Concurrency and immutability in languages