Vegan Recipes, Vegetarian Recipes and Motivational Quotes. LIVE SMART, BE WISE, THINK FRESH.

Tag: ingredients Page 2 of 3

New Build: 90 new cocktails, 110 new ingredients

The title says it all. It’s the first time I’m doing a “release announcement” like this, so I think I’ll share the new things I added to the database this time around.

By the way, you may wonder, how did I prioritize the ingredients to add? There’s been more folks visiting the site in the last few days – just look at the screenshot from Google Analytics below:

So I was able to analyze the things that they were looking for and didn’t find, and added them to the database. Here’s the list of new stuff:  

Cocktails Ingredients

1960s Black Devil
Absecon Fruit Punch
Absinthe Cocktail
Absolute Pineapple Martini
Admiral Nelsons Brew
Adonis Cocktail
Alabama Cocktail
Alaska Cocktail
Angels Kiss
Angels Kiss 2
Angels Wing
Bahama Mama 2
Barracuda Bite
Basil Haydens Mint Julep
Bermuda Triangle
Bo Diddley Shooter
Bourbon Sidecar
Brandy Alexander
Brandy Alexander Classic, 1930
Brandy Strudel
Brisk Blue Blazer
Bronx Cocktail No2 Dry
Candy Apple
Captains French Kiss
Chocolate Chip Cookie
Colorado Prarie Fire
Deach Desire
Dutch Orange
Exterminator Coffee
Green Monster
Irish Flag
Jamaican Me Crazy
Jealous Love
Keoke Coffee
Latino Last Scream
Lauries Favorite
Martini Cocktail, Dry
Martini Cocktail, Sweet
Midori Margarita
Mollys Milk
Mountain Altitude
Mountain Grog
Mountain Madness
Mrs. Greens LMC
Original Bushwacker
Original Manhattan
Pass It On
Perfect Manhattan
Perrier Lemonade
Pineapple Smooch
Piss In The Snow
Pousse Cafe
Santa Monica Splash
Sapphire Sensation
Sex On Mountain
Sex on the Slopes
Sexy Lexy
Sidecar Cocktail
Sidecar Special
Ski Tip Coffee
Stairway To Heaven
Stars And Stripes
Stroll Through The Woods
Sugar and Spice
Sun Burn
Sweet Kisses
Tic Tac
Tokyo Tea
Triple Kiss
Trouble In Paradise
Vitamine Maidas
Wake Me In An Hour
Ward Eight
Westin St. Francis Chocolate Martini
White Christmas
Wicky Wacky Woo
Wooly Mamouth

151 rum
7-UP or Sprite
Angostura bitters
anise liqueur
Applejack Brandy
Bacardi 151
Bacardi 151 rum
Bacardi Breezer Orange
Bacardi white rum
black olive
black tea
Bols Blue Curacao
brut Champagne
burgundy wine
California brandy
cham pagne
Chandon sparkling wine
chilled champagne
chopped strawberries
Coca Cola
coconut creme
coconut liqueur
concentrated simple syrup
creme de banana
creme de bananes
creme de cassis
creme de coconut
creme de monte
creme de yvette
creme yvette
crushed pineapple
DeKuyper Tropical Pineapple Liqueur
dr pepper
dry sherry wine
dry white wine
egg white
French roast vanilla bean coffee
Godiva white chocolate liqueur
green chartreuse
green olive
guava juice
heavy sweet cream
Hennessy Cognac
iced tea
Jack Daniels
Johnny Walker Black Label Scotch
juice from one lemon
Ketel One Vodka
lemon slice
lime cordial
lime zest
Malibu coconut liqueur
margarita mix
margarita mix (non-alcoholic)
Margarita mixture ( lemon lime mix )
Moet Rose NV (Non Vintage/house blend) Champagne
Opal Nera
overproof rum
parfait amour
parfait damour
Pina Colada Mix
pineapple chunks
pink grapfruit juice
pink lemonade
Pisang Ambon
pomace brandy
Que Pentas silver tequila
red dinner wine
Red vodka
rum, 151
Rumple Minze peppermint schnapps
Sauza Tres Generations Tequila
sparkling white wine
Sprite or 7Up
squeezed lime juice
Stolichnaya Gold vodka
Stolichnaya Limonaya
tabasco pepper sauce
Tanqueray gin
Ursus vodka
versinthe absinthe
white dinner wine
worchestershire sauce
yellow chartreuse
Yellow Galliano

My goal is to make a site that’s useful for the community – and the only way to do that is to look into what folks are trying to do with it and failing, and enabling those things.


Cocktail Builder: JavaScript Alcoholic

Give me your ingredients..

All right, we know what we want to build: a system that tells you the cocktails that you can make from what you got in your bar. I won’t get tired repeating this mantra until the website comes live, or I come dead, whichever comes first :-).

So, the first task: we need to find out what the user has in their bar. How do we do that?

The problem, really, is another incarnation of a very well-known issue: how do we let the user select several items from a predefined list? One major tweak: the list is freaking huge. Gi-normous. You know how many possible types of vodkas are out there? My database currently has 60, and that’s just vodkas! Altogether, we’re looking at something like 500 valid entries.

