I’ll try to keep on top of comments and such coming in here, but it will eventually start to decay (hopefully gracefully).

-Rob

How does it look?

More examples are on the GitHub project page linked below, but here is a small overview.

require 'lib/apple_remote'

play do
  puts "I'm playing... (Playing? #{playing?})"
end

pause do
  puts "I'm paused... (Playing? #{playing?})"
end

menu do
  if playing?
    puts "Do something with the menu while we're in 'play' state"
  else
    puts "Do something with the menu while we're not in the 'play' state"
  end
end

Tons of fun

Code

Ruby Apple Remote DSL project on GitHub

# RAILS_ROOT/config/app.yml

regions:
  - 'northeast'
  - 'southeast'
  - 'west'
  - 'central'
  - 'emerging east'
  - 'emerging west'
  - 'opportunity east'
  - 'opportunity west'
  - 'opportunity national east'
  - 'opportunity national west'

divisions:
  <%= (1..71).map{ |i| "Region #{i}" }.to_yaml %>

Loading it up using an initializer:

# RAILS_ROOT/config/initializers/load_app_config.rb

fdata =File.open(File.join(RAILS_ROOT, "config", "app.yml")).read
APP = YAML::load(ERB.new(fdata).result(binding)).symbolize_keys

Now we have our APP hash chock full o’ YAML goodness. My only problem with this is that I might want to eventually put this data set into a table and it is a pain to hunt and search for where the application references APP[:regions] and so on sooo: time to objectize.

I decided that since they are stupid simple objects they can all have the same parent: YamlArrayObject:

# RAILS_ROOT/app/models/yaml_array_object.rb
# or in lib

class YamlArrayObject
  attr_reader :name
  def id
    0
  end
  def initialize(name)
    @name = name
  end
  def to_s
    name
  end
  def display_name
    to_s.titleize
  end
  def <=>(b)
    name <=> b.name
  end
end

Simple enough. Now we just inherit and overload as appropriate.

# RAILS_ROOT/app/models/region.rb
class Region < YamlArrayObject
  def self.all
    APP[:regions].map{ |r| Region.new(r) }
  end
end

# RAILS_ROOT/app/models/division.rb
class Division < YamlArrayObject
  def <=>(b)
    name.to_i <=> b.name.to_i
  end
  def self.all
    APP[:divisions].map{ |d| Division.new(d) }
  end
end

This is all Jim Dandy right now since we can populate select boxes using cleaner code (bonus: won’t break if you decide to add Divisions to a database table)

# i like
<%= f.select :division, Division.all.sort.map{ |d| [d.display_name, d] } -%>
# better than
<%= f.select :division, APP[:divisions].sort{|a,b| a.to_i <=> b.to_i}.map{ |d| [d.titleize, d] } -%>

The only real issue is that calling Client.first.region still returns a string, which is bad since we want to keep our code as ambiguous as possible. The last step is to override the Client class’ methods for region and division (and whatever else we want to use):

# RAILS_ROOT/app/models/client.rb

def division
  Division.new(@attributes['division']) unless @attributes['division'].blank?
end
def region
  Region.new(@attributes['region']) unless @attributes['region'].blank?
end

Now in our views (client/show) we can simply call @client.region.display_name or whatever and not have to change the code when we finally get around to DBing those object.

(There might be better ways to do this that I’m missing, but this seems pretty okay for my needs right now.)

Here is the input extension to make a text field (actually, _any_ input, but you can add that logic yourself:) ) self clearing:

Requires Prototype Javascript Library!
I used v1.6 but I’m sure others will work fine.

// input_extensions.js

// extends HTMLInputElement to include a self-clearing method
// @author Rob Hurring
// @date 2008-04-23
// UPDATED: 12/02/08 -- thanks to Shawn for pointing out the IE flaw

var SelfClearingInput = Class.create();
SelfClearingInput.prototype = {
	initialize:function(element)
	{
		this.element = $(element);
		this.original_value = this.element.value
		Event.observe(this.element, 'focus', this.focus.bind(this));
		Event.observe(this.element, 'blur', this.blur.bind(this));
	},
	focus:function(e)
	{
		if(this.element.value == this.original_value)
			this.element.value = '';
	},
	blur:function(e)
	{
		if(this.element.value == '')
			this.element.value = this.original_value;
	}
};

when you want to use it, something like this can work:

// In your javascript file somewhere
document.observe("dom:loaded", function()
{
	new SelfClearingInput('ID_OF_INPUT_BOX');
});

$>defaults write com.apple.Safari IncludeDebugMenu 1

(swapping the 1 with a 0 to remove it).

