Posterous theme by Cory Watilo

jQuery Muss function (random css transform)

I'm going to try and start posting some code snippets. Mainly for my own future reference. 

I'm working on a page design where we're going to play with CSS3's rotate transformation. It's so we can 'muss up' the page a bit to make it look like a pile of notes. 

I could sit there and individually set it all in the CSS, but jQuery can make quick work of this. Here's a little function I created that will randomly 'muss up' your elements. You pass in your jQuery object and then an integer indicating the number of degrees (postive or negative) in the random range.

 

function muss($item,degrees){      
    var randomangle = (Math.floor(Math.random()*(degrees*10*2))-degrees*10)/10;   
    $item.css('-webkit-transform', 'rotate(' + randomangle + 'deg)')     
}

 

So, for example, if I use a class name called 'muss' to identify elements I want mussed up, I can do this:

 

$('.muss').each(function(){
    muss($(this),35);
}) 

Poor man's--or rather--web designer's PNG compression with Pixelmator.

For political/personal/silly reasons, I've been trying to wean myself off of Adobe products with my freelance projects. Alas, there still isn't an open source PhotoShop replacement yet. The GIMP is close, but not quite. 

So I opted for Pixelmator. Pixelmator, for the price, is good. It can open (to an extent) PSD files. So that's handy. It's now on version 2.0.

Alas, I really think it should be labeled version 0.2. There are still a lot of bugs and missing features. But it has potential. 

One of the frustrating areas where Pixelmator is lacking is in its PNG export options. There aren't any. Well, I take that back...you can export it as a regular PNG, or you can export it via the slice tool. Alas, the slice tool PNG's color gets shifted. So that's useless.

And, as is, the PNGs are HUGE exported from Pixelmator. 

So I did some research and found this great little Open Source OSX app called ImageOptim. It's a GUI wrapper for several different OS PNG compression algorhythms including: PNGOUT, PNGCrush, OptiPNG, AdvPNG, and some JPG and GIF options as well. You drag your images into ImageOptim and it will compress each one using each of the options. When it finds the smallest one, it saves it out as a smaller file for you.

