When I ask friends and acquaintances why they still use Flash to deliver video (even though most of their content is already encoded in H.264), many of them cite the ability to place “bumper ads” before and/or after their content — while locking out the video controls to ensure users don’t skip ahead.

Hunh.

Sure, it feels kind of slimy, but everyone has a right to get paid for producing and hosting content. Given the circumstances, I would rather watch that content with the most convenient device available to me at the time than be relegated to a PC. Truth be told, if I can’t watch the content now, I’m probably not going to file the URL away and view it when I get back to a PC. The Internet has moved on and there is new stuff to see.

Last week, at the world’s finest developer conference, I heard the video ad delivery excuse from some really bright people; it unnerved me a bit. With each person, I talked through a solution using HTML5 <video>, they would reluctantly nod, smile and say “We’ll see.” I do a lot of talking in my day-to-day, I know that nod, smile, “we’ll see” routine. It means, “Prove it. Where’s the code?”

Fair enough.

I took the afternoon and put together a quick example, it should be enough to get anyone started with HTML5 <video> and “bumper ads”. For that matter, it should be a decent introduction to the HTML5 <video> tag in general. Rather than step through it line by line, I’ll let you tear through the code on a larger demo.

A quick hat-tip to the WebKit engineering team for the idea some time ago.

Oh. Another quick note — the animated loading indicator (see below) was achieved with an SVG. Developers, start asking your designers for their vector graphic files; there are some amazing things that can be done with SVG.

I created a set of vector images of the symbol for each Lantern Corps from DC’s/Green Lantern’s “Blackest Night” event for a project I’m working on.

Maybe someone else will find them useful.

Downloads:
Green Lantern Corps
Violet Lantern Corps (Star Sapphire)
Yellow Lantern Corps (Sinestro Corps)
Red Lantern Corps
Orange Lantern Corps
Blue Lantern Corp
Indigo Lantern Corps (Indigo Tribe)
Black Lantern Corps
White Lantern

All Lantern Corps Symbols

From Wikipedia:

Emoji is the Japanese term for the picture characters or emoticons used in Japanese wireless messages and webpages.

They are the tiny little pictures that gained quite a bit of attention outside of Japan once they were included in the iPhone 2.2 firmware. Sounds awesome right? Wrong.

There are 3 carriers (NTT DoCoMo, SoftBank & Au by KDDI) who’ve all created they own set of emoji glyphs in differing areas of the private-use range Unicode character space. Basic emoji supports 176 glyphs plus an additional 76 for C-HTML 4.0 for a total of 252. The iPhone—which uses the SoftBank implementation—supports 471 emoji glyphs and to top it off, Apple and Google have been working on a standards proposal for inclusion in ISO/IEC 10646 which proposes 722 glyphs in total. Confused yet? Right then.

With millions of mobile phones supporting emoji & Internet connections, web developers want to take advantage of the extended glyphs in the data they send to mobile devices but in the Ruby community there doesn’t seem to be a clear library that implements all 4 standards. Hence Emoji for Ruby.

I’ve based the methods names off the Apple + Google Emoji encoding proposal (see chart) because I believe it has a fighting chance of being adopted (…and I’m biased).

Specifics

The Emoji RubyGem Project is hosted on RubyForge. You can get the source there as well.

To install the gem:

sudo gem install emoji

To create an emoji instance:

require 'emoji'

e = Emoji.create(:iphone)

Other supported character mappings include:

require 'emoji'

softbank_emoji = Emoji.create(:softbank)
iphone_emoji = Emoji.create(:iphone) #Same character space impl as SoftBank
ntt_docomo_emoji = Emoji.create(:docomo)
kddi_emoji = Emoji.create(:kddi)
au_emoji = Emoji.create(:au) #Synonym for KDDI
apple_google_emoji = Emoji.create(:google)

Returning an Emoji character

require 'emoji'

cloud = Emoji.create(:iphone).cloud
puts cloud

# Or...

e = Emoji.create(:softbank)

