Git Post Receive Deployments

Today I finished setting up deployment hooks for our GitLab repositories (thanks for the suggestion, Rafael). I wanted to accomplish the following:

  • Easy to manage.
  • Only one remote; origin
  • A git push origin (development | staging | production) should trigger a deploy to the remote server.
  • While syncing the directory the gitignore files should be honored so things like CMS uploaded files aren’t deleted.
  • Secure. SSH keys. No http web hooks.
  • Works well with this branching model.

Assuming ssh keys are set up properly, the following bash script should allow you to easily set deploys inside of the post-receive hook. Unfortunately, GitLab doesn’t allow you to update a post receive hook from its GUI, but it’s easy enough to manually ssh in and add them. Also make sure the post-receive and the deploy bash script have proper permissions set.

Create the global deploy script:

Create the post-receive Hook:

Profit: git push origin staging

In conclusion, I have to say rsync really makes this elegant because of its --filter=":- .gitignore" flag. Go rsync, go.

Continue reading

Vector > Raster – Stop Using Images

This is a time saver for both developers and end-users for either mobile or web development: Stop using png’s and jpeg’s to display icons, use fonts.

The benefits are:

  • Better for load time.
  • Eliminates the need to maintain/configure sprites.
  • Change color and size on the fly.
  • Eliminates the need to create retina versions of images. (@2x)
  • More reusable.
  • Easier to implement within photoshop comps.

Create a font using something like this. ** Edit ** Better yet, Fontello, which doesn’t require a login. Thank you Adam.

Continue reading

Appcelerator Event Garbage Collection

As you apply API level event listeners throughout your application you must remember to remove the event when you are done with it, usually when the window is closed. Otherwise your events will end up firing multiple times and things can get messy. Especially if a sql query is part of the call. These stray event listeners are also known as “zombie event listeners”.

The object below can help you manage your events and you will never have to worry about removing them. Any event listener you add with this wrapper will automatically get removed when the window is closed. It is essentially a wrapper for Ti.API.addEventListener and allows you to assign an event to a specific window.

This is a basic commonjs module.

Usage:

Screen Shot 2012-05-24 at 3.07.58 PM

Modest Maps Wax Zoomer

Wax is an extension for Modest Maps and other various JavaScript based mapping libraries. One of the utilities offered is the Zoomer. Out of the box it just has basic zoom in and out buttons which is great, but often a zoom scale is required. Here is an extended Zoomer with a Google-style scale. I have applied a bit of styling to it so it is visible but it requires nothing but the Wax library. Style and use how you please.

ExampleGithub

Peach Database Migration

A cute javascript app to safely migrate a database with serialized PHP objects.

At work we have a shell script to handle the migration from to dev to staging to production and so on. The script properly converts the serialized objects containing the domain name and replacing the old one. It works great, however, it’s a shell script. I wanted something faster, easier, and something I could use from any computer, anywhere. So I wrote peach. Also, this doesn’t have to be WordPress site, it will handle ANY standard mysql dump. And I named it Peach. Enjoy.

Feel free to clone it on github.

Custom Mapping API’s

Google Maps is a great library but it only offers so much out of the box when it comes to customization. I compiled a list of API’s for creating custom “slippy maps“.

These maps require tiles. Preferably a tile server will generate these so you don’t have create your own massive directory tree containing all of the tiles. Below are options.

Oh yeah, and of course, these are all JavaScript based. This is the first of many posts to come about custom mapping.

SVG to JSON

I’ve been making a lot of map based applications lately using primarily Raphaël.js. Using the method below I can easily convert any svg exported from Illustrator to json. I find this to be a much better solution than parsing SVG with javascript for performance reasons. I will be building this class up a bit as I go and create a Github repo eventually, but I just wanted to get this out in the world to maybe help someone else doing the same thing.
Continue reading

Animation Stepping with jQuery

If all you need is great JavaScript animation and tweening I recommend using Shifty or one of the other great libraries on MicroJS. They are small, efficient and optimized for high performance. However, if your project is already using jQuery and you want a basic low-level tweening method there is no need to re-create the wheel or import any other library. Everyone is familiar with the jQuery animation method. It goes a little something like this:

It is commonly used for tweening powered by css. This is all well and good, but what if you want to tween a dom element attribute such as viewBox on a SVG element? Well, the animation method can handle that as well. Take a look.

Also, see a working example here. (Works in all modern browsers)

The “duration” is the amount of milliseconds the tween will last. “step” will be called at every step of the tween which is where you will put your animation logic of course, and finally “complete” will be called once the tween if finished. Tween on.

whattheeff

Personal Project: EFF & APR Calculator

This app distinguishes itself in it’s ease of use by instantly calculating rates without having to press extraneous buttons. When negotiating a loan, this can be useful on both sides of the table by allowing the users to convert from APR to Effective rate and back seamlessly and effortlessly.

What The EFF is a simple JavaScript & HTML5 powered converter. This is not the first APR/EFF converter, but it’s definitely the most intuitive. The app makes use of HTML5 caching (you can use it offline), Jasmine testing suite and Shifty. I developed this app specifically for Webkit browser; Chrome & Safari.

Check it out here.