My no-Adobe PNG workflow is now: 

  • EXPORT PNG from Pixelmator
  • Drag PNG into ImageOptim
  • Check image colors. If they have shift, I run it through ImageOptim again but this time with only the PNGCrush option turned on (that seems to be the one that won't ever shift colors). 
  • If the image is an acceptable size, I'm done. If not:
  • Open this PNG back up in Pixelmator. Go to FILTERS > COLOR > COLOR POSTERIZE...
  • Adjust the slider as you see fit to find a nice balance of color fidelity and reduced color range (the further left you slide it, the higher the compression you can achieve). What this step does is basically reduce the colors in the image. You can often reduce the colors without a discernable difference.
  • EXPORT PNG from Pixelmator
  • Run this PNG through ImageOptim

Yes, a little tedius. But no Adobe! I've had fairly good luck with this method so far. I can usally shrink the PNG by 30-60%. 

 

Getting Aptana to connect to plugin sites via an automated proxy setting.

Due to Dreamweaver CS4's incomplete support of Subversion (I hear CS5 is better at that), I've had to switch IDEs and decided to give Aptana a try. It being open source just made it that much easier to switch.

Once you install Aptana, you can then grab all sorts of plugins to expand it's feature set, including some Subversion plugins. To install these, you can do so directly with in the Aptana UI.

Unfortunately, we had issues getting Aptana to connect to the internet to download these plugins. A little Googling shows that we weren't alone in having that problem.

After some digging around I found the issue. We were using an automated proxy URL that pointed to a .pac file. It appears that Aptana can not decipher a .pac file correctly. The solution is to dig into the .pac file manually and copy and paste the pertinent info into Aptana.

The fix:

  1. Open the .pac file's URL in a web browser so that you can download it to your desktop.
  2. Open file in a text editor
  3. Look for a line that appears to reference a very specific proxy server. In our .pac file the format was "PROXY [our domain]:[port#]"
  4. Paste this domain and port number into Aptana's proxy settings. (Go to PREFERENCES > GENERAL > NETWORK CONNECTIONS, click on the HTTP schema and then EDIT). If your proxy server requires authentication, be sure to put enter that info as well.
  5. Set the 'Active Provider' to 'Manual' (I'm not entirely sure what this means, but is what is needed to get the proxy entries activated)
  6. Restart Aptana and it should now easily connect to the plugin servers.


Hope that helps someone!

Setting up Subversion (SVN) on OSX Snow Leopard

I've been meaning to get my daily findings into blog format for a while now. Posterous makes it so easy that I really no longer have an excuse not to. I'll kick of my Posterous blog by recapping my process over the past day or so on figuring out how to get Subversion running on OSX Snow Leopard.

There are a lot of Google search results for 'subversion on OSX' but you'll find that they span many years and many versions of both subversion and OSX. The following is my attempt at condensing and updating the various options out there into a Snow Leopard centric tutorial.

Note 1: If you are running OSX Server, skip this entire post and go here instead as it's quite a bit easier to get things going with OSX Server: http://agileshrugged.com/blog/?p=14

Note 2: You'll likely be using vi to edit the text files via terminal. If you've never used vi, a quick cheat sheet:

  • to edit a file type the following in terminal: 'sudo vi /path/to/file'
  • Once open type 'esc' and then 'a' (sequentially...not at the same time) to go into edit mode (append). 
  • use your arrow keys to navigate the document (anyone know how to page up/down in vi in OSX?)
  • when finished editing type 'esc' and then ':' (shift-;) to go into command mode.
  • while in command mode type 'w' (for write/save) and 'q' to quit and hit return.
Set up Subversion in OSX in 5(-ish) easy(-ish) steps!
  1. Activate Apache. This is one of those 'so easy that it took me forever to figure it out' steps. Alas, sometimes OSX hides things from you in plain site. Snow Leopard comes with Apache pre-installed. To start it go to your System Preferences >> Sharing >> click the Web Sharing checkbox. That's it. Easy.
  2. Install Subversion. There's several options for doing this. You can do it via Fink. Or you can grab any one of a number of pre-packaged installer options for OSX. I found that the one offered by Collab.net was too easy to not recommend: http://www.open.collab.net/downloads/community/
    1. Download the file. (note that there is a version for 10.5 and one for 10.6)
    2. Open the DMG
    3. Double click the file you see (PKG)
    4. It will then install it. That's it. Easy.
  3. Now we need to get our hands a bit dirty with the command line. For starters, let's enable hidden files to be shown in Finder. You don't need to do this step, but it certainly helps orientate yourself in the file system. 
    1. Launch Terminal
    2. past in this text: defaults write com.apple.Finder AppleShowAllFiles YES
    3. Hit return
    4. Restart finder (cmd-opt-esc brings up the force-quite window where you can select Finder and then the Restart button)
    5. Now you can see what you're doing in Terminal reflected in the finder.
  4. Configure Apache and Subversion. For that, I'll send you back to collab.net for some very nice instructions: http://blogs.open.collab.net/svn/2009/05/building-an-os-x-based-subversion-server.html
  5. Oops...not quite done. Through all of the above, there were two things that were missing that I had to find elsewhere.
    1. Make sure you have a log file directory. The additional httpd.conf settings you added from the above collab.net tutorial tell Apache to store Subversion log files in the /usr/logs/ directory. It appears that that directory isn't necessarily going to exist. And if it doesn't exist, Apache doesn't know what to do and fails to run. If that's the case, jump into terminal again and create the directory: 'sudo mkdir /usr/logs' and then restart Apache again: 'sudo apachectl -k restart'
    2. Don't forget to set up users in your Subversion project. In the above collab.net tutorial, you made a sample project repository at '/opt/repos/svn/test' to set up users, you'll need to edit the '/opt/repos/svn/test/conf/passwd' file. It's commented fairly well. Each user is on it's own line separated from its password with an equal sign.
All done. Now, to access your repository you'll need the URL of your server (that can be found in your system preferences under 'sharing') and the path to the repository, which if you followed the above examples would be '/repos/svn/test'. Remember that it's case sensitive.