So here is a poem I wrote when I was 10, which would have made the year 1998. It’s about the rain forest apparently.

I can smell the flowers,
and taste and hear the rain .
I can touch the native bowers ,
but can’t see any lane .

I can see the parrots ,
and can hear their wicked call .
I can eat the native carrots ,
and then feel nothin’ at all
( maybe I should’ve smelled them first ).

Pretty great, I know. Should’ve been an English Lit major.

The post A Poem by 10-Year Old Me appeared first on John B. Hartley.

After Effects has an awesome built-in Audio Waveform effect that is easy to use.

To start, pull your audio file down into your composition timeline. From there, you can adjust your audio as needed, but in our case don’t worry about that for now. Go to Layer > New > Solid and make your solid the size of your composition. Don’t worry about what color it is because it won’t matter in a minute. Once the solid is created, type “audio waveform” into Effects & Presets and drag onto the solid.

First thing you should do is adjust “Audio Layer.” Switch from the current layer to whatever layer is your desired audio layer.

You’ll see the effect show up in your Effects pane and from here you should be able to adjust the effect settings. You’ll see Displayed Samples and this controls the amount of peaks and valleys you see. If it’s 12, there will be 12 breaking points in your waveform. 100, there will be 100 breakpoints and so on.

Maximum Height adjusts the height of the sample/waveform. Pretty self-explanatory.

Thickness adjusts the, you guessed it, thickness of the line.

Softness adjusts the softness of the waveform line. Lower values make it harder, higher values make it softer.

Random seed just makes you more unique than the average Joe After Effects.

Inside and outside color allow you to choose some different colors for your line and finally, you can choose from three display options: Digital (bars), Analog Lines (lines), and Analog Dots (dots!).

Setup those options and scrub through to see how the waveform looks with your audio.

That’s essentially all you have to do, but there’s another cool part that I go over in the above video.

Waveform on a Path

With the waveform layer selected, click on the pen tool at the top to add a mask. Create whatever kind of mask you want and then head back to your Effects Panel. There you can choose to set the waveform on a path. Choose the mask you just created and watch the magic unfold as the waveform adjusts to whatever path you’ve created.

One thing you may need to do is switch the mask from “Add” to “None” this will prevent the mask from cropping off the outside of the waveform if you’ve made a circle or square or other kind of polygon.

So that’s a quick overview of the audio waveform effect. If you have trouble reading, watch the video above for an easier time. Of course, if you’ve gotten this far then you can probably read.

Let me know if you have any questions or comments or tutorials you’d like to see created.

The post Using the Audio Waveform Effect – After Effects appeared first on John B. Hartley.

This month I’m working on a re-design for a site run on WordPress multisite. I’ve not really done much work with it before, but the goal is to have one main theme and a child theme based off of that for each individual user to then add styling as they see fit.

Things were going well with the main theme, which was based on Bones (my favorite theme starter). I created a child theme, followed the Codex instructions to a T, but could not get my JavaScript or CSS to load. style.css for the child theme was feeding WordPress the correct info, Theme Title, Author, etc, but it was trying to grab theme-child/library/css/style.css, which didn’t exist.

At first I didn’t realize the issue, so I added in a template path to create a style.css file in library/css but then the scripts weren’t loading. So I took a look into functions.php. A majority of the functions in Bones are handeled in bones.php, so I ended up having to look there.

That’s when it was clear what the issue was. bones.php was using get_stylesheet_directory_uri() to find the root of the template. This is fine for a standard theme, but when planning to build child themes, you’ll need to adjust.

get_stylesheet_directory_uri()

Codex: Retrieve stylesheet directory URI for the current theme/child theme. Checks for SSL. Note: Does not contain a trailing slash.

The Codex goes on to say that “In the event a child theme is being used, this function will return the child’s theme directory URI. Use get_template_directory_uri() to avoid being overridden by a child theme.” So it will pull in the standard template files like usual, index.php etc. but for specific areas where you are getting a directory_uri, template (parent theme) uri is needed.

