SubtleGradient

CSS Position Fixed for IE6

2009-07-29T00:00:00-07:00

How do you get position:fixed css working in Internet Explorer 6?

The trick is to use an Internet Explorer CSS expression. You can’t simply put the logic in there directly or it’ll cache the result and not update. The simplest fix is to wrap your logic in eval.

How do you solve the jitter issue?!

Apparently Internet Explorer has a multi-step rendering process. When you scroll or resize your browser it’ll reposition everything and redraw the page, then it processes the css expressions. This causes an ugly “jitter” where the position fixed elements take a bit to catch up with your scrolling.

The trick is to give the body or html elements a background-image with background-attachment:fixed. This forces the processing of the CSS before the page is redrawn. Since it’s processing the css again before redrawing, it’ll go ahead and process your css expressions before redrawing too. This gives you perfectly smooth position fixed elements!

I didn’t come up with this solution. I read is online somewhere. If you know who originally came up with this idea please let me know.

The one trick I did find was that you don’t even need a real image! You can use about:blank instead of a spacer.gif and it still works just fine.

CSS Code

Update: Added border, padding and margin support!

Note: If you don't need margin support, you can delete all the `parseInt` stuff.

Note: I've only tested this in standards mode.

Subtle Hover CSS Inspect Bookmarklet

2009-07-23T00:00:00-07:00

SubtleHoverInspect Bookmarklet

SubtleHoverInspect

I’ve tested it in Safari4 only. It might work in Firefox 3.5 too.

Replace document.write using MooTools

2009-06-22T00:00:00-07:00

Problem

You want to embed a gist on your page. But the CSS that GitHub injects into your page totally screws up your perfectly crafted CSS.

Or maybe you want to use AJAX to load a script that requires the use of document.write. But after teh page has loaded document.write tends to destroy the universe without even asking first!

Solution

Replace document.write!

I created a replacement for document.write that saves the arguments and then injects them into the page after the dom is ready.

This is useful for embedding gists on your page since you can use the additional filter option to reject stuff from being written to your page. This would also be really handy for sites that include JavaFX or certain ads or anything that requires the use of document.write on your page. By deferring the injection of that stuff until after the dom is ready your visitors see the page content before any of the extras like Java applets or ads begin to load.

update: Oh yeah, it works after the DOM loads now too. You can optionally set document.write.context to the element you want to inject into. It defaults to document.body. Enjoy!

Script

Thanks to Steida for taking my rough proof-of concept and getting it working much better and faster and to Jan Kassens and random other MooTools pplz for helping refine it.

Testing a way to post to my blog quickly

2009-06-21T00:00:00-07:00

Howdy y’all.

I’m testing a super-fast way to post to my blog.

I decided to switch to a jekyll / git based blog “solution” since it was so close to my personal ideal. I really like working with blog posts as normal files. It seems like the most natural way. Having a whole database just for blog posts seems like complete overkill to me.

I haven’t decided what to do about comments now. I don’t think that comments are very important to have on my personal blog since they were very rarely used. But I do think it’s important for random people to be able to add some sort of content to my post. Links to more information, comments, corrections, etc…

Let me know what you think. oh wait, you can’t :[

Jekyll quick post shell script

2009-06-21T00:00:00-07:00

Here’s a quick script I wrote to create blog posts for my jekyll blog.

usage

jk_quickpost.rb title [categories [filetype]]

title
Used as the title, description and slug
categories
Comma or space separated list. It’ll try separating by commas first and then spaces if commas didn’t work.
filetype
Any filetype that jekyll supports. EG: md, markdown, textile, html, etc..

example

jk_quickpost.rb "Hello world!" "my, blog post, of, doom" "textile"

Notes

The @ROOT path in this script is set to the present working directory. My personal version is set to the full path to my jekyll _posts directory.

I have it pushing the new blog post to an origin remote in the master branch. You might want to change that to a gh-pages branch instead.

Script

Blazing fast Semantic JS Templating with edit-in-place templates!

2009-04-09T00:00:00-07:00

I actually developed this a while back.

ClientCide Blogged about SubtleTemplates a while back but I forgot to mention it here.

Take an HTML template and a javascript object and get a populated template! Perfect for use with JSON data.

You create the html template in the actual html of the page (or you can pass in a string). Keeping the html in the html allows the designers to have control of the html templates without forcing them to fiddle with javascript. You can also use the same template on your serverside and client-side templating! I’m doing that for some things on GreenSherpa.com

I added a fix to workaround the infamous IE innerHTML unquoted attributes issue.

Demos

DEMO5: Update the template and all instances AS YOU TYPE!!!1!

Your SubtleTemplate has a function that allows you to modify the template code in place. You pass in a function that gets bound to the root template node as an Element. You can then use any normal MooTools Element stuff on your template. When the function returns it updates every instance of that template on your page.

It’s fast enough that you can modify your template as you type, even in IE6.

DEMO3: Crappy performance test!

This basically just shows how many times you can repopulate a template instance in 10 seconds. Check it out in Chrome ;)

Since their default timeout is so much shorter it’s much more impressive.

**NOTE:** Since repopulating your template uses innerHTML, you'll have to use Event Delegation on the parent node for the best experience. Event Delegation will be built into the underpinnings of MooTools 2.0, until then you can use [ClientCide Event Delegation (take2)](https://www.clientcide.com/code-releases/event-delegation-take-2/ "Event Delegation, take 2 » Clientcide (Formerly CNET's Clientside)")

SubtleClickAll Bookmarklet

2009-03-07T00:00:00-08:00

A friend of mine asked me for a simple bookmarklet today. He uses Safari so that opens up a few possibilities.

Take a CSS Selector and run the click method on each matching element.

And here it is:

SubtleClickAll

Drag that link to your bookmarks and you’re good to go.

Known to work in Safari beta 4. Has not been tested anywhere else.
Could also work in IE8 or Firefox 3.1+ or Safari 3.1+

The code is all up on gist.github.com

MooTools databinding plugins coming soon

2008-12-05T00:00:00-08:00

Just a quick post since I apparently haven’t posted it on teh blog yet.

I’m working on some new mootools plugins. Publish/subscribe based databinding. Reusable HTML based templates. And more!

Checkout my github.

Tabs or Spaces?

2008-10-25T00:00:00-07:00

Every language has its preferred style. Ruby prefers two spaces, Python prefers 4 spaces. Javascript seems to be pretty split against Tabs and Spaces. MooTools and jQuery use Tabs. Python and Dojo use Spaces. etc...

How to have a box default to hidden and then fade it in later

2008-10-20T00:00:00-07:00

Fade is just a Tween. And Tween simple animates one CSS property from one value to another. That’s it. Also, you can’t have your code run until the dom is ready (when the page finishes loading enough). None of your javascript rules can effect anything until after the user has already seen the page. So, you have to hide your box yourself using CSS. There are a million ways to do that, but I recommend having a ‘hide’ class.

Simple: Use a `hide` class

Add this rule to your CSS somewhere:

.hide{ display:none; }

Then, manually apply it to all the HTML elements that you want to be hidden by default:

<div class="alert hide">Warning Mr Robinson!</div>
<div class="confirm hide">Are you sure you want to do that?</div>
<div class="info hide">Um... Your arm is missing.</div>

Next, add some simple mootools Javascript to setup your elements to be faded later on:

window.addEvent('domready',function(){

	$$('.hide').fade('hide').removeClass('hide');

});

Finally, you’ll need something to make those things fade back in somehow.

$$('.show-alert').addEvent('click',function(e){ $$('.alert')[0].fade('in'); e.stop; });

Note: This is just a crappy example, ideally you'd write MUCH better code than this. Use a MooTools Class and instantiate it onDomready, etc...

Advanced: Use semantic CSS rules

Don’t like the idea of littering meaningless classes around your document? Well, the best option is to do something a bit more complex…

Use a `loading` class for your `body` tag

Add the classname loading to your body tag. Then in your CSS you can set multiple rules for how your document should look as it’s loading. Then, once your javascript has all fired, simply remove the loading class to disable all those CSS rules.

With the loading class you can use verbose semantic rules such as:

body.loading div.alert,
body.loading div.confirm,
body.loading div.info{
	display:none
}

Use a MooTools Class to write a reusable widget

This is a basic example of how you should approach this sort of thing. Now that you have a simple MooTools Class all set up, it’s easy to go back and add more functionality without having to recode anything.

var DialogWidget = new Class({

	initialize: function(element, eventName){
		this.eventName = eventName||element;
		this.element = $(element);

		this.element.fade('hide')
			.getElement('.closer').addEvent('click', this.hide.bind(this) );
		window.addEvent(this.eventName, this.alert.bind(this));

		this.init_buttons();
	},

	init_buttons: function(){
		$$('.show-' + this.eventName).addEvent('click',function(e){
			window.fireEvent(this.eventName, e.target.get('title') );
			e.stop();
		}.bind(this));
	},

	show: function(message){
		this.element.fade('in').set('text',message);
	},

	hide: function(){
		this.element.fade('out');
	}
});

window.addEvent('domready',function(){

	new DialogWidget('alert');
	new DialogWidget('confirm');

		$(document.body).removeClass('loading');
});

NEW TextMate Code Completion and Smart ToolTips

2008-09-21T00:00:00-07:00

Ahoy internet peoples!

I am hereby announcing the soon availability of a new form of code completion and smart contextual tooltips for TextMate 1.x!

Also, PPK has given me permission to use the Quirksmode.org Compatibility tables inside the Javascript and CSS bundles!

Code Completion & Tool Tips

The Code Completion is filter-as-you-type which means that as you type the list of completions changes to reflect your current word.

I wrote some of the code to hook into the code completion functionality from Ruby and to be able to use json or plist files inside your bundle as completion lists.

I also wrote the code that looks for the current word, method or collection name based on your caret and then finds the corresponding tooltip to show you.

I did a bunch more stuff to make it all work! A bunch of people have worked on this stuff and made it really awesome, if I do say so myself.

Coming soon…

Since it's now incredibly easy to create massive amounts of code completion lists with tooltips and everything…

I'm going to be creating more and more completions lists for Javascript, CSS & MooTools.

Current completion lists:

org.quirksmode.dom.w3c_html.completions
org.quirksmode.dom.w3c_core.completions
org.quirksmode.dom.w3c_events.completions
org.quirksmode.dom.w3c_cssom.completions
org.quirksmode.dom.events.completions
org.quirksmode.dom.w3c_css.completions

Screencast

Moved the screencast to the article page. It's only 2fps, looks way aswomer irl!

UPDATE: now totally works out of the box with the latest textmate and javascript.tmbundle from my github!

It's all coming… soon Available Now!!1!

Experimental IE CSS Expressions

2008-09-06T00:00:00-07:00

I’ve recently been toying with using IE CSS Expressions to fix things in IE6 that I usually use real javascript for.

Check out these few tricks and let me know what you think:

IE6 SHIM Fix — For the Select box showthrough bug

IE6 specific code to get hover working for any element

Fix the PNG background image so that the contents can still be clicked

Serve Python through the Leopard Firewall

2008-08-28T00:00:00-07:00

I’m working on a few Django projects now any I’m learning some of the tricks the hard way. Hopefully I can save you some of that pain.

I was recently having some trouble getting any of the browsers in my Windows XP under Parallels to see my local development server running on my Leopard Mac. It would load all of my Apache and Mongrel served apps fine, but it refused to connected to the Django server.

The Django development server refuses all connections from any other machine.
The Leopard Firewall refuses to allow any other machine to access your Python server.
Parallels and VMWare Fusion operating systems run asif they are real machines on your local network.

So, to get all these things working together…

Allow incoming connections for Python in the Leopard Firewall
Force the Python Django development server to allow access to other people on your LAN

