POSTS BY Taylor Udell

Getting Over Terminal-phobia

By on July 31st, 2012

Terminal is probably the scariest interface I have ever used. Its intense display looks heavy duty, only usable by super-geniuses and hard core programmers like Mark Zuckerberg. It also reminds me of the computer system from the old movie War Games.

War Games

In the movie the two kids almost cause this:

War Games

a scenario where the US thinks Russia is getting into position to start a nuclear war because the kids are playing around on this terminal like computer, hence my obvious and completely reasonable association of terminal with World War III.

However, when used correctly terminal can make life a lot easier. Thanks to Zack, who’s in charge of System Admin & Operations  here at Barrel, I have learned some pretty nifty short cuts and commands, so rather than feeling like I am about to blow-up the world, I just get to feel insanely smart.

First things first. Change the color (my preference is ocean, which I find helps soothe the WWIII atmosphere, but grass isn’t so bad either).

Next, actually entering info into terminal. The language of terminal sounds like absolute gibberish at first. Chmod, chown, mkdir, rm, sudo–they also sound like complete nonsense, until you realize everything is just an abbreviation and an elimination of as many vowels as possible (mkdir= make directory, chown=change owner, cd= change directory, etc.). This realization was the first step in discovering terminal isn’t so bad afterall.

The first thing I learned was how to chmod things (a.k.a change the permissions of files). The perfect starter command because its really hard to crash a system when using chmod. Chmod is especially helpful when you want to change the permission in all files in a folder.

First you navigate through the folders til you find the one you want to chmod. For me all my files start out in a folder called Sites so I simply enter in ~/Sites/the_name_of_the_grandparent_folder/the_name_of_the_parent_folder. A quick and easy shortcut is hitting tab, which completes the file name for you (e.g. if I typed in the_name and hit tab it would auto complete to the_name_of_the_parent_folder). If you hit tab and nothing happens, hit it twice and the possibilities of the auto complete will be displayed. Once you have found the folder you are looking for you type in the command chmod -R 755 the_name_of_the folder. The -R means it will recursively apply the permissions (e.g 755) to everything in the folder.

Another useful thing Zack taught me was how to set up a new website on our server. The most important commands from this are:

  • mkdir directory name (which makes a directory)
  • cd (which moves you in and out of the directory, / to go in further and .. to go out of the current folder)
  • tar -czvf filenameOfNewFile.tar.gz filename_you_want_to_tar (to make a zip file)
  • tar -xzvf filename.tar.gz –strip 1(which unzips it and removes the previous initial path)
  • find -name ._\* |xargs sudo rm -v  (which gets rid of the ._ in front of file names when the file unzips weirdly)**Here I would just like to point out comes another useful trick piping. The | takes everything found in the search (which in this case was all of the files with ._  in front) and “pipes” it into the command sudo rm -v (super user do remove)
  • mysql commands on making a database:(for this example the database name is sandwich_db with user peanut_butter and password jelly, and the hostname is yummy)
  1. mysql > create database sandwich_db; (which creates the database)
  2. mysql > create user ‘peanut_butter’@'yummy’ identified by ‘jelly’; (which creates a user);
  3. mysql > grant all on sandwich_db.* to ‘peanut_butter’@'yummy’ identified by ‘jelly’; (which grants the user access to the database you have just created)**DON’T forget the apostrophe around the username and password and hostname and the semi colons at the end of the commands!
  • If you want to transfer a database and put it in the new database
  1. dump the database into a sql file
  2. find and replace the old siteurl with the new one
  3. enter the command: mysql -u peanut_butter -p sandwich_db < sql_db_file_you_just_made.sql

These little nuggets helped to turn terminal from this

scary comp

to this

friendly comp

Why ProjectFlow is Great

By on July 11th, 2012

On Tuesday, Barrel received a welcomed shout out from Smashing Magazine in a tweet complementing their application, ProjectFlow.

ProjectFlow, true to its name, is a project management tool that helps track progress and tasks. The beauty of ProjectFlow is its simplicity which allows it to serve perfectly from a smaller number of tasks such as a to do list for a bride and groom:

to larger and more complex projects covering a wide timespan such as a real estate agent tracking the status of each of their houses.

In this example the agent places each house under its specified status from meeting potential clients to done deals. ProjectFlow can even serve as a calendar, keeping track of weekly appointments.

On top of its simplicity and adaptability, it is easy to use. Re-ordering elements is done simply by dragging and dropping. But more importantly, ProjectFlow serves as a clean way to view the big picture. It enables its users to visualize each of the steps they must take to complete a project without a visually overwhelming or cluttered display.

True to 37 Signal’s Book Getting Real, ProjectFlow deals with essentials. I know I’m hounding on the simplicity aspect of the app, but I feel that frequently we lose sight of how important this really is. Since the app as a clear purpose, you are able to make the main aspect as close to perfect as possible, rather than making an app with several different aspects that are only mediocre.

Check out ProjectFlow’s Blog and also watch this awesome tutorial Diane made on how to start your own ProjectFlow!

1 Comment

Qwiki App

By on July 9th, 2012

