Bedrich Rios

Running VirtualBox From the Terminal

2011-05-14T00:00:00-04:00

At Gimme Bar we have a magical development setup, courtesy of Sean Coates, which involves running local instances of our web app on Virtual Machines using VirtualBox. All my work can then be reached by launching any browser on my machine and visiting local.gimmebar.com. And, while this is great, it means I have a VM window open which I do not ever interact with. So, in order to simplify my life I knew I needed to find a way to run VirtualBox from the Terminal, without the GUI. Long story short, here are my findings:

Start VM

$ VBoxManage startvm "[NAME OF YOUR VM]" --type headless

Send Shutdown Signal

$ VBoxManage controlvm "[NAME OF YOUR VM]" acpipowerbutton

Power Off

$ VBoxManage controlvm "[NAME OF YOUR VM]" poweroff

My Gimme Bar Story

2011-05-05T00:00:00-04:00

Sometime towards the end of last year I joined the guys of Fictive Kin as a freelancer and began working on Gimme Bar. The app had been in development for a bit and I was immediately intrigued by its potential. The fact that you could collect, organize, discover and share anything you found online with one single app was something I could definitely get on board with… and so, I did.

Brooklyn Beta

We wanted to demo the app during Brooklyn Beta, a conference our very own Fictive Cameron, together with Mr. Shiflett, had decided to put together. Apparently, building web apps wasn’t enough work for these guys. For weeks we worked tirelessly to get an alpha version of Gimme Bar up and running. It was rough but we had something to present. Fortunately for us, the reception from those who attended Brooklyn Beta was positive. We had an alpha version of Gimme Bar and more exciting, our first users.

Early Mistakes

Soon after we released the alpha version of Gimme Bar, our overall goal for the app seemed to lose some focus. Discovery and sharing had become the central points of interest for using Gimme Bar and we were unable to communicate to others, and ourselves, the huge potential of the two missing pieces of the puzzle: collecting and organizing.

Gimme Bar Reloaded

I was on the train on my way back to Baltimore—I had spent a few days in NYC, enjoying great food and having lengthy discussions with Cameron regarding the future of Gimme Bar—when a new design for the app popped into my head. I took out my sketch book and began jotting down my thoughts like a maniac. We had already agreed that discovery had to be removed for the foreseeable future. And, the design had to be more focused on collecting and organizing.

I spent the next few weeks on a solo mission, working on a separate GIT branch. Eventually, Mr. Coates and Sir Evan Haas—the true heroes behind Gimme Bar— joined in. They helped merge my static markup and styles back in to our app. Finally, we were working on the app we had envisioned, something that could only get better, more awesome.

More Awesome

After we announced the redesign, some of our users missed the discovery aspect of Gimme Bar; needless to say, we did too. But like I said, we knew the app could only get better and more awesome. Spoiler alert: We have been working on bringing discovery back in to Gimme Bar. we are on the cusp of releasing some cool new features. Stay in the loop, follow @gimmebar on Twitter and if you haven’t already, sign up for an invite.

Bookmarker: Plugin for Coda Bookmarks

2010-10-11T00:00:00-04:00

Ever wish you could leave a bookmark on your code? And no, I’m not just talking about adding comments like “TODO” or “REMOVE” but actual bookmarks. Well, it turns out that our favorite text editor, Coda of course, provides a syntax for adding bookmarks to your code. While this is a very nice feature, there is no easy way to add a bookmark to your code other than remembering the syntax and typing it manually. That’s where I come in, I have written a little plugin that will let you add bookmarks at the press of a button! Well, three keys, but who is counting.

How it works

Download and install the plugin.
Open any supported file type.
Select that the text you wish to bookmark—or, none at all, the plugin will simply insert an empty bookmark—and hit command + shift + k.
Done! A bookmark should no be visible on the Code Navigator panel.

Don’t blame me!

