Zazzle Tech Blog

When we started our LicensePlateShirts gallery on Zazzle, we actually used the Zazzle API to create an external website where customers could choose a state, then type whatever text they want to appear on that state’s license plate. They would then click over to Zazzle’s design tool with the license plate and custom text already loaded. (See http://www.license-plate-shirts.com/)

This approach works well, but contains a few drawbacks. First, there is a huge time commitment in designing and coding up a website. Even if you already have a website, you’ll need to write some code to add your products. Also, once the user lands on Zazzle, they are dealing with a single product design, and how to change to a different design (another license plate, for example) is not obvious.

Show Me the Buffet
So how do we make it easier for both contributors and customers? For contributors, we need to remove the difficult barrier of writing web code. And customers need to be able to customize an entire buffet of products at once, without jumping through hoops.

Enter project “Template Buffet”…the internal code name for this new feature. Here’s how it works:

1. A contributor creates a set of template products (see documentation)

2. The contributor creates a new gallery product line and publishes these template products in that category.

3. From the Create-a-Product API page, the contributor selects to create a category link. In three easy steps, the contributor generates a web address to this product line. (Visit LicensePlateShirt’s category link)

4. Navigating to this address takes customers to a simple page that shows all the products, and allows easy customization.

No programming needed by the contributor, and no back and forth by the customer to get the right design on the right product. Dinner is served.

Overheard in a Zazzle internal email thread about new button objects. Had to share…

Annette: What's a better unambiguous name for z2 Buttons? 

Ed: How about HTMLButton (since that's really all it is) 

Chris: How about ButtonButton, since it uses a BUTTON tag? 

Ben: How about BenButton since I'm so vain? 

Annette: BenButton.GetLint() 

Ben: That would return Lint.Empty   

Rich: if (aBenButton.GetLint() != Lint.Empty)

          throw up; 

Ben:if (aBenButton.GetLint() != Lint.Empty) {

          aBenButton.NeedsToBathe = true;

          throw up; 

        }

This is a very cool implementation of our creation API! Says-It.com let’s you choose from various people, backgrounds, etc, and add your own pearls of wisdom.

Then choose from a list of Zazzle products, like mousepads, t-shirts, mugs, keychains and more. Easy…breezy…beautiful!

For more info on our creation API, check my previous post.

Howdy Zazzle tech geeks! I know it’s been a while since we’ve posted on the tech blog, but you know how it is when we have a major release to work on (can anyone say new print design tool?)

Well, I just thought I’d chime in quickly here and remind some of you about our cool API tools. With these tools, you can create links from your own websites to customized versions of your own products. So, for example, you can create a template of a greeting card, with a nice border, frilly graphics, and cute accents, and someone can come to YOUR website and enter some text (or an image), and voila! They will be taken to the greeting card design with their info filled in! YAY!

Think of the possibilities, my friends.  Check out our API documentation and start thinking way outside the box!

[CUE MUSIC CRESCENDO]

Narrator: Firefox vs. IE. It’s Browser Wars 2.0….this time it’s personal.

[PAUSE]

Narrator: Well…OK, maybe not “personal” per se, but it’s at least a little heated. Isn’t it? No? Fine.

[CUE MUSIC CRESCENDO]

Narrator: Firefox vs. IE. It’s Browser Wars 2.0. This time it’s EASIER! Yes, if you are a developer, it seems like there is a lot less browser sniffing going on. That’s the good news. The bad news is…

[MUSICAL CLIMAX]

The two big browsers are still not totally compatible. There are times when the exact same CSS renders differently between browsers. What’s a developer to do? Simple. There is a quirk that Internet Explorer has that helps us make conditional CSS declarations within the style sheet itself. It’s the “underscore hack”.

IE apparently reads a style declaration with an underscore normally, where Firefox ignores them. For example:

.myClass {
     width:100px;
     _width:105px;
}

In the above example, the width of class myClass is set to 100 pixels for Firefox, and 105 pixels for IE. Neat, huh? IE reads both declarations, but since the one with the underscore is last, that’s the one that takes. It treats “width” and “_width” as the same thing.

Firefox ignores the declaration with the underscore because technically “_width” is an invalid CSS construct. So it uses the first one…100 pixels.

So this way we can have little IE overrides inside CSS files without having to use complex browser sniffing code.

[CUE APPLAUSE]
[CUE END TITLE AND CREDITS]
[FADE TO BLACK]

Make your own Smiley Central shirt!

What better way to show off our geekitude than by wearing it on our shirts! The Zazzle Web 2.0 Showcase Gallery contains designs by many of us computer-lovin’, code-slinging, gadget-mongering, “I learned Basic when I was 8″ spewing, geeky types. I mean that in the nicest way. Here are some examples:

Got any other geek faves on Zazzle? Comment here and show us just how much of a social life you’re lacking!

For all you beer guzzlin’ PHP fans…

99 Bottles of Beer in PHP

The Portable Network Graphics format (PNG) is a relatively new beast on the web. It’s been around since 1995, but has only recently been gaining popularity amongst web designers now that the major browsers all support it to some degree.

One thing the PNG format is good at is full alpha transparency. Sure, the tried and true GIF image format can set one of its colors to be transparent, but with PNG, you get virtually unlimited levels of transparency! That means you can design an image that fades to whatever background happens to be behind it.

The sample image to the left shows what is possible when saving an image using PNG24 (The 24 refers to 24-bit images. That’s 16.8 million colors! GIF, on the other hand, only supports 256 colors). Notice the peace sign is semi-transparent and shows the alien underneath it at various levels of transparency. Let’s see GIF try to do THAT!

(NOTE: The image sample above is NOT an actual PNG, but rather a JPG. Microsoft Internet Explorer versions 6 and under do not properly handle PNG transparency, and for the purpose of this demonstration, a JPG image was simply more practical. Don’t worry, Internet Explorer version 7 has fixed PNG transparency, so we recommend upgrading. Firefox and Safari users need not worry.)

So how does this help me on Zazzle?
Ok, so this is all well and good, but how can you, as a designer of products for the Zazzle marketplace, take advantage of this? Simple! Always upload PNG24 images! When Zazzle receives an image file for printing, it actually converts the file for display in browsers, but uses the full truecolor, transparent 24-bit PNG file for printing. So if your image fades out, it will fade to the color of the material behind it (red t-shirt, white mug, another image…)

How do I make PNG24 files?
The steps below are for users of Adobe Photoshop. Other image editing programs may differ.

1. Open up Photoshop and create a design as you normally would
2. If your design has transparent areas make sure you turn off any background layers
3. When done with the design, choose File->Save For Web… (or hit ALT-SHIFT-CTRL-S)
4. This opens a big save dialog. On the right, under preset, select PNG-24
5. Make sure the Transparency checkbox is checked
6. Click the Save button, enter a filename, then click Save

Tada! You now have a truecolor transparent PNG! Now upload it to Zazzle and create, create, create!

Well, now we do! And Cut, Paste, and Delete as well. You may have already noticed a little dropdown button we snuck into our design tool, under the Customize It tab on the right. Here’s what it looks like:

So what is this good for? Well, how many times have you wanted to select elements in your design and Copy them? Or Paste what’s on the front of your shirt to the back?

I know I appreciate being able to Select All and Delete, when my artistic inspiration leads me to Blandville, just off the coast of The Boring Sea. Nothing like wiping the slate clean every now and then (better known as destroying the evidence).

We know this small but very useful feature will help speed up monotonous design tasks, and ultimately lead to a more creative design session!

Duplicating or Moving a Design

Using multiple selection, you can duplicate or move an entire design containing multiple image and/or text design objects from one side of a shirt to the other side. This should come in handy when working on any multi-sided products, such as shirts, card, and calendars. To duplicate a design on another side of a product, follow these simple steps…

1. select the side that has the design you would like to duplicate
2. use the “Select all” option in the “Edit” menu to select all the objects in the design
3. use the “Copy” option in the “Edit” menu to copy the current selection to the clipboard
4. select the side on which you would like the design duplicated
5. use the “Paste” option in the “Edit” menu to paste the clipboard’s contents onto the selected side. After using the “Paste” option, the pasted objects will be selected, so you can conveniently move or resize the group of objects.

Now, if you would like to move a design rather than duplicating it, simply use the “Cut” option in step 3 above.

Positioning Integrity

One of the neat things about the way we implemented copy-and-paste is in maintaining the positioning integrity. What this means is that when you copy-and-paste a group of design objects from one side onto another, the pasted group not only maintains the correct positioning relationships between the various objects in the group, but the group as a whole is also positioned similarly on the new side as it was on its side of origin. So, in cards for example, this allows one to duplicate the exact layout of the “inside left” side to the “inside right” side with a simply copy-and-paste (or cut-and-paste, if you want to identically move stuff across).

Load-on-demand Functionality

The copy-and-paste functionality, like the rest of the design tool’s client side functionality, is implemented using JavaScript. It’s worth noting that when we implemented this new feature we made the conscious decision to not add any additional weight to the initial page load. So, the JavaScript library that implements this and a few other advanced features is only loaded on demand – when the user invokes one of the features. So, on the very first use of copy, cut, or paste, there is a one time asynchronous “Ajax” service request that fetches the library and then continues on with the operation.

Appropriate Enabled States

When implementing the “Edit” menu, thorough attention was payed to the disabled state behavior for the various options. So, for example, if you have a side of a product selected that is completely blank, the “Select all” option is disabled because there is nothing to select. Similarly, if you’re on a side that does have design objects but nothing is selected, then the “Select none” option is disabled, because that’s already the existing state. Conversely, if you have all the design objects selected, then the “Select all” option is disabled. Finally, if nothing is selected, then the “Cut”, “Copy”, and “Delete” options are disabled.

Create a product today and try it out for yourself!