Qwiki is an app that allows you to make customized presentation using a variety of media sources such as videos, maps and photos uploaded from your computer. Originally I was attempting to make a map zoom-in from outer space to Barrel’s office, but it was very jumpy and not that great. I then switched to making a Qwiki of our internship kick-off party at Silver Lining. A Qwiki seems to be perfect for something like a slide show. It was a little frustrating to use, but the steps to make one seem simple enough:

Step 1.

You easily set up an account and watch a brief tutorial video.  Timing seems to be a little awkward, with a slight lag between the voice over and the image being displayed.


Step 2.

Click that plus sign and start creating. You add all of the content you want your video to contain using the side bar navigation, as well as specify which animation your Qwiki should use.

Step 3.

You Narrate. This is probably one of the more important steps. One of the most unfortunate things about Qwiki is that without a narration the Qwiki does not take time. Your narration must be as long as you want your slide show. This feature hover is useful if you wanted to embed a speech presentation in a website. The recording provides three options, video , text-transformation (your writing is read by a robot), or record your own video to narrate.


Step 4.

Set the Timing. This is by far the most difficult aspect of Qwiki. Its simple in that you just click the content at the time you want it to appear. Its difficult in that its hard to get the timing perfect. Luckily, you can redo it and preview it as often as you want.

The Juan Torres shows some exemplary models of what Qwiki can become when you play with it. However, I couldn’t understand how many of the coolest image transitions are done on Qwiki. I feel that some  images are manipulated and then uploaded to Qwiki, where the transitions are utilized to make cooler effects. Similarly videos provide cool effects and greatly enhance the quality of the video. However, while the video can be from youtube or vimeo, I couldn’t manage to get  these urls to play in the Qwiki, so I’m guessing that actual video content should be uploaded from your computer. All in all Qwiki seems to be a great tool for combining multimedia presentations. However, it appears to me that the individual slides should be made off of Qwiki to achieve the greatest effects. Furthermore WordPress currently strips the iframe of the Qwiki embed so when put into a WordPress post only the link appears.

Dianne and I made a Qwiki solely utilizing the tools that Qwiki Provided, and decided we should dedicate our Qwiki to Tiffany who will be leaving Barrel, and here is the final product:

Play the Qwiki: Goodbye Tiffany!

No Comments

Searching the Keg

By on June 25th, 2012

Building this blog is my first experience with WordPress . To give you background, I have experience with both PHP and other object oriented languages, which helped with understanding the code and the way it works. So, instead of using a template I built our theme “keg” from scratch. While using a template would probably have been much easier, through developing our blog I have gained a much better understanding of the way WordPress works and how useful its vast library of functions are.

Patrick sent me a really helpful link to Chris Spooner’s tutorial, which  is basically a manual that you can more or less copy and tweak to meet your own needs (for example we included a tag filtering subject in our blog). You simply place the WordPress function in a div that you can customize the styling of with CSS. What I didn’t realize until this was how many functions WordPress has and how well documented they are. The WordPress Codex is a life-saver. Pretty much if you want to do something, they have a function for it. You want to list the tags, use list_tags(), you want the template url, use template_url(), etc. Taking our site from the generic 2011 theme to this:

We also included some javascript, allowing the smooth scrolling back-to-the top and the our logo hover to extend down. Most recently, we added a search capabilities to our blog.

While Spooner’s tutorial is amazing, it did leave me with some confusion surrounding search.php, more or less because it is the only thing he did not specifically spell out word for word.  Like everything else WordPress has a function that builds a search form for you (get_search_form()). To customize it is practically as easy as calling it. In your theme folder simply create a php file called searchform.php and build the form with what ever traits you wish your search function to have. For example here’s our code:

Key things to remember are setting the method as “get” and the action as the homepage url. WordPress will automatically look for your search.php page to display the results on. After this get_search_form() calls the form you have created rather than the default form. Katie designed a simple yet classic speech bubble form like this:

for our blog so our php file only consists of a few lines of code.

Also key to our search form was that it remain hidden unless you click the search icon, a magnifying glass, so the top of our page transforms from this:


In order to do this jqModal offers a great plug-in. You simply insert into your html the div that contains the element you want to appear and give the div the class jqmWindow:

Then you upload the jqModal code for into your scripts folder and attach it in the header. In your main javascript file you then call $(‘the div you want to appear’).jqm(). You can customize your modal with CSS, giving it an overlay or customizing the form. You can also add triggers to open the modal or to close it by giving them class=”jqmClose” which we cave to both the search icon and the body so that if you click outside the search form it disappears.

It is also important to add CSS styling for the jqmWindow and the overlay (if you’re using it):

Finally, we move onto displaying the results. Both WordPress and Spooner cover this. More or less your search.php should be very similar to your index, calling header.php, footer.php, sidebar.php etc. The main difference is that you want to display the results. To do this you are going to want to use WP_Query. WordPress extensively describes how to first form the query:

This will search throughout your blog and the results will be stored in the variable $search. You can then customize the way the results are printed out varying what you echo in between the while loop:

while ( $search->have_posts() ) : $search->the_post();


We decided that our post should contain links to the titles as well as brief excerpts of the posts:

Then all that’s left is to style away!

No Comments
back to top