The obligatory feel free to use but don’t yell at me if something goes horribly wrong, although it shouldn’t. If Coda supports bookmarking syntax for your file type but Bookmarker is not doing the trick, leave a comment below with the file extension and I will be sure to add it to plugin.

YUIcompress: A Plugin for Panic's Coda

2010-04-30T00:00:00-04:00

I've spent the last few weeks compressing a lot of CSS and JavaScript files, don't ask me why, I just have. And, at some point the work became too tedious. I googled for a Coda plugin that would make my life a whole lot easier by automatically compressing (using the YUI Compressor) and saving my files. But, to my surprise I found nothing of the sort. So, I figured I would give plugin creation a go, and YUIcompress was born.

Updated to version 0.3 on February 7, 2011.
Fixes a CSS media query issue in previous versions of YUI Compressor. Thanks for the tip Sparanoid.

How it works

Download and install the plugin.
Open the file you wish to compress (css or js).
Select YUIcompress from the Plug-ins menu or press command + shift + Y.
Voilá! You should now have a compressed file with the name {filename}.min.{js|css} in the same directory where the uncompressed file is located.

Don't blame me!

Feel free to download, share, and use YUIcompress, just don't blame me if something goes horribly, horribly wrong. Depending on the file size, you may get the infamous beach ball for a few seconds, but nothing should break. I have used the plugin for a couple of weeks now, and nothing has happened to me or my computer, not yet at least.

Listing Published Pages In Habari

2010-03-11T00:00:00-05:00

For the past few months, I’ve been using Habari to power my site, and so far the experience has been a good one. But, sometimes the documentation in the wiki lacks code examples and is therefore difficult to parse. Thankfully, the Habari community provides its users with several support channels to reach out and find answers to their questions. And, that’s exactly how I found the answer to solve my latest theme-related predicament: listing published pages.

Soon after joining the #habari IRC channel and posting my question, a user by the nickname of mikelietz pointed me to k2, one of the themes bundled with Habari, which made use of a $pages variable in its header.php file. Thanks to mikelietz’s help, I was able to track the $pages variable to k2’s theme.php file, and realized the “magic” taking place. By making use of the add_template_vars function, k2 was defining $pages and extending the behavior of the Theme class. So, without further ado, the code:

public function add_template_vars() {
	if(!$this->template_engine->assigned('pages')) {
		$this->assign('pages', Posts::get(array(
			'content_type' => 'page', 
			'status' => Post::status('published'), 
			'nolimit' => 1))
		);
	}
}

» Code taken from *k2’s* theme.php.

Once you have added the function above to your theme.php file, the $pages variable should become available to your theme. In order to create a very simple navigation listing your homepage and all published pages, you can do the following:

<ul>
    <li>
        <a href="<?php Site::out_url('habari'); ?>">
        Home</a>
    </li>
    <?php 
    foreach($pages as $page):
    ?>
    <li>
        <a href="<?php echo $page->slug; ?>">
        <?php echo $page->title; ?></a>
    </li>
    <?php 
    endforeach;
    ?>
</ul>

If you know of a better, or more proper, way of extending the Theme class, please leave a comment. Hope this helps someone.

My Subversion Workflow

2010-01-26T00:00:00-05:00

Some time ago, I read an article by web developer Yongfook titled 10 Dirty Little Web Development Tricks. A quick Google search will return several results linking to this article but unfortunately – and, as far as I can tell – the page no longer exists. In any case, there was one “dirty little trick” that caught my attention more than all others, and that was to use Subversion instead of uploading files via (S)FTP for managing production releases. Now, I don’t quite remember Yongfook’s process, so I won’t attempt to reconstruct it; however, I can share my own setup, which is still fresh in my memory.

Working Locally

The first thing I do is create a SVN repository using the SVN Book’s recommended repository layout.

branches/
tags/
trunk/

After creating my repository, I svn import any work that I may already have completed into the trunk. I should note that I do not version control the system that powers my site (currently Habari) but rather the directory containing all design related documents (i.e. themes).