puts "Yo... I'll be there shortly—stopping at #{e.atm}"

I am currently using this library in conjunction with the Prowl Ruby wrapper by August Lilleaas & Prowl to send various bits of data to my iPhone throughout the day.

Ruby method to Emoji table for iPhone

It’s WWDC time again. This year my talk is titled:

Leveraging Web Content in Mac OS X Applications with WebKit
Thursday, June 11th 9:00AM-10:15AM
Mission Conference Room

With the renewed excitement surrounding Objective-C & Cocoa, many web developers are wondering how they get involved in native application development. In our session we provide some exciting Cocoa examples that leverage WebKit to seamlessly blend native applications with web technologies.

I hope everyone comes to check it out, it should be a good time.

WWDC08 is upon us, and I neglected to advertise the talk that I am giving with the very talented Jeff Watkins. We are presenting:

Session 454: Improving Responsiveness in Websites and Web Applications.
Friday, June 13th 2:00PM-3:15PM
Marina Conference Room

We have some great optimization techniques to go over with you, and we plan to talk about a real world case study involving the Online Apple Store.

Additionally, I’ll be staffing the:

Safari Compatibility Lab
Tuesday, June 10th 9:00AM-12:00PM
OS X Foundations Lab A

Feel free to come by if you have any questions, or if you’d like to chat.

I often have many external volumes connected to my laptop at any given time (network drives, iPods, external HD, etc.). It can be annoying to manually disconnect each one of them before I unplug the USB hub. Instead I use a quick AppleScript to do the job of disconnecting all of my external volumes. I bind the script to a QuickSilver trigger and fire that up before I’m about to disconnect the hub. It saves me a bit of sanity.

Download unmount_all_drives.applescript

tell application "Finder"
	set allVolumes to the name of every disk
	repeat with i from 1 to the count of allVolumes
		if item i of allVolumes is not the name of the startup disk then
			-- Uncomment the 2 lines below if you don't want Network drives unmounted.
			-- if item i of allVolumes is not "Network" then
			eject (item i of allVolumes)
			-- end if
		end if
	end repeat
end tell

Download: itunes_sleep_timer.sh

#!/bin/bash

itunes_grep_string="/Applications/iTunes.app/Contents/MacOS/"
time_to_close=60 #Minutes

if [ ! -z $1 ]; then
	time_to_close=$1
fi

itunes_pid=`ps aux | grep -i "$itunes_grep_string" | grep -v grep | awk '{print $2}'`
elapsed_minutes=0

if [ "$itunes_pid" == "" ]; then
	echo "iTunes is not currently running"
	exit 1;
fi

echo "iTunes pid is: $itunes_pid"
echo "iTunes will pause in $time_to_close minutes"

while [ $elapsed_minutes -lt $time_to_close ]; do
	printf "`expr $time_to_close - $elapsed_minutes` minutes remaining\\r"
	sleep 60
	elapsed_minutes=`expr $elapsed_minutes + 1`
done

osascript -e 'tell application "iTunes"' -e "pause" -e "end tell"

UPDATE: October, 4th, 2007

By request (and request, I mean the lame-asses that email me instead of posting a comment), I’ve added a ruby version of this script. It’s the same number of lines, so I’m not sure what benefit your receiving other than being able to verify that the time parameter is an integer.

Download: itunes_sleep_timer.rb

#!/usr/bin/env ruby

itunes_grep_string = "/Applications/iTunes.app/Contents/MacOS/"
time_to_close = 60 #Minutes

if ARGV[0].to_i != 0
  time_to_close = ARGV[0].to_i
end

itunes_pid = `ps aux | grep -i "#{itunes_grep_string}" | grep -v grep | awk '{print $2}'`
elapsed_minutes = 0

if itunes_pid == ""
  STDERR.puts "iTunes is not currently running"
  exit 1
end

puts "iTunes pid is: #{itunes_pid}"
puts "iTunes will pause in #{time_to_close} minutes"

