Monthly Archives: December 2010

CoffeeScript with WebSQL and jQuery

Lately I’ve developed a distaste for Javascript.  I like what Javascript has done for the web, but I hate the syntax.  I hate that there are little “Gotch Ya!”‘s all over the language.  I don’t have to worry about that too much anymore though since I’ve started using CoffeeScript.  If you interested in learning more about it, check out the official web site, and then my “Getting Started” guide.

Now that I’ve had a chance to dive in to CoffeeScript a bit more, I’ve started to integrate what I’m doing with other features and libraries to see what I can create.  For work I’ve been using a lot of WebSQL and jQuery, so that was the first place I took my new found CoffeeScript powers to.

Using jQuery with CoffeeScript is really, really, easy.  For instance, let’s say we want to Ajax a page into an array:

$.get("mypage.html", (data) ->
    myArray.push data
)

The syntax changes just a hair, but overall it looks a lot cleaner.

As mentioned previously, the other thing I’ve been doing a lot at work recently was working with WebSQL.  It’s been dropped by the W3C, but Webkit has implemented it already so it’s here to stay.  Anyways, CoffeeScript makes WebSQL a little more palatable.

#Start a transaction
db.transaction( (tx) ->
    query = "SELECT * FROM table"
    tx.executeSql(query, [], (tx, results) ->
        rLength = results.rows.length
        for(i=0; i < rLength; i++)
            alert results.rows.item(i).someColName
    )
)

With WebSQL and CoffeeScript, the syntax doesn’t change a ton, but I like the look of it better without the braces.

Another feature that I wanted to share with out about CoffeeScript is it’s equivalent to PHP’s key, value loop construct.  In PHP, it would look like:

foreach($key => $value as $myArray) {
    //do stuff
}

In CoffeeScript, the equivalent is:

for own key, value of myArray
    #Do stuff.

The benefit of the CoffeeScript version is that it can loop over object properties as well, not just arrays.  If you have any other cool features or examples of CoffeeScript usage, drop a link (or example) into the comments.

Getting Started with CoffeeScript

Note: You may also be interested in “CoffeeScript with WebSQL and jQuery“, which gives more examples of CoffeeScript code.

Lately in web development circles there has been a movement to make Javascript easier for everyone. Well, easier is probably the wrong word.  Lets just say that they want to “modernize” it’s syntax.  A little language has been gaining a lot of attention lately that does just this, and it’s called CoffeeScript.  A quick example of assigned on a condition:

big = true
number = 100 if big

Instead of:

var big = true;
if(big) {
   number = 100;
}

Anyways, this tutorial is about getting the CoffeeScript compiler up and running. To do this, you’re going to need Node.js and the Node Package Manager(NPM).

Step 1: Node.js

Getting Node to install is pretty straight forward. All you need to do is download the latest stable version from here and then run:

./configure
make
make install (may need to run as super user)

Step 2: Node Package Manager

Node Package Manager is the equivalent of EasyInstall for Python. It allows a user to install pre-made programs, like CoffeeScript, easily without worrying about build dependencies or any annoying stuff like that.

If you have Curl installed (most Linux/Mac users will), the easiest way to make this happen is to do the following:

curl http://npmjs.org/install.sh | sh

I personally ran into problems with this because of some permissions errors. If you run into this, check https://github.com/isaacs/npm/blob/master/README.md out which has extensive documentation on how to get around it.

Step 3: Install Coffee

Now that we have all of Coffee’s dependencies solved, you can install CofeeScript by doing:

npm install coffee-script

Step 4: Brew Some Cofee

Let’s make a math object…

math =
	cube: (x) -> x * x * x
	square: (x) -> x * x
 
startNumber = 2
cubeStartNumber = math.cube(startNumber)
squareStartNumber = math.square(startNumber)
alert "Cube: " + cubeStartNumber
alert "Square: " + squareStartNumber