$ svn import [themes] [repository/trunk] -m "Initial import."

I like to work locally for several reasons, the most important one being the ability to work from anywhere without the need for a network connection. So, I setup my site using MAMP and proceed to svn checkout a copy of my repository.

$ svn co [repository/trunk] [local path]

From this point on, I work on my local server, committing changes in to the repository as often as I have to.

Stage, Tag, and Release

Once I’m ready for the world to see what I have been working on, I setup a staging instance of the site on my production server. I svn checkout a copy of the repository and keep any Subversion data files from prying eyes by writing a redirect rule on my .htaccess file. Note that a svn checkout is only needed once; after the initial checkout, a svn update is all that’s needed.

$ svn co [repository/trunk] [staging path]

RewriteRule \.svn / [F,L]

If everything on the staging instance looks right, I svn tag the trunk in order to make releases systematic. And, proceed to svn export the tagged released onto production.

$ svn copy [trunk] [tags/release #] -m "Tagging release."
$ svn export [tags/release #] [production]

Why svn export? Because it removes any SVN data files, which are no longer needed on production.

Benefits, Notes, and Thank Yous

As I noted earlier, working locally means working from anywhere, regardless of an internet connection. Furthermore, setting up an staging instance of your site can help you detect problems most likely to occur on production. And, finally tagging your releases will most definitely make the process of keeping track of and reverting changes, if necessary, effortless.

During the process of writing this article, I stumbled upon a great article that touches on many of the same issues that I have covered. It is definitely worth the read, especially if you are not very familiar with Subversion.

Finally, I have to give a shout out to Greg Chiasson who wrote the redirect rule for me in less than 5 seconds, as well as, Paul Jones and Christian Dailey who unknowingly contributed to my setup and consequently this post.

Back In Black ... & Red

2010-01-04T00:00:00-05:00

It has taken me quite a while but the site is now back online. It is by no means a finished product; however, it is definitely a big step towards getting back to the habit of writing front-end inspired posts.

Why Did It Take So Long?

Well, last year was a pretty significant year for me. I graduated from college in June and almost immediately after moved to Brooklyn to join the ranks of OmniTI as a Web Designer. Needless to say, with the hassle of moving and the new job, my online presence suffered quite a bit; granted, my own lazy nature did not help the cause much.

The following paragraph was added Jan 6, 2009.

The 8-bit Logo

Ever heard of a Famicom? No? Well, I use to own one. I must have been 8 or 9 when I started playing video games and ever since, I have spent countless hours with a controller in my hand. Only two other things attract my interest to the point of sleep deprivation: programming and design. The latter, which has been increasingly influenced by the Swiss Style of design. So, when it was time to design a logo for myself, I thought: what would a Space Invaders poster look like if it was designed circa 1920? And so, the logo was born. Well, it wasn’t that simple, but I will leave the details for a future entry.

No More Redesigns

If there is one thing that has become clear since the 3rd iteration of my site, it’s the need for a long term vision and continuous work on its design. I think too often we stop working on a site upon what we deem as completed. This behavior leads to redesign after redesign after redesign after … you get the idea. But this so called “redesign” focuses solely on the site’s aesthetics and omits the reason people visit our sites, its content.

I recently rediscovered an article by Cameron Moll fittingly titled “Good Designers Redesign, Great Designers Realign,” which I read back in 2005. I remember thinking the article was insightful and promised myself I wouldn’t become the redesign guy. Sadly, I did.

The Broken Link

The path to realignment is definitely a long and arduous one so please don’t panic if something is broken : ) I will be working on cross-browser testing and performance over the next few days. Expect to see a follow-up post with technical details in the near future. For the time being, it feels good to be back.

A Few Tips for Coda Users

2009-03-13T00:00:00-04:00

If you haven’t tried Panic’s Coda, you should! It’s a beautifully designed piece of software that makes coding sites even more fun* than it already is. But, enough with the unrequested publicity. This post is about a few “tricks” that I have picked up from my everyday use of Coda. And, that you may not be aware exist.

Clip Expander Trigger

At the bottom of every clip’s info there is a section that if empty, reads “Click to add tab trigger.” Otherwise, it displays a keyword followed by the word tab. Whenever you wish to use any given clip, simply type the unique keyword and press tab. This will result in the expansion of the clip’s content. To change the keyword, click on the text and replace it with anything that floats your boat.

Switch Between Tabs

If you have ever used your keyboard to switch between tabs on Firefox, you know that command + [tab number] does the trick. However, in Coda this shortcut switches between the different views (i.e. Sites, Edit, etc.). To switch between tabs use command + shift + { or }. This keyboard shortcut works on Safari as well.

For Fun: Slow-Motion Sites

As the title obviously suggests, this trick is just for fun. Under the Sites view, precede the opening of any of your site setups with the pressing and holding of the shift key. Now, watch as your sites slowly turn into view. This trick, more or less, works when opening any file on Mac OSX.

Have some to share?

Use the form below to add your own favorite Coda tips.

* Not taking into consideration the horrors!!! IE6 brings to our lives.

Equal Height Columns Using Mootools

2009-01-27T00:00:00-05:00

If you are a devout follower of my humble site, you will recall that back in early 2008 I posted an article in which I demonstrated how to achieve the equal column height’s effect using jQuery. Well, a year has passed and I have decided to revise the script but using MooTools this time around.

After looking at the original code, I decided that many of the options provided were unnecessary. So, I decided to start from scratch and I’m happy quite happy with the result. In this iteration, all you need to do is add a class name (equalize) to the columns you wish to equalize and you are done. Furthermore, I was able to reduce the code to 10 lines, eight if you remove the spacing lines.

If you are a copy and paste kind of person, just use the code below. Otherwise, download the JS files from the sidebar.

window.addEvent('domready', function()
{
	var columns = $$('.equalize');
	var max_height = 0;

	columns.each(function(item)
	{ max_height = Math.max(max_height, item.getSize().y); });

	columns.setStyle('height', max_height);
});

Leave a comment if you find something wrong with the code, I will do my best to fix it. Also, if you make use of the script, a link back is always appreciated :) Enjoy!