Allow incoming connections for Python in the Leopard Firewall

Open your System Preferences
Security
Firewall Tab
Select “Set access for specific services and applications”
Click the + icon at the bottom left of the list
⇧⌘G — Go to folder “/System/Library/Frameworks/Python.framework/Versions/2.5/Resources/”
Select the Python app
Click “Add”
Find Python in the list (just above Quicktime Player for me)
Change the dropdown on the right so show “Allow incoming connections”

Force the Python Django development server to allow access to other people on your LAN

Simply always serve with the ip 0.0.0.0
python manage.py runserver 0.0.0.0:8000
There is no step 2

Now you’re free to enjoy cross browser testing for your locally served Python Django webapps!
YAY!!!1!

Remotely Create a New Git Repo

2008-07-31T00:00:00-07:00

This is also partly a trial of the https://gist.github.com embedding.

MooTools 1.2 Final

2008-06-10T00:00:00-07:00

MooTools 1.2 has finally been released. And now I’m a member of the MooTools development team!

MooTools on Git on Github

MooTools on Lighthouse

I’ve been bugging everyone I know to move over to GitHub and Lighthouse. With the release of MooTools 1.2 coming up and the instability of the Trac installation at mootools.net, I stole the opportunity to force the project to do my evil bidding! heh heh heh

So, as of the 1.2 release, MooTools is on Git on Github and MooTools is now on Lighthouse

Thanks to the GitHub and Lighthouse crews for giving us free Open Source awesomeness. You guys rock!

So, go. Enjoy your milk

Cloning a Git SVN Clone

2008-04-22T00:00:00-07:00

I’ve been trying to figure out a good way to make a publicly available git-svn repo on GitHub.com that I can clone and then keep up to date with both the original svn repo and the GitHub repo and commit everything into my own fork.

So, how do you go about creating a Git repo that can push and pull to and from both Git and Subversion?

Clone the public repo

git clone git://github.com/drnic/ruby-tmbundle.git Ruby.tmbundle
cd Ruby.tmbundle/

Fork the repo. optional

git checkout master
git remote rm origin
git remote add origin git@github.com:subtleGradient/ruby-tmbundle.git
git pull

Set your subversion remote

Run this to set your subversion remote and pickup all your existing history asif you’d done a git svn clone ....

git branch macromates
git checkout macromates

git svn init https://macromates.com/svn/Bundles/trunk/Bundles/Ruby.tmbundle -R svn
cp .git/refs/remotes/origin/master .git/refs/remotes/git-svn
git svn fetch

This should give you…

...
r9048 = a0bdcedd42f7ed1867d32120bbf92bab7b72f085
r9051 = 4eb5fee1621549f676f9d5e085f1ccf03489e334
r9362 = 28b1ea1529b071fa10ba458e816e4a9454f85d8a
Done rebuilding .git/svn/git-svn/.rev_map.dfb7d73b-c2ec-0310-8fea-fb051d288c6d

If you get this error…

Remote ref refs/remote/git-svn is tracked by
  "svn-remote.svn.fetch=:refs/remotes/git-svn"
and
  "svn-remote.svn.fetch=:refs/remotes/git-svn"
Please resolve this ambiguity in your git configuration file before continuing

… then you probably ran git svn init twice without passing in a new name for each one. You’ll have to remove the extra fetch = :refs/remotes/git-svn reference if your .git/config file.

Keeping up-to-date

Fetch from your public subversion repo…

git checkout macromates
git svn fetch svn

Pull from your public Git origin…

git checkout master
git pull origin master:master

Now you have two branches in the same Git repo that pull from a separate SCM.

Congrats, you so totally rock!

Back to `master`

Once you’re done setting up and fetching changes from subversion, you should switch back to your master branch.

git checkout master

That’s it!

Next time… fetching, merging and pushing back!

Installed Browsers

2008-03-31T00:00:00-07:00

Ahoy. I just got around to sticking all my browsers in the same folder. And here’s the list of browsers I currently have installed:

Opera 9
Opera 9.5
Opera 9.51
Opera Mini™ Simulator
Opera Wii Internet Channel

Internet Explorer 5 Mac
Internet Explorer 5.01 Standalone
Internet Explorer 5.5 Standalone
Internet Explorer 6
Internet Explorer 6 Standalone
Internet Explorer 7 Standalone
Internet Explorer 7 Vista
Internet Explorer 8b1
Internet Explorer 8b1 Standalone
Outlook 2003
Outlook 2007

Camino
Firefox 1.0 Mac
Firefox 1.5 Mac
Firefox 1.5 Windows XP
Firefox 2.0 Mac
Firefox 2.0 Windows XP
Firefox 3.0 Mac
Flock
Mozilla 1.4
Mozilla 1.5
Mozilla 1.6
Mozilla 1.7
Netscape 7.2 Mac
Netscape 9 Mac

Google Android
iPhone 2.0
iPhone Simulator
OmniWeb
Safari 2.0.4 Standalone
Safari 3.0.4 Standalone
Safari 3.1
Shiira
WebKit Nightly

Yay browsers!

How many browser do you currently have installed?

Updated: Aug 15th

Simple Install of Git on Leopard

2008-02-21T00:00:00-08:00

Here’s how to install Git on Mac OS X Leopard

mkdir -p ~/Downloads/src
cd ~/Downloads/src

# Set options since we don't have GNU gettext installed
export TCL_PATH=`which tclsh`
export NO_MSGFMT=1
export GIT_VERSION='1.6.5.3'

# Get and install git
curl -O "https://kernel.org/pub/software/scm/git/git-$GIT_VERSION.tar.bz2"
tar xjvf "git-$GIT_VERSION.tar.bz2"
cd "git-$GIT_VERSION/"

# When on Mac OS X
./configure
make
sudo make install

cd ..

# Install Man Pages
curl -O "https://kernel.org/pub/software/scm/git/git-manpages-$GIT_VERSION.tar.bz2"
sudo tar xjv -C /usr/local/share/man        -f "git-manpages-$GIT_VERSION.tar.bz2"

Only needs some minor modifications to work on Dreamhost

mkdir -p "$HOME/src"
cd "$HOME/src"

# Set options even though we have GNU gettext installed
export TCL_PATH=`which tclsh`
export NO_MSGFMT=1
export GIT_VERSION='1.6.5.3'

# Get and Install Git
curl -O "https://kernel.org/pub/software/scm/git/git-$GIT_VERSION.tar.bz2"
tar xjvf "git-$GIT_VERSION.tar.bz2"
cd "git-$GIT_VERSION/"

# When on Dreamhost:
./configure --prefix="$HOME" NO_CURL=1 NO_MMAP=1
make
make install

cd ..

# Don't Bother Installing the Man Pages

After installing, you'll want to configure it

# Use Apple opendiff (FileMerge) for resolving conflicts (Mac OS X only)
git config --global merge.tool opendiff

# Ignore Carp
git config --global core.excludesfile ~/.gitignore
touch               "$HOME/.gitignore"
echo '.DS_Store' >> "$HOME/.gitignore"
echo '._*'       >> "$HOME/.gitignore"
echo '.svn'      >> "$HOME/.gitignore"
echo '.hg'       >> "$HOME/.gitignore"

# Shortcuts
git config --global alias.st status
git config --global alias.ci commit
git config --global alias.co checkout
git config --global alias.br branch

# Colors? YES!
git config --global color.ui auto

# Personal Setup
git config --global user.name "Your Name"
git config --global user.email your_email@your-domain.com

# Setup Bash Completion
mkdir -p "$HOME/bin"
export PATH="$HOME/bin:$PATH"
echo 'export PATH="$HOME/bin:$PATH"'               >> ~/.bash_profile
cp "$HOME/Downloads/src/git-$GIT_VERSION/contrib/completion/git-completion.bash" ~/bin
echo 'source ~/bin/git-completion.bash'            >> ~/.bash_profile

# Add the current Git Branch to your Bash Prompt
echo "PS1='[\u@\h \w\$(__git_ps1 \" (%s)\")]\\$ '" >> ~/.bash_profile

Baseline Grid Overlay Bookmarklet

2007-12-17T00:00:00-08:00

Here’s just a quickie to post something handy…

Drag this link to your bookmarks to save:

Baseline Grid 18/12

