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 Mapss 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 maps 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.
Maybe I’m good at managing things. Maybe I’m just opinionated and don’t mind sharing those opinions.(?)/
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 thenstored 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.
Ive 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 dont what happened, but enough was enough I decided to pull the plug and look for a better alternative.
Thats when I found Laravel Valet (or Valet for short)… Its so easy I wish Id 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, weve discussed some tips for choosing fonts. Today well talk about how to navigate choosing more than one font for your site.
If you look closely at most websites (like The Daily Post), youll see that theyre often using more than one font. In most cases, thats 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 thats 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).
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.
Misconceptions about software roles: if you're a dev role, doesn't mean you can't do analysis/test/help prioritise ideas/prep showcases
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.
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 12.20.1
# Set 12.20.1 (or another version) as default
nvm alias default 12.20.1
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!
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 Spotifys 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.
This is an older post, but still applicable to today’s software development.
One of the big takeaways for me is that sometimes it’s OK to have bugs in software. But, not all bugs and not all systems are created equal. Check out the post for an example of Boeing’s bugs.
One thing that continually frustrates me when working with dedicated test teams is that, well, they find too many bugs. Don’t get me wrong. I want to be the first person to know about any bug that results in inconvenience for a user.
But how do you distinguish between bugs that users are likely to encounter, and bugs that users will probably never see?
I was working on something in Jetpack recently, and was mind-boggled when I came across a do…while( false ) loop.
What confused me so much, is why even use the loop if the condition was always false? Not able to figure out what this bit of code did, I brought the issue up to my team and Dan Walmsley was able to track it down.
Turns out, that in the initial commit, we were using the do...while( false )loop as something of a poor man’s go-to.
If you look at loop in the initial commit, you’ll see that there are several breakstatements. So, at any point in time, we could breakout of the loop and prevent any other code in the loop being reached. In effect, we would jumping to a spot just out of the loop hence, goto.
To do while false or not?
While I understand the construct now, it did confuse the hell out of me at first. For that reason alone, I’m not sure it should be used. If you are going to use it, I would suggest at least writing a comment so the next developer has an idea of what’s going on.
One of my coworkers, Alister Scott, recently shared a post on his blog about a crazy bug. I didn’t know what to expect when I first read the post title. But, after reading the post, I am mindblown!
Mindblown
If you’ve got a few minutes and are interested in development and software testing, then I’d suggest reading Alister’s post.
Imagine ifsomeone came to you and told you that your website was causing their laptop to throw a fatal system error, the dreaded blue screen of death, what would your response be?
This past Friday, I participated indo_action A hackathon where WordPress community members got together and helped 10 Austin area non-profits with their online presence.
This was my first hackathon, and while it went pretty well, I wanted to share a few tips that I think would’ve made me a bit more productive at the hackathon.
Setup a development site before the event
Get media from the organization in advance
Bring a long laptop charger
Setup a development site before the event
I think it goes without saying that if you are building a new design, developersshouldn’t be making changes directly to aproduction site. So, before we made any changes to the site at the hackathon, I had to setup a development site.
After everything was said and done, it took me nearly 3 hours to migrate the production site to another server and even then, I wasn’t able to get all of the media. ?
Sounds crazy, right? But, shit happens. Here are some issues that I ran into:
We had no FTP/SFTP access to the production site
We tried a plugin to move the database and media, but the media didn’tmigrate properly
We had slow internet, which made downloading and uploading media super slow as well as caused issues with the import process timing out
The organization had a couple of premium plugins, but the representative didn’t have access to download the plugin again from Code Canyon
These are all minor issues, but they take time. For example, given a day or two, I would have just waited to get FTP/SFTP access and a login to Code Canyon. But, given we were on a time crunch, we lost some time and had to find workarounds.
While my team did a great job of refreshing our organization’s website, we could have had a better start had I taken the time a week before to make sure that I had all of the information necessary to migrate the site.
Get media from the organization in advance
I’m pretty proud of how the site redesign turned out. Here is an image that shows before and after for the home page.
As you can see, the new design makes use of many more images. Our team had the benefit of working with a non-profit that had a large collection of images from various events. Having this media was a huge help to the designers in our team!
Bring a long laptop charger
Because I only took one bag to Austin for the entire week, I made the decision to only bring my Macbook charger block, and not the longer extension cord. Having just the charger block usually works for me on my day-to-day.
But, at the hackathon, they had to chain power strips together to get power to everyone which caused two issues for me.
First, the location of the power strip for my team was at one end of the table. So, I didn’t have the flexibility to sit anywhere I wanted if I needed to talk to someone.
Second, since the charger block is large, it can block outlets that others need. :/
These issues weren’t the end of the world, but I wouldn’t have even ran into them if I had the longer charger cord. 🙂
Have any other tips?
These were a few things that stuck out to me after my first hackathon. Have you picked up any other tips?
If so, leave a comment below and let us know what your favorite tip is.
Earlier today, I created an internal “Call for testing” post where I essentially asked other Automatticians to break a piece of functionality that I intend to launch.
To help with the testing process, I included a link to a pre-filled Github issue. For the most part, pre-filling the issue with a label, milestone, etc. was pretty easy, but there were a few gotchas.
So, below I’ll break down how to prefill as much of the Github issue form as possible.
Creating issues
First of all, you should know that to create an issue for a repository, that you would go to a URL like:
As long as you’re logged in, when you go to the above URL, you’ll be shown a form to create a new issue. And since the new issue form is in the same place for each repo, you can share this link (and even prefill it) to make life a little bit easier for those that are using and testing your software.
The secret formula
In the above screenshot, you can see that there are 5 pieces of information that can be filled out in a new Github issue. These are:
Title
Description
Labels
Milestone
Assignee
Now, to prefill these all we need to do is add parameters to the query string. Here’s an example:
The HTML document is parsed incrementally by the browser, which means that the server can and should flush available document markup as frequently as possible. This enables the client to discover and begin fetching critical resources as soon as possible.
Google Search offers one of the best examples of the benefits of this technique: when a search request arrives, the server immediately flushes the static header of the search page prior to even analyzing the query. After all, why should it wait, the header is the same for every search page! Then, while the client is parsing the header markup, the search query is dispatched to the search index, and the remainder of the document, which includes the search results, is delivered to the user once the results are ready. At this point, the dynamic parts of the header, such as the name of the logged-in user, are filled in via JavaScript.