while elapsed_minutes < time_to_close
  printf("%s minutes remaining\\n", time_to_close - elapsed_minutes)
  sleep(60)
  elapsed_minutes = elapsed_minutes + 1
end

`osascript -e 'tell application "iTunes"' -e "pause" -e "end tell"`

When going the graphical button route, you can simple use a background image and have the browser text display on top, but we decided that we wanted fully graphic buttons so that the text could be styled to a greater detail. This necessitated building each button by hand in Photoshop, something that is rather painful and tedious when you have multiple buttons to create because of all the text on the various rollover states.

Instead, I decided to create a image with all the valid characters on it, slice it up into those various characters (as shown above) and save the pieces in a folder. Then leveraging the wonderful command line applications in the open source project ImageMagick I created a small ruby script that stitches the individual pieces back together, creating a button based on a string parameter.

Essentially, the script does some error checking on the string, sanitizes it based on business rules, then generates and issues the following command to the ImageMagick binaries:

	
convert +append left_cap.png s.png _a.png _m.png _p.png _l.png _e.png space.png _b.png _u.png _t.png _t.png _o.png _n.png right_cap.png sample_button.png
	

After the script is you done end up with a complete button that was created in a fraction of a second but still retains the benefits of using a graphical element. Please be sure to use accessible HTML with graphical buttons so that screen readers can “view” the site properly. A good example would be as follows:

	
<button type="submit" title="This is a sample button" id="sample_button_id"  class="btn_sample_button"><span>Sample Button</span></button>
	

With the following CSS to hide the text when the browser is rendering CSS, but to show a valid button when it is not:

	
button span {
	display: none;
}
	

Taking this concept a bit further, you could most likely use the same method I describe in combination with ImageMagick to create button assets on the fly. I fear that the overhead of creating such assets on the fly wouldn’t be enough to outweigh the benefit of being able to cache static assets on a large enterprise site, thus the reason I haven’t fully explored it. If someone does end up going that route, please drop me a note in the comments and let me know about it.

Below is the Ruby script I wrote to generate the buttons from the image slices, this could easily be done in a bash shell script or any of the other various options:

	
#!/usr/bin/env ruby
# make_button.rb by Ryan Orr

if ARGV[1] != nil
  puts "You have multiple arguments, this means you probably forgot to put \"\" around your button name. Please try again."
  exit 1
elsif ARGV[0] != nil
  # Buesiness Rule: Buttons should start with a capital letter, and
  #                 the only valid characters are A-Z, a-z, (space),
  #                 (comma), & and ?
  button_text = ARGV[0].capitalize.gsub(/[^A-Za-z ,?&]/,'')
else
  puts "You need to pass in a string"
  exit 1
end

counter = 0
string  = "convert +append left_cap.png "
filename = ""

until counter == button_text.length
  b = button_text[counter,1]

  case b
  when b[/[a-z]/]
    string += "_#{b.downcase}.png "
    filename += "#{b.downcase}"
  when b[/[A-Z]/]
    string += "#{b.downcase}.png "
    filename += "#{b.downcase}"
  when "?"
    string += "question_mark.png "
  when "&"
    string += "ampersand.png "
  when ","
    string += "comma.png "
  when " "
    string += "space.png "
    filename += "_"
  end
  counter += 1
end

filename = "#{filename.gsub(/[^A-Za-z_]/,'')}.png"
string += "right_cap.png #{filename}"

`#{string}` # Run the command that we've built
	

Here is the scenario: I use my MacBook Pro at work all day, frequently being interrupted by someone at my desk for 5-10 minutes at a time. I generally don’t want my screen to turn off because I’ve noticed that people take it passive-aggressively and either get agitated in their tone or start to trip over their words in a rush to exit the conversation. So I’ve set the “Put the display to sleep when the computer is inactive for” setting to 15 minutes. I never put the computer itself to sleep while on the power adapter.

On the other hand, when I get home, I use my MBP at my desk in the bedroom; sometimes answering e-mails prior to turning in for the night. In such a case, I don’t want to wait 15 minutes with the monitor flooding light into the room. Yes I know this is a trivial and mostly esoteric problem, but thankfully the UNIX foundation that OSX is built on can solve it.

Using crontab, the OS X command line utility pmset, bash scripting and a freeware application Caffine, we can solve this problem and create a custom Energy Saver profile based on various times of the day.

OS X includes an amazingly powerful command line utility pmset that allows the user to set any aspect of power management through the command line. A at look at the man page shows us that the command:

pmset -c displaysleep 15

will cause the display to go to sleep after 15 minutes. Combined with crontab, we can set the various display timeout lengths based on time of day.

Opening a terminal window, use your favorite text editor to make a new shell script. I prefer nano:

nano -w ~/bin/display_sleep.sh

in the editor’s new window type:

#!/bin/bash

if [ -z "$1" ]; then
	echo "You forgot to pass a 'time to sleep integer'"
	exit 1;
fi

time_to_sleep="$1"

pmset -c displaysleep "$time_to_sleep" > /dev/null

save the file, and set execute permissions on it.

chmod a+x ~/bin/display_sleep.sh

Now we can run sudo ~/display_sleep.sh <integer> to set the display sleep time as we wish. You must sudo the script, as pmset is only allowed to run as root for obvious security reasons.

On that note, we must now modify root’s crontab to run out script at a set time.

sudo su
Password: <enter your password>

crontab -l > ~/cront

this will dump a copy of root’s current crontab to file, so we don’t override it. Now open the cront in a text editor:

nano -w ~/cront

and add the following rules to bottom of the file:

*/15 20-23,0-6 * * *    /<location to script>/display_sleep.sh 1
*/15 7-19 * * *         /<location to script>/display_sleep.sh 15

Save the file and type:

crontab ~/cront

To save the rule to the active crontab. The rule’s we’ve set will run every 15 minutes at :00, :15, :30 & :45. I have the screen go to sleep after 1 minute of inactivity from 10:00PM to 6:45AM otherwise it will go to sleep after 15 minutes. You can adjust the rules as you see fit.

This solves my problem… almost. What if I am up later than 10:00PM and I spend more than a minute reading a webpage or email without moving the mouse? Then the screen goes to sleep, which can be incredibly annoying. For those situations I use a freeware application called Caffine that will allow you to toggle power management on or off with a simple button click in your menu bar.

There you go, simple, easy and it makes life just a little bit easier.

This morning I was browsing Engadget and came across a story about DIY iPhone earbud replacement and a YouTube video detailing the process that was created by James Papadopoulos. This excited me, because my one huge problem with the phone is that I can’t use my prefered earbuds with it. Yes, I could use an extension adapter, but then I don’t have the ability to use the microphone built into the earbuds, and I really like that feature of the Apple supplied earbuds.

The basic proceed involves dismantling both the Apple earbuds and your “superior” earbuds, then soldering on the transplant earbuds onto the Apple earbud cord. It’s such a simplistic idea, I’m kind of ashamed that I didn’t think about it myself.

I’ve been a big fan of the Sony MDR-EX71SLA earbuds for the past couple of years as they tend to be a little more bass heavy than other earbuds. I had a couple extra pairs that suffered from the gummy-wire problem of earlier product revisions, so I used those as the donor buds.

I wasn’t able to get the Apple earbuds open without damaging them, but to be honest I didn’t really try that hard because they were going in the trash if the operation was successful. The first set of Sony’s that I tried (more recent revision) had the earbud enclosure glued shut, so those got damaged in the dismantle process, but I had an older revision of the earbuds also, and they snapped apart without a problem.

I realized that I suck at soldering when I had to go to YouTube for a refresher course video: -10 geek points for me. I got all the connections soldered and put the earbud casing back together. Now I have earbuds that I love with the mini-plug connector that fits in the iPhone and a working mic so I can walk around the streets looking like I am talking to myself. Hoo-ray!