Category: Development

For developing on remote servers, but using a local IDE, I prefer to use Unison over other methods that rely on syncing files via rsync or SFTP.

But, one issue with Unison is that two computers must have the same version to sync. And since Homebrew installs Unison 2.48.4 and apt-get install unison installs something like 2.0.x, this meant I couldn’t sync between my computer and a development machine if I wanted to install Unison via apt-get

No worries, by following the documentation, and a bit more searching, I was able to figure out how to build Unison 2.48.4 on my development server!

Note: I did run into a warning at the end of the build. But, from what I can tell, the build actually succeeded. The second-to-last step below helps you test if the build succeeded.

When using Elasticsearch for reporting efforts, aggregations have been invaluable. Writing my first aggregation was pretty awesome. But, pretty soon after, I needed to figure out a way to run an aggregation over a filtered data set.

As with learning all new things, I was clueless how to do this. 😄 Turns out, it’s quite easy. Within a few minutes, I came across some articles that recommended using a top-level query with a filtered argument, which seemed cool because I could just copy my filter up.

That’d look something like:

{ "query": { "filtered": {} }}

But, one of my coworkers pointed out that filtered queries have been deprecated and removed in 5.x. Womp womp. So, the alternative was to just convert the filter to a bool must query.

Here’s an example:

Example

You can find the Shakespeare data set that I’m using, as well as instructions on how to install it here. Using real data and actually running the query seems to help me learn better, so hopefully you’ll find it helpful.

Once you’ve got the data, let’s run a simple aggregation to get the list of unique plays.

Comments

While working on some functional tests for a hosting provider, I kept running into an issue where the login test was failing due to a 500 error. It appeared as if the site hadn’t been fully provisioned by the time my test was trying to login.

Initially, I attempted adding timeouts to give the installation process more time, but that seemed prone to error as well since the delay was variable. Also, with a timeout, I would’ve had to make the timeout be the longest expected time, and waiting a minute or so in a test suite didn’t seem like a good idea.

Getting it done

You think it’d be a quick fix, right? If this errors, do it again.

Within minutes, I had found a setting in Mocha that allowed retrying a test. So, I happily plugged that in, ran the test suite again, and it failed…

The issue? The JS bindings for Selenium Webdriver work off of promises, so they don’t quite mesh with the built-in test retry logic. And not having dug in to promises much yet, it definitely took me a bit to wrap my head around a solution.

That being said, there are plenty of articles out there that talk about retries with JavaScript promises, which helped bring me up to speed. But, I didn’t find any that were for specifically retrying promises with Selenium Webdriver in a Mocha test suite.

So, I learned from a couple of examples, and came up with a solution that’d work in my Selenium Webdriver Mocha tests.

The Code

You can find a repo with the code and dependencies here, but for convenience, I’m also copying the relevant snippets below:

The retry logic

This function below recursively calls itself, fetching a promise with the test assertions, and decrementing the number of tries each time.

Each time the function is called, a new promise is created. In that promise, we use catch so that we can hook into the errors and decide whether to retry the test or throw the error.

Note: The syntax looks a bit cleaner in ES6 syntax, but I didn’t want to set that up. 😄

Note that the only thing we did different in the test was put the Selenium Webdriver calls (which return a promise) inside a callback that gets called from handleRetries. Putting the calls inside this callback allows us to get a new promise each time we retry.

Comments?

Feel free to leave a comment if you have input or questions. Admittedly, I may not be too much help if it’s a very technical testing question, but I can try.

I’m also glad to accept critical feedback if there’s a better approach. Particular an approach that doesn’t require an external module, although I’m glad to hear of those as well.

As a note, in this case, it could also be nice to print out the docblock for each method instead of just the arguments to add some context. But, I didn’t need too much context for a file that I’m in pretty often. Your mileage may vary.

I came across a really great article that compares changes in Google Maps and Apple Maps over a year. It’s really great to see how much Google is experimenting and improving their product.

Similar to how a software engineer refactors their code before expanding it, Google has repeatedly refactored the styling of its map as it has added new datasets. And we see this in the evolution of Google Maps’s cartography:

As Google has added more and more datasets, it has continually rebalanced the colors, weights, and intensities of the items already on its map – each time increasing its map’s capacity for more.

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:

Automattic is my first job out of University. So, perhaps my perception is skewed

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?

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

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.

Breaker of things

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

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.

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.

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

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.

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.

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.

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.

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.

The best (and most widely adopted) products are mostly accommodating with familiar patterns and rarely “retraining” with something that is entirely new. Only force new behaviors that power a unique value (think Snapchat opening to the Camera while competitive products opened to the feed, etc…).