I’m rebooting this blog because I want a space to just publish and organize my thoughts. I’ve found that writing can help organize those thoughts and teaching through writing helps me learn concepts.

Part of the reason I haven’t posted here in a while is that I’ve been paralyzed by trying to figure out a consistent theme to post about. Do I post about computers, cloud, Google, leadership, cycling, cooking, fatherhood, etc? I’m at the point where I’m done with overthinking it giving up the notion that this site needs that. I’ll likely stick to themes and ideas I encounter throughout my day-to-day, but I’m done worrying about it all being connected.

Lastly, I’d love for this site to be a communication channel and not just a one-way street. Please leave feedback and comments on the posts and let’s have a discussion. Also, if you want to reach out directly, I usually have my DMs open and you can find me on Twitter: ibjhb@

They have tons of high-resolution photos under a Creative Commons Zero license they describe as “do whatever you want” (except you can’t sell or create a site to compete with them…).  This license does exactly what it sounds like, there is no copyright to the photos and you can do whatever you’d like, even for commercial purposes, all without asking permission or owing any licensing fees.

After seeing this site, I thought that it would be great to start using these images on this site to help with the design and tell a story.

1. Be humble. It is an honor to be in a leadership position. Your team is counting on your to make the right decisions.
2. Don’t act like you know everything. You don’t. The team knows that. Ask smart questions.
3. Listen. Ask for advice and heed it.
4. Treat people with respect. Regardless of rank, everyone is a human being and plays an important role in the team. Treat them that way. Take care of your people and they will take care of you.
5. Take ownership of failures and mistakes.
6. Pass credit for success up and down the chain.
7. Work hard. As a leader, you should be working harder than anyone else on the team. No job is beneath you.
8. Have integrity. Do what you say; say what you do. Don’t lie up or down the chain of command.
9. Be balanced. Extreme actions and opinions are usually not good.
10. Be decisive. When it is time to make a decision, make one.
11. Build relationships. That is your main goal as a leader. A team is a group of people who have relationships and trust one another. Otherwise, it is just a disconnected, incoherent cluster of people.
12. Lastly, get the job done. That is the purpose of the leader – to lead a team in accomplishing a mission. If you don’t accomplish the mission, you fail as a leader. Performance counts.

There is a lot more content in this book and, even if you aren’t currently in a position of leadership, I recommend picking up a copy of it.

Once you open the Developer Tools, you can force the browser to disable the cache when the Developer Tools are open.  This is a great feature and typically worth leaving checked when you are developing applications.

Although not nearly as frequently used, another useful tip is to Hard Reload, or Empty the Cache and Hard Reload.  To do this, open the Developer Tools then click and hold on the reload icon in the toolbar.  From there, you can select which option to select:

Have any other cache tips?  Leave them in the comments.

• UI Engineer @TrunkClub
• Usedpreviously:
  • https://speakerdeck.com/jhabdas/brunch-with-panache
  • https://github.com/trunkclub/brunch-with-panache
• Now using Backbone with React.js for the Views
• Look into and use: onClick=handleClick.bind(this, @)
• Migration
  • Start with small components
  • Use a backbone/react mixin
  • Get familiar with the API
    • initialize= componentDidMount
    • remove=unmountComponentAtNode
  • Convert your parent view to use React.createElement instead
  • Don’t freak out about the templates
• React Backbone Component – https://github.com/magalhas/backbone-react-component
• Process (see the slide)
  • Create
  • Identify
  • Attach
  • Render
  • Dispose
• React Backbone Wrapper
  • Check for mount
  • Check for updates
  • Pass the props
  • Find the node in the DOM
  • Apply an identifier class
  • Render!
• “Go with Babel, It’s Awesome”
• Passing Down Data – Multiple Models & Collections as Props (See slide)
• What are Props?
  • Properties that are received from above and are immutable as far as the component is concerned
• What is State?
  • The state starts with a default value when a Component mounts and then suffers from mutations in tie (mostly generated from user events)
