Rye, now with Grunt

I’ve been maintaining the super simplistic Rye starter theme for WordPress for about 3 years now. Since the time it launched it has been the only theme I have used and recommended because of its minimalistic nature. While there has been some other very well built themes to come out since, I believe they all share the same problems:

  1. They start out with front-end assets assuming you want to use bootstrap, html5bootstrap, nextgreatestbootstraplibrary, ect… Example 1. Example 2. It’s not too difficult to undo this, but aren’t you using a starter theme so you don’t have to spend time undoing things? Stop making assumptions about my project. :)
  2. They’re too bloated. It’s great not to reinvent the wheel but with as much customization code they already have, why not just use one of the default WordPress themes? If you’re building a custom project from scratch you will likely spend a good amount of time removing code and files. With that said, they are great to look at as a reference and pull what you need and see good examples of how to accomplish nice things.

However, one feature I really liked about the new themes specifically was the use of Grunt, which leads me to why this article was written. I have just completed the addition to Grunt for Rye, along with some other architecture updates. Compiling your assets, whether it be raw js, css, stylus, coffeescript, or anything else is a snap.

Feel free to check it out on GitHub.

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.