Ja.mesBrown.com – JavaScript and Web Development Blog http://ja.mesbrown.com Enterprise JavaScript Developer and Backbone.js expert. I write the Internets. Thu, 18 Jun 2015 15:05:32 +0000 en-US hourly 1 https://wordpress.org/?v=4.7.6 29053517 Caching Tips for Chrome Using the Developer Tools http://ja.mesbrown.com/2015/06/caching-tips-for-chrome-using-the-developer-tools/ Thu, 18 Jun 2015 15:05:32 +0000 http://ja.mesbrown.com/?p=1185 Below are two helpful tips for controlling the cache in Chrome.

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.

DevTools

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:

ChromeReset

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

 

 

 

 

]]>
1185
The Hybrid Backbone & React App – Peter Piekarczyk – JSConf 2015 http://ja.mesbrown.com/2015/05/the-hybrid-backbone-react-app-peter-piekarczyk-jsconf-2015/ Fri, 29 May 2015 16:20:41 +0000 http://ja.mesbrown.com/?p=1181 The Hybrid Backbone & React App
By Peter Piekarczyk – https://twitter.com/peterpme

  • UI Engineer @TrunkClub
  • Usedpreviously:
  • 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
]]>
1181
Woah, You Can Test IE & Microsoft Edge on a Mac & Linux? – Rey Bango at JSConf 2015 http://ja.mesbrown.com/2015/05/woah-you-can-test-ie-microsoft-edge-on-a-mac-linux-rey-bango-at-jsconf-2015/ Wed, 27 May 2015 14:04:33 +0000 http://ja.mesbrown.com/?p=1177  Talk by Rey Bango https://twitter.com/reybango ]]> 1177 Selectively Loading JavaScript and CSS Files in WordPress http://ja.mesbrown.com/2015/03/selectively-loading-javascript-and-css-files-in-wordpress/ http://ja.mesbrown.com/2015/03/selectively-loading-javascript-and-css-files-in-wordpress/#comments Tue, 31 Mar 2015 14:03:52 +0000 http://ja.mesbrown.com/?p=1167 If you’ve done any WordPress development, you’ve encountered a situation where you need to load custom JavaScript or CSS. Normally, you would do something like this:

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.

]]>
http://ja.mesbrown.com/2015/03/selectively-loading-javascript-and-css-files-in-wordpress/feed/ 1 1167
WordCamp Tampa – WordPress Performance Workshop by Mark Jaquith http://ja.mesbrown.com/2014/10/wordcamp-tampa-wordpress-performance-workshop-by-mark-jaquith/ Sun, 05 Oct 2014 18:44:23 +0000 http://ja.mesbrown.com/?p=1151 Mark Jaquith

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:

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
]]>
1151
WordCamp Tampa – Automating Your Repetitive WordPress Development Tasks by David Parsons http://ja.mesbrown.com/2014/10/wordcamp-tampa-automating-your-repetitive-wordpress-development-tasks-by-david-parsons/ Sat, 04 Oct 2014 18:07:07 +0000 http://ja.mesbrown.com/?p=1144 David ParsonsDavid Parsons
https://twitter.com/dpjustice

  • 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 WordCamp Tampa – 30 Things You Must Do Before Launch by Drew Barton http://ja.mesbrown.com/2014/10/wordcamp-tampa-30-things-you-must-do-before-launch-by-drew-barton/ http://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 BartonDrew 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.

]]>
http://ja.mesbrown.com/2014/10/wordcamp-tampa-30-things-you-must-do-before-launch-by-drew-barton/feed/ 2 1137
WordCamp Tampa – WordPress and the Enterprise: API Driven Business System Integration by Chris Jenkins http://ja.mesbrown.com/2014/10/wordcamp-tampa-wordpress-and-the-enterprise-api-driven-business-system-integration-by-chris-jenkins/ http://ja.mesbrown.com/2014/10/wordcamp-tampa-wordpress-and-the-enterprise-api-driven-business-system-integration-by-chris-jenkins/#comments Sat, 04 Oct 2014 15:11:36 +0000 http://ja.mesbrown.com/?p=1126 Chris Jenkins

  • Most companies have a large divide between the main site and internal systems
  • Most WordPress to internal systems is done through sending email
  • Documentation for API interaction with WordPress is lacking
  • Example API
    • Lead collection : Collect complex pre-sales data and post it to the CRM. Create associated contacts, create an actionable ticket, assign it to the appropriate sales rep.  They used Method CRM.
    • Workforce Management:  Display task assignments, schedules and critical task details.  Allow staff to request assignments or decline assignments.  Provide relevant linked resources.
    • Client Interaction: Give clients the ability to view and manage their product and billing details, pay invoices, and order additional products/services.
  • WordPress can act as a data middleware to tie multiple data sources together
  • Benefits of using an API driven plugin over embedded scripts or system portals
    • Consistent brand experience
    • Single sign-on
    • Enhanced security – Hacker don’t directly know what backend systems you are using
    • Mix and match data sources
  • Pitching the decision maker
    • How do they currently do business?
    • What are the pain points currently?
    • Know the objections
    • Focus on the value
]]>
http://ja.mesbrown.com/2014/10/wordcamp-tampa-wordpress-and-the-enterprise-api-driven-business-system-integration-by-chris-jenkins/feed/ 1 1126
WordCamp Tampa 2014 Conference Notes http://ja.mesbrown.com/2014/10/wordcamp-tampa-2014-conference-notes/ Sat, 04 Oct 2014 15:01:19 +0000 http://ja.mesbrown.com/?p=1122 Below are links to my notes from the 2014 WordCamp Tampa on October 4th & 5th, 2014:

