• 1 onion: diced fine
• 3 cloves garlic: diced fine
• 2 tomatoes: diced fine
• 1/2 tsp cumin seeds
• 1 small piece cinnamon (optional)
• 1 tsp cumin powder
• 1 tsp coriander powder
• Chili powder to taste
• 2 cans black beans

Method

• Heat oil, once hot add the cumin seeds.
• When then begin to sputter, add the cinnamon stick and garlic.
• Saute for a few seconds and add the onions
• When onions become brown, add the tomatoes
• Cook until the tomatoes are fully cooked and add the powders & salt
• This is a good time to taste!
• Now add the black beans, cover and cook for 20 minutes

Ingredients:

• 1 Lauki (bottle gourd), cut into long, thin strips. I sliced the Lauki (Bottle Gourd) lengthwise into 6 pieces and then cut them into long thin strips.
• 1/2 tsp Jira (cumin) seeds
• 1/4 tsp asofetida powder (optional, though a nice touch!)
• 3- 4 red whole red chillies
• 1 1/2 tsp Jira powder
• 1 tsp chilli powder
• 1 can diced tomatoes
• 2 tbs. oil

Method:

1. Add oil, when hot – add the cumin seeds & red chillies.
2. When cumin seeds begin to sputter add canned tomatoes.
3. Then add the asofetida, cumin powder, and chilli powder.
4. Cook on high heat, constantly stirring until the break down partially (about 5 minutes).
5. Add the lauki, reduce heat and cover.
6. Open occasionally and stir so it does not catch at the bottom. A sprinkling of warm water may be required.
7. Cook until lauki is tender

… and voila

Someone told me that they peel the lauki, this probably makes for faster, more even cooking. Though the skin does add some nice texture to the dish!

This could probably work with some other veggie, maybe potatoes

• 1 cup split moong dal
• 1 onion: julienned
• 1 tsp cumin seeds
• 3 red chillies
• 1/2 tsp turmeric
• 1/2 tsp cumin powder

Method

• Boil the moong dal until it’s fully cooked, add salt to taste. A cup of dal, probably needs about 2 – 3 cups of water.
• In a pan, add some oil. When hot, add the cumin seeds & red chillies broken
• When cumin seeds begin to sputter, add the onions.
• When the onions are brown, add the turmeric and cumin powder. Cook for less than 5 seconds
• Add everything to the dal, and cook for another 4 – 5 minutes.

• 1/2 tsp. ginger: finely chopped
• 3 potatoes: peeled, parboiled and cut into 1/2 inch cubes
• 1 tomato: chopped
• 1/2 onion chopped
• 1/2 cup spinach
• 1 tsp mustard seeds
• 3 green chillies (optional)
• 3 tbsp kasoori methi (dried fenugreek leaves)
• Chilli powder: to taste
• 1 tsp cilantro

Method

• Peel, parboil and cut potatoes into 1/2 inch cubes
• Add 2 tbsp of oil in a large skillet. When hot add the mustard seeds
• When the mustard seeds begin to sputter, add the onions
• Once onions are brown, add the ginger, tomatoes and potatoes, spinach, fenugreek leaves
• Also add chilli powder & turmeric
• Cover & cook until potatoes are well done.
• Note: if it begins to stick, just sprinkle some water and cover.

• 1 cauliflower: washed & small florets
• 2 tbsp olive oil
• 2 tsp Penzey’s rogan josh masala (see alternative if you don’t have this)
• 1 tsp chilli powder
• Cilantro leaves (optional)

Method

• Preheat over to 400F
• Mix oil, masala, chilli powder, salt in a big bowl
• Toss cauliflower florets in the mix
• Put on a cookie tray and bake for 20 – 30 minutes until cooked
• Put the cooked cauliflower in a bowl, mix in the cilantro and chopped tomato and cover. (The tomato will cook in the heat)

Note: Use 2 tsp of coriander powder & 1/2 tsp of cumin powder for a variation of the rogan josh masala.

I am in the process of redesigning/reproductizing our error screens and went in search of some ideas and wow, did I find several! Plus I didn’t even have to work very hard to find some pretty darn cool collections!

Here’s a short list:

• http://www.webanddesigners.com/30-error-404-page-designs
• http://dzineblog.com/2009/11/50-cool-examples-of-custom-error-404-pages.html
• http://patterntap.com/tap/collection/404-pages
• http://www.bspcn.com/2007/09/13/collection-of-awesome-404-pages/

Enjoy! Do let me know if you read this collection of mega collections!

The HTML

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia.
Fusce eu purus eget diam vehicula auctor nec eu elit.
Morbi consequat facilisis orci vel malesuada.
Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim.
Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien.
Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.
</p>

The CSS