Please note: My site doesn’t conform to a baseline grid yet :[ Don’t judge me! :’(

Select Balanced HTML Tag

2007-11-15T00:00:00-08:00

hey kids

just wanted to share with you my latest textmate innovation.

There is a bit of standard functionality that major html editors have been capable of forever

In BBEdit it’s called View > Balance

In Dreamweaver it’s called Edit > Select Parent Tag

What this does is select the current html tag, no matter where your caret is in between the opening and closing tags.

Ok, that’s all fine and lovely, but I use TextMate. And while TextMate has an Edit > Select > Enclosing Brackets function. That doesn’t actually DO anything in HTML. Nothing useful anyway.

So, what is the solution? How do we actually make this work in TextMate?

Well, that’s where I come in. TextMate is built on a community of developers who spend time extending and expanding on what TextMate is capable of.

So, I have been goofing around with ruby scripts and insanely complex regular expressions since 2005 trying to make this work.

And I have finally managed to come up with something that is simple and uses the normal standard TextMate Select > Enclosing Brackets functionality.

I call it Select Balanced HTML Tag and I have it bound to ⌘⇧B

Let’s bring up TextMate

Put the caret inside of an HTML tag that we want to select, and hit the magic shortcut key: ⌘⇧B

And she-bang! We have our tag selected.

Then you can keep hitting the keystroke to expand your selection to each succesive enclosing tag.

BUT wait, there’s more!

My “Select Balanced HTML Tag” macro is UNDOABLE!

HAHA! Take THAT HTML! Bet you didn’t see THAT one coming!

Yes, sure. Dreamweaver has the “Edit > Select Child” command, but I find that it doesnt actually DO anything most of the time.

I must admit however that the Dreamweaver and BBEdit versions of this command actually work a LOT better and WAY WAY faster, but I find that reasoning completely useless because I’m never goign to be using either of those applications.

So to sum up.
New TextMate Macro Select Balanced HTML Tag
Selects the current HTML Tag,
similar to the BBEdit Balance and Dreamweaver Select Parent Tag commands.
Except that it’s UNDOABLE and works in TextMate and is much crappier.

Written by me, Thomas Aylott.

You can download this at BundleForge.com

Fix Safari Downloads Window on Leopard Spaces

2007-10-27T00:00:00-07:00

The one thing that really bothers be about Mac OS X 10.5 Leopard (sofar) is that Spaces doesn’t seem to handle certain windows “properly”

For instance, the Safari Downloads window.

Ideally, I want the Safari Downloads window to be viewable on all Spaces at all times. But I don’t want all Safari windows to always be on all spaces.

Here’s the trick: Change the window to be a utility panel instead.

_{This assumes you have Xcode installed}

Navigate to /Applications
Right click on Safari
Choose Show Package Contents
Navigate to Contents/Resources/English.lproj/
- Or whatever language you use
Open Downloads.nib in Interface Builder
Select the #Window# icon
Open the Info Panel
Select the Identity tab of the Info Panel
Change the Class to NSPanel
Select the Attributes tab of the Info Panel
Check the Style Utility
Save the Downloads.nib file
Quit & Relaunch Safari

Your Downloads Window should now be visible in all Spaces as long as you have a Safari window open in that space.

Enjoy!

Multiple Standalone Safaris

2007-10-10T00:00:00-07:00

Download Standalone Versions of Safari!

I’ve been rather annoyed that there hasn’t been any official or simple way to run the older versions of Safari for web development purposes. I’d come up with a really crappy way to run Safari 2 after installing Safari 3 but you really shouldn’t have to go through all that nonsense just to be able to test websites with the old Safari. “Blargh!!!” I say.

For a while now Yousif Al Saif at TredoSoft has let us run multiple simultaneous standalone versions of Internet Explorer. And of course Firefox was designed to be able to run multiple versions at the same time. But now finally we have a super easy way of running all browsers that matter side by side on the same machine without having to hack around like some kind of nerd.

But now there’s an incredibly awesome option to run all the old Safari versions as standalone browsers. This means that you don’t have to do anything hackery in the least to make them work. You just download them and double-click them like any other mac application on the planet. And you can run them all at the same time.

Michel Fortin’s Multi-Safari
is a collection of 10 standalone versions of Safari.

Safari normally use the Web Kit framework found inside Mac OS X to render web pages and execute javascript. This means that if you preserve an old version of Safari to run it on a newer version of Mac OS, it will use the newer Web Kit found in the system and you will get the same results as with the newer version. Thus, you would normally need a separate installation of Mac OS X for each version of Safari you want to test a website into.

These special versions of Safari use the original Web Kit framework that came with them, bundled inside the application. They will mimic original Safari rendering and javascript behaviours. HTTP requests and cookies however are still handled by the system and may not work exactly the same.

Why don’t browser vendors love us developers :’(

While I love that we have this option now, I think it’s a real shame that the browser makers aren’t making it easy to do this. We really should have an official way to run multiple versions of Internet Explorer and Safari at the same time. Especially now that AJAX “web apps” are all the rage, developers are needing to test more and more browsers for compatibility. Every single minor browser version has it’s own little bugs and issues and all these new sites are really stressing the browsers to the limit.

For instance, CrazyEgg.com has workarounds for separate bugs in Safari 2, Safari 3, Mac Firefox 2.0, Windows Firefox 2.0, Firefox 1.5, Internet Explorer 6 and Internet Explorer 7. Yes, you heard me right, Firefox on windows and Firefox on the Mac have separate bugs that only affect that browser on that Operating System. So in all, I have to test and tweak and debug everything in, at the very least, 7 different browsers. Oh, and I usually test for the bleeding edge version of each browser too, so that’s 10 different browsers total.

Oh, and where’s my iPhone MobileSafari emulator?! Apple doesn’t give us a real iPhone SDK and expects us to develop webapps for the iPhone. But the only way to actually do that is to buy an iPhone and test your apps on the phone directly. What a development nightmare. I seriously hope they have some ideas up their sleeves after Leopard is released.

UPDATE:

The Leopard 10.5.1 update has blocked all older versions of Safari from running.

To fix that problem, go here: Fix Safari 2.0.4 for Leopard 10.5.1

Let me know if you have any trouble with that.

WARNING Do Not Update Your Windows Testing Box!!!

2007-06-26T00:00:00-07:00

If you need to test websites in Internet Explorer 6, this message is for you.

New IE6 Patch Removes Ability to Test Memory Leaks

There has just been a patch released by Microsoft that updates IE6 to remove the memory leaks.

Some people seem to think this is great news:

Why is this bad? You might ask…

Well, are you a developer that codes stuff that could ever cause a memory leak in IE6? Do you want to test your code in IE6 to make sure that your careful work to eliminate all the memory leaks has actually worked?

Or do you just want to hide your head in the sand and pretend that all Internet Explorer 6 users that will ever visit your site will have updated their system WITHOUT installing Internet Explorer 7 which is a forced update?.

Think about it… What section of the universe uses IE6 and updates regularly but then manually goes in and disables some of the updates? Developers who need to test! That’s probably about it. Note that this update only affects XP sp2 users. Windows 2000 IE6 users won’t be updating.

Just make sure that you don’t update to the latest IE6 on your testing box or Parallels testing setup or whatever. Because it could render your testing environment pretty stinkin’ useless.

Safari 2, Safari 3, Adium & forcing WebKit Frameworks

2007-06-12T00:00:00-07:00

After installing Safari 3 you won’t be able to run Safari 2 to test websites or whatever anymore.

Here’s the trick to make it work

Install Safari 3 Beta
1. Yes, you have to reboot. Lame :(
2. Rename /Applications/Safari.app to /Applications/Safari3.app
Install WebKit Nightly as Safari2
1. Rename /Applications/WebKit.app to /Applications/Safari2.app
Unarchive the backed up Safari
1. Open /Library/Application Support/Apple/.SafariBetaArchive.tar.gz
Copy the old Safari from /Library/Application Support/Apple/.SafariBetaArchive/Applications/Safari.app to /Applications/Safari.app
Copy all the frameworks into Safari2
1. Copy /Library/Application Support/Apple/.SafariBetaArchive/System/Library/Frameworks/WebKit.framework
  
  /Library/Application Support/Apple/.SafariBetaArchive/System/Library/Frameworks/WebKit.framework/Versions/A/Frameworks/JavaScriptCore.framework
  
  /Library/Application Support/Apple/.SafariBetaArchive/System/Library/Frameworks/WebKit.framework/Versions/A/Frameworks/WebCore.framework
  
  /Library/Application Support/Apple/.SafariBetaArchive/System/Library/PrivateFrameworks/JavaScriptGlue.framework
  
  to /Applications/Safari2.app/Contents/Resources
Open Safari2

Shell script

Alternatively, you can use this shell script to make it all work without having to do it all manually…

Install Safari 3 Beta
Install WebKit Nightly
Unarchive the backed up Safari
1. Run this from the terminal:

open "/Library/Application Support/Apple/.SafariBetaArchive.tar.gz"

4. Then run this script to do the rest…

mv /Applications/Safari.app /Applications/Safari3.app &&
mv /Applications/WebKit.app /Applications/Safari2.app &&
ditto "/Library/Application Support/Apple/.SafariBetaArchive/Applications/Safari.app" /Applications/Safari.app &&
rm -Rf \
  /Applications/Safari2.app/Contents/Resources/JavaScriptCore.framework/ \
  /Applications/Safari2.app/Contents/Resources/JavaScriptGlue.framework/ \
  /Applications/Safari2.app/Contents/Resources/WebCore.framework/ \
  /Applications/Safari2.app/Contents/Resources/WebKit.framework/ &&
cp -Rf \
  "/Library/Application Support/Apple/.SafariBetaArchive/System/Library/Frameworks/WebKit.framework" \
  "/Library/Application Support/Apple/.SafariBetaArchive/System/Library/Frameworks/WebKit.framework/Versions/A/Frameworks/JavaScriptCore.framework" \
  "/Library/Application Support/Apple/.SafariBetaArchive/System/Library/Frameworks/WebKit.framework/Versions/A/Frameworks/WebCore.framework" \
  "/Library/Application Support/Apple/.SafariBetaArchive/System/Library/PrivateFrameworks/JavaScriptGlue.framework" \
  /Applications/Safari2.app/Contents/Resources/

UPDATED Date: 2007-06-13 18:15:32

How to force another app to open with the old WebKit

You can force anything to run with the old WebKit if it’s having problems working with the new beta.

env DYLD_FRAMEWORK_PATH=“/Applications/Safari2.app/Contents/Resources” WEBKIT_UNSET_DYLD_FRAMEWORK_PATH=YES “PATH_TO_THE_BIN_IN_YOUR_APP” &

Just replace PATH_TO_THE_BIN_IN_YOUR_APP with the path to the binary in the app you want to force to use the old WebKit frameworks.

How to make Adium work after installing Safari 3

For Adium you’d use:

env DYLD_FRAMEWORK_PATH=“/Applications/Safari2.app/Contents/Resources” WEBKIT_UNSET_DYLD_FRAMEWORK_PATH=YES “/Applications/Adium.app/Contents/MacOS/Adium” &

TextMate View Source from Internet Explorer

2007-06-11T00:00:00-07:00

A quick registry script for using TextMate to view source from Internet Explorer.

Here’s the Microsoft documentation: https://msdn.microsoft.com/workshop/browser/configuration/clientreg/clientregistrylayout.asp

This assumes that you’re using Parallels 3 and the username Administrator

Windows Registry Editor Version 5.00 

; GOAL: Set TextMate as HTML editor in Internet Explorer 6.0 
; Windows version: XP 
; EASY USAGE: name this file iex-textmate.reg and double click on it 
; Hard Usage: IMPORT this file using REGEDIT.EXE found in c:\WINDOWS 
; Last modified date : Mon Jun 11 17:30:55 EDT 2007

; Be sure to also reset Explorer>Tools>Internet Options>Programs 

; Microsoft documentation 
; https://msdn.microsoft.com/workshop/browser/configuration/clientreg/clientregistrylayout.asp 


; Add TextMate in the list of supported HTML editors 
[HKEY_CLASSES_ROOT\.htm\OpenWithList\TextMate] 

[HKEY_CLASSES_ROOT\.htm\OpenWithList\TextMate\shell] 

[HKEY_CLASSES_ROOT\.htm\OpenWithList\TextMate\shell\edit] 
"FriendlyAppName"="TextMate" 

[HKEY_CLASSES_ROOT\.htm\OpenWithList\TextMate\shell\edit\command] 
@="\"C:\\Documents and Settings\\Administrator\\Application Data\\Parallels\\Shared Applications\\TextMate (Mac).exe\" \"%1\"" 


; OPTIONAL: Within Internet Explorer "View Source" with TextMate 
; but prefer to use Edit button (got to add this) on Toolbar 
[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Default HTML Editor] 
"Description"="TextMate" 

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Default HTML Editor\shell] 

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Default HTML Editor\shell\edit] 

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Default HTML Editor\shell\edit\command] 
@="\"C:\\Documents and Settings\\Administrator\\Application Data\\Parallels\\Shared Applications\\TextMate (Mac).exe\" \"%1\"" 


[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Default MHTML Editor] 
"Description"="TextMate" 

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Default MHTML Editor\shell] 

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Default MHTML Editor\shell\edit] 

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Default MHTML Editor\shell\edit\command] 
@="\"C:\\Documents and Settings\\Administrator\\Application Data\\Parallels\\Shared Applications\\TextMate (Mac).exe\" \"%1\"" 


; View Shared Editor
[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\View Source Editor] 

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\View Source Editor\Editor Name] 
@="C:\\Documents and Settings\\Administrator\\Application Data\\Parallels\\Shared Applications\\TextMate (Mac).exe" 

; ============================================= EOF

Selling CrazyEgg PowerBook 12

2007-06-07T00:00:00-07:00

Aluminum Apple PowerBook 12"
with External FireWire iSight

Click images to see fullsized

CrazyEgg!

This is the computer that I used to code CrazyEgg.com It has been an extremely good computer but I'm upgrading to a desktop iMac. I just can't justify letting this awesome little machine not get used by someone who will love it.

Best Keyboard

If you've never used a PowerBook keyboard, you have no idea what you're missing. This thing has the most responsive and comfortable keyboard I have ever used, seen or even heard of.

Amazingly Small

They mean it when they call this puppy an ultraportable. It's literally the size of a pad of paper (US Letter sized).

Condition

The PowerBook is in extremely excellent condition
Perfect screen. Perfect keyboard. All ports are perfect. Perfect top cover. 3 tiny nicks in the handrest (too small to photograph). Bottom has a few extremely minor scratches (barely noticable in photo).

The battery is new. The original battery that came with the machine was replaced by Apple with their battery recall.

Never been dropped

No water damage

I've been extremely careful with this machine.

What you get:

Apple PowerBook 12" Computer (M9184LL/A)
NEW Battery
Original Charger
with Extension cable
Mini-DVI to VGA adaptor
External iSight with auto-focus
Original 6' White FireWire Cable
3 Original Plastic iSight Stands
FireWire Cable Adapter
Plastic iSight Case
Original PowerBook Box
Original iSight Box
Original Booklets
Original Disks