Now, save this file to test.cs and then run coffee -c test.cs on the file. You will get a new file called test.js that looks like:

(function() {
  var cubeStartNumber, math, squareStartNumber, startNumber;
  math = {
    cube: function(x) {
      return x * x * x;
    },
    square: function(x) {
      return x * x;
    }
  };
  startNumber = 2;
  cubeStartNumber = math.cube(startNumber);
  squareStartNumber = math.square(startNumber);
  alert("Cube: " + cubeStartNumber);
  alert("Square: " + squareStartNumber);
}).call(this);

That’s it!

If you run in to any problems during the install process, drop a line in the comments and I’d be happy to help.

Learning How To Hack

I’m putting this here as a resource to myself, as well as to others.  If you’ve ever been interested in learning to become a better programmer, this resources is for you.

http://krainboltgreene.github.com/l/2/

Beginning to advanced Python, Ruby, and software development practices are covered here with links to free PDF books to help you learn.  I highly suggest taking a look.

My History of Failure

“I’ve failed over and over and over again in my life, and that is why I succeed.”

This is my third attempt.  I’ve tried twice before and failed, but this time could be different.  It could end up in failure just like the others, but I don’t think it will.  I’m smarter this time around.  I’ve learned from my mistakes, am better at what I do, and I have more to lose.

Encode4Free

The first time around was in 2007.  I had just learned PHP and thought I had what it took to make a video encoding startup.  This was before the term “cloud” was popular, and my idea was that users would upload videos to my service, encode them into whatever format they liked, and then re-download them.  For revenue, I thought that a free service could be done by adding advertising to the beginning of the encoded video.  Or, a user could pay small fee to get moved to the front of the queue and have no advertisements.

The idea seemed good, but I wasn’t dedicated to it.  I got a design going and had the back-end encoding stuff working, but I just couldn’t act on it.  Some other things went wrong too.

  • No motivation – I was still in college, didn’t need the money, and enjoyed my life just where it was.  There wasn’t really a huge motivation for me to do this.
  • No passion – I honestly didn’t care about video encoding.  Sure it’s cool, but only cool from a technical standpoint.  It wasn’t something I could really get behind.
  • Knowledge – I really had no idea how deep the programming rabbit hole went at this point.  Not knowing what good design was really put a cramp in how fast I could develop too.  In short, I was inexperienced and it showed.
  • Flawed business model – In retrospect, this should have been a freemium model.  10 minute video for free, anything over is charged.  That way people don’t get annoying advertisements added to their videos.

Should I Get The Book?

In 2008 and early 2009 I worked on “Should I Get The Book?”(SIGTB).  As a grad student reflecting on my undergraduate years, I realized that I spent a ridiculous amount of money on books that I never needed.  After talking to friends and classmates, it seemed this was a universal problem, and my startup idea was born.  This time, I did things right (sort of).  I took a few hours every week over the the summer and started hacking away at it.  By the end of the summer, I had a functioning product.  I did a launch, and the waited.  But nobody came.

So what happened?  Was it competition?  Was it a poor idea?  Well, it was a lot of things.

  • Design – This is huge.  My site design sucked.  I basically ripped off a WordPress template that somebody made because it looked cool.  It had nothing to do with my idea, and it showed.  People coming to the page would say “So what is this about?”.
  • UI – The interface and experience was awful.  None of it made sense, and the changes that people did suggest I back-burnered until I “had more time”.
  • Seed Data – The idea that users leave reviews about whether they needed the book or not was great, except that nobody would do it.  Without having some reviews already in there, I found that people weren’t motivated to leave a review because they thought the site wasn’t being used.  I needed to have data seeded, but I couldn’t think of a good way to do this without paying any money (I had none at the time).
  • Focus – I tried to focus on too many schools at once with the first launch.  I should have started with one to see if the concept would stick.
  • Advertising – On a college campus, flyers and word of mouth is key.  I had zero flyers and nobody talking about me.
  • Karma – Users like getting a reward for doing something.  It doesn’t have to be money, karma works just as well.  Users get to scratch their competitive urge by posting reviews, getting karma, and checking to see if they have more then their friends. I should have done this, but didn’t.
  • Evergreen data – One of the big problems with this data is that the instructor can change books, change styles, or even stop teaching.  The data can become useless quickly.

