WaxJelly

There’s something great to be said for Tech companies that take all the right things seriously and, in the words of Tyler Derden… “Let the things that do not matter, truly slide”. Google’s Annual April Fools jokes reminds me of a crazy uncle who’s 40 and inexplicably single and rich, Apple’s blatantly taunting and arrogant ads – and then actually delivering consistently stellar products – make them the older brother that would suck if he weren’t so generous with his talents, Firefox’s “we build it, you break it, we make it better” cycle of development makes them the younger brother. The one you’re proud of, but just kinda wish he would plan better.

Don’t launch a “we’re gonna break the guinnes world record for most downloads” marketing campaign, and then fail to beef up the bandwidth, dude. Seriously!

After trying throughout the day yesterday, and even sending out the iChat blasts to friends to get them to download… I finally got Firefox at midnight last night. I was so frustrated. “Sitting here waiting up to try and get a friggin’ browser I already have…”

Nay. Not. Nill. No. I did NOT already have this browser. If you don’t already have it, go get firefox. Which, in and of itself is great. I mean, really great. Smoother scrolling, a great design, better built-in debugging, one-click bookmarks, the works. Not to mention (until now) a nice redesign of the Firefox site itself. But the new web developer tools and add ons, are just fantastic.

Here’s a short list of my new favorites (this assumes that you already use the staples)

• Stylish – Download this now. Even if you’re not a developer, you want it. I promise. You can download users’ style sheets for various popular sites, and even mix and match various style sheets for the same site, and simply ‘enable’ that stylesheet, so you never have to see the crappy site-specific style again(!!!) This opens up such a huge amount of possibilities not only with browsing the web, but with development. Take CSSZenGarden’s idea, apply that to basically every site out there. If users to your site have this plugin, you can offer them the css file (publically), and simply allow them to customize it themselves, and you never have to think about hosting (or supporting) multiple styles again! Now if we can only get everyone else using Firefox.
• CSS Viewer – Enable this add-on, and you can run your cursor around the screen, and get a nice, full markup of the styles relating to that element. It’s got it’s design flaws (I’d like more specific detail on which classes are related, what is the parent class, what’s the path of parent / child relationships to that element, etc…)
• SpeedDial – This is a fantastic “birds-eye-view” of your choice of grid elements, displaying a cached image of your favorite / most-viewed sites on one page, allowing you to see the changes (or bugs) at regular intervals. Set a shorter cache period and setup SpeedDial as your default blank page, and you’ll be able to monitor your dev sites in one screen, throughout the day. Pretty freakin’ great…. and a few more that I just find really usefull…
• PicLens
• ShowIP
• TotalValidator
• ScreenGrab
• YSlow

Let me preface this post by saying that I am not a JavaScript programmer. I play with JavaScript. I have used it for nearly 10 years, and have simply never felt the urge to dive in and become a ‘master’ in any sense. However, with lots of sites popping up that are using stunning, cross-browser ajax (eg: netvibes), it have started to grow curious if it’s even necessary for me to learn the language, if there are such tremendous tools out there to do so much now. Having made this start to a journey, I’ve decided to review the ‘top’ (easiest to find in a google search) AJAX libraries / toolkits.

NOTE: If anyone who works with / owns / represents one of the sites listed below, and would like to offer some help on representing your toolkit accurately, feel free to contact me, I’d love to have your help.

I’m sure this is going to take some time, but I figured I’d get the ball rolling and just fill you in as I go. I’m researching the various AJAX frameworks for a project I’ve got coming up, and I realized that the number players in this field is actually growing, and the differences between these players seem to be shrinking. So, by what criteria could I choose the ‘best’ for what I’m doing.

First things first. Let’s identify the big players in the game. (if your favorite framework / toolkit isn’t listed, feel free to shout about it, and I’ll happily take a look). In no particular order.

1. Prototype / Scriptaculous
2. Yahoo UI (YUI)
3. Dojo
4. JQuery
5. MooTools
6. BackBase
7. Google Toolkit
8. mochikit
9. Spry
10. Rico
11. SmartClient
12. AjsJS
13. fleegix
14. Saja
15. qooxdoo
16. zapatec

(just to reiterate, this is not a ranking. I only used an ‘ordered list’ to be able to quickly reference these individually later)

Next, we’ll consider a variety of criteria including:
Read more »

I’m an iPhone-using, TechCrunch-reading, Wired-subscribing mellinial geek. There, I said it. I’m a geek. I stray for a while, and focus on music and art. I try my best, but I can’t help it. I’m a nerd. And I’m perfectly fine with it.

So, in the interest of all things nerdy, I’m going to tell you how excited I am about the iPhone 3G. The primary thing that bummed me out about the prospect of Apple releasing a new iPhone, was the notion that i would be ’stuck’ with the old one. The reality is, I’ve been absolutely dependent and addicted to my iPhone since the moment I got it. It’s been absolutely absurd. Embarrassing, sometimes. However, when I heard that the iPhone 3G would be faster, I got excited. Then I thought, “Man. that means I won’t be able to sell my current iPhone to get the new one, ’cause the demand will be so low for this ‘old’ technology, and so high for the ‘new’ one, that I’ll just be stuck.”