• Components manage their own state internally.  They can’t change their props.  But they can change their children’s props.
• Glue your Backbone models and collections into React components using the React Backbone Component
• React Backbone Component gives you helper functions, this.getModel() and this.getCollection()
• Gotchas
  • CJSX – Babel is much more robust, if you can use it, use it (instead of CJSX)
  • Implicit returns – remember to wrap a series of components i a parent div, otherwise it won’t render
  • CJSX – Event handlers will need to ‘return false’, otherwise React will emit a warning
  • Don’t freak out about the templates!
• Final Thoughts
  • Interim – They don’t plan on building apps this way forever.  Newer apps take a more robust Flux + React approach
  • Check into https://github.com/jhudson8/react-backbone .  Seems awesome.

• People don’t like IE because of lack of feature knowledge in the community.  Which is MS fault.
• IE 11 is pretty standards based
• Get ISOs:  http://dev.modern.ie
• Want to know the current features of IE?  http://dev.modern.ie/platform/status/
• IE Dev Guides:  http://bit.ly/iedevguides
• Compat Cookbook:  http://bit.ly/iecompatcookbook
• Dev Tools:  http://bit.ly/f12devtools
• Using remote desktop and ngrok, you can test your sites in IE easily
• Also check out https://www.browserstack.com/
• Get Microsoft Edge:  http://insider.windows.com
• Use Weinre for remote testing (use mainly for mobile testing): http://people.apache.org/~pmuellr/weinre-docs/latest/
• Remote debugging and testing tool:  http://vorlonjs.com/
• Microsoft is working on a headless version of IE for testing

function enqueue_scripts_styles() {
wp_enqueue_script('jquery');
wp_enqueue_script('custom-script', get_stylesheet_directory_uri() . '/assets/js/custom.js', array('jquery'));
wp_enqueue_style('custom-style', get_stylesheet_directory_uri() . '/assets/css/custom.css', array() );
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts_styles' );

This code will load jQuery, then load our custom JavaScript after jQuery, then load our CSS.

This works great if you need the custom JavaScript and CSS on every page. But what if you only need the JavaScript and CSS only on a specific page? You don’t want to waste loading those files on every page.

To do so, you can use the following code:

function enqueue_scripts_styles() {
wp_enqueue_script('jquery');
if (is_page('your-page-slug')){
wp_enqueue_script('custom-script', get_stylesheet_directory_uri() . '/assets/js/custom.js', array('jquery'));
wp_enqueue_style('custom-style', get_stylesheet_directory_uri() . '/assets/css/custom.css', array() );
}
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts_styles' );

If you replace ‘your-page-slug’ with your actual page’s slug, you will only load the JavaScript and CSS on that specific page. This will save bandwidth and improve performance.

You could also use ‘is_category’ if you wanted to load JavaScript and CSS for a specific set of pages that were in a certain category.

Have any other WordPress questions? Leave a comment below.

Why does performance matter?

People hate lag.  Amazon projects that 1 sec translates to 1.6 billion a year

WordPress has a bad rap.  Lots of plugins.  Complex front-ends.

WordPress is dynamic.

WordPress has no persistent caching in the core and is hands-off in regards to caching.

Chrome HTML render time is everything (server, network, browser, etc) and isn’t just WordPress specifically.

You can use WordPress to time how long the rendering takes.

Times:

• 3+ is emergency
• 1-3 is slow
• 500ms to 1sec is okay
• 250ms to 500ms is good
• <100 ms is amazing

Your web host maters.  “Commodity hosts” are bad.  They cost cheap but are going to be slow.  No caching engine or low-level access.

WordPress managed hosts do performance better and some have caching built in.

Managed WordPress hosts:

• SiteGround
• Pressable
• Pagely
• WP Engine
• GoDaddy
• Kinsta
• Pantheon
• Dreamhost

The best is to have your own VPS.  Look for a company that has been around for a while and has good performance.  Cost?  Tools?

Linode and Digital Ocean are good WordPress companies.

Web stack:

• nginx  – config: http://bit.ly/jaquith-nginx
• PHP-FPM – http://php-fpm.org/
  • Make sure to use the latest version of PHP
  • Check into http://hhvm.com/ for performance (but might be unstable)
• SQL
  • MySQL
  • MariaDB
  • Percona
  • Make sure to use query cache
  • Use mysqltuner.pl for tuning
  • HyperDB for scaling large sites and DB replication

Least elegant but most effective is to cache the HTML output.

You can do caching right in nginx, you can use Varnish or WordPress plugins.

APC & APCu are two caching engines.  Fast, in-memory data store.  Good for running one server.

If you’re using multiples servers, you need redis or memcache.

WordPress core can use these cache layer, but there are wp_cache_* commands that you can use to program.

Libs to make caching easier:  https://github.com/markjaquith/WP-TLC-Transients & http://bit.ly/fragment-cache

Stack ideas

• PHP-FPM & nginx:   nginx ->  nginx -> php
• Or:   nginx -> varnish -> nginx -> php

Tools to use

• Chrome inspector
• Firefox inspector
• New Relic
• P3 (WordPress Plugin)
• WP Top (WordPress plugin – on github)
• Use time_stop(true, 5) (wrapped in comments)
• Apache Bench / Siege / Blitz.io

• We all have 86,400 seconds in a day
• “If you don’t have time to do it right, when will you have time to do it over again?”
• “Let’s do ourselves a favor and build it right the first time”
• Backups – Use version control with deployment using Beanstalk/Tower and Automated DB Backup
• Theme development – Custom built theme using _s (used Genesis Theme too) and using SASS and CodeKit
• Know when to use plugins
  • WordPress SEO by Yoast
  • W3C Total Cache
    • Image cache, browser cache, gzip
  • CDN (Max CDN)
  • Spam (Akismit)
• Seek first to understand
• Use Grunt to automate tasks… SASS, image minify, automate all the things!

]]> 1144 https://ja.mesbrown.com/2014/10/wordcamp-tampa-30-things-you-must-do-before-launch-by-drew-barton/ https://ja.mesbrown.com/2014/10/wordcamp-tampa-30-things-you-must-do-before-launch-by-drew-barton/#comments Sat, 04 Oct 2014 15:59:44 +0000 http://ja.mesbrown.com/?p=1137 Drew Barton
https://twitter.com/drewbarton
http://southernweb.com/