<style>
body{background-color:#333; color: #fff}
p{font-family: Rockwell Condensed; font-size:32px}
p:first-child:first-letter
{ float: left; color: #fc0; font-size: 90px;
 line-height: 40px; padding-top: 4px;
padding-right: 5px; padding-left: 3px;  }
</style>

The Result

The Result

Resources

• http://css-tricks.com/snippets/css/drop-caps/
• http://pixelspread.com/blog/324/easy-drop-caps

Getting Started

Before you begin down this road, there are a few things that need to get done.

1. Download the Cufón javascript: http://cufon.shoqolate.com/js/cufon-yui.js. Save it locally, we’ll use it shortly.
2. Figure out what fonts you are going to use. You’ll need access to the original .otf or .ttf file and also own distribution rights (if not open source). There’s a list of some cool open source fonts below.
3. Generate and download your Cufón font file: http://cufon.shoqolate.com/generate/. Some notes:
   • Only upload the font typefaces that are going to be used. For example, if your design doesn’t call for italic or bold-italic then don’t upload these. The less you upload the smaller your file – and therefore faster loading!
   • Glyphs: Only select the glyphs you’ll be using. For example, if it unlikely that your title will have numbers then don’t include the numeric glyph. Once again, the less glyphs the smaller your font file.
4. In your CSS use a font-family that is similar in style and size to the font used by Cufón. This will allow the design to look somewhat similar if Cufón doesn’t render correctly.

Ready to go!

In this example, I’ve used Titilium font for headings and font hyperlink tags in the my navigation.

1. Include the JavaScript for Cufón and the Cufón font.

   <script type="text/javascript" src="js/cufon-yui.js"></script>
   <script type="text/javascript" src="js/TitilliumMaps.font.js"></script>

2. The basic HTML

   <h1>Business Solutions</h1>
   <h2>Business Insurance</h2>

3. Tell cufon to replace the fonts for headings and the href tags in the box-nav div tag

   <script type="text/javascript">
       Cufon.replace('h1, h2, h3, .box-nav li a', { fontFamily: 'TitilliumMaps26L', hover:true });
   </script>
   
   OR
   
   <script type="text/javascript">
   Cufon.replace('h1', { fontFamily: 'TitilliumMaps26L' });
   Cufon.replace('h2', { fontFamily: 'TitilliumMaps26L>' });
   etc.
   </script>

4. To use different fonts for different tags, download the cufon font file for each of the fonts

   <script type="text/javascript">
   Cufon.replace('h1', { fontFamily: 'Font family 1' });
   Cufon.replace('h2', { fontFamily: 'Font family 2' });
   etc.
   </script>

5. Add JavaScript error handling in case there is an error loading

   function handleError() {	return true;}
   window.onerror = handleError;

6. Note: The font color, size and hover color is controlled via the css classes associated with the HTML element.

Resources

• http://cufon.shoqolate.com/generate/
• http://www.youtube.com/watch?v=uPQ4TlXatVU
• How to from Cameron Moll
• Cool open source fonts:
  • 35 Free Fonts
  • 10 delicious free fonts
  • 103 open source title fonts
  • More beautiful quality free fonts
• Some of my fave fonts (mostly sans!):
  • Titilium
  • AllerSans
  • M+ Outline
  • MG Open Modata
  • Fontin Sans
  • Delicious
  • Secca Std
  • League Gothic
  • Qlassik

The numbered elements in the screen-capture indicate a list that has been styled using CSS. Click on the image to view the full size.

Power of lists!

Use this	To look like this
The HTML: <div id = "list1"> <ul class = "list1"> <li id = "first">first</li> <li id = "middle">middle</li> <li id = "last">last</li> </ul> </div>	List 1
UL LI { list-style: square; }	List 2
UL LI { list-style: none url(list_bullet.gif); }	List 3
UL, LI { padding: 0px; margin: 0px; } UL LI { list-style: none; background-repeat: no-repeat; padding-left: 34px; margin-bottom: 10px; } #first {background-image: url(side_kb.png);} #middle {background-image: url(side_email.png);} #last {background-image: url(side_chat.png);}	List 4
UL, LI { padding: 0px; margin: 0px; } UL { width: 200px; border: 1px solid #AAA; } UL LI { border-bottom: 1px solid #AAA; list-style: none; padding: 5px; } UL #last { border-bottom: none; }	List 5
UL, LI { padding: 0px; margin: 0px; } UL { width: 350px; float: left; } LI { border-right: 2px solid #F8F8F8; border-left: 0px solid #000000; width: 90px; list-style: none; float: left; margin: 0px; padding-left: 2px; text-align: center; }	List 6
#list7 { width: 300px; height: 32px; background-color: #102E41; margin-top: 10px; font-size:20px; } UL, LI { list-style-type: none; padding: 0; margin: 0; } LI { background: #D53804 url(breadcrumb.gif) no-repeat left center; float: left; height: 32px; line-height: 32px; padding: 0px 6px 0px 15px; color: #fff; } #first { background: #D53804 none; } #last { background: url(breadcrumb.gif) no-repeat left center; background-color: #102E41; }	List 7
UL, LI { padding: 0px; margin: 0px; } LI { width: 90px; list-style: none; float: left; margin: 0px; padding: 30px 0px 0px 0px; height:50px; text-align: center; background-position: center top; background-repeat: no-repeat; } #first { background-image: url(side_kb.png); } #middle { background-image: url(side_email.png); } #last { background-image: url(side_chat.png); }	List 8

Download the HTML and CSS.