Well sometimes I don’t read so good and I was baffled by why everything was going to the child theme folder. After digging into bones.php the switch was pretty easy. There were only a few instances were get_stylesheet_directory_uri() showed up, so I changed those and everything snapped into place.

But what does get_template_directory_uri() do?

get_template_directory_uri()

Codex: Retrieve template directory URI for the current theme. Checks for SSL. Note: Does not return a trailing slash following the directory address.

This gives you the parent theme folder and fixes your issues if a child theme is being used. All is fixed and everyone is happy.

One thing to remember is that you’ll need to use “echo get_template_directory_uri();” to actually get the output of the URL.

Have questions or want to discuss? Holler at me in the comments.

The post get_stylesheet_directory_uri and Child Themes appeared first on John B. Hartley.

This past weekend I was cut out of a startup business I had joined at Startup Weekend Columbus. Before I go further, let me say I hold no grudges and what follows is an account of what I learned in my two months. If I come across as whiny, that is not my intention. I’m grateful for the time I spent with this startup and am proud of the work I accomplished with my team members. That being said, here are some things to keep in mind when joining a startup.

Communication Is King

Startups move quickly and it’s a “get on board or get out of the way” situation when you’re getting ready to launch. It’s a great environment and I love it, because everyone is under pressure to get to the finish line. But what happens when someone stops responding? To phone calls, to emails, to everything. The machine slows down, can grind to a halt and everyone has to look around and ask “what now?” Keeping some stream of communication open is very important, whether it’s a Gmail thread, IM, Google Hangout or GitHub Repo. Keep reminding people you’re there, or they’ll forget about you and what you bring to the table.

Set Roles and Expectations Early

What aspects of the startup are you going to be working on? Knowing a clear role is important so you can be working toward a particular goal. Knowing what’s expected of you is one of the easiest and hardest things with a startup and dipping your hand into a little bit of everything (even outside of your main role) is never a bad thing. More on that later.

Think Long term, even at the beginning

Where do you see the company in 5 days, weeks, months. Are you still a part of everything? Is your role still the same or has it shifted? Keeping an eye on the horizon can keep you in touch with how to make yourself a more important part of the company. Be pro-active and see what else you can do to help your team make progress. Building a website at the beginning may be crucial, but down the road, it’s may not be as important. That was my particular situation and it makes sense.

Don’t Get Too Attached

There’s a term in business called a “pivot,” which generally means you stop going a certain direction and start going another. It doesn’t have to be a complete 180 degree turn, it could just be 2 degrees, but the bottom line is, things can change. Whether it’s because of market research or trial and error, you’re probably never going to finish with the same idea you started with. Getting attached and moping when your startup takes a new turn is toxic, so make your points and if you get vetoed, let go and move on.

Make Yourself Irreplaceable

There are no allegiances. If you’ve latched on to someone else’s idea, you are the replaceable one. You may have your own grand visions, but it ultimately comes down to the person who had the original idea. They’ll generally be the most passionate and are hopefully the driving force. If you’ve got your hand in all aspects of the company, you’ll be harder to replace. Jack-of-all-trades, master of none is a good thing in startups, because at the beginning your numbers are so few. It’s much easier to stay on board as a Swiss Army Knife than as a spork (the most underrated piece of silverware).

Get Something In Writing

In the beginning everyone still has that twinkle in their eye and is all excited. “Equal division of profits!” can quickly turn into, “I’ve done the most work” which could lead to larger arguments about distribution of income. Easy way to solve that is by getting something in writing at the beginning. And in the end it may still come down to trimming the fat and cutting costs. Having 6 employees is a bigger division of profits than 3 and while I hope that this was not the case, it makes sense and I probably would have looked to do the same.

