Hacking Creativity

Jeremy Duvall

Creativity not limited to art realm

Four habits to creativity:

• Live outside the box
• Practice generating ideas
• Create a creativity routine
• Set constraints

Hacking Creativity

Live outside the box

- "You are the sum of your influences" -Austin Kleon

- Read same thing, have same experiences, leads to same ideas

Hacking Creativity

Practice generating ideas

10 ideas per day for a year

    - 10 x 365 = 3,650 ideas
    - Spend 5 minutes on ideas
        - Braindump

Hacking Creativity

Create a creativity routine

1. start small
2. emphasize consistency
3. show up
    - Commit for one week

Hacking Creativity

Set constraints

- Most of us work best under a time limit / deadline

Wonderful WordPress Workflows

Ryan Kanner

Love your process.

Everyone needs to be on board.

Every team works differently.

Wonderful WordPress Workflows

Ryan Kanner

Process for everything
- Tasks

- Bugs
- Where, how development is done
- QA
- Deployments
- Ongoing maintenance

Wonderful WordPress Workflows

Ryan Kanner

Code should not be owned by the person who wrote it

- Consistency is key
- Use a style guide / kitchen sink
- Document everything

"Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live" - Martin Golding

Wonderful WordPress Workflows

Ryan Kanner

Plugins
- Curated list of pre-approved plugins for your team to refer to when in need of special functionality
- Build your own plugins for internal use
- Leave plugins outside of repo

Wonderful WordPress Workflows

Ryan Kanner

QA
- Requires fresh eyes
- Checklists make life easier
- Identify common problem areas with previous projects and make sure to check them moving forward
- Decide on browser support before starting a project

Wonderful WordPress Workflows

Ryan Kanner

Have a boilerplate theme

Wonderful WordPress Workflows

Ryan Kanner

Internal plugins
- micro-plugins
- adds functionality without bloat
- more control over codebase
- allows you to globally update code on all websites
- tools to help manage: 
    - TGM plugin activation
    - GitHub updater

Wonderful WordPress Workflows

Ryan Kanner

Automation
- Automating mundane tasks
- Gulp, Grunt

Keep sites up to date (audit?)

Things change at scale

Custom Theming

Genesis vs. _s

Paul Davidson

Custom Theming

Paul Davidson

Alternatives
- roots
- bones
- starkers

Genesis = template tags via hooks?

Sassy Toolkits

Eric M. Suzanne

A DIY grid system system

Gives us the math via an API to create a flexible grid system or to style on the fly

Sassy Toolkits

Eric M. Suzanne

@import "susy"

/* Changing Susy default global settings */
$susy: (
  /* Tells Susy to use 12 columns */
  columns: 12,
  /* Tells Susy that the container has a max-width of 1120px */
  container: 1120px,
  /* Tells Susy to use border-box */
  global-box-sizing: border-box 
  );

/* Makes border-box properties */
@include border-box-sizing;

Sassy Toolkits

Eric M. Suzanne

.wrap {
  @include container;
}

/* Tells Susy there's 8 columns in the content */
.content {
  @include span(8); 
}

/* Tells Susy there's 4 columns in the sidebar, and its the last item on the row. */
.sidebar {
  @include span(4 last); 
}

Sassy Toolkits

Eric M. Suzanne

.wrap {
  @include container;
}

.content {
  @include breakpoint($medium) {
      @include span(6);
  }
  @include breakpoint($large) {
      @include span(8);
  }
}

.sidebar {
  @include breakpoint($medium) {
      @include span(6 last); 
  }
  @include breakpoint($large) {
      @include span(4 last); 
  }
}

Sassy Toolkits

Eric M. Suzanne

http://susydocs.oddbird.net/en/latest/toolkit/

SassDocs

http://sassdoc.com

True - Sass testing w/ Mocha

http://www.ericsuzanne.com/true

50 Great Ideas to Get on Google Page 1

- Block local IP from analytics
- Need a mobile website - will not appear in top results
- Content is mobile ready, most relevant
- Avoid influencing your own site, your competitors site
- Keywords, key phrases - not paid as much attention to
- Company name not what people are searching for, don't make a keyword
- Domain is easy to type, easy to remember
- Relevant links
 

50 Great Ideas to Get on Google Page 1

- Credible sources
- Inbound and outbound
- Create personas for website
    - Funnel people by persona
- Use Analytics, Webmaster Tools
- Create Sitemap
- gmail "not okay"
- Tell a good story
- Label picture properly

JavaScript Enlightenment

Functional Programming:

 
Style of building the structure and elements of computer programs -- that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data.

JavaScript Enlightenment

Backbone - functional
    - pluck
    - map

MV*

Underscore.js
Benefits:
- Comes with WordPress / Backbone

Cons:
- Mind-bending
- Small utility library, not framework

Learn Something Useful Every Day

Brian Richards

You must make time to learn. Every day

Learn Something Useful Every Day

Brian Richards

“Knowledge without application leads to atrophy” - @rzen

Deep practice leads to skill retention.

"Mastery through myelin."
- Talent Code

​

Learn Something Useful Every Day

Brian Richards

Make time for rest

In the music world, the term “rest" is better understood as preparing for the next thing.

Takeaways

- CMB2 - got a lot of good reviews

- Code standards: PHP, JavaScript, CSS/Sass

     - CSS - CSS Guidelines

     - PHP - WordPress

- Git Flow / Feature branches when developing new features on a site

    - PRs for everything, code reviews to check against code standards

- Commit to Slack, ditch Google Chat

    - great for documenting ongoing project discussion

    - great for remote team members

Takeaways

- Repo structure

     - wp/ directory for non-wp sites

     - don’t include wp in repo so it can’t be updated from production admin

     - theme essential plugins included in repo as submodules

          - if included, include via theme repo or mu-plugins if possible

     - non-theme essential plugins excluded from repo so they may be upgraded?

Takeaways

- Fix Grunt

     - .map files are driving me crazy

     - turn off source mapping?

     - “dev” mode

- ES6

- Bower or NPM for managing external dependencies

- Susy + Compass

- uncss + csscss + cssstats

- montage (sprite generation)

- yslow + pagespeed

Takeaways

- Firefox Power Surge

- QA

     - Acceptance testing

     - Unit testing

     - Webpagetest

     - Need to document QA checklist

- Project/theme READMEs to document everything

    - Wiki for internal references?

Takeaways

- Comments!

     - PHPDocs?

- Launch checklist

     - Accessibility audit/checklist

          - WAI-ARIA

          - 508

     - Cross-browser audit

     - Graceful degradation audit

- InVision for interactive comps

    - "A prototype is worth a thousand meetings"

Takeaways

- Keep sites up to date

     - When a new version of WP is released, update WP, update plugins, test locally and push to production

- Worry about licensure

- Curated go-to plugins

- Starter theme

     - Underscores theme