1. Have a checklist
2. Limit your admin users – Give them Editor access instead
3. Give editor access to menus – Install Editor Theme Options
4. No default permalinks
5. Remove “Hello World!” content from the blog
6. Unblock search engines
7. Install YOAST for SEO
8. Unique Title tags for each page
9. Install video user manuals for WordPress
10. Remove test links – Turn off your dev server
11. Install Google Tag Manager
12. Setup Google Analytics – Add user accounts for client – Setup automatic monthly reporting
13. Setup Google Webmaster Tools – Check for 404 Errors
14. Create 301 Redirects if rebuilding a site
15. Style your 404 page – Give the users something to do so they aren’t at a dead end
16. ???
17. Check for JavaScript Errors in Console
18. Test for responsiveness
19. Consistent fonts & styles
20. Page Load Limit – Use Pingdom Website Speed Test or http://nibbler.silktide.com/
21. Set plugin number limit
22. Confirm email addresses exists – send a test email
23. Confirm contact form works
24. Create form success pages – Tell them what is going to happen next – Put conversion tracking on the page
25. Obfuscate email addresses
26. Setup Google Webmaster Tools – Ensure you link it to the Google Analytics account
27. Submit XML Sitemap
28. Create backups – “Jesus saves.  Buddha does incremental backups”. – Setup backups outside your web host – Even physically mail a copy of the website to the client
29. Check for gremlins – text artifacts – copy/paste issue from MS Word
30. Remove development plugins – WordPress Move – WP Migrate DB Pro – etc
31. Install caching

Make sure you deliver that “last mile” to the client.