But there are also invalid entries! What if one of our users thinks that Chartreuse is spelled with an SH instead of CH?

So, taking all of these requirements into account, let’s look into possible solutions.

Option 1
The obvious solution: drop-down list box, also known as an HTML <SELECT> tag. Looks like this:

I’ll allow myself to remind my faithful readers that drop-down list boxes are generally known to be good with average-sized lists (for example, they are good for a list of states). However, they have quite a few limitations:

1) You need several dropdown controls to let the user pick several items. Each dropdown needs to have quite a bit of HTML associated with it – each entry needs an <OPTION> tag.
2) It’s pretty hard to navigate the dropdown that has more than, say, 100 items, by using a mouse: the little scroll bar is not quite usable: it’s too small.
3) Navigating entries using the keyboard is hard, too: up until Internet Explorer 7, typing “ora” with the keyboard focus on the above dropdown would take you to an entry that starts with “a”, instead of the desired orange juice.
4) Think of “Stoli Raspberry” vodka. Some users may refer to it as “Raspberry Stoli”, others – as “Stoli Raspberry”. Does this mean that we need two different items for the same thing in our dropdown?

Option 2
Multiple-selection list box, or just a regular list box with multi-select enabled. These two look like this:

Other cocktail sites that I looked through (for example,, or, use this kind of user interface.

You know that option 1 stinks – but there’s someone out there, at least, that doesn’t understand that this option is almost just as bad. And that exact thing is one of the reasons why I feel obligated to make the life of all casual alcoholics better by creating the cocktail builder website :-).

Now, why is this option good from afar, but far from good?

1) If you’re using a list box with multiple-selection enabled: do you really think people know that CTRL-clicking will select several items? Plus, when you’re doing this CTRL-clicking voodoo, you’ll inevitably click outside of the control, which will lose all items you worked so hard on.
2) For the multiple checkboxes: a much better user model, but hey, I still need to scroll through an immensely long list, and there’s no good way for me to quickly go to an item (besides using the browser’s CTRL+F, but how is this better than just a text box for entry?)
3) Still no good answer for “Raspberry Stoli” vs “Stoli Raspberry”

Option 3
The holy grail of Web 2.0, Google AutoSuggest. Looks like this:

You’re probably expecting me to start screaming about how freaking cool this is, but I’ll let you decide this yourself :-). One of my favorite sayings goes: “Diplomacy is an art of letting others have it your way”.

Why is this cool?

1) Super-fast entry: type in “vodka”, and see all vodkas out there. Even if vodka is not the first word in the ingredient name, you can still show that option in your auto-suggest box (because you’re the one controlling the logic for what to show)
2) Almost no issues with scalability and real estate on the screen: it doesn’t matter how many items the user has to choose from; they only see options that fit the context of what they typed in.
3) Keyboard navigation: unlike previous options, you can enable up/down arrow navigation through the list of choices, offering enter/tab to actually pick an option. This makes the site much more accessible to people who need it. Recall Joel Spolsky, and design for users that can’t use do precise mouse movements, that don’t have time, that have their cats chewing the mouse cord and babies screaming in the room nearby. Users of my website will very likely be pretty drunk 🙂
4) Multiple entries require multiple auto-complete text boxes, but c’est-la-vie.

There are a few options as to how to implement this auto-complete text box – one big design decision is “get the list live” or “download the static list”.

The Internet, including Google Suggest in particular, is full of examples as to how to implement a “live lookup” auto-complete. For example, user types “vod”, and your program goes back to the server, asks what are the matches for “vod”, and then returns the results to the browser for display. Not a bad idea if you have many, many items to search through.

However, in our case, the list is reasonably small (something like 500 items?), so maybe we can store the entire list on the client? Maybe, as the user downloads the initial webpage, we’ll also pump in all possible options of ingredients they might enter, and then as they type in “vod”, we’ll just go through 500 items on the client side, in JavaScript?

This second approach is what I chose for cocktail builder; there is one big tradeoff here: initial download time of the 500 item list vs on-demand, lazy download of the results. Several outcomes of this tradeoff:

– the price of downloading the list is paid only once per user (remember, your stuff gets cached by the browser); no matter how many ingredients they add – there will be no roundtrips. The users will, I betcha, have 5-10 ingredients in their bar, which will translate to 5-10 queries with the first approach, and only one payoff with the second approach.
– users that come back won’t have the roundtrips.
– server load: less roundtrips means that I don’t need to buy a 10-rack super-powerful server :-). Which means no annoying ads for the users to cover the costs.
– showing matches for user input: clear performance win. As soon as the users types in “vod”, I do snappy JavaScript processing, all on the client side, to run through an ordered list of ingredients (how long does it take a 3GHz computer to do 500 string matches?). If I went with a lazy approach, users would have to wait for a roundtrip, which takes time.

What exactly is the cost of downloading the full ingredient list at load time? My current list of ingredients has 250 items; it’s 13KB, when not compressed (we’ll talk about JavaScript compression at a different time). You can make the judgment yourself, I’m sure.


Cocktail Builder: JavaScript Alcoholic

Page 2 of 3

Powered by WordPress & Theme by Anders Norén