Hopefully this article was helpful in some way. I learned a lot in the few months before heading out and hopefully that’s translated well here. Yarr, startups be a cruel mistress, but help make the web community unique. If you’ve got any startup comments or horror stories, feel free to share them below.

The post Getting Kicked Out of Your First Startup appeared first on John B. Hartley.

10. Metric – Synthetica Deluxe

Sometimes a project will come along where I devote late nights to it in order to get it completed. In many cases, an album becomes attached to a project, and it sits on repeat. This was that album for me from December to mid-January. “Lost Kitten” is probably one of my favorite tracks.

9. Kanye West Presents GOOD Music – Cruel Summer

Can’t help it. I love me some Kanye. Spent a good week listening to this and after coming back to it, still enjoy “To The World” with R. Kelly, Kanye and Teyana Taylor and “Creepers” with Kid Cudi.

8. Eyelid Movies – Phantogram

This is on the list because the lead singer, Sarah Barthel is a hottie, and because the music is very chill (watch the music video for “When I’m Small” for proof of both). If they ever come to Columbus, best believe I’m going to that concert.

7. Adult Swim Bumps – Various Artists

Adult Swim started doing bumps where they showed the artists playing the music that was running during the bumps. I thought it was pretty cool and found some playlists on Spotify that actually have a large number of these songs. Minimal vocals, always a plus to me, and a good deal of variety.

6. Minecraft – Volume Alpha – C418

Everyone loves Minecraft. It’s like virtual Legos, except the legos are all 2×2 squares. The first volume of music has a few duds, but overall, tracks like “Subwoofer Lullaby” made this album stand out to me. Same with “Cat” and “Dog.”

5. Heartthrob – Tegan and Sara

I got into Tegan and Sara with “The Con” and their latest venture is a bit more poppy than usual, but overall just as creepy as past albums. There’s always a hint of “I’m a stalker” in their albums and I’m all for themes, so middle of my list seems fitting.

4. Music From Braid – Sieber, Kammen, Fulton and Schatz

Last year I finally managed my way through the indie game “Braid.” So I cheated a bit on the way, but whatever. The music from this game is quite different from many in the sense that it has a lot to do with time (one of the essential aspects of the game). The tempos all have specific meaning and listening to the soundtrack puts me in a great state of mind.

3. Black Sands – Bonobo

One of the first mainly instrumental albums I listened to was “Animal Magic” from Bonobo back in 2009. It was awesome to have some new focus music, but I lost touch with Bonobo over the years. Thankfully in 2012, Black Sands brought me back in with the Remixed edition. With some sounds inspired by the far east, the tracks lilt their way through the album and the non-remixed is just as good. Quite the “intellectual chillout music” it was designed to be.

2. Indie Game: The Movie – Jim Guthrie

If you’ve not watched Indie Game: The Movie, I recommend doing so. Overall it was incredibly inspiring and the soundtrack was awesome. Speaking of Indie games, the winner of this year’s Maximum Efficiency award is…

1. Fez – Disasterpeace

This is the soundtrack for one of the most frustrating/awesome indie games I’ve ever played. 3+ years of development, a whole language, crazy secret codes to unlock things and a sick soundtrack. Sometimes friendly and sometimes daunting, the soundtrack is great for a relaxing or intense day in teh codez.

Just missed: Wolf’s Law – Joy Formidable, SimCity – EA Games Soundtrack

What are your top “music to code to” tracks?

Featured Image taken from : here

The post Top 10 Albums For Maximum Coding Efficiency Part Deux appeared first on John B. Hartley.

To go from verbose, commented sloppiness to nicely compressed/minified CSS, Compass has an incredibly easy command line command. Careful though, there are some things you may not think to do that will block your path to neat and tidy stylesheets. Note: when I say verbose and sloppy, I am referring to your main development settings, which I have set to uncompressed styling with line comments, which can become thousands of lines of CSS.

Getting There