Once I realized most of these things I vowed to start a re-design with all of these issues addressed.  I was about 25% of the way through the mock-up when I was informed that RateMyProfessor.com had a similar feature.  It was easy to use, and they already had a huge user base.  My idea was basically sunk.

While SIGTB flopped, it was important step for me.  I had pushed a project through to completion, learned a lot about marketing, and learned that I really need a co-founder to talk me out of bad ideas.  Most importantly though, I proved to myself that I could accomplish something.  I might have given up too quickly, but I think that the idea wouldn’t have worked well anyways.

CampaignAlytics (Working Name)

I started this idea out in late October of this year.  The idea is that email campaign analytics can be done better.  Currently analytics is rolled in as a feature for big mailers (Mail Chimp, etc), but it doesn’t provide the in-depth analytics that a lot of marketing folks are looking for.  We’re looking to change that.  I’ve been working for an hour a day since November 1st, and have a lot to show for it.  I pitched the idea to a local pitch night, and the reception was great.  We have a lot of great features, and do it all in a non-obtrusive way that is compatible with mailing services, or can be rolled into your custom solution using our API.

I’m taking a different path with this startup, based on the things I’ve learned on the last two.

  • Pay for a design – The first thing I did for this web app was pay for a design.  I got a great deal, and now have a design that I can be proud of and shows off the product like nothing I could have ever come up with.
  • Co-Founder – Having someone to talk you out of bad ideas, and give you a sense of perspective is amazing.  Having someone to discuss ideas with and share the burden is pretty great too.
  • Funding – I’ve come to the conclusion that without a little bit of funding, this startup will take forever to complete.  We’re applying to the seed incubator Momentum and hopefully we’ll get funded.
  • Iterate – I’ve already gone through two different layouts and menu structures for the account/analytics page.  The second version is far better than the first because I asked for feedback from a few trusted people and implemented the changes right away.

The thing I hope you can take away from this is that you are going to fail many times before you succeed.  Being persistent (and maybe a bit stubborn) will take you 70% of the way there, and the rest is on how good your idea is.

PHP Alternative Syntax

Did you know that PHP has an alternative syntax structure?  Up until about two years ago, I didn’t either.  It wasn’t until I started poking around in the WordPress core that I saw it.  Intrigued, I popped over to PHP.net and read an entry on it.  In a nutshell, the alternative syntax can go far in making your PHP code much easier to read.  The control structures if, while, for, foreach, and switch can all be expressed in the alternative syntax form.  In general, I prefer to use the alternative syntax when mixing PHP in with HTML, and the standard syntax when writing pure PHP.

If Example

// This....
if($myString == "foo"):
    echo "bar";
else:
    echo "no-foo-bar";
endif;
 
//...is equal to this.
if($myString == "food") {
    echo "bar";
} else {
    echo "no-foo-bar";
}

ForEach Example

$names = array("bob", "tom", "john");
 
//This....
foreach($names as $name):
    echo "Your name is: {$name}";
endforeach;
 
//...is equal to this.
foreach($names as $name) {
    echo "Your name is: {$name}";
}

Resources

If you’re looking for more resources on PHP’s alternative syntax, check out the documentation here, or the WordPress source code for examples.

SVN Merge Example (Trunk to Branch)

I’m often in the situation where I need to merge changes from the trunk development into a branch.  I can never, EVER, remember the command, so I’m putting in here in hopes that I can reference it again and that other people might find it useful.

svn merge -r x:y svn://repositoryURL/repo/trunk/ .

