What I do as a software developer at Automattic

This past Sunday, an 18-year-old who intends on starting at UNT next Fall and majoring in Computer Science explained to me the difference between a computer scientist and a programmer.

As he explained it, computer scientists are people who conceptualize software and programmers are the people who merely carry out the plan that the computer scientists made.

This kid went on to describe computer scientists as the people who do the thinking and the programmers as “dime a dozen.”

But, that’s not right…

The more the kid spoke, the more irritated I became because I do not perceive my role as a programmer to be one where I simply follow instructions without thought.

So, while I was initially very irritated, I later realized that:

  1. Automattic is my first job out of University. So, perhaps my perception is skewed
  2. This kid likely has no experience and is making assumptions

Thinking some more, it seemed like the best way to move forward would be to simply explain what I do as a programmer.

So, what do I do at Automattic?

Code Wrangler job description
This is the Automattic Code Wrangler job description as of December 21st, 2016.

My title at Automattic is Code Wrangler. But, that title is merely the default title for developers at Automattic and doesn’t mean much since all Automatticians can choose any title they like. 

Further, Code Wrangler is a very generic job title at Automattic, so what I do can be very different from what a Code Wrangler working on another product does.

That being said, I’d still like to share the things that I do as a Code Wrangler (aka software developer) at Automattic.

Maker of things

As a Code Wrangler, bringing things to life with code, or fixing broken things, is my “bread and butter”.

I spend a majority of my time on the front-end building interactive UIs with JavaScript, HTML, CSS, PHP, etc., which you can see from the images I share in this post.

But, thanks to being on team Poseidon (the Jetpack platform team), I also get to do other interesting things, such as:

  • Writing a script to loop through all Jetpack sites and backfill missing data
  • Somewhat fix a several years old bug that is lovingly called an Identity Crisis
  • Add CLI commands to Jetpack’s sync functionality

And while I spend a majority of my time actually working with code, I do spend significant amounts of time doing other things.

Manager of things

Account management section of WordPress.com
Allen Snook, Kevin Conboy, and I were the main people behind getting the account management section into the newer JavaScript based version of WordPress.com nicknamed Calypso. You can find more information here.

At Automattic, we don’t really hire for typical project manager roles, at least to my knowledge.

Because of this, I’ve had the opportunity to take on the role of a project manager for several of the projects that I’ve worked on.

I like to get shit done, and I will gladly do whatever is necessary to push a project to the finish line.

This means that I am often involved in much of the planning for the projects I work on, which can include diagramming, white-boarding, creating and assigning tasks, discussing designs, etc.

Maybe I’m good at managing things. Maybe I’m just opinionated and don’t mind sharing those opinions. ¯(ツ)

Breaker of things

Jetpack Secure Sign On
Earlier this year, I refreshed the Secure Sign On module with design input from Michael Arestad. We were able to spruce the design up, but I also fixed many flow issues and bugs.

At Automattic, we have the “Flow” team whose job I understand to be:

  • Manually testing Automattic’s products
  • Implementing automated functional testing of Automattic’s products
  • Working with other teams at Automattic to improve testing processes
  • Generally being awesome

While I am not on this team, testing is definitely one of the things I like most about my job, even though testing isn’t mentioned anywhere in the Code Wrangler job description.

I often find myself asking things such as:

  • I wonder what happens if I rotate the screen here?
  • Does this input have validation?
  • What does the mobile layout look like here?
  • What’s a flow that wasn’t thought about?
  • How do things look in Internet Explorer?

I don’t have a strict testing list, other than the fact that I try and test Internet Explorer every Friday. Yet, I am often able to find bugs in new software as well as regressions in older software.

The thought I’d like to leave you with for this section is that testers are necessary to make sure that we have considered as many things as possible before our users unwittingly become our testers. Sure, some planning ahead can help reduce issues, but no one person can catch them all.

Designer

User Management Section of WordPress.com
This is the user management section of WordPress.com, a project which I had the honor of leading. I worked with Miguel Lezama, Rocco Tripaldi, Rick Banister, and Kevin Conboy to bring this together.

