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 2014¹. 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

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

From Day One to Slack: Automating Your Daily Standup

At Reaktiv Studios, we do our daily standup in Slack, rather than a meeting due to the remote nature of our team. There’s a separate channel #standup where we use a Slack post to outline what we accomplished yesterday, what we plan to accomplish on today and any blockers we’ve encountered.

I was already keeping a daily work log in Day One, a fantastic journaling app for OS X, and wanted to sync up my workflow so I didn’t have to spend more time formatting a post in Slack, or deal with copying and pasting between the two apps to share my standup.

Enter the Slack API and OS X Services…

I figured there had to be a way to integrate the two and after a few fits and starts with attempting to pull data out of Day One with a script I settled on an OS X service that operates on selected text with a keyboard shortcut. My workflow now is to write my daily standup in Day One like I always have, select it, and hit ⌘⌥S to immediately share in Slack. Easy peasy. The details, if you’d like to implement a similar workflow, are below:

First, Get a Slack Token

It seems Slack has changed to use Oauth for all apps, but I have heard that creating a “test token” on this page still works.

Get the channel ID from the Slack API using your new token. You can do this with curl or Slack’s API tester:

2016-07-27 at 10.02 AM

Pull the list of channels in the tester and search until you find your channel name, above it will be the channel ID.

Create a file in your home directory: ~/.slack which contains your slack credentials:

SLACK_TOKEN_RS=<Your Slack Token>
SLACK_CHANNEL_STANDUP=<Slack channel ID>

You can name these however you want, just be sure to change them in the script below as well.

Open Automator, and create a new “Service”.

2016-07-27 at 9.41 AM

Choose the “Run shell script” action.

2016-07-27 at 9.42 AM

The action should be configured as: “The service receives selected text in Day One.app.” Choose your shell (mine is /bin/zsh) and pass input to stdin. Then paste the script below into the script field:

source ~/.slack
curl -F file=@- -F token=$SLACK_TOKEN_RS -F filetype=post -F channels=$SLACK_CHANNEL_STANDUP -F title="Daily Standup `date '+%Y-%m-%d'`" https://slack.com/api/files.upload

Let’s break down what this is doing.

First, we source our Slack credentials file. This makes the SLACK_TOKEN_RS and SLACK_CHANNEL_STANDUP variables available to our script.
We then make a curl request to Slack’s files.upload endpoint. We are submitting this as a multipart/form using the -F flag.
-F file=@- Instead of providing a file to upload, we are passing stdin as the “file” with @-
-F token=$SLACK_TOKEN_RS sets our API token from the credentials file.
-F filetype=post this is what creates a Slack “post” rather than a media file upload.
-F channels=$SLACK_CHANNEL_STANDUP sets the Slack channel to share the post to.
-F title="Daily Standup `date '+%Y-%m-%d'`" sets a dynamic title based on today’s date.

Save the service, and then open Preferences > Keyboard > Shortcuts to assign a keyboard shortcut. I have assigned ⌘⌥S as the shortcut.

2016-07-27 at 10.05 AM

That’s it! Now you can test your Slack integration by selecting some text and hitting your keyboard shortcut.

2016-07-27 at 10.12 AM

Your post should appear in Slack.

2016-07-27 at 10.12 AM

You could use this from any app, not just Day One. Let me know if you’ve found this helpful or what other interesting Slack integrations you’ve made!

How to Automatically Add Hosts to Vagrant Without a Password on OS X

UPDATE 2016-07-27: I do not believe this is working with the current version of vagrant-hostmanager 1.2.0. Will update if I find a resolution.

There’s an excellent plugin for vagrant called vagrant-hostmanager which will automatically add entries to your hosts file for domain aliases used in your vagrant instance. However, you’ll get a password prompt every time it runs as editing /etc/hosts requires elevated privileges. The instructions below allow you to run the hostupdater without having to enter your password every time.

The vagrant-hostmanager repo provides these instructions, but I’ve added additional information if you haven’t dealt with visudo before.

Be super careful when editing the sudoers file because editing it incorrectly can lock you out of your computer and prevent you from editing files!