So, how does it work? X is the revision that you branched at. This can also be the revision that you last merged changes from. Y is the version that you want to merge up to.  In most instances, HEAD is probably what you’re looking for.

Note:  Using –dry-run if you want to see the changes that will be made before actually doing it.  It takes some of the “this is scary” out of merging.

Creating a Flexible Caching Module

I work for a great company, I really do.  Sure we have our problems (like just coming out of the developer stone age), but overall I work with smart, friendly people who are passionate about what they do.  One of the things that always bugged me though was the lack of any sort of caching in our CMS.  Most times it’s not needed, but when an operation takes about 100 queries or so to finish, then it’s time to start caching.

Since I’m a bit of an efficiency freak, I thought I would take a crack at writing a flexible caching module that is easy for our developers to use.  So what do “easy” and “flexible” mean?  To be “easy”, the caching module must be usable by even a novice developer and have a limited number of options.  For instance, I ended up deciding that we really only need two public methods, and one public property.

  • $cache->exists – If “$cache” is a cache object, calling exists checks to see if the cached object already exists in the database.  It also checks to see if it’s expired or not.  If it’s expired or non-existent, it returns false.   It returns true if the cached object exists and is up to date.
  • $cache->put($val) – This is how you store something in cache.  It can be any type of serializable PHP object.  So basically, resource types are off limits but objects, arrays, variables, entire web pages, etc. can be used.
  • $cache->get() – This fetches the object stored  in the cache.  It handles the re-serialization of it as well, so it really makes things pretty idiot proof.

What about flexible?  Well, by that I mean we need to be able to transparently implement several different types of caching.  Since we’re just crawling out of the dark ages, I opted to implement a fallback caching mechanism.  Here’s how it works.

  • The programmer defines a variable in our settings area to be which caching option he/she wants to use.  Options are memcached, file, mysql.
  • If the setting isn’t defined, we try memcached by default.  This is by far the best caching system to use, so it makes sense to try it first.
  • If memcached fails, we go to a database caching schema.  While not nearly as good as using memcached, it’s possible it could save you tons of queries on your database.
  • If the user chooses file caching, we do that.  It’s a pretty bad idea to use in most cases, but may still have it’s uses.

So why did it come this?  It’s not that we host terribly high-volume sites, but that our CMS is super slow.  A full-on page will take about 4 seconds to load to your screen completely, and that’s running local on the network.  One of the main problems is that we use output bufferring extensively.  The ENTIRE FRIGGIN PAGE is buffered.  This has 3 side effects:

  1. Slight performance loss due to bufferring.
  2. Apparent page load time sucks because the browser has to wait for the entire page to be generated before getting output.
  3. Development is super easy because you don’t ever have to worry about output being sent before doing a call like “header()”.

We can’t remove output buffering unfortunately.  It’s at the very core of our CMS and development practices, so it just won’t work.  To get the load time to generate the page as low as possible, I decided that caching was needed.

So what sort of problems do we run in to with this caching module?  Glad you asked!  Many of the problems aren’t specific to this caching module, but to caching in general.  The quick list:

  • If the original query wasn’t complicated, it’s not worth storing the results.  The number of queries the caching module does in MySQL mode is 3.  If your initial query was less than that, or not a super-complex-mega-join, it’s not worth using.  This caveat goes away in memcached mode.
  • Smart naming and design.  You have to be very careful out what you cache, and when.  Remember, page content and queries probably change when a user is logged in or on a different device.  Just things to keep in mind.
  • Getting developers to use it.  Not everyone likes to learn, let alone change their habits.  The biggest barrier to this is getting people to use it.  Some people don’t care about efficiency either (sad, I know), but at least our system administrator thanks me.

The caching module seems to work pretty well too.  On one particularly SQL heavy page, I reduced page load time from 14 seconds (ridiculous) to just under 6 seconds (still bad, but getting better).

That’s it for now.  Any questions or comments are welcome.