Easily Crowdsource Photos of your Wedding

When my mom remarried a couple of years ago, she did something that I thought was really cool.

At the wedding ceremony, visitors were given disposable cameras so that they could take an active role in the wedding by helping to take pictures.

I thought this was a great idea for a couple of reasons:

  1. It was a cheap
  2. It would provide a greater amount of photos.

But, as I recall, not many people ended up using the cameras.

What Went Wrong?

I think the main issue is that disposable cameras are a big pain in the ass. Disposable cameras have to be manually wound for each shot, the button has to be pushed to charge the flash, and the packaging is a pain to open.

While the disposable cameras were a great idea, in hindsight, it makes sense that it didn’t turn out as well as we had hoped.

The Solution

Compare the process of taking pictures with disposable cameras to taking a picture with my iPhone where once I am in the camera app I can just keep tapping to take more pictures.

What if there were was a way to get pictures that your friends and family took without having to track them all down?

Well, there is such a thing. IFTT has a tool/recipe that will allow you to automagically save any images that your friends take at your wedding into a Dropbox folder!

IFTT: Instagram to Dropbox

Check the recipe out here: https://ifttt.com/recipes/188138-save-your-wedding-s-instagram-hashtag-photos-to-dropbox

Photo Credit: TarviRa | cc

Disclaimer

I believe that crowdsourcing images for a wedding is a great idea, and can result in great candid shots.

That being said, I wouldn’t consider having a wedding without a professional photographer — And I would recommend that you hire a photographer as well.

Grand Meetup Flash Talk 2014

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:

Working with React joinClasses

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.

/** @jsx React.DOM */

var React = require( 'react' ),
	joinClasses = require( 'react/lib/joinClasses' );

module.exports = React.createClass( {

	render: function() {
		var selected = ( this.props.selected === this.props.className ? 'selected' : '' );

		return (
			<li className={ joinClasses( this.props.className, selected ) } >
				<a href={ this.props.href }> { this.props.label }</a>
			</li>
		);
	}
} );

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.

Dynamically Add Classes with React classSet

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:

<li className={ this.props.className }>
	<a
		href={ this.props.href }
		onClick={ this.setLayoutFocus }
		className={ this.props.selected === this.props.className ? 'selected ' + this.props.className : this.props.className } >
			<span className="menu-link-text">{ this.props.label }</span>
	</a>
</li>

Eww… check out that nasty looking ternary.

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.

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>;
}

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.

render: function() {
	var classes = React.addons.classSet({
		'selected': ( this.props.selected === this.props.className )
	});

	/*
	 * 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;

	return (
		<li className={ classes }>
			<a href={ this.props.href } onClick={ this.setLayoutFocus } >
		 		<span className="menu-link-text">{ this.props.label }</span>
			</a>
		</li>
	);
}

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.

How to Add Dismissible WordPress Admin Notices

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:

Dismissible WordPress Admin Notices

The Magic Behind Dismissible WordPress Admin Notices

<?php
/*
	Plugin Name: Dismissible WordPress Admin Notices
	Plugin URI: http://manofhustle.com
	Description: Adds the ability to dismiss WordPress admin notices.
	Author: ebinnion
	Version: 0.1
	Author URI: http://manofhustle.com
 */
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>
		<?php
	}

	public function admin_footer() {
		?>
		<script>
			(function( $ ) {
				var message = $( '.wrap > #message' );
				message.append( '<span class="dashicons dashicons-no"></span>' );
				message.find( '.dashicons-no' ).on( 'click', function() {
					message.slideUp();
				} );
			})( jQuery );
		</script>
		<?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.

Should I Apply to Automattic Now or Later?

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’t ever mind 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.