Coda - Finally A Mac Development Tool I Like
April 28, 2007 | 16 Comments
I’ve had a Mac for quite a while now (well…I have two and hopefully a third very soon) and sadly development tools on the Mac have been pretty lame. I began development in a Windows environment a number of years ago and grew very happy (and spoiled) with EditPlus. The features that I found myself using within that editor that I am unable to live without are:
- Single Window Environment
- Custom Syntax Highlighting
- Regular Expression Find/Replace
- Function/Method List
- Native FTP/SFTP
- Intuitive Remote Site Browsing
- Remote File Reload
- Preview Tool
My attempts at finding Mac development software that suited all those needs have turned up pretty lame results. For the past year I’ve been suffering with BBEdit. While it is a fairly decent editor, its FTP support and multi-window interface just left me wanting something more.
Enter the newly released Coda.
This is the diamond in the rough! It provides everything that EditPlus had and a bunch more, integrating Panic’s Transmit FTP application; a Terminal window; a sexy Editor with all the features I love; a browser window (Safari); a CSS Editor (which I’ll never use, although it’s cool); and a development Book library. Wow. Awesome stuff. Or as Panic puts it:
introducing coda. grow beautiful code.
Not only is their editor a beautiful application, their website is definitely something to write home about. Stunning. What’s even cooler is the fact that because I bought a Transmit license a few months back, I received a discount when I bought my Coda license. w00t! So…if you find yourself still on the hunt for a Mac Development Tool…Coda is the answer. Heck, even if you have one you like…Coda is better :)
Faster Page Loads With Image Concatenation
April 25, 2007 | 78 Comments
Contents:
Introduction
When designing web applications, icons and images are used to enhance the user experience, give visual cues, and simply look sexy. For complex web apps, the quantity and resulting latency of icons and images used can greatly impact page load times...and developers, in most cases, generally try to reduce page load time with a sweet web app rather than increase it.
To reduce latency in my apps, I use Image Concatenation! Coupled with a bit of CSS magic, performance improves and life is great.
Image Concatenation...WTF?
The basic idea is this: Change X number of image downloads to 1 image download by making 1 big image that contains the X images.
As an example, lets say we have these icons:
While those are pretty tiny in size, on page load the user must still deal with downloading 6 individual images. Instead, we can simply concatenate those images using whatever image software that suits your fancy. Like so:
Displaying Concatenated Images
Now that we have our sweet concatenated image we can't simply drop that image into an image tag and call it good...that'll display all icons at once. So...how do we display it?
To display the concatenated image, you need to place that image as a background on an appropriately sized DOM element using CSS to adjust the background positioning to make the appropriate image display. Now, when I say a DOM element...it could really be anything as you can plop a background image on any element with CSS pretty easily:
-
.whatever{
-
background: url('/path/to/image.png');
-
}
Even though you can use any element, only a few make sense. I've seen spans and divs used to accomplish this task, but styling those elements to work cross-browser is flaky at best and really churns my stomach. The element that his handled pretty universally is the img tag.
Yes...yes...I know, I just said don't place the concatenated image in an img tag. I still hold to that statement. You place the concatenated image as a background on the img tag. So what goes in the src of the img tag? Our old friend the 1 pixel by 1 pixel transparent gif, of course! This way, the image will still act as an image, can be styled like an image, and be super easy to update via CSS.
An Example
Lets say we have the following concatenated image: 
that we want displayed in the sidebar with the appropriate links.
Lets set up the HTML first using transparent.gif (a transparent 1x1 pixel image) as the src of the image tags:
-
...
-
<ul id="sidebar">
-
</ul>
-
...
Note the class names on the images...those will be used in the CSS as such:
-
#sidebar img.icon{
-
background: url('/path/to/concatenated/image.gif') no-repeat;
-
height: 16px;
-
margin-right: 3px;
-
vertical-align: middle;
-
width: 16px;
-
}
-
-
#sidebar img.icon-home{
-
background-position: 0px 0px;
-
}
-
-
-
#sidebar img.icon-search{
-
background-position: -16px 0px;
-
}
-
-
-
#sidebar img.icon-bookmarks{
-
background-position: -32px 0px;
-
}
That's really all there is to it. The icon class allows us to set the same image background and dimensions for all icons in the sidebar. The individual classes allow us to change the image that actually shows through.
More CSS Magic
Since CSS is being used to display the appropriate image, you can do your typical property manipulation as normal (e.g. :hover, set transparencies, etc).
A little trick I picked up at Zimbra's presentation (the same presentation I learned the benefit of image concatenation) at The Ajax Experience last October was how to reduce the number of images used by representing inactive icons with CSS transparency rather than using individual images for inactive icons. Like so:
-
#sidebar img.inactive{
-
filter:alpha(opacity=50);
-
-moz-opacity: 0.5;
-
opacity: 0.5;
-
}
If you wanted to make the icons partially transparent all the time but on mouse over make them 0% transparent, you can do so like so:
-
#sidebar img.icon{
-
filter:alpha(opacity=50);
-
-moz-opacity: 0.5;
-
opacity: 0.5;
-
}
-
-
#sidebar img.icon:hover{
-
filter:alpha(opacity=100);
-
-moz-opacity:1.0;
-
opacity:1.0;
-
}
Basically, whatever CSS magic you can weave can be done.
Additional Benefits
If you are a developer working in a painful development environment, the above methods are extremely valuable. Oh...and by painful I mean: any change to the base document structure requires a restart of the application. I've been doing a lot of development in an XSLT/Java environment recently and this method has saved me countless restarts :)
Now, if I decide an icon should change from a "house" to a "moon" (for some strange reason) I can make that change easily in CSS without needing to change the XSLT...thus no restart needed. Beautiful.
Heck...I use this CSS method for a number of non-concatenated images as well just so I can make general image changes with ease.
What Not To Do
When using the above image concatenation methods, it is important to note that concatenating similar images is a good plan. Avoid concatenating images of vastly different sizes because the wasted space on the concatenated image increases the amount of data being downloaded which can counter-act what we are attempting to reduce by concatenation.
Drawbacks
Update: This section was added a couple of hours after posting as per someone's suggestion.
Using this method can affect the printability of your page as background images assigned with CSS don't show in print too well :)
Conclusion
Image concatenation can be a beautiful thing when dealing with large numbers of icons/images. But, as with anything, weigh its benefit. Thus far, I'm pretty happy with the results!
Sweet Lightsaber Action: My First Rendered Footage
April 15, 2007 | 7 Comments
After posting a groovy Star Wars Fan Film, I began poking around YouTube digging up a lot of videos of lightsaber effect tests...most done by young teenagers and done well. Envy and jealousy set in and I wanted to learn how to do Lightsaber Rotoscoping too. The hunt began a couple days ago...I found and purchased EffectsLab Pro; filmed myself swinging my wooden ninja sword around in my barn boots; then spent 6+ hours learning to rotoscope frame by frame (before I realized I could do keyframes every 2-5 frames or so).
While the saber movements suck as this was a mere test, I'm pleased with he quality of the saber. Makes me want to do a fan film. :)
Star Wars Fan Film: Three in the Afternoon
April 9, 2007 | 5 Comments
Three friends find out in this hilarious short-
Special FX by former LucasArts effects guru Ryan Wieber of Ryan vs. Dorkman
Currently in production on the sequel, look for it this summer!
Office Pranks Get International Press
April 8, 2007 | 7 Comments
Shortly after the massive prank fest I had on a few of my co-workers, World Entertainment News Network contacted me for high-resolution images and further information. I, of course, responded with a few tid-bits and a link back to my blog so they could get the full story on the matter. A week later images from the pranks appeared on WENN in their image section with no link to my blog after asking for such a link.
Somewhat frustrated with that, I contacted the reporter at WENN hoping for an answer regarding the link back to my story and received the following:
I thought about it a moment then responded asking her to add the extra request regarding my blog being placed in print, but all in all, I shrugged it off thinking that it'd go nowhere.
I was wrong. Check it out:
One of my wife's friends from Liverpool, England sent Abby an e-mail today with a scan marking my entry into international press! w00t! Although some of the information is slightly off and the quote of the co-worker never happened, the newspaper article - while it didn't cite my blog - is pretty funny and it's great to get a scan.
Here's the article's text:
Alone at his desk for a week, the snubbed computer geek dreamed up a series of pranks to greet his boss and three colleagues as they returned… on April Fool’s Day.
First he “ovenwrapped” all the chairs in 1,100 sq ft of tin foil.
He also plastered 5,300 post-it notes over every available work surface. Then he painstakingly arranged 578 plastic cups on the office floor. And finally, he filled the place with 280 balloons.
Married Matt, a whizkid web engineer, was the talk of the campus at Plymouth State University in New Hampshire, where he works in the admin department.
An insider said: “We don’t know if his bosses saw the funny side - or if he’s been fired.”
Google 411
April 6, 2007 | 2 Comments
So, Google Labs has another sweet service that's pretty sexy...Google 411. What is it? Well...as Techcrunch explains it:
Free is awesome. All you need to do is dial 1-800-GOOG-411 (1-800-466-4411) and leveraging Local Search you can:
- search for a local business by name or category. You can say "Giovanni's Pizzeria" or just "pizza".
- get connected to the business, free of charge.
- get the details by SMS if you’re using a mobile phone. Just say "text message".
GOOG-411 is a completely automated service using voice recognition that prompts you for a series of questions (city & state, business/category, and result browsing) and if you or the system messes up at any time, simply say: go back and you'll return to the previous menu. As I am a user of 411 (although I dial 555-1212), I'll be adding GOOG-411 to my speed dial on my cell.
Vonage Takes It In The Eye
April 6, 2007 | Leave a Comment
Some of you may know the problems Vonage has been having with Verizon and being found guilty of violating some patents. Well, via Slashdot I discovered that Vonage has reached a bit of a rocky situation. Slashdot writes:
[...]
Of particular note is what the Vonage lawyer, Roger Warin, said:
What will this mean for Vonage? Death? More importantly...what does this mean for me...a lowly subscriber?
WordPress Plugin: Sexy Comments
April 5, 2007 | 74 Comments
Unhappy with my theme's comment display, I recently re-coded a sexier comment display as a plugin so others can sexify their comments as well.
Features
- Forum-thread-like comment layout: User information to the left, comment to the right.
- Author post highlighting
- Altered Trackback/Pingback Display Formating
- Avatars
- Either display/hide avatars
- Select your avatar service of choice (Gravatar is the only option until I find more avatar services)
- Specify maximum avatar dimension
- Customize default/trackback avatars
- "Number of Comments" Message Customization
- CSS Overriding
Installation
- Download and unzip the sexycomments.zip
- Place sexycomments folder in your wp-content/plugins directory
- Log in to your WordPress admin panel and activate the plugin, then visit the SexyComments submenu of the plugins tab.
- Customize the settings until you have something that works for you.
- Locate the template file(s) in your theme that loops over and displays comments. Remove that comment output loop and replace with:
PHP:
-
<?php sexycomments_print($comments); ?>
NOTE: Be sure not to touch the section that generates the form for adding comments! This plugin does not re-create the comment creation form.
-
- Lastly, consider disabling the plugin CSS and taking the example CSS provided and customize it to suit your theme's color scheme.
- You should be all set, now! w00t w00t! Go make a Gravatar account if you don't already have one and upload an avatar.
April Fools Day DotA 6.50 Release
April 2, 2007 | 10 Comments
So...the DotA guys have a sense of humor and released an April Fools release of DotA. Awesome. You can download it at the DotA forums.
===============
* Added new item
* Tons of code optimizations so this can be the new stable map
* Added capture the flag mode
* Improved Courier Chicken a little bit due selling change last patch
* Renamed Clinkz and Pugna
* Fixed a bug that caused blackhole to end prematurely
* Fixed a critical bug with creep rax destruction that caused it to not upgrade creeps
* Roshan now has a chance to suicide
* Tons of other misc old bugs fixed (way too many to list, many abusable)
* Improved cast range on Eyes in the Forest
* Due to arguments about who should solo, there are now 5 lanes
* Increase Luna's attack range by 10
* Heroes can now suicide if they click on themselves really fast (this is to allow for some improved game dynamics)
* Lowered Zeus Agility by 3 and increased Intelligence by 2
* Naga Siren allies now falls asleep for half the duration of enemies with Song of the Siren (to prevent abuses)
* Auto Attacking is now automatically disabled for your hero if the game engine detects you using Attack/Halt frequently. It is turned back on in a 10 minutes.
* Enchantress Impetus now deals physical damage type instead of pure. She has 35 more attack range to compensate
* Improved Siege unit models
Notes:
------
- This release has been heavily tested and is now the new stable league map.
- Expect a 6.50b soon incase any bugs, lots of recoding went on this version to fix old bugs.
- I jumped to version 6.50 instead of 6.44 due to the hacked versions out there.
- More new content very soon, this was released quickly in order to give leagues an updated map to use.
World of Warcraft Addiction
April 1, 2007 | 2 Comments
This video - while one would first like to chuckle at the thought of a World of Warcraft addiction - speaks volumes to what is a reality for many who play the game.
I, for a time, was spiraling down towards addiction to the game when it was first released...if I had not been married at the time, I'm quite sure my life would have suffered with the addiction. There are a few people I know that are quite thoroughly enthralled by WoW that they spend gobs and gobs of time playing, sometimes forfeiting time with friends and family to opt to raid. It is fun, don't get me wrong, but there is a balance that needs to be reached and many just don't have the willpower to draw that line.
I am one of those people. I can't play a game like that without getting fully involved...I thrive on that type of thing...so steering clear is the best bet. Thanks to Randy I'm a board game geek now and spend time playing Euro Games when I'm not doing stuff with my wife or programming or screwing around with EatPoopUCat.
Not everyone can pull themselves away, though...MMO addiction is sadly a reality. How much longer before we begin having Interventions for addicted gamers?