The Rebirth of bedrichrios.com

2009-01-13T00:00:00-05:00

After many months in the making, long after-work hours, and countless cups of coffee; the new face of bedrichrios.com is finally finished. This iteration (version 3.0, if you are keeping track) brings with it, numerous changes. Firstly, it no longer makes use of the WordPress platform as its backbone system, but rather a much more lightweight CMS called Frog CMS. Secondly, the Blog portion from the previous iteration has been replaced by a new section titled Articles. Lastly, the focus and therefore structure of the site has changed in order to provide myself with more creative freedom over the layout and content.

Why Frog CMS Over WordPress

In a few words, I realized that my site was not solely a blog. Although, WordPress can be extensively customized and ultimately made to function similarly to any other CMS, it remains a blogging platform. In other words, I did not make the switch to Frog because I need something more (or less) powerful, but because I needed something different.

Blog, No More

Truth be told, I don’t enjoy writing as much as I enjoy coding and designing. And by having a blog, I felt the necessity to write a medium to long blog-tutorial-format every single time I wanted to share some code, design thought, or something random I found in the internet. By switching from a Blog to an Article structure, I will try to write more frequently, so everyone wins :)

Freedom!!!

The main thing that attracted me to Frog CMS was its bare bones nature. Frog is a “simple and elegant CMS” but it also has the potential to be a great building block for a more personalized CMS; something that WordPress, in my opinion, does not.

So, What's Next

The first thing on my list is to fix any problems that may arise from moving the old WordPress blog over to v2.bedrichrios.com. Once that is done, I will move over to this side of the web and tweak any problems that the redesign might have brought with it. Finally, I will be looking in to adding some features and changing things around here. Please let me know if you find anything broken around here, I kind of rushed to the release of this new version of my site :)