In your project you should have a config.rb somewhere. In it, you most likely have something called ‘output_style’ which can be set to :compressed or :expanded. Those settings adjust the compiled CSS differently. Update: greg5green noted in the comments that you can also use :compact or :nested.

I like to develop with my CSS expanded, making use of a Web Inspector to debug. Expanded with comments shows where in your mixin files the line of styling is coming from. Once I’ve completed the project though, I want it to be compressed.

The first time I compressed my SCSS I ran into issues. I switched the file ‘config.rb’ to say :compressed instead of :expanded, but nothing happened. After checking out the Compass GitHub page, I was surprised with how simple it was and how dumb I was being.

Adjust config.rb

Change your config.rb file to resemble the below lines.

# from 
output_style = :expanded
# to
output_style = :compressed

# I also had line commenting turned on, so I included
line_comments = false

In changing those aspects of your config file you are saying, “HEY, let’s tidy this up. Compact this piece.”

Restart Apache

This sounds dumb and simple, but it took me the most time to figure out. When in doubt, put it out…or something. Restart Apache and continue on.
Note: I thought this was necessary originally, but later on realized all you need to do is compile (see next step) and everything will be fine.

Shake Your Sass

From the command line, cd (change directory) up to your /scss directory. This is the same directory that you are using compass watch to monitor your scss files changing.

Once there, simply input

compass compile

and you should see something similar to the following output.

What Happened

When you commanded ‘compass compile’ the current style.css file is deleted and replaced with a newly created style.css file, based on your most recent config.rb and style.scss file.

Simple enough and now you have one reallllly long line of CSS, reducing your file size by a good deal (hopefully).

If you have any questions or comments leave them below. I hope to add more about becoming a Sasshole in the future, so feel free to tell me what I should be checking out.

Compass Command Line Documentation: http://compass-style.org/help/tutorials/command-line/

The post Compass Won’t Compress Sass to CSS appeared first on John B. Hartley.

The Code

<?php wp_nav_menu(array(
   'menu' => 'Main Menu', 
   'items_wrap'=>'%3$s', 
   'container' => false
)); ?>

So it all starts with the wp_nav_menu function, which I generally use to display my menus.

The $args

There is a whole list of arguments that you can use for the function and as you can see I’ve only used three. The menu argument dictates which menu is going to show up. I have a menu saved as Main Menu, so if I have that in my arguments, that particular menu will show up.

Next is ‘items_wrap’ which I still don’t fully understand. If someone else knows better than me, seriously, let me know in the comments and I will thank you profusely. The way I understand it is that %3$s just tells WordPress, “hey, this is where the list of items are going to be. Feel free to wrap ‘em.” In this case we are refusing to wrap them with anything, thus, no <ul> are being used.

To explain what the Codex says, let’s take a look at the individual parts of ‘items_wrap’.

“Evaluated as the format string argument of a sprintf() expression. The format string incorporates the other parameters by numbered token. %1$s is expanded to the value of the ‘menu_id’ parameter, %2$s is expanded to the value of the ‘menu_class’ parameter, and %3$s is expanded to the value of the list items. If a numbered token is omitted from the format string, the related parameter is omitted from the menu markup.
Default: <ul id=”%1$s” class=”%2$s”>%3$s</ul>”

Breaking it down further:

• %1$s – is equal to the menu_id param, which defaults to ‘menu-{menu slug}’
• %2$s – is the same as menu_class param, with a default of ‘menu’
• %3$s – the output of the list items, so the <li> and the <a>’s inside

Seems to make sense when we break it down.

Moving forward to ‘container’, the default is div and setting it to false prevents any extra container from showing. I get the same result by just using ‘container’ => ”, but the Codex says to set it to false, and who am I to argue.

That’s it. We’ve broken down the full array and now understand a little more about how to remove div and ul from wp_nav_menu. Like I said, if you have more insight, please feel free to share. Otherwise, check out some more WordPress functions: Custom Taxonomy Category Dropdowns or Custom Excerpt Lengths.