This WebInspector window is actually pretty useful and shares a lot of the functionality of FireBug and YSlow for FireFox. I’m specifically referring to Safari 3.0 from here on out, and all screen shots will also be of this version.

Lets do a little comparison — what does WebInspector offer?

Using this site as my guinea pig

FireBug Similarities

This contains all the normal stuff such as DOM, stylesheet, javascript and image browsing. The only real difference here is that you cannot edit your CSS live — which I never really use anyway.

Web Inspector

Web Inspector

The other handy feature is the console. This will alert you of all the website’s quirks. I had to use Google as an example here because my site, naturally, has no errors that show up

YSlow Similarities

Web Inspector

I recently downloaded YSlow a week or so ago and I’ve been messing around with it to see how I can optimize my dev projects. While I’m not overly impressed with YSlow’s scoring — its damn near impossible to get that score above a D/C, and I think its geared more towards higher end websites than general websites — the WebInspector provides the same functionality… with less cockiness (see what I mean after the article).

It will show the loading times, or loading sizes for each element on the page which can help you visualize where your bottlenecks are. It also provides helpful little notes on compressing your CSS and JS code.

Script Debugging

Ahhh. The meat and cheese of website debugging. Pesky JavaScript errors. Positioned under the Debug menu, the “Show JavaScript Console” option will soon become your best friend. I really have no clue why this is not included by default on Safari, it has to be one of the most useful features… then again, I’m a developer.

Final Notes

YSlow Score

Naturally Safari and FireFox will remain very different browsers and each will retain their strengths / weaknesses. Maybe I’m crazy, but I prefer to develop with Safari as my browser. I’m not really sure how this happened, but, meh, it works.

I’m not suggesting Safari is better, or even comparing it to FireFox for that matter — I just really think WebInspector offers a lot more than I realized in the past and is fairly unknown.

Since I’m doing general websites and not global, massive-traffic commercial sites things like CDN (Content Delivery Network) aren’t relative to me. Also, ETags are a bit of a pain in the ass to implement for small sites. These 2 F’s can severely drag down your score which, while meaningless, is a bit of a bummer. (I know the Expires Headers can be important, but this shot was taken from a site on my development server, and not production so thats not implemented.)

Step 1:
In gnome goto System -> Administration -> Network and click on the ‘Hosts’ tab

Step 2:
For your normal localhost (127.0.0.1) double-click or hit ‘properties’ to edit it. Add your list of subdomains under localhost.

*Ignore the text in this pic, I overlooked that you had to include _all_ aliases in the same box. Whoops

Step 3:
The fun step
Open a terminal and type sudo gedit /etc/apache2/sites-available/default — assuming you’re using the “default” httpd.conf. Chances are that you will be, and if you aren’t you should know what file I’m talking about anyway. (If you don’t, just load one of the enabled apache configuration files)

Change these lines:

NameVirtualHost *
<VirtualHost *>

to

NameVirtualHost 127.0.0.1
<VirtualHost 127.0.0.1>

Step 4:
Add the following (for each subdomain you made) — changing the ServerName to whatever you aliased in the network host dialogue and DocumentRoot to wherever you want the subdomain to point.

<VirtualHost 127.0.0.1>
	ServerName mysql.localhost
	DocumentRoot /var/www/phpmyadmin
</VirtualHost>

Step 5:
In a terminal type: sudo apache2ctl restart
When that finishes, browse to http://mysql.localhost and you should see phpMyAdmin (going by my example)

On OSX + Apache 1.33

Step 1:
Open /Applications/Utilities/NetInfo Manager and click on “machines”
I usually just duplicate the localhost settings, or just create a new record below localhost that is something like:

ip_address: 127.0.0.1
name: mysql.localhost
serves: ./local

Click for bigger version

Step 2:
Repeat Steps 3-5 above only editing “/etc/httpd/users/{yourname}.conf” instead.

Click for bigger version

Restart Apache and hopefully all went well. I found this useful because I hate typing unnecessary paths

My few gripes with Colibri is the fact that it had no way to hardcode in specific search engines. Well, a few trips to their forums gave me the hint to grab SQLite Database Browser and start messing around with their database files. Simple enough..

The general breakdown is like this (using Digg as my main example because I’m horribly addicted, this should be obvious…):

Adding Custom Search Engines:

1) get SQLite Database Browser from sourceforge
2) open Documents and Settings\user\Application Data\Colibri\Search Engines.sqlite
3) hit the Execute SQL tab
4) paste these guys in there


