The Tools We Use – The Revised Edition

Written by Mark Forrester on July 3, 2013 News.

I often find myself looking at businesses and wondering; “what apps do they use to make things happen?”- it turns out I’m not alone. At WooThemes, we’re often asked, “which app do you code in?”, “what’s your favourite app for project management?” and other related questions about the WooEngine. After looking back at our original blog post on this topic, I found that as the WooTeam grew and our business evolved, so did the apps and tools we use to make the Engine hum. Today, I’ll attempt to answer all of the possible questions you may have around this topic.

Welcome to “The Tools We Use – The Revised Edition”.

Step 1: get to the heart; chat with the team.

WooTeam
Being a diverse group of (at time of writing) 31 WooFolk, spanning the globe, we all have our own slight differences in how we approach a scenario (be it a ticket, bug fix or new feature). It’s easy for us to assume that everyone works the same way we do and uses the same tools. This couldn’t be further from the truth. Heck, up until a few weeks ago, some of us were still using Windows.

After surveying the team on a variety of tools from operating system to code editor, preferred web browser and any special tips and tricks they use, the results confirm the hypothesis; ever WooNinja, much like a snowflake, is unique. There is, however, a common thread that binds us all across certain tools we use as a team.

Operating System

os-x-logoAt the core of each WooComputer (WooPuter? WooBook?) is the operating system. Currently, we’re all Mac users. While this may change in the future, I have a feeling any deviation would be for other UNIX-based alternatives such as Ubuntu Linux.

Using the same platform helps us to stay consistent when using tools such as TextExpander and CodeBox for synchronising code snippets via Dropbox.

Web Browser

chrome-logoBy far, the winner is Google Chrome. While we test our products across all popular web browsers, everyone has their personal preference for daily browsing. Several ninjas do use Firefox as their primary browser.

These browsers both include element inspectors, as well as consoles, which are two foundations that our team uses every day without fail. If a ninja is corresponding with you on a ticket in our help desk, there’s a high likelihood that the ninja has used the inspector in their web browser to take a closer look and has checked the console for any error notices.

Code Editor

st2-logoThis is where we begin to see a slight shift. While most of us use the brilliant Sublime Text 2 editor, several use Coda 2, one uses TextMate and another uses Coda 1. We even have a Dream Weaver on our squad.

Ultimately, the code ends up looking the same so this is purely a preference decision.

A few reasons I use Sublime Text 2, for example, include the speed at which the app operates, the automated indenting on new lines (intelligently), as well as the plethora of useful packages that can be installed.

A few favourite packages include GitGutter, Gist, Trailing Spaces and, of course, the WordPress and WooCommerce code intel packages. Docblocker is also great for ensuring your code had appropriate docblocks, making it easier to understand the purpose of the method or property being docblocked.

Of course, all of these packages are only available through Package Control, the package manager for Sublime Text 2.

Version Control with Git

terminal-iconAs mentioned below and in previous posts, Woo loves Git (some may even say we “heart” it). How does each team member access the Git repositories?

This app choice, much like choosing a code editor, is definitely down to personal preference and comfort. We’ve had team members using Github for Mac for basic Git operations, as well as others (like myself) who prefer simply using Terminal.app instead. SourceTree is becoming a popular choice amongst the team, as it provides access to all the features and flexibility Git offers, proper handling of submodules and a decent GUI for making it all happen.

WordPress setup

When working with and testing so many different products, the most important factor is speed. How quickly can you switch from one product to another?

mamp-logoA common trend within the WooTeam is to setup a WordPress Multisite installation using MAMP, create a new site for each product, activate the product on that site and import demo content for the product. Once that site is setup, they have it forever. That’s great. For me and a few others, it takes too long. This lead me to develop the Matty Theme QuickSwitch plugin.

Theme QuickSwitch adds a menu to the WordPress Toolbar, making it easy to quickly activate a different theme. Some of us find a single site WordPress installation, along with this plugin, to be a quicker and easier way to switch between loads of different themes for testing and development.