About this Mac

Mac OS X Tiger
iLife 2006
G4 1.33 Ghz Processor
1.25 GB RAM Maxed!
60 GB Hard Drive
2 USB 2.0
FireWire
AirPort Extreme (802.11g WIFI)
10/100Base-T ethernet
56k modem
Bluetooth
NVIDIA GeForce FX Go5200 (4X AGP)
with 64MB of dedicated DDR SDRAM
- 12.1" Internal LCD: 1024 x 768
- Max External LCD: 2048 x 1536
- Supports External DVI, VGA, Composite and S-Video (with adapters)
SuperDrive
- read DVD at 8X
- write DVD-R at 4X
- read CD-ROM at 24X
- write CD-R at 16X
- write CD-RW at 4X

Buy my 12" PowerBook on eBay

I Love Internet Explorer!

2007-04-11T00:00:00-07:00

I just want to put this out there since so many people still seem to have a bad relationship with IE. We’ve all been burnt in the past :(

Meh

Those dark days should be well past us now. We all use Macs with Parallels. We all run Internet Explorer 6 and Internet Explorer 7 constantly while designing and developing our sites. Don’t you?

We’ve all pretty much figured out what can and cannot be done in IE, and how to easily get around the biggest problems.

But not just all that, there are actually some really compelling features that are only implemented in Internet Explorer.

Awesome Unique Features

Internet Explorer supports using javascript in your CSS. That’s right. You can define CSS rules using javascript in Internet Explorer!

And then there are the crazy Internet Explorer CSS filters. You can do silly stuff like blurring the main content when you open a lightboxy-thing, but only in Internet Explorer. I actually have that working over at the CrazyEgg overview page. I reinvented the ~~wheel~~ lightboxy thing with almost all CSS instead of javascript.

The future’s so bright I gotta wear shades!

There is virtually no area on the web where you have to support IE5 anymore. Don’t get me wrong, I can totally support IE5 if I absolutely have to. You just don’t have to do it anymore.

Internet Explorer 6 was released back in the dark ages. Who even uses Windows 2000 still? Let alone Windows 98. And for those few people that do, do you really care about them? It’s really much more worth your time to make your sites work perfectly in Safari and Opera. People who use Safari and Opera are more likely to be people with money.

Just look at the Market share for browsers. IE5 has 0.35% of the market. That’s well below Opera 9’s 0.65%. So, when thinking about supporting IE5, get right on that after you fully support Opera 9 and Safari. And it’s not like IE5’s market share is going up. Obviously you have to look at the browser share of your target market. Not all markets have the same browser share.

Now consider the fact that IE8 is going to come out eventually and you’ll be able to completely drop support for IE6 too! Ahh, that’ll be the day.

Slingshot around the sun would be faster

2007-04-09T00:00:00-07:00

Ok, so you all now know that I’m in on the Slingshot beta now. They have asked me to be candid and blog about my experiences with developing for Slingshot, good or bad, in “real time.” So that is what I am doing…

I finally had the conference call with one of the developers at Magnetk and David Young ^{founder and CEO of Joyent} last Thursday. He originally confirmed the call for Wednesday. I emailed a number of times but didn’t hear anything until Thursday morning when they called. Five minutes early or 1,435 minutes late, you decide ;)

And then I was promised that I’d “revieve the code” by today (monday) and be able to start hacking around with Slingshot. Shockingly enough, I haven’t heard a peep from them.

Sofar, I’d say we’re off to a somewhat shakey start. Three weeks before the official launch of Slingshot and I don’t have access to the code or documentation.

I forget, is PST 3 hours or 27 hours behind EST?

I’m not an impatient person by any stretch. I’m just used to people doing what they say.
Why would you voluntarilly commit to a time unless you’re absolutely certain that you can exceed it?

Slingshot is a real risk on their part. If they don’t handle this properly they run the risk of alienating their developers. And if there aren’t any people developing on their platform then it will shrivel up and die.

Obviously I don’t think that being a wee bit late a few times in a row is going to jinx you from the get go, but it is starting them out in the red. They’re already behind in my book. Time is money, baby! If you’re going to waste my time then I might think twice about setting myself up for it again.

You expect more from a for-profit business

I’ve been spending more and more of my time on open-source or open-standard¹ software over the last few years. In that environment you come to expect things to be late and have vast expanses of no forward development, bad communication with the development team, etc… It’s just the nature of the beast.

But when you try and make a closed-source for-profit business, I’m going to expect a little more out of you. You should provide your customers with some way to contact you. You should respond when they do contact you. You should be all in all a bit more professional.

Lately I’ve actually seen the exact opposite to be true.

Open souce developers all seem to be hanging out in IRC and in mailing lists and blogs and on IM and actually reading and responding to their email. Not to mention that if you ever have any problems with their code or desperately need to know how something is implemented you just have to pop open their source code and read or edit the stuff directly, skipping out the middle-man altogether.

Ok, now I’m just ranting like a maniac

Ok, that’s all extremely unfair to the poor Joyent Slingshot peoples here. They aren’t exactly Adobe or anything. And Slingshot isn’t exactly Adobe Apollo.

I’m sure they’ll get something to me tomorrow. And I’m sure it’ll be way less than 2000 minutes late. To be completely fair, it’ll still be Monday for another few hours. The last thing they need is my abuse :P They did have me agree to blog in “real time” though, so it’s their own fault.

-Oi, i need some sleep.-

Please forgive the rant my friendly internet peoples. Everything is all smiles and joy and the raindrops shall skitter away as does the dew when once it falls upon the stillness of the pond, or something like that…

UPDATE

It’s now 10:45pm EST Tuesday night… I haven’t hard a peep out of them since last Thursday. But I’m sure they’ll email me, any minute… now … or not.

Apollo, here I come!

UPDATE2

Wednesday at ~1:30pm EST they emailed me back…

We found a big bug in unsync. We should have it fixed today.

Well, that’s probly good. Don’t want to have buggy stuff. I just wish they’d emailed me on monday to let me know I wasn’t going to get it that day.

UPDATE3

I finally got access to Slingshot today, Friday April 13 2007. The Windows version isn’t ready yet.

¹ TextMate bundles are an “open-standard.” While the primary application that uses the bundles is for-profit and closed-source, the bundle file formats themselves are open and anyone can use them. See, for example The Power of Textmate on Windows

subtleGradient on Slingshot Beta

2007-04-04T00:00:00-07:00

I was recently offered access into the Joyent Slingshot Beta

I’ll be discussing the details with David Young^CEO^ in a few minutes. Do you have any questions you’d like me to ask for you?

Obviously the most pressing question that most people seem to be wondering is how this puppy compares with FireFox 3 and Apollo alpha.

Well, I’m also looking into Apollo. I’ve done quite a bit of looking into the deets. I’ve already hacked on some local Apollo craziness.

Apollo is a way to run static web tech on your local machine. That means you have the ability to run HTML, Javascript and Flash. You’ll eventually be able to mix in some PDF in there too. Now, don’t get me wrong, Apollo is totally stinking awesome! But, I think a few of their best features are also their greatest faults. I’ll leave the Apollo rant for another article.

I haven’t really looked into Firefox 3 much more than running the alpha to compatibility test CrazyEgg. AFAIK FireFox 3 is just going to be FireFox 2 with some fancy offline capabilities and such. I also strongly feel that some of FireFox’s best features are also their worst. Again, more on that later.

So, that brings us back to Slingshot.

What’s the big difference?

Ruby! That’s the big difference. You’ll be able to write real desktop applications using Ruby On Rails! No installing a custom framework. No crazy custom application bundles. Not tied into a web browser as just another window or tab. Full blown web applications on your desktop using real binaries and junk!

That’s the promise at least. We’ll see how this stuff pans out in the end. I’m keeping my expectations really low so that I’m not disappointed.

_{I’ll be blogging about this thing as I use it.}

_{So, expect more content from me soon.}

Web Development Environment and Workflow

2007-03-30T00:00:00-07:00

Over the years I have worked with a bunch of teams and solo. I usually go with the flow as far as the group workflow. I have had to roll my own subversion workflow in the dark days before it was a normal and expected thing to do.

Here is a rundown of the major types of workflows I have used…

My Ideal Web Development Environment

Subversion Repository:
- Accessible via https
- Trunk branch for new features
- Stable branch for production and quick patches
Development:
1. Local testing/development environment
  - Local working copy of trunk and stable
  - Local server, database, etc…
    - for both your trunk and stable checkouts
  - A complete local environment for development and testing
    - It should also have no internet dependancies so that you can still keep working if you lose internet or on your laptop on the road, etc…
2. Edit locally
3. Test locally
4. Commit changes to trunk
Deploy:
1. Merge trunk to stable
2. Deploy stable to staging server
  - Commit any necessary changes to stable from your local
3. Deploy stable to production
Bug fixes:
1. Make minor tweaks to stable checkout
2. Test locally
3. Commit changes to stable
4. Deploy stable to production

For environments where you can’t test locally
and are the only person with access to the testing server

Subversion Repository
- Trunk
- Stable
Development:
1. Local working copy
  - A local checkout of trunk
2. Edit locally
3. Upload changes to testing server and test
4. Commit from local working copy
Deploy:
1. Merge trunk to stable
2. Deploy stable to testing server for final test
3. Deploy stable to production
This is a slow and annoying way to work!

UPDATE: Rob McBroom has come up with what looks like a really handy way to use TextMate to work with remote projects.

The two commands are “Get Remote Project” and “Upload Project
Changes”. … They essentially save all files and call rsync - au on your directory in different directions.

For environments where you can’t test locally and share a single testing server with other developers.

Subversion Repository
- Trunk
- Stable
Development:
1. Local working copy
2. Edit local working copy
3. -Can’t test before committing-
4. Commit from local working copy
5. SVN update testing server and test
Deploy:
1. Merge trunk to stable
2. Deploy stable to testing server for final test
3. Deploy stable to production
This is a horrible way to have to work!

With this workflow you have to commit extremely minor changes before you can even test them.

It’s a massive waste of time to commit every single minor change before you can even test it.
But if you don’t have your own dedicated testing environment
then you just have to commit all changes before you can test them. Avoid this setup!

Personally, I’d really rather not work on a project unless I can test all my changes quickly and easily. My time and my Clients money is valuable.

In the past, I have worked remotely on projects that couldn’t be tested locally, but I had my own dedicated testing environment on the staging server. I would prefer not to have to ever do that again. Uploading changes before you can test them is just hideously slow.

I will make extremely minor changes remotely if the cost of setting up the local environment is higher than the potential that making a bad edit will trash the production server. But, usually those changes are just HTML, JavaScript and CSS. And all that stuff is really easy to test before committing.

The CrazyEgg Development Environment

Both developers work remotely.
- I live in North Carolina
- Our Butler lives in Oregon
- Hiten and Neil from ACS live in California
This is all Rails stuff with some secret sauce.
We use Capistrano to deploy.
We have a bunch of custom scripts and stuff

to check server status and stuff like that.

Local developers each have a complete local testing environment.
We make changes locally, test locally and commit changes to the trunk branch of our subversion.
When we have made all of the changes necessary to make a deploy,

we then merge trunk to stable and deploy to our staging server.
We test the changes on the staging server

and then make any changes necessary and commit to stable.
We then deploy the stable checkout to our production servers.

Quick bug fixes are handled on the stable branch. This helps keep the unstable feature development and the quick fix development as separate workflows.

I do occasionally skip the whole staging and deploying thing for very small changes that don’t require a full deploy or restarting any processes or anything. Mostly just CSS and JavaScript changes. Then you can just scp them to production and restart your processes if necessary.