Open Terminal
Check your $EDITOR env variable: echo $EDITOR
If it’s subl -w (for Sublime users) or anything that’s not nano, vi, or vim, you will need to use the longer version of the command below.
Short Version: sudo visudo
Long Version: sudo EDITOR=nano visudo
This opens the sudoers file for editing, which should look like this: http://opensource.apple.com/source/sudo/sudo-60/src/sudoers
If the file opens in Sublime Text or is empty, stop what you’re doing, otherwise proceed.
Near the bottom of the file, add these two lines, replacing <YOUR_USERNAME> with your OS X username:

Cmnd_Alias VAGRANT_HOSTMANAGER_UPDATE = /bin/cp /home/<YOUR_USERNAME>/.vagrant.d/tmp/hosts.local /etc/hosts
%sudo ALL=(root) NOPASSWD: VAGRANT_HOSTMANAGER_UPDATE

The next time you vagrant up or vagrant halt you shouldn’t be asked to provide your password. It will work for both command line vagrant use and a tool like Vagrant Manager.

Special 1: The Origin of John Roderick

Think of The Origin of John Roderick as an improvisational book on tape, with each chapter recorded a few weeks apart.The end of the year can be a strange, cold, and lonely time. We hope this keeps your brain warm until 2015.

Source: Special 1: The Origin of John Roderick

On my last flight, I had big plans to get a lot of work done. I turned on this podcast while we were taxiing at SFO and ended up listening to it all the way through on the 4 hour flight. I’ve never listened to the Long Winters, but if you love music at all, you’ll enjoy this. John Roderick is a true storyteller.

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

How to Easily Increase Memory on your Vagrant Virtual Machine

This assumes you are using VirtualBox as your provider, which you are if you’re using a pre-built vagrant configuration like I am with VVV.

I was running out of RAM and crashing my VM while trying to import a 9MB WXR file into a WordPress install.

First, I tried adding a swapfile so I could get some virtual memory. I was able to do that with these instructions from Digital Ocean, but I wasn’t sure how to make it persistent after a vagrant destroy and didn’t want to have to set this up every time I booted up the VM.

Finally, I found this thread in the issues for VVV with the answer.

Create a Customfile in the same directory as your Vagrantfile, and add the contents below, changing 2048 to be whatever value you want to increase your VM’s RAM to.

config.vm.provider :virtualbox do |v|
  v.customize ["modifyvm", :id, "--memory", 2048]
end

Save the file, and then do a vagrant reload and you should be able to verify with top or free -m that you now have some additional memory in the VM.

I went with 2GB. There has been some discussion of increasing the default in VVV from 512MB, however I think that would be an issue for people on laptops, especially running MacBook Air’s with only 4GB of RAM.

Useful OS X Tools: Glui

One thing I rarely go a day without doing, is taking a screenshot.

It’s not something you’d immediately associate as a developer tool, but I use it constantly. How many times have you gone back and forth with a client trying to describe an issue, when all could be resolved with a simple screenshot?

OS X has screenshot capabilities built right in, but I find the easy annotation features well worth the price. Explaining UI issues is much easier to do with annotations than just trying to describe what’s happening.

Along with the annotations, you can hold down the option key to drag the image into any app that support drag and drop uploads, or click to upload directly to Dropbox and share publicly.

I used to use a free app called Skitch. They were bought by Evernote and then once Skitch was integrated with Evernote it became unusably slow and clunky. Then Glui came along and brought back all of the best parts of Skitch and none of the crap.

The app costs $6.99, but is well worth the price for something I use constantly.

$6.99 | Buy from the Mac App Store

WordCamp Miami 2014: Intro to Theming with Sass

Back in May, I had the honor of speaking at WordCamp Miami about Sass.

The goal of the talk was to introduce CSS preprocessors, and Sass in particular and give some examples as to how Sass can be useful for WordPress theme developers.

Presentation Slides

This was only the second WordCamp I’ve ever attended–WordCamp San Francisco 2013 being the first–and my first time presenting. I hope I never see the video. 🙂 It was a great experience and I’m looking forward to my next chance to help spread some WordPress knowledge.

I’m hoping there will be a WordCamp Indy in the near future…