INSERT INTO search_engines VALUES ('Delicious', 'Delicious', 'Delicious News', 'Generic', 'http://del.icio.us', 'http://del.icio.us/search/?fr=del_icio_us&p=%s&type=all');


INSERT INTO search_engines VALUES ('Digg', 'Digg', 'Digg News', 'Generic', 'http://digg.com',
'http://digg.com/search?s=%s');


5) hit Execute Query
6) hopefully the forum didn’t miss something and you have them inserted.
6a) if it did mess up, try INSERT INTO search_engines VALUES('TMP', '', '', '', '',''); then manually edit in the values
7) restart colibri

Notes:

If you searched (for example) Digg.com before to open a URL you need to do one more step

before colibri registers it as a search engine and not an item_history URL.

1) open Documents and Settings\user\Application Data\Colibri\Database.sqlite
2) browse all references to (ex) Digg.com in your item_history table
3) delete all rows containing (ex) Digg.com
4) restart colibri

Relative Digg Wordpress Plugin – Add related digg story links to the bottom of your post based on keywords

Note (5/13/07):
I just looked over this code and I made a lot of mistakes. Just use it as an example/reference or clean it up. I hacked it together pretty quick when I was bored at work, so use your judgement.

Well, as you can tell by the post dates on the past few articles, I’m being lazy. This all changed the other day when I was messing around in a project with PHP and XML. Normally I think XML/PHP is the devil, but I remembered the SimpleXML classes in PHP5. This pretty much inspired me to write a little plugin for wordpress – well, that and my love for digg – that will add relative digg stories to the bottom of each post depending on the keywords you provide.

Its still in Beta mode, but if you guys are savvy enough to get it working I would greatly appreciate some feedback.

What you need in order to run this, as of right now

1. PHP5 (should come with SimpleXML natively, but if not, you need this)
2. FOPEN (some servers don’t support this)

I will probably re-write this to use cURL in the future to get around the FOPEN problem, and maybe even to get around SimpleXML. Either way, this is just up here to test the waters on the idea and get some general feedback.

(Ps: If your server doesn’t run PHP5 or allow FOPEN, be a man and get in that shell and roll your own

How To Install (almost the exact same procedure as my YouTube PlugIn)

1. Upload “relative_digg.php” to your /wp-content/plugins/ folder
2. In admin panel, go to: Plugins -> Relative Digg Stories -> Activate
3. Switch over to Presentation -> Theme Editor -> (edit) Single Post
4. Somewhere in there add <?php relative_digg(); ?>
   • Note: you can hardcode the tag using relative_digg('tagname');
   • Note: param setup: relative_digg('tagname', number_of_results, story_age, 'title');
5. In your new post, somewhere near the bottom add: <!--digg:TAG-->

Let me know whatsup – hopefully some of you find this useful. Its terribly slow also, so I will have to check into that. Feedback is appreciated, yadda, yadda, etc.

Thanks

-rob

Hey all, I was asked to write a simple plugin that will make use of the YouTube API to generate videos based on specific post tags.

Downloads

1. YouTube Wordpress Plugin
2. svn export http://public.svnme.com/youtubevideos .

Usage

1. open the .PHP file in a text editor, on the line $dev_id = "???" insert your developer ID
2. upload the PHP file to wp-content/plugins/
3. activate the plugin from the Dashboard, Plugins menu
4. go to Presentation, Template Editor, Single Post and/or Main Index. Insert this
   code where you want the video to appear:
   <? youtubevideos(); ?>
5. when you post, use the code: <!--youtube:YourTagHere--> to tell the plugin what video topic you want to show. For example, if you want a video on horses, put <!--youtube:horses--> at the end of your post.
6. that’s it. To change the number of videos shown or to tweak the filter settings, you have to modify that within the plugin PHP file itself.
7. Let me know of any bugs you find, or any tweaks you have made (this is a community after all )

Features

1. Set how many videos to show, could be 1, could be 1,000
2. Setup filters to block videos that contain bad keywords and keep your blog respectable
3. Change the output template to display the videos any way you want to better incorporate it with your blog
4. Manually add your own taggings to show videos you want.

Change Log

• May 13 I just looked through this code and it is pretty sloppy, sorry. Use this as an example or starting point for your own plugin — or, if it still works, use it. Just a heads up (don’t judge me by that code )
• Oct 4 the new version needs to be tested – ill try to get to that today
• Oct 4 Thanks to Mr. Nuck Chorris, the SimpleTags is now phased out, I have updated the file.
• Oct 3 I removed the YouTube Developer ID, please use your own
• Oct 3 I am going to work on this again now that I am back. If you found bugs or have ideas for it, please send me an email and I will try to include them.