John Butler created a system that allows us to deploy without having to shut down the system now, so that helps.

The sixteenColors Development Environment

Developers have local testing environments
When we make enough good changes we
commit to trunk from our local and
deploy trunk to production
- using Capistrano

This is the secret alpha version I’m talking about. The current version of the website was developed by lordscarlet a long time ago in ASP.NET. The alpha is juts a super-tiny webapp at the moment. There’s no need to waste the few hours a month we have to work on it with a verbose and tedious workflow.

My old offsite totalTrak.net Development Environment

Since this is an ASP.NET application and I was developing it on a PPC PowerBook,
I had no easy way to setup a local testing server. I was also the only person working on the project.

I had a local mirror of production
- A checkout of the trunk working copy
  - You should always have separate stable and trunk branches.
  - I didn’t bother with it on this project since the app was extremely stable (therefore no need to make quick patches on stable) and I was the only developer working on it.
    
    Excuses excuses…
All changes made locally
Tested HTML, CSS & JavaScript locally
Tested T-SQL in TextMate locally
- I hacked together a crazy system to connect to their SQL Server
  - It involved some crazy unixy shell stuff with an SSH Tunnel to their SQL Server ports via their MacMini blog server
Upload the changes to the testing server for testing
- I used Transmit to manage the mirroring.
- I also used the TextMate Transmit bundle to upload files from my working copy to the testing server
Commit changes from local
SVN update testing server for final test before deploy
- SSH tunneling to mount their SMB shares locally
  - This was slow, but it worked for subversion operations.
  - TextMate totally chokes on a mounted share normally,
    
    but over an SSH tunnel? Way too slow.
SVN update production via SSH
- We made sure that the .svn folders weren’t served.
- Normally, you should always make your production server use a checkout rather than a working copy.
  - This was all very pre-Capistrano

My really old onsite Development Environment

Local machine had no project files
Shared development server
- Each developer had a separate set of working files
  
  on a single shared development box
- We all shared a single development SQL Server
  - We occasionally made duplicates of tables to test out some crazy operations.
I made changes to the files over a SMB share
I committed changes to trunk from the share
deployed by svn upping the production working copy

Way way way way back in the day…

Back in the dark Dreamweaver days

before I discovered subversion.

We all shared a single development server
We made changes to the files over a SMB share
We then deployed by replacing the files on production with the development files
Then we franticly checked everything to make sure it all still worked

I sure am glad we have some better workflows today. Yeesh

What is your workflow?

How do you guys work? What kind of development do you do? There are LaTeX guys and Ruby guys and ASP guys out there. What kinds of workflows are standard for your environments? Will you put up with having to upload to a testing server to test every single minor change? Or do you demand to have a local development environment that is just like your production environment?

Creative Suite 3 Announcement video

2007-03-27T00:00:00-07:00

Happiness is a choice

2007-03-21T00:00:00-07:00

This guy proves that life is what you make of it.

Happiness is a choice, not a condition.

You have no control over what life does to you, but you do have a choice about what you bring to the table.

Junior! The Wendy’s Guy

Best gift for a dad, evar!

2007-03-14T00:00:00-07:00

John, the lead developer of CrazyEgg just got his dad a seriously stinking awesome car!

I wish I had a clue what he was talking about with the hood up though, I’d probly be even more impressed.

Slow down?! Yes!

2007-03-13T00:00:00-07:00

This TED talk is all about slowing down. Returning to the normal human pace of life in order to be more productive and enjoy life.

This fast-paced society we live in isn’t going to last much longer. We should enjoy our lives or else what’s the point of living them?

https://www.ted.com/tedtalks/tedtalksplayer.cfm?key=c_honore

New TextMate WebPreview Window

2006-11-15T00:00:00-08:00

(with Hacked Nibs)

Download the New TextMate WebPreview Window Nibs

I got rid of the drawer and moved all that stuff to the bottom.

Now it looks mildly less offensive.

Filename / Filepath Completion for TextMate ScreenCast

2006-11-02T00:00:00-08:00

Part of the official TextMate Experimental Bundle
(at the moment)

Filename / Filepath completion.

If figures out where your cursor is and if you’re in the middle of typng a filename or path and does an ls. Then pops up a menu to choose the filename you want.

Just watch the screencast

English Word Completion for TextMate ScreenCast

2006-10-30T00:00:00-08:00

Download the English Word Completion TextMate Command

Download the entire subtleGradient bundle

English word completion.

Basically just a modified version of Allan’s pastie version from the TextMate release notes.

It’s pretty basic, but it keeps the completed part selected after you insert it so that you can use it a bunch of times in a row with the same results.

Just watch the screencast

Updated: Now the link actually goes to something!

Updated Again!: Now the zipped bundles aren't broken!

Attack of the StandAlone Internet Explorers!

2006-10-25T00:00:00-07:00

Oh boy, Internet Explorer 7 has been officially unleashed.

We still have a bit of time before it's a virtually mandatory upgrade for everyone.

This is all really old news at this point.

Anyway, I just came across an easy way to set up Internet Explorer 7 as a standalone browser. You'll need to do that if you still want to have the ability to use Internet Explorer 6. Or need to, because who would want to?

It turns out that they also have a nice installer for getting Internet Explorers 3 thru 6 installed as standalone browsers. With fully functioning conditional comments support and the version number in the title bars.

You wouldn't believe how many people with money still use Internet Explorer 5 :-o

Great Browser inCompatability Testing Batman!

Announcing CrazyEgg 1.0

2006-08-23T00:00:00-07:00

This is the secret-ish project I’ve been working on for quite a while now.

As you can see from the CrazyEgg about page, the original prototype was developed by John Carlin. After that there have only been two developers. Me and John Butler.

I must say, John Butler is about the greatest developer I’ve ever met.
But, I managed to get a lot of good stuff into CrazyEgg too. ;)

Basically it tracks how people use your website and then you can view reports about it.

Go check out the DEMO

Specific reporting features are currently:

Overlay mode
1. Overlay mode shows little markers, panels and outlines next to every clicked thing with the number of clicks and the percentage of total clicks that represents.
List mode
1. List mode show a list of clicked items, whether they could be found in the report or not. Align with the number of clicks, percentage and type of element.
Heatmap mode
1. Heatmap mode shows an overlay on top of your page with hot spots for where people clicked.

Yes, those screenshots are from WordPress.com

We have a whole bunch of stuff up our sleeves. If you have any ideas of what you’d want us to add, post a comment.

Welp, back to working on the crazy updates. :D

Grid Overlay Bookmarklet

2006-07-27T00:00:00-07:00

Just a quick note to share my version of Andy Budd’s Layout Grid Bookmarklet.

Grid Translucent Centered

Grid Translucent Left-Aligned

This version uses a translucent png.

Share and enjoy!

UPDATE: New scripts for all browsers. Now you can also click the grid on the page to remove it.

Just a quick note to share my version of Andy Budd’s Layout Grid Bookmarklet.

Grid Translucent Centered

Grid Translucent Left-Aligned

This version uses a translucent png.

Share and enjoy!

UPDATE: New scripts for all browsers. Now you can also click the grid on the page to remove it.

Growl Notifications for iCal (Tiger only)

2006-07-21T00:00:00-07:00

This only works in Mac OS X Tiger 10.4

I’m still working on an updated version for Leopard.

I love iCal, but I really hate the giant reminder panel stealing focus and getting in the way. Ewww.

I love Growl. There was an obvious need for a way to do iCal Growl notifications.

iCal has a nice feature where you can run an applescript using the Open File… feature in the alarm thing. The problem with this is that it doesn’t send any applescript variables to the script. So you would have to either do a generic alert for every reminder or have a separate script for each reminder. This is not hip, nor DRY.

I went searching for a solution to this and came across the article iCal and Growl @ Origa.me.uk where he shows you how to hack the internal applescript file that handles sending an Email on an alarm. This is totally awesome! You get access to all of the variables and can do the Growl. The only problem with his method is that it removes your ability to ever send another Email Alarm again.

I took his idea and added a simple if filter to the applescript. It works by checking for the email address “Growl”. If it sees that address then it does a Growl thinggy, otherwise it does the email like normal.

Download the Scripts

iCal Mail Script (with Growl Support)

How to Install & Use

Add the email address “Growl”

to your personal Address Book entry.
- (Mark it as secret if you have that feature enabled.)
Copy Mail.scpt into the iCal resources.
- /Applications/iCal.app/Contents/Resources/
Copy Mail.scpt into the iCalHelper resources.
- /Applications/iCal.app/Contents/Resources/iCal Helper.app/Contents/Resources/
Quit iCal
- You should Quit iCalAlarmScheduler too,
- or you can log out and back in.
Make a new iCal Event
Make a new Email Alarm on that event
1. Set the email address to “Growl”

Bask in the awesome iCal Growl Alarm goodness!

Here is the actual code:


on send_mail_sbr(subjectLine, messageText, myrecipient)
	if myrecipient = "Growl" then
		send_mail_sbr_GROWL(subjectLine, messageText, myrecipient)
	else
		send_mail_sbr_EMAIL(subjectLine, messageText, myrecipient)
	end if
end send_mail_sbr

on send_mail_sbr_EMAIL(subjectLine, messageText, myrecipient)
	tell application "Mail"
		set mymail to (make new outgoing message at the beginning of outgoing messages with properties {subject:subjectLine, content:messageText})
		tell mymail to make new to recipient at beginning of to recipients with properties {address:myrecipient}
		send mymail
	end tell
end send_mail_sbr_EMAIL

on send_mail_sbr_GROWL(subjectLine, messageText, myrecipient)
	tell application "GrowlHelperApp"
		set theName to "New Event"
		set theAppName to "Custom iCal Notifications"
		set the allNotificationsList to {theName}
		set the enabledNotificationsList to {theName}

		register as application theAppName ¬
			all notifications allNotificationsList ¬
			default notifications enabledNotificationsList ¬
			icon of application "iCal"
		notify with name theName ¬
			title subjectLine ¬
			description messageText ¬
			application name theAppName ¬
			with sticky
	end tell
end send_mail_sbr_GROWL

TextMate JavaScript Prototype & Script.aculo.us

2006-07-17T00:00:00-07:00

Howdy. I’ve just been fiddling around with the official Subversion and JavaScript bundles.

Prototype, Script.aculo.us & JavaScript

I just added a new bundle for Prototype & Script.aculo.us

The original bundle was created by Justin Palmer in the Textmate Vibrant Ink Theme and Prototype Bundle
Martin Ström added a bunch of handy snippets in his TextMate Prototype & Scriptaculous Bundle
For the longest time I’ve had my Javascript Extras Bundle in my personal Svn Repo, where I’ve had a great hodgepodge or random carp.

Since Martin announced his new bundle in the TextMate Mailing List I’ve decided that it’s time our stuff is used by the masses (whether they like it or not). The new Prototype & Script.aculo.us is in the official TextMate subversion repository.

How to get it?

You’ll have to check out the latest version of the Javascript bundle, Then you need to checkout the Prototype & Script.aculo.us bundle.

-Or just download a zip of them all here- disabled this download since it’s like way old

-That zip contains subversion checkouts of each bundle. All you have to do to keep them up to date is run svn up * on them.-

What’s it got?

Snippets galore

Martin Ström created about 72 snippets:

Ajax.PeriodicalUpdater
Enum.each
Event.observe
Field.…
Form.…
Effects.…
Position.…
etc, etc, etc…

JavaScript Language Syntax

There were some things that I had in the language syntaxes that were more generic and should be put in the main JavaScript language. So i did that. I also put in a better indent pattern preference.

Prototype & Script.aculo.us Language Syntax

