Part of working at Automattic includes getting every employee at the company in one place at the same time — We call these grand meetups.
Grand meetups are a great time to bond with co-workers, learn, get some interesting projects done, and do flash talks.
Flash talks have a maximum length of 4 minutes (at least from what I remember) and can be given over any topic. Since Hero is hard of hearing, I decided that I would give a crash course over how parents could communicate through sign with their babies.
A big thanks to all a12s for participating and making me feel welcome 🙂 :hugs:
Note: joinClasses is now deprecated and you should use classnames. There is an explanation of how to use classnames at the end of the article.
React has slowly been coming together for me over the past few weeks as I have slowly moved from “how do I get this thing to work?” to “how can I factor this out?” mindset.
As I’ve slowly ventured into composition with React, one of the pain points that I’ve had was elegantly concatenating classes.
After a tip from Beau and some searching, my first try at concatenating classes in React was done using the classSet utility. And while I was able to use classSet to concatenate classes in a React component, I didn’t find it to be a very elegant or easily readable solution.
A bit more searching led me to a utility named joinClasses.
Using React joinClasses to Concatenate Class Names
Here is an example of how I am using joinClasses to concatenate CSS classes in a React component.
this.props.selected above is a string that represents which sidebar link should be selected and this.props.className is the class of the current sidebar link.
If the two match, then we want to add a class of selected to the sidebar item along with any classes that were passed in this.props.className.
If there were more classes to be conditionally added based on props that were passed in, I would look into combining the classSet utility along with the joinClasses utility.
Using classnames instead of joinClasses
React has deprecated joinClasses and has suggested that developers use the classnames node module instead.
So, first things first, you’ll want to install classnames. You can usually do this in the root of your project, and you’ll use this command: npm install classnames. Note, you might want to use npm install --save-dev classnames in order to update your package.json file.
Once you have installed classnames, you will then need to require it in your JSX file.
[javascript]
var classNames = require( ‘classnames’ );
[/javascript]
Once we have required classnames, we should be able to simply swap out joinClasses with classNames. Here’s an updated example:
Note: React.addons.classSet is now deprecated and you should use classnames. There is an explanation of how to use classnames at the end of the article.
Earlier today, I needed to add some classes to a link. One class was passed in through a prop, but the other class would be added based on a boolean condition.
It’s simple to access props within a React component, so my first crack at setting the classes looked something like this:
Good thing for pull requests, because that one was denied pretty quickly. In the pull request feedback, Beau Lebens mentioned that there was a CSS utility included with React called classSet.
He mentioned that the React classSet utility would be helpful because I’d be able to build my classes string without having to have a bunch of conditional statements and string concatenation. #winning
So, I went Googling and figured out how to use the React classSet utility. Here’s the relevant documentation for using React’s classSet for class name manipulation.
Here’s an example of how the React classSet utility works from the documentation linked above.
[javascript]
render: function() {
var cx = React.addons.classSet;
var classes = cx({
‘message’: true,
‘message-important’: this.props.isImportant,
‘message-read’: this.props.isRead
});
// same final string, but much cleaner
return <div className={classes}>Great, I’ll be there.</div>;
}
[/javascript]
This is a simple example, but what about the case where the class is passed in via a prop as opposed to just being switched on or off by a boolean?
Second Try with React classSet
This try at adding classes via the React classSet utility allows us to add a class that is passed in via a prop.
/*
* Since the className changes from sidebar item to item,
* we dynamically add this sidebar item’s class as a key.
*/
classes[ this.props.className ] = true;
Note that in this second try that we are dynamically appending our class that was passed in via the className prop to the classes object.
Then, when we call className={ classes } our string of classes is created.
Using classnames instead of classSet
React has deprecated React.addons.classSet and has suggested that developers use the classnames node module instead.
So, first things first, you’ll want to install classnames. You can usually do this in the root of your project, and you’ll use this command: npm install classnames.
Once you have installed classnames, you will then need to require it in your JSX file.
[javascript]
var classNames = require( ‘classnames’ );
[/javascript]
Once we have required classnames, we should be able to simply swap out React.addons.classSet with classNames. Even better though, since classnames is so robust, we can just pass in this.props.className as an argument.
Note: As of WordPress 4.2, dismissible WordPress admin notices should be a part of WordPress core. More information can be found here.
I find that in my blogging workflow, I tend to save drafts often so that I don’t lose my work.
While this may add a second or two here and there, the peace of mind that I get from knowing that I won’t lose all of my work is definitely worth it.
But, there is one little thing that bothers me about saving drafts, and that is the pesky WordPress admin notices that stay at the top of the view.
So, today I set out to find a way to hide or remove the WordPress admin notices.
Initially, I tried a solution that automatically hid the “Post Draft Updated” WordPress admin notice after 5 seconds, but I wasn’t very fond of the UX.
After a bit of thought, I decided that the user should be able to actually dismiss these notices and decided upon this:
The Magic Behind Dismissible WordPress Admin Notices
<?php
/*
Plugin Name: Dismissible WordPress Admin Notices
Plugin URI: https://eric.blog
Description: Adds the ability to dismiss WordPress admin notices.
Author: ebinnion
Version: 0.1
Author URI: https://eric.blog
*/
class Dismissable_Admin_Messages {
public function __construct() {
add_action('current_screen', array(
$this,
'admin_init'
));
}
public function admin_init() {
$screen = get_current_screen();
$showOn = array(
'post',
'page'
);
if (in_array($screen->id, $showOn)) {
if (isset($_GET['message'])) {
add_action('admin_head', array(
$this,
'admin_head'
));
add_action('admin_footer', array(
$this,
'admin_footer'
));
}
}
}
public function admin_head() {
?>
<style>
#message {
position: relative;
}
#message .dashicons-no {
cursor: pointer;
margin-top: -.5em;
position: absolute;
right: 10px;
top: 50%;
}
</style>
<!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->
<?php
}
public function admin_footer() {
?>
<script>
(function( $ ) {
var message = $( '.wrap > #message' );
message.append( 'dashicons-no">' );
message.find( '.dashicons-no' ).on( 'click', function() {
message.slideUp();
} );
})( jQuery );
</script>
<!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"--
<?php
}
}
new Dismissable_Admin_Messages();
How to Install
As of now, this plugin isn’t on the official WordPress repository. But, if you would like to use this functionality, you can save the code above into a file and put it in either:
wp-content/plugins
wp-content/mu-plugins
If you have any questions, please don’t hesitate to ask.
A reader of Man of Hustle emailed me last night and asked for some advice before applying to Automattic:
Hi Eric,
I came across your Man of Hustle blog while researching about working for Automattic. Thank you for your blog by the way; I really appreciate your openness and passion. I’m interested in applying for the Code Wrangler position at Automattic and I was wondering if could trouble you for some advice.
First, some background about myself. I currently work as a web developer for [redacted] where I’m doing Ruby on Rails development for [redacted] web application. I’ve also had solid experience with Java, Perl and PHP in prior jobs. I’m more of a back end developer, but of course I’m comfortable with HTML, CSS, JavaScript and jQuery. Here’s summary of my career history. [redacted link]
So I have extensive professional web development experience and use alot of open source libraries and tools on the job. However, I’m lacking in open source contributions. I love programming but that manifests itself more in my professional life. I do want to get more involved in contributing to open source projects. I just need to squeeze in the time among my other responsibilities and commitments outside of work.
Also, although I have solid experience with PHP, I don’t have much experience with WordPress. That is about to change as I have volunteered to rebuild a friend’s non-profit organization’s website on WordPress.
And now finally my question. Do you think I should go ahead and apply for the Code Wrangler position now or should I wait a few months to build up my WordPress experience and open source contributions and then apply? Which choice would maximize my chances of getting the job?
Well, Should This Person Apply to Automattic?
First, I don’tevermind giving advice when asked. That being said, one should always understand that advice is very much an opinion and can be wrong.
In this specific case, I would recommend that the reader go ahead and apply to Automattic, based off of the following:
Many Automatticians weren’t hired their first time.
I believe that a no from Automattic is often more like a “not right now“
The application review process takes a while
And while you’re waiting for a response, I would go ahead and:
Get some experience with WordPress
Get active in open source
Deep dive into JavaScript
JavaScript is quickly becoming an essential skill at Automattic as well as in web development in general. I would suggest that you get at least some experience with Backbone JS and/or Facebook React to get started.
Disclaimer: I have no input on the hiring process, so am, unfortunately, not the best person to ask. So, take this with a grain of salt.
I recently moved a couple of my sites from Dreamhost to GoDaddy’s managed WordPress hosting.
While one of the websites migrated perfectly fine, the other website had issues with the WordPress importer failing. :/
My best guess of what was happening is that the GoDaddy max_execution_time was set quite low, which was causing the importer to fail. I confirmed this by downloading the phpinfo plugin which showed the following:
It took a bit for me to figure out how to increase the max_execution on GoDaddy’s managed WordPress hosting, but after quite a bit of search I found an article on GoDaddy’s support portal that describes where to put the PHP initialization files for the varying GoDaddy hosting products.
Easily enough, the PHP initialization file for GoDaddy’s managed WordPress hosting is located at html, which is the initial directory upon logging in to SFTP.
So, to increase GoDaddy max_execution_time, all I had to do was:
Open an SFTP connection
In the same directory as wp-config.php, create a .user.ini file. Note the leading .
Lastly, in this .user.ini file, I added the following:
[code lang=text]
max_execution_time = 180
[/code]
The above will increase the GoDaddy max_execution_time to 3 minutes, which you can verify yourself by using the phpinfo plugin mentioned above.
Unfortunately for me, increasing the GoDaddy max_execution_time didn’t fix my issue of the WordPress importer failing. I ended up moving my site to WP Engine which worked like a charm.
My 6 month anniversary of working at Automattic was just a few days ago on January 14th.
I had started this post that day, but surprisingly, I found it very hard to come up with the words to describe what I think and feel about working at Automattic.
But, now I’ve had a few days to think about what to say, and here are a few topics I’d like to talk about to give you a better idea about what working at Automattic means to me.
My Team
The thing I truly love the most about working at Automattic is Team Mercury.
Mercury has recently grown as of a week ago, so for the first part of this, let’s consider the team members that went to Rome.
Beau Lebens
Allen Snook
Jennifer Dodd
Kevin Conboy
Oguz Kocer
Even though we work primarily through text, I catch myself laughing out loud randomly throughout the day.
I also have a huge amount of respect for each one of them, and in some way, each one of them has taught me something in the past 6 months. Sometimes I catch myself feeling like I’m the dumbest one on the team which is a great place to be in and learn.
Recently we took on a few other members from another team, including:
Enej Bajgoric
Michael Arestad
Miguel Lezama
Rocco Tripaldi
While I’ve only been working with this second group of team members for about a week, I feel like they bring a lot to the team in terms of knowledge and personality. So, it’ll be great to get to know them better over the next several months.
Typical Work Day
I’m not sure that I have a true “typical” work day, but one day of work might look something a bit like this for me:
Wake up between 8:30 – 9:30
Start looking at posts/messages/Slack/etc. to catch up on previous day/night stuff
Be at coffee shop some time between 10 and 11 am at the latest
Watercooler with team mates as well as replying to messages/posts/Slack messages
Start programming at about 11:30
Take a break between 2-3 pm and head to Mom’s or home to keep working. (I’ve found that a change of scenery really helps when working on tough problems that are frustrating me)
Work until about 5:30 pm when I pick up Hero from the Boys and Girls club
Figure out dinner and then program a few more hours starting at 7-8 pm
Interestingly, I have no clue how many hours a week that I work, and these times above are really just guesses. I don’t often think much about how many hours I’m working. Instead, I set a goal(s) for the day and try to achieve that.
Ultimately, my daily work schedule is very flexible and changes through the day to fit in my life. Note that I said that the work schedule fits in my life, instead of the opposite where people try to fit their lives into their work schedules.
Travel
I think that travel is the best perk of working at Automattic. As linked in my 2014 review post, here are the places that I traveled to for work.
A couple of months ago, I found myself wanting to check if a value was in an array in JavaScript. Since I come from a PHP background, I was super excited to see that jQuery has an inArray() function.
So, I popped $.inArray() into the program, did a few tests to make sure it works, and then committed it. The next day I got a bug report…
Turns out that I forgot an edge case. What happens when the value I’m searching for is at the front of the array?
jQuery.inArray() Does Not Return a Boolean
Coming from a PHP background, I expected jQuery.inArray() to return a true if the value was found in the array and a false if the value wasn’t found in the array.
My mistake here is that I didn’t read the documentation well enough, or I would have seen that jQuery.inArray() is equivalent to using .indexOf().
So, instead of returning true when the value is found in the array, jQuery.inArray() was returning the index within the array where the value was found. If the value is not found, -1 is returned.
:facepalm:
So, instead of having my conditional look something like this:
[javascript]
var numbers = [ 1, 2, 3, 4, 5 ];
if ( jQuery.inArray( 2, numbers) ) {
// do something
}
[/javascript]
I decided to use this:
[javascript]
var numbers = [ 1, 2, 3, 4, 5 ];
if ( jQuery.inArray( 2, numbers ) >= 0 ) {
// do something
}
[/javascript]
We all require looking at the manual at some point when we program. Sure, there’s a few choice functions you use on a day-to-day basis for which you remember the parameters, order of the parameters, etc.
But, so much of a developer’s job is searching Whether that’s on StackOverflow or Google. 30 more seconds would’ve been all it took for me to get it right.
An old friend of mine got in touch with me today and asked:
Hey man… Best idea for beginning to learn programming?
I was actually very excited when my friend reached out because, in my opinion, learning to program is something that can only enhance one’s possibility of advancement in many careers.
But, Before You Get Started…
I don’t doubt for a second that you could learn to program. But, that doesn’t mean it’s easy.
Sure, in some cases it is fairly simple. For example, let’s write a program that just says “Hello World”.
Now, let’s print out every number up to 1,000 that is odd in Javascript
[code lang=javascript]
for ( var i = 1; i < 1000; i++ ) {
if ( i % 2 == 1 ) {
console.log( i + ' is odd' );
}
}
[/code]
For funsies, here’s a video that shows you how to run both of these little snippets in your browser.
That being said, while basic programming and writing code itself is fairly simple, being a good developer is much more complex. I’ll defer to Beau Lebens on this subject and link you to his post, “Why Web Development is Complex.”
If you’re still here and are still interested in learning to program – Hell yes! Let’s get on with it then 🙂
Where to Get Started
My absolute favorite place for beginner tutorials on programming, including everything from iOS and Android to web development, is Treehouse. This is a paid website, starting at $25, but is well worth it for how well organized the videos are.
I was very lucky to get a free account for two years when Treehouse had a giveaway for students. That being said, I would gladly pay the $25 per month if I were just starting to learn.
Once signing up and logging in, you will be presented with many tracks that you can learn from. These tracks start you off at a very basic level and bit-by-bit teach you the many thing you need to become a beginner developer.
You want to build the next badass iOS app. Great, do the “iOS Development with Objective-C” track.
Do you want to learn web development? Awesome. Take the “Front End Web Development” track.
Here is an example of the quality of the interface and videos that you will get within each lesson.
And Start a Damned WordPress Site
My passion for development all started with me creating a WordPress site. Sure, I supplemented along the way with my BA in Computer Science, but nearly all of web development skills are self-taught by actually building stuff.
So, go get a cheap hosting account. Figure out how to install WordPress. Install some plugins and a theme. Then, when you want to add something cool to your site? Figure out how to program it.
Here’s the thing… The WordPress community is amazing. There is no shortage of tutorials, code snippets, and amazing people to help you learn to program.
2014 was a very good year for myself and my family. To be frank, I hadn’t realized how blessed I was this year until the past few days as I paused to reflect on everything that has happened.
That being said, I found that my successes in some areas also led to some shortfalls in other areas.
I’d like to cover my successes and shortfalls, and how I plan to address shortfalls, in a few separate categories:
Career
Family
Health
Career
This year was huge for wins in the career category. In July of this year, I started my dream job at Automattic, the company behind WordPress.com as well as many other products/services.
Along with the honor of working for such an impactful company, I also received a sizable increase in salary as well as many other benefits.
As part of my work at Automattic, I have been able to travel to the following cities for work:
While I am happy with where my career is currently at, there is always more work to be done.
In 2015, my career plans will center around:
Learning and writing much more JavaScript
Making at least one contribution to the WordPress mobile apps
Speaking at at least one conference
Making a contribution to each major release of WordPress.org
Family
I’ll go ahead and break this category up for the three other humans living in my household 🙂
Sara
For those who don’t already know, my daughter died last year. This event alone was very sad, but unseen to many were the effects that it had on my relationship with Sara. I’d be lying if I said that there weren’t a few moments near the beginning of this year where I doubted that our relationship could last.
But, I am happy to say that I feel we have pulled through this very well. As a matter of fact, my love and respect for Sara has grown to a level that I have not known before with any other partner.
I believe that this respect and love for her comes from a newfound understanding that while I may like to say that I am the leader of my family, in almost all ways, Sara is the de facto authority.
Sara happily schedules family events, coordinates school efforts, and nags my live-in cousin when he is not performing to our standards. She does all of this while also holding down two separate jobs and going to school full time.
Unfortunately, I feel this often leaves her overworked and under-appreciated.
To address this, I will be taking on more of the financial burden for the forseeable future so that Sara can worry much less about money and instead focus on family and school.
Hero
It’s been both heartwarming and frustrating to see Hero grow so close to Sara. I feel that this is largely due to my focus on wins in the career/financial category. To address this, I plan on having more meaningful interactions with Hero. Namely, I plan on reading nighttime books with Hero more as well as more Father-Son outings.
Jake
My 17-year-old cousin moved in with Sara and I in late July for his senior year of High School. With a bit of support and nagging, Jake received acceptable grades for the semester, and is on his way to graduating on time. So, I guess that counts as a success so far?
There’s been several arguments over the past 5 months between the three of us, in which I usually come down pretty hard on Jake for grades, lack of respect or motivation, etc. But, when I step back and look at the situation as well as how Jake performs, I realize that he is a damned decent kid that is just a bit rough around the edges.
Overall, I think Sara and I have done well here. Although, I think we should possibly consider easing up at times.
Health
It’s no secret that my health has not been a priority in the past few years. Hell, one look at my “rotund” belly (Hero called out a parallel between my belly and Santa’s while reading a book recently) would point that out.
While I need to lose somewhere in the neighborhood of 100-120 pounds to be at the ideal weight for my height, my doctor recently suggested that I focus on losing 25 pounds in 2015. Which should get me to 260 pounds.
Also, related to weight, I lead a very sedentary lifestyle and need to focus on becoming more active in general. After buying a pebble recently, I believe I am going to track general activity by counting steps. I’ll aim for at least 1,000 steps per day.
One of the best perks that comes with working at Automattic is the opportunity to travel. Because every person in the company works remotely, the company pays to get us together 3-4 times a year.
I just got home from spending a week in Rome with my teammates, which include: Beau Lebens, Jennifer Dodd, Allen Snook, Kevin Conboy, and Oguz Kocer.
This was my first team meetup, so I wasn’t sure to expect. But, after everything was said and done, I was impressed with how much closer I felt to my teammates.
??
?
?
?
?
