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

Introducing connect-static2x Middleware

connect-static2x is middleware identical to connect’s native static() middleware except for enabling support for image resizing on the fly. After an image is processed it’s saved in the same directory as the original so the next request is cached.

This makes it incredibly easy to serve dynamically sized images and support retina devices without having to worry about creating sprites or multiple versions of images. Retina support is a snap when used with something like retina.js on the frontend.

static2x will interpret and process any jpeg or png in the following format using the default options:

  • /example.png Served as usual.
  • /example@2x.png Nothing will happen. Original file will be returned instead of upscaling.
  • /example-200x200.png The original file will be returned proportionally scaled to 200×200.
  • /example-200x200c.png The original file will be returned proportionally scaled and cropped to 200×200.
  • /example-200x200c@2x.png The original file will be returned proportionally scaled and cropped to 400×400.

Documentation and repository is hosted here on Github.

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