andre bluehs » Webby

Backups or The Dreaded `rm -rf /*`

Andre — Thu, 29 Jul 2010 19:47:36 +0000

At my startup, we have a moderately sane deployment environment. Check-ins are automatically pushed to a staging server (And i’m notified via notifo with this script). When we want to push code to our live server, we manually move things.

For a while that meant we had to run a

svn export

command by hand once a day or so. (we are under heavy development still)

Eventually we needed a couple more things done when we moved code to the live server (among them run google’s closure compiler to reduce our js footprint). So I wrote a script to handle these things. Apparently while testing, I got distracted and never finished it, because when i ran it, the code was this:

# ... snipped ...
#
# code to assure you're running as root
#

if [ -z $2 ]
    then
        loc= '/path/to/code'
    else
        $loc = $2
fi

# nuke old files
rm -rf $loc/*

# ... snipped ...

Now, to the astute, you will notice there is a bug here. Can you find it? It’s in the assignment of

$loc = $2

It SHOULD be similar to the loc assignment above it.

loc=$2

Well. This throws an error, but happily keeps moving on down the script. Next question: what happens here when $loc is an empty string ”? That’s right. I just ran rm -rf /*as sudo on our main server.

I realized quickly what had happened. Errors whizz by about permissions, and finally I Ctrl+c’d it out of existence. Everything still in memory was intact. Our application was still running, I was still ssh’d in. So I took stock of my life, and tried to calm down. I had no idea what to do at this point; thoughts ranged from spending the next 12 hours slowly rebuilding everything (I had the latest copy of our code and db on my local computer, so our code was safe) to never returning my CEO’s emails again and abandoning our company. I initially did some fruitless googling for ‘restore rm -rf *’ even though I knew – short of serious hard drive-level manipulation – I was NOT getting anything back.

Then I remembered that we are using Jungle Disk to do daily and weekly backup. I figured out that Media Temple (our awesome host) allows us to reinstall our OS if something like… this happens. So first I checked that we had a recent backup. We did. So i went into our dasboard, and clicked on the button to ‘Revert to Default’ (MT’s oh-shit button). And waited. After that was done, the first thing I reinstalled was Jungle Disk and set it up to recognize itself. Then I simply ran Jungle Disk’s restore program, and voilà! I installed a few more programs that we needed, and we were 100% back up and running in about 3 hours.

We back up our /etc, /var, and /home folders daily and our entire file system weekly, so not too much data was lost. As it turns out, this doesn’t include our Postfix maildir, so we lost about a week’s worth of email (personally, I use gmail and it downloads all the email, so I didn’t lose anything). We have since fixed this to save email daily.

This story is another among many to remind you to back your shit up. Fortunately we ended up ok; thanks in no small part to Jungle Disk.

If you have any questions about our staging=>live process (which is now Idiot Proof©), or our backup strategy, drop me a line at hello at andrebluehs dot net.

Subversion and Notifo and Post-Commit

Andre — Sat, 19 Jun 2010 21:52:39 +0000

A service called Notifo just launched recently. They facilitate ridiculously simple push notifications. So I wanted to be notified when any of my developers checked in code, and what the message they sent was. This is useful for me because we all work remotely, and I can’t just walk over to their office to check in on them. So I wrote a couple-line post-commit hook to tell me these things. Then i figured other people would want it, so i made it prettier and put it up on github.

Pick up the script at github Notifo Post Commit Hook

You’ll need to change the NAME and APISECRET variables, and then it will work straight out of the box. You can test it without having to actually check anything in by doing cd’ing into your repo’s ‘hooks’ folder, and then run the command ‘./post-commit /path/to/your/repo ’

Some highlights from the code:

Notifo requires that the data you send it be url-encoded (makes sense), but there is no command line utility for that, specifically. So I had to use a tiny little perl script I found on this stack overflow question that had the same url encoding from a bash script problem. I also put in handling an empty message (yes, some people suck).

Don’t forget to make sure you have curl installed. php5-curl (or equivalent apache plugin) will not do, you need to actually have the command-line tool for this to work. The other programs used i’m pretty sure come standard. Svnlook comes with a standard subversion command-line installation (which I assume you have if you’ve got a repo on there…).

Something i’d like to improve is to get the author and message in one call. However, i can’t figure out how to separate them with awk, or any other command line utility.

Notes on Notifo

I am super happy with this service. I’ve wanted to add push notifications to several of my projects for a while, but the barrier to entry with sending notifications is pretty steep. The only other comparable option is Prowl, but it’s api page is sparse, with no examples, and it’s only for iPhone (And costs $2.99). Also, they do not allow the flexibility of Notifo. With Notifo, you can send yourself a notification, you do not have to have a registered application or service. This is what allows my script to work, as well as the Chrome to Notifo link sharing extension written by Notifo co-founder Paul Stamatiou.

Email me at hello at andrebluehs dot net with any questions.

Coffin Nails and Native Mobile Apps

Andre — Fri, 04 Jun 2010 19:17:30 +0000

One of my startups, Usable Health, is making an iPad-specific version of our web app to be installed in restaraunts. (Side note: watch our CEO talk at Ignite Atl) Since we were going to set-and-forget these applications, we needed a way to prevent people from going to other sites (as this is a web app just running in safari). Then I came across this article by Alex Kessinger. And we realized:

We wanted a native iPad app. So we made a web app.

Alex’s article gets in to a bit too much detail for us. We really only need one line:

This one line of code transformed our web app (built for ipad size and features) into a native-looking app with no Safari toolbars on the top or bottom. Add it to the home screen, and you are off and running.

There are other features of that post that we could use, such as setting a home screen icon, but we don’t care about this, because our app should never be closed anyway while at an installation.

Here are screens of before:

after:

The total time from start to finish to get this working? 26 minutes. This includes me sharing the link, and our developer reading the article.

This is why i believe that for most applications, native apps are becoming obsolete. There are HUGE incentives for more adoption of this method:

no need for apple developer licence (cheap for small companies)
don’t have to deal with the app store

There are, however, cons:

hardware acceleration is spotty. games are mostly out.
hard to charge to download app. however, can charge for access.

For the people who say that “Well, it doesn’t work on other browsers”. That’s only half true. While this method of removing top and bottom bars only works on iPhone/iPad, the app still functions 100% normally in other mobile browser. Building a mobile app gets you 90% of the way, and adding that ONE LINE gets you the rest of the way for apple browsers.

Here is where you can try it on your ipad (or iphone/ipod touch): http://ablu.us/files/uh_ipad

Gmail and Tips and Tricks

Andre — Wed, 05 May 2010 19:44:00 +0000

Did you know that you can modify your gmail address with and it will still reach you? Gmail ignores dots ‘.’ and everything after a plus ‘+’ sign.

This comes in extremely handy. Need to create several test accounts on your new web app? No problem! Just move around a dot in your address! Need to give an email address, but don’t want to ever receive email from them? Tack a ‘+spam’ on the end of your address and filter it to automatically be marked read and go to the trash.

Let’s take a look at how to do this.

The Dot

Gmail handily ignores all dots in the name part of your email address. andre.bluehs@gmail.com is exactly the same as andrebluehs@gmail.com is exactly the same as a.n.d.r.e.b.l.u.e.h.s@gmail.com. This is useful for signing up for accounts that require a unique email address, but you already have an account for (for testing, purposes, of course). All emails will go to your account, regardless of where and how many dots are in the name.

This also works for signing in to google. you can use your username without the @gmail part when logging into gmail. (This is not true for third party apps using your gmail identity for log in, such as stackoverflow, you need to provide your full email address)

The Plus

This hack is extremely useful for ‘tagging’ email from certain places. If a site requires that you give an email address, simply put a +spam at the end of your username, and filter it. Note: you can put whatever you want after the +, i just use ‘spam’ here as an example. Gmail does not automatically filter things with ‘+spam’ on the end, you must do this manually with the next step.

To create the appropriate filter, click on ‘create new filter’ next to the search button:

Then put in the To: field, whatever your email address is, with a ‘+spam’ for the username.

and finally, check ‘mark as read’ and ‘delete it’ in the last step.

and you’re done! never to be pestered by ‘affiliate email’ again.

This can be repeated for any kinds of filters you want, as well as using the dot hack with this filtering hack to accomplish the same thing.

Techtopics: Week 1

Andre — Mon, 05 Apr 2010 22:03:14 +0000

My gtacm techtopics started last week. It’s all about javascript, jQuery, and AJAX. This week consisted of the introduction to the browser: DOM, DOM Inspectors, javascript: syntax, variables, jquery: syntax, selectors, basic animations.

You can download this week’s zip over at the techtopic page. It includes the html and javascript from our in class demonstration as well as another example, and the powerpoint i meant to show.

Here is some auxiliary stuff that I did not get to talk about in class but I wanted to cover.

$(document).ready(function(){})

All I said in class was that “this is necessary. Put everything inside here. jQuery won’t function without this. Don’t question”. I’m sorry, this was mean. What I really meant to explain was that this IS necessary, but it is NOT the only way to accomplish this task.

What this line is saying is that jQuery has some things that need to be run AFTER the browser has populated the DOM with all the HTML elements. It has to wait for this so that the elements EXIST when it tries to assign all the appropriate listeners to what you have told it to do. However, you can do this exact same thing with a much simpler call:

$(function(){})

That’s right, you can replace $(document).ready(fuction(){}) with $(function(){}).

Wow, that was easy.

Dropdown menu

I had originally planned on doing a full-blown example at the end of class. This example would be a dropdown menu that would work on hover over (similar to the one found at http://www.cc.gatech.edu). I have included it in the zip (found on the techtopic page) along with a spiffed up code that we did in class.

The dropdown menu included in the zip is a bare-bones implementation that you can put into any navigation. I used a function we didn’t cover in class .children(). Briefly, this function finds all the HTML elements that are contained in that element (div, span, etc), and you can refine it by putting a selector as a parameter to the function (like in my dropdown example).

Please study this and modify it (try using .fadeIn()/.fadeOut() instead of .slideDown()/.slideUp()) and try some experimentation with this. Also, this is a great reference to have in the future if you are building something that needs a dropdown menu: this will work great for you.

More Stuff

Two things I didn’t get to talk about this week are $(this) and .animate().

$(this) is a reference inside a callback function to whatever was selected. In the dropdown example, $(this) refers to the div with class=’hover-container’ that was hovered over. It only exists inside the callback function.

.animate() is the big kahuna when it comes to anything animated with jQuery. Actually, in the actual source code for jQuery most specifically named animation functions (slideDown, slideUp, etc) just call .animate() with the proper parameters for that specific function.

.animate() is ridiculously powerful and can do a lot of things. We will be covering it more in-depth in the final week.

You and Urls and Browser Plugins

Andre — Thu, 04 Mar 2010 06:11:41 +0000

Someone recently offered to pay me to write them a url shortening backend/script to use for themselves. Not only did I decide to not charge them for it, but I decided to write a chrome extension so you can use it with as little hassle as possible.

For the tl;dr; crowd: download the url shortening script and the chrome extension to use with your shiny new shortener. Instructions are included.

The following instructions are included in the README.txt of the tar file. But here they are for convenience, and for any questions: leave them in the comments. NOTE: these instructions are if you want a default installation setup. This assumes you want all the default table, user name, and password. It’s probably a good idea to change them, but that’s up to you.

Step 0: Things You Need

You’re going to need a url. Probably a short one? There are tons of crazy tld’s available. i chose ablu.us cause it’s moderately close, yours might work even better.

Apache with mod_rewrite. Or equivalent server/rewrite setup.

PHP.

Step 1: The Database

You’re going to need to create the database for your service. NOTE: the user@server$ and mysql> are the prompts you should see (clearly user@server$ will be different for you).

user@server$ msyql -u root -p

mysql> CREATE DATABASE `uploads`;

mysql> GRANT ALL PRIVILEGES ON `uploads`.* TO 'uploads_user'@localhost IDENTIFIED BY 'uploads_pass';

mysql> FLUSH PRIVILEGES;

msyql> quit;

This will create the database we need to install things in the next step.

Step 2: Installation

If you table name, username, or password you need to edit config.php accordingly. There are also a number of other things you can customize in config.php like the alphabet used to chose characters from, the length of the shortened url.

One thing you MUST change the $site_url in config.php. Otherwise it will insert things into your database, but not give you the correct link back.

Visit /install of the folder from above from your browser (http://yourdoma.in/install). If you kept the defaults from the above step, you don’t need to change any of these fields.

Click “Install >>”. And barring any database errors, you should have a working url shortening service!

NOTE: You may want to consider removing the /install folder after this step. It’s not necessary as running it again won’t destroy any data, but you never know.

Chrome Extension

The chrome extension is pretty easy to use. The first time you try to use it, it will tell you to Set Shortener. You have two choices here: If you want to use your own service you just created, enter the following:

yourdomain/up.php?site=

If you want to use MY service, enter:

ablu.us/s/up.php?site=

I’m considering doing a Firefox addon as well, but creating one of those is a bit more involved.

This extension will work with any url shortening api that returns just the plain text of the short url. Examples include http://fizl.us, http://is.gd.

That’s It!

You have your own url shortening service!

I am running a modified version of this on my own site: http://ablu.us/s/. The main ablu.us is an image uploader. Feel free to use it if you so chose, but I just created it for my own personal use for some coding practice.

Leave any questions in the comments below, and i’ll try to get to them.

Ablu.us and Chrome Extensions

Andre — Fri, 26 Feb 2010 17:16:57 +0000

I recently created a file hosting and url shortening service for myself: ablu.us. Now as a pet project, i’m starting to get some feature creep action going on. Case in point: I just wrote a chrome extension to use this service.

NOTE: I am never going to release this to the gallery, as I don’t want THAT much attention to this thing, it’s just sweet for me to have for myself. In all actuality, I might do something else with this url eventually, so releasing this out into the world would probably be a bad idea.

That said, here is a link to download it if you actually want it:

INSTALL ablu.crx.

CHANGELOG :

version 0.2 now includes using fizl.us.

version 0.2.1 fixed an initial settings bug

It’ll ask you if you really trust me, and to continue. And that’s it.

I won’t get into the nitty gritty details of HOW TO create your own chrome extension quite yet, but expect a blog post about it soon. Also, Google has a bunch of getting started tutorials that helped me so well it only took me about 2 hours to write this extension from scratch.

Some interesting things are as follows:

These babies are written in javascript

This was news to me. I knew Firefox plugins are written in XUL, which is similar to javascript. Chrome extensions are written in plain, vanilla javascript. Not only that, the part that gets displayed is literally an html page that you can do whatever you want with. If you want to include jQuery, you can (mine does not). Any other library? yup. It also means that you can use any of the HTML 5 capabilities Chrome offers: local storage, canvas, image rotation.

This strikes me as a bit excessive as you can load an unlimited number of scripts from anywhere. Seems to me that this could be abused.

Chrome allows copying to clipboard

That’s right. You can copy things to clipboard just like in IE with

document.execCommand('Copy')

This is exactly how similar URL Shortening extensions work. After seeing how awesome this is, I have to wonder… why doesn’t Firefox support this? I don’t see it being a security risk more than copying profanity into the clipboard. Whatever, it’s nifty that chrome has it.

Autoupdating is scary

Hoo dangle is it scary. What happens if the dev’s life suddenly tanks and decides he wants to have your browser randomly redirect to a porn site at random intervals? If you have a previously installed extension of his and he decides to update this new functionality, he can (there are some caveats to this, like what permissions the extension already has). This could be problematic as it would be difficult to track down exactly what’s causing this browser behavior. This has the potential to turn any previously useful and non-porn-redirecting extension into a very messy thing to be a part of.

If you are in the market for (another) url shortening extension, give it a try. Let me know what you think. It could probably use a much better logo, so if you want to help drop me a line at hello () andrebluehs [] net.

Image Uploader and URL Shortener and You

Andre — Fri, 12 Feb 2010 16:18:27 +0000

I recently purchased the url ablu.us with the intention of using it as a url shortener/image uploader. So i did.

It was actually quite trivial, and I had the code for it done about 6 months ago, but didn’t purchase the url till recently. I had created a photo uploader for another website I was working on (newnantheatre.org) so I just copied over the code (I wasn’t getting paid anyway, so I felt it was ok to reuse the code). There are some improvements tho that I’ll document here. However, I’m not actually going into the implementation of a url shortener or image uploader. You should take a weekend and figure this out for yourself. Or maybe I’ll do a post on it later.

Resize Me

The first thing I wanted was for people to not have to scroll horizontally to see huge pictures. But I didn’t want to resize them during the upload process, because I wanted people to see them the largest possible. So i wrote a quick jQuery script to detect the window size/proportions, and resize the image to that roughly. There are still some bugs in this, and currently there is no way to see the actual real size image without going to the hotlink.

mod_rewrite

This was a huge thing, as I had just started experimenting with it recently. I’m not a fan of big, scary regular expressions, but they’re damn useful (and necessary) when it comes to mod_rewrite. For those of you who don’t know what this is, it’s pretty urls. It takes the part after the .com, .net, .us, etc, and turns it into a meaningful request to the script that is actually being accessed. This was particularly useful for url shortening because it removes the need for a ‘?x=xxx’ at the end of a url.

api

In the case of the url shortening, i created a dead simple api to use. This can be used as a bookmarklet with any browser that supports them (Firefox, Chrome (only tested in dev builds), Safari, etc). Just paste this code into the url part of a bookmark to create a bookmarklet:

javascript:void(window.location='http://ablu.us/s/up.php?site='+location.href)

Or you can visit http://ablu.us/s and copy the url you want to shorten and click ‘Shorten’. Or you can use it in any other context of plugin, extension, etc for url shortening purposes by using the url http://ablu.us/s/up.php?site=.

EDIT: Chrome Extension

I have written a chrome extension for this as well.
I hearby release this unto the world. My friend Eric (@diagonalfish) runs a similar (and WAY more professional) service at http://fizl.us, and both of us doing this prompted me to write this post. If you have your own personal image uploader/url shortener, let us know in the comments.

CakePHP and Events with AJAX and MySQL (Part 1)

Andre — Tue, 15 Dec 2009 23:15:31 +0000

I recently had a customer that needed an event display system. (They’re not paying me, and non-profit, so I feel ok putting this tutorial here). They wanted to have a nice pretty calendar that displayed when certain events happened. I had also decided early on to use CakePHP and had a fairly fleshed out site at this point, so I just wanted to add in another MVC that I could use. This is actually quite easy, thought it takes some setting up, so here is how I did it.

NOTE: This tutorial assumes you have an Acl controlled application, and know how and when to get these things to work. I will explain when things need to be done with ARO/ACO, but not how. Also, I borrowed the design heavily from this calendar tutorial

Step 0: Setting up the DB

This database structure provides a very simplistic event. The event has a title, body (description), date, and ID, and if it reoccurs. You may need less or more things, this will be left to your discretion, this is just to get you started.

CREATE TABLE IF NOT EXISTS `events` (
  `id` int(11) NOT NULL auto_increment,
  `title` varchar(55) NOT NULL,
  `body` text,
  `date` date NOT NULL,
  `recurring` text,
  PRIMARY KEY  (`id`),
  KEY `title` (`title`)
)

Step 1: The Model

I didn’t need anything at all in my model, so I just stole the first few lines from another one and put it there. I’ll put mine here simply for completeness.

class Event extends AppModel {

	var $name = 'Event';

}

Step 2: Setting up the controller

This won’t get in to ACL/ACO/ARO at all, but a hand-waving explanation of how-to-make-it-work. Let’s stub out the controller with what we will eventually need: some setup and 4 methods.

class EventsController extends AppController {

	var $name = 'Events';
	var $helpers = array('Html', 'Form', 'Ajax', 'Javascript');

	function beforeFilter() {
	    parent::beforeFilter();
	    $this->Auth->allowedActions = array('index', 'display');
	}

       	function index(){
        }

	function add($date = ""){
        }

	function delete($id){
        }

	function edit($id = null) {
        }

This will be what we are mainly going to work on. The way mine functions is that there is no way to view an individual event’s details by clicking on it. You could add this in by including a view() method and displaying the info. That will be left as an exercise to the reader.

Step 3: Setting up the index() method

What we need to do here is to get all the events within a certain range (the current month) and to display them out AJAX style. CakePHP makes this trivially easy.

	Configure::write('debug', 0);
	$month = $_POST['m'];
	if ($month < 10) $month = "0".$month;
	$year = $_POST['y'];

	$max = cal_days_in_month(CAL_GREGORIAN, $month, $year);
	$min = "01";

	$this->set('events', $this->Event->find('all', array(
							'conditions' => array("Event.date BETWEEN '$year-$month-$min' AND '$year-$month-$max'"))));
	$this->set('month', $month);
	$this->set('year', $year);

	$this->layout = "ajax";

Explanation:

Configure::write('debug', 0)

- because we’re using AJAX, we don’t want any pesky error messages (or if still in debugging, db calls) to show up.

if ($month < 10) $month = "0".$month;

- later we’ll see javascript gives us the month without a leading 0. this is to put it back.

cal_days_in_month(CAL_GREGORIAN, $month, $year);

- a handy function to give us… exactly what it says. alternative to date(“t”, mktime(….));

Part 2 to happen shortly

Ajax-ing in the content
Javascript Date() vs PHP date()
Correctly padding days before first of the month

jQuery and waves

Andre — Tue, 28 Jul 2009 21:00:23 +0000

I recently watched parts of the Google I/O Keynote. In the little demos they showed at the very beginning of the video, there was a little app that followed the mouse around and created waves wherever the mouse went. I wanted to do something similar, so here is a (quite lengthy, in-depth) tutorial.

This tutorial assumes you know enough about jQuery to understand what the $(function(){}) is used for and all associated $(“”) calls do. I will explicitly tell you what can be OUTSIDE of this anonymous function. Otherwise assume it is inside the jQuery function.I like to declare all my variables outside the jQuery function so that in case my other functions need them. My preference, and is not strictly necessary.

You can view the demo here

Or you can download the source. (tar file containing only wave.html)

Step 1: HTML

First we need the very basic html to set the page up.