The language syntax was originally created by Justin Palmer. Martin Ström added some FireBug keywords and some other stuff to the language. I, Thomas Aylott added support for:

class.instance.constructor
string based property.function’s
a way to guess what is a regular variable
Much better Symbol list support for OOP style javascript.
other random tweaks & carp

Bracketed Language Syntax

This is a wrapper for the main Prototype & Script.aculo.us language.
It has nested scopes for round, curly & square brackets. It also has a special curly bracket scope for JavaScript functions.
I also updated my Brilliance Black theme to fully support these crazy new scopes.

Curly brackets, groups and delimiters
Round brackets, groups and delimiters
Square brackets, groups and delimiters
Curly Function brackets, groups and delimiters

The bracketed wrapper is really meant to be for Javascript what the XHTML strict syntax is for xhtml.
The idea is that it should better understand the larger parts of the language.
The first useful upshot of all that is the fancy coloring possibilities that it allows.
But you could use the scopes to make function block specific snippets or what-have-you.

The reason I don’t just use it for prototype or javascript itself is that it reduces parsing performance on large and complex scripts (like the prototype library).
Other than that, it doesn’t hurt anything.

Maybe I should move it into Experimental?

There’s way more to be said for collaboration and sharing and how wonderful and great it all is, but everyone stopped reading half way through so there’s not much point in me continuing on about it ;)

Balance Jr 2.5 for TextMate

2006-05-12T00:00:00-07:00

㊷ Balance Jr^2.5 ☛

tAylott_subtleGradient.tmbundle.zip

Or as always, you can grab all my stuff from my subversion repository. https://textmate.svn.subtlegradient.com/