The post Remove div and ul from wp_nav_menu appeared first on John B. Hartley.

Adobe Edge Reflow came out last week (at least to my knowledge the preview just came out last week) and I hopped on over to the Creative Cloud as soon as I heard on Twitter. I’d been talking about the program and waiting for it since I first found out it was in production around November 2012. From what I can tell, Reflow is attempting to revolutionize the web design field.

A mix of Photoshop an any wireframe program you’ve ever used, Adobe Edge Reflow gets a boost of steroids and becomes responsive. If you’re more of the reading type, instead of a video watching person, I’ve included my initial impressions of the program below, along with some implications.

Enter Adobe Edge Reflow

The first thing I looked for in Reflow was how to make my layout responsive. The main button for doing this is in the top right corner, the plus(+) symbol with a tiny downward arrow next to it. By clicking the plus symbol, you can create new breakpoints. Holding down the plus symbol brings up an advanced panel, which lets you set exact pixel width and give your breakpoint a label.

From there you can switch between the two layout sizes fluidly by clicking on their descriptions. You can see the grid is flexible and changes along with the layout size.

In the top left, you can choose from Selection Tool, Add a Box, Add a Text Box, and Add an Image. To do that, simply click on the appropriate button and drag it into your layout. Before you do anything else, switch between your layouts. If you added it to the 640px layout, say all the way across the top of your page, it will be all the way across the top on the full desktop version. This is where it gets cool. If you want it to be half as wide on desktop, just adjust it with that tab open.

Switch between the two again and you can see that it is saving your changes for each separately. That’s the kicker for me. I didn’t get much farther in the program but will be diving further in this week to really get a good feel for it. Overall I’d say it is a game-changer. Laying out one design for different sizes, all without ever opening a different Photoshop file? I’m in.

The post Adobe Edge Reflow – First Look appeared first on John B. Hartley.

Role: Producer/Editor
When: Winter 2010
Tools Used: Final Cut Pro

What: A short PSA for a class project.

Shot on Canon 7d.

For more video examples, click here.

The post Public Service Announcement – Germs appeared first on John B. Hartley.

Step One – Choose Your Frame

This seems obvious, but choose a picture frame that you will like. You are going to end up staring at it for large lengths of time, so if you don’t like the frame you have, go get a new one. My parents were throwing a bunch away and I grabbed the cream of the crop. Not too big, not too small, but just right. Easy to hold and the thick edge allows it to stand on its own.

Three things to note about this particular frame.

1. It has a carboard backing that was taped on – this allows for easy access while covering up the staples.
2. The staples hold another piece of cardboard and a material similar to plexi-glass.
3. The glass element allows for quick and easy dry erase marker removal (Note: you should test it before moving forward).

Step Two – Select an appropriate responsive wireframe

Now that you have a frame frame, it’s time to get a wireframe to put in your frame. I chose the “Mobile Sketch Sheets” from SneakPeekIt, but you can choose whatever fits you best.

The lines in the sketch sheet are fairly light, so I took it into Photoshop and darkened it a bit. Afterward I printed it out and laid it down on the cardboard to line it up properly.

After that I just had to slap everything back together and test it out.

Step Three – Find dry erase marker…and make marks

If this seems like a logical step in the progression, that’s because it is. You’ve finished the hard stuff, now you just have to use it.

So that’s it. A simple, easy way to create a mobile responsive wireframe that you can doodle on easily

Some Afterthoughts

I didn’t do this but, you could actually print out several different types of wireframes and put them all behind the plexi-glass, making for quick switches between wireframes.

I would also suggest using the thin dry erase markers. The markers used in the picture were the standard fat Expo markers. Just a thought. Give it a try and let me know what improvements you made to make this a great tool.

No coding, no back-end, just simple doodling. Enjoy!

The post Turn an Old Picture Frame into Responsive Wireframe appeared first on John B. Hartley.