WordPress

There are 13 posts filed in WordPress (this is page 1 of 2).

How To Convert a Bookmarklet Into an Arc Boost

Arc Browser Homepage

I have been using Arc as my primary browser for a few months now. I like pretty much everything about it.

My one major complaint would be that bookmarklets no longer work. This isn’t a huge deal, and maybe they will come up with a way to support them, but bookmarks in general aren’t supported in the same way as other browsers when “everything is a tab”. There are some bookmarklets that I’ve used heavily over the years and they are a big part of interacting web services. It’s nice to use them sometimes rather than install a separate browser extension for every possible service you use.

There is one particular bookmarklet that I used the most. When clicked, it would redirect you to the wp-admin area of the current site to login, if it’s a WordPress site. As my day to day work for the past decade has involved the development of many WordPress sites, this is a useful feature for me.

Arc has a cool feature called Boosts, which are an easy way to add user styles and scripts (like the classic Greasemonkey/Stylish extensions). With Boosts, they have created a simpler UI to build your own Chromium extensions, which is what they are behind the scenes. So I set about to convert my bookmarklet into a Boost.

Here’s the original bookmarklet code. It’s pretty simple:

javascript:(function()%7Bvar%20wpadmin%3D%27http://%27%2Blocation.hostname%2B%27/wp-admin%27%3Bwindow.location%3Dwpadmin%3B%7D)()%3B

I created a new custom Boost, and in the content.js file, I added this:

document
  .body
  .addEventListener("keydown", function(event) {
    // Å = option + shift + A
    if (event.key === "Å") {
      redirectToAdmin();
    }
});

function redirectToAdmin() {
  var wpAdmin = location.protocol + '//' + location.hostname + '/wp-admin';
  window.location.replace(wpAdmin);
}

While I would prefer to click an icon to do this, Arc’s extension menu is hidden by default and only shows on hover, which is nice, but not great for this. I also couldn’t get it to work by clicking on the extension itself. I think I have a solve for that, which involves editing the manifest.json, but that goes beyond the simple spirit of Boosts, and I’d just be creating a Chrome extension. So I’ll leave that for a later time.

While I hope Arc adds a way to support bookmarklets in some form, this was a fun exercise to rebuild the functionality using the new Boosts feature. Have you created an Arc Boost? Are there bookmarklets you would miss if you were using Arc?

Moving Forward

You may have heard the news: Moving On.

After working together for 4 years, we decided the best move for Reaktiv and each of us personally is to part ways. I’ve been leading client services since joining as a partner in 2014 and Norcross led our products, all of which will remain at Reaktiv Studios moving forward.

What happened?

There’s no #wpdrama here, and that has been one of the biggest lessons in this. Two people can be friends, work well together, and have similar goals but still decide to make a change. Norcross starts working with LiquidWeb in May, a client we’ve been working on some really cool things with. So, while he is leaving, he’s not going far and it’s a good thing for him and for us.

What’s happening with Reaktiv?

The team is staying in place and we’re having our best year yet. I’m lucky to come to work every day with such a capable, creative, and fun team. And we’re growing ?.

Moving forward, we’ll continue to grow as we expand our team and service offerings.

What about you?

Why, thanks for asking! My goal is to make Reaktiv Studios the best place to work in WordPress. In terms of my personal role, I’m continuing to lead client services and will be implementing a new growth plan on the product side. Design Palette Pro is stable but there’s definitely untapped potential there.

I’m excited to continue serving our clients and the WordPress community with Reaktiv Studios.

How to Replace a Tag in Subversion

I am typically doing this to make a readme.txt update to a WordPress plugin without forcing an update upon all the users for something trivial like updating the “Tested Up to” header. However, I always forget the correct steps for doing this. I am mostly writing this to store it here for the next time I forget.

Ensure you have a local working copy.

svn co <SVN REPO URL>

Edit the files in trunk:

vim trunk/readme.txt

Remove the tag you plan to replace, then re-copy trunk to that tag:

svn rm tags/<tag to replace>
svn cp trunk tags/<tag to replace>

You could also just copy the specific files over after deleting them instead of replacing the entire tag:

svn rm tags/<tag to replace>/readme.txt
svn cp trunk/readme.txt tags/readme.txt

Then commit your changes and you’re on your way.

This really isn’t what Subversion tags were meant to be used for, but it’s the system we have for releasing plugins. Tags should represent your repo at a state in time, and once created, shouldn’t be modified. While I could release a new version for these minor updates, it seems like an unnecessary burden on users. So this is what I’ll continue to do until we have a better option. Like an admin interface for updating plugin headers…

How to Set Up Free Incremental Deployments Over SFTP With Gitlab CI and PHPloy

Gitlab home page

Update: Gitlab has just announced paid plans, with a monthly limit on CI runner minutes (2,000). For personal projects this likely won’t have a major impact, but something to keep in mind if you frequently deploy or have long builds.

I have been really impressed with Gitlab.

They are constantly cranking out new features and fixes as they release every month like clockwork. What has really attracted me to Gitlab is their integrated CI (Continuous Integration). I’ve used Scrutinizer, Travis and DeployBot for professional projects, but I wanted to create a deployment system for my smaller, personal projects.

I have many small personal sites that I want to be able to easily edit from anywhere without depending on having everything on my local machine. I wanted to only require git and a text editor, and let the deployment tool handle the rest.

Most of these sites don’t make any money so I wasn’t real excited about paying for tools (even though I’d happily do so for my other projects) and it was also a fun challenge. I wanted to bring the structure and ease of deployment I have in my professional projects to my personal projects. I usually avoided making changes to these projects as I could never remember where the servers were, the credentials and what had potentially changed on the server in the meantime.

The Criteria

I needed this system to be free, automated, and host and local machine agnostic.

Free

As mentioned above, I wanted to see whether I could do this with freely available tools. Gitlab CI provides free runners that you can use, or you can run your own on a server you control. For these projects, I am only using the free runners as they are not mission critical applications.

Automated

I could use these tools to deploy straight from my local machine, but I wanted to be able to deploy just by pushing to Gitlab or by clicking a button in the UI.

Local Machine Agnostic

You can use any of the command line deployment tools I mention below to sync local files to another server. This is great, but it would mean that every machine I wanted to deploy from needed to have these tools installed and configured, and I needed to have the login credentials available.

Host Agnostic

My goal here was to have one deployment process that I could use regardless of host. Most the hosts provide SSH access, but not all. So I wanted something that only required STFP to deploy. This ruled out tools like Capistrano for me as SSH access is required.

The Deployment Tool

I originally used Dandelion, a Ruby deployment tool. It worked great, but the Ruby dependency meant I needed a separate container just to install it. The build runs much quicker if only one container is needed, so I sought out a PHP deployment tool.

Enter PHPloy.

PHPloy is an “Incremental Git (S)FTP deployment tool that supports multiple servers, submodules and rollbacks.” Rather than deploying your entire repo every time, it will only deploy what has changed since your last deployment. It does this by writing a .revision file to your remote server that stores the most recent deployment’s git commit hash. PHPloy determines which files have changed compared to that revision and only deploys those.

Some of the features that were great in Dandelion were missing or broken in PHPloy. It took a few PRs and bug reports to get it to the point where I’m comfortable using it for my projects and recommending it. The repository is fairly active and the author regularly merges PRs. I suggest getting involved on Github if this is a tool that would be useful to you.

Configuration

All you need to get started with Gitlab CI is a Gitlab repo with a .gitlab-ci.yml file. Below is an example configuration for deploying a PHP project with PHPloy.

.gitlab-ci.yml

stages:
- deploy

deploy_to_production:
  image: php:5.6-cli
  stage: deploy
  environment: production
  before_script:
    - apt-get update -yqq
    - apt-get install git zip unzip curl wget openssh-client -yqq
    - mkdir -p ~/.ssh
    - echo "$PRIVATE_KEY" | tr -d '\r' > ~/.ssh/deploy_rsa
    - chmod 600 ~/.ssh/deploy_rsa
    - ssh-keyscan -p $PHPLOY_PORT -H "$PHPLOY_HOST" >> ~/.ssh/known_hosts
    - wget --quiet https://github.com/banago/PHPloy/archive/master.zip
    - unzip -qq master.zip
    - mv ./PHPloy-master/dist/phploy.phar phploy
  script:
    - php phploy -s production
  when: manual

This file creates one stage called deploy that is run manually when triggered from the Gitlab UI.

  • Uses a PHP5.6-cli image which matches our production environment. You can choose any docker image.
  • Installs dependencies needed for deployment.
  • Copies the private key needed for server authentication to the container and adds the destination server to known_hosts.
  • Downloads the latest version of PHPloy
  • Runs the production PHPloy configuration to deploy.

phploy.ini

; NOTE: If non-alphanumeric characters are present, enclose in value in quotes.
[production]
scheme = sftp
path = /home/site/public_html
privkey = '~/.ssh/deploy_rsa'
branch = master
exclude[] = '.env.example'
exclude[] = '.gitignore'
exclude[] = '.gitlab-ci.yml'
exclude[] = 'phploy.ini'
exclude[] = 'README.md'

This file:

  • Sets the scheme, you’re not limited to SFTP.
  • The remote server deployment path.
  • The private key file path.
  • The branch to deploy.
  • Files to exclude

For SSH deployments you can use pre and post deploy hooks to run commands to backup or flush cache on deploy.

The only other configuration you need is to define four environment variables in Gitlab: PHPLOY_HOST, PHPLOY_PORT, PHPLOY_USER, and PRIVATE_KEY and create an environment.

Gitlab PHPloy environment variables

For my example here, I created an environment named production which matches the environment in the .gitlab-ci.yml file.

Once this is configured, on your next push you should see a pipeline trigger in Gitlab and provide the option to run your deploy_to_production stage.

Gitlab Pipeline Deployment

What’s missing?

Some of the downsides:

  • This isn’t a generic deployment tool. It works best for PHP projects that use git.
  • No easy way to include untracked files. This is something I love with DeployBot’s Build Tools. Any new files created as part of the build process are deployed to your server, as long as they aren’t .gitignored. I’m still looking for a good option here.
  • It takes longer to set up than an off-the-shelf deployment tool.

Future plans:

  • Use composer to pull down PHP dependencies and WordPress plugins.
  • Determine how to include untracked files (like composer dependencies).
  • Run unit tests and build scripts on the container before deploying.

There’s still more I can do here and may in the future, but for most of my small projects this works great. How do you deploy your hobby projects?

Update: I’ve edited the .gitlab-ci.yml file to reflect the new location of the phploy phar file.

Sources: Pushing to Dokku from Gitlab CI

WordCamp Tampa 2014 – Teaming Up: From Solo Developer to Working in a Team

I had the privilege of speaking at the inaugural WordCamp Tampa in October of 20141. My topic was about the differences between solo development and working in a team. Looking back at this two years on, I am surprised at how I still feel strongly about each point and how we’ve improved our processes over time. After on-boarding multiple developers I’ve been able to test these ideas, processes and tools and have come away with a better understanding of how to work within a team.

Working with other teams to develop or level up their own internal processes and tools is something I really enjoy. Hopefully the points in the slides are helpful and please let me know if I can help your team in any way.

Slides
Video

  1. Yes, this post has been sitting in my drafts for two years. ↩

Find Shared Taxonomy Terms in WordPress

In the upcoming WordPress 4.2 release, whenever a shared term is updated it will be split into separate terms. If you are running any plugins or themes that store term IDs they may change after being split, which can cause data integrity issues. You can find an in-depth explanation and guide for how to update your code over at the Make WordPress Core blog.

It’s not easy to tell at a glance whether this issue will affect your site, so I’ve built a small plugin, Find Shared Terms that will detect any shared terms in your WordPress install and list them along with the taxonomies they belong to. This may be helpful in determining whether you need to refactor any custom code that stores term IDs or upgrade any of your plugins prior to the 4.2 upgrade. If your site doesn’t have any shared terms, and you’ve already upgraded to 4.1 then you’re in the clear!

If the plugin does detect shared terms, it doesn’t necessarily mean you’ll have an issue, but you’ll want to review any custom code you’ve written to check for anything that’s storing term IDs and check your list of plugins against the plugins listed in the Make post.

Pull Requests are welcome on Github.

Download Find Shared Terms

Improving Performance with MaxCDN

I’ve implemented a CDN on a few sites for clients, but never used it on any of my own sites. Recently I’ve been having some server issues over on my travel blog Traveling 9 to 5.

It’s hosted on a VPS along with a few other sites, and the server keeps crashing. The site gets a decent amount of traffic, but not so much that it should be crashing so often. I don’t know much about system administration, so I needed a stopgap to stop the site from crashing until I have the time to really determine what’s wrong with the server. MaxCDN* approached me about their CDN offerings and I figured this was the perfect time to change my caching setup and try a CDN.

The site is fairly image-heavy, and while we used to use Flickr as a poor-mans CDN it wasn’t a great workflow. Flickr doesn’t make it easy to get the correct download links for the image sizes you want and then having to manually insert the URL instead of drag and drop uploading, plus not having all your images saved to the media library. It wasn’t ideal, so once we switched to this VPS, we went back to uploading all images to the Media Library.

The server seemed to be crashing due to either high CPU or running out of memory and maybe if I could offload some of the static assets to a CDN, the server resources won’t spike as high and maybe even the site speed will improve a bit.

Implementing MaxCDN

Implementing MaxCDN on the site was much easier than I thought.

  • Create multiple subdomains for serving static assets (optional). This lets you serve your assets from static1.example.com and static2.example.com instead of using MaxCDN’s domains.
  • Create a “pull zone” in MaxCDN.
  • Add each of the subdomains as “custom domains”
  • Change any settings. (I enabled “Ignore cookies in requests”)

That’s it for the MaxCDN side, but you still need to setup WordPress to serve your images through the CDN. The recommended way to do this is with the W3 Total Cache plugin. MaxCDN has a support article that walks through the entire process. After following those instructions, your site should now rewrite all static asset URLs to point to one of your custom domains and will be served via MaxCDN.

Results

Here’s a speed test for the site prior to making any changes. (All speed tests were done using WebPagetest)

Traveling 9 to 5 speed test before

And here’s the results after making changes. I waited a few days to ensure the CDN was working correctly:

Traveling 9 to 5 speed test after

As you can see, the load time for the initial uncached view was reduced by 36%. This appears to be due to using multiple subdomains (static1, static2, static3, etc.) to allow browsers to download assets in parallel and the CDN servers being much better optimized than my VPS. WebPagetest still gives me a poor grade for effective use of CDN as only 69% of the assets on my site are running through it. I’ll continue to tweak and adjust the settings but I am very happy with these results, as it took only 20 minutes of my time to get this much of a speed improvement on the site.

This isn’t a scientific test, so there are multiple variables that could affect the speed. I was previously using a caching plugin on the site called Hyper Cache, and switching to W3 Total Cache may have had a large impact on the site speed as well. Looking at the waterfall charts on the speed test, I can definitely see the improvement in parallelization, especially since the site is so heavy on images. I can’t guarantee that your site speed will improve with MaxCDN, but I can highly recommend it due to its ease of setup and integration with WordPress.

*Thanks to MaxCDN for providing me with the CDN account.

Learning JavaScript & jQuery

It’s been on my list for a long time to get better at JavaScript and jQuery. I use both of these every day (mainly jQuery) but have never really felt comfortable with them. I’ve been collecting some learning resources (both free and paid) and thought I’d share them with you.

30 Days to Learn jQuery

A fantastic (free) video series from Jeffrey Way, of Laracasts, and previously with Envato. I thought I knew jQuery pretty well, but learned a ton of new things, and best practices even in the first few videos. I would highly recommend this series even if you think you already know jQuery.

30 Days to Learn jQuery – tuts+ – free with signup

Eloquent JavaScript

A great overview of JavaScript, also written as an introductory programming text. It seems odd to recommend an introductory book, but I really enjoy these, even after programming for several years. I always seem to pick up something new. If you’ve never been exposed to object-oriented programming or functional programming, you will definitely pick up a few things from this excellent book while learning JavaScript.

Eloquent JavaScript – free to read online

JavaScript: The Good Parts

Probably the most recommended JavaScript text available, but it’s not for beginners. However, Secrets of the JavaScript Ninja lists this book as a good intro text, so I’ll finish this one before diving into the next. It’s written by the developer of JSLint and JSMin, who also popularized JSON. by Douglas Crockford

JavaScript: The Good Parts – Kindle Edition ~$9 at Amazon

Secrets of the JavaScript Ninja

Written by the creator of jQuery, I’ll read this book last after finishing everything above. I’m normally not a fan of anything with “ninja” in the name, but this book appears to cover about as much advanced JavaScript as I could care to know and I’m looking forward to going through it. by John Resig and Bear Bibeault

Secrets of the JavaScript Ninja – Paperback (+ ebook) ~$25 at Amazon

Bonus Material:

Options to go through after completing everything above:

JavaScript The Right Way

A list of many free resources for learning all the JavaScript things.

JavaScript The Right Way

Mozilla Developer Network (MDN)

The best reference out there for JavaScript and CSS.

MDN: JavaScript

Developing Backbone.js Applications

After gaining a better understanding of JavaScript and jQuery, I’d also like to look into Backbone.js and other JS frameworks, particularly since WordPress core is using Backbone for many new things in the admin. by Addy Osmani

Developing Backbone.js Applications