Also added are a couple commands to preview the currently selected Ruby on Rails view with Safari or inside TextMate.

    1 (?x)                                           
    2 <(\w+)[^>]*>[^<]*</\1>                         # HTML tags that don't contain text
    3 |(?<=(<%@\s|<%\#\s|<%=\s))[^%]*(?=\s%>)        # The contents of various other forms of Embedded source
    4 |(?<=<%\s)[^%]*(?=\s%>)                        # The contents of Embedded source
    5 |(?<=<!--\s)[^->]*(?=\s-->)                    # HTML Comments
    6 |\b[\w-]+\b(?=\s*=)                            # HTML Attribute name
    7 |\s\b[\w-]+\b=\"[^\"]*\"                       # HTML Attribute name value pair
    8 |(?<=\")[^\"\n<>]*(?=\")                       # HTML Compatible String Double
    9 |(?<=\')[^\'\n]*(?=\')                         # 'String Single'
   10 |(?<=\[)[^\[\]]*(?=\])                         # [Square Brackets]
   11 |(?<={)[^{}]*(?=})                             # {Curly Brackets}
   12 |(?<=[^/]>)[^><]*(?=</)                        # >Text Inside HTML Tag</
   13 |\#[0-9a-fA-F]{6}                              # Hex Colors #AABBCC
   14 |\#[0-9a-fA-F]{3}                              # Hex Colors #ABC
   15 |(?<![\d])-?\d+(?:\.\d+)?(?!=\d)               # Number 123 123.123 -123
   16 |[@$!]\w+\b                                    # @variables $variables !etc
   17 |(?<=/\*).*(?=\*/)                             # /* Contents of Comment Blocks */
   18 |/\*.*\*/                                      # /* Comment Blocks */
   19 |(?<=:)[^;}\n]*(?=;)                           # CSS Attribute Values
   20 |(?<=[\(,:])[^\(\),\n]*(?=[\),;])              # Comma Delimitated
   21 |<[^>]*/>                                      # Closed xHTML Tags
   22 |(?<=\")(?=(>|/>| />))                         # Placer for adding HTML Attribute Values
   23 |<[^>]*>                                       # HTML Tags
   24 |(?<=\")[^\"\n]*(?=\")                         # String Double
   25 # Thomas Aylott <oblivious@subtleGradient.com> #

How I Use IE6, IE7, Firefox & Safari on the Same Machine Simultaneously

2006-05-10T00:00:00-07:00

I am currently running…

Internet Explorer 6
Internet Explorer 7
Safari
FireFox

…on my PowerBook ^PPC

The setup to make this happen…

Windows XP SP2 on a Bare bones PC
1. Tweaked Terminal Services
2. IE6 & IE7 installed simultaneously
3. Three user accounts
PowerBook
Microsoft Remote Desktop
1. Three Copies, renamed with custom icons
Quıcĸsıɩⅴεʀᵦ₄₉

How to make it happen

Get a PC

I didn’t really want to, but Virtual PC ~~sucks~~ is too slow.

I would just get a MacIntel, but I just got a nice new PowerBook and I use Photoshop and other non-intel native stuff.

Install a Legally Licensed Copy of Windows XP ^PRO

You should be able to do that yourself.

Tweak Windows XP’s Terminal Services

This will allow you to have multiple Remote Desktop connections from your PowerBook to your PC.

I followed these directions to Set up Multiple Simultaneous Remote Desktop Connections.

The instructions didn’t work the first time. I had to do it again and make sure I followed the directions carefully.

Just remember to use decimal instead of hex in STEP 4.

Oh, and you need at least 2 users

Install Internet Explorer 7 without uninstalling Internet Explorer 6

I accidentally used a modified version of these instructions to Test Internet Explorer 7 Without Installing It

Here’s what I did differently in a nutshell

Download the latest >BETA
Install it
Reboot when it tells you to
Uninstall it
Reboot when it tells you to
Follow the directions to Test Internet Explorer 7 Without Installing It
1. At the part where it tells you to copy the long winded crazy folder that the installer creates, you have to copy all the non-invisible contents to a new folder instead of just duplicating the folder.
I also changed the name of the shortcut to the .VBS file to “Internet Explorer 7” and gave it the IE7 icon

Set up multiple copies of Microsoft Remote Desktop

Get Microsoft Remote Desktop
Make 3 copies of the app
Rename them
1. Internet Explorer 6
2. Internet Explorer 7
Give them slick icons
1. I used the icon from the Mac version of Internet Explorer 5 for IE6
2. I found this slick Internet Explorer 7 icon with google
Add a couple lines to your hosts file /etc/hosts
1. THE_IP_OF_YOUR_WINDOWS_MACHINE Internet_Explorer_7
2. THE_IP_OF_YOUR_WINDOWS_MACHINE Internet_Explorer_6
Open each of the renamed Remote Desktop apps
Set up all your connection settings
1. Using the labels you just put in the hosts file
Save your connection settings files
1. Name them whatever you want

But, wait! There’s more!

Set up Quicksilver command files for ultra slickness

The latest prereleases of Quıcĸsıɩⅴεʀᵦ₄₉ supports saving an command as a file. That file is then double-clickable for instant activation!

Get the latest prerelease of Quicksilver

For each RDC setting file / renamed RDC app combo do:

Set up a command that opens your RDC saved setting file in the right renamed copy of RDC
Ctrl-return to grab the command as an object
Select the “Save command to file…” action
Manually hit tab to show the third pane
1. For some reason it doesn’t come up automatically
Select a folder in the third pane to save the command into
1. I just dragged a folder into the third pane to select it
2. You cannot enter a filename, you have to rename the qscommand file after it’s created
Find and rename the new qscommand file
Give it a slick icon
Put it somewhere handy

Enjoy!

PS: This should all be legal. I don’t think any of this would void any license agreements or anything, since you’re still just a single user. But if this isn’t legal and you get in trouble for it, you have been warned. I am not responsible for any of your actions.

Balance Jr 2.0 for TextMate ScreenCast!

2006-05-06T00:00:00-07:00

The following is not exactly a transcript of the audio from my new Balance Jr ^2.0 command screencast.

Balance Junior the 2^nd Screencast

Download

tAylott_subtleGradient.tmbundle.zip

Or as always, you can grab all my stuff from my subversion repository. https://textmate.svn.subtlegradient.com/

Hello internet people

Thomas Aylott (aka subtleGradient) here to show you the latest edition of my Balance Jr command.

I noticed that there were a number of problems with the original that have always bugged me.

For example:

THIS ONE!!!! Where it selects the contents of string as well as the text between strings. Bleah, horrible.

Also, Duane Johnson released his snazzy Jump commands.

Here, have a goosee and the new regex. Note the lovely use of comments to disambiguate.

Let me show you a few things you can do with it.

Ok, there’s some HTML.

Balance Jr Foreword grabs stuff in big chunks When the caret is outside a tag it’ll grab the entire next tag. When the caret is INside a tag, it’ll grab the entire next attribute value pair, or whatever biggest thing it can get ahold of

Balance Jr Backwards is much more fine tuned As you can see.

for example, You can place the caret inside an html attribute’s value string, hit Balance Jr back and it selects the contents of the string, Hit it again and it’ll select outward until it grabs the entire tag.

ok! While we’re here…

Here’s my “add an HTML attribute” command. And Here’s Duane’s “Jump Next” command in action.

o…k

There are two built-in commands in the latest editions of TextMate EDIT/ SELECT/ “current scope” and EDIT/ SELECT/ “enclosing brackets”

note that both of these grab the brackets at the ends. While Balance Jr only grabs the innards!

Welp, that about wraps it up. goodnight everybody!

(?#

HTML tags that don't contain text
)<(\w+)[^>]*>[^<]*</\1>|(?#

The contents of various other forms of Embedded source
)(?<=(<%@\s|<%#\s|<%=\s))[^%]*(?=\s%>)|(?#

The contents of Embedded source
)(?<=<%\s)[^%]*(?=\s%>)|(?#

HTML Comments
)(?<=<!--\s)[^->]*(?=\s-->)|(?#

HTML Attribute name
)\b[\w-]+\b(?=\s*=)|(?#

HTML Attribute name value pair
)\s\b[\w-]+\b=\"[^\"]*\"|(?#

HTML Compatible "String Double"
)(?<=\")[^\"\n<>]*(?=\")|(?#

'String Single'
)(?<=')[^'\n]*(?=')|(?#

[Square Brackets]
)(?<=\[)[^\[\]]*(?=\])|(?#

{Curly Brackets}
)(?<={)[^{}]*(?=})|(?#

>Text Inside HTML Tag</
)(?<=[^/]>)[^><]*(?=</)|(?#

Hex Colors #AABBCC
)(?<=#)[0-9a-fA-F]{3,6}|(?#

Number
)(?<!\d)\d+(?:\.\d+)?(?!=\d)|(?#

@variables $variables !etc
)[@$!]\w+\b|(?#

/* Contents of Comment Blocks */
)(?<=/\*).*(?=\*/)|(?#

Comma Delimitated
)(?<=[\(,:])[^\(\),\n]*(?=[\),;])|(?#

CSS Attribute Values
)(?<=:)[^;}]*(?=;)|(?#

Closed xHTML Tags
)<[^>]*/>|(?#

Placer for adding HTML Attribute Values
)(?<=\")(?=(>|/>| />))|(?#

HTML Tags
)<[^>]*>|(?#

"String Double"
)(?<=\")[^\"\n]*(?=\")|(?#

Space and the end of the line
)\s+$|(?#

JS function names and variables
)\b[a-zA-Z][\w\.]*\b(?=(\[|\s*(&|\*|\-\-|\-|\+\+|\+|~|===|==|=|!=|!==|<=|>=|<<=|>>=|>>>=|<>|<|>|!|&&|\|\||\?\:|\*=|/=|%=|\+=|\-=|&=|\^=|\()))|(?#

The End :)subtleGradient

How long have you been hooked on TextMate Crack Cereal? ;)

2006-05-04T00:00:00-07:00

TextMate serial cereal is like Crack!!!

Not that I would know about the crack ;)

Seriously, though. There’s not much point in cracking TextMate. Since you wouldn’t be able to participate in the TextMate community.

BTW. The TextMate Serial numbers are sequential and actually tell you how many people bought TextMate before you.

My serial number is…
bq. #2346 ^Registered 25 August 2005

If I had only registered a moment sooner, I would have been 2345! Too bad, so sad :’(

I had been addicted to TextMate for a while before the registration went through.

I tried it on and off since it first came out (with that goofy robot icon). I couldn’t really get into it until the theme support got really good.

Well, i seem to be rambling now…

So, what’s your textmate serial number? How hip & hardcore are you? ;)

— ~~- -~~ ~~- -~~ ~~- -~~ ~~- -~~ ~~- -~~ ~~- -~~ ~~- -~~ —

I seem to be only posting about TextMate recently. Hmmm…

As soon as the secret crazy project that I’m working on is done I’ll post a bit about it.

This post was intended to annoy everyone searching for a crack for TextMate. HAHA! No Crack for you!!!

I’ve recently noticed a lot of traffic from people searching for “TextMate serial” “Textmate crack” and stuff like that.

I guess that just goes to illustrate how popular textmate has recently become.

How to Make Spotlight Be Fast Again

2006-05-04T00:00:00-07:00

I’ve been using Tiger since about an hour after it was released.

When I first got it, spotlight was a total gem. It was super quick and found things I never thought it could find.

I typed in my first daughters name and instantly got back all kinds of stuff including all of my most recent tax returns. When clicking on one of the tax returns it took me to her name listed as a dependent.

That’s just too cool.

It’s been a while since then now and spotlight has started to get extremely annoyingly slow and filled with total crap. No mater what I searched for I got back tons of source code files and bookmarks.

My wife uses my old iMac and it was still blazingly fast at spotlight. Much faster than my nice new -ish PowerBook 12.

I used to work at a place where I had just massive gobs of email that I needed to save for searching through later.

I’m thinking that spotlight still had the index of all that old stuff. I’m just guessing though.

I did this, and it made it fast again

Open your spotlight prefs
Choose the privacy tab
Drag in your /Developer folder
Drag in everything that you’ll never actually search for with spotlight
Drag in all of your mounted Hard Drive volumes
Log out or reset or something
Log back in (doi)
Open your spotlight prefs (again)
Remove all the Hard Drive volumes
Spotlight should start reindexing them shortly

As always, your milage may vary.

You might not have to log out or reboot. You might have to do it a couple times. I’m not sure.

Basically, the principal should be…

Don’t let spotlight see anything that you don’t want to search for

I know that that’s a pretty basic idea. But it just never occurred to me to actually think about it. Someone in the ##textmate irc channel clued me in. Thanks i-forget-your-name_!

TextMate Bundles and Themes updates RSS Feed

2006-04-25T00:00:00-07:00

New-ish subtleGradient TextMate SVN RSS

Quick note to let you know about my new-ish subtleGradient TextMate Bundles and Themes updates RSS Feed

Enjoy.

Also, my subtleGradient unofficial TextMate bundles and themes Subversion Repo is still up.

The best way to enjoy my bundles is to check them out of subversion.

Grab a Single Bundle Item

If you just want a single item, just browse through the repo, download the thing (Snippet, Command, Language Syntax or whatever) that you want and stick it in one of your existing bundles. Your personal bundles are stored in ~/Library/Application\ Support/TextMate/Bundles/ .

Checkout a Single Bundle

If you want to check out an individual bundle from SVN, do this: (and by ‘do this’ I mean, ‘run this command in the Terminal’ obviously)


	svn checkout https://textmate.svn.subtlegradient.com/Bundles/tAylott_subtleGradient.tmbundle/ ~/Library/Application\ Support/TextMate/Bundles/tAylott_subtleGradient.tmbundle/

You can then just do a simple svn up occasionally to make sure you’re updated with the latest stuff.

Checkout a Single Theme

Unfortunately, SVN can’t just checkout a single file (for good reason, but still annoying). So if you want to grab a single Theme, just:

Browse to my Themes folder
Download a single theme (EG: Brilliance Black)
Rename it from .tmTheme.txt to just .tmTheme (If necessary)
Double Click it
- It should automatically add it to your personal TextMate Themes folder

The biggest problem with this method is that you have to go through all this every time you want the updated version of the file.

Most themes don’t change too often, so that shouldn’t really matter. The Brilliance themes are all still in BETA so they get updated occasionally.

Checkout All My Themes

Run this command in the Terminal:


	svn checkout https://textmate.svn.subtlegradient.com/Themes/ ~/Library/Application\ Support/TextMate/Themes/

This shouldn’t mess up any of your existing Themes or anything, it should just add all my stuff to yours.

The upshot of this method is that you can just do a simple svn up occasionally to make sure you’re updated with the latest stuff.

Checkout All My Bundles

Let me put it this way. Don’t do this. You really don’t want all of my bundles.

You have been warned. ;)

Enjoy

My TextMate Bundles, Commands, Macros, etc...

2006-02-05T00:00:00-08:00

Ahhh TextMate, how I love thee.

This is just a quick post to share a couple of handy TextMate commands.

Balance Jr textmate thinggy


(?<=(<%@\s|<%#\s|<%=\s))[^%]*(?=\s%>)|(?<=<%\s)[^%]*(?=\s%>)|(?<=</)[^/>]*(?=>)|(?<=<)[^/>]*(?=/>)|(?<=<!--\s)[^->]*(?=\s-->)|\b\w+\b(?=\s*=)|\s\b\w+\b=\"[^\"]*\"|(?<=\\")[^\\"\n]*(?=\\")|(?<=')[^'\n]*(?=')|(?<=\[)[^\[\]]*(?=\])|(?<={)[^{}]*(?=})|(?<=<)[^<>\n]*(?=>)|(?<=[^/]>)[^><]*(?=</)|(?<!\d)\d+(?!=\d)|[@$!]\w+\b|(?<=/\*).*(?=\*/)|(?<=[\(,])[^\(\),]*(?=[\),])

You place your caret inside something and the macro will select everything in between enclosing characters. It’s kinda like the balance command, except it grabs everything INSIDE the characters, but not the characters themselves.

It works with:

[], {}, (), '', "", word="", <>, ><, $word, @word, /* word */, <% word %>, <%= word %>, <%# word %>, <%@ word %>, integers, comma separated values, and probably more, but I forget now.

If you want to select the paragraph text section of the following HTML, place your caret somewhere in the text and hit the macro. It’ll select everything between the > & < characters.


<p class="blah">
     paragraph text 
</p>

Here’s all the crazy stuff!

All these files are .tmbundle packages. ~~I have them in my personal TextMate folder ~/Library/Application Support/TextMate/Bundles/.~~ All my TextMate stuff is now being hosted in SVN at https://textmate.svn.subtlegradient.com/. Enjoy!

Back to a regular folder. Blaaarrgghhh!

These linked files are now ZIPs, yet again. But Safari will auto un-zip them for you to just double click on in your downloads panel.

x51.tmbundle
- This is the one with the Balance JR commands.
ASP.net.tmbundle
JavaScript.tmbundle
Prototype and Scriptaculous.tmbundle
- To be able to use my additions to the prototype bundle, you’ll need to have the original Prototype Bundle from encytemedia.

That’s all. It’s been a pleasure, as always!

iPhoto 2006 Supports Flickr Photostream as Photocast

2006-01-20T00:00:00-08:00

This may not come as a shock to many, but

The new iPhoto 2006 natively supports “Flickr”: Photostreams just like any other iPhoto Photocast!

Imagine the possibilities people!

Here’s a quick tool you might find useless ;)

Type in a tag and click the button to add that Flickr search to iPhoto¹.

¹ This list only supports 1 tag at a time, because I’m too lazy to make something actually useful.

This works by…

Using the normal https://www.flickr.com/services/feeds/photos_public.gne url and
changing the ‘http’ to ‘photo’ and…
adding the querystring attribute ‘format=rss_200_enc’ and…
‘tags=the_tags_you_want’ where ‘the_tags_you_want’ is a comma delimited list of tags.

The final url being: photo://www.flickr.com/services/feeds/photos_public.gne?tags=tiny,dogs&format=rss_200_enc

The crappy news from Flickr is “Photos containing ANY of the tags will be included in the feed.” So this is an OR/ANY search not an ALL/AND search. Oh well, what do you want for 5 minutes of effort?

Well, enjoy.

Hey, if anybody can hook me up with a quick way to do the same thing on any arbitrary AND search, I would… uh… say thanks!

Gus Mueller FlyOpts InputManager

2005-12-27T00:00:00-08:00

I just came across a truly amazingly sweet little thing.

How I found it

What is it?

To quote the author:

A warning: input managers are bad…
This bit of code [is] probably only useful to developers … it’s not like a product or anything. Think of it as sample code.
* Edit in BBEdit from any NSTextView
* Menu Accelerator- Marrying Search Kit and NSMenuItem in some sort of unholy union
* Execute as Lua in any NSTextView

He’s got a slick video of the Menu Accelerator and another one activating a shell script

To get it to work with TextMate …

Download the binary
Download the source code
1. Unzip
Open the flyopts.xcodeproj Xcode project in flyopts_src/
1. Vainly attempt to compile as is (just to test)
2. Fail
3. -Curse- Grin and bare it
Run ranlib on the files flyopts_src/src/lua/liblua.a flyopts_src/src/lua/liblualib.a from the terminal
Change the string "com.barebones.bbedit" to "com.macromates.textmate" on line 64 of the file flyopts_src/src/bbedit/FOODBEditor.m
Build
1. Succeed!
2. Pat yourself on the back, ~~you are now a l33t haxx0r~~ you’re almost done!
Copy your fresh new bundle flyopts_src/build/Development/FlyOpts.bundle into the FlyOpts/ folder (from step 3), replace the existing bundle
Copy the FlyOpts/ folder into your ~/Library/InputManagers/ folder
Done
1. Pop open TextEdit to test it all out.

Set a shortcut

Add the line "^j" = "flyoptsODBEdit:"; to your ~/Library/KeyBindings/DefaultKeyBinding.dict file~/Library/KeyBindings/DefaultKeyBinding.dict
If this file doesn’t exist I’m sure you’ll figure it out ;)

Other InputManager Sweetness

The Incremental-Search Plugin for Mac OS X

An InputManager that adds emacs-style Incremental Search to any app using NSTextView

Pimp My textMate! Hack the UI of your favorite Mac apps!

2005-12-04T00:00:00-08:00

I love the way Mac OS X applications work.
It’s relatively simple to crack open an app and customize its UI.

Pimp my textMate

There have been a few people on the textMate mailing-list recently that have been interested it making the drawer white text on black. I popped open the nibs to see if I could make it happen. I couldn’t. But, I did do some fun stuff.

Let me show you how to do this right quick.

Read the rest of the article to find out the thrilling conclusion!

Find your app
1. /Applications/TextMate.app
Pop open the .app package
1. Right-click the TextMate icon and select Show Package Contents
Navigate to the English.lproj folder with all the nibs in it
1. Or, if your TextMate.app is in your Applications folder, simply click /Applications/TextMate.app/Contents/Resources/English.lproj/
Double-click the Document.nib file
1. This will open in up in Interface Builder, assuming you have the Mac OS X Developer Tools installed.
Open up the Inspector panel
1. Command-Shift-I or Tools => Show Inspector
Check the Has Texture checkbox in the Inspector panel
Save
Relaunch TextMate
Feel empowered by blatantly flying in the face of the Apple Human Interface Guidelines
1. You rebellious anarchist! ;)

Repeat this process until you feel hip.

There are all kinds of other things you can modify in there.

Convert Aqua windows to Metal
Convert Metal windows to Aqua
Use the Unified title/toolbar look
change buttons, icons, fonts, sizes, etc…
reposition elements
add functionality
- I added a indeterminate progress bar to the Web Preview window and bound it hidden and animate properties to the isLoading property of the webview.

It’s just insane what all you can do in there.
BTW, Interface Builder automatically makes a backup of any .nib file you change. No worries!
Of course, only a fool (or a dangerous rebellious anarchist, like you) would modify anything without making their own backup copy of the original app before making any changes.

Twilight BG FG.tmTheme

2005-12-02T00:00:00-08:00

Check out the latest TextMate theme.

Twilight BG FG.tmTheme

It’s called Twilight BG FG.
All I did was

take the original Twilight theme and
convert all the colors to background colors
add transparency to the background colors
add back in the foreground colors
minor tweaks

All praise should go to the original author of the Twilight theme. I’m not sure who that is. but I will link to him as soon as I find out.

Caution: Most people absolutely hate underlined strings. If you are one of these people you can simply remove that in the theme editor yourself.

Dreamhost FastCGI Production mode, Finally

2005-11-30T00:00:00-08:00

I had hacked my environment.rb file to force it into development mode while working on my theme.

I have just switched back to the normal version of the file. Dreamhost defaults Ruby on Rails to production mode now. So, this site should be relitively zippy now.

Get IE 5.5+ to support transparent PNGs using Microsoft-chow

2005-11-30T00:00:00-08:00

There are two ways that i use to solve the transparent PNG support issue.

Before we get into those specific methods, we have to make sure only IE is getting fed Microsoft-chow.

Read the rest of the article for the specifics.
h2. For IE’s eyes only

Use a dedicated hacks_for_ie.css file and serve that css file via conditional comments

Example:


<!--[if IE 5]>
  <link href="/stylesheets/theme/subtletheme_IE5.css" media="screen" rel="Stylesheet" type="text/css" />
<![endif]-->
<!--[if gt IE 5]>
  <link href="/stylesheets/theme/subtletheme_IE55.css" media="screen" rel="Stylesheet" type="text/css" />
<![endif]-->

For non-tiling transparent background image PNGs

Use a proprietary Microsoft filter property

this method effectively replaces the use of PNGs for background images that don’t tile.
this method is useless against embedded img tags in the content

Example:


#search-results1 a, #search-results1 a:link, #search-results1 a:visited {
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://subtlegradient.com/images/theme/article.png', sizingMethod='crop');
}

For `img` tags in the content

Use a proprietary Microsoft .HTC file to dynamically adds a JS behavior to every img tag that is a PNG. It replaces the source of the items with a spacer.gif

This method won’t work with background for CSS background images
You must update your servers mime types list to serve .htc files as text/x-component .htc

Example


img {
   behavior: url("pngbehavior.htc");
}

References

For more info on conditional comments check out quirksmode.org

For more info on the wacky Microsoft-chow AlphaImageLoader and friends, check out MSDN – AlphaImageLoader Filter

For more info in the pngbehavior.htc method, or to download the pngbehavior.htc file, check out >PNG Behavior
or the original "WebFX PNG Behavior ":https://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

PNG_transparency_demonstration_1.png Image taken from wikipedia

Two (count 'em) TWO live search boxes

2005-11-28T00:00:00-08:00

I’m still pretty {color: green;} green when it comes to Ruby on Rails.

I decided that I wanted to have a live search box on the bottom of my theme for the contest. I also want one for the top of my theme.

It’s really pretty easy to mess around in this code. It all just makes sense (assuming you have a good general idea of what’s going on).

Anyway, I just wanted to blog a snippet you can use to have a second live search box in your theme.


<%= start_form_tag({:controller => 'articles',  :action => 'search'}, {:method => 'get', :id => 'sform1'}) %>
 <h3><label for="q">Search</label><input type="text" id="q_bottom" name="q" value="" size="15" /><%= image_tag "theme/spinner.gif", :id => 'search_spinner1', :style => 'display:none;' %></h3>

<%= end_form_tag %>
<%= observe_field "q_bottom", :frequency => 1, 
    :url => { :controller => "live", :action => "search" }, 
    :loading => "Element.show('search_spinner1')",
    :complete => "Element.hide('search_spinner1')",
    :update => "search-results1",
    :with => "'q=' + escape($F('q_bottom'))" -%>
<div id="search-results1"></div>

enjoy :D

subtleSpeed typo theme

2005-11-28T00:00:00-08:00

I only have 20 minutes to go:

This is the permanent URL to use in my theme.

Download that puppy here:

https://subtlegradient.com/typo-themes/subtlespeed-latest.zip

enjoy :D

subtletheme

2005-11-26T00:00:00-08:00

This is the permanent URL to use in my theme.

Download that puppy here:

https://subtlegradient.com/typo-themes/subtletheme-latest.zip

subtleTheme — Typo Theme Designed By Thomas Aylott of design42

2005-11-26T00:00:00-08:00

This is just a test post to use in the screenshots.
I had made the First Post post a few days ago. But, it’s just way too big for a cute screenshot.

I would just like to thank you all for taking an interest in my theme, or my blog, or kittens.
As Wil Shipley says in the subtitle of his blog

… Kittens are fuzzy.

To that theme, i’d like to add this:


def fuzzify_kitten
  foreach @kitten do |k|
    k.fuzz
  end
end

I’d like to call your attention to the k.fuzz section of that method. Consider yourself called.

I really should add a list to this post
- but what kind of list would look right?
- maybe i’ll do a ~~componation~~ combination of types
I like cats
1. cats like me
  1. cats like me like to be fuzzy

Tables	Look	Pretty	Good
I’d	like	to	think
so	anyway.	Do	they?

I hate IE!!!!!

2005-11-26T00:00:00-08:00

Hello.

I would just like to let everyone know that IE is the devil. Internet Explorer for windows wants to see us all toil endlessly to produce crap. It hates us all and wants to see us rot in the depths!

Well, the feeling is mutual. It’s like a drunken tatoo.

You’re stuck with it forever.
It makes a daily mockery of you.
You can spend time and money to hide it, or make it look good with your outfit, but it just makes you look stupid and ugly no matter what you try to do.

I hate you IE. I fart in you’re general direction. You’re father was a hamster and your mother smelt of elderberries.

Typo 500 Internal Server Error

2005-11-11T00:00:00-08:00

What is up with all the 500 errors?

I’ve installed this thing normally. I havn’t done anything crazy.

Is there some magic potion I have to sprinkle over my keyboard?

Flawless upgrade from typo 2.5.6 to 2.5.8 with advanced theme support

2005-11-10T00:00:00-08:00

Despite my reservations that i was going to totally shoot myself in the foot, I took the hop into 2.5.8 just now.

It went completely smoothly.

The reason i’m so nervous is just the wasting of 1.3 good days I had set aside for making my theme for the contest. I tried to upgrade my toe dip 2.5.6 Typo install on Dreamhost to the latest svn trunk. We met with disastrous results. Thereby wasting the afore mentioned 1.3 days struggling helplessly.

I must say that I do like Typo quite a bit more than i thought I would.

I’ve been extremely impressed with Wordpress. My wife has a cute little blog over at eBabyStuff.net

It’s been totally painless setting it up and customizing it. We added polls and i’m in the midst of adding full quizzes.

I’m sure there was just something minor that I couldn’t figure out.

I’m new to Ruby on Rails, but It was love at first sight.

I switched to textMate after seeing that video. Woo yeah!

TextMate Themes

2005-11-09T00:00:00-08:00

https://macromates.com/wiki/pmwiki?n=Themes.UserSubmittedThemes

I just added a couple of my textMate themes to the macromates wiki. I figure everyone who has their own themes will add them to the page.

Sin city Yellow TextMate Theme

2005-11-09T00:00:00-08:00

Download Sin City Yellow

This theme is based on the concept of the sin city comic look. Grayscale with a splash of yellow & a touch of brown.

It really feels more like the film than the comic.

What version of rails?!?!

2005-11-08T00:00:00-08:00

How do you figure out what version of rails you have installed?

I finally found out by using the command to create a new rails app and looked in the generated changelog.

Ug.

Your should be able to do rails -v or something.

Any clue? anyone?

First Post! With a really long title just to show off how long title can get and still look good ;)

2005-11-07T00:00:00-08:00

This is my first post.

Here is an article.
bq. A blockquote.

header 1

header 2

header 3

header 4

header 5

header 6

a	table
of much	data
oh so much more data	even
yep	lots of the stuff for us

A list

one
- one a
  - one a i
two
- two a
- two b
three


def chunkify_bacon
  foreach @bacon do |b|
    b.crunch
  end
end

And inline code of course

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of “de Finibus Bonorum et Malorum” (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, “Lorem ipsum dolor sit amet..”, comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from “de Finibus Bonorum et Malorum” by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

SubtleGradient

CSS Position Fixed for IE6

How do you get position:fixed css working in Internet Explorer 6?

How do you solve the jitter issue?!

CSS Code

Subtle Hover CSS Inspect Bookmarklet

Replace document.write using MooTools

Problem

Solution

Script

Testing a way to post to my blog quickly

Jekyll quick post shell script

usage

example

Notes

Script

Blazing fast Semantic JS Templating with edit-in-place templates!

SubtleClickAll Bookmarklet

MooTools databinding plugins coming soon

Tabs or Spaces?

How to have a box default to hidden and then fade it in later

Simple: Use a hide class

Advanced: Use semantic CSS rules

Use a loading class for your body tag

Use a MooTools Class to write a reusable widget

NEW TextMate Code Completion and Smart ToolTips

Code Completion & Tool Tips

Coming soon…

Screencast

It's all coming… soon Available Now!!1!

Experimental IE CSS Expressions

Serve Python through the Leopard Firewall

So, to get all these things working together…

Allow incoming connections for Python in the Leopard Firewall

Force the Python Django development server to allow access to other people on your LAN

Remotely Create a New Git Repo

MooTools 1.2 Final

Cloning a Git SVN Clone

Clone the public repo

Fork the repo. optional

Set your subversion remote

This should give you…

If you get this error…

Keeping up-to-date

Back to master

That’s it!

Installed Browsers

Simple Install of Git on Leopard

Here’s how to install Git on Mac OS X Leopard

Only needs some minor modifications to work on Dreamhost

After installing, you'll want to configure it

Baseline Grid Overlay Bookmarklet

Select Balanced HTML Tag

Fix Safari Downloads Window on Leopard Spaces

Multiple Standalone Safaris

Why don’t browser vendors love us developers :’(

WARNING Do Not Update Your Windows Testing Box!!!

New IE6 Patch Removes Ability to Test Memory Leaks

Safari 2, Safari 3, Adium & forcing WebKit Frameworks

Here’s the trick to make it work

Shell script

How to force another app to open with the old WebKit

How to make Adium work after installing Safari 3

TextMate View Source from Internet Explorer

Selling CrazyEgg PowerBook 12

CrazyEgg!

Best Keyboard

Amazingly Small

Condition

What you get:

About this Mac

I Love Internet Explorer!

Meh

Awesome Unique Features

The future’s so bright I gotta wear shades!

Slingshot around the sun would be faster

I forget, is PST 3 hours or 27 hours behind EST?

You expect more from a for-profit business

Ok, now I’m just ranting like a maniac

UPDATE

Simple: Use a `hide` class

Use a `loading` class for your `body` tag

Back to `master`

So, that brings us back to Slingshot.

What’s the big difference?

For environments where you can’t test locally
and are the only person with access to the testing server

Part of the official TextMate Experimental Bundle
(at the moment)

㊷ Balance Jr^2.5 ☛

Install a Legally Licensed Copy of Windows XP ^PRO