Managing Translation Files

Every time a product is modified or released, the one constant is always the language files. To enable easier management of these files, we use the Codestyling Localization plugin for WordPress. This enables us to quickly update a language file before we deploy the latest version of a theme or plugin, without too much hassle.

Step 2: Look at the tools we use as a team. Find the heartbeat.

As amazing as the above tools are, there are certain tools we use as a team to collaborate, share ideas and converse about general topics (#catGifFriday, for example). These tools are the fan belt that keep the WooEngine purring.

P2

Being a WordPress-powered business, how could we not use P2?

For those not in the know, P2 is like an internal Twitter for your company (it can be public as well, if you’d prefer)… And it’s powered by WordPress!

Along with P2, we use the P2 by Email plugin to ensure we never miss a beat.

Github

OctocatAll code at WooThemes is housed on Github. We even have a neat workflow (based on the Github-Flow workflow) for managing all bug or feature request reports… even for our own website!

We use Github for code storage and development, issue tracking and collaboration around code-centric topics and discussions.

Trello

Trello-IconIf you’ve not heard of Trello, I’d highly recommend signing up as soon as you’ve finished reading this blog post.

Trello is a web app based on the Kanban/SCRUM styles of project management. One creates boards for a topic or task. These boards contain lists which house cards for each item or task pending action. When the status of a card changes, one moves it between the lists to indicate its current state.

We use Trello for everything, really. If its not code-related and needs planning/tracking, it goes into Trello.

As a team, we’ve found we’ve enjoyed using Trello for the variety of tasks we put to it, and have in fact ditched other project management tools in favour of keeping things lean and mean. We plan WooCommerce extension releases on Trello, marketing tasks, broad roadmap overviews, product strategy and more. There’s almost no limit to how useful Trello is.

Google Drive

google-drive-logoAs we use Google Apps for email, using Drive for documents was our next logical step.

We have a few folders that are shared across the team, while other documents can be shared with specific individuals if they’re just for a small team to review.

Drive also links in with Trello, which creates a neat symbiosis between the two apps.

Drive contains meeting agendas, team surveys, project briefs and more.

TeamGantt

This is a tool used by our management team. Here in, we schedule upcoming product releases, structure approximated timelines for development and attempt to spot trends where items are perhaps taking a bit too long or where we’ve overestimated the time needed on a task.

For Woo, TeamGantt is all about optimisation.

Step 3: Identify the tools we use with you, our customers.

Zendesk

zendesk-buddhyThis is a tool we are proud to share with you all every day. Zendesk is the heart of our help desk and the primary place we connect with you, our valued customers.

Comprising a help desk, knowledgebase and community forum, Zendesk is a wealth of information on all things WooThemes.

WooCommerce

Last but not least, we cannot forget WooCommerce.

Our website runs on it, out team works with and develops it, you purchase from us through it. WooCommerce is the backbone of the WooThemes.com experience.

Until the next revision…

Tools within the online community are always evolving. New tools are released while others fall off the radar.

I hope you all found this brief look under the hood to be an insightful and informative one. I don’t doubt there will be another in the future where the majority of the above will have changed somewhat again.

What tools do you use? Let us know in the comments below.

cta-banner-10-product-page-v2_2x

47 Responses

  1. Ryan Ray
    July 3, 2013 at 4:38 pm #

    Thought I’d chime in for a great MAMP alternative, it goes by the name DesktopServer. I’ve tried to convert some of the team, but I think there are only two of us using it. 😛

    It does the same thing as MAMP, but better in my opinion! If you have issues with MAMP, like I did, and want something that is as easy as flipping a switch, check out DesktopServer.

    I use the limited version and have two multisite setups plus one normal install.

    • Alex Vasquez
      July 3, 2013 at 10:17 pm #

      Gotta agree with Ryan! DesktopServer is AMAZINGLY awesome for folks doing WordPress development and is probably the best kept secret tool for WordPress.

      • Rita Best
        July 3, 2013 at 11:22 pm #

        Dido to that!

    • Rita Best
      July 3, 2013 at 11:21 pm #

      I use Desktop Server. It’s great and their customer service brilliant!

    • Serverpress
      July 4, 2013 at 12:36 am #

      Thanks for the mention Ryan! Our whole goal is to make a developer’s life a LOT easier and what better way to do that than to save them a bunch of time?

  2. Rai
    July 3, 2013 at 4:46 pm #

    Good article, what about the newsletter, how do you send the emails?.

    • Ryan Ray
      July 3, 2013 at 4:50 pm #

      Ahh yes, good catch! We use MadMimi to power our newsletters.

  3. Symbioseo
    July 3, 2013 at 4:53 pm #

    Good, we use the same tools for develop website and plugins on WordPress and WooCommerce. But we use Mercurial not Git.

    • Ryan Ray
      July 3, 2013 at 5:24 pm #

      Any version control is key here, I’d say we’re chosen Git/Github as we already have some of our free, open source, plugins there. Made sense for us to move everything else to Git. 🙂

    • Matty Cohen
      July 3, 2013 at 6:04 pm #

      Interesting. I’m curious, what got you to choose Mercurial over other version control systems such as Git or SVN?

  4. Guy Coussement
    July 3, 2013 at 5:22 pm #

    Sorry, but I have to say this: 1 white woman + a bunch of white guys doesn’t make for a diverse group!
    Love the work nonetheless!
    Guy

    • Ryan Ray
      July 3, 2013 at 5:27 pm #

      We actually have two white women! 😉

      And just because most of us are white, doesn’t mean we aren’t diverse. Diverse can be more than purely skin color.

      The simple fact that all of us come from different geographical areas, life experiences, education, cultures, etc… makes our team pretty diverse.

      I think so at the least. We’re still very glad you love our work though, no matter who’s creating it!

      • cajebo
        July 3, 2013 at 5:44 pm #

        Bravo to that Ryan.

      • Maria Scarpello
        July 3, 2013 at 6:22 pm #

        This white woman’s got a whole lot of soul though!

      • Rita Best
        July 3, 2013 at 11:35 pm #

        Bravo Ryan! Personally Im growing tired of this gender thing.

        If only the finger pointer’s would put as much energy and effort into being “Awesome” developers…regardless of gender or culture …well now that would a topic worth standing up for.

      • Rita Best
        July 3, 2013 at 11:38 pm #

        Bravo Ryan! Personally Im growing tired of this gender thing.

        If only the finger pointer’s would put as much energy and effort into being “Awesome” developers…regardless of gender or culture …well now that would be a topic worth standing up for.

    • farrel
      July 3, 2013 at 10:21 pm #

      Your underlying implication here is that race is the primary factor for determining diversity, but that in itself is racist mindset.

      It presumes all black people are the same, regardless of where they are from, and all whites are the same etc.

      Real diversity vs fake diversity is about people’s cultures and where they were raised, their personal skills, personality, experience, etc.

      Assuming that a black person who was raised in the USA, and a black person who was raised in England, and a black person raised in Nigeria are all the same just because they all have a black skin is reducing them down to nothing more than people with a certain skin color.

  5. Razvan
    July 3, 2013 at 6:08 pm #

    @Matty can you explain with more details how do you use MAMP. What`ve read sounds very interesting and I`m curios to find more about this subject.

    • Matty Cohen
      July 3, 2013 at 6:23 pm #

      Sure thing. 🙂

      Personally, I use MAMP just to get a basic server environment up and running (I don’t often dive too far under the hood).

      One tweak I did make is to WP CLI, which I run as a command line interface for setting up WordPress installations, installing plugins, etc. Using WP CLI with MAMP is just a matter of setting one variable in WP CLI to point to the PHP version that is packaged within MAMP.

      I use MAMP Pro and setup “local.dev” as my development WordPress installation.

      As Ryan mentioned above, he uses DesktopServer, which is an alternative to MAMP. Others are experimenting with using Vagrant as well. 🙂

  6. Razvan
    July 3, 2013 at 6:30 pm #

    I bought MAMP Pro a wille ago so I`ll stay with it. I use the same settings, but I never used WP CLI. Usually I have one install and just swicth betwen themes. It`s more easy to do this just because my themes folder is linked to beanstalkapp, and a other benefit is that I always some the some dummy content for all the projects.

    • Matty Cohen
      July 3, 2013 at 7:26 pm #

      If you’re using a single-site WordPress installation and switch themes often, I’d recommend the plugin I wrote (Matty Theme QuickSwitch) for the theme switching.

      It saves me at least 1 minute (and 1 click) every time I switch themes. 🙂

      WP CLI is great if you prefer a command line interface and want to “geek out” a bit. 🙂

  7. douglsmith
    July 3, 2013 at 7:31 pm #

    Along with some of the tools already mentioned, CodeKit has become an essential part of my toolkit. I use it to automatically compile LESS and SASS, optimize images, combine and minify files, and then refresh my browser.

    I’ve been using Coda as my primary editor, but I’m giving PHPStorm a try after seeing a demo of it at WordCamp Chicago last weekend. I don’t like the editor as well so far, but the integrated php debugging is a huge help.

    • Tom Harrigan
      July 3, 2013 at 11:23 pm #

      Good call with CodeKit. It’s definitely a tool I’ve been using more and more lately, haven’t tried using it for image optimization though.

    • Hugh Lashbrooke
      July 4, 2013 at 7:36 am #

      Yip – we should have mentioned CodeKit in here too as it’s something that plenty of us use to compile LESS and minify JS files. It’s an invaluable tool!

    • Matty Cohen
      July 4, 2013 at 9:18 am #

      Some of us use CodeKit as well, for compiling LESS and for minifying JavaScript/CSS on save. I reckon this is a tool we’ll be using more often. 🙂

      Have you given Sublime Text 2 a go as a code editor? It’s really great, super versatile and there’s most likely a package available to assist with PHP debugging.

  8. Yusri
    July 3, 2013 at 9:25 pm #

    Can I be a noob and point out a spelling mistake?

    • Ryan Ray
      July 3, 2013 at 10:14 pm #

      Yes, of course. 😉

  9. Simon Vreeman
    July 3, 2013 at 10:07 pm #

    Most important tool is obviously a decent coffee machine.

    • Ryan Ray
      July 3, 2013 at 10:15 pm #

      Very nice, the only physical tool mentioned was WooBooks. 😛

      I always start my day out with coffee, I make it via a Chemex. I’m sure many members of our team do the same.

    • Hugh Lashbrooke
      July 4, 2013 at 7:38 am #

      At WooHQ we have a Nespresso machine – it’s a crucial part of our development process 🙂

      • Sandie
        July 4, 2013 at 3:32 pm #

        For some of us it’s a crucial part of life 😉

  10. Kim
    July 4, 2013 at 11:02 am #

    How do you manage the user feedbacks and suggestions? Do you have a Trello board just for the best feedback and ideas?

    • Matty Cohen
      July 4, 2013 at 3:56 pm #

      Hey Kim. 🙂

      We use WooIdeas (UserVoice) to collate ideas from the community. UserVoice has some great features for being able to sort by most voted idea, etc.

      Once an idea is confirmed, we filter that into our product design process where we do customer development, spec drafting and code design.

      A lot of that planning does happen on Trello. 🙂

  11. Andy Swinburne
    July 4, 2013 at 11:07 am #

    Great post 🙂 Use many of the same tools myself buts there’s a couple which are new to me, will be sure to check them out.

    Good to hear there is a solid coffee machine in the dev process too!

  12. Henrik Blomgren
    July 4, 2013 at 11:59 am #

    Imac, Aptana Studio, MAMP, Photoshop, Illustrator are the tools of my trade.

    Mixing Firefox(when on a PC) and Chrome(when on a Imac) to get everything done. It´s fun and cool most of the times, irritating at others. Doing the WP development for fun trying to learn it to get better accustomed to everything.

    Will dive deeper into PHP soon. Since that is what I need to be able to create all the small things I want to have for my designs.

    And are all of you WooMembers developers and designers? So you do the whole deal all on your own? Or do you have a set of designer and coders?

    • Matty Cohen
      July 4, 2013 at 3:58 pm #

      We have both designers and developers in our squad. Our designers generally also have frontend development knowledge and the PHP essentials. 🙂

      • Henrik Blomgren
        July 5, 2013 at 12:23 am #

        Thought so XD

        Just keep the good work up and motivate me more to get into this busniess please 🙂

  13. Sandie
    July 4, 2013 at 3:40 pm #

    Just thought I’d mention WebMatrix for those of you looking for a Windows option. I never see it mentioned, and struggled for ages to find a good option, yet it really makes life so easy. Version 3 is fairly recent and quite a step change in functionality.

    • Matty Cohen
      July 4, 2013 at 4:01 pm #

      Thanks for that, Sandie. 🙂

      For Windows users, there is also WAMPServer ( http://www.wampserver.com/en/ ) which is great and easy to set up. 🙂

  14. Pranjal
    July 4, 2013 at 11:56 pm #

    I was always eager to know how you guys code with what tools at this level of perfection, thanks for sharing the insights.

    And alike of most of the coders you guys are all running on Macs 😉 interesting! and a P2 blog for the internal usage.

  15. nightrider
    July 5, 2013 at 4:04 pm #

    I was also thinking that if Apple badly messed up Mac OS X, I’d switch to Ubuntu. I’ve already switched to a lot of open source software. Just curious, what version of Mac OS X are you all running (assuming you’re all running the same version)?

    Speaking of Firefox, I’m starting to use it again because its bookmark manager totally blows away Chrome’s, which is slow as molasses if you have as many bookmarks as I do. 🙂

    After logging in to woocommerce.com using Firefox, some icons are corrupted:
    1) the icon next to the “My Account” becomes a “U”
    2) the up/down sort arrows of the “My Subscription Downloads” becomes a “}”

    However, Firefox formats the “Download Theme/Download PSD” nicely side by side, while Chrome stacks them, but the lower one is offset. This is brand new weirdness for Chrome.

  16. nightrider
    July 5, 2013 at 4:14 pm #

    Actually, now with Firefox, I don’t have to be logged in to see the strange text character replacement for the icons. I just checked again, and the up/down sort arrows of the “My Subscription Downloads” switch between “}” and “{“. I also just noticed the twitter, Facebook, and RSS icons at the bottom of the page become “t”, “f”, and “B”. Sometimes the correct twitter icon appears, but the “f” and the “B” always stick. The same thing happens on the left, and the digg icon becomes a “d”. Strange!

    • nightrider
      July 16, 2013 at 2:40 am #

      So what was the issue with the icons? I’m interested in case it ever happens on one of my sites.

      Thanks!

  17. GBoxApp
    July 5, 2013 at 8:54 pm #

    This is a very informative post. There are a lot of people who are surely going to look up for the same. Well done!

  18. csfalcao
    July 9, 2013 at 3:03 am #

    How do you create graphics files? I use Pixelmator, the (very) happy poor’s Photoshop!

  19. csfalcao
    July 9, 2013 at 3:05 am #

    Oops, forget to ask: and FTP? I use Forklift and Transmit

    • Hugh Lashbrooke
      July 9, 2013 at 6:37 am #

      We seldom use FTP due to the efficiency of Git, but for the times that we do most of us use Transmit as well.