Day 1 – Saturday:

Day 2 – Sunday

]]>
1122
WordCamp Tampa – Research and Discovery Phase by James Tryon http://ja.mesbrown.com/2014/10/wordcamp-tampa-research-and-discovery-phase-by-james-tryon/ http://ja.mesbrown.com/2014/10/wordcamp-tampa-research-and-discovery-phase-by-james-tryon/#comments Sat, 04 Oct 2014 15:00:45 +0000 http://ja.mesbrown.com/?p=1124 James Tryon
2014-10-04 10.26.18
  • Each project is different
    • Explore the problems
    • Challenges
    • Goals
    • Define full scope and vision of the project together
    • Works in an agile manner
  • Internal Review meeting
    • Review client questionnaire
    • client sites
    • creative brief
  • Get paid for research and discovery phase
  • Planning
    • Research
    • goal planning
    • Target audience
    • User stories
    • Competitor analysis
    • Content strategy – basic
    • Project audit (sometimes)
    • Content strategy
Story:  Client was getting 250K hits a day.  60% mobile but had no mobile ads.  After adding mobile ads, added 100K in revenue.
  • Kick off meeting
    • You want to get to know the project, the business and the audiences of your client
    • Open the floodgates
    • Sky is the limit
    • Write down everything you could ever want
      • Needed
      • Nice to have
      • Cool but not really needed now
    • Time
      • Small project
        • Half day with client
        • Half day internal
      • Larger project
        • Broken up across days to not burn out the client
    • Everyone who is going to be involved in the project should be in the meeting
  • Who’s your target audience and why??
  • User stories
    • Use to define goals for yourself
    • “As a <role>, I want <goal/desire> so that <benefit>”
    • Example:
      • As a customer representative, I want to search for my customers by their first and last name to fine the customer faster.
      • As a reader, I want to be able to sign up for a newsletter so that I can get updates
  • Questions we try to answer during our kickoff meeting
  • Meeting Questions
    • Problem statement : What problem do you want to solve?
    • Stakeholders : Who do you answer to?  Who is involved in this project?
    • Users:  Who are your users?
    • Risks : What risks are we afraid of?  What is the worst case scenario?  What is your biggest concern?
    • Assumptions
      • Examples:
      • Client will provide high quality videos in a timely fashion
      • Client will provide high quality photos in a timely fashion
      • Client will provide descriptions for products
      • Client will provide feedback on layout designs in a timely fashion
    • List of Features NOT to be developed
  • Stakeholder meeting
    • When working on large projects with several stakeholders we meet with all of them.
    • Try to have one-on-one time with each stakeholder to be able to pick their brain.
    • What is important to them without the influence from everyone else in the meeting.
  • Project Audit
    • Only used when a site already exists
    • Make sure to charge for project audit
    • Included
      • Define overall Goals
      • Review client feedback
      • Problems with current site
      • Define target audience
      • Current navigations
      • New site map
      • Question everything
      • Review every page
      • Review every section
      • Have a stand alone page for header and footer
      • Overall thoughts?
    • Outline any new features or sections not on the current site
    • Define any possible or key plugins
  • Possible content strategies
    • How and when to use tags and categories
    • What custom post types does the project need?
    • What taxonomies does the project need?
    • What parent categories to start with?
    • Set a game plan for growth.
  • Phase 2:  Things out of scope but planned for the next phase
  • Recap thoughts:  New site: 20 pages.  Redoing a site can be 20-80 page
  • Resources Created
    • Brain dumps
    • Sorted feature list
    • Define goals/ user stories
    • Create user stories
    • Define target audience
    • Site map
    • Basic wireframes (paper)
    • Lots of sketching
    • Stockholder interview
    • Talk about inspiration
    • Basic guides for colors
    • Basic guides for layout
    • Assigned client tasks
    • Start content gathering
    • Compile assists
  • Audits usually take a week
]]>
http://ja.mesbrown.com/2014/10/wordcamp-tampa-research-and-discovery-phase-by-james-tryon/feed/ 1 1124