Notes from WordCamp 2014 in Orange County, California

WordCamp Orange County 2014

Underscores –> WordPress Starter Theme

Chris Lema

  • Chrislema.com from San Diego
  • Build a platform. Takes time and effort.
  • Build trust. Offer value. Answer questions. Solve their problem. What is the end game?
  • Direct your light. Shine the light on them. Make it about them, not you.
  • Take the road less traveled. Do something others are not.
  • Indirect streams. Affiliate streams. direct Streams

User experience for WP platforms

Cody Landefeld : 10years making sites. 6+ WordPress

  • User Experience encompasses all aspects of the end users experience with the company and product.
  • Why is it important: We are the builders. We have the ability to create great things for people who want to create great things.
  • User experience is understanding empathy. Learning from their experience.
  • Understanding their challenges and goals.
  • Considering Empathy, How do we help people when they get confused, lost and frustrated.
  • Learn and Practice empathy for your users: understand your users, know their frustrations, know some of their constraints, solicit good feedback.
  • Usertesting.com
  • Business people sometimes are not able to lead the projects. Setting expectations early in project. There is life beyond the launch date.
  • Choose right platform. Getting Deeper with front end design.
  • User experience is not just for design.
  • Rain Maker Plugin? – for do it yourself types

Enterprise WordPress

“Performance Scalability and Redundancy”

Architecture. Catching. Optimizing. Testing.

Architecture

  • Dedicated server for admin traffic.
  • Not affected by load on the front end.
  • 3 front end servers. Redundancy.
  • Monitors.
  • Dedicated servers for Database
  • Meme cache servers
  • Load balancer handle task offloading. Restrict admin request to whitelist source traffic.
  • Distribute work to specialized servers then can specialize and configure those servers to do the work.

Caching

  • Memcache: stores objects as a key value pair
  • Varnish: Stores HTML
  • Assets: CDN

Think of caching as:
* Varnish: Really fast. “Brain”
* Memcache: Slower. “File cabinet”
* Database: Slowest Method. “Going to Library”

Request –> Load Balancer –> Varnish –> Web Server –> Memcache –> Database

CDN Types

1. FTP ingest assets manually
* Manual file management.
* Methods for refresh: TTL, cache busting. Alternate URL. Forced expatriation.
* — Great for large assets.

2. Origin Source

  • Automatic replication to CDN
  • Can be made to work with WordPress provide media library with path adjustment. Also CSS and JavaScript.
Optimizing

—Tools—

Browser tools: Yslow. Page Speed. Firebug
External tools: Webpagetest.org. Xenu (PC) / Intergity (Mac)

—Techniques—

  • JavaScript: JSLint. Minify. “Smash” combine files together.
  • CSS: Minify. “Smash” . SASS and LESS.
  • Images: Optimized for web. Correct format.

—Concepts—

  • Images: CSS sprites. Progressive vs baseline JPG
  • Icon fonts: Font Awesome.

Testing

  • Load Testing: Never on production. Never before notifying everyone. Always for sites that will have potentials high load or DDoS target.
  • Browser Automation Testing Example: Selenium
  • Monitor front and back end of website.

Leaning to Troubleshoot WordPress

carriedils.com

  • I dunno… Plugins?

Designing a Theme in the Browser

  • Tammy Hart tammyhartdesigns.com Design Engineer at 10up
  • Distributed Full Service Agency 10up.com Always hiring!
  • Design Engineer? = Design / Front-End / WordPress
  • Creative mock up is limited. Shows one view, and no hover styles or animation.
  • Creative mock up vs In Browser Design because “What will the responsive look like”?
  • Design is: creative / mockup / prototype *
  • Prototyping Design with WordPress

What you Need To produce a WordPress Theme

  • WordPress: Local. Staging.
  • Creative Assets: Mock ups. Style tiles.
  • Development Tools: Code editor. Browsers. Mobile emulators.

PHP Optimization

“How to make your code run faster”
by Dave Jesch. Lifetime Geek. SpectrOMTech.com

  • Optimization: is an art and a science
  • Mastering Security and Optimization

1. How to measure improvement

What are we measuring? Speed. Memory. Code

Tools

  • microtime()
  • memory_get_usage()
  • XDebug Profiler

. Basic optimization techniques

  • Upgrade! to latest version on PHP
  • ‘string’ “string” not the same
  • use built in functions, especially for arrays and strings. Implode() explode()
  • Identity 1=$1 vs Equality ‘1′$i
  • Don’t make needless copies
  • use reference operator $x =&array
  • Unset large arrays when no longer needed
  • Echo $a,$b instead $a.$b
  • Avoid @ error control operator
  • Pre increment ++$i better then post increment
  • ‘for each’ for arrays is better than ‘for’
  • Initialize! Using undefined variables is slower than pr-initialized variables
  • don’t global, unless you use it
  • switch is faster than if… elseif…
  • !isset vs strlen
  • incrementing global var is slower than a local var

3. Examples

  • for each… –> while… is better for iterating arrays
  • for… loops are wasteful
  • Ordering of conditions. Functions that fail faster first.
  • Code optimized:
  • Practice. Practice. Practice.
  • Always more to learn.
  • Balancing act.
  • Art form meets science.
  • Comment your code to remind your future self.

Theme SASSification

  • “Become a Sasskicker Overnight”*
  • Rona Kilmer @rkunboxed ronakilmer.com Crowd Favorite*

Sass intro

  • Syntactic ally awesome stylesheets
  • Makes it more manga or and maintainable
  • Styles easier to maintain
  • Separate files without taking performance hit
  • Avoid bloat. Avoid repeating.

Getting started

  • Terminal : gem install sass
  • sass —watch input.scss:output.css
  • Folder setup w/ Partials
  • // This comment does not show up I the CSS
  • /* This will appear */
  • don’t use important!

The Magic

  • Sassmeister: Tool for checking saas
  • Nesting
  • Parent Selectors &
  • Variables. Good to establish at the beginning.
  • Extending Classes.
  • Extending placeholders.
  • Maths!
  • Mixins with arguments
  • Mixing with default arguments
  • Media query Mixin
  • Functions: rgba, lighten, darken, grayscale, complement, round
  • Sass stuff: Bourbon. Compass. Sussie Grid.

How to make iOS / Android apps with WordPress
Scott Bolinger @scottbolinger

  • What can apps do for you?
  • Native apps are costly.
  • Make: Retail stores. Order menu online.
  • WordPress is now more than CMS. It’s an application platform. Instead of website creation tool.
  • Interactivity: Uploading. Messaging. Taking pictures. Interacting. Swiping.
  • Building your app.
  • Hybrid vs Native: hybrid uses web technologies. HTML CSS JS
  • Tools: Phonegap. Titanium.
  • Jason REST API
  • Prototyper
  • AppPresser : get everything you have in WP into an app
  • AppPresser Plugin App –> Phonegap
  • Upload photos from phone! Use phone functionality.
  • Xcode to preview.
  • Appaware Theme.
  • Testing Your App: X code. Eclipse.
  • docs.phone gap.com
  • build.phonegap.com