I have the honor to work with amazing designers such as Rick Banister, Michael Arestad, Jeff Golenski, and many others.

And I’ll be the first to tell you that I’m definitely not a designer in the same way that they are designers. They’re all badasses.

But, one of the things I learned early on, is that as a developer, I can play a vital role in the design of a project

For example, if I am a developer on a project, and I am delivered a design, should I simply implement that design? I’m not so sure about that.

WordPress.com invite users form
This is the form to invite users to a WordPress.com site. Worked on by myself, Miguel Lezama, Rocco Tripaldi, and Rick Banister.

On one hand, the designers have likely delivered what the ideal flow should be. But, have the designs taken in to account technical limitations? What about business limitations? If the designers only delivered mobile designs, what does this thing look like on desktops? Vice versa?

As the person who will implement a design, it’s my job to provide feedback to designers so that, together, we can can deliver the best product possible in the shortest timeframe possible.

I didn’t always understand my role to be like this. The first project I led, the user management section of WordPress.com (pictured at the top of this section), went very differently actually. At the beginning of the project, Rocco Tripaldi and I were given designs, and we immediately set out to make those designs a reality.

Jetpack Sync Panel
This is the Jetpack sync panel that is displayed within WordPress.com. This allows the user to trigger a full sync of their site and watch the progress.

After Rocco and I spent several weeks quietly working towards implementing the design, we finally came to the conclusion that the design was not then possible without some significant changes to how we stored data, so we decided to tweak the design a bit to be compatible with how we then stored data.

This was an expensive (to the company) lesson for me. Had I provided some feedback with the issues I was running into earlier, we could have made the decision to change sooner and potentially saved a month or more of developer time (two developers times 1-3 weeks).

In my experience, the best work that I’ve done has been a result of great communication and collaboration between development and design.

What do you do as a software developer?

One of the things that I became interested in after talking to this kid was the fact that software developers likely work very differently at different companies.

So, how do you work? Do you wear different hats, or do you tend to just do programming? Feel free to leave a comment or link back to this post.

Interested in wrangling code with me?

Automattic is always hiring, so if you found this post interesting, check out our open positions.

This picture was taken by Jeff Golenski at the 2015 Automattic Grand Meetup in Park City

Tired of Vagrant? Try Laravel Valet

I’m always interested in optimizing my dev environment, and after Thomas’s article about Laravel Valet, I’m going to be giving that a try for local WordPress development.

I’ve used Vagrant for more than a year now and although it was crashing from time to time, I always managed to get it working again. Not last week. I don’t what happened, but enough was enough – I decided to pull the plug and look for a better alternative.

That’s when I found Laravel Valet (or Valet for short)… It’s so easy I wish I’d switched to it a few months ago when it was initially released.

Source: Tired of Vagrant? Try Laravel Valet – ThemeShaper

The Principles of Design: Font Pairing

I find working with fonts to be one of the most difficult aspects of design. Line height, kerning, font pairing, and everything else is confusing to me.

WordPress.com released an article today about font pairing with some great examples of font pairings. While the article is meant for WordPress.com users, the examples of paired fonts make it a great read.

In the past, we’ve discussed some tips for choosing fonts. Today we’ll talk about how to navigate choosing more than one font for your site.

If you look closely at most websites (like The Daily Post), you’ll see that they’re often using more than one font. In most cases, that’s a stylistic choice. The site would probably function fine with just a single font, but the designer has chosen two to introduce a little more visual hierarchy to the typography.

Source: The Principles of Design: Font Pairing | The Daily Post

What do programmers do?

One of my coworkers recently shared what I found to a great read about what programmers do. Here are some sections that I liked most:

One method for maintaining stability is the maintenance programmer. The longevity of the program is therefore dependent on the capability, comprehension and intelligence of this person. But humans are not omniscient in comprehending programs. As a matter of fact one of the most intellectual endeavors is the analysis and comprehension of an existing program structure.

The ritual of programming is of great consequence because it deals with the communication between the original program author and the programmer responsible for maintaining the structural integrity of the program.

A programmer does not primarily write code; rather, he primarily writes to another programmer about his problem solution. The understanding of this fact is the final step in his maturation as technician.

Source: http://archive.computerhistory.org/resources/text/Knuth_Don_X4100/PDF_index/k-9-pdf/k-9-u2769-1-Baker-What-Programmer-Does.pdf

Why should text files end with a newline?

Lately, one of my pet peeves is seeing files that aren’t terminated with a newline. It’s part of our coding standards for Calypso at Automattic and it’s configured into our editors. But, I never knew why until recently.

If you’re curious yourself, check out this StackOverflow article.

I assume everyone here is familiar with the adage that all text files should end with a newline. I’ve known of this “rule” for years but I’ve always wondered — why?

Because that’s how the POSIX standard defines a line:

3.206 Line
A sequence of zero or more non- characters plus a terminating character.
Therefore, lines not ending in a newline character aren’t considered actual lines. That’s why some programs have problems processing the last line of a file if it isn’t newline terminated.

Source: Why should text files end with a newline?

Misconceptions about software roles

I really liked this tweet that I came across earlier. Just because I am a software developer doesn’t mean that I should only write software. I can be active in supporting that software, testing others’ software, and providing input.

Sanitize array of integers in PHP

I was recently working on a pull request where I wanted to take an array of object IDs and convert that into a string to be used in a SQL statement.

But, to prevent potential issues such as SQL injection, I needed to find a way to sanitize the array of integers and make sure that we only had integers in the array. Here is the solution that I used.

// Sanitize so that the array only has integer values.
$sanitized_array = array_map( 'intval', $ids );

// Now that we have all integers in our array, we can safely implode the
// array to be used in a SQL statement.
$ids_string = implode( ', ', $sanitized_array );
$sql = "SELECT * FROM {$table} WHERE {$object_id_column} IN ( {$ids_string} ) AND meta_key = %s";

If you’re not used to mapping an array of values, you may be wondering what the heck array_map() is doing. What array_map() does is iterate over an array (the second argument) and apply a callback function (the first argument) to each value in the array.

We then get back the resulting array with each value being sanitized by intval().

Alternative solution to sanitizing an array of integers

If you’re still a bit confused about what array_map( 'intval', $ids ), here’s another way to approach the issue:

// Sanitize so that the array only has integer values.
$sanitized_array = array();
foreach( $ids as $id ) {
  $sanitized_array[] = intval( $id );
}

// Now that we have all integers in our array, we can safely implode the
// array to be used in a SQL statement.
$ids_string = implode( ', ', $sanitized_array );
$sql = "SELECT * FROM {$table} WHERE {$object_id_column} IN ( {$ids_string} ) AND meta_key = %s";

In both examples, we iterate over the $ids array and apply the intval() function to each value.

Set default node version with NVM

I was recently figuring out how to use nvm, and one thing that stood out to me is that I needed to set the default version of node that I wanted to use when opening a new tab.

Because I was new to using nvm it took me a while to find the commands. So, if you happen to find this article while configuring nvm, hopefully you find this useful.

# Install the version that you would like 
nvm install 6.1.0

# Set 6.1.0 (or another version) as default
nvm alias default 6.1.0

Then you can open a new tab and if you run node -v, you should see v6.1.0 (or whichever version you set as the default.

Easy peasy, right? Hopefully this helps you if you’re having some issues!

Design Doesn’t Scale

One of our designers shared this post today in Slack, and I found it very interesting. I specifically liked the part about GLUE, because it reminds me of how we component-ize on WordPress.com.

And while I’m not a designer, I agree that components have helped with efficiency and consistency.

After the visual realignment, it soon became clear that the hardest part would be maintaining this new found consistency. So in 2014, we created Spotify’s Design Language System, GLUE (a Global Language for a Unified Experience), which documented our styles, components, and patterns, on a website that was accessible to everyone in the company.

For the first time we had a shared definition of our interfaces that we could use to coordinate its evolution. This not only encouraged consistency and increased efficiency, but also created a shared vocabulary between designers and developers, so that the label for a colour or type-style could be understood across design-specs and code.

Source: Design Doesn’t Scale. — Medium