WordCamp Orange County 2014
Underscores –> WordPress Starter Theme
- 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.
- 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
“Performance Scalability and Redundancy”
Architecture. Catching. Optimizing. Testing.
- Dedicated server for admin traffic.
- Not affected by load on the front end.
- 3 front end servers. Redundancy.
- 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.
- 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
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
Browser tools: Yslow. Page Speed. Firebug
External tools: Webpagetest.org. Xenu (PC) / Intergity (Mac)
- CSS: Minify. “Smash” . SASS and LESS.
- Images: Optimized for web. Correct format.
- Images: CSS sprites. Progressive vs baseline JPG
- Icon fonts: Font Awesome.
- 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
- 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.
“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
- 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
- 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.
- “Become a Sasskicker Overnight”*
- Rona Kilmer @rkunboxed ronakilmer.com Crowd Favorite*
- 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.
- 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!
- Sassmeister: Tool for checking saas
- Parent Selectors &
- Variables. Good to establish at the beginning.
- Extending Classes.
- Extending placeholders.
- 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
- 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