Then I came across this post which lists the top 4 reasons current iPhone owners don’t need the upgrade. Primarily, the iPhone 2.0 software will be a free upgrade to all iPhones! That made me feel better. I’ll get the developer SDK, games, and a lot of other cool features. Then I read about 3G, and I was bummed again. Wi-Fi speeds without wi-fi?!?!? How could I possibly live without that?
Read more »

More CSS Sprites. This time combined with the ’sliding doors’ technique. I got lots of inspiration from the guys at A List Apart for this, but I thought their examples to be a little more wordy than I really wanted, so I thought I’d write my own. Here’s the working sample of this technique, with my own ugly buttons.

Let’s start with the images themselves.

Here’s ‘left.gif’:

And ‘right.gif’:

Now for the CSS:
Read more »

I just came across this great video on front-end optimization (FEO, you heard it here first).

The 14 rules:

1. Make fewer HTTP requests
2. Use a CDN
3. Add an Expires Header
4. Gzip Components
5. Put stylesheets at the top
6. Move Scripts to the bottom
7. Avoid CSS Expressions
8. Make JS and CSS external
9. Reduce DNS Lookups
10. Minify JS
11. Avoid Redirects
12. Remove Duplicate Scripts
13. Configure ET Tags
14. Make AJAX Cachable

Check out the video if you feel like it. If you don’t wanna watch the whole thing, don’t worry, I’ll do a post on a few of these rules shortly. Starting with making fewer HTTP requests with CSS Sprites. Enjoy.

When I first began studying Design Patterns, I realized that simply programming and trying to come up with more efficient ways to do things had already lead me to a process that was very similar to things like MVC, Singleton, and Factory Methods. Learning the rules and structures has helped my processes tremendously (mainly because it cuts out a huge amount of repetitive trial and error), but the reason they are accessible, for the most part, are because they simply make sense.

When I recently picked up Agile Software Development with SCRUM, I had the same type of experience. It just makes sense. Since we’re all family here, I’ll be vulnerable here and tell you what I thought when I began hearing the ‘buzz’ words like Extreme Programming (XP), and Agile Development.

1. They’re specific to a programming language / environment (WRONG)
2. They are terms relating to a coding style or set of coding methods (WRONG)
3. They are really only necessary / effective for larger-scale, low-level development (WRONG).

Wow, 3 strikes, and I was out… without ever having actually studied the subject. Here are the basic tenants of SCRUM.

(Which, alas, is NOT an acronym. Lame, I know. I was totally hoping it meant something like “Super Crazy Radical Underground Methodologies” or “Software Creation Relating to User Management”. Nope. It’s just some word. Basically. It actually comes from a term in Rugby. Go figure.)
Read more »

In keeping in line with Yahoo!’s “14 rules”, I’ve decided to convert a few projects that I’m working on have them use CSS Sprites instead of icons. This speeds up the user experience in several ways, so let’s address the WHY first.

1. Size: This is the first argument that is usually made, so let’s get this out of the way. Run an experiment. Grab a set of, say, 10 icons. Calculate the sum of their file sizes. Then open up photoshop, throw each of those icons into an image (on a grid, so you can still see them), and save as a flat file (whatever format the icons are in). Compare the size total. The reason the new grid of icons (aka ’sprite’) is smaller, is because the extra data stored in the image (information about the colors, compression type, etc…) takes up space. Whereas in the sprite, all that data still exists, but only once.
2. Speed: The single HTTP request will make your page load faster. Think of it this way, if you have a meal planned, and you have to bring catsup, mustard, mayo, pickles, onions, tomatoes, and lettuce to the table from the fridge, you have a choice. Since you only have 2 hands (browsers can handle 2 http requests at a time), you can bring them two at a time. Or, you can put them all on a tray, and bring them all at once. That, essentially, is what you’re doing with a CSS sprite.
3. Better Code: A sort of hidden advantage to the CSS sprite for me is the fact that it almost ensures that you write your image handling in an external CSS doc. That means you’ll have to actually think about how to handle each image, instead of throwing them into an image tag, and letting the browser do the work. Remember, the more work you do, the less your users’ browser will have to.

Now, let’s talk about how to do this…

Read more »

In my recent search for the easiest, cleanest, php API plugins, I found Phoogle. It's a PHP / Google Maps class that is very cleanly written, and absolutely painless to implement. Though you will still need to apply for your free Google Developer API Key, it's about as quick and easy as it gets for such a powerful functionality. Also, if you use CakePHP, you can install a Phoogle Helper! Here's the basic code to make it work:

First, let's talk just for a second about what a Singleton is and does. The Singleton pattern applies to situations in which there needs to be a single instance of a class. If it is requested after it has been instantiated, it should either return an error, or simply return the same values / parameters / data that was already set. In other words, an instance of itself.

The most common example of this is a database connection. Implementing this pattern allows a programmer to make this single instance easily accessible by many other objects.

Read more »

For the purposes of this discussion, I've created a file named "Grid.as", and added "Grid" as the document class in my "Grid.fla" file. This means it'll automatically run when the .swf runs. The Grid.as code is listed at the end of this post in completion. Here's what the code does.

Since we'll need several aspects of the display package, we'll just